@smarterplan/ngx-smarterplan-locations 0.3.4 → 0.4.2

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

@@ -1,3983 +0,0 @@
-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 i4$1 from '@ng-bootstrap/ng-bootstrap';
-import { ModalDismissReasons, NgbModule, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i4 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 { Subject, takeUntil } from 'rxjs';
-import * as i4$2 from '@angular/cdk/clipboard';
-import { ClipboardModule } from '@angular/cdk/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: "15.2.10", ngImport: i0, type: NgxSmarterplanLocationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NgxSmarterplanLocationsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgxSmarterplanLocationsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-TabNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: { menuItems: "menuItems" }, outputs: { onGoBack: "onGoBack" }, ngImport: i0, template: "<span class=\"menu\">\r\n    <span *ngFor=\"let item of menuItems; let index = index;\">\r\n        <span class=\"item\" [ngClass]=\"{'current':index === menuItems.length - 1}\"\r\n            (click)=\"onClick(item.url,item.back, index)\">{{item.label | translate}}</span> <span\r\n            *ngIf=\"index !== menuItems.length - 1\" class=\"separator\">></span>\r\n    </span>\r\n</span>\r\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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabNavigationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-tab-navigation', template: "<span class=\"menu\">\r\n    <span *ngFor=\"let item of menuItems; let index = index;\">\r\n        <span class=\"item\" [ngClass]=\"{'current':index === menuItems.length - 1}\"\r\n            (click)=\"onClick(item.url,item.back, index)\">{{item.label | translate}}</span> <span\r\n            *ngIf=\"index !== menuItems.length - 1\" class=\"separator\">></span>\r\n    </span>\r\n</span>\r\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: "15.2.10", ngImport: i0, type: MapPopupComponent, deps: [{ token: i1.Router }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-MapPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapPopupComponent, selector: "lib-map-popup", ngImport: i0, template: "<div id=\"map-popup\">\r\n    <div class=\"map-popup-header\" (click)=\"onClickVisitFirst()\" [style.cursor]=\"'pointer'\">\r\n        <img [src]=\"space.annexes\" />\r\n    </div>\r\n    <div class=\"map-popup-details\">\r\n    <h1 (click)=\"onClickVisitFirst()\" [style.cursor]=\"'pointer'\">{{space.name}}</h1>\r\n    <span class=\"map-popup-address\">{{space.addresses}}</span>\r\n    <span *ngFor=\"let visit of space.visits\" class=\"map-popup-visit\" (click)=\"onVisitClick(visit)\"\r\n                  [style.cursor]=\"'pointer'\">\u27A4 {{ visit.name ? visit.name : space.name}}</span>\r\n    </div>\r\n</div>\r\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"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPopupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-map-popup', template: "<div id=\"map-popup\">\r\n    <div class=\"map-popup-header\" (click)=\"onClickVisitFirst()\" [style.cursor]=\"'pointer'\">\r\n        <img [src]=\"space.annexes\" />\r\n    </div>\r\n    <div class=\"map-popup-details\">\r\n    <h1 (click)=\"onClickVisitFirst()\" [style.cursor]=\"'pointer'\">{{space.name}}</h1>\r\n    <span class=\"map-popup-address\">{{space.addresses}}</span>\r\n    <span *ngFor=\"let visit of space.visits\" class=\"map-popup-visit\" (click)=\"onVisitClick(visit)\"\r\n                  [style.cursor]=\"'pointer'\">\u27A4 {{ visit.name ? visit.name : space.name}}</span>\r\n    </div>\r\n</div>\r\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: "15.2.10", ngImport: i0, type: MapComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapComponent, selector: "lib-map", inputs: { spaces: "spaces" }, usesOnChanges: true, ngImport: i0, template: "<div [leafletLayers]=\"layers\" [leafletOptions]=\"options\" (leafletMapReady)=\"onMapReady($any($event))\" id=\"map\" leaflet\r\n    style=\"height: 500px; margin-top: 30px; z-index: 195\"></div>", styles: [""], dependencies: [{ kind: "directive", 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"] }, { kind: "directive", type: i1$1.LeafletLayersDirective, selector: "[leafletLayers]", inputs: ["leafletLayers"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-map', template: "<div [leafletLayers]=\"layers\" [leafletOptions]=\"options\" (leafletMapReady)=\"onMapReady($any($event))\" id=\"map\" leaflet\r\n    style=\"height: 500px; margin-top: 30px; z-index: 195\"></div>" }]
-        }], 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: "15.2.10", ngImport: i0, type: FormLocationComponent, deps: [{ token: i2.SpaceService }, { token: i2.PropertyService }, { token: i2.BaseUserService }, { token: i1$2.UntypedFormBuilder }, { token: i2.MissionService }, { token: i2.LayerService }, { token: i2.ValidatorsService }], target: i0.ɵɵFactoryTarget.Component });
-FormLocationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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\">\r\n  <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Name' | translate}} *</label>\r\n      <div class=\"col-sm-9\">\r\n        <input type=\"text\" class=\"form-control\" data-testid=\"new-location-name\" (ngModelChange)=\"onFormChange()\"\r\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['name'])||  isFormError(form.controls['name'])}\"\r\n          required formControlName=\"name\">\r\n\r\n        <div class=\"invalid-feedback\">\r\n          <ngb-alert data-testid=\"new-location-name-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\"validatorsService.isControlError(form.controls['name']) \r\n          ||  isFormError(form.controls['name'])\">\r\n            {{validatorsService.getError(form.controls['name']) | translate}}\r\n          </ngb-alert>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Address' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"addresses\" data-testid=\"new-location-address\" (ngModelChange)=\"onFormChange()\"\r\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['addresses']) ||  isFormError(form.controls['addresses'])}\">\r\n        <div class=\"invalid-feedback\">\r\n          <span data-testid=\"\" [translate]=\"validatorsService.getError(form.controls['addresses'])\"\r\n            *ngIf=\" validatorsService.isControlError(form.controls['addresses'])\"></span>\r\n\r\n          <ngb-alert data-testid=\"new-location-address-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n            *ngIf=\"validatorsService.isControlError(form.controls['addresses']) \">\r\n\r\n            {{validatorsService.getError(form.controls['addresses']) | translate}}\r\n          </ngb-alert>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Construction year' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"constructionYear\"\r\n          data-testid=\"new-location-constructionYear\" (ngModelChange)=\"onFormChange()\"\r\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['constructionYear']) || isFormError(form.controls['constructionYear'])}\">\r\n        <div class=\"invalid-feedback\">\r\n          <ngb-alert data-testid=\"new-location-constructionYear-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n            *ngIf=\"validatorsService.isControlError(form.controls['constructionYear']) ||  isFormError(form.controls['constructionYear'])\">\r\n            {{validatorsService.getError(form.controls['constructionYear']) | translate}}\r\n          </ngb-alert>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Latitude' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"latitude\" data-testid=\"new-location-latitude\" (ngModelChange)=\"onFormChange()\"\r\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['latitude'])||  isFormError(form.controls['latitude'])}\">\r\n        <div class=\"invalid-feedback\">\r\n          <ngb-alert data-testid=\"new-location-latitude-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n            *ngIf=\"validatorsService.isControlError(form.controls['latitude']) ||  isFormError(form.controls['latitude'])\">\r\n            {{validatorsService.getError(form.controls['latitude']) | translate}}\r\n          </ngb-alert>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Longitude' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"longitude\" data-testid=\"new-location-longitude\" (ngModelChange)=\"onFormChange()\"\r\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['longitude'])||  isFormError(form.controls['longitude'])}\">\r\n        <div class=\"invalid-feedback\">\r\n          <ngb-alert data-testid=\"new-location-longitude-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n            *ngIf=\"validatorsService.isControlError(form.controls['longitude']) ||  isFormError(form.controls['longitude'])\">\r\n            {{validatorsService.getError(form.controls['longitude']) | translate}}\r\n          </ngb-alert>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Access level' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <select class=\"d-inline-block custom-select rounded-pill\" formControlName=\"level\">\r\n          <option *ngFor=\"let level of levels\" [value]=\"level\">{{level | translate}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Energy Class' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"classEnergyConsumption\"\r\n          data-testid=\"new-location-classEnergyConsumption\" (ngModelChange)=\"onFormChange()\"\r\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['classEnergyConsumption']) ||  isFormError(form.controls['classEnergyConsumption'])}\">\r\n        <div class=\"invalid-feedback\">\r\n          <ngb-alert data-testid=\"new-location-classEnergyConsumption-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n            *ngIf=\"validatorsService.isControlError(form.controls['classEnergyConsumption']) ||  isFormError(form.controls['classEnergyConsumption'])\">\r\n            {{validatorsService.getError(form.controls['classEnergyConsumption']) | translate}}\r\n          </ngb-alert>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Greenhouse gas emission Class' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"classGes\" data-testid=\"new-location-classGes\" (ngModelChange)=\"onFormChange()\"\r\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['classGes'])||  isFormError(form.controls['classGes'])}\">\r\n        <div class=\"invalid-feedback\">\r\n          <ngb-alert data-testid=\"new-location-classGes-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n            *ngIf=\"validatorsService.isControlError(form.controls['classGes']) ||  isFormError(form.controls['classGes'])\">\r\n            {{validatorsService.getError(form.controls['classGes']) | translate}}\r\n          </ngb-alert>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Cover picture' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <img #imageBasePreview *ngIf=\"currentImage\" class=\"image-preview\" [src]=\"currentImage\">\r\n        <label #imageInputContainer for=\"image\"\r\n          class=\"btn btn-label-file btn-outline-primary rounded-pill imageInputContainer\">\r\n          <input #imageInput type=\"file\" id=\"image\" (change)=\"handleImageInput($event.target)\" />\r\n          {{ imageInputText | translate}}</label>\r\n        <button *ngIf=\"currentImage && !imageToUpload\" class=\"btn btn-outline-primary rounded-pill\"\r\n          (click)=\"imageToBeDeleted=true;clearImageFile()\">{{'Delete picture' | translate }}</button>\r\n        <div class=\"image-name\" *ngIf=\"imageToUpload\">\r\n          <p>{{ imageToUpload.name}}</p>\r\n          <div (click)=\"clearImageFile()\" [style.cursor]=\"'pointer'\">\r\n            <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3 row\" *ngIf=\"!location\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Create mission for this space' | translate}}</label>\r\n      <div class=\"col-sm-3\">\r\n        <input type=\"checkbox\" [(ngModel)]=\"addMissionForNewSpace\" [ngModelOptions]=\"{standalone: true}\">\r\n      </div>\r\n    </div>\r\n\r\n    <button data-testid=\"new-location-submit-btn\" [ngClass]=\"{'is-invalid' : errorForm }\" type=\"submit\"\r\n      class=\"btn btn-outline-primary rounded-pill me-3\">{{'Save' | translate}}</button>\r\n\r\n    <button data-testid=\"new-location-close-btn\" type=\"button\" (click)=\"onCancel()\"\r\n      class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\r\n      translate}}</button>\r\n\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorForm\">\r\n      <ngb-alert data-testid=\"new-location-form-invalid\" [dismissible]=\"false\" type=\"danger\">\r\n        {{'errorForm.infoBtn' |translate}}\r\n\r\n      </ngb-alert>\r\n    </div>\r\n  </form>\r\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"], dependencies: [{ kind: "component", type: i4$1.NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormLocationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-form-location', template: "<div class=\"col-md-6 form-new-loc\" *ngIf=\"form\">\r\n  <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Name' | translate}} *</label>\r\n      <div class=\"col-sm-9\">\r\n        <input type=\"text\" class=\"form-control\" data-testid=\"new-location-name\" (ngModelChange)=\"onFormChange()\"\r\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['name'])||  isFormError(form.controls['name'])}\"\r\n          required formControlName=\"name\">\r\n\r\n        <div class=\"invalid-feedback\">\r\n          <ngb-alert data-testid=\"new-location-name-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\"validatorsService.isControlError(form.controls['name']) \r\n          ||  isFormError(form.controls['name'])\">\r\n            {{validatorsService.getError(form.controls['name']) | translate}}\r\n          </ngb-alert>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Address' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"addresses\" data-testid=\"new-location-address\" (ngModelChange)=\"onFormChange()\"\r\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['addresses']) ||  isFormError(form.controls['addresses'])}\">\r\n        <div class=\"invalid-feedback\">\r\n          <span data-testid=\"\" [translate]=\"validatorsService.getError(form.controls['addresses'])\"\r\n            *ngIf=\" validatorsService.isControlError(form.controls['addresses'])\"></span>\r\n\r\n          <ngb-alert data-testid=\"new-location-address-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n            *ngIf=\"validatorsService.isControlError(form.controls['addresses']) \">\r\n\r\n            {{validatorsService.getError(form.controls['addresses']) | translate}}\r\n          </ngb-alert>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Construction year' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"constructionYear\"\r\n          data-testid=\"new-location-constructionYear\" (ngModelChange)=\"onFormChange()\"\r\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['constructionYear']) || isFormError(form.controls['constructionYear'])}\">\r\n        <div class=\"invalid-feedback\">\r\n          <ngb-alert data-testid=\"new-location-constructionYear-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n            *ngIf=\"validatorsService.isControlError(form.controls['constructionYear']) ||  isFormError(form.controls['constructionYear'])\">\r\n            {{validatorsService.getError(form.controls['constructionYear']) | translate}}\r\n          </ngb-alert>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Latitude' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"latitude\" data-testid=\"new-location-latitude\" (ngModelChange)=\"onFormChange()\"\r\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['latitude'])||  isFormError(form.controls['latitude'])}\">\r\n        <div class=\"invalid-feedback\">\r\n          <ngb-alert data-testid=\"new-location-latitude-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n            *ngIf=\"validatorsService.isControlError(form.controls['latitude']) ||  isFormError(form.controls['latitude'])\">\r\n            {{validatorsService.getError(form.controls['latitude']) | translate}}\r\n          </ngb-alert>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Longitude' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"longitude\" data-testid=\"new-location-longitude\" (ngModelChange)=\"onFormChange()\"\r\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['longitude'])||  isFormError(form.controls['longitude'])}\">\r\n        <div class=\"invalid-feedback\">\r\n          <ngb-alert data-testid=\"new-location-longitude-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n            *ngIf=\"validatorsService.isControlError(form.controls['longitude']) ||  isFormError(form.controls['longitude'])\">\r\n            {{validatorsService.getError(form.controls['longitude']) | translate}}\r\n          </ngb-alert>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Access level' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <select class=\"d-inline-block custom-select rounded-pill\" formControlName=\"level\">\r\n          <option *ngFor=\"let level of levels\" [value]=\"level\">{{level | translate}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Energy Class' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"classEnergyConsumption\"\r\n          data-testid=\"new-location-classEnergyConsumption\" (ngModelChange)=\"onFormChange()\"\r\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['classEnergyConsumption']) ||  isFormError(form.controls['classEnergyConsumption'])}\">\r\n        <div class=\"invalid-feedback\">\r\n          <ngb-alert data-testid=\"new-location-classEnergyConsumption-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n            *ngIf=\"validatorsService.isControlError(form.controls['classEnergyConsumption']) ||  isFormError(form.controls['classEnergyConsumption'])\">\r\n            {{validatorsService.getError(form.controls['classEnergyConsumption']) | translate}}\r\n          </ngb-alert>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Greenhouse gas emission Class' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"classGes\" data-testid=\"new-location-classGes\" (ngModelChange)=\"onFormChange()\"\r\n          [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['classGes'])||  isFormError(form.controls['classGes'])}\">\r\n        <div class=\"invalid-feedback\">\r\n          <ngb-alert data-testid=\"new-location-classGes-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n            *ngIf=\"validatorsService.isControlError(form.controls['classGes']) ||  isFormError(form.controls['classGes'])\">\r\n            {{validatorsService.getError(form.controls['classGes']) | translate}}\r\n          </ngb-alert>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-3 row\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Cover picture' | translate}}</label>\r\n      <div class=\"col-sm-9\">\r\n        <img #imageBasePreview *ngIf=\"currentImage\" class=\"image-preview\" [src]=\"currentImage\">\r\n        <label #imageInputContainer for=\"image\"\r\n          class=\"btn btn-label-file btn-outline-primary rounded-pill imageInputContainer\">\r\n          <input #imageInput type=\"file\" id=\"image\" (change)=\"handleImageInput($event.target)\" />\r\n          {{ imageInputText | translate}}</label>\r\n        <button *ngIf=\"currentImage && !imageToUpload\" class=\"btn btn-outline-primary rounded-pill\"\r\n          (click)=\"imageToBeDeleted=true;clearImageFile()\">{{'Delete picture' | translate }}</button>\r\n        <div class=\"image-name\" *ngIf=\"imageToUpload\">\r\n          <p>{{ imageToUpload.name}}</p>\r\n          <div (click)=\"clearImageFile()\" [style.cursor]=\"'pointer'\">\r\n            <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3 row\" *ngIf=\"!location\">\r\n      <label class=\"col-sm-3 col-form-label\">{{'Create mission for this space' | translate}}</label>\r\n      <div class=\"col-sm-3\">\r\n        <input type=\"checkbox\" [(ngModel)]=\"addMissionForNewSpace\" [ngModelOptions]=\"{standalone: true}\">\r\n      </div>\r\n    </div>\r\n\r\n    <button data-testid=\"new-location-submit-btn\" [ngClass]=\"{'is-invalid' : errorForm }\" type=\"submit\"\r\n      class=\"btn btn-outline-primary rounded-pill me-3\">{{'Save' | translate}}</button>\r\n\r\n    <button data-testid=\"new-location-close-btn\" type=\"button\" (click)=\"onCancel()\"\r\n      class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\r\n      translate}}</button>\r\n\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorForm\">\r\n      <ngb-alert data-testid=\"new-location-form-invalid\" [dismissible]=\"false\" type=\"danger\">\r\n        {{'errorForm.infoBtn' |translate}}\r\n\r\n      </ngb-alert>\r\n    </div>\r\n  </form>\r\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.UntypedFormBuilder }, { 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: "15.2.10", 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: "14.0.0", version: "15.2.10", type: LocationsComponent, selector: "lib-locations", ngImport: i0, template: "<div class=\"dashboard-tab\">\r\n    <div class=\"header-dashboard-tab\">\r\n      <div class=\"m-3\">\r\n        <lib-tab-navigation (onGoBack)=\"onFormChange(null)\" [menuItems]='menuItems'></lib-tab-navigation>\r\n        <span class=\"ml-3 refreshIcon\" (click)=\"refresh()\" *ngIf=\"!(isAdding)\" ngbTooltip=\"Refresh list\">\r\n          <span class=\"iconify refreshIcon\" data-icon=\"ion:refresh-circle\" data-width=\"35\" data-rotate=\"90deg\"></span>\r\n        </span>\r\n      </div>  \r\n      <lib-search-bar *ngIf=\"!isAdding && !isMuseumUser\" [searchable]=\"locations\" [objectType]=\"getSearchType()\"\r\n        (searchEvent)=\"applyResultsSearchBar($event)\"></lib-search-bar>\r\n      \r\n      <div class=\"col-md-8\">\r\n        <div class=\"sp-row\" *ngIf=\"!isAdding && isManager\">\r\n          <button data-testid=\"new-location-btn\" class=\"btn btn-outline-primary rounded-pill add-location\" (click)=\"onAddLocation()\">\r\n            {{'Add location' | translate}}</button>\r\n          <!-- <div class=\"outer_circle\">\r\n            <button id='btn-icon' (click)=\"onAddLocation()\"></button>\r\n          </div> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr>\r\n    <div class=\"row\" *ngIf=\"isAdding\">\r\n      <div class=\"col-md-6\">\r\n        <h4>{{'New location' | translate}}</h4>\r\n      </div>\r\n    </div>\r\n    <section *ngIf=\"!isAdding\">\r\n      <div class=\"row\">\r\n        <div class=\"col-sm-12 col-md-12 col-lg-6\" *ngIf=\"filteredLocations\">\r\n          <ul data-testid=\"location-list-container\" class=\"list-group list-group-flush\">\r\n            <li class=\"d-flex justify-content-between list-group-item\"\r\n              *ngFor=\"let loc of filteredLocations; index as index\">\r\n              <div class=\"d-flex\">\r\n                <div class=\"col-md-5 img-main-container\">\r\n                  <div id=\"img_container\">\r\n                    <img class=\"location-img\" *ngIf=\"loc.annexes; else elseBlock\" [src]=\"loc.annexes\">\r\n                    <ng-template #elseBlock><img class=\"location-img\"\r\n                        src=\"./../../../../assets/images/visuel-off-big.jpg\" />\r\n                    </ng-template>\r\n                    <button [ngClass]=\"['open-btn-'+getStringNoSpace(loc.name)]\" *ngIf=\"isManagerForSpace(loc.id)\" class=\"btn-details\" (click)=\"onDetailViewClick(loc.id)\">\r\n                      {{'View details' | translate}}</button>\r\n                  </div>\r\n  \r\n                </div>\r\n                <div class=\"col-md-7 location-info\">\r\n                  <p>{{loc.name}}</p>\r\n                  <p>{{loc.addresses}}</p>\r\n                  <p [ngClass]=\"['view-btn-'+getStringNoSpace(loc.name)]\" *ngFor=\"let visit of loc.visits\" (click)=\"onVisitClick(loc, visit)\" class=\"visit-name\"\r\n                    [style.cursor]=\"'pointer'\" ngbTooltip=\"Visit\">{{ visit.name ? visit.name : loc.name}}</p>\r\n                </div>\r\n              </div>\r\n            </li>\r\n  \r\n          </ul>\r\n        </div>\r\n        <div class=\"col-sm-12 col-md-12 col-lg-6\">\r\n          <lib-map [spaces]=\"filteredLocations\"></lib-map>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <lib-form-location *ngIf=\"isAdding\" (onChange)=\"onFormChange($event)\"></lib-form-location>\r\n</div>\r\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:0;right:0;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:-moz-fit-content;width:fit-content}.sp-row{display:flex;flex-direction:row}\n"], dependencies: [{ kind: "directive", type: i4$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SearchBarComponent, selector: "lib-search-bar", inputs: ["searchable", "objectType"], outputs: ["searchEvent"] }, { kind: "component", type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { kind: "component", type: MapComponent, selector: "lib-map", inputs: ["spaces"] }, { kind: "component", type: FormLocationComponent, selector: "lib-form-location", inputs: ["location"], outputs: ["onChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocationsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-locations', template: "<div class=\"dashboard-tab\">\r\n    <div class=\"header-dashboard-tab\">\r\n      <div class=\"m-3\">\r\n        <lib-tab-navigation (onGoBack)=\"onFormChange(null)\" [menuItems]='menuItems'></lib-tab-navigation>\r\n        <span class=\"ml-3 refreshIcon\" (click)=\"refresh()\" *ngIf=\"!(isAdding)\" ngbTooltip=\"Refresh list\">\r\n          <span class=\"iconify refreshIcon\" data-icon=\"ion:refresh-circle\" data-width=\"35\" data-rotate=\"90deg\"></span>\r\n        </span>\r\n      </div>  \r\n      <lib-search-bar *ngIf=\"!isAdding && !isMuseumUser\" [searchable]=\"locations\" [objectType]=\"getSearchType()\"\r\n        (searchEvent)=\"applyResultsSearchBar($event)\"></lib-search-bar>\r\n      \r\n      <div class=\"col-md-8\">\r\n        <div class=\"sp-row\" *ngIf=\"!isAdding && isManager\">\r\n          <button data-testid=\"new-location-btn\" class=\"btn btn-outline-primary rounded-pill add-location\" (click)=\"onAddLocation()\">\r\n            {{'Add location' | translate}}</button>\r\n          <!-- <div class=\"outer_circle\">\r\n            <button id='btn-icon' (click)=\"onAddLocation()\"></button>\r\n          </div> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr>\r\n    <div class=\"row\" *ngIf=\"isAdding\">\r\n      <div class=\"col-md-6\">\r\n        <h4>{{'New location' | translate}}</h4>\r\n      </div>\r\n    </div>\r\n    <section *ngIf=\"!isAdding\">\r\n      <div class=\"row\">\r\n        <div class=\"col-sm-12 col-md-12 col-lg-6\" *ngIf=\"filteredLocations\">\r\n          <ul data-testid=\"location-list-container\" class=\"list-group list-group-flush\">\r\n            <li class=\"d-flex justify-content-between list-group-item\"\r\n              *ngFor=\"let loc of filteredLocations; index as index\">\r\n              <div class=\"d-flex\">\r\n                <div class=\"col-md-5 img-main-container\">\r\n                  <div id=\"img_container\">\r\n                    <img class=\"location-img\" *ngIf=\"loc.annexes; else elseBlock\" [src]=\"loc.annexes\">\r\n                    <ng-template #elseBlock><img class=\"location-img\"\r\n                        src=\"./../../../../assets/images/visuel-off-big.jpg\" />\r\n                    </ng-template>\r\n                    <button [ngClass]=\"['open-btn-'+getStringNoSpace(loc.name)]\" *ngIf=\"isManagerForSpace(loc.id)\" class=\"btn-details\" (click)=\"onDetailViewClick(loc.id)\">\r\n                      {{'View details' | translate}}</button>\r\n                  </div>\r\n  \r\n                </div>\r\n                <div class=\"col-md-7 location-info\">\r\n                  <p>{{loc.name}}</p>\r\n                  <p>{{loc.addresses}}</p>\r\n                  <p [ngClass]=\"['view-btn-'+getStringNoSpace(loc.name)]\" *ngFor=\"let visit of loc.visits\" (click)=\"onVisitClick(loc, visit)\" class=\"visit-name\"\r\n                    [style.cursor]=\"'pointer'\" ngbTooltip=\"Visit\">{{ visit.name ? visit.name : loc.name}}</p>\r\n                </div>\r\n              </div>\r\n            </li>\r\n  \r\n          </ul>\r\n        </div>\r\n        <div class=\"col-sm-12 col-md-12 col-lg-6\">\r\n          <lib-map [spaces]=\"filteredLocations\"></lib-map>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <lib-form-location *ngIf=\"isAdding\" (onChange)=\"onFormChange($event)\"></lib-form-location>\r\n</div>\r\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:0;right:0;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:-moz-fit-content;width:fit-content}.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: "15.2.10", 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: "14.0.0", version: "15.2.10", type: DetailLocationComponent, selector: "lib-detail-location", ngImport: i0, template: "<div class=\"container-fluid\">\r\n    <div class=\"m-3\">\r\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"reset()\"></lib-tab-navigation>\r\n    </div>\r\n    <button class=\"btn btn-outline-primary rounded-pill me-3\" (click)=\"onReturn()\">{{'Back to locations' |\r\n        translate}}</button>\r\n    <div class=\"row\" *ngIf=\"!isEditing && space\">\r\n        <div class=\"col-md-5\">\r\n            <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Name' | translate}}: {{space.name}} </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Address' | translate}}: {{space.addresses}} </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Construction year' | translate}}:\r\n                    {{space.constructionYear ?\r\n                    space.constructionYear : \"No data\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Latitude' | translate}}:\r\n                    {{space.latitude ?\r\n                    space.latitude : \"No data\" | translate}}</li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Longitude' | translate}}: {{space.longitude ?\r\n                    space.longitude : \"No data\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Access level' | translate}}: {{space.level | translate\r\n                    }} </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Energy Class' | translate}}:\r\n                    {{space.classEnergyConsumption ?\r\n                    space.classEnergyConsumption : \"No data\" | translate}}\r\n                    <button *ngIf=\"space.status !== 'DPE_TO_VALIDATE'\"\r\n                        class=\"btn btn-outline-primary rounded-pill no-lowercase ms-5\" (click)=\"onGetDpeData()\">\r\n                        {{'Get data from API DPE' | translate}}</button>\r\n                    <a class=\"bg-transparent ms-5\" *ngIf=\"space.status === 'DPE_TO_VALIDATE'\" (click)=\"onDpeValidate()\"\r\n                        style=\"cursor: pointer;\">\r\n                        <span class=\"iconify\" data-icon=\"mdi:alert-circle-check\" style=\"color: #f19c80;\" data-width=\"25\"\r\n                            data-height=\"25\"></span>\r\n                        {{'DPE data found. Click to validate' | translate}}\r\n                    </a>\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Greenhouse gas emission Class' | translate}}:\r\n                    {{space.classGes ? space.classGes : \"No data\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Shareable Guest Link' | translate}}:\r\n                    <div style=\"display: inline;\" *ngIf=\"guestLink\">\r\n                        <a id=\"linkHref\" target=\"_blank\">{{'Try the link' | translate }}</a>\r\n                        <div [cdkCopyToClipboard]=\"guestLink\" [style.cursor]=\"'pointer'\"\r\n                            style=\"margin-left: 5px; max-width: 20px; display: inline;\" ngbTooltip=\"Copied!\"\r\n                            triggers=\"click:blur\">\r\n                            <span class=\"iconify\" data-icon=\"mdi:content-copy\" data-inline=\"false\" data-width=\"20\"\r\n                                data-height=\"20\"></span>\r\n                        </div>\r\n                    </div>\r\n                    <p *ngIf=\"!guestLink\" style=\"display: inline;\">{{'No link' | translate }}</p>\r\n                    <p *ngIf=\"!guestLink\"><small>({{'Generate link from a VISITOR mission'|translate}})</small>\r\n                    </p>\r\n                </li>\r\n\r\n            </ul>\r\n            <div class=\"d-flex justify-content-center\" *ngIf=\"gettingData\">\r\n                <div class=\"spinner-border\" role=\"status\">\r\n                    <span class=\"visually-hidden\">Loading...</span>\r\n                </div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"d-flex\">\r\n                <button class=\"btn btn-outline-primary rounded-pill me-3\" (click)=\"onEdit()\"\r\n                    data-testid=\"location-edit-btn\">{{'Edit' |\r\n                    translate}}</button>\r\n                <div class=\"tooltip-wrapper\"\r\n                    ngbTooltip=\"{{!canArchive ? ('Contact SmarterPlan' | translate) : ('Archive location and related data' | translate)}}\">\r\n                    <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onArchive()\" [disabled]=\"!canArchive\">\r\n                        {{'Archive' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n\r\n        </div>\r\n        <div class=\"col-md-7\" *ngIf=\"isValidatingDpe\">\r\n            <h6>{{'Most relevant results for' | translate}} :\r\n                <b>diagnostics de performance \u00E9nerg\u00E9tique (DPE) des b\u00E2timents tertiaires</b>\r\n            </h6>\r\n            <table class=\"table table-striped\">\r\n                <thead>\r\n                    <tr>\r\n                        <th scope=\"col\">#</th>\r\n                        <th scope=\"col\">{{'Apply to location' | translate}}</th>\r\n                        <th scope=\"col\">{{'Address' | translate}}</th>\r\n                        <th scope=\"col\">{{'Activity sector' | translate}}</th>\r\n                        <th scope=\"col\">{{'Construction year' | translate}}</th>\r\n                        <th scope=\"col\">{{'Energy Class' | translate}}</th>\r\n                        <th scope=\"col\">{{'Greenhouse gas emission Class' | translate}}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let result of parsedMetadata; index as i\">\r\n                        <th scope=\"row\">{{ i + 1 }}</th>\r\n                        <td><input class=\"checkbox-apply\" type=\"checkbox\" [(ngModel)]=\"result.selected\"\r\n                                (change)=\"onSelectChange(result)\"></td>\r\n                        <td>{{result.geo_adresse}}</td>\r\n                        <td>{{result.secteur_activite}}</td>\r\n                        <td>{{ result.annee_construction }}</td>\r\n                        <td>{{ result.classe_consommation_energie }}</td>\r\n                        <td>{{ result.classe_estimation_ges }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onSaveResult()\"\r\n                [disabled]=\"!selectedDpeResult\">{{'Save selected' |\r\n                translate}}</button>\r\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onErase()\">\r\n                {{'No match (erase data)' | translate}}</button>\r\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onCancel()\">\r\n                {{'Cancel' | translate}}</button>\r\n        </div>\r\n    </div>\r\n    <lib-form-location *ngIf=\"isEditing\" [location]=\"space\" (onChange)=\"onFormChange($event)\"></lib-form-location>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$2.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: i4$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { kind: "component", type: FormLocationComponent, selector: "lib-form-location", inputs: ["location"], outputs: ["onChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DetailLocationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-detail-location', template: "<div class=\"container-fluid\">\r\n    <div class=\"m-3\">\r\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"reset()\"></lib-tab-navigation>\r\n    </div>\r\n    <button class=\"btn btn-outline-primary rounded-pill me-3\" (click)=\"onReturn()\">{{'Back to locations' |\r\n        translate}}</button>\r\n    <div class=\"row\" *ngIf=\"!isEditing && space\">\r\n        <div class=\"col-md-5\">\r\n            <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Name' | translate}}: {{space.name}} </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Address' | translate}}: {{space.addresses}} </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Construction year' | translate}}:\r\n                    {{space.constructionYear ?\r\n                    space.constructionYear : \"No data\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Latitude' | translate}}:\r\n                    {{space.latitude ?\r\n                    space.latitude : \"No data\" | translate}}</li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Longitude' | translate}}: {{space.longitude ?\r\n                    space.longitude : \"No data\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Access level' | translate}}: {{space.level | translate\r\n                    }} </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Energy Class' | translate}}:\r\n                    {{space.classEnergyConsumption ?\r\n                    space.classEnergyConsumption : \"No data\" | translate}}\r\n                    <button *ngIf=\"space.status !== 'DPE_TO_VALIDATE'\"\r\n                        class=\"btn btn-outline-primary rounded-pill no-lowercase ms-5\" (click)=\"onGetDpeData()\">\r\n                        {{'Get data from API DPE' | translate}}</button>\r\n                    <a class=\"bg-transparent ms-5\" *ngIf=\"space.status === 'DPE_TO_VALIDATE'\" (click)=\"onDpeValidate()\"\r\n                        style=\"cursor: pointer;\">\r\n                        <span class=\"iconify\" data-icon=\"mdi:alert-circle-check\" style=\"color: #f19c80;\" data-width=\"25\"\r\n                            data-height=\"25\"></span>\r\n                        {{'DPE data found. Click to validate' | translate}}\r\n                    </a>\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Greenhouse gas emission Class' | translate}}:\r\n                    {{space.classGes ? space.classGes : \"No data\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Shareable Guest Link' | translate}}:\r\n                    <div style=\"display: inline;\" *ngIf=\"guestLink\">\r\n                        <a id=\"linkHref\" target=\"_blank\">{{'Try the link' | translate }}</a>\r\n                        <div [cdkCopyToClipboard]=\"guestLink\" [style.cursor]=\"'pointer'\"\r\n                            style=\"margin-left: 5px; max-width: 20px; display: inline;\" ngbTooltip=\"Copied!\"\r\n                            triggers=\"click:blur\">\r\n                            <span class=\"iconify\" data-icon=\"mdi:content-copy\" data-inline=\"false\" data-width=\"20\"\r\n                                data-height=\"20\"></span>\r\n                        </div>\r\n                    </div>\r\n                    <p *ngIf=\"!guestLink\" style=\"display: inline;\">{{'No link' | translate }}</p>\r\n                    <p *ngIf=\"!guestLink\"><small>({{'Generate link from a VISITOR mission'|translate}})</small>\r\n                    </p>\r\n                </li>\r\n\r\n            </ul>\r\n            <div class=\"d-flex justify-content-center\" *ngIf=\"gettingData\">\r\n                <div class=\"spinner-border\" role=\"status\">\r\n                    <span class=\"visually-hidden\">Loading...</span>\r\n                </div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"d-flex\">\r\n                <button class=\"btn btn-outline-primary rounded-pill me-3\" (click)=\"onEdit()\"\r\n                    data-testid=\"location-edit-btn\">{{'Edit' |\r\n                    translate}}</button>\r\n                <div class=\"tooltip-wrapper\"\r\n                    ngbTooltip=\"{{!canArchive ? ('Contact SmarterPlan' | translate) : ('Archive location and related data' | translate)}}\">\r\n                    <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onArchive()\" [disabled]=\"!canArchive\">\r\n                        {{'Archive' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n\r\n        </div>\r\n        <div class=\"col-md-7\" *ngIf=\"isValidatingDpe\">\r\n            <h6>{{'Most relevant results for' | translate}} :\r\n                <b>diagnostics de performance \u00E9nerg\u00E9tique (DPE) des b\u00E2timents tertiaires</b>\r\n            </h6>\r\n            <table class=\"table table-striped\">\r\n                <thead>\r\n                    <tr>\r\n                        <th scope=\"col\">#</th>\r\n                        <th scope=\"col\">{{'Apply to location' | translate}}</th>\r\n                        <th scope=\"col\">{{'Address' | translate}}</th>\r\n                        <th scope=\"col\">{{'Activity sector' | translate}}</th>\r\n                        <th scope=\"col\">{{'Construction year' | translate}}</th>\r\n                        <th scope=\"col\">{{'Energy Class' | translate}}</th>\r\n                        <th scope=\"col\">{{'Greenhouse gas emission Class' | translate}}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let result of parsedMetadata; index as i\">\r\n                        <th scope=\"row\">{{ i + 1 }}</th>\r\n                        <td><input class=\"checkbox-apply\" type=\"checkbox\" [(ngModel)]=\"result.selected\"\r\n                                (change)=\"onSelectChange(result)\"></td>\r\n                        <td>{{result.geo_adresse}}</td>\r\n                        <td>{{result.secteur_activite}}</td>\r\n                        <td>{{ result.annee_construction }}</td>\r\n                        <td>{{ result.classe_consommation_energie }}</td>\r\n                        <td>{{ result.classe_estimation_ges }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onSaveResult()\"\r\n                [disabled]=\"!selectedDpeResult\">{{'Save selected' |\r\n                translate}}</button>\r\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onErase()\">\r\n                {{'No match (erase data)' | translate}}</button>\r\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onCancel()\">\r\n                {{'Cancel' | translate}}</button>\r\n        </div>\r\n    </div>\r\n    <lib-form-location *ngIf=\"isEditing\" [location]=\"space\" (onChange)=\"onFormChange($event)\"></lib-form-location>\r\n</div>" }]
-        }], 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: "15.2.10", 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: "14.0.0", version: "15.2.10", type: CalibrationComponent, selector: "lib-calibration", viewQueries: [{ propertyName: "canvasDiv", first: true, predicate: ["canvasDiv"], descendants: true }], ngImport: i0, template: "<div class=\"row mt-3\">\r\n    <div class=\"col\">\r\n        <div class=\"m-3\">\r\n            <lib-tab-navigation [menuItems]='menuItems'></lib-tab-navigation>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div id=\"rowCanvas\">\r\n    <div #canvasDiv id=\"canvasDiv\">\r\n\r\n        <div id=\"viewer-frame\" [style.pointer-events]=\"zoomCanBeChanged?'auto':'none'\">\r\n            <!-- <div class=\"blur\"></div> -->\r\n        </div>\r\n        <canvas id=\"canvas\" [ngStyle]=\"{'opacity': (preview||loading) ? '1' : 'calc(' + opacity + '/ 100)'}\"></canvas>\r\n    </div>\r\n\r\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"!(preview || loading)\">\r\n        <h1>{{'Calibration tool' | translate}}</h1>\r\n        <div class=\"tool\">\r\n            <div class=\"row ms-0 me-0 legend\">\r\n                <div class=\"legend-bar-indicator\" [ngStyle]=\"{'opacity': 'calc(' + (-(opacity-100)+10) + '/ 100)'}\">\r\n                    {{'Less' | translate}}</div>\r\n                <div class=\"legend-title\">{{'Plan Opacity' | translate }}</div>\r\n                <div class=\"legend-bar-indicator\" [ngStyle]=\"{'opacity': 'calc(' + (opacity+10) + '/ 100)'}\">{{'More' |\r\n                    translate}}</div>\r\n            </div>\r\n            <div class=\"row ms-0 me-0 \">\r\n                <input [disabled]=\"false\" [ngModelOptions]=\"{standalone: true}\" [(ngModel)]=\"opacity\" type=\"range\"\r\n                    class=\"form-range\" min=\"0\" max=\"100\" value=\"50\" id=\"opacity\">\r\n            </div>\r\n        </div>\r\n        <div class=\"tool\">\r\n            <div class=\"row ms-0 me-0 \">\r\n                <div class=\"label-legend\">{{'Change Visit Floor' | translate}}</div>\r\n                <div ngbDropdown class=\"d-inline-block ms-3\">\r\n                    <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>\r\n                        {{currentFloor ? currentFloor.id : ('Floor' | translate) }}</button>\r\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                        <button ngbDropdownItem *ngFor=\"let floor of floors\" (click)=\"onFloorClick(floor)\">\r\n                            {{ floor.name.length > 0 ? floor.name : ('Floor ' + floor.id) }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        <div class=\"tool\">\r\n            <div class=\"row ms-0 me-0 \">\r\n                <div class=\"tool-checkbox-container\">\r\n                    <div class=\"tool-checkbox-subcontainer\">\r\n                        <div class=\"label-legend me-3\">{{'Pan/Zoom Visit' | translate}} {{zoomCanBeChanged ? \"ON\" :\r\n                            \"OFF\"}}\r\n                        </div>\r\n                        <input type=\"checkbox\" (change)=\"onActivateZoomChange()\" style=\"margin-top: 5px;\">\r\n                    </div>\r\n                    <div class=\"card border-warning mb-3 mt-3\" *ngIf=\"zoomCanBeChanged\">\r\n                        <div class=\"card-body text-warning\">\r\n                            <h5 class=\"card-title\">{{\"calibration.wait-message\" | translate}}</h5>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"action\">\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onPreview()\"\r\n                [disabled]=\"zoomCanBeChanged\">{{'Preview' | translate}}</button>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' |\r\n                translate}}</button>\r\n\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"preview\">\r\n        <h1>{{'Validation' | translate}}</h1>\r\n        <div class=\"action\">\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onSave()\">{{'Validate' |\r\n                translate}}</button>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onReset()\">{{'Reset' |\r\n                translate}}</button>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' |\r\n                translate}}</button>\r\n\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"loading\">\r\n        <h3>{{\"Waiting for Matterport\" | translate}}...</h3>\r\n        <div class=\"d-flex justify-content-center\">\r\n            <div class=\"spinner-border\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\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"], dependencies: [{ kind: "directive", type: i4$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i4$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i4$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i4$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1$2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalibrationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-calibration', template: "<div class=\"row mt-3\">\r\n    <div class=\"col\">\r\n        <div class=\"m-3\">\r\n            <lib-tab-navigation [menuItems]='menuItems'></lib-tab-navigation>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div id=\"rowCanvas\">\r\n    <div #canvasDiv id=\"canvasDiv\">\r\n\r\n        <div id=\"viewer-frame\" [style.pointer-events]=\"zoomCanBeChanged?'auto':'none'\">\r\n            <!-- <div class=\"blur\"></div> -->\r\n        </div>\r\n        <canvas id=\"canvas\" [ngStyle]=\"{'opacity': (preview||loading) ? '1' : 'calc(' + opacity + '/ 100)'}\"></canvas>\r\n    </div>\r\n\r\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"!(preview || loading)\">\r\n        <h1>{{'Calibration tool' | translate}}</h1>\r\n        <div class=\"tool\">\r\n            <div class=\"row ms-0 me-0 legend\">\r\n                <div class=\"legend-bar-indicator\" [ngStyle]=\"{'opacity': 'calc(' + (-(opacity-100)+10) + '/ 100)'}\">\r\n                    {{'Less' | translate}}</div>\r\n                <div class=\"legend-title\">{{'Plan Opacity' | translate }}</div>\r\n                <div class=\"legend-bar-indicator\" [ngStyle]=\"{'opacity': 'calc(' + (opacity+10) + '/ 100)'}\">{{'More' |\r\n                    translate}}</div>\r\n            </div>\r\n            <div class=\"row ms-0 me-0 \">\r\n                <input [disabled]=\"false\" [ngModelOptions]=\"{standalone: true}\" [(ngModel)]=\"opacity\" type=\"range\"\r\n                    class=\"form-range\" min=\"0\" max=\"100\" value=\"50\" id=\"opacity\">\r\n            </div>\r\n        </div>\r\n        <div class=\"tool\">\r\n            <div class=\"row ms-0 me-0 \">\r\n                <div class=\"label-legend\">{{'Change Visit Floor' | translate}}</div>\r\n                <div ngbDropdown class=\"d-inline-block ms-3\">\r\n                    <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>\r\n                        {{currentFloor ? currentFloor.id : ('Floor' | translate) }}</button>\r\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                        <button ngbDropdownItem *ngFor=\"let floor of floors\" (click)=\"onFloorClick(floor)\">\r\n                            {{ floor.name.length > 0 ? floor.name : ('Floor ' + floor.id) }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        <div class=\"tool\">\r\n            <div class=\"row ms-0 me-0 \">\r\n                <div class=\"tool-checkbox-container\">\r\n                    <div class=\"tool-checkbox-subcontainer\">\r\n                        <div class=\"label-legend me-3\">{{'Pan/Zoom Visit' | translate}} {{zoomCanBeChanged ? \"ON\" :\r\n                            \"OFF\"}}\r\n                        </div>\r\n                        <input type=\"checkbox\" (change)=\"onActivateZoomChange()\" style=\"margin-top: 5px;\">\r\n                    </div>\r\n                    <div class=\"card border-warning mb-3 mt-3\" *ngIf=\"zoomCanBeChanged\">\r\n                        <div class=\"card-body text-warning\">\r\n                            <h5 class=\"card-title\">{{\"calibration.wait-message\" | translate}}</h5>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"action\">\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onPreview()\"\r\n                [disabled]=\"zoomCanBeChanged\">{{'Preview' | translate}}</button>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' |\r\n                translate}}</button>\r\n\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"preview\">\r\n        <h1>{{'Validation' | translate}}</h1>\r\n        <div class=\"action\">\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onSave()\">{{'Validate' |\r\n                translate}}</button>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onReset()\">{{'Reset' |\r\n                translate}}</button>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' |\r\n                translate}}</button>\r\n\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"loading\">\r\n        <h3>{{\"Waiting for Matterport\" | translate}}...</h3>\r\n        <div class=\"d-flex justify-content-center\">\r\n            <div class=\"spinner-border\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\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: "15.2.10", ngImport: i0, type: PlansComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.SpaceService }, { token: i2.PlanService }, { token: i1$2.UntypedFormBuilder }, { token: i3.TranslateService }, { token: i2.NavigatorService }], target: i0.ɵɵFactoryTarget.Component });
-PlansComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PlansComponent, selector: "lib-plans", ngImport: i0, template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\" class=\"dashboard-tab\">\r\n    <div class=\"m-3\">\r\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\r\n        <div class=\"spinner-border\" role=\"status\">\r\n            <span class=\"visually-hidden\">Loading...</span>\r\n        </div>\r\n    </div>\r\n    <div class=\"mt-3\" *ngIf=\"!plans && !loading\">\r\n        <h4 style=\"font-weight: bold;\">{{'No imported plans' | translate }}</h4>\r\n        <p>{{'For import from 3D visit: go Virtual Visits => Import Images' | translate}}</p>\r\n    </div>\r\n    <div class=\"row ms-1\">\r\n        <div ngbDropdown class=\"d-inline-block me-3\">\r\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>{{getChoosenPlan() ?\r\n                getChoosenPlan().name: ('Choose Plan' | translate) }}</button>\r\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                <button ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\">{{plan.name }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"d-inline-block\" ngbDropdown #myDrop=\"ngbDropdown\">\r\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownManual\" ngbDropdownToggle>{{'Choose action' |\r\n                translate}}</button>\r\n            <div ngbDropdownMenu aria-labelledby=\"dropdownManual\">\r\n                <button (click)=\"onCalibrateClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Calibrate' |\r\n                    translate}}</button>\r\n                <button (click)=\"onEditClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Edit plan' |\r\n                    translate}}\r\n                </button>\r\n                <button (click)=\"onUploadClick()\" ngbDropdownItem>{{'Upload new plan' | translate}}</button>\r\n                <button (click)=\"onDownloadClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Download plan' |\r\n                    translate}}</button>\r\n                <button (click)=\"onRemoveClick()\" ngbDropdownItem\r\n                    [disabled]=\"!getChoosenPlan() || getChoosenPlan().isImportedMatterport\">{{'Delete plan' |\r\n                    translate}}</button>\r\n                <!-- <button (click)=\"onDownloadAsPng()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">\r\n                    {{'Download plan as PNG' | translate}}</button> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"row mt-3 ms-0\">\r\n        <h4 *ngIf=\"fileToUpload\">{{'New plan' | translate }}</h4>\r\n        <input class=\"hidden\" type=\"file\" id=\"upload-file\" name=\"upload-file\" accept=\"image/png, image/jpeg, .pdf, .svg\"\r\n            ngf-max-size=\"6MB\" (change)=\"addPlan($event.target)\">\r\n    </div>\r\n    <div class=\"col-md-6 mt-3\" *ngIf=\"planForm\">\r\n        <form (ngSubmit)=\"onSavePlan()\" [formGroup]=\"planForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3\">{{'Name' | translate}} </label>\r\n                <div class=\"col-sm-9\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\">\r\n                </div>\r\n            </div>\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3\">{{'Zone' | translate}} </label>\r\n                <div class=\"col-sm-9\">\r\n                    <select class=\"form-control\" formControlName=\"zoneID\">\r\n                        <option *ngFor=\"let zone of zones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3\">{{'Set as current plan for zone' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input type=\"checkbox\" [(ngModel)]=\"isCurrentPlanForZone\" [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n            <button [disabled]=\"planForm.invalid\" type='submit' class=\"btn btn-label-file rounded-pill\">{{'Save' |\r\n                translate}}</button>\r\n            <button class=\"btn btn-label-file rounded-pill ms-3\" type=\"button\" (click)=\"onCancelUpload()\">{{'Cancel' |\r\n                translate}}</button>\r\n        </form>\r\n    </div>\r\n    <ul class=\"col-md-6 list-group list-group-flush\" *ngIf=\"getChoosenPlan()\">\r\n        <li class=\"list-group-item bg-transparent\">{{'Name' | translate }} : {{getChoosenPlan().name}} </li>\r\n        <li class=\"list-group-item bg-transparent\"> {{'Plan is ' | translate }} :\r\n            {{getChoosenPlan().calibration ? ('Calibrated' | translate) : ('Not calibrated' | translate)}}</li>\r\n        <li class=\"list-group-item bg-transparent\">{{'Attributed to zone ' | translate }} :\r\n            {{getChoosenPlan().zone ? getChoosenPlan().zone.name : 'None'}}</li>\r\n        <li class=\"list-group-item bg-transparent\">{{'Is current plan for zone ' | translate }} :\r\n            <input type=\"checkbox\" [(ngModel)]=\"getChoosenPlan().isCurrentForZone\" (change)=\"onCurrentPlanClick()\">\r\n        </li>\r\n\r\n    </ul>\r\n\r\n    <div class=\"row mt-4\">\r\n        <div class=\"col-md-10\">\r\n            <embed *ngIf=\"getChoosenPlan() && chosenPlanIsPdf\" [src]=\"getChoosenPlan().filepath | safeUrl\"\r\n                type=\"application/pdf\" frameBorder=\"0\" scrolling=\"auto\" height=\"650px;\" width=\"100%\" />\r\n            <div *ngIf=\"!chosenPlanIsPdf\" class=\"row\" style=\"height: 500px; overflow: hidden;\" id=\"canvasDiv\">\r\n                <canvas id=\"canvas\" width=\"4096px\" height=\"4096px\">\r\n                    <!-- <img *ngIf=\"chosenPlan\" id=\"plan-image\" [src]=\"chosenPlan.filepath\" style=\"width: 100%;\"> -->\r\n                </canvas>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\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"], dependencies: [{ kind: "directive", type: i4$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i4$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i4$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i4$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i2.SafeUrlPipe, name: "safeUrl" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PlansComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-plans', template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\" class=\"dashboard-tab\">\r\n    <div class=\"m-3\">\r\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\r\n        <div class=\"spinner-border\" role=\"status\">\r\n            <span class=\"visually-hidden\">Loading...</span>\r\n        </div>\r\n    </div>\r\n    <div class=\"mt-3\" *ngIf=\"!plans && !loading\">\r\n        <h4 style=\"font-weight: bold;\">{{'No imported plans' | translate }}</h4>\r\n        <p>{{'For import from 3D visit: go Virtual Visits => Import Images' | translate}}</p>\r\n    </div>\r\n    <div class=\"row ms-1\">\r\n        <div ngbDropdown class=\"d-inline-block me-3\">\r\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>{{getChoosenPlan() ?\r\n                getChoosenPlan().name: ('Choose Plan' | translate) }}</button>\r\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                <button ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\">{{plan.name }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"d-inline-block\" ngbDropdown #myDrop=\"ngbDropdown\">\r\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownManual\" ngbDropdownToggle>{{'Choose action' |\r\n                translate}}</button>\r\n            <div ngbDropdownMenu aria-labelledby=\"dropdownManual\">\r\n                <button (click)=\"onCalibrateClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Calibrate' |\r\n                    translate}}</button>\r\n                <button (click)=\"onEditClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Edit plan' |\r\n                    translate}}\r\n                </button>\r\n                <button (click)=\"onUploadClick()\" ngbDropdownItem>{{'Upload new plan' | translate}}</button>\r\n                <button (click)=\"onDownloadClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Download plan' |\r\n                    translate}}</button>\r\n                <button (click)=\"onRemoveClick()\" ngbDropdownItem\r\n                    [disabled]=\"!getChoosenPlan() || getChoosenPlan().isImportedMatterport\">{{'Delete plan' |\r\n                    translate}}</button>\r\n                <!-- <button (click)=\"onDownloadAsPng()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">\r\n                    {{'Download plan as PNG' | translate}}</button> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"row mt-3 ms-0\">\r\n        <h4 *ngIf=\"fileToUpload\">{{'New plan' | translate }}</h4>\r\n        <input class=\"hidden\" type=\"file\" id=\"upload-file\" name=\"upload-file\" accept=\"image/png, image/jpeg, .pdf, .svg\"\r\n            ngf-max-size=\"6MB\" (change)=\"addPlan($event.target)\">\r\n    </div>\r\n    <div class=\"col-md-6 mt-3\" *ngIf=\"planForm\">\r\n        <form (ngSubmit)=\"onSavePlan()\" [formGroup]=\"planForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3\">{{'Name' | translate}} </label>\r\n                <div class=\"col-sm-9\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\">\r\n                </div>\r\n            </div>\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3\">{{'Zone' | translate}} </label>\r\n                <div class=\"col-sm-9\">\r\n                    <select class=\"form-control\" formControlName=\"zoneID\">\r\n                        <option *ngFor=\"let zone of zones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3\">{{'Set as current plan for zone' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input type=\"checkbox\" [(ngModel)]=\"isCurrentPlanForZone\" [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n            <button [disabled]=\"planForm.invalid\" type='submit' class=\"btn btn-label-file rounded-pill\">{{'Save' |\r\n                translate}}</button>\r\n            <button class=\"btn btn-label-file rounded-pill ms-3\" type=\"button\" (click)=\"onCancelUpload()\">{{'Cancel' |\r\n                translate}}</button>\r\n        </form>\r\n    </div>\r\n    <ul class=\"col-md-6 list-group list-group-flush\" *ngIf=\"getChoosenPlan()\">\r\n        <li class=\"list-group-item bg-transparent\">{{'Name' | translate }} : {{getChoosenPlan().name}} </li>\r\n        <li class=\"list-group-item bg-transparent\"> {{'Plan is ' | translate }} :\r\n            {{getChoosenPlan().calibration ? ('Calibrated' | translate) : ('Not calibrated' | translate)}}</li>\r\n        <li class=\"list-group-item bg-transparent\">{{'Attributed to zone ' | translate }} :\r\n            {{getChoosenPlan().zone ? getChoosenPlan().zone.name : 'None'}}</li>\r\n        <li class=\"list-group-item bg-transparent\">{{'Is current plan for zone ' | translate }} :\r\n            <input type=\"checkbox\" [(ngModel)]=\"getChoosenPlan().isCurrentForZone\" (change)=\"onCurrentPlanClick()\">\r\n        </li>\r\n\r\n    </ul>\r\n\r\n    <div class=\"row mt-4\">\r\n        <div class=\"col-md-10\">\r\n            <embed *ngIf=\"getChoosenPlan() && chosenPlanIsPdf\" [src]=\"getChoosenPlan().filepath | safeUrl\"\r\n                type=\"application/pdf\" frameBorder=\"0\" scrolling=\"auto\" height=\"650px;\" width=\"100%\" />\r\n            <div *ngIf=\"!chosenPlanIsPdf\" class=\"row\" style=\"height: 500px; overflow: hidden;\" id=\"canvasDiv\">\r\n                <canvas id=\"canvas\" width=\"4096px\" height=\"4096px\">\r\n                    <!-- <img *ngIf=\"chosenPlan\" id=\"plan-image\" [src]=\"chosenPlan.filepath\" style=\"width: 100%;\"> -->\r\n                </canvas>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\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.UntypedFormBuilder }, { type: i3.TranslateService }, { type: i2.NavigatorService }]; } });
-
-class ChevronComponent {
-    constructor() {
-        this.conditionShowing = false;
-    }
-    ngOnInit() {
-    }
-}
-ChevronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChevronComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChevronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChevronComponent, selector: "lib-chevron", inputs: { conditionShowing: "conditionShowing" }, ngImport: i0, template: "<div style=\"height: 30px; width: 30px;\">\r\n    <span class=\"icon-container\" >\r\n      <div [class]=\"conditionShowing ? 'icon-img-up' : 'icon-img-down'\"></div>\r\n    </span>\r\n</div>\r\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: "15.2.10", ngImport: i0, type: ChevronComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-chevron', template: "<div style=\"height: 30px; width: 30px;\">\r\n    <span class=\"icon-container\" >\r\n      <div [class]=\"conditionShowing ? 'icon-img-up' : 'icon-img-down'\"></div>\r\n    </span>\r\n</div>\r\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.imagesUploaded = 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();
-        });
-    }
-    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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.visitIndexDetails = index === this.visitIndexDetails ? -1 : index;
-            this.imagesUploaded = yield this.matterportImportService.getUploadedImageCount(this.visits[index].model3d);
-        });
-    }
-    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, overrideExisting = 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);
-                yield this.matterportImportService.importData(this.spaceId, surface, imagesOnly, node, overrideExisting);
-                this.modalReference.close();
-            }
-            catch (error) {
-                console.log(error);
-                Promise.reject(error);
-            }
-        });
-    }
-    cancelImport() {
-        this.matterportImportService.abandon();
-        this.onCancel();
-        this.resetVisits();
-    }
-    onImportImages(visit, overrideExisting) {
-        this.launchImport(visit.model3d, null, visit.node.id, true, overrideExisting);
-    }
-    isFormError(control) {
-        return control && control.invalid && this.errorForm;
-    }
-}
-VisitsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VisitsComponent, deps: [{ token: i1$2.UntypedFormBuilder }, { token: i2.MatterportImportService }, { token: i2.CaptureService }, { token: i2.NodeService }, { token: i2.SpaceService }, { token: i1.ActivatedRoute }, { token: i4$1.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: "14.0.0", version: "15.2.10", type: VisitsComponent, selector: "lib-visits", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"container-fluid\" class=\"dashboard-tab\">\r\n    <div class=\"m-3\">\r\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n\r\n    <div class=\"row main-form-container\">\r\n        <div class=\"col-md-6 form-container\">\r\n            <ul class=\"list-group list-group-flush\" *ngIf=\"!visitForm\">\r\n                <li class=\"list-group-item list-group-item-action\" *ngFor=\"let visit of visits; index as index\">\r\n                    <div class=\"d-flex justify-content-between align-items-center\" (click)=\"onToggleDetail(index)\">\r\n                        {{visit.name ? visit.name : visit.model3d }}\r\n                        <lib-chevron [conditionShowing]=\"index==visitIndexDetails\"></lib-chevron>\r\n                    </div>\r\n                    <div *ngIf=\"index==visitIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                            <li class=\"list-group-item bg-transparent\">{{'Name' | translate}} : {{ visit.name ?\r\n                                visit.name : \"Not provided\" | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'3D Model' | translate}} : {{ visit.model3d }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Surface' | translate}}, m<sup>2</sup>: {{\r\n                                visit.surface ?\r\n                                visit.surface : 'Not provided' | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Viewer' | translate}} : {{ visit.viewer }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Date of capture' | translate}} : {{\r\n                                visit.takenAt | timeDateString | async}}\r\n                                <li class=\"list-group-item bg-transparent\">{{'Images are imported' | translate}} : {{\r\n                                    imagesUploaded }}\r\n                                </li>\r\n                        </ul>\r\n                        \r\n                        <lib-loader *ngIf=\"isProcessing\"></lib-loader>\r\n\r\n                        <div class=\"action-button-container mt-3\">\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onImportImages(visit, true)\" [disabled]=\"isProcessing\">{{'Import all images' |\r\n                            translate}}</button>\r\n                            <button type=\"button\" *ngIf=\"imagesUploaded > 0\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onImportImages(visit, false)\" [disabled]=\"isProcessing\">{{'Import from image' |\r\n                                translate}} {{imagesUploaded}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" [disabled]=\"isProcessing\"\r\n                            (click)=\"onEdit(visit)\">{{'Edit' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" [disabled]=\"isProcessing\"\r\n                            (click)=\"onDelete(visit)\">{{'Delete' | translate}}</button>\r\n                    </div>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n            <div *ngIf=\"visitForm\">\r\n                <form (ngSubmit)=\"onSubmitVisit()\" [formGroup]=\"visitForm\">\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"name\">\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Reference 3D model' | translate}} *</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" [readonly]=\"isEditing\"\r\n                                [class.is-invalid]=\"model3D.invalid && visitSubmitted\" required\r\n                                formControlName=\"model3D\">\r\n                            <div class=\"invalid-feedback\">\r\n                                <ngb-alert data-testid=\"new-location-name-invalid\" [dismissible]=\"false\" type=\"danger\" \r\n                                *ngIf=\"validatorsService.isControlError(visitForm.controls['name']) \r\n                                    ||  isFormError(visitForm.controls['name'])\">\r\n                                      {{validatorsService.getError(visitForm.controls['name']) | translate}}\r\n                                </ngb-alert>\r\n                            </div>\r\n                            <div *ngIf=\"isEditing\" class=\"text-danger\">\r\n                                {{'Cannot change 3D model reference. Please add new model.' | translate}}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Viewer' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"viewer\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Capture Date' | translate}}</label>\r\n                        <div class=\"input-group\">\r\n                            <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"captureDate\" ngbDatepicker\r\n                                #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                            <div class=\"input-group-append\">\r\n                                <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\"\r\n                                    type=\"button\"></button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\r\n                        translate}}</button>\r\n                    <div class=\"invalid-feedback\" *ngIf=\"errorForm\">\r\n                            <ngb-alert data-testid=\"new-location-form-invalid\" [dismissible]=\"false\" type=\"danger\">\r\n                              {{'errorForm.infoBtn' |translate}}\r\n                      \r\n                            </ngb-alert>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n            <div *ngIf=\"!visitForm\">\r\n                <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onAddVisit()\">{{'Add 3D visit' |\r\n                    translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div id=\"viewer-frame\" style=\"width: 100%; aspect-ratio: 2/1;\"></div>\r\n    </div>\r\n    <ng-template #content let-modal>\r\n        <div class=\"modal-header\">\r\n            <h4 class=\"modal-title\" id=\"modal-basic-title\">{{'Importing Data' | translate}}</h4>\r\n            <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n                <span aria-hidden=\"true\">\u00D7</span>\r\n            </button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n            {{'Please do not leave or refresh this page...' | translate}}\r\n            <div *ngIf=\"totalImages != 0\">Imported {{imagesProcessed}} out of {{totalImages}} images.</div>\r\n            <div class=\"d-flex justify-content-center\">\r\n                <div class=\"spinner-border\" role=\"status\">\r\n                    <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-outline-dark\" [disabled]=\"!canCancelImport\"\r\n                (click)=\"modal.close('Cancel click')\">{{'Cancel import of images' | translate}}</button>\r\n        </div>\r\n    </ng-template>\r\n</div>", styles: [".col-form-label{width:180px;margin-bottom:1rem}.btn-outline-primary{width:200px;margin-right:1rem}.input-group{width:83%;height:-moz-fit-content;height:fit-content}.main-form-container{width:60vw;display:flex;flex-direction:column}@media screen and (max-width: 765px){.main-form-container{width:90vw}}.main-form-container .form-container{width:100%}\n"], dependencies: [{ kind: "component", type: i4$1.NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }, { kind: "directive", type: i4$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.LoaderComponent, selector: "lib-loader", inputs: ["useLogo", "color"] }, { kind: "component", type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { kind: "component", type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i2.TimeDateToLocalStringPipe, name: "timeDateString" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VisitsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-visits', template: "<div class=\"container-fluid\" class=\"dashboard-tab\">\r\n    <div class=\"m-3\">\r\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n\r\n    <div class=\"row main-form-container\">\r\n        <div class=\"col-md-6 form-container\">\r\n            <ul class=\"list-group list-group-flush\" *ngIf=\"!visitForm\">\r\n                <li class=\"list-group-item list-group-item-action\" *ngFor=\"let visit of visits; index as index\">\r\n                    <div class=\"d-flex justify-content-between align-items-center\" (click)=\"onToggleDetail(index)\">\r\n                        {{visit.name ? visit.name : visit.model3d }}\r\n                        <lib-chevron [conditionShowing]=\"index==visitIndexDetails\"></lib-chevron>\r\n                    </div>\r\n                    <div *ngIf=\"index==visitIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                            <li class=\"list-group-item bg-transparent\">{{'Name' | translate}} : {{ visit.name ?\r\n                                visit.name : \"Not provided\" | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'3D Model' | translate}} : {{ visit.model3d }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Surface' | translate}}, m<sup>2</sup>: {{\r\n                                visit.surface ?\r\n                                visit.surface : 'Not provided' | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Viewer' | translate}} : {{ visit.viewer }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Date of capture' | translate}} : {{\r\n                                visit.takenAt | timeDateString | async}}\r\n                                <li class=\"list-group-item bg-transparent\">{{'Images are imported' | translate}} : {{\r\n                                    imagesUploaded }}\r\n                                </li>\r\n                        </ul>\r\n                        \r\n                        <lib-loader *ngIf=\"isProcessing\"></lib-loader>\r\n\r\n                        <div class=\"action-button-container mt-3\">\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onImportImages(visit, true)\" [disabled]=\"isProcessing\">{{'Import all images' |\r\n                            translate}}</button>\r\n                            <button type=\"button\" *ngIf=\"imagesUploaded > 0\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onImportImages(visit, false)\" [disabled]=\"isProcessing\">{{'Import from image' |\r\n                                translate}} {{imagesUploaded}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" [disabled]=\"isProcessing\"\r\n                            (click)=\"onEdit(visit)\">{{'Edit' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" [disabled]=\"isProcessing\"\r\n                            (click)=\"onDelete(visit)\">{{'Delete' | translate}}</button>\r\n                    </div>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n            <div *ngIf=\"visitForm\">\r\n                <form (ngSubmit)=\"onSubmitVisit()\" [formGroup]=\"visitForm\">\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"name\">\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Reference 3D model' | translate}} *</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" [readonly]=\"isEditing\"\r\n                                [class.is-invalid]=\"model3D.invalid && visitSubmitted\" required\r\n                                formControlName=\"model3D\">\r\n                            <div class=\"invalid-feedback\">\r\n                                <ngb-alert data-testid=\"new-location-name-invalid\" [dismissible]=\"false\" type=\"danger\" \r\n                                *ngIf=\"validatorsService.isControlError(visitForm.controls['name']) \r\n                                    ||  isFormError(visitForm.controls['name'])\">\r\n                                      {{validatorsService.getError(visitForm.controls['name']) | translate}}\r\n                                </ngb-alert>\r\n                            </div>\r\n                            <div *ngIf=\"isEditing\" class=\"text-danger\">\r\n                                {{'Cannot change 3D model reference. Please add new model.' | translate}}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Viewer' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"viewer\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Capture Date' | translate}}</label>\r\n                        <div class=\"input-group\">\r\n                            <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"captureDate\" ngbDatepicker\r\n                                #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                            <div class=\"input-group-append\">\r\n                                <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\"\r\n                                    type=\"button\"></button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\r\n                        translate}}</button>\r\n                    <div class=\"invalid-feedback\" *ngIf=\"errorForm\">\r\n                            <ngb-alert data-testid=\"new-location-form-invalid\" [dismissible]=\"false\" type=\"danger\">\r\n                              {{'errorForm.infoBtn' |translate}}\r\n                      \r\n                            </ngb-alert>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n            <div *ngIf=\"!visitForm\">\r\n                <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onAddVisit()\">{{'Add 3D visit' |\r\n                    translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div id=\"viewer-frame\" style=\"width: 100%; aspect-ratio: 2/1;\"></div>\r\n    </div>\r\n    <ng-template #content let-modal>\r\n        <div class=\"modal-header\">\r\n            <h4 class=\"modal-title\" id=\"modal-basic-title\">{{'Importing Data' | translate}}</h4>\r\n            <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n                <span aria-hidden=\"true\">\u00D7</span>\r\n            </button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n            {{'Please do not leave or refresh this page...' | translate}}\r\n            <div *ngIf=\"totalImages != 0\">Imported {{imagesProcessed}} out of {{totalImages}} images.</div>\r\n            <div class=\"d-flex justify-content-center\">\r\n                <div class=\"spinner-border\" role=\"status\">\r\n                    <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-outline-dark\" [disabled]=\"!canCancelImport\"\r\n                (click)=\"modal.close('Cancel click')\">{{'Cancel import of images' | translate}}</button>\r\n        </div>\r\n    </ng-template>\r\n</div>", styles: [".col-form-label{width:180px;margin-bottom:1rem}.btn-outline-primary{width:200px;margin-right:1rem}.input-group{width:83%;height:-moz-fit-content;height:fit-content}.main-form-container{width:60vw;display:flex;flex-direction:column}@media screen and (max-width: 765px){.main-form-container{width:90vw}}.main-form-container .form-container{width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.UntypedFormBuilder }, { type: i2.MatterportImportService }, { type: i2.CaptureService }, { type: i2.NodeService }, { type: i2.SpaceService }, { type: i1.ActivatedRoute }, { type: i4$1.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 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: "15.2.10", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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)\">\r\n    <ng-template *ngFor=\"let image of images; let i = index\" ngbSlide [id]=\"'slideId_' + i\">\r\n        <div class=\"picsum-img-wrapper\">\r\n            <img [src]=\"image.path\" alt=\"Scan\" class=\"d-block w-100\">\r\n        </div>\r\n        <div class=\"carousel-caption\">\r\n            <h3>{{image.title}}</h3>\r\n            <p>{{image.description}}</p>\r\n        </div>\r\n    </ng-template>\r\n</ngb-carousel>\r\n\r\n<img *ngIf=\"images.length === 1\" [src]=\"images[0].path\" alt=\"Scan\" class=\"d-block w-100\">\r\n", styles: [""], dependencies: [{ kind: "component", type: i4$1.NgbCarousel, selector: "ngb-carousel", inputs: ["animation", "activeId", "interval", "wrap", "keyboard", "pauseOnHover", "pauseOnFocus", "showNavigationArrows", "showNavigationIndicators"], outputs: ["slide", "slid"], exportAs: ["ngbCarousel"] }, { kind: "directive", type: i4$1.NgbSlide, selector: "ng-template[ngbSlide]", inputs: ["id"], outputs: ["slid"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CarouselComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-carousel', template: "<ngb-carousel [interval]=\"5000\" *ngIf=\"images && images.length > 1\" (slide)=\"onSlide($event)\">\r\n    <ng-template *ngFor=\"let image of images; let i = index\" ngbSlide [id]=\"'slideId_' + i\">\r\n        <div class=\"picsum-img-wrapper\">\r\n            <img [src]=\"image.path\" alt=\"Scan\" class=\"d-block w-100\">\r\n        </div>\r\n        <div class=\"carousel-caption\">\r\n            <h3>{{image.title}}</h3>\r\n            <p>{{image.description}}</p>\r\n        </div>\r\n    </ng-template>\r\n</ngb-carousel>\r\n\r\n<img *ngIf=\"images.length === 1\" [src]=\"images[0].path\" alt=\"Scan\" class=\"d-block w-100\">\r\n" }]
-        }], 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: "15.2.10", ngImport: i0, type: SelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SelectionComponent, selector: "lib-selection", outputs: { onSelectionChanged: "onSelectionChanged" }, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n<div id=\"selection\"></div>", styles: ["#selection{will-change:top,left,width,height;top:0;left:0;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: "15.2.10", ngImport: i0, type: SelectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-selection', template: "<ng-content></ng-content>\r\n\r\n<div id=\"selection\"></div>", styles: ["#selection{will-change:top,left,width,height;top:0;left:0;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: "15.2.10", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RadioButtonComponent, selector: "lib-radio-button", inputs: { label: "label" }, outputs: { isCheckedEvent: "isCheckedEvent" }, ngImport: i0, template: "<div class=\"checkboxContainer\">\r\n  <div class=\"switchContainer\">\r\n    <label class=\"switch switch-success\">\r\n      <input type=\"checkbox\" [(ngModel)]=\"isChecked\" (change)=\"onChecked()\">\r\n      <span class=\"slider round\"></span>\r\n    </label>\r\n  </div>\r\n  <span class=\"label right\">{{label | translate}}</span>\r\n</div>", 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;inset: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"], dependencies: [{ kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadioButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-radio-button', template: "<div class=\"checkboxContainer\">\r\n  <div class=\"switchContainer\">\r\n    <label class=\"switch switch-success\">\r\n      <input type=\"checkbox\" [(ngModel)]=\"isChecked\" (change)=\"onChecked()\">\r\n      <span class=\"slider round\"></span>\r\n    </label>\r\n  </div>\r\n  <span class=\"label right\">{{label | translate}}</span>\r\n</div>", 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;inset: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 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: "15.2.10", ngImport: i0, type: PlanLegendComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-PlanLegendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PlanLegendComponent, selector: "lib-plan-legend", inputs: { isAudioZone: "isAudioZone" }, ngImport: i0, template: "<div class=\"mt-3 ms-3\" class=\"legendContainer\">\r\n    <h5>{{\"legend.title\" | translate}}</h5>\r\n    <div class=\"legendBox\">\r\n        <div class=\"legendRow\" *ngFor=\"let elemnt of buttonsToRender\">\r\n            <button class=\"legendIcon\" [ngStyle] = \"{'background-image': elemnt.url}\"></button>\r\n            <span>{{elemnt.text}}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\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"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PlanLegendComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-plan-legend', template: "<div class=\"mt-3 ms-3\" class=\"legendContainer\">\r\n    <h5>{{\"legend.title\" | translate}}</h5>\r\n    <div class=\"legendBox\">\r\n        <div class=\"legendRow\" *ngFor=\"let elemnt of buttonsToRender\">\r\n            <button class=\"legendIcon\" [ngStyle] = \"{'background-image': elemnt.url}\"></button>\r\n            <span>{{elemnt.text}}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\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 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: "15.2.10", 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: "14.0.0", version: "15.2.10", 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\">\r\n    <div class=\"col-sm-3\" *ngIf=\"plans\">\r\n            <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                ngbDropdownToggle>{{chosenPlan ?\r\n                chosenPlan.name : ('Choose Plan' | translate) }}</button>\r\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                <button type=\"button\" ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\"\r\n                    [disabled]=\"!plan.calibration\">{{ plan.name }}\r\n                </button>\r\n            </div>\r\n    </div>\r\n</div>\r\n<div class=\"sp-row\">\r\n    <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\r\n        <lib-plan-legend [isAudioZone]=\"editingAudioZone\" *ngIf=\"buttonElements.length > 0\"></lib-plan-legend>\r\n        <div class=\"selectZone\" oncontextmenu=\"return false;\">\r\n            <div class=\"sp-row\">\r\n                <div style=\"overflow: hidden;width:100%;\">\r\n                    <div style=\"height: 400px; width: 100%;\" id=\"planDiv\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </lib-selection>\r\n    \r\n    <div class=\"col-md-4 scanTool\" *ngIf=\"buttonElements.length > 0\">\r\n        <div class=\"sp-row d-inline-block\">\r\n            <h2>{{'selectTool.title' | translate}}</h2>\r\n            <div class=\"protip\">{{'selectTool.tip' | translate}}.</div>\r\n        </div>\r\n    \r\n        <div class=\"sp-row\">\r\n            <div class=\"col-3\" style=\"padding:0px\">\r\n                <label class=\"tool-label\" for=\"scanSize\">{{'selectTool.size' | translate}}</label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <input type=\"range\" class=\"form-range\" min=\"0.001\" max=\"5\" step=\"0.01\" value=\"1\"\r\n                    id=\"scanSize\" (input)=\"onChangeScanSize($event)\">\r\n            </div>\r\n        </div>\r\n    \r\n        <div class=\"sp-row\">\r\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectAll()\">{{'selectTool.selectAll' | translate}}</button>\r\n        </div>\r\n    \r\n        <div *ngIf=\"buttonsInSelection.length > 0\" class=\"edit-selected\">\r\n            <span class=\"tool-label\">{{'selectTool.edit' | translate}} : </span>\r\n            <div class=\"sp-row\">\r\n                <button class=\"btn rounded-pill btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">{{'selectTool.add' | translate}}</button>\r\n                <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectionRemove()\">{{'selectTool.undo' | translate}}</button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"sp-row\">\r\n            <div *ngIf=\"multipleFloors\"> \r\n                {{ chosenSweepsPerFloor.get(chosenPlan.zoneID) ? chosenSweepsPerFloor.get(chosenPlan.zoneID).length : \"0\"}} {{'scan points selected on this floor' | translate}} \r\n                <button class=\"btn btn-primary rounded-pill\" (click)=\"onValidateForFloor()\" [disabled]=\"!selectionChanged\">{{'Update selection for this floor' | translate}}</button>\r\n            </div>\r\n            <div *ngIf=\"!multipleFloors\">\r\n                {{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}  \r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!editingAudioZone\" class=\"sp-row\">\r\n            <lib-radio-button  label=\"{{ 'selectTool.chooseStartPoint'  | translate }}\" (isCheckedEvent)=\"isSettingStartSweep=!isSettingStartSweep\"></lib-radio-button>\r\n        </div>\r\n        <div class=\"sp-row\">\r\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSaveSelection()\">{{'selectTool.saveSelection' | translate}}</button>\r\n            <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'selectTool.cancelSelection' | translate}}</button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n   \r\n", styles: [".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"], dependencies: [{ kind: "directive", type: i4$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i4$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i4$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i4$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SelectionComponent, selector: "lib-selection", outputs: ["onSelectionChanged"] }, { kind: "component", type: RadioButtonComponent, selector: "lib-radio-button", inputs: ["label"], outputs: ["isCheckedEvent"] }, { kind: "component", type: PlanLegendComponent, selector: "lib-plan-legend", inputs: ["isAudioZone"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SweepPlanSelectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-sweep-plan-selection', template: "<div ngbDropdown class=\"sp-row d-inline-block\">\r\n    <div class=\"col-sm-3\" *ngIf=\"plans\">\r\n            <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                ngbDropdownToggle>{{chosenPlan ?\r\n                chosenPlan.name : ('Choose Plan' | translate) }}</button>\r\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                <button type=\"button\" ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\"\r\n                    [disabled]=\"!plan.calibration\">{{ plan.name }}\r\n                </button>\r\n            </div>\r\n    </div>\r\n</div>\r\n<div class=\"sp-row\">\r\n    <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\r\n        <lib-plan-legend [isAudioZone]=\"editingAudioZone\" *ngIf=\"buttonElements.length > 0\"></lib-plan-legend>\r\n        <div class=\"selectZone\" oncontextmenu=\"return false;\">\r\n            <div class=\"sp-row\">\r\n                <div style=\"overflow: hidden;width:100%;\">\r\n                    <div style=\"height: 400px; width: 100%;\" id=\"planDiv\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </lib-selection>\r\n    \r\n    <div class=\"col-md-4 scanTool\" *ngIf=\"buttonElements.length > 0\">\r\n        <div class=\"sp-row d-inline-block\">\r\n            <h2>{{'selectTool.title' | translate}}</h2>\r\n            <div class=\"protip\">{{'selectTool.tip' | translate}}.</div>\r\n        </div>\r\n    \r\n        <div class=\"sp-row\">\r\n            <div class=\"col-3\" style=\"padding:0px\">\r\n                <label class=\"tool-label\" for=\"scanSize\">{{'selectTool.size' | translate}}</label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <input type=\"range\" class=\"form-range\" min=\"0.001\" max=\"5\" step=\"0.01\" value=\"1\"\r\n                    id=\"scanSize\" (input)=\"onChangeScanSize($event)\">\r\n            </div>\r\n        </div>\r\n    \r\n        <div class=\"sp-row\">\r\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectAll()\">{{'selectTool.selectAll' | translate}}</button>\r\n        </div>\r\n    \r\n        <div *ngIf=\"buttonsInSelection.length > 0\" class=\"edit-selected\">\r\n            <span class=\"tool-label\">{{'selectTool.edit' | translate}} : </span>\r\n            <div class=\"sp-row\">\r\n                <button class=\"btn rounded-pill btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">{{'selectTool.add' | translate}}</button>\r\n                <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectionRemove()\">{{'selectTool.undo' | translate}}</button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"sp-row\">\r\n            <div *ngIf=\"multipleFloors\"> \r\n                {{ chosenSweepsPerFloor.get(chosenPlan.zoneID) ? chosenSweepsPerFloor.get(chosenPlan.zoneID).length : \"0\"}} {{'scan points selected on this floor' | translate}} \r\n                <button class=\"btn btn-primary rounded-pill\" (click)=\"onValidateForFloor()\" [disabled]=\"!selectionChanged\">{{'Update selection for this floor' | translate}}</button>\r\n            </div>\r\n            <div *ngIf=\"!multipleFloors\">\r\n                {{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}  \r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!editingAudioZone\" class=\"sp-row\">\r\n            <lib-radio-button  label=\"{{ 'selectTool.chooseStartPoint'  | translate }}\" (isCheckedEvent)=\"isSettingStartSweep=!isSettingStartSweep\"></lib-radio-button>\r\n        </div>\r\n        <div class=\"sp-row\">\r\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSaveSelection()\">{{'selectTool.saveSelection' | translate}}</button>\r\n            <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'selectTool.cancelSelection' | translate}}</button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n   \r\n", styles: [".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: "15.2.10", ngImport: i0, type: AddZoneComponent, deps: [{ token: i1$2.UntypedFormBuilder }, { token: i2.ZoneService }, { token: i2.LayerService }, { token: i2.BaseUserService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-AddZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AddZoneComponent, selector: "lib-add-zone", inputs: { zoneEdit: "zoneEdit", spaceID: "spaceID", images360: "images360", navigationIDs: "navigationIDs", zones: "zones", newZoneDataFromEditor: "newZoneDataFromEditor", chosenPlan: "chosenPlan", isMuseumVisit: "isMuseumVisit", defaultZone: "defaultZone" }, outputs: { updatedZone: "updatedZone" }, ngImport: i0, template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'codeRef' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"code_ref\">\r\n                </div>\r\n            </div>\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                    <div *ngIf=\"newLayer.invalid && (newLayer.dirty || newLayer.touched)\" class=\"text-danger\">\r\n                        <div *ngIf=\"newLayer.errors?.['forbiddenName']\">\r\n                            {{'Layer exists already' | translate}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneEdit || zoneEdit.isMultipleFloorZone\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\"\r\n                        [disabled]=\"zoneEdit !== undefined && zoneEdit !== null\" (change)=\"onChangeMultipleFloors()\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                    <div class='text-danger' *ngIf=\"zoneEdit\">\r\n                        {{'cannotChangeMultifloor' | translate}}\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input *ngIf=\"zoneEdit\" type=\"text\" class=\"form-control\" formControlName=\"parent\">\r\n                    <div class=\"text-danger\" *ngIf=\"zoneEdit\">\r\n                        {{'cannotChangeParent' | translate}}\r\n                    </div>\r\n                    <select *ngIf=\"!zoneEdit\" class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div> -->\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                        (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'add-all-scans' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\"\r\n                    [disabled]=\"fromPlan || !zoneForm.valid\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [newZoneData]=\"newZoneDataFromEditor\" [spaceID]=\"spaceID\"\r\n            [multipleFloors]=\"multipleFloors\" [inputZone]=\"zoneEdit\"\r\n            (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}h2{color:var(--smarterplan-primary);padding:0}.col-form-label{margin-bottom:1rem}.btn-outline-primary{margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}p{margin:0;padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px)}button{min-width:80px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }, { kind: "component", type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "occupiedSweeps", "unavailableSweeps", "editingAudioZone", "inputZone", "multipleFloors"], outputs: ["sweepsSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddZoneComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-add-zone', template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'codeRef' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"code_ref\">\r\n                </div>\r\n            </div>\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                    <div *ngIf=\"newLayer.invalid && (newLayer.dirty || newLayer.touched)\" class=\"text-danger\">\r\n                        <div *ngIf=\"newLayer.errors?.['forbiddenName']\">\r\n                            {{'Layer exists already' | translate}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneEdit || zoneEdit.isMultipleFloorZone\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\"\r\n                        [disabled]=\"zoneEdit !== undefined && zoneEdit !== null\" (change)=\"onChangeMultipleFloors()\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                    <div class='text-danger' *ngIf=\"zoneEdit\">\r\n                        {{'cannotChangeMultifloor' | translate}}\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input *ngIf=\"zoneEdit\" type=\"text\" class=\"form-control\" formControlName=\"parent\">\r\n                    <div class=\"text-danger\" *ngIf=\"zoneEdit\">\r\n                        {{'cannotChangeParent' | translate}}\r\n                    </div>\r\n                    <select *ngIf=\"!zoneEdit\" class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div> -->\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                        (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'add-all-scans' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\"\r\n                    [disabled]=\"fromPlan || !zoneForm.valid\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [newZoneData]=\"newZoneDataFromEditor\" [spaceID]=\"spaceID\"\r\n            [multipleFloors]=\"multipleFloors\" [inputZone]=\"zoneEdit\"\r\n            (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}h2{color:var(--smarterplan-primary);padding:0}.col-form-label{margin-bottom:1rem}.btn-outline-primary{margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}p{margin:0;padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px)}button{min-width:80px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.UntypedFormBuilder }, { 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: "15.2.10", ngImport: i0, type: AddAudioZoneComponent, deps: [{ token: i1$2.UntypedFormBuilder }, { 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: "14.0.0", version: "15.2.10", type: AddAudioZoneComponent, selector: "lib-add-audio-zone", inputs: { spaceID: "spaceID", defaultZone: "defaultZone", zones: "zones", parentZone: "parentZone", currentAudioZone: "currentAudioZone" }, outputs: { updatedZone: "updatedZone" }, ngImport: i0, template: "<div class=\"main-container\">\r\n    <div class=\"col-lg-6 col-md-6 col-sm-7\" *ngIf=\"isAddingAudio\">\r\n        <form (ngSubmit)=\"onUploadAudio()\" [formGroup]=\"commentForm\">\r\n                <div class=\"mb-3 row\">\r\n                    <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                    <div class=\"col-sm-10\">\r\n                        <input type=\"text\" class=\"form-control\" required formControlName=\"title\">\r\n                    </div>\r\n                </div>\r\n                <div>\r\n                    <label for=\"file\" class=\"btn btn-label-file rounded-pill\">\r\n                        <input type=\"file\" id=\"file\" (change)=\"handleFileInput($event)\" />\r\n                        {{'Choose File' | translate}}</label>\r\n                    <p *ngIf=\"fileToUpload\">{{ fileToUpload.name}}</p>\r\n                </div>\r\n                <div class=\"d-flex justify-content-center\" *ngIf=\"working\">\r\n                    <lib-loader></lib-loader>\r\n                </div>\r\n                \r\n                <div class=\"mt-3\">\r\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || working\">{{'Upload' | translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancelAudioUpload()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                        {{'Cancel' | translate}}</button>\r\n                </div>\r\n        </form>\r\n    </div>\r\n    <ngb-alert type=\"success\" [dismissible]=\"true\" *ngIf=\"!working && audioUploaded\" (closed)=\"audioUploaded=false\">\r\n        {{ 'add-audio.success' | translate }} !\r\n    </ngb-alert>\r\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio && audiosForSpace\">\r\n       \r\n        <div class=\"instruction-row\" >\r\n            <p>1.</p>\r\n            <div ngbDropdown class=\"d-inline-block\">\r\n                <div>\r\n                        <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                            ngbDropdownToggle>{{chosenAudio ?\r\n                                chosenAudio.title : ('choose-audio' | translate) }}</button>\r\n                        <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                            <button type=\"button\" ngbDropdownItem *ngFor=\"let audio of audiosForSpace\" \r\n                                (click)=\"onChooseAudio(audio)\">{{ audio.title }}\r\n                            </button>\r\n                        </div>\r\n                </div>\r\n            </div>\r\n            <p>{{'or' | translate}}</p>\r\n            <button (click)=\"isAddingAudio=true\" class=\"btn btn-primary rounded-pill me-2\"> {{'add-audio.add' | translate}}</button>\r\n        </div>\r\n        <div class=\"instruction-row\">\r\n            <p>2.</p>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\" [disabled]=\"!chosenAudio\">\r\n                    {{'Choose scan points on plan' | translate}}</button>\r\n\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onDeleteAudio()\" [disabled]=\"!chosenAudio\">\r\n                        {{'Delete audio' | translate}}</button>\r\n            \r\n        </div>\r\n        <div class=\"instruction-row\" *ngIf=\"chosenAudio\">\r\n            <p>{{ chosenScansOnPlan.length }} {{'scans-chosen-audio' | translate}}</p>\r\n        </div>\r\n\r\n        <div class=\"mt-3\">\r\n            <button class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || !this.chosenAudio\" (click)=\"onSubmit()\">{{'Save' | translate}}</button>\r\n            <button (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [inputZone]=\"currentAudioZone\" [spaceID]=\"spaceID\" \r\n        [occupiedSweeps]=\"occupiedSweeps\" [unavailableSweeps]=\"unavailableSweeps\" [editingAudioZone]=\"true\"\r\n        (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>\r\n", styles: [".instruction-row{display:flex;align-items:center;margin-top:1rem}.instruction-row button{margin-bottom:0}.instruction-row p{margin-bottom:0;margin-left:5px;margin-right:5px}\n"], dependencies: [{ kind: "component", type: i4$1.NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }, { kind: "directive", type: i4$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i4$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i4$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i4$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.LoaderComponent, selector: "lib-loader", inputs: ["useLogo", "color"] }, { kind: "component", type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "occupiedSweeps", "unavailableSweeps", "editingAudioZone", "inputZone", "multipleFloors"], outputs: ["sweepsSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddAudioZoneComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-add-audio-zone', template: "<div class=\"main-container\">\r\n    <div class=\"col-lg-6 col-md-6 col-sm-7\" *ngIf=\"isAddingAudio\">\r\n        <form (ngSubmit)=\"onUploadAudio()\" [formGroup]=\"commentForm\">\r\n                <div class=\"mb-3 row\">\r\n                    <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                    <div class=\"col-sm-10\">\r\n                        <input type=\"text\" class=\"form-control\" required formControlName=\"title\">\r\n                    </div>\r\n                </div>\r\n                <div>\r\n                    <label for=\"file\" class=\"btn btn-label-file rounded-pill\">\r\n                        <input type=\"file\" id=\"file\" (change)=\"handleFileInput($event)\" />\r\n                        {{'Choose File' | translate}}</label>\r\n                    <p *ngIf=\"fileToUpload\">{{ fileToUpload.name}}</p>\r\n                </div>\r\n                <div class=\"d-flex justify-content-center\" *ngIf=\"working\">\r\n                    <lib-loader></lib-loader>\r\n                </div>\r\n                \r\n                <div class=\"mt-3\">\r\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || working\">{{'Upload' | translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancelAudioUpload()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                        {{'Cancel' | translate}}</button>\r\n                </div>\r\n        </form>\r\n    </div>\r\n    <ngb-alert type=\"success\" [dismissible]=\"true\" *ngIf=\"!working && audioUploaded\" (closed)=\"audioUploaded=false\">\r\n        {{ 'add-audio.success' | translate }} !\r\n    </ngb-alert>\r\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio && audiosForSpace\">\r\n       \r\n        <div class=\"instruction-row\" >\r\n            <p>1.</p>\r\n            <div ngbDropdown class=\"d-inline-block\">\r\n                <div>\r\n                        <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                            ngbDropdownToggle>{{chosenAudio ?\r\n                                chosenAudio.title : ('choose-audio' | translate) }}</button>\r\n                        <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                            <button type=\"button\" ngbDropdownItem *ngFor=\"let audio of audiosForSpace\" \r\n                                (click)=\"onChooseAudio(audio)\">{{ audio.title }}\r\n                            </button>\r\n                        </div>\r\n                </div>\r\n            </div>\r\n            <p>{{'or' | translate}}</p>\r\n            <button (click)=\"isAddingAudio=true\" class=\"btn btn-primary rounded-pill me-2\"> {{'add-audio.add' | translate}}</button>\r\n        </div>\r\n        <div class=\"instruction-row\">\r\n            <p>2.</p>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\" [disabled]=\"!chosenAudio\">\r\n                    {{'Choose scan points on plan' | translate}}</button>\r\n\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onDeleteAudio()\" [disabled]=\"!chosenAudio\">\r\n                        {{'Delete audio' | translate}}</button>\r\n            \r\n        </div>\r\n        <div class=\"instruction-row\" *ngIf=\"chosenAudio\">\r\n            <p>{{ chosenScansOnPlan.length }} {{'scans-chosen-audio' | translate}}</p>\r\n        </div>\r\n\r\n        <div class=\"mt-3\">\r\n            <button class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || !this.chosenAudio\" (click)=\"onSubmit()\">{{'Save' | translate}}</button>\r\n            <button (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [inputZone]=\"currentAudioZone\" [spaceID]=\"spaceID\" \r\n        [occupiedSweeps]=\"occupiedSweeps\" [unavailableSweeps]=\"unavailableSweeps\" [editingAudioZone]=\"true\"\r\n        (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>\r\n", styles: [".instruction-row{display:flex;align-items:center;margin-top:1rem}.instruction-row button{margin-bottom:0}.instruction-row p{margin-bottom:0;margin-left:5px;margin-right:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.UntypedFormBuilder }, { 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: "15.2.10", ngImport: i0, type: CountAudioSweepsPipe, deps: [{ token: i2.ZoneService }], target: i0.ɵɵFactoryTarget.Pipe });
-CountAudioSweepsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CountAudioSweepsPipe, name: "countAudioSweeps" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: "15.2.10", 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: "14.0.0", version: "15.2.10", type: ZonesComponent, selector: "lib-zones", outputs: { updatedZone: "updatedZone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\">\r\n  <div class=\"m-3\">\r\n    <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n  </div>\r\n  <div class=\"row\" *ngIf=\"!isEditingZone && !isAddingAudioTrack\">\r\n    <div class=\"col-md-6\">\r\n      <ul class=\"list-group list-group-flush\">\r\n        <li class=\"list-group-item default-zone-line-item\">\r\n          <div class=\"d-flex justify-content-between align-items-center zone-name\" *ngIf=\"defaultZone\">\r\n            {{defaultZone.name}}\r\n            <div class=\"default-zone-label\">{{ \"whole space\" | translate }}</div>\r\n            <lib-chevron [conditionShowing]=\"defaultShowing\" (click)=\"onToggleDefaultZone()\"></lib-chevron>\r\n          </div>\r\n          <div *ngIf=\"defaultShowing\">\r\n            <ul class=\"list-group list-group-flush\">\r\n              <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}:\r\n                {{defaultZone.layer ? defaultZone.layer.name : \"No type\" | translate}} </li>\r\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"defaultZone.surface\">\r\n                {{'Surface' | translate}}, m<sup>2</sup>: {{defaultZone.surface }}\r\n              </li>\r\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"!defaultZone.virtual\">{{'Scan Points' | translate}}:\r\n                {{defaultZone.sweepIDs ? defaultZone.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n            </ul>\r\n            <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n              <div *ngIf=\"pair.key == defaultZone.id\">\r\n                <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                <ul class=\"list-group list-group-flush\">\r\n                  <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                    *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                    <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                      {{lot.name}}\r\n                      <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                      <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\"\r\n                        (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n\r\n                    </div>\r\n                    <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                      <ul class=\"list-group list-group-flush\">\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                          translate}}: {{lot.layer ? lot.layer.name :\r\n                          \"No type\" | translate}} </li>\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">\r\n                          {{'Surface' | translate}},m<sup>2</sup>: {{lot.surface }}\r\n                        </li>\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                          {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\r\n                          {{'Zone not visible in 3D visit' | translate}}</li>\r\n                      </ul>\r\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                        (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\r\n                      <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\r\n                        *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\r\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                        (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </li>\r\n\r\n        <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\r\n          <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n            {{floor.name}}\r\n            <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\r\n            <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n            <lib-chevron [conditionShowing]=\"index==floorDetails\"\r\n              (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\r\n          </div>\r\n          <div *ngIf=\"index==floorDetails\">\r\n            <ul class=\"list-group list-group-flush\">\r\n              <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\r\n                floor.layer.name :\r\n                \"No type\" | translate}} </li>\r\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                {{floor.surface }}\r\n              </li>\r\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\r\n                {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\r\n                translate}}</li>\r\n            </ul>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\r\n              translate}}</button>\r\n\r\n            <!-- List of children zones -->\r\n\r\n            <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n              <div *ngIf=\"pair.key == floor.id\">\r\n                <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                <ul class=\"list-group list-group-flush\">\r\n                  <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                    *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                    <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                      <div><span *ngIf=\"lot.code_ref\">{{lot.code_ref}}_</span>{{lot.name}}</div>\r\n                      <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                      <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\"\r\n                        (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n\r\n                    </div>\r\n                    <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                      <ul class=\"list-group list-group-flush\">\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                          translate}}: {{lot.layer ? lot.layer.name :\r\n                          \"No type\" | translate}} </li>\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                          m<sup>2</sup>:\r\n                          {{lot.surface }}\r\n                        </li>\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                          {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual && lot.isMuseumVisitZone\">\r\n                          {{'Scan Points with audio' | translate}}: {{ lot | countAudioSweeps | async}} </li>\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\r\n                          {{'Zone not visible in 3D visit' | translate}}</li>  dist\r\n                      </ul>\r\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                        (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\r\n                      <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\r\n                        *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\r\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                        (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n\r\n      <div>\r\n        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\r\n          translate}}</button>\r\n        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\" *ngIf=\"isMuseumModule\">\r\n          {{'Add museum itinerary' | translate}}</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-6\" *ngIf=\"planIsVisible\">\r\n      <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\r\n        <div class=\"spinner-border\" role=\"status\">\r\n          <span class=\"visually-hidden\">Loading...</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\" style=\"overflow: hidden; flex-direction: column;\">\r\n        <div *ngIf=\"currentPlan\">\r\n          <lib-plan-legend [isAudioZone]=\"false\"></lib-plan-legend>\r\n          <div class=\"planContainer\">\r\n            <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\"></div>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"!currentPlan && plans && !loadingPlan && currentZone\">\r\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentZone.virtual && !currentZone.isMultipleFloorZone\">\r\n            {{ 'Plan is not calibrated' | translate}}\r\n          </div>\r\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.virtual\">\r\n            {{ 'No scan points chosen' | translate}}\r\n          </div>\r\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.isMultipleFloorZone\">\r\n            {{ 'The zone is on several floors' | translate}}\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"mb-3\" *ngIf=\"isEditingZone\">\r\n    <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\r\n      [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\"\r\n      [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\r\n  </div>\r\n  <div class=\"mb-3\" *ngIf=\"isAddingAudioTrack\">\r\n    <lib-add-audio-zone [spaceID]=\"spaceID\" [defaultZone]=\"defaultZone\" [parentZone]=\"parentZoneForAudio\"\r\n      [zones]=\"allZones\" [currentAudioZone]=\"zoneForEdit\" (updatedZone)=\"editCompleted($event)\"></lib-add-audio-zone>\r\n  </div>\r\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"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { kind: "component", type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }, { kind: "component", type: AddZoneComponent, selector: "lib-add-zone", inputs: ["zoneEdit", "spaceID", "images360", "navigationIDs", "zones", "newZoneDataFromEditor", "chosenPlan", "isMuseumVisit", "defaultZone"], outputs: ["updatedZone"] }, { kind: "component", type: AddAudioZoneComponent, selector: "lib-add-audio-zone", inputs: ["spaceID", "defaultZone", "zones", "parentZone", "currentAudioZone"], outputs: ["updatedZone"] }, { kind: "component", type: PlanLegendComponent, selector: "lib-plan-legend", inputs: ["isAudioZone"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: CountAudioSweepsPipe, name: "countAudioSweeps" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ZonesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-zones', template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\">\r\n  <div class=\"m-3\">\r\n    <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n  </div>\r\n  <div class=\"row\" *ngIf=\"!isEditingZone && !isAddingAudioTrack\">\r\n    <div class=\"col-md-6\">\r\n      <ul class=\"list-group list-group-flush\">\r\n        <li class=\"list-group-item default-zone-line-item\">\r\n          <div class=\"d-flex justify-content-between align-items-center zone-name\" *ngIf=\"defaultZone\">\r\n            {{defaultZone.name}}\r\n            <div class=\"default-zone-label\">{{ \"whole space\" | translate }}</div>\r\n            <lib-chevron [conditionShowing]=\"defaultShowing\" (click)=\"onToggleDefaultZone()\"></lib-chevron>\r\n          </div>\r\n          <div *ngIf=\"defaultShowing\">\r\n            <ul class=\"list-group list-group-flush\">\r\n              <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}:\r\n                {{defaultZone.layer ? defaultZone.layer.name : \"No type\" | translate}} </li>\r\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"defaultZone.surface\">\r\n                {{'Surface' | translate}}, m<sup>2</sup>: {{defaultZone.surface }}\r\n              </li>\r\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"!defaultZone.virtual\">{{'Scan Points' | translate}}:\r\n                {{defaultZone.sweepIDs ? defaultZone.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n            </ul>\r\n            <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n              <div *ngIf=\"pair.key == defaultZone.id\">\r\n                <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                <ul class=\"list-group list-group-flush\">\r\n                  <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                    *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                    <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                      {{lot.name}}\r\n                      <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                      <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\"\r\n                        (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n\r\n                    </div>\r\n                    <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                      <ul class=\"list-group list-group-flush\">\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                          translate}}: {{lot.layer ? lot.layer.name :\r\n                          \"No type\" | translate}} </li>\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">\r\n                          {{'Surface' | translate}},m<sup>2</sup>: {{lot.surface }}\r\n                        </li>\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                          {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\r\n                          {{'Zone not visible in 3D visit' | translate}}</li>\r\n                      </ul>\r\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                        (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\r\n                      <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\r\n                        *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\r\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                        (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </li>\r\n\r\n        <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\r\n          <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n            {{floor.name}}\r\n            <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\r\n            <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n            <lib-chevron [conditionShowing]=\"index==floorDetails\"\r\n              (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\r\n          </div>\r\n          <div *ngIf=\"index==floorDetails\">\r\n            <ul class=\"list-group list-group-flush\">\r\n              <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\r\n                floor.layer.name :\r\n                \"No type\" | translate}} </li>\r\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                {{floor.surface }}\r\n              </li>\r\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\r\n                {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n              <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\r\n                translate}}</li>\r\n            </ul>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\r\n              translate}}</button>\r\n\r\n            <!-- List of children zones -->\r\n\r\n            <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n              <div *ngIf=\"pair.key == floor.id\">\r\n                <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                <ul class=\"list-group list-group-flush\">\r\n                  <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                    *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                    <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                      <div><span *ngIf=\"lot.code_ref\">{{lot.code_ref}}_</span>{{lot.name}}</div>\r\n                      <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                      <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\"\r\n                        (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n\r\n                    </div>\r\n                    <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                      <ul class=\"list-group list-group-flush\">\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                          translate}}: {{lot.layer ? lot.layer.name :\r\n                          \"No type\" | translate}} </li>\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                          m<sup>2</sup>:\r\n                          {{lot.surface }}\r\n                        </li>\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                          {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual && lot.isMuseumVisitZone\">\r\n                          {{'Scan Points with audio' | translate}}: {{ lot | countAudioSweeps | async}} </li>\r\n                        <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\r\n                          {{'Zone not visible in 3D visit' | translate}}</li>  dist\r\n                      </ul>\r\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                        (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\r\n                      <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\r\n                        *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\r\n                      <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                        (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n\r\n      <div>\r\n        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\r\n          translate}}</button>\r\n        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\" *ngIf=\"isMuseumModule\">\r\n          {{'Add museum itinerary' | translate}}</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-6\" *ngIf=\"planIsVisible\">\r\n      <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\r\n        <div class=\"spinner-border\" role=\"status\">\r\n          <span class=\"visually-hidden\">Loading...</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\" style=\"overflow: hidden; flex-direction: column;\">\r\n        <div *ngIf=\"currentPlan\">\r\n          <lib-plan-legend [isAudioZone]=\"false\"></lib-plan-legend>\r\n          <div class=\"planContainer\">\r\n            <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\"></div>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"!currentPlan && plans && !loadingPlan && currentZone\">\r\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentZone.virtual && !currentZone.isMultipleFloorZone\">\r\n            {{ 'Plan is not calibrated' | translate}}\r\n          </div>\r\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.virtual\">\r\n            {{ 'No scan points chosen' | translate}}\r\n          </div>\r\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.isMultipleFloorZone\">\r\n            {{ 'The zone is on several floors' | translate}}\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"mb-3\" *ngIf=\"isEditingZone\">\r\n    <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\r\n      [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\"\r\n      [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\r\n  </div>\r\n  <div class=\"mb-3\" *ngIf=\"isAddingAudioTrack\">\r\n    <lib-add-audio-zone [spaceID]=\"spaceID\" [defaultZone]=\"defaultZone\" [parentZone]=\"parentZoneForAudio\"\r\n      [zones]=\"allZones\" [currentAudioZone]=\"zoneForEdit\" (updatedZone)=\"editCompleted($event)\"></lib-add-audio-zone>\r\n  </div>\r\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: "15.2.10", 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: "14.0.0", version: "15.2.10", type: ImagesComponent, selector: "lib-images", ngImport: i0, template: "<div class=\"container-fluid dashboard-tab col-sm-10 mb-3\" *ngIf=\"currentSpace\" >\r\n    <div class=\"m-3\">\r\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\r\n      <div class=\"spinner-border\" role=\"status\">\r\n        <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\r\n      </div>\r\n    </div>\r\n    <div ngbDropdown class=\"d-inline-block\" *ngIf=\"currentSpace.visits && currentSpace.visits.length > 0\">\r\n      <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" *ngIf=\"!currentVisit\"\r\n        ngbDropdownToggle>{{'Choose 3D visit' | translate}}</button>\r\n      <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n        <button ngbDropdownItem *ngFor=\"let visit of currentSpace.visits\" (click)=\"setVisit(visit)\"> {{ visit.name }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <h3 *ngIf=\"currentVisit\">{{ currentVisit.name }}</h3>\r\n    <div class=\"mt-3\" *ngIf=\"currentVisit && currentImages.length == 0 && !loading\">\r\n      <h4>{{'No imported images' | translate }}</h4>\r\n      <p>{{'For import: go Virtual Visits => Import Images' | translate}}</p>\r\n    </div>\r\n    <button *ngIf=\"currentVisit && currentImages.length > 0 && !loading\"\r\n      class=\"btn btn-outline-primary rounded-pill no-lowercase mb-2\" (click)=\"onInventoryClick()\">\r\n      {{'Run AI inventory on this image' | translate}}</button>\r\n    <lib-carousel [images]=\"currentImages\" *ngIf=\"currentImages\" (currentScan)=\"setCurrentScan($event)\"></lib-carousel>\r\n  </div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i4$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i4$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i4$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { kind: "component", type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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\" >\r\n    <div class=\"m-3\">\r\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\r\n      <div class=\"spinner-border\" role=\"status\">\r\n        <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\r\n      </div>\r\n    </div>\r\n    <div ngbDropdown class=\"d-inline-block\" *ngIf=\"currentSpace.visits && currentSpace.visits.length > 0\">\r\n      <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" *ngIf=\"!currentVisit\"\r\n        ngbDropdownToggle>{{'Choose 3D visit' | translate}}</button>\r\n      <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n        <button ngbDropdownItem *ngFor=\"let visit of currentSpace.visits\" (click)=\"setVisit(visit)\"> {{ visit.name }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <h3 *ngIf=\"currentVisit\">{{ currentVisit.name }}</h3>\r\n    <div class=\"mt-3\" *ngIf=\"currentVisit && currentImages.length == 0 && !loading\">\r\n      <h4>{{'No imported images' | translate }}</h4>\r\n      <p>{{'For import: go Virtual Visits => Import Images' | translate}}</p>\r\n    </div>\r\n    <button *ngIf=\"currentVisit && currentImages.length > 0 && !loading\"\r\n      class=\"btn btn-outline-primary rounded-pill no-lowercase mb-2\" (click)=\"onInventoryClick()\">\r\n      {{'Run AI inventory on this image' | translate}}</button>\r\n    <lib-carousel [images]=\"currentImages\" *ngIf=\"currentImages\" (currentScan)=\"setCurrentScan($event)\"></lib-carousel>\r\n  </div>" }]
-        }], 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: "15.2.10", ngImport: i0, type: EditPlanComponent, deps: [{ token: i2.PlanService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i4$1.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: "14.0.0", version: "15.2.10", 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\">\r\n    <div class=\"col\">\r\n        <div class=\"m-3\">\r\n            <lib-tab-navigation [menuItems]='menuItems'></lib-tab-navigation>\r\n        </div>\r\n    </div>\r\n</div>\r\n<lib-add-zone *ngIf=\"isNewZone\" [images360]=\"images360\" [spaceID]=\"spaceID\" [navigationIDs]=\"navigations\"\r\n    [zoneEdit]=\"editedZone\" [zones]=\"zones\" (updatedZone)=\"onNewZone($event)\" [chosenPlan]=\"editedPlan\"\r\n    [newZoneDataFromEditor]=\"newZoneData\"></lib-add-zone>\r\n<iframe *ngIf=\"editorUrl\" #svgEditor [src]=\"editorUrl | safeUrl\" frameborder=\"0\"\r\n    style=\"height:100%;width:100%;min-height:550px;max-height:750px\" (load)=\"onLoad(svgEditor)\"></iframe>\r\n<!-- chosenPlan && -->\r\n<!-- ./../../../../../../assets/svgeditor/index.html -->\r\n\r\n<img #imgPng *ngIf=\"chosenPlan && chosenPlan.extension !== 'svg' && svgEditor\" [src]=\"chosenPlan.filepath\"\r\n    (load)=\"onLoadImg(imgPng)\" style=\"display: none;\">\r\n\r\n<canvas id=\"canvas4pdf\" style=\"display: none;\"></canvas>\r\n\r\n<ng-template #dialog let-modal>\r\n\r\n    <div class=\"modal-header\">\r\n        <h4 class=\"modal-title\">{{'Submit' | translate}}</h4>\r\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n            <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n        {{'save plan edited' | translate}}\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"newSvg();modal.close('Close click')\">{{'Yes' |\r\n            translate}}</button>\r\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"updateSvg();modal.close('Close click')\">{{'No' |\r\n            translate}}</button>\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #dialogZone let-modal>\r\n\r\n    <div class=\"modal-header\">\r\n        <h4 class=\"modal-title\">{{'Submit' | translate}}</h4>\r\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n            <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n        {{'confirm.new-zone-from-plan' | translate}}\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-outline-dark\"\r\n            (click)=\"isNewZone = true;modal.close('Close click')\">{{'Validate' |\r\n            translate}}</button>\r\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"modal.close('Close click')\">{{'Cancel' |\r\n            translate}}</button>\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #preparing let-modal>\r\n    <div class=\"modal-header\">\r\n        <h4 class=\"modal-title\">{{'Processing' | translate}}</h4>\r\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n            <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-center\">\r\n            <div class=\"spinner-border\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>", styles: ["app-add-zone{position:absolute;top:0;left:0;background-color:#fff;width:100%;height:100%;padding:30px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { kind: "component", type: AddZoneComponent, selector: "lib-add-zone", inputs: ["zoneEdit", "spaceID", "images360", "navigationIDs", "zones", "newZoneDataFromEditor", "chosenPlan", "isMuseumVisit", "defaultZone"], outputs: ["updatedZone"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i2.SafeUrlPipe, name: "safeUrl" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditPlanComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-edit-plan', template: "<div class=\"row mt-3\">\r\n    <div class=\"col\">\r\n        <div class=\"m-3\">\r\n            <lib-tab-navigation [menuItems]='menuItems'></lib-tab-navigation>\r\n        </div>\r\n    </div>\r\n</div>\r\n<lib-add-zone *ngIf=\"isNewZone\" [images360]=\"images360\" [spaceID]=\"spaceID\" [navigationIDs]=\"navigations\"\r\n    [zoneEdit]=\"editedZone\" [zones]=\"zones\" (updatedZone)=\"onNewZone($event)\" [chosenPlan]=\"editedPlan\"\r\n    [newZoneDataFromEditor]=\"newZoneData\"></lib-add-zone>\r\n<iframe *ngIf=\"editorUrl\" #svgEditor [src]=\"editorUrl | safeUrl\" frameborder=\"0\"\r\n    style=\"height:100%;width:100%;min-height:550px;max-height:750px\" (load)=\"onLoad(svgEditor)\"></iframe>\r\n<!-- chosenPlan && -->\r\n<!-- ./../../../../../../assets/svgeditor/index.html -->\r\n\r\n<img #imgPng *ngIf=\"chosenPlan && chosenPlan.extension !== 'svg' && svgEditor\" [src]=\"chosenPlan.filepath\"\r\n    (load)=\"onLoadImg(imgPng)\" style=\"display: none;\">\r\n\r\n<canvas id=\"canvas4pdf\" style=\"display: none;\"></canvas>\r\n\r\n<ng-template #dialog let-modal>\r\n\r\n    <div class=\"modal-header\">\r\n        <h4 class=\"modal-title\">{{'Submit' | translate}}</h4>\r\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n            <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n        {{'save plan edited' | translate}}\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"newSvg();modal.close('Close click')\">{{'Yes' |\r\n            translate}}</button>\r\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"updateSvg();modal.close('Close click')\">{{'No' |\r\n            translate}}</button>\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #dialogZone let-modal>\r\n\r\n    <div class=\"modal-header\">\r\n        <h4 class=\"modal-title\">{{'Submit' | translate}}</h4>\r\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n            <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n        {{'confirm.new-zone-from-plan' | translate}}\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-outline-dark\"\r\n            (click)=\"isNewZone = true;modal.close('Close click')\">{{'Validate' |\r\n            translate}}</button>\r\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"modal.close('Close click')\">{{'Cancel' |\r\n            translate}}</button>\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #preparing let-modal>\r\n    <div class=\"modal-header\">\r\n        <h4 class=\"modal-title\">{{'Processing' | translate}}</h4>\r\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n            <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-center\">\r\n            <div class=\"spinner-border\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\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: i4$1.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: "15.2.10", ngImport: i0, type: LocationsRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LocationsRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: LocationsRoutingModule, imports: [i1.RouterModule], exports: [RouterModule] });
-LocationsRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocationsRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: NgxSmarterplanLocationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxSmarterplanLocationsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", 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: "15.2.10", 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