@smarterplan/ngx-smarterplan-locations 0.2.44 → 0.2.45

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

@@ -0,0 +1,3991 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, Output, Input, ViewChild, Pipe, HostListener, NgModule } from '@angular/core';
+import { __awaiter } from 'tslib';
+import * as i2 from '@smarterplan/ngx-smarterplan-core';
+import { enumToArray, LevelStatus, textValidator, noEmptyValidator, floatValidator, uploadFileToS3, deleteFromS3, PropertyType, getSignedImageUrlForSpace, SearchObjectType, SpaceStatus, getMetaForImage, getSignedFile, downloadFileAsObject, downloadBlob, CaptureViewer, showScanPointsOnPlanInDiv, getCoefficientsForImage, CommentType, SpModule, wait, InventoryStatus, NgxSmarterplanCoreModule } from '@smarterplan/ngx-smarterplan-core';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i6 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { icon, Marker, tileLayer, latLng, marker, latLngBounds, point } from 'leaflet';
+import * as i1$1 from '@asymmetrik/ngx-leaflet';
+import { LeafletModule } from '@asymmetrik/ngx-leaflet';
+import * as i1$2 from '@angular/forms';
+import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i7 from '@ng-bootstrap/ng-bootstrap';
+import { ModalDismissReasons, NgbModule, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
+import { Subject, takeUntil } from 'rxjs';
+import * as i7$1 from 'ngx-clipboard';
+import { ClipboardModule } from 'ngx-clipboard';
+import { getDocument } from 'pdfjs-dist';
+import panzoom from 'panzoom';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
+
+class NgxSmarterplanLocationsService {
+    constructor() { }
+}
+NgxSmarterplanLocationsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanLocationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NgxSmarterplanLocationsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanLocationsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanLocationsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class TabNavigationComponent {
+    constructor(router) {
+        this.router = router;
+        this.onGoBack = new EventEmitter();
+        this.menuItems = [];
+    }
+    onClick(url, parameter, index) {
+        if (index === this.menuItems.length - 1) {
+            return;
+        }
+        if (url) {
+            const newURL = `/dashboard${url}`;
+            if (this.router.url !== newURL) {
+                console.log('new url', newURL);
+                this.router.navigate([newURL]);
+            }
+            else {
+                this.onGoBack.emit(parameter);
+            }
+        }
+        else {
+            this.onGoBack.emit(parameter);
+        }
+    }
+}
+TabNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+TabNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: { menuItems: "menuItems" }, outputs: { onGoBack: "onGoBack" }, ngImport: i0, template: "<span class=\"menu\">\n    <span *ngFor=\"let item of menuItems; let index = index;\">\n        <span class=\"item\" [ngClass]=\"{'current':index === menuItems.length - 1}\"\n            (click)=\"onClick(item.url,item.back, index)\">{{item.label | translate}}</span> <span\n            *ngIf=\"index !== menuItems.length - 1\" class=\"separator\">></span>\n    </span>\n</span>\n", styles: [".item{font-size:1.35em;color:var(--smarterplan-primary);cursor:pointer}.current{color:var(--smarterplan-primary)!important;cursor:default!important;text-decoration:none!important}.separator{font-size:1.4em;margin-left:10px;margin-right:10px;color:var(--smarterplan-primary)}.item:hover{text-decoration:underline}.menu{margin-top:15px;margin-bottom:20px}\n"], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tab-navigation', template: "<span class=\"menu\">\n    <span *ngFor=\"let item of menuItems; let index = index;\">\n        <span class=\"item\" [ngClass]=\"{'current':index === menuItems.length - 1}\"\n            (click)=\"onClick(item.url,item.back, index)\">{{item.label | translate}}</span> <span\n            *ngIf=\"index !== menuItems.length - 1\" class=\"separator\">></span>\n    </span>\n</span>\n", styles: [".item{font-size:1.35em;color:var(--smarterplan-primary);cursor:pointer}.current{color:var(--smarterplan-primary)!important;cursor:default!important;text-decoration:none!important}.separator{font-size:1.4em;margin-left:10px;margin-right:10px;color:var(--smarterplan-primary)}.item:hover{text-decoration:underline}.menu{margin-top:15px;margin-bottom:20px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { onGoBack: [{
+                type: Output
+            }], menuItems: [{
+                type: Input
+            }] } });
+
+class MapPopupComponent {
+    constructor(router, ngZone) {
+        this.router = router;
+        this.ngZone = ngZone;
+        this.isOnPopup = false;
+        this.isMuseumUser = true;
+    }
+    ngOnInit() {
+        this.marker.on("click", () => this.onClickVisitFirst());
+        this.marker.on("mouseover", () => {
+            this.isOnPopup = true;
+            if (!this.marker.isPopupOpen()) {
+                this.openPopup();
+            }
+        });
+    }
+    openPopup() {
+        this.marker.openPopup();
+        this.isOnPopup = false;
+        this.popuparea = document.querySelector(".leaflet-popup");
+        this.popuparea.addEventListener("mouseleave", () => {
+            this.closePopup();
+        });
+        this.popuparea.addEventListener("mouseover", () => {
+            this.isOnPopup = true;
+        });
+        this.marker.on("mouseout", () => {
+            this.closePopup();
+        });
+    }
+    closePopup() {
+        this.isOnPopup = false;
+        /** We want to wait to avoid glitch */
+        setTimeout(() => {
+            if (!this.isOnPopup) {
+                this.marker.closePopup();
+            }
+        }, 100);
+    }
+    onClickVisitFirst() {
+        if (this.space.visits.length === 0) {
+            console.log("No space to visit !");
+        }
+        else {
+            this.onVisitClick(this.space.visits[0]);
+        }
+    }
+    onVisitClick(visit) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.ngZone.run(() => {
+                this.router.navigate(["visit", this.space.id], {
+                    queryParams: { model3D: visit.model3d },
+                });
+            });
+        });
+    }
+}
+MapPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MapPopupComponent, deps: [{ token: i1.Router }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+MapPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: MapPopupComponent, selector: "lib-map-popup", ngImport: i0, template: "<div id=\"map-popup\">\n    <div class=\"map-popup-header\" (click)=\"onClickVisitFirst()\" [style.cursor]=\"'pointer'\">\n        <img [src]=\"space.annexes\" />\n    </div>\n    <div class=\"map-popup-details\">\n    <h1 (click)=\"onClickVisitFirst()\" [style.cursor]=\"'pointer'\">{{space.name}}</h1>\n    <span class=\"map-popup-address\">{{space.addresses}}</span>\n    <span *ngFor=\"let visit of space.visits\" class=\"map-popup-visit\" (click)=\"onVisitClick(visit)\"\n                  [style.cursor]=\"'pointer'\">\u27A4 {{ visit.name ? visit.name : space.name}}</span>\n    </div>\n</div>\n", styles: [".map-popup-header{height:120px;overflow:hidden;border-top-right-radius:20px;border-top-left-radius:20px}.map-popup-header img{width:100%;position:relative;top:50%;transform:translateY(-50%)}.map-popup-details{padding:5px 10px 10px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;background-color:#fff;color:#000}.map-popup-details{display:flex;flex-direction:column}.map-popup-details h1{font-size:1.5rem;font-weight:700;margin-bottom:0;color:var(--smarterplan-primary)}.map-popup-address{align-self:flex-end;margin-bottom:10px}.map-popup-visit{color:var(--smarterplan-primary);font-size:1.15rem}.map-popup-visit:hover{color:var(--smarterplan-primary)}\n"], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MapPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-map-popup', template: "<div id=\"map-popup\">\n    <div class=\"map-popup-header\" (click)=\"onClickVisitFirst()\" [style.cursor]=\"'pointer'\">\n        <img [src]=\"space.annexes\" />\n    </div>\n    <div class=\"map-popup-details\">\n    <h1 (click)=\"onClickVisitFirst()\" [style.cursor]=\"'pointer'\">{{space.name}}</h1>\n    <span class=\"map-popup-address\">{{space.addresses}}</span>\n    <span *ngFor=\"let visit of space.visits\" class=\"map-popup-visit\" (click)=\"onVisitClick(visit)\"\n                  [style.cursor]=\"'pointer'\">\u27A4 {{ visit.name ? visit.name : space.name}}</span>\n    </div>\n</div>\n", styles: [".map-popup-header{height:120px;overflow:hidden;border-top-right-radius:20px;border-top-left-radius:20px}.map-popup-header img{width:100%;position:relative;top:50%;transform:translateY(-50%)}.map-popup-details{padding:5px 10px 10px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;background-color:#fff;color:#000}.map-popup-details{display:flex;flex-direction:column}.map-popup-details h1{font-size:1.5rem;font-weight:700;margin-bottom:0;color:var(--smarterplan-primary)}.map-popup-address{align-self:flex-end;margin-bottom:10px}.map-popup-visit{color:var(--smarterplan-primary);font-size:1.15rem}.map-popup-visit:hover{color:var(--smarterplan-primary)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i0.NgZone }]; } });
+
+const iconRetinaUrl = "assets/marker-icon-2x.png";
+const iconUrl = "assets/marker-icon.png";
+const shadowUrl = "assets/marker-shadow.png";
+const iconDefault = icon({
+    iconRetinaUrl,
+    iconUrl,
+    shadowUrl,
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [1, -34],
+    tooltipAnchor: [16, -28],
+    shadowSize: [41, 41],
+});
+Marker.prototype.options.icon = iconDefault;
+class MapComponent {
+    constructor(componentFactoryResolver, injector) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.injector = injector;
+        this.options = {
+            layers: [
+                tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+                    maxZoom: 18,
+                    attribution: "...",
+                }),
+            ],
+            zoom: 5.5,
+            center: latLng(47.06394, 2.77736),
+        };
+        this.layers = [];
+    }
+    ngOnChanges(changes) {
+        if (changes.spaces) {
+            const nm = [];
+            const bd = [];
+            if (!changes.spaces.currentValue) {
+                return;
+            }
+            // Filtering out spaces without lat/longitudes
+            for (const s of changes.spaces.currentValue) {
+                if (s.latitude === null || s.longitude === null) {
+                    console.log(`${s.name} has not coordinates for ${s.addresses}`);
+                    continue;
+                }
+                // We use the popup system from leaflet, as it packs a few improvements
+                // on using bootstrap: autoclose other popups, closing option.
+                const m = marker([s.latitude, s.longitude]);
+                m.bindPopup(this.createPopupComponent(s, m));
+                nm.push(m);
+                bd.push(latLng(s.latitude, s.longitude));
+            }
+            // Note how we set the layers in one assignment, in order to have leaflet
+            // detects the change correctly
+            // We also set the bounds afterward, for the map to be properly zoomed and
+            // centered
+            this.layers = nm;
+            if (this.map && bd.length > 0) {
+                this.map.fitBounds(latLngBounds(bd), {
+                    padding: point(48, 48),
+                    maxZoom: 12,
+                    animate: true,
+                });
+            }
+        }
+    }
+    onMapReady(map) {
+        this.map = map;
+    }
+    createPopupComponent(space, marker) {
+        const comp = this.componentFactoryResolver
+            .resolveComponentFactory(MapPopupComponent)
+            .create(this.injector);
+        comp.instance.space = space;
+        comp.instance.marker = marker;
+        comp.changeDetectorRef.detectChanges();
+        return comp.location.nativeElement;
+    }
+}
+MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MapComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: MapComponent, selector: "lib-map", inputs: { spaces: "spaces" }, usesOnChanges: true, ngImport: i0, template: "<div [leafletLayers]=\"layers\" [leafletOptions]=\"options\" (leafletMapReady)=\"onMapReady($event)\" id=\"map\" leaflet\n    style=\"height: 500px; margin-top: 30px; z-index: 195\"></div>\n", styles: [""], directives: [{ type: i1$1.LeafletDirective, selector: "[leaflet]", inputs: ["leafletFitBoundsOptions", "leafletPanOptions", "leafletZoomOptions", "leafletZoomPanOptions", "leafletOptions", "leafletZoom", "leafletCenter", "leafletFitBounds", "leafletMaxBounds", "leafletMinZoom", "leafletMaxZoom"], outputs: ["leafletMapReady", "leafletZoomChange", "leafletCenterChange", "leafletClick", "leafletDoubleClick", "leafletMouseDown", "leafletMouseUp", "leafletMouseMove", "leafletMouseOver", "leafletMouseOut", "leafletMapMove", "leafletMapMoveStart", "leafletMapMoveEnd", "leafletMapZoom", "leafletMapZoomStart", "leafletMapZoomEnd"] }, { type: i1$1.LeafletLayersDirective, selector: "[leafletLayers]", inputs: ["leafletLayers"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-map', template: "<div [leafletLayers]=\"layers\" [leafletOptions]=\"options\" (leafletMapReady)=\"onMapReady($event)\" id=\"map\" leaflet\n    style=\"height: 500px; margin-top: 30px; z-index: 195\"></div>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; }, propDecorators: { spaces: [{
+                type: Input
+            }] } });
+
+class FormLocationComponent {
+    constructor(spaceService, propertyService, userService, fb, missionService, layerService, validatorsService) {
+        this.spaceService = spaceService;
+        this.propertyService = propertyService;
+        this.userService = userService;
+        this.fb = fb;
+        this.missionService = missionService;
+        this.layerService = layerService;
+        this.validatorsService = validatorsService;
+        this.isSubmitted = false;
+        this.addMissionForNewSpace = true;
+        this.imageToBeDeleted = false;
+        this.errorForm = false;
+        this.onChange = new EventEmitter();
+        this.levels = enumToArray(LevelStatus);
+    }
+    ngOnInit() {
+        if (this.location) {
+            this.initEditForm();
+        }
+        else {
+            this.initForm();
+        }
+        this.handleInputImageText();
+    }
+    initForm() {
+        this.form = this.fb.group({
+            name: ["", [Validators.required, Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            addresses: ["", [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            latitude: [null, [Validators.maxLength(255), noEmptyValidator(), floatValidator()]],
+            longitude: [null, [Validators.maxLength(255), noEmptyValidator(), floatValidator()]],
+            level: LevelStatus.LOW,
+            classGes: ["", [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            classEnergyConsumption: ["", [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            constructionYear: ["", [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+        });
+    }
+    initEditForm() {
+        this.form = this.fb.group({
+            id: this.location.id,
+            name: [this.location.name, [Validators.required, Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            addresses: [this.location.addresses, [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            latitude: [this.location.latitude, [Validators.maxLength(255), floatValidator()]],
+            longitude: [this.location.longitude, [Validators.maxLength(255), floatValidator()]],
+            level: this.location.level,
+            classGes: [this.location.classGes, [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            classEnergyConsumption: [this.location.classEnergyConsumption, [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            constructionYear: [this.location.constructionYear, [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+        });
+    }
+    handleImageInput(target) {
+        this.imageToUpload = target.files[0];
+        if (this.imageToUpload) {
+            this.imageInputContainer.nativeElement.style.display = "none";
+            const reader = new FileReader();
+            reader.addEventListener("load", () => {
+                this.currentImage = reader.result;
+            });
+            reader.readAsDataURL(this.imageToUpload);
+        }
+    }
+    uploadImage(spaceID) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.imageToUpload) {
+                uploadFileToS3("locations/", this.imageToUpload, spaceID).then((url) => __awaiter(this, void 0, void 0, function* () {
+                    if (url) {
+                        yield this.spaceService.updateSpace({
+                            id: spaceID,
+                            annexes: url,
+                        });
+                    }
+                }));
+            }
+            else if (this.imageToBeDeleted) {
+                yield this.spaceService.updateSpace({
+                    id: spaceID,
+                    annexes: null,
+                });
+                yield deleteFromS3(this.location.annexes);
+            }
+        });
+    }
+    clearImageFile() {
+        this.imageToUpload = null;
+        this.currentImage = null;
+        this.imageInputContainer.nativeElement.style.display = "flex";
+        this.imageInput.nativeElement.value = "";
+        this.imageInputText = "Add picture";
+    }
+    getLayerByName(name) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const currentOrgId = this.userService.currentOrganisation().id;
+            const layers = yield this.layerService.getLayerByNameForOrganisation(name, currentOrgId);
+            if (layers) {
+                return layers[0];
+            }
+            // create then
+            return this.layerService.createLayerForOrganisation(name, currentOrgId);
+        });
+    }
+    onSubmit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.isSubmitted = true;
+            if (!this.form.valid) {
+                this.errorForm = true;
+                return;
+            }
+            try {
+                this.errorForm = false;
+                let space;
+                if (this.location) {
+                    this.changeCommaToDot();
+                    space = yield this.spaceService.updateSpace(this.form.value);
+                    if (space) {
+                        yield this.uploadImage(space.id);
+                        this.location = space;
+                        this.onChange.emit(space);
+                    }
+                }
+                else {
+                    this.changeCommaToDot();
+                    const spaceInput = this.form.value;
+                    const currentOrgID = this.userService.currentOrganisation().id;
+                    spaceInput.organisationID = currentOrgID;
+                    let layer = yield this.getLayerByName("BUILDING");
+                    if (!layer) {
+                        layer = yield this.layerService.createLayerForOrganisation("BUILDING", currentOrgID);
+                    }
+                    space = yield this.spaceService.createSpace(spaceInput, layer);
+                    const missions = this.userService.getManagerMissions();
+                    if (space && missions.length > 0) {
+                        const exampleMission = missions[0];
+                        yield this.uploadImage(space.id);
+                        try {
+                            yield this.propertyService.createProperty({
+                                type: PropertyType.PROPERTY,
+                                spaceID: space.id,
+                                organisationID: currentOrgID,
+                            });
+                        }
+                        catch (e) {
+                            console.log("API Service does not have Property requests");
+                        }
+                        // add directly a mission for this space
+                        if (this.addMissionForNewSpace) {
+                            yield this.missionService.create({
+                                spaceID: space.id,
+                                userID: exampleMission.userID,
+                                role: exampleMission.role,
+                                level: exampleMission.level,
+                                organisationID: exampleMission.organisationID,
+                                orderedOrganisationID: exampleMission.organisationID,
+                            });
+                        }
+                        this.onChange.emit(space);
+                    }
+                    else {
+                        this.onChange.emit(null);
+                    }
+                }
+            }
+            catch (error) {
+                console.error(error);
+                this.onChange.emit(null);
+            }
+        });
+    }
+    onCancel() {
+        this.form.reset();
+        this.onChange.emit(null);
+    }
+    get name() {
+        return this.form.get("name");
+    }
+    changeCommaToDot() {
+        const updatedSpace = this.form.value;
+        if (updatedSpace.latitude &&
+            updatedSpace.latitude.toString().includes(",")) {
+            updatedSpace.latitude = updatedSpace.latitude
+                .toString()
+                .replace(",", ".");
+            Number.parseFloat(updatedSpace.latitude);
+        }
+        if (updatedSpace.longitude &&
+            updatedSpace.longitude.toString().includes(",")) {
+            updatedSpace.longitude = updatedSpace.longitude
+                .toString()
+                .replace(",", ".");
+            Number.parseFloat(updatedSpace.longitude);
+        }
+    }
+    handleInputImageText() {
+        if (this.location && this.location.annexes) {
+            this.imageInputText = "Change picture";
+            getSignedImageUrlForSpace(this.location).then((url) => {
+                if (url) {
+                    this.currentImage = url;
+                }
+            });
+        }
+        else {
+            this.imageInputText = "Add picture";
+        }
+    }
+    isFormError(control) {
+        return control && control.invalid && this.errorForm;
+    }
+    onFormChange() {
+        if (this.errorForm && this.form.valid) {
+            this.errorForm = false;
+        }
+    }
+}
+FormLocationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormLocationComponent, deps: [{ token: i2.SpaceService }, { token: i2.PropertyService }, { token: i2.BaseUserService }, { token: i1$2.FormBuilder }, { token: i2.MissionService }, { token: i2.LayerService }, { token: i2.ValidatorsService }], target: i0.ɵɵFactoryTarget.Component });
+FormLocationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FormLocationComponent, selector: "lib-form-location", inputs: { location: "location" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "imageInputContainer", first: true, predicate: ["imageInputContainer"], descendants: true }, { propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true }, { propertyName: "imageBasePreview", first: true, predicate: ["imageBasePreview"], descendants: true }], ngImport: i0, template: "<div class=\"col-md-6 form-new-loc\" *ngIf=\"form\">\n  <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Name' | translate}} *</label>\n      <div class=\"col-sm-9\">\n        <input type=\"text\" class=\"form-control\" data-testid=\"new-location-name\" (ngModelChange)=\"onFormChange()\"\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['name'])||  isFormError(form.controls['name'])}\"\n          required formControlName=\"name\">\n\n        <div class=\"invalid-feedback\">\n          <ngb-alert data-testid=\"new-location-name-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\"validatorsService.isControlError(form.controls['name']) \n          ||  isFormError(form.controls['name'])\">\n            {{validatorsService.getError(form.controls['name']) | translate}}\n          </ngb-alert>\n\n        </div>\n      </div>\n    </div>\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Address' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <input type=\"text\" class=\"form-control\" formControlName=\"addresses\" data-testid=\"new-location-address\" (ngModelChange)=\"onFormChange()\"\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['addresses']) ||  isFormError(form.controls['addresses'])}\">\n        <div class=\"invalid-feedback\">\n          <span data-testid=\"\" [translate]=\"validatorsService.getError(form.controls['addresses'])\"\n            *ngIf=\" validatorsService.isControlError(form.controls['addresses'])\"></span>\n\n          <ngb-alert data-testid=\"new-location-address-invalid\" [dismissible]=\"false\" type=\"danger\"\n            *ngIf=\"validatorsService.isControlError(form.controls['addresses']) \">\n\n            {{validatorsService.getError(form.controls['addresses']) | translate}}\n          </ngb-alert>\n\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Construction year' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <input type=\"text\" class=\"form-control\" formControlName=\"constructionYear\"\n          data-testid=\"new-location-constructionYear\" (ngModelChange)=\"onFormChange()\"\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['constructionYear']) || isFormError(form.controls['constructionYear'])}\">\n        <div class=\"invalid-feedback\">\n          <ngb-alert data-testid=\"new-location-constructionYear-invalid\" [dismissible]=\"false\" type=\"danger\"\n            *ngIf=\"validatorsService.isControlError(form.controls['constructionYear']) ||  isFormError(form.controls['constructionYear'])\">\n            {{validatorsService.getError(form.controls['constructionYear']) | translate}}\n          </ngb-alert>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Latitude' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <input type=\"text\" class=\"form-control\" formControlName=\"latitude\" data-testid=\"new-location-latitude\" (ngModelChange)=\"onFormChange()\"\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['latitude'])||  isFormError(form.controls['latitude'])}\">\n        <div class=\"invalid-feedback\">\n          <ngb-alert data-testid=\"new-location-latitude-invalid\" [dismissible]=\"false\" type=\"danger\"\n            *ngIf=\"validatorsService.isControlError(form.controls['latitude']) ||  isFormError(form.controls['latitude'])\">\n            {{validatorsService.getError(form.controls['latitude']) | translate}}\n          </ngb-alert>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Longitude' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <input type=\"text\" class=\"form-control\" formControlName=\"longitude\" data-testid=\"new-location-longitude\" (ngModelChange)=\"onFormChange()\"\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['longitude'])||  isFormError(form.controls['longitude'])}\">\n        <div class=\"invalid-feedback\">\n          <ngb-alert data-testid=\"new-location-longitude-invalid\" [dismissible]=\"false\" type=\"danger\"\n            *ngIf=\"validatorsService.isControlError(form.controls['longitude']) ||  isFormError(form.controls['longitude'])\">\n            {{validatorsService.getError(form.controls['longitude']) | translate}}\n          </ngb-alert>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Access level' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <select class=\"d-inline-block custom-select rounded-pill\" formControlName=\"level\">\n          <option *ngFor=\"let level of levels\" [value]=\"level\">{{level | translate}}</option>\n        </select>\n      </div>\n    </div>\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Energy Class' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <input type=\"text\" class=\"form-control\" formControlName=\"classEnergyConsumption\"\n          data-testid=\"new-location-classEnergyConsumption\" (ngModelChange)=\"onFormChange()\"\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['classEnergyConsumption']) ||  isFormError(form.controls['classEnergyConsumption'])}\">\n        <div class=\"invalid-feedback\">\n          <ngb-alert data-testid=\"new-location-classEnergyConsumption-invalid\" [dismissible]=\"false\" type=\"danger\"\n            *ngIf=\"validatorsService.isControlError(form.controls['classEnergyConsumption']) ||  isFormError(form.controls['classEnergyConsumption'])\">\n            {{validatorsService.getError(form.controls['classEnergyConsumption']) | translate}}\n          </ngb-alert>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Greenhouse gas emission Class' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <input type=\"text\" class=\"form-control\" formControlName=\"classGes\" data-testid=\"new-location-classGes\" (ngModelChange)=\"onFormChange()\"\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['classGes'])||  isFormError(form.controls['classGes'])}\">\n        <div class=\"invalid-feedback\">\n          <ngb-alert data-testid=\"new-location-classGes-invalid\" [dismissible]=\"false\" type=\"danger\"\n            *ngIf=\"validatorsService.isControlError(form.controls['classGes']) ||  isFormError(form.controls['classGes'])\">\n            {{validatorsService.getError(form.controls['classGes']) | translate}}\n          </ngb-alert>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Cover picture' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <img #imageBasePreview *ngIf=\"currentImage\" class=\"image-preview\" [src]=\"currentImage\">\n        <label #imageInputContainer for=\"image\"\n          class=\"btn btn-label-file btn-outline-primary rounded-pill imageInputContainer\">\n          <input #imageInput type=\"file\" id=\"image\" (change)=\"handleImageInput($event.target)\" />\n          {{ imageInputText | translate}}</label>\n        <button *ngIf=\"currentImage && !imageToUpload\" class=\"btn btn-outline-primary rounded-pill\"\n          (click)=\"imageToBeDeleted=true;clearImageFile()\">{{'Delete picture' | translate }}</button>\n        <div class=\"image-name\" *ngIf=\"imageToUpload\">\n          <p>{{ imageToUpload.name}}</p>\n          <div (click)=\"clearImageFile()\" [style.cursor]=\"'pointer'\">\n            <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\n          </div>\n        </div>\n\n      </div>\n    </div>\n    <div class=\"mb-3 row\" *ngIf=\"!location\">\n      <label class=\"col-sm-3 col-form-label\">{{'Create mission for this space' | translate}}</label>\n      <div class=\"col-sm-3\">\n        <input type=\"checkbox\" [(ngModel)]=\"addMissionForNewSpace\" [ngModelOptions]=\"{standalone: true}\">\n      </div>\n    </div>\n\n    <button data-testid=\"new-location-submit-btn\" [ngClass]=\"{'is-invalid' : errorForm }\" type=\"submit\"\n      class=\"btn btn-outline-primary rounded-pill me-3\">{{'Save' | translate}}</button>\n\n    <button data-testid=\"new-location-close-btn\" type=\"button\" (click)=\"onCancel()\"\n      class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\n      translate}}</button>\n\n    <div class=\"invalid-feedback\" *ngIf=\"errorForm\">\n      <ngb-alert data-testid=\"new-location-form-invalid\" [dismissible]=\"false\" type=\"danger\">\n        {{'errorForm.infoBtn' |translate}}\n\n      </ngb-alert>\n    </div>\n  </form>\n</div>", styles: ["input[type=file]{display:none}.custom-select{border-color:var(--smarterplan-primary);width:auto}.form-new-loc{background-color:#d3d3d3;padding-top:10px;padding-bottom:10px;margin-bottom:15px}.btn-outline-primary{background-color:#fff}h4{color:var(--smarterplan-primary)}.image-preview{object-fit:cover;max-height:400px;max-width:400px;display:flex;margin-bottom:15px}.imageInputContainer{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.image-name{display:flex}.col-form-label{margin-bottom:1rem;width:230px}.form-new-loc{background-color:#d3d3d3;margin-bottom:15px;padding:10px;width:80%;border-radius:10px}.col-sm-9 select{width:100%;height:31.25px;padding-left:10px}.btn-outline-primary{width:200px;margin-bottom:1rem;margin-right:1rem}.is-invalid,.btn-outline-primary.is-invalid{border-color:red!important}\n"], components: [{ type: i7.NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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: FormLocationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-form-location', template: "<div class=\"col-md-6 form-new-loc\" *ngIf=\"form\">\n  <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Name' | translate}} *</label>\n      <div class=\"col-sm-9\">\n        <input type=\"text\" class=\"form-control\" data-testid=\"new-location-name\" (ngModelChange)=\"onFormChange()\"\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['name'])||  isFormError(form.controls['name'])}\"\n          required formControlName=\"name\">\n\n        <div class=\"invalid-feedback\">\n          <ngb-alert data-testid=\"new-location-name-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\"validatorsService.isControlError(form.controls['name']) \n          ||  isFormError(form.controls['name'])\">\n            {{validatorsService.getError(form.controls['name']) | translate}}\n          </ngb-alert>\n\n        </div>\n      </div>\n    </div>\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Address' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <input type=\"text\" class=\"form-control\" formControlName=\"addresses\" data-testid=\"new-location-address\" (ngModelChange)=\"onFormChange()\"\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['addresses']) ||  isFormError(form.controls['addresses'])}\">\n        <div class=\"invalid-feedback\">\n          <span data-testid=\"\" [translate]=\"validatorsService.getError(form.controls['addresses'])\"\n            *ngIf=\" validatorsService.isControlError(form.controls['addresses'])\"></span>\n\n          <ngb-alert data-testid=\"new-location-address-invalid\" [dismissible]=\"false\" type=\"danger\"\n            *ngIf=\"validatorsService.isControlError(form.controls['addresses']) \">\n\n            {{validatorsService.getError(form.controls['addresses']) | translate}}\n          </ngb-alert>\n\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Construction year' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <input type=\"text\" class=\"form-control\" formControlName=\"constructionYear\"\n          data-testid=\"new-location-constructionYear\" (ngModelChange)=\"onFormChange()\"\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['constructionYear']) || isFormError(form.controls['constructionYear'])}\">\n        <div class=\"invalid-feedback\">\n          <ngb-alert data-testid=\"new-location-constructionYear-invalid\" [dismissible]=\"false\" type=\"danger\"\n            *ngIf=\"validatorsService.isControlError(form.controls['constructionYear']) ||  isFormError(form.controls['constructionYear'])\">\n            {{validatorsService.getError(form.controls['constructionYear']) | translate}}\n          </ngb-alert>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Latitude' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <input type=\"text\" class=\"form-control\" formControlName=\"latitude\" data-testid=\"new-location-latitude\" (ngModelChange)=\"onFormChange()\"\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['latitude'])||  isFormError(form.controls['latitude'])}\">\n        <div class=\"invalid-feedback\">\n          <ngb-alert data-testid=\"new-location-latitude-invalid\" [dismissible]=\"false\" type=\"danger\"\n            *ngIf=\"validatorsService.isControlError(form.controls['latitude']) ||  isFormError(form.controls['latitude'])\">\n            {{validatorsService.getError(form.controls['latitude']) | translate}}\n          </ngb-alert>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Longitude' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <input type=\"text\" class=\"form-control\" formControlName=\"longitude\" data-testid=\"new-location-longitude\" (ngModelChange)=\"onFormChange()\"\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['longitude'])||  isFormError(form.controls['longitude'])}\">\n        <div class=\"invalid-feedback\">\n          <ngb-alert data-testid=\"new-location-longitude-invalid\" [dismissible]=\"false\" type=\"danger\"\n            *ngIf=\"validatorsService.isControlError(form.controls['longitude']) ||  isFormError(form.controls['longitude'])\">\n            {{validatorsService.getError(form.controls['longitude']) | translate}}\n          </ngb-alert>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Access level' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <select class=\"d-inline-block custom-select rounded-pill\" formControlName=\"level\">\n          <option *ngFor=\"let level of levels\" [value]=\"level\">{{level | translate}}</option>\n        </select>\n      </div>\n    </div>\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Energy Class' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <input type=\"text\" class=\"form-control\" formControlName=\"classEnergyConsumption\"\n          data-testid=\"new-location-classEnergyConsumption\" (ngModelChange)=\"onFormChange()\"\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['classEnergyConsumption']) ||  isFormError(form.controls['classEnergyConsumption'])}\">\n        <div class=\"invalid-feedback\">\n          <ngb-alert data-testid=\"new-location-classEnergyConsumption-invalid\" [dismissible]=\"false\" type=\"danger\"\n            *ngIf=\"validatorsService.isControlError(form.controls['classEnergyConsumption']) ||  isFormError(form.controls['classEnergyConsumption'])\">\n            {{validatorsService.getError(form.controls['classEnergyConsumption']) | translate}}\n          </ngb-alert>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Greenhouse gas emission Class' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <input type=\"text\" class=\"form-control\" formControlName=\"classGes\" data-testid=\"new-location-classGes\" (ngModelChange)=\"onFormChange()\"\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['classGes'])||  isFormError(form.controls['classGes'])}\">\n        <div class=\"invalid-feedback\">\n          <ngb-alert data-testid=\"new-location-classGes-invalid\" [dismissible]=\"false\" type=\"danger\"\n            *ngIf=\"validatorsService.isControlError(form.controls['classGes']) ||  isFormError(form.controls['classGes'])\">\n            {{validatorsService.getError(form.controls['classGes']) | translate}}\n          </ngb-alert>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3 row\">\n      <label class=\"col-sm-3 col-form-label\">{{'Cover picture' | translate}}</label>\n      <div class=\"col-sm-9\">\n        <img #imageBasePreview *ngIf=\"currentImage\" class=\"image-preview\" [src]=\"currentImage\">\n        <label #imageInputContainer for=\"image\"\n          class=\"btn btn-label-file btn-outline-primary rounded-pill imageInputContainer\">\n          <input #imageInput type=\"file\" id=\"image\" (change)=\"handleImageInput($event.target)\" />\n          {{ imageInputText | translate}}</label>\n        <button *ngIf=\"currentImage && !imageToUpload\" class=\"btn btn-outline-primary rounded-pill\"\n          (click)=\"imageToBeDeleted=true;clearImageFile()\">{{'Delete picture' | translate }}</button>\n        <div class=\"image-name\" *ngIf=\"imageToUpload\">\n          <p>{{ imageToUpload.name}}</p>\n          <div (click)=\"clearImageFile()\" [style.cursor]=\"'pointer'\">\n            <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\n          </div>\n        </div>\n\n      </div>\n    </div>\n    <div class=\"mb-3 row\" *ngIf=\"!location\">\n      <label class=\"col-sm-3 col-form-label\">{{'Create mission for this space' | translate}}</label>\n      <div class=\"col-sm-3\">\n        <input type=\"checkbox\" [(ngModel)]=\"addMissionForNewSpace\" [ngModelOptions]=\"{standalone: true}\">\n      </div>\n    </div>\n\n    <button data-testid=\"new-location-submit-btn\" [ngClass]=\"{'is-invalid' : errorForm }\" type=\"submit\"\n      class=\"btn btn-outline-primary rounded-pill me-3\">{{'Save' | translate}}</button>\n\n    <button data-testid=\"new-location-close-btn\" type=\"button\" (click)=\"onCancel()\"\n      class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\n      translate}}</button>\n\n    <div class=\"invalid-feedback\" *ngIf=\"errorForm\">\n      <ngb-alert data-testid=\"new-location-form-invalid\" [dismissible]=\"false\" type=\"danger\">\n        {{'errorForm.infoBtn' |translate}}\n\n      </ngb-alert>\n    </div>\n  </form>\n</div>", styles: ["input[type=file]{display:none}.custom-select{border-color:var(--smarterplan-primary);width:auto}.form-new-loc{background-color:#d3d3d3;padding-top:10px;padding-bottom:10px;margin-bottom:15px}.btn-outline-primary{background-color:#fff}h4{color:var(--smarterplan-primary)}.image-preview{object-fit:cover;max-height:400px;max-width:400px;display:flex;margin-bottom:15px}.imageInputContainer{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.image-name{display:flex}.col-form-label{margin-bottom:1rem;width:230px}.form-new-loc{background-color:#d3d3d3;margin-bottom:15px;padding:10px;width:80%;border-radius:10px}.col-sm-9 select{width:100%;height:31.25px;padding-left:10px}.btn-outline-primary{width:200px;margin-bottom:1rem;margin-right:1rem}.is-invalid,.btn-outline-primary.is-invalid{border-color:red!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.SpaceService }, { type: i2.PropertyService }, { type: i2.BaseUserService }, { type: i1$2.FormBuilder }, { type: i2.MissionService }, { type: i2.LayerService }, { type: i2.ValidatorsService }]; }, propDecorators: { imageInputContainer: [{
+                type: ViewChild,
+                args: ["imageInputContainer"]
+            }], imageInput: [{
+                type: ViewChild,
+                args: ["imageInput"]
+            }], imageBasePreview: [{
+                type: ViewChild,
+                args: ["imageBasePreview"]
+            }], location: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
+class LocationsComponent {
+    constructor(spaceService, router, userService, viewerService, navigationService, navigatorService) {
+        this.spaceService = spaceService;
+        this.router = router;
+        this.userService = userService;
+        this.viewerService = viewerService;
+        this.navigationService = navigationService;
+        this.navigatorService = navigatorService;
+        this.isAdding = false;
+        this.filteredLocations = [];
+        this.isManager = false;
+        this.isMuseumUser = true;
+        this.locations = [];
+        this.menuItems = [];
+        /** Last filtered Locations, used when we go back on all locations from the search bar location */
+        this.lastFiltredLocations = [];
+        this.levels = enumToArray(LevelStatus);
+        this.userSubcription = this.userService.isChanged.subscribe((isConnected) => {
+            if (isConnected) {
+                this.refresh();
+            }
+        });
+        this.locationIDSubscription =
+            this.navigatorService.locationIDChange.subscribe((id) => {
+                this.changeSelectedLocation(id);
+                this.setupMenuItems();
+            });
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.userService.cu) {
+                this.resetList();
+                this.updateUserRights();
+            }
+            this.setupMenuItems();
+        });
+    }
+    findSpaceById(id) {
+        return this.locations.find((loc) => loc.id === id);
+    }
+    /**
+     * Update when we change the selected location in filter (search bar)
+     * @param id for a location, if null display all last filtred location
+     */
+    changeSelectedLocation(id) {
+        const space = id ? this.findSpaceById(id) : null;
+        this.filteredLocations = space ? [space] : this.lastFiltredLocations; // New selected space or last filtered location
+    }
+    refresh() {
+        this.updateUserRights();
+        this.resetList();
+    }
+    ngOnDestroy() {
+        this.userSubcription.unsubscribe();
+        this.locationIDSubscription.unsubscribe();
+    }
+    setupMenuItems() {
+        this.menuItems = [{ label: "All Locations", url: "/localisation" }];
+        if (this.isAdding) {
+            this.menuItems.push({ label: "New" });
+        }
+        if (this.filteredLocations.length === 1) {
+            const selectedLoc = this.filteredLocations[0];
+            this.menuItems.push({ label: selectedLoc.name });
+        }
+    }
+    updateUserRights() {
+        this.isManager = this.userService.hasManagerRoleInAnyMission();
+        this.isMuseumUser = this.userService.hasOnlyMuseumRole();
+    }
+    isManagerForSpace(spaceID) {
+        return (this.userService.isManager(spaceID) ||
+            this.userService.isGuide(spaceID));
+    }
+    resetList() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.locations = yield this.spaceService.getLocationsForCurrentUser();
+            this.filteredLocations = this.locations;
+            this.lastFiltredLocations = this.locations;
+            this.isAdding = false;
+            this.changeSelectedLocation(this.navigatorService.currentNavBarLocationID); // Set for the current selected location
+            this.setupMenuItems();
+        });
+    }
+    onAddLocation() {
+        this.isAdding = true;
+        this.setupMenuItems();
+    }
+    handleImageInput(files) {
+        this.imageToUpload = files.item(0);
+    }
+    onFormChange(event) {
+        this.navigatorService.locationIDChange.next(null); /** Remove selected location */
+        this.isAdding = false;
+        if (event) {
+            this.resetList();
+        }
+        this.setupMenuItems();
+    }
+    onVisitClick(loc, visit) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.userService.userHasAccessToAllZonesInSpace(loc.id)) {
+                // get allowed sweep for the user
+                const allowedSweeps = yield this.navigationService.getAllowedSweepsIDsForUserInSpace(loc.id);
+                const firstSweep = allowedSweeps[0];
+                this.viewerService.setSweepToMove(firstSweep);
+            }
+            if (this.userService.isGuide(loc.id)) {
+                this.router.navigate(["museum", loc.id]);
+            }
+            else {
+                this.router.navigate(["visit", loc.id], {
+                    queryParams: { model3D: visit.model3d },
+                });
+            }
+        });
+    }
+    applyResultsSearchBar(results) {
+        this.filteredLocations = results || this.locations;
+        this.lastFiltredLocations = this.filteredLocations;
+        this.navigatorService.locationIDChange.next(null); // When we search with keyword, we would like to search on all locations
+    }
+    getSearchType() {
+        return SearchObjectType.LOCATION;
+    }
+    getStringNoSpace(data) {
+        return data.replace(/\s/g, '');
+    }
+    onDetailViewClick(spaceID) {
+        this.navigatorService.locationIDChange.next(spaceID); // Send update for the location filter bar
+        this.router.navigate(["dashboard/localisation", spaceID]);
+    }
+}
+LocationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocationsComponent, deps: [{ token: i2.SpaceService }, { token: i1.Router }, { token: i2.BaseUserService }, { token: i2.ViewerService }, { token: i2.NavigationService }, { token: i2.NavigatorService }], target: i0.ɵɵFactoryTarget.Component });
+LocationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LocationsComponent, selector: "lib-locations", ngImport: i0, template: "<div class=\"dashboard-tab\">\n    <div class=\"header-dashboard-tab\">\n      <div class=\"m-3\">\n        <lib-tab-navigation (onGoBack)=\"onFormChange(null)\" [menuItems]='menuItems'></lib-tab-navigation>\n        <span class=\"ml-3 refreshIcon\" (click)=\"refresh()\" *ngIf=\"!(isAdding)\" ngbTooltip=\"Refresh list\">\n          <span class=\"iconify refreshIcon\" data-icon=\"ion:refresh-circle\" data-width=\"35\" data-rotate=\"90deg\"></span>\n        </span>\n      </div>  \n      <lib-search-bar *ngIf=\"!isAdding && !isMuseumUser\" [searchable]=\"locations\" [objectType]=\"getSearchType()\"\n        (searchEvent)=\"applyResultsSearchBar($event)\"></lib-search-bar>\n      \n      <div class=\"col-md-8\">\n        <div class=\"sp-row\" *ngIf=\"!isAdding && isManager\">\n          <button data-testid=\"new-location-btn\" class=\"btn btn-outline-primary rounded-pill add-location\" (click)=\"onAddLocation()\">\n            {{'Add location' | translate}}</button>\n          <!-- <div class=\"outer_circle\">\n            <button id='btn-icon' (click)=\"onAddLocation()\"></button>\n          </div> -->\n        </div>\n      </div>\n    </div>\n    <hr>\n    <div class=\"row\" *ngIf=\"isAdding\">\n      <div class=\"col-md-6\">\n        <h4>{{'New location' | translate}}</h4>\n      </div>\n    </div>\n    <section *ngIf=\"!isAdding\">\n      <div class=\"row\">\n        <div class=\"col-sm-12 col-md-12 col-lg-6\" *ngIf=\"filteredLocations\">\n          <ul data-testid=\"location-list-container\" class=\"list-group list-group-flush\">\n            <li class=\"d-flex justify-content-between list-group-item\"\n              *ngFor=\"let loc of filteredLocations; index as index\">\n              <div class=\"d-flex\">\n                <div class=\"col-md-5 img-main-container\">\n                  <div id=\"img_container\">\n                    <img class=\"location-img\" *ngIf=\"loc.annexes; else elseBlock\" [src]=\"loc.annexes\">\n                    <ng-template #elseBlock><img class=\"location-img\"\n                        src=\"./../../../../assets/images/visuel-off-big.jpg\" />\n                    </ng-template>\n                    <button [ngClass]=\"['open-btn-'+getStringNoSpace(loc.name)]\" *ngIf=\"isManagerForSpace(loc.id)\" class=\"btn-details\" (click)=\"onDetailViewClick(loc.id)\">\n                      {{'View details' | translate}}</button>\n                  </div>\n  \n                </div>\n                <div class=\"col-md-7 location-info\">\n                  <p>{{loc.name}}</p>\n                  <p>{{loc.addresses}}</p>\n                  <p [ngClass]=\"['view-btn-'+getStringNoSpace(loc.name)]\" *ngFor=\"let visit of loc.visits\" (click)=\"onVisitClick(loc, visit)\" class=\"visit-name\"\n                    [style.cursor]=\"'pointer'\" ngbTooltip=\"Visit\">{{ visit.name ? visit.name : loc.name}}</p>\n                </div>\n              </div>\n            </li>\n  \n          </ul>\n        </div>\n        <div class=\"col-sm-12 col-md-12 col-lg-6\">\n          <lib-map [spaces]=\"filteredLocations\"></lib-map>\n        </div>\n      </div>\n    </section>\n    <lib-form-location *ngIf=\"isAdding\" (onChange)=\"onFormChange($event)\"></lib-form-location>\n</div>\n", styles: [".searchbar{margin-bottom:10px}input[type=file]{display:none}.form-control{border-radius:var(--form-control-border-radius)}.custom-select{border-color:var(--smarterplan-primary);width:auto}.form-new-loc{background-color:#d3d3d3;padding-top:10px;padding-bottom:10px;margin-bottom:15px}.btn-outline-primary{background-color:#fff}h4{color:var(--smarterplan-primary)}section .list-group{margin-top:15px}section .list-group-item{padding:5px 0}section .location-info{font-size:1.1em}section .location-img{width:100%;object-fit:cover;object-position:center bottom;height:165px}#img_container{position:relative;display:inline-block;text-align:center;width:250px}.img-main-container{max-width:250px;width:250px!important;margin-right:10px}.visit-name{color:var(--smarterplan-primary);font-weight:600}.btn-details{background-color:var(--smarterplan-primary-transparent);position:absolute;color:#fff;bottom:0px;right:0px;width:100%;height:30%;border:none;font-size:1em;text-transform:lowercase}#btn-icon{width:30px;height:30px;background:url(../../../../assets/icons/plus.svg);border:none;vertical-align:middle}#btn-icon:hover{background:url(../../../../assets/icons/plus-over.svg)}#btn-icon[disabled]:hover{background:url(../../../../assets/icons/plus.svg)}.outer_circle{background-color:#ebebeb;border-radius:50%;width:32px;height:32px;padding:1px;margin-left:5px}.refreshIcon{color:var(--smarterplan-primary);cursor:pointer}.refreshIcon svg{vertical-align:middle!important}.add-location{width:12vw}.sp-row{display:flex;flex-direction:row}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: i2.SearchBarComponent, selector: "lib-search-bar", inputs: ["searchable", "objectType"], outputs: ["searchEvent"] }, { type: MapComponent, selector: "lib-map", inputs: ["spaces"] }, { type: FormLocationComponent, selector: "lib-form-location", inputs: ["location"], outputs: ["onChange"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocationsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-locations', template: "<div class=\"dashboard-tab\">\n    <div class=\"header-dashboard-tab\">\n      <div class=\"m-3\">\n        <lib-tab-navigation (onGoBack)=\"onFormChange(null)\" [menuItems]='menuItems'></lib-tab-navigation>\n        <span class=\"ml-3 refreshIcon\" (click)=\"refresh()\" *ngIf=\"!(isAdding)\" ngbTooltip=\"Refresh list\">\n          <span class=\"iconify refreshIcon\" data-icon=\"ion:refresh-circle\" data-width=\"35\" data-rotate=\"90deg\"></span>\n        </span>\n      </div>  \n      <lib-search-bar *ngIf=\"!isAdding && !isMuseumUser\" [searchable]=\"locations\" [objectType]=\"getSearchType()\"\n        (searchEvent)=\"applyResultsSearchBar($event)\"></lib-search-bar>\n      \n      <div class=\"col-md-8\">\n        <div class=\"sp-row\" *ngIf=\"!isAdding && isManager\">\n          <button data-testid=\"new-location-btn\" class=\"btn btn-outline-primary rounded-pill add-location\" (click)=\"onAddLocation()\">\n            {{'Add location' | translate}}</button>\n          <!-- <div class=\"outer_circle\">\n            <button id='btn-icon' (click)=\"onAddLocation()\"></button>\n          </div> -->\n        </div>\n      </div>\n    </div>\n    <hr>\n    <div class=\"row\" *ngIf=\"isAdding\">\n      <div class=\"col-md-6\">\n        <h4>{{'New location' | translate}}</h4>\n      </div>\n    </div>\n    <section *ngIf=\"!isAdding\">\n      <div class=\"row\">\n        <div class=\"col-sm-12 col-md-12 col-lg-6\" *ngIf=\"filteredLocations\">\n          <ul data-testid=\"location-list-container\" class=\"list-group list-group-flush\">\n            <li class=\"d-flex justify-content-between list-group-item\"\n              *ngFor=\"let loc of filteredLocations; index as index\">\n              <div class=\"d-flex\">\n                <div class=\"col-md-5 img-main-container\">\n                  <div id=\"img_container\">\n                    <img class=\"location-img\" *ngIf=\"loc.annexes; else elseBlock\" [src]=\"loc.annexes\">\n                    <ng-template #elseBlock><img class=\"location-img\"\n                        src=\"./../../../../assets/images/visuel-off-big.jpg\" />\n                    </ng-template>\n                    <button [ngClass]=\"['open-btn-'+getStringNoSpace(loc.name)]\" *ngIf=\"isManagerForSpace(loc.id)\" class=\"btn-details\" (click)=\"onDetailViewClick(loc.id)\">\n                      {{'View details' | translate}}</button>\n                  </div>\n  \n                </div>\n                <div class=\"col-md-7 location-info\">\n                  <p>{{loc.name}}</p>\n                  <p>{{loc.addresses}}</p>\n                  <p [ngClass]=\"['view-btn-'+getStringNoSpace(loc.name)]\" *ngFor=\"let visit of loc.visits\" (click)=\"onVisitClick(loc, visit)\" class=\"visit-name\"\n                    [style.cursor]=\"'pointer'\" ngbTooltip=\"Visit\">{{ visit.name ? visit.name : loc.name}}</p>\n                </div>\n              </div>\n            </li>\n  \n          </ul>\n        </div>\n        <div class=\"col-sm-12 col-md-12 col-lg-6\">\n          <lib-map [spaces]=\"filteredLocations\"></lib-map>\n        </div>\n      </div>\n    </section>\n    <lib-form-location *ngIf=\"isAdding\" (onChange)=\"onFormChange($event)\"></lib-form-location>\n</div>\n", styles: [".searchbar{margin-bottom:10px}input[type=file]{display:none}.form-control{border-radius:var(--form-control-border-radius)}.custom-select{border-color:var(--smarterplan-primary);width:auto}.form-new-loc{background-color:#d3d3d3;padding-top:10px;padding-bottom:10px;margin-bottom:15px}.btn-outline-primary{background-color:#fff}h4{color:var(--smarterplan-primary)}section .list-group{margin-top:15px}section .list-group-item{padding:5px 0}section .location-info{font-size:1.1em}section .location-img{width:100%;object-fit:cover;object-position:center bottom;height:165px}#img_container{position:relative;display:inline-block;text-align:center;width:250px}.img-main-container{max-width:250px;width:250px!important;margin-right:10px}.visit-name{color:var(--smarterplan-primary);font-weight:600}.btn-details{background-color:var(--smarterplan-primary-transparent);position:absolute;color:#fff;bottom:0px;right:0px;width:100%;height:30%;border:none;font-size:1em;text-transform:lowercase}#btn-icon{width:30px;height:30px;background:url(../../../../assets/icons/plus.svg);border:none;vertical-align:middle}#btn-icon:hover{background:url(../../../../assets/icons/plus-over.svg)}#btn-icon[disabled]:hover{background:url(../../../../assets/icons/plus.svg)}.outer_circle{background-color:#ebebeb;border-radius:50%;width:32px;height:32px;padding:1px;margin-left:5px}.refreshIcon{color:var(--smarterplan-primary);cursor:pointer}.refreshIcon svg{vertical-align:middle!important}.add-location{width:12vw}.sp-row{display:flex;flex-direction:row}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.SpaceService }, { type: i1.Router }, { type: i2.BaseUserService }, { type: i2.ViewerService }, { type: i2.NavigationService }, { type: i2.NavigatorService }]; } });
+
+class DetailLocationComponent {
+    constructor(route, spaceService, router, userService, translate, navigatorService) {
+        this.route = route;
+        this.spaceService = spaceService;
+        this.router = router;
+        this.userService = userService;
+        this.translate = translate;
+        this.navigatorService = navigatorService;
+        this.isEditing = false;
+        this.menuItems = [];
+        this.isValidatingDpe = false;
+        this.gettingData = false;
+        this.destroy$ = new Subject();
+        this.navigatorService.locationIDChange
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((spaceID) => {
+            this.router.navigate(["dashboard/localisation", spaceID]);
+        });
+        this.route.params.subscribe((params) => {
+            this.id = params.id;
+            this.setup();
+        });
+    }
+    ngOnInit() { }
+    setup() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.space = yield this.spaceService.getSpace(this.id);
+            this.setupMenuItems();
+            this.setGuestLink();
+            this.setCanArchive();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    setupMenuItems() {
+        this.menuItems = [
+            { label: "Locations", url: "/localisation" },
+            {
+                label: this.space.name,
+                url: `/localisation/${this.space.id}`,
+            },
+        ];
+        if (this.isEditing) {
+            this.menuItems.push({ label: "Edit" });
+        }
+        else {
+            this.menuItems.push({ label: "Information" });
+        }
+    }
+    onEdit() {
+        this.isEditing = true;
+        this.setupMenuItems();
+    }
+    onReturn() {
+        // this.locationService.back()
+        this.router.navigate(["dashboard/localisation"]);
+    }
+    reset() {
+        this.isEditing = false;
+        this.setupMenuItems();
+    }
+    onArchive() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const message = this.translate.instant("confirm.archiveSpace");
+            if (window.confirm(message)) {
+                yield this.spaceService.softDeleteSpace(this.id);
+                this.onReturn();
+            }
+        });
+    }
+    onFormChange(event) {
+        this.isEditing = false;
+        if (event) {
+            this.space = event;
+        }
+        this.setupMenuItems();
+    }
+    onDpeValidate() {
+        this.isValidatingDpe = true;
+        this.parsedMetadata = JSON.parse(this.space.metadata);
+        this.parsedMetadata = this.parsedMetadata.filter((result) => result.geo_adresse);
+    }
+    onSelectChange(selectedResult) {
+        for (const result of this.parsedMetadata) {
+            if (result !== selectedResult && result.selected) {
+                result.selected = false;
+            }
+        }
+        this.selectedDpeResult = selectedResult;
+    }
+    onSaveResult() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.selectedDpeResult) {
+                const input = {
+                    id: this.space.id,
+                    constructionYear: this.selectedDpeResult.annee_construction,
+                    classEnergyConsumption: this.selectedDpeResult.classe_consommation_energie,
+                    classGes: this.selectedDpeResult.classe_estimation_ges,
+                    status: SpaceStatus.DPE_VALIDATED,
+                };
+                const updatedLoc = yield this.spaceService.updateSpace(input);
+                this.space = updatedLoc;
+                this.isValidatingDpe = false;
+            }
+        });
+    }
+    onCancel() {
+        this.isValidatingDpe = false;
+    }
+    onErase() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.spaceService.updateSpace({
+                id: this.space.id,
+                status: SpaceStatus.DPE_VALIDATED,
+            });
+            this.space.status = SpaceStatus.DPE_VALIDATED;
+            this.isValidatingDpe = false;
+        });
+    }
+    onGetDpeData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.gettingData = true;
+            yield this.spaceService.updateSpace({
+                id: this.space.id,
+                status: SpaceStatus.DPE_FETCH,
+            });
+            // force update of location
+            setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                this.space = yield this.spaceService.getSpace(this.space.id);
+                this.gettingData = false;
+            }), 1500);
+        });
+    }
+    setGuestLink() {
+        if (this.space.guestLink) {
+            const { origin } = document.location;
+            this.guestLink = `${origin}/${this.space.guestLink}`;
+            setTimeout(() => {
+                const hyperlink = document.querySelector("#linkHref");
+                const message = this.translate.instant("confirm.followLink");
+                hyperlink.addEventListener("click", () => __awaiter(this, void 0, void 0, function* () {
+                    if (window.confirm(message)) {
+                        window.location.href = this.guestLink;
+                        yield this.userService.logoutCurrentAndSignOutAuth();
+                        this.router.navigate(["auth"]);
+                    }
+                }));
+            }, 0);
+        }
+    }
+    setCanArchive() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.canArchive = this.userService.isSPAdmin()
+                ? true
+                : yield this.spaceService.canArchiveSpace(this.id);
+        });
+    }
+}
+DetailLocationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DetailLocationComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.SpaceService }, { token: i1.Router }, { token: i2.BaseUserService }, { token: i3.TranslateService }, { token: i2.NavigatorService }], target: i0.ɵɵFactoryTarget.Component });
+DetailLocationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DetailLocationComponent, selector: "lib-detail-location", ngImport: i0, template: "<div class=\"container-fluid\">\n    <div class=\"m-3\">\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"reset()\"></lib-tab-navigation>\n    </div>\n    <button class=\"btn btn-outline-primary rounded-pill me-3\" (click)=\"onReturn()\">{{'Back to locations' |\n        translate}}</button>\n    <div class=\"row\" *ngIf=\"!isEditing && space\">\n        <div class=\"col-md-5\">\n            <ul class=\"list-group list-group-flush\">\n                <li class=\"list-group-item bg-transparent\">{{'Name' | translate}}: {{space.name}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Address' | translate}}: {{space.addresses}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Construction year' | translate}}:\n                    {{space.constructionYear ?\n                        space.constructionYear : \"No data\" | translate}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Latitude' | translate}}:\n                    {{space.latitude ?\n                        space.latitude : \"No data\" | translate}}</li>\n                <li class=\"list-group-item bg-transparent\">{{'Longitude' | translate}}: {{space.longitude ?\n                    space.longitude : \"No data\" | translate}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Access level' | translate}}: {{space.level | translate\n                    }} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Energy Class' | translate}}:\n                    {{space.classEnergyConsumption ?\n                        space.classEnergyConsumption : \"No data\" | translate}}\n                    <button *ngIf=\"space.status !== 'DPE_TO_VALIDATE'\"\n                        class=\"btn btn-outline-primary rounded-pill no-lowercase ms-5\" (click)=\"onGetDpeData()\">\n                        {{'Get data from API DPE' | translate}}</button>\n                    <a class=\"bg-transparent ms-5\" *ngIf=\"space.status === 'DPE_TO_VALIDATE'\"\n                        (click)=\"onDpeValidate()\" style=\"cursor: pointer;\">\n                        <span class=\"iconify\" data-icon=\"mdi:alert-circle-check\" style=\"color: #f19c80;\" data-width=\"25\"\n                            data-height=\"25\"></span>\n                        {{'DPE data found. Click to validate' | translate}}\n                    </a>\n                </li>\n                <li class=\"list-group-item bg-transparent\">{{'Greenhouse gas emission Class' | translate}}:\n                    {{space.classGes ? space.classGes : \"No data\" | translate}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Shareable Guest Link' | translate}}:\n                    <div style=\"display: inline;\" *ngIf=\"guestLink\">\n                        <a id=\"linkHref\" target=\"_blank\">{{'Try the link' | translate }}</a>\n                        <div ngxClipboard [cbContent]=\"guestLink\" [style.cursor]=\"'pointer'\"\n                            style=\"margin-left: 5px; max-width: 20px; display: inline;\" ngbTooltip=\"Copied!\"\n                            triggers=\"click:blur\">\n                            <span class=\"iconify\" data-icon=\"mdi:content-copy\" data-inline=\"false\" data-width=\"20\"\n                                data-height=\"20\"></span>\n                        </div>\n                    </div>\n                    <p *ngIf=\"!guestLink\" style=\"display: inline;\">{{'No link' | translate }}</p>\n                    <p *ngIf=\"!guestLink\"><small>({{'Generate link from a VISITOR mission'|translate}})</small>\n                    </p>\n                </li>\n\n            </ul>\n            <div class=\"d-flex justify-content-center\" *ngIf=\"gettingData\">\n                <div class=\"spinner-border\" role=\"status\">\n                    <span class=\"visually-hidden\">Loading...</span>\n                </div>\n            </div>\n            <hr>\n            <div class=\"d-flex\">\n                <button class=\"btn btn-outline-primary rounded-pill me-3\" (click)=\"onEdit()\" data-testid=\"location-edit-btn\">{{'Edit' |\n                    translate}}</button>\n                <div class=\"tooltip-wrapper\" ngbTooltip=\"{{!canArchive ? ('Contact SmarterPlan' | translate) : ('Archive location and related data' | translate)}}\">\n                    <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onArchive()\" [disabled]=\"!canArchive\">\n                        {{'Archive' | translate}}</button>\n                </div>\n            </div>\n\n\n        </div>\n        <div class=\"col-md-7\" *ngIf=\"isValidatingDpe\">\n            <h6>{{'Most relevant results for' | translate}} : \n                <b>diagnostics de performance \u00E9nerg\u00E9tique (DPE) des b\u00E2timents tertiaires</b></h6>\n            <table class=\"table table-striped\">\n                <thead>\n                    <tr>\n                        <th scope=\"col\">#</th>\n                        <th scope=\"col\">{{'Apply to location' | translate}}</th>\n                        <th scope=\"col\">{{'Address' | translate}}</th>\n                        <th scope=\"col\">{{'Activity sector' | translate}}</th>\n                        <th scope=\"col\">{{'Construction year' | translate}}</th>\n                        <th scope=\"col\">{{'Energy Class' | translate}}</th>\n                        <th scope=\"col\">{{'Greenhouse gas emission Class' | translate}}</th>\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr *ngFor=\"let result of parsedMetadata; index as i\">\n                        <th scope=\"row\">{{ i + 1 }}</th>\n                        <td><input class=\"checkbox-apply\" type=\"checkbox\" [(ngModel)]=\"result.selected\"\n                                (change)=\"onSelectChange(result)\"></td>\n                        <td>{{result.geo_adresse}}</td>\n                        <td>{{result.secteur_activite}}</td>\n                        <td>{{ result.annee_construction }}</td>\n                        <td>{{ result.classe_consommation_energie }}</td>\n                        <td>{{ result.classe_estimation_ges }}</td>\n                    </tr>\n                </tbody>\n            </table>\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onSaveResult()\"\n                [disabled]=\"!selectedDpeResult\">{{'Save selected' |\n                translate}}</button>\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onErase()\">\n                {{'No match (erase data)' | translate}}</button>\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onCancel()\">\n                {{'Cancel' | translate}}</button>\n        </div>\n    </div>\n    <lib-form-location *ngIf=\"isEditing\" [location]=\"space\" (onChange)=\"onFormChange($event)\"></lib-form-location>\n</div>\n", styles: [""], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: FormLocationComponent, selector: "lib-form-location", inputs: ["location"], outputs: ["onChange"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$1.ClipboardDirective, selector: "[ngxClipboard]", inputs: ["ngxClipboard", "container", "cbContent", "cbSuccessMsg"], outputs: ["cbOnSuccess", "cbOnError"] }, { type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: DetailLocationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-detail-location', template: "<div class=\"container-fluid\">\n    <div class=\"m-3\">\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"reset()\"></lib-tab-navigation>\n    </div>\n    <button class=\"btn btn-outline-primary rounded-pill me-3\" (click)=\"onReturn()\">{{'Back to locations' |\n        translate}}</button>\n    <div class=\"row\" *ngIf=\"!isEditing && space\">\n        <div class=\"col-md-5\">\n            <ul class=\"list-group list-group-flush\">\n                <li class=\"list-group-item bg-transparent\">{{'Name' | translate}}: {{space.name}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Address' | translate}}: {{space.addresses}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Construction year' | translate}}:\n                    {{space.constructionYear ?\n                        space.constructionYear : \"No data\" | translate}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Latitude' | translate}}:\n                    {{space.latitude ?\n                        space.latitude : \"No data\" | translate}}</li>\n                <li class=\"list-group-item bg-transparent\">{{'Longitude' | translate}}: {{space.longitude ?\n                    space.longitude : \"No data\" | translate}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Access level' | translate}}: {{space.level | translate\n                    }} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Energy Class' | translate}}:\n                    {{space.classEnergyConsumption ?\n                        space.classEnergyConsumption : \"No data\" | translate}}\n                    <button *ngIf=\"space.status !== 'DPE_TO_VALIDATE'\"\n                        class=\"btn btn-outline-primary rounded-pill no-lowercase ms-5\" (click)=\"onGetDpeData()\">\n                        {{'Get data from API DPE' | translate}}</button>\n                    <a class=\"bg-transparent ms-5\" *ngIf=\"space.status === 'DPE_TO_VALIDATE'\"\n                        (click)=\"onDpeValidate()\" style=\"cursor: pointer;\">\n                        <span class=\"iconify\" data-icon=\"mdi:alert-circle-check\" style=\"color: #f19c80;\" data-width=\"25\"\n                            data-height=\"25\"></span>\n                        {{'DPE data found. Click to validate' | translate}}\n                    </a>\n                </li>\n                <li class=\"list-group-item bg-transparent\">{{'Greenhouse gas emission Class' | translate}}:\n                    {{space.classGes ? space.classGes : \"No data\" | translate}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Shareable Guest Link' | translate}}:\n                    <div style=\"display: inline;\" *ngIf=\"guestLink\">\n                        <a id=\"linkHref\" target=\"_blank\">{{'Try the link' | translate }}</a>\n                        <div ngxClipboard [cbContent]=\"guestLink\" [style.cursor]=\"'pointer'\"\n                            style=\"margin-left: 5px; max-width: 20px; display: inline;\" ngbTooltip=\"Copied!\"\n                            triggers=\"click:blur\">\n                            <span class=\"iconify\" data-icon=\"mdi:content-copy\" data-inline=\"false\" data-width=\"20\"\n                                data-height=\"20\"></span>\n                        </div>\n                    </div>\n                    <p *ngIf=\"!guestLink\" style=\"display: inline;\">{{'No link' | translate }}</p>\n                    <p *ngIf=\"!guestLink\"><small>({{'Generate link from a VISITOR mission'|translate}})</small>\n                    </p>\n                </li>\n\n            </ul>\n            <div class=\"d-flex justify-content-center\" *ngIf=\"gettingData\">\n                <div class=\"spinner-border\" role=\"status\">\n                    <span class=\"visually-hidden\">Loading...</span>\n                </div>\n            </div>\n            <hr>\n            <div class=\"d-flex\">\n                <button class=\"btn btn-outline-primary rounded-pill me-3\" (click)=\"onEdit()\" data-testid=\"location-edit-btn\">{{'Edit' |\n                    translate}}</button>\n                <div class=\"tooltip-wrapper\" ngbTooltip=\"{{!canArchive ? ('Contact SmarterPlan' | translate) : ('Archive location and related data' | translate)}}\">\n                    <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onArchive()\" [disabled]=\"!canArchive\">\n                        {{'Archive' | translate}}</button>\n                </div>\n            </div>\n\n\n        </div>\n        <div class=\"col-md-7\" *ngIf=\"isValidatingDpe\">\n            <h6>{{'Most relevant results for' | translate}} : \n                <b>diagnostics de performance \u00E9nerg\u00E9tique (DPE) des b\u00E2timents tertiaires</b></h6>\n            <table class=\"table table-striped\">\n                <thead>\n                    <tr>\n                        <th scope=\"col\">#</th>\n                        <th scope=\"col\">{{'Apply to location' | translate}}</th>\n                        <th scope=\"col\">{{'Address' | translate}}</th>\n                        <th scope=\"col\">{{'Activity sector' | translate}}</th>\n                        <th scope=\"col\">{{'Construction year' | translate}}</th>\n                        <th scope=\"col\">{{'Energy Class' | translate}}</th>\n                        <th scope=\"col\">{{'Greenhouse gas emission Class' | translate}}</th>\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr *ngFor=\"let result of parsedMetadata; index as i\">\n                        <th scope=\"row\">{{ i + 1 }}</th>\n                        <td><input class=\"checkbox-apply\" type=\"checkbox\" [(ngModel)]=\"result.selected\"\n                                (change)=\"onSelectChange(result)\"></td>\n                        <td>{{result.geo_adresse}}</td>\n                        <td>{{result.secteur_activite}}</td>\n                        <td>{{ result.annee_construction }}</td>\n                        <td>{{ result.classe_consommation_energie }}</td>\n                        <td>{{ result.classe_estimation_ges }}</td>\n                    </tr>\n                </tbody>\n            </table>\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onSaveResult()\"\n                [disabled]=\"!selectedDpeResult\">{{'Save selected' |\n                translate}}</button>\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onErase()\">\n                {{'No match (erase data)' | translate}}</button>\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onCancel()\">\n                {{'Cancel' | translate}}</button>\n        </div>\n    </div>\n    <lib-form-location *ngIf=\"isEditing\" [location]=\"space\" (onChange)=\"onFormChange($event)\"></lib-form-location>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.SpaceService }, { type: i1.Router }, { type: i2.BaseUserService }, { type: i3.TranslateService }, { type: i2.NavigatorService }]; } });
+
+class CalibrationComponent {
+    constructor(matterportImportService, planService, route, router, zoneService, spaceService, navigationService, translate) {
+        this.matterportImportService = matterportImportService;
+        this.planService = planService;
+        this.route = route;
+        this.router = router;
+        this.zoneService = zoneService;
+        this.spaceService = spaceService;
+        this.navigationService = navigationService;
+        this.translate = translate;
+        /** Item to display for the navbar */
+        this.menuItems = [];
+        /** Zoom ratio of the canvas/plan  */
+        this.canvasZoom = 0;
+        /** Opacity for matterport iframe */
+        this.opacity = 50;
+        /** Current rotation for matterport, [0-360],  matterport rotation is bind to input range */
+        this.rotation = 180;
+        /** Previous rotation, use to calculate the deltaRotation to rotate, when user change rotation value using range input */
+        this.prevRotation = 180;
+        /** True when the user is currently rotating with the input range, the matterport rotation events will be ignored */
+        this.isRotatingRange = false;
+        /** Rotating queue event to send to matterport */
+        this.rotatingQueueEvent = [];
+        /** True when Vertical symmetry is enabled */
+        this.reflectV = false;
+        /** True when Horizontal symmetry is enabled */
+        this.reflectH = false;
+        this.chosenPlanIsPdf = false;
+        /** First Point in visit, used to determine the calibration  */
+        this.firstMarkVisit = { x: 0, y: 0 };
+        /** Second Point in visit, used to determine the calibration  */
+        this.secondMarkVisit = { x: 0.5, y: 0.5 };
+        /** Equivalent of 'firstMarkVisit' in canvas  */
+        this.firstMarkPlan = { x: 0, y: 0 };
+        /** Equivalent of 'secondMarkVisit' in canvas  */
+        this.secondMarkPlan = { x: 0, y: 0 };
+        /** Calibration result, (offsetX, offsetY, x, y) */
+        this.calibrage = {};
+        /** Is in preview mode (see scan result) */
+        this.preview = false;
+        /** Matterport is loading */
+        this.loading = true;
+        this.positions = [];
+        this.floors = [];
+        this.zoomCanBeChanged = false;
+    }
+    ngOnDestroy() {
+        if (!this.loading) {
+            this.matterportImportService.removeFrame();
+        }
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.spaceID = this.route.snapshot.queryParams.spaceID;
+            this.currentSpace = yield this.spaceService.getSpace(this.spaceID);
+            /** Menu nav bar */
+            this.setupMenuItems();
+            this.chosenPlan = this.planService.getChosenPlan();
+            if (this.chosenPlan) {
+                this.chosenPlanIsPdf = this.chosenPlan.annexe.includes('pdf');
+                this.launchViewer();
+                setTimeout(() => {
+                    this.configureCanvas().then(() => {
+                        this.panzoom = panzoom(this.canvas, {
+                            bounds: true,
+                            boundsPadding: 0,
+                            maxZoom: 2.5,
+                            minZoom: 0.1,
+                            initialZoom: 1,
+                            zoomSpeed: 0.02,
+                        });
+                    });
+                }, 500);
+            }
+            else {
+                this.router.navigate(['/dashboard/localisation', this.spaceID, 'plans']);
+            }
+        });
+    }
+    /** **********************************************************************************************
+     *                                      MENU NAV BAR
+     *********************************************************************************************** */
+    setupMenuItems() {
+        this.menuItems = [
+            { label: 'Locations', url: '/localisation' },
+            {
+                label: this.currentSpace.name,
+                url: `/localisation/${this.spaceID}`,
+            },
+            {
+                label: 'Plans',
+                url: `/localisation/${this.currentSpace.id}/plans`,
+            },
+            {
+                label: 'Calibration',
+                url: `/localisation/${this.currentSpace.id}/plan-calibration?spaceID=${this.currentSpace.id}`,
+            },
+        ];
+    }
+    /** **********************************************************************************************
+     *                                     CANVAS
+     *********************************************************************************************** */
+    /** Display the plan */
+    configureCanvas() {
+        return __awaiter(this, void 0, void 0, function* () {
+            /** Get canvas */
+            if (!this.canvas) {
+                const canvas = document.querySelector('#canvas');
+                this.canvas = canvas;
+            }
+            if (!this.chosenPlanIsPdf) {
+                const image = yield getMetaForImage(this.chosenPlan.filepath);
+                /** Compute the new size for the canvas/matterport, base on the dimension of the plan, keeping the ratio */
+                const size = this.getSizeForCanvas(image.width, image.height);
+                /** Compute the plan zoom ratio (use for the calibration later) */
+                this.canvasZoom = size.w / image.width;
+                this.resizeView(size);
+                /** Draw Plan on the canvas */
+                this.drawImage(this.chosenPlan.filepath);
+            }
+            else {
+                // TODO
+                this.pdfToCanvas();
+            }
+        });
+    }
+    /** Update size of the canvas/matterport */
+    resizeView(size) {
+        this.canvasDiv.nativeElement.style.width = `${size.w}px`;
+        this.canvasDiv.nativeElement.style.height = `${size.h}px`;
+        this.canvas.style.width = `${size.w}px`;
+        this.canvas.style.height = `${size.h}px`;
+        this.canvas.width = size.w;
+        this.canvas.height = size.h;
+        this.canvasSize = size;
+    }
+    /** Draw something on the canvas */
+    drawImage(url, x = 0, y = 0, icone = false) {
+        const image = new Image();
+        const size = this.canvasSize;
+        const context = this.canvas.getContext('2d');
+        /** Flip the context, for symmetry */
+        // if (this.reflectV) {
+        //     context.translate(size.w, 0);
+        //     context.scale(-1, 1);
+        // }
+        // if (this.reflectH) {
+        //     context.translate(0, size.h);
+        //     context.scale(1, -1);
+        // }
+        let imageWidth = size.w;
+        let imageHeight = size.h;
+        image.addEventListener('load', () => {
+            if (icone) {
+                imageWidth = image.width;
+                imageHeight = image.height;
+            }
+            context.drawImage(image, 0, 0, image.width, image.height, x, y, imageWidth, imageHeight);
+        });
+        image.src = url;
+    }
+    /** Get the size for the canvas, based on the plan size, keeping the ratio */
+    getSizeForCanvas(w, h) {
+        let canvasW = this.canvasDiv.nativeElement.offsetWidth;
+        let canvasH = this.canvasDiv.nativeElement.offsetHeight;
+        const imageRatio = w / h;
+        const canvasRatio = canvasW / canvasH;
+        if (imageRatio > canvasRatio) {
+            canvasH = canvasW / imageRatio;
+        }
+        else {
+            canvasW = canvasH * imageRatio;
+        }
+        return { w: canvasW, h: canvasH };
+    }
+    /** [TODO] Convert a PDF to a Canvas */
+    pdfToCanvas() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const pdfjs = yield import('pdfjs-dist/build/pdf');
+            const pdfjsWorker = yield import('pdfjs-dist/build/pdf.worker.entry');
+            pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+            const pdf = yield getDocument(this.chosenPlan.filepath)
+                .promise;
+            const page = yield pdf.getPage(1);
+            const viewPortParameters = { scale: 1 };
+            const viewport = page.getViewport(viewPortParameters);
+            this.canvas.height = viewport.height;
+            this.canvas.width = viewport.width;
+            const size = this.getSizeForCanvas(viewport.width, viewport.height);
+            console.log(size);
+            this.canvasSize = size;
+            this.canvasZoom = size.w / viewport.width;
+            const context = this.canvas.getContext('2d');
+            const renderContext = {
+                canvasContext: context,
+                viewport,
+            };
+            const renderTask = page.render(renderContext).promise;
+            renderTask.then(() => console.log('Page rendered'));
+            // const res = canvas.toDataURL();
+            // if (pdf != null) pdf.destroy();
+            // return res;
+        });
+    }
+    /** User click to user Symmetry Vertical */
+    onReflectV() {
+        this.reflectV = !this.reflectV;
+        this.configureCanvas();
+    }
+    /** User click to user Symmetry Horizontal */
+    onReflectH() {
+        this.reflectH = !this.reflectH;
+        this.configureCanvas();
+    }
+    /** **********************************************************************************************
+     *                                     MATTERPORT
+     *********************************************************************************************** */
+    /** Launch matterport */
+    launchViewer() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.matterportImportService.initSdkForModel(this.chosenPlan.model3d);
+            const { sdk } = this.matterportImportService;
+            this.floors = Object.values(this.matterportImportService.floors);
+            // console.log(this.floors);
+            setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                /** Move Floor mode */
+                sdk.Mode.moveTo(sdk.Mode.Mode.FLOORPLAN).then((nextMode) => __awaiter(this, void 0, void 0, function* () {
+                    /** Display the correct floor for the plan */
+                    try {
+                        const matterportFloor = this.chosenPlan.zone.metadata ?
+                            JSON.parse(this.chosenPlan.zone.metadata).matterportFloorSequence : null;
+                        yield this.matterportImportService.moveToFloor(this.chosenPlan.zone.name, matterportFloor);
+                        /** When the user try to change the view mode we set it back to floorpan */
+                        sdk.on(sdk.Mode.Event.CHANGE_END, (oldMode, newMode) => {
+                            if (newMode !== sdk.Mode.Mode.FLOORPLAN) {
+                                sdk.Mode.moveTo(sdk.Mode.Mode.FLOORPLAN, {
+                                    transition: 'transition.instant',
+                                });
+                            }
+                        });
+                    }
+                    catch (_a) {
+                        console.log('couldnot move to floor');
+                    }
+                }));
+                /** We can display the matterport view now */
+                this.loading = false;
+            }), 1000);
+            /** Update current camera pose and rotation */
+            sdk.Camera.pose.subscribe((event) => {
+                /** We update only if the user is not changing the rotation with the <input> range, to not override the <input> value */
+                if (!this.isRotatingRange) {
+                    this.rotation = event.rotation.y + 180;
+                    this.prevRotation = this.rotation;
+                    this.cameraPose = event;
+                }
+            });
+        });
+    }
+    /** When the <input> range, for rotation, change */
+    onRotationChange() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const rotationDelta = this.rotation - this.prevRotation;
+            this.prevRotation = this.rotation;
+            /** Send the rotationDelta to th queue event in order to be send to matterport */
+            this.rotatingQueueEvent.push(rotationDelta);
+            /** Start to process the queue, if it's the first event */
+            if (!this.isRotatingRange) {
+                this.isRotatingRange = true;
+                this.processRotatingQueueEvent();
+            }
+        });
+    }
+    /** Process the rotating event queue, send event one by one to matterport  */
+    processRotatingQueueEvent() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { sdk } = this.matterportImportService;
+            /** While the queue is not empty */
+            while (this.rotatingQueueEvent.length > 0) {
+                /** Rotate matterport by deltaRotation and remove event from queue */
+                yield sdk.Camera.rotate(this.rotatingQueueEvent.shift(), 0, {
+                    speed: 360,
+                });
+            }
+            /** When the queue is empty, then the user is not rotating with the <input> range anymore */
+            this.isRotatingRange = false;
+        });
+    }
+    /** **********************************************************************************************
+     *                                     USER ACTIONS
+     *********************************************************************************************** */
+    /** Preview calibration */
+    onPreview() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.preview = true;
+            /** Place sweeps */
+            this.onPlaceSweeps();
+        });
+    }
+    calibrate() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const [navigation] = this.currentNavigations;
+            const position = JSON.parse(navigation.position);
+            this.firstMarkPlan =
+                yield this.matterportImportService.sdk.Renderer.getScreenPosition({
+                    x: position.x,
+                    y: position.y,
+                    z: position.z,
+                });
+            this.secondMarkPlan =
+                yield this.matterportImportService.sdk.Renderer.getScreenPosition({
+                    x: position.x,
+                    y: 0,
+                    z: 0,
+                });
+            const deltaZVisit = 0 - position.z;
+            let deltaXPlan = this.secondMarkPlan.x - this.firstMarkPlan.x;
+            if (deltaXPlan === 0) {
+                // console.log("we moved along Y axis on Plan");
+                const deltaYPlan = this.secondMarkPlan.y - this.firstMarkPlan.y;
+                this.calibrage.nameYAxis = 'z';
+                this.calibrage.nameXAxis = 'x';
+                this.calibrage.offsetY = this.secondMarkPlan.y;
+                this.calibrage.scaleY = deltaYPlan / deltaZVisit;
+            }
+            else {
+                // console.log(" we moved along X axis on Plan");
+                this.calibrage.nameYAxis = 'x';
+                this.calibrage.nameXAxis = 'z';
+                this.calibrage.offsetX = this.secondMarkPlan.x;
+                this.calibrage.scaleX = deltaXPlan / deltaZVisit;
+            }
+            const thirdMarkPlan = yield this.matterportImportService.sdk.Renderer.getScreenPosition({
+                x: 0,
+                y: 0,
+                z: position.z,
+            });
+            const deltaXVisit = 0 - position.x;
+            if (deltaXPlan === 0) {
+                // console.log(" we moved along X axis on Plan");
+                deltaXPlan = thirdMarkPlan.x - this.firstMarkPlan.x;
+                this.calibrage.offsetX = thirdMarkPlan.x;
+                this.calibrage.scaleX = deltaXPlan / deltaXVisit;
+            }
+            else {
+                const deltaYPlan = thirdMarkPlan.y - this.firstMarkPlan.y;
+                this.calibrage.offsetY = thirdMarkPlan.y;
+                this.calibrage.scaleY = deltaYPlan / deltaXVisit;
+            }
+            /** Take considiration of pan and zoom of plan on canvas */
+            const transformInfo = this.panzoom.getTransform();
+            const { scale, x, y } = transformInfo;
+            // console.log(transformInfo);
+            this.calibrage.offsetXPlan = x;
+            this.calibrage.offsetYPlan = y;
+            this.calibrage.scalePlan = scale;
+            console.log(this.calibrage);
+        });
+    }
+    /** Place sweeps */
+    onPlaceSweeps() {
+        return __awaiter(this, void 0, void 0, function* () {
+            /** Display all scan */
+            const zone = yield this.zoneService.getZone(this.chosenPlan.zoneID);
+            if (zone) {
+                this.currentZone = zone;
+                const navigations = yield this.navigationService.getNavigationsForZone(this.currentZone);
+                this.currentNavigations = navigations;
+                yield this.calibrate();
+                if (navigations.length > 0) {
+                    for (const navigation of navigations) {
+                        const testPosition = JSON.parse(navigation.position);
+                        const positionX = this.calibrage.nameXAxis === 'x' ? testPosition.x : testPosition.z;
+                        const positionY = this.calibrage.nameYAxis === 'x' ? testPosition.x : testPosition.z;
+                        const testX = positionX * this.calibrage.scaleX + this.calibrage.offsetX;
+                        const testY = positionY * this.calibrage.scaleY + this.calibrage.offsetY;
+                        // console.log("test position GREEN", testX, testY);
+                        const transformedX = (testX - this.calibrage.offsetXPlan) / this.calibrage.scalePlan; // we are undoing the pan and zoom
+                        const transformedY = (testY - this.calibrage.offsetYPlan) / this.calibrage.scalePlan;
+                        this.positions.push({
+                            navID: navigation.id,
+                            planID: this.chosenPlan.id,
+                            x: transformedX,
+                            y: transformedY,
+                        });
+                        const iconSize = 30 * this.calibrage.scalePlan;
+                        const shift = iconSize / 2;
+                        this.drawImage('https://api.iconify.design/mdi:adjust.svg?color=green&height=30&width=30', transformedX - shift, transformedY - shift, true);
+                    }
+                }
+            }
+        });
+    }
+    /** Save calibration */
+    onSave() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.currentZone) {
+                /** Normalize with the zoom */
+                // this.calibrage.offsetX /= this.canvasZoom;
+                // this.calibrage.offsetY /= this.canvasZoom;
+                // this.calibrage.x /= this.canvasZoom;
+                // this.calibrage.y /= this.canvasZoom;
+                this.calibrage.new = true;
+                this.calibrage.imgWidth = this.canvasSize.w;
+                this.calibrage.imgHeight = this.canvasSize.h;
+                yield this.planService.updatePlan({
+                    id: this.chosenPlan.id,
+                    calibration: JSON.stringify(this.calibrage),
+                });
+                yield Promise.all(this.positions.map((position) => __awaiter(this, void 0, void 0, function* () {
+                    const { navID } = position;
+                    delete position.navID;
+                    const nav = this.currentNavigations.find((_nav) => _nav.id === navID);
+                    let positionsDataToUpdate;
+                    if (nav.positionOnPlan) {
+                        const positionOnPlan = nav.positionOnPlan.map((entry) => JSON.parse(entry));
+                        const positionForCurrentPlan = positionOnPlan.find((entry) => entry.planID === this.chosenPlan.id);
+                        if (positionForCurrentPlan) {
+                            positionOnPlan.splice(positionOnPlan.indexOf(positionForCurrentPlan), 1, position);
+                        }
+                        else {
+                            positionOnPlan.push(position);
+                        }
+                        positionsDataToUpdate = [...positionOnPlan];
+                    }
+                    else {
+                        positionsDataToUpdate = [position];
+                    }
+                    // console.log(positionsDataToUpdate);
+                    yield this.navigationService.updateNavigation({
+                        id: navID,
+                        positionOnPlan: positionsDataToUpdate.map((entry) => JSON.stringify(entry)),
+                    });
+                })));
+            }
+            this.matterportImportService.removeFrame();
+            this.router.navigate(['/dashboard/localisation', this.spaceID, 'plans']);
+            alert(this.translate.instant('calibration.success'));
+        });
+    }
+    /** Reset the canvas */
+    onReset() {
+        this.reflectH = false;
+        this.reflectV = false;
+        this.preview = false;
+        this.configureCanvas();
+    }
+    /** Cancel, leave */
+    onCancel() {
+        this.matterportImportService.removeFrame();
+        this.router.navigate(['/dashboard/localisation', this.spaceID, 'plans']);
+        alert(this.translate.instant('calibration.canceled'));
+    }
+    onFloorClick(floor) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.currentFloor = floor;
+            yield this.matterportImportService.moveToFloor(floor.id);
+        });
+    }
+    onActivateZoomChange() {
+        this.zoomCanBeChanged = !this.zoomCanBeChanged;
+        const iframe = document.querySelector('#viewer-frame');
+        if (iframe) {
+            iframe.style.zIndex = this.zoomCanBeChanged ? '1' : '0';
+        }
+    }
+}
+CalibrationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CalibrationComponent, deps: [{ token: i2.MatterportImportService }, { token: i2.PlanService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.ZoneService }, { token: i2.SpaceService }, { token: i2.NavigationService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+CalibrationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CalibrationComponent, selector: "lib-calibration", viewQueries: [{ propertyName: "canvasDiv", first: true, predicate: ["canvasDiv"], descendants: true }], ngImport: i0, template: "<div class=\"row mt-3\">\n    <div class=\"col\">\n        <div class=\"m-3\">\n            <lib-tab-navigation [menuItems]='menuItems'></lib-tab-navigation>\n        </div>\n    </div>\n</div>\n\n<div id=\"rowCanvas\">\n    <div #canvasDiv id=\"canvasDiv\">\n\n        <div id=\"viewer-frame\" [style.pointer-events]=\"zoomCanBeChanged?'auto':'none'\">\n            <!-- <div class=\"blur\"></div> -->\n        </div>\n        <canvas id=\"canvas\" [ngStyle]=\"{'opacity': (preview||loading) ? '1' : 'calc(' + opacity + '/ 100)'}\"></canvas>\n    </div>\n\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"!(preview || loading)\">\n        <h1>{{'Calibration tool' | translate}}</h1>\n        <div class=\"tool\">\n            <div class=\"row ms-0 me-0 legend\">\n                <div class=\"legend-bar-indicator\" [ngStyle]=\"{'opacity': 'calc(' + (-(opacity-100)+10) + '/ 100)'}\">\n                    {{'Less' | translate}}</div>\n                <div class=\"legend-title\">{{'Plan Opacity' | translate }}</div>\n                <div class=\"legend-bar-indicator\" [ngStyle]=\"{'opacity': 'calc(' + (opacity+10) + '/ 100)'}\">{{'More' |\n                    translate}}</div>\n            </div>\n            <div class=\"row ms-0 me-0 \">\n                <input [disabled]=\"false\" [ngModelOptions]=\"{standalone: true}\" [(ngModel)]=\"opacity\" type=\"range\"\n                    class=\"form-range\" min=\"0\" max=\"100\" value=\"50\" id=\"opacity\">\n            </div>\n        </div>\n        <div class=\"tool\">\n            <div class=\"row ms-0 me-0 \">\n                <div class=\"label-legend\">{{'Change Visit Floor' | translate}}</div>\n                <div ngbDropdown class=\"d-inline-block ms-3\">\n                    <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>\n                        {{currentFloor ? currentFloor.id : ('Floor' | translate) }}</button>\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                        <button ngbDropdownItem *ngFor=\"let floor of floors\" (click)=\"onFloorClick(floor)\">\n                            {{ floor.name.length > 0 ? floor.name : ('Floor ' + floor.id) }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n        <div class=\"tool\">\n            <div class=\"row ms-0 me-0 \">\n                <div class=\"tool-checkbox-container\">\n                    <div class=\"tool-checkbox-subcontainer\">\n                        <div class=\"label-legend me-3\">{{'Pan/Zoom Visit' | translate}} {{zoomCanBeChanged ? \"ON\" :\n                            \"OFF\"}}\n                        </div>\n                        <input type=\"checkbox\" (change)=\"onActivateZoomChange()\" style=\"margin-top: 5px;\">\n                    </div>\n                    <div class=\"card border-warning mb-3 mt-3\" *ngIf=\"zoomCanBeChanged\">\n                        <div class=\"card-body text-warning\">\n                            <h5 class=\"card-title\">{{\"calibration.wait-message\" | translate}}</h5>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"action\">\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onPreview()\"\n                [disabled]=\"zoomCanBeChanged\">{{'Preview' | translate}}</button>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' |\n                translate}}</button>\n\n        </div>\n\n    </div>\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"preview\">\n        <h1>{{'Validation' | translate}}</h1>\n        <div class=\"action\">\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onSave()\">{{'Validate' |\n                translate}}</button>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onReset()\">{{'Reset' |\n                translate}}</button>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' |\n                translate}}</button>\n\n        </div>\n    </div>\n\n\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"loading\">\n        <h3>{{\"Waiting for Matterport\" | translate}}...</h3>\n        <div class=\"d-flex justify-content-center\">\n            <div class=\"spinner-border\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n            </div>\n        </div>\n\n    </div>\n</div>", styles: [".button-visit{display:none;height:30px;width:30px;position:absolute;background:url(https://api.iconify.design/mdi:map-marker-check.svg?color=red&height=30) no-repeat scroll 0 0 transparent;border:none}#button-visit-left{left:350px;top:550px}#button-visit-right{left:500px;top:600px}#rowCanvas{display:flex}#canvasDiv{height:100%;width:100%;position:relative}#canvas{width:100%;height:100%;opacity:.5}#viewer-frame{top:0;position:absolute;width:100%;height:100%}.calibration-tools{margin-left:20px;width:400px;background-color:#fff;z-index:11;border:1px solid var(--smarterplan-primary);padding:7px}.form-range{width:100%}.tool{margin-top:20px}.tool .legend{justify-content:space-between;position:relative;margin-bottom:5px}.tool .legend-title{font-size:1.2rem;color:var(--smarterplan-primary);margin:auto;width:100%;font-weight:700;display:flex;justify-content:center}.tool .legend-bar-indicator{width:15%!important}.tool .label-legend{color:var(--smarterplan-primary);font-size:1.1rem;max-width:55%}.tool .tool-checkbox-container{display:flex;flex-direction:column}.tool .tool-checkbox-container .tool-checkbox-subcontainer{display:flex}.blur{width:150px;height:52px;position:absolute;background-color:#1e2023;bottom:0}.symmetry{padding:5px;border:solid 2px;border-radius:10px;color:var(--smarterplan-primary);margin:25px 10px;cursor:pointer}.symmetry:hover{color:var(--smarterplan-primary)}.symmetry-row{justify-content:center}.action{margin-top:30px;display:flex;justify-content:space-evenly}h1{color:var(--smarterplan-primary);text-align:center;margin-bottom:20px}h3{color:var(--smarterplan-primary);text-align:center;margin-bottom:10px}.btn-outline-primary.disabled{background-color:var(--smarterplan-orange)!important}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }], directives: [{ type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CalibrationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-calibration', template: "<div class=\"row mt-3\">\n    <div class=\"col\">\n        <div class=\"m-3\">\n            <lib-tab-navigation [menuItems]='menuItems'></lib-tab-navigation>\n        </div>\n    </div>\n</div>\n\n<div id=\"rowCanvas\">\n    <div #canvasDiv id=\"canvasDiv\">\n\n        <div id=\"viewer-frame\" [style.pointer-events]=\"zoomCanBeChanged?'auto':'none'\">\n            <!-- <div class=\"blur\"></div> -->\n        </div>\n        <canvas id=\"canvas\" [ngStyle]=\"{'opacity': (preview||loading) ? '1' : 'calc(' + opacity + '/ 100)'}\"></canvas>\n    </div>\n\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"!(preview || loading)\">\n        <h1>{{'Calibration tool' | translate}}</h1>\n        <div class=\"tool\">\n            <div class=\"row ms-0 me-0 legend\">\n                <div class=\"legend-bar-indicator\" [ngStyle]=\"{'opacity': 'calc(' + (-(opacity-100)+10) + '/ 100)'}\">\n                    {{'Less' | translate}}</div>\n                <div class=\"legend-title\">{{'Plan Opacity' | translate }}</div>\n                <div class=\"legend-bar-indicator\" [ngStyle]=\"{'opacity': 'calc(' + (opacity+10) + '/ 100)'}\">{{'More' |\n                    translate}}</div>\n            </div>\n            <div class=\"row ms-0 me-0 \">\n                <input [disabled]=\"false\" [ngModelOptions]=\"{standalone: true}\" [(ngModel)]=\"opacity\" type=\"range\"\n                    class=\"form-range\" min=\"0\" max=\"100\" value=\"50\" id=\"opacity\">\n            </div>\n        </div>\n        <div class=\"tool\">\n            <div class=\"row ms-0 me-0 \">\n                <div class=\"label-legend\">{{'Change Visit Floor' | translate}}</div>\n                <div ngbDropdown class=\"d-inline-block ms-3\">\n                    <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>\n                        {{currentFloor ? currentFloor.id : ('Floor' | translate) }}</button>\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                        <button ngbDropdownItem *ngFor=\"let floor of floors\" (click)=\"onFloorClick(floor)\">\n                            {{ floor.name.length > 0 ? floor.name : ('Floor ' + floor.id) }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n        <div class=\"tool\">\n            <div class=\"row ms-0 me-0 \">\n                <div class=\"tool-checkbox-container\">\n                    <div class=\"tool-checkbox-subcontainer\">\n                        <div class=\"label-legend me-3\">{{'Pan/Zoom Visit' | translate}} {{zoomCanBeChanged ? \"ON\" :\n                            \"OFF\"}}\n                        </div>\n                        <input type=\"checkbox\" (change)=\"onActivateZoomChange()\" style=\"margin-top: 5px;\">\n                    </div>\n                    <div class=\"card border-warning mb-3 mt-3\" *ngIf=\"zoomCanBeChanged\">\n                        <div class=\"card-body text-warning\">\n                            <h5 class=\"card-title\">{{\"calibration.wait-message\" | translate}}</h5>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"action\">\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onPreview()\"\n                [disabled]=\"zoomCanBeChanged\">{{'Preview' | translate}}</button>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' |\n                translate}}</button>\n\n        </div>\n\n    </div>\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"preview\">\n        <h1>{{'Validation' | translate}}</h1>\n        <div class=\"action\">\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onSave()\">{{'Validate' |\n                translate}}</button>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onReset()\">{{'Reset' |\n                translate}}</button>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' |\n                translate}}</button>\n\n        </div>\n    </div>\n\n\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"loading\">\n        <h3>{{\"Waiting for Matterport\" | translate}}...</h3>\n        <div class=\"d-flex justify-content-center\">\n            <div class=\"spinner-border\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n            </div>\n        </div>\n\n    </div>\n</div>", styles: [".button-visit{display:none;height:30px;width:30px;position:absolute;background:url(https://api.iconify.design/mdi:map-marker-check.svg?color=red&height=30) no-repeat scroll 0 0 transparent;border:none}#button-visit-left{left:350px;top:550px}#button-visit-right{left:500px;top:600px}#rowCanvas{display:flex}#canvasDiv{height:100%;width:100%;position:relative}#canvas{width:100%;height:100%;opacity:.5}#viewer-frame{top:0;position:absolute;width:100%;height:100%}.calibration-tools{margin-left:20px;width:400px;background-color:#fff;z-index:11;border:1px solid var(--smarterplan-primary);padding:7px}.form-range{width:100%}.tool{margin-top:20px}.tool .legend{justify-content:space-between;position:relative;margin-bottom:5px}.tool .legend-title{font-size:1.2rem;color:var(--smarterplan-primary);margin:auto;width:100%;font-weight:700;display:flex;justify-content:center}.tool .legend-bar-indicator{width:15%!important}.tool .label-legend{color:var(--smarterplan-primary);font-size:1.1rem;max-width:55%}.tool .tool-checkbox-container{display:flex;flex-direction:column}.tool .tool-checkbox-container .tool-checkbox-subcontainer{display:flex}.blur{width:150px;height:52px;position:absolute;background-color:#1e2023;bottom:0}.symmetry{padding:5px;border:solid 2px;border-radius:10px;color:var(--smarterplan-primary);margin:25px 10px;cursor:pointer}.symmetry:hover{color:var(--smarterplan-primary)}.symmetry-row{justify-content:center}.action{margin-top:30px;display:flex;justify-content:space-evenly}h1{color:var(--smarterplan-primary);text-align:center;margin-bottom:20px}h3{color:var(--smarterplan-primary);text-align:center;margin-bottom:10px}.btn-outline-primary.disabled{background-color:var(--smarterplan-orange)!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.MatterportImportService }, { type: i2.PlanService }, { type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.ZoneService }, { type: i2.SpaceService }, { type: i2.NavigationService }, { type: i3.TranslateService }]; }, propDecorators: { canvasDiv: [{
+                type: ViewChild,
+                args: ['canvasDiv']
+            }] } });
+
+class PlansComponent {
+    constructor(route, router, spaceService, planService, fb, translate, navigatorService) {
+        this.route = route;
+        this.router = router;
+        this.spaceService = spaceService;
+        this.planService = planService;
+        this.fb = fb;
+        this.translate = translate;
+        this.navigatorService = navigatorService;
+        // chosenPlan: Plan;
+        this.indexDetails = -1;
+        this.loading = false;
+        this.uploadingPlan = false;
+        this.isCurrentPlanForZone = false;
+        this.chosenPlanIsPdf = false;
+        this.menuItems = [];
+        this.destroy$ = new Subject();
+        this.navigatorService.locationIDChange
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((spaceID) => {
+            this.router.navigate(["dashboard/localisation", spaceID, "plans"]);
+        });
+        this.route.params.subscribe((params) => {
+            this.spaceID = params.id;
+            this.getPlans();
+        });
+    }
+    ngOnInit() {
+        if (this.planService.getPlanFileCache() &&
+            this.planService.getChosenPlan()) {
+            this.addPlanFromCache(this.planService.getPlanFileCache(), this.planService.getChosenPlan());
+            this.planService.setPlanFileCache(null);
+        }
+        this.planService.setChosenPlan(null);
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    setupMenuItems() {
+        this.menuItems = [
+            { label: "Locations", url: "/localisation" },
+            {
+                label: this.currentSpace.name,
+                url: `/localisation/${this.currentSpace.id}`,
+            },
+            {
+                label: "Plans",
+                url: `/localisation/${this.currentSpace.id}/plans`,
+            },
+        ];
+    }
+    onGoBack() { }
+    onPlanClick(plan) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (plan)
+                this.planService.setChosenPlan(plan);
+            this.chosenPlanIsPdf = plan.annexe.includes("pdf");
+            if (!this.chosenPlanIsPdf) {
+                setTimeout(() => {
+                    this.configureCanvas().then(() => {
+                        this.panzoom = panzoom(this.canvas, {
+                            bounds: true,
+                            boundsPadding: 0,
+                            maxZoom: 3.5,
+                            minZoom: 0.1,
+                            initialZoom: 0.5,
+                        });
+                    });
+                }, 500);
+            }
+        });
+    }
+    configureCanvas() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.uploadingPlan = true;
+            const canvas = document.querySelector("#canvas");
+            const image = yield getMetaForImage(this.getChoosenPlan().filepath);
+            canvas.width = image.width;
+            canvas.height = image.height;
+            this.canvas = canvas;
+            this.drawImage(this.getChoosenPlan().filepath);
+            this.uploadingPlan = false;
+        });
+    }
+    drawImage(url, x = 0, y = 0) {
+        const image = new Image();
+        const context = this.canvas.getContext("2d");
+        const imageWidth = this.canvas.width;
+        const imageHeight = this.canvas.height;
+        image.addEventListener("load", () => {
+            context.drawImage(image, 0, 0, image.width, image.height, x, y, imageWidth, imageHeight);
+        });
+        image.src = url;
+        // image.crossOrigin = "*"; //need to download as png,
+        // BUT: https://stackoverflow.com/questions/49503171/the-image-tag-with-crossorigin-anonymous-cant-load-success-from-s3
+    }
+    getPlans() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.loading = true;
+            this.currentSpace = yield this.spaceService.getSpace(this.spaceID);
+            this.setupMenuItems();
+            this.zones = this.currentSpace.zones.items;
+            this.plans = yield this.planService.getSingedPlansForSpace(this.spaceID);
+            this.loading = false;
+            if (this.plans.length === 1) {
+                this.onPlanClick(this.plans[0]);
+            }
+        });
+    }
+    getChoosenPlan() {
+        return this.planService.getChosenPlan();
+    }
+    removeImage() {
+        const context = this.canvas.getContext("2d");
+        context.clearRect(0, 0, 4096, 4096);
+    }
+    /**
+     *
+     */
+    onCalibrateClick() {
+        if (this.getChoosenPlan()) {
+            this.router.navigate(["/dashboard/localisation", this.spaceID, "plan-calibration"], { queryParams: { spaceID: this.spaceID } });
+        }
+    }
+    /**
+     *
+     */
+    onEditClick() {
+        if (this.getChoosenPlan()) {
+            this.router.navigate(["/dashboard/localisation", this.spaceID, "plan-edit"], { queryParams: { spaceID: this.spaceID } });
+        }
+    }
+    onUploadClick() {
+        const inputFile = document.querySelector("#upload-file");
+        inputFile.click();
+    }
+    addPlan(target) {
+        this.fileToUpload = target.files[0];
+        this.planForm = this.fb.group({
+            name: [this.fileToUpload.name, [Validators.required]],
+            zoneID: [null, [Validators.required]],
+            spaceID: this.spaceID,
+            isModified: false,
+            calibration: "",
+        });
+    }
+    addPlanFromCache(file, plan) {
+        this.fileToUpload = file;
+        this.planForm = this.fb.group({
+            name: [this.fileToUpload.name, [Validators.required]],
+            zoneID: [plan ? plan.zoneID : null, [Validators.required]],
+            spaceID: this.spaceID,
+            isModified: !!plan,
+            calibration: plan && plan.isModified && plan.calibration
+                ? plan.calibration
+                : "",
+        });
+    }
+    onSavePlan() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const formValue = this.planForm.value;
+            formValue.isCurrentForZone = this.isCurrentPlanForZone;
+            const createdPlan = yield this.planService.createPlanWithAnnexe(formValue, this.fileToUpload);
+            const filepath = yield getSignedFile(createdPlan.annexe);
+            if (filepath) {
+                createdPlan.filepath = filepath;
+            }
+            if (formValue.isCurrentForZone) {
+                // set all other plans to not current
+                this.planService.setAllPlansForZoneNotCurrent(createdPlan.zoneID, createdPlan.id);
+            }
+            this.plans.push(createdPlan);
+            this.planForm = null;
+            this.fileToUpload = null;
+        });
+    }
+    onCancelUpload() {
+        this.fileToUpload = null;
+        this.planForm = null;
+    }
+    onCurrentPlanClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.planService.updatePlan({
+                id: this.getChoosenPlan().id,
+                isCurrentForZone: this.getChoosenPlan().isCurrentForZone,
+            });
+            if (this.getChoosenPlan().isCurrentForZone) {
+                this.planService.setAllPlansForZoneNotCurrent(this.getChoosenPlan().zoneID, this.getChoosenPlan().id);
+            }
+        });
+    }
+    onDownloadClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const signedFile = yield downloadFileAsObject(this.getChoosenPlan().annexe);
+            if (signedFile) {
+                // @ts-ignore
+                downloadBlob(signedFile.Body, this.getChoosenPlan().name);
+            }
+        });
+    }
+    onDownloadAsPng() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const canvas = document.querySelector("#canvas");
+            canvas.toBlob(function (blob) {
+                downloadBlob(blob, "plan-as-png.png");
+            });
+        });
+    }
+    onRemoveClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const message = this.translate.instant("confirm.deletePlan");
+            if (window.confirm(message)) {
+                yield this.planService.deletePlan(this.getChoosenPlan());
+                this.removeImage();
+                this.planService.setChosenPlan(null);
+                this.getPlans();
+            }
+        });
+    }
+}
+PlansComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PlansComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.SpaceService }, { token: i2.PlanService }, { token: i1$2.FormBuilder }, { token: i3.TranslateService }, { token: i2.NavigatorService }], target: i0.ɵɵFactoryTarget.Component });
+PlansComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: PlansComponent, selector: "lib-plans", ngImport: i0, template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\" class=\"dashboard-tab\">\n    <div class=\"m-3\">\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n    </div>\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n        <div class=\"spinner-border\" role=\"status\">\n            <span class=\"visually-hidden\">Loading...</span>\n        </div>\n    </div>\n    <div class=\"mt-3\" *ngIf=\"!plans && !loading\">\n        <h4 style=\"font-weight: bold;\">{{'No imported plans' | translate }}</h4>\n        <p>{{'For import from 3D visit: go Virtual Visits => Import Images' | translate}}</p>\n    </div>\n    <div class=\"row ms-1\">\n        <div ngbDropdown class=\"d-inline-block me-3\">\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>{{getChoosenPlan() ?\n                getChoosenPlan().name: ('Choose Plan' | translate) }}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                <button ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\">{{plan.name }}\n                </button>\n            </div>\n        </div>\n        <div class=\"d-inline-block\" ngbDropdown #myDrop=\"ngbDropdown\">\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownManual\" ngbDropdownToggle>{{'Choose action' |\n                translate}}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownManual\">\n                <button (click)=\"onCalibrateClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Calibrate' |\n                    translate}}</button>\n                <button (click)=\"onEditClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Edit plan' |\n                    translate}}\n                </button>\n                <button (click)=\"onUploadClick()\" ngbDropdownItem>{{'Upload new plan' | translate}}</button>\n                <button (click)=\"onDownloadClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Download plan' |\n                    translate}}</button>\n                <button (click)=\"onRemoveClick()\" ngbDropdownItem\n                    [disabled]=\"!getChoosenPlan() || getChoosenPlan().isImportedMatterport\">{{'Delete plan' |\n                    translate}}</button>\n                <!-- <button (click)=\"onDownloadAsPng()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">\n                    {{'Download plan as PNG' | translate}}</button> -->\n            </div>\n        </div>\n    </div>\n    <div class=\"row mt-3 ms-0\">\n        <h4 *ngIf=\"fileToUpload\">{{'New plan' | translate }}</h4>\n        <input class=\"hidden\" type=\"file\" id=\"upload-file\" name=\"upload-file\" accept=\"image/png, image/jpeg, .pdf, .svg\"\n            ngf-max-size=\"6MB\" (change)=\"addPlan($event.target)\">\n    </div>\n    <div class=\"col-md-6 mt-3\" *ngIf=\"planForm\">\n        <form (ngSubmit)=\"onSavePlan()\" [formGroup]=\"planForm\">\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Name' | translate}} </label>\n                <div class=\"col-sm-9\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\">\n                </div>\n            </div>\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Zone' | translate}} </label>\n                <div class=\"col-sm-9\">\n                    <select class=\"form-control\" formControlName=\"zoneID\">\n                        <option *ngFor=\"let zone of zones\" [ngValue]=\"zone.id\">\n                            {{ zone.name }}\n                        </option>\n                    </select>\n                </div>\n            </div>\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Set as current plan for zone' | translate}}</label>\n                <div class=\"col-sm-3\">\n                    <input type=\"checkbox\" [(ngModel)]=\"isCurrentPlanForZone\" [ngModelOptions]=\"{standalone: true}\">\n                </div>\n            </div>\n            <button [disabled]=\"planForm.invalid\" type='submit' class=\"btn btn-label-file rounded-pill\">{{'Save' |\n                translate}}</button>\n            <button class=\"btn btn-label-file rounded-pill ms-3\" type=\"button\" (click)=\"onCancelUpload()\">{{'Cancel' |\n                translate}}</button>\n        </form>\n    </div>\n    <ul class=\"col-md-6 list-group list-group-flush\" *ngIf=\"getChoosenPlan()\">\n        <li class=\"list-group-item bg-transparent\">{{'Name' | translate }} : {{getChoosenPlan().name}} </li>\n        <li class=\"list-group-item bg-transparent\"> {{'Plan is ' | translate }} :\n            {{getChoosenPlan().calibration ? ('Calibrated' | translate) : ('Not calibrated' | translate)}}</li>\n        <li class=\"list-group-item bg-transparent\">{{'Attributed to zone ' | translate }} :\n            {{getChoosenPlan().zone ? getChoosenPlan().zone.name : 'None'}}</li>\n        <li class=\"list-group-item bg-transparent\">{{'Is current plan for zone ' | translate }} :\n            <input type=\"checkbox\" [(ngModel)]=\"getChoosenPlan().isCurrentForZone\" (change)=\"onCurrentPlanClick()\">\n        </li>\n\n    </ul>\n\n    <div class=\"row mt-4\">\n        <div class=\"col-md-10\">\n            <embed *ngIf=\"getChoosenPlan() && chosenPlanIsPdf\" [src]=\"getChoosenPlan().filepath | safeUrl\"\n                type=\"application/pdf\" frameBorder=\"0\" scrolling=\"auto\" height=\"650px;\" width=\"100%\" />\n            <div *ngIf=\"!chosenPlanIsPdf\" class=\"row\" style=\"height: 500px; overflow: hidden;\" id=\"canvasDiv\">\n                <canvas id=\"canvas\" width=\"4096px\" height=\"4096px\">\n                    <!-- <img *ngIf=\"chosenPlan\" id=\"plan-image\" [src]=\"chosenPlan.filepath\" style=\"width: 100%;\"> -->\n                </canvas>\n\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".button-visit{display:none;height:30px;width:30px;position:absolute;background:url(https://api.iconify.design/mdi:map-marker-check.svg?color=red&height=30) no-repeat scroll 0 0 transparent;border:none}#button-visit-left{left:350px;top:550px}#button-visit-right{left:500px;top:600px}.hidden{visibility:hidden;width:1px;height:1px}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { 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.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: 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, "safeUrl": i2.SafeUrlPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PlansComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-plans', template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\" class=\"dashboard-tab\">\n    <div class=\"m-3\">\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n    </div>\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n        <div class=\"spinner-border\" role=\"status\">\n            <span class=\"visually-hidden\">Loading...</span>\n        </div>\n    </div>\n    <div class=\"mt-3\" *ngIf=\"!plans && !loading\">\n        <h4 style=\"font-weight: bold;\">{{'No imported plans' | translate }}</h4>\n        <p>{{'For import from 3D visit: go Virtual Visits => Import Images' | translate}}</p>\n    </div>\n    <div class=\"row ms-1\">\n        <div ngbDropdown class=\"d-inline-block me-3\">\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>{{getChoosenPlan() ?\n                getChoosenPlan().name: ('Choose Plan' | translate) }}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                <button ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\">{{plan.name }}\n                </button>\n            </div>\n        </div>\n        <div class=\"d-inline-block\" ngbDropdown #myDrop=\"ngbDropdown\">\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownManual\" ngbDropdownToggle>{{'Choose action' |\n                translate}}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownManual\">\n                <button (click)=\"onCalibrateClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Calibrate' |\n                    translate}}</button>\n                <button (click)=\"onEditClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Edit plan' |\n                    translate}}\n                </button>\n                <button (click)=\"onUploadClick()\" ngbDropdownItem>{{'Upload new plan' | translate}}</button>\n                <button (click)=\"onDownloadClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Download plan' |\n                    translate}}</button>\n                <button (click)=\"onRemoveClick()\" ngbDropdownItem\n                    [disabled]=\"!getChoosenPlan() || getChoosenPlan().isImportedMatterport\">{{'Delete plan' |\n                    translate}}</button>\n                <!-- <button (click)=\"onDownloadAsPng()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">\n                    {{'Download plan as PNG' | translate}}</button> -->\n            </div>\n        </div>\n    </div>\n    <div class=\"row mt-3 ms-0\">\n        <h4 *ngIf=\"fileToUpload\">{{'New plan' | translate }}</h4>\n        <input class=\"hidden\" type=\"file\" id=\"upload-file\" name=\"upload-file\" accept=\"image/png, image/jpeg, .pdf, .svg\"\n            ngf-max-size=\"6MB\" (change)=\"addPlan($event.target)\">\n    </div>\n    <div class=\"col-md-6 mt-3\" *ngIf=\"planForm\">\n        <form (ngSubmit)=\"onSavePlan()\" [formGroup]=\"planForm\">\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Name' | translate}} </label>\n                <div class=\"col-sm-9\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\">\n                </div>\n            </div>\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Zone' | translate}} </label>\n                <div class=\"col-sm-9\">\n                    <select class=\"form-control\" formControlName=\"zoneID\">\n                        <option *ngFor=\"let zone of zones\" [ngValue]=\"zone.id\">\n                            {{ zone.name }}\n                        </option>\n                    </select>\n                </div>\n            </div>\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Set as current plan for zone' | translate}}</label>\n                <div class=\"col-sm-3\">\n                    <input type=\"checkbox\" [(ngModel)]=\"isCurrentPlanForZone\" [ngModelOptions]=\"{standalone: true}\">\n                </div>\n            </div>\n            <button [disabled]=\"planForm.invalid\" type='submit' class=\"btn btn-label-file rounded-pill\">{{'Save' |\n                translate}}</button>\n            <button class=\"btn btn-label-file rounded-pill ms-3\" type=\"button\" (click)=\"onCancelUpload()\">{{'Cancel' |\n                translate}}</button>\n        </form>\n    </div>\n    <ul class=\"col-md-6 list-group list-group-flush\" *ngIf=\"getChoosenPlan()\">\n        <li class=\"list-group-item bg-transparent\">{{'Name' | translate }} : {{getChoosenPlan().name}} </li>\n        <li class=\"list-group-item bg-transparent\"> {{'Plan is ' | translate }} :\n            {{getChoosenPlan().calibration ? ('Calibrated' | translate) : ('Not calibrated' | translate)}}</li>\n        <li class=\"list-group-item bg-transparent\">{{'Attributed to zone ' | translate }} :\n            {{getChoosenPlan().zone ? getChoosenPlan().zone.name : 'None'}}</li>\n        <li class=\"list-group-item bg-transparent\">{{'Is current plan for zone ' | translate }} :\n            <input type=\"checkbox\" [(ngModel)]=\"getChoosenPlan().isCurrentForZone\" (change)=\"onCurrentPlanClick()\">\n        </li>\n\n    </ul>\n\n    <div class=\"row mt-4\">\n        <div class=\"col-md-10\">\n            <embed *ngIf=\"getChoosenPlan() && chosenPlanIsPdf\" [src]=\"getChoosenPlan().filepath | safeUrl\"\n                type=\"application/pdf\" frameBorder=\"0\" scrolling=\"auto\" height=\"650px;\" width=\"100%\" />\n            <div *ngIf=\"!chosenPlanIsPdf\" class=\"row\" style=\"height: 500px; overflow: hidden;\" id=\"canvasDiv\">\n                <canvas id=\"canvas\" width=\"4096px\" height=\"4096px\">\n                    <!-- <img *ngIf=\"chosenPlan\" id=\"plan-image\" [src]=\"chosenPlan.filepath\" style=\"width: 100%;\"> -->\n                </canvas>\n\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".button-visit{display:none;height:30px;width:30px;position:absolute;background:url(https://api.iconify.design/mdi:map-marker-check.svg?color=red&height=30) no-repeat scroll 0 0 transparent;border:none}#button-visit-left{left:350px;top:550px}#button-visit-right{left:500px;top:600px}.hidden{visibility:hidden;width:1px;height:1px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.SpaceService }, { type: i2.PlanService }, { type: i1$2.FormBuilder }, { type: i3.TranslateService }, { type: i2.NavigatorService }]; } });
+
+class ChevronComponent {
+    constructor() {
+        this.conditionShowing = false;
+    }
+    ngOnInit() {
+    }
+}
+ChevronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChevronComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChevronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ChevronComponent, selector: "lib-chevron", inputs: { conditionShowing: "conditionShowing" }, ngImport: i0, template: "<div style=\"height: 30px; width: 30px;\">\n    <span class=\"icon-container\" >\n      <div [class]=\"conditionShowing ? 'icon-img-up' : 'icon-img-down'\"></div>\n    </span>\n</div>\n", styles: [".icon-container{height:30px;width:30px}.icon-img-down{width:30px;height:100%;background:url(https://api.iconify.design/mdi-light/chevron-right.svg?width=28) no-repeat center center/contain}.icon-img-up{width:30px;height:100%;background:url(https://api.iconify.design/mdi-light/chevron-down.svg?width=28) no-repeat center center/contain}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChevronComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-chevron', template: "<div style=\"height: 30px; width: 30px;\">\n    <span class=\"icon-container\" >\n      <div [class]=\"conditionShowing ? 'icon-img-up' : 'icon-img-down'\"></div>\n    </span>\n</div>\n", styles: [".icon-container{height:30px;width:30px}.icon-img-down{width:30px;height:100%;background:url(https://api.iconify.design/mdi-light/chevron-right.svg?width=28) no-repeat center center/contain}.icon-img-up{width:30px;height:100%;background:url(https://api.iconify.design/mdi-light/chevron-down.svg?width=28) no-repeat center center/contain}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { conditionShowing: [{
+                type: Input
+            }] } });
+
+class VisitsComponent {
+    constructor(fb, matterportImportService, captureService, nodeService, spaceService, route, modalService, visitService, validatorsService, translate, navigatorService, router) {
+        this.fb = fb;
+        this.matterportImportService = matterportImportService;
+        this.captureService = captureService;
+        this.nodeService = nodeService;
+        this.spaceService = spaceService;
+        this.route = route;
+        this.modalService = modalService;
+        this.visitService = visitService;
+        this.validatorsService = validatorsService;
+        this.translate = translate;
+        this.navigatorService = navigatorService;
+        this.router = router;
+        this.visitIndexDetails = -1;
+        this.isEditing = false;
+        this.visitSubmitted = false;
+        this.currentSpace = { zones: [] };
+        this.visits = [];
+        this.canCancelImport = false;
+        this.imagesProcessed = 0;
+        this.totalImages = 0;
+        this.menuItems = [];
+        this.errorForm = false;
+        this.isProcessing = false;
+        this.destroy$ = new Subject();
+        this.matterportImportService.importingImages.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.canCancelImport = true;
+        });
+        this.matterportImportService.sweepProcessedCount.pipe(takeUntil(this.destroy$)).subscribe((count) => {
+            this.imagesProcessed = count + 1;
+        });
+        this.matterportImportService.totalSweepsCount.pipe(takeUntil(this.destroy$)).subscribe((count) => {
+            this.totalImages = count;
+        });
+        this.navigatorService.locationIDChange
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((spaceID) => {
+            this.router.navigate(["dashboard/localisation", spaceID, "visits"]);
+        });
+        this.route.params.subscribe((params) => {
+            this.spaceId = params.id;
+            this.resetVisits();
+        });
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.spaceId = this.route.snapshot.paramMap.get('id');
+            yield this.resetVisits();
+            // console.log('visit in import', localStorage.getItem("visitInImport"));
+            if (localStorage.getItem("visitInImport") && localStorage.getItem("indexScanLoad")) {
+                const visitToRetake = this.visits.find((visit) => visit.model3d === localStorage.getItem("visitInImport"));
+                if (visitToRetake.spaceID === this.spaceId) {
+                    console.log("retaking import");
+                    this.imagesProcessed = parseInt(localStorage.getItem("indexScanLoad"));
+                    this.onImport(visitToRetake);
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    /*
+    Visit = {
+      captureID: string,
+      model3d: string,
+      takenAt: number,
+      spaceID: string,
+      viewer: CaptureViewer,
+      surface: number,
+      node: Node,
+      name?: string | null
+    }
+    */
+    setupMenuItems() {
+        this.menuItems = [
+            { label: 'Locations', url: '/localisation' },
+            {
+                label: this.currentSpace.name,
+                url: `/localisation/${this.currentSpace.id}`,
+            },
+            {
+                label: 'Virtual visits',
+                url: `/localisation/${this.currentSpace.id}/visits`,
+            },
+        ];
+    }
+    onGoBack() {
+        this.onCancel();
+    }
+    resetVisits() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.visits = [];
+            this.currentSpace = yield this.spaceService.getSpace(this.spaceId);
+            this.setupMenuItems();
+            yield this.visitService
+                .getVisitsForSpaceForUser(this.spaceId)
+                .then((visits) => {
+                if (visits) {
+                    this.visits = visits;
+                }
+            });
+        });
+    }
+    initVisitForm(input = null) {
+        if (input) {
+            this.visitForm = this.fb.group({
+                captureID: input.captureID,
+                nodeID: input.node.id,
+                name: [input.name, [Validators.required]],
+                model3D: [input.model3d, [Validators.required]],
+                viewer: input.viewer ? input.viewer : CaptureViewer.MATTERPORT,
+                surface: input.surface ? input.surface : null,
+            });
+            this.captureDate = input.takenAt;
+        }
+        else {
+            this.visitForm = this.fb.group({
+                model3D: [null, [Validators.required]],
+                viewer: CaptureViewer.MATTERPORT,
+                surface: null,
+                name: [null, [Validators.required]],
+            });
+        }
+    }
+    onToggleDetail(index) {
+        this.visitIndexDetails = index === this.visitIndexDetails ? -1 : index;
+    }
+    onAddVisit() {
+        this.initVisitForm();
+        this.menuItems.push({ label: 'New' });
+    }
+    onEdit(visit) {
+        this.initVisitForm(visit);
+        this.isEditing = true;
+        this.menuItems.push({ label: visit.name });
+    }
+    onSubmitVisit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.visitSubmitted = true;
+            if (!this.visitForm.valid) {
+                this.errorForm = true;
+                return;
+            }
+            this.errorForm = false;
+            const formValue = this.visitForm.value;
+            const capture = {
+                viewer: formValue.viewer,
+                takenAt: this.captureDate,
+                surface: formValue.surface,
+                spaceID: this.currentSpace.id,
+            };
+            if (this.isEditing) {
+                capture.id = formValue.captureID;
+                yield this.captureService.updateCapture(capture);
+                const node = {
+                    id: formValue.nodeID,
+                    model3D: formValue.model3D,
+                    metadata: formValue.name,
+                };
+                yield this.nodeService.updateNode(node);
+            }
+            else {
+                let createdNode;
+                yield this.captureService.createCapture(capture).then((res) => __awaiter(this, void 0, void 0, function* () {
+                    if (res) {
+                        const node = {
+                            model3D: formValue.model3D,
+                            captureID: res.id,
+                            metadata: formValue.name,
+                        };
+                        createdNode = yield this.nodeService.createNode(node);
+                    }
+                }));
+                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} ${JSON.stringify(e)}`);
+                    this.onDelete({
+                        node: createdNode,
+                        captureID: createdNode.captureID,
+                    }, false);
+                });
+            }
+            yield this.resetVisits();
+            this.onCancel();
+        });
+    }
+    get model3D() {
+        return this.visitForm.get('model3D');
+    }
+    get name() {
+        return this.visitForm.get('name');
+    }
+    onCancel() {
+        this.visitSubmitted = false;
+        this.visitForm = null;
+        this.isEditing = false;
+        this.canCancelImport = false;
+        this.totalImages = 0;
+        this.imagesProcessed = 0;
+        this.errorForm = false;
+        this.setupMenuItems();
+    }
+    onDelete(visit, needPermission = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const message = this.translate.instant('confirm.deleteVisit');
+            // eslint-disable-next-line no-alert
+            if (window.confirm(message) || !needPermission) {
+                console.log(this.visitIndexDetails);
+                this.isProcessing = true;
+                yield this.visitService.deleteVisit(visit, this.spaceId);
+                yield this.resetVisits();
+                this.isProcessing = false;
+            }
+        });
+    }
+    getDismissReason(reason) {
+        if (reason === ModalDismissReasons.ESC) {
+            return 'by pressing ESC';
+        }
+        if (reason === ModalDismissReasons.BACKDROP_CLICK) {
+            return 'by clicking on a backdrop';
+        }
+        return `with: ${reason}`;
+    }
+    launchImport(model3D, surface, node, imagesOnly = false) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.modalReference = this.modalService.open(this.content, {
+                ariaLabelledBy: 'modal-basic-title',
+            });
+            this.modalReference.result.then((result) => {
+                this.closeResult = `Closed with: ${result}`;
+                console.log(this.closeResult);
+                this.cancelImport();
+            }, (error) => {
+                this.closeResult = `Dismissed ${this.getDismissReason(error)}`;
+                console.log(this.closeResult);
+                this.cancelImport();
+            });
+            try {
+                yield 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();
+        this.onCancel();
+        this.resetVisits();
+    }
+    onImport(visit) {
+        this.launchImport(visit.model3d, null, visit.node.id, true);
+    }
+    isFormError(control) {
+        return control && control.invalid && this.errorForm;
+    }
+}
+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: i7.NgbModal }, { token: i2.VisitService }, { token: i2.ValidatorsService }, { token: i3.TranslateService }, { token: i2.NavigatorService }, { token: i1.Router }], 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\">\n    <div class=\"m-3\">\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n    </div>\n\n    <div class=\"row main-form-container\">\n        <div class=\"col-md-6 form-container\">\n            <ul class=\"list-group list-group-flush\" *ngIf=\"!visitForm\">\n                <li class=\"list-group-item list-group-item-action\" *ngFor=\"let visit of visits; index as index\">\n                    <div class=\"d-flex justify-content-between align-items-center\" (click)=\"onToggleDetail(index)\">\n                        {{visit.name ? visit.name : visit.model3d }}\n                        <lib-chevron [conditionShowing]=\"index==visitIndexDetails\"></lib-chevron>\n                    </div>\n                    <div *ngIf=\"index==visitIndexDetails\">\n                        <ul class=\"list-group list-group-flush\">\n                            <li class=\"list-group-item bg-transparent\">{{'Name' | translate}} : {{ visit.name ?\n                                visit.name : \"Not provided\" | translate}}</li>\n                            <li class=\"list-group-item bg-transparent\">{{'3D Model' | translate}} : {{ visit.model3d }}\n                            </li>\n                            <li class=\"list-group-item bg-transparent\">{{'Surface' | translate}}, m<sup>2</sup>: {{\n                                visit.surface ?\n                                visit.surface : 'Not provided' | translate}}</li>\n                            <li class=\"list-group-item bg-transparent\">{{'Viewer' | translate}} : {{ visit.viewer }}\n                            </li>\n                            <li class=\"list-group-item bg-transparent\">{{'Date of capture' | translate}} : {{\n                                visit.takenAt | timeDateString | async}}\n                            <li class=\"list-group-item bg-transparent\">{{'Images imported' | translate}} : {{\n                                visit.nmbImagesImported }}\n                            </li>\n                        </ul>\n                        \n                        <lib-loader *ngIf=\"isProcessing\"></lib-loader>\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onImport(visit)\" [disabled]=\"isProcessing\">{{'Import images' |\n                            translate}}</button>\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" [disabled]=\"isProcessing\"\n                            (click)=\"onEdit(visit)\">{{'Edit' | translate}}</button>\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" [disabled]=\"isProcessing\"\n                            (click)=\"onDelete(visit)\">{{'Delete' | translate}}</button>\n                    </div>\n                </li>\n            </ul>\n            <div *ngIf=\"visitForm\">\n                <form (ngSubmit)=\"onSubmitVisit()\" [formGroup]=\"visitForm\">\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\" formControlName=\"name\">\n                        </div>\n                    </div>\n                    <div class=\"mb-3 row\">\n                        <label class=\"col-sm-2 col-form-label\">{{'Reference 3D model' | translate}} *</label>\n                        <div class=\"col-sm-10\">\n                            <input type=\"text\" class=\"form-control\" [readonly]=\"isEditing\"\n                                [class.is-invalid]=\"model3D.invalid && visitSubmitted\" required\n                                formControlName=\"model3D\">\n                            <div class=\"invalid-feedback\">\n                                <ngb-alert data-testid=\"new-location-name-invalid\" [dismissible]=\"false\" type=\"danger\" \n                                *ngIf=\"validatorsService.isControlError(visitForm.controls['name']) \n                                    ||  isFormError(visitForm.controls['name'])\">\n                                      {{validatorsService.getError(visitForm.controls['name']) | translate}}\n                                </ngb-alert>\n                            </div>\n                            <div *ngIf=\"isEditing\" class=\"text-danger\">\n                                {{'Cannot change 3D model reference. Please add new model.' | translate}}\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"mb-3 row\">\n                        <label class=\"col-sm-2 col-form-label\">{{'Viewer' | translate}}</label>\n                        <div class=\"col-sm-10\">\n                            <input type=\"text\" class=\"form-control\" formControlName=\"viewer\">\n                        </div>\n                    </div>\n\n                    <div class=\"mb-3 row\">\n                        <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\n                        <div class=\"col-sm-10\">\n                            <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\n                        </div>\n                    </div>\n\n                    <div class=\"mb-3 row\">\n                        <label class=\"col-sm-2 col-form-label\">{{'Capture Date' | translate}}</label>\n                        <div class=\"input-group\">\n                            <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"captureDate\" ngbDatepicker\n                                #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\n                            <div class=\"input-group-append\">\n                                <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\"\n                                    type=\"button\"></button>\n                            </div>\n                        </div>\n                    </div>\n                    <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' |\n                        translate}}</button>\n                    <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\n                        translate}}</button>\n                    <div class=\"invalid-feedback\" *ngIf=\"errorForm\">\n                            <ngb-alert data-testid=\"new-location-form-invalid\" [dismissible]=\"false\" type=\"danger\">\n                              {{'errorForm.infoBtn' |translate}}\n                      \n                            </ngb-alert>\n                    </div>\n                </form>\n            </div>\n            <div *ngIf=\"!visitForm\">\n                <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onAddVisit()\">{{'Add 3D visit' |\n                    translate}}</button>\n            </div>\n        </div>\n        <div id=\"viewer-frame\" style=\"width: 100%; aspect-ratio: 2/1;\"></div>\n    </div>\n    <ng-template #content let-modal>\n        <div class=\"modal-header\">\n            <h4 class=\"modal-title\" id=\"modal-basic-title\">{{'Importing Data' | translate}}</h4>\n            <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n                <span aria-hidden=\"true\">\u00D7</span>\n            </button>\n        </div>\n        <div class=\"modal-body\">\n            {{'Please do not leave or refresh this page...' | translate}}\n            <div *ngIf=\"totalImages != 0\">Imported {{imagesProcessed}} out of {{totalImages}} images.</div>\n            <div class=\"d-flex justify-content-center\">\n                <div class=\"spinner-border\" role=\"status\">\n                    <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\n                </div>\n            </div>\n        </div>\n        <div class=\"modal-footer\">\n            <button type=\"button\" class=\"btn btn-outline-dark\" [disabled]=\"!canCancelImport\"\n                (click)=\"modal.close('Cancel click')\">{{'Cancel import of images' | translate}}</button>\n        </div>\n    </ng-template>\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"] }, { type: i2.LoaderComponent, selector: "lib-loader", inputs: ["useLogo", "color"] }, { type: i7.NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.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: i7.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": i6.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\">\n    <div class=\"m-3\">\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n    </div>\n\n    <div class=\"row main-form-container\">\n        <div class=\"col-md-6 form-container\">\n            <ul class=\"list-group list-group-flush\" *ngIf=\"!visitForm\">\n                <li class=\"list-group-item list-group-item-action\" *ngFor=\"let visit of visits; index as index\">\n                    <div class=\"d-flex justify-content-between align-items-center\" (click)=\"onToggleDetail(index)\">\n                        {{visit.name ? visit.name : visit.model3d }}\n                        <lib-chevron [conditionShowing]=\"index==visitIndexDetails\"></lib-chevron>\n                    </div>\n                    <div *ngIf=\"index==visitIndexDetails\">\n                        <ul class=\"list-group list-group-flush\">\n                            <li class=\"list-group-item bg-transparent\">{{'Name' | translate}} : {{ visit.name ?\n                                visit.name : \"Not provided\" | translate}}</li>\n                            <li class=\"list-group-item bg-transparent\">{{'3D Model' | translate}} : {{ visit.model3d }}\n                            </li>\n                            <li class=\"list-group-item bg-transparent\">{{'Surface' | translate}}, m<sup>2</sup>: {{\n                                visit.surface ?\n                                visit.surface : 'Not provided' | translate}}</li>\n                            <li class=\"list-group-item bg-transparent\">{{'Viewer' | translate}} : {{ visit.viewer }}\n                            </li>\n                            <li class=\"list-group-item bg-transparent\">{{'Date of capture' | translate}} : {{\n                                visit.takenAt | timeDateString | async}}\n                            <li class=\"list-group-item bg-transparent\">{{'Images imported' | translate}} : {{\n                                visit.nmbImagesImported }}\n                            </li>\n                        </ul>\n                        \n                        <lib-loader *ngIf=\"isProcessing\"></lib-loader>\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onImport(visit)\" [disabled]=\"isProcessing\">{{'Import images' |\n                            translate}}</button>\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" [disabled]=\"isProcessing\"\n                            (click)=\"onEdit(visit)\">{{'Edit' | translate}}</button>\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" [disabled]=\"isProcessing\"\n                            (click)=\"onDelete(visit)\">{{'Delete' | translate}}</button>\n                    </div>\n                </li>\n            </ul>\n            <div *ngIf=\"visitForm\">\n                <form (ngSubmit)=\"onSubmitVisit()\" [formGroup]=\"visitForm\">\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\" formControlName=\"name\">\n                        </div>\n                    </div>\n                    <div class=\"mb-3 row\">\n                        <label class=\"col-sm-2 col-form-label\">{{'Reference 3D model' | translate}} *</label>\n                        <div class=\"col-sm-10\">\n                            <input type=\"text\" class=\"form-control\" [readonly]=\"isEditing\"\n                                [class.is-invalid]=\"model3D.invalid && visitSubmitted\" required\n                                formControlName=\"model3D\">\n                            <div class=\"invalid-feedback\">\n                                <ngb-alert data-testid=\"new-location-name-invalid\" [dismissible]=\"false\" type=\"danger\" \n                                *ngIf=\"validatorsService.isControlError(visitForm.controls['name']) \n                                    ||  isFormError(visitForm.controls['name'])\">\n                                      {{validatorsService.getError(visitForm.controls['name']) | translate}}\n                                </ngb-alert>\n                            </div>\n                            <div *ngIf=\"isEditing\" class=\"text-danger\">\n                                {{'Cannot change 3D model reference. Please add new model.' | translate}}\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"mb-3 row\">\n                        <label class=\"col-sm-2 col-form-label\">{{'Viewer' | translate}}</label>\n                        <div class=\"col-sm-10\">\n                            <input type=\"text\" class=\"form-control\" formControlName=\"viewer\">\n                        </div>\n                    </div>\n\n                    <div class=\"mb-3 row\">\n                        <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\n                        <div class=\"col-sm-10\">\n                            <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\n                        </div>\n                    </div>\n\n                    <div class=\"mb-3 row\">\n                        <label class=\"col-sm-2 col-form-label\">{{'Capture Date' | translate}}</label>\n                        <div class=\"input-group\">\n                            <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"captureDate\" ngbDatepicker\n                                #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\n                            <div class=\"input-group-append\">\n                                <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\"\n                                    type=\"button\"></button>\n                            </div>\n                        </div>\n                    </div>\n                    <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' |\n                        translate}}</button>\n                    <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\n                        translate}}</button>\n                    <div class=\"invalid-feedback\" *ngIf=\"errorForm\">\n                            <ngb-alert data-testid=\"new-location-form-invalid\" [dismissible]=\"false\" type=\"danger\">\n                              {{'errorForm.infoBtn' |translate}}\n                      \n                            </ngb-alert>\n                    </div>\n                </form>\n            </div>\n            <div *ngIf=\"!visitForm\">\n                <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onAddVisit()\">{{'Add 3D visit' |\n                    translate}}</button>\n            </div>\n        </div>\n        <div id=\"viewer-frame\" style=\"width: 100%; aspect-ratio: 2/1;\"></div>\n    </div>\n    <ng-template #content let-modal>\n        <div class=\"modal-header\">\n            <h4 class=\"modal-title\" id=\"modal-basic-title\">{{'Importing Data' | translate}}</h4>\n            <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n                <span aria-hidden=\"true\">\u00D7</span>\n            </button>\n        </div>\n        <div class=\"modal-body\">\n            {{'Please do not leave or refresh this page...' | translate}}\n            <div *ngIf=\"totalImages != 0\">Imported {{imagesProcessed}} out of {{totalImages}} images.</div>\n            <div class=\"d-flex justify-content-center\">\n                <div class=\"spinner-border\" role=\"status\">\n                    <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\n                </div>\n            </div>\n        </div>\n        <div class=\"modal-footer\">\n            <button type=\"button\" class=\"btn btn-outline-dark\" [disabled]=\"!canCancelImport\"\n                (click)=\"modal.close('Cancel click')\">{{'Cancel import of images' | translate}}</button>\n        </div>\n    </ng-template>\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: i7.NgbModal }, { type: i2.VisitService }, { type: i2.ValidatorsService }, { type: i3.TranslateService }, { type: i2.NavigatorService }, { type: i1.Router }]; }, propDecorators: { content: [{
+                type: ViewChild,
+                args: ['content', { static: false }]
+            }] } });
+
+class PlanLegendComponent {
+    constructor(translate) {
+        this.translate = translate;
+        this.isAudioZone = false;
+        this.buttonsToRender = [];
+        this.colorToText = {};
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.render();
+        });
+    }
+    render() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.buttonsToRender = [
+                {
+                    url: `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`,
+                    text: this.translate.instant("legend.green")
+                },
+                {
+                    url: `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`,
+                    text: this.translate.instant("legend.red")
+                }
+            ];
+            if (this.isAudioZone) {
+                let audioPoints = [{
+                        url: `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=black&height=17&width=17")`,
+                        text: this.translate.instant("legend.black")
+                    },
+                    {
+                        url: `url("https://api.iconify.design/mdi:adjust.svg?color=orange&height=17&width=17")`,
+                        text: this.translate.instant("legend.orange")
+                    }];
+                this.buttonsToRender = this.buttonsToRender.concat(audioPoints);
+            }
+        });
+    }
+}
+PlanLegendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PlanLegendComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+PlanLegendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: PlanLegendComponent, selector: "lib-plan-legend", inputs: { isAudioZone: "isAudioZone" }, ngImport: i0, template: "<div class=\"mt-3 ms-3\" class=\"legendContainer\">\n    <h5>{{\"legend.title\" | translate}}</h5>\n    <div class=\"legendBox\">\n        <div class=\"legendRow\" *ngFor=\"let elemnt of buttonsToRender\">\n            <button class=\"legendIcon\" [ngStyle] = \"{'background-image': elemnt.url}\"></button>\n            <span>{{elemnt.text}}</span>\n        </div>\n    </div>\n</div>\n", styles: [".legendContainer{padding:1rem;border:solid var(--smarterplan-primary) 2px;border-radius:6px;width:100%;margin-bottom:.5rem;background:#FFF}.legendContainer .legendBox{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap}.legendContainer .legendBox .legendRow{display:flex;flex-direction:row;align-items:center}.legendContainer .legendBox .legendRow .legendIcon{width:2.5rem;height:2.5rem;background-repeat:no-repeat;background-size:cover;border:none;background-color:transparent;margin-right:.5rem;cursor:auto}.legendContainer .legendBox .legendRow span{margin-right:1rem;cursor:auto}.legendContainer .legendBox .legendRow h5{cursor:auto}\n"], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PlanLegendComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-plan-legend', template: "<div class=\"mt-3 ms-3\" class=\"legendContainer\">\n    <h5>{{\"legend.title\" | translate}}</h5>\n    <div class=\"legendBox\">\n        <div class=\"legendRow\" *ngFor=\"let elemnt of buttonsToRender\">\n            <button class=\"legendIcon\" [ngStyle] = \"{'background-image': elemnt.url}\"></button>\n            <span>{{elemnt.text}}</span>\n        </div>\n    </div>\n</div>\n", styles: [".legendContainer{padding:1rem;border:solid var(--smarterplan-primary) 2px;border-radius:6px;width:100%;margin-bottom:.5rem;background:#FFF}.legendContainer .legendBox{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap}.legendContainer .legendBox .legendRow{display:flex;flex-direction:row;align-items:center}.legendContainer .legendBox .legendRow .legendIcon{width:2.5rem;height:2.5rem;background-repeat:no-repeat;background-size:cover;border:none;background-color:transparent;margin-right:.5rem;cursor:auto}.legendContainer .legendBox .legendRow span{margin-right:1rem;cursor:auto}.legendContainer .legendBox .legendRow h5{cursor:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: i3.TranslateService }]; }, propDecorators: { isAudioZone: [{
+                type: Input
+            }] } });
+
+class CarouselComponent {
+    constructor() {
+        this.currentScan = new EventEmitter();
+    }
+    ngOnInit() {
+        this.currentScan.emit(0);
+    }
+    onSlide(event) {
+        this.dataEvent = JSON.stringify(event);
+        const imageIndex = Number.parseInt(event.current.replace("slideId_", ""), 10);
+        this.currentScan.emit(imageIndex);
+    }
+}
+CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CarouselComponent, selector: "lib-carousel", inputs: { images: "images" }, outputs: { currentScan: "currentScan" }, ngImport: i0, template: "<ngb-carousel [interval]=\"5000\" *ngIf=\"images && images.length > 1\" (slide)=\"onSlide($event)\">\n    <ng-template *ngFor=\"let image of images; let i = index\" ngbSlide [id]=\"'slideId_' + i\">\n        <div class=\"picsum-img-wrapper\">\n            <img [src]=\"image.path\" alt=\"Scan\" class=\"d-block w-100\">\n        </div>\n        <div class=\"carousel-caption\">\n            <h3>{{image.title}}</h3>\n            <p>{{image.description}}</p>\n        </div>\n    </ng-template>\n</ngb-carousel>\n\n<img *ngIf=\"images.length === 1\" [src]=\"images[0].path\" alt=\"Scan\" class=\"d-block w-100\">\n", styles: [""], components: [{ type: i7.NgbCarousel, selector: "ngb-carousel", inputs: ["animation", "activeId", "interval", "wrap", "keyboard", "pauseOnHover", "pauseOnFocus", "showNavigationArrows", "showNavigationIndicators"], outputs: ["slide", "slid"], exportAs: ["ngbCarousel"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbSlide, selector: "ng-template[ngbSlide]", inputs: ["id"], outputs: ["slid"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-carousel', template: "<ngb-carousel [interval]=\"5000\" *ngIf=\"images && images.length > 1\" (slide)=\"onSlide($event)\">\n    <ng-template *ngFor=\"let image of images; let i = index\" ngbSlide [id]=\"'slideId_' + i\">\n        <div class=\"picsum-img-wrapper\">\n            <img [src]=\"image.path\" alt=\"Scan\" class=\"d-block w-100\">\n        </div>\n        <div class=\"carousel-caption\">\n            <h3>{{image.title}}</h3>\n            <p>{{image.description}}</p>\n        </div>\n    </ng-template>\n</ngb-carousel>\n\n<img *ngIf=\"images.length === 1\" [src]=\"images[0].path\" alt=\"Scan\" class=\"d-block w-100\">\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { images: [{
+                type: Input
+            }], currentScan: [{
+                type: Output
+            }] } });
+
+var SweepState;
+(function (SweepState) {
+    SweepState[SweepState["ADDED"] = 0] = "ADDED";
+    SweepState[SweepState["REMOVED"] = 1] = "REMOVED";
+    SweepState[SweepState["DISABLED"] = 2] = "DISABLED";
+    SweepState[SweepState["OCCUPIED"] = 3] = "OCCUPIED";
+    SweepState[SweepState["STARTPOINT"] = 4] = "STARTPOINT";
+})(SweepState || (SweepState = {}));
+function isInPolygon(p, polygon) {
+    let isInside = false;
+    let minX = polygon[0].x;
+    let maxX = polygon[0].x;
+    let minY = polygon[0].y;
+    let maxY = polygon[0].y;
+    for (let n = 1; n < polygon.length; n++) {
+        const q = polygon[n];
+        minX = Math.min(q.x, minX);
+        maxX = Math.max(q.x, maxX);
+        minY = Math.min(q.y, minY);
+        maxY = Math.max(q.y, maxY);
+    }
+    if (p.x < minX || p.x > maxX || p.y < minY || p.y > maxY) {
+        return false;
+    }
+    for (let index = 0, index_ = polygon.length - 1; index < polygon.length; index_ = index++) {
+        if (polygon[index].y > p.y !== polygon[index_].y > p.y &&
+            p.x <
+                ((polygon[index_].x - polygon[index].x) *
+                    (p.y - polygon[index].y)) /
+                    (polygon[index_].y - polygon[index].y) +
+                    polygon[index].x) {
+            isInside = !isInside;
+        }
+    }
+    return isInside;
+}
+function rotate(point, center, angle) {
+    let xM;
+    let yM;
+    let x;
+    let y;
+    angle *= Math.PI / 180;
+    xM = point.x - center.x;
+    yM = point.y - center.y;
+    x = xM * Math.cos(angle) + yM * Math.sin(angle) + center.x;
+    y = -xM * Math.sin(angle) + yM * Math.cos(angle) + center.y;
+    return { x: Math.round(x), y: Math.round(y) };
+}
+/**
+    * Check if an HtmlElement is inside a selection
+    * @param button HTMLElement
+    * @param selection
+    * @returns true if the element is inside the selection, false otherwise
+    */
+function buttonIsInSelection(button, selection) {
+    const bounds = button.getBoundingClientRect();
+    return (bounds.bottom > selection.top &&
+        bounds.top < selection.top + selection.height &&
+        bounds.right > selection.left &&
+        bounds.left < selection.left + selection.width);
+}
+/**
+ * Styles the button that represents a sweep on the plan: green-added to zone, red -not added, gray - disabled, orange - occupied
+ * @param button HTMLButtonElement, button on the plan,
+ * @param isAdded boolean, if the sweep added to the zone
+ * @param isOccupied boolean, if the sweep added to any other zone (but not current)
+ */
+function styleButton(button, state) {
+    switch (state) {
+        case SweepState.ADDED:
+            button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`;
+            break;
+        case SweepState.DISABLED:
+            button.style.backgroundImage = `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=black&height=17&width=17")`;
+            button.style.cursor = "auto";
+            break;
+        case SweepState.OCCUPIED:
+            button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=orange&height=17&width=17")`;
+            break;
+        case SweepState.STARTPOINT:
+            button.style.backgroundImage = `url('https://api.iconify.design/ic/baseline-flag-circle.svg?color=white&width=17&height=17')`;
+            break;
+        case SweepState.REMOVED:
+            button.style.backgroundImage = `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`;
+            break;
+        default:
+            button.style.backgroundImage = `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`;
+            break;
+    }
+    // if (disabled) {
+    //     button.style.backgroundImage = `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=#636363&height=17&width=17")`;
+    //     button.style.cursor = "auto";
+    // } else if (isOccupied) {
+    //     button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=orange&height=17&width=17")`;
+    // } else {
+    //     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";
+    button.style.width = "17px";
+    button.style.height = "17px";
+    button.disabled = false;
+    button.type = "button";
+}
+/**
+ * Check if sweep (button) is chosen; it is reprsented by image style "mdi:adjust"
+ * @param button HTMLElement
+ * @returns boolean, if button was selected
+ */
+function buttonIsChosen(button) {
+    return button.style.backgroundImage.includes("adjust");
+}
+/**
+     * Visually change the state of a scan button, a selected button is blue
+     * @param button HTMLElement
+     * @param selected if true the button will be blue, otherwise it will red or green
+     */
+function setVisuallySelected(button, selected) {
+    if (selected) {
+        /** Color in blue */
+        button.style.backgroundImage = button.style.backgroundImage
+            .replace("red", "blue")
+            .replace("green", "blue");
+    }
+    else {
+        /** Get back in red or green */
+        const color = buttonIsChosen(button) ? "green" : "red";
+        button.style.backgroundImage = button.style.backgroundImage.replace("blue", color);
+    }
+}
+
+class SelectionComponent {
+    constructor() {
+        /**Emit a new selection */
+        this.onSelectionChanged = new EventEmitter();
+        this.isMousedown = false;
+        this.selection = { startX: 0, startY: 0, endX: 0, endY: 0 };
+        this.selectionRectangle = { top: 0, left: 0, width: 0, height: 0 };
+    }
+    ngOnInit() {
+        this.selectionableZone = document.querySelector(".selectZone");
+        this.selectionElement = document.querySelector("#selection");
+        this.selectionableZone.addEventListener("mousedown", this.mousedown.bind(this));
+        this.selectionableZone.addEventListener("mousemove", this.mousemove.bind(this));
+        this.selectionableZone.addEventListener("mouseup", this.mouseup.bind(this));
+    }
+    /**
+     * Update the current selection
+     * Will update the selectionRectangle and Selection HTML element
+     * @param shouldEmit if true an event will be emitted through onSelectionChanged (true by default)
+     */
+    updateSelectionElement(shouldEmit = true) {
+        this.selectionRectangle.width = Math.abs(this.selection.endX - this.selection.startX);
+        this.selectionRectangle.height = Math.abs(this.selection.endY - this.selection.startY);
+        this.selectionRectangle.top = Math.min(this.selection.endY, this.selection.startY);
+        this.selectionRectangle.left = Math.min(this.selection.endX, this.selection.startX);
+        this.selectionElement.style.top = `${this.selectionRectangle.top}px`;
+        this.selectionElement.style.left = `${this.selectionRectangle.left}px`;
+        this.selectionElement.style.width = `${this.selectionRectangle.width}px`;
+        this.selectionElement.style.height = `${this.selectionRectangle.height}px`;
+        if (shouldEmit) {
+            this.onSelectionChanged.emit(this.selectionRectangle);
+        }
+    }
+    /**
+     * Trigger when mouse is press down on selectionableZone
+     * @param event
+     */
+    mousedown(event) {
+        if (event.button !== 2) { /**Selection with the right click, so ignore all other event */
+            return;
+        }
+        this.isMousedown = true;
+        this.selection = { startY: event.clientY, startX: event.clientX, endX: event.clientX, endY: event.clientY };
+        this.updateSelectionElement();
+    }
+    /**
+     * Trigger when mouse is release on selectionableZone
+     * @param event
+     */
+    mouseup(event) {
+        this.isMousedown = false;
+        this.selection = { startX: 0, startY: 0, endX: 0, endY: 0 };
+        this.updateSelectionElement(false);
+    }
+    /**
+     * Trigger when mouse is moving on selectionableZone
+     * @param event
+     */
+    mousemove(event) {
+        if (this.isMousedown) {
+            this.selection.endX = event.clientX;
+            this.selection.endY = event.clientY;
+            this.updateSelectionElement();
+        }
+    }
+}
+SelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SelectionComponent, selector: "lib-selection", outputs: { onSelectionChanged: "onSelectionChanged" }, ngImport: i0, template: "<ng-content></ng-content>\n\n<div id=\"selection\"></div>", styles: ["#selection{will-change:top,left,width,height;top:0px;left:0px;position:fixed;display:block;margin-top:0;margin-left:0;width:0px;height:0px;background:rgba(83,182,187,.3);border-radius:.15em;border:.15em solid rgba(83,182,187,.8);pointer-events:none}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-selection', template: "<ng-content></ng-content>\n\n<div id=\"selection\"></div>", styles: ["#selection{will-change:top,left,width,height;top:0px;left:0px;position:fixed;display:block;margin-top:0;margin-left:0;width:0px;height:0px;background:rgba(83,182,187,.3);border-radius:.15em;border:.15em solid rgba(83,182,187,.8);pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { onSelectionChanged: [{
+                type: Output
+            }] } });
+
+class RadioButtonComponent {
+    constructor() {
+        this.isCheckedEvent = new EventEmitter();
+    }
+    ngOnInit() {
+        this.isChecked = false;
+    }
+    onChecked() {
+        this.isCheckedEvent.emit(this.isChecked);
+    }
+}
+RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: RadioButtonComponent, selector: "lib-radio-button", inputs: { label: "label" }, outputs: { isCheckedEvent: "isCheckedEvent" }, ngImport: i0, template: "<div class=\"checkboxContainer\">\n    <div class=\"switchContainer\">\n        <label class=\"switch switch-success\">\n          <input type=\"checkbox\"[(ngModel)]=\"isChecked\" (change)=\"onChecked()\">\n          <span class=\"slider round\"></span>\n        </label>\n    </div>\n    <span class=\"label right\">{{label | translate}}</span>\n</div>\n", styles: [".checkboxContainer{display:flex;flex-direction:row;align-items:center;width:calc(20vw + 1rem)}.checkboxContainer .label{margin-left:1rem}.checkboxContainer .switch{position:relative;display:inline-block;cursor:pointer;width:60px;height:34px;border-radius:34px}.checkboxContainer .switch input{opacity:0;width:0;height:0}.checkboxContainer .switch input:checked+.slider{background-color:#404660;box-shadow:4px 4px 10px #40466080}.checkboxContainer .switch input:checked+.slider:before{background:white;transform:translate(26px)}.checkboxContainer .switch .label{position:absolute;top:7px}.checkboxContainer .switch .label.right{left:60px;margin-left:10px}.checkboxContainer .switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;border:1px solid #404660;transition:.3s;border-radius:34px}.checkboxContainer .switch .slider:before:hover{background-color:#fff}.checkboxContainer .switch .slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;bottom:3px;background-color:#404660;transition:.3s;border-radius:50%}.checkboxContainer .switch.switch-success input:checked+.slider{background-color:var(--smarterplan-primary);box-shadow:2px 2px 10px 0 var(--smarterplan-primary)}.checkboxContainer .switch.switch-success .slider{border:1px solid var(--smarterplan-primary)}.checkboxContainer .switch.switch-success .slider:before{background-color:var(--smarterplan-primary);box-shadow:2px 2px 10px 0 var(--smarterplan-primary)}.checkboxContainer .switch.switch-default input:checked+.slider{background-color:#636983;box-shadow:2px 2px 10px #636983}.checkboxContainer .switch.switch-default .slider{border:1px solid #636983}.checkboxContainer .switch.switch-default .slider:before{background-color:#636983;box-shadow:2px 2px 10px #636983}.checkboxContainer .switch.switch-warning input:checked+.slider{background-color:#973c3c;box-shadow:2px 2px 10px #ff9898}.checkboxContainer .switch.switch-warning .slider{border:1px solid #973c3c}.checkboxContainer .switch.switch-warning .slider:before{background-color:#973c3c;box-shadow:2px 2px 10px #ff9898}.checkboxContainer .switch.switch-dark input:checked+.slider{background-color:#505050;box-shadow:2px 2px 10px #9d9d9d}.checkboxContainer .switch.switch-dark .slider{border:1px solid #505050}.checkboxContainer .switch.switch-dark .slider:before{background-color:#505050;box-shadow:2px 2px 10px #9d9d9d}\n"], directives: [{ type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-radio-button', template: "<div class=\"checkboxContainer\">\n    <div class=\"switchContainer\">\n        <label class=\"switch switch-success\">\n          <input type=\"checkbox\"[(ngModel)]=\"isChecked\" (change)=\"onChecked()\">\n          <span class=\"slider round\"></span>\n        </label>\n    </div>\n    <span class=\"label right\">{{label | translate}}</span>\n</div>\n", styles: [".checkboxContainer{display:flex;flex-direction:row;align-items:center;width:calc(20vw + 1rem)}.checkboxContainer .label{margin-left:1rem}.checkboxContainer .switch{position:relative;display:inline-block;cursor:pointer;width:60px;height:34px;border-radius:34px}.checkboxContainer .switch input{opacity:0;width:0;height:0}.checkboxContainer .switch input:checked+.slider{background-color:#404660;box-shadow:4px 4px 10px #40466080}.checkboxContainer .switch input:checked+.slider:before{background:white;transform:translate(26px)}.checkboxContainer .switch .label{position:absolute;top:7px}.checkboxContainer .switch .label.right{left:60px;margin-left:10px}.checkboxContainer .switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;border:1px solid #404660;transition:.3s;border-radius:34px}.checkboxContainer .switch .slider:before:hover{background-color:#fff}.checkboxContainer .switch .slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;bottom:3px;background-color:#404660;transition:.3s;border-radius:50%}.checkboxContainer .switch.switch-success input:checked+.slider{background-color:var(--smarterplan-primary);box-shadow:2px 2px 10px 0 var(--smarterplan-primary)}.checkboxContainer .switch.switch-success .slider{border:1px solid var(--smarterplan-primary)}.checkboxContainer .switch.switch-success .slider:before{background-color:var(--smarterplan-primary);box-shadow:2px 2px 10px 0 var(--smarterplan-primary)}.checkboxContainer .switch.switch-default input:checked+.slider{background-color:#636983;box-shadow:2px 2px 10px #636983}.checkboxContainer .switch.switch-default .slider{border:1px solid #636983}.checkboxContainer .switch.switch-default .slider:before{background-color:#636983;box-shadow:2px 2px 10px #636983}.checkboxContainer .switch.switch-warning input:checked+.slider{background-color:#973c3c;box-shadow:2px 2px 10px #ff9898}.checkboxContainer .switch.switch-warning .slider{border:1px solid #973c3c}.checkboxContainer .switch.switch-warning .slider:before{background-color:#973c3c;box-shadow:2px 2px 10px #ff9898}.checkboxContainer .switch.switch-dark input:checked+.slider{background-color:#505050;box-shadow:2px 2px 10px #9d9d9d}.checkboxContainer .switch.switch-dark .slider{border:1px solid #505050}.checkboxContainer .switch.switch-dark .slider:before{background-color:#505050;box-shadow:2px 2px 10px #9d9d9d}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { label: [{
+                type: Input
+            }], isCheckedEvent: [{
+                type: Output
+            }] } });
+
+class SweepPlanSelectionComponent {
+    constructor(zoneService, navigationService, planService, translate) {
+        this.zoneService = zoneService;
+        this.navigationService = navigationService;
+        this.planService = planService;
+        this.translate = translate;
+        this.chosenScansOnPlan = [];
+        this.navIDsZoneEdit = [];
+        // sweeps belonging to any audio zone
+        this.occupiedSweeps = [];
+        // sweeps unavailable (cannot be chosen)
+        this.unavailableSweeps = [];
+        // if choosing sweeps for audio zone
+        this.editingAudioZone = false;
+        this.multipleFloors = false;
+        /** all scan buttons Element */
+        this.buttonElements = [];
+        /** Scan buttons that are in the current selection */
+        this.buttonsInSelection = [];
+        this.sweepsSelected = new EventEmitter();
+        this.isSettingStartSweep = false;
+        this.chosenSweepsPerFloor = new Map(); // map matching floorID to sweeps selected
+        this.inputSweepsPerFloor = new Map(); // map matching floorID to sweeps selected for zone in edition
+        this.selectionChanged = false;
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.getPlans();
+            this.setSweepsOfInputZone();
+        });
+    }
+    ngOnChanges() {
+        if (this.chosenPlan) {
+            this.setSweepsOfInputZone();
+            this.chosenScansOnPlan = [];
+            this.clearDivPlan();
+            this.addScanPoints();
+        }
+    }
+    setSweepsOfInputZone() {
+        this.navIDsZoneEdit = this.inputZone ? this.inputZone.sweepIDs : [];
+        if (this.multipleFloors) {
+            this.plans.forEach((plan) => {
+                if (!this.inputSweepsPerFloor.get(plan.zoneID)) {
+                    this.inputSweepsPerFloor.set(plan.zoneID, this.navIDsZoneEdit.filter((sweep) => plan.zone.sweepIDs.includes(sweep)));
+                }
+            });
+        }
+        else {
+            if (this.inputZone) {
+                //filter plans only for the parent Zone
+                this.plans = this.plans.filter((p) => p.zoneID === this.inputZone.parentID);
+            }
+        }
+    }
+    getPlans() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.plans = yield this.planService.getSingedPlansForSpace(this.spaceID);
+        });
+    }
+    onPlanClick(plan) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const switchPlan = () => {
+                this.selectionChanged = false;
+                this.chosenPlan = plan;
+                this.chosenScansOnPlan = [];
+                this.clearDivPlan();
+                this.addScanPoints();
+            };
+            if (this.selectionChanged) {
+                const message = this.translate.instant("confirm.cancelModifZoneSweeps");
+                if (window.confirm(message)) {
+                    switchPlan();
+                }
+            }
+            else {
+                switchPlan();
+            }
+        });
+    }
+    addScanPoints() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let wasModified = false;
+            if (this.multipleFloors) {
+                // check if we have already validated buttons for this floor
+                if (this.chosenSweepsPerFloor.get(this.chosenPlan.zoneID)) {
+                    this.chosenScansOnPlan = this.chosenSweepsPerFloor.get(this.chosenPlan.zoneID);
+                    wasModified = true;
+                }
+            }
+            this.divPlan = document.querySelector("#planDiv");
+            const zoneOfPlan = yield this.zoneService.getZone(this.chosenPlan.zoneID);
+            const navigations = yield this.navigationService.getNavigationsForZone(zoneOfPlan);
+            if (this.newZoneData)
+                yield this.setScanByDraw(navigations);
+            this.buttonElements = yield showScanPointsOnPlanInDiv(this.chosenPlan, this.divPlan, navigations);
+            for (const element of this.buttonElements) {
+                if (this.unavailableSweeps && this.unavailableSweeps.includes(element.id)) {
+                    styleButton(element, SweepState.DISABLED);
+                }
+                else {
+                    if (wasModified) {
+                        if (this.chosenScansOnPlan.includes(element.id)) {
+                            styleButton(element, SweepState.ADDED);
+                        }
+                        else {
+                            styleButton(element, SweepState.REMOVED);
+                        }
+                    }
+                    else {
+                        if (this.navIDsZoneEdit.length > 0 &&
+                            this.navIDsZoneEdit.includes(element.id)) {
+                            styleButton(element, SweepState.ADDED);
+                            if (!this.chosenScansOnPlan.includes(element.id)) {
+                                this.chosenScansOnPlan.push(element.id);
+                            }
+                        }
+                        else if (this.occupiedSweeps && this.occupiedSweeps.includes(element.id)) {
+                            styleButton(element, SweepState.OCCUPIED);
+                        }
+                        else {
+                            styleButton(element, SweepState.REMOVED);
+                        }
+                    }
+                    //start point should be last condition 
+                    if (this.inputZone && this.inputZone.startSweepID === element.id) {
+                        console.log("setting start point");
+                        styleButton(element, SweepState.STARTPOINT);
+                    }
+                    element.addEventListener("click", (event) => this.onButtonScanClicked(event.target));
+                }
+            }
+            this.panZoom = panzoom(this.divPlan, {
+                bounds: true,
+                boundsPadding: 0,
+                maxZoom: 3.5,
+                beforeMouseDown(e) {
+                    return (e.button === 2); /** Ignore event for right click (use for selecting) */
+                },
+            });
+            if (this.multipleFloors) {
+                this.chosenSweepsPerFloor.set(this.chosenPlan.zoneID, [...this.chosenScansOnPlan]);
+            }
+        });
+    }
+    /** Function if we are coming for svg editor workflow */
+    setScanByDraw(navigations) {
+        return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+            const rect = {
+                width: this.newZoneData.width,
+                height: this.newZoneData.height,
+            };
+            const img = yield getMetaForImage(this.chosenPlan.filepath);
+            const { coeffX, coeffY } = getCoefficientsForImage(img, rect);
+            const draw = this.newZoneData.elements;
+            draw.map((element) => __awaiter(this, void 0, void 0, function* () {
+                switch (element.nodeName) {
+                    case "rect":
+                        yield this.setScanInRect(img, coeffX, coeffY, element, navigations);
+                        break;
+                    case "ellipse":
+                        yield this.setScanInCircle(img, coeffX, coeffY, element, navigations);
+                        break;
+                    case "path":
+                        yield this.setScanInPolygon(img, coeffX, coeffY, element, navigations);
+                        break;
+                    default:
+                        break;
+                }
+            }));
+            resolve();
+        }));
+    }
+    setScanInRect(img, coeffX, coeffY, element, navigations) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const calibrage = JSON.parse(this.chosenPlan.calibration);
+            navigations.map((navigation) => {
+                const positionsOnPlan = navigation.positionOnPlan.map((entry) => JSON.parse(entry));
+                const positionOnPlan = positionsOnPlan.find((data) => data.planID === this.chosenPlan.id);
+                if (positionOnPlan) {
+                    const realWidth = img.width / coeffX;
+                    const realHeight = img.height / coeffY;
+                    const navY = (positionOnPlan.y * realHeight) / calibrage.imgHeight;
+                    const navX = (positionOnPlan.x * realWidth) / calibrage.imgWidth;
+                    if (navX > element.x &&
+                        navX < element.x + element.width &&
+                        navY > element.y &&
+                        navY < element.y + element.height &&
+                        !this.navIDsZoneEdit.includes(navigation.id)) {
+                        this.navIDsZoneEdit.push(navigation.id);
+                    }
+                }
+                // old calibration:
+                // const position = JSON.parse(navigation.position);
+                // let navX = (calibrage.offsetX + position.x * calibrage.x) / coeffX;
+                // let navY = (calibrage.offsetY + position.z * calibrage.y) / coeffY;
+                // if (element.angle) {
+                //     const rotatePos = rotate(
+                //         { x: navX, y: navY },
+                //         { x: element.cx, y: element.cy },
+                //         element.angle,
+                //     );
+                //     navX = rotatePos.x;
+                //     navY = rotatePos.y;
+                // }
+                /**
+                 * TODO calculer la rotation du rectangle
+                 */
+                // if (
+                //     navX > element.x &&
+                //     navX < element.x + element.width &&
+                //     navY > element.y &&
+                //     navY < element.y + element.height &&
+                //     !this.navIDsZoneEdit.includes(navigation.id)
+                // ) {
+                //     this.navIDsZoneEdit.push(navigation.id);
+                // }
+            });
+        });
+    } // EO
+    setScanInCircle(img, coeffX, coeffY, element, navigations) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const calibrage = JSON.parse(this.chosenPlan.calibration);
+            navigations.map(navigation => {
+                const positionsOnPlan = navigation.positionOnPlan.map((entry) => JSON.parse(entry));
+                const positionOnPlan = positionsOnPlan.find((data) => data.planID === this.chosenPlan.id);
+                if (positionOnPlan) {
+                    const realWidth = img.width / coeffX;
+                    const realHeight = img.height / coeffY;
+                    let navY = (positionOnPlan.y * realHeight) / calibrage.imgHeight;
+                    let navX = (positionOnPlan.x * realWidth) / calibrage.imgWidth;
+                    if (element.angle) {
+                        const rotatePos = rotate({ x: navX, y: navY }, { x: element.cx, y: element.cy }, element.angle);
+                        navX = rotatePos.x;
+                        navY = rotatePos.y;
+                    }
+                    const valueX = Math.pow(navX - element.cx, 2) / Math.pow(element.rx, 2);
+                    const valueY = Math.pow(navY - element.cy, 2) / Math.pow(element.ry, 2);
+                    const result = valueX + valueY;
+                    if (result <= 1 && !this.navIDsZoneEdit.includes(navigation.id)) {
+                        this.navIDsZoneEdit.push(navigation.id);
+                    }
+                }
+                // old calibration
+                // const position = JSON.parse(navigation.position);
+                // let navX = (calibrage.offsetX + position.x * calibrage.x) / coeffX;
+                // let navY = (calibrage.offsetY + position.z * calibrage.y) / coeffY;
+                // if (element.angle) {
+                //     const rotatePos = rotate(
+                //         { x: navX, y: navY },
+                //         { x: element.cx, y: element.cy },
+                //         element.angle,
+                //     );
+                //     navX = rotatePos.x;
+                //     navY = rotatePos.y;
+                // }
+                // const valueX =
+                //     Math.pow(navX - element.cx, 2) / Math.pow(element.rx, 2);
+                // const valueY =
+                //     Math.pow(navY - element.cy, 2) / Math.pow(element.ry, 2);
+                // const result = valueX + valueY;
+                // if (result <= 1 && !this.navIDsZoneEdit.includes(navigation.id)) {
+                //     this.navIDsZoneEdit.push(navigation.id);
+                // }
+            });
+        });
+    } // EO
+    setScanInPolygon(img, coeffX, coeffY, element, navigations) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const calibrage = JSON.parse(this.chosenPlan.calibration);
+            navigations.map((navigation) => __awaiter(this, void 0, void 0, function* () {
+                const positionsOnPlan = navigation.positionOnPlan.map((entry) => JSON.parse(entry));
+                const positionOnPlan = positionsOnPlan.find((data) => data.planID === this.chosenPlan.id);
+                if (positionOnPlan) {
+                    const realWidth = img.width / coeffX;
+                    const realHeight = img.height / coeffY;
+                    let navY = (positionOnPlan.y * realHeight) / calibrage.imgHeight;
+                    let navX = (positionOnPlan.x * realWidth) / calibrage.imgWidth;
+                    const p = {
+                        x: navX,
+                        y: navY,
+                    };
+                    if (isInPolygon(p, element.segList) &&
+                        !this.navIDsZoneEdit.includes(navigation.id)) {
+                        this.navIDsZoneEdit.push(navigation.id);
+                    }
+                }
+                // old calibration
+                // const position = JSON.parse(navigation.position);
+                // const p = {
+                //     x: (calibrage.offsetX + position.x * calibrage.x) / coeffX,
+                //     y: (calibrage.offsetY + position.z * calibrage.y) / coeffY,
+                // };
+                // if (element.angle) {
+                //     p = this.rotate(
+                //         p,
+                //         { x: element.cx, y: element.cy },
+                //         element.angle,
+                //     );
+                // }
+                // if (
+                //     isInPolygon(p, element.segList) &&
+                //     !this.navIDsZoneEdit.includes(navigation.id)
+                // ) {
+                //     this.navIDsZoneEdit.push(navigation.id);
+                // }
+            }));
+        });
+    }
+    clearDivPlan() {
+        if (this.divPlan)
+            this.divPlan.innerHTML = "";
+    }
+    /**
+     * Trigger each by the selectionComponent when selection change
+     * Update the current selected scan buttons
+     * @param selection new selection
+     */
+    onSelectionChanged(selection) {
+        const unselectedButtons = [];
+        const newSelectedButtons = [];
+        /** For each button, decide whether will be add to selected list or unselected list */
+        for (const button of this.buttonElements) {
+            const isSelected = buttonIsInSelection(button, selection);
+            if (this.buttonsInSelection.includes(button)) {
+                /** If the button is already in the selected list, we check if it should be unselect */
+                if (!isSelected) {
+                    unselectedButtons.push(button);
+                }
+            }
+            else if (isSelected) {
+                newSelectedButtons.push(button);
+            }
+        }
+        /** Visually Update unselected list */
+        for (const button of unselectedButtons) {
+            setVisuallySelected(button, false);
+        }
+        /** Visually Update selected list */
+        for (const button of newSelectedButtons) {
+            setVisuallySelected(button, true);
+        }
+        /** Remove  unselected list */
+        this.buttonsInSelection = this.buttonsInSelection.filter((button) => {
+            return !unselectedButtons.includes(button);
+        });
+        /** Add new selected buttons */
+        this.buttonsInSelection = [
+            ...this.buttonsInSelection,
+            ...newSelectedButtons,
+        ];
+    }
+    /**
+     * Trigger when the user click to add the selected scans
+     */
+    onSelectionAdd() {
+        for (const button of this.buttonsInSelection) {
+            if (!this.chosenScansOnPlan.includes(button.id)) {
+                this.onButtonScanClicked(button);
+            }
+        }
+        this.onSelectionChanged({ top: 0, left: 0, width: 0, height: 0 });
+    }
+    /**
+     * Trigger when the user click to remove the selected scans
+     */
+    onSelectionRemove() {
+        for (const button of this.buttonsInSelection) {
+            if (this.chosenScansOnPlan.includes(button.id)) {
+                this.onButtonScanClicked(button);
+            }
+        }
+        this.onSelectionChanged({ top: 0, left: 0, width: 0, height: 0 });
+    }
+    /**
+     * Trigger when the user click to select all scans
+     */
+    onSelectAll() {
+        this.buttonsInSelection = [...this.buttonElements];
+        for (const button of this.buttonsInSelection) {
+            setVisuallySelected(button, true);
+        }
+    }
+    /**
+     * Trigger when the user change the size of the scan points
+     * @param event
+     */
+    onChangeScanSize(event) {
+        const factor = event.target.value;
+        for (const button of this.buttonElements) {
+            button.style.transform = `scale(${factor})`;
+        }
+    }
+    /**
+     * When a button representing a scan is clicked
+     * @param button
+     */
+    onButtonScanClicked(button) {
+        this.selectionChanged = true;
+        if (this.isSettingStartSweep) {
+            if (this.startSweepID === button.id) {
+                // we deselect the starting point
+                button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`;
+                this.startSweepID = null;
+                return;
+            }
+            button.style.backgroundImage = `url('https://api.iconify.design/ic/baseline-flag-circle.svg?color=white&width=17&height=17')`;
+            if (!this.chosenScansOnPlan.includes(button.id)) {
+                this.chosenScansOnPlan.push(button.id);
+            }
+            if (this.startSweepID) {
+                // we are changing start sweep
+                const btnChanged = this.buttonElements.find((btn) => btn.id === this.startSweepID);
+                btnChanged.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`;
+            }
+            this.startSweepID = button.id;
+            return;
+        }
+        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 {
+            // remove from selection
+            if (this.occupiedSweeps.includes(button.id) && !this.navIDsZoneEdit.includes(button.id)) {
+                // the sweep belongs to another zone => set orange
+                button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=orange&height=17&width=17")`;
+            }
+            else {
+                button.style.backgroundImage = `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`;
+            }
+            const index = this.chosenScansOnPlan.indexOf(button.id);
+            this.chosenScansOnPlan.splice(index, 1);
+        }
+    }
+    onSaveSelection() {
+        if (this.multipleFloors) {
+            // rassemble all sweeps per floors
+            let finalSweeps = [];
+            Array.from(this.inputSweepsPerFloor.keys()).forEach(floorID => {
+                if (this.chosenSweepsPerFloor.get(floorID)) {
+                    // the sweeps for this floor were modified, we take them
+                    finalSweeps = [...finalSweeps, ...this.chosenSweepsPerFloor.get(floorID)];
+                }
+                else {
+                    // was not modified, we take the previous values
+                    finalSweeps = [...finalSweeps, ...this.inputSweepsPerFloor.get(floorID)];
+                }
+            });
+            // console.log("final sweeps", finalSweeps);
+            this.sweepsSelected.emit({ "sweeps": finalSweeps, "startSweepID": this.startSweepID });
+        }
+        else {
+            this.sweepsSelected.emit({ "sweeps": this.chosenScansOnPlan, "startSweepID": this.startSweepID });
+        }
+    }
+    onCancel() {
+        if (this.selectionChanged) {
+            const message = this.translate.instant("confirm.cancelModifZoneSweeps");
+            if (window.confirm(message)) {
+                this.sweepsSelected.emit(null);
+            }
+        }
+        else {
+            this.sweepsSelected.emit(null);
+        }
+    }
+    /**
+     * Adds current selection of sweeps for current floor (plan) for multifloor zone.
+     * It has to be saved anyway with onSaveSelection!
+     */
+    onValidateForFloor() {
+        if (this.multipleFloors) {
+            this.chosenSweepsPerFloor.set(this.chosenPlan.zoneID, [...this.chosenScansOnPlan]);
+            this.selectionChanged = false;
+        }
+    }
+}
+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 }, { token: i3.TranslateService }], 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", occupiedSweeps: "occupiedSweeps", unavailableSweeps: "unavailableSweeps", editingAudioZone: "editingAudioZone", inputZone: "inputZone", multipleFloors: "multipleFloors" }, outputs: { sweepsSelected: "sweepsSelected" }, usesOnChanges: true, ngImport: i0, template: "<div ngbDropdown class=\"sp-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=\"sp-row\">\n    <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\n        <lib-plan-legend [isAudioZone]=\"editingAudioZone\" *ngIf=\"buttonElements.length > 0\"></lib-plan-legend>\n        <div class=\"selectZone\" oncontextmenu=\"return false;\">\n            <div class=\"sp-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=\"sp-row d-inline-block\">\n            <h2>{{'selectTool.title' | translate}}</h2>\n            <div class=\"protip\">{{'selectTool.tip' | translate}}.</div>\n        </div>\n    \n        <div class=\"sp-row\">\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=\"sp-row\">\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectAll()\">{{'selectTool.selectAll' | translate}}</button>\n        </div>\n    \n        <div *ngIf=\"buttonsInSelection.length > 0\" class=\"edit-selected\">\n            <span class=\"tool-label\">{{'selectTool.edit' | translate}} : </span>\n            <div class=\"sp-row\">\n                <button class=\"btn rounded-pill btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">{{'selectTool.add' | translate}}</button>\n                <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectionRemove()\">{{'selectTool.undo' | translate}}</button>\n            </div>\n        </div>\n\n        <div class=\"sp-row\">\n            <div *ngIf=\"multipleFloors\"> \n                {{ chosenSweepsPerFloor.get(chosenPlan.zoneID) ? chosenSweepsPerFloor.get(chosenPlan.zoneID).length : \"0\"}} {{'scan points selected on this floor' | translate}} \n                <button class=\"btn btn-primary rounded-pill\" (click)=\"onValidateForFloor()\" [disabled]=\"!selectionChanged\">{{'Update selection for this floor' | translate}}</button>\n            </div>\n            <div *ngIf=\"!multipleFloors\">\n                {{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}  \n            </div>\n        </div>\n        <div *ngIf=\"!editingAudioZone\" class=\"sp-row\">\n            <lib-radio-button  label=\"{{ 'selectTool.chooseStartPoint'  | translate }}\" (isCheckedEvent)=\"isSettingStartSweep=!isSettingStartSweep\"></lib-radio-button>\n        </div>\n        <div class=\"sp-row\">\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSaveSelection()\">{{'selectTool.saveSelection' | translate}}</button>\n            <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'selectTool.cancelSelection' | translate}}</button>\n        </div>\n    </div>\n\n</div>\n   \n", styles: [".sp-row{display:flex;margin-bottom:1rem}.selectZone{border-radius:6px;overflow:hidden;background-color:var(--smarterplan-secondary)}.scanTool{margin:0px 1rem}.protip{color:gray;padding:0}.tool-label{font-size:1rem}\n"], components: [{ type: SelectionComponent, selector: "lib-selection", outputs: ["onSelectionChanged"] }, { type: PlanLegendComponent, selector: "lib-plan-legend", inputs: ["isAudioZone"] }, { type: RadioButtonComponent, selector: "lib-radio-button", inputs: ["label"], outputs: ["isCheckedEvent"] }], directives: [{ type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SweepPlanSelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-sweep-plan-selection', template: "<div ngbDropdown class=\"sp-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=\"sp-row\">\n    <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\n        <lib-plan-legend [isAudioZone]=\"editingAudioZone\" *ngIf=\"buttonElements.length > 0\"></lib-plan-legend>\n        <div class=\"selectZone\" oncontextmenu=\"return false;\">\n            <div class=\"sp-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=\"sp-row d-inline-block\">\n            <h2>{{'selectTool.title' | translate}}</h2>\n            <div class=\"protip\">{{'selectTool.tip' | translate}}.</div>\n        </div>\n    \n        <div class=\"sp-row\">\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=\"sp-row\">\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectAll()\">{{'selectTool.selectAll' | translate}}</button>\n        </div>\n    \n        <div *ngIf=\"buttonsInSelection.length > 0\" class=\"edit-selected\">\n            <span class=\"tool-label\">{{'selectTool.edit' | translate}} : </span>\n            <div class=\"sp-row\">\n                <button class=\"btn rounded-pill btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">{{'selectTool.add' | translate}}</button>\n                <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectionRemove()\">{{'selectTool.undo' | translate}}</button>\n            </div>\n        </div>\n\n        <div class=\"sp-row\">\n            <div *ngIf=\"multipleFloors\"> \n                {{ chosenSweepsPerFloor.get(chosenPlan.zoneID) ? chosenSweepsPerFloor.get(chosenPlan.zoneID).length : \"0\"}} {{'scan points selected on this floor' | translate}} \n                <button class=\"btn btn-primary rounded-pill\" (click)=\"onValidateForFloor()\" [disabled]=\"!selectionChanged\">{{'Update selection for this floor' | translate}}</button>\n            </div>\n            <div *ngIf=\"!multipleFloors\">\n                {{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}  \n            </div>\n        </div>\n        <div *ngIf=\"!editingAudioZone\" class=\"sp-row\">\n            <lib-radio-button  label=\"{{ 'selectTool.chooseStartPoint'  | translate }}\" (isCheckedEvent)=\"isSettingStartSweep=!isSettingStartSweep\"></lib-radio-button>\n        </div>\n        <div class=\"sp-row\">\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSaveSelection()\">{{'selectTool.saveSelection' | translate}}</button>\n            <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'selectTool.cancelSelection' | translate}}</button>\n        </div>\n    </div>\n\n</div>\n   \n", styles: [".sp-row{display:flex;margin-bottom:1rem}.selectZone{border-radius:6px;overflow:hidden;background-color:var(--smarterplan-secondary)}.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 }, { type: i3.TranslateService }]; }, propDecorators: { spaceID: [{
+                type: Input
+            }], chosenScansOnPlan: [{
+                type: Input
+            }], newZoneData: [{
+                type: Input
+            }], occupiedSweeps: [{
+                type: Input
+            }], unavailableSweeps: [{
+                type: Input
+            }], editingAudioZone: [{
+                type: Input
+            }], inputZone: [{
+                type: Input
+            }], multipleFloors: [{
+                type: Input
+            }], sweepsSelected: [{
+                type: Output
+            }] } });
+
+class AddZoneComponent {
+    constructor(fb, zoneService, layerService, userService, navigationService) {
+        this.fb = fb;
+        this.zoneService = zoneService;
+        this.layerService = layerService;
+        this.userService = userService;
+        this.navigationService = navigationService;
+        this.updatedZone = new EventEmitter();
+        this.isMuseumVisit = false;
+        this.parentZones = [];
+        this.carouselIsVisible = false;
+        this.isSubmitted = false;
+        this.chosenScans = [];
+        this.fromPlan = false;
+        this.chosenScansOnPlan = [];
+        this.zoneInitialNavCount = 0;
+        this.zoneIsMatterportFloor = false;
+        this.multipleFloors = false;
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.parentZones = this.zones.filter((zone) => zone.layer && zone.layer.name === 'FLOOR');
+            if (!this.defaultZone) {
+                this.defaultZone = this.getDefaultZone();
+            }
+            this.parentZones.unshift(this.defaultZone);
+            yield this.updateLayers();
+            this.initZoneForm();
+        });
+    }
+    updateLayers() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.currentOrgId = this.userService.currentOrganisation(this.spaceID).id;
+            const layers = yield this.layerService.getLayerForOrganisation(this.currentOrgId);
+            // filter out layers created by the system
+            this.layers = layers.filter((l) => l.name !== 'BUILDING' && l.name !== 'FLOOR');
+        });
+    }
+    initZoneForm() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.zoneEdit) {
+                if (this.zoneEdit.metadata) {
+                    const metadata = JSON.parse(this.zoneEdit.metadata);
+                    this.zoneIsMatterportFloor = metadata.hasOwnProperty('matterportFloorSequence');
+                }
+                const isVirtual = this.zoneService.zoneIsVirtual(this.zoneEdit);
+                if (!isVirtual) {
+                    yield this.loadNavigations();
+                }
+                this.isMuseumVisit = this.zoneEdit.isMuseumVisitZone === true;
+                this.multipleFloors = this.zoneEdit.isMultipleFloorZone === true;
+                this.zoneForm = this.fb.group({
+                    id: this.zoneEdit.id,
+                    name: [this.zoneEdit.name, [Validators.required]],
+                    code_ref: this.zoneEdit.code_ref ? this.zoneEdit.code_ref : null,
+                    layerID: this.zoneEdit.layer ? this.zoneEdit.layer.id : null,
+                    surface: this.zoneEdit.surface ? this.zoneEdit.surface : 0,
+                    parentID: this.zoneEdit.parentID,
+                    parent: { value: this.zoneEdit.parent.name, disabled: true },
+                    newLayer: [null, [this.layerNameValidator()]],
+                    isMuseumVisitZone: this.isMuseumVisit,
+                    startSweepID: this.zoneEdit.startSweepID,
+                });
+                this.onChangeMultipleFloors();
+            }
+            else {
+                this.zoneForm = this.fb.group({
+                    name: [
+                        this.newZoneDataFromEditor ? this.newZoneDataFromEditor.name : '',
+                        [Validators.required],
+                    ],
+                    code_ref: null,
+                    layerID: null,
+                    surface: 0,
+                    parentID: this.defaultZone.id,
+                    newLayer: [null, [this.layerNameValidator()]],
+                    isMuseumVisitZone: this.isMuseumVisit,
+                    startSweepID: null,
+                });
+            }
+        });
+    }
+    onSubmitZone() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.isSubmitted = true;
+            if (!this.zoneForm.valid) {
+                return;
+            }
+            const formValue = this.zoneForm.getRawValue(); //because we need values of disables controls as well
+            if (formValue.newLayer) {
+                yield this.createLayer(formValue.newLayer).then((layer) => {
+                    formValue.layerID = layer.id;
+                });
+            }
+            const zoneInput = {
+                name: formValue.name,
+                surface: Math.round(formValue.surface * 100) / 100,
+                spaceID: this.spaceID,
+                layerID: formValue.layerID,
+                parentID: formValue.parentID,
+                isMuseumVisitZone: this.isMuseumVisit,
+                isMultipleFloorZone: this.multipleFloors,
+                sweepIDs: [],
+                startSweepID: formValue.startSweepID,
+            };
+            if (formValue.code_ref) {
+                zoneInput.code_ref = formValue.code_ref;
+            }
+            try {
+                this.zoneForm = null;
+                this.isSubmitted = false;
+                if (this.zoneEdit) {
+                    const zoneUpdate = zoneInput;
+                    zoneUpdate.sweepIDs = this.zoneEdit.sweepIDs;
+                    zoneUpdate.id = formValue.id;
+                    yield this.setSweepsAndNodeForZoneInput(zoneUpdate);
+                    yield this.zoneService.updateZone(zoneUpdate);
+                    this.zoneEdit = null;
+                    this.updatedZone.emit(zoneUpdate.id);
+                }
+                else {
+                    yield this.setSweepsAndNodeForZoneInput(zoneInput);
+                    if (!zoneInput.parentID) {
+                        // set building as parent
+                        zoneInput.parentID = this.defaultZone.id;
+                    }
+                    yield this.zoneService.create(zoneInput).then((zoneCreated) => {
+                        this.updatedZone.emit(zoneCreated.id);
+                    });
+                }
+            }
+            catch (error) {
+                console.error(error);
+            }
+        });
+    }
+    onCancel() {
+        this.isSubmitted = false;
+        this.zoneForm = null;
+        this.chosenScansOnPlan = [];
+        this.chosenScans = [];
+        this.updatedZone.emit(false);
+    }
+    get name() {
+        return this.zoneForm.get('name');
+    }
+    get newLayer() {
+        return this.zoneForm.get('newLayer');
+    }
+    toggleCarousel() {
+        this.carouselIsVisible = true;
+        this.chosenScansOnPlan = [];
+    }
+    togglePlan() {
+        this.fromPlan = true;
+        this.chosenScans = [];
+    }
+    onAddScan() {
+        if (!this.chosenScans.includes(this.currentScanShowing)) {
+            // console.log("adding scan", this.currentScanShowing);
+            this.chosenScans.push(this.currentScanShowing);
+        }
+        else {
+            alert('Scan already added!');
+        }
+    }
+    onRemoveScanImage(scan) {
+        const index = this.chosenScans.indexOf(scan);
+        this.chosenScans.splice(index, 1);
+    }
+    onRemoveScanPlan(scan) {
+        const index = this.chosenScansOnPlan.indexOf(scan);
+        this.chosenScansOnPlan.splice(index, 1);
+    }
+    setSweepsAndNodeForZoneInput(zoneInput) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.chosenScans.length > 0 &&
+                this.chosenScans.length !== this.zoneInitialNavCount &&
+                !this.fromPlan) {
+                // if we chose scans from the carousel
+                const sweepIDs = [];
+                this.chosenScans.map((scan) => __awaiter(this, void 0, void 0, function* () {
+                    const imageUuid = this.images360[scan].filename.split('_')[0];
+                    const sweepID = this.navigationIDs.find((nav) => {
+                        return nav.includes(imageUuid);
+                    });
+                    if (sweepID) {
+                        sweepIDs.push(sweepID);
+                    }
+                }));
+                zoneInput.sweepIDs = sweepIDs;
+            }
+            else {
+                // we are not coming from gallery choice
+                if (this.chosenScansOnPlan.length > 0) {
+                    zoneInput.sweepIDs = this.chosenScansOnPlan;
+                }
+            }
+            if (zoneInput.sweepIDs && zoneInput.sweepIDs.length > 0) {
+                const navForSweep = yield this.navigationService.getNavigationsForMatterportIDForSpace(zoneInput.sweepIDs[0], this.spaceID);
+                zoneInput.nodeIDs = [navForSweep[0].nodeID];
+            }
+        });
+    }
+    createLayer(name) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.layerService.createLayerForOrganisation(name, this.currentOrgId);
+        });
+    }
+    loadNavigations() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.zoneEdit.sweepIDs.length > 0) {
+                this.zoneInitialNavCount = this.zoneEdit.sweepIDs.length;
+                const navList = [];
+                const scansZoneEdit = [];
+                yield Promise.all(this.zoneEdit.sweepIDs.map((sweepID) => __awaiter(this, void 0, void 0, function* () {
+                    scansZoneEdit.push(sweepID);
+                    const index = this.images360.findIndex((im) => {
+                        return im.filename.includes(sweepID.slice(0, 8));
+                    });
+                    if (index !== -1) {
+                        navList.push(index);
+                    }
+                })));
+                this.chosenScans = navList;
+                this.chosenScansOnPlan = scansZoneEdit;
+                return Promise.resolve();
+            }
+            return Promise.resolve();
+        });
+    }
+    // iniPlanForDraw() {
+    //     this.togglePlan();
+    //     setTimeout(() => {
+    //         this.onPlanClick();
+    //     }, 500);
+    // }
+    /**
+     * Adds all sweeps of the space
+     */
+    onAddAll() {
+        const defaultZone = this.getDefaultZone();
+        if (defaultZone) {
+            this.chosenScansOnPlan = defaultZone.sweepIDs;
+            this.zoneForm.get('parentID').setValue(defaultZone.id);
+            this.zoneForm.get('parentID').disable();
+            this.multipleFloors = true;
+        }
+    }
+    getDefaultZone() {
+        return this.zones.find((zone) => zone.layer &&
+            zone.layer.name === 'BUILDING' &&
+            zone.sweepIDs &&
+            zone.sweepIDs.length > 0);
+    }
+    /**
+     * Multiple floors
+     */
+    onChangeMultipleFloors() {
+        if (this.multipleFloors) {
+            const defaultZone = this.getDefaultZone();
+            if (defaultZone) {
+                this.zoneForm.get('parentID').setValue(defaultZone.id);
+                this.zoneForm.get('parentID').disable();
+            }
+        }
+        else {
+            this.zoneForm.get('parentID').enable();
+        }
+    }
+    onSelectedSweepsFromPlan(result) {
+        if (result) {
+            if (result.sweeps) {
+                this.chosenScansOnPlan = result.sweeps;
+            }
+            if (result.startSweepID) {
+                this.zoneForm.controls.startSweepID.setValue(result.startSweepID);
+            }
+        }
+        this.fromPlan = false;
+    }
+    layerNameValidator() {
+        return (control) => {
+            if (!control.value) {
+                return null;
+            }
+            const forbidden = this.layers
+                .map((l) => l.name.toLowerCase())
+                .includes(control.value.toLowerCase());
+            return forbidden ? { forbiddenName: { value: control.value } } : null;
+        };
+    }
+}
+AddZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddZoneComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.ZoneService }, { token: i2.LayerService }, { token: i2.BaseUserService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+AddZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AddZoneComponent, selector: "lib-add-zone", inputs: { zoneEdit: "zoneEdit", spaceID: "spaceID", images360: "images360", navigationIDs: "navigationIDs", zones: "zones", newZoneDataFromEditor: "newZoneDataFromEditor", chosenPlan: "chosenPlan", isMuseumVisit: "isMuseumVisit", defaultZone: "defaultZone" }, outputs: { updatedZone: "updatedZone" }, ngImport: i0, template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\n    <div class=\"col-7\">\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\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=\"name\">\n                    <!-- <div class=\"invalid-feedback\">\n                        {{'A name is required' | translate}}\n                    </div> -->\n                </div>\n            </div>\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-2 col-form-label\">{{'codeRef' | translate}}</label>\n                <div class=\"col-sm-10\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"code_ref\">\n                </div>\n            </div>\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\n                <div class=\"col-sm-10\">\n                    <select class=\"form-control\" formControlName=\"layerID\">\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\n                            zoneEdit.layer.name : 'Choose type'}}</option>\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\n                            {{ layer.name }}\n                        </option>\n                    </select>\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\n                    <div *ngIf=\"newLayer.invalid && (newLayer.dirty || newLayer.touched)\" class=\"text-danger\">\n                        <div *ngIf=\"newLayer.errors?.['forbiddenName']\">\n                            {{'Layer exists already' | translate}}\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\n                <div class=\"col-sm-10\">\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\n                        [ngModelOptions]=\"{standalone: true}\">\n                </div>\n            </div>\n\n            <div class=\"mb-3 row\" *ngIf=\"!zoneEdit || zoneEdit.isMultipleFloorZone\">\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\n                <div class=\"col-sm-10\">\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\"\n                        [disabled]=\"zoneEdit !== undefined && zoneEdit !== null\" (change)=\"onChangeMultipleFloors()\"\n                        [ngModelOptions]=\"{standalone: true}\">\n                    <div class='text-danger' *ngIf=\"zoneEdit\">\n                        {{'cannotChangeMultifloor' | translate}}\n                    </div>\n                </div>\n\n            </div>\n\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\n                <div class=\"col-sm-10\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\n                </div>\n            </div>\n\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\n                <div class=\"col-sm-10\">\n                    <input *ngIf=\"zoneEdit\" type=\"text\" class=\"form-control\" formControlName=\"parent\">\n                    <div class=\"text-danger\" *ngIf=\"zoneEdit\">\n                        {{'cannotChangeParent' | translate}}\n                    </div>\n                    <select *ngIf=\"!zoneEdit\" class=\"form-control\" formControlName=\"parentID\">\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\n                            {{ zone.name }}\n                        </option>\n                    </select>\n\n                </div>\n            </div>\n\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\n                    {{'No scan points chosen' | translate}}</p>\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\n                        <div class=\"row\">\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\n                            </div>\n                        </div>\n                    </div> -->\n                </div>\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\n                    <div *ngFor=\"let scan of chosenScans\">\n                        <div class=\"row\">\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\n                <div class=\"col\">\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\n                        (click)=\"togglePlan()\">{{'Choose scan points on plan' |\n                        translate}}</button>\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\n                        {{'Choose scan points from gallery' | translate}}</button>\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\n                        {{'add-all-scans' | translate}}</button>\n                </div>\n            </div>\n\n            <!-- <div class=\"mb-3 row\">\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\n                <div class=\"col-sm-3\">\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\n                        [ngModelOptions]=\"{standalone: true}\">\n                </div>\n            </div> -->\n\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\n            </div>\n            <div class=\"mt-3\">\n                <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\"\n                    [disabled]=\"fromPlan || !zoneForm.valid\">{{'Save' | translate}}</button>\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\n                    {{'Cancel' | translate}}</button>\n            </div>\n        </form>\n    </div>\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\n        <lib-sweep-plan-selection style=\"width: 100%;\" [newZoneData]=\"newZoneDataFromEditor\" [spaceID]=\"spaceID\"\n            [multipleFloors]=\"multipleFloors\" [inputZone]=\"zoneEdit\"\n            (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\n    </div>\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)}button{min-width:80px}\n"], components: [{ type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }, { type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "occupiedSweeps", "unavailableSweeps", "editingAudioZone", "inputZone", "multipleFloors"], outputs: ["sweepsSelected"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddZoneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-add-zone', template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\n    <div class=\"col-7\">\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\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=\"name\">\n                    <!-- <div class=\"invalid-feedback\">\n                        {{'A name is required' | translate}}\n                    </div> -->\n                </div>\n            </div>\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-2 col-form-label\">{{'codeRef' | translate}}</label>\n                <div class=\"col-sm-10\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"code_ref\">\n                </div>\n            </div>\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\n                <div class=\"col-sm-10\">\n                    <select class=\"form-control\" formControlName=\"layerID\">\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\n                            zoneEdit.layer.name : 'Choose type'}}</option>\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\n                            {{ layer.name }}\n                        </option>\n                    </select>\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\n                    <div *ngIf=\"newLayer.invalid && (newLayer.dirty || newLayer.touched)\" class=\"text-danger\">\n                        <div *ngIf=\"newLayer.errors?.['forbiddenName']\">\n                            {{'Layer exists already' | translate}}\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\n                <div class=\"col-sm-10\">\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\n                        [ngModelOptions]=\"{standalone: true}\">\n                </div>\n            </div>\n\n            <div class=\"mb-3 row\" *ngIf=\"!zoneEdit || zoneEdit.isMultipleFloorZone\">\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\n                <div class=\"col-sm-10\">\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\"\n                        [disabled]=\"zoneEdit !== undefined && zoneEdit !== null\" (change)=\"onChangeMultipleFloors()\"\n                        [ngModelOptions]=\"{standalone: true}\">\n                    <div class='text-danger' *ngIf=\"zoneEdit\">\n                        {{'cannotChangeMultifloor' | translate}}\n                    </div>\n                </div>\n\n            </div>\n\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\n                <div class=\"col-sm-10\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\n                </div>\n            </div>\n\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\n                <div class=\"col-sm-10\">\n                    <input *ngIf=\"zoneEdit\" type=\"text\" class=\"form-control\" formControlName=\"parent\">\n                    <div class=\"text-danger\" *ngIf=\"zoneEdit\">\n                        {{'cannotChangeParent' | translate}}\n                    </div>\n                    <select *ngIf=\"!zoneEdit\" class=\"form-control\" formControlName=\"parentID\">\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\n                            {{ zone.name }}\n                        </option>\n                    </select>\n\n                </div>\n            </div>\n\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\n                    {{'No scan points chosen' | translate}}</p>\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\n                        <div class=\"row\">\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\n                            </div>\n                        </div>\n                    </div> -->\n                </div>\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\n                    <div *ngFor=\"let scan of chosenScans\">\n                        <div class=\"row\">\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\n                <div class=\"col\">\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\n                        (click)=\"togglePlan()\">{{'Choose scan points on plan' |\n                        translate}}</button>\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\n                        {{'Choose scan points from gallery' | translate}}</button>\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\n                        {{'add-all-scans' | translate}}</button>\n                </div>\n            </div>\n\n            <!-- <div class=\"mb-3 row\">\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\n                <div class=\"col-sm-3\">\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\n                        [ngModelOptions]=\"{standalone: true}\">\n                </div>\n            </div> -->\n\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\n            </div>\n            <div class=\"mt-3\">\n                <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\"\n                    [disabled]=\"fromPlan || !zoneForm.valid\">{{'Save' | translate}}</button>\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\n                    {{'Cancel' | translate}}</button>\n            </div>\n        </form>\n    </div>\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\n        <lib-sweep-plan-selection style=\"width: 100%;\" [newZoneData]=\"newZoneDataFromEditor\" [spaceID]=\"spaceID\"\n            [multipleFloors]=\"multipleFloors\" [inputZone]=\"zoneEdit\"\n            (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\n    </div>\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)}button{min-width:80px}\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: [{
+                type: Input
+            }], images360: [{
+                type: Input
+            }], navigationIDs: [{
+                type: Input
+            }], zones: [{
+                type: Input
+            }], newZoneDataFromEditor: [{
+                type: Input
+            }], updatedZone: [{
+                type: Output
+            }], chosenPlan: [{
+                type: Input
+            }], isMuseumVisit: [{
+                type: Input
+            }], defaultZone: [{
+                type: Input
+            }] } });
+
+class AddAudioZoneComponent {
+    constructor(fb, zoneService, layerService, userService, navigationService, commentService, translate) {
+        this.fb = fb;
+        this.zoneService = zoneService;
+        this.layerService = layerService;
+        this.userService = userService;
+        this.navigationService = navigationService;
+        this.commentService = commentService;
+        this.translate = translate;
+        this.updatedZone = new EventEmitter();
+        this.isSubmitted = false;
+        this.fromPlan = false;
+        this.chosenScansOnPlan = [];
+        this.isAddingAudio = false;
+        this.scansModified = false;
+        this.occupiedSweeps = [];
+        this.unavailableSweeps = [];
+        this.working = false;
+        this.audioUploaded = false;
+    }
+    ngOnInit() {
+        if (this.currentAudioZone) {
+            // we are editing zone
+            this.chosenAudio = this.currentAudioZone.audio;
+            this.chosenScansOnPlan = this.currentAudioZone.sweepIDs;
+            this.parentZone = this.currentAudioZone.parent;
+        }
+        this.setup();
+    }
+    setup() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const mission = this.userService.currentMission(this.spaceID);
+            this.currentOrgId = mission.organisationID;
+            let layers = yield this.layerService.getLayerForOrganisation(this.currentOrgId);
+            this.audioLayer = layers.find((layer) => layer.name === "AUDIO");
+            if (!this.audioLayer) {
+                // first time creating Audio Zone 
+                this.audioLayer = yield this.layerService.createLayerForOrganisation("AUDIO", this.currentOrgId);
+            }
+            if (!this.parentZone) {
+                this.parentZone = this.defaultZone;
+            }
+            this.audioZones = this.zones.filter((zone) => zone.audioID && zone.parentID === this.parentZone.id);
+            this.occupiedSweeps = this.audioZones.flatMap((zone) => zone.sweepIDs);
+            // unavailable sweeps: sweeps that do not belong to parent zone
+            this.unavailableSweeps = this.defaultZone.sweepIDs.filter((sweep) => !this.parentZone.sweepIDs.includes(sweep));
+            yield this.getAudios();
+            this.commentForm = this.fb.group({
+                title: [null, Validators.required],
+                spaceID: this.spaceID,
+                type: CommentType.AUDIO,
+                ownerID: mission.id,
+            });
+        });
+    }
+    onSubmit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.isSubmitted = true;
+            this.working = true;
+            if (this.currentAudioZone) {
+                yield this.zoneService.updateZone({
+                    id: this.currentAudioZone.id,
+                    sweepIDs: this.chosenScansOnPlan,
+                });
+                yield this.removeTakenSweepsFromOtherZones();
+                this.updatedZone.emit(this.currentAudioZone.id);
+                this.working = false;
+            }
+            else {
+                const zoneInput = {
+                    name: `${this.parentZone.name} - ${this.chosenAudio.title}`,
+                    surface: 0,
+                    spaceID: this.spaceID,
+                    layerID: this.audioLayer.id,
+                    parentID: this.parentZone.id,
+                    isMuseumVisitZone: false,
+                    isMultipleFloorZone: this.parentZone.isMultipleFloorZone,
+                    audioID: this.chosenAudio.id,
+                };
+                try {
+                    yield this.setSweepsAndNodeForZoneInput(zoneInput);
+                    yield this.zoneService
+                        .create(zoneInput)
+                        .then((zoneCreated) => __awaiter(this, void 0, void 0, function* () {
+                        this.currentAudioZone = zoneCreated;
+                        yield this.removeTakenSweepsFromOtherZones();
+                        this.updatedZone.emit(zoneCreated.id);
+                    }));
+                    this.working = false;
+                }
+                catch (error) {
+                    console.error(error);
+                    this.working = false;
+                }
+            }
+        });
+    }
+    setSweepsAndNodeForZoneInput(zoneInput) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.chosenScansOnPlan.length > 0) {
+                zoneInput.sweepIDs = this.chosenScansOnPlan;
+            }
+            if (zoneInput.sweepIDs && zoneInput.sweepIDs.length > 0) {
+                const navForSweep = yield this.navigationService.getNavigationsForMatterportIDForSpace(zoneInput.sweepIDs[0], this.spaceID);
+                zoneInput.nodeIDs = [navForSweep[0].nodeID];
+            }
+        });
+    }
+    onCancel() {
+        if (this.scansModified) {
+            const message = this.translate.instant("confirm.cancelEditZone");
+            if (!window.confirm(message)) {
+                return;
+            }
+        }
+        this.commentForm = null;
+        this.chosenScansOnPlan = [];
+        this.updatedZone.emit(false);
+    }
+    togglePlan() {
+        this.fromPlan = true;
+    }
+    onSelectedSweepsFromPlan(result) {
+        if (result && result.sweeps) {
+            this.chosenScansOnPlan = result.sweeps;
+            this.scansModified = true;
+        }
+        this.fromPlan = false;
+    }
+    handleFileInput(event) {
+        const target = event.target;
+        this.fileToUpload = target.files[0];
+    }
+    onUploadAudio() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.working = true;
+            const commentInput = this.commentForm.value;
+            try {
+                const newAudio = yield this.commentService.createCommentWithFile(commentInput, this.fileToUpload);
+                this.audiosForSpace.push(newAudio);
+                this.isAddingAudio = false;
+                this.working = false;
+                this.audioUploaded = true;
+            }
+            catch (e) {
+                this.working = false;
+                this.audioUploaded = false;
+                console.log(e);
+            }
+        });
+    }
+    getAudios() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const attachments = yield this.commentService.getCommentsBySpaceID(this.spaceID);
+            if (attachments) {
+                this.audiosForSpace = attachments.filter((attachment) => attachment.type === CommentType.AUDIO);
+            }
+        });
+    }
+    onCancelAudioUpload() {
+        this.commentForm = null;
+        this.isAddingAudio = false;
+        this.fileToUpload = null;
+    }
+    onChooseAudio(audio) {
+        this.chosenAudio = audio;
+        this.currentAudioZone = this.audioZones.find((zone) => zone.audioID === this.chosenAudio.id);
+        if (this.currentAudioZone) {
+            this.chosenScansOnPlan = this.currentAudioZone.sweepIDs;
+        }
+        else {
+            this.chosenScansOnPlan = [];
+        }
+    }
+    /**
+     * Removes newly selected sweeps for current zone (they are in chosenScansOnPlan) from other audio zones.
+     * Rule: one sweep = one audio.
+     */
+    removeTakenSweepsFromOtherZones() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Promise.all(this.audioZones.map((zone) => __awaiter(this, void 0, void 0, function* () {
+                if (zone.id !== this.currentAudioZone.id) {
+                    const newSweeps = zone.sweepIDs.filter((sweepID) => !this.chosenScansOnPlan.includes(sweepID));
+                    if (newSweeps.length !== zone.sweepIDs.length) {
+                        yield this.zoneService.updateZone({ id: zone.id, sweepIDs: newSweeps });
+                    }
+                }
+            })));
+        });
+    }
+    /**
+     * Delete audio as Comment, all its audio Zones and file from S3 (using lambda function)
+     */
+    onDeleteAudio() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const message = this.translate.instant("confirm.deleteAudio");
+            if (window.confirm(message)) {
+                yield this.commentService.deleteComment(this.chosenAudio.id);
+                const index = this.audiosForSpace.indexOf(this.chosenAudio);
+                this.audiosForSpace.splice(index, 1);
+                // delete all zones with this comment audio
+                const audioZonesToDelete = this.zones.filter((z) => z.audioID === this.chosenAudio.id);
+                yield Promise.all(audioZonesToDelete.map((zone) => __awaiter(this, void 0, void 0, function* () {
+                    yield this.zoneService.deleteZone(zone.id);
+                    const indexZone = this.audioZones.indexOf(this.currentAudioZone);
+                    if (indexZone !== -1) {
+                        this.audioZones.slice(indexZone, 1);
+                    }
+                })));
+                this.currentAudioZone = null;
+                this.chosenAudio = null;
+            }
+        });
+    }
+}
+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", parentZone: "parentZone", 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=\"d-flex justify-content-center\" *ngIf=\"working\">\n                    <lib-loader></lib-loader>\n                </div>\n                \n                <div class=\"mt-3\">\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || working\">{{'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    <ngb-alert type=\"success\" [dismissible]=\"true\" *ngIf=\"!working && audioUploaded\" (closed)=\"audioUploaded=false\">\n        {{ 'add-audio.success' | translate }} !\n    </ngb-alert>\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio && audiosForSpace\">\n       \n        <div class=\"instruction-row\" >\n            <p>1.</p>\n            <div ngbDropdown class=\"d-inline-block\">\n                <div>\n                        <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\n                            ngbDropdownToggle>{{chosenAudio ?\n                                chosenAudio.title : ('choose-audio' | 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.add' | translate}}</button>\n        </div>\n        <div class=\"instruction-row\">\n            <p>2.</p>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\" [disabled]=\"!chosenAudio\">\n                    {{'Choose scan points on plan' | translate}}</button>\n\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onDeleteAudio()\" [disabled]=\"!chosenAudio\">\n                        {{'Delete audio' | translate}}</button>\n            \n        </div>\n        <div class=\"instruction-row\" *ngIf=\"chosenAudio\">\n            <p>{{ chosenScansOnPlan.length }} {{'scans-chosen-audio' | translate}}</p>\n        </div>\n\n        <div class=\"mt-3\">\n            <button class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || !this.chosenAudio\" (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%;\" [inputZone]=\"currentAudioZone\" [spaceID]=\"spaceID\" \n        [occupiedSweeps]=\"occupiedSweeps\" [unavailableSweeps]=\"unavailableSweeps\" [editingAudioZone]=\"true\"\n        (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\n    </div>\n</div>\n", styles: [".instruction-row{display:flex;align-items:center;margin-top:1rem}.instruction-row button{margin-bottom:0}.instruction-row p{margin-bottom:0;margin-left:5px;margin-right:5px}\n"], components: [{ type: i2.LoaderComponent, selector: "lib-loader", inputs: ["useLogo", "color"] }, { type: i7.NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }, { type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "occupiedSweeps", "unavailableSweeps", "editingAudioZone", "inputZone", "multipleFloors"], outputs: ["sweepsSelected"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddAudioZoneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-add-audio-zone', template: "<div class=\"main-container\">\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=\"d-flex justify-content-center\" *ngIf=\"working\">\n                    <lib-loader></lib-loader>\n                </div>\n                \n                <div class=\"mt-3\">\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || working\">{{'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    <ngb-alert type=\"success\" [dismissible]=\"true\" *ngIf=\"!working && audioUploaded\" (closed)=\"audioUploaded=false\">\n        {{ 'add-audio.success' | translate }} !\n    </ngb-alert>\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio && audiosForSpace\">\n       \n        <div class=\"instruction-row\" >\n            <p>1.</p>\n            <div ngbDropdown class=\"d-inline-block\">\n                <div>\n                        <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\n                            ngbDropdownToggle>{{chosenAudio ?\n                                chosenAudio.title : ('choose-audio' | 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.add' | translate}}</button>\n        </div>\n        <div class=\"instruction-row\">\n            <p>2.</p>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\" [disabled]=\"!chosenAudio\">\n                    {{'Choose scan points on plan' | translate}}</button>\n\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onDeleteAudio()\" [disabled]=\"!chosenAudio\">\n                        {{'Delete audio' | translate}}</button>\n            \n        </div>\n        <div class=\"instruction-row\" *ngIf=\"chosenAudio\">\n            <p>{{ chosenScansOnPlan.length }} {{'scans-chosen-audio' | translate}}</p>\n        </div>\n\n        <div class=\"mt-3\">\n            <button class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || !this.chosenAudio\" (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%;\" [inputZone]=\"currentAudioZone\" [spaceID]=\"spaceID\" \n        [occupiedSweeps]=\"occupiedSweeps\" [unavailableSweeps]=\"unavailableSweeps\" [editingAudioZone]=\"true\"\n        (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\n    </div>\n</div>\n", styles: [".instruction-row{display:flex;align-items:center;margin-top:1rem}.instruction-row button{margin-bottom:0}.instruction-row p{margin-bottom:0;margin-left:5px;margin-right:5px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i2.ZoneService }, { type: i2.LayerService }, { type: i2.BaseUserService }, { type: i2.NavigationService }, { type: i2.CommentService }, { type: i3.TranslateService }]; }, propDecorators: { spaceID: [{
+                type: Input
+            }], updatedZone: [{
+                type: Output
+            }], defaultZone: [{
+                type: Input
+            }], zones: [{
+                type: Input
+            }], parentZone: [{
+                type: Input
+            }], currentAudioZone: [{
+                type: Input
+            }] } });
+
+class CountAudioSweepsPipe {
+    constructor(zoneService) {
+        this.zoneService = zoneService;
+    }
+    transform(zone) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let childrenAudioZones = yield this.zoneService.getZonesByParentZone(zone.id);
+            if (childrenAudioZones.length > 0) {
+                childrenAudioZones = childrenAudioZones.filter((zone) => zone.audioID);
+                if (childrenAudioZones.length > 0) {
+                    return childrenAudioZones.flatMap((z) => z.sweepIDs).length;
+                }
+            }
+            return 0;
+        });
+    }
+}
+CountAudioSweepsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CountAudioSweepsPipe, deps: [{ token: i2.ZoneService }], target: i0.ɵɵFactoryTarget.Pipe });
+CountAudioSweepsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CountAudioSweepsPipe, name: "countAudioSweeps" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CountAudioSweepsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'countAudioSweeps'
+                }]
+        }], ctorParameters: function () { return [{ type: i2.ZoneService }]; } });
+
+class ZonesComponent {
+    constructor(route, zoneService, spaceService, visitService, navigationService, userService, planService, translate, navigatorService, router) {
+        this.route = route;
+        this.zoneService = zoneService;
+        this.spaceService = spaceService;
+        this.visitService = visitService;
+        this.navigationService = navigationService;
+        this.userService = userService;
+        this.planService = planService;
+        this.translate = translate;
+        this.navigatorService = navigatorService;
+        this.router = router;
+        this.lotIndexDetails = -1;
+        this.updatedZone = new EventEmitter();
+        this.isEditingZone = false;
+        this.carouselIsVisible = false;
+        this.planIsVisible = false;
+        this.loadingPlan = false;
+        this.menuItems = [];
+        this.isMuseumVisit = false;
+        this.isMuseumModule = false;
+        this.floorZones = [];
+        this.zonesMap = new Map();
+        this.floorDetails = -1;
+        this.defaultShowing = false;
+        this.isAddingAudioTrack = false;
+        this.destroy$ = new Subject();
+        // listen to the change of location via navigation bar dropdown
+        this.navigatorService.locationIDChange
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((spaceID) => {
+            this.router.navigate(["dashboard/localisation", spaceID, "zones"]).catch(e => console.log(e.message));
+        });
+        this.route.params.subscribe((params) => {
+            this.spaceID = params.id;
+            this.resetZones().catch(e => console.log(e.message));
+        });
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.isMuseumModule = this.userService.getSpModule() === SpModule.MUSEUM;
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    setupMenuItems() {
+        this.menuItems = [
+            { label: "Locations", url: "/localisation" },
+            {
+                label: this.currentSpace.name,
+                url: `/localisation/${this.spaceID}`,
+            },
+            {
+                label: "Zones",
+                url: `/localisation/${this.currentSpace.id}/zones`,
+            },
+        ];
+    }
+    onGoBack() {
+        this.editCompleted(null);
+    }
+    ngOnChanges() {
+        this.resetZones().catch(e => console.log(e.message));
+    }
+    resetZones() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.isMuseumVisit = false;
+            this.currentSpace = yield this.spaceService.getSpace(this.spaceID);
+            this.setupMenuItems();
+            this.allZones = yield this.zoneService.getZonesBySpace(this.spaceID);
+            this.defaultZone = this.allZones.find((zone) => zone.layer && zone.layer.name === "BUILDING" && zone.sweepIDs);
+            this.floorZones = this.allZones.filter((zone) => zone.layer && zone.layer.name === "FLOOR");
+            // sort alphabetically
+            this.floorZones.sort((a, b) => a.name.localeCompare(b.name));
+            // we add only children zones that are not Floors
+            if (!!this.defaultZone) {
+                this.zonesMap.set(this.defaultZone.id, this.allZones.filter((zone) => zone.parentID === this.defaultZone.id && !this.floorZones.includes(zone)));
+            }
+            for (const floor of this.floorZones) {
+                const zonesForFloor = this.allZones.filter((zone) => zone.parentID === floor.id);
+                this.zonesMap.set(floor.id, zonesForFloor.sort((a, b) => a.name.localeCompare(b.name)));
+            }
+            this.resetNavigations();
+            this.images360 = yield this.visitService.loadImagesForSpace(this.currentSpace);
+            this.plans = yield this.planService.getPlansWithZonesForSpace(this.spaceID);
+            this.plans = this.plans.filter((plan) => plan.isCurrentForZone);
+            this.onPlansLoaded().catch(e => console.log(e.message));
+        });
+    }
+    resetNavigations() {
+        this.navigations = [];
+        const zonesWithSweeps = this.allZones.filter((zone) => zone.sweepIDs);
+        this.navigations = [
+            ...new Set(zonesWithSweeps.flatMap((zone) => zone.sweepIDs)),
+        ];
+    }
+    onPlansLoaded() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.planIsVisible && this.currentZone) {
+                this.preparePlan().catch(e => console.log(e.message));
+            }
+        });
+    }
+    /**
+     * onToggleDetail folds/unfolds details for a zone
+     * @param index
+     * @param zone
+     */
+    onToggleDetail(index, zone) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.lotIndexDetails = index === this.lotIndexDetails ? -1 : index;
+            if (this.lotIndexDetails === -1) {
+                this.currentZone = null;
+                this.planIsVisible = false;
+                return;
+            }
+            this.currentZone = zone;
+            this.planIsVisible = true;
+            if (!this.plans) {
+                return; // wait until the plans are set
+            }
+            if (this.loadingPlan) {
+                // another plan is already loading
+                yield wait(1000);
+            }
+            this.preparePlan().catch(e => console.log(e.message));
+        });
+    }
+    onToggleDetailFloor(index, floor) {
+        this.defaultShowing = false;
+        this.floorDetails = index === this.floorDetails ? -1 : index;
+        if (this.floorDetails === -1) {
+            this.currentZone = null;
+            this.planIsVisible = false;
+            return;
+        }
+        this.currentZone = floor;
+        this.planIsVisible = true;
+        if (!this.plans) {
+            console.log("plans not ready");
+            return; // wait until the plans are set
+        }
+        this.preparePlan().catch(e => console.log(e.message));
+    }
+    onToggleDefaultZone() {
+        this.defaultShowing = !this.defaultShowing;
+        this.currentZone = this.defaultShowing ? this.defaultZone : null;
+    }
+    preparePlan() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.loadingPlan = true;
+            this.currentPlan = null;
+            if (this.currentZone.virtual) {
+                this.currentPlan = null;
+                this.loadingPlan = false;
+                return;
+            }
+            this.currentPlan = yield this.planService.getCalibratedPlanForZone(this.currentZone);
+            if (this.currentPlan) {
+                const scans = yield this.navigationService.getNavigationsForZone(this.currentZone);
+                yield this.showScanPointsOnPlan(scans);
+            }
+            this.loadingPlan = false;
+        });
+    }
+    toggleCarousel() {
+        this.carouselIsVisible = true;
+    }
+    onEdit(zone) {
+        this.zoneForEdit = zone;
+        if (this.zoneForEdit.layer && this.zoneForEdit.layer.name === "AUDIO") {
+            this.isAddingAudioTrack = true;
+        }
+        else {
+            this.isEditingZone = true;
+        }
+        this.menuItems.push({
+            label: `${zone.name}`,
+        });
+    }
+    onAddLot() {
+        this.isMuseumVisit = false;
+        this.isEditingZone = true;
+        this.menuItems.push({
+            label: "New",
+        });
+    }
+    onAddMuseumZone() {
+        this.isMuseumVisit = true;
+        this.isEditingZone = true;
+        this.menuItems.push({
+            label: "New Museum Itinerary",
+        });
+    }
+    onAddAudioZone(parentZone) {
+        this.parentZoneForAudio = parentZone;
+        this.isAddingAudioTrack = true;
+        this.menuItems.push({
+            label: parentZone.name,
+        });
+        this.menuItems.push({
+            label: "add-audio.add",
+        });
+    }
+    onDelete(zone) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const message = this.translate.instant("confirm.deleteZone");
+            // eslint-disable-next-line no-alert
+            if (window.confirm(message)) {
+                const childrenZones = yield this.zoneService.getZonesByParentZone(zone.id);
+                yield Promise.all(childrenZones.map((childZone) => __awaiter(this, void 0, void 0, function* () {
+                    yield this.zoneService.deleteZone(childZone.id);
+                    this.allZones.splice(this.allZones.indexOf(childZone), 1);
+                })));
+                yield this.zoneService.deleteZone(zone.id);
+                this.allZones.splice(this.allZones.indexOf(zone), 1);
+                // remove current zone from its parent list
+                if (zone.parentID && Array.from(this.zonesMap.keys()).includes(zone.parentID)) {
+                    const zonesForParent = this.zonesMap.get(zone.parentID);
+                    zonesForParent.splice(zonesForParent.indexOf(zone), 1);
+                    this.zonesMap.set(zone.parentID, zonesForParent);
+                }
+                // we send update of location in order to force update of list of zones in nav bar
+                this.navigatorService.locationIDChange.next(this.spaceID);
+            }
+        });
+    }
+    editCompleted(event) {
+        this.lotIndexDetails = -1;
+        this.currentPlan = null;
+        this.isEditingZone = false;
+        this.isAddingAudioTrack = false;
+        this.zoneForEdit = null;
+        this.planIsVisible = false;
+        this.carouselIsVisible = false;
+        this.setupMenuItems();
+        if (event) {
+            this.resetZones().catch(e => console.log(e.message));
+            // we send update of location in order to force update of list of zones in nav bar
+            this.navigatorService.locationIDChange.next(this.spaceID);
+        }
+    }
+    showScanPointsOnPlan(navigations) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.currentPlan) {
+                const divPlan = document.querySelector("#planDiv");
+                yield showScanPointsOnPlanInDiv(this.currentPlan, divPlan, navigations);
+                panzoom(divPlan, {
+                    bounds: true,
+                    boundsPadding: 0,
+                    maxZoom: 3.5,
+                });
+            }
+        });
+    }
+}
+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 }, { token: i2.NavigatorService }, { token: i1.Router }], 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\">\n  <div class=\"m-3\">\n    <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n  </div>\n  <div class=\"row\" *ngIf=\"!isEditingZone && !isAddingAudioTrack\">\n    <div class=\"col-md-6\">\n      <ul class=\"list-group list-group-flush\">\n        <li class=\"list-group-item default-zone-line-item\">\n          <div class=\"d-flex justify-content-between align-items-center zone-name\" *ngIf=\"defaultZone\">\n            {{defaultZone.name}}\n            <div class=\"default-zone-label\">{{ \"whole space\" | translate }}</div>\n            <lib-chevron [conditionShowing]=\"defaultShowing\" (click)=\"onToggleDefaultZone()\"></lib-chevron>\n          </div>\n          <div *ngIf=\"defaultShowing\">\n            <ul class=\"list-group list-group-flush\">\n              <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}:\n                {{defaultZone.layer ? defaultZone.layer.name : \"No type\" | translate}} </li>\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"defaultZone.surface\">\n                {{'Surface' | translate}}, m<sup>2</sup>: {{defaultZone.surface }}\n              </li>\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"!defaultZone.virtual\">{{'Scan Points' | translate}}:\n                {{defaultZone.sweepIDs ? defaultZone.sweepIDs.length : \"No scan points\" | translate}} </li>\n            </ul>\n            <div *ngFor=\"let pair of zonesMap | keyvalue\">\n              <div *ngIf=\"pair.key == defaultZone.id\">\n                <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\n                <ul class=\"list-group list-group-flush\">\n                  <li class=\"list-group-item list-group-flush list-group-item-action\"\n                    *ngFor=\"let lot of pair.value; index as zoneIndex\">\n                    <div class=\"d-flex justify-content-between align-items-center zone-name\">\n                      {{lot.name}}\n                      <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\n                      <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\"\n                        (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\n\n                    </div>\n                    <div *ngIf=\"zoneIndex==lotIndexDetails\">\n                      <ul class=\"list-group list-group-flush\">\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\n                          translate}}: {{lot.layer ? lot.layer.name :\n                          \"No type\" | translate}} </li>\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">\n                          {{'Surface' | translate}},m<sup>2</sup>: {{lot.surface }}\n                        </li>\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\n                          {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\n                          {{'Zone not visible in 3D visit' | translate}}</li>\n                      </ul>\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\n                        (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\n                      <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\n                        *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\n                        (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\n                    </div>\n                  </li>\n                </ul>\n\n              </div>\n            </div>\n          </div>\n        </li>\n\n        <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\n          <div class=\"d-flex justify-content-between align-items-center zone-name\">\n            {{floor.name}}\n            <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\n            <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\n            <lib-chevron [conditionShowing]=\"index==floorDetails\"\n              (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\n          </div>\n          <div *ngIf=\"index==floorDetails\">\n            <ul class=\"list-group list-group-flush\">\n              <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\n                floor.layer.name :\n                \"No type\" | translate}} </li>\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\n                {{floor.surface }}\n              </li>\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\n                {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\n                translate}}</li>\n            </ul>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\n              translate}}</button>\n\n            <!-- List of children zones -->\n\n            <div *ngFor=\"let pair of zonesMap | keyvalue\">\n              <div *ngIf=\"pair.key == floor.id\">\n                <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\n                <ul class=\"list-group list-group-flush\">\n                  <li class=\"list-group-item list-group-flush list-group-item-action\"\n                    *ngFor=\"let lot of pair.value; index as zoneIndex\">\n                    <div class=\"d-flex justify-content-between align-items-center zone-name\">\n                      <div><span *ngIf=\"lot.code_ref\">{{lot.code_ref}}_</span>{{lot.name}}</div>\n                      <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\n                      <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\"\n                        (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\n\n                    </div>\n                    <div *ngIf=\"zoneIndex==lotIndexDetails\">\n                      <ul class=\"list-group list-group-flush\">\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\n                          translate}}: {{lot.layer ? lot.layer.name :\n                          \"No type\" | translate}} </li>\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\n                          m<sup>2</sup>:\n                          {{lot.surface }}\n                        </li>\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\n                          {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual && lot.isMuseumVisitZone\">\n                          {{'Scan Points with audio' | translate}}: {{ lot | countAudioSweeps | async}} </li>\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\n                          {{'Zone not visible in 3D visit' | translate}}</li>  dist\n                      </ul>\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\n                        (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\n                      <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\n                        *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\n                        (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\n                    </div>\n                  </li>\n                </ul>\n\n              </div>\n            </div>\n          </div>\n        </li>\n      </ul>\n\n      <div>\n        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\n          translate}}</button>\n        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\" *ngIf=\"isMuseumModule\">\n          {{'Add museum itinerary' | translate}}</button>\n      </div>\n    </div>\n    <div class=\"col-md-6\" *ngIf=\"planIsVisible\">\n      <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\n        <div class=\"spinner-border\" role=\"status\">\n          <span class=\"visually-hidden\">Loading...</span>\n        </div>\n      </div>\n      <div class=\"row\" style=\"overflow: hidden; flex-direction: column;\">\n        <div *ngIf=\"currentPlan\">\n          <lib-plan-legend [isAudioZone]=\"false\"></lib-plan-legend>\n          <div class=\"planContainer\">\n            <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\"></div>\n          </div>\n        </div>\n\n        <div *ngIf=\"!currentPlan && plans && !loadingPlan && currentZone\">\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentZone.virtual && !currentZone.isMultipleFloorZone\">\n            {{ 'Plan is not calibrated' | translate}}\n          </div>\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.virtual\">\n            {{ 'No scan points chosen' | translate}}\n          </div>\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.isMultipleFloorZone\">\n            {{ 'The zone is on several floors' | translate}}\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n  <div class=\"mb-3\" *ngIf=\"isEditingZone\">\n    <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\n      [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\"\n      [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\n  </div>\n  <div class=\"mb-3\" *ngIf=\"isAddingAudioTrack\">\n    <lib-add-audio-zone [spaceID]=\"spaceID\" [defaultZone]=\"defaultZone\" [parentZone]=\"parentZoneForAudio\"\n      [zones]=\"allZones\" [currentAudioZone]=\"zoneForEdit\" (updatedZone)=\"editCompleted($event)\"></lib-add-audio-zone>\n  </div>\n</div>", 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}.planContainer{overflow:hidden;border-radius:6px;background-color:var(--smarterplan-secondary);height:500px}button{min-width:80px}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }, { type: PlanLegendComponent, selector: "lib-plan-legend", inputs: ["isAudioZone"] }, { type: AddZoneComponent, selector: "lib-add-zone", inputs: ["zoneEdit", "spaceID", "images360", "navigationIDs", "zones", "newZoneDataFromEditor", "chosenPlan", "isMuseumVisit", "defaultZone"], outputs: ["updatedZone"] }, { type: AddAudioZoneComponent, selector: "lib-add-audio-zone", inputs: ["spaceID", "defaultZone", "zones", "parentZone", "currentAudioZone"], outputs: ["updatedZone"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3.TranslatePipe, "keyvalue": i6.KeyValuePipe, "async": i6.AsyncPipe, "countAudioSweeps": CountAudioSweepsPipe } });
+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\">\n  <div class=\"m-3\">\n    <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n  </div>\n  <div class=\"row\" *ngIf=\"!isEditingZone && !isAddingAudioTrack\">\n    <div class=\"col-md-6\">\n      <ul class=\"list-group list-group-flush\">\n        <li class=\"list-group-item default-zone-line-item\">\n          <div class=\"d-flex justify-content-between align-items-center zone-name\" *ngIf=\"defaultZone\">\n            {{defaultZone.name}}\n            <div class=\"default-zone-label\">{{ \"whole space\" | translate }}</div>\n            <lib-chevron [conditionShowing]=\"defaultShowing\" (click)=\"onToggleDefaultZone()\"></lib-chevron>\n          </div>\n          <div *ngIf=\"defaultShowing\">\n            <ul class=\"list-group list-group-flush\">\n              <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}:\n                {{defaultZone.layer ? defaultZone.layer.name : \"No type\" | translate}} </li>\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"defaultZone.surface\">\n                {{'Surface' | translate}}, m<sup>2</sup>: {{defaultZone.surface }}\n              </li>\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"!defaultZone.virtual\">{{'Scan Points' | translate}}:\n                {{defaultZone.sweepIDs ? defaultZone.sweepIDs.length : \"No scan points\" | translate}} </li>\n            </ul>\n            <div *ngFor=\"let pair of zonesMap | keyvalue\">\n              <div *ngIf=\"pair.key == defaultZone.id\">\n                <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\n                <ul class=\"list-group list-group-flush\">\n                  <li class=\"list-group-item list-group-flush list-group-item-action\"\n                    *ngFor=\"let lot of pair.value; index as zoneIndex\">\n                    <div class=\"d-flex justify-content-between align-items-center zone-name\">\n                      {{lot.name}}\n                      <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\n                      <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\"\n                        (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\n\n                    </div>\n                    <div *ngIf=\"zoneIndex==lotIndexDetails\">\n                      <ul class=\"list-group list-group-flush\">\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\n                          translate}}: {{lot.layer ? lot.layer.name :\n                          \"No type\" | translate}} </li>\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">\n                          {{'Surface' | translate}},m<sup>2</sup>: {{lot.surface }}\n                        </li>\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\n                          {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\n                          {{'Zone not visible in 3D visit' | translate}}</li>\n                      </ul>\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\n                        (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\n                      <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\n                        *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\n                        (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\n                    </div>\n                  </li>\n                </ul>\n\n              </div>\n            </div>\n          </div>\n        </li>\n\n        <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\n          <div class=\"d-flex justify-content-between align-items-center zone-name\">\n            {{floor.name}}\n            <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\n            <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\n            <lib-chevron [conditionShowing]=\"index==floorDetails\"\n              (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\n          </div>\n          <div *ngIf=\"index==floorDetails\">\n            <ul class=\"list-group list-group-flush\">\n              <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\n                floor.layer.name :\n                \"No type\" | translate}} </li>\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\n                {{floor.surface }}\n              </li>\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\n                {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\n                translate}}</li>\n            </ul>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\n              translate}}</button>\n\n            <!-- List of children zones -->\n\n            <div *ngFor=\"let pair of zonesMap | keyvalue\">\n              <div *ngIf=\"pair.key == floor.id\">\n                <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\n                <ul class=\"list-group list-group-flush\">\n                  <li class=\"list-group-item list-group-flush list-group-item-action\"\n                    *ngFor=\"let lot of pair.value; index as zoneIndex\">\n                    <div class=\"d-flex justify-content-between align-items-center zone-name\">\n                      <div><span *ngIf=\"lot.code_ref\">{{lot.code_ref}}_</span>{{lot.name}}</div>\n                      <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\n                      <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\"\n                        (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\n\n                    </div>\n                    <div *ngIf=\"zoneIndex==lotIndexDetails\">\n                      <ul class=\"list-group list-group-flush\">\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\n                          translate}}: {{lot.layer ? lot.layer.name :\n                          \"No type\" | translate}} </li>\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\n                          m<sup>2</sup>:\n                          {{lot.surface }}\n                        </li>\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\n                          {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual && lot.isMuseumVisitZone\">\n                          {{'Scan Points with audio' | translate}}: {{ lot | countAudioSweeps | async}} </li>\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\n                          {{'Zone not visible in 3D visit' | translate}}</li>  dist\n                      </ul>\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\n                        (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\n                      <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\n                        *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\n                        (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\n                    </div>\n                  </li>\n                </ul>\n\n              </div>\n            </div>\n          </div>\n        </li>\n      </ul>\n\n      <div>\n        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\n          translate}}</button>\n        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\" *ngIf=\"isMuseumModule\">\n          {{'Add museum itinerary' | translate}}</button>\n      </div>\n    </div>\n    <div class=\"col-md-6\" *ngIf=\"planIsVisible\">\n      <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\n        <div class=\"spinner-border\" role=\"status\">\n          <span class=\"visually-hidden\">Loading...</span>\n        </div>\n      </div>\n      <div class=\"row\" style=\"overflow: hidden; flex-direction: column;\">\n        <div *ngIf=\"currentPlan\">\n          <lib-plan-legend [isAudioZone]=\"false\"></lib-plan-legend>\n          <div class=\"planContainer\">\n            <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\"></div>\n          </div>\n        </div>\n\n        <div *ngIf=\"!currentPlan && plans && !loadingPlan && currentZone\">\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentZone.virtual && !currentZone.isMultipleFloorZone\">\n            {{ 'Plan is not calibrated' | translate}}\n          </div>\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.virtual\">\n            {{ 'No scan points chosen' | translate}}\n          </div>\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.isMultipleFloorZone\">\n            {{ 'The zone is on several floors' | translate}}\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n  <div class=\"mb-3\" *ngIf=\"isEditingZone\">\n    <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\n      [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\"\n      [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\n  </div>\n  <div class=\"mb-3\" *ngIf=\"isAddingAudioTrack\">\n    <lib-add-audio-zone [spaceID]=\"spaceID\" [defaultZone]=\"defaultZone\" [parentZone]=\"parentZoneForAudio\"\n      [zones]=\"allZones\" [currentAudioZone]=\"zoneForEdit\" (updatedZone)=\"editCompleted($event)\"></lib-add-audio-zone>\n  </div>\n</div>", 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}.planContainer{overflow:hidden;border-radius:6px;background-color:var(--smarterplan-secondary);height:500px}button{min-width:80px}\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 }, { type: i2.NavigatorService }, { type: i1.Router }]; }, propDecorators: { updatedZone: [{
+                type: Output
+            }] } });
+
+class ImagesComponent {
+    constructor(route, spaceService, visitService, nodeService, navigatorService, router) {
+        this.route = route;
+        this.spaceService = spaceService;
+        this.visitService = visitService;
+        this.nodeService = nodeService;
+        this.navigatorService = navigatorService;
+        this.router = router;
+        this.loading = false;
+        this.menuItems = [];
+        this.destroy$ = new Subject();
+        this.navigatorService.locationIDChange
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((spaceID) => {
+            this.router.navigate(["dashboard/localisation", spaceID, "images"]);
+        });
+        this.route.params.subscribe((params) => {
+            this.spaceID = params.id;
+            ;
+            this.loadImages();
+        });
+    }
+    ngOnInit() {
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    setupMenuItems() {
+        this.menuItems = [
+            { label: "Locations", url: "/localisation" },
+            {
+                label: this.currentSpace.name,
+                url: `/localisation/${this.spaceID}`,
+            },
+            { label: "360° Images" },
+        ];
+        if (this.currentVisit) {
+            this.menuItems.push({ label: this.currentVisit.name });
+        }
+    }
+    onGoBack() {
+        this.currentVisit = null;
+        this.currentImages = null;
+        this.setupMenuItems();
+    }
+    loadImages() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.loading = true;
+            this.currentSpace = yield this.spaceService.getSpace(this.spaceID);
+            this.setupMenuItems();
+            this.images = yield this.visitService.loadImagesForSpace(this.currentSpace);
+            if (this.currentSpace.visits.length === 1) {
+                this.setVisit(this.currentSpace.visits[0]);
+            }
+            this.loading = false;
+        });
+    }
+    setVisit(visit) {
+        this.currentVisit = visit;
+        this.currentImages = this.images.filter((im) => {
+            return im.visit === visit;
+        });
+        this.setupMenuItems();
+    }
+    setCurrentScan(id) {
+        this.currentScanID = id;
+    }
+    onInventoryClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { node } = this.currentVisit;
+            const { filename } = this.currentImages[this.currentScanID]; // 110ee452_sweep.jpeg
+            // check if node has already errors of inventory
+            const missingFilesErrors = [
+                InventoryStatus.ERROR_FILE_JSON_NOT_EXIST,
+                InventoryStatus.ERROR_FILE_MODEL_NOT_EXIST,
+                InventoryStatus.ERROR_FILE_OBJ_NOT_EXIST,
+            ];
+            if (node.inventoryStatus &&
+                missingFilesErrors.includes(node.inventoryStatus)) {
+                alert("Files missing for this visit's inventory. Contact your administrator.");
+            }
+            else {
+                yield this.nodeService.updateNode({
+                    id: node.id,
+                    inventoryStatus: InventoryStatus.TO_RUN_ONE_IMAGE,
+                    navigationForInventory: filename.split("_")[0],
+                });
+                alert("Automatic AI Inventory started! Detected equipments will appear soon in the visit.");
+            }
+        });
+    }
+}
+ImagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ImagesComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.SpaceService }, { token: i2.VisitService }, { token: i2.NodeService }, { token: i2.NavigatorService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+ImagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ImagesComponent, selector: "lib-images", ngImport: i0, template: "<div class=\"container-fluid dashboard-tab col-sm-10 mb-3\" *ngIf=\"currentSpace\" >\n    <div class=\"m-3\">\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n    </div>\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border\" role=\"status\">\n        <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\n      </div>\n    </div>\n    <div ngbDropdown class=\"d-inline-block\" *ngIf=\"currentSpace.visits && currentSpace.visits.length > 0\">\n      <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" *ngIf=\"!currentVisit\"\n        ngbDropdownToggle>{{'Choose 3D visit' | translate}}</button>\n      <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n        <button ngbDropdownItem *ngFor=\"let visit of currentSpace.visits\" (click)=\"setVisit(visit)\"> {{ visit.name }}\n        </button>\n      </div>\n    </div>\n    <h3 *ngIf=\"currentVisit\">{{ currentVisit.name }}</h3>\n    <div class=\"mt-3\" *ngIf=\"currentVisit && currentImages.length == 0 && !loading\">\n      <h4>{{'No imported images' | translate }}</h4>\n      <p>{{'For import: go Virtual Visits => Import Images' | translate}}</p>\n    </div>\n    <button *ngIf=\"currentVisit && currentImages.length > 0 && !loading\"\n      class=\"btn btn-outline-primary rounded-pill no-lowercase mb-2\" (click)=\"onInventoryClick()\">\n      {{'Run AI inventory on this image' | translate}}</button>\n    <lib-carousel [images]=\"currentImages\" *ngIf=\"currentImages\" (currentScan)=\"setCurrentScan($event)\"></lib-carousel>\n  </div>", styles: [""], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ImagesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-images', template: "<div class=\"container-fluid dashboard-tab col-sm-10 mb-3\" *ngIf=\"currentSpace\" >\n    <div class=\"m-3\">\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n    </div>\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border\" role=\"status\">\n        <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\n      </div>\n    </div>\n    <div ngbDropdown class=\"d-inline-block\" *ngIf=\"currentSpace.visits && currentSpace.visits.length > 0\">\n      <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" *ngIf=\"!currentVisit\"\n        ngbDropdownToggle>{{'Choose 3D visit' | translate}}</button>\n      <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n        <button ngbDropdownItem *ngFor=\"let visit of currentSpace.visits\" (click)=\"setVisit(visit)\"> {{ visit.name }}\n        </button>\n      </div>\n    </div>\n    <h3 *ngIf=\"currentVisit\">{{ currentVisit.name }}</h3>\n    <div class=\"mt-3\" *ngIf=\"currentVisit && currentImages.length == 0 && !loading\">\n      <h4>{{'No imported images' | translate }}</h4>\n      <p>{{'For import: go Virtual Visits => Import Images' | translate}}</p>\n    </div>\n    <button *ngIf=\"currentVisit && currentImages.length > 0 && !loading\"\n      class=\"btn btn-outline-primary rounded-pill no-lowercase mb-2\" (click)=\"onInventoryClick()\">\n      {{'Run AI inventory on this image' | translate}}</button>\n    <lib-carousel [images]=\"currentImages\" *ngIf=\"currentImages\" (currentScan)=\"setCurrentScan($event)\"></lib-carousel>\n  </div>", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.SpaceService }, { type: i2.VisitService }, { type: i2.NodeService }, { type: i2.NavigatorService }, { type: i1.Router }]; } });
+
+class EditPlanComponent {
+    constructor(planService, route, router, modalService, zoneService, visitService, spaceService, translate, ngZone) {
+        this.planService = planService;
+        this.route = route;
+        this.router = router;
+        this.modalService = modalService;
+        this.zoneService = zoneService;
+        this.visitService = visitService;
+        this.spaceService = spaceService;
+        this.translate = translate;
+        this.ngZone = ngZone;
+        this.loading = false;
+        this.isNewZone = false;
+        /**
+         * Options for svgEditor
+         */
+        this.config = {
+            noStorageOnLoad: true,
+            forceStorage: true,
+            // imgPath: "/assets/editor/images/",
+            // extPath: "/assets/editor/extensions/",
+            // langPath: "/assets/editor/locale/",
+            // canvgPath: "/assets/editor/canvg/",
+            // jspdfPath: "/assets/editor/jspdf/",
+            // jGraduatePath: "/assets/editor/jgraduate/images/",
+            // extIconsPath: "/assets/editor/extensions/",
+            // stylesheets: [
+            //     "/assets/editor/jgraduate/css/jGraduate.css",
+            //     "/assets/editor/spinbtn/jQuery.SpinButton.css",
+            //     "/assets/editor/jgraduate/css/jPicker.css",
+            //     "/assets/editor/svg-editor.css",
+            // ],
+            dimensions: [10000, 10000],
+            showlayers: true,
+            noDefaultExtensions: true,
+            basePath: "/assets/editor/",
+            customExportImage: true,
+            extensions: [
+                "ext-connector",
+                // "ext-eyedropper",
+                // "ext-grid",
+                // "ext-markers",
+                // "ext-overview_window",
+                // "ext-spi-library",
+                // "ext-spi-icon",
+                "ext-sp-zone",
+                // "ext-arrows",
+                // "ext-sp-css",
+                // "ext-placemark",
+            ],
+        };
+        this.menuItems = [];
+        this.chosenPlan = this.planService.getChosenPlan();
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.editorUrl = "/assets/editor/main.html";
+            this.spaceID = this.route.snapshot.queryParams.spaceID;
+            this.currentSpace = yield this.spaceService.getSpace(this.spaceID);
+            this.setupMenuItems();
+            if (this.spaceID && !this.planService.getChosenPlan()) {
+                this.router.navigate([
+                    "/dashboard/localisation",
+                    this.spaceID,
+                    "plans",
+                ]);
+            }
+            else if (!this.spaceID && !this.planService.getChosenPlan()) {
+                this.router.navigate(["/dashboard/localisation"]);
+            }
+        });
+    }
+    setupMenuItems() {
+        this.menuItems = [
+            { label: "Locations", url: "/localisation" },
+            {
+                label: this.currentSpace.name,
+                url: `/localisation/${this.spaceID}`,
+            },
+            {
+                label: "Plans",
+                url: `/localisation/${this.currentSpace.id}/plans`,
+            },
+            {
+                label: "Edit",
+                url: `/localisation/${this.currentSpace.id}/plan-edit?spaceID=${this.currentSpace.id}`,
+            },
+        ];
+    }
+    switchAction(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (event.origin === window.location.origin) {
+                switch (event.data.message) {
+                    case "save":
+                        this.onSave(event.data.redirect);
+                        break;
+                    case "close":
+                        this.onCancel();
+                        break;
+                    case "new-zone":
+                        const modalReference = this.modalService.open(this.loadingModal);
+                        const svg = unescape(encodeURIComponent(this.svgEditor.svgCanvas.getSvgString()));
+                        const base64 = `data:image/svg+xml;base64,${window.btoa(svg)}`;
+                        const currentSpace = yield this.spaceService.getSpace(this.spaceID);
+                        this.images360 = yield this.visitService.loadImagesForSpace(currentSpace);
+                        this.editedPlan = Object.assign({}, this.chosenPlan);
+                        this.editedPlan.filepath = base64;
+                        this.newZoneData = event.data.zoneData;
+                        if (this.newZoneData.elements.length === 0) {
+                            modalReference.close();
+                            alert(this.translate.instant("edition.no-zone"));
+                            break;
+                        }
+                        this.zones = yield this.zoneService.getZonesBySpace(this.spaceID);
+                        // this.zones = sortAlphabeticallyOnName(this.zones);
+                        // console.log("zones", this.zones);
+                        // this.editedZone = this.zones.find(
+                        //     (z) => z.name === this.newZoneData.name,
+                        // );
+                        this.resetNavigations();
+                        modalReference.close();
+                        this.modalService.open(this.dialogZone);
+                        break;
+                    default:
+                        break;
+                }
+            }
+        });
+    }
+    resetNavigations() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.navigations = [];
+            const defaultZone = this.zones.find((zone) => !zone.parentID);
+            if (defaultZone.sweepIDs.length > 0) {
+                this.navigations = defaultZone.sweepIDs;
+            }
+        });
+    }
+    onLoad(svgEditor) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (svgEditor.contentWindow.SvgEditor) {
+                this.svgEditorIframe = svgEditor;
+                this.svgEditor = new svgEditor.contentWindow.SvgEditor();
+                yield this.svgEditor.init();
+                yield this.svgEditor.setConfig(this.config, {
+                    allowInitialUserOverride: true,
+                });
+                if (this.chosenPlan && this.chosenPlan.extension === "svg") {
+                    this.loadSvg();
+                }
+                if (this.chosenPlan && this.chosenPlan.extension === "pdf") {
+                    this.loadPdf();
+                }
+                if (!this.chosenPlan.calibration || !this.chosenPlan.isModified) {
+                    setTimeout(() => {
+                        this.svgEditorIframe.contentWindow.postMessage({ action: "disable-zone" }, "*");
+                    }, 1000);
+                }
+                this.svgEditor.svgCanvas.setMode('ext-panning');
+                this.svgEditor.bottomPanel.changeZoom(50);
+            }
+        });
+    }
+    onSave(redirect) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const imgBlob = yield new Blob([this.svgEditor.svgCanvas.getSvgString()], {
+                type: "image/svg+xml",
+            });
+            const [name] = this.chosenPlan.name.split(".");
+            const imgFile = new File([imgBlob], `${name}-edited.svg`, {
+                type: "image/svg+xml",
+                lastModified: Date.now(),
+            });
+            this.planService.setPlanFileCache(imgFile);
+            if (this.chosenPlan.isModified) {
+                this.ngZone.run(() => this.modalService.open(this.dialog));
+            }
+            else {
+                this.ngZone.run(() => this.router.navigate([
+                    "/dashboard/localisation",
+                    this.spaceID,
+                    "plans",
+                ]));
+            }
+        });
+    }
+    updateSvg() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const newUrl = yield this.planService.updatePlanFile();
+            yield this.planService.updatePlan({
+                id: this.chosenPlan.id,
+                annexe: newUrl,
+            });
+            this.planService.setPlanFileCache(null);
+            this.ngZone.run(() => this.router.navigate([
+                "/dashboard/localisation",
+                this.spaceID,
+                "plans",
+            ]));
+        });
+    }
+    newSvg() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.ngZone.run(() => this.router.navigate([
+                "/dashboard/localisation",
+                this.spaceID,
+                "plans",
+            ]));
+        });
+    }
+    onCancel() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (window.confirm(this.translate.instant("edition.cancel-alert"))) {
+                this.ngZone.run(() => this.router.navigate([
+                    "/dashboard/localisation",
+                    this.spaceID,
+                    "plans",
+                ]));
+                alert(this.translate.instant("edition.cancel"));
+            }
+        });
+    }
+    loadSvg() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const svgRequest = yield downloadFileAsObject(this.chosenPlan.annexe);
+            if (svgRequest) {
+                const svgBlob = yield svgRequest.Body;
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    this.svgEditor.loadFromDataURI(reader.result);
+                };
+                reader.readAsDataURL(svgBlob);
+            }
+        });
+    }
+    loadPdf() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.svgEditorIframe.contentWindow.postMessage({ action: "disable-zone" }, "*");
+            const canvas = document.querySelector("#canvas4pdf");
+            const context = canvas.getContext("2d");
+            const pdfjs = yield import('pdfjs-dist/build/pdf');
+            const pdfjsWorker = yield import('pdfjs-dist/build/pdf.worker.entry');
+            pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+            const pdf = yield getDocument(this.chosenPlan.filepath).promise;
+            const page = yield pdf.getPage(1);
+            const viewPortParameters = { scale: 1.5 };
+            const viewport = page.getViewport(viewPortParameters);
+            this.svgEditor.svgCanvas.setResolution(viewport.width, viewport.height);
+            canvas.height = viewport.height;
+            canvas.width = viewport.width;
+            const renderContext = {
+                canvasContext: context,
+                viewport,
+            };
+            const renderTask = page.render(renderContext).promise;
+            renderTask.then(() => {
+                const newImage = this.svgEditor.svgCanvas.addSVGElementFromJson({
+                    element: "image",
+                    attr: {
+                        x: 0,
+                        y: 0,
+                        width: viewport.width,
+                        height: viewport.height,
+                        id: this.svgEditor.svgCanvas.getNextId(),
+                        style: "pointer-events:inherit",
+                    },
+                });
+                this.svgEditor.svgCanvas.setHref(newImage, canvas.toDataURL("image/png"));
+                this.svgEditor.svgCanvas.renameCurrentLayer(this.translate.instant("edition.plan-base"));
+                this.svgEditor.svgCanvas.createLayer(this.translate.instant("edition.personalization"));
+            });
+        });
+    }
+    onLoadImg(img) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.svgEditorIframe.contentWindow.postMessage({ action: "disable-zone" }, "*");
+            const imgRequest = yield downloadFileAsObject(this.chosenPlan.annexe);
+            if (imgRequest) {
+                const imgBlob = yield imgRequest.Body;
+                const imgWidth = img.naturalWidth;
+                const imgHeight = img.naturalHeight;
+                // await this.svgEditor.setConfig({
+                //     dimensions: [imgWidth, imgHeight],
+                // });
+                this.svgEditor.svgCanvas.setResolution(imgWidth, imgHeight);
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    const newImage = this.svgEditor.svgCanvas.addSVGElementFromJson({
+                        element: "image",
+                        attr: {
+                            x: 0,
+                            y: 0,
+                            width: imgWidth,
+                            height: imgHeight,
+                            id: this.svgEditor.svgCanvas.getNextId(),
+                            style: "pointer-events:inherit",
+                        },
+                    });
+                    this.svgEditor.svgCanvas.setHref(newImage, reader.result);
+                    this.svgEditor.svgCanvas.renameCurrentLayer(this.translate.instant("edition.plan-base"));
+                    this.svgEditor.svgCanvas.createLayer(this.translate.instant("edition.personalization"));
+                };
+                reader.readAsDataURL(imgBlob);
+            }
+        });
+    }
+    onNewZone(event) {
+        this.isNewZone = false;
+        if (event) {
+            this.svgEditorIframe.contentWindow.postMessage({ action: "rename-layer", name: event }, "*");
+        }
+        else {
+            this.svgEditorIframe.contentWindow.postMessage({ action: "cancel-layer" }, "*");
+        }
+    }
+}
+EditPlanComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: EditPlanComponent, deps: [{ token: i2.PlanService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i7.NgbModal }, { token: i2.ZoneService }, { token: i2.VisitService }, { token: i2.SpaceService }, { token: i3.TranslateService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+EditPlanComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: EditPlanComponent, selector: "lib-edit-plan", host: { listeners: { "window:message": "switchAction($event)" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }, { propertyName: "dialogZone", first: true, predicate: ["dialogZone"], descendants: true }, { propertyName: "loadingModal", first: true, predicate: ["preparing"], descendants: true }], ngImport: i0, template: "<div class=\"row mt-3\">\n    <div class=\"col\">\n        <div class=\"m-3\">\n            <lib-tab-navigation [menuItems]='menuItems'></lib-tab-navigation>\n        </div>\n    </div>\n</div>\n<lib-add-zone *ngIf=\"isNewZone\" [images360]=\"images360\" [spaceID]=\"spaceID\" [navigationIDs]=\"navigations\"\n    [zoneEdit]=\"editedZone\" [zones]=\"zones\" (updatedZone)=\"onNewZone($event)\" [chosenPlan]=\"editedPlan\"\n    [newZoneDataFromEditor]=\"newZoneData\"></lib-add-zone>\n<iframe *ngIf=\"editorUrl\" #svgEditor [src]=\"editorUrl | safeUrl\" frameborder=\"0\"\n    style=\"height:100%;width:100%;min-height:550px;max-height:750px\" (load)=\"onLoad(svgEditor)\"></iframe>\n<!-- chosenPlan && -->\n<!-- ./../../../../../../assets/svgeditor/index.html -->\n\n<img #imgPng *ngIf=\"chosenPlan && chosenPlan.extension !== 'svg' && svgEditor\" [src]=\"chosenPlan.filepath\"\n    (load)=\"onLoadImg(imgPng)\" style=\"display: none;\">\n\n<canvas id=\"canvas4pdf\" style=\"display: none;\"></canvas>\n\n<ng-template #dialog let-modal>\n\n    <div class=\"modal-header\">\n        <h4 class=\"modal-title\">{{'Submit' | translate}}</h4>\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body\">\n        {{'save plan edited' | translate}}\n    </div>\n    <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"newSvg();modal.close('Close click')\">{{'Yes' |\n            translate}}</button>\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"updateSvg();modal.close('Close click')\">{{'No' |\n            translate}}</button>\n    </div>\n\n</ng-template>\n\n<ng-template #dialogZone let-modal>\n\n    <div class=\"modal-header\">\n        <h4 class=\"modal-title\">{{'Submit' | translate}}</h4>\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body\">\n        {{'confirm.new-zone-from-plan' | translate}}\n    </div>\n    <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-outline-dark\"\n            (click)=\"isNewZone = true;modal.close('Close click')\">{{'Validate' |\n            translate}}</button>\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"modal.close('Close click')\">{{'Cancel' |\n            translate}}</button>\n    </div>\n\n</ng-template>\n\n<ng-template #preparing let-modal>\n    <div class=\"modal-header\">\n        <h4 class=\"modal-title\">{{'Processing' | translate}}</h4>\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body\">\n        <div class=\"d-flex justify-content-center\">\n            <div class=\"spinner-border\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n            </div>\n        </div>\n    </div>\n\n</ng-template>", styles: ["app-add-zone{position:absolute;top:0;left:0;background-color:#fff;width:100%;height:100%;padding:30px}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: AddZoneComponent, selector: "lib-add-zone", inputs: ["zoneEdit", "spaceID", "images360", "navigationIDs", "zones", "newZoneDataFromEditor", "chosenPlan", "isMuseumVisit", "defaultZone"], outputs: ["updatedZone"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safeUrl": i2.SafeUrlPipe, "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: EditPlanComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-edit-plan', template: "<div class=\"row mt-3\">\n    <div class=\"col\">\n        <div class=\"m-3\">\n            <lib-tab-navigation [menuItems]='menuItems'></lib-tab-navigation>\n        </div>\n    </div>\n</div>\n<lib-add-zone *ngIf=\"isNewZone\" [images360]=\"images360\" [spaceID]=\"spaceID\" [navigationIDs]=\"navigations\"\n    [zoneEdit]=\"editedZone\" [zones]=\"zones\" (updatedZone)=\"onNewZone($event)\" [chosenPlan]=\"editedPlan\"\n    [newZoneDataFromEditor]=\"newZoneData\"></lib-add-zone>\n<iframe *ngIf=\"editorUrl\" #svgEditor [src]=\"editorUrl | safeUrl\" frameborder=\"0\"\n    style=\"height:100%;width:100%;min-height:550px;max-height:750px\" (load)=\"onLoad(svgEditor)\"></iframe>\n<!-- chosenPlan && -->\n<!-- ./../../../../../../assets/svgeditor/index.html -->\n\n<img #imgPng *ngIf=\"chosenPlan && chosenPlan.extension !== 'svg' && svgEditor\" [src]=\"chosenPlan.filepath\"\n    (load)=\"onLoadImg(imgPng)\" style=\"display: none;\">\n\n<canvas id=\"canvas4pdf\" style=\"display: none;\"></canvas>\n\n<ng-template #dialog let-modal>\n\n    <div class=\"modal-header\">\n        <h4 class=\"modal-title\">{{'Submit' | translate}}</h4>\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body\">\n        {{'save plan edited' | translate}}\n    </div>\n    <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"newSvg();modal.close('Close click')\">{{'Yes' |\n            translate}}</button>\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"updateSvg();modal.close('Close click')\">{{'No' |\n            translate}}</button>\n    </div>\n\n</ng-template>\n\n<ng-template #dialogZone let-modal>\n\n    <div class=\"modal-header\">\n        <h4 class=\"modal-title\">{{'Submit' | translate}}</h4>\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body\">\n        {{'confirm.new-zone-from-plan' | translate}}\n    </div>\n    <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-outline-dark\"\n            (click)=\"isNewZone = true;modal.close('Close click')\">{{'Validate' |\n            translate}}</button>\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"modal.close('Close click')\">{{'Cancel' |\n            translate}}</button>\n    </div>\n\n</ng-template>\n\n<ng-template #preparing let-modal>\n    <div class=\"modal-header\">\n        <h4 class=\"modal-title\">{{'Processing' | translate}}</h4>\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body\">\n        <div class=\"d-flex justify-content-center\">\n            <div class=\"spinner-border\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n            </div>\n        </div>\n    </div>\n\n</ng-template>", styles: ["app-add-zone{position:absolute;top:0;left:0;background-color:#fff;width:100%;height:100%;padding:30px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.PlanService }, { type: i1.ActivatedRoute }, { type: i1.Router }, { type: i7.NgbModal }, { type: i2.ZoneService }, { type: i2.VisitService }, { type: i2.SpaceService }, { type: i3.TranslateService }, { type: i0.NgZone }]; }, propDecorators: { dialog: [{
+                type: ViewChild,
+                args: ["dialog"]
+            }], dialogZone: [{
+                type: ViewChild,
+                args: ["dialogZone"]
+            }], loadingModal: [{
+                type: ViewChild,
+                args: ["preparing"]
+            }], switchAction: [{
+                type: HostListener,
+                args: ["window:message", ["$event"]]
+            }] } });
+
+const routes = [
+    {
+        path: "",
+        component: LocationsComponent,
+    },
+    {
+        path: ":id",
+        children: [
+            { path: "", component: DetailLocationComponent },
+            { path: "zones", component: ZonesComponent },
+            { path: "visits", component: VisitsComponent },
+            { path: "plans", component: PlansComponent },
+            {
+                path: "plan-calibration",
+                component: CalibrationComponent,
+            },
+            {
+                path: "plan-edit",
+                component: EditPlanComponent,
+            },
+            { path: "images", component: ImagesComponent },
+        ],
+    },
+];
+class LocationsRoutingModule {
+}
+LocationsRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocationsRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LocationsRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocationsRoutingModule, imports: [i1.RouterModule], exports: [RouterModule] });
+LocationsRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocationsRoutingModule, imports: [[RouterModule.forChild(routes)], RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocationsRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+class NgxSmarterplanLocationsModule {
+}
+NgxSmarterplanLocationsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanLocationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxSmarterplanLocationsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanLocationsModule, declarations: [LocationsComponent,
+        DetailLocationComponent,
+        CalibrationComponent,
+        PlansComponent,
+        VisitsComponent,
+        ZonesComponent,
+        ImagesComponent,
+        EditPlanComponent,
+        TabNavigationComponent,
+        MapComponent,
+        MapPopupComponent,
+        FormLocationComponent,
+        ChevronComponent,
+        AddZoneComponent,
+        SelectionComponent,
+        CarouselComponent,
+        SweepPlanSelectionComponent,
+        AddAudioZoneComponent,
+        RadioButtonComponent,
+        PlanLegendComponent,
+        CountAudioSweepsPipe], imports: [PdfViewerModule,
+        ClipboardModule,
+        NgbModule,
+        NgbAlertModule,
+        CommonModule, i3.TranslateModule, LeafletModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgxSmarterplanCoreModule,
+        LocationsRoutingModule], exports: [MapComponent, TabNavigationComponent] });
+NgxSmarterplanLocationsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanLocationsModule, imports: [[
+            PdfViewerModule,
+            ClipboardModule,
+            NgbModule,
+            NgbAlertModule,
+            CommonModule,
+            TranslateModule.forChild({
+                extend: true
+            }),
+            LeafletModule,
+            FormsModule,
+            ReactiveFormsModule,
+            NgxSmarterplanCoreModule,
+            LocationsRoutingModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanLocationsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        LocationsComponent,
+                        DetailLocationComponent,
+                        CalibrationComponent,
+                        PlansComponent,
+                        VisitsComponent,
+                        ZonesComponent,
+                        ImagesComponent,
+                        EditPlanComponent,
+                        TabNavigationComponent,
+                        MapComponent,
+                        MapPopupComponent,
+                        FormLocationComponent,
+                        ChevronComponent,
+                        AddZoneComponent,
+                        SelectionComponent,
+                        CarouselComponent,
+                        SweepPlanSelectionComponent,
+                        AddAudioZoneComponent,
+                        RadioButtonComponent,
+                        PlanLegendComponent,
+                        CountAudioSweepsPipe,
+                    ],
+                    imports: [
+                        PdfViewerModule,
+                        ClipboardModule,
+                        NgbModule,
+                        NgbAlertModule,
+                        CommonModule,
+                        TranslateModule.forChild({
+                            extend: true
+                        }),
+                        LeafletModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgxSmarterplanCoreModule,
+                        LocationsRoutingModule,
+                    ],
+                    exports: [MapComponent, TabNavigationComponent]
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngx-smarterplan-locations
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MapComponent, NgxSmarterplanLocationsModule, NgxSmarterplanLocationsService, TabNavigationComponent };
+//# sourceMappingURL=smarterplan-ngx-smarterplan-locations.mjs.map