@smarterplan/ngx-smarterplan-locations 0.2.37 → 0.2.39

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

@@ -15,6 +15,7 @@ import * as i1$2 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i7 from '@ng-bootstrap/ng-bootstrap';
 import { ModalDismissReasons, NgbModule, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
+import { Subject, takeUntil } from 'rxjs';
 import * as i7$1 from 'ngx-clipboard';
 import { ClipboardModule } from 'ngx-clipboard';
 import { getDocument } from 'pdfjs-dist';
@@ -566,12 +567,16 @@ class LocationsComponent {
     getStringNoSpace(data) {
         return data.replace(/\s/g, '');
     }
+    onDetailViewClick(spaceID) {
+        this.navigatorService.locationIDChange.next(spaceID); // Send update for the location filter bar
+        this.router.navigate(["dashboard/localisation", spaceID]);
+    }
 }
 LocationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocationsComponent, deps: [{ token: i2.SpaceService }, { token: i1.Router }, { token: i2.BaseUserService }, { token: i2.ViewerService }, { token: i2.NavigationService }, { token: i2.NavigatorService }], target: i0.ɵɵFactoryTarget.Component });
-LocationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LocationsComponent, selector: "lib-locations", ngImport: i0, template: "<div class=\"dashboard-tab\">\r\n    <div class=\"header-dashboard-tab\">\r\n      <div class=\"m-3\">\r\n        <lib-tab-navigation (onGoBack)=\"onFormChange(null)\" [menuItems]='menuItems'></lib-tab-navigation>\r\n        <span class=\"ml-3 refreshIcon\" (click)=\"refresh()\" *ngIf=\"!(isAdding)\" ngbTooltip=\"Refresh list\">\r\n          <span class=\"iconify refreshIcon\" data-icon=\"ion:refresh-circle\" data-width=\"35\" data-rotate=\"90deg\"></span>\r\n        </span>\r\n      </div>  \r\n      <lib-search-bar *ngIf=\"!isAdding && !isMuseumUser\" [searchable]=\"locations\" [objectType]=\"getSearchType()\"\r\n        (searchEvent)=\"applyResultsSearchBar($event)\"></lib-search-bar>\r\n      \r\n      <div class=\"col-md-8\">\r\n        <div class=\"sp-row\" *ngIf=\"!isAdding && isManager\">\r\n          <button data-testid=\"new-location-btn\" class=\"btn btn-outline-primary rounded-pill add-location\" (click)=\"onAddLocation()\">\r\n            {{'Add location' | translate}}</button>\r\n          <!-- <div class=\"outer_circle\">\r\n            <button id='btn-icon' (click)=\"onAddLocation()\"></button>\r\n          </div> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr>\r\n    <div class=\"row\" *ngIf=\"isAdding\">\r\n      <div class=\"col-md-6\">\r\n        <h4>{{'New location' | translate}}</h4>\r\n      </div>\r\n    </div>\r\n    <section *ngIf=\"!isAdding\">\r\n      <div class=\"row\">\r\n        <div class=\"col-sm-12 col-md-12 col-lg-6\" *ngIf=\"filteredLocations\">\r\n          <ul data-testid=\"location-list-container\" class=\"list-group list-group-flush\">\r\n            <li class=\"d-flex justify-content-between list-group-item\"\r\n              *ngFor=\"let loc of filteredLocations; index as index\">\r\n              <div class=\"d-flex\">\r\n                <div class=\"col-md-5 img-main-container\">\r\n                  <div id=\"img_container\">\r\n                    <img class=\"location-img\" *ngIf=\"loc.annexes; else elseBlock\" [src]=\"loc.annexes\">\r\n                    <ng-template #elseBlock><img class=\"location-img\"\r\n                        src=\"./../../../../assets/images/visuel-off-big.jpg\" />\r\n                    </ng-template>\r\n                    <button [ngClass]=\"['open-btn-'+getStringNoSpace(loc.name)]\" *ngIf=\"isManagerForSpace(loc.id)\" class=\"btn-details\" [routerLink]=\"[loc.id]\">\r\n                      {{'View details' | translate}}</button>\r\n                  </div>\r\n  \r\n                </div>\r\n                <div class=\"col-md-7 location-info\">\r\n                  <p>{{loc.name}}</p>\r\n                  <p>{{loc.addresses}}</p>\r\n                  <p [ngClass]=\"['view-btn-'+getStringNoSpace(loc.name)]\" *ngFor=\"let visit of loc.visits\" (click)=\"onVisitClick(loc, visit)\" class=\"visit-name\"\r\n                    [style.cursor]=\"'pointer'\" ngbTooltip=\"Visit\">{{ visit.name ? visit.name : loc.name}}</p>\r\n                </div>\r\n              </div>\r\n            </li>\r\n  \r\n          </ul>\r\n        </div>\r\n        <div class=\"col-sm-12 col-md-12 col-lg-6\">\r\n          <lib-map [spaces]=\"filteredLocations\"></lib-map>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <lib-form-location *ngIf=\"isAdding\" (onChange)=\"onFormChange($event)\"></lib-form-location>\r\n</div>\r\n", styles: [".searchbar{margin-bottom:10px}input[type=file]{display:none}.form-control{border-radius:var(--form-control-border-radius)}.custom-select{border-color:var(--smarterplan-primary);width:auto}.form-new-loc{background-color:#d3d3d3;padding-top:10px;padding-bottom:10px;margin-bottom:15px}.btn-outline-primary{background-color:#fff}h4{color:var(--smarterplan-primary)}section .list-group{margin-top:15px}section .list-group-item{padding:5px 0}section .location-info{font-size:1.1em}section .location-img{width:100%;object-fit:cover;object-position:center bottom;height:165px}#img_container{position:relative;display:inline-block;text-align:center;width:250px}.img-main-container{max-width:250px;width:250px!important;margin-right:10px}.visit-name{color:var(--smarterplan-primary);font-weight:600}.btn-details{background-color:var(--smarterplan-primary-transparent);position:absolute;color:#fff;bottom:0px;right:0px;width:100%;height:30%;border:none;font-size:1em;text-transform:lowercase}#btn-icon{width:30px;height:30px;background:url(../../../../assets/icons/plus.svg);border:none;vertical-align:middle}#btn-icon:hover{background:url(../../../../assets/icons/plus-over.svg)}#btn-icon[disabled]:hover{background:url(../../../../assets/icons/plus.svg)}.outer_circle{background-color:#ebebeb;border-radius:50%;width:32px;height:32px;padding:1px;margin-left:5px}.refreshIcon{color:var(--smarterplan-primary);cursor:pointer}.refreshIcon svg{vertical-align:middle!important}.add-location{width:12vw}.sp-row{display:flex;flex-direction:row}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: i2.SearchBarComponent, selector: "lib-search-bar", inputs: ["searchable", "objectType"], outputs: ["searchEvent"] }, { type: MapComponent, selector: "lib-map", inputs: ["spaces"] }, { type: FormLocationComponent, selector: "lib-form-location", inputs: ["location"], outputs: ["onChange"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "translate": i3.TranslatePipe } });
+LocationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LocationsComponent, selector: "lib-locations", ngImport: i0, template: "<div class=\"dashboard-tab\">\r\n    <div class=\"header-dashboard-tab\">\r\n      <div class=\"m-3\">\r\n        <lib-tab-navigation (onGoBack)=\"onFormChange(null)\" [menuItems]='menuItems'></lib-tab-navigation>\r\n        <span class=\"ml-3 refreshIcon\" (click)=\"refresh()\" *ngIf=\"!(isAdding)\" ngbTooltip=\"Refresh list\">\r\n          <span class=\"iconify refreshIcon\" data-icon=\"ion:refresh-circle\" data-width=\"35\" data-rotate=\"90deg\"></span>\r\n        </span>\r\n      </div>  \r\n      <lib-search-bar *ngIf=\"!isAdding && !isMuseumUser\" [searchable]=\"locations\" [objectType]=\"getSearchType()\"\r\n        (searchEvent)=\"applyResultsSearchBar($event)\"></lib-search-bar>\r\n      \r\n      <div class=\"col-md-8\">\r\n        <div class=\"sp-row\" *ngIf=\"!isAdding && isManager\">\r\n          <button data-testid=\"new-location-btn\" class=\"btn btn-outline-primary rounded-pill add-location\" (click)=\"onAddLocation()\">\r\n            {{'Add location' | translate}}</button>\r\n          <!-- <div class=\"outer_circle\">\r\n            <button id='btn-icon' (click)=\"onAddLocation()\"></button>\r\n          </div> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr>\r\n    <div class=\"row\" *ngIf=\"isAdding\">\r\n      <div class=\"col-md-6\">\r\n        <h4>{{'New location' | translate}}</h4>\r\n      </div>\r\n    </div>\r\n    <section *ngIf=\"!isAdding\">\r\n      <div class=\"row\">\r\n        <div class=\"col-sm-12 col-md-12 col-lg-6\" *ngIf=\"filteredLocations\">\r\n          <ul data-testid=\"location-list-container\" class=\"list-group list-group-flush\">\r\n            <li class=\"d-flex justify-content-between list-group-item\"\r\n              *ngFor=\"let loc of filteredLocations; index as index\">\r\n              <div class=\"d-flex\">\r\n                <div class=\"col-md-5 img-main-container\">\r\n                  <div id=\"img_container\">\r\n                    <img class=\"location-img\" *ngIf=\"loc.annexes; else elseBlock\" [src]=\"loc.annexes\">\r\n                    <ng-template #elseBlock><img class=\"location-img\"\r\n                        src=\"./../../../../assets/images/visuel-off-big.jpg\" />\r\n                    </ng-template>\r\n                    <button [ngClass]=\"['open-btn-'+getStringNoSpace(loc.name)]\" *ngIf=\"isManagerForSpace(loc.id)\" class=\"btn-details\" (click)=\"onDetailViewClick(loc.id)\">\r\n                      {{'View details' | translate}}</button>\r\n                  </div>\r\n  \r\n                </div>\r\n                <div class=\"col-md-7 location-info\">\r\n                  <p>{{loc.name}}</p>\r\n                  <p>{{loc.addresses}}</p>\r\n                  <p [ngClass]=\"['view-btn-'+getStringNoSpace(loc.name)]\" *ngFor=\"let visit of loc.visits\" (click)=\"onVisitClick(loc, visit)\" class=\"visit-name\"\r\n                    [style.cursor]=\"'pointer'\" ngbTooltip=\"Visit\">{{ visit.name ? visit.name : loc.name}}</p>\r\n                </div>\r\n              </div>\r\n            </li>\r\n  \r\n          </ul>\r\n        </div>\r\n        <div class=\"col-sm-12 col-md-12 col-lg-6\">\r\n          <lib-map [spaces]=\"filteredLocations\"></lib-map>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <lib-form-location *ngIf=\"isAdding\" (onChange)=\"onFormChange($event)\"></lib-form-location>\r\n</div>\r\n", styles: [".searchbar{margin-bottom:10px}input[type=file]{display:none}.form-control{border-radius:var(--form-control-border-radius)}.custom-select{border-color:var(--smarterplan-primary);width:auto}.form-new-loc{background-color:#d3d3d3;padding-top:10px;padding-bottom:10px;margin-bottom:15px}.btn-outline-primary{background-color:#fff}h4{color:var(--smarterplan-primary)}section .list-group{margin-top:15px}section .list-group-item{padding:5px 0}section .location-info{font-size:1.1em}section .location-img{width:100%;object-fit:cover;object-position:center bottom;height:165px}#img_container{position:relative;display:inline-block;text-align:center;width:250px}.img-main-container{max-width:250px;width:250px!important;margin-right:10px}.visit-name{color:var(--smarterplan-primary);font-weight:600}.btn-details{background-color:var(--smarterplan-primary-transparent);position:absolute;color:#fff;bottom:0px;right:0px;width:100%;height:30%;border:none;font-size:1em;text-transform:lowercase}#btn-icon{width:30px;height:30px;background:url(../../../../assets/icons/plus.svg);border:none;vertical-align:middle}#btn-icon:hover{background:url(../../../../assets/icons/plus-over.svg)}#btn-icon[disabled]:hover{background:url(../../../../assets/icons/plus.svg)}.outer_circle{background-color:#ebebeb;border-radius:50%;width:32px;height:32px;padding:1px;margin-left:5px}.refreshIcon{color:var(--smarterplan-primary);cursor:pointer}.refreshIcon svg{vertical-align:middle!important}.add-location{width:12vw}.sp-row{display:flex;flex-direction:row}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: i2.SearchBarComponent, selector: "lib-search-bar", inputs: ["searchable", "objectType"], outputs: ["searchEvent"] }, { type: MapComponent, selector: "lib-map", inputs: ["spaces"] }, { type: FormLocationComponent, selector: "lib-form-location", inputs: ["location"], outputs: ["onChange"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LocationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-locations', template: "<div class=\"dashboard-tab\">\r\n    <div class=\"header-dashboard-tab\">\r\n      <div class=\"m-3\">\r\n        <lib-tab-navigation (onGoBack)=\"onFormChange(null)\" [menuItems]='menuItems'></lib-tab-navigation>\r\n        <span class=\"ml-3 refreshIcon\" (click)=\"refresh()\" *ngIf=\"!(isAdding)\" ngbTooltip=\"Refresh list\">\r\n          <span class=\"iconify refreshIcon\" data-icon=\"ion:refresh-circle\" data-width=\"35\" data-rotate=\"90deg\"></span>\r\n        </span>\r\n      </div>  \r\n      <lib-search-bar *ngIf=\"!isAdding && !isMuseumUser\" [searchable]=\"locations\" [objectType]=\"getSearchType()\"\r\n        (searchEvent)=\"applyResultsSearchBar($event)\"></lib-search-bar>\r\n      \r\n      <div class=\"col-md-8\">\r\n        <div class=\"sp-row\" *ngIf=\"!isAdding && isManager\">\r\n          <button data-testid=\"new-location-btn\" class=\"btn btn-outline-primary rounded-pill add-location\" (click)=\"onAddLocation()\">\r\n            {{'Add location' | translate}}</button>\r\n          <!-- <div class=\"outer_circle\">\r\n            <button id='btn-icon' (click)=\"onAddLocation()\"></button>\r\n          </div> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr>\r\n    <div class=\"row\" *ngIf=\"isAdding\">\r\n      <div class=\"col-md-6\">\r\n        <h4>{{'New location' | translate}}</h4>\r\n      </div>\r\n    </div>\r\n    <section *ngIf=\"!isAdding\">\r\n      <div class=\"row\">\r\n        <div class=\"col-sm-12 col-md-12 col-lg-6\" *ngIf=\"filteredLocations\">\r\n          <ul data-testid=\"location-list-container\" class=\"list-group list-group-flush\">\r\n            <li class=\"d-flex justify-content-between list-group-item\"\r\n              *ngFor=\"let loc of filteredLocations; index as index\">\r\n              <div class=\"d-flex\">\r\n                <div class=\"col-md-5 img-main-container\">\r\n                  <div id=\"img_container\">\r\n                    <img class=\"location-img\" *ngIf=\"loc.annexes; else elseBlock\" [src]=\"loc.annexes\">\r\n                    <ng-template #elseBlock><img class=\"location-img\"\r\n                        src=\"./../../../../assets/images/visuel-off-big.jpg\" />\r\n                    </ng-template>\r\n                    <button [ngClass]=\"['open-btn-'+getStringNoSpace(loc.name)]\" *ngIf=\"isManagerForSpace(loc.id)\" class=\"btn-details\" [routerLink]=\"[loc.id]\">\r\n                      {{'View details' | translate}}</button>\r\n                  </div>\r\n  \r\n                </div>\r\n                <div class=\"col-md-7 location-info\">\r\n                  <p>{{loc.name}}</p>\r\n                  <p>{{loc.addresses}}</p>\r\n                  <p [ngClass]=\"['view-btn-'+getStringNoSpace(loc.name)]\" *ngFor=\"let visit of loc.visits\" (click)=\"onVisitClick(loc, visit)\" class=\"visit-name\"\r\n                    [style.cursor]=\"'pointer'\" ngbTooltip=\"Visit\">{{ visit.name ? visit.name : loc.name}}</p>\r\n                </div>\r\n              </div>\r\n            </li>\r\n  \r\n          </ul>\r\n        </div>\r\n        <div class=\"col-sm-12 col-md-12 col-lg-6\">\r\n          <lib-map [spaces]=\"filteredLocations\"></lib-map>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <lib-form-location *ngIf=\"isAdding\" (onChange)=\"onFormChange($event)\"></lib-form-location>\r\n</div>\r\n", styles: [".searchbar{margin-bottom:10px}input[type=file]{display:none}.form-control{border-radius:var(--form-control-border-radius)}.custom-select{border-color:var(--smarterplan-primary);width:auto}.form-new-loc{background-color:#d3d3d3;padding-top:10px;padding-bottom:10px;margin-bottom:15px}.btn-outline-primary{background-color:#fff}h4{color:var(--smarterplan-primary)}section .list-group{margin-top:15px}section .list-group-item{padding:5px 0}section .location-info{font-size:1.1em}section .location-img{width:100%;object-fit:cover;object-position:center bottom;height:165px}#img_container{position:relative;display:inline-block;text-align:center;width:250px}.img-main-container{max-width:250px;width:250px!important;margin-right:10px}.visit-name{color:var(--smarterplan-primary);font-weight:600}.btn-details{background-color:var(--smarterplan-primary-transparent);position:absolute;color:#fff;bottom: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"] }]
+            args: [{ selector: 'lib-locations', template: "<div class=\"dashboard-tab\">\r\n    <div class=\"header-dashboard-tab\">\r\n      <div class=\"m-3\">\r\n        <lib-tab-navigation (onGoBack)=\"onFormChange(null)\" [menuItems]='menuItems'></lib-tab-navigation>\r\n        <span class=\"ml-3 refreshIcon\" (click)=\"refresh()\" *ngIf=\"!(isAdding)\" ngbTooltip=\"Refresh list\">\r\n          <span class=\"iconify refreshIcon\" data-icon=\"ion:refresh-circle\" data-width=\"35\" data-rotate=\"90deg\"></span>\r\n        </span>\r\n      </div>  \r\n      <lib-search-bar *ngIf=\"!isAdding && !isMuseumUser\" [searchable]=\"locations\" [objectType]=\"getSearchType()\"\r\n        (searchEvent)=\"applyResultsSearchBar($event)\"></lib-search-bar>\r\n      \r\n      <div class=\"col-md-8\">\r\n        <div class=\"sp-row\" *ngIf=\"!isAdding && isManager\">\r\n          <button data-testid=\"new-location-btn\" class=\"btn btn-outline-primary rounded-pill add-location\" (click)=\"onAddLocation()\">\r\n            {{'Add location' | translate}}</button>\r\n          <!-- <div class=\"outer_circle\">\r\n            <button id='btn-icon' (click)=\"onAddLocation()\"></button>\r\n          </div> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr>\r\n    <div class=\"row\" *ngIf=\"isAdding\">\r\n      <div class=\"col-md-6\">\r\n        <h4>{{'New location' | translate}}</h4>\r\n      </div>\r\n    </div>\r\n    <section *ngIf=\"!isAdding\">\r\n      <div class=\"row\">\r\n        <div class=\"col-sm-12 col-md-12 col-lg-6\" *ngIf=\"filteredLocations\">\r\n          <ul data-testid=\"location-list-container\" class=\"list-group list-group-flush\">\r\n            <li class=\"d-flex justify-content-between list-group-item\"\r\n              *ngFor=\"let loc of filteredLocations; index as index\">\r\n              <div class=\"d-flex\">\r\n                <div class=\"col-md-5 img-main-container\">\r\n                  <div id=\"img_container\">\r\n                    <img class=\"location-img\" *ngIf=\"loc.annexes; else elseBlock\" [src]=\"loc.annexes\">\r\n                    <ng-template #elseBlock><img class=\"location-img\"\r\n                        src=\"./../../../../assets/images/visuel-off-big.jpg\" />\r\n                    </ng-template>\r\n                    <button [ngClass]=\"['open-btn-'+getStringNoSpace(loc.name)]\" *ngIf=\"isManagerForSpace(loc.id)\" class=\"btn-details\" (click)=\"onDetailViewClick(loc.id)\">\r\n                      {{'View details' | translate}}</button>\r\n                  </div>\r\n  \r\n                </div>\r\n                <div class=\"col-md-7 location-info\">\r\n                  <p>{{loc.name}}</p>\r\n                  <p>{{loc.addresses}}</p>\r\n                  <p [ngClass]=\"['view-btn-'+getStringNoSpace(loc.name)]\" *ngFor=\"let visit of loc.visits\" (click)=\"onVisitClick(loc, visit)\" class=\"visit-name\"\r\n                    [style.cursor]=\"'pointer'\" ngbTooltip=\"Visit\">{{ visit.name ? visit.name : loc.name}}</p>\r\n                </div>\r\n              </div>\r\n            </li>\r\n  \r\n          </ul>\r\n        </div>\r\n        <div class=\"col-sm-12 col-md-12 col-lg-6\">\r\n          <lib-map [spaces]=\"filteredLocations\"></lib-map>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <lib-form-location *ngIf=\"isAdding\" (onChange)=\"onFormChange($event)\"></lib-form-location>\r\n</div>\r\n", styles: [".searchbar{margin-bottom:10px}input[type=file]{display:none}.form-control{border-radius:var(--form-control-border-radius)}.custom-select{border-color:var(--smarterplan-primary);width:auto}.form-new-loc{background-color:#d3d3d3;padding-top:10px;padding-bottom:10px;margin-bottom:15px}.btn-outline-primary{background-color:#fff}h4{color:var(--smarterplan-primary)}section .list-group{margin-top:15px}section .list-group-item{padding:5px 0}section .location-info{font-size:1.1em}section .location-img{width:100%;object-fit:cover;object-position:center bottom;height:165px}#img_container{position:relative;display:inline-block;text-align:center;width:250px}.img-main-container{max-width:250px;width:250px!important;margin-right:10px}.visit-name{color:var(--smarterplan-primary);font-weight:600}.btn-details{background-color:var(--smarterplan-primary-transparent);position:absolute;color:#fff;bottom: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 {
@@ -586,15 +591,28 @@ class DetailLocationComponent {
         this.menuItems = [];
         this.isValidatingDpe = false;
         this.gettingData = false;
+        this.destroy$ = new Subject();
+        this.navigatorService.locationIDChange
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((spaceID) => {
+            this.router.navigate(["dashboard/localisation", spaceID]);
+        });
+        this.route.params.subscribe((params) => {
+            this.id = params.id;
+            this.setup();
+        });
     }
-    async ngOnInit() {
-        this.id = this.route.snapshot.paramMap.get("id");
-        this.navigatorService.locationIDChange.next(this.id); // Send update for the location filter bar
+    ngOnInit() { }
+    async setup() {
         this.space = await this.spaceService.getSpace(this.id);
         this.setupMenuItems();
         this.setGuestLink();
         this.setCanArchive();
     }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
     setupMenuItems() {
         this.menuItems = [
             { label: "Locations", url: "/localisation" },
@@ -1173,13 +1191,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
             }] } });
 
 class PlansComponent {
-    constructor(route, router, spaceService, planService, fb, translate) {
+    constructor(route, router, spaceService, planService, fb, translate, navigatorService) {
         this.route = route;
         this.router = router;
         this.spaceService = spaceService;
         this.planService = planService;
         this.fb = fb;
         this.translate = translate;
+        this.navigatorService = navigatorService;
         // chosenPlan: Plan;
         this.indexDetails = -1;
         this.loading = false;
@@ -1187,10 +1206,18 @@ class PlansComponent {
         this.isCurrentPlanForZone = false;
         this.chosenPlanIsPdf = false;
         this.menuItems = [];
+        this.destroy$ = new Subject();
+        this.navigatorService.locationIDChange
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((spaceID) => {
+            this.router.navigate(["dashboard/localisation", spaceID, "plans"]);
+        });
+        this.route.params.subscribe((params) => {
+            this.spaceID = params.id;
+            this.getPlans();
+        });
     }
     ngOnInit() {
-        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());
@@ -1198,6 +1225,10 @@ class PlansComponent {
         }
         this.planService.setChosenPlan(null);
     }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
     setupMenuItems() {
         this.menuItems = [
             { label: "Locations", url: "/localisation" },
@@ -1364,12 +1395,12 @@ class PlansComponent {
         }
     }
 }
-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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PlansComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.SpaceService }, { token: i2.PlanService }, { token: i1$2.FormBuilder }, { token: i3.TranslateService }, { token: i2.NavigatorService }], target: i0.ɵɵFactoryTarget.Component });
 PlansComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: PlansComponent, selector: "lib-plans", ngImport: i0, template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\" class=\"dashboard-tab\">\n    <div class=\"m-3\">\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n    </div>\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n        <div class=\"spinner-border\" role=\"status\">\n            <span class=\"visually-hidden\">Loading...</span>\n        </div>\n    </div>\n    <div class=\"mt-3\" *ngIf=\"!plans && !loading\">\n        <h4 style=\"font-weight: bold;\">{{'No imported plans' | translate }}</h4>\n        <p>{{'For import from 3D visit: go Virtual Visits => Import Images' | translate}}</p>\n    </div>\n    <div class=\"row ms-1\">\n        <div ngbDropdown class=\"d-inline-block me-3\">\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>{{getChoosenPlan() ?\n                getChoosenPlan().name: ('Choose Plan' | translate) }}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                <button ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\">{{plan.name }}\n                </button>\n            </div>\n        </div>\n        <div class=\"d-inline-block\" ngbDropdown #myDrop=\"ngbDropdown\">\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownManual\" ngbDropdownToggle>{{'Choose action' |\n                translate}}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownManual\">\n                <button (click)=\"onCalibrateClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Calibrate' |\n                    translate}}</button>\n                <button (click)=\"onEditClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Edit plan' |\n                    translate}}\n                </button>\n                <button (click)=\"onUploadClick()\" ngbDropdownItem>{{'Upload new plan' | translate}}</button>\n                <button (click)=\"onDownloadClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Download plan' |\n                    translate}}</button>\n                <button (click)=\"onRemoveClick()\" ngbDropdownItem\n                    [disabled]=\"!getChoosenPlan() || getChoosenPlan().isImportedMatterport\">{{'Delete plan' |\n                    translate}}</button>\n                <!-- <button (click)=\"onDownloadAsPng()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">\n                    {{'Download plan as PNG' | translate}}</button> -->\n            </div>\n        </div>\n    </div>\n    <div class=\"row mt-3 ms-0\">\n        <h4 *ngIf=\"fileToUpload\">{{'New plan' | translate }}</h4>\n        <input class=\"hidden\" type=\"file\" id=\"upload-file\" name=\"upload-file\" accept=\"image/png, image/jpeg, .pdf, .svg\"\n            ngf-max-size=\"6MB\" (change)=\"addPlan($event.target)\">\n    </div>\n    <div class=\"col-md-6 mt-3\" *ngIf=\"planForm\">\n        <form (ngSubmit)=\"onSavePlan()\" [formGroup]=\"planForm\">\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Name' | translate}} </label>\n                <div class=\"col-sm-9\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\">\n                </div>\n            </div>\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Zone' | translate}} </label>\n                <div class=\"col-sm-9\">\n                    <select class=\"form-control\" formControlName=\"zoneID\">\n                        <option *ngFor=\"let zone of zones\" [ngValue]=\"zone.id\">\n                            {{ zone.name }}\n                        </option>\n                    </select>\n                </div>\n            </div>\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Set as current plan for zone' | translate}}</label>\n                <div class=\"col-sm-3\">\n                    <input type=\"checkbox\" [(ngModel)]=\"isCurrentPlanForZone\" [ngModelOptions]=\"{standalone: true}\">\n                </div>\n            </div>\n            <button [disabled]=\"planForm.invalid\" type='submit' class=\"btn btn-label-file rounded-pill\">{{'Save' |\n                translate}}</button>\n            <button class=\"btn btn-label-file rounded-pill ms-3\" type=\"button\" (click)=\"onCancelUpload()\">{{'Cancel' |\n                translate}}</button>\n        </form>\n    </div>\n    <ul class=\"col-md-6 list-group list-group-flush\" *ngIf=\"getChoosenPlan()\">\n        <li class=\"list-group-item bg-transparent\">{{'Name' | translate }} : {{getChoosenPlan().name}} </li>\n        <li class=\"list-group-item bg-transparent\"> {{'Plan is ' | translate }} :\n            {{getChoosenPlan().calibration ? ('Calibrated' | translate) : ('Not calibrated' | translate)}}</li>\n        <li class=\"list-group-item bg-transparent\">{{'Attributed to zone ' | translate }} :\n            {{getChoosenPlan().zone ? getChoosenPlan().zone.name : 'None'}}</li>\n        <li class=\"list-group-item bg-transparent\">{{'Is current plan for zone ' | translate }} :\n            <input type=\"checkbox\" [(ngModel)]=\"getChoosenPlan().isCurrentForZone\" (change)=\"onCurrentPlanClick()\">\n        </li>\n\n    </ul>\n\n    <div class=\"row mt-4\">\n        <div class=\"col-md-10\">\n            <embed *ngIf=\"getChoosenPlan() && chosenPlanIsPdf\" [src]=\"getChoosenPlan().filepath | safeUrl\"\n                type=\"application/pdf\" frameBorder=\"0\" scrolling=\"auto\" height=\"650px;\" width=\"100%\" />\n            <div *ngIf=\"!chosenPlanIsPdf\" class=\"row\" style=\"height: 500px; overflow: hidden;\" id=\"canvasDiv\">\n                <canvas id=\"canvas\" width=\"4096px\" height=\"4096px\">\n                    <!-- <img *ngIf=\"chosenPlan\" id=\"plan-image\" [src]=\"chosenPlan.filepath\" style=\"width: 100%;\"> -->\n                </canvas>\n\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".button-visit{display:none;height:30px;width:30px;position:absolute;background:url(https://api.iconify.design/mdi:map-marker-check.svg?color=red&height=30) no-repeat scroll 0 0 transparent;border:none}#button-visit-left{left:350px;top:550px}#button-visit-right{left:500px;top:600px}.hidden{visibility:hidden;width:1px;height:1px}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe, "safeUrl": i2.SafeUrlPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PlansComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-plans', template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\" class=\"dashboard-tab\">\n    <div class=\"m-3\">\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n    </div>\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n        <div class=\"spinner-border\" role=\"status\">\n            <span class=\"visually-hidden\">Loading...</span>\n        </div>\n    </div>\n    <div class=\"mt-3\" *ngIf=\"!plans && !loading\">\n        <h4 style=\"font-weight: bold;\">{{'No imported plans' | translate }}</h4>\n        <p>{{'For import from 3D visit: go Virtual Visits => Import Images' | translate}}</p>\n    </div>\n    <div class=\"row ms-1\">\n        <div ngbDropdown class=\"d-inline-block me-3\">\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>{{getChoosenPlan() ?\n                getChoosenPlan().name: ('Choose Plan' | translate) }}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n                <button ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\">{{plan.name }}\n                </button>\n            </div>\n        </div>\n        <div class=\"d-inline-block\" ngbDropdown #myDrop=\"ngbDropdown\">\n            <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownManual\" ngbDropdownToggle>{{'Choose action' |\n                translate}}</button>\n            <div ngbDropdownMenu aria-labelledby=\"dropdownManual\">\n                <button (click)=\"onCalibrateClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Calibrate' |\n                    translate}}</button>\n                <button (click)=\"onEditClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Edit plan' |\n                    translate}}\n                </button>\n                <button (click)=\"onUploadClick()\" ngbDropdownItem>{{'Upload new plan' | translate}}</button>\n                <button (click)=\"onDownloadClick()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">{{'Download plan' |\n                    translate}}</button>\n                <button (click)=\"onRemoveClick()\" ngbDropdownItem\n                    [disabled]=\"!getChoosenPlan() || getChoosenPlan().isImportedMatterport\">{{'Delete plan' |\n                    translate}}</button>\n                <!-- <button (click)=\"onDownloadAsPng()\" ngbDropdownItem [disabled]=\"!getChoosenPlan()\">\n                    {{'Download plan as PNG' | translate}}</button> -->\n            </div>\n        </div>\n    </div>\n    <div class=\"row mt-3 ms-0\">\n        <h4 *ngIf=\"fileToUpload\">{{'New plan' | translate }}</h4>\n        <input class=\"hidden\" type=\"file\" id=\"upload-file\" name=\"upload-file\" accept=\"image/png, image/jpeg, .pdf, .svg\"\n            ngf-max-size=\"6MB\" (change)=\"addPlan($event.target)\">\n    </div>\n    <div class=\"col-md-6 mt-3\" *ngIf=\"planForm\">\n        <form (ngSubmit)=\"onSavePlan()\" [formGroup]=\"planForm\">\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Name' | translate}} </label>\n                <div class=\"col-sm-9\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\">\n                </div>\n            </div>\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Zone' | translate}} </label>\n                <div class=\"col-sm-9\">\n                    <select class=\"form-control\" formControlName=\"zoneID\">\n                        <option *ngFor=\"let zone of zones\" [ngValue]=\"zone.id\">\n                            {{ zone.name }}\n                        </option>\n                    </select>\n                </div>\n            </div>\n            <div class=\"mb-3 row\">\n                <label class=\"col-sm-3\">{{'Set as current plan for zone' | translate}}</label>\n                <div class=\"col-sm-3\">\n                    <input type=\"checkbox\" [(ngModel)]=\"isCurrentPlanForZone\" [ngModelOptions]=\"{standalone: true}\">\n                </div>\n            </div>\n            <button [disabled]=\"planForm.invalid\" type='submit' class=\"btn btn-label-file rounded-pill\">{{'Save' |\n                translate}}</button>\n            <button class=\"btn btn-label-file rounded-pill ms-3\" type=\"button\" (click)=\"onCancelUpload()\">{{'Cancel' |\n                translate}}</button>\n        </form>\n    </div>\n    <ul class=\"col-md-6 list-group list-group-flush\" *ngIf=\"getChoosenPlan()\">\n        <li class=\"list-group-item bg-transparent\">{{'Name' | translate }} : {{getChoosenPlan().name}} </li>\n        <li class=\"list-group-item bg-transparent\"> {{'Plan is ' | translate }} :\n            {{getChoosenPlan().calibration ? ('Calibrated' | translate) : ('Not calibrated' | translate)}}</li>\n        <li class=\"list-group-item bg-transparent\">{{'Attributed to zone ' | translate }} :\n            {{getChoosenPlan().zone ? getChoosenPlan().zone.name : 'None'}}</li>\n        <li class=\"list-group-item bg-transparent\">{{'Is current plan for zone ' | translate }} :\n            <input type=\"checkbox\" [(ngModel)]=\"getChoosenPlan().isCurrentForZone\" (change)=\"onCurrentPlanClick()\">\n        </li>\n\n    </ul>\n\n    <div class=\"row mt-4\">\n        <div class=\"col-md-10\">\n            <embed *ngIf=\"getChoosenPlan() && chosenPlanIsPdf\" [src]=\"getChoosenPlan().filepath | safeUrl\"\n                type=\"application/pdf\" frameBorder=\"0\" scrolling=\"auto\" height=\"650px;\" width=\"100%\" />\n            <div *ngIf=\"!chosenPlanIsPdf\" class=\"row\" style=\"height: 500px; overflow: hidden;\" id=\"canvasDiv\">\n                <canvas id=\"canvas\" width=\"4096px\" height=\"4096px\">\n                    <!-- <img *ngIf=\"chosenPlan\" id=\"plan-image\" [src]=\"chosenPlan.filepath\" style=\"width: 100%;\"> -->\n                </canvas>\n\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".button-visit{display:none;height:30px;width:30px;position:absolute;background:url(https://api.iconify.design/mdi:map-marker-check.svg?color=red&height=30) no-repeat scroll 0 0 transparent;border:none}#button-visit-left{left:350px;top:550px}#button-visit-right{left:500px;top:600px}.hidden{visibility:hidden;width:1px;height:1px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.SpaceService }, { type: i2.PlanService }, { type: i1$2.FormBuilder }, { type: i3.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.SpaceService }, { type: i2.PlanService }, { type: i1$2.FormBuilder }, { type: i3.TranslateService }, { type: i2.NavigatorService }]; } });
 
 class ChevronComponent {
     constructor() {
@@ -1388,7 +1419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
             }] } });
 
 class VisitsComponent {
-    constructor(fb, matterportImportService, captureService, nodeService, spaceService, route, modalService, visitService, validatorsService, translate) {
+    constructor(fb, matterportImportService, captureService, nodeService, spaceService, route, modalService, visitService, validatorsService, translate, navigatorService, router) {
         this.fb = fb;
         this.matterportImportService = matterportImportService;
         this.captureService = captureService;
@@ -1399,6 +1430,8 @@ class VisitsComponent {
         this.visitService = visitService;
         this.validatorsService = validatorsService;
         this.translate = translate;
+        this.navigatorService = navigatorService;
+        this.router = router;
         this.visitIndexDetails = -1;
         this.isEditing = false;
         this.visitSubmitted = false;
@@ -1410,15 +1443,25 @@ class VisitsComponent {
         this.menuItems = [];
         this.errorForm = false;
         this.isProcessing = false;
-        this.matterportImportService.importingImages.subscribe(() => {
+        this.destroy$ = new Subject();
+        this.matterportImportService.importingImages.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.canCancelImport = true;
         });
-        this.matterportImportService.sweepProcessedCount.subscribe((count) => {
+        this.matterportImportService.sweepProcessedCount.pipe(takeUntil(this.destroy$)).subscribe((count) => {
             this.imagesProcessed = count + 1;
         });
-        this.matterportImportService.totalSweepsCount.subscribe((count) => {
+        this.matterportImportService.totalSweepsCount.pipe(takeUntil(this.destroy$)).subscribe((count) => {
             this.totalImages = count;
         });
+        this.navigatorService.locationIDChange
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((spaceID) => {
+            this.router.navigate(["dashboard/localisation", spaceID, "visits"]);
+        });
+        this.route.params.subscribe((params) => {
+            this.spaceId = params.id;
+            this.resetVisits();
+        });
     }
     async ngOnInit() {
         this.spaceId = this.route.snapshot.paramMap.get('id');
@@ -1433,6 +1476,10 @@ class VisitsComponent {
             }
         }
     }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
     /*
     Visit = {
       captureID: string,
@@ -1630,12 +1677,12 @@ class VisitsComponent {
         return control && control.invalid && this.errorForm;
     }
 }
-VisitsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VisitsComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.MatterportImportService }, { token: i2.CaptureService }, { token: i2.NodeService }, { token: i2.SpaceService }, { token: i1.ActivatedRoute }, { token: i7.NgbModal }, { token: i2.VisitService }, { token: i2.ValidatorsService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+VisitsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VisitsComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.MatterportImportService }, { token: i2.CaptureService }, { token: i2.NodeService }, { token: i2.SpaceService }, { token: i1.ActivatedRoute }, { token: i7.NgbModal }, { token: i2.VisitService }, { token: i2.ValidatorsService }, { token: i3.TranslateService }, { token: i2.NavigatorService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
 VisitsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: VisitsComponent, selector: "lib-visits", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"container-fluid\" class=\"dashboard-tab\">\r\n    <div class=\"m-3\">\r\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n\r\n    <div class=\"row main-form-container\">\r\n        <div class=\"col-md-6 form-container\">\r\n            <ul class=\"list-group list-group-flush\" *ngIf=\"!visitForm\">\r\n                <li class=\"list-group-item list-group-item-action\" *ngFor=\"let visit of visits; index as index\">\r\n                    <div class=\"d-flex justify-content-between align-items-center\" (click)=\"onToggleDetail(index)\">\r\n                        {{visit.name ? visit.name : visit.model3d }}\r\n                        <lib-chevron [conditionShowing]=\"index==visitIndexDetails\"></lib-chevron>\r\n                    </div>\r\n                    <div *ngIf=\"index==visitIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                            <li class=\"list-group-item bg-transparent\">{{'Name' | translate}} : {{ visit.name ?\r\n                                visit.name : \"Not provided\" | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'3D Model' | translate}} : {{ visit.model3d }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Surface' | translate}}, m<sup>2</sup>: {{\r\n                                visit.surface ?\r\n                                visit.surface : 'Not provided' | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Viewer' | translate}} : {{ visit.viewer }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Date of capture' | translate}} : {{\r\n                                visit.takenAt | timeDateString | async}}\r\n                            <li class=\"list-group-item bg-transparent\">{{'Images imported' | translate}} : {{\r\n                                visit.nmbImagesImported }}\r\n                            </li>\r\n                        </ul>\r\n                        \r\n                        <lib-loader *ngIf=\"isProcessing\"></lib-loader>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onImport(visit)\" [disabled]=\"isProcessing\">{{'Import images' |\r\n                            translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" [disabled]=\"isProcessing\"\r\n                            (click)=\"onEdit(visit)\">{{'Edit' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" [disabled]=\"isProcessing\"\r\n                            (click)=\"onDelete(visit)\">{{'Delete' | translate}}</button>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n            <div *ngIf=\"visitForm\">\r\n                <form (ngSubmit)=\"onSubmitVisit()\" [formGroup]=\"visitForm\">\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"name\">\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Reference 3D model' | translate}} *</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" [readonly]=\"isEditing\"\r\n                                [class.is-invalid]=\"model3D.invalid && visitSubmitted\" required\r\n                                formControlName=\"model3D\">\r\n                            <div class=\"invalid-feedback\">\r\n                                <ngb-alert data-testid=\"new-location-name-invalid\" [dismissible]=\"false\" type=\"danger\" \r\n                                *ngIf=\"validatorsService.isControlError(visitForm.controls['name']) \r\n                                    ||  isFormError(visitForm.controls['name'])\">\r\n                                      {{validatorsService.getError(visitForm.controls['name']) | translate}}\r\n                                </ngb-alert>\r\n                            </div>\r\n                            <div *ngIf=\"isEditing\" class=\"text-danger\">\r\n                                {{'Cannot change 3D model reference. Please add new model.' | translate}}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Viewer' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"viewer\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Capture Date' | translate}}</label>\r\n                        <div class=\"input-group\">\r\n                            <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"captureDate\" ngbDatepicker\r\n                                #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                            <div class=\"input-group-append\">\r\n                                <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\"\r\n                                    type=\"button\"></button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\r\n                        translate}}</button>\r\n                    <div class=\"invalid-feedback\" *ngIf=\"errorForm\">\r\n                            <ngb-alert data-testid=\"new-location-form-invalid\" [dismissible]=\"false\" type=\"danger\">\r\n                              {{'errorForm.infoBtn' |translate}}\r\n                      \r\n                            </ngb-alert>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n            <div *ngIf=\"!visitForm\">\r\n                <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onAddVisit()\">{{'Add 3D visit' |\r\n                    translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div id=\"viewer-frame\" style=\"width: 100%; aspect-ratio: 2/1;\"></div>\r\n    </div>\r\n    <ng-template #content let-modal>\r\n        <div class=\"modal-header\">\r\n            <h4 class=\"modal-title\" id=\"modal-basic-title\">{{'Importing Data' | translate}}</h4>\r\n            <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n                <span aria-hidden=\"true\">\u00D7</span>\r\n            </button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n            {{'Please do not leave or refresh this page...' | translate}}\r\n            <div *ngIf=\"totalImages != 0\">Imported {{imagesProcessed}} out of {{totalImages}} images.</div>\r\n            <div class=\"d-flex justify-content-center\">\r\n                <div class=\"spinner-border\" role=\"status\">\r\n                    <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-outline-dark\" [disabled]=\"!canCancelImport\"\r\n                (click)=\"modal.close('Cancel click')\">{{'Cancel import of images' | translate}}</button>\r\n        </div>\r\n    </ng-template>\r\n</div>", styles: [".col-form-label{width:180px;margin-bottom:1rem}.btn-outline-primary{width:200px;margin-right:1rem}.input-group{width:83%;height:-moz-fit-content;height:fit-content}.main-form-container{width:60vw;display:flex;flex-direction:column}@media screen and (max-width: 765px){.main-form-container{width:90vw}}.main-form-container .form-container{width:100%}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }, { type: i2.LoaderComponent, selector: "lib-loader", inputs: ["useLogo", "color"] }, { type: i7.NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe, "async": i6.AsyncPipe, "timeDateString": i2.TimeDateToLocalStringPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VisitsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-visits', template: "<div class=\"container-fluid\" class=\"dashboard-tab\">\r\n    <div class=\"m-3\">\r\n        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n\r\n    <div class=\"row main-form-container\">\r\n        <div class=\"col-md-6 form-container\">\r\n            <ul class=\"list-group list-group-flush\" *ngIf=\"!visitForm\">\r\n                <li class=\"list-group-item list-group-item-action\" *ngFor=\"let visit of visits; index as index\">\r\n                    <div class=\"d-flex justify-content-between align-items-center\" (click)=\"onToggleDetail(index)\">\r\n                        {{visit.name ? visit.name : visit.model3d }}\r\n                        <lib-chevron [conditionShowing]=\"index==visitIndexDetails\"></lib-chevron>\r\n                    </div>\r\n                    <div *ngIf=\"index==visitIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                            <li class=\"list-group-item bg-transparent\">{{'Name' | translate}} : {{ visit.name ?\r\n                                visit.name : \"Not provided\" | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'3D Model' | translate}} : {{ visit.model3d }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Surface' | translate}}, m<sup>2</sup>: {{\r\n                                visit.surface ?\r\n                                visit.surface : 'Not provided' | translate}}</li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Viewer' | translate}} : {{ visit.viewer }}\r\n                            </li>\r\n                            <li class=\"list-group-item bg-transparent\">{{'Date of capture' | translate}} : {{\r\n                                visit.takenAt | timeDateString | async}}\r\n                            <li class=\"list-group-item bg-transparent\">{{'Images imported' | translate}} : {{\r\n                                visit.nmbImagesImported }}\r\n                            </li>\r\n                        </ul>\r\n                        \r\n                        <lib-loader *ngIf=\"isProcessing\"></lib-loader>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onImport(visit)\" [disabled]=\"isProcessing\">{{'Import images' |\r\n                            translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" [disabled]=\"isProcessing\"\r\n                            (click)=\"onEdit(visit)\">{{'Edit' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" [disabled]=\"isProcessing\"\r\n                            (click)=\"onDelete(visit)\">{{'Delete' | translate}}</button>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n            <div *ngIf=\"visitForm\">\r\n                <form (ngSubmit)=\"onSubmitVisit()\" [formGroup]=\"visitForm\">\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"name\">\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Reference 3D model' | translate}} *</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" [readonly]=\"isEditing\"\r\n                                [class.is-invalid]=\"model3D.invalid && visitSubmitted\" required\r\n                                formControlName=\"model3D\">\r\n                            <div class=\"invalid-feedback\">\r\n                                <ngb-alert data-testid=\"new-location-name-invalid\" [dismissible]=\"false\" type=\"danger\" \r\n                                *ngIf=\"validatorsService.isControlError(visitForm.controls['name']) \r\n                                    ||  isFormError(visitForm.controls['name'])\">\r\n                                      {{validatorsService.getError(visitForm.controls['name']) | translate}}\r\n                                </ngb-alert>\r\n                            </div>\r\n                            <div *ngIf=\"isEditing\" class=\"text-danger\">\r\n                                {{'Cannot change 3D model reference. Please add new model.' | translate}}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Viewer' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"viewer\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"mb-3 row\">\r\n                        <label class=\"col-sm-2 col-form-label\">{{'Capture Date' | translate}}</label>\r\n                        <div class=\"input-group\">\r\n                            <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"captureDate\" ngbDatepicker\r\n                                #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                            <div class=\"input-group-append\">\r\n                                <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\"\r\n                                    type=\"button\"></button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill\">{{'Cancel' |\r\n                        translate}}</button>\r\n                    <div class=\"invalid-feedback\" *ngIf=\"errorForm\">\r\n                            <ngb-alert data-testid=\"new-location-form-invalid\" [dismissible]=\"false\" type=\"danger\">\r\n                              {{'errorForm.infoBtn' |translate}}\r\n                      \r\n                            </ngb-alert>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n            <div *ngIf=\"!visitForm\">\r\n                <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onAddVisit()\">{{'Add 3D visit' |\r\n                    translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div id=\"viewer-frame\" style=\"width: 100%; aspect-ratio: 2/1;\"></div>\r\n    </div>\r\n    <ng-template #content let-modal>\r\n        <div class=\"modal-header\">\r\n            <h4 class=\"modal-title\" id=\"modal-basic-title\">{{'Importing Data' | translate}}</h4>\r\n            <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\r\n                <span aria-hidden=\"true\">\u00D7</span>\r\n            </button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n            {{'Please do not leave or refresh this page...' | translate}}\r\n            <div *ngIf=\"totalImages != 0\">Imported {{imagesProcessed}} out of {{totalImages}} images.</div>\r\n            <div class=\"d-flex justify-content-center\">\r\n                <div class=\"spinner-border\" role=\"status\">\r\n                    <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-outline-dark\" [disabled]=\"!canCancelImport\"\r\n                (click)=\"modal.close('Cancel click')\">{{'Cancel import of images' | translate}}</button>\r\n        </div>\r\n    </ng-template>\r\n</div>", styles: [".col-form-label{width:180px;margin-bottom:1rem}.btn-outline-primary{width:200px;margin-right:1rem}.input-group{width:83%;height:-moz-fit-content;height:fit-content}.main-form-container{width:60vw;display:flex;flex-direction:column}@media screen and (max-width: 765px){.main-form-container{width:90vw}}.main-form-container .form-container{width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i2.MatterportImportService }, { type: i2.CaptureService }, { type: i2.NodeService }, { type: i2.SpaceService }, { type: i1.ActivatedRoute }, { type: i7.NgbModal }, { type: i2.VisitService }, { type: i2.ValidatorsService }, { type: i3.TranslateService }]; }, propDecorators: { content: [{
+        }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i2.MatterportImportService }, { type: i2.CaptureService }, { type: i2.NodeService }, { type: i2.SpaceService }, { type: i1.ActivatedRoute }, { type: i7.NgbModal }, { type: i2.VisitService }, { type: i2.ValidatorsService }, { type: i3.TranslateService }, { type: i2.NavigatorService }, { type: i1.Router }]; }, propDecorators: { content: [{
                 type: ViewChild,
                 args: ['content', { static: false }]
             }] } });
@@ -2703,10 +2750,10 @@ class AddZoneComponent {
     }
 }
 AddZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddZoneComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.ZoneService }, { token: i2.LayerService }, { token: i2.BaseUserService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-AddZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AddZoneComponent, selector: "lib-add-zone", inputs: { zoneEdit: "zoneEdit", spaceID: "spaceID", images360: "images360", navigationIDs: "navigationIDs", zones: "zones", newZoneDataFromEditor: "newZoneDataFromEditor", chosenPlan: "chosenPlan", isMuseumVisit: "isMuseumVisit", defaultZone: "defaultZone" }, outputs: { updatedZone: "updatedZone" }, ngImport: i0, template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                    <div *ngIf=\"newLayer.invalid && (newLayer.dirty || newLayer.touched)\" class=\"text-danger\">\r\n                        <div *ngIf=\"newLayer.errors?.['forbiddenName']\">\r\n                            {{'Layer exists already' | translate}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\" [disabled]=\"zoneEdit !== undefined && zoneEdit !== null\"\r\n                    (change)=\"onChangeMultipleFloors()\" [ngModelOptions]=\"{standalone: true}\">\r\n                    <div class='text-danger' *ngIf=\"zoneEdit\">\r\n                        {{'cannotChangeMultifloor' | translate}}\r\n                    </div>\r\n                </div>\r\n                \r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input *ngIf=\"zoneEdit\" type=\"text\" class=\"form-control\" formControlName=\"parent\">\r\n                    <div class=\"text-danger\" *ngIf=\"zoneEdit\">\r\n                        {{'cannotChangeParent' | translate}}\r\n                    </div>\r\n                    <select *ngIf=\"!zoneEdit\" class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\" >\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                    \r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div> -->\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'add-all-scans' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || !zoneForm.valid\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [newZoneData]=\"newZoneDataFromEditor\" [spaceID]=\"spaceID\" [multipleFloors]=\"multipleFloors\"\r\n        [inputZone]=\"zoneEdit\" (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}h2{color:var(--smarterplan-primary);padding:0}.col-form-label{margin-bottom:1rem}.btn-outline-primary{margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}p{margin:0;padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px)}button{min-width:80px}\n"], components: [{ type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }, { type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "occupiedSweeps", "unavailableSweeps", "editingAudioZone", "inputZone", "multipleFloors"], outputs: ["sweepsSelected"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe } });
+AddZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AddZoneComponent, selector: "lib-add-zone", inputs: { zoneEdit: "zoneEdit", spaceID: "spaceID", images360: "images360", navigationIDs: "navigationIDs", zones: "zones", newZoneDataFromEditor: "newZoneDataFromEditor", chosenPlan: "chosenPlan", isMuseumVisit: "isMuseumVisit", defaultZone: "defaultZone" }, outputs: { updatedZone: "updatedZone" }, ngImport: i0, template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                    <div *ngIf=\"newLayer.invalid && (newLayer.dirty || newLayer.touched)\" class=\"text-danger\">\r\n                        <div *ngIf=\"newLayer.errors?.['forbiddenName']\">\r\n                            {{'Layer exists already' | translate}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneEdit || zoneEdit.isMultipleFloorZone\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\" [disabled]=\"zoneEdit !== undefined && zoneEdit !== null\"\r\n                    (change)=\"onChangeMultipleFloors()\" [ngModelOptions]=\"{standalone: true}\">\r\n                    <div class='text-danger' *ngIf=\"zoneEdit\">\r\n                        {{'cannotChangeMultifloor' | translate}}\r\n                    </div>\r\n                </div>\r\n                \r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input *ngIf=\"zoneEdit\" type=\"text\" class=\"form-control\" formControlName=\"parent\">\r\n                    <div class=\"text-danger\" *ngIf=\"zoneEdit\">\r\n                        {{'cannotChangeParent' | translate}}\r\n                    </div>\r\n                    <select *ngIf=\"!zoneEdit\" class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\" >\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                    \r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div> -->\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'add-all-scans' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || !zoneForm.valid\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [newZoneData]=\"newZoneDataFromEditor\" [spaceID]=\"spaceID\" [multipleFloors]=\"multipleFloors\"\r\n        [inputZone]=\"zoneEdit\" (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}h2{color:var(--smarterplan-primary);padding:0}.col-form-label{margin-bottom:1rem}.btn-outline-primary{margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}p{margin:0;padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px)}button{min-width:80px}\n"], components: [{ type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }, { type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "occupiedSweeps", "unavailableSweeps", "editingAudioZone", "inputZone", "multipleFloors"], outputs: ["sweepsSelected"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddZoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-add-zone', template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                    <div *ngIf=\"newLayer.invalid && (newLayer.dirty || newLayer.touched)\" class=\"text-danger\">\r\n                        <div *ngIf=\"newLayer.errors?.['forbiddenName']\">\r\n                            {{'Layer exists already' | translate}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\" [disabled]=\"zoneEdit !== undefined && zoneEdit !== null\"\r\n                    (change)=\"onChangeMultipleFloors()\" [ngModelOptions]=\"{standalone: true}\">\r\n                    <div class='text-danger' *ngIf=\"zoneEdit\">\r\n                        {{'cannotChangeMultifloor' | translate}}\r\n                    </div>\r\n                </div>\r\n                \r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input *ngIf=\"zoneEdit\" type=\"text\" class=\"form-control\" formControlName=\"parent\">\r\n                    <div class=\"text-danger\" *ngIf=\"zoneEdit\">\r\n                        {{'cannotChangeParent' | translate}}\r\n                    </div>\r\n                    <select *ngIf=\"!zoneEdit\" class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\" >\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                    \r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div> -->\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'add-all-scans' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || !zoneForm.valid\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [newZoneData]=\"newZoneDataFromEditor\" [spaceID]=\"spaceID\" [multipleFloors]=\"multipleFloors\"\r\n        [inputZone]=\"zoneEdit\" (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}h2{color:var(--smarterplan-primary);padding:0}.col-form-label{margin-bottom:1rem}.btn-outline-primary{margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}p{margin:0;padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px)}button{min-width:80px}\n"] }]
+            args: [{ selector: 'lib-add-zone', template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                    <div *ngIf=\"newLayer.invalid && (newLayer.dirty || newLayer.touched)\" class=\"text-danger\">\r\n                        <div *ngIf=\"newLayer.errors?.['forbiddenName']\">\r\n                            {{'Layer exists already' | translate}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneEdit || zoneEdit.isMultipleFloorZone\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\" [disabled]=\"zoneEdit !== undefined && zoneEdit !== null\"\r\n                    (change)=\"onChangeMultipleFloors()\" [ngModelOptions]=\"{standalone: true}\">\r\n                    <div class='text-danger' *ngIf=\"zoneEdit\">\r\n                        {{'cannotChangeMultifloor' | translate}}\r\n                    </div>\r\n                </div>\r\n                \r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input *ngIf=\"zoneEdit\" type=\"text\" class=\"form-control\" formControlName=\"parent\">\r\n                    <div class=\"text-danger\" *ngIf=\"zoneEdit\">\r\n                        {{'cannotChangeParent' | translate}}\r\n                    </div>\r\n                    <select *ngIf=\"!zoneEdit\" class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\" >\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                    \r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div> -->\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'add-all-scans' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan || !zoneForm.valid\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [newZoneData]=\"newZoneDataFromEditor\" [spaceID]=\"spaceID\" [multipleFloors]=\"multipleFloors\"\r\n        [inputZone]=\"zoneEdit\" (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}h2{color:var(--smarterplan-primary);padding:0}.col-form-label{margin-bottom:1rem}.btn-outline-primary{margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}p{margin:0;padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px)}button{min-width:80px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i2.ZoneService }, { type: i2.LayerService }, { type: i2.BaseUserService }, { type: i2.NavigationService }]; }, propDecorators: { zoneEdit: [{
                 type: Input
             }], spaceID: [{
@@ -2974,7 +3021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
         }], ctorParameters: function () { return [{ type: i2.ZoneService }]; } });
 
 class ZonesComponent {
-    constructor(route, zoneService, spaceService, visitService, navigationService, userService, planService, translate) {
+    constructor(route, zoneService, spaceService, visitService, navigationService, userService, planService, translate, navigatorService, router) {
         this.route = route;
         this.zoneService = zoneService;
         this.spaceService = spaceService;
@@ -2983,6 +3030,8 @@ class ZonesComponent {
         this.userService = userService;
         this.planService = planService;
         this.translate = translate;
+        this.navigatorService = navigatorService;
+        this.router = router;
         this.lotIndexDetails = -1;
         this.updatedZone = new EventEmitter();
         this.isEditingZone = false;
@@ -2997,11 +3046,23 @@ class ZonesComponent {
         this.floorDetails = -1;
         this.defaultShowing = false;
         this.isAddingAudioTrack = false;
+        this.destroy$ = new Subject();
+        this.navigatorService.locationIDChange
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((spaceID) => {
+            this.router.navigate(["dashboard/localisation", spaceID, "zones"]);
+        });
+        this.route.params.subscribe((params) => {
+            this.spaceID = params.id;
+            this.resetZones();
+        });
     }
     async ngOnInit() {
-        this.spaceID = this.route.snapshot.paramMap.get("id");
         this.isMuseumModule = this.userService.getSpModule() === SpModule.MUSEUM;
-        this.resetZones();
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
     }
     setupMenuItems() {
         this.menuItems = [
@@ -3195,27 +3256,42 @@ class ZonesComponent {
         }
     }
 }
-ZonesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ZonesComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.ZoneService }, { token: i2.SpaceService }, { token: i2.VisitService }, { token: i2.NavigationService }, { token: i2.BaseUserService }, { token: i2.PlanService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+ZonesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ZonesComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.ZoneService }, { token: i2.SpaceService }, { token: i2.VisitService }, { token: i2.NavigationService }, { token: i2.BaseUserService }, { token: i2.PlanService }, { token: i3.TranslateService }, { token: i2.NavigatorService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
 ZonesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ZonesComponent, selector: "lib-zones", outputs: { updatedZone: "updatedZone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\">\r\n    <div class=\"m-3\">\r\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"row\" *ngIf=\"!isEditingZone && !isAddingAudioTrack\">\r\n      <div class=\"col-md-6\">\r\n        <ul class=\"list-group list-group-flush\" >\r\n          <li class=\"list-group-item default-zone-line-item\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\" *ngIf=\"defaultZone\">\r\n              {{defaultZone.name}}\r\n              <div class=\"default-zone-label\">{{ \"whole space\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"defaultShowing\" (click)=\"onToggleDefaultZone()\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"defaultShowing\">\r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: \r\n                  {{defaultZone.layer ? defaultZone.layer.name : \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"defaultZone.surface\">\r\n                  {{'Surface' | translate}}, m<sup>2</sup>: {{defaultZone.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!defaultZone.virtual\">{{'Scan Points' | translate}}:\r\n                  {{defaultZone.sweepIDs ? defaultZone.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n              </ul>\r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == defaultZone.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">\r\n                            {{'Surface' | translate}},m<sup>2</sup>: {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\r\n                            {{'Zone not visible in 3D visit' | translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\r\n                        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\r\n                          *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n          \r\n          <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n              {{floor.name}}\r\n              <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\r\n              <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"index==floorDetails\" (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"index==floorDetails\">  \r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\r\n                  floor.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{floor.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\r\n                  {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\r\n                  translate}}</li>\r\n              </ul>\r\n              <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\r\n                translate}}</button>\r\n  \r\n              <!-- List of children zones -->\r\n  \r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == floor.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual && lot.isMuseumVisitZone\">\r\n                            {{'Scan Points with audio' | translate}}: {{ lot | countAudioSweeps | async}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\r\n                            {{'Zone not visible in 3D visit' | translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\r\n                        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\r\n                          *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n  \r\n        <div>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\r\n            translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\"\r\n            *ngIf=\"isMuseumModule\"> {{'Add museum itinerary' | translate}}</button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-6\" *ngIf=\"planIsVisible\">\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\r\n          <div class=\"spinner-border\" role=\"status\">\r\n            <span class=\"visually-hidden\">Loading...</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\" style=\"overflow: hidden; flex-direction: column;\">\r\n          <div *ngIf=\"currentPlan\">\r\n            <lib-plan-legend [isAudioZone]=\"false\"></lib-plan-legend>\r\n            <div class=\"planContainer\">\r\n              <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\"></div>\r\n            </div>\r\n          </div>\r\n          \r\n          <div *ngIf=\"!currentPlan && plans && !loadingPlan && currentZone\">\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentZone.virtual && !currentZone.isMultipleFloorZone\">\r\n              {{ 'Plan is not calibrated' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.virtual\">\r\n              {{ 'No scan points chosen' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.isMultipleFloorZone\">\r\n              {{ 'The zone is on several floors' | translate}}\r\n            </div>\r\n          </div>\r\n          \r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isEditingZone\">\r\n      <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\r\n        [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\" [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isAddingAudioTrack\">\r\n      <lib-add-audio-zone [spaceID]=\"spaceID\" [defaultZone]=\"defaultZone\" [parentZone]=\"parentZoneForAudio\" [zones]=\"allZones\" [currentAudioZone]=\"zoneForEdit\"\r\n      (updatedZone)=\"editCompleted($event)\"></lib-add-audio-zone>\r\n    </div>\r\n  </div>\r\n", styles: [".museum-label{background-color:#6f3974;font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}.default-zone-line-item{border-bottom-width:3px}.default-zone-label{background-color:var(--smarterplan-primary);font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}.planContainer{overflow:hidden;border-radius:6px;background-color:var(--smarterplan-secondary);height:500px}button{min-width:80px}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }, { type: PlanLegendComponent, selector: "lib-plan-legend", inputs: ["isAudioZone"] }, { type: AddZoneComponent, selector: "lib-add-zone", inputs: ["zoneEdit", "spaceID", "images360", "navigationIDs", "zones", "newZoneDataFromEditor", "chosenPlan", "isMuseumVisit", "defaultZone"], outputs: ["updatedZone"] }, { type: AddAudioZoneComponent, selector: "lib-add-audio-zone", inputs: ["spaceID", "defaultZone", "zones", "parentZone", "currentAudioZone"], outputs: ["updatedZone"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3.TranslatePipe, "keyvalue": i6.KeyValuePipe, "async": i6.AsyncPipe, "countAudioSweeps": CountAudioSweepsPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ZonesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-zones', template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\">\r\n    <div class=\"m-3\">\r\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"row\" *ngIf=\"!isEditingZone && !isAddingAudioTrack\">\r\n      <div class=\"col-md-6\">\r\n        <ul class=\"list-group list-group-flush\" >\r\n          <li class=\"list-group-item default-zone-line-item\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\" *ngIf=\"defaultZone\">\r\n              {{defaultZone.name}}\r\n              <div class=\"default-zone-label\">{{ \"whole space\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"defaultShowing\" (click)=\"onToggleDefaultZone()\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"defaultShowing\">\r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: \r\n                  {{defaultZone.layer ? defaultZone.layer.name : \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"defaultZone.surface\">\r\n                  {{'Surface' | translate}}, m<sup>2</sup>: {{defaultZone.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!defaultZone.virtual\">{{'Scan Points' | translate}}:\r\n                  {{defaultZone.sweepIDs ? defaultZone.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n              </ul>\r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == defaultZone.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">\r\n                            {{'Surface' | translate}},m<sup>2</sup>: {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\r\n                            {{'Zone not visible in 3D visit' | translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\r\n                        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\r\n                          *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n          \r\n          <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n              {{floor.name}}\r\n              <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\r\n              <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"index==floorDetails\" (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"index==floorDetails\">  \r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\r\n                  floor.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{floor.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\r\n                  {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\r\n                  translate}}</li>\r\n              </ul>\r\n              <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\r\n                translate}}</button>\r\n  \r\n              <!-- List of children zones -->\r\n  \r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == floor.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual && lot.isMuseumVisitZone\">\r\n                            {{'Scan Points with audio' | translate}}: {{ lot | countAudioSweeps | async}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\r\n                            {{'Zone not visible in 3D visit' | translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' | translate}}</button>\r\n                        <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAudioZone(lot)\"\r\n                          *ngIf=\"isMuseumModule\"> {{'add-audio.add' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n  \r\n        <div>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\r\n            translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\"\r\n            *ngIf=\"isMuseumModule\"> {{'Add museum itinerary' | translate}}</button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-6\" *ngIf=\"planIsVisible\">\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\r\n          <div class=\"spinner-border\" role=\"status\">\r\n            <span class=\"visually-hidden\">Loading...</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\" style=\"overflow: hidden; flex-direction: column;\">\r\n          <div *ngIf=\"currentPlan\">\r\n            <lib-plan-legend [isAudioZone]=\"false\"></lib-plan-legend>\r\n            <div class=\"planContainer\">\r\n              <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\"></div>\r\n            </div>\r\n          </div>\r\n          \r\n          <div *ngIf=\"!currentPlan && plans && !loadingPlan && currentZone\">\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentZone.virtual && !currentZone.isMultipleFloorZone\">\r\n              {{ 'Plan is not calibrated' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.virtual\">\r\n              {{ 'No scan points chosen' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.isMultipleFloorZone\">\r\n              {{ 'The zone is on several floors' | translate}}\r\n            </div>\r\n          </div>\r\n          \r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isEditingZone\">\r\n      <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\r\n        [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\" [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isAddingAudioTrack\">\r\n      <lib-add-audio-zone [spaceID]=\"spaceID\" [defaultZone]=\"defaultZone\" [parentZone]=\"parentZoneForAudio\" [zones]=\"allZones\" [currentAudioZone]=\"zoneForEdit\"\r\n      (updatedZone)=\"editCompleted($event)\"></lib-add-audio-zone>\r\n    </div>\r\n  </div>\r\n", styles: [".museum-label{background-color:#6f3974;font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}.default-zone-line-item{border-bottom-width:3px}.default-zone-label{background-color:var(--smarterplan-primary);font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}.planContainer{overflow:hidden;border-radius:6px;background-color:var(--smarterplan-secondary);height:500px}button{min-width:80px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.ZoneService }, { type: i2.SpaceService }, { type: i2.VisitService }, { type: i2.NavigationService }, { type: i2.BaseUserService }, { type: i2.PlanService }, { type: i3.TranslateService }]; }, propDecorators: { updatedZone: [{
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.ZoneService }, { type: i2.SpaceService }, { type: i2.VisitService }, { type: i2.NavigationService }, { type: i2.BaseUserService }, { type: i2.PlanService }, { type: i3.TranslateService }, { type: i2.NavigatorService }, { type: i1.Router }]; }, propDecorators: { updatedZone: [{
                 type: Output
             }] } });
 
 class ImagesComponent {
-    constructor(route, spaceService, visitService, nodeService) {
+    constructor(route, spaceService, visitService, nodeService, navigatorService, router) {
         this.route = route;
         this.spaceService = spaceService;
         this.visitService = visitService;
         this.nodeService = nodeService;
+        this.navigatorService = navigatorService;
+        this.router = router;
         this.loading = false;
         this.menuItems = [];
+        this.destroy$ = new Subject();
+        this.navigatorService.locationIDChange
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((spaceID) => {
+            this.router.navigate(["dashboard/localisation", spaceID, "images"]);
+        });
+        this.route.params.subscribe((params) => {
+            this.spaceID = params.id;
+            ;
+            this.loadImages();
+        });
     }
     ngOnInit() {
-        this.spaceID = this.route.snapshot.paramMap.get("id");
-        this.loadImages();
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
     }
     setupMenuItems() {
         this.menuItems = [
@@ -3278,12 +3354,12 @@ class ImagesComponent {
         }
     }
 }
-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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ImagesComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.SpaceService }, { token: i2.VisitService }, { token: i2.NodeService }, { token: i2.NavigatorService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
 ImagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ImagesComponent, selector: "lib-images", ngImport: i0, template: "<div class=\"container-fluid dashboard-tab col-sm-10 mb-3\" *ngIf=\"currentSpace\" >\n    <div class=\"m-3\">\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n    </div>\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border\" role=\"status\">\n        <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\n      </div>\n    </div>\n    <div ngbDropdown class=\"d-inline-block\" *ngIf=\"currentSpace.visits && currentSpace.visits.length > 0\">\n      <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" *ngIf=\"!currentVisit\"\n        ngbDropdownToggle>{{'Choose 3D visit' | translate}}</button>\n      <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n        <button ngbDropdownItem *ngFor=\"let visit of currentSpace.visits\" (click)=\"setVisit(visit)\"> {{ visit.name }}\n        </button>\n      </div>\n    </div>\n    <h3 *ngIf=\"currentVisit\">{{ currentVisit.name }}</h3>\n    <div class=\"mt-3\" *ngIf=\"currentVisit && currentImages.length == 0 && !loading\">\n      <h4>{{'No imported images' | translate }}</h4>\n      <p>{{'For import: go Virtual Visits => Import Images' | translate}}</p>\n    </div>\n    <button *ngIf=\"currentVisit && currentImages.length > 0 && !loading\"\n      class=\"btn btn-outline-primary rounded-pill no-lowercase mb-2\" (click)=\"onInventoryClick()\">\n      {{'Run AI inventory on this image' | translate}}</button>\n    <lib-carousel [images]=\"currentImages\" *ngIf=\"currentImages\" (currentScan)=\"setCurrentScan($event)\"></lib-carousel>\n  </div>", styles: [""], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ImagesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-images', template: "<div class=\"container-fluid dashboard-tab col-sm-10 mb-3\" *ngIf=\"currentSpace\" >\n    <div class=\"m-3\">\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\n    </div>\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border\" role=\"status\">\n        <span class=\"visually-hidden\">{{'Loading' | translate}}...</span>\n      </div>\n    </div>\n    <div ngbDropdown class=\"d-inline-block\" *ngIf=\"currentSpace.visits && currentSpace.visits.length > 0\">\n      <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" *ngIf=\"!currentVisit\"\n        ngbDropdownToggle>{{'Choose 3D visit' | translate}}</button>\n      <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n        <button ngbDropdownItem *ngFor=\"let visit of currentSpace.visits\" (click)=\"setVisit(visit)\"> {{ visit.name }}\n        </button>\n      </div>\n    </div>\n    <h3 *ngIf=\"currentVisit\">{{ currentVisit.name }}</h3>\n    <div class=\"mt-3\" *ngIf=\"currentVisit && currentImages.length == 0 && !loading\">\n      <h4>{{'No imported images' | translate }}</h4>\n      <p>{{'For import: go Virtual Visits => Import Images' | translate}}</p>\n    </div>\n    <button *ngIf=\"currentVisit && currentImages.length > 0 && !loading\"\n      class=\"btn btn-outline-primary rounded-pill no-lowercase mb-2\" (click)=\"onInventoryClick()\">\n      {{'Run AI inventory on this image' | translate}}</button>\n    <lib-carousel [images]=\"currentImages\" *ngIf=\"currentImages\" (currentScan)=\"setCurrentScan($event)\"></lib-carousel>\n  </div>", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.SpaceService }, { type: i2.VisitService }, { type: i2.NodeService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.SpaceService }, { type: i2.VisitService }, { type: i2.NodeService }, { type: i2.NavigatorService }, { type: i1.Router }]; } });
 
 class EditPlanComponent {
     constructor(planService, route, router, modalService, zoneService, visitService, spaceService, translate, ngZone) {