npm - @smarterplan/ngx-smarterplan-locations - Versions diffs - 0.2.13 → 0.2.15 - Mend

@smarterplan/ngx-smarterplan-locations 0.2.13 → 0.2.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

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

@@ -1687,13 +1687,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 {
@@ -1820,6 +1824,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 */
@@ -1852,21 +1858,26 @@ class SweepPlanSelectionComponent {
             await this.setScanByDraw(navigations);
         this.buttonElements = await 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,
@@ -2150,7 +2161,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"] }]
@@ -2164,6 +2175,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }], occupiedSweeps: [{
                 type: Input
+            }], unavailableSweeps: [{
+                type: Input
             }], sweepsSelected: [{
                 type: Output
             }] } });
@@ -2423,7 +2436,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"] }]
@@ -2465,6 +2478,7 @@ class AddAudioZoneComponent {
         this.isAddingAudio = false;
         this.scansModified = false;
         this.occupiedSweeps = [];
+        this.unavailableSweeps = [];
         this.working = false;
         this.audioUploaded = false;
     }
@@ -2473,6 +2487,7 @@ class AddAudioZoneComponent {
             // we are editing zone
             this.chosenAudio = this.currentAudioZone.audio;
             this.chosenScansOnPlan = this.currentAudioZone.sweepIDs;
+            this.parentZone = this.currentAudioZone.parent;
         }
         this.setup();
     }
@@ -2485,8 +2500,13 @@ class AddAudioZoneComponent {
             // first time creating Audio Zone
             this.audioLayer = await 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));
         await this.getAudios();
         this.commentForm = this.fb.group({
             title: [null, Validators.required],
@@ -2513,9 +2533,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 {
@@ -2632,10 +2652,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: [{
@@ -2644,6 +2664,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }], zones: [{
                 type: Input
+            }], parentZone: [{
+                type: Input
             }], currentAudioZone: [{
                 type: Input
             }] } });
@@ -2812,8 +2834,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",
         });
@@ -2855,10 +2881,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
             }] } });