@smarterplan/ngx-smarterplan-locations 0.0.21

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

@@ -0,0 +1,3126 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, Output, Input, ViewChild, HostListener, NgModule } from '@angular/core';
+import { __awaiter } from 'tslib';
+import * as i2 from 'ngx-smarterplan-core';
+import { enumToArray, LevelStatus, uploadFileToS3, deleteFromS3, PropertyType, getSignedImageUrlForSpace, SearchObjectType, SpaceStatus, getMetaForImage, getSignedFile, downloadFileAsObject, downloadBlob, CaptureViewer, showScanPointsOnPlanInDiv, getCoefficientsForImage, wait, InventoryStatus, sortAlphabeticallyOnName, NgxSmarterplanCoreModule } from 'ngx-smarterplan-core';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { icon, Marker, tileLayer, latLng, marker, latLngBounds, point } from 'leaflet';
+import * as i1$1 from '@asymmetrik/ngx-leaflet';
+import { LeafletModule } from '@asymmetrik/ngx-leaflet';
+import * as i1$2 from '@angular/forms';
+import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i7 from '@ng-bootstrap/ng-bootstrap';
+import { ModalDismissReasons, NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i7$1 from 'ngx-clipboard';
+import { ClipboardModule } from 'ngx-clipboard';
+import { getDocument } from 'pdfjs-dist';
+import panzoom from 'panzoom';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
+
+class NgxSmarterplanLocationsService {
+    constructor() { }
+}
+NgxSmarterplanLocationsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanLocationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NgxSmarterplanLocationsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanLocationsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanLocationsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class TabNavigationComponent {
+    constructor(router) {
+        this.router = router;
+        this.onGoBack = new EventEmitter();
+        this.menuItems = [];
+    }
+    onClick(url, parameter, index) {
+        if (index === this.menuItems.length - 1) {
+            return;
+        }
+        if (url) {
+            const newURL = `/dashboard${url}`;
+            if (this.router.url !== newURL) {
+                this.router.navigate([newURL]);
+            }
+            else {
+                this.onGoBack.emit(parameter);
+            }
+        }
+        else {
+            this.onGoBack.emit(parameter);
+        }
+    }
+}
+TabNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+TabNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: { menuItems: "menuItems" }, outputs: { onGoBack: "onGoBack" }, ngImport: i0, template: "<span class=\"menu\">\n    <span *ngFor=\"let item of menuItems; let index = index;\">\n        <span class=\"item\" [ngClass]=\"{'current':index === menuItems.length - 1}\"\n            (click)=\"onClick(item.url,item.back, index)\">{{item.label | translate}}</span> <span\n            *ngIf=\"index !== menuItems.length - 1\" class=\"separator\">></span>\n    </span>\n</span>\n", styles: [".item{font-size:1.35em;color:var(--smarterplan-primary);cursor:pointer}.current{color:var(--smarterplan-primary)!important;cursor:default!important;text-decoration:none!important}.separator{font-size:1.4em;margin-left:10px;margin-right:10px;color:var(--smarterplan-primary)}.item:hover{text-decoration:underline}.menu{margin-top:15px;margin-bottom:20px}\n"], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tab-navigation', template: "<span class=\"menu\">\n    <span *ngFor=\"let item of menuItems; let index = index;\">\n        <span class=\"item\" [ngClass]=\"{'current':index === menuItems.length - 1}\"\n            (click)=\"onClick(item.url,item.back, index)\">{{item.label | translate}}</span> <span\n            *ngIf=\"index !== menuItems.length - 1\" class=\"separator\">></span>\n    </span>\n</span>\n", styles: [".item{font-size:1.35em;color:var(--smarterplan-primary);cursor:pointer}.current{color:var(--smarterplan-primary)!important;cursor:default!important;text-decoration:none!important}.separator{font-size:1.4em;margin-left:10px;margin-right:10px;color:var(--smarterplan-primary)}.item:hover{text-decoration:underline}.menu{margin-top:15px;margin-bottom:20px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { onGoBack: [{
+                type: Output
+            }], menuItems: [{
+                type: Input
+            }] } });
+
+class MapPopupComponent {
+    constructor(router, ngZone) {
+        this.router = router;
+        this.ngZone = ngZone;
+        this.isOnPopup = false;
+        this.isMuseumUser = true;
+    }
+    ngOnInit() {
+        this.marker.on("click", () => this.onClickVisitFirst());
+        this.marker.on("mouseover", () => {
+            this.isOnPopup = true;
+            if (!this.marker.isPopupOpen()) {
+                this.openPopup();
+            }
+        });
+    }
+    openPopup() {
+        this.marker.openPopup();
+        this.isOnPopup = false;
+        this.popuparea = document.querySelector(".leaflet-popup");
+        this.popuparea.addEventListener("mouseleave", () => {
+            this.closePopup();
+        });
+        this.popuparea.addEventListener("mouseover", () => {
+            this.isOnPopup = true;
+        });
+        this.marker.on("mouseout", () => {
+            this.closePopup();
+        });
+    }
+    closePopup() {
+        this.isOnPopup = false;
+        /** We want to wait to avoid glitch */
+        setTimeout(() => {
+            if (!this.isOnPopup) {
+                this.marker.closePopup();
+            }
+        }, 100);
+    }
+    onClickVisitFirst() {
+        if (this.space.visits.length === 0) {
+            console.log("No space to visit !");
+        }
+        else {
+            this.onVisitClick(this.space.visits[0]);
+        }
+    }
+    onVisitClick(visit) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.ngZone.run(() => {
+                this.router.navigate(["visit", this.space.id], {
+                    queryParams: { model3D: visit.model3d },
+                });
+            });
+        });
+    }
+}
+MapPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MapPopupComponent, deps: [{ token: i1.Router }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+MapPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: MapPopupComponent, selector: "lib-map-popup", ngImport: i0, template: "<div id=\"map-popup\">\n    <div class=\"map-popup-header\" (click)=\"onClickVisitFirst()\" [style.cursor]=\"'pointer'\">\n        <img [src]=\"space.annexes\" />\n    </div>\n    <div class=\"map-popup-details\">\n    <h1 (click)=\"onClickVisitFirst()\" [style.cursor]=\"'pointer'\">{{space.name}}</h1>\n    <span class=\"map-popup-address\">{{space.addresses}}</span>\n    <span *ngFor=\"let visit of space.visits\" class=\"map-popup-visit\" (click)=\"onVisitClick(visit)\"\n                  [style.cursor]=\"'pointer'\">\u27A4 {{ visit.name ? visit.name : space.name}}</span>\n    </div>\n</div>\n", styles: [".map-popup-header{height:120px;overflow:hidden;border-top-right-radius:20px;border-top-left-radius:20px}.map-popup-header img{width:100%;position:relative;top:50%;transform:translateY(-50%)}.map-popup-details{padding:5px 10px 10px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;background-color:#fff;color:#000}.map-popup-details{display:flex;flex-direction:column}.map-popup-details h1{font-size:1.5rem;font-weight:700;margin-bottom:0;color:var(--smarterplan-primary)}.map-popup-address{align-self:flex-end;margin-bottom:10px}.map-popup-visit{color:var(--smarterplan-primary);font-size:1.15rem}.map-popup-visit:hover{color:var(--smarterplan-primary)}\n"], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MapPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-map-popup', template: "<div id=\"map-popup\">\n    <div class=\"map-popup-header\" (click)=\"onClickVisitFirst()\" [style.cursor]=\"'pointer'\">\n        <img [src]=\"space.annexes\" />\n    </div>\n    <div class=\"map-popup-details\">\n    <h1 (click)=\"onClickVisitFirst()\" [style.cursor]=\"'pointer'\">{{space.name}}</h1>\n    <span class=\"map-popup-address\">{{space.addresses}}</span>\n    <span *ngFor=\"let visit of space.visits\" class=\"map-popup-visit\" (click)=\"onVisitClick(visit)\"\n                  [style.cursor]=\"'pointer'\">\u27A4 {{ visit.name ? visit.name : space.name}}</span>\n    </div>\n</div>\n", styles: [".map-popup-header{height:120px;overflow:hidden;border-top-right-radius:20px;border-top-left-radius:20px}.map-popup-header img{width:100%;position:relative;top:50%;transform:translateY(-50%)}.map-popup-details{padding:5px 10px 10px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;background-color:#fff;color:#000}.map-popup-details{display:flex;flex-direction:column}.map-popup-details h1{font-size:1.5rem;font-weight:700;margin-bottom:0;color:var(--smarterplan-primary)}.map-popup-address{align-self:flex-end;margin-bottom:10px}.map-popup-visit{color:var(--smarterplan-primary);font-size:1.15rem}.map-popup-visit:hover{color:var(--smarterplan-primary)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i0.NgZone }]; } });
+
+const iconRetinaUrl = "assets/marker-icon-2x.png";
+const iconUrl = "assets/marker-icon.png";
+const shadowUrl = "assets/marker-shadow.png";
+const iconDefault = icon({
+    iconRetinaUrl,
+    iconUrl,
+    shadowUrl,
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [1, -34],
+    tooltipAnchor: [16, -28],
+    shadowSize: [41, 41],
+});
+Marker.prototype.options.icon = iconDefault;
+class MapComponent {
+    constructor(componentFactoryResolver, injector) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.injector = injector;
+        this.options = {
+            layers: [
+                tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+                    maxZoom: 18,
+                    attribution: "...",
+                }),
+            ],
+            zoom: 5.5,
+            center: latLng(47.06394, 2.77736),
+        };
+        this.layers = [];
+    }
+    ngOnChanges(changes) {
+        if (changes.spaces) {
+            const nm = [];
+            const bd = [];
+            if (!changes.spaces.currentValue) {
+                return;
+            }
+            // Filtering out spaces without lat/longitudes
+            for (const s of changes.spaces.currentValue) {
+                if (s.latitude === null || s.longitude === null) {
+                    console.log(`${s.name} has not coordinates for ${s.addresses}`);
+                    continue;
+                }
+                // We use the popup system from leaflet, as it packs a few improvements
+                // on using bootstrap: autoclose other popups, closing option.
+                const m = marker([s.latitude, s.longitude]);
+                m.bindPopup(this.createPopupComponent(s, m));
+                nm.push(m);
+                bd.push(latLng(s.latitude, s.longitude));
+            }
+            // Note how we set the layers in one assignment, in order to have leaflet
+            // detects the change correctly
+            // We also set the bounds afterward, for the map to be properly zoomed and
+            // centered
+            this.layers = nm;
+            if (this.map && bd.length > 0) {
+                this.map.fitBounds(latLngBounds(bd), {
+                    padding: point(48, 48),
+                    maxZoom: 12,
+                    animate: true,
+                });
+            }
+        }
+    }
+    onMapReady(map) {
+        this.map = map;
+    }
+    createPopupComponent(space, marker) {
+        const comp = this.componentFactoryResolver
+            .resolveComponentFactory(MapPopupComponent)
+            .create(this.injector);
+        comp.instance.space = space;
+        comp.instance.marker = marker;
+        comp.changeDetectorRef.detectChanges();
+        return comp.location.nativeElement;
+    }
+}
+MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MapComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: MapComponent, selector: "lib-map", inputs: { spaces: "spaces" }, usesOnChanges: true, ngImport: i0, template: "<div [leafletLayers]=\"layers\" [leafletOptions]=\"options\" (leafletMapReady)=\"onMapReady($event)\" id=\"map\" leaflet\n    style=\"height: 500px; margin-top: 30px; z-index: 195\"></div>\n", styles: [""], directives: [{ type: i1$1.LeafletDirective, selector: "[leaflet]", inputs: ["leafletFitBoundsOptions", "leafletPanOptions", "leafletZoomOptions", "leafletZoomPanOptions", "leafletOptions", "leafletZoom", "leafletCenter", "leafletFitBounds", "leafletMaxBounds", "leafletMinZoom", "leafletMaxZoom"], outputs: ["leafletMapReady", "leafletZoomChange", "leafletCenterChange", "leafletClick", "leafletDoubleClick", "leafletMouseDown", "leafletMouseUp", "leafletMouseMove", "leafletMouseOver", "leafletMouseOut", "leafletMapMove", "leafletMapMoveStart", "leafletMapMoveEnd", "leafletMapZoom", "leafletMapZoomStart", "leafletMapZoomEnd"] }, { type: i1$1.LeafletLayersDirective, selector: "[leafletLayers]", inputs: ["leafletLayers"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-map', template: "<div [leafletLayers]=\"layers\" [leafletOptions]=\"options\" (leafletMapReady)=\"onMapReady($event)\" id=\"map\" leaflet\n    style=\"height: 500px; margin-top: 30px; z-index: 195\"></div>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; }, propDecorators: { spaces: [{
+                type: Input
+            }] } });
+
+class FormLocationComponent {
+    constructor(spaceService, propertyService, userService, fb, missionService, layerService) {
+        this.spaceService = spaceService;
+        this.propertyService = propertyService;
+        this.userService = userService;
+        this.fb = fb;
+        this.missionService = missionService;
+        this.layerService = layerService;
+        this.isSubmitted = false;
+        this.addMissionForNewSpace = true;
+        this.imageToBeDeleted = 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: [null, [Validators.required]],
+            addresses: [""],
+            latitude: [null],
+            longitude: [null],
+            level: LevelStatus.LOW,
+            classGes: [null],
+            classEnergyConsumption: [null],
+            constructionYear: [null],
+        });
+    }
+    initEditForm() {
+        this.form = this.fb.group({
+            id: this.location.id,
+            name: [this.location.name, [Validators.required]],
+            addresses: this.location.addresses,
+            latitude: this.location.latitude,
+            longitude: this.location.longitude,
+            level: this.location.level,
+            classGes: this.location.classGes,
+            classEnergyConsumption: this.location.classEnergyConsumption,
+            constructionYear: this.location.constructionYear,
+        });
+    }
+    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) {
+                return;
+            }
+            try {
+                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();
+                    let layer = yield this.getLayerByName("BUILDING");
+                    if (!layer) {
+                        layer = yield this.layerService.createLayerForOrganisation("BUILDING", this.userService.currentOrganisation().id);
+                    }
+                    space = yield this.spaceService.createSpace(this.form.value, layer);
+                    const missions = this.userService.getManagerMissions();
+                    if (space && missions.length > 0) {
+                        const exampleMission = missions[0];
+                        yield this.uploadImage(space.id);
+                        yield this.propertyService.createProperty({
+                            type: PropertyType.PROPERTY,
+                            spaceID: space.id,
+                            organisationID: exampleMission.organisationID,
+                        });
+                        // 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";
+        }
+    }
+}
+FormLocationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormLocationComponent, deps: [{ token: i2.SpaceService }, { token: i2.PropertyService }, { token: i2.BaseUserService }, { token: i1$2.FormBuilder }, { token: i2.MissionService }, { token: i2.LayerService }], target: i0.ɵɵFactoryTarget.Component });
+FormLocationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FormLocationComponent, selector: "lib-form-location", inputs: { location: "location" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "imageInputContainer", first: true, predicate: ["imageInputContainer"], descendants: true }, { propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true }, { propertyName: "imageBasePreview", first: true, predicate: ["imageBasePreview"], descendants: true }], ngImport: i0, template: "<div class=\"col-md-6 form-new-loc\" *ngIf=\"form\">\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Name' | translate}} *</label>\n        <div class=\"col-sm-9\">\n          <input type=\"text\" class=\"form-control\" [class.is-invalid]=\"name.invalid && isSubmitted\" required\n            formControlName=\"name\">\n          <div class=\"invalid-feedback\">\n            {{'Name is mandatory' | translate}}\n          </div>\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Address' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"addresses\">\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Construction year' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"constructionYear\">\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Latitude' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"latitude\">\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Longitude' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"longitude\">\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Access level' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <select class=\"d-inline-block custom-select rounded-pill\" formControlName=\"level\">\n            <option *ngFor=\"let level of levels\" [value]=\"level\">{{level | translate}}</option>\n          </select>\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Energy Class' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"classEnergyConsumption\">\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Greenhouse gas emission Class' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"classGes\">\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Cover picture' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <img #imageBasePreview *ngIf=\"currentImage\" class=\"image-preview\" [src]=\"currentImage\">\n          <label #imageInputContainer for=\"image\"\n            class=\"btn btn-label-file btn-outline-primary rounded-pill imageInputContainer\">\n            <input #imageInput type=\"file\" id=\"image\" (change)=\"handleImageInput($event.target)\" />\n            {{ imageInputText | translate}}</label>\n          <button *ngIf=\"currentImage && !imageToUpload\" \n          class=\"btn btn-outline-primary rounded-pill\" (click)=\"imageToBeDeleted=true;clearImageFile()\">{{'Delete picture' | translate }}</button>\n          <div class=\"image-name\" *ngIf=\"imageToUpload\">\n            <p >{{ imageToUpload.name}}</p>\n            <div (click)=\"clearImageFile()\"  [style.cursor]=\"'pointer'\">\n              <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\n            </div>\n          </div>\n          \n        </div>\n      </div>\n      <div class=\"mb-3 row\" *ngIf=\"!location\">\n        <label class=\"col-sm-3 col-form-label\">{{'Create mission for this space' | translate}}</label>\n        <div class=\"col-sm-3\">\n          <input type=\"checkbox\" [(ngModel)]=\"addMissionForNewSpace\" [ngModelOptions]=\"{standalone: true}\">\n        </div>\n      </div>\n  \n      <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-3\">{{'Save' | translate}}</button>\n      <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\n        translate}}</button>\n    </form>\n</div>\n", 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}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormLocationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-form-location', template: "<div class=\"col-md-6 form-new-loc\" *ngIf=\"form\">\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Name' | translate}} *</label>\n        <div class=\"col-sm-9\">\n          <input type=\"text\" class=\"form-control\" [class.is-invalid]=\"name.invalid && isSubmitted\" required\n            formControlName=\"name\">\n          <div class=\"invalid-feedback\">\n            {{'Name is mandatory' | translate}}\n          </div>\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Address' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"addresses\">\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Construction year' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"constructionYear\">\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Latitude' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"latitude\">\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Longitude' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"longitude\">\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Access level' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <select class=\"d-inline-block custom-select rounded-pill\" formControlName=\"level\">\n            <option *ngFor=\"let level of levels\" [value]=\"level\">{{level | translate}}</option>\n          </select>\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Energy Class' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"classEnergyConsumption\">\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Greenhouse gas emission Class' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"classGes\">\n        </div>\n      </div>\n  \n      <div class=\"mb-3 row\">\n        <label class=\"col-sm-3 col-form-label\">{{'Cover picture' | translate}}</label>\n        <div class=\"col-sm-9\">\n          <img #imageBasePreview *ngIf=\"currentImage\" class=\"image-preview\" [src]=\"currentImage\">\n          <label #imageInputContainer for=\"image\"\n            class=\"btn btn-label-file btn-outline-primary rounded-pill imageInputContainer\">\n            <input #imageInput type=\"file\" id=\"image\" (change)=\"handleImageInput($event.target)\" />\n            {{ imageInputText | translate}}</label>\n          <button *ngIf=\"currentImage && !imageToUpload\" \n          class=\"btn btn-outline-primary rounded-pill\" (click)=\"imageToBeDeleted=true;clearImageFile()\">{{'Delete picture' | translate }}</button>\n          <div class=\"image-name\" *ngIf=\"imageToUpload\">\n            <p >{{ imageToUpload.name}}</p>\n            <div (click)=\"clearImageFile()\"  [style.cursor]=\"'pointer'\">\n              <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\n            </div>\n          </div>\n          \n        </div>\n      </div>\n      <div class=\"mb-3 row\" *ngIf=\"!location\">\n        <label class=\"col-sm-3 col-form-label\">{{'Create mission for this space' | translate}}</label>\n        <div class=\"col-sm-3\">\n          <input type=\"checkbox\" [(ngModel)]=\"addMissionForNewSpace\" [ngModelOptions]=\"{standalone: true}\">\n        </div>\n      </div>\n  \n      <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-3\">{{'Save' | translate}}</button>\n      <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\n        translate}}</button>\n    </form>\n</div>\n", 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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.SpaceService }, { type: i2.PropertyService }, { type: i2.BaseUserService }, { type: i1$2.FormBuilder }, { type: i2.MissionService }, { type: i2.LayerService }]; }, 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;
+    }
+}
+LocationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocationsComponent, deps: [{ token: i2.SpaceService }, { token: i1.Router }, { token: i2.BaseUserService }, { token: i2.ViewerService }, { token: i2.NavigationService }, { token: i2.NavigatorService }], target: i0.ɵɵFactoryTarget.Component });
+LocationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LocationsComponent, selector: "lib-locations", ngImport: i0, template: "<div class=\"dashboard-tab\">\n    <div class=\"header-dashboard-tab\">\n      <div class=\"m-3\">\n        <lib-tab-navigation (onGoBack)=\"onFormChange(null)\" [menuItems]='menuItems'></lib-tab-navigation>\n        <span class=\"ml-3 refreshIcon\" (click)=\"refresh()\" *ngIf=\"!(isAdding)\" ngbTooltip=\"Refresh list\">\n          <span class=\"iconify refreshIcon\" data-icon=\"ion:refresh-circle\" data-width=\"35\" data-rotate=\"90deg\"></span>\n        </span>\n      </div>  \n      <lib-search-bar *ngIf=\"!isAdding && !isMuseumUser\" [searchable]=\"locations\" [objectType]=\"getSearchType()\"\n        (searchEvent)=\"applyResultsSearchBar($event)\"></lib-search-bar>\n      \n      <div class=\"col-md-8\">\n        <div class=\"sp-row\" *ngIf=\"!isAdding && isManager\">\n          <button class=\"btn btn-outline-primary rounded-pill add-location\" (click)=\"onAddLocation()\">\n            {{'Add location' | translate}}</button>\n          <!-- <div class=\"outer_circle\">\n            <button id='btn-icon' (click)=\"onAddLocation()\"></button>\n          </div> -->\n        </div>\n      </div>\n    </div>\n    <hr>\n    <div class=\"row\" *ngIf=\"isAdding\">\n      <div class=\"col-md-6\">\n        <h4>{{'New location' | translate}}</h4>\n      </div>\n    </div>\n    <section *ngIf=\"!isAdding\">\n      <div class=\"row\">\n        <div class=\"col-sm-12 col-md-12 col-lg-6\" *ngIf=\"filteredLocations\">\n          <ul class=\"list-group list-group-flush\">\n            <li class=\"d-flex justify-content-between list-group-item\"\n              *ngFor=\"let loc of filteredLocations; index as index\">\n              <div class=\"d-flex\">\n                <div class=\"col-md-5 img-main-container\">\n                  <div id=\"img_container\">\n                    <img class=\"location-img\" *ngIf=\"loc.annexes; else elseBlock\" [src]=\"loc.annexes\">\n                    <ng-template #elseBlock><img class=\"location-img\"\n                        src=\"./../../../../assets/images/visuel-off-big.jpg\" />\n                    </ng-template>\n                    <button *ngIf=\"isManagerForSpace(loc.id)\" class=\"btn-details\" [routerLink]=\"[loc.id]\">\n                      {{'View details' | translate}}</button>\n                  </div>\n  \n                </div>\n                <div class=\"col-md-7 location-info\">\n                  <p>{{loc.name}}</p>\n                  <p>{{loc.addresses}}</p>\n                  <p *ngFor=\"let visit of loc.visits\" (click)=\"onVisitClick(loc, visit)\" class=\"visit-name\"\n                    [style.cursor]=\"'pointer'\" ngbTooltip=\"Visit\">{{ visit.name ? visit.name : loc.name}}</p>\n                </div>\n              </div>\n            </li>\n  \n          </ul>\n        </div>\n        <div class=\"col-sm-12 col-md-12 col-lg-6\">\n          <lib-map [spaces]=\"filteredLocations\"></lib-map>\n        </div>\n      </div>\n    </section>\n    <lib-form-location *ngIf=\"isAdding\" (onChange)=\"onFormChange($event)\"></lib-form-location>\n</div>\n", styles: [".searchbar{margin-bottom:10px}input[type=file]{display:none}.form-control{border-radius:var(--form-control-border-radius)}.custom-select{border-color:var(--smarterplan-primary);width:auto}.form-new-loc{background-color:#d3d3d3;padding-top:10px;padding-bottom:10px;margin-bottom:15px}.btn-outline-primary{background-color:#fff}h4{color:var(--smarterplan-primary)}section .list-group{margin-top:15px}section .list-group-item{padding:5px 0}section .location-info{font-size:1.1em}section .location-img{width:100%;object-fit:cover;object-position:center bottom;height:165px}#img_container{position:relative;display:inline-block;text-align:center;width:250px}.img-main-container{max-width:250px;width:250px!important;margin-right:10px}.visit-name{color:var(--smarterplan-primary);font-weight:600}.btn-details{background-color:var(--smarterplan-primary-transparent);position:absolute;color:#fff;bottom:0px;right:0px;width:100%;height:30%;border:none;font-size:1em;text-transform:lowercase}#btn-icon{width:30px;height:30px;background:url(../../../../assets/icons/plus.svg);border:none;vertical-align:middle}#btn-icon:hover{background:url(../../../../assets/icons/plus-over.svg)}#btn-icon[disabled]:hover{background:url(../../../../assets/icons/plus.svg)}.outer_circle{background-color:#ebebeb;border-radius:50%;width:32px;height:32px;padding:1px;margin-left:5px}.refreshIcon{color:var(--smarterplan-primary);cursor:pointer}.refreshIcon svg{vertical-align:middle!important}.add-location{width:12vw}.sp-row{display:flex;flex-direction:row}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: i2.SearchBarComponent, selector: "lib-search-bar", inputs: ["searchable", "objectType"], outputs: ["searchEvent"] }, { type: MapComponent, selector: "lib-map", inputs: ["spaces"] }, { type: FormLocationComponent, selector: "lib-form-location", inputs: ["location"], outputs: ["onChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocationsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-locations', template: "<div class=\"dashboard-tab\">\n    <div class=\"header-dashboard-tab\">\n      <div class=\"m-3\">\n        <lib-tab-navigation (onGoBack)=\"onFormChange(null)\" [menuItems]='menuItems'></lib-tab-navigation>\n        <span class=\"ml-3 refreshIcon\" (click)=\"refresh()\" *ngIf=\"!(isAdding)\" ngbTooltip=\"Refresh list\">\n          <span class=\"iconify refreshIcon\" data-icon=\"ion:refresh-circle\" data-width=\"35\" data-rotate=\"90deg\"></span>\n        </span>\n      </div>  \n      <lib-search-bar *ngIf=\"!isAdding && !isMuseumUser\" [searchable]=\"locations\" [objectType]=\"getSearchType()\"\n        (searchEvent)=\"applyResultsSearchBar($event)\"></lib-search-bar>\n      \n      <div class=\"col-md-8\">\n        <div class=\"sp-row\" *ngIf=\"!isAdding && isManager\">\n          <button class=\"btn btn-outline-primary rounded-pill add-location\" (click)=\"onAddLocation()\">\n            {{'Add location' | translate}}</button>\n          <!-- <div class=\"outer_circle\">\n            <button id='btn-icon' (click)=\"onAddLocation()\"></button>\n          </div> -->\n        </div>\n      </div>\n    </div>\n    <hr>\n    <div class=\"row\" *ngIf=\"isAdding\">\n      <div class=\"col-md-6\">\n        <h4>{{'New location' | translate}}</h4>\n      </div>\n    </div>\n    <section *ngIf=\"!isAdding\">\n      <div class=\"row\">\n        <div class=\"col-sm-12 col-md-12 col-lg-6\" *ngIf=\"filteredLocations\">\n          <ul class=\"list-group list-group-flush\">\n            <li class=\"d-flex justify-content-between list-group-item\"\n              *ngFor=\"let loc of filteredLocations; index as index\">\n              <div class=\"d-flex\">\n                <div class=\"col-md-5 img-main-container\">\n                  <div id=\"img_container\">\n                    <img class=\"location-img\" *ngIf=\"loc.annexes; else elseBlock\" [src]=\"loc.annexes\">\n                    <ng-template #elseBlock><img class=\"location-img\"\n                        src=\"./../../../../assets/images/visuel-off-big.jpg\" />\n                    </ng-template>\n                    <button *ngIf=\"isManagerForSpace(loc.id)\" class=\"btn-details\" [routerLink]=\"[loc.id]\">\n                      {{'View details' | translate}}</button>\n                  </div>\n  \n                </div>\n                <div class=\"col-md-7 location-info\">\n                  <p>{{loc.name}}</p>\n                  <p>{{loc.addresses}}</p>\n                  <p *ngFor=\"let visit of loc.visits\" (click)=\"onVisitClick(loc, visit)\" class=\"visit-name\"\n                    [style.cursor]=\"'pointer'\" ngbTooltip=\"Visit\">{{ visit.name ? visit.name : loc.name}}</p>\n                </div>\n              </div>\n            </li>\n  \n          </ul>\n        </div>\n        <div class=\"col-sm-12 col-md-12 col-lg-6\">\n          <lib-map [spaces]=\"filteredLocations\"></lib-map>\n        </div>\n      </div>\n    </section>\n    <lib-form-location *ngIf=\"isAdding\" (onChange)=\"onFormChange($event)\"></lib-form-location>\n</div>\n", styles: [".searchbar{margin-bottom:10px}input[type=file]{display:none}.form-control{border-radius:var(--form-control-border-radius)}.custom-select{border-color:var(--smarterplan-primary);width:auto}.form-new-loc{background-color:#d3d3d3;padding-top:10px;padding-bottom:10px;margin-bottom:15px}.btn-outline-primary{background-color:#fff}h4{color:var(--smarterplan-primary)}section .list-group{margin-top:15px}section .list-group-item{padding:5px 0}section .location-info{font-size:1.1em}section .location-img{width:100%;object-fit:cover;object-position:center bottom;height:165px}#img_container{position:relative;display:inline-block;text-align:center;width:250px}.img-main-container{max-width:250px;width:250px!important;margin-right:10px}.visit-name{color:var(--smarterplan-primary);font-weight:600}.btn-details{background-color:var(--smarterplan-primary-transparent);position:absolute;color:#fff;bottom:0px;right:0px;width:100%;height:30%;border:none;font-size:1em;text-transform:lowercase}#btn-icon{width:30px;height:30px;background:url(../../../../assets/icons/plus.svg);border:none;vertical-align:middle}#btn-icon:hover{background:url(../../../../assets/icons/plus-over.svg)}#btn-icon[disabled]:hover{background:url(../../../../assets/icons/plus.svg)}.outer_circle{background-color:#ebebeb;border-radius:50%;width:32px;height:32px;padding:1px;margin-left:5px}.refreshIcon{color:var(--smarterplan-primary);cursor:pointer}.refreshIcon svg{vertical-align:middle!important}.add-location{width:12vw}.sp-row{display:flex;flex-direction:row}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.SpaceService }, { type: i1.Router }, { type: i2.BaseUserService }, { type: i2.ViewerService }, { type: i2.NavigationService }, { type: i2.NavigatorService }]; } });
+
+class DetailLocationComponent {
+    constructor(route, spaceService, router, userService, translate, navigatorService) {
+        this.route = route;
+        this.spaceService = spaceService;
+        this.router = router;
+        this.userService = userService;
+        this.translate = translate;
+        this.navigatorService = navigatorService;
+        this.isEditing = false;
+        this.menuItems = [];
+        this.isValidatingDpe = false;
+        this.gettingData = false;
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.id = this.route.snapshot.paramMap.get("id");
+            this.navigatorService.locationIDChange.next(this.id); // Send update for the location filter bar
+            this.space = yield this.spaceService.getSpace(this.id);
+            this.setupMenuItems();
+            this.setGuestLink();
+            this.setCanArchive();
+        });
+    }
+    setupMenuItems() {
+        this.menuItems = [
+            { label: "Locations", url: "/localisation" },
+            {
+                label: this.space.name,
+                url: `/localisation/${this.space.id}`,
+            },
+        ];
+        if (this.isEditing) {
+            this.menuItems.push({ label: "Edit" });
+        }
+        else {
+            this.menuItems.push({ label: "Information" });
+        }
+    }
+    onEdit() {
+        this.isEditing = true;
+        this.setupMenuItems();
+    }
+    onReturn() {
+        // this.locationService.back()
+        this.router.navigate(["dashboard/localisation"]);
+    }
+    reset() {
+        this.isEditing = false;
+        this.setupMenuItems();
+    }
+    onArchive() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const message = this.translate.instant("confirm.archiveSpace");
+            if (window.confirm(message)) {
+                yield this.spaceService.softDeleteSpace(this.id);
+                this.onReturn();
+            }
+        });
+    }
+    onFormChange(event) {
+        this.isEditing = false;
+        if (event) {
+            this.space = event;
+        }
+        this.setupMenuItems();
+    }
+    onDpeValidate() {
+        this.isValidatingDpe = true;
+        this.parsedMetadata = JSON.parse(this.space.metadata);
+        this.parsedMetadata = this.parsedMetadata.filter((result) => result.geo_adresse);
+    }
+    onSelectChange(selectedResult) {
+        for (const result of this.parsedMetadata) {
+            if (result !== selectedResult && result.selected) {
+                result.selected = false;
+            }
+        }
+        this.selectedDpeResult = selectedResult;
+    }
+    onSaveResult() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.selectedDpeResult) {
+                const input = {
+                    id: this.space.id,
+                    constructionYear: this.selectedDpeResult.annee_construction,
+                    classEnergyConsumption: this.selectedDpeResult.classe_consommation_energie,
+                    classGes: this.selectedDpeResult.classe_estimation_ges,
+                    status: SpaceStatus.DPE_VALIDATED,
+                };
+                const updatedLoc = yield this.spaceService.updateSpace(input);
+                this.space = updatedLoc;
+                this.isValidatingDpe = false;
+            }
+        });
+    }
+    onCancel() {
+        this.isValidatingDpe = false;
+    }
+    onErase() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.spaceService.updateSpace({
+                id: this.space.id,
+                status: SpaceStatus.DPE_VALIDATED,
+            });
+            this.space.status = SpaceStatus.DPE_VALIDATED;
+            this.isValidatingDpe = false;
+        });
+    }
+    onGetDpeData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.gettingData = true;
+            yield this.spaceService.updateSpace({
+                id: this.space.id,
+                status: SpaceStatus.DPE_FETCH,
+            });
+            // force update of location
+            setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                this.space = yield this.spaceService.getSpace(this.space.id);
+                this.gettingData = false;
+            }), 1500);
+        });
+    }
+    setGuestLink() {
+        if (this.space.guestLink) {
+            const { origin } = document.location;
+            this.guestLink = `${origin}/${this.space.guestLink}`;
+            setTimeout(() => {
+                const hyperlink = document.querySelector("#linkHref");
+                const message = this.translate.instant("confirm.followLink");
+                hyperlink.addEventListener("click", () => __awaiter(this, void 0, void 0, function* () {
+                    if (window.confirm(message)) {
+                        window.location.href = this.guestLink;
+                        yield this.userService.logoutCurrentAndSignOutAuth();
+                        this.router.navigate(["auth"]);
+                    }
+                }));
+            }, 0);
+        }
+    }
+    setCanArchive() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.canArchive = this.userService.isSPAdmin()
+                ? true
+                : yield this.spaceService.canArchiveSpace(this.id);
+        });
+    }
+}
+DetailLocationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DetailLocationComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.SpaceService }, { token: i1.Router }, { token: i2.BaseUserService }, { token: i3.TranslateService }, { token: i2.NavigatorService }], target: i0.ɵɵFactoryTarget.Component });
+DetailLocationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DetailLocationComponent, selector: "lib-detail-location", ngImport: i0, template: "<div class=\"container-fluid\">\n    <div class=\"m-3\">\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"reset()\"></lib-tab-navigation>\n    </div>\n    <button class=\"btn btn-outline-primary rounded-pill me-3\" (click)=\"onReturn()\">{{'Back to locations' |\n        translate}}</button>\n    <div class=\"row\" *ngIf=\"!isEditing && space\">\n        <div class=\"col-md-5\">\n            <ul class=\"list-group list-group-flush\">\n                <li class=\"list-group-item bg-transparent\">{{'Name' | translate}}: {{space.name}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Address' | translate}}: {{space.addresses}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Construction year' | translate}}:\n                    {{space.constructionYear ?\n                        space.constructionYear : \"No data\" | translate}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Latitude' | translate}}:\n                    {{space.latitude ?\n                        space.latitude : \"No data\" | translate}}</li>\n                <li class=\"list-group-item bg-transparent\">{{'Longitude' | translate}}: {{space.longitude ?\n                    space.longitude : \"No data\" | translate}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Access level' | translate}}: {{space.level | translate\n                    }} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Energy Class' | translate}}:\n                    {{space.classEnergyConsumption ?\n                        space.classEnergyConsumption : \"No data\" | translate}}\n                    <button *ngIf=\"space.status !== 'DPE_TO_VALIDATE'\"\n                        class=\"btn btn-outline-primary rounded-pill no-lowercase ms-5\" (click)=\"onGetDpeData()\">\n                        {{'Get data from API DPE' | translate}}</button>\n                    <a class=\"bg-transparent ms-5\" *ngIf=\"space.status === 'DPE_TO_VALIDATE'\"\n                        (click)=\"onDpeValidate()\" style=\"cursor: pointer;\">\n                        <span class=\"iconify\" data-icon=\"mdi:alert-circle-check\" style=\"color: #f19c80;\" data-width=\"25\"\n                            data-height=\"25\"></span>\n                        {{'DPE data found. Click to validate' | translate}}\n                    </a>\n                </li>\n                <li class=\"list-group-item bg-transparent\">{{'Greenhouse gas emission Class' | translate}}:\n                    {{space.classGes ? space.classGes : \"No data\" | translate}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Shareable Guest Link' | translate}}:\n                    <div style=\"display: inline;\" *ngIf=\"guestLink\">\n                        <a id=\"linkHref\" target=\"_blank\">{{'Try the link' | translate }}</a>\n                        <div ngxClipboard [cbContent]=\"guestLink\" [style.cursor]=\"'pointer'\"\n                            style=\"margin-left: 5px; max-width: 20px; display: inline;\" ngbTooltip=\"Copied!\"\n                            triggers=\"click:blur\">\n                            <span class=\"iconify\" data-icon=\"mdi:content-copy\" data-inline=\"false\" data-width=\"20\"\n                                data-height=\"20\"></span>\n                        </div>\n                    </div>\n                    <p *ngIf=\"!guestLink\" style=\"display: inline;\">{{'No link' | translate }}</p>\n                    <p *ngIf=\"!guestLink\"><small>({{'Generate link from a VISITOR mission'|translate}})</small>\n                    </p>\n                </li>\n\n            </ul>\n            <div class=\"d-flex justify-content-center\" *ngIf=\"gettingData\">\n                <div class=\"spinner-border\" role=\"status\">\n                    <span class=\"visually-hidden\">Loading...</span>\n                </div>\n            </div>\n            <hr>\n            <div class=\"d-flex\">\n                <button class=\"btn btn-outline-primary rounded-pill me-3\" (click)=\"onEdit()\">{{'Edit' |\n                    translate}}</button>\n                <div class=\"tooltip-wrapper\" ngbTooltip=\"{{!canArchive ? ('Contact SmarterPlan' | translate) : ('Archive location and related data' | translate)}}\">\n                    <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onArchive()\" [disabled]=\"!canArchive\">\n                        {{'Archive' | translate}}</button>\n                </div>\n            </div>\n\n\n        </div>\n        <div class=\"col-md-7\" *ngIf=\"isValidatingDpe\">\n            <h6>{{'Most relevant results for' | translate}} : \n                <b>diagnostics de performance \u00E9nerg\u00E9tique (DPE) des b\u00E2timents tertiaires</b></h6>\n            <table class=\"table table-striped\">\n                <thead>\n                    <tr>\n                        <th scope=\"col\">#</th>\n                        <th scope=\"col\">{{'Apply to location' | translate}}</th>\n                        <th scope=\"col\">{{'Address' | translate}}</th>\n                        <th scope=\"col\">{{'Activity sector' | translate}}</th>\n                        <th scope=\"col\">{{'Construction year' | translate}}</th>\n                        <th scope=\"col\">{{'Energy Class' | translate}}</th>\n                        <th scope=\"col\">{{'Greenhouse gas emission Class' | translate}}</th>\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr *ngFor=\"let result of parsedMetadata; index as i\">\n                        <th scope=\"row\">{{ i + 1 }}</th>\n                        <td><input class=\"checkbox-apply\" type=\"checkbox\" [(ngModel)]=\"result.selected\"\n                                (change)=\"onSelectChange(result)\"></td>\n                        <td>{{result.geo_adresse}}</td>\n                        <td>{{result.secteur_activite}}</td>\n                        <td>{{ result.annee_construction }}</td>\n                        <td>{{ result.classe_consommation_energie }}</td>\n                        <td>{{ result.classe_estimation_ges }}</td>\n                    </tr>\n                </tbody>\n            </table>\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onSaveResult()\"\n                [disabled]=\"!selectedDpeResult\">{{'Save selected' |\n                translate}}</button>\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onErase()\">\n                {{'No match (erase data)' | translate}}</button>\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onCancel()\">\n                {{'Cancel' | translate}}</button>\n        </div>\n    </div>\n    <lib-form-location *ngIf=\"isEditing\" [location]=\"space\" (onChange)=\"onFormChange($event)\"></lib-form-location>\n</div>\n", styles: [""], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: FormLocationComponent, selector: "lib-form-location", inputs: ["location"], outputs: ["onChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$1.ClipboardDirective, selector: "[ngxClipboard]", inputs: ["ngxClipboard", "container", "cbContent", "cbSuccessMsg"], outputs: ["cbOnSuccess", "cbOnError"] }, { type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DetailLocationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-detail-location', template: "<div class=\"container-fluid\">\n    <div class=\"m-3\">\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"reset()\"></lib-tab-navigation>\n    </div>\n    <button class=\"btn btn-outline-primary rounded-pill me-3\" (click)=\"onReturn()\">{{'Back to locations' |\n        translate}}</button>\n    <div class=\"row\" *ngIf=\"!isEditing && space\">\n        <div class=\"col-md-5\">\n            <ul class=\"list-group list-group-flush\">\n                <li class=\"list-group-item bg-transparent\">{{'Name' | translate}}: {{space.name}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Address' | translate}}: {{space.addresses}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Construction year' | translate}}:\n                    {{space.constructionYear ?\n                        space.constructionYear : \"No data\" | translate}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Latitude' | translate}}:\n                    {{space.latitude ?\n                        space.latitude : \"No data\" | translate}}</li>\n                <li class=\"list-group-item bg-transparent\">{{'Longitude' | translate}}: {{space.longitude ?\n                    space.longitude : \"No data\" | translate}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Access level' | translate}}: {{space.level | translate\n                    }} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Energy Class' | translate}}:\n                    {{space.classEnergyConsumption ?\n                        space.classEnergyConsumption : \"No data\" | translate}}\n                    <button *ngIf=\"space.status !== 'DPE_TO_VALIDATE'\"\n                        class=\"btn btn-outline-primary rounded-pill no-lowercase ms-5\" (click)=\"onGetDpeData()\">\n                        {{'Get data from API DPE' | translate}}</button>\n                    <a class=\"bg-transparent ms-5\" *ngIf=\"space.status === 'DPE_TO_VALIDATE'\"\n                        (click)=\"onDpeValidate()\" style=\"cursor: pointer;\">\n                        <span class=\"iconify\" data-icon=\"mdi:alert-circle-check\" style=\"color: #f19c80;\" data-width=\"25\"\n                            data-height=\"25\"></span>\n                        {{'DPE data found. Click to validate' | translate}}\n                    </a>\n                </li>\n                <li class=\"list-group-item bg-transparent\">{{'Greenhouse gas emission Class' | translate}}:\n                    {{space.classGes ? space.classGes : \"No data\" | translate}} </li>\n                <li class=\"list-group-item bg-transparent\">{{'Shareable Guest Link' | translate}}:\n                    <div style=\"display: inline;\" *ngIf=\"guestLink\">\n                        <a id=\"linkHref\" target=\"_blank\">{{'Try the link' | translate }}</a>\n                        <div ngxClipboard [cbContent]=\"guestLink\" [style.cursor]=\"'pointer'\"\n                            style=\"margin-left: 5px; max-width: 20px; display: inline;\" ngbTooltip=\"Copied!\"\n                            triggers=\"click:blur\">\n                            <span class=\"iconify\" data-icon=\"mdi:content-copy\" data-inline=\"false\" data-width=\"20\"\n                                data-height=\"20\"></span>\n                        </div>\n                    </div>\n                    <p *ngIf=\"!guestLink\" style=\"display: inline;\">{{'No link' | translate }}</p>\n                    <p *ngIf=\"!guestLink\"><small>({{'Generate link from a VISITOR mission'|translate}})</small>\n                    </p>\n                </li>\n\n            </ul>\n            <div class=\"d-flex justify-content-center\" *ngIf=\"gettingData\">\n                <div class=\"spinner-border\" role=\"status\">\n                    <span class=\"visually-hidden\">Loading...</span>\n                </div>\n            </div>\n            <hr>\n            <div class=\"d-flex\">\n                <button class=\"btn btn-outline-primary rounded-pill me-3\" (click)=\"onEdit()\">{{'Edit' |\n                    translate}}</button>\n                <div class=\"tooltip-wrapper\" ngbTooltip=\"{{!canArchive ? ('Contact SmarterPlan' | translate) : ('Archive location and related data' | translate)}}\">\n                    <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onArchive()\" [disabled]=\"!canArchive\">\n                        {{'Archive' | translate}}</button>\n                </div>\n            </div>\n\n\n        </div>\n        <div class=\"col-md-7\" *ngIf=\"isValidatingDpe\">\n            <h6>{{'Most relevant results for' | translate}} : \n                <b>diagnostics de performance \u00E9nerg\u00E9tique (DPE) des b\u00E2timents tertiaires</b></h6>\n            <table class=\"table table-striped\">\n                <thead>\n                    <tr>\n                        <th scope=\"col\">#</th>\n                        <th scope=\"col\">{{'Apply to location' | translate}}</th>\n                        <th scope=\"col\">{{'Address' | translate}}</th>\n                        <th scope=\"col\">{{'Activity sector' | translate}}</th>\n                        <th scope=\"col\">{{'Construction year' | translate}}</th>\n                        <th scope=\"col\">{{'Energy Class' | translate}}</th>\n                        <th scope=\"col\">{{'Greenhouse gas emission Class' | translate}}</th>\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr *ngFor=\"let result of parsedMetadata; index as i\">\n                        <th scope=\"row\">{{ i + 1 }}</th>\n                        <td><input class=\"checkbox-apply\" type=\"checkbox\" [(ngModel)]=\"result.selected\"\n                                (change)=\"onSelectChange(result)\"></td>\n                        <td>{{result.geo_adresse}}</td>\n                        <td>{{result.secteur_activite}}</td>\n                        <td>{{ result.annee_construction }}</td>\n                        <td>{{ result.classe_consommation_energie }}</td>\n                        <td>{{ result.classe_estimation_ges }}</td>\n                    </tr>\n                </tbody>\n            </table>\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onSaveResult()\"\n                [disabled]=\"!selectedDpeResult\">{{'Save selected' |\n                translate}}</button>\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onErase()\">\n                {{'No match (erase data)' | translate}}</button>\n            <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onCancel()\">\n                {{'Cancel' | translate}}</button>\n        </div>\n    </div>\n    <lib-form-location *ngIf=\"isEditing\" [location]=\"space\" (onChange)=\"onFormChange($event)\"></lib-form-location>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.SpaceService }, { type: i1.Router }, { type: i2.BaseUserService }, { type: i3.TranslateService }, { type: i2.NavigatorService }]; } });
+
+class CalibrationComponent {
+    constructor(matterportImportService, planService, route, router, zoneService, spaceService, navigationService, translate) {
+        this.matterportImportService = matterportImportService;
+        this.planService = planService;
+        this.route = route;
+        this.router = router;
+        this.zoneService = zoneService;
+        this.spaceService = spaceService;
+        this.navigationService = navigationService;
+        this.translate = translate;
+        /** Item to display for the navbar */
+        this.menuItems = [];
+        /** Zoom ratio of the canvas/plan  */
+        this.canvasZoom = 0;
+        /** Opacity for matterport iframe */
+        this.opacity = 50;
+        /** Current rotation for matterport, [0-360],  matterport rotation is bind to input range */
+        this.rotation = 180;
+        /** Previous rotation, use to calculate the deltaRotation to rotate, when user change rotation value using range input */
+        this.prevRotation = 180;
+        /** True when the user is currently rotating with the input range, the matterport rotation events will be ignored */
+        this.isRotatingRange = false;
+        /** Rotating queue event to send to matterport */
+        this.rotatingQueueEvent = [];
+        /** True when Vertical symmetry is enabled */
+        this.reflectV = false;
+        /** True when Horizontal symmetry is enabled */
+        this.reflectH = false;
+        this.chosenPlanIsPdf = false;
+        /** First Point in visit, used to determine the calibration  */
+        this.firstMarkVisit = { x: 0, y: 0 };
+        /** Second Point in visit, used to determine the calibration  */
+        this.secondMarkVisit = { x: 0.5, y: 0.5 };
+        /** Equivalent of 'firstMarkVisit' in canvas  */
+        this.firstMarkPlan = { x: 0, y: 0 };
+        /** Equivalent of 'secondMarkVisit' in canvas  */
+        this.secondMarkPlan = { x: 0, y: 0 };
+        /** Calibration result, (offsetX, offsetY, x, y) */
+        this.calibrage = {};
+        /** Is in preview mode (see scan result) */
+        this.preview = false;
+        /** Matterport is loading */
+        this.loading = true;
+        this.positions = [];
+        this.floors = [];
+        this.zoomCanBeChanged = false;
+    }
+    ngOnDestroy() {
+        if (!this.loading) {
+            this.matterportImportService.removeFrame();
+        }
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.spaceID = this.route.snapshot.queryParams.spaceID;
+            this.currentSpace = yield this.spaceService.getSpace(this.spaceID);
+            /** Menu nav bar */
+            this.setupMenuItems();
+            this.chosenPlan = this.planService.getChosenPlan();
+            if (this.chosenPlan) {
+                this.chosenPlanIsPdf = this.chosenPlan.annexe.includes("pdf");
+                this.launchViewer();
+                setTimeout(() => {
+                    this.configureCanvas().then(() => {
+                        this.panzoom = panzoom(this.canvas, {
+                            bounds: true,
+                            boundsPadding: 0,
+                            maxZoom: 2.5,
+                            minZoom: 0.1,
+                            initialZoom: 1,
+                            zoomSpeed: 0.02,
+                        });
+                    });
+                }, 500);
+            }
+            else {
+                this.router.navigate([
+                    "/dashboard/localisation",
+                    this.spaceID,
+                    "plans",
+                ]);
+            }
+        });
+    }
+    /** **********************************************************************************************
+     *                                      MENU NAV BAR
+     *********************************************************************************************** */
+    setupMenuItems() {
+        this.menuItems = [
+            { label: "Locations", url: "/localisation" },
+            {
+                label: this.currentSpace.name,
+                url: `/localisation/${this.spaceID}`,
+            },
+            {
+                label: "Plans",
+                url: `/localisation/${this.currentSpace.id}/plans`,
+            },
+            {
+                label: "Calibration",
+                url: `/localisation/${this.currentSpace.id}/plan-calibration?spaceID=${this.currentSpace.id}`,
+            },
+        ];
+    }
+    /** **********************************************************************************************
+     *                                     CANVAS
+     *********************************************************************************************** */
+    /** Display the plan */
+    configureCanvas() {
+        return __awaiter(this, void 0, void 0, function* () {
+            /** Get canvas */
+            if (!this.canvas) {
+                const canvas = document.querySelector("#canvas");
+                this.canvas = canvas;
+            }
+            if (!this.chosenPlanIsPdf) {
+                const image = yield getMetaForImage(this.chosenPlan.filepath);
+                /** Compute the new size for the canvas/matterport, base on the dimension of the plan, keeping the ratio */
+                const size = this.getSizeForCanvas(image.width, image.height);
+                /** Compute the plan zoom ratio (use for the calibration later) */
+                this.canvasZoom = size.w / image.width;
+                this.resizeView(size);
+                /** Draw Plan on the canvas */
+                this.drawImage(this.chosenPlan.filepath);
+            }
+            else {
+                // TODO
+                this.pdfToCanvas();
+            }
+        });
+    }
+    /** Update size of the canvas/matterport */
+    resizeView(size) {
+        this.canvasDiv.nativeElement.style.width = `${size.w}px`;
+        this.canvasDiv.nativeElement.style.height = `${size.h}px`;
+        this.canvas.style.width = `${size.w}px`;
+        this.canvas.style.height = `${size.h}px`;
+        this.canvas.width = size.w;
+        this.canvas.height = size.h;
+        this.canvasSize = size;
+    }
+    /** Draw something on the canvas */
+    drawImage(url, x = 0, y = 0, icone = false) {
+        const image = new Image();
+        const size = this.canvasSize;
+        const context = this.canvas.getContext("2d");
+        /** Flip the context, for symmetry */
+        // if (this.reflectV) {
+        //     context.translate(size.w, 0);
+        //     context.scale(-1, 1);
+        // }
+        // if (this.reflectH) {
+        //     context.translate(0, size.h);
+        //     context.scale(1, -1);
+        // }
+        let imageWidth = size.w;
+        let imageHeight = size.h;
+        image.addEventListener("load", () => {
+            if (icone) {
+                imageWidth = image.width;
+                imageHeight = image.height;
+            }
+            context.drawImage(image, 0, 0, image.width, image.height, x, y, imageWidth, imageHeight);
+        });
+        image.src = url;
+    }
+    /** Get the size for the canvas, based on the plan size, keeping the ratio */
+    getSizeForCanvas(w, h) {
+        let canvasW = this.canvasDiv.nativeElement.offsetWidth;
+        let canvasH = this.canvasDiv.nativeElement.offsetHeight;
+        const imageRatio = w / h;
+        const canvasRatio = canvasW / canvasH;
+        if (imageRatio > canvasRatio) {
+            canvasH = canvasW / imageRatio;
+        }
+        else {
+            canvasW = canvasH * imageRatio;
+        }
+        return { w: canvasW, h: canvasH };
+    }
+    /** [TODO] Convert a PDF to a Canvas */
+    pdfToCanvas() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const pdfjs = yield import('pdfjs-dist/build/pdf');
+            const pdfjsWorker = yield import('pdfjs-dist/build/pdf.worker.entry');
+            pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+            const pdf = yield getDocument(this.chosenPlan.filepath).promise;
+            const page = yield pdf.getPage(1);
+            const viewPortParameters = { scale: 1 };
+            const viewport = page.getViewport(viewPortParameters);
+            this.canvas.height = viewport.height;
+            this.canvas.width = viewport.width;
+            const size = this.getSizeForCanvas(viewport.width, viewport.height);
+            console.log(size);
+            this.canvasSize = size;
+            this.canvasZoom = size.w / viewport.width;
+            const context = this.canvas.getContext("2d");
+            const renderContext = {
+                canvasContext: context,
+                viewport,
+            };
+            const renderTask = page.render(renderContext).promise;
+            renderTask.then(() => console.log("Page rendered"));
+            // const res = canvas.toDataURL();
+            // if (pdf != null) pdf.destroy();
+            // return res;
+        });
+    }
+    /** User click to user Symmetry Vertical */
+    onReflectV() {
+        this.reflectV = !this.reflectV;
+        this.configureCanvas();
+    }
+    /** User click to user Symmetry Horizontal */
+    onReflectH() {
+        this.reflectH = !this.reflectH;
+        this.configureCanvas();
+    }
+    /** **********************************************************************************************
+     *                                     MATTERPORT
+     *********************************************************************************************** */
+    /** Launch matterport */
+    launchViewer() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.matterportImportService.initSdkForModel(this.chosenPlan.model3d);
+            const { sdk } = this.matterportImportService;
+            this.floors = Object.values(this.matterportImportService.floors);
+            // console.log(this.floors);
+            setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                /** Move Floor mode */
+                yield sdk.Mode.moveTo(sdk.Mode.Mode.FLOORPLAN);
+                /** Display the correct floor for the plan */
+                try {
+                    yield this.matterportImportService.moveToFloor(this.chosenPlan.name);
+                }
+                catch (_a) {
+                    console.log("couldnot move to floor");
+                }
+                /** We can display the matterport view now */
+                this.loading = false;
+            }), 300);
+            /** 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",
+                    });
+                }
+            });
+            /** Update current camera pose and rotation */
+            sdk.Camera.pose.subscribe((event) => {
+                /** We update only if the user is not changing the rotation with the <input> range, to not override the <input> value */
+                if (!this.isRotatingRange) {
+                    this.rotation = event.rotation.y + 180;
+                    this.prevRotation = this.rotation;
+                    this.cameraPose = event;
+                }
+            });
+        });
+    }
+    /** When the <input> range, for rotation, change */
+    onRotationChange() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const rotationDelta = this.rotation - this.prevRotation;
+            this.prevRotation = this.rotation;
+            /** Send the rotationDelta to th queue event in order to be send to matterport */
+            this.rotatingQueueEvent.push(rotationDelta);
+            /** Start to process the queue, if it's the first event */
+            if (!this.isRotatingRange) {
+                this.isRotatingRange = true;
+                this.processRotatingQueueEvent();
+            }
+        });
+    }
+    /** Process the rotating event queue, send event one by one to matterport  */
+    processRotatingQueueEvent() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { sdk } = this.matterportImportService;
+            /** While the queue is not empty */
+            while (this.rotatingQueueEvent.length > 0) {
+                /** Rotate matterport by deltaRotation and remove event from queue */
+                yield sdk.Camera.rotate(this.rotatingQueueEvent.shift(), 0, {
+                    speed: 360,
+                });
+            }
+            /** When the queue is empty, then the user is not rotating with the <input> range anymore */
+            this.isRotatingRange = false;
+        });
+    }
+    /** **********************************************************************************************
+     *                                     USER ACTIONS
+     *********************************************************************************************** */
+    /** Preview calibration */
+    onPreview() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.preview = true;
+            /** Place sweeps */
+            this.onPlaceSweeps();
+        });
+    }
+    calibrate() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const [navigation] = this.currentNavigations;
+            const position = JSON.parse(navigation.position);
+            this.firstMarkPlan =
+                yield this.matterportImportService.sdk.Renderer.getScreenPosition({
+                    x: position.x,
+                    y: position.y,
+                    z: position.z,
+                });
+            this.secondMarkPlan =
+                yield this.matterportImportService.sdk.Renderer.getScreenPosition({
+                    x: position.x,
+                    y: 0,
+                    z: 0,
+                });
+            const deltaZVisit = 0 - position.z;
+            let deltaXPlan = this.secondMarkPlan.x - this.firstMarkPlan.x;
+            if (deltaXPlan === 0) {
+                // console.log("we moved along Y axis on Plan");
+                const deltaYPlan = this.secondMarkPlan.y - this.firstMarkPlan.y;
+                this.calibrage.nameYAxis = "z";
+                this.calibrage.nameXAxis = "x";
+                this.calibrage.offsetY = this.secondMarkPlan.y;
+                this.calibrage.scaleY = deltaYPlan / deltaZVisit;
+            }
+            else {
+                // console.log(" we moved along X axis on Plan");
+                this.calibrage.nameYAxis = "x";
+                this.calibrage.nameXAxis = "z";
+                this.calibrage.offsetX = this.secondMarkPlan.x;
+                this.calibrage.scaleX = deltaXPlan / deltaZVisit;
+            }
+            const thirdMarkPlan = yield this.matterportImportService.sdk.Renderer.getScreenPosition({
+                x: 0,
+                y: 0,
+                z: position.z,
+            });
+            const deltaXVisit = 0 - position.x;
+            if (deltaXPlan === 0) {
+                // console.log(" we moved along X axis on Plan");
+                deltaXPlan = thirdMarkPlan.x - this.firstMarkPlan.x;
+                this.calibrage.offsetX = thirdMarkPlan.x;
+                this.calibrage.scaleX = deltaXPlan / deltaXVisit;
+            }
+            else {
+                const deltaYPlan = thirdMarkPlan.y - this.firstMarkPlan.y;
+                this.calibrage.offsetY = thirdMarkPlan.y;
+                this.calibrage.scaleY = deltaYPlan / deltaXVisit;
+            }
+            /** Take considiration of pan and zoom of plan on canvas */
+            const transformInfo = this.panzoom.getTransform();
+            const { scale, x, y } = transformInfo;
+            // console.log(transformInfo);
+            this.calibrage.offsetXPlan = x;
+            this.calibrage.offsetYPlan = y;
+            this.calibrage.scalePlan = scale;
+            console.log(this.calibrage);
+        });
+    }
+    /** Place sweeps */
+    onPlaceSweeps() {
+        return __awaiter(this, void 0, void 0, function* () {
+            /** Display all scan */
+            const zone = yield this.zoneService.getZone(this.chosenPlan.zoneID);
+            if (zone) {
+                this.currentZone = zone;
+                const navigations = yield this.navigationService.getNavigationsForZone(this.currentZone);
+                this.currentNavigations = navigations;
+                yield this.calibrate();
+                if (navigations.length > 0) {
+                    for (const navigation of navigations) {
+                        const testPosition = JSON.parse(navigation.position);
+                        const positionX = this.calibrage.nameXAxis === "x"
+                            ? testPosition.x
+                            : testPosition.z;
+                        const positionY = this.calibrage.nameYAxis === "x"
+                            ? testPosition.x
+                            : testPosition.z;
+                        const testX = positionX * this.calibrage.scaleX +
+                            this.calibrage.offsetX;
+                        const testY = positionY * this.calibrage.scaleY +
+                            this.calibrage.offsetY;
+                        // console.log("test position GREEN", testX, testY);
+                        const transformedX = (testX - this.calibrage.offsetXPlan) /
+                            this.calibrage.scalePlan; // we are undoing the pan and zoom
+                        const transformedY = (testY - this.calibrage.offsetYPlan) /
+                            this.calibrage.scalePlan;
+                        this.positions.push({
+                            navID: navigation.id,
+                            planID: this.chosenPlan.id,
+                            x: transformedX,
+                            y: transformedY,
+                        });
+                        const iconSize = 30 * this.calibrage.scalePlan;
+                        const shift = iconSize / 2;
+                        this.drawImage("https://api.iconify.design/mdi:adjust.svg?color=green&height=30&width=30", transformedX - shift, transformedY - shift, true);
+                    }
+                }
+            }
+        });
+    }
+    /** Save calibration */
+    onSave() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.currentZone) {
+                /** Normalize with the zoom */
+                // this.calibrage.offsetX /= this.canvasZoom;
+                // this.calibrage.offsetY /= this.canvasZoom;
+                // this.calibrage.x /= this.canvasZoom;
+                // this.calibrage.y /= this.canvasZoom;
+                this.calibrage.new = true;
+                this.calibrage.imgWidth = this.canvasSize.w;
+                this.calibrage.imgHeight = this.canvasSize.h;
+                yield this.planService.updatePlan({
+                    id: this.chosenPlan.id,
+                    calibration: JSON.stringify(this.calibrage),
+                });
+                yield Promise.all(this.positions.map((position) => __awaiter(this, void 0, void 0, function* () {
+                    const { navID } = position;
+                    delete position.navID;
+                    const nav = this.currentNavigations.find((_nav) => _nav.id === navID);
+                    let positionsDataToUpdate;
+                    if (nav.positionOnPlan) {
+                        const positionOnPlan = nav.positionOnPlan.map((entry) => JSON.parse(entry));
+                        const positionForCurrentPlan = positionOnPlan.find((entry) => entry.planID === this.chosenPlan.id);
+                        if (positionForCurrentPlan) {
+                            positionOnPlan.splice(positionOnPlan.indexOf(positionForCurrentPlan), 1, position);
+                        }
+                        else {
+                            positionOnPlan.push(position);
+                        }
+                        positionsDataToUpdate = [...positionOnPlan];
+                    }
+                    else {
+                        positionsDataToUpdate = [position];
+                    }
+                    // console.log(positionsDataToUpdate);
+                    yield this.navigationService.updateNavigation({
+                        id: navID,
+                        positionOnPlan: positionsDataToUpdate.map((entry) => JSON.stringify(entry)),
+                    });
+                })));
+            }
+            this.matterportImportService.removeFrame();
+            this.router.navigate([
+                "/dashboard/localisation",
+                this.spaceID,
+                "plans",
+            ]);
+            alert(this.translate.instant("calibration.success"));
+        });
+    }
+    /** Reset the canvas */
+    onReset() {
+        this.reflectH = false;
+        this.reflectV = false;
+        this.preview = false;
+        this.configureCanvas();
+    }
+    /** Cancel, leave */
+    onCancel() {
+        this.matterportImportService.removeFrame();
+        this.router.navigate([
+            "/dashboard/localisation",
+            this.spaceID,
+            "plans",
+        ]);
+        alert(this.translate.instant("calibration.canceled"));
+    }
+    onFloorClick(floor) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.currentFloor = floor;
+            yield this.matterportImportService.moveToFloor(floor.id);
+        });
+    }
+    onActivateZoomChange() {
+        this.zoomCanBeChanged = !this.zoomCanBeChanged;
+        const iframe = document.querySelector("#viewer-frame");
+        if (iframe) {
+            iframe.style.zIndex = this.zoomCanBeChanged ? "1" : "0";
+        }
+    }
+}
+CalibrationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CalibrationComponent, deps: [{ token: i2.MatterportImportService }, { token: i2.PlanService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.ZoneService }, { token: i2.SpaceService }, { token: i2.NavigationService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+CalibrationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CalibrationComponent, selector: "lib-calibration", viewQueries: [{ propertyName: "canvasDiv", first: true, predicate: ["canvasDiv"], descendants: true }], ngImport: i0, template: "<div class=\"row mt-3\">\n    <div class=\"col\">\n        <div class=\"m-3\">\n            <lib-tab-navigation [menuItems]='menuItems'></lib-tab-navigation>\n        </div>\n    </div>\n</div>\n\n<div id=\"rowCanvas\">\n    <div #canvasDiv id=\"canvasDiv\">\n\n        <div id=\"viewer-frame\" [style.pointer-events]=\"zoomCanBeChanged?'auto':'none'\">\n            <!-- <div class=\"blur\"></div> -->\n        </div>\n        <canvas id=\"canvas\" [ngStyle]=\"{'opacity': (preview||loading) ? '1' : 'calc(' + opacity + '/ 100)'}\"></canvas>\n    </div>\n\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"!(preview || loading)\">\n        <h1>{{'Calibration tool' | translate}}</h1>\n        <div class=\"tool\">\n            <div class=\"row ms-0 me-0 legend\">\n                <div [ngStyle]=\"{'opacity': 'calc(' + (-(opacity-100)+10) + '/ 100)'}\">{{'Less' | translate}}</div>\n                <div class=\"legend-title\">{{'Plan Opacity' | translate }}</div>\n                <div [ngStyle]=\"{'opacity': 'calc(' + (opacity+10) + '/ 100)'}\">{{'More' | translate}}</div>\n            </div>\n            <div class=\"row ms-0 me-0 \">\n                <input [disabled]=\"false\" [ngModelOptions]=\"{standalone: true}\" [(ngModel)]=\"opacity\" type=\"range\"\n                    class=\"form-range\" min=\"0\" max=\"100\" value=\"50\" id=\"opacity\">\n            </div>\n        </div>\n        <div class=\"tool\">\n            <div class=\"row ms-0 me-0 \">\n                <div class=\"label-legend\">{{'Change Visit Floor' | translate}}</div>\n                <div ngbDropdown class=\"d-inline-block ms-3\">\n                    <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>\n                        {{currentFloor ? currentFloor.id : ('Floor' | translate) }}</button>\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                        <button ngbDropdownItem *ngFor=\"let floor of floors\" (click)=\"onFloorClick(floor)\">\n                            {{ floor.name.length > 0 ? floor.name : ('Floor ' + floor.id) }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n        <div class=\"tool\">\n            <div class=\"row ms-0 me-0 \">\n                <div class=\"label-legend me-3\">{{'Pan/Zoom Visit' | translate}} {{zoomCanBeChanged ? \"ON\" : \"OFF\"}}\n                </div>\n                <input type=\"checkbox\" (change)=\"onActivateZoomChange()\" style=\"margin-top: 5px;\">\n                <div class=\"card border-warning mb-3 mt-3\" *ngIf=\"zoomCanBeChanged\">\n                    <div class=\"card-body text-warning\">\n                        <h5 class=\"card-title\">{{\"calibration.wait-message\" | translate}}</h5>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"action\">\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onPreview()\"\n                [disabled]=\"zoomCanBeChanged\">{{'Preview' | translate}}</button>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' |\n                translate}}</button>\n\n        </div>\n\n    </div>\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"preview\">\n        <h1>{{'Validation' | translate}}</h1>\n        <div class=\"action\">\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onSave()\">{{'Validate' |\n                translate}}</button>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onReset()\">{{'Reset' |\n                translate}}</button>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' |\n                translate}}</button>\n\n        </div>\n    </div>\n\n\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"loading\">\n        <h3>{{\"Waiting for Matterport\" | translate}}...</h3>\n        <div class=\"d-flex justify-content-center\">\n            <div class=\"spinner-border\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n            </div>\n        </div>\n\n    </div>\n</div>", styles: [".button-visit{display:none;height:30px;width:30px;position:absolute;background:url(https://api.iconify.design/mdi:map-marker-check.svg?color=red&height=30) no-repeat scroll 0 0 transparent;border:none}#button-visit-left{left:350px;top:550px}#button-visit-right{left:500px;top:600px}#rowCanvas{display:flex}#canvasDiv{height:100%;width:100%;position:relative}#canvas{width:100%;height:100%;opacity:.5}#viewer-frame{top:0;position:absolute;width:100%;height:100%}.calibration-tools{margin-left:20px;width:400px;background-color:#fff;z-index:11;border:1px solid var(--smarterplan-primary);padding:7px}.form-range{width:100%}.tool{margin-top:20px}.tool .legend{justify-content:space-between;position:relative;margin-bottom:5px}.tool .legend-title{font-size:1.2rem;color:var(--smarterplan-primary);position:absolute;margin:auto;width:100%;text-align:center;font-weight:700}.tool .label-legend{color:var(--smarterplan-primary);font-size:1.1rem}.blur{width:150px;height:52px;position:absolute;background-color:#1e2023;bottom:0}.symmetry{padding:5px;border:solid 2px;border-radius:10px;color:var(--smarterplan-primary);margin:25px 10px;cursor:pointer}.symmetry:hover{color:var(--smarterplan-primary)}.symmetry-row{justify-content:center}.action{margin-top:30px;display:flex;justify-content:space-evenly}h1{color:var(--smarterplan-primary);text-align:center;margin-bottom:20px}h3{color:var(--smarterplan-primary);text-align:center;margin-bottom:10px}.btn-outline-primary.disabled{background-color:var(--smarterplan-orange)!important}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }], directives: [{ type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CalibrationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-calibration', template: "<div class=\"row mt-3\">\n    <div class=\"col\">\n        <div class=\"m-3\">\n            <lib-tab-navigation [menuItems]='menuItems'></lib-tab-navigation>\n        </div>\n    </div>\n</div>\n\n<div id=\"rowCanvas\">\n    <div #canvasDiv id=\"canvasDiv\">\n\n        <div id=\"viewer-frame\" [style.pointer-events]=\"zoomCanBeChanged?'auto':'none'\">\n            <!-- <div class=\"blur\"></div> -->\n        </div>\n        <canvas id=\"canvas\" [ngStyle]=\"{'opacity': (preview||loading) ? '1' : 'calc(' + opacity + '/ 100)'}\"></canvas>\n    </div>\n\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"!(preview || loading)\">\n        <h1>{{'Calibration tool' | translate}}</h1>\n        <div class=\"tool\">\n            <div class=\"row ms-0 me-0 legend\">\n                <div [ngStyle]=\"{'opacity': 'calc(' + (-(opacity-100)+10) + '/ 100)'}\">{{'Less' | translate}}</div>\n                <div class=\"legend-title\">{{'Plan Opacity' | translate }}</div>\n                <div [ngStyle]=\"{'opacity': 'calc(' + (opacity+10) + '/ 100)'}\">{{'More' | translate}}</div>\n            </div>\n            <div class=\"row ms-0 me-0 \">\n                <input [disabled]=\"false\" [ngModelOptions]=\"{standalone: true}\" [(ngModel)]=\"opacity\" type=\"range\"\n                    class=\"form-range\" min=\"0\" max=\"100\" value=\"50\" id=\"opacity\">\n            </div>\n        </div>\n        <div class=\"tool\">\n            <div class=\"row ms-0 me-0 \">\n                <div class=\"label-legend\">{{'Change Visit Floor' | translate}}</div>\n                <div ngbDropdown class=\"d-inline-block ms-3\">\n                    <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>\n                        {{currentFloor ? currentFloor.id : ('Floor' | translate) }}</button>\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                        <button ngbDropdownItem *ngFor=\"let floor of floors\" (click)=\"onFloorClick(floor)\">\n                            {{ floor.name.length > 0 ? floor.name : ('Floor ' + floor.id) }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n        <div class=\"tool\">\n            <div class=\"row ms-0 me-0 \">\n                <div class=\"label-legend me-3\">{{'Pan/Zoom Visit' | translate}} {{zoomCanBeChanged ? \"ON\" : \"OFF\"}}\n                </div>\n                <input type=\"checkbox\" (change)=\"onActivateZoomChange()\" style=\"margin-top: 5px;\">\n                <div class=\"card border-warning mb-3 mt-3\" *ngIf=\"zoomCanBeChanged\">\n                    <div class=\"card-body text-warning\">\n                        <h5 class=\"card-title\">{{\"calibration.wait-message\" | translate}}</h5>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"action\">\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onPreview()\"\n                [disabled]=\"zoomCanBeChanged\">{{'Preview' | translate}}</button>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' |\n                translate}}</button>\n\n        </div>\n\n    </div>\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"preview\">\n        <h1>{{'Validation' | translate}}</h1>\n        <div class=\"action\">\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onSave()\">{{'Validate' |\n                translate}}</button>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onReset()\">{{'Reset' |\n                translate}}</button>\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' |\n                translate}}</button>\n\n        </div>\n    </div>\n\n\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"loading\">\n        <h3>{{\"Waiting for Matterport\" | translate}}...</h3>\n        <div class=\"d-flex justify-content-center\">\n            <div class=\"spinner-border\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n            </div>\n        </div>\n\n    </div>\n</div>", styles: [".button-visit{display:none;height:30px;width:30px;position:absolute;background:url(https://api.iconify.design/mdi:map-marker-check.svg?color=red&height=30) no-repeat scroll 0 0 transparent;border:none}#button-visit-left{left:350px;top:550px}#button-visit-right{left:500px;top:600px}#rowCanvas{display:flex}#canvasDiv{height:100%;width:100%;position:relative}#canvas{width:100%;height:100%;opacity:.5}#viewer-frame{top:0;position:absolute;width:100%;height:100%}.calibration-tools{margin-left:20px;width:400px;background-color:#fff;z-index:11;border:1px solid var(--smarterplan-primary);padding:7px}.form-range{width:100%}.tool{margin-top:20px}.tool .legend{justify-content:space-between;position:relative;margin-bottom:5px}.tool .legend-title{font-size:1.2rem;color:var(--smarterplan-primary);position:absolute;margin:auto;width:100%;text-align:center;font-weight:700}.tool .label-legend{color:var(--smarterplan-primary);font-size:1.1rem}.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) {
+        this.route = route;
+        this.router = router;
+        this.spaceService = spaceService;
+        this.planService = planService;
+        this.fb = fb;
+        this.translate = translate;
+        // chosenPlan: Plan;
+        this.indexDetails = -1;
+        this.loading = false;
+        this.uploadingPlan = false;
+        this.isCurrentPlanForZone = false;
+        this.chosenPlanIsPdf = false;
+        this.menuItems = [];
+    }
+    ngOnInit() {
+        this.spaceID = this.route.snapshot.paramMap.get("id");
+        this.getPlans();
+        if (this.planService.getPlanFileCache() &&
+            this.planService.getChosenPlan()) {
+            this.addPlanFromCache(this.planService.getPlanFileCache(), this.planService.getChosenPlan());
+            this.planService.setPlanFileCache(null);
+        }
+        this.planService.setChosenPlan(null);
+    }
+    setupMenuItems() {
+        this.menuItems = [
+            { label: "Locations", url: "/localisation" },
+            {
+                label: this.currentSpace.name,
+                url: `/localisation/${this.currentSpace.id}`,
+            },
+            {
+                label: "Plans",
+                url: `/localisation/${this.currentSpace.id}/plans`,
+            },
+        ];
+    }
+    onGoBack() { }
+    onPlanClick(plan) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (plan)
+                this.planService.setChosenPlan(plan);
+            this.chosenPlanIsPdf = plan.annexe.includes("pdf");
+            if (!this.chosenPlanIsPdf) {
+                setTimeout(() => {
+                    this.configureCanvas().then(() => {
+                        this.panzoom = panzoom(this.canvas, {
+                            bounds: true,
+                            boundsPadding: 0,
+                            maxZoom: 3.5,
+                            minZoom: 0.1,
+                            initialZoom: 0.5,
+                        });
+                    });
+                }, 500);
+            }
+        });
+    }
+    configureCanvas() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.uploadingPlan = true;
+            const canvas = document.querySelector("#canvas");
+            const image = yield getMetaForImage(this.getChoosenPlan().filepath);
+            canvas.width = image.width;
+            canvas.height = image.height;
+            this.canvas = canvas;
+            this.drawImage(this.getChoosenPlan().filepath);
+            this.uploadingPlan = false;
+        });
+    }
+    drawImage(url, x = 0, y = 0) {
+        const image = new Image();
+        const context = this.canvas.getContext("2d");
+        const imageWidth = this.canvas.width;
+        const imageHeight = this.canvas.height;
+        image.addEventListener("load", () => {
+            context.drawImage(image, 0, 0, image.width, image.height, x, y, imageWidth, imageHeight);
+        });
+        image.src = url;
+        // image.crossOrigin = "*"; //need to download as png,
+        // BUT: https://stackoverflow.com/questions/49503171/the-image-tag-with-crossorigin-anonymous-cant-load-success-from-s3
+    }
+    getPlans() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.loading = true;
+            this.currentSpace = yield this.spaceService.getSpace(this.spaceID);
+            this.setupMenuItems();
+            this.zones = this.currentSpace.zones.items;
+            this.plans = yield this.planService.getSingedPlansForSpace(this.spaceID);
+            this.loading = false;
+            if (this.plans.length === 1) {
+                this.onPlanClick(this.plans[0]);
+            }
+        });
+    }
+    getChoosenPlan() {
+        return this.planService.getChosenPlan();
+    }
+    removeImage() {
+        const context = this.canvas.getContext("2d");
+        context.clearRect(0, 0, 4096, 4096);
+    }
+    /**
+     *
+     */
+    onCalibrateClick() {
+        if (this.getChoosenPlan()) {
+            this.router.navigate(["/dashboard/localisation", this.spaceID, "plan-calibration"], { queryParams: { spaceID: this.spaceID } });
+        }
+    }
+    /**
+     *
+     */
+    onEditClick() {
+        if (this.getChoosenPlan()) {
+            this.router.navigate(["/dashboard/localisation", this.spaceID, "plan-edit"], { queryParams: { spaceID: this.spaceID } });
+        }
+    }
+    onUploadClick() {
+        const inputFile = document.querySelector("#upload-file");
+        inputFile.click();
+    }
+    addPlan(target) {
+        this.fileToUpload = target.files[0];
+        this.planForm = this.fb.group({
+            name: [this.fileToUpload.name, [Validators.required]],
+            zoneID: [null, [Validators.required]],
+            spaceID: this.spaceID,
+            isModified: false,
+            calibration: "",
+        });
+    }
+    addPlanFromCache(file, plan) {
+        this.fileToUpload = file;
+        this.planForm = this.fb.group({
+            name: [this.fileToUpload.name, [Validators.required]],
+            zoneID: [plan ? plan.zoneID : null, [Validators.required]],
+            spaceID: this.spaceID,
+            isModified: !!plan,
+            calibration: plan && plan.isModified && plan.calibration
+                ? plan.calibration
+                : "",
+        });
+    }
+    onSavePlan() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const formValue = this.planForm.value;
+            formValue.isCurrentForZone = this.isCurrentPlanForZone;
+            const createdPlan = yield this.planService.createPlanWithAnnexe(formValue, this.fileToUpload);
+            const filepath = yield getSignedFile(createdPlan.annexe);
+            if (filepath) {
+                createdPlan.filepath = filepath;
+            }
+            if (formValue.isCurrentForZone) {
+                // set all other plans to not current
+                this.planService.setAllPlansForZoneNotCurrent(createdPlan.zoneID, createdPlan.id);
+            }
+            this.plans.push(createdPlan);
+            this.planForm = null;
+            this.fileToUpload = null;
+        });
+    }
+    onCancelUpload() {
+        this.fileToUpload = null;
+        this.planForm = null;
+    }
+    onCurrentPlanClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.planService.updatePlan({
+                id: this.getChoosenPlan().id,
+                isCurrentForZone: this.getChoosenPlan().isCurrentForZone,
+            });
+            if (this.getChoosenPlan().isCurrentForZone) {
+                this.planService.setAllPlansForZoneNotCurrent(this.getChoosenPlan().zoneID, this.getChoosenPlan().id);
+            }
+        });
+    }
+    onDownloadClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const signedFile = yield downloadFileAsObject(this.getChoosenPlan().annexe);
+            if (signedFile) {
+                // @ts-ignore
+                downloadBlob(signedFile.Body, this.getChoosenPlan().name);
+            }
+        });
+    }
+    onDownloadAsPng() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const canvas = document.querySelector("#canvas");
+            canvas.toBlob(function (blob) {
+                downloadBlob(blob, "plan-as-png.png");
+            });
+        });
+    }
+    onRemoveClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const message = this.translate.instant("confirm.deletePlan");
+            if (window.confirm(message)) {
+                yield this.planService.deletePlan(this.getChoosenPlan());
+                this.removeImage();
+                this.planService.setChosenPlan(null);
+                this.getPlans();
+            }
+        });
+    }
+}
+PlansComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PlansComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.SpaceService }, { token: i2.PlanService }, { token: i1$2.FormBuilder }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+PlansComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: PlansComponent, selector: "lib-plans", ngImport: i0, template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\" class=\"dashboard-tab\">\n    <div class=\"m-3\">\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n    </div>\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n        <div class=\"spinner-border\" role=\"status\">\n            <span class=\"visually-hidden\">Loading...</span>\n        </div>\n    </div>\n    <div class=\"mt-3\" *ngIf=\"!plans && !loading\">\n        <h4 style=\"font-weight: bold;\">{{'No imported plans' | translate }}</h4>\n        <p>{{'For import from 3D visit: go Virtual Visits => Import Images' | translate}}</p>\n    </div>\n    <div class=\"row ms-1\">\n        <div ngbDropdown class=\"d-inline-block me-3\">\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>{{getChoosenPlan() ?\n                getChoosenPlan().name: ('Choose Plan' | translate) }}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                <button ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\">{{plan.name }}\n                </button>\n            </div>\n        </div>\n        <div class=\"d-inline-block\" ngbDropdown #myDrop=\"ngbDropdown\">\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownManual\" ngbDropdownToggle>{{'Choose action' |\n                translate}}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownManual\">\n                <button (click)=\"onCalibrateClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Calibrate' |\n                    translate}}</button>\n                <button (click)=\"onEditClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Edit plan' |\n                    translate}}\n                </button>\n                <button (click)=\"onUploadClick()\" ngbDropdownItem>{{'Upload new plan' | translate}}</button>\n                <button (click)=\"onDownloadClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Download plan' |\n                    translate}}</button>\n                <button (click)=\"onRemoveClick()\" ngbDropdownItem\n                    [disabled]=\"!getChoosenPlan() || getChoosenPlan().isImportedMatterport\">{{'Delete plan' |\n                    translate}}</button>\n                <!-- <button (click)=\"onDownloadAsPng()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">\n                    {{'Download plan as PNG' | translate}}</button> -->\n            </div>\n        </div>\n    </div>\n    <div class=\"row mt-3 ms-0\">\n        <h4 *ngIf=\"fileToUpload\">{{'New plan' | translate }}</h4>\n        <input class=\"hidden\" type=\"file\" id=\"upload-file\" name=\"upload-file\" accept=\"image/png, image/jpeg, .pdf, .svg\"\n            ngf-max-size=\"6MB\" (change)=\"addPlan($event.target)\">\n    </div>\n    <div class=\"col-md-6 mt-3\" *ngIf=\"planForm\">\n        <form (ngSubmit)=\"onSavePlan()\" [formGroup]=\"planForm\">\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Name' | translate}} </label>\n                <div class=\"col-sm-9\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\">\n                </div>\n            </div>\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Zone' | translate}} </label>\n                <div class=\"col-sm-9\">\n                    <select class=\"form-control\" formControlName=\"zoneID\">\n                        <option *ngFor=\"let zone of zones\" [ngValue]=\"zone.id\">\n                            {{ zone.name }}\n                        </option>\n                    </select>\n                </div>\n            </div>\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Set as current plan for zone' | translate}}</label>\n                <div class=\"col-sm-3\">\n                    <input type=\"checkbox\" [(ngModel)]=\"isCurrentPlanForZone\" [ngModelOptions]=\"{standalone: true}\">\n                </div>\n            </div>\n            <button [disabled]=\"planForm.invalid\" type='submit' class=\"btn btn-label-file rounded-pill\">{{'Save' |\n                translate}}</button>\n            <button class=\"btn btn-label-file rounded-pill ms-3\" type=\"button\" (click)=\"onCancelUpload()\">{{'Cancel' |\n                translate}}</button>\n        </form>\n    </div>\n    <ul class=\"col-md-6 list-group list-group-flush\" *ngIf=\"getChoosenPlan()\">\n        <li class=\"list-group-item bg-transparent\">{{'Name' | translate }} : {{getChoosenPlan().name}} </li>\n        <li class=\"list-group-item bg-transparent\"> {{'Plan is ' | translate }} :\n            {{getChoosenPlan().calibration ? ('Calibrated' | translate) : ('Not calibrated' | translate)}}</li>\n        <li class=\"list-group-item bg-transparent\">{{'Attributed to zone ' | translate }} :\n            {{getChoosenPlan().zone ? getChoosenPlan().zone.name : 'None'}}</li>\n        <li class=\"list-group-item bg-transparent\">{{'Is current plan for zone ' | translate }} :\n            <input type=\"checkbox\" [(ngModel)]=\"getChoosenPlan().isCurrentForZone\" (change)=\"onCurrentPlanClick()\">\n        </li>\n\n    </ul>\n\n    <div class=\"row mt-4\">\n        <div class=\"col-md-10\">\n            <embed *ngIf=\"getChoosenPlan() && chosenPlanIsPdf\" [src]=\"getChoosenPlan().filepath | safeUrl\"\n                type=\"application/pdf\" frameBorder=\"0\" scrolling=\"auto\" height=\"650px;\" width=\"100%\" />\n            <div *ngIf=\"!chosenPlanIsPdf\" class=\"row\" style=\"height: 500px; overflow: hidden;\" id=\"canvasDiv\">\n                <canvas id=\"canvas\" width=\"4096px\" height=\"4096px\">\n                    <!-- <img *ngIf=\"chosenPlan\" id=\"plan-image\" [src]=\"chosenPlan.filepath\" style=\"width: 100%;\"> -->\n                </canvas>\n\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".button-visit{display:none;height:30px;width:30px;position:absolute;background:url(https://api.iconify.design/mdi:map-marker-check.svg?color=red&height=30) no-repeat scroll 0 0 transparent;border:none}#button-visit-left{left:350px;top:550px}#button-visit-right{left:500px;top:600px}.hidden{visibility:hidden;width:1px;height:1px}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe, "safeUrl": i2.SafeUrlPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PlansComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-plans', template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\" class=\"dashboard-tab\">\n    <div class=\"m-3\">\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n    </div>\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n        <div class=\"spinner-border\" role=\"status\">\n            <span class=\"visually-hidden\">Loading...</span>\n        </div>\n    </div>\n    <div class=\"mt-3\" *ngIf=\"!plans && !loading\">\n        <h4 style=\"font-weight: bold;\">{{'No imported plans' | translate }}</h4>\n        <p>{{'For import from 3D visit: go Virtual Visits => Import Images' | translate}}</p>\n    </div>\n    <div class=\"row ms-1\">\n        <div ngbDropdown class=\"d-inline-block me-3\">\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>{{getChoosenPlan() ?\n                getChoosenPlan().name: ('Choose Plan' | translate) }}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                <button ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\">{{plan.name }}\n                </button>\n            </div>\n        </div>\n        <div class=\"d-inline-block\" ngbDropdown #myDrop=\"ngbDropdown\">\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownManual\" ngbDropdownToggle>{{'Choose action' |\n                translate}}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownManual\">\n                <button (click)=\"onCalibrateClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Calibrate' |\n                    translate}}</button>\n                <button (click)=\"onEditClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Edit plan' |\n                    translate}}\n                </button>\n                <button (click)=\"onUploadClick()\" ngbDropdownItem>{{'Upload new plan' | translate}}</button>\n                <button (click)=\"onDownloadClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Download plan' |\n                    translate}}</button>\n                <button (click)=\"onRemoveClick()\" ngbDropdownItem\n                    [disabled]=\"!getChoosenPlan() || getChoosenPlan().isImportedMatterport\">{{'Delete plan' |\n                    translate}}</button>\n                <!-- <button (click)=\"onDownloadAsPng()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">\n                    {{'Download plan as PNG' | translate}}</button> -->\n            </div>\n        </div>\n    </div>\n    <div class=\"row mt-3 ms-0\">\n        <h4 *ngIf=\"fileToUpload\">{{'New plan' | translate }}</h4>\n        <input class=\"hidden\" type=\"file\" id=\"upload-file\" name=\"upload-file\" accept=\"image/png, image/jpeg, .pdf, .svg\"\n            ngf-max-size=\"6MB\" (change)=\"addPlan($event.target)\">\n    </div>\n    <div class=\"col-md-6 mt-3\" *ngIf=\"planForm\">\n        <form (ngSubmit)=\"onSavePlan()\" [formGroup]=\"planForm\">\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Name' | translate}} </label>\n                <div class=\"col-sm-9\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\">\n                </div>\n            </div>\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Zone' | translate}} </label>\n                <div class=\"col-sm-9\">\n                    <select class=\"form-control\" formControlName=\"zoneID\">\n                        <option *ngFor=\"let zone of zones\" [ngValue]=\"zone.id\">\n                            {{ zone.name }}\n                        </option>\n                    </select>\n                </div>\n            </div>\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Set as current plan for zone' | translate}}</label>\n                <div class=\"col-sm-3\">\n                    <input type=\"checkbox\" [(ngModel)]=\"isCurrentPlanForZone\" [ngModelOptions]=\"{standalone: true}\">\n                </div>\n            </div>\n            <button [disabled]=\"planForm.invalid\" type='submit' class=\"btn btn-label-file rounded-pill\">{{'Save' |\n                translate}}</button>\n            <button class=\"btn btn-label-file rounded-pill ms-3\" type=\"button\" (click)=\"onCancelUpload()\">{{'Cancel' |\n                translate}}</button>\n        </form>\n    </div>\n    <ul class=\"col-md-6 list-group list-group-flush\" *ngIf=\"getChoosenPlan()\">\n        <li class=\"list-group-item bg-transparent\">{{'Name' | translate }} : {{getChoosenPlan().name}} </li>\n        <li class=\"list-group-item bg-transparent\"> {{'Plan is ' | translate }} :\n            {{getChoosenPlan().calibration ? ('Calibrated' | translate) : ('Not calibrated' | translate)}}</li>\n        <li class=\"list-group-item bg-transparent\">{{'Attributed to zone ' | translate }} :\n            {{getChoosenPlan().zone ? getChoosenPlan().zone.name : 'None'}}</li>\n        <li class=\"list-group-item bg-transparent\">{{'Is current plan for zone ' | translate }} :\n            <input type=\"checkbox\" [(ngModel)]=\"getChoosenPlan().isCurrentForZone\" (change)=\"onCurrentPlanClick()\">\n        </li>\n\n    </ul>\n\n    <div class=\"row mt-4\">\n        <div class=\"col-md-10\">\n            <embed *ngIf=\"getChoosenPlan() && chosenPlanIsPdf\" [src]=\"getChoosenPlan().filepath | safeUrl\"\n                type=\"application/pdf\" frameBorder=\"0\" scrolling=\"auto\" height=\"650px;\" width=\"100%\" />\n            <div *ngIf=\"!chosenPlanIsPdf\" class=\"row\" style=\"height: 500px; overflow: hidden;\" id=\"canvasDiv\">\n                <canvas id=\"canvas\" width=\"4096px\" height=\"4096px\">\n                    <!-- <img *ngIf=\"chosenPlan\" id=\"plan-image\" [src]=\"chosenPlan.filepath\" style=\"width: 100%;\"> -->\n                </canvas>\n\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".button-visit{display:none;height:30px;width:30px;position:absolute;background:url(https://api.iconify.design/mdi:map-marker-check.svg?color=red&height=30) no-repeat scroll 0 0 transparent;border:none}#button-visit-left{left:350px;top:550px}#button-visit-right{left:500px;top:600px}.hidden{visibility:hidden;width:1px;height:1px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.SpaceService }, { type: i2.PlanService }, { type: i1$2.FormBuilder }, { type: i3.TranslateService }]; } });
+
+class ChevronComponent {
+    constructor() {
+        this.conditionShowing = false;
+    }
+    ngOnInit() {
+    }
+}
+ChevronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChevronComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChevronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ChevronComponent, selector: "lib-chevron", inputs: { conditionShowing: "conditionShowing" }, ngImport: i0, template: "<div style=\"height: 30px; width: 30px;\">\n    <span class=\"icon-container\" >\n      <div [class]=\"conditionShowing ? 'icon-img-up' : 'icon-img-down'\"></div>\n    </span>\n</div>\n", styles: [".icon-container{height:30px;width:30px}.icon-img-down{width:30px;height:100%;background:url(https://api.iconify.design/mdi-light/chevron-right.svg?width=28) no-repeat center center/contain}.icon-img-up{width:30px;height:100%;background:url(https://api.iconify.design/mdi-light/chevron-down.svg?width=28) no-repeat center center/contain}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChevronComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-chevron', template: "<div style=\"height: 30px; width: 30px;\">\n    <span class=\"icon-container\" >\n      <div [class]=\"conditionShowing ? 'icon-img-up' : 'icon-img-down'\"></div>\n    </span>\n</div>\n", styles: [".icon-container{height:30px;width:30px}.icon-img-down{width:30px;height:100%;background:url(https://api.iconify.design/mdi-light/chevron-right.svg?width=28) no-repeat center center/contain}.icon-img-up{width:30px;height:100%;background:url(https://api.iconify.design/mdi-light/chevron-down.svg?width=28) no-repeat center center/contain}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { conditionShowing: [{
+                type: Input
+            }] } });
+
+class VisitsComponent {
+    constructor(fb, matterportImportService, captureService, nodeService, spaceService, route, modalService, visitService) {
+        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.visitIndexDetails = -1;
+        this.isEditing = false;
+        this.visitSubmitted = false;
+        this.currentSpace = { zones: [] };
+        this.visits = [];
+        this.canCancelImport = false;
+        this.imagesProcessed = 0;
+        this.totalImages = 0;
+        this.menuItems = [];
+        this.matterportImportService.importingImages.subscribe(() => {
+            this.canCancelImport = true;
+        });
+        this.matterportImportService.sweepProcessedCount.subscribe((count) => {
+            this.imagesProcessed = count + 1;
+        });
+        this.matterportImportService.totalSweepsCount.subscribe((count) => {
+            this.totalImages = count;
+        });
+    }
+    ngOnInit() {
+        this.spaceId = this.route.snapshot.paramMap.get("id");
+        this.resetVisits();
+    }
+    /*
+  Visit = {
+    captureID: string,
+    model3d: string,
+    takenAt: number,
+    spaceID: string,
+    viewer: CaptureViewer,
+    surface: number,
+    node: Node,
+    name?: string | null
+  }
+  */
+    setupMenuItems() {
+        this.menuItems = [
+            { label: "Locations", url: "/localisation" },
+            {
+                label: this.currentSpace.name,
+                url: `/localisation/${this.currentSpace.id}`,
+            },
+            {
+                label: "Virtual visits",
+                url: `/localisation/${this.currentSpace.id}/visits`,
+            },
+        ];
+    }
+    onGoBack() {
+        this.onCancel();
+    }
+    resetVisits() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.visits = [];
+            this.currentSpace = yield this.spaceService.getSpace(this.spaceId);
+            this.setupMenuItems();
+            yield this.visitService
+                .getVisitsForSpaceForUser(this.spaceId)
+                .then((visits) => {
+                if (visits) {
+                    this.visits = visits;
+                }
+            });
+        });
+    }
+    initVisitForm(input = null) {
+        if (input) {
+            this.visitForm = this.fb.group({
+                captureID: input.captureID,
+                nodeID: input.node.id,
+                name: [input.name, [Validators.required]],
+                model3D: [input.model3d, [Validators.required]],
+                viewer: input.viewer ? input.viewer : CaptureViewer.MATTERPORT,
+                surface: input.surface ? input.surface : null,
+            });
+            this.captureDate = input.takenAt;
+        }
+        else {
+            this.visitForm = this.fb.group({
+                model3D: [null, [Validators.required]],
+                viewer: CaptureViewer.MATTERPORT,
+                surface: null,
+                name: [null, [Validators.required]],
+            });
+        }
+    }
+    onToggleDetail(index) {
+        this.visitIndexDetails = index === this.visitIndexDetails ? -1 : index;
+    }
+    onAddVisit() {
+        this.initVisitForm();
+        this.menuItems.push({ label: "New" });
+    }
+    onEdit(visit) {
+        this.initVisitForm(visit);
+        this.isEditing = true;
+        this.menuItems.push({ label: visit.name });
+    }
+    onSubmitVisit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.visitSubmitted = true;
+            if (!this.visitForm.valid) {
+                return;
+            }
+            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);
+                    }
+                }));
+                // let newMetadata = this.currentSpace.metadata + "," + formValue.model3D;
+                // this.spaceService.update({ id: this.spaceId, metadata: newMetadata});
+                yield this.launchImport(formValue.model3D, formValue.surface, createdNode, false);
+                this.modalReference.close();
+            }
+            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.setupMenuItems();
+    }
+    onDelete(visit, index) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.visitService.deleteVisit(visit, this.spaceId);
+            this.resetVisits();
+        });
+    }
+    getDismissReason(reason) {
+        if (reason === ModalDismissReasons.ESC) {
+            return "by pressing ESC";
+        }
+        if (reason === ModalDismissReasons.BACKDROP_CLICK) {
+            return "by clicking on a backdrop";
+        }
+        return `with: ${reason}`;
+    }
+    launchImport(model3D, surface, node, imagesOnly = false) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.modalReference = this.modalService.open(this.content, {
+                ariaLabelledBy: "modal-basic-title",
+            });
+            this.modalReference.result.then((result) => {
+                this.closeResult = `Closed with: ${result}`;
+                console.log(this.closeResult);
+                this.cancelImport();
+            }, (error) => {
+                this.closeResult = `Dismissed ${this.getDismissReason(error)}`;
+                console.log(this.closeResult);
+                this.cancelImport();
+            });
+            const sdkStarted = yield this.matterportImportService.initSdkForModel(model3D);
+            yield (imagesOnly
+                ? this.matterportImportService.importData(this.spaceId, surface, true, node)
+                : this.matterportImportService.importData(this.spaceId, surface, false, node));
+            return Promise.resolve();
+        });
+    }
+    cancelImport() {
+        this.matterportImportService.abandon();
+        this.onCancel();
+        this.resetVisits();
+    }
+    onImport(visit) {
+        this.launchImport(visit.model3d, null, visit.node.id, true);
+    }
+}
+VisitsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VisitsComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.MatterportImportService }, { token: i2.CaptureService }, { token: i2.NodeService }, { token: i2.SpaceService }, { token: i1.ActivatedRoute }, { token: i7.NgbModal }, { token: i2.VisitService }], target: i0.ɵɵFactoryTarget.Component });
+VisitsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: VisitsComponent, selector: "lib-visits", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"container-fluid\" class=\"dashboard-tab\">\r\n    <div class=\"m-3\">\r\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n\r\n    <div class=\"row main-form-container\">\r\n        <div class=\"col-md-6 form-container\">\r\n            <ul class=\"list-group list-group-flush\" *ngIf=\"!visitForm\">\r\n                <li class=\"list-group-item list-group-item-action\" *ngFor=\"let visit of visits; index as index\"\r\n                    (click)=\"onToggleDetail(index)\">\r\n                    <div class=\"d-flex justify-content-between align-items-center\">\r\n                        {{visit.name ? visit.name : visit.model3d }}\r\n                        <lib-chevron [conditionShowing]=\"index==visitIndexDetails\"></lib-chevron>\r\n                    </div>\r\n                    <div *ngIf=\"index==visitIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                            <li class=\"list-group-item bg-transparent\">{{'Name' | translate}} : {{ visit.name ?\r\n                                visit.name : \"Not provided\" | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'3D Model' | translate}} : {{ visit.model3d }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Surface' | translate}}, m<sup>2</sup>: {{\r\n                                visit.surface ?\r\n                                visit.surface : 'Not provided' | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Viewer' | translate}} : {{ visit.viewer }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Date of capture' | translate}} : {{\r\n                                visit.takenAt | timeDateString | async}}\r\n                            <li class=\"list-group-item bg-transparent\">{{'Images are imported' | translate}} : {{\r\n                                visit.imagesImported }}\r\n                            </li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                            *ngIf=\"!visit.imagesImported\" (click)=\"onImport(visit)\">{{'Import images' |\r\n                            translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                            (click)=\"onEdit(visit)\">{{'Edit' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                            (click)=\"onDelete(visit, index)\">{{'Delete' | translate}}</button>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n            <div *ngIf=\"visitForm\">\r\n                <form (ngSubmit)=\"onSubmitVisit()\" [formGroup]=\"visitForm\">\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"name\">\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Reference 3D model' | translate}} *</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" [readonly]=\"isEditing\"\r\n                                [class.is-invalid]=\"model3D.invalid && visitSubmitted\" required\r\n                                formControlName=\"model3D\">\r\n                            <div class=\"invalid-feedback\">\r\n                                {{'Please provide the 3D model reference' | translate}}\r\n                            </div>\r\n                            <div *ngIf=\"isEditing\" class=\"text-danger\">\r\n                                {{'Cannot change 3D model reference. Please add new model.' | translate}}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Viewer' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"viewer\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Capture Date' | translate}}</label>\r\n                        <div class=\"input-group\">\r\n                            <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"captureDate\" ngbDatepicker\r\n                                #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                            <div class=\"input-group-append\">\r\n                                <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\"\r\n                                    type=\"button\"></button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\r\n                        translate}}</button>\r\n                </form>\r\n            </div>\r\n            <div *ngIf=\"!visitForm\">\r\n                <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onAddVisit()\">{{'Add 3D visit' |\r\n                    translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div id=\"viewer-frame\" style=\"width: 100%; aspect-ratio: 2/1;\"></div>\r\n    </div>\r\n    <ng-template #content let-modal>\r\n        <div class=\"modal-header\">\r\n            <h4 class=\"modal-title\" id=\"modal-basic-title\">{{'Importing Data' | translate}}</h4>\r\n            <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n                <span aria-hidden=\"true\">\u00D7</span>\r\n            </button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n            {{'Please do not leave or refresh this page...' | translate}}\r\n            <div *ngIf=\"totalImages != 0\">Imported {{imagesProcessed}} out of {{totalImages}} images.</div>\r\n            <div class=\"d-flex justify-content-center\">\r\n                <div class=\"spinner-border\" role=\"status\">\r\n                    <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-outline-dark\" [disabled]=\"!canCancelImport\"\r\n                (click)=\"modal.close('Cancel click')\">{{'Cancel import of images' | translate}}</button>\r\n        </div>\r\n    </ng-template>\r\n</div>", styles: [".col-form-label{width:180px;margin-bottom:1rem}.btn-outline-primary{width:200px;margin-right:1rem}.input-group{width:83%;height:-moz-fit-content;height:fit-content}.main-form-container{width:60vw;display:flex;flex-direction:column}@media screen and (max-width: 765px){.main-form-container{width:90vw}}.main-form-container .form-container{width:100%}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe, "async": i5.AsyncPipe, "timeDateString": i2.TimeDateToLocalStringPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VisitsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-visits', template: "<div class=\"container-fluid\" class=\"dashboard-tab\">\r\n    <div class=\"m-3\">\r\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n\r\n    <div class=\"row main-form-container\">\r\n        <div class=\"col-md-6 form-container\">\r\n            <ul class=\"list-group list-group-flush\" *ngIf=\"!visitForm\">\r\n                <li class=\"list-group-item list-group-item-action\" *ngFor=\"let visit of visits; index as index\"\r\n                    (click)=\"onToggleDetail(index)\">\r\n                    <div class=\"d-flex justify-content-between align-items-center\">\r\n                        {{visit.name ? visit.name : visit.model3d }}\r\n                        <lib-chevron [conditionShowing]=\"index==visitIndexDetails\"></lib-chevron>\r\n                    </div>\r\n                    <div *ngIf=\"index==visitIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                            <li class=\"list-group-item bg-transparent\">{{'Name' | translate}} : {{ visit.name ?\r\n                                visit.name : \"Not provided\" | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'3D Model' | translate}} : {{ visit.model3d }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Surface' | translate}}, m<sup>2</sup>: {{\r\n                                visit.surface ?\r\n                                visit.surface : 'Not provided' | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Viewer' | translate}} : {{ visit.viewer }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Date of capture' | translate}} : {{\r\n                                visit.takenAt | timeDateString | async}}\r\n                            <li class=\"list-group-item bg-transparent\">{{'Images are imported' | translate}} : {{\r\n                                visit.imagesImported }}\r\n                            </li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                            *ngIf=\"!visit.imagesImported\" (click)=\"onImport(visit)\">{{'Import images' |\r\n                            translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                            (click)=\"onEdit(visit)\">{{'Edit' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                            (click)=\"onDelete(visit, index)\">{{'Delete' | translate}}</button>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n            <div *ngIf=\"visitForm\">\r\n                <form (ngSubmit)=\"onSubmitVisit()\" [formGroup]=\"visitForm\">\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"name\">\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Reference 3D model' | translate}} *</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" [readonly]=\"isEditing\"\r\n                                [class.is-invalid]=\"model3D.invalid && visitSubmitted\" required\r\n                                formControlName=\"model3D\">\r\n                            <div class=\"invalid-feedback\">\r\n                                {{'Please provide the 3D model reference' | translate}}\r\n                            </div>\r\n                            <div *ngIf=\"isEditing\" class=\"text-danger\">\r\n                                {{'Cannot change 3D model reference. Please add new model.' | translate}}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Viewer' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"viewer\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Capture Date' | translate}}</label>\r\n                        <div class=\"input-group\">\r\n                            <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"captureDate\" ngbDatepicker\r\n                                #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                            <div class=\"input-group-append\">\r\n                                <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\"\r\n                                    type=\"button\"></button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\r\n                        translate}}</button>\r\n                </form>\r\n            </div>\r\n            <div *ngIf=\"!visitForm\">\r\n                <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onAddVisit()\">{{'Add 3D visit' |\r\n                    translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div id=\"viewer-frame\" style=\"width: 100%; aspect-ratio: 2/1;\"></div>\r\n    </div>\r\n    <ng-template #content let-modal>\r\n        <div class=\"modal-header\">\r\n            <h4 class=\"modal-title\" id=\"modal-basic-title\">{{'Importing Data' | translate}}</h4>\r\n            <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n                <span aria-hidden=\"true\">\u00D7</span>\r\n            </button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n            {{'Please do not leave or refresh this page...' | translate}}\r\n            <div *ngIf=\"totalImages != 0\">Imported {{imagesProcessed}} out of {{totalImages}} images.</div>\r\n            <div class=\"d-flex justify-content-center\">\r\n                <div class=\"spinner-border\" role=\"status\">\r\n                    <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-outline-dark\" [disabled]=\"!canCancelImport\"\r\n                (click)=\"modal.close('Cancel click')\">{{'Cancel import of images' | translate}}</button>\r\n        </div>\r\n    </ng-template>\r\n</div>", styles: [".col-form-label{width:180px;margin-bottom:1rem}.btn-outline-primary{width:200px;margin-right:1rem}.input-group{width:83%;height:-moz-fit-content;height:fit-content}.main-form-container{width:60vw;display:flex;flex-direction:column}@media screen and (max-width: 765px){.main-form-container{width:90vw}}.main-form-container .form-container{width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i2.MatterportImportService }, { type: i2.CaptureService }, { type: i2.NodeService }, { type: i2.SpaceService }, { type: i1.ActivatedRoute }, { type: i7.NgbModal }, { type: i2.VisitService }]; }, 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: "13.2.7", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CarouselComponent, selector: "lib-carousel", inputs: { images: "images" }, outputs: { currentScan: "currentScan" }, ngImport: i0, template: "<ngb-carousel [interval]=\"5000\" *ngIf=\"images && images.length > 1\" (slide)=\"onSlide($event)\">\n    <ng-template *ngFor=\"let image of images; let i = index\" ngbSlide [id]=\"'slideId_' + i\">\n        <div class=\"picsum-img-wrapper\">\n            <img [src]=\"image.path\" alt=\"Scan\" class=\"d-block w-100\">\n        </div>\n        <div class=\"carousel-caption\">\n            <h3>{{image.title}}</h3>\n            <p>{{image.description}}</p>\n        </div>\n    </ng-template>\n</ngb-carousel>\n\n<img *ngIf=\"images.length === 1\" [src]=\"images[0].path\" alt=\"Scan\" class=\"d-block w-100\">\n", styles: [""], components: [{ type: i7.NgbCarousel, selector: "ngb-carousel", inputs: ["animation", "activeId", "interval", "wrap", "keyboard", "pauseOnHover", "pauseOnFocus", "showNavigationArrows", "showNavigationIndicators"], outputs: ["slide", "slid"], exportAs: ["ngbCarousel"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbSlide, selector: "ng-template[ngbSlide]", inputs: ["id"], outputs: ["slid"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-carousel', template: "<ngb-carousel [interval]=\"5000\" *ngIf=\"images && images.length > 1\" (slide)=\"onSlide($event)\">\n    <ng-template *ngFor=\"let image of images; let i = index\" ngbSlide [id]=\"'slideId_' + i\">\n        <div class=\"picsum-img-wrapper\">\n            <img [src]=\"image.path\" alt=\"Scan\" class=\"d-block w-100\">\n        </div>\n        <div class=\"carousel-caption\">\n            <h3>{{image.title}}</h3>\n            <p>{{image.description}}</p>\n        </div>\n    </ng-template>\n</ngb-carousel>\n\n<img *ngIf=\"images.length === 1\" [src]=\"images[0].path\" alt=\"Scan\" class=\"d-block w-100\">\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { images: [{
+                type: Input
+            }], currentScan: [{
+                type: Output
+            }] } });
+
+class SelectionComponent {
+    constructor() {
+        /**Emit a new selection */
+        this.onSelectionChanged = new EventEmitter();
+        this.isMousedown = false;
+        this.selection = { startX: 0, startY: 0, endX: 0, endY: 0 };
+        this.selectionRectangle = { top: 0, left: 0, width: 0, height: 0 };
+    }
+    ngOnInit() {
+        this.selectionableZone = document.querySelector(".selectZone");
+        this.selectionElement = document.querySelector("#selection");
+        this.selectionableZone.addEventListener("mousedown", this.mousedown.bind(this));
+        this.selectionableZone.addEventListener("mousemove", this.mousemove.bind(this));
+        this.selectionableZone.addEventListener("mouseup", this.mouseup.bind(this));
+    }
+    /**
+     * Update the current selection
+     * Will update the selectionRectangle and Selection HTML element
+     * @param shouldEmit if true an event will be emitted through onSelectionChanged (true by default)
+     */
+    updateSelectionElement(shouldEmit = true) {
+        this.selectionRectangle.width = Math.abs(this.selection.endX - this.selection.startX);
+        this.selectionRectangle.height = Math.abs(this.selection.endY - this.selection.startY);
+        this.selectionRectangle.top = Math.min(this.selection.endY, this.selection.startY);
+        this.selectionRectangle.left = Math.min(this.selection.endX, this.selection.startX);
+        this.selectionElement.style.top = `${this.selectionRectangle.top}px`;
+        this.selectionElement.style.left = `${this.selectionRectangle.left}px`;
+        this.selectionElement.style.width = `${this.selectionRectangle.width}px`;
+        this.selectionElement.style.height = `${this.selectionRectangle.height}px`;
+        if (shouldEmit) {
+            this.onSelectionChanged.emit(this.selectionRectangle);
+        }
+    }
+    /**
+     * Trigger when mouse is press down on selectionableZone
+     * @param event
+     */
+    mousedown(event) {
+        if (event.button !== 2) { /**Selection with the right click, so ignore all other event */
+            return;
+        }
+        this.isMousedown = true;
+        this.selection = { startY: event.clientY, startX: event.clientX, endX: event.clientX, endY: event.clientY };
+        this.updateSelectionElement();
+    }
+    /**
+     * Trigger when mouse is release on selectionableZone
+     * @param event
+     */
+    mouseup(event) {
+        this.isMousedown = false;
+        this.selection = { startX: 0, startY: 0, endX: 0, endY: 0 };
+        this.updateSelectionElement(false);
+    }
+    /**
+     * Trigger when mouse is moving on selectionableZone
+     * @param event
+     */
+    mousemove(event) {
+        if (this.isMousedown) {
+            this.selection.endX = event.clientX;
+            this.selection.endY = event.clientY;
+            this.updateSelectionElement();
+        }
+    }
+}
+SelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SelectionComponent, selector: "lib-selection", outputs: { onSelectionChanged: "onSelectionChanged" }, ngImport: i0, template: "<ng-content></ng-content>\n\n<div id=\"selection\"></div>", styles: ["#selection{will-change:top,left,width,height;top:0px;left:0px;position:fixed;display:block;margin-top:0;margin-left:0;width:0px;height:0px;background:rgba(83,182,187,.3);border-radius:.15em;border:.15em solid rgba(83,182,187,.8);pointer-events:none}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-selection', template: "<ng-content></ng-content>\n\n<div id=\"selection\"></div>", styles: ["#selection{will-change:top,left,width,height;top:0px;left:0px;position:fixed;display:block;margin-top:0;margin-left:0;width:0px;height:0px;background:rgba(83,182,187,.3);border-radius:.15em;border:.15em solid rgba(83,182,187,.8);pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { onSelectionChanged: [{
+                type: Output
+            }] } });
+
+class AddZoneComponent {
+    constructor(fb, zoneService, layerService, userService, navigationService, planService) {
+        this.fb = fb;
+        this.zoneService = zoneService;
+        this.layerService = layerService;
+        this.userService = userService;
+        this.navigationService = navigationService;
+        this.planService = planService;
+        this.updatedZone = new EventEmitter();
+        this.isMuseumVisit = false;
+        this.parentZones = [];
+        this.carouselIsVisible = false;
+        this.isSubmitted = false;
+        this.chosenScans = [];
+        this.fromPlan = false;
+        this.planCalibrated = false;
+        this.chosenScansOnPlan = [];
+        this.navIDsZoneEdit = [];
+        this.zoneInitialNavCount = 0;
+        /** all scan buttons Element */
+        this.buttonElements = [];
+        /** Scan buttons that are in the current selection */
+        this.buttonsInSelection = [];
+        this.zoneIsMatterportFloor = false;
+    }
+    ngOnInit() {
+        this.parentZones = this.zones.filter((zone) => zone.layer && zone.layer.name === "FLOOR");
+        this.parentZones.unshift(this.defaultZone);
+        this.initZoneForm();
+        this.updateLayers();
+        this.getPlans();
+    }
+    ngOnChanges() {
+        this.initZoneForm();
+        if (this.newZoneData)
+            this.iniPlanForDraw();
+    }
+    updateLayers() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const mission = this.userService.currentMission(this.spaceID);
+            this.currentOrgId = mission.organisationID;
+            this.layers = yield this.layerService.getLayerForOrganisation(this.currentOrgId);
+        });
+    }
+    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
+                    ? this.zoneEdit.isMuseumVisitZone
+                    : false;
+                this.zoneForm = this.fb.group({
+                    id: this.zoneEdit.id,
+                    name: [this.zoneEdit.name, [Validators.required]],
+                    layerID: this.zoneEdit.layer ? this.zoneEdit.layer.id : null,
+                    surface: this.zoneEdit.surface ? this.zoneEdit.surface : 0,
+                    parentID: this.zoneEdit.parentID,
+                    parent: this.zoneEdit.parent,
+                    newLayer: null,
+                    isMuseumVisitZone: this.isMuseumVisit,
+                });
+            }
+            else {
+                const mainZone = this.zones.find((z) => !z.parentID);
+                this.zoneForm = this.fb.group({
+                    name: [
+                        this.newZoneData ? this.newZoneData.name : "",
+                        [Validators.required],
+                    ],
+                    layerID: null,
+                    surface: 0,
+                    parentID: mainZone.id,
+                    newLayer: null,
+                    isMuseumVisitZone: this.isMuseumVisit,
+                });
+            }
+        });
+    }
+    getPlans() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.plans = yield this.planService.getSingedPlansForSpace(this.spaceID);
+        });
+    }
+    onSubmitZone() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.isSubmitted = true;
+            if (!this.zoneForm.valid) {
+                return;
+            }
+            const formValue = this.zoneForm.value;
+            if (formValue.newLayer) {
+                yield this.createLayer(formValue.newLayer).then((layer) => {
+                    formValue.layerID = layer.id;
+                });
+            }
+            if (!formValue.layerID && !this.isMuseumVisit) {
+                // by defaul assign to layer: "Local" with uuid: d6138c5d-6938-49fa-a5c3-9cebde97594b
+                formValue.layerID = "d6138c5d-6938-49fa-a5c3-9cebde97594b";
+            }
+            const zoneInput = {
+                name: formValue.name,
+                surface: formValue.surface,
+                spaceID: this.spaceID,
+                layerID: formValue.layerID,
+                parentID: formValue.parentID,
+                isMuseumVisitZone: this.isMuseumVisit,
+                sweepIDs: [],
+            };
+            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);
+                    console.log(zoneUpdate);
+                    yield this.zoneService.updateZone(zoneUpdate);
+                    this.zoneEdit = null;
+                    this.updatedZone.emit(zoneUpdate.id);
+                }
+                else {
+                    yield this.setSweepsAndNodeForZoneInput(zoneInput);
+                    // console.log(zoneInput);
+                    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");
+    }
+    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.navIDsZoneEdit = scansZoneEdit;
+                this.chosenScansOnPlan = scansZoneEdit;
+                return Promise.resolve();
+            }
+            return Promise.resolve();
+        });
+    }
+    onPlanClick(plan = this.chosenPlan) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.chosenScansOnPlan = [];
+            this.chosenPlan = plan;
+            this.clearDivPlan();
+            this.addScanPoints();
+        });
+    }
+    addScanPoints() {
+        return __awaiter(this, void 0, void 0, function* () {
+            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.navIDsZoneEdit.length > 0 &&
+                    this.navIDsZoneEdit.includes(element.id) // button id is the navigation(not graph!) ids
+                ) {
+                    this.styleButton(element, true);
+                    this.chosenScansOnPlan.push(element.id);
+                }
+                else {
+                    this.styleButton(element);
+                }
+                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) */
+                },
+            });
+        });
+    }
+    /**
+     * When a button representing a scan is clicked
+     * @param button
+     */
+    onButtonScanClicked(button) {
+        button.style.backgroundImage = this.buttonIsChosen(button)
+            ? `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`
+            : `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`;
+        if (this.buttonIsChosen(button)) {
+            if (!this.chosenScansOnPlan.includes(button.id)) {
+                this.chosenScansOnPlan.push(button.id);
+            }
+        }
+        else if (this.chosenScansOnPlan.includes(button.id)) {
+            const index = this.chosenScansOnPlan.indexOf(button.id);
+            this.chosenScansOnPlan.splice(index, 1);
+        }
+    }
+    styleButton(button, isAdded = false) {
+        button.style.backgroundImage = isAdded
+            ? `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`
+            : `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`;
+        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";
+    }
+    buttonIsChosen(button) {
+        return button.style.backgroundImage.includes("adjust");
+    }
+    clearDivPlan() {
+        if (this.divPlan)
+            this.divPlan.innerHTML = "";
+    }
+    iniPlanForDraw() {
+        this.togglePlan();
+        setTimeout(() => {
+            this.onPlanClick();
+        }, 500);
+    }
+    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(coeffX, coeffY, element, navigations);
+                        break;
+                    case "ellipse":
+                        yield this.setScanInCircle(coeffX, coeffY, element, navigations);
+                        break;
+                    case "path":
+                        yield this.setScanInPolygon(coeffX, coeffY, element, navigations);
+                        break;
+                    default:
+                        break;
+                }
+            }));
+            resolve();
+        }));
+    }
+    setScanInRect(coeffX, coeffY, element, navigations) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const calibrage = JSON.parse(this.chosenPlan.calibration);
+            navigations.map((navigation) => {
+                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 = this.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(coeffX, coeffY, element, navigations) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const calibrage = JSON.parse(this.chosenPlan.calibration);
+            navigations.map(navigation => {
+                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 = this.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(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 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 ((yield this.isInPolygon(p, element.segList)) &&
+                    !this.navIDsZoneEdit.includes(navigation.id)) {
+                    this.navIDsZoneEdit.push(navigation.id);
+                }
+            }));
+        });
+    }
+    isInPolygon(p, polygon) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve) => {
+                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) {
+                    resolve(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;
+                    }
+                }
+                resolve(isInside);
+            });
+        });
+    }
+    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
+     */
+    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);
+    }
+    /**
+     * 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 = this.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) {
+            this.setVisuallySelected(button, false);
+        }
+        /** Visually Update selected list */
+        for (const button of newSelectedButtons) {
+            this.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,
+        ];
+    }
+    /**
+     * Visually change the state of a scan button, a selected button is blue
+     * @param button
+     * @param selected if true the button will be blue, otherwise it will red or green
+     */
+    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 = this.buttonIsChosen(button) ? "green" : "red";
+            button.style.backgroundImage = button.style.backgroundImage.replace("blue", color);
+        }
+    }
+    /**
+     * 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) {
+            this.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})`;
+        }
+    }
+    /**
+     * Adds all sweeps of the space
+     */
+    onAddAll() {
+        const defaultZone = this.zones.find((zone) => zone.layer && zone.layer.name === "BUILDING" && zone.sweepIDs);
+        if (defaultZone) {
+            this.chosenScansOnPlan = defaultZone.sweepIDs;
+            this.zoneForm.get("parentID").setValue(defaultZone.id);
+        }
+    }
+}
+AddZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddZoneComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.ZoneService }, { token: i2.LayerService }, { token: i2.BaseUserService }, { token: i2.NavigationService }, { token: i2.PlanService }], target: i0.ɵɵFactoryTarget.Component });
+AddZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AddZoneComponent, selector: "lib-add-zone", inputs: { zoneEdit: "zoneEdit", spaceID: "spaceID", images360: "images360", navigationIDs: "navigationIDs", zones: "zones", newZoneData: "newZoneData", chosenPlan: "chosenPlan", isMuseumVisit: "isMuseumVisit", defaultZone: "defaultZone" }, outputs: { updatedZone: "updatedZone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" *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\" [class.is-invalid]=\"name.invalid && isSubmitted\" required\r\n                        formControlName=\"name\">\r\n                    <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" [disabled]=\"!plans\"\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 of this space' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div ngbDropdown class=\"row d-inline-block me-3\" *ngIf=\"fromPlan\">\r\n                <div class=\"col\">\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\r\n            <div class=\"row mt-1\" *ngIf=\"fromPlan\">\r\n                <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\r\n                    <div class=\"selectZone\" oncontextmenu=\"return false;\">\r\n                        <div class=\"row\">\r\n                            <div style=\"overflow: hidden;width:100%;\">\r\n                                <div style=\"height: 400px; width: 100%;\" id=\"planDiv\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </lib-selection>\r\n\r\n                <div class=\"col-md-4 scanTool\" *ngIf=\"buttonElements.length > 0\">\r\n                    <div class=\"row mb-5 d-inline-block\">\r\n                        <h2>Selection tool</h2>\r\n                        <div class=\"protip\">Hold right click and move your cursor to select multiple scans.</div>\r\n                    </div>\r\n\r\n                    <div class=\"row mb-4\">\r\n                        <div class=\"col-3\" style=\"padding:0px\">\r\n                            <label class=\"tool-label\" for=\"scanSize\">Scan size</label>\r\n                        </div>\r\n                        <div class=\"col-9\">\r\n                            <input type=\"range\" class=\"form-range\" min=\"0.001\" max=\"5\" step=\"0.01\" value=\"1\"\r\n                                id=\"scanSize\" (input)=\"onChangeScanSize($event)\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"row mb-4\">\r\n                        <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSelectAll()\">Select all scans</button>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"buttonsInSelection.length > 0\" class=\"row editSelected\">\r\n                        <span class=\"tool-label\">Edit selected scans : </span>\r\n                        <button type=\"button\" class=\"btn btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">Add</button>\r\n                        <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSelectionRemove()\">Remove</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'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>", styles: [".form-range{width:100%}.scanTool{padding-left:50px;padding-right:50px}h2{color:var(--smarterplan-primary)}.protip{color:gray}.tool-label{font-size:1.3rem}.selectZone{background-color:gray;border-radius:1rem;overflow:hidden}.col-form-label{margin-bottom:1rem}.btn-outline-primary{min-width:200px;margin-bottom:1rem;margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}\n"], components: [{ type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }, { type: SelectionComponent, selector: "lib-selection", outputs: ["onSelectionChanged"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe, "slice": i5.SlicePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddZoneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-add-zone', template: "<div class=\"row\" *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\" [class.is-invalid]=\"name.invalid && isSubmitted\" required\r\n                        formControlName=\"name\">\r\n                    <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" [disabled]=\"!plans\"\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 of this space' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div ngbDropdown class=\"row d-inline-block me-3\" *ngIf=\"fromPlan\">\r\n                <div class=\"col\">\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\r\n            <div class=\"row mt-1\" *ngIf=\"fromPlan\">\r\n                <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\r\n                    <div class=\"selectZone\" oncontextmenu=\"return false;\">\r\n                        <div class=\"row\">\r\n                            <div style=\"overflow: hidden;width:100%;\">\r\n                                <div style=\"height: 400px; width: 100%;\" id=\"planDiv\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </lib-selection>\r\n\r\n                <div class=\"col-md-4 scanTool\" *ngIf=\"buttonElements.length > 0\">\r\n                    <div class=\"row mb-5 d-inline-block\">\r\n                        <h2>Selection tool</h2>\r\n                        <div class=\"protip\">Hold right click and move your cursor to select multiple scans.</div>\r\n                    </div>\r\n\r\n                    <div class=\"row mb-4\">\r\n                        <div class=\"col-3\" style=\"padding:0px\">\r\n                            <label class=\"tool-label\" for=\"scanSize\">Scan size</label>\r\n                        </div>\r\n                        <div class=\"col-9\">\r\n                            <input type=\"range\" class=\"form-range\" min=\"0.001\" max=\"5\" step=\"0.01\" value=\"1\"\r\n                                id=\"scanSize\" (input)=\"onChangeScanSize($event)\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"row mb-4\">\r\n                        <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSelectAll()\">Select all scans</button>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"buttonsInSelection.length > 0\" class=\"row editSelected\">\r\n                        <span class=\"tool-label\">Edit selected scans : </span>\r\n                        <button type=\"button\" class=\"btn btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">Add</button>\r\n                        <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSelectionRemove()\">Remove</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'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>", styles: [".form-range{width:100%}.scanTool{padding-left:50px;padding-right:50px}h2{color:var(--smarterplan-primary)}.protip{color:gray}.tool-label{font-size:1.3rem}.selectZone{background-color:gray;border-radius:1rem;overflow:hidden}.col-form-label{margin-bottom:1rem}.btn-outline-primary{min-width:200px;margin-bottom:1rem;margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i2.ZoneService }, { type: i2.LayerService }, { type: i2.BaseUserService }, { type: i2.NavigationService }, { type: i2.PlanService }]; }, propDecorators: { zoneEdit: [{
+                type: Input
+            }], spaceID: [{
+                type: Input
+            }], images360: [{
+                type: Input
+            }], navigationIDs: [{
+                type: Input
+            }], zones: [{
+                type: Input
+            }], newZoneData: [{
+                type: Input
+            }], updatedZone: [{
+                type: Output
+            }], chosenPlan: [{
+                type: Input
+            }], isMuseumVisit: [{
+                type: Input
+            }], defaultZone: [{
+                type: Input
+            }] } });
+
+class ZonesComponent {
+    constructor(route, zoneService, spaceService, visitService, navigationService, userService, planService, translate) {
+        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.lotIndexDetails = -1;
+        this.updatedZone = new EventEmitter();
+        this.isEditingZone = false;
+        this.carouselIsVisible = false;
+        this.planIsVisible = false;
+        this.loadingPlan = false;
+        this.menuItems = [];
+        this.isMuseumVisit = false;
+        this.isGuide = false;
+        this.isAdmin = false;
+        this.floorZones = [];
+        this.zonesMap = new Map();
+        this.floorDetails = -1;
+        this.defaultShowing = false;
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.spaceID = this.route.snapshot.paramMap.get("id");
+            this.setUserPermissions();
+            this.resetZones();
+        });
+    }
+    setUserPermissions() {
+        this.isGuide = this.userService.isGuide();
+        this.isAdmin = this.userService.isAdmin(this.spaceID);
+    }
+    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();
+    }
+    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");
+            // we add only children zones that are not Floors
+            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) {
+                this.zonesMap.set(floor.id, this.allZones.filter((zone) => zone.parentID === floor.id));
+            }
+            // this.zones = sortAlphabeticallyOnName(this.zones);
+            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();
+        });
+    }
+    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();
+            }
+        });
+    }
+    /**
+     * onToggleDetail folds/unfolds details for a zone
+     * @param i index of the lot to be toggled
+     */
+    onToggleDetail(index, zone) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.lotIndexDetails = index === this.lotIndexDetails ? -1 : index;
+            if (this.lotIndexDetails === -1) {
+                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();
+        });
+    }
+    onToggleDetailFloor(index, floor) {
+        this.defaultShowing = false;
+        this.floorDetails = index === this.floorDetails ? -1 : index;
+        if (this.floorDetails === -1) {
+            return;
+        }
+        this.currentZone = floor;
+        this.planIsVisible = true;
+        if (!this.plans) {
+            console.log("plans not ready");
+            return; // wait until the plans are set
+        }
+        this.preparePlan();
+    }
+    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;
+        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",
+        });
+    }
+    onDelete(zone, floorID) {
+        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)) {
+                yield this.zoneService.deleteZone(zone.id);
+                this.allZones.splice(this.allZones.indexOf(zone), 1);
+                const floorZones = this.zonesMap.get(floorID);
+                floorZones.splice(floorZones.indexOf(zone), 1);
+                this.zonesMap.set(floorID, floorZones);
+            }
+        });
+    }
+    editCompleted(event) {
+        this.lotIndexDetails = -1;
+        if (event) {
+            this.resetZones();
+        }
+        this.isEditingZone = false;
+        this.zoneForEdit = null;
+        this.planIsVisible = false;
+        this.carouselIsVisible = false;
+        this.setupMenuItems();
+    }
+    showScanPointsOnPlan(navigations) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const divPlan = document.querySelector("#planDiv");
+            yield showScanPointsOnPlanInDiv(this.currentPlan, divPlan, navigations);
+            this.loadingPlan = false;
+            panzoom(divPlan, {
+                bounds: true,
+                boundsPadding: 0,
+                maxZoom: 3.5,
+            });
+        });
+    }
+}
+ZonesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ZonesComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.ZoneService }, { token: i2.SpaceService }, { token: i2.VisitService }, { token: i2.NavigationService }, { token: i2.BaseUserService }, { token: i2.PlanService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+ZonesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ZonesComponent, selector: "lib-zones", outputs: { updatedZone: "updatedZone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\">\r\n    <div class=\"m-3\">\r\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"col-md-6\">\r\n        <ul class=\"list-group list-group-flush\" *ngIf=\"!isEditingZone\">\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}}: {{currentZone.layer ?\r\n                  currentZone.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"currentZone.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{currentZone.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!currentZone.virtual\">{{'Scan Points' | translate}}:\r\n                  {{currentZone.sweepIDs ? currentZone.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n              </ul>\r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == defaultZone.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">{{'Zone not visible in 3D visit'\r\n                            |\r\n                            translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <!-- <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot, floor.id)\">{{'Delete'\r\n                          | translate}}</button> -->\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n          \r\n          <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n              {{floor.name}}\r\n              <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\r\n              <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"index==floorDetails\" (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"index==floorDetails\">  \r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\r\n                  floor.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{floor.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\r\n                  {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\r\n                  translate}}</li>\r\n              </ul>\r\n              <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\r\n                translate}}</button>\r\n  \r\n              <!-- List of children zones -->\r\n  \r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == floor.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">{{'Zone not visible in 3D visit'\r\n                            |\r\n                            translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot, floor.id)\">{{'Delete'\r\n                          | 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 *ngIf=\"!isEditingZone\">\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\r\n            translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\"\r\n            *ngIf=\"isGuide || isAdmin\">\r\n            {{'Add museum itinerary' | translate}}</button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-6\" *ngIf=\"!isEditingZone\">\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\r\n          <div class=\"spinner-border\" role=\"status\">\r\n            <span class=\"visually-hidden\">Loading...</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\" style=\"overflow: hidden;\" *ngIf=\"currentZone\">\r\n          <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\" *ngIf=\"currentPlan\"></div>\r\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentPlan && plans && !currentZone.virtual && !loadingPlan\">\r\n            {{ 'Plan is not calibrated' | translate}}\r\n          </div>\r\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone && currentZone.virtual\">\r\n            {{ 'No scan points chosen' | translate}}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isEditingZone\">\r\n      <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\r\n        [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\" [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\r\n    </div>\r\n  </div>\r\n", styles: [".museum-label{background-color:#6f3974;font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}.default-zone-line-item{border-bottom-width:3px}.default-zone-label{background-color:var(--smarterplan-primary);font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }, { type: AddZoneComponent, selector: "lib-add-zone", inputs: ["zoneEdit", "spaceID", "images360", "navigationIDs", "zones", "newZoneData", "chosenPlan", "isMuseumVisit", "defaultZone"], outputs: ["updatedZone"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3.TranslatePipe, "keyvalue": i5.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ZonesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-zones', template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\">\r\n    <div class=\"m-3\">\r\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"col-md-6\">\r\n        <ul class=\"list-group list-group-flush\" *ngIf=\"!isEditingZone\">\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}}: {{currentZone.layer ?\r\n                  currentZone.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"currentZone.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{currentZone.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!currentZone.virtual\">{{'Scan Points' | translate}}:\r\n                  {{currentZone.sweepIDs ? currentZone.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n              </ul>\r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == defaultZone.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">{{'Zone not visible in 3D visit'\r\n                            |\r\n                            translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <!-- <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot, floor.id)\">{{'Delete'\r\n                          | translate}}</button> -->\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n          \r\n          <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n              {{floor.name}}\r\n              <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\r\n              <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"index==floorDetails\" (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"index==floorDetails\">  \r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\r\n                  floor.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{floor.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\r\n                  {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\r\n                  translate}}</li>\r\n              </ul>\r\n              <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\r\n                translate}}</button>\r\n  \r\n              <!-- List of children zones -->\r\n  \r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == floor.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">{{'Zone not visible in 3D visit'\r\n                            |\r\n                            translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot, floor.id)\">{{'Delete'\r\n                          | 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 *ngIf=\"!isEditingZone\">\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\r\n            translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\"\r\n            *ngIf=\"isGuide || isAdmin\">\r\n            {{'Add museum itinerary' | translate}}</button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-6\" *ngIf=\"!isEditingZone\">\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\r\n          <div class=\"spinner-border\" role=\"status\">\r\n            <span class=\"visually-hidden\">Loading...</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\" style=\"overflow: hidden;\" *ngIf=\"currentZone\">\r\n          <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\" *ngIf=\"currentPlan\"></div>\r\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentPlan && plans && !currentZone.virtual && !loadingPlan\">\r\n            {{ 'Plan is not calibrated' | translate}}\r\n          </div>\r\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone && currentZone.virtual\">\r\n            {{ 'No scan points chosen' | translate}}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isEditingZone\">\r\n      <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\r\n        [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\" [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\r\n    </div>\r\n  </div>\r\n", styles: [".museum-label{background-color:#6f3974;font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}.default-zone-line-item{border-bottom-width:3px}.default-zone-label{background-color:var(--smarterplan-primary);font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.ZoneService }, { type: i2.SpaceService }, { type: i2.VisitService }, { type: i2.NavigationService }, { type: i2.BaseUserService }, { type: i2.PlanService }, { type: i3.TranslateService }]; }, propDecorators: { updatedZone: [{
+                type: Output
+            }] } });
+
+class ImagesComponent {
+    constructor(route, spaceService, visitService, nodeService) {
+        this.route = route;
+        this.spaceService = spaceService;
+        this.visitService = visitService;
+        this.nodeService = nodeService;
+        this.loading = false;
+        this.menuItems = [];
+    }
+    ngOnInit() {
+        this.spaceID = this.route.snapshot.paramMap.get("id");
+        this.loadImages();
+    }
+    setupMenuItems() {
+        this.menuItems = [
+            { label: "Locations", url: "/localisation" },
+            {
+                label: this.currentSpace.name,
+                url: `/localisation/${this.spaceID}`,
+            },
+            { label: "360° Images" },
+        ];
+        if (this.currentVisit) {
+            this.menuItems.push({ label: this.currentVisit.name });
+        }
+    }
+    onGoBack() {
+        this.currentVisit = null;
+        this.currentImages = null;
+        this.setupMenuItems();
+    }
+    loadImages() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.loading = true;
+            this.currentSpace = yield this.spaceService.getSpace(this.spaceID);
+            this.setupMenuItems();
+            this.images = yield this.visitService.loadImagesForSpace(this.currentSpace);
+            if (this.currentSpace.visits.length === 1) {
+                this.setVisit(this.currentSpace.visits[0]);
+            }
+            this.loading = false;
+        });
+    }
+    setVisit(visit) {
+        this.currentVisit = visit;
+        this.currentImages = this.images.filter((im) => {
+            return im.visit === visit;
+        });
+        this.setupMenuItems();
+    }
+    setCurrentScan(id) {
+        this.currentScanID = id;
+    }
+    onInventoryClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { node } = this.currentVisit;
+            const { filename } = this.currentImages[this.currentScanID]; // 110ee452_sweep.jpeg
+            // check if node has already errors of inventory
+            const missingFilesErrors = [
+                InventoryStatus.ERROR_FILE_JSON_NOT_EXIST,
+                InventoryStatus.ERROR_FILE_MODEL_NOT_EXIST,
+                InventoryStatus.ERROR_FILE_OBJ_NOT_EXIST,
+            ];
+            if (node.inventoryStatus &&
+                missingFilesErrors.includes(node.inventoryStatus)) {
+                alert("Files missing for this visit's inventory. Contact your administrator.");
+            }
+            else {
+                yield this.nodeService.updateNode({
+                    id: node.id,
+                    inventoryStatus: InventoryStatus.TO_RUN_ONE_IMAGE,
+                    navigationForInventory: filename.split("_")[0],
+                });
+                alert("Automatic AI Inventory started! Detected equipments will appear soon in the visit.");
+            }
+        });
+    }
+}
+ImagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ImagesComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.SpaceService }, { token: i2.VisitService }, { token: i2.NodeService }], target: i0.ɵɵFactoryTarget.Component });
+ImagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ImagesComponent, selector: "lib-images", ngImport: i0, template: "<div class=\"container-fluid dashboard-tab col-sm-10 mb-3\" *ngIf=\"currentSpace\" >\n    <div class=\"m-3\">\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n    </div>\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border\" role=\"status\">\n        <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\n      </div>\n    </div>\n    <div ngbDropdown class=\"d-inline-block\" *ngIf=\"currentSpace.visits && currentSpace.visits.length > 0\">\n      <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" *ngIf=\"!currentVisit\"\n        ngbDropdownToggle>{{'Choose 3D visit' | translate}}</button>\n      <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n        <button ngbDropdownItem *ngFor=\"let visit of currentSpace.visits\" (click)=\"setVisit(visit)\"> {{ visit.name }}\n        </button>\n      </div>\n    </div>\n    <h3 *ngIf=\"currentVisit\">{{ currentVisit.name }}</h3>\n    <div class=\"mt-3\" *ngIf=\"currentVisit && currentImages.length == 0 && !loading\">\n      <h4>{{'No imported images' | translate }}</h4>\n      <p>{{'For import: go Virtual Visits => Import Images' | translate}}</p>\n    </div>\n    <button *ngIf=\"currentVisit && currentImages.length > 0 && !loading\"\n      class=\"btn btn-outline-primary rounded-pill no-lowercase mb-2\" (click)=\"onInventoryClick()\">\n      {{'Run AI inventory on this image' | translate}}</button>\n    <lib-carousel [images]=\"currentImages\" *ngIf=\"currentImages\" (currentScan)=\"setCurrentScan($event)\"></lib-carousel>\n  </div>", styles: [""], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ImagesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-images', template: "<div class=\"container-fluid dashboard-tab col-sm-10 mb-3\" *ngIf=\"currentSpace\" >\n    <div class=\"m-3\">\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n    </div>\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border\" role=\"status\">\n        <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\n      </div>\n    </div>\n    <div ngbDropdown class=\"d-inline-block\" *ngIf=\"currentSpace.visits && currentSpace.visits.length > 0\">\n      <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" *ngIf=\"!currentVisit\"\n        ngbDropdownToggle>{{'Choose 3D visit' | translate}}</button>\n      <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n        <button ngbDropdownItem *ngFor=\"let visit of currentSpace.visits\" (click)=\"setVisit(visit)\"> {{ visit.name }}\n        </button>\n      </div>\n    </div>\n    <h3 *ngIf=\"currentVisit\">{{ currentVisit.name }}</h3>\n    <div class=\"mt-3\" *ngIf=\"currentVisit && currentImages.length == 0 && !loading\">\n      <h4>{{'No imported images' | translate }}</h4>\n      <p>{{'For import: go Virtual Visits => Import Images' | translate}}</p>\n    </div>\n    <button *ngIf=\"currentVisit && currentImages.length > 0 && !loading\"\n      class=\"btn btn-outline-primary rounded-pill no-lowercase mb-2\" (click)=\"onInventoryClick()\">\n      {{'Run AI inventory on this image' | translate}}</button>\n    <lib-carousel [images]=\"currentImages\" *ngIf=\"currentImages\" (currentScan)=\"setCurrentScan($event)\"></lib-carousel>\n  </div>", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.SpaceService }, { type: i2.VisitService }, { type: i2.NodeService }]; } });
+
+class EditPlanComponent {
+    constructor(planService, route, router, modalService, zoneService, visitService, spaceService, translate) {
+        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.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);
+                        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();
+                // await this.svgEditor.pref(key, val);
+                // await this.svgEditor.setConfig({ extentions: this.extensions });
+                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);
+                }
+            }
+        });
+    }
+    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.modalService.open(this.dialog);
+            }
+            else {
+                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.router.navigate([
+                "/dashboard/localisation",
+                this.spaceID,
+                "plans",
+            ]);
+        });
+    }
+    newSvg() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.router.navigate([
+                "/dashboard/localisation",
+                this.spaceID,
+                "plans",
+            ]);
+        });
+    }
+    onCancel() {
+        return __awaiter(this, void 0, void 0, function* () {
+            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"));
+            });
+        });
+    }
+    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);
+                };
+                reader.readAsDataURL(imgBlob);
+            }
+        });
+    }
+    onNewZone(event) {
+        this.isNewZone = false;
+        if (event) {
+            this.svgEditorIframe.contentWindow.postMessage({ action: "rename-layer", name: event }, "*");
+        }
+        else {
+            this.svgEditorIframe.contentWindow.postMessage({ action: "cancel-layer" }, "*");
+        }
+    }
+}
+EditPlanComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: EditPlanComponent, deps: [{ token: i2.PlanService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i7.NgbModal }, { token: i2.ZoneService }, { token: i2.VisitService }, { token: i2.SpaceService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+EditPlanComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: EditPlanComponent, selector: "lib-edit-plan", host: { listeners: { "window:message": "switchAction($event)" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }, { propertyName: "dialogZone", first: true, predicate: ["dialogZone"], descendants: true }, { propertyName: "loadingModal", first: true, predicate: ["preparing"], descendants: true }], ngImport: i0, template: "<div class=\"row mt-3\">\n    <div class=\"col\">\n        <div class=\"m-3\">\n            <lib-tab-navigation [menuItems]='menuItems'></lib-tab-navigation>\n        </div>\n    </div>\n</div>\n<iframe *ngIf=\"editorUrl\" #svgEditor [src]=\"editorUrl | safeUrl\" frameborder=\"0\"\n    style=\"height: 100%;width:100%;min-height:750px\" (load)=\"onLoad(svgEditor)\"></iframe>\n<!-- chosenPlan && -->\n<!-- ./../../../../../../assets/svgeditor/index.html -->\n\n<img #imgPng *ngIf=\"chosenPlan && chosenPlan.extension !== 'svg' && svgEditor\" [src]=\"chosenPlan.filepath\"\n    (load)=\"onLoadImg(imgPng)\" style=\"display: none;\">\n\n<canvas id=\"canvas4pdf\" style=\"display: none;\"></canvas>\n\n<lib-add-zone *ngIf=\"isNewZone\" [images360]=\"images360\" [spaceID]=\"spaceID\" [navigationIDs]=\"navigations\"\n    [zoneEdit]=\"editedZone\" [zones]=\"zones\" (updatedZone)=\"onNewZone($event)\" [chosenPlan]=\"editedPlan\"\n    [newZoneData]=\"newZoneData\"></lib-add-zone>\n\n<ng-template #dialog let-modal>\n\n    <div class=\"modal-header\">\n        <h4 class=\"modal-title\">{{'Submit' | translate}}</h4>\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body\">\n        {{'save plan edited' | translate}}\n    </div>\n    <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"newSvg();modal.close('Close click')\">{{'Yes' |\n            translate}}</button>\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"updateSvg();modal.close('Close click')\">{{'No' |\n            translate}}</button>\n    </div>\n\n</ng-template>\n\n<ng-template #dialogZone let-modal>\n\n    <div class=\"modal-header\">\n        <h4 class=\"modal-title\">{{'Submit' | translate}}</h4>\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body\">\n        {{'Select zone' | translate}}\n        <div ngbDropdown class=\"d-inline-block me-3\">\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>{{editedZone ?\n                editedZone.name: ('New zone' | translate) }}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                <button ngbDropdownItem (click)=\"editedZone = null\" translate=\"New zone\">\n                </button>\n                <button ngbDropdownItem *ngFor=\"let zone of zones\" (click)=\"editedZone = zone\">{{zone.name }}\n                </button>\n            </div>\n        </div>\n    </div>\n    <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-outline-dark\"\n            (click)=\"isNewZone = true;modal.close('Close click')\">{{'Validate' |\n            translate}}</button>\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"modal.close('Close click')\">{{'Cancel' |\n            translate}}</button>\n    </div>\n\n</ng-template>\n\n<ng-template #preparing let-modal>\n    <div class=\"modal-header\">\n        <h4 class=\"modal-title\">{{'Processing' | translate}}</h4>\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body\">\n        <div class=\"d-flex justify-content-center\">\n            <div class=\"spinner-border\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n            </div>\n        </div>\n    </div>\n\n</ng-template>", styles: ["app-add-zone{position:absolute;top:0;left:0;background-color:#fff;width:100%;height:100%;padding:30px}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: AddZoneComponent, selector: "lib-add-zone", inputs: ["zoneEdit", "spaceID", "images360", "navigationIDs", "zones", "newZoneData", "chosenPlan", "isMuseumVisit", "defaultZone"], outputs: ["updatedZone"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "safeUrl": i2.SafeUrlPipe, "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: EditPlanComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-edit-plan', template: "<div class=\"row mt-3\">\n    <div class=\"col\">\n        <div class=\"m-3\">\n            <lib-tab-navigation [menuItems]='menuItems'></lib-tab-navigation>\n        </div>\n    </div>\n</div>\n<iframe *ngIf=\"editorUrl\" #svgEditor [src]=\"editorUrl | safeUrl\" frameborder=\"0\"\n    style=\"height: 100%;width:100%;min-height:750px\" (load)=\"onLoad(svgEditor)\"></iframe>\n<!-- chosenPlan && -->\n<!-- ./../../../../../../assets/svgeditor/index.html -->\n\n<img #imgPng *ngIf=\"chosenPlan && chosenPlan.extension !== 'svg' && svgEditor\" [src]=\"chosenPlan.filepath\"\n    (load)=\"onLoadImg(imgPng)\" style=\"display: none;\">\n\n<canvas id=\"canvas4pdf\" style=\"display: none;\"></canvas>\n\n<lib-add-zone *ngIf=\"isNewZone\" [images360]=\"images360\" [spaceID]=\"spaceID\" [navigationIDs]=\"navigations\"\n    [zoneEdit]=\"editedZone\" [zones]=\"zones\" (updatedZone)=\"onNewZone($event)\" [chosenPlan]=\"editedPlan\"\n    [newZoneData]=\"newZoneData\"></lib-add-zone>\n\n<ng-template #dialog let-modal>\n\n    <div class=\"modal-header\">\n        <h4 class=\"modal-title\">{{'Submit' | translate}}</h4>\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body\">\n        {{'save plan edited' | translate}}\n    </div>\n    <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"newSvg();modal.close('Close click')\">{{'Yes' |\n            translate}}</button>\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"updateSvg();modal.close('Close click')\">{{'No' |\n            translate}}</button>\n    </div>\n\n</ng-template>\n\n<ng-template #dialogZone let-modal>\n\n    <div class=\"modal-header\">\n        <h4 class=\"modal-title\">{{'Submit' | translate}}</h4>\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body\">\n        {{'Select zone' | translate}}\n        <div ngbDropdown class=\"d-inline-block me-3\">\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>{{editedZone ?\n                editedZone.name: ('New zone' | translate) }}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                <button ngbDropdownItem (click)=\"editedZone = null\" translate=\"New zone\">\n                </button>\n                <button ngbDropdownItem *ngFor=\"let zone of zones\" (click)=\"editedZone = zone\">{{zone.name }}\n                </button>\n            </div>\n        </div>\n    </div>\n    <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-outline-dark\"\n            (click)=\"isNewZone = true;modal.close('Close click')\">{{'Validate' |\n            translate}}</button>\n        <button type=\"button\" class=\"btn btn-outline-dark\" (click)=\"modal.close('Close click')\">{{'Cancel' |\n            translate}}</button>\n    </div>\n\n</ng-template>\n\n<ng-template #preparing let-modal>\n    <div class=\"modal-header\">\n        <h4 class=\"modal-title\">{{'Processing' | translate}}</h4>\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body\">\n        <div class=\"d-flex justify-content-center\">\n            <div class=\"spinner-border\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n            </div>\n        </div>\n    </div>\n\n</ng-template>", styles: ["app-add-zone{position:absolute;top:0;left:0;background-color:#fff;width:100%;height:100%;padding:30px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.PlanService }, { type: i1.ActivatedRoute }, { type: i1.Router }, { type: i7.NgbModal }, { type: i2.ZoneService }, { type: i2.VisitService }, { type: i2.SpaceService }, { type: i3.TranslateService }]; }, propDecorators: { dialog: [{
+                type: ViewChild,
+                args: ["dialog"]
+            }], dialogZone: [{
+                type: ViewChild,
+                args: ["dialogZone"]
+            }], loadingModal: [{
+                type: ViewChild,
+                args: ["preparing"]
+            }], switchAction: [{
+                type: HostListener,
+                args: ["window:message", ["$event"]]
+            }] } });
+
+const routes = [
+    {
+        path: "",
+        component: LocationsComponent,
+    },
+    {
+        path: ":id",
+        children: [
+            { path: "", component: DetailLocationComponent },
+            { path: "zones", component: ZonesComponent },
+            { path: "visits", component: VisitsComponent },
+            { path: "plans", component: PlansComponent },
+            {
+                path: "plan-calibration",
+                component: CalibrationComponent,
+            },
+            {
+                path: "plan-edit",
+                component: EditPlanComponent,
+            },
+            { path: "images", component: ImagesComponent },
+        ],
+    },
+];
+class LocationsRoutingModule {
+}
+LocationsRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocationsRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LocationsRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocationsRoutingModule, imports: [i1.RouterModule], exports: [RouterModule] });
+LocationsRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocationsRoutingModule, imports: [[RouterModule.forChild(routes)], RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocationsRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+class NgxSmarterplanLocationsModule {
+}
+NgxSmarterplanLocationsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanLocationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxSmarterplanLocationsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanLocationsModule, declarations: [LocationsComponent,
+        DetailLocationComponent,
+        CalibrationComponent,
+        PlansComponent,
+        VisitsComponent,
+        ZonesComponent,
+        ImagesComponent,
+        EditPlanComponent,
+        TabNavigationComponent,
+        MapComponent,
+        MapPopupComponent,
+        FormLocationComponent,
+        ChevronComponent,
+        AddZoneComponent,
+        SelectionComponent,
+        CarouselComponent], imports: [PdfViewerModule,
+        ClipboardModule,
+        NgbModule,
+        CommonModule, i3.TranslateModule, LeafletModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgxSmarterplanCoreModule,
+        LocationsRoutingModule] });
+NgxSmarterplanLocationsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanLocationsModule, imports: [[
+            PdfViewerModule,
+            ClipboardModule,
+            NgbModule,
+            CommonModule,
+            TranslateModule.forChild({
+                extend: true
+            }),
+            LeafletModule,
+            FormsModule,
+            ReactiveFormsModule,
+            NgxSmarterplanCoreModule,
+            LocationsRoutingModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanLocationsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        LocationsComponent,
+                        DetailLocationComponent,
+                        CalibrationComponent,
+                        PlansComponent,
+                        VisitsComponent,
+                        ZonesComponent,
+                        ImagesComponent,
+                        EditPlanComponent,
+                        TabNavigationComponent,
+                        MapComponent,
+                        MapPopupComponent,
+                        FormLocationComponent,
+                        ChevronComponent,
+                        AddZoneComponent,
+                        SelectionComponent,
+                        CarouselComponent
+                    ],
+                    imports: [
+                        PdfViewerModule,
+                        ClipboardModule,
+                        NgbModule,
+                        CommonModule,
+                        TranslateModule.forChild({
+                            extend: true
+                        }),
+                        LeafletModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgxSmarterplanCoreModule,
+                        LocationsRoutingModule,
+                    ],
+                    exports: []
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngx-smarterplan-locations
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxSmarterplanLocationsModule, NgxSmarterplanLocationsService };
+//# sourceMappingURL=smarterplan-ngx-smarterplan-locations.mjs.map