@smarterplan/ngx-smarterplan-locations 0.2.0 → 0.2.2

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

@@ -1542,10 +1542,13 @@ class VisitsComponent {
                     createdNode = await this.nodeService.createNode(node);
                 }
             });
-            // let newMetadata = this.currentSpace.metadata + "," + formValue.model3D;
-            // this.spaceService.update({ id: this.spaceId, metadata: newMetadata});
-            await this.launchImport(formValue.model3D, formValue.surface, createdNode, false);
-            this.modalReference.close();
+            this.launchImport(formValue.model3D, formValue.surface, createdNode, false).then((success) => {
+                this.modalReference.close("import ended with success");
+            }).catch((e) => {
+                this.modalReference.close(`Error while import: ${e}`);
+                alert(`Error while import: ${e}`);
+                this.onDelete({ node: createdNode, captureID: createdNode.captureID });
+            });
         }
         await this.resetVisits();
         this.onCancel();
@@ -1565,7 +1568,7 @@ class VisitsComponent {
         this.imagesProcessed = 0;
         this.setupMenuItems();
     }
-    async onDelete(visit, index) {
+    async onDelete(visit) {
         await this.visitService.deleteVisit(visit, this.spaceId);
         this.resetVisits();
     }
@@ -1591,11 +1594,16 @@ class VisitsComponent {
             console.log(this.closeResult);
             this.cancelImport();
         });
-        const sdkStarted = await this.matterportImportService.initSdkForModel(model3D);
-        await (imagesOnly
-            ? this.matterportImportService.importData(this.spaceId, surface, true, node)
-            : this.matterportImportService.importData(this.spaceId, surface, false, node));
-        return Promise.resolve();
+        try {
+            await this.matterportImportService.initSdkForModel(model3D);
+            return imagesOnly
+                ? this.matterportImportService.importData(this.spaceId, surface, true, node)
+                : this.matterportImportService.importData(this.spaceId, surface, false, node);
+        }
+        catch (error) {
+            console.log(error);
+            return Promise.reject(error);
+        }
     }
     cancelImport() {
         this.matterportImportService.abandon();
@@ -1607,10 +1615,10 @@ class VisitsComponent {
     }
 }
 VisitsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VisitsComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.MatterportImportService }, { token: i2.CaptureService }, { token: i2.NodeService }, { token: i2.SpaceService }, { token: i1.ActivatedRoute }, { token: i3$1.NgbModal }, { token: i2.VisitService }], target: i0.ɵɵFactoryTarget.Component });
-VisitsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: VisitsComponent, selector: "lib-visits", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"container-fluid\" class=\"dashboard-tab\">\r\n    <div class=\"m-3\">\r\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n\r\n    <div class=\"row main-form-container\">\r\n        <div class=\"col-md-6 form-container\">\r\n            <ul class=\"list-group list-group-flush\" *ngIf=\"!visitForm\">\r\n                <li class=\"list-group-item list-group-item-action\" *ngFor=\"let visit of visits; index as index\"\r\n                    (click)=\"onToggleDetail(index)\">\r\n                    <div class=\"d-flex justify-content-between align-items-center\">\r\n                        {{visit.name ? visit.name : visit.model3d }}\r\n                        <lib-chevron [conditionShowing]=\"index==visitIndexDetails\"></lib-chevron>\r\n                    </div>\r\n                    <div *ngIf=\"index==visitIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                            <li class=\"list-group-item bg-transparent\">{{'Name' | translate}} : {{ visit.name ?\r\n                                visit.name : \"Not provided\" | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'3D Model' | translate}} : {{ visit.model3d }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Surface' | translate}}, m<sup>2</sup>: {{\r\n                                visit.surface ?\r\n                                visit.surface : 'Not provided' | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Viewer' | translate}} : {{ visit.viewer }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Date of capture' | translate}} : {{\r\n                                visit.takenAt | timeDateString | async}}\r\n                            <li class=\"list-group-item bg-transparent\">{{'Images are imported' | translate}} : {{\r\n                                visit.imagesImported }}\r\n                            </li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                            *ngIf=\"!visit.imagesImported\" (click)=\"onImport(visit)\">{{'Import images' |\r\n                            translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                            (click)=\"onEdit(visit)\">{{'Edit' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                            (click)=\"onDelete(visit, index)\">{{'Delete' | translate}}</button>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n            <div *ngIf=\"visitForm\">\r\n                <form (ngSubmit)=\"onSubmitVisit()\" [formGroup]=\"visitForm\">\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\" formControlName=\"name\">\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Reference 3D model' | translate}} *</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" [readonly]=\"isEditing\"\r\n                                [class.is-invalid]=\"model3D.invalid && visitSubmitted\" required\r\n                                formControlName=\"model3D\">\r\n                            <div class=\"invalid-feedback\">\r\n                                {{'Please provide the 3D model reference' | translate}}\r\n                            </div>\r\n                            <div *ngIf=\"isEditing\" class=\"text-danger\">\r\n                                {{'Cannot change 3D model reference. Please add new model.' | translate}}\r\n                            </div>\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\">{{'Viewer' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"viewer\">\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\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Capture Date' | translate}}</label>\r\n                        <div class=\"input-group\">\r\n                            <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"captureDate\" ngbDatepicker\r\n                                #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                            <div class=\"input-group-append\">\r\n                                <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\"\r\n                                    type=\"button\"></button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\r\n                        translate}}</button>\r\n                </form>\r\n            </div>\r\n            <div *ngIf=\"!visitForm\">\r\n                <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onAddVisit()\">{{'Add 3D visit' |\r\n                    translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div id=\"viewer-frame\" style=\"width: 100%; aspect-ratio: 2/1;\"></div>\r\n    </div>\r\n    <ng-template #content let-modal>\r\n        <div class=\"modal-header\">\r\n            <h4 class=\"modal-title\" id=\"modal-basic-title\">{{'Importing Data' | translate}}</h4>\r\n            <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n                <span aria-hidden=\"true\">\u00D7</span>\r\n            </button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n            {{'Please do not leave or refresh this page...' | translate}}\r\n            <div *ngIf=\"totalImages != 0\">Imported {{imagesProcessed}} out of {{totalImages}} images.</div>\r\n            <div class=\"d-flex justify-content-center\">\r\n                <div class=\"spinner-border\" role=\"status\">\r\n                    <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-outline-dark\" [disabled]=\"!canCancelImport\"\r\n                (click)=\"modal.close('Cancel click')\">{{'Cancel import of images' | translate}}</button>\r\n        </div>\r\n    </ng-template>\r\n</div>", styles: [".col-form-label{width:180px;margin-bottom:1rem}.btn-outline-primary{width:200px;margin-right:1rem}.input-group{width:83%;height:-moz-fit-content;height:fit-content}.main-form-container{width:60vw;display:flex;flex-direction:column}@media screen and (max-width: 765px){.main-form-container{width:90vw}}.main-form-container .form-container{width:100%}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe, "async": i5.AsyncPipe, "timeDateString": i2.TimeDateToLocalStringPipe } });
+VisitsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: VisitsComponent, selector: "lib-visits", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"container-fluid\" class=\"dashboard-tab\">\r\n    <div class=\"m-3\">\r\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n\r\n    <div class=\"row main-form-container\">\r\n        <div class=\"col-md-6 form-container\">\r\n            <ul class=\"list-group list-group-flush\" *ngIf=\"!visitForm\">\r\n                <li class=\"list-group-item list-group-item-action\" *ngFor=\"let visit of visits; index as index\"\r\n                    (click)=\"onToggleDetail(index)\">\r\n                    <div class=\"d-flex justify-content-between align-items-center\">\r\n                        {{visit.name ? visit.name : visit.model3d }}\r\n                        <lib-chevron [conditionShowing]=\"index==visitIndexDetails\"></lib-chevron>\r\n                    </div>\r\n                    <div *ngIf=\"index==visitIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                            <li class=\"list-group-item bg-transparent\">{{'Name' | translate}} : {{ visit.name ?\r\n                                visit.name : \"Not provided\" | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'3D Model' | translate}} : {{ visit.model3d }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Surface' | translate}}, m<sup>2</sup>: {{\r\n                                visit.surface ?\r\n                                visit.surface : 'Not provided' | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Viewer' | translate}} : {{ visit.viewer }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Date of capture' | translate}} : {{\r\n                                visit.takenAt | timeDateString | async}}\r\n                            <li class=\"list-group-item bg-transparent\">{{'Images are imported' | translate}} : {{\r\n                                visit.imagesImported }}\r\n                            </li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                            *ngIf=\"!visit.imagesImported\" (click)=\"onImport(visit)\">{{'Import images' |\r\n                            translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                            (click)=\"onEdit(visit)\">{{'Edit' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                            (click)=\"onDelete(visit)\">{{'Delete' | translate}}</button>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n            <div *ngIf=\"visitForm\">\r\n                <form (ngSubmit)=\"onSubmitVisit()\" [formGroup]=\"visitForm\">\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\" formControlName=\"name\">\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Reference 3D model' | translate}} *</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" [readonly]=\"isEditing\"\r\n                                [class.is-invalid]=\"model3D.invalid && visitSubmitted\" required\r\n                                formControlName=\"model3D\">\r\n                            <div class=\"invalid-feedback\">\r\n                                {{'Please provide the 3D model reference' | translate}}\r\n                            </div>\r\n                            <div *ngIf=\"isEditing\" class=\"text-danger\">\r\n                                {{'Cannot change 3D model reference. Please add new model.' | translate}}\r\n                            </div>\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\">{{'Viewer' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"viewer\">\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\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Capture Date' | translate}}</label>\r\n                        <div class=\"input-group\">\r\n                            <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"captureDate\" ngbDatepicker\r\n                                #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                            <div class=\"input-group-append\">\r\n                                <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\"\r\n                                    type=\"button\"></button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\r\n                        translate}}</button>\r\n                </form>\r\n            </div>\r\n            <div *ngIf=\"!visitForm\">\r\n                <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onAddVisit()\">{{'Add 3D visit' |\r\n                    translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div id=\"viewer-frame\" style=\"width: 100%; aspect-ratio: 2/1;\"></div>\r\n    </div>\r\n    <ng-template #content let-modal>\r\n        <div class=\"modal-header\">\r\n            <h4 class=\"modal-title\" id=\"modal-basic-title\">{{'Importing Data' | translate}}</h4>\r\n            <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n                <span aria-hidden=\"true\">\u00D7</span>\r\n            </button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n            {{'Please do not leave or refresh this page...' | translate}}\r\n            <div *ngIf=\"totalImages != 0\">Imported {{imagesProcessed}} out of {{totalImages}} images.</div>\r\n            <div class=\"d-flex justify-content-center\">\r\n                <div class=\"spinner-border\" role=\"status\">\r\n                    <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-outline-dark\" [disabled]=\"!canCancelImport\"\r\n                (click)=\"modal.close('Cancel click')\">{{'Cancel import of images' | translate}}</button>\r\n        </div>\r\n    </ng-template>\r\n</div>", styles: [".col-form-label{width:180px;margin-bottom:1rem}.btn-outline-primary{width:200px;margin-right:1rem}.input-group{width:83%;height:-moz-fit-content;height:fit-content}.main-form-container{width:60vw;display:flex;flex-direction:column}@media screen and (max-width: 765px){.main-form-container{width:90vw}}.main-form-container .form-container{width:100%}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe, "async": i5.AsyncPipe, "timeDateString": i2.TimeDateToLocalStringPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VisitsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-visits', template: "<div class=\"container-fluid\" class=\"dashboard-tab\">\r\n    <div class=\"m-3\">\r\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n\r\n    <div class=\"row main-form-container\">\r\n        <div class=\"col-md-6 form-container\">\r\n            <ul class=\"list-group list-group-flush\" *ngIf=\"!visitForm\">\r\n                <li class=\"list-group-item list-group-item-action\" *ngFor=\"let visit of visits; index as index\"\r\n                    (click)=\"onToggleDetail(index)\">\r\n                    <div class=\"d-flex justify-content-between align-items-center\">\r\n                        {{visit.name ? visit.name : visit.model3d }}\r\n                        <lib-chevron [conditionShowing]=\"index==visitIndexDetails\"></lib-chevron>\r\n                    </div>\r\n                    <div *ngIf=\"index==visitIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                            <li class=\"list-group-item bg-transparent\">{{'Name' | translate}} : {{ visit.name ?\r\n                                visit.name : \"Not provided\" | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'3D Model' | translate}} : {{ visit.model3d }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Surface' | translate}}, m<sup>2</sup>: {{\r\n                                visit.surface ?\r\n                                visit.surface : 'Not provided' | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Viewer' | translate}} : {{ visit.viewer }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Date of capture' | translate}} : {{\r\n                                visit.takenAt | timeDateString | async}}\r\n                            <li class=\"list-group-item bg-transparent\">{{'Images are imported' | translate}} : {{\r\n                                visit.imagesImported }}\r\n                            </li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                            *ngIf=\"!visit.imagesImported\" (click)=\"onImport(visit)\">{{'Import images' |\r\n                            translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                            (click)=\"onEdit(visit)\">{{'Edit' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                            (click)=\"onDelete(visit, index)\">{{'Delete' | translate}}</button>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n            <div *ngIf=\"visitForm\">\r\n                <form (ngSubmit)=\"onSubmitVisit()\" [formGroup]=\"visitForm\">\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\" formControlName=\"name\">\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Reference 3D model' | translate}} *</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" [readonly]=\"isEditing\"\r\n                                [class.is-invalid]=\"model3D.invalid && visitSubmitted\" required\r\n                                formControlName=\"model3D\">\r\n                            <div class=\"invalid-feedback\">\r\n                                {{'Please provide the 3D model reference' | translate}}\r\n                            </div>\r\n                            <div *ngIf=\"isEditing\" class=\"text-danger\">\r\n                                {{'Cannot change 3D model reference. Please add new model.' | translate}}\r\n                            </div>\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\">{{'Viewer' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"viewer\">\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\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Capture Date' | translate}}</label>\r\n                        <div class=\"input-group\">\r\n                            <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"captureDate\" ngbDatepicker\r\n                                #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                            <div class=\"input-group-append\">\r\n                                <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\"\r\n                                    type=\"button\"></button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\r\n                        translate}}</button>\r\n                </form>\r\n            </div>\r\n            <div *ngIf=\"!visitForm\">\r\n                <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onAddVisit()\">{{'Add 3D visit' |\r\n                    translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div id=\"viewer-frame\" style=\"width: 100%; aspect-ratio: 2/1;\"></div>\r\n    </div>\r\n    <ng-template #content let-modal>\r\n        <div class=\"modal-header\">\r\n            <h4 class=\"modal-title\" id=\"modal-basic-title\">{{'Importing Data' | translate}}</h4>\r\n            <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n                <span aria-hidden=\"true\">\u00D7</span>\r\n            </button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n            {{'Please do not leave or refresh this page...' | translate}}\r\n            <div *ngIf=\"totalImages != 0\">Imported {{imagesProcessed}} out of {{totalImages}} images.</div>\r\n            <div class=\"d-flex justify-content-center\">\r\n                <div class=\"spinner-border\" role=\"status\">\r\n                    <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-outline-dark\" [disabled]=\"!canCancelImport\"\r\n                (click)=\"modal.close('Cancel click')\">{{'Cancel import of images' | translate}}</button>\r\n        </div>\r\n    </ng-template>\r\n</div>", styles: [".col-form-label{width:180px;margin-bottom:1rem}.btn-outline-primary{width:200px;margin-right:1rem}.input-group{width:83%;height:-moz-fit-content;height:fit-content}.main-form-container{width:60vw;display:flex;flex-direction:column}@media screen and (max-width: 765px){.main-form-container{width:90vw}}.main-form-container .form-container{width:100%}\n"] }]
+            args: [{ selector: 'lib-visits', template: "<div class=\"container-fluid\" class=\"dashboard-tab\">\r\n    <div class=\"m-3\">\r\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n\r\n    <div class=\"row main-form-container\">\r\n        <div class=\"col-md-6 form-container\">\r\n            <ul class=\"list-group list-group-flush\" *ngIf=\"!visitForm\">\r\n                <li class=\"list-group-item list-group-item-action\" *ngFor=\"let visit of visits; index as index\"\r\n                    (click)=\"onToggleDetail(index)\">\r\n                    <div class=\"d-flex justify-content-between align-items-center\">\r\n                        {{visit.name ? visit.name : visit.model3d }}\r\n                        <lib-chevron [conditionShowing]=\"index==visitIndexDetails\"></lib-chevron>\r\n                    </div>\r\n                    <div *ngIf=\"index==visitIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                            <li class=\"list-group-item bg-transparent\">{{'Name' | translate}} : {{ visit.name ?\r\n                                visit.name : \"Not provided\" | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'3D Model' | translate}} : {{ visit.model3d }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Surface' | translate}}, m<sup>2</sup>: {{\r\n                                visit.surface ?\r\n                                visit.surface : 'Not provided' | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Viewer' | translate}} : {{ visit.viewer }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Date of capture' | translate}} : {{\r\n                                visit.takenAt | timeDateString | async}}\r\n                            <li class=\"list-group-item bg-transparent\">{{'Images are imported' | translate}} : {{\r\n                                visit.imagesImported }}\r\n                            </li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                            *ngIf=\"!visit.imagesImported\" (click)=\"onImport(visit)\">{{'Import images' |\r\n                            translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                            (click)=\"onEdit(visit)\">{{'Edit' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                            (click)=\"onDelete(visit)\">{{'Delete' | translate}}</button>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n            <div *ngIf=\"visitForm\">\r\n                <form (ngSubmit)=\"onSubmitVisit()\" [formGroup]=\"visitForm\">\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\" formControlName=\"name\">\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Reference 3D model' | translate}} *</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" [readonly]=\"isEditing\"\r\n                                [class.is-invalid]=\"model3D.invalid && visitSubmitted\" required\r\n                                formControlName=\"model3D\">\r\n                            <div class=\"invalid-feedback\">\r\n                                {{'Please provide the 3D model reference' | translate}}\r\n                            </div>\r\n                            <div *ngIf=\"isEditing\" class=\"text-danger\">\r\n                                {{'Cannot change 3D model reference. Please add new model.' | translate}}\r\n                            </div>\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\">{{'Viewer' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"viewer\">\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\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Capture Date' | translate}}</label>\r\n                        <div class=\"input-group\">\r\n                            <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"captureDate\" ngbDatepicker\r\n                                #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                            <div class=\"input-group-append\">\r\n                                <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\"\r\n                                    type=\"button\"></button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\r\n                        translate}}</button>\r\n                </form>\r\n            </div>\r\n            <div *ngIf=\"!visitForm\">\r\n                <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onAddVisit()\">{{'Add 3D visit' |\r\n                    translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div id=\"viewer-frame\" style=\"width: 100%; aspect-ratio: 2/1;\"></div>\r\n    </div>\r\n    <ng-template #content let-modal>\r\n        <div class=\"modal-header\">\r\n            <h4 class=\"modal-title\" id=\"modal-basic-title\">{{'Importing Data' | translate}}</h4>\r\n            <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n                <span aria-hidden=\"true\">\u00D7</span>\r\n            </button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n            {{'Please do not leave or refresh this page...' | translate}}\r\n            <div *ngIf=\"totalImages != 0\">Imported {{imagesProcessed}} out of {{totalImages}} images.</div>\r\n            <div class=\"d-flex justify-content-center\">\r\n                <div class=\"spinner-border\" role=\"status\">\r\n                    <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-outline-dark\" [disabled]=\"!canCancelImport\"\r\n                (click)=\"modal.close('Cancel click')\">{{'Cancel import of images' | translate}}</button>\r\n        </div>\r\n    </ng-template>\r\n</div>", styles: [".col-form-label{width:180px;margin-bottom:1rem}.btn-outline-primary{width:200px;margin-right:1rem}.input-group{width:83%;height:-moz-fit-content;height:fit-content}.main-form-container{width:60vw;display:flex;flex-direction:column}@media screen and (max-width: 765px){.main-form-container{width:90vw}}.main-form-container .form-container{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i2.MatterportImportService }, { type: i2.CaptureService }, { type: i2.NodeService }, { type: i2.SpaceService }, { type: i1.ActivatedRoute }, { type: i3$1.NgbModal }, { type: i2.VisitService }]; }, propDecorators: { content: [{
                 type: ViewChild,
                 args: ["content", { static: false }]
@@ -1697,11 +1705,17 @@ function buttonIsInSelection(button, selection) {
  * Styles the button that represents a sweep on the plan: green-added to zone, red -not added
  * @param button HTMLButtonElement, button on the plan,
  * @param isAdded boolean, if the sweep added to the zone
+ * @param isOccupied boolean, if the sweep added to any other zone (but not current)
  */
-function styleButton(button, isAdded = false) {
-    button.style.backgroundImage = isAdded
-        ? `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`
-        : `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`;
+function styleButton(button, isAdded = false, isOccupied = false) {
+    if (isOccupied) {
+        button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=orange&height=17&width=17")`;
+    }
+    else {
+        button.style.backgroundImage = isAdded
+            ? `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`
+            : `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`;
+    }
     button.style.backgroundColor = "transparent";
     button.style.position = "absolute";
     button.style.border = "none";
@@ -1828,6 +1842,13 @@ class SweepPlanSelectionComponent {
     ngOnInit() {
         this.getPlans();
     }
+    ngOnChanges() {
+        if (this.chosenPlan) {
+            this.chosenScansOnPlan = [];
+            this.clearDivPlan();
+            this.addScanPoints();
+        }
+    }
     async getPlans() {
         this.plans = await this.planService.getSingedPlansForSpace(this.spaceID);
     }
@@ -1852,6 +1873,9 @@ class SweepPlanSelectionComponent {
                     this.chosenScansOnPlan.push(element.id);
                 }
             }
+            else if (this.occupiedSweeps && this.occupiedSweeps.includes(element.id)) {
+                styleButton(element, false, true);
+            }
             else {
                 styleButton(element);
             }
@@ -2046,15 +2070,19 @@ class SweepPlanSelectionComponent {
      * @param button
      */
     onButtonScanClicked(button) {
-        button.style.backgroundImage = buttonIsChosen(button)
-            ? `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`
-            : `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`;
-        if (buttonIsChosen(button)) {
-            if (!this.chosenScansOnPlan.includes(button.id)) {
-                this.chosenScansOnPlan.push(button.id);
-            }
+        if (!this.chosenScansOnPlan.includes(button.id)) {
+            // add to selection
+            button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`;
+            this.chosenScansOnPlan.push(button.id);
         }
-        else if (this.chosenScansOnPlan.includes(button.id)) {
+        else {
+            // remove from selection
+            if (this.occupiedSweeps.includes(button.id)) {
+                button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=orange&height=17&width=17")`;
+            }
+            else {
+                button.style.backgroundImage = `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`;
+            }
             const index = this.chosenScansOnPlan.indexOf(button.id);
             this.chosenScansOnPlan.splice(index, 1);
         }
@@ -2067,10 +2095,10 @@ class SweepPlanSelectionComponent {
     }
 }
 SweepPlanSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SweepPlanSelectionComponent, deps: [{ token: i2.ZoneService }, { token: i2.NavigationService }, { token: i2.PlanService }], target: i0.ɵɵFactoryTarget.Component });
-SweepPlanSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: { spaceID: "spaceID", chosenScansOnPlan: "chosenScansOnPlan", newZoneData: "newZoneData", navIDsZoneEdit: "navIDsZoneEdit" }, outputs: { sweepsSelected: "sweepsSelected" }, ngImport: i0, template: "<div ngbDropdown class=\"row d-inline-block\">\n    <div class=\"col-sm-3\" *ngIf=\"plans\">\n            <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\n                ngbDropdownToggle>{{chosenPlan ?\n                chosenPlan.name : ('Choose Plan' | translate) }}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                <button type=\"button\" ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\"\n                    [disabled]=\"!plan.calibration\">{{ plan.name }}\n                </button>\n            </div>\n    </div>\n</div>\n<div class=\"row\">\n    <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\n        <div class=\"selectZone\" oncontextmenu=\"return false;\">\n            <div class=\"row\">\n                <div style=\"overflow: hidden;width:100%;\">\n                    <div style=\"height: 400px; width: 100%;\" id=\"planDiv\">\n                    </div>\n                </div>\n            </div>\n        </div>\n    </lib-selection>\n    \n    <div class=\"col-md-4 scanTool\" *ngIf=\"buttonElements.length > 0\">\n        <div class=\"row mb-4 d-inline-block\">\n            <h2>{{'selectTool.title' | translate}}</h2>\n            <div class=\"protip\">{{'selectTool.tip' | translate}}.</div>\n        </div>\n    \n        <div class=\"row mb-4\">\n            <div class=\"col-3\" style=\"padding:0px\">\n                <label class=\"tool-label\" for=\"scanSize\">{{'selectTool.size' | translate}}</label>\n            </div>\n            <div class=\"col-9\">\n                <input type=\"range\" class=\"form-range\" min=\"0.001\" max=\"5\" step=\"0.01\" value=\"1\"\n                    id=\"scanSize\" (input)=\"onChangeScanSize($event)\">\n            </div>\n        </div>\n    \n        <div class=\"row mb-4\">\n            <button type=\"button\" class=\"btn btn-primary rounded-pill\" (click)=\"onSelectAll()\">{{'selectTool.selectAll' | translate}}</button>\n        </div>\n\n        <div class=\"row mb-4\">\n            <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\n        </div>\n    \n        <div *ngIf=\"buttonsInSelection.length > 0\" class=\"edit-selected\">\n            <span class=\"tool-label\">{{'selectTool.edit' | translate}} : </span>\n            <div class=\"row\">\n                <button type=\"button\" class=\"btn rounded-pill btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">{{'Add' | translate}}</button>\n                <button type=\"button\" class=\"btn btn-primary rounded-pill\" (click)=\"onSelectionRemove()\">{{'Remove' | translate}}</button>\n            </div>\n        </div>\n    \n        <div class=\"row mb-4\">\n            <button type=\"button\" class=\"btn btn-primary rounded-pill\" (click)=\"onSaveSelection()\">{{'selectTool.saveSelection' | translate}}</button>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'selectTool.cancelSelection' | translate}}</button>\n        </div>\n    </div>\n\n</div>\n   \n", styles: [".selectZone{background-color:gray;border-radius:1rem;overflow:hidden}.scanTool{margin:0px 1rem}.protip{color:gray;padding:0}.tool-label{font-size:1rem}\n"], components: [{ type: SelectionComponent, selector: "lib-selection", outputs: ["onSelectionChanged"] }], directives: [{ type: i3$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i3$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
+SweepPlanSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: { spaceID: "spaceID", chosenScansOnPlan: "chosenScansOnPlan", newZoneData: "newZoneData", navIDsZoneEdit: "navIDsZoneEdit", occupiedSweeps: "occupiedSweeps" }, outputs: { sweepsSelected: "sweepsSelected" }, usesOnChanges: true, ngImport: i0, template: "<div ngbDropdown class=\"row d-inline-block\">\r\n    <div class=\"col-sm-3\" *ngIf=\"plans\">\r\n            <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                ngbDropdownToggle>{{chosenPlan ?\r\n                chosenPlan.name : ('Choose Plan' | translate) }}</button>\r\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                <button type=\"button\" ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\"\r\n                    [disabled]=\"!plan.calibration\">{{ plan.name }}\r\n                </button>\r\n            </div>\r\n    </div>\r\n</div>\r\n<div class=\"row\">\r\n    <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\r\n        <div class=\"selectZone\" oncontextmenu=\"return false;\">\r\n            <div class=\"row\">\r\n                <div style=\"overflow: hidden;width:100%;\">\r\n                    <div style=\"height: 400px; width: 100%;\" id=\"planDiv\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </lib-selection>\r\n    \r\n    <div class=\"col-md-4 scanTool\" *ngIf=\"buttonElements.length > 0\">\r\n        <div class=\"row mb-4 d-inline-block\">\r\n            <h2>{{'selectTool.title' | translate}}</h2>\r\n            <div class=\"protip\">{{'selectTool.tip' | translate}}.</div>\r\n        </div>\r\n    \r\n        <div class=\"row mb-4\">\r\n            <div class=\"col-3\" style=\"padding:0px\">\r\n                <label class=\"tool-label\" for=\"scanSize\">{{'selectTool.size' | translate}}</label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <input type=\"range\" class=\"form-range\" min=\"0.001\" max=\"5\" step=\"0.01\" value=\"1\"\r\n                    id=\"scanSize\" (input)=\"onChangeScanSize($event)\">\r\n            </div>\r\n        </div>\r\n    \r\n        <div class=\"row mb-4\">\r\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectAll()\">{{'selectTool.selectAll' | translate}}</button>\r\n        </div>\r\n    \r\n        <div *ngIf=\"buttonsInSelection.length > 0\" class=\"edit-selected\">\r\n            <span class=\"tool-label\">{{'selectTool.edit' | translate}} : </span>\r\n            <div class=\"row\">\r\n                <button class=\"btn rounded-pill btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">{{'selectTool.add' | translate}}</button>\r\n                <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectionRemove()\">{{'selectTool.undo' | translate}}</button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row mb-4\">\r\n            <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n        </div>\r\n    \r\n        <div class=\"row mb-4\">\r\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSaveSelection()\">{{'selectTool.saveSelection' | translate}}</button>\r\n            <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'selectTool.cancelSelection' | translate}}</button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n   \r\n", styles: [".selectZone{background-color:gray;border-radius:1rem;overflow:hidden}.scanTool{margin:0px 1rem}.protip{color:gray;padding:0}.tool-label{font-size:1rem}\n"], components: [{ type: SelectionComponent, selector: "lib-selection", outputs: ["onSelectionChanged"] }], directives: [{ type: i3$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i3$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SweepPlanSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-sweep-plan-selection', template: "<div ngbDropdown class=\"row d-inline-block\">\n    <div class=\"col-sm-3\" *ngIf=\"plans\">\n            <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\n                ngbDropdownToggle>{{chosenPlan ?\n                chosenPlan.name : ('Choose Plan' | translate) }}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                <button type=\"button\" ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\"\n                    [disabled]=\"!plan.calibration\">{{ plan.name }}\n                </button>\n            </div>\n    </div>\n</div>\n<div class=\"row\">\n    <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\n        <div class=\"selectZone\" oncontextmenu=\"return false;\">\n            <div class=\"row\">\n                <div style=\"overflow: hidden;width:100%;\">\n                    <div style=\"height: 400px; width: 100%;\" id=\"planDiv\">\n                    </div>\n                </div>\n            </div>\n        </div>\n    </lib-selection>\n    \n    <div class=\"col-md-4 scanTool\" *ngIf=\"buttonElements.length > 0\">\n        <div class=\"row mb-4 d-inline-block\">\n            <h2>{{'selectTool.title' | translate}}</h2>\n            <div class=\"protip\">{{'selectTool.tip' | translate}}.</div>\n        </div>\n    \n        <div class=\"row mb-4\">\n            <div class=\"col-3\" style=\"padding:0px\">\n                <label class=\"tool-label\" for=\"scanSize\">{{'selectTool.size' | translate}}</label>\n            </div>\n            <div class=\"col-9\">\n                <input type=\"range\" class=\"form-range\" min=\"0.001\" max=\"5\" step=\"0.01\" value=\"1\"\n                    id=\"scanSize\" (input)=\"onChangeScanSize($event)\">\n            </div>\n        </div>\n    \n        <div class=\"row mb-4\">\n            <button type=\"button\" class=\"btn btn-primary rounded-pill\" (click)=\"onSelectAll()\">{{'selectTool.selectAll' | translate}}</button>\n        </div>\n\n        <div class=\"row mb-4\">\n            <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\n        </div>\n    \n        <div *ngIf=\"buttonsInSelection.length > 0\" class=\"edit-selected\">\n            <span class=\"tool-label\">{{'selectTool.edit' | translate}} : </span>\n            <div class=\"row\">\n                <button type=\"button\" class=\"btn rounded-pill btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">{{'Add' | translate}}</button>\n                <button type=\"button\" class=\"btn btn-primary rounded-pill\" (click)=\"onSelectionRemove()\">{{'Remove' | translate}}</button>\n            </div>\n        </div>\n    \n        <div class=\"row mb-4\">\n            <button type=\"button\" class=\"btn btn-primary rounded-pill\" (click)=\"onSaveSelection()\">{{'selectTool.saveSelection' | translate}}</button>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'selectTool.cancelSelection' | translate}}</button>\n        </div>\n    </div>\n\n</div>\n   \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"] }]
+            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"] }]
         }], ctorParameters: function () { return [{ type: i2.ZoneService }, { type: i2.NavigationService }, { type: i2.PlanService }]; }, propDecorators: { spaceID: [{
                 type: Input
             }], chosenScansOnPlan: [{
@@ -2079,6 +2107,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }], navIDsZoneEdit: [{
                 type: Input
+            }], occupiedSweeps: [{
+                type: Input
             }], sweepsSelected: [{
                 type: Output
             }] } });
@@ -2341,10 +2371,10 @@ class AddZoneComponent {
     }
 }
 AddZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddZoneComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.ZoneService }, { token: i2.LayerService }, { token: i2.BaseUserService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-AddZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AddZoneComponent, selector: "lib-add-zone", inputs: { zoneEdit: "zoneEdit", spaceID: "spaceID", images360: "images360", navigationIDs: "navigationIDs", zones: "zones", newZoneData: "newZoneData", chosenPlan: "chosenPlan", isMuseumVisit: "isMuseumVisit", defaultZone: "defaultZone" }, outputs: { updatedZone: "updatedZone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\" \r\n                    (change)=\"onChangeMultipleFloors()\" [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div> -->\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Add all scans of this space' | 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%;\" [chosenScansOnPlan]=\"chosenScansOnPlan\" [newZoneData]=\"newZoneData\" [spaceID]=\"spaceID\"\r\n        [navIDsZoneEdit]=\"navIDsZoneEdit\" (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}h2{color:var(--smarterplan-primary);padding:0}.col-form-label{margin-bottom:1rem}.btn-outline-primary{margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}p{margin:0;padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px)}\n"], components: [{ type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }, { type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "navIDsZoneEdit"], outputs: ["sweepsSelected"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe } });
+AddZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AddZoneComponent, selector: "lib-add-zone", inputs: { zoneEdit: "zoneEdit", spaceID: "spaceID", images360: "images360", navigationIDs: "navigationIDs", zones: "zones", newZoneData: "newZoneData", chosenPlan: "chosenPlan", isMuseumVisit: "isMuseumVisit", defaultZone: "defaultZone" }, outputs: { updatedZone: "updatedZone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\" \r\n                    (change)=\"onChangeMultipleFloors()\" [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div> -->\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'add-all-scans' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [newZoneData]=\"newZoneData\" [spaceID]=\"spaceID\"\r\n        [navIDsZoneEdit]=\"navIDsZoneEdit\" (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}h2{color:var(--smarterplan-primary);padding:0}.col-form-label{margin-bottom:1rem}.btn-outline-primary{margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}p{margin:0;padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px)}\n"], components: [{ type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }, { type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "navIDsZoneEdit", "occupiedSweeps"], outputs: ["sweepsSelected"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddZoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-add-zone', template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\" \r\n                    (change)=\"onChangeMultipleFloors()\" [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div> -->\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Add all scans of this space' | 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%;\" [chosenScansOnPlan]=\"chosenScansOnPlan\" [newZoneData]=\"newZoneData\" [spaceID]=\"spaceID\"\r\n        [navIDsZoneEdit]=\"navIDsZoneEdit\" (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}h2{color:var(--smarterplan-primary);padding:0}.col-form-label{margin-bottom:1rem}.btn-outline-primary{margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}p{margin:0;padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px)}\n"] }]
+            args: [{ selector: 'lib-add-zone', template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\" \r\n                    (change)=\"onChangeMultipleFloors()\" [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div> -->\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'add-all-scans' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [newZoneData]=\"newZoneData\" [spaceID]=\"spaceID\"\r\n        [navIDsZoneEdit]=\"navIDsZoneEdit\" (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}h2{color:var(--smarterplan-primary);padding:0}.col-form-label{margin-bottom:1rem}.btn-outline-primary{margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}p{margin:0;padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i2.ZoneService }, { type: i2.LayerService }, { type: i2.BaseUserService }, { type: i2.NavigationService }]; }, propDecorators: { zoneEdit: [{
                 type: Input
             }], spaceID: [{
@@ -2382,6 +2412,7 @@ class AddAudioZoneComponent {
         this.chosenScansOnPlan = [];
         this.isAddingAudio = false;
         this.scansModified = false;
+        this.occupiedSweeps = [];
     }
     ngOnInit() {
         if (this.currentAudioZone) {
@@ -2401,6 +2432,7 @@ class AddAudioZoneComponent {
             this.audioLayer = await this.layerService.createLayerForOrganisation("AUDIO", this.currentOrgId);
         }
         this.audioZones = this.zones.filter((zone) => zone.layerID === this.audioLayer.id);
+        this.occupiedSweeps = this.audioZones.flatMap((zone) => zone.sweepIDs);
         await this.getAudios();
         this.commentForm = this.fb.group({
             title: [null, Validators.required],
@@ -2416,6 +2448,7 @@ class AddAudioZoneComponent {
                 id: this.currentAudioZone.id,
                 sweepIDs: this.chosenScansOnPlan,
             });
+            await this.removeTakenSweepsFromOtherZones();
             this.updatedZone.emit(this.currentAudioZone.id);
         }
         else {
@@ -2433,7 +2466,8 @@ class AddAudioZoneComponent {
                 await this.setSweepsAndNodeForZoneInput(zoneInput);
                 await this.zoneService
                     .create(zoneInput)
-                    .then(zoneCreated => {
+                    .then(async (zoneCreated) => {
+                    await this.removeTakenSweepsFromOtherZones();
                     this.updatedZone.emit(zoneCreated.id);
                 });
             }
@@ -2500,12 +2534,26 @@ class AddAudioZoneComponent {
             this.chosenScansOnPlan = this.currentAudioZone.sweepIDs;
         }
     }
+    /**
+     * Removes newly selected sweeps for current zone (they are in chosenScansOnPlan) from other audio zones.
+     * Rule: one sweep = one audio.
+     */
+    async removeTakenSweepsFromOtherZones() {
+        await Promise.all(this.audioZones.map(async (zone) => {
+            if (zone.id !== this.currentAudioZone.id) {
+                const newSweeps = zone.sweepIDs.filter((sweepID) => !this.chosenScansOnPlan.includes(sweepID));
+                if (newSweeps.length !== zone.sweepIDs.length) {
+                    await this.zoneService.updateZone({ id: zone.id, sweepIDs: newSweeps });
+                }
+            }
+        }));
+    }
 }
 AddAudioZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddAudioZoneComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.ZoneService }, { token: i2.LayerService }, { token: i2.BaseUserService }, { token: i2.NavigationService }, { token: i2.CommentService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-AddAudioZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AddAudioZoneComponent, selector: "lib-add-audio-zone", inputs: { spaceID: "spaceID", defaultZone: "defaultZone", zones: "zones", currentAudioZone: "currentAudioZone" }, outputs: { updatedZone: "updatedZone" }, ngImport: i0, template: "<div class=\"main-container\">\n    <div class=\"col-lg-6 col-md-6 col-sm-7\" *ngIf=\"isAddingAudio\">\n        <form (ngSubmit)=\"onUploadAudio()\" [formGroup]=\"commentForm\">\n                <div class=\"mb-3 row\">\n                    <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\n                    <div class=\"col-sm-10\">\n                        <input type=\"text\" class=\"form-control\" required formControlName=\"title\">\n                    </div>\n                </div>\n                <div>\n                    <label for=\"file\" class=\"btn btn-label-file rounded-pill\">\n                        <input type=\"file\" id=\"file\" (change)=\"handleFileInput($event)\" />\n                        {{'Choose File' | translate}}</label>\n                    <p *ngIf=\"fileToUpload\">{{ fileToUpload.name}}</p>\n                </div>\n                <div class=\"mt-3\">\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\">{{'Upload' | translate}}</button>\n                    <button type=\"button\" (click)=\"onCancelAudioUpload()\" class=\"btn btn-outline-primary rounded-pill me-2\">\n                        {{'Cancel' | translate}}</button>\n                </div>\n        </form>\n    </div>\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio\">\n        <div class=\"choose-audio-div\" *ngIf=\"audiosForSpace\">\n            <div ngbDropdown class=\"row d-inline-block dropdown\">\n                <div>\n                        <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\n                            ngbDropdownToggle>{{chosenAudio ?\n                                chosenAudio.title : ('Choose Audio Track' | translate) }}</button>\n                        <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                            <button type=\"button\" ngbDropdownItem *ngFor=\"let audio of audiosForSpace\" \n                                (click)=\"onChooseAudio(audio)\">{{ audio.title }}\n                            </button>\n                        </div>\n                </div>\n            </div>\n            <p>{{'or' | translate}}</p>\n            <button (click)=\"isAddingAudio=true\" class=\"btn btn-primary rounded-pill me-2\"> {{'Add Audio Track' | translate}}</button>\n        </div>\n        <div class=\"row mb-3 mt-3\">\n            <div class=\"col\">\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\n                        translate}}</button>\n            </div>\n        </div>\n        <div *ngIf=\"chosenAudio\">\n            <p>{{ chosenScansOnPlan.length }} {{'scan points chosen for this track' | translate}}</p>\n        </div>\n\n        <div class=\"mt-3\">\n            <button class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\" (click)=\"onSubmit()\">{{'Save' | translate}}</button>\n            <button (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\n                    {{'Cancel' | translate}}</button>\n        </div>\n    </div>\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\n        <lib-sweep-plan-selection style=\"width: 100%;\" [chosenScansOnPlan]=\"chosenScansOnPlan\" [navIDsZoneEdit]=\"chosenScansOnPlan\" [spaceID]=\"spaceID\"\n        (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\n    </div>\n</div>\n", styles: [".choose-audio-div{display:flex;align-items:center}.choose-audio-div button{margin-bottom:0}.choose-audio-div p{margin-bottom:0;margin-left:5px;margin-right:5px}\n"], components: [{ type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "navIDsZoneEdit"], outputs: ["sweepsSelected"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i3$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i3$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
+AddAudioZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AddAudioZoneComponent, selector: "lib-add-audio-zone", inputs: { spaceID: "spaceID", defaultZone: "defaultZone", zones: "zones", currentAudioZone: "currentAudioZone" }, outputs: { updatedZone: "updatedZone" }, ngImport: i0, template: "<div class=\"main-container\">\r\n    <div class=\"col-lg-6 col-md-6 col-sm-7\" *ngIf=\"isAddingAudio\">\r\n        <form (ngSubmit)=\"onUploadAudio()\" [formGroup]=\"commentForm\">\r\n                <div class=\"mb-3 row\">\r\n                    <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                    <div class=\"col-sm-10\">\r\n                        <input type=\"text\" class=\"form-control\" required formControlName=\"title\">\r\n                    </div>\r\n                </div>\r\n                <div>\r\n                    <label for=\"file\" class=\"btn btn-label-file rounded-pill\">\r\n                        <input type=\"file\" id=\"file\" (change)=\"handleFileInput($event)\" />\r\n                        {{'Choose File' | translate}}</label>\r\n                    <p *ngIf=\"fileToUpload\">{{ fileToUpload.name}}</p>\r\n                </div>\r\n                <div class=\"mt-3\">\r\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\">{{'Upload' | translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancelAudioUpload()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                        {{'Cancel' | translate}}</button>\r\n                </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio\">\r\n        <div class=\"choose-audio-div\" *ngIf=\"audiosForSpace\">\r\n            <div ngbDropdown class=\"row d-inline-block dropdown\">\r\n                <div>\r\n                        <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                            ngbDropdownToggle>{{chosenAudio ?\r\n                                chosenAudio.title : ('choose-audio' | translate) }}</button>\r\n                        <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                            <button type=\"button\" ngbDropdownItem *ngFor=\"let audio of audiosForSpace\" \r\n                                (click)=\"onChooseAudio(audio)\">{{ audio.title }}\r\n                            </button>\r\n                        </div>\r\n                </div>\r\n            </div>\r\n            <p>{{'or' | translate}}</p>\r\n            <button (click)=\"isAddingAudio=true\" class=\"btn btn-primary rounded-pill me-2\"> {{'add-audio' | translate}}</button>\r\n        </div>\r\n        <div class=\"row mb-3 mt-3\">\r\n            <div class=\"col\">\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"chosenAudio\">\r\n            <p>{{ chosenScansOnPlan.length }} {{'scans-chosen-audio' | translate}}</p>\r\n        </div>\r\n\r\n        <div class=\"mt-3\">\r\n            <button class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\" (click)=\"onSubmit()\">{{'Save' | translate}}</button>\r\n            <button (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [navIDsZoneEdit]=\"chosenScansOnPlan\" [spaceID]=\"spaceID\" [occupiedSweeps]=\"occupiedSweeps\"\r\n        (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>\r\n", styles: [".choose-audio-div{display:flex;align-items:center}.choose-audio-div button{margin-bottom:0}.choose-audio-div p{margin-bottom:0;margin-left:5px;margin-right:5px}\n"], components: [{ type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "navIDsZoneEdit", "occupiedSweeps"], outputs: ["sweepsSelected"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i3$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i3$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddAudioZoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-add-audio-zone', template: "<div class=\"main-container\">\n    <div class=\"col-lg-6 col-md-6 col-sm-7\" *ngIf=\"isAddingAudio\">\n        <form (ngSubmit)=\"onUploadAudio()\" [formGroup]=\"commentForm\">\n                <div class=\"mb-3 row\">\n                    <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\n                    <div class=\"col-sm-10\">\n                        <input type=\"text\" class=\"form-control\" required formControlName=\"title\">\n                    </div>\n                </div>\n                <div>\n                    <label for=\"file\" class=\"btn btn-label-file rounded-pill\">\n                        <input type=\"file\" id=\"file\" (change)=\"handleFileInput($event)\" />\n                        {{'Choose File' | translate}}</label>\n                    <p *ngIf=\"fileToUpload\">{{ fileToUpload.name}}</p>\n                </div>\n                <div class=\"mt-3\">\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\">{{'Upload' | translate}}</button>\n                    <button type=\"button\" (click)=\"onCancelAudioUpload()\" class=\"btn btn-outline-primary rounded-pill me-2\">\n                        {{'Cancel' | translate}}</button>\n                </div>\n        </form>\n    </div>\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio\">\n        <div class=\"choose-audio-div\" *ngIf=\"audiosForSpace\">\n            <div ngbDropdown class=\"row d-inline-block dropdown\">\n                <div>\n                        <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\n                            ngbDropdownToggle>{{chosenAudio ?\n                                chosenAudio.title : ('Choose Audio Track' | translate) }}</button>\n                        <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                            <button type=\"button\" ngbDropdownItem *ngFor=\"let audio of audiosForSpace\" \n                                (click)=\"onChooseAudio(audio)\">{{ audio.title }}\n                            </button>\n                        </div>\n                </div>\n            </div>\n            <p>{{'or' | translate}}</p>\n            <button (click)=\"isAddingAudio=true\" class=\"btn btn-primary rounded-pill me-2\"> {{'Add Audio Track' | translate}}</button>\n        </div>\n        <div class=\"row mb-3 mt-3\">\n            <div class=\"col\">\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\n                        translate}}</button>\n            </div>\n        </div>\n        <div *ngIf=\"chosenAudio\">\n            <p>{{ chosenScansOnPlan.length }} {{'scan points chosen for this track' | translate}}</p>\n        </div>\n\n        <div class=\"mt-3\">\n            <button class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\" (click)=\"onSubmit()\">{{'Save' | translate}}</button>\n            <button (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\n                    {{'Cancel' | translate}}</button>\n        </div>\n    </div>\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\n        <lib-sweep-plan-selection style=\"width: 100%;\" [chosenScansOnPlan]=\"chosenScansOnPlan\" [navIDsZoneEdit]=\"chosenScansOnPlan\" [spaceID]=\"spaceID\"\n        (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\n    </div>\n</div>\n", styles: [".choose-audio-div{display:flex;align-items:center}.choose-audio-div button{margin-bottom:0}.choose-audio-div p{margin-bottom:0;margin-left:5px;margin-right:5px}\n"] }]
+            args: [{ selector: 'lib-add-audio-zone', template: "<div class=\"main-container\">\r\n    <div class=\"col-lg-6 col-md-6 col-sm-7\" *ngIf=\"isAddingAudio\">\r\n        <form (ngSubmit)=\"onUploadAudio()\" [formGroup]=\"commentForm\">\r\n                <div class=\"mb-3 row\">\r\n                    <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                    <div class=\"col-sm-10\">\r\n                        <input type=\"text\" class=\"form-control\" required formControlName=\"title\">\r\n                    </div>\r\n                </div>\r\n                <div>\r\n                    <label for=\"file\" class=\"btn btn-label-file rounded-pill\">\r\n                        <input type=\"file\" id=\"file\" (change)=\"handleFileInput($event)\" />\r\n                        {{'Choose File' | translate}}</label>\r\n                    <p *ngIf=\"fileToUpload\">{{ fileToUpload.name}}</p>\r\n                </div>\r\n                <div class=\"mt-3\">\r\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\">{{'Upload' | translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancelAudioUpload()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                        {{'Cancel' | translate}}</button>\r\n                </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio\">\r\n        <div class=\"choose-audio-div\" *ngIf=\"audiosForSpace\">\r\n            <div ngbDropdown class=\"row d-inline-block dropdown\">\r\n                <div>\r\n                        <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                            ngbDropdownToggle>{{chosenAudio ?\r\n                                chosenAudio.title : ('choose-audio' | translate) }}</button>\r\n                        <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                            <button type=\"button\" ngbDropdownItem *ngFor=\"let audio of audiosForSpace\" \r\n                                (click)=\"onChooseAudio(audio)\">{{ audio.title }}\r\n                            </button>\r\n                        </div>\r\n                </div>\r\n            </div>\r\n            <p>{{'or' | translate}}</p>\r\n            <button (click)=\"isAddingAudio=true\" class=\"btn btn-primary rounded-pill me-2\"> {{'add-audio' | translate}}</button>\r\n        </div>\r\n        <div class=\"row mb-3 mt-3\">\r\n            <div class=\"col\">\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"chosenAudio\">\r\n            <p>{{ chosenScansOnPlan.length }} {{'scans-chosen-audio' | translate}}</p>\r\n        </div>\r\n\r\n        <div class=\"mt-3\">\r\n            <button class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\" (click)=\"onSubmit()\">{{'Save' | translate}}</button>\r\n            <button (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [navIDsZoneEdit]=\"chosenScansOnPlan\" [spaceID]=\"spaceID\" [occupiedSweeps]=\"occupiedSweeps\"\r\n        (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>\r\n", styles: [".choose-audio-div{display:flex;align-items:center}.choose-audio-div button{margin-bottom:0}.choose-audio-div p{margin-bottom:0;margin-left:5px;margin-right:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i2.ZoneService }, { type: i2.LayerService }, { type: i2.BaseUserService }, { type: i2.NavigationService }, { type: i2.CommentService }, { type: i3.TranslateService }]; }, propDecorators: { spaceID: [{
                 type: Input
             }], updatedZone: [{
@@ -2690,7 +2738,7 @@ class ZonesComponent {
     onAddAudioZone() {
         this.isAddingAudioTrack = true;
         this.menuItems.push({
-            label: "Add Audio Track",
+            label: "add-audio",
         });
     }
     async onDelete(zone) {
@@ -2730,10 +2778,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=\"isGuide || isAdmin\"> {{'Add museum itinerary' | translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone()\"\r\n            *ngIf=\"isGuide || isAdmin\"> {{'Add audio track' | 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", "newZoneData", "chosenPlan", "isMuseumVisit", "defaultZone"], outputs: ["updatedZone"] }, { type: AddAudioZoneComponent, selector: "lib-add-audio-zone", inputs: ["spaceID", "defaultZone", "zones", "currentAudioZone"], outputs: ["updatedZone"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3.TranslatePipe, "keyvalue": i5.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' |\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=\"isGuide || isAdmin\"> {{'Add museum itinerary' | translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone()\"\r\n            *ngIf=\"isGuide || isAdmin\"> {{'add-audio' | 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", "newZoneData", "chosenPlan", "isMuseumVisit", "defaultZone"], outputs: ["updatedZone"] }, { type: AddAudioZoneComponent, selector: "lib-add-audio-zone", inputs: ["spaceID", "defaultZone", "zones", "currentAudioZone"], outputs: ["updatedZone"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3.TranslatePipe, "keyvalue": i5.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=\"isGuide || isAdmin\"> {{'Add museum itinerary' | translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone()\"\r\n            *ngIf=\"isGuide || isAdmin\"> {{'Add audio track' | 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' |\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=\"isGuide || isAdmin\"> {{'Add museum itinerary' | translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone()\"\r\n            *ngIf=\"isGuide || isAdmin\"> {{'add-audio' | 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"] }]
         }], 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
             }] } });