@smarterplan/ngx-smarterplan-locations 0.2.13 → 0.2.15

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

@@ -1760,13 +1760,17 @@ function buttonIsInSelection(button, selection) {
         bounds.left < selection.left + selection.width);
 }
 /**
- * Styles the button that represents a sweep on the plan: green-added to zone, red -not added
+ * Styles the button that represents a sweep on the plan: green-added to zone, red -not added, gray - disabled, orange - occupied
  * @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, isOccupied = false) {
-    if (isOccupied) {
+function styleButton(button, isAdded = false, isOccupied = false, disabled = false) {
+    if (disabled) {
+        button.style.backgroundImage = `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=#636363&height=17&width=17")`;
+        button.style.cursor = "auto";
+    }
+    else if (isOccupied) {
         button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=orange&height=17&width=17")`;
     }
     else {
@@ -1893,6 +1897,8 @@ class SweepPlanSelectionComponent {
         this.navIDsZoneEdit = [];
         // sweeps belonging to any audio zone
         this.occupiedSweeps = [];
+        // sweeps unavailable (cannot be chosen)
+        this.unavailableSweeps = [];
         /** all scan buttons Element */
         this.buttonElements = [];
         /** Scan buttons that are in the current selection */
@@ -1930,21 +1936,26 @@ class SweepPlanSelectionComponent {
                 yield this.setScanByDraw(navigations);
             this.buttonElements = yield showScanPointsOnPlanInDiv(this.chosenPlan, this.divPlan, navigations);
             for (const element of this.buttonElements) {
-                if ((this.navIDsZoneEdit.length > 0 &&
-                    this.navIDsZoneEdit.includes(element.id))
-                    || this.chosenScansOnPlan.includes(element.id)) {
-                    styleButton(element, true);
-                    if (!this.chosenScansOnPlan.includes(element.id)) {
-                        this.chosenScansOnPlan.push(element.id);
-                    }
-                }
-                else if (this.occupiedSweeps && this.occupiedSweeps.includes(element.id)) {
-                    styleButton(element, false, true);
+                if (this.unavailableSweeps && this.unavailableSweeps.includes(element.id)) {
+                    styleButton(element, false, false, true);
                 }
                 else {
-                    styleButton(element);
+                    if ((this.navIDsZoneEdit.length > 0 &&
+                        this.navIDsZoneEdit.includes(element.id))
+                        || this.chosenScansOnPlan.includes(element.id)) {
+                        styleButton(element, true);
+                        if (!this.chosenScansOnPlan.includes(element.id)) {
+                            this.chosenScansOnPlan.push(element.id);
+                        }
+                    }
+                    else if (this.occupiedSweeps && this.occupiedSweeps.includes(element.id)) {
+                        styleButton(element, false, true);
+                    }
+                    else {
+                        styleButton(element, false);
+                    }
+                    element.addEventListener("click", (event) => this.onButtonScanClicked(event.target));
                 }
-                element.addEventListener("click", (event) => this.onButtonScanClicked(event.target));
             }
             this.panZoom = panzoom(this.divPlan, {
                 bounds: true,
@@ -2235,7 +2246,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", 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: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.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", unavailableSweeps: "unavailableSweeps" }, 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: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.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"] }]
@@ -2249,6 +2260,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }], occupiedSweeps: [{
                 type: Input
+            }], unavailableSweeps: [{
+                type: Input
             }], sweepsSelected: [{
                 type: Output
             }] } });
@@ -2520,7 +2533,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", newZoneDataFromEditor: "newZoneDataFromEditor", chosenPlan: "chosenPlan", isMuseumVisit: "isMuseumVisit", defaultZone: "defaultZone" }, outputs: { updatedZone: "updatedZone" }, 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]=\"newZoneDataFromEditor\" [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: i6.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: i6.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", newZoneDataFromEditor: "newZoneDataFromEditor", chosenPlan: "chosenPlan", isMuseumVisit: "isMuseumVisit", defaultZone: "defaultZone" }, outputs: { updatedZone: "updatedZone" }, 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]=\"newZoneDataFromEditor\" [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", "unavailableSweeps"], outputs: ["sweepsSelected"] }], directives: [{ type: i6.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: i6.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]=\"newZoneDataFromEditor\" [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"] }]
@@ -2562,6 +2575,7 @@ class AddAudioZoneComponent {
         this.isAddingAudio = false;
         this.scansModified = false;
         this.occupiedSweeps = [];
+        this.unavailableSweeps = [];
         this.working = false;
         this.audioUploaded = false;
     }
@@ -2570,6 +2584,7 @@ class AddAudioZoneComponent {
             // we are editing zone
             this.chosenAudio = this.currentAudioZone.audio;
             this.chosenScansOnPlan = this.currentAudioZone.sweepIDs;
+            this.parentZone = this.currentAudioZone.parent;
         }
         this.setup();
     }
@@ -2583,8 +2598,13 @@ class AddAudioZoneComponent {
                 // first time creating Audio Zone 
                 this.audioLayer = yield this.layerService.createLayerForOrganisation("AUDIO", this.currentOrgId);
             }
-            this.audioZones = this.zones.filter((zone) => zone.layerID === this.audioLayer.id);
+            if (!this.parentZone) {
+                this.parentZone = this.defaultZone;
+            }
+            this.audioZones = this.zones.filter((zone) => zone.audioID && zone.parentID === this.parentZone.id);
             this.occupiedSweeps = this.audioZones.flatMap((zone) => zone.sweepIDs);
+            // unavailable sweeps: sweeps that do not belong to parent zone
+            this.unavailableSweeps = this.defaultZone.sweepIDs.filter((sweep) => !this.parentZone.sweepIDs.includes(sweep));
             yield this.getAudios();
             this.commentForm = this.fb.group({
                 title: [null, Validators.required],
@@ -2613,9 +2633,9 @@ class AddAudioZoneComponent {
                     surface: 0,
                     spaceID: this.spaceID,
                     layerID: this.audioLayer.id,
-                    parentID: this.defaultZone.id,
+                    parentID: this.parentZone.id,
                     isMuseumVisitZone: false,
-                    isMultipleFloorZone: true,
+                    isMultipleFloorZone: this.parentZone.isMultipleFloorZone,
                     audioID: this.chosenAudio.id,
                 };
                 try {
@@ -2743,10 +2763,10 @@ class AddAudioZoneComponent {
     }
 }
 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=\"d-flex justify-content-center\" *ngIf=\"working\">\r\n                    <lib-loader></lib-loader>\r\n                </div>\r\n                \r\n                <div class=\"mt-3\">\r\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || working\">{{'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    <ngb-alert type=\"success\" [dismissible]=\"true\" *ngIf=\"!working && audioUploaded\" (closed)=\"audioUploaded=false\">\r\n        {{ 'add-audio.success' | translate }} !\r\n    </ngb-alert>\r\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio && audiosForSpace\">\r\n       \r\n        <div class=\"instruction-row\" >\r\n            <p>1.</p>\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.add' | translate}}</button>\r\n        </div>\r\n        <div class=\"instruction-row\">\r\n            <p>2.</p>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\" [disabled]=\"!chosenAudio\">\r\n                    {{'Choose scan points on plan' | translate}}</button>\r\n\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onDeleteAudio()\" [disabled]=\"!chosenAudio\">\r\n                        {{'Delete audio' | translate}}</button>\r\n            \r\n        </div>\r\n        <div class=\"instruction-row\" *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 || !this.chosenAudio\" (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: [".instruction-row{display:flex;align-items:center;margin-top:1rem}.instruction-row button{margin-bottom:0}.instruction-row p{margin-bottom:0;margin-left:5px;margin-right:5px}\n"], components: [{ type: i2.LoaderComponent, selector: "lib-loader", inputs: ["useLogo", "color"] }, { type: i7.NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }, { type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "navIDsZoneEdit", "occupiedSweeps"], outputs: ["sweepsSelected"] }], directives: [{ type: i6.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: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.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", parentZone: "parentZone", 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=\"d-flex justify-content-center\" *ngIf=\"working\">\r\n                    <lib-loader></lib-loader>\r\n                </div>\r\n                \r\n                <div class=\"mt-3\">\r\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || working\">{{'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    <ngb-alert type=\"success\" [dismissible]=\"true\" *ngIf=\"!working && audioUploaded\" (closed)=\"audioUploaded=false\">\r\n        {{ 'add-audio.success' | translate }} !\r\n    </ngb-alert>\r\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio && audiosForSpace\">\r\n       \r\n        <div class=\"instruction-row\" >\r\n            <p>1.</p>\r\n            <div ngbDropdown class=\"d-inline-block\">\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.add' | translate}}</button>\r\n        </div>\r\n        <div class=\"instruction-row\">\r\n            <p>2.</p>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\" [disabled]=\"!chosenAudio\">\r\n                    {{'Choose scan points on plan' | translate}}</button>\r\n\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onDeleteAudio()\" [disabled]=\"!chosenAudio\">\r\n                        {{'Delete audio' | translate}}</button>\r\n            \r\n        </div>\r\n        <div class=\"instruction-row\" *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 || !this.chosenAudio\" (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        [occupiedSweeps]=\"occupiedSweeps\" [unavailableSweeps]=\"unavailableSweeps\"\r\n        (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>\r\n", styles: [".instruction-row{display:flex;align-items:center;margin-top:1rem}.instruction-row button{margin-bottom:0}.instruction-row p{margin-bottom:0;margin-left:5px;margin-right:5px}\n"], components: [{ type: i2.LoaderComponent, selector: "lib-loader", inputs: ["useLogo", "color"] }, { type: i7.NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }, { type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "navIDsZoneEdit", "occupiedSweeps", "unavailableSweeps"], outputs: ["sweepsSelected"] }], directives: [{ type: i6.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: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.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=\"d-flex justify-content-center\" *ngIf=\"working\">\r\n                    <lib-loader></lib-loader>\r\n                </div>\r\n                \r\n                <div class=\"mt-3\">\r\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || working\">{{'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    <ngb-alert type=\"success\" [dismissible]=\"true\" *ngIf=\"!working && audioUploaded\" (closed)=\"audioUploaded=false\">\r\n        {{ 'add-audio.success' | translate }} !\r\n    </ngb-alert>\r\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio && audiosForSpace\">\r\n       \r\n        <div class=\"instruction-row\" >\r\n            <p>1.</p>\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.add' | translate}}</button>\r\n        </div>\r\n        <div class=\"instruction-row\">\r\n            <p>2.</p>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\" [disabled]=\"!chosenAudio\">\r\n                    {{'Choose scan points on plan' | translate}}</button>\r\n\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onDeleteAudio()\" [disabled]=\"!chosenAudio\">\r\n                        {{'Delete audio' | translate}}</button>\r\n            \r\n        </div>\r\n        <div class=\"instruction-row\" *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 || !this.chosenAudio\" (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: [".instruction-row{display:flex;align-items:center;margin-top:1rem}.instruction-row button{margin-bottom:0}.instruction-row 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=\"d-flex justify-content-center\" *ngIf=\"working\">\r\n                    <lib-loader></lib-loader>\r\n                </div>\r\n                \r\n                <div class=\"mt-3\">\r\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || working\">{{'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    <ngb-alert type=\"success\" [dismissible]=\"true\" *ngIf=\"!working && audioUploaded\" (closed)=\"audioUploaded=false\">\r\n        {{ 'add-audio.success' | translate }} !\r\n    </ngb-alert>\r\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio && audiosForSpace\">\r\n       \r\n        <div class=\"instruction-row\" >\r\n            <p>1.</p>\r\n            <div ngbDropdown class=\"d-inline-block\">\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.add' | translate}}</button>\r\n        </div>\r\n        <div class=\"instruction-row\">\r\n            <p>2.</p>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\" [disabled]=\"!chosenAudio\">\r\n                    {{'Choose scan points on plan' | translate}}</button>\r\n\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onDeleteAudio()\" [disabled]=\"!chosenAudio\">\r\n                        {{'Delete audio' | translate}}</button>\r\n            \r\n        </div>\r\n        <div class=\"instruction-row\" *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 || !this.chosenAudio\" (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        [occupiedSweeps]=\"occupiedSweeps\" [unavailableSweeps]=\"unavailableSweeps\"\r\n        (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>\r\n", styles: [".instruction-row{display:flex;align-items:center;margin-top:1rem}.instruction-row button{margin-bottom:0}.instruction-row 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: [{
@@ -2755,6 +2775,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }], zones: [{
                 type: Input
+            }], parentZone: [{
+                type: Input
             }], currentAudioZone: [{
                 type: Input
             }] } });
@@ -2933,8 +2955,12 @@ class ZonesComponent {
             label: "New Museum Itinerary",
         });
     }
-    onAddAudioZone() {
+    onAddAudioZone(parentZone) {
+        this.parentZoneForAudio = parentZone;
         this.isAddingAudioTrack = true;
+        this.menuItems.push({
+            label: parentZone.name,
+        });
         this.menuItems.push({
             label: "add-audio.add",
         });
@@ -2980,10 +3006,10 @@ class ZonesComponent {
     }
 }
 ZonesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ZonesComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.ZoneService }, { token: i2.SpaceService }, { token: i2.VisitService }, { token: i2.NavigationService }, { token: i2.BaseUserService }, { token: i2.PlanService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-ZonesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ZonesComponent, selector: "lib-zones", outputs: { updatedZone: "updatedZone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\">\r\n    <div class=\"m-3\">\r\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"row\" *ngIf=\"!isEditingZone && !isAddingAudioTrack\">\r\n      <div class=\"col-md-6\">\r\n        <ul class=\"list-group list-group-flush\" >\r\n          <li class=\"list-group-item default-zone-line-item\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\" *ngIf=\"defaultZone\">\r\n              {{defaultZone.name}}\r\n              <div class=\"default-zone-label\">{{ \"whole space\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"defaultShowing\" (click)=\"onToggleDefaultZone()\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"defaultShowing\">\r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: \r\n                  {{defaultZone.layer ? defaultZone.layer.name : \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"defaultZone.surface\">\r\n                  {{'Surface' | translate}}, m<sup>2</sup>: {{defaultZone.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!defaultZone.virtual\">{{'Scan Points' | translate}}:\r\n                  {{defaultZone.sweepIDs ? defaultZone.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n              </ul>\r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == defaultZone.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">\r\n                            {{'Surface' | translate}},m<sup>2</sup>: {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\r\n                            {{'Zone not visible in 3D visit' | translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n          \r\n          <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n              {{floor.name}}\r\n              <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\r\n              <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"index==floorDetails\" (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"index==floorDetails\">  \r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\r\n                  floor.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{floor.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\r\n                  {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\r\n                  translate}}</li>\r\n              </ul>\r\n              <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\r\n                translate}}</button>\r\n  \r\n              <!-- List of children zones -->\r\n  \r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == floor.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">{{'Zone not visible in 3D visit'\r\n                            |\r\n                            translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n  \r\n        <div>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\r\n            translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\"\r\n            *ngIf=\"isMuseumModule\"> {{'Add museum itinerary' | translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone()\"\r\n            *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-6\">\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\r\n          <div class=\"spinner-border\" role=\"status\">\r\n            <span class=\"visually-hidden\">Loading...</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\" style=\"overflow: hidden;\" *ngIf=\"currentZone\">\r\n          <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\" *ngIf=\"currentPlan\"></div>\r\n          <div *ngIf=\"!currentPlan && plans && !loadingPlan\">\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentZone.virtual && !currentZone.isMultipleFloorZone\">\r\n              {{ 'Plan is not calibrated' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.virtual\">\r\n              {{ 'No scan points chosen' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.isMultipleFloorZone\">\r\n              {{ 'The zone is on several floors' | translate}}\r\n            </div>\r\n          </div>\r\n          \r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isEditingZone\">\r\n      <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\r\n        [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\" [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isAddingAudioTrack\">\r\n      <lib-add-audio-zone [spaceID]=\"spaceID\" [defaultZone]=\"defaultZone\" [zones]=\"allZones\" [currentAudioZone]=\"zoneForEdit\"\r\n      (updatedZone)=\"editCompleted($event)\"></lib-add-audio-zone>\r\n    </div>\r\n  </div>\r\n", styles: [".museum-label{background-color:#6f3974;font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}.default-zone-line-item{border-bottom-width:3px}.default-zone-label{background-color:var(--smarterplan-primary);font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }, { type: AddZoneComponent, selector: "lib-add-zone", inputs: ["zoneEdit", "spaceID", "images360", "navigationIDs", "zones", "newZoneDataFromEditor", "chosenPlan", "isMuseumVisit", "defaultZone"], outputs: ["updatedZone"] }, { type: AddAudioZoneComponent, selector: "lib-add-audio-zone", inputs: ["spaceID", "defaultZone", "zones", "currentAudioZone"], outputs: ["updatedZone"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3.TranslatePipe, "keyvalue": i6.KeyValuePipe } });
+ZonesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ZonesComponent, selector: "lib-zones", outputs: { updatedZone: "updatedZone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\">\r\n    <div class=\"m-3\">\r\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"row\" *ngIf=\"!isEditingZone && !isAddingAudioTrack\">\r\n      <div class=\"col-md-6\">\r\n        <ul class=\"list-group list-group-flush\" >\r\n          <li class=\"list-group-item default-zone-line-item\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\" *ngIf=\"defaultZone\">\r\n              {{defaultZone.name}}\r\n              <div class=\"default-zone-label\">{{ \"whole space\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"defaultShowing\" (click)=\"onToggleDefaultZone()\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"defaultShowing\">\r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: \r\n                  {{defaultZone.layer ? defaultZone.layer.name : \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"defaultZone.surface\">\r\n                  {{'Surface' | translate}}, m<sup>2</sup>: {{defaultZone.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!defaultZone.virtual\">{{'Scan Points' | translate}}:\r\n                  {{defaultZone.sweepIDs ? defaultZone.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n              </ul>\r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == defaultZone.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">\r\n                            {{'Surface' | translate}},m<sup>2</sup>: {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\r\n                            {{'Zone not visible in 3D visit' | translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\r\n                        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\r\n                          *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n          \r\n          <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n              {{floor.name}}\r\n              <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\r\n              <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"index==floorDetails\" (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"index==floorDetails\">  \r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\r\n                  floor.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{floor.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\r\n                  {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\r\n                  translate}}</li>\r\n              </ul>\r\n              <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\r\n                translate}}</button>\r\n  \r\n              <!-- List of children zones -->\r\n  \r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == floor.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">{{'Zone not visible in 3D visit'\r\n                            |\r\n                            translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\r\n                        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\r\n                          *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n  \r\n        <div>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\r\n            translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\"\r\n            *ngIf=\"isMuseumModule\"> {{'Add museum itinerary' | translate}}</button>\r\n          <!-- <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone()\"\r\n            *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button> -->\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-6\">\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\r\n          <div class=\"spinner-border\" role=\"status\">\r\n            <span class=\"visually-hidden\">Loading...</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\" style=\"overflow: hidden;\" *ngIf=\"currentZone\">\r\n          <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\" *ngIf=\"currentPlan\"></div>\r\n          <div *ngIf=\"!currentPlan && plans && !loadingPlan\">\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentZone.virtual && !currentZone.isMultipleFloorZone\">\r\n              {{ 'Plan is not calibrated' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.virtual\">\r\n              {{ 'No scan points chosen' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.isMultipleFloorZone\">\r\n              {{ 'The zone is on several floors' | translate}}\r\n            </div>\r\n          </div>\r\n          \r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isEditingZone\">\r\n      <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\r\n        [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\" [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isAddingAudioTrack\">\r\n      <lib-add-audio-zone [spaceID]=\"spaceID\" [defaultZone]=\"defaultZone\" [parentZone]=\"parentZoneForAudio\" [zones]=\"allZones\" [currentAudioZone]=\"zoneForEdit\"\r\n      (updatedZone)=\"editCompleted($event)\"></lib-add-audio-zone>\r\n    </div>\r\n  </div>\r\n", styles: [".museum-label{background-color:#6f3974;font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}.default-zone-line-item{border-bottom-width:3px}.default-zone-label{background-color:var(--smarterplan-primary);font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }, { type: AddZoneComponent, selector: "lib-add-zone", inputs: ["zoneEdit", "spaceID", "images360", "navigationIDs", "zones", "newZoneDataFromEditor", "chosenPlan", "isMuseumVisit", "defaultZone"], outputs: ["updatedZone"] }, { type: AddAudioZoneComponent, selector: "lib-add-audio-zone", inputs: ["spaceID", "defaultZone", "zones", "parentZone", "currentAudioZone"], outputs: ["updatedZone"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3.TranslatePipe, "keyvalue": i6.KeyValuePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ZonesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-zones', template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\">\r\n    <div class=\"m-3\">\r\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"row\" *ngIf=\"!isEditingZone && !isAddingAudioTrack\">\r\n      <div class=\"col-md-6\">\r\n        <ul class=\"list-group list-group-flush\" >\r\n          <li class=\"list-group-item default-zone-line-item\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\" *ngIf=\"defaultZone\">\r\n              {{defaultZone.name}}\r\n              <div class=\"default-zone-label\">{{ \"whole space\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"defaultShowing\" (click)=\"onToggleDefaultZone()\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"defaultShowing\">\r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: \r\n                  {{defaultZone.layer ? defaultZone.layer.name : \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"defaultZone.surface\">\r\n                  {{'Surface' | translate}}, m<sup>2</sup>: {{defaultZone.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!defaultZone.virtual\">{{'Scan Points' | translate}}:\r\n                  {{defaultZone.sweepIDs ? defaultZone.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n              </ul>\r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == defaultZone.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">\r\n                            {{'Surface' | translate}},m<sup>2</sup>: {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\r\n                            {{'Zone not visible in 3D visit' | translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n          \r\n          <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n              {{floor.name}}\r\n              <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\r\n              <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"index==floorDetails\" (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"index==floorDetails\">  \r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\r\n                  floor.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{floor.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\r\n                  {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\r\n                  translate}}</li>\r\n              </ul>\r\n              <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\r\n                translate}}</button>\r\n  \r\n              <!-- List of children zones -->\r\n  \r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == floor.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">{{'Zone not visible in 3D visit'\r\n                            |\r\n                            translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n  \r\n        <div>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\r\n            translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\"\r\n            *ngIf=\"isMuseumModule\"> {{'Add museum itinerary' | translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone()\"\r\n            *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-6\">\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\r\n          <div class=\"spinner-border\" role=\"status\">\r\n            <span class=\"visually-hidden\">Loading...</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\" style=\"overflow: hidden;\" *ngIf=\"currentZone\">\r\n          <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\" *ngIf=\"currentPlan\"></div>\r\n          <div *ngIf=\"!currentPlan && plans && !loadingPlan\">\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentZone.virtual && !currentZone.isMultipleFloorZone\">\r\n              {{ 'Plan is not calibrated' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.virtual\">\r\n              {{ 'No scan points chosen' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.isMultipleFloorZone\">\r\n              {{ 'The zone is on several floors' | translate}}\r\n            </div>\r\n          </div>\r\n          \r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isEditingZone\">\r\n      <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\r\n        [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\" [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isAddingAudioTrack\">\r\n      <lib-add-audio-zone [spaceID]=\"spaceID\" [defaultZone]=\"defaultZone\" [zones]=\"allZones\" [currentAudioZone]=\"zoneForEdit\"\r\n      (updatedZone)=\"editCompleted($event)\"></lib-add-audio-zone>\r\n    </div>\r\n  </div>\r\n", styles: [".museum-label{background-color:#6f3974;font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}.default-zone-line-item{border-bottom-width:3px}.default-zone-label{background-color:var(--smarterplan-primary);font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}\n"] }]
+            args: [{ selector: 'lib-zones', template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\">\r\n    <div class=\"m-3\">\r\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"row\" *ngIf=\"!isEditingZone && !isAddingAudioTrack\">\r\n      <div class=\"col-md-6\">\r\n        <ul class=\"list-group list-group-flush\" >\r\n          <li class=\"list-group-item default-zone-line-item\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\" *ngIf=\"defaultZone\">\r\n              {{defaultZone.name}}\r\n              <div class=\"default-zone-label\">{{ \"whole space\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"defaultShowing\" (click)=\"onToggleDefaultZone()\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"defaultShowing\">\r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: \r\n                  {{defaultZone.layer ? defaultZone.layer.name : \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"defaultZone.surface\">\r\n                  {{'Surface' | translate}}, m<sup>2</sup>: {{defaultZone.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!defaultZone.virtual\">{{'Scan Points' | translate}}:\r\n                  {{defaultZone.sweepIDs ? defaultZone.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n              </ul>\r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == defaultZone.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">\r\n                            {{'Surface' | translate}},m<sup>2</sup>: {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\r\n                            {{'Zone not visible in 3D visit' | translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\r\n                        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\r\n                          *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n          \r\n          <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n              {{floor.name}}\r\n              <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\r\n              <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"index==floorDetails\" (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"index==floorDetails\">  \r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\r\n                  floor.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{floor.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\r\n                  {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\r\n                  translate}}</li>\r\n              </ul>\r\n              <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\r\n                translate}}</button>\r\n  \r\n              <!-- List of children zones -->\r\n  \r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == floor.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">{{'Zone not visible in 3D visit'\r\n                            |\r\n                            translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\r\n                        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\r\n                          *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n  \r\n        <div>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\r\n            translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\"\r\n            *ngIf=\"isMuseumModule\"> {{'Add museum itinerary' | translate}}</button>\r\n          <!-- <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone()\"\r\n            *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button> -->\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-6\">\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\r\n          <div class=\"spinner-border\" role=\"status\">\r\n            <span class=\"visually-hidden\">Loading...</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\" style=\"overflow: hidden;\" *ngIf=\"currentZone\">\r\n          <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\" *ngIf=\"currentPlan\"></div>\r\n          <div *ngIf=\"!currentPlan && plans && !loadingPlan\">\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentZone.virtual && !currentZone.isMultipleFloorZone\">\r\n              {{ 'Plan is not calibrated' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.virtual\">\r\n              {{ 'No scan points chosen' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.isMultipleFloorZone\">\r\n              {{ 'The zone is on several floors' | translate}}\r\n            </div>\r\n          </div>\r\n          \r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isEditingZone\">\r\n      <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\r\n        [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\" [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isAddingAudioTrack\">\r\n      <lib-add-audio-zone [spaceID]=\"spaceID\" [defaultZone]=\"defaultZone\" [parentZone]=\"parentZoneForAudio\" [zones]=\"allZones\" [currentAudioZone]=\"zoneForEdit\"\r\n      (updatedZone)=\"editCompleted($event)\"></lib-add-audio-zone>\r\n    </div>\r\n  </div>\r\n", styles: [".museum-label{background-color:#6f3974;font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}.default-zone-line-item{border-bottom-width:3px}.default-zone-label{background-color:var(--smarterplan-primary);font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.ZoneService }, { type: i2.SpaceService }, { type: i2.VisitService }, { type: i2.NavigationService }, { type: i2.BaseUserService }, { type: i2.PlanService }, { type: i3.TranslateService }]; }, propDecorators: { updatedZone: [{
                 type: Output
             }] } });