@smarterplan/ngx-smarterplan-core 1.4.19 → 1.4.20

package/fesm2022/smarterplan-ngx-smarterplan-core.mjs

@@ -20,6 +20,9 @@ import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader';
 import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
+import { Line2 } from 'three/examples/jsm/lines/Line2';
+import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry';
+import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial';
 import * as FileSaver from 'file-saver';
 import levenshtein from 'js-levenshtein';
 import { GlobalWorkerOptions, getDocument } from 'pdfjs-dist';
@@ -87,11 +90,11 @@ class CsvExportComponent {
         link.remove();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CsvExportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CsvExportComponent, selector: "lib-csv-export", inputs: { headers: "headers", rowsInput: "rowsInput", getRows: "getRows", title: "title", buttonLabel: "buttonLabel" }, ngImport: i0, template: "<span [style.cursor]=\"'pointer'\" (click)=\"onClickDownload()\" class=\"download-csv d-flex\">\r\n    <span class=\"iconify\" data-icon=\"mdi:file-download-outline\"></span>\r\n    {{ buttonLabel | translate}}\r\n</span>\r\n", styles: [".download-csv{color:var(--smarterplan-primary)}\n"], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CsvExportComponent, selector: "lib-csv-export", inputs: { headers: "headers", rowsInput: "rowsInput", getRows: "getRows", title: "title", buttonLabel: "buttonLabel" }, ngImport: i0, template: "<span [style.cursor]=\"'pointer'\" (click)=\"onClickDownload()\" class=\"download-csv d-flex\">\n    <span class=\"iconify\" data-icon=\"mdi:file-download-outline\"></span>\n    {{ buttonLabel | translate}}\n</span>\n", styles: [".download-csv{color:var(--smarterplan-primary)}\n"], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CsvExportComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-csv-export', template: "<span [style.cursor]=\"'pointer'\" (click)=\"onClickDownload()\" class=\"download-csv d-flex\">\r\n    <span class=\"iconify\" data-icon=\"mdi:file-download-outline\"></span>\r\n    {{ buttonLabel | translate}}\r\n</span>\r\n", styles: [".download-csv{color:var(--smarterplan-primary)}\n"] }]
+            args: [{ selector: 'lib-csv-export', template: "<span [style.cursor]=\"'pointer'\" (click)=\"onClickDownload()\" class=\"download-csv d-flex\">\n    <span class=\"iconify\" data-icon=\"mdi:file-download-outline\"></span>\n    {{ buttonLabel | translate}}\n</span>\n", styles: [".download-csv{color:var(--smarterplan-primary)}\n"] }]
         }], propDecorators: { headers: [{
                 type: Input
             }], rowsInput: [{
@@ -795,30 +798,30 @@ class SecurityCamera extends SceneComponent {
     }
 }
 function vertexShader$1() {
-    return `
-    uniform mat4 lightMatrix;
-
-    varying vec4 vLightCoords;
-
-    void main() {
-      // create a UV region [0,1] x [0,1] to represent what the lightMatrix "sees"
-      vLightCoords = lightMatrix *  modelMatrix * vec4(position, 1.0);
-      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    }
+    return `
+    uniform mat4 lightMatrix;
+
+    varying vec4 vLightCoords;
+
+    void main() {
+      // create a UV region [0,1] x [0,1] to represent what the lightMatrix "sees"
+      vLightCoords = lightMatrix *  modelMatrix * vec4(position, 1.0);
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
   `;
 }
 function fragmentShader$1() {
-    return `
-    uniform vec3 color;
-
-    varying vec4 vLightCoords;
-
-    void main() {
-      vec2 lightUV = vLightCoords.xy / vLightCoords.w;
-      float inView = float(max(lightUV.x, lightUV.y) <= 1.0 && min(lightUV.x, lightUV.y) >= 0.0 && vLightCoords.z > 0.0);
-
-      gl_FragColor = vec4(color, min(inView, 0.2));
-    }
+    return `
+    uniform vec3 color;
+
+    varying vec4 vLightCoords;
+
+    void main() {
+      vec2 lightUV = vLightCoords.xy / vLightCoords.w;
+      float inView = float(max(lightUV.x, lightUV.y) <= 1.0 && min(lightUV.x, lightUV.y) >= 0.0 && vLightCoords.z > 0.0);
+
+      gl_FragColor = vec4(color, min(inView, 0.2));
+    }
   `;
 }
 function updateHighlightUniforms$1(projector, uniforms) {
@@ -1011,30 +1014,30 @@ class ViewFrustumMesh extends SceneComponent {
     }
 }
 function vertexShader() {
-    return `
-    uniform mat4 lightMatrix;
-
-    varying vec4 vLightCoords;
-
-    void main() {
-      // create a UV region [0,1] x [0,1] to represent what the lightMatrix "sees"
-      vLightCoords = lightMatrix *  modelMatrix * vec4(position, 1.0);
-      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    }
+    return `
+    uniform mat4 lightMatrix;
+
+    varying vec4 vLightCoords;
+
+    void main() {
+      // create a UV region [0,1] x [0,1] to represent what the lightMatrix "sees"
+      vLightCoords = lightMatrix *  modelMatrix * vec4(position, 1.0);
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
   `;
 }
 function fragmentShader() {
-    return `
-    uniform vec3 color;
-
-    varying vec4 vLightCoords;
-
-    void main() {
-      vec2 lightUV = vLightCoords.xy / vLightCoords.w;
-      float inView = float(max(lightUV.x, lightUV.y) <= 1.0 && min(lightUV.x, lightUV.y) >= 0.0 && vLightCoords.z > 0.0);
-
-      gl_FragColor = vec4(color, min(inView, 0.2));
-    }
+    return `
+    uniform vec3 color;
+
+    varying vec4 vLightCoords;
+
+    void main() {
+      vec2 lightUV = vLightCoords.xy / vLightCoords.w;
+      float inView = float(max(lightUV.x, lightUV.y) <= 1.0 && min(lightUV.x, lightUV.y) >= 0.0 && vLightCoords.z > 0.0);
+
+      gl_FragColor = vec4(color, min(inView, 0.2));
+    }
   `;
 }
 function updateHighlightUniforms(projector, uniforms) {
@@ -2197,32 +2200,32 @@ class PoiService {
         if (!sweeps || sweeps.length === 0) {
             return [];
         }
-        const queryStatement = `
-    query ListPOISLight($filter: ModelPOIFilterInput, $limit: Int, $nextToken: String) {
-      listPOIS(filter: $filter, limit: $limit, nextToken: $nextToken) {
-        items {
-          id
-          coordinate
-          specific
-          private
-          global
-          type
-          elementID
-          level
-          role
-          category
-          domainID
-          metadata
-          tagIcon
-          tagDescription
-          tagImageID
-          matterportSweepID
-          createdAt
-          updatedAt
-        }
-        nextToken
-      }
-    }
+        const queryStatement = `
+    query ListPOISLight($filter: ModelPOIFilterInput, $limit: Int, $nextToken: String) {
+      listPOIS(filter: $filter, limit: $limit, nextToken: $nextToken) {
+        items {
+          id
+          coordinate
+          specific
+          private
+          global
+          type
+          elementID
+          level
+          role
+          category
+          domainID
+          metadata
+          tagIcon
+          tagDescription
+          tagImageID
+          matterportSweepID
+          createdAt
+          updatedAt
+        }
+        nextToken
+      }
+    }
   `;
         const CHUNK_SIZE = 50; // safe margin for an "or" filter expression's practical size
         const chunks = [];
@@ -3027,11 +3030,11 @@ class MatterportPointerService {
     }
     updateCursorDisplay(poseMatterport) {
         if (this.textDisplayCursorPositionPanel && poseMatterport) {
-            this.textDisplayCursorPositionPanel.innerHTML = `position:
-           ${pointToString(poseMatterport.position)}\n
-           normal:
-           ${pointToString(poseMatterport.normal)}\n
-           floorId:
+            this.textDisplayCursorPositionPanel.innerHTML = `position:
+           ${pointToString(poseMatterport.position)}\n
+           normal:
+           ${pointToString(poseMatterport.normal)}\n
+           floorId:
            ${poseMatterport.floorId}`;
             if (this.getCursorPositionButton) {
                 this.getCursorPositionButton.style.display = 'none';
@@ -5181,22 +5184,22 @@ class MatterportService {
       );
     }*/
     addCustomCss() {
-        const css = `
-      .footer-ui,
-      .showcase-footer,
-      .mp-nova-btn-group,
-      .footer-divider,
-      .logo-link,
-      .footer-logo,
-      .bottom-ui,
-      img.logo-image,
-      img[class^="logo-image"],
-      img[class*=" logo-image"],
-      [data-testid="showcase-footer"] {
-        opacity: 0 !important;
-        visibility: hidden !important;
-        pointer-events: none !important;
-      }
+        const css = `
+      .footer-ui,
+      .showcase-footer,
+      .mp-nova-btn-group,
+      .footer-divider,
+      .logo-link,
+      .footer-logo,
+      .bottom-ui,
+      img.logo-image,
+      img[class^="logo-image"],
+      img[class*=" logo-image"],
+      [data-testid="showcase-footer"] {
+        opacity: 0 !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+      }
     `;
         // 1st method: Via Scene SDK
         if (this.sdk?.Scene?.addStyle) {
@@ -5794,20 +5797,29 @@ function frameFromPoints(a, b, c) {
     return new THREE.Matrix4().makeBasis(e1, e2, e1.clone().cross(e2));
 }
 /**
- * Solves the transform that maps stored tag coordinates onto the loaded model.
+ * Solves the transform that maps stored tag coordinates onto the loaded model, from as many matched
+ * tags as there are - up to three.
+ *
+ * Three pairs pin down everything: position, orientation and scale. A model that shares only a
+ * corner with the tags' space may not have three tags to offer, so fewer are accepted, each
+ * settling what it can and assuming the rest:
  *
- * Takes exactly the correspondences a person can produce by hand: three tags, each pointed at twice
- * - once where it currently sits, once where it belongs. That is the minimum that pins down all
- * three parts of the answer. One pair fixes only translation; two leave the rotation about the line
- * between them free; three resolve it.
+ *  - Two pairs: position, heading and scale. The one thing two points cannot say is how the model
+ *    is tilted, so both spaces are taken to agree on which way is up.
+ *  - One pair: position only. Heading and scale are taken to match already.
  *
- * Returns null when the points are collinear or degenerate, because a wrong alignment applied
- * silently is worse than none.
+ * `targetUp` is the model's vertical axis, which the tags' own vertical (+Y) is matched to in those
+ * two cases. Returns null when the points cannot answer the question asked of them - collinear for
+ * three, one above the other for two - because a wrong calibration applied silently is worse than
+ * none.
  */
-function solveThreeJsAlignment(pairs) {
-    if (!pairs || pairs.length < 3) {
+function solveThreeJsAlignment(pairs, targetUp = { x: 0, y: 1, z: 0 }) {
+    if (!pairs || pairs.length === 0) {
         return null;
     }
+    if (pairs.length < 3) {
+        return solveReducedAlignment(pairs, new THREE.Vector3(targetUp.x, targetUp.y, targetUp.z).normalize());
+    }
     const sources = pairs.slice(0, 3).map((pair) => new THREE.Vector3(pair.source.x, pair.source.y, pair.source.z));
     const targets = pairs.slice(0, 3).map((pair) => new THREE.Vector3(pair.target.x, pair.target.y, pair.target.z));
     const sourceFrame = frameFromPoints(sources[0], sources[1], sources[2]);
@@ -5848,6 +5860,41 @@ function solveThreeJsAlignment(pairs) {
         scale,
     };
 }
+/** The one- and two-pair cases of solveThreeJsAlignment, which share the "same vertical" assumption. */
+function solveReducedAlignment(pairs, up) {
+    const sources = pairs.map((pair) => new THREE.Vector3(pair.source.x, pair.source.y, pair.source.z));
+    const targets = pairs.map((pair) => new THREE.Vector3(pair.target.x, pair.target.y, pair.target.z));
+    // Starts from the rotation that only stands the tags' vertical on the model's.
+    const rotation = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 1, 0), up);
+    let scale = 1;
+    if (pairs.length === 2) {
+        const sourceSpan = sources[1].clone().sub(sources[0]);
+        const targetSpan = targets[1].clone().sub(targets[0]);
+        if (sourceSpan.length() < 1e-9 || targetSpan.length() < 1e-9) {
+            return null;
+        }
+        scale = targetSpan.length() / sourceSpan.length();
+        // Heading is the turn about the vertical that lines the two spans up, so only their horizontal
+        // parts count. Two points one above the other have none, and say nothing about heading.
+        const flatten = (v) => v.clone().sub(up.clone().multiplyScalar(v.dot(up)));
+        const from = flatten(sourceSpan.clone().applyQuaternion(rotation));
+        const to = flatten(targetSpan);
+        if (from.length() < 1e-6 * sourceSpan.length() || to.length() < 1e-6 * targetSpan.length()) {
+            return null;
+        }
+        const heading = Math.atan2(new THREE.Vector3().crossVectors(from, to).dot(up), from.dot(to));
+        rotation.premultiply(new THREE.Quaternion().setFromAxisAngle(up, heading));
+    }
+    // A point lands at t + s*R*p; solved for t at the centroids, as in the three-pair case.
+    const centroid = (points) => points.reduce((sum, v) => sum.add(v), new THREE.Vector3()).multiplyScalar(1 / points.length);
+    const translation = centroid(targets).sub(centroid(sources).applyQuaternion(rotation).multiplyScalar(scale));
+    const euler = new THREE.Euler().setFromQuaternion(rotation);
+    return {
+        translation: { x: translation.x, y: translation.y, z: translation.z },
+        rotation: { x: euler.x, y: euler.y, z: euler.z },
+        scale,
+    };
+}
 class ThreeJsService {
     ngZone;
     scene;
@@ -5885,6 +5932,61 @@ class ThreeJsService {
     pendingTagPlacement = null;
     /** Pointer position waiting for a preview pick, coalesced to one per frame. */
     pendingPreviewEvent = null;
+    /**
+     * Tags whose position is in this model's own coordinates. A sibling of the tag group that does not
+     * carry the calibration: calibrating a model for the tags it imports must not move the ones that
+     * were placed straight onto it.
+     */
+    modelTagGroup = new THREE.Group();
+    /**
+     * The capture on screen. A tag placed in a 3D model is recorded with it, which is how the tags
+     * placed in this one are told from those that came from elsewhere.
+     */
+    currentCaptureID = null;
+    /**
+     * The model's surface as a grid: every cell some part of the surface passes through.
+     *
+     * It answers "is this point near the model?" without visiting the triangles, of which a captured
+     * model has millions - the question is asked for every tag, every time the calibration changes.
+     */
+    surfaceCells = null;
+    surfaceOrigin = new THREE.Vector3();
+    surfaceCellSize = 1;
+    /**
+     * How far from the model's surface a tag may be and still count as on it, in metres.
+     *
+     * Every tag of the space is offered to every model; this is what decides which ones a model
+     * shows. A tag marks something on a surface, so one that belongs here sits on the surface or
+     * close to it. One that lands deep inside the model, or well away from it, marks something that
+     * is not part of this model. The allowance covers a calibration done by hand and the model not
+     * matching the scan exactly, which together run to a few tens of centimetres.
+     */
+    static ON_MODEL_METRES = 0.75;
+    /** Cells per axis the grid's keys can address, with room either side for points off the model. */
+    static SURFACE_GRID_SPAN = 1024;
+    static SURFACE_GRID_PAD = 128;
+    /** Own tags moved to keep their place under the last calibration, waiting to be stored. */
+    rebasedTags = [];
+    /** The type filter in force. Null shows every type. */
+    visibleTagTypes = null;
+    measuring = false;
+    /** Points clicked so far, in tag space. */
+    measurePoints = [];
+    /**
+     * Everything drawn for the measurement. A child of the tag group, so its points share the frame
+     * tag coordinates are stored in - which is metres, and what the saved POI has to be in.
+     */
+    measureGroup = new THREE.Group();
+    /** The segment that follows the pointer from the last point clicked. */
+    measureRubberBand;
+    lastMeasurement = null;
+    /** Half the model's diagonal as placed in the scene, where it is centred on the origin. */
+    modelWorldRadius = 0;
+    /** The outermost group the model and its tags hang from: where "which way is up" is applied. */
+    modelGroup;
+    modelUp = 'y';
+    /** While measuring: how many points and each segment's length. Null when it is abandoned. */
+    measurementProgress$ = new Subject();
     /**
      * Layer carrying the model alone, so the depth pick can render it without the tags.
      *
@@ -5892,6 +5994,8 @@ class ThreeJsService {
      * their parent passed, so marking the model's own meshes is enough - no re-parenting.
      */
     static PICK_LAYER = 1;
+    /** The app's highlight colour, so a measurement reads as the active thing on screen. */
+    static MEASURE_COLOR = '#FFB103';
     /** Cache Storage bucket holding downloaded models, and how many to keep. */
     static MODEL_CACHE = 'smarterplan-3d-models';
     static MODEL_CACHE_SIZE = 3;
@@ -5908,6 +6012,8 @@ class ThreeJsService {
     aligning = false;
     alignmentPairs = [];
     alignmentSource = null;
+    /** The tag `alignmentSource` was read from, kept so the same tag is not matched twice. */
+    alignmentSourceTagId;
     /** Drives the alignment walkthrough's UI: how many pairs are done and what it wants next. */
     alignmentProgress$ = new Subject();
     /** In-flight camera move started by goToTag, advanced by the render loop. */
@@ -6023,6 +6129,8 @@ class ThreeJsService {
         //    new model and show the previous visit's tags on it.
         this.discardCurrentLoad();
         this.clearTags();
+        this.measuring = false;
+        this.clearMeasurement();
         this.cameraTween = null;
         this.modelRoot = undefined;
         // 1. Setup Scene
@@ -6130,7 +6238,7 @@ class ThreeJsService {
      * and stays indexed, so far less data reaches the GPU. KTX2 textures are supported too: they
      * stay compressed in VRAM instead of being decoded to raw pixels like JPEG/PNG.
      */
-    loadGLTFModel(url, cameraPosition, rotation, cacheKey) {
+    loadGLTFModel(url, cameraPosition, rotation, cacheKey, up) {
         const loader = new GLTFLoader();
         // KTX2 needs the renderer to report which compressed formats this GPU accepts, so this has to
         // happen after init(). Guarded so a model without KTX2 textures still loads if it's missing.
@@ -6156,7 +6264,7 @@ class ThreeJsService {
             this.forceDoubleSidedMaterials(gltf.scene);
             this.ensureVertexNormals(gltf.scene);
             this.tuneTextureSampling(gltf.scene);
-            this.placeLoadedObjectInScene(gltf.scene, cameraPosition, rotation);
+            this.placeLoadedObjectInScene(gltf.scene, cameraPosition, rotation, up);
             this.modelLoading$.next(false);
         };
         const onError = (error) => {
@@ -6629,7 +6737,7 @@ class ThreeJsService {
         });
     }
     /** Centers, scales and adds a loaded object to the scene, then frames the camera on it. */
-    placeLoadedObjectInScene(object, cameraPosition, rotation) {
+    placeLoadedObjectInScene(object, cameraPosition, rotation, up) {
         const box = new THREE.Box3().setFromObject(object);
         const center = box.getCenter(new THREE.Vector3());
         const size = box.getSize(new THREE.Vector3());
@@ -6644,12 +6752,25 @@ class ThreeJsService {
         if (rotation) {
             object.rotation.set(rotation.x, rotation.y, rotation.z);
         }
+        // Which way is up. A choice someone made by hand always wins; otherwise, unless the model came
+        // with an orientation of its own, it is worked out from the geometry. Applied to the outer
+        // group, above both the model and the tags: they turn together, and every coordinate already
+        // stored - tag positions, the calibration - keeps meaning what it meant.
+        this.modelGroup = group;
+        this.modelUp = up ?? (rotation ? 'y' : this.detectModelUp(object, size));
+        group.quaternion.copy(this.uprightRotation(this.modelUp));
         this.modelRoot = object;
+        this.modelWorldRadius = (size.length() / 2) * scale;
+        // The box above was measured before any rotation from the metadata was applied; with one, it
+        // has to be measured again to be the model as it actually sits.
+        this.buildSurfaceGrid(object, rotation ? new THREE.Box3().setFromObject(object) : box);
+        this.refreshTagVisibility();
         // Marks the model for the depth pick, which renders this layer alone - so tags and the ghost
         // itself cannot end up being what the cursor reports as the surface under it.
         object.traverse((child) => child.layers.enable(ThreeJsService.PICK_LAYER));
         centered.add(object);
         centered.add(this.tagGroup);
+        centered.add(this.modelTagGroup);
         group.add(centered);
         group.scale.setScalar(scale);
         this.scene.add(group);
@@ -6665,6 +6786,98 @@ class ThreeJsService {
         this.controls.target.set(0, 0, 0);
         this.controls.update();
     }
+    /**
+     * Which of the model's axes is its vertical: 'y' when it already stands upright, or when it is
+     * not clear enough to act on.
+     *
+     * Models arrive in two conventions: Y up (glTF, and what this viewer assumes) and Z up (most CAD
+     * and scanning exports). A Z-up model loads lying on its side. Two independent cues say which
+     * axis is the vertical one, and both have to agree before anything is turned:
+     *
+     *  - Surface area. Floors and ceilings all face along the vertical, while walls are shared out
+     *    between the two horizontal axes, so the vertical usually collects the most area.
+     *  - Extent. A building is normally wider than it is tall, so the vertical is its shortest side.
+     *
+     * Either alone is wrong often enough to matter - a long corridor has more wall than floor, a
+     * tower is taller than it is wide - and turning a model that was fine is worse than leaving one
+     * that was not. A model that already has Y as its vertical is never touched.
+     */
+    detectModelUp(object, size) {
+        const axes = ['x', 'y', 'z'];
+        // Projected area facing each way along each axis: [positive, negative].
+        const area = { x: [0, 0], y: [0, 0], z: [0, 0] };
+        let triangleCount = 0;
+        object.updateMatrixWorld(true);
+        object.traverse((child) => {
+            const position = child.isMesh && child.geometry?.attributes?.position;
+            if (position) {
+                triangleCount += (child.geometry.index ? child.geometry.index.count : position.count) / 3;
+            }
+        });
+        if (triangleCount === 0) {
+            return 'y';
+        }
+        // A sample is plenty to see where the area lies, and keeps this cheap on models with millions
+        // of triangles.
+        const stride = Math.max(1, Math.ceil(triangleCount / 200000));
+        const a = new THREE.Vector3();
+        const b = new THREE.Vector3();
+        const c = new THREE.Vector3();
+        const normal = new THREE.Vector3();
+        object.traverse((child) => {
+            const position = child.isMesh && child.geometry?.attributes?.position;
+            if (!position) {
+                return;
+            }
+            const index = child.geometry.index;
+            const count = (index ? index.count : position.count) / 3;
+            for (let triangle = 0; triangle < count; triangle += stride) {
+                const offset = triangle * 3;
+                a.fromBufferAttribute(position, index ? index.getX(offset) : offset).applyMatrix4(child.matrixWorld);
+                b.fromBufferAttribute(position, index ? index.getX(offset + 1) : offset + 1).applyMatrix4(child.matrixWorld);
+                c.fromBufferAttribute(position, index ? index.getX(offset + 2) : offset + 2).applyMatrix4(child.matrixWorld);
+                // The cross product's length is twice the triangle's area, so its components are the
+                // area the triangle shows along each axis.
+                normal.crossVectors(b.sub(a), c.sub(a));
+                axes.forEach((axis) => {
+                    area[axis][normal[axis] >= 0 ? 0 : 1] += Math.abs(normal[axis]);
+                });
+            }
+        });
+        const total = { x: area.x[0] + area.x[1], y: area.y[0] + area.y[1], z: area.z[0] + area.z[1] };
+        const byArea = axes.reduce((best, axis) => (total[axis] > total[best] ? axis : best), 'y');
+        const byExtent = axes.reduce((best, axis) => (size[axis] < size[best] ? axis : best), 'y');
+        if (byArea === 'y' || byArea !== byExtent || total[byArea] < 1.25 * total.y) {
+            return 'y';
+        }
+        // Which way along that axis is up. Roofs and ground make an outdoor model face mostly upward,
+        // which settles it; indoors floors and ceilings balance out, and the convention - positive is
+        // up - is the better guess.
+        const [positive, negative] = area[byArea];
+        const up = `${negative > 0.65 * (positive + negative) ? '-' : ''}${byArea}`;
+        console.info(`ThreeJsService: this model's vertical axis looks like ${up}, not y - standing it upright.`);
+        return up;
+    }
+    /** The rotation that brings the given model axis to point up. */
+    uprightRotation(up) {
+        const axis = new THREE.Vector3();
+        axis[up.replace('-', '')] = up.startsWith('-') ? -1 : 1;
+        return new THREE.Quaternion().setFromUnitVectors(axis, new THREE.Vector3(0, 1, 0));
+    }
+    /** Which of the model's axes is currently treated as up, whether chosen or worked out. */
+    getModelUp() {
+        return this.modelUp;
+    }
+    /**
+     * Turns the model so the given axis points up, at once.
+     *
+     * The model and its tags turn as one, so nothing stored has to be recomputed. The caller is
+     * expected to store the choice, or the next load goes back to working it out.
+     */
+    setModelUp(up) {
+        this.modelUp = up;
+        this.modelGroup?.quaternion.copy(this.uprightRotation(up));
+    }
     /**
      * Keeps the drawing buffer and camera matched to the canvas as it is resized.
      *
@@ -6690,6 +6903,7 @@ class ThreeJsService {
             this.camera.aspect = width / height;
             this.camera.updateProjectionMatrix();
             this.renderer.setSize(width, height);
+            this.updateMeasureLineResolution();
         });
         this.canvasResizeObserver.observe(container);
     }
@@ -6701,9 +6915,16 @@ class ThreeJsService {
      * applied until solveAlignmentFromPairs() succeeds.
      */
     startTagAlignment() {
+        // One pointer mode at a time, the same rule startMeasuring() applies the other way round.
+        if (this.measuring) {
+            this.cancelMeasuring();
+        }
         this.aligning = true;
         this.alignmentPairs = [];
         this.alignmentSource = null;
+        // While calibrating, the tags from elsewhere are all shown - including the ones off the model,
+        // which are exactly the ones a calibration is for.
+        this.refreshTagVisibility();
         if (this.renderer) {
             this.renderer.domElement.style.cursor = 'crosshair';
         }
@@ -6716,6 +6937,7 @@ class ThreeJsService {
         this.alignmentSource = null;
         this.pendingPreviewEvent = null;
         this.removePlacementPreview();
+        this.refreshTagVisibility();
         if (this.renderer) {
             this.renderer.domElement.style.cursor = 'default';
         }
@@ -6735,12 +6957,22 @@ class ThreeJsService {
      * first half of a pair, which is a click on a tag, not on the model.
      */
     isPreviewingPlacement() {
-        return this.placingTag || (this.aligning && !!this.alignmentSource);
+        return this.placingTag || this.measuring || (this.aligning && !!this.alignmentSource);
     }
     /** Whether a tag is currently registered for this element. */
     hasTag(elementId) {
         return this.tagSprites.has(elementId);
     }
+    /** How many tags are on show - the ones a person could actually click. */
+    getTagCount() {
+        let visible = 0;
+        this.tagSprites.forEach((sprite) => {
+            if (sprite.visible) {
+                visible += 1;
+            }
+        });
+        return visible;
+    }
     /**
      * Solves and applies the alignment collected so far, returning it so the caller can persist it.
      *
@@ -6748,35 +6980,105 @@ class ThreeJsService {
      * the walkthrough stays open for the person to pick a better third point.
      */
     solveAlignmentFromPairs() {
-        const alignment = solveThreeJsAlignment(this.alignmentPairs);
+        const up = new THREE.Vector3();
+        up[this.modelUp.replace('-', '')] = this.modelUp.startsWith('-') ? -1 : 1;
+        const alignment = solveThreeJsAlignment(this.alignmentPairs, up);
         if (!alignment) {
             return null;
         }
-        this.setTagAlignment(alignment);
+        // Out of calibrating mode first: applying the result re-decides which tags show, and from here
+        // on that is the ones on the model again, not all of them.
         this.aligning = false;
+        this.applyAlignmentKeepingOwnTags(alignment);
         this.pendingPreviewEvent = null;
         this.removePlacementPreview();
         this.renderer.domElement.style.cursor = 'default';
         this.alignmentProgress$.next({ pairs: this.alignmentPairs.length, awaiting: null });
         return alignment;
     }
+    /**
+     * Applies a new calibration while keeping every tag placed in this model exactly where it is.
+     *
+     * A calibration is worked out for the tags that came from elsewhere. The model's own tags were put
+     * where they are by someone clicking the model, so they must not follow it. Their stored
+     * coordinates are rewritten instead: into the shared space as the new calibration defines it.
+     * That is also what makes them comparable with other visits from here on - a tag placed before
+     * the model was calibrated was in the model's own coordinates, visible nowhere else.
+     *
+     * The rewritten tags are kept for the caller to store; see takeRebasedTags().
+     */
+    applyAlignmentKeepingOwnTags(alignment) {
+        const own = [...this.tagSprites.values()].filter((sprite) => this.isOwnedByVisit(sprite));
+        // Where each one is now, in the space the model sits in, and how its parent was turned.
+        const placed = own.map((sprite) => {
+            sprite.parent?.updateMatrix();
+            return {
+                sprite,
+                position: sprite.position.clone().applyMatrix4(sprite.parent?.matrix ?? new THREE.Matrix4()),
+                turn: sprite.parent?.quaternion.clone() ?? new THREE.Quaternion(),
+            };
+        });
+        this.setTagAlignment(alignment);
+        const inverse = this.tagGroup.matrix.clone().invert();
+        const unturn = this.tagGroup.quaternion.clone().invert();
+        this.rebasedTags = placed.map(({ sprite, position, turn }) => {
+            sprite.position.copy(position.applyMatrix4(inverse));
+            sprite.userData.frame = null;
+            this.parentTag(sprite);
+            this.scaleTagForModel(sprite);
+            const rotation = unturn.clone().multiply(turn);
+            return {
+                id: sprite.name,
+                position: { x: sprite.position.x, y: sprite.position.y, z: sprite.position.z },
+                rotateDirection: ({ x, y, z }) => {
+                    const turned = new THREE.Vector3(x, y, z).applyQuaternion(rotation);
+                    return { x: turned.x, y: turned.y, z: turned.z };
+                },
+            };
+        });
+        this.refreshTagVisibility();
+    }
+    /** Hands over the tags the last calibration rewrote, once, for them to be stored. */
+    takeRebasedTags() {
+        const rebased = this.rebasedTags;
+        this.rebasedTags = [];
+        return rebased;
+    }
+    /**
+     * Chooses the tag for the pair being matched by id, instead of by clicking it.
+     *
+     * Clicking a tag supposes it can be found. On a model that has never been calibrated the tags may
+     * sit far from it, or all on top of one another; a list has neither problem.
+     */
+    selectAlignmentTag(elementId) {
+        const sprite = this.tagSprites.get(elementId);
+        if (!this.aligning || this.alignmentSource || !sprite || !this.calibrationCandidates().includes(sprite)) {
+            return false;
+        }
+        this.setAlignmentSource(sprite);
+        return true;
+    }
+    setAlignmentSource(sprite) {
+        // The sprite's own position is the stored coordinate, untouched by any alignment already
+        // applied - that transform lives on the group, not on the sprite.
+        const stored = sprite.position;
+        this.alignmentSource = { x: stored.x, y: stored.y, z: stored.z };
+        this.alignmentSourceTagId = sprite.name;
+        this.alignmentProgress$.next({
+            pairs: this.alignmentPairs.length,
+            awaiting: 'point',
+            tagId: sprite.name,
+        });
+    }
     /** Handles a click while the alignment walkthrough is running. */
     handleAlignmentClick(event) {
         if (!this.alignmentSource) {
             // First half of a pair: which tag are we talking about?
-            const hit = this.raycaster.intersectObjects(this.tagGroup.children, false)[0];
+            const hit = this.raycaster.intersectObjects(this.calibrationCandidates(), false)[0];
             if (!hit) {
                 return;
             }
-            // The sprite's own position is the stored coordinate, untouched by any alignment already
-            // applied - that transform lives on the group, not on the sprite.
-            const stored = hit.object.position;
-            this.alignmentSource = { x: stored.x, y: stored.y, z: stored.z };
-            this.alignmentProgress$.next({
-                pairs: this.alignmentPairs.length,
-                awaiting: 'point',
-                tagId: hit.object.name,
-            });
+            this.setAlignmentSource(hit.object);
             return;
         }
         // Second half: where that tag actually belongs on the model.
@@ -6784,15 +7086,249 @@ class ThreeJsService {
         if (!target) {
             return;
         }
-        this.alignmentPairs.push({ source: this.alignmentSource, target });
+        this.alignmentPairs.push({ tagId: this.alignmentSourceTagId, source: this.alignmentSource, target });
         this.alignmentSource = null;
         // The ghost belongs to the click that just happened; the next half is a click on a tag.
         this.pendingPreviewEvent = null;
         this.removePlacementPreview();
         this.alignmentProgress$.next({
             pairs: this.alignmentPairs.length,
-            awaiting: this.alignmentPairs.length >= 3 ? null : 'tag',
+            // Done at three, or sooner when there are no more tags to match: fewer pairs still calibrate,
+            // only less completely.
+            awaiting: this.alignmentPairs.length >= 3 || this.calibrationCandidates().length === 0 ? null : 'tag',
+        });
+    }
+    /**
+     * Starts a measurement: every click on the model adds a point, and each pair of consecutive
+     * points is a measured segment.
+     *
+     * It ends through finishMeasuring() or cancelMeasuring() rather than on its own after two points,
+     * because a measurement may have several segments - the same as Matterport's, whose results are
+     * stored as a list of distances.
+     */
+    startMeasuring() {
+        // One pointer mode at a time: a click cannot be both a tag position and a measured point.
+        this.cancelTagPlacement();
+        if (this.aligning) {
+            this.cancelTagAlignment();
+        }
+        this.clearMeasurement();
+        if (this.measureGroup.parent !== this.tagGroup) {
+            this.tagGroup.add(this.measureGroup);
+        }
+        this.measuring = true;
+        if (this.renderer) {
+            this.renderer.domElement.style.cursor = 'crosshair';
+        }
+        this.measurementProgress$.next({ points: 0, distances: [] });
+    }
+    /**
+     * Abandons the measurement and removes what was drawn.
+     *
+     * Also what clears a finished measurement off the model once its form is saved or closed, which
+     * is why it only reports an abandonment when one was actually in progress.
+     */
+    cancelMeasuring() {
+        const wasMeasuring = this.measuring;
+        this.measuring = false;
+        this.pendingPreviewEvent = null;
+        this.removePlacementPreview();
+        this.clearMeasurement();
+        // Forgotten here so that a form opened later cannot pick up a measurement already dealt with.
+        this.lastMeasurement = null;
+        if (this.renderer) {
+            this.renderer.domElement.style.cursor = 'default';
+        }
+        if (wasMeasuring) {
+            this.measurementProgress$.next(null);
+        }
+    }
+    /**
+     * Ends the measurement and returns it, or null when there are not yet two points to measure
+     * between - in which case measuring simply carries on.
+     *
+     * The drawing stays on the model so it is still visible while the person names the measurement;
+     * cancelMeasuring() takes it away afterwards.
+     */
+    finishMeasuring() {
+        if (!this.measuring || this.measurePoints.length < 2) {
+            return null;
+        }
+        this.measuring = false;
+        this.pendingPreviewEvent = null;
+        this.removePlacementPreview();
+        this.updateMeasureRubberBand(null);
+        this.renderer.domElement.style.cursor = 'default';
+        this.lastMeasurement = {
+            points: this.measurePoints.map((point) => ({ x: point.x, y: point.y, z: point.z })),
+            distances: this.measureDistances(),
+            screenshot: this.captureMeasurementScreenshot(),
+        };
+        return this.lastMeasurement;
+    }
+    isMeasuring() {
+        return this.measuring;
+    }
+    /** The measurement finishMeasuring() last produced, for the form that saves it. */
+    getLastMeasurement() {
+        return this.lastMeasurement;
+    }
+    /** Metres between consecutive points. Tag space is in metres, so no conversion is involved. */
+    measureDistances() {
+        const distances = [];
+        for (let index = 1; index < this.measurePoints.length; index += 1) {
+            const distance = this.measurePoints[index - 1].distanceTo(this.measurePoints[index]);
+            // Two decimals, the precision Matterport's own measurements are stored with.
+            distances.push(Math.round(distance * 100) / 100);
+        }
+        return distances;
+    }
+    addMeasurePoint(point) {
+        const previous = this.measurePoints[this.measurePoints.length - 1];
+        this.measurePoints.push(point);
+        const marker = new THREE.Sprite(new THREE.SpriteMaterial({
+            map: this.createTagTexture(ThreeJsService.MEASURE_COLOR),
+            depthTest: false,
+            transparent: true,
+            // Sized against the viewport, not the model: measuring is done zoomed right in, where
+            // anything sized in metres would cover the very thing being measured.
+            sizeAttenuation: false,
+        }));
+        marker.scale.set(0.022, 0.022, 1);
+        marker.position.copy(point);
+        marker.renderOrder = 1001;
+        this.measureGroup.add(marker);
+        if (previous) {
+            this.measureGroup.add(this.createMeasureLine(previous, point));
+            const distance = Math.round(previous.distanceTo(point) * 100) / 100;
+            const label = new THREE.Sprite(new THREE.SpriteMaterial({
+                map: this.createMeasureLabelTexture(`${distance.toFixed(2)} m`),
+                depthTest: false,
+                transparent: true,
+                sizeAttenuation: false,
+            }));
+            label.scale.set(0.15, 0.05, 1);
+            label.position.copy(previous).add(point).multiplyScalar(0.5);
+            label.renderOrder = 1002;
+            this.measureGroup.add(label);
+        }
+        this.measurementProgress$.next({
+            points: this.measurePoints.length,
+            distances: this.measureDistances(),
+        });
+    }
+    /**
+     * A segment with a width in pixels.
+     *
+     * WebGL's own lines are one pixel wide whatever is asked for, which all but disappears over a
+     * photographic texture. This kind is drawn as screen-facing geometry, so the width holds.
+     */
+    createMeasureLine(from, to) {
+        const geometry = new LineGeometry();
+        geometry.setPositions([from.x, from.y, from.z, to.x, to.y, to.z]);
+        const material = new LineMaterial({
+            color: new THREE.Color(ThreeJsService.MEASURE_COLOR).getHex(),
+            linewidth: 3,
+            depthTest: false,
+            transparent: true,
+        });
+        const size = this.renderer.getSize(new THREE.Vector2());
+        material.resolution.set(size.x, size.y);
+        const line = new Line2(geometry, material);
+        line.renderOrder = 1000;
+        return line;
+    }
+    /** Line widths are in pixels, which the material can only honour if it knows the canvas size. */
+    updateMeasureLineResolution() {
+        if (!this.renderer) {
+            return;
+        }
+        const size = this.renderer.getSize(new THREE.Vector2());
+        this.measureGroup.children.forEach((child) => {
+            if (child.material?.resolution) {
+                child.material.resolution.set(size.x, size.y);
+            }
+        });
+    }
+    /** Stretches a segment from the last point to the pointer, or hides it when given null. */
+    updateMeasureRubberBand(target) {
+        const last = this.measurePoints[this.measurePoints.length - 1];
+        if (!this.measuring || !last || !target) {
+            if (this.measureRubberBand) {
+                this.measureRubberBand.visible = false;
+            }
+            return;
+        }
+        if (!this.measureRubberBand) {
+            this.measureRubberBand = this.createMeasureLine(last, target);
+            this.measureRubberBand.material.opacity = 0.6;
+            this.measureGroup.add(this.measureRubberBand);
+        }
+        this.measureRubberBand.geometry.setPositions([
+            last.x, last.y, last.z,
+            target.x, target.y, target.z,
+        ]);
+        this.measureRubberBand.visible = true;
+    }
+    createMeasureLabelTexture(text) {
+        const canvas = document.createElement('canvas');
+        canvas.width = 384;
+        canvas.height = 128;
+        const context = canvas.getContext('2d');
+        const radius = 28;
+        context.fillStyle = 'rgba(0, 0, 0, 0.78)';
+        context.beginPath();
+        context.moveTo(radius, 8);
+        context.arcTo(canvas.width - 8, 8, canvas.width - 8, canvas.height - 8, radius);
+        context.arcTo(canvas.width - 8, canvas.height - 8, 8, canvas.height - 8, radius);
+        context.arcTo(8, canvas.height - 8, 8, 8, radius);
+        context.arcTo(8, 8, canvas.width - 8, 8, radius);
+        context.closePath();
+        context.fill();
+        context.fillStyle = '#FFFFFF';
+        context.font = 'bold 60px sans-serif';
+        context.textAlign = 'center';
+        context.textBaseline = 'middle';
+        context.fillText(text, canvas.width / 2, canvas.height / 2 + 4);
+        return new THREE.CanvasTexture(canvas);
+    }
+    /** Removes everything drawn for a measurement and forgets its points. */
+    clearMeasurement() {
+        [...this.measureGroup.children].forEach((child) => {
+            this.measureGroup.remove(child);
+            child.geometry?.dispose?.();
+            child.material?.map?.dispose?.();
+            child.material?.dispose?.();
         });
+        this.measureRubberBand = undefined;
+        this.measurePoints = [];
+    }
+    /**
+     * A picture of the scene with the measurement on it, as Matterport attaches to its own.
+     *
+     * Tags are left out, as they are there: the picture is about the measurement. It is taken straight
+     * after a render because the drawing buffer is only guaranteed to hold the frame until the
+     * browser presents it, and scaled down since it is uploaded and shown as a thumbnail.
+     */
+    captureMeasurementScreenshot() {
+        const hidden = [];
+        this.tagSprites.forEach((sprite) => {
+            if (sprite.visible) {
+                sprite.visible = false;
+                hidden.push(sprite);
+            }
+        });
+        this.renderer.render(this.scene, this.camera);
+        const source = this.renderer.domElement;
+        const scale = Math.min(1, 800 / source.width, 600 / source.height);
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.max(1, Math.round(source.width * scale));
+        canvas.height = Math.max(1, Math.round(source.height * scale));
+        canvas.getContext('2d').drawImage(source, 0, 0, canvas.width, canvas.height);
+        hidden.forEach((sprite) => {
+            sprite.visible = true;
+        });
+        return canvas.toDataURL('image/jpeg', 0.85);
     }
     /** Arms tag placement: the next click on the model drops a tag instead of being ignored. */
     startTagPlacement(poiType = null) {
@@ -6823,6 +7359,7 @@ class ThreeJsService {
         const position = this.pickPointOnGpu(event);
         if (!position) {
             this.removePlacementPreview();
+            this.updateMeasureRubberBand(null);
             this.renderer.domElement.style.cursor = 'not-allowed';
             return;
         }
@@ -6839,6 +7376,7 @@ class ThreeJsService {
             this.scaleTagForModel(this.placementPreview);
         }
         this.placementPreview.position.copy(position);
+        this.updateMeasureRubberBand(position);
     }
     /**
      * The point under the cursor, read from the depth buffer instead of raycast, in tag space.
@@ -6940,9 +7478,250 @@ class ThreeJsService {
      * filter that happens to match nothing.
      */
     setVisibleTagTypes(types) {
+        this.visibleTagTypes = types;
+        this.tagSprites.forEach((sprite) => this.applyTagVisibility(sprite));
+    }
+    /** Says which capture is on screen, so the tags placed in it can be told from the rest. */
+    setCurrentCapture(captureID) {
+        this.currentCaptureID = captureID;
         this.tagSprites.forEach((sprite) => {
-            sprite.visible = types === null || types.includes(sprite.userData.poiType);
+            this.parentTag(sprite);
+            this.applyTagVisibility(sprite);
+        });
+    }
+    /** Every tag registered in the scene, shown or not. */
+    getTags() {
+        const candidates = new Set(this.calibrationCandidates());
+        return [...this.tagSprites.values()].map((sprite) => ({
+            id: sprite.name,
+            label: sprite.userData.label ?? null,
+            poiType: sprite.userData.poiType ?? null,
+            visible: sprite.visible,
+            calibratable: candidates.has(sprite),
+        }));
+    }
+    /**
+     * How far the tags from elsewhere sit from the model, measured in model radii. Null without both.
+     *
+     * Before a model is calibrated those tags are wherever their own coordinates put them, which for
+     * a model with a different origin can be a long way off - too far to find, let alone click.
+     */
+    getTagDistanceFromModel() {
+        if (!this.modelRoot || !this.modelWorldRadius) {
+            return null;
+        }
+        const centroid = new THREE.Vector3();
+        const candidates = this.calibrationCandidates();
+        candidates.forEach((sprite) => centroid.add(sprite.getWorldPosition(new THREE.Vector3())));
+        const count = candidates.length;
+        if (count === 0) {
+            return null;
+        }
+        // The model is centred on the world origin when it is placed.
+        return centroid.divideScalar(count).length() / this.modelWorldRadius;
+    }
+    /**
+     * Hangs a tag from the group its coordinates belong to: outside the calibration when they are in
+     * this model's own coordinates, under it otherwise.
+     */
+    parentTag(sprite) {
+        const parent = sprite.userData.frame === 'model' && this.isOwnedByVisit(sprite)
+            ? this.modelTagGroup
+            : this.tagGroup;
+        if (sprite.parent !== parent) {
+            parent.add(sprite);
+        }
+    }
+    /**
+     * The tags a calibration can be worked out from: those that came from somewhere else, whether or
+     * not they are on show - before calibrating, most of them will not be.
+     *
+     * Tags placed in this model are where they are because someone clicked there; matching them to
+     * "where they really are" would be circular. A tag in another model's own coordinates cannot be
+     * placed here at all. And a tag already used in this calibration cannot be used again - two
+     * pairs from one tag carry no more than one.
+     */
+    calibrationCandidates() {
+        const used = new Set(this.alignmentPairs.map((pair) => pair.tagId));
+        return [...this.tagSprites.values()].filter((sprite) => sprite.parent === this.tagGroup
+            && sprite.userData.frame !== 'model'
+            && !this.isOwnedByVisit(sprite)
+            && !used.has(sprite.name));
+    }
+    /** How many tags there are to calibrate with, not counting those already used. */
+    getCalibrationCandidateCount() {
+        return this.calibrationCandidates().length;
+    }
+    /**
+     * How many tags from elsewhere are not on this model, and so not shown on it.
+     *
+     * On a model that has not been calibrated, this is what suggests it should be: the tags are out
+     * there, just not where the model is.
+     */
+    getOffModelTagCount() {
+        return this.calibrationCandidates().filter((sprite) => !this.isOnModel(sprite)).length;
+    }
+    /** Whether the tag was placed in the visit on screen. */
+    isOwnedByVisit(sprite) {
+        return !!sprite.userData.originCaptureID
+            && sprite.userData.originCaptureID === this.currentCaptureID;
+    }
+    /**
+     * A tag shows when its type is not filtered out and it belongs on this model.
+     *
+     * One place decides, because the two used to set `visible` separately and whichever ran last
+     * undid the other.
+     */
+    applyTagVisibility(sprite) {
+        const typeAllowed = this.visibleTagTypes === null
+            || this.visibleTagTypes.includes(sprite.userData.poiType);
+        sprite.visible = typeAllowed && this.belongsOnThisModel(sprite);
+    }
+    /**
+     * Whether a tag has a place on this model.
+     *
+     * Every tag of the space is offered to every model - there is one set of tags, not one per model.
+     * What a model shows of it is the part that sits on the model.
+     */
+    belongsOnThisModel(sprite) {
+        // Placed here by a click on this very surface.
+        if (this.isOwnedByVisit(sprite)) {
+            return true;
+        }
+        // Placed in another model before that one was calibrated: its coordinates are that model's own
+        // and say nothing about where it would be in this one.
+        if (sprite.userData.frame === 'model') {
+            return false;
+        }
+        // Calibrating is matching tags to where they belong, so they all have to be on offer.
+        if (this.aligning) {
+            return true;
+        }
+        return this.isOnModel(sprite);
+    }
+    /** Whether a tag, drawn where its coordinates and the calibration put it, sits on the model. */
+    isOnModel(sprite) {
+        if (!this.surfaceCells) {
+            // No model to be on yet.
+            return false;
+        }
+        const parent = sprite.parent ?? this.tagGroup;
+        parent.updateMatrix();
+        // The grid is in the model's own units; the calibration's scale is how many of those a metre is.
+        const reach = ThreeJsService.ON_MODEL_METRES * (parent.scale.x || 1);
+        return this.isNearSurface(sprite.position.clone().applyMatrix4(parent.matrix), reach);
+    }
+    /** Re-decides every tag's visibility: the model, the calibration or the mode changed. */
+    refreshTagVisibility() {
+        this.tagSprites.forEach((sprite) => this.applyTagVisibility(sprite));
+    }
+    surfaceKey(x, y, z) {
+        const span = ThreeJsService.SURFACE_GRID_SPAN;
+        const pad = ThreeJsService.SURFACE_GRID_PAD;
+        const [i, j, k] = [x + pad, y + pad, z + pad];
+        if (i < 0 || j < 0 || k < 0 || i >= span || j >= span || k >= span) {
+            return -1;
+        }
+        return i + span * (j + span * k);
+    }
+    /**
+     * Lays the grid over the model's surface.
+     *
+     * Runs once per model, in one pass over its triangles. A triangle smaller than a cell is marked
+     * by its centre, which is every triangle of a scanned model; a larger one - the two triangles of
+     * a drawn wall - is sampled across its face, or the middle of the wall would read as empty.
+     */
+    buildSurfaceGrid(object, box) {
+        const size = box.getSize(new THREE.Vector3());
+        const longest = Math.max(size.x, size.y, size.z);
+        if (!(longest > 0)) {
+            this.surfaceCells = null;
+            return;
+        }
+        // A quarter of a metre where the model is in metres; coarser on a very large one, so the grid
+        // stays addressable and its memory bounded.
+        const cell = Math.max(0.25, longest / 384);
+        const origin = box.min.clone();
+        const cells = new Set();
+        const mark = (point) => {
+            const key = this.surfaceKey(Math.floor((point.x - origin.x) / cell), Math.floor((point.y - origin.y) / cell), Math.floor((point.z - origin.z) / cell));
+            if (key >= 0) {
+                cells.add(key);
+            }
+        };
+        let triangleCount = 0;
+        object.updateMatrixWorld(true);
+        object.traverse((child) => {
+            const position = child.isMesh && child.geometry?.attributes?.position;
+            if (position) {
+                triangleCount += (child.geometry.index ? child.geometry.index.count : position.count) / 3;
+            }
+        });
+        // Past a few million triangles they are far smaller than a cell, and every cell is hit many
+        // times over; a sample marks the same cells.
+        const stride = Math.max(1, Math.ceil(triangleCount / 3000000));
+        const a = new THREE.Vector3();
+        const b = new THREE.Vector3();
+        const c = new THREE.Vector3();
+        const point = new THREE.Vector3();
+        object.traverse((child) => {
+            const position = child.isMesh && child.geometry?.attributes?.position;
+            if (!position) {
+                return;
+            }
+            const index = child.geometry.index;
+            const count = (index ? index.count : position.count) / 3;
+            for (let triangle = 0; triangle < count; triangle += stride) {
+                const offset = triangle * 3;
+                a.fromBufferAttribute(position, index ? index.getX(offset) : offset).applyMatrix4(child.matrixWorld);
+                b.fromBufferAttribute(position, index ? index.getX(offset + 1) : offset + 1).applyMatrix4(child.matrixWorld);
+                c.fromBufferAttribute(position, index ? index.getX(offset + 2) : offset + 2).applyMatrix4(child.matrixWorld);
+                const edge = Math.max(a.distanceTo(b), b.distanceTo(c), c.distanceTo(a));
+                if (edge <= cell) {
+                    mark(point.copy(a).add(b).add(c).multiplyScalar(1 / 3));
+                    continue;
+                }
+                // Half-cell steps across the face. Capped, so one enormous triangle cannot stall the load;
+                // the reach a tag is tested with spans several cells and bridges what the cap leaves.
+                const steps = Math.min(96, Math.ceil((2 * edge) / cell));
+                for (let i = 0; i <= steps; i += 1) {
+                    for (let j = 0; j <= steps - i; j += 1) {
+                        point.copy(a)
+                            .addScaledVector(b.clone().sub(a), i / steps)
+                            .addScaledVector(c.clone().sub(a), j / steps);
+                        mark(point);
+                    }
+                }
+            }
         });
+        this.surfaceCells = cells;
+        this.surfaceOrigin.copy(origin);
+        this.surfaceCellSize = cell;
+    }
+    /** Whether some part of the model's surface lies within `reach` of a point, in model units. */
+    isNearSurface(point, reach) {
+        const cell = this.surfaceCellSize;
+        const origin = this.surfaceOrigin;
+        const x = (point.x - origin.x) / cell;
+        const y = (point.y - origin.y) / cell;
+        const z = (point.z - origin.z) / cell;
+        // In cells. Capped: beyond this the calibration's scale makes a metre so many cells that the
+        // search would dwarf the model, and a tag that far off is not on it by any reading.
+        const span = Math.min(16, Math.ceil(reach / cell));
+        // A cell is "within reach" when its centre is, give or take the half-diagonal of the cell.
+        const limit = (reach / cell + 0.87) ** 2;
+        const [cx, cy, cz] = [Math.floor(x), Math.floor(y), Math.floor(z)];
+        for (let k = cz - span; k <= cz + span; k += 1) {
+            for (let j = cy - span; j <= cy + span; j += 1) {
+                for (let i = cx - span; i <= cx + span; i += 1) {
+                    const distance = (i + 0.5 - x) ** 2 + (j + 0.5 - y) ** 2 + (k + 0.5 - z) ** 2;
+                    if (distance <= limit && this.surfaceCells.has(this.surfaceKey(i, j, k))) {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
     }
     /**
      * Moves the camera to look at a tag, mirroring Matterport's goToTag.
@@ -7073,8 +7852,11 @@ class ThreeJsService {
         this.tagGroup.position.set(translation?.x ?? 0, translation?.y ?? 0, translation?.z ?? 0);
         this.tagGroup.rotation.set(rotation?.x ?? 0, rotation?.y ?? 0, rotation?.z ?? 0);
         this.tagGroup.scale.setScalar(scale ?? 1);
-        // Tag size is derived from the world scale it inherits, which this call just changed.
+        this.tagGroup.updateMatrix();
+        // Tag size is derived from the world scale it inherits, which this call just changed - and so
+        // is which tags land on the model.
         this.tagSprites.forEach((sprite) => this.scaleTagForModel(sprite));
+        this.refreshTagVisibility();
     }
     /**
      * Adds a tag, or moves/restyles the one already registered for this element.
@@ -7089,6 +7871,10 @@ class ThreeJsService {
             existing.position.set(tag.position.x, tag.position.y, tag.position.z);
             existing.userData.poiType = tag.poiType ?? existing.userData.poiType;
             existing.userData.label = tag.label ?? existing.userData.label;
+            existing.userData.originCaptureID = tag.originCaptureID ?? existing.userData.originCaptureID;
+            existing.userData.frame = tag.frame ?? existing.userData.frame;
+            this.parentTag(existing);
+            this.applyTagVisibility(existing);
             return;
         }
         const sprite = new THREE.Sprite(new THREE.SpriteMaterial({
@@ -7101,10 +7887,13 @@ class ThreeJsService {
         sprite.name = tag.id;
         sprite.userData.poiType = tag.poiType ?? null;
         sprite.userData.label = tag.label ?? null;
+        sprite.userData.originCaptureID = tag.originCaptureID ?? null;
+        sprite.userData.frame = tag.frame ?? null;
         sprite.position.set(tag.position.x, tag.position.y, tag.position.z);
         sprite.renderOrder = 999;
+        this.parentTag(sprite);
         this.scaleTagForModel(sprite);
-        this.tagGroup.add(sprite);
+        this.applyTagVisibility(sprite);
         this.tagSprites.set(tag.id, sprite);
         if (tag.iconUrl) {
             this.applyTagIcon(sprite, tag.iconUrl);
@@ -7116,7 +7905,7 @@ class ThreeJsService {
         if (!sprite) {
             return;
         }
-        this.tagGroup.remove(sprite);
+        sprite.parent?.remove(sprite);
         sprite.material.map?.dispose();
         sprite.material.dispose();
         this.tagSprites.delete(elementId);
@@ -7157,7 +7946,8 @@ class ThreeJsService {
      * size on screen whatever the model's units are.
      */
     scaleTagForModel(sprite) {
-        const worldScale = this.tagGroup.getWorldScale(new THREE.Vector3()).x || 1;
+        // Its own parent's scale: tags in the model's coordinates do not inherit the calibration's.
+        const worldScale = (sprite.parent ?? this.tagGroup).getWorldScale(new THREE.Vector3()).x || 1;
         const size = 0.4 / worldScale;
         sprite.scale.set(size, size, 1);
     }
@@ -7216,7 +8006,7 @@ class ThreeJsService {
             this.removePlacementPreview();
             // Tags first: they draw on top of the model, so they have to answer the pointer first too.
             const hoveredTag = this.raycaster
-                .intersectObjects(this.tagGroup.children, false)
+                .intersectObjects([...this.tagSprites.values()], false)
                 .find((hit) => hit.object.visible)?.object;
             if (hoveredTag) {
                 this.renderer.domElement.style.cursor = 'pointer';
@@ -7255,6 +8045,15 @@ class ThreeJsService {
                 this.handleAlignmentClick(event);
                 return;
             }
+            // Measuring takes every click as a point, the same way placement takes it as a position.
+            if (this.measuring) {
+                const placement = this.pickPlacementOnModel(event);
+                if (placement) {
+                    const { x, y, z } = placement.position;
+                    this.addMeasurePoint(new THREE.Vector3(x, y, z));
+                }
+                return;
+            }
             // Placement wins over everything: while armed, a click means "put it here", not "open that".
             if (this.placingTag) {
                 const placement = this.pickPlacementOnModel(event);
@@ -7270,7 +8069,7 @@ class ThreeJsService {
             }
             this.raycaster.setFromCamera(this.mouse, this.camera);
             // Same precedence as hover: a tag drawn over the model claims the click.
-            const tagHits = this.raycaster.intersectObjects(this.tagGroup.children, false)
+            const tagHits = this.raycaster.intersectObjects([...this.tagSprites.values()], false)
                 .filter((hit) => hit.object.visible);
             if (tagHits.length > 0) {
                 const tag = tagHits[0].object;
@@ -7305,6 +8104,10 @@ class ThreeJsService {
             this.cancelTagPlacement();
             return;
         }
+        if (this.measuring) {
+            this.cancelMeasuring();
+            return;
+        }
         if (this.aligning) {
             this.cancelTagAlignment();
         }
@@ -7332,6 +8135,8 @@ class ThreeJsService {
         }
         this.discardCurrentLoad();
         this.clearTags();
+        this.measuring = false;
+        this.clearMeasurement();
         if (this.renderer) {
             this.renderer.dispose();
         }
@@ -7349,16 +8154,481 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
-/* eslint-disable no-await-in-loop */
-/* eslint-disable camelcase */
-/* eslint-disable no-underscore-dangle */
-/* eslint-disable class-methods-use-this */
-class ViewerService {
-    sdkKey;
-    config;
-    poiService;
+class CaptureService {
+    API; //AWS
+    constructor(apiInjected) {
+        this.API = apiInjected;
+    }
+    async getCapturesBySpace(spaceID) {
+        return this.API.CapturesBySpace(spaceID).then((cap) => cap.items);
+    }
+    async getCapture(captureID) {
+        return this.API.__proto__.GetCapture(captureID);
+    }
+    async deleteCapture(captureID) {
+        return this.API.__proto__.DeleteCapture({ id: captureID });
+    }
+    async updateCapture(capture) {
+        return this.API.__proto__.UpdateCapture(capture);
+    }
+    async createCapture(capture) {
+        return this.API.__proto__.CreateCapture(capture);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaptureService, deps: [{ token: 'currentAPIService' }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaptureService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaptureService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['currentAPIService']
+                }] }] });
+
+/* eslint-disable class-methods-use-this */
+class ZoneService {
+    userService;
+    API; //AWS APIService
+    constructor(apiInjected, userService) {
+        this.userService = userService;
+        this.API = apiInjected;
+    }
+    async getZonesBySpace(spaceID) {
+        const list = [];
+        if (this.API.__proto__.hasOwnProperty('ZonesBySpace')) {
+            // Paginated: without a nextToken loop, only the first page (100 zones) was returned and
+            // the sweeps of the other zones silently disappeared.
+            let nextToken = null;
+            do {
+                const zones = await this.API.__proto__.ZonesBySpace(spaceID, null, null, 1000, nextToken);
+                for (const zone of zones?.items || []) {
+                    const zoneObject = { ...zone };
+                    zoneObject.virtual = this.zoneIsVirtual(zone);
+                    list.push(zoneObject);
+                }
+                nextToken = zones?.nextToken ?? null;
+            } while (nextToken);
+            return list;
+        }
+        else {
+            throw new Error('ZonesBySpace not implemented');
+        }
+    }
+    async getZonesBySpaceForUser(spaceID) {
+        const missionForLocation = this.userService.currentMission(spaceID);
+        const list = [];
+        if (missionForLocation && missionForLocation.zoneID) {
+            const allowedZone = await this.getZone(missionForLocation.zoneID);
+            allowedZone.virtual = this.zoneIsVirtual(allowedZone);
+            if (!allowedZone.parent) {
+                // the whole building is authorized
+                return this.getZonesBySpace(spaceID);
+            }
+            list.push(allowedZone);
+            // allow all children zones of an allowed parent
+            const children = (await this.API.__proto__.ZonesByZone(allowedZone.id))
+                .items;
+            if (children.length > 0) {
+                for (const child of children) {
+                    const childZone = { ...child };
+                    childZone.virtual = this.zoneIsVirtual(child);
+                    list.push(childZone);
+                }
+            }
+            // allow the parent Floor of the allowed zone
+            if (allowedZone.parent.layer &&
+                allowedZone.parent.layer.name === 'FLOOR') {
+                list.push(allowedZone.parent);
+            }
+        }
+        else {
+            return this.getZonesBySpace(spaceID);
+        }
+        return list;
+    }
+    async filterZonesIDsForUser(zones) {
+        const { spaceID } = zones[0];
+        const zoneIDs = new Set(zones.map((zone) => zone.id));
+        const allowedZones = await this.getZonesBySpaceForUser(spaceID);
+        const filteredZones = allowedZones.filter((zone) => zoneIDs.has(zone.id));
+        return filteredZones;
+    }
+    async deleteZone(zoneID) {
+        return this.API.__proto__.DeleteZone({ id: zoneID });
+    }
+    async getZonesForSweepForSpace(sweepID, spaceID) {
+        const zonesSpace = (await this.API.__proto__.ZonesBySpace(spaceID)).items;
+        return zonesSpace.filter((zone) => zone.sweepIDs && zone.sweepIDs.includes(sweepID));
+    }
+    // // eslint-disable-next-line class-methods-use-this
+    sortZonesFromChildToParent(zonesToSort) {
+        // get default
+        const defaultZone = zonesToSort.find((z) => !z.parentID);
+        if (defaultZone) {
+            const indexOf = zonesToSort.indexOf(defaultZone);
+            zonesToSort.splice(indexOf, 1);
+        }
+        const zones = zonesToSort.sort((a, b) => {
+            if (a.parentID === b.id) {
+                return -1;
+            }
+            return 0;
+        });
+        // so far by number of navigation points in them
+        // const zones = zonesToSort.sort(
+        //     (a, b) => a.navigations.items.length - b.navigations.items.length,
+        // );
+        if (defaultZone) {
+            zones.push(defaultZone);
+        }
+        return zones;
+    }
+    async getZonesForObject(object) {
+        if (object.pois.items && object.pois.items.length > 0) {
+            const [poi] = object.pois.items;
+            if (poi.matterportSweepID) {
+                const zones = await this.getZonesForSweepForSpace(poi.matterportSweepID, object.spaceID);
+                return zones;
+            }
+        }
+        return null;
+    }
+    async createVirtualZone(zoneInput) {
+        zoneInput.sweepIDs = [];
+        const zone = await this.API.__proto__.CreateZone(zoneInput);
+        console.log('virtual zone created', zone);
+        return zone;
+    }
+    zoneIsVirtual(zone) {
+        if (!zone.sweepIDs) {
+            return true;
+        }
+        if ((zone.tags && zone.tags.includes('virtual')) ||
+            zone.sweepIDs.length === 0) {
+            return true;
+        }
+        return false;
+    }
+    async getModel3DForZone(zoneID) {
+        const zone = await this.API.__proto__.GetZone(zoneID);
+        if (zone.nodeIDs) {
+            const node = await this.API.__proto__.GetNode(zone.nodeIDs[0]);
+            return node.model3D;
+        }
+        return null;
+    }
+    async getZone(zoneID) {
+        return this.API.__proto__.GetZone(zoneID);
+    }
+    async getDefaultZoneForSpace(spaceID) {
+        return this.getZonesBySpace(spaceID).then(async (zones) => {
+            const zonesBuilding = zones.filter((zone) => zone.layer && zone.layer.name === 'BUILDING');
+            if (zonesBuilding.length === 1) {
+                return zonesBuilding[0];
+            }
+            const parentZone = zones.find((zone) => !zone.parentID);
+            return parentZone;
+        });
+    }
+    async create(input) {
+        return this.API.__proto__.CreateZone(input);
+    }
+    // async getSortedZonesForSweepForUser(
+    //     sweep: string,
+    //     spaceID: string,
+    // ): Promise<Zone[]> {
+    //     if (!spaceID) {
+    //         return [];
+    //     }
+    //     const zones = await this.getZonesForSweepForSpace(sweep, spaceID);
+    //     if (zones.length === 0) {
+    //         return [];
+    //     }
+    //     const filteredZones = await this.filterZonesIDsForUser(zones);
+    //     if (filteredZones.length > 0) {
+    //         let zonesSorted = this.sortZonesFromChildToParent(filteredZones);
+    //         zonesSorted = zonesSorted.filter((zone) => zone !== undefined);
+    //         return zonesSorted;
+    //     }
+    //     return [];
+    // }
+    async updateZone(input) {
+        return this.API.__proto__.UpdateZone(input);
+    }
+    async getZonesForNodeForSpace(nodeID, spaceID) {
+        return this.API.__proto__.ZonesBySpace(spaceID).then(async (zones) => {
+            const filteredZones = zones.items.filter((zone) => zone.nodeIDs && zone.nodeIDs.includes(nodeID));
+            return filteredZones;
+        });
+    }
+    /**
+     * Gets the Zone (layer FLOOR) for a matterport sweep ID in a given Space
+     * @param sweepID
+     * @param spaceID
+     * @returns Zone
+     */
+    async getFloorZoneForSweepInSpace(sweepID, spaceID) {
+        const zones = await this.getZonesForSweepForSpace(sweepID, spaceID);
+        const floors = zones.filter((zone) => zone.layer && zone.layer.name.includes('FLOOR'));
+        return floors.length > 0 ? floors[0] : null;
+    }
+    /**
+     * Get zones with audio track for entire space
+     * @param spaceID
+     * @returns  Promise<Zone[]>
+     */
+    async getAudioZonesForSpace(spaceID) {
+        const allZones = await this.getZonesBySpace(spaceID);
+        return allZones.filter((zone) => zone.audioID);
+    }
+    /**
+     * Get audio zones for user (within allowed zones)
+     * @param spaceID
+     * @returns  Promise<Zone[]>
+     */
+    async getAudioZonesForUserForSpace(spaceID) {
+        const userZones = await this.getZonesBySpaceForUser(spaceID);
+        return userZones.filter((zone) => zone.audioID);
+    }
+    /**
+     * Get Zones by Parent Zone ID
+     * @param parentZoneID string
+     * @returns Promise<Zone[]>
+     */
+    async getZonesByParentZone(parentZoneID) {
+        return this.API.__proto__
+            .ZonesByZone(parentZoneID)
+            .then((res) => res.items);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneService, deps: [{ token: 'currentAPIService' }, { token: BaseUserService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['currentAPIService']
+                }] }, { type: BaseUserService }] });
+
+class NavigationService {
+    userService;
+    zoneService;
+    API;
+    constructor(apiInjected, userService, zoneService) {
+        this.userService = userService;
+        this.zoneService = zoneService;
+        this.API = apiInjected;
+    }
+    async createNavigation(navInput) {
+        return this.API.__proto__.CreateNavigation(navInput);
+    }
+    async deleteNavigation(id) {
+        return this.API.__proto__.DeleteNavigation({ id });
+    }
+    async getNavigationsForNode(nodeID) {
+        const limit = 200;
+        let navigationsTokenDict = { navigations: [], nextToken: null };
+        do {
+            navigationsTokenDict =
+                await this.mergeAPIResponseWithNextTokenWithLimit(nodeID, limit, navigationsTokenDict);
+        } while (navigationsTokenDict.nextToken);
+        return navigationsTokenDict.navigations;
+    }
+    async mergeAPIResponseWithNextTokenWithLimit(nodeID, limit, navigationsTokenDict) {
+        return this.API.__proto__.NavigationsByNode(nodeID, null, null, limit, navigationsTokenDict.nextToken).then((response) => {
+            const navigations = response.items;
+            const navObject = {
+                navigations: [...navigationsTokenDict.navigations, ...navigations],
+                nextToken: response.nextToken,
+            };
+            return navObject;
+        });
+    }
+    async getNavigation(id) {
+        return this.API.__proto__.GetNavigation(id);
+    }
+    async getSweepsIDsForSpace(spaceID) {
+        const zones = await this.zoneService.getZonesBySpace(spaceID);
+        const zonesWithSweeps = zones.filter((zone) => zone.sweepIDs && zone.sweepIDs.length > 0);
+        const allSweeps = zonesWithSweeps.flatMap((zone) => zone.sweepIDs);
+        return [...new Set(allSweeps)];
+    }
+    async getAllowedSweepsIDsForUserInSpace(spaceID) {
+        const missionsForSpace = this.userService.currentMissions.filter((mis) => mis.spaceID === spaceID);
+        console.log(missionsForSpace);
+        let navIDs = [];
+        if (this.userService.userHasAccessToAllZonesInSpace(spaceID)) {
+            console.log(1);
+            return this.getSweepsIDsForSpace(spaceID);
+        }
+        await Promise.all(missionsForSpace.map(async (mission) => {
+            navIDs = [...navIDs, ...mission.zone.sweepIDs];
+        }));
+        console.log('final navids = ', navIDs);
+        return navIDs;
+    }
+    async getForbiddenNavigationIDsForUserInSpace(spaceID) {
+        const allowed = await this.getAllowedSweepsIDsForUserInSpace(spaceID);
+        const allNavs = await this.getSweepsIDsForSpace(spaceID);
+        const difference = allNavs.filter((x) => !allowed.includes(x));
+        return difference.length > 0 ? difference : null;
+    }
+    async getNavigationsForMatterportIDForSpace(matterportID, spaceID) {
+        return this.API.__proto__.NavigationsByMatterportIDBySpace(matterportID, {
+            eq: spaceID,
+        }).then((navs) => navs.items);
+    }
+    async getNavigationsForZone(zone) {
+        const responseNavs = [];
+        await Promise.all(zone.sweepIDs.map(async (sweepID) => {
+            const navs = await this.getNavigationsForMatterportIDForSpace(sweepID, zone.spaceID);
+            if (navs.length > 0) {
+                responseNavs.push(navs[0]);
+            }
+        }));
+        return responseNavs;
+    }
+    async updateNavigation(navInput) {
+        return this.API.__proto__.UpdateNavigation(navInput);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationService, deps: [{ token: 'currentAPIService' }, { token: BaseUserService }, { token: ZoneService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['currentAPIService']
+                }] }, { type: BaseUserService }, { type: ZoneService }] });
+
+/**
+ * Finds the Matterport sweep a point in a space sits closest to.
+ *
+ * A tag placed in Matterport is recorded with the sweep it was placed from, and much of the
+ * Matterport side keys on that: which floor plan draws the tag, which zone it belongs to, which
+ * floor it shows on. A tag placed in the Three.js viewer has no sweep, so it was missing from all
+ * of them. Resolving the nearest one at creation - what the tag copy tool already does for copied
+ * tags - lets every one of those readers work unchanged instead of each growing its own exception.
+ */
+class SweepLocatorService {
+    captureService;
+    navigationService;
+    /**
+     * Sweeps sit a few metres apart, so a point on a scanned surface always has one nearby. Anything
+     * further means the coordinates are not in the Matterport capture's space - a model that was
+     * never calibrated - and a sweep picked from that far would file the tag under an arbitrary
+     * floor. Leaving it without one is the honest answer there.
+     */
+    static MAX_DISTANCE_METRES = 10;
+    /** Sweep positions per space. They only change on import, so one load per session is enough. */
+    sweepsBySpace = new Map();
+    constructor(captureService, navigationService) {
+        this.captureService = captureService;
+        this.navigationService = navigationService;
+    }
+    /**
+     * The sweep nearest to a point, or null when the space has none within reach.
+     *
+     * Never throws: this only refines where a tag is filed, and a tag that cannot be filed is still
+     * better saved without a sweep than not saved at all.
+     */
+    async findNearestSweep(point, spaceID) {
+        if (!point || !spaceID) {
+            return null;
+        }
+        try {
+            return this.nearestSweep(point, await this.loadSweeps(spaceID));
+        }
+        catch (error) {
+            console.warn(`SweepLocatorService: could not resolve a sweep in space ${spaceID}`, error);
+            return null;
+        }
+    }
+    /** The sweep closest to a point, or null when none is within reach. */
+    nearestSweep(point, sweeps) {
+        let nearest = null;
+        let nearestDistance = SweepLocatorService.MAX_DISTANCE_METRES;
+        for (const sweep of sweeps) {
+            const distance = Math.hypot(sweep.x - point.x, sweep.y - point.y, sweep.z - point.z);
+            if (distance <= nearestDistance) {
+                nearestDistance = distance;
+                nearest = sweep.sweepID;
+            }
+        }
+        return nearest;
+    }
+    loadSweeps(spaceID) {
+        let sweeps = this.sweepsBySpace.get(spaceID);
+        if (!sweeps) {
+            sweeps = this.fetchSweeps(spaceID);
+            this.sweepsBySpace.set(spaceID, sweeps);
+            // A failed load must not be remembered as "this space has no sweeps".
+            sweeps.catch(() => this.sweepsBySpace.delete(spaceID));
+        }
+        return sweeps;
+    }
+    async fetchSweeps(spaceID) {
+        const captures = await this.captureService.getCapturesBySpace(spaceID);
+        // A 3D model is imported with one navigation entry of its own, a placeholder sitting at the
+        // origin. It is not a sweep, and counting it would make it the "nearest" for any tag close to
+        // the origin.
+        const nodeIDs = (captures ?? [])
+            .filter((capture) => capture.viewer !== CaptureViewer.THREEJS)
+            .reduce((all, capture) => all.concat(capture.nodes?.items ?? []), [])
+            .map((node) => node?.id)
+            .filter((id) => !!id);
+        const navigations = (await Promise.all(nodeIDs.map((id) => this.navigationService.getNavigationsForNode(id)))).reduce((all, list) => all.concat(list), []);
+        const sweeps = [];
+        for (const navigation of navigations) {
+            if (!navigation?.matterportSweepID || !navigation.position) {
+                continue;
+            }
+            try {
+                const position = JSON.parse(navigation.position);
+                if ([position?.x, position?.y, position?.z].every((value) => typeof value === 'number')) {
+                    sweeps.push({
+                        sweepID: navigation.matterportSweepID,
+                        x: position.x,
+                        y: position.y,
+                        z: position.z,
+                    });
+                }
+            }
+            catch {
+                // One unreadable position should not cost the space all of its sweeps.
+            }
+        }
+        return sweeps;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SweepLocatorService, deps: [{ token: CaptureService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SweepLocatorService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SweepLocatorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: CaptureService }, { type: NavigationService }] });
+
+/* eslint-disable no-await-in-loop */
+/* eslint-disable camelcase */
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable class-methods-use-this */
+class ViewerService {
+    sdkKey;
+    config;
+    poiService;
     matterportService;
     threeJsService;
+    sweepLocator;
     viewerMode = 'Matterport';
     currentModel3D;
     tourUrl;
@@ -7374,6 +8644,20 @@ class ViewerService {
      * lists that feed tags are exactly that.
      */
     currentSpaceID = null;
+    /**
+     * The Three.js capture on screen, or null in Matterport.
+     *
+     * A space can hold several 3D models. A tag placed in one is recorded with it, so that model
+     * keeps showing the tag whatever selection of tags it is otherwise restricted to.
+     */
+    currentCaptureID = null;
+    /**
+     * Whether the 3D model on screen has been calibrated against the tags' shared space.
+     *
+     * Calibrating is what says the model and that space overlap. Until then a tag placed in the model
+     * is in the model's own coordinates: it belongs to no Matterport sweep and to no other visit.
+     */
+    threeJsCalibrated = false;
     sweepToMove;
     rotationToMove;
     goToTriggered = new Subject();
@@ -7402,12 +8686,13 @@ class ViewerService {
         },
     };
     isObjectLoaded = false;
-    constructor(sdkKey, config, poiService, matterportService, threeJsService) {
+    constructor(sdkKey, config, poiService, matterportService, threeJsService, sweepLocator) {
         this.sdkKey = sdkKey;
         this.config = config;
         this.poiService = poiService;
         this.matterportService = matterportService;
         this.threeJsService = threeJsService;
+        this.sweepLocator = sweepLocator;
         this.setMode('Matterport');
     }
     /*-----------------------------------------------------------------------------------------------------------------
@@ -7613,14 +8898,77 @@ class ViewerService {
         if (![position?.x, position?.y, position?.z].every((value) => typeof value === 'number')) {
             return;
         }
+        const origin = getThreeJsPoiOrigin(poi);
         this.threeJsService.upsertTag({
             id: object.id,
             position,
             poiType: poi.type,
             label: object.name ?? object.title ?? null,
             iconUrl: await this.resolveTagIconUrl(poi),
+            originCaptureID: origin?.captureID ?? null,
+            frame: origin?.frame ?? null,
         });
     }
+    /**
+     * Stores the tags the last calibration had to rewrite, and returns how many it could not.
+     *
+     * Calibrating keeps the tags placed in this model where they are by changing their coordinates
+     * rather than their place (see ThreeJsService.applyAlignmentKeepingOwnTags). The scene already
+     * shows the result; this writes it down. Call it once the calibration itself is stored - with the
+     * old calibration still on record, the old coordinates are the ones that match it.
+     */
+    async persistRebasedThreeJsTags() {
+        const rebased = this.threeJsService.takeRebasedTags();
+        let failed = 0;
+        await Promise.all(rebased.map(async (tag) => {
+            try {
+                const poi = await this.poiService.getPoiByElementId(tag.id);
+                if (!poi?.id) {
+                    return;
+                }
+                let metadata = {};
+                try {
+                    metadata = (poi.metadata ? JSON.parse(poi.metadata) : {}) ?? {};
+                }
+                catch {
+                    metadata = {};
+                }
+                // In the shared space from here on, so no longer marked as being in the model's own.
+                delete metadata.frame;
+                if (metadata.normal) {
+                    metadata.normal = tag.rotateDirection(metadata.normal);
+                }
+                if (this.currentCaptureID) {
+                    metadata.captureID = this.currentCaptureID;
+                }
+                await this.poiService.updatePoi({
+                    id: poi.id,
+                    coordinate: JSON.stringify(tag.position),
+                    metadata: JSON.stringify(metadata),
+                    // Its place in the tour may have changed with its coordinates - or it may have one for
+                    // the first time, now that the model is calibrated.
+                    matterportSweepID: await this.findNearestSweepForThreeJs(tag.position),
+                });
+            }
+            catch (error) {
+                failed += 1;
+                console.warn(`ViewerService: could not store the new coordinates of tag ${tag.id}`, error);
+            }
+        }));
+        return { stored: rebased.length - failed, failed };
+    }
+    /** How many tags the calibration walkthrough could still use: the ones from elsewhere. */
+    getThreeJsCalibrationCandidateCount() {
+        return this.checkMode('threejs') ? this.threeJsService.getCalibrationCandidateCount() : 0;
+    }
+    /** How many tags from elsewhere are not on the 3D model, and so are not shown on it. */
+    getThreeJsOffModelTagCount() {
+        return this.checkMode('threejs') ? this.threeJsService.getOffModelTagCount() : 0;
+    }
+    /** The tags registered in the Three.js scene, shown or not. */
+    getThreeJsTags() {
+        return this.checkMode('threejs') ? this.threeJsService.getTags() : [];
+    }
     /**
      * The image to draw a tag with, mirroring what Matterport shows for the same POI.
      *
@@ -7713,6 +9061,7 @@ class ViewerService {
         if (!alignment) {
             return null;
         }
+        this.threeJsCalibrated = true;
         // Merged into whatever the capture already stores, so an existing camera placement survives.
         let stored = {};
         try {
@@ -7767,7 +9116,11 @@ class ViewerService {
         if (!this.checkMode('threejs')) {
             return;
         }
-        this.threeJsService.setTagAlignment(parseThreeJsPlacement(metadata)?.alignment ?? null);
+        const alignment = parseThreeJsPlacement(metadata)?.alignment ?? null;
+        this.threeJsCalibrated = !!alignment;
+        // Which tags were placed in this model is decided against the capture on screen.
+        this.threeJsService.setCurrentCapture(this.currentCaptureID);
+        this.threeJsService.setTagAlignment(alignment);
     }
     /**
      * Enable tag placement menu to add a new element depending on its type (TICKET, DATA, EQUIPMENT etc)
@@ -7836,22 +9189,116 @@ class ViewerService {
         if (this.checkMode('Matterport')) {
             await this.matterportService.action_toolbox_floorplan();
         }
-    }
-    action_toolbox_mesure() {
-        if (this.matterportService.getInteractionMode() !== ViewerInteractions.DEFAULT) {
-            this.action_canceled();
+    }
+    action_toolbox_mesure() {
+        if (this.matterportService.getInteractionMode() !== ViewerInteractions.DEFAULT) {
+            this.action_canceled();
+        }
+        this.action_toolbox_inside_view();
+        // Matterport
+        if (this.checkMode('Matterport')) {
+            this.matterportService.action_toolbox_mesure();
+        }
+        // Matterport's SDK brings its own measuring tool; the Three.js viewer has to provide one.
+        if (this.checkMode('threejs')) {
+            this.threeJsService.startMeasuring();
+        }
+    }
+    action_toolbox_cancel_mesure() {
+        // Matterport
+        if (this.checkMode('Matterport')) {
+            this.matterportService.action_toolbox_cancel_mesure();
+        }
+        if (this.checkMode('threejs')) {
+            this.threeJsService.cancelMeasuring();
+            // The toolbar toggles on this flag; left on, the next click would switch measuring "off"
+            // instead of starting a new one.
+            this.toolboxStates.mesure.stat = false;
+        }
+    }
+    /** While measuring in the Three.js viewer: points and segment lengths so far, null if abandoned. */
+    get threeJsMeasurementProgress$() {
+        return this.threeJsService.measurementProgress$;
+    }
+    /** Ends the Three.js measurement in progress, or returns null when it has fewer than two points. */
+    finishThreeJsMeasurement() {
+        if (!this.checkMode('threejs')) {
+            return null;
+        }
+        const measurement = this.threeJsService.finishMeasuring();
+        if (measurement) {
+            this.toolboxStates.mesure.stat = false;
+        }
+        return measurement;
+    }
+    /** The measurement last finished in the Three.js viewer, for the form that saves it. */
+    getThreeJsLastMeasurement() {
+        return this.checkMode('threejs') ? this.threeJsService.getLastMeasurement() : null;
+    }
+    /**
+     * The Matterport sweep nearest to a point picked in the Three.js viewer, or null.
+     *
+     * For callers that write their own POI, as the measurement form does - anything created through
+     * createPoiForThreeJsPlacement already gets this.
+     */
+    findNearestSweepForThreeJs(point) {
+        // An uncalibrated model's coordinates are its own. Measured against the Matterport sweeps they
+        // could land near one by coincidence, and the tag would turn up in the tour somewhere arbitrary.
+        if (!this.threeJsCalibrated) {
+            return Promise.resolve(null);
+        }
+        return this.sweepLocator.findNearestSweep(point, this.currentSpaceID);
+    }
+    /**
+     * The metadata a POI placed in the Three.js viewer is stored with: which 3D model it was placed
+     * in, and - when that model is not calibrated - that its coordinates are the model's own.
+     */
+    buildThreeJsPoiMetadata(extra = {}) {
+        return JSON.stringify({
+            ...extra,
+            ...(this.currentCaptureID ? { captureID: this.currentCaptureID } : {}),
+            ...(this.currentCaptureID && !this.threeJsCalibrated ? { frame: 'model' } : {}),
+        });
+    }
+    /** Which of the 3D model's axes is being treated as up. */
+    getThreeJsModelUp() {
+        return this.threeJsService.getModelUp();
+    }
+    /**
+     * Turns the 3D model to the next candidate for "which axis is up", and returns the capture
+     * metadata with that choice written in, for the caller to store.
+     *
+     * The vertical axis is worked out from the geometry when a model loads, and that can be wrong:
+     * a narrow corridor and a low slab are the same shape turned over. This is the way to correct it.
+     */
+    cycleThreeJsModelUp(existingMetadata) {
+        if (!this.checkMode('threejs')) {
+            return null;
+        }
+        const current = THREEJS_MODEL_UP_OPTIONS.indexOf(this.threeJsService.getModelUp());
+        const up = THREEJS_MODEL_UP_OPTIONS[(current + 1) % THREEJS_MODEL_UP_OPTIONS.length];
+        this.threeJsService.setModelUp(up);
+        let stored = {};
+        try {
+            stored = existingMetadata ? JSON.parse(existingMetadata) : {};
         }
-        this.action_toolbox_inside_view();
-        // Matterport
-        if (this.checkMode('Matterport')) {
-            this.matterportService.action_toolbox_mesure();
+        catch {
+            stored = {};
         }
+        stored.up = up;
+        return { up, metadata: JSON.stringify(stored) };
     }
-    action_toolbox_cancel_mesure() {
-        // Matterport
-        if (this.checkMode('Matterport')) {
-            this.matterportService.action_toolbox_cancel_mesure();
-        }
+    /** Chooses the tag for the calibration pair being matched by id, instead of by clicking it. */
+    selectThreeJsAlignmentTag(elementId) {
+        return this.checkMode('threejs') && this.threeJsService.selectAlignmentTag(elementId);
+    }
+    /** How far the visible tags sit from the 3D model, in model radii. Null without both. */
+    getThreeJsTagDistanceFromModel() {
+        return this.checkMode('threejs') ? this.threeJsService.getTagDistanceFromModel() : null;
+    }
+    /** How many tags the Three.js scene is showing. */
+    getThreeJsTagCount() {
+        return this.checkMode('threejs') ? this.threeJsService.getTagCount() : 0;
     }
     async action_update_poi(poi, isValid, element) {
         if (this.checkMode('Matterport')) {
@@ -7941,11 +9388,15 @@ class ViewerService {
         if (!placement || !element?.id) {
             return null;
         }
+        // Without a sweep the tag is left off everything on the Matterport side that is organised by
+        // sweep - the floor plan most visibly, which only draws tags whose sweep belongs to it.
+        const matterportSweepID = await this.findNearestSweepForThreeJs(placement.position);
         const poi = await this.poiService.createPOIForSpaceID({
             coordinate: JSON.stringify(placement.position),
             type: poiType,
             elementID: element.id,
-            metadata: JSON.stringify({ normal: placement.normal }),
+            metadata: this.buildThreeJsPoiMetadata({ normal: placement.normal }),
+            ...(matterportSweepID ? { matterportSweepID } : {}),
         });
         // Draw it straight away rather than waiting for the next refresh, so the user sees where the
         // thing they just created ended up. Through the same path the refresh uses, so it arrives with
@@ -8075,7 +9526,7 @@ class ViewerService {
         const placement = parseThreeJsPlacement(placementMetadata);
         // The key, not the signed URL, is what identifies the model across loads - the signature makes
         // every URL unique, which is exactly why the browser's own cache never helps here.
-        this.threeJsService.loadGLTFModel(url, placement?.cameraPosition, placement?.rotation, key);
+        this.threeJsService.loadGLTFModel(url, placement?.cameraPosition, placement?.rotation, key, placement?.up);
     }
     /**
      * Loads a 3D model into the Three.js scene (OBJ).
@@ -8170,7 +9621,7 @@ class ViewerService {
     isObject3DLoadedInPosition() {
         return this.isObjectLoaded;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewerService, deps: [{ token: MATTERPORT_SDK_KEY }, { token: 'config' }, { token: PoiService }, { token: MatterportService }, { token: ThreeJsService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewerService, deps: [{ token: MATTERPORT_SDK_KEY }, { token: 'config' }, { token: PoiService }, { token: MatterportService }, { token: ThreeJsService }, { token: SweepLocatorService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewerService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewerService, decorators: [{
@@ -8184,7 +9635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }] }, { type: Config, decorators: [{
                     type: Inject,
                     args: ['config']
-                }] }, { type: PoiService }, { type: MatterportService }, { type: ThreeJsService }] });
+                }] }, { type: PoiService }, { type: MatterportService }, { type: ThreeJsService }, { type: SweepLocatorService }] });
 
 class ModalSwitchVisitComponent {
     activeModal;
@@ -8212,11 +9663,11 @@ class ModalSwitchVisitComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalSwitchVisitComponent, deps: [{ token: i1$2.NgbActiveModal }, { token: i1$1.Router }, { token: ViewerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ModalSwitchVisitComponent, selector: "lib-modal-switch-visit", inputs: { content: "content", model3D: "model3D", spaceID: "spaceID", dataToMove: "dataToMove" }, ngImport: i0, template: "<div class=\"modal-container\">\r\n    <p>{{content}}</p>\r\n    <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"switchVisit()\">{{'Yes, switch visit' | translate }}</button>\r\n    <button class=\"btn btn-outline-primary rounded-pill\"(click)=\"activeModal.close()\">{{'No, stay here' | translate }}</button>\r\n</div>\r\n", styles: [".modal-container{margin:10px}button{margin-right:8px}\n"], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ModalSwitchVisitComponent, selector: "lib-modal-switch-visit", inputs: { content: "content", model3D: "model3D", spaceID: "spaceID", dataToMove: "dataToMove" }, ngImport: i0, template: "<div class=\"modal-container\">\n    <p>{{content}}</p>\n    <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"switchVisit()\">{{'Yes, switch visit' | translate }}</button>\n    <button class=\"btn btn-outline-primary rounded-pill\"(click)=\"activeModal.close()\">{{'No, stay here' | translate }}</button>\n</div>\n", styles: [".modal-container{margin:10px}button{margin-right:8px}\n"], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalSwitchVisitComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-modal-switch-visit', template: "<div class=\"modal-container\">\r\n    <p>{{content}}</p>\r\n    <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"switchVisit()\">{{'Yes, switch visit' | translate }}</button>\r\n    <button class=\"btn btn-outline-primary rounded-pill\"(click)=\"activeModal.close()\">{{'No, stay here' | translate }}</button>\r\n</div>\r\n", styles: [".modal-container{margin:10px}button{margin-right:8px}\n"] }]
+            args: [{ selector: 'lib-modal-switch-visit', template: "<div class=\"modal-container\">\n    <p>{{content}}</p>\n    <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"switchVisit()\">{{'Yes, switch visit' | translate }}</button>\n    <button class=\"btn btn-outline-primary rounded-pill\"(click)=\"activeModal.close()\">{{'No, stay here' | translate }}</button>\n</div>\n", styles: [".modal-container{margin:10px}button{margin-right:8px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgbActiveModal }, { type: i1$1.Router }, { type: ViewerService }], propDecorators: { content: [{
                 type: Input
             }], model3D: [{
@@ -8227,6 +9678,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Where a POI placed in a Three.js model says it was placed, or null for any other POI.
+ *
+ * `frame` is 'model' when its coordinates are in that model's own space - it was placed before the
+ * model was calibrated - rather than in the space tags share with the other visits.
+ */
+function getThreeJsPoiOrigin(poi) {
+    if (!poi?.metadata) {
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(poi.metadata);
+        return typeof parsed?.captureID === "string"
+            ? { captureID: parsed.captureID, frame: parsed.frame === "model" ? "model" : null }
+            : null;
+    }
+    catch {
+        return null;
+    }
+}
+const THREEJS_MODEL_UP_OPTIONS = ["y", "z", "x", "-y", "-z", "-x"];
 /**
  * Parses the placement stored in a Three.js capture's metadata, or null when there is none.
  *
@@ -8265,7 +9737,12 @@ function parseThreeJsPlacement(metadata) {
                 placement.alignment = alignment;
             }
         }
-        return placement.cameraPosition || placement.rotation || placement.alignment ? placement : null;
+        if (THREEJS_MODEL_UP_OPTIONS.includes(parsed.up)) {
+            placement.up = parsed.up;
+        }
+        return placement.cameraPosition || placement.rotation || placement.alignment || placement.up
+            ? placement
+            : null;
     }
     catch {
         console.warn("Ignoring unparseable Three.js placement metadata:", metadata);
@@ -8690,285 +10167,57 @@ function shuffleArray(array) {
     const newArray = [...array];
     for (let index = array.length - 1; index > 0; index--) {
         const indexNew = Math.floor(Math.random() * (index + 1));
-        // eslint-disable-next-line no-param-reassign
-        [newArray[index], newArray[indexNew]] = [
-            newArray[indexNew],
-            newArray[index],
-        ];
-    }
-    return newArray;
-}
-function numberToDateString(timestamp) {
-    const jsDate = new Date(timestamp);
-    return jsDate.toLocaleString("fr-FR");
-}
-function durationToString(duration, translate) {
-    const days = Math.floor(duration / 3600 / 24);
-    const hours = Math.floor((duration - days * 24 * 3600) / 3600);
-    const minutes = Math.floor((duration % 3600) / 60);
-    const seconds = Math.floor(duration % 60);
-    const daysString = translate.instant("day(s)");
-    const hoursString = translate.instant("hour(s)");
-    const oneHourString = translate.instant("hour");
-    const minutesString = translate.instant("minute(s)");
-    const secondsString = translate.instant("second(s)");
-    if (duration > 3600 * 24 * 7) {
-        return `${days} ${daysString}`;
-    }
-    if (duration > 3600 * 24) {
-        return `${days} ${daysString} ${hours} ${hoursString}`;
-    }
-    if (duration === 3600) {
-        return `${hours} ${oneHourString}`;
-    }
-    if (duration > 3600) {
-        if (minutes === 0) {
-            return `${hours} ${hoursString}`;
-        }
-        return `${hours} ${hoursString} ${minutes} ${minutesString}`;
-    }
-    if (duration >= 60) {
-        if (seconds === 0) {
-            return `${minutes} ${minutesString}`;
-        }
-        return `${minutes} ${minutesString} ${seconds} ${secondsString}`;
-    }
-    return `${seconds} ${secondsString}`;
-}
-function pointToString(point) {
-    const x = point.x.toFixed(3);
-    const y = point.y.toFixed(3);
-    const z = point.z.toFixed(3);
-    return `{ x: ${x}, y: ${y}, z: ${z} }`;
-}
-
-/* eslint-disable class-methods-use-this */
-class ZoneService {
-    userService;
-    API; //AWS APIService
-    constructor(apiInjected, userService) {
-        this.userService = userService;
-        this.API = apiInjected;
-    }
-    async getZonesBySpace(spaceID) {
-        const list = [];
-        if (this.API.__proto__.hasOwnProperty('ZonesBySpace')) {
-            // Paginated: without a nextToken loop, only the first page (100 zones) was returned and
-            // the sweeps of the other zones silently disappeared.
-            let nextToken = null;
-            do {
-                const zones = await this.API.__proto__.ZonesBySpace(spaceID, null, null, 1000, nextToken);
-                for (const zone of zones?.items || []) {
-                    const zoneObject = { ...zone };
-                    zoneObject.virtual = this.zoneIsVirtual(zone);
-                    list.push(zoneObject);
-                }
-                nextToken = zones?.nextToken ?? null;
-            } while (nextToken);
-            return list;
-        }
-        else {
-            throw new Error('ZonesBySpace not implemented');
-        }
-    }
-    async getZonesBySpaceForUser(spaceID) {
-        const missionForLocation = this.userService.currentMission(spaceID);
-        const list = [];
-        if (missionForLocation && missionForLocation.zoneID) {
-            const allowedZone = await this.getZone(missionForLocation.zoneID);
-            allowedZone.virtual = this.zoneIsVirtual(allowedZone);
-            if (!allowedZone.parent) {
-                // the whole building is authorized
-                return this.getZonesBySpace(spaceID);
-            }
-            list.push(allowedZone);
-            // allow all children zones of an allowed parent
-            const children = (await this.API.__proto__.ZonesByZone(allowedZone.id))
-                .items;
-            if (children.length > 0) {
-                for (const child of children) {
-                    const childZone = { ...child };
-                    childZone.virtual = this.zoneIsVirtual(child);
-                    list.push(childZone);
-                }
-            }
-            // allow the parent Floor of the allowed zone
-            if (allowedZone.parent.layer &&
-                allowedZone.parent.layer.name === 'FLOOR') {
-                list.push(allowedZone.parent);
-            }
-        }
-        else {
-            return this.getZonesBySpace(spaceID);
-        }
-        return list;
-    }
-    async filterZonesIDsForUser(zones) {
-        const { spaceID } = zones[0];
-        const zoneIDs = new Set(zones.map((zone) => zone.id));
-        const allowedZones = await this.getZonesBySpaceForUser(spaceID);
-        const filteredZones = allowedZones.filter((zone) => zoneIDs.has(zone.id));
-        return filteredZones;
-    }
-    async deleteZone(zoneID) {
-        return this.API.__proto__.DeleteZone({ id: zoneID });
-    }
-    async getZonesForSweepForSpace(sweepID, spaceID) {
-        const zonesSpace = (await this.API.__proto__.ZonesBySpace(spaceID)).items;
-        return zonesSpace.filter((zone) => zone.sweepIDs && zone.sweepIDs.includes(sweepID));
-    }
-    // // eslint-disable-next-line class-methods-use-this
-    sortZonesFromChildToParent(zonesToSort) {
-        // get default
-        const defaultZone = zonesToSort.find((z) => !z.parentID);
-        if (defaultZone) {
-            const indexOf = zonesToSort.indexOf(defaultZone);
-            zonesToSort.splice(indexOf, 1);
-        }
-        const zones = zonesToSort.sort((a, b) => {
-            if (a.parentID === b.id) {
-                return -1;
-            }
-            return 0;
-        });
-        // so far by number of navigation points in them
-        // const zones = zonesToSort.sort(
-        //     (a, b) => a.navigations.items.length - b.navigations.items.length,
-        // );
-        if (defaultZone) {
-            zones.push(defaultZone);
-        }
-        return zones;
-    }
-    async getZonesForObject(object) {
-        if (object.pois.items && object.pois.items.length > 0) {
-            const [poi] = object.pois.items;
-            if (poi.matterportSweepID) {
-                const zones = await this.getZonesForSweepForSpace(poi.matterportSweepID, object.spaceID);
-                return zones;
-            }
-        }
-        return null;
-    }
-    async createVirtualZone(zoneInput) {
-        zoneInput.sweepIDs = [];
-        const zone = await this.API.__proto__.CreateZone(zoneInput);
-        console.log('virtual zone created', zone);
-        return zone;
-    }
-    zoneIsVirtual(zone) {
-        if (!zone.sweepIDs) {
-            return true;
-        }
-        if ((zone.tags && zone.tags.includes('virtual')) ||
-            zone.sweepIDs.length === 0) {
-            return true;
-        }
-        return false;
-    }
-    async getModel3DForZone(zoneID) {
-        const zone = await this.API.__proto__.GetZone(zoneID);
-        if (zone.nodeIDs) {
-            const node = await this.API.__proto__.GetNode(zone.nodeIDs[0]);
-            return node.model3D;
-        }
-        return null;
-    }
-    async getZone(zoneID) {
-        return this.API.__proto__.GetZone(zoneID);
-    }
-    async getDefaultZoneForSpace(spaceID) {
-        return this.getZonesBySpace(spaceID).then(async (zones) => {
-            const zonesBuilding = zones.filter((zone) => zone.layer && zone.layer.name === 'BUILDING');
-            if (zonesBuilding.length === 1) {
-                return zonesBuilding[0];
-            }
-            const parentZone = zones.find((zone) => !zone.parentID);
-            return parentZone;
-        });
-    }
-    async create(input) {
-        return this.API.__proto__.CreateZone(input);
-    }
-    // async getSortedZonesForSweepForUser(
-    //     sweep: string,
-    //     spaceID: string,
-    // ): Promise<Zone[]> {
-    //     if (!spaceID) {
-    //         return [];
-    //     }
-    //     const zones = await this.getZonesForSweepForSpace(sweep, spaceID);
-    //     if (zones.length === 0) {
-    //         return [];
-    //     }
-    //     const filteredZones = await this.filterZonesIDsForUser(zones);
-    //     if (filteredZones.length > 0) {
-    //         let zonesSorted = this.sortZonesFromChildToParent(filteredZones);
-    //         zonesSorted = zonesSorted.filter((zone) => zone !== undefined);
-    //         return zonesSorted;
-    //     }
-    //     return [];
-    // }
-    async updateZone(input) {
-        return this.API.__proto__.UpdateZone(input);
+        // eslint-disable-next-line no-param-reassign
+        [newArray[index], newArray[indexNew]] = [
+            newArray[indexNew],
+            newArray[index],
+        ];
     }
-    async getZonesForNodeForSpace(nodeID, spaceID) {
-        return this.API.__proto__.ZonesBySpace(spaceID).then(async (zones) => {
-            const filteredZones = zones.items.filter((zone) => zone.nodeIDs && zone.nodeIDs.includes(nodeID));
-            return filteredZones;
-        });
+    return newArray;
+}
+function numberToDateString(timestamp) {
+    const jsDate = new Date(timestamp);
+    return jsDate.toLocaleString("fr-FR");
+}
+function durationToString(duration, translate) {
+    const days = Math.floor(duration / 3600 / 24);
+    const hours = Math.floor((duration - days * 24 * 3600) / 3600);
+    const minutes = Math.floor((duration % 3600) / 60);
+    const seconds = Math.floor(duration % 60);
+    const daysString = translate.instant("day(s)");
+    const hoursString = translate.instant("hour(s)");
+    const oneHourString = translate.instant("hour");
+    const minutesString = translate.instant("minute(s)");
+    const secondsString = translate.instant("second(s)");
+    if (duration > 3600 * 24 * 7) {
+        return `${days} ${daysString}`;
     }
-    /**
-     * Gets the Zone (layer FLOOR) for a matterport sweep ID in a given Space
-     * @param sweepID
-     * @param spaceID
-     * @returns Zone
-     */
-    async getFloorZoneForSweepInSpace(sweepID, spaceID) {
-        const zones = await this.getZonesForSweepForSpace(sweepID, spaceID);
-        const floors = zones.filter((zone) => zone.layer && zone.layer.name.includes('FLOOR'));
-        return floors.length > 0 ? floors[0] : null;
+    if (duration > 3600 * 24) {
+        return `${days} ${daysString} ${hours} ${hoursString}`;
     }
-    /**
-     * Get zones with audio track for entire space
-     * @param spaceID
-     * @returns  Promise<Zone[]>
-     */
-    async getAudioZonesForSpace(spaceID) {
-        const allZones = await this.getZonesBySpace(spaceID);
-        return allZones.filter((zone) => zone.audioID);
+    if (duration === 3600) {
+        return `${hours} ${oneHourString}`;
     }
-    /**
-     * Get audio zones for user (within allowed zones)
-     * @param spaceID
-     * @returns  Promise<Zone[]>
-     */
-    async getAudioZonesForUserForSpace(spaceID) {
-        const userZones = await this.getZonesBySpaceForUser(spaceID);
-        return userZones.filter((zone) => zone.audioID);
+    if (duration > 3600) {
+        if (minutes === 0) {
+            return `${hours} ${hoursString}`;
+        }
+        return `${hours} ${hoursString} ${minutes} ${minutesString}`;
     }
-    /**
-     * Get Zones by Parent Zone ID
-     * @param parentZoneID string
-     * @returns Promise<Zone[]>
-     */
-    async getZonesByParentZone(parentZoneID) {
-        return this.API.__proto__
-            .ZonesByZone(parentZoneID)
-            .then((res) => res.items);
+    if (duration >= 60) {
+        if (seconds === 0) {
+            return `${minutes} ${minutesString}`;
+        }
+        return `${minutes} ${minutesString} ${seconds} ${secondsString}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneService, deps: [{ token: 'currentAPIService' }, { token: BaseUserService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneService, providedIn: 'root' });
+    return `${seconds} ${secondsString}`;
+}
+function pointToString(point) {
+    const x = point.x.toFixed(3);
+    const y = point.y.toFixed(3);
+    const z = point.z.toFixed(3);
+    return `{ x: ${x}, y: ${y}, z: ${z} }`;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['currentAPIService']
-                }] }, { type: BaseUserService }] });
 
 /* eslint-disable no-case-declarations */
 /* eslint-disable no-await-in-loop */
@@ -9186,7 +10435,12 @@ class FilterService {
                 // visibility filter already reads "no sweep" as "not floor-scoped, show it";
                 // this is the same rule applied to zones.
                 if (poi && poi.coordinate && !poi.matterportSweepID) {
-                    filteredObjects.push(object);
+                    // ...unless it was placed in a 3D model. With no sweep, that model was never
+                    // tied to this tour: the coordinates are the model's own, and here they would
+                    // put the tag somewhere arbitrary.
+                    if (!getThreeJsPoiOrigin(poi)) {
+                        filteredObjects.push(object);
+                    }
                     return;
                 }
                 if (poi && zone) {
@@ -9581,133 +10835,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], ctorParameters: () => [{ type: BaseUserService }, { type: ZoneService }, { type: PoiService }] });
 
-class NavigationService {
-    userService;
-    zoneService;
-    API;
-    constructor(apiInjected, userService, zoneService) {
-        this.userService = userService;
-        this.zoneService = zoneService;
-        this.API = apiInjected;
-    }
-    async createNavigation(navInput) {
-        return this.API.__proto__.CreateNavigation(navInput);
-    }
-    async deleteNavigation(id) {
-        return this.API.__proto__.DeleteNavigation({ id });
-    }
-    async getNavigationsForNode(nodeID) {
-        const limit = 200;
-        let navigationsTokenDict = { navigations: [], nextToken: null };
-        do {
-            navigationsTokenDict =
-                await this.mergeAPIResponseWithNextTokenWithLimit(nodeID, limit, navigationsTokenDict);
-        } while (navigationsTokenDict.nextToken);
-        return navigationsTokenDict.navigations;
-    }
-    async mergeAPIResponseWithNextTokenWithLimit(nodeID, limit, navigationsTokenDict) {
-        return this.API.__proto__.NavigationsByNode(nodeID, null, null, limit, navigationsTokenDict.nextToken).then((response) => {
-            const navigations = response.items;
-            const navObject = {
-                navigations: [...navigationsTokenDict.navigations, ...navigations],
-                nextToken: response.nextToken,
-            };
-            return navObject;
-        });
-    }
-    async getNavigation(id) {
-        return this.API.__proto__.GetNavigation(id);
-    }
-    async getSweepsIDsForSpace(spaceID) {
-        const zones = await this.zoneService.getZonesBySpace(spaceID);
-        const zonesWithSweeps = zones.filter((zone) => zone.sweepIDs && zone.sweepIDs.length > 0);
-        const allSweeps = zonesWithSweeps.flatMap((zone) => zone.sweepIDs);
-        return [...new Set(allSweeps)];
-    }
-    async getAllowedSweepsIDsForUserInSpace(spaceID) {
-        const missionsForSpace = this.userService.currentMissions.filter((mis) => mis.spaceID === spaceID);
-        console.log(missionsForSpace);
-        let navIDs = [];
-        if (this.userService.userHasAccessToAllZonesInSpace(spaceID)) {
-            console.log(1);
-            return this.getSweepsIDsForSpace(spaceID);
-        }
-        await Promise.all(missionsForSpace.map(async (mission) => {
-            navIDs = [...navIDs, ...mission.zone.sweepIDs];
-        }));
-        console.log('final navids = ', navIDs);
-        return navIDs;
-    }
-    async getForbiddenNavigationIDsForUserInSpace(spaceID) {
-        const allowed = await this.getAllowedSweepsIDsForUserInSpace(spaceID);
-        const allNavs = await this.getSweepsIDsForSpace(spaceID);
-        const difference = allNavs.filter((x) => !allowed.includes(x));
-        return difference.length > 0 ? difference : null;
-    }
-    async getNavigationsForMatterportIDForSpace(matterportID, spaceID) {
-        return this.API.__proto__.NavigationsByMatterportIDBySpace(matterportID, {
-            eq: spaceID,
-        }).then((navs) => navs.items);
-    }
-    async getNavigationsForZone(zone) {
-        const responseNavs = [];
-        await Promise.all(zone.sweepIDs.map(async (sweepID) => {
-            const navs = await this.getNavigationsForMatterportIDForSpace(sweepID, zone.spaceID);
-            if (navs.length > 0) {
-                responseNavs.push(navs[0]);
-            }
-        }));
-        return responseNavs;
-    }
-    async updateNavigation(navInput) {
-        return this.API.__proto__.UpdateNavigation(navInput);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationService, deps: [{ token: 'currentAPIService' }, { token: BaseUserService }, { token: ZoneService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationService, providedIn: "root" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['currentAPIService']
-                }] }, { type: BaseUserService }, { type: ZoneService }] });
-
-class CaptureService {
-    API; //AWS
-    constructor(apiInjected) {
-        this.API = apiInjected;
-    }
-    async getCapturesBySpace(spaceID) {
-        return this.API.CapturesBySpace(spaceID).then((cap) => cap.items);
-    }
-    async getCapture(captureID) {
-        return this.API.__proto__.GetCapture(captureID);
-    }
-    async deleteCapture(captureID) {
-        return this.API.__proto__.DeleteCapture({ id: captureID });
-    }
-    async updateCapture(capture) {
-        return this.API.__proto__.UpdateCapture(capture);
-    }
-    async createCapture(capture) {
-        return this.API.__proto__.CreateCapture(capture);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaptureService, deps: [{ token: 'currentAPIService' }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaptureService, providedIn: "root" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaptureService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['currentAPIService']
-                }] }] });
-
 class NodeService {
     API;
     constructor(apiInjected) {
@@ -11043,7 +12170,7 @@ class BaseObjectService {
             // is no sweep to resolve a visit from, which is why this used to report the model
             // as unreachable. The space's 3D visit is the one that can show it.
             if (poi && poi.coordinate && !poi.matterportSweepID) {
-                const visit = await this.getThreeJsVisitForSpace(object.spaceID);
+                const visit = await this.getThreeJsVisitForSpace(object.spaceID, getThreeJsPoiOrigin(poi)?.captureID);
                 return visit
                     ? { model3D: visit.model3d, sweep: null, rotation: null }
                     : null;
@@ -11079,15 +12206,15 @@ class BaseObjectService {
         });
     }
     /**
-     * The space's 3D visit, or null when it has none.
+     * The 3D visit to show a POI in, or null when the space has none.
      *
-     * Takes the first one the database returns. That is not the space's chosen default - the
-     * default ordering lives in SpaceService, which cannot be injected here. The POI does not record
-     * which capture it was placed in, so with several 3D models this is a guess either way.
+     * The one the POI was placed in, when it says. Older POIs do not, and for those it is the first
+     * 3D visit the database returns - a guess, when the space has several.
      */
-    async getThreeJsVisitForSpace(spaceID) {
-        const visits = await this.visitService.getVisitsForSpaceForUser(spaceID, false);
-        return (visits ?? []).find((visit) => visit.viewer === CaptureViewer.THREEJS) ?? null;
+    async getThreeJsVisitForSpace(spaceID, captureID) {
+        const visits = (await this.visitService.getVisitsForSpaceForUser(spaceID, false) ?? [])
+            .filter((visit) => visit.viewer === CaptureViewer.THREEJS);
+        return visits.find((visit) => visit.captureID === captureID) ?? visits[0] ?? null;
     }
     async updateIconForAllObjects(objects, tagIcon) {
         const IDs = [];
@@ -12483,7 +13610,7 @@ class EquipmentService extends BaseObjectService {
                     user: this.userService.cu,
                     locationId: this.currentSpaceID,
                     timestamp: new Date(),
-                    zoneId: this.currentZone.id,
+                    zoneId: this.currentZone?.id,
                     floorId: this.selectedFloor?.id,
                 },
                 streamName: 'smarterplanKinesis-analytics',
@@ -12947,6 +14074,11 @@ class EquipmentService extends BaseObjectService {
     }
     updateDueToCreate(createdEquip) {
         this.currentEquipments.space.unshift(createdEquip);
+        // initEquips only records a zone's list when it has a zone or found equipments, so the first
+        // equipment of a space viewed without zones (Three.js) arrives with no list to join.
+        if (!this.currentEquipments.zonesMap.has(this.zoneIDFilter)) {
+            this.currentEquipments.zonesMap.set(this.zoneIDFilter, []);
+        }
         this.currentEquipments.zonesMap
             .get(this.zoneIDFilter)
             .unshift(createdEquip);
@@ -13020,6 +14152,26 @@ class EquipmentService extends BaseObjectService {
                 }
             }
         });
+        // The Three.js viewer shows a whole space at once, with no zone to navigate into, so it
+        // announces itself here instead of through `zoneChange`. Leaving the zone filter empty is what
+        // makes every equipment of the space show up.
+        this.zoneChangeService.spaceWithoutZones
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((spaceID) => {
+            this.currentSpaceID = spaceID;
+            this.zoneIDFilter = null;
+            this.currentZone = null;
+            this.currentEquipments = {
+                space: [],
+                zonesMap: new Map(),
+            };
+            if (!spaceID) {
+                this.equipmentsTags.next(null);
+                this.equipmentsUpdated.next({ space: [], zone: null });
+                return;
+            }
+            this.initEquips();
+        });
         this.deleteObservable
             .pipe(takeUntil(this.destroy$))
             .subscribe((equipment) => {
@@ -13234,11 +14386,11 @@ class SearchBarComponent {
         this.searchEvent.emit(results);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchBarComponent, deps: [{ token: SearchService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchBarComponent, selector: "lib-search-bar", inputs: { searchable: "searchable", objectType: "objectType" }, outputs: { searchEvent: "searchEvent" }, ngImport: i0, template: "<div class=\"col-md-8 searchbar\">\r\n    <div class=\"row depend\">\r\n        <div class=\"col-md-5\">\r\n            <input id=\"searchbar\" type=\"text\" class=\"form-control\" placeholder=\"keyword\" />\r\n        </div>\r\n        <div class=\"col-md-5\">\r\n            <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onSubmit()\">{{ 'Search' |\r\n                translate}}</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".searchbar{margin-bottom:10px}\n"], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchBarComponent, selector: "lib-search-bar", inputs: { searchable: "searchable", objectType: "objectType" }, outputs: { searchEvent: "searchEvent" }, ngImport: i0, template: "<div class=\"col-md-8 searchbar\">\n    <div class=\"row depend\">\n        <div class=\"col-md-5\">\n            <input id=\"searchbar\" type=\"text\" class=\"form-control\" placeholder=\"keyword\" />\n        </div>\n        <div class=\"col-md-5\">\n            <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onSubmit()\">{{ 'Search' |\n                translate}}</button>\n        </div>\n    </div>\n</div>", styles: [".searchbar{margin-bottom:10px}\n"], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-search-bar', template: "<div class=\"col-md-8 searchbar\">\r\n    <div class=\"row depend\">\r\n        <div class=\"col-md-5\">\r\n            <input id=\"searchbar\" type=\"text\" class=\"form-control\" placeholder=\"keyword\" />\r\n        </div>\r\n        <div class=\"col-md-5\">\r\n            <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onSubmit()\">{{ 'Search' |\r\n                translate}}</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".searchbar{margin-bottom:10px}\n"] }]
+            args: [{ selector: 'lib-search-bar', template: "<div class=\"col-md-8 searchbar\">\n    <div class=\"row depend\">\n        <div class=\"col-md-5\">\n            <input id=\"searchbar\" type=\"text\" class=\"form-control\" placeholder=\"keyword\" />\n        </div>\n        <div class=\"col-md-5\">\n            <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onSubmit()\">{{ 'Search' |\n                translate}}</button>\n        </div>\n    </div>\n</div>", styles: [".searchbar{margin-bottom:10px}\n"] }]
         }], ctorParameters: () => [{ type: SearchService }], propDecorators: { searchable: [{
                 type: Input
             }], objectType: [{
@@ -13686,11 +14838,11 @@ class LoaderComponent {
         document.documentElement.style.setProperty('--color', this.color);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LoaderComponent, selector: "lib-loader", inputs: { useLogo: "useLogo", color: "color" }, ngImport: i0, template: "<div class=\"sk-fading-circle\">\r\n    <img *ngIf=\"useLogo\" src=\"../../../../assets/icons/smarterplan.svg\">\r\n    <div class=\"sk-circle1 sk-circle\"></div>\r\n    <div class=\"sk-circle2 sk-circle\"></div>\r\n    <div class=\"sk-circle3 sk-circle\"></div>\r\n    <div class=\"sk-circle4 sk-circle\"></div>\r\n    <div class=\"sk-circle5 sk-circle\"></div>\r\n    <div class=\"sk-circle6 sk-circle\"></div>\r\n    <div class=\"sk-circle7 sk-circle\"></div>\r\n    <div class=\"sk-circle8 sk-circle\"></div>\r\n    <div class=\"sk-circle9 sk-circle\"></div>\r\n    <div class=\"sk-circle10 sk-circle\"></div>\r\n    <div class=\"sk-circle11 sk-circle\"></div>\r\n    <div class=\"sk-circle12 sk-circle\"></div>\r\n</div>\r\n", styles: [".sk-fading-circle{width:88px;height:88px;position:relative}.sk-fading-circle img{width:2rem;position:absolute;left:calc(50% - 16px);top:calc(50% - 16px)}.sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-fading-circle .sk-circle:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;background-color:var(--color);border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LoaderComponent, selector: "lib-loader", inputs: { useLogo: "useLogo", color: "color" }, ngImport: i0, template: "<div class=\"sk-fading-circle\">\n    <img *ngIf=\"useLogo\" src=\"../../../../assets/icons/smarterplan.svg\">\n    <div class=\"sk-circle1 sk-circle\"></div>\n    <div class=\"sk-circle2 sk-circle\"></div>\n    <div class=\"sk-circle3 sk-circle\"></div>\n    <div class=\"sk-circle4 sk-circle\"></div>\n    <div class=\"sk-circle5 sk-circle\"></div>\n    <div class=\"sk-circle6 sk-circle\"></div>\n    <div class=\"sk-circle7 sk-circle\"></div>\n    <div class=\"sk-circle8 sk-circle\"></div>\n    <div class=\"sk-circle9 sk-circle\"></div>\n    <div class=\"sk-circle10 sk-circle\"></div>\n    <div class=\"sk-circle11 sk-circle\"></div>\n    <div class=\"sk-circle12 sk-circle\"></div>\n</div>\n", styles: [".sk-fading-circle{width:88px;height:88px;position:relative}.sk-fading-circle img{width:2rem;position:absolute;left:calc(50% - 16px);top:calc(50% - 16px)}.sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-fading-circle .sk-circle:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;background-color:var(--color);border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-loader', template: "<div class=\"sk-fading-circle\">\r\n    <img *ngIf=\"useLogo\" src=\"../../../../assets/icons/smarterplan.svg\">\r\n    <div class=\"sk-circle1 sk-circle\"></div>\r\n    <div class=\"sk-circle2 sk-circle\"></div>\r\n    <div class=\"sk-circle3 sk-circle\"></div>\r\n    <div class=\"sk-circle4 sk-circle\"></div>\r\n    <div class=\"sk-circle5 sk-circle\"></div>\r\n    <div class=\"sk-circle6 sk-circle\"></div>\r\n    <div class=\"sk-circle7 sk-circle\"></div>\r\n    <div class=\"sk-circle8 sk-circle\"></div>\r\n    <div class=\"sk-circle9 sk-circle\"></div>\r\n    <div class=\"sk-circle10 sk-circle\"></div>\r\n    <div class=\"sk-circle11 sk-circle\"></div>\r\n    <div class=\"sk-circle12 sk-circle\"></div>\r\n</div>\r\n", styles: [".sk-fading-circle{width:88px;height:88px;position:relative}.sk-fading-circle img{width:2rem;position:absolute;left:calc(50% - 16px);top:calc(50% - 16px)}.sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-fading-circle .sk-circle:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;background-color:var(--color);border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
+            args: [{ selector: 'lib-loader', template: "<div class=\"sk-fading-circle\">\n    <img *ngIf=\"useLogo\" src=\"../../../../assets/icons/smarterplan.svg\">\n    <div class=\"sk-circle1 sk-circle\"></div>\n    <div class=\"sk-circle2 sk-circle\"></div>\n    <div class=\"sk-circle3 sk-circle\"></div>\n    <div class=\"sk-circle4 sk-circle\"></div>\n    <div class=\"sk-circle5 sk-circle\"></div>\n    <div class=\"sk-circle6 sk-circle\"></div>\n    <div class=\"sk-circle7 sk-circle\"></div>\n    <div class=\"sk-circle8 sk-circle\"></div>\n    <div class=\"sk-circle9 sk-circle\"></div>\n    <div class=\"sk-circle10 sk-circle\"></div>\n    <div class=\"sk-circle11 sk-circle\"></div>\n    <div class=\"sk-circle12 sk-circle\"></div>\n</div>\n", styles: [".sk-fading-circle{width:88px;height:88px;position:relative}.sk-fading-circle img{width:2rem;position:absolute;left:calc(50% - 16px);top:calc(50% - 16px)}.sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-fading-circle .sk-circle:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;background-color:var(--color);border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { useLogo: [{
                 type: Input
             }], color: [{
@@ -13748,11 +14900,11 @@ class SupportModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SupportModalComponent, deps: [{ token: SupportService }, { token: i1$2.NgbActiveModal }, { token: i3.UntypedFormBuilder }, { token: BaseUserService }, { token: ValidatorsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SupportModalComponent, selector: "app-support-modal", ngImport: i0, template: "<div class=\"modal-header\">\r\n    <h5 class=\"modal-title\" translate=\"Help\"></h5>\r\n</div>\r\n<div class=\"modal-body\">\r\n    <div class=\"support-loader-container\">\r\n        <lib-loader *ngIf=\"loading\"></lib-loader>\r\n    </div>\r\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"supportForm\" style=\"margin-top:1rem;\" *ngIf=\"!loading && status==='new'\">\r\n        <div>\r\n            <label>{{'Title' | translate}} *</label>\r\n            <div>\r\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" data-testid=\"new-support-title\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(supportForm.controls['title'])}\"\r\n                    maxlength=\"255\">\r\n            </div>\r\n            <div class=\"invalid-feedback\">\r\n                <span data-testid=\"new-support-title-invalid\" [translate]=\"validatorsService.getError(supportForm.controls['title'])\"\r\n                    *ngIf=\" validatorsService.isControlError(supportForm.controls['title'])\"></span>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!currentUser\">\r\n            <label>{{'Email' | translate}} *</label>\r\n            <div>\r\n                <input type=\"email\" class=\"form-control\" formControlName=\"email\" data-testid=\"new-support-email\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(supportForm.controls['email'])}\"\r\n                    maxlength=\"255\">\r\n            </div>\r\n            <div class=\"invalid-feedback\">\r\n                <span data-testid=\"new-support-email-invalid\" [translate]=\"validatorsService.getError(supportForm.controls['email'])\"\r\n                    *ngIf=\" validatorsService.isControlError(supportForm.controls['email'])\"></span>\r\n            </div>\r\n        </div>\r\n        <div>\r\n            <label>{{'Description' | translate}} *</label>\r\n            <div>\r\n                <textarea formControlName=\"description\" class=\"form-control\"\r\n                    data-testid=\"new-support-description\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(supportForm.controls['description'])}\"></textarea>\r\n            </div>\r\n            <div class=\"invalid-feedback\" >\r\n                <span data-testid=\"new-support-description-invalid\" [translate]=\" validatorsService.getError(supportForm.controls['description'])\"\r\n                *ngIf=\"validatorsService.isControlError(supportForm.controls['description'])\"></span>\r\n            </div>\r\n        </div>\r\n    </form>\r\n\r\n    <div *ngIf=\"status ==='send'\" translate=\"Your request has been registered\" data-testid=\"new-support-send-info\">\r\n    </div>\r\n    <div *ngIf=\"status ==='error'\" translate=\"An error has occurred, please renew your request\"\r\n        data-testid=\"new-support-error-info\">\r\n\r\n    </div>\r\n</div>\r\n<div class=\"modal-footer\">\r\n    <button type=\"button\" class=\"btn rounded-pill btn-museum\" data-dismiss=\"modal\" translate=\"Close\" (click)=\"onClose()\"\r\n        data-testid=\"new-support-close-btn\"></button>\r\n    <button *ngIf=\"!loading && status==='new'\" type=\"button\" class=\"btn rounded-pill btn-museum\" translate=\"Submit\"\r\n        (click)=\"onSubmit()\" [disabled]=\"!supportForm.valid\" data-testid=\"new-support-submit-btn\"></button>\r\n</div>", styles: [".support-loader-container{width:88px;margin:auto}.invalid-feedback{height:16px}\n"], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["useLogo", "color"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SupportModalComponent, selector: "app-support-modal", ngImport: i0, template: "<div class=\"modal-header\">\n    <h5 class=\"modal-title\" translate=\"Help\"></h5>\n</div>\n<div class=\"modal-body\">\n    <div class=\"support-loader-container\">\n        <lib-loader *ngIf=\"loading\"></lib-loader>\n    </div>\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"supportForm\" style=\"margin-top:1rem;\" *ngIf=\"!loading && status==='new'\">\n        <div>\n            <label>{{'Title' | translate}} *</label>\n            <div>\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" data-testid=\"new-support-title\"\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(supportForm.controls['title'])}\"\n                    maxlength=\"255\">\n            </div>\n            <div class=\"invalid-feedback\">\n                <span data-testid=\"new-support-title-invalid\" [translate]=\"validatorsService.getError(supportForm.controls['title'])\"\n                    *ngIf=\" validatorsService.isControlError(supportForm.controls['title'])\"></span>\n            </div>\n        </div>\n        <div *ngIf=\"!currentUser\">\n            <label>{{'Email' | translate}} *</label>\n            <div>\n                <input type=\"email\" class=\"form-control\" formControlName=\"email\" data-testid=\"new-support-email\"\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(supportForm.controls['email'])}\"\n                    maxlength=\"255\">\n            </div>\n            <div class=\"invalid-feedback\">\n                <span data-testid=\"new-support-email-invalid\" [translate]=\"validatorsService.getError(supportForm.controls['email'])\"\n                    *ngIf=\" validatorsService.isControlError(supportForm.controls['email'])\"></span>\n            </div>\n        </div>\n        <div>\n            <label>{{'Description' | translate}} *</label>\n            <div>\n                <textarea formControlName=\"description\" class=\"form-control\"\n                    data-testid=\"new-support-description\"\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(supportForm.controls['description'])}\"></textarea>\n            </div>\n            <div class=\"invalid-feedback\" >\n                <span data-testid=\"new-support-description-invalid\" [translate]=\" validatorsService.getError(supportForm.controls['description'])\"\n                *ngIf=\"validatorsService.isControlError(supportForm.controls['description'])\"></span>\n            </div>\n        </div>\n    </form>\n\n    <div *ngIf=\"status ==='send'\" translate=\"Your request has been registered\" data-testid=\"new-support-send-info\">\n    </div>\n    <div *ngIf=\"status ==='error'\" translate=\"An error has occurred, please renew your request\"\n        data-testid=\"new-support-error-info\">\n\n    </div>\n</div>\n<div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn rounded-pill btn-museum\" data-dismiss=\"modal\" translate=\"Close\" (click)=\"onClose()\"\n        data-testid=\"new-support-close-btn\"></button>\n    <button *ngIf=\"!loading && status==='new'\" type=\"button\" class=\"btn rounded-pill btn-museum\" translate=\"Submit\"\n        (click)=\"onSubmit()\" [disabled]=\"!supportForm.valid\" data-testid=\"new-support-submit-btn\"></button>\n</div>", styles: [".support-loader-container{width:88px;margin:auto}.invalid-feedback{height:16px}\n"], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["useLogo", "color"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SupportModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-support-modal', template: "<div class=\"modal-header\">\r\n    <h5 class=\"modal-title\" translate=\"Help\"></h5>\r\n</div>\r\n<div class=\"modal-body\">\r\n    <div class=\"support-loader-container\">\r\n        <lib-loader *ngIf=\"loading\"></lib-loader>\r\n    </div>\r\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"supportForm\" style=\"margin-top:1rem;\" *ngIf=\"!loading && status==='new'\">\r\n        <div>\r\n            <label>{{'Title' | translate}} *</label>\r\n            <div>\r\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" data-testid=\"new-support-title\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(supportForm.controls['title'])}\"\r\n                    maxlength=\"255\">\r\n            </div>\r\n            <div class=\"invalid-feedback\">\r\n                <span data-testid=\"new-support-title-invalid\" [translate]=\"validatorsService.getError(supportForm.controls['title'])\"\r\n                    *ngIf=\" validatorsService.isControlError(supportForm.controls['title'])\"></span>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!currentUser\">\r\n            <label>{{'Email' | translate}} *</label>\r\n            <div>\r\n                <input type=\"email\" class=\"form-control\" formControlName=\"email\" data-testid=\"new-support-email\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(supportForm.controls['email'])}\"\r\n                    maxlength=\"255\">\r\n            </div>\r\n            <div class=\"invalid-feedback\">\r\n                <span data-testid=\"new-support-email-invalid\" [translate]=\"validatorsService.getError(supportForm.controls['email'])\"\r\n                    *ngIf=\" validatorsService.isControlError(supportForm.controls['email'])\"></span>\r\n            </div>\r\n        </div>\r\n        <div>\r\n            <label>{{'Description' | translate}} *</label>\r\n            <div>\r\n                <textarea formControlName=\"description\" class=\"form-control\"\r\n                    data-testid=\"new-support-description\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(supportForm.controls['description'])}\"></textarea>\r\n            </div>\r\n            <div class=\"invalid-feedback\" >\r\n                <span data-testid=\"new-support-description-invalid\" [translate]=\" validatorsService.getError(supportForm.controls['description'])\"\r\n                *ngIf=\"validatorsService.isControlError(supportForm.controls['description'])\"></span>\r\n            </div>\r\n        </div>\r\n    </form>\r\n\r\n    <div *ngIf=\"status ==='send'\" translate=\"Your request has been registered\" data-testid=\"new-support-send-info\">\r\n    </div>\r\n    <div *ngIf=\"status ==='error'\" translate=\"An error has occurred, please renew your request\"\r\n        data-testid=\"new-support-error-info\">\r\n\r\n    </div>\r\n</div>\r\n<div class=\"modal-footer\">\r\n    <button type=\"button\" class=\"btn rounded-pill btn-museum\" data-dismiss=\"modal\" translate=\"Close\" (click)=\"onClose()\"\r\n        data-testid=\"new-support-close-btn\"></button>\r\n    <button *ngIf=\"!loading && status==='new'\" type=\"button\" class=\"btn rounded-pill btn-museum\" translate=\"Submit\"\r\n        (click)=\"onSubmit()\" [disabled]=\"!supportForm.valid\" data-testid=\"new-support-submit-btn\"></button>\r\n</div>", styles: [".support-loader-container{width:88px;margin:auto}.invalid-feedback{height:16px}\n"] }]
+            args: [{ selector: 'app-support-modal', template: "<div class=\"modal-header\">\n    <h5 class=\"modal-title\" translate=\"Help\"></h5>\n</div>\n<div class=\"modal-body\">\n    <div class=\"support-loader-container\">\n        <lib-loader *ngIf=\"loading\"></lib-loader>\n    </div>\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"supportForm\" style=\"margin-top:1rem;\" *ngIf=\"!loading && status==='new'\">\n        <div>\n            <label>{{'Title' | translate}} *</label>\n            <div>\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" data-testid=\"new-support-title\"\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(supportForm.controls['title'])}\"\n                    maxlength=\"255\">\n            </div>\n            <div class=\"invalid-feedback\">\n                <span data-testid=\"new-support-title-invalid\" [translate]=\"validatorsService.getError(supportForm.controls['title'])\"\n                    *ngIf=\" validatorsService.isControlError(supportForm.controls['title'])\"></span>\n            </div>\n        </div>\n        <div *ngIf=\"!currentUser\">\n            <label>{{'Email' | translate}} *</label>\n            <div>\n                <input type=\"email\" class=\"form-control\" formControlName=\"email\" data-testid=\"new-support-email\"\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(supportForm.controls['email'])}\"\n                    maxlength=\"255\">\n            </div>\n            <div class=\"invalid-feedback\">\n                <span data-testid=\"new-support-email-invalid\" [translate]=\"validatorsService.getError(supportForm.controls['email'])\"\n                    *ngIf=\" validatorsService.isControlError(supportForm.controls['email'])\"></span>\n            </div>\n        </div>\n        <div>\n            <label>{{'Description' | translate}} *</label>\n            <div>\n                <textarea formControlName=\"description\" class=\"form-control\"\n                    data-testid=\"new-support-description\"\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(supportForm.controls['description'])}\"></textarea>\n            </div>\n            <div class=\"invalid-feedback\" >\n                <span data-testid=\"new-support-description-invalid\" [translate]=\" validatorsService.getError(supportForm.controls['description'])\"\n                *ngIf=\"validatorsService.isControlError(supportForm.controls['description'])\"></span>\n            </div>\n        </div>\n    </form>\n\n    <div *ngIf=\"status ==='send'\" translate=\"Your request has been registered\" data-testid=\"new-support-send-info\">\n    </div>\n    <div *ngIf=\"status ==='error'\" translate=\"An error has occurred, please renew your request\"\n        data-testid=\"new-support-error-info\">\n\n    </div>\n</div>\n<div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn rounded-pill btn-museum\" data-dismiss=\"modal\" translate=\"Close\" (click)=\"onClose()\"\n        data-testid=\"new-support-close-btn\"></button>\n    <button *ngIf=\"!loading && status==='new'\" type=\"button\" class=\"btn rounded-pill btn-museum\" translate=\"Submit\"\n        (click)=\"onSubmit()\" [disabled]=\"!supportForm.valid\" data-testid=\"new-support-submit-btn\"></button>\n</div>", styles: [".support-loader-container{width:88px;margin:auto}.invalid-feedback{height:16px}\n"] }]
         }], ctorParameters: () => [{ type: SupportService }, { type: i1$2.NgbActiveModal }, { type: i3.UntypedFormBuilder }, { type: BaseUserService }, { type: ValidatorsService }] });
 
 class LocaleService {
@@ -13994,6 +15146,19 @@ class FeatureService extends BaseObjectService {
                 this.initFeatures();
             }
         });
+        // The Three.js viewer shows a whole space at once, with no zone to navigate into, so it
+        // announces itself here instead of through `zoneChange`.
+        this.zoneChangeService.spaceWithoutZones.subscribe((spaceID) => {
+            this.currentSpaceID = spaceID;
+            this.zoneIDFilter = null;
+            if (!spaceID) {
+                this.featureTags.next(null);
+                this.featureUpdated.next({ space: [], zone: null });
+            }
+            else if (!this.userService.isMuseumUser(spaceID)) {
+                this.initFeatures();
+            }
+        });
         this.updateDone.subscribe(() => {
             if (this.currentSpaceID) {
                 this.initFeatures();
@@ -14384,6 +15549,19 @@ class MeasurementService {
                     this.initMeasurements();
                 }
             });
+            // The Three.js viewer shows a whole space at once, with no zone to navigate into, so it
+            // announces itself here instead of through `zoneChange`.
+            this.zoneChangeService.spaceWithoutZones.subscribe((spaceID) => {
+                this.currentSpaceID = spaceID;
+                this.zoneIDFilter = null;
+                if (!spaceID) {
+                    this.measurementsTags.next(null);
+                    this.measurementsUpdated.next({ space: [], zone: null });
+                    this.measurementFilter = null;
+                    return;
+                }
+                this.initMeasurements();
+            });
             this.filterService.subscribeToDataFilterUpdate((dateRange) => {
                 this.dateFilter = dateRange;
                 this.initMeasurements();
@@ -14460,6 +15638,9 @@ class MeasurementService {
             type: PoiType.MEASURE,
             elementID: comment.id,
             matterportSweepID: sweepID,
+            // Only the Three.js viewer sends this: it records which 3D model the measurement was taken
+            // in, the same as createPoiForThreeJsPlacement does for the other tags.
+            ...(dataMeasurements.metadata ? { metadata: dataMeasurements.metadata } : {}),
         };
         const poi = await this.poiService.createPOIForSpaceID(poiInput);
         const screen = await fetch(screenshot);
@@ -15163,11 +16344,11 @@ class NavigationBarComponent {
         this.baseVisibilityService.isChangePositionVisible.next(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationBarComponent, deps: [{ token: 'currentAwsKinesisAnalyticsService' }, { token: i1$1.Router }, { token: SpaceService }, { token: BaseUserService }, { token: ZoneService }, { token: VisitService }, { token: ViewerService }, { token: NavigatorService }, { token: ZoneChangeService }, { token: BaseVisibilityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NavigationBarComponent, selector: "lib-navigation-bar", viewQueries: [{ propertyName: "navbarSelectMenu", first: true, predicate: ["navbarSelectMenu"], descendants: true }], ngImport: i0, template: "<nav class=\"navbar navbar-expand-md navbar-dark navbar-inverse second-nav\">\r\n    <div class=\"d-flex w-100\">\r\n        <div #navbarSelectMenu class=\"w-100\" id=\"nav-item-container-blue\">\r\n            <div class=\"d-flex flex-column flex-md-row p-1 mt-2\">\r\n                <select class=\"form-control flex-fill flex-lg-fill-unset location select-menu\"\r\n                    [(ngModel)]=\"selectedLocation\" (ngModelChange)=\"onLocationClick()\">\r\n                    <option [ngValue]=\"null\" selected>{{ 'Location' | translate }}</option>\r\n                    <option *ngFor=\"let loc of locations; index as index\" [ngValue]=\"loc\"> {{ loc.name }}</option>\r\n                </select>\r\n                <select class=\"form-control flex-fill flex-lg-fill-unset select-menu\" (change)=\"onVisitClick($event)\"\r\n                    *ngIf=\"visitsPerSpace && visitsPerSpace.length > 1\">\r\n                    <option value=\"default\" selected disabled hidden>{{'Visit' | translate}}</option>\r\n                    <option *ngFor=\"let visit of visitsPerSpace; index as index\" value=\"{{index}}\">{{ visit.name}}\r\n                    </option>\r\n                </select>\r\n                <select class=\"form-control flex-fill flex-lg-fill-unset floor select-menu\" [(ngModel)]=\"selectedFloor\"\r\n                    (ngModelChange)=\"onFloorClick()\">\r\n                    <option [ngValue]=\"null\" selected>{{'Floor' | translate}}</option>\r\n                    <option *ngFor=\"let floor of floorsPerSpace\" [ngValue]=\"floor\">{{ floor.name}}</option>\r\n                </select>\r\n                <select class=\"form-control flex-fill flex-lg-fill-unset select-menu zone\" [(ngModel)]=\"selectedZone\"\r\n                    (ngModelChange)=\"onZoneClick()\">\r\n                    <option [ngValue]=\"null\" selected>{{'Zone' | translate}}</option>\r\n                    <option *ngFor=\"let zone of zonesPerFloor\" [ngValue]=\"zone\"><span\r\n                            *ngIf=\"zone.code_ref\">{{zone.code_ref}}_</span>{{zone.name}}</option>\r\n                </select>\r\n                <select class=\"form-control flex-fill flex-lg-fill-unset select-menu\" [(ngModel)]=\"selectedChildZone\"\r\n                    *ngIf=\"childrenZones && childrenZones.length>0\" (ngModelChange)=\"onChildZoneClick()\">\r\n                    <option [ngValue]=\"null\" selected disabled>{{'Zone' | translate}}</option>\r\n                    <option *ngFor=\"let zone of childrenZones\" [ngValue]=\"zone\">{{ zone.name}}</option>\r\n                </select>\r\n                <button (click)=\"goTo()\"\r\n                    class=\"btn btn-outline-primary rounded-pill mx-2 w-md-fit-content h-md-fit-content align-self-md-center btn-3d d-none d-lg-block\"\r\n                    [disabled]=\"!selectedLocation || !selectedModel3d || !canGo()\">\r\n                    <i class=\"icon-go-to-3d d-inline-block\"></i> {{'3D visit' | translate}}\r\n                </button>\r\n            </div>\r\n            <div class=\"row align-items-center justify-content-center ml-0 p-1\" *ngIf=\"showLocation()\">\r\n                <p class=\"fw-bold lh-base align-middle text-center\">\r\n                    {{ showLocation() }}\r\n                </p>\r\n            </div>\r\n            <div class=\"row align-items-center justify-content-center ml-0 p-1 d-block d-lg-none\">\r\n                <button (click)=\"goTo()\"\r\n                    class=\"btn btn-outline-primary rounded-pill w-25 mx-2 w-md-fit-content h-md-fit-content align-self-md-center btn-3d\"\r\n                    [disabled]=\"!selectedLocation || !selectedModel3d || !canGo()\">\r\n                    <i class=\"icon-go-to-3d d-inline-block\"></i> {{'3D visit' | translate}}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</nav>", styles: [":host{position:sticky;top:0;height:123px}.navbar{z-index:200;padding:.4rem 1rem}.navbar.second-nav{z-index:199;background-color:var(--smarterplan-primary)}input,select{margin-right:15px}.select{background:transparent;border:none;color:#fff;margin:6px 20px 0}@media (min-width: 992px){.flex-lg-fill-unset{flex:unset!important}}.form-control{width:100%;min-width:80px;max-width:18%}.location{width:auto;max-width:35%}.floor,.zone{width:auto;max-width:30%}button{color:#fff;padding:5px 10px;font-size:1.1em}.navbar-toggler{margin-right:1em}.select-menu{max-width:inherit}.btn-3d .icon-go-to-3d{width:30px;height:30px;background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0D%0A<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0D%0A<svg version=\"1.1\" id=\"Calque_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0D%0A%09 viewBox=\"0 0 60 60\" style=\"enable-background:new 0 0 60 60;\" xml:space=\"preserve\">%0D%0A<style type=\"text/css\">%0D%0A%09.st0{fill:%23565656;}%0D%0A<\\/style>%0D%0A<g>%0D%0A%09<path class=\"st0\" d=\"M43.9,32.1V17.7c0-0.4-0.2-0.7-0.5-0.9l-12.8-8c-0.2-0.1-0.4-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2l-12.8,8%0D%0A%09%09c-0.3,0.2-0.5,0.5-0.5,0.9v14.4c0,0.4,0.2,0.7,0.5,0.9l12.8,8c0.3,0.2,0.8,0.2,1.1,0l12.8-8C43.7,32.8,43.9,32.5,43.9,32.1z%0D%0A%09%09 M28.9,38.2l-10.7-6.7v-12l10.7,6.7V38.2z M30,24.4l-10.8-6.8L30,10.9l10.8,6.8L30,24.4z M41.8,31.5l-10.7,6.7v-12l10.7-6.7V31.5z\"%0D%0A%09%09/>%0D%0A%09<path class=\"st0\" d=\"M56.1,29.3l-10.3-6.8v2l1.4,1v0l0.8,0.5l0,0l7,4.8c0.3,0.2,0.4,0.5,0.4,0.8c0,0.3-0.2,0.6-0.4,0.8l-6.8,4.7%0D%0A%09%09l0,0l-0.9,0.7v0l-2.9,2v0l-13.8,9.6c-0.3,0.2-0.8,0.2-1.1,0l-14.2-9.8l-2.6-1.8v0L5,32.4c-0.3-0.2-0.4-0.5-0.4-0.8%0D%0A%09%09c0-0.3,0.2-0.6,0.4-0.8l0,0l7.3-5l0,0l0.5-0.3v0l1.4-1v-2L3.9,29.3c-0.8,0.5-1.2,1.4-1.2,2.4c0,0.9,0.5,1.8,1.2,2.4l8.8,6.1v0%0D%0A%09%09l4.5,3.1l11.2,7.7c1,0.7,2.3,0.7,3.3,0l13.7-9.5l1.9-1.3v0l8.8-6.1c0.8-0.5,1.2-1.4,1.2-2.4S56.9,29.8,56.1,29.3z\"/>%0D%0A</g>%0D%0A</svg>%0D%0A');border:none;vertical-align:middle;fill:var(--smarterplan-primary)}.btn-3d:hover:enabled .icon-go-to-3d{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0D%0A<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0D%0A<svg version=\"1.1\" id=\"Calque_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0D%0A%09 viewBox=\"0 0 60 60\" style=\"enable-background:new 0 0 60 60;\" xml:space=\"preserve\">%0D%0A<style type=\"text/css\">%0D%0A%09.st0{fill:%23FFFFFF;}%0D%0A<\\/style>%0D%0A<g>%0D%0A%09<path class=\"st0\" d=\"M43.9,32.1V17.7c0-0.4-0.2-0.7-0.5-0.9l-12.8-8c-0.2-0.1-0.4-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2l-12.8,8%0D%0A%09%09c-0.3,0.2-0.5,0.5-0.5,0.9v14.4c0,0.4,0.2,0.7,0.5,0.9l12.8,8c0.3,0.2,0.8,0.2,1.1,0l12.8-8C43.7,32.8,43.9,32.5,43.9,32.1z%0D%0A%09%09 M28.9,38.2l-10.7-6.7v-12l10.7,6.7V38.2z M30,24.4l-10.8-6.8L30,10.9l10.8,6.8L30,24.4z M41.8,31.5l-10.7,6.7v-12l10.7-6.7V31.5z\"%0D%0A%09%09/>%0D%0A%09<path class=\"st0\" d=\"M56.1,29.3l-10.3-6.8v2l1.4,1v0l0.8,0.5l0,0l7,4.8c0.3,0.2,0.4,0.5,0.4,0.8c0,0.3-0.2,0.6-0.4,0.8l-6.8,4.7%0D%0A%09%09l0,0l-0.9,0.7v0l-2.9,2v0l-13.8,9.6c-0.3,0.2-0.8,0.2-1.1,0l-14.2-9.8l-2.6-1.8v0L5,32.4c-0.3-0.2-0.4-0.5-0.4-0.8%0D%0A%09%09c0-0.3,0.2-0.6,0.4-0.8l0,0l7.3-5l0,0l0.5-0.3v0l1.4-1v-2L3.9,29.3c-0.8,0.5-1.2,1.4-1.2,2.4c0,0.9,0.5,1.8,1.2,2.4l8.8,6.1v0%0D%0A%09%09l4.5,3.1l11.2,7.7c1,0.7,2.3,0.7,3.3,0l13.7-9.5l1.9-1.3v0l8.8-6.1c0.8-0.5,1.2-1.4,1.2-2.4S56.9,29.8,56.1,29.3z\"/>%0D%0A</g>%0D%0A</svg>%0D%0A')}.btn-3d[disabled]:hover .icon-go-to-3d{fill:var(--smarterplan-primary)}.outer_circle{background-color:#ebebeb;border-radius:50%;width:32px;height:32px;padding:1px}@media (max-width: 767px){.navbar{padding:.2rem .5rem}.form-control,.location,.floor,.zone{max-width:100%;margin-bottom:15px}input,select{margin-right:0;margin-bottom:15px}}\n"], dependencies: [{ kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NavigationBarComponent, selector: "lib-navigation-bar", viewQueries: [{ propertyName: "navbarSelectMenu", first: true, predicate: ["navbarSelectMenu"], descendants: true }], ngImport: i0, template: "<nav class=\"navbar navbar-expand-md navbar-dark navbar-inverse second-nav\">\n    <div class=\"d-flex w-100\">\n        <div #navbarSelectMenu class=\"w-100\" id=\"nav-item-container-blue\">\n            <div class=\"d-flex flex-column flex-md-row p-1 mt-2\">\n                <select class=\"form-control flex-fill flex-lg-fill-unset location select-menu\"\n                    [(ngModel)]=\"selectedLocation\" (ngModelChange)=\"onLocationClick()\">\n                    <option [ngValue]=\"null\" selected>{{ 'Location' | translate }}</option>\n                    <option *ngFor=\"let loc of locations; index as index\" [ngValue]=\"loc\"> {{ loc.name }}</option>\n                </select>\n                <select class=\"form-control flex-fill flex-lg-fill-unset select-menu\" (change)=\"onVisitClick($event)\"\n                    *ngIf=\"visitsPerSpace && visitsPerSpace.length > 1\">\n                    <option value=\"default\" selected disabled hidden>{{'Visit' | translate}}</option>\n                    <option *ngFor=\"let visit of visitsPerSpace; index as index\" value=\"{{index}}\">{{ visit.name}}\n                    </option>\n                </select>\n                <select class=\"form-control flex-fill flex-lg-fill-unset floor select-menu\" [(ngModel)]=\"selectedFloor\"\n                    (ngModelChange)=\"onFloorClick()\">\n                    <option [ngValue]=\"null\" selected>{{'Floor' | translate}}</option>\n                    <option *ngFor=\"let floor of floorsPerSpace\" [ngValue]=\"floor\">{{ floor.name}}</option>\n                </select>\n                <select class=\"form-control flex-fill flex-lg-fill-unset select-menu zone\" [(ngModel)]=\"selectedZone\"\n                    (ngModelChange)=\"onZoneClick()\">\n                    <option [ngValue]=\"null\" selected>{{'Zone' | translate}}</option>\n                    <option *ngFor=\"let zone of zonesPerFloor\" [ngValue]=\"zone\"><span\n                            *ngIf=\"zone.code_ref\">{{zone.code_ref}}_</span>{{zone.name}}</option>\n                </select>\n                <select class=\"form-control flex-fill flex-lg-fill-unset select-menu\" [(ngModel)]=\"selectedChildZone\"\n                    *ngIf=\"childrenZones && childrenZones.length>0\" (ngModelChange)=\"onChildZoneClick()\">\n                    <option [ngValue]=\"null\" selected disabled>{{'Zone' | translate}}</option>\n                    <option *ngFor=\"let zone of childrenZones\" [ngValue]=\"zone\">{{ zone.name}}</option>\n                </select>\n                <button (click)=\"goTo()\"\n                    class=\"btn btn-outline-primary rounded-pill mx-2 w-md-fit-content h-md-fit-content align-self-md-center btn-3d d-none d-lg-block\"\n                    [disabled]=\"!selectedLocation || !selectedModel3d || !canGo()\">\n                    <i class=\"icon-go-to-3d d-inline-block\"></i> {{'3D visit' | translate}}\n                </button>\n            </div>\n            <div class=\"row align-items-center justify-content-center ml-0 p-1\" *ngIf=\"showLocation()\">\n                <p class=\"fw-bold lh-base align-middle text-center\">\n                    {{ showLocation() }}\n                </p>\n            </div>\n            <div class=\"row align-items-center justify-content-center ml-0 p-1 d-block d-lg-none\">\n                <button (click)=\"goTo()\"\n                    class=\"btn btn-outline-primary rounded-pill w-25 mx-2 w-md-fit-content h-md-fit-content align-self-md-center btn-3d\"\n                    [disabled]=\"!selectedLocation || !selectedModel3d || !canGo()\">\n                    <i class=\"icon-go-to-3d d-inline-block\"></i> {{'3D visit' | translate}}\n                </button>\n            </div>\n        </div>\n    </div>\n</nav>", styles: [":host{position:sticky;top:0;height:123px}.navbar{z-index:200;padding:.4rem 1rem}.navbar.second-nav{z-index:199;background-color:var(--smarterplan-primary)}input,select{margin-right:15px}.select{background:transparent;border:none;color:#fff;margin:6px 20px 0}@media (min-width: 992px){.flex-lg-fill-unset{flex:unset!important}}.form-control{width:100%;min-width:80px;max-width:18%}.location{width:auto;max-width:35%}.floor,.zone{width:auto;max-width:30%}button{color:#fff;padding:5px 10px;font-size:1.1em}.navbar-toggler{margin-right:1em}.select-menu{max-width:inherit}.btn-3d .icon-go-to-3d{width:30px;height:30px;background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0A<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0A<svg version=\"1.1\" id=\"Calque_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0A%09 viewBox=\"0 0 60 60\" style=\"enable-background:new 0 0 60 60;\" xml:space=\"preserve\">%0A<style type=\"text/css\">%0A%09.st0{fill:%23565656;}%0A<\\/style>%0A<g>%0A%09<path class=\"st0\" d=\"M43.9,32.1V17.7c0-0.4-0.2-0.7-0.5-0.9l-12.8-8c-0.2-0.1-0.4-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2l-12.8,8%0A%09%09c-0.3,0.2-0.5,0.5-0.5,0.9v14.4c0,0.4,0.2,0.7,0.5,0.9l12.8,8c0.3,0.2,0.8,0.2,1.1,0l12.8-8C43.7,32.8,43.9,32.5,43.9,32.1z%0A%09%09 M28.9,38.2l-10.7-6.7v-12l10.7,6.7V38.2z M30,24.4l-10.8-6.8L30,10.9l10.8,6.8L30,24.4z M41.8,31.5l-10.7,6.7v-12l10.7-6.7V31.5z\"%0A%09%09/>%0A%09<path class=\"st0\" d=\"M56.1,29.3l-10.3-6.8v2l1.4,1v0l0.8,0.5l0,0l7,4.8c0.3,0.2,0.4,0.5,0.4,0.8c0,0.3-0.2,0.6-0.4,0.8l-6.8,4.7%0A%09%09l0,0l-0.9,0.7v0l-2.9,2v0l-13.8,9.6c-0.3,0.2-0.8,0.2-1.1,0l-14.2-9.8l-2.6-1.8v0L5,32.4c-0.3-0.2-0.4-0.5-0.4-0.8%0A%09%09c0-0.3,0.2-0.6,0.4-0.8l0,0l7.3-5l0,0l0.5-0.3v0l1.4-1v-2L3.9,29.3c-0.8,0.5-1.2,1.4-1.2,2.4c0,0.9,0.5,1.8,1.2,2.4l8.8,6.1v0%0A%09%09l4.5,3.1l11.2,7.7c1,0.7,2.3,0.7,3.3,0l13.7-9.5l1.9-1.3v0l8.8-6.1c0.8-0.5,1.2-1.4,1.2-2.4S56.9,29.8,56.1,29.3z\"/>%0A</g>%0A</svg>%0A');border:none;vertical-align:middle;fill:var(--smarterplan-primary)}.btn-3d:hover:enabled .icon-go-to-3d{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0A<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0A<svg version=\"1.1\" id=\"Calque_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0A%09 viewBox=\"0 0 60 60\" style=\"enable-background:new 0 0 60 60;\" xml:space=\"preserve\">%0A<style type=\"text/css\">%0A%09.st0{fill:%23FFFFFF;}%0A<\\/style>%0A<g>%0A%09<path class=\"st0\" d=\"M43.9,32.1V17.7c0-0.4-0.2-0.7-0.5-0.9l-12.8-8c-0.2-0.1-0.4-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2l-12.8,8%0A%09%09c-0.3,0.2-0.5,0.5-0.5,0.9v14.4c0,0.4,0.2,0.7,0.5,0.9l12.8,8c0.3,0.2,0.8,0.2,1.1,0l12.8-8C43.7,32.8,43.9,32.5,43.9,32.1z%0A%09%09 M28.9,38.2l-10.7-6.7v-12l10.7,6.7V38.2z M30,24.4l-10.8-6.8L30,10.9l10.8,6.8L30,24.4z M41.8,31.5l-10.7,6.7v-12l10.7-6.7V31.5z\"%0A%09%09/>%0A%09<path class=\"st0\" d=\"M56.1,29.3l-10.3-6.8v2l1.4,1v0l0.8,0.5l0,0l7,4.8c0.3,0.2,0.4,0.5,0.4,0.8c0,0.3-0.2,0.6-0.4,0.8l-6.8,4.7%0A%09%09l0,0l-0.9,0.7v0l-2.9,2v0l-13.8,9.6c-0.3,0.2-0.8,0.2-1.1,0l-14.2-9.8l-2.6-1.8v0L5,32.4c-0.3-0.2-0.4-0.5-0.4-0.8%0A%09%09c0-0.3,0.2-0.6,0.4-0.8l0,0l7.3-5l0,0l0.5-0.3v0l1.4-1v-2L3.9,29.3c-0.8,0.5-1.2,1.4-1.2,2.4c0,0.9,0.5,1.8,1.2,2.4l8.8,6.1v0%0A%09%09l4.5,3.1l11.2,7.7c1,0.7,2.3,0.7,3.3,0l13.7-9.5l1.9-1.3v0l8.8-6.1c0.8-0.5,1.2-1.4,1.2-2.4S56.9,29.8,56.1,29.3z\"/>%0A</g>%0A</svg>%0A')}.btn-3d[disabled]:hover .icon-go-to-3d{fill:var(--smarterplan-primary)}.outer_circle{background-color:#ebebeb;border-radius:50%;width:32px;height:32px;padding:1px}@media (max-width: 767px){.navbar{padding:.2rem .5rem}.form-control,.location,.floor,.zone{max-width:100%;margin-bottom:15px}input,select{margin-right:0;margin-bottom:15px}}\n"], dependencies: [{ kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-navigation-bar', template: "<nav class=\"navbar navbar-expand-md navbar-dark navbar-inverse second-nav\">\r\n    <div class=\"d-flex w-100\">\r\n        <div #navbarSelectMenu class=\"w-100\" id=\"nav-item-container-blue\">\r\n            <div class=\"d-flex flex-column flex-md-row p-1 mt-2\">\r\n                <select class=\"form-control flex-fill flex-lg-fill-unset location select-menu\"\r\n                    [(ngModel)]=\"selectedLocation\" (ngModelChange)=\"onLocationClick()\">\r\n                    <option [ngValue]=\"null\" selected>{{ 'Location' | translate }}</option>\r\n                    <option *ngFor=\"let loc of locations; index as index\" [ngValue]=\"loc\"> {{ loc.name }}</option>\r\n                </select>\r\n                <select class=\"form-control flex-fill flex-lg-fill-unset select-menu\" (change)=\"onVisitClick($event)\"\r\n                    *ngIf=\"visitsPerSpace && visitsPerSpace.length > 1\">\r\n                    <option value=\"default\" selected disabled hidden>{{'Visit' | translate}}</option>\r\n                    <option *ngFor=\"let visit of visitsPerSpace; index as index\" value=\"{{index}}\">{{ visit.name}}\r\n                    </option>\r\n                </select>\r\n                <select class=\"form-control flex-fill flex-lg-fill-unset floor select-menu\" [(ngModel)]=\"selectedFloor\"\r\n                    (ngModelChange)=\"onFloorClick()\">\r\n                    <option [ngValue]=\"null\" selected>{{'Floor' | translate}}</option>\r\n                    <option *ngFor=\"let floor of floorsPerSpace\" [ngValue]=\"floor\">{{ floor.name}}</option>\r\n                </select>\r\n                <select class=\"form-control flex-fill flex-lg-fill-unset select-menu zone\" [(ngModel)]=\"selectedZone\"\r\n                    (ngModelChange)=\"onZoneClick()\">\r\n                    <option [ngValue]=\"null\" selected>{{'Zone' | translate}}</option>\r\n                    <option *ngFor=\"let zone of zonesPerFloor\" [ngValue]=\"zone\"><span\r\n                            *ngIf=\"zone.code_ref\">{{zone.code_ref}}_</span>{{zone.name}}</option>\r\n                </select>\r\n                <select class=\"form-control flex-fill flex-lg-fill-unset select-menu\" [(ngModel)]=\"selectedChildZone\"\r\n                    *ngIf=\"childrenZones && childrenZones.length>0\" (ngModelChange)=\"onChildZoneClick()\">\r\n                    <option [ngValue]=\"null\" selected disabled>{{'Zone' | translate}}</option>\r\n                    <option *ngFor=\"let zone of childrenZones\" [ngValue]=\"zone\">{{ zone.name}}</option>\r\n                </select>\r\n                <button (click)=\"goTo()\"\r\n                    class=\"btn btn-outline-primary rounded-pill mx-2 w-md-fit-content h-md-fit-content align-self-md-center btn-3d d-none d-lg-block\"\r\n                    [disabled]=\"!selectedLocation || !selectedModel3d || !canGo()\">\r\n                    <i class=\"icon-go-to-3d d-inline-block\"></i> {{'3D visit' | translate}}\r\n                </button>\r\n            </div>\r\n            <div class=\"row align-items-center justify-content-center ml-0 p-1\" *ngIf=\"showLocation()\">\r\n                <p class=\"fw-bold lh-base align-middle text-center\">\r\n                    {{ showLocation() }}\r\n                </p>\r\n            </div>\r\n            <div class=\"row align-items-center justify-content-center ml-0 p-1 d-block d-lg-none\">\r\n                <button (click)=\"goTo()\"\r\n                    class=\"btn btn-outline-primary rounded-pill w-25 mx-2 w-md-fit-content h-md-fit-content align-self-md-center btn-3d\"\r\n                    [disabled]=\"!selectedLocation || !selectedModel3d || !canGo()\">\r\n                    <i class=\"icon-go-to-3d d-inline-block\"></i> {{'3D visit' | translate}}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</nav>", styles: [":host{position:sticky;top:0;height:123px}.navbar{z-index:200;padding:.4rem 1rem}.navbar.second-nav{z-index:199;background-color:var(--smarterplan-primary)}input,select{margin-right:15px}.select{background:transparent;border:none;color:#fff;margin:6px 20px 0}@media (min-width: 992px){.flex-lg-fill-unset{flex:unset!important}}.form-control{width:100%;min-width:80px;max-width:18%}.location{width:auto;max-width:35%}.floor,.zone{width:auto;max-width:30%}button{color:#fff;padding:5px 10px;font-size:1.1em}.navbar-toggler{margin-right:1em}.select-menu{max-width:inherit}.btn-3d .icon-go-to-3d{width:30px;height:30px;background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0D%0A<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0D%0A<svg version=\"1.1\" id=\"Calque_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0D%0A%09 viewBox=\"0 0 60 60\" style=\"enable-background:new 0 0 60 60;\" xml:space=\"preserve\">%0D%0A<style type=\"text/css\">%0D%0A%09.st0{fill:%23565656;}%0D%0A<\\/style>%0D%0A<g>%0D%0A%09<path class=\"st0\" d=\"M43.9,32.1V17.7c0-0.4-0.2-0.7-0.5-0.9l-12.8-8c-0.2-0.1-0.4-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2l-12.8,8%0D%0A%09%09c-0.3,0.2-0.5,0.5-0.5,0.9v14.4c0,0.4,0.2,0.7,0.5,0.9l12.8,8c0.3,0.2,0.8,0.2,1.1,0l12.8-8C43.7,32.8,43.9,32.5,43.9,32.1z%0D%0A%09%09 M28.9,38.2l-10.7-6.7v-12l10.7,6.7V38.2z M30,24.4l-10.8-6.8L30,10.9l10.8,6.8L30,24.4z M41.8,31.5l-10.7,6.7v-12l10.7-6.7V31.5z\"%0D%0A%09%09/>%0D%0A%09<path class=\"st0\" d=\"M56.1,29.3l-10.3-6.8v2l1.4,1v0l0.8,0.5l0,0l7,4.8c0.3,0.2,0.4,0.5,0.4,0.8c0,0.3-0.2,0.6-0.4,0.8l-6.8,4.7%0D%0A%09%09l0,0l-0.9,0.7v0l-2.9,2v0l-13.8,9.6c-0.3,0.2-0.8,0.2-1.1,0l-14.2-9.8l-2.6-1.8v0L5,32.4c-0.3-0.2-0.4-0.5-0.4-0.8%0D%0A%09%09c0-0.3,0.2-0.6,0.4-0.8l0,0l7.3-5l0,0l0.5-0.3v0l1.4-1v-2L3.9,29.3c-0.8,0.5-1.2,1.4-1.2,2.4c0,0.9,0.5,1.8,1.2,2.4l8.8,6.1v0%0D%0A%09%09l4.5,3.1l11.2,7.7c1,0.7,2.3,0.7,3.3,0l13.7-9.5l1.9-1.3v0l8.8-6.1c0.8-0.5,1.2-1.4,1.2-2.4S56.9,29.8,56.1,29.3z\"/>%0D%0A</g>%0D%0A</svg>%0D%0A');border:none;vertical-align:middle;fill:var(--smarterplan-primary)}.btn-3d:hover:enabled .icon-go-to-3d{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0D%0A<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0D%0A<svg version=\"1.1\" id=\"Calque_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0D%0A%09 viewBox=\"0 0 60 60\" style=\"enable-background:new 0 0 60 60;\" xml:space=\"preserve\">%0D%0A<style type=\"text/css\">%0D%0A%09.st0{fill:%23FFFFFF;}%0D%0A<\\/style>%0D%0A<g>%0D%0A%09<path class=\"st0\" d=\"M43.9,32.1V17.7c0-0.4-0.2-0.7-0.5-0.9l-12.8-8c-0.2-0.1-0.4-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2l-12.8,8%0D%0A%09%09c-0.3,0.2-0.5,0.5-0.5,0.9v14.4c0,0.4,0.2,0.7,0.5,0.9l12.8,8c0.3,0.2,0.8,0.2,1.1,0l12.8-8C43.7,32.8,43.9,32.5,43.9,32.1z%0D%0A%09%09 M28.9,38.2l-10.7-6.7v-12l10.7,6.7V38.2z M30,24.4l-10.8-6.8L30,10.9l10.8,6.8L30,24.4z M41.8,31.5l-10.7,6.7v-12l10.7-6.7V31.5z\"%0D%0A%09%09/>%0D%0A%09<path class=\"st0\" d=\"M56.1,29.3l-10.3-6.8v2l1.4,1v0l0.8,0.5l0,0l7,4.8c0.3,0.2,0.4,0.5,0.4,0.8c0,0.3-0.2,0.6-0.4,0.8l-6.8,4.7%0D%0A%09%09l0,0l-0.9,0.7v0l-2.9,2v0l-13.8,9.6c-0.3,0.2-0.8,0.2-1.1,0l-14.2-9.8l-2.6-1.8v0L5,32.4c-0.3-0.2-0.4-0.5-0.4-0.8%0D%0A%09%09c0-0.3,0.2-0.6,0.4-0.8l0,0l7.3-5l0,0l0.5-0.3v0l1.4-1v-2L3.9,29.3c-0.8,0.5-1.2,1.4-1.2,2.4c0,0.9,0.5,1.8,1.2,2.4l8.8,6.1v0%0D%0A%09%09l4.5,3.1l11.2,7.7c1,0.7,2.3,0.7,3.3,0l13.7-9.5l1.9-1.3v0l8.8-6.1c0.8-0.5,1.2-1.4,1.2-2.4S56.9,29.8,56.1,29.3z\"/>%0D%0A</g>%0D%0A</svg>%0D%0A')}.btn-3d[disabled]:hover .icon-go-to-3d{fill:var(--smarterplan-primary)}.outer_circle{background-color:#ebebeb;border-radius:50%;width:32px;height:32px;padding:1px}@media (max-width: 767px){.navbar{padding:.2rem .5rem}.form-control,.location,.floor,.zone{max-width:100%;margin-bottom:15px}input,select{margin-right:0;margin-bottom:15px}}\n"] }]
+            args: [{ selector: 'lib-navigation-bar', template: "<nav class=\"navbar navbar-expand-md navbar-dark navbar-inverse second-nav\">\n    <div class=\"d-flex w-100\">\n        <div #navbarSelectMenu class=\"w-100\" id=\"nav-item-container-blue\">\n            <div class=\"d-flex flex-column flex-md-row p-1 mt-2\">\n                <select class=\"form-control flex-fill flex-lg-fill-unset location select-menu\"\n                    [(ngModel)]=\"selectedLocation\" (ngModelChange)=\"onLocationClick()\">\n                    <option [ngValue]=\"null\" selected>{{ 'Location' | translate }}</option>\n                    <option *ngFor=\"let loc of locations; index as index\" [ngValue]=\"loc\"> {{ loc.name }}</option>\n                </select>\n                <select class=\"form-control flex-fill flex-lg-fill-unset select-menu\" (change)=\"onVisitClick($event)\"\n                    *ngIf=\"visitsPerSpace && visitsPerSpace.length > 1\">\n                    <option value=\"default\" selected disabled hidden>{{'Visit' | translate}}</option>\n                    <option *ngFor=\"let visit of visitsPerSpace; index as index\" value=\"{{index}}\">{{ visit.name}}\n                    </option>\n                </select>\n                <select class=\"form-control flex-fill flex-lg-fill-unset floor select-menu\" [(ngModel)]=\"selectedFloor\"\n                    (ngModelChange)=\"onFloorClick()\">\n                    <option [ngValue]=\"null\" selected>{{'Floor' | translate}}</option>\n                    <option *ngFor=\"let floor of floorsPerSpace\" [ngValue]=\"floor\">{{ floor.name}}</option>\n                </select>\n                <select class=\"form-control flex-fill flex-lg-fill-unset select-menu zone\" [(ngModel)]=\"selectedZone\"\n                    (ngModelChange)=\"onZoneClick()\">\n                    <option [ngValue]=\"null\" selected>{{'Zone' | translate}}</option>\n                    <option *ngFor=\"let zone of zonesPerFloor\" [ngValue]=\"zone\"><span\n                            *ngIf=\"zone.code_ref\">{{zone.code_ref}}_</span>{{zone.name}}</option>\n                </select>\n                <select class=\"form-control flex-fill flex-lg-fill-unset select-menu\" [(ngModel)]=\"selectedChildZone\"\n                    *ngIf=\"childrenZones && childrenZones.length>0\" (ngModelChange)=\"onChildZoneClick()\">\n                    <option [ngValue]=\"null\" selected disabled>{{'Zone' | translate}}</option>\n                    <option *ngFor=\"let zone of childrenZones\" [ngValue]=\"zone\">{{ zone.name}}</option>\n                </select>\n                <button (click)=\"goTo()\"\n                    class=\"btn btn-outline-primary rounded-pill mx-2 w-md-fit-content h-md-fit-content align-self-md-center btn-3d d-none d-lg-block\"\n                    [disabled]=\"!selectedLocation || !selectedModel3d || !canGo()\">\n                    <i class=\"icon-go-to-3d d-inline-block\"></i> {{'3D visit' | translate}}\n                </button>\n            </div>\n            <div class=\"row align-items-center justify-content-center ml-0 p-1\" *ngIf=\"showLocation()\">\n                <p class=\"fw-bold lh-base align-middle text-center\">\n                    {{ showLocation() }}\n                </p>\n            </div>\n            <div class=\"row align-items-center justify-content-center ml-0 p-1 d-block d-lg-none\">\n                <button (click)=\"goTo()\"\n                    class=\"btn btn-outline-primary rounded-pill w-25 mx-2 w-md-fit-content h-md-fit-content align-self-md-center btn-3d\"\n                    [disabled]=\"!selectedLocation || !selectedModel3d || !canGo()\">\n                    <i class=\"icon-go-to-3d d-inline-block\"></i> {{'3D visit' | translate}}\n                </button>\n            </div>\n        </div>\n    </div>\n</nav>", styles: [":host{position:sticky;top:0;height:123px}.navbar{z-index:200;padding:.4rem 1rem}.navbar.second-nav{z-index:199;background-color:var(--smarterplan-primary)}input,select{margin-right:15px}.select{background:transparent;border:none;color:#fff;margin:6px 20px 0}@media (min-width: 992px){.flex-lg-fill-unset{flex:unset!important}}.form-control{width:100%;min-width:80px;max-width:18%}.location{width:auto;max-width:35%}.floor,.zone{width:auto;max-width:30%}button{color:#fff;padding:5px 10px;font-size:1.1em}.navbar-toggler{margin-right:1em}.select-menu{max-width:inherit}.btn-3d .icon-go-to-3d{width:30px;height:30px;background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0A<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0A<svg version=\"1.1\" id=\"Calque_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0A%09 viewBox=\"0 0 60 60\" style=\"enable-background:new 0 0 60 60;\" xml:space=\"preserve\">%0A<style type=\"text/css\">%0A%09.st0{fill:%23565656;}%0A<\\/style>%0A<g>%0A%09<path class=\"st0\" d=\"M43.9,32.1V17.7c0-0.4-0.2-0.7-0.5-0.9l-12.8-8c-0.2-0.1-0.4-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2l-12.8,8%0A%09%09c-0.3,0.2-0.5,0.5-0.5,0.9v14.4c0,0.4,0.2,0.7,0.5,0.9l12.8,8c0.3,0.2,0.8,0.2,1.1,0l12.8-8C43.7,32.8,43.9,32.5,43.9,32.1z%0A%09%09 M28.9,38.2l-10.7-6.7v-12l10.7,6.7V38.2z M30,24.4l-10.8-6.8L30,10.9l10.8,6.8L30,24.4z M41.8,31.5l-10.7,6.7v-12l10.7-6.7V31.5z\"%0A%09%09/>%0A%09<path class=\"st0\" d=\"M56.1,29.3l-10.3-6.8v2l1.4,1v0l0.8,0.5l0,0l7,4.8c0.3,0.2,0.4,0.5,0.4,0.8c0,0.3-0.2,0.6-0.4,0.8l-6.8,4.7%0A%09%09l0,0l-0.9,0.7v0l-2.9,2v0l-13.8,9.6c-0.3,0.2-0.8,0.2-1.1,0l-14.2-9.8l-2.6-1.8v0L5,32.4c-0.3-0.2-0.4-0.5-0.4-0.8%0A%09%09c0-0.3,0.2-0.6,0.4-0.8l0,0l7.3-5l0,0l0.5-0.3v0l1.4-1v-2L3.9,29.3c-0.8,0.5-1.2,1.4-1.2,2.4c0,0.9,0.5,1.8,1.2,2.4l8.8,6.1v0%0A%09%09l4.5,3.1l11.2,7.7c1,0.7,2.3,0.7,3.3,0l13.7-9.5l1.9-1.3v0l8.8-6.1c0.8-0.5,1.2-1.4,1.2-2.4S56.9,29.8,56.1,29.3z\"/>%0A</g>%0A</svg>%0A');border:none;vertical-align:middle;fill:var(--smarterplan-primary)}.btn-3d:hover:enabled .icon-go-to-3d{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"utf-8\"?>%0A<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->%0A<svg version=\"1.1\" id=\"Calque_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"%0A%09 viewBox=\"0 0 60 60\" style=\"enable-background:new 0 0 60 60;\" xml:space=\"preserve\">%0A<style type=\"text/css\">%0A%09.st0{fill:%23FFFFFF;}%0A<\\/style>%0A<g>%0A%09<path class=\"st0\" d=\"M43.9,32.1V17.7c0-0.4-0.2-0.7-0.5-0.9l-12.8-8c-0.2-0.1-0.4-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2l-12.8,8%0A%09%09c-0.3,0.2-0.5,0.5-0.5,0.9v14.4c0,0.4,0.2,0.7,0.5,0.9l12.8,8c0.3,0.2,0.8,0.2,1.1,0l12.8-8C43.7,32.8,43.9,32.5,43.9,32.1z%0A%09%09 M28.9,38.2l-10.7-6.7v-12l10.7,6.7V38.2z M30,24.4l-10.8-6.8L30,10.9l10.8,6.8L30,24.4z M41.8,31.5l-10.7,6.7v-12l10.7-6.7V31.5z\"%0A%09%09/>%0A%09<path class=\"st0\" d=\"M56.1,29.3l-10.3-6.8v2l1.4,1v0l0.8,0.5l0,0l7,4.8c0.3,0.2,0.4,0.5,0.4,0.8c0,0.3-0.2,0.6-0.4,0.8l-6.8,4.7%0A%09%09l0,0l-0.9,0.7v0l-2.9,2v0l-13.8,9.6c-0.3,0.2-0.8,0.2-1.1,0l-14.2-9.8l-2.6-1.8v0L5,32.4c-0.3-0.2-0.4-0.5-0.4-0.8%0A%09%09c0-0.3,0.2-0.6,0.4-0.8l0,0l7.3-5l0,0l0.5-0.3v0l1.4-1v-2L3.9,29.3c-0.8,0.5-1.2,1.4-1.2,2.4c0,0.9,0.5,1.8,1.2,2.4l8.8,6.1v0%0A%09%09l4.5,3.1l11.2,7.7c1,0.7,2.3,0.7,3.3,0l13.7-9.5l1.9-1.3v0l8.8-6.1c0.8-0.5,1.2-1.4,1.2-2.4S56.9,29.8,56.1,29.3z\"/>%0A</g>%0A</svg>%0A')}.btn-3d[disabled]:hover .icon-go-to-3d{fill:var(--smarterplan-primary)}.outer_circle{background-color:#ebebeb;border-radius:50%;width:32px;height:32px;padding:1px}@media (max-width: 767px){.navbar{padding:.2rem .5rem}.form-control,.location,.floor,.zone{max-width:100%;margin-bottom:15px}input,select{margin-right:0;margin-bottom:15px}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['currentAwsKinesisAnalyticsService']
@@ -15436,11 +16617,11 @@ class MenuBarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuBarComponent, deps: [{ token: i1$1.Router }, { token: LocaleService }, { token: BaseUserService }, { token: NavigatorService }, { token: SupportService }, { token: BaseVisibilityService }, { token: i1$2.NgbCalendar }, { token: i1$2.NgbDateParserFormatter }, { token: FilterService }, { token: AmplifyCacheService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuBarComponent, selector: "lib-menu-bar", inputs: { cacheName: "cacheName" }, ngImport: i0, template: "<div id=\"menu-bar\">\r\n  <div *ngIf=\"!isVisitor\">\r\n    <nav class=\"navbar navbar-expand-md navbar-light p-0\">\r\n      <div class=\"container-fluid\" *ngIf=\"isVisible\">\r\n        <div class=\"navbar-brand order-md-0\" [routerLink]=\"['/dashboard']\">\r\n          <img alt=\"SmarterPlan\" src=\"../assets/images/logos/logo-immo.png\">\r\n        </div>\r\n        <div class=\"ms-auto nav-item dropdown profile_pic-container order-md-2\">\r\n          <div class=\"profile_pic dropdown-toggle\" data-testid=\"dropdown-menu-button\" data-bs-toggle=\"dropdown\">\r\n            <lib-avatar></lib-avatar>\r\n          </div>\r\n          <div class=\"dropdown-menu dropdown-menu-right\">\r\n            <p *ngIf=\"user && mission\" class=\"p-2\">\r\n              <span class=\"username\">{{ user.displayName }}</span><br />\r\n              <span class=\"user-role\">{{ mission.role }}</span><br />\r\n              <span class=\"org\">{{ mission.organisation ? mission.organisation.name : \"No organisation\" |\r\n                translate}}</span>\r\n            </p>\r\n            <div class=\"dropdown-divider\"></div>\r\n            <!-- <a class=\"dropdown-item\" routerLink=\"/debug\" *ngIf=\"isManager\">Debug</a> -->\r\n            <a class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</a>\r\n            <a class=\"dropdown-item\" routerLink=\"/dashboard\">{{'Data management' | translate}}</a>\r\n            <a class=\"dropdown-item\" data-testid=\"user-management-btn\" routerLink=\"/admin\" *ngIf=\"isManager\">\r\n              {{'Users management' | translate}}</a>\r\n            <a class=\"dropdown-item\" routerLink=\"/profile\">\r\n              {{'Profile' | translate}}</a>\r\n            <div class=\"dropdown-divider\"></div>\r\n            <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\r\n            <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\r\n              translate}}</button>\r\n          </div>\r\n        </div>\r\n        <button class=\"navbar-toggler order-md-1\" (click)=\"navbarCollapse.toggle()\" type=\"button\"\r\n          [attr.aria-expanded]=\"!isCollapsed\" aria-controls=\"navbar-collapse\">\r\n          <span class=\"navbar-toggler-icon\"></span>\r\n        </button>\r\n        <div class=\"navbar-collapse order-md-1\" #navbarCollapse=\"ngbCollapse\" [(ngbCollapse)]=\"isCollapsed\"\r\n          [animation]=\"false\">\r\n          <form\r\n            class=\"form-inline m-0 mt-2 form-container d-flex justify-content-start align-items-start align-items-md-center flex-column flex-md-row flex-nowrap filters-menu-block\">\r\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\r\n              <input class=\"form-control search-button m-1\" placeholder=\"keyword\" id=\"mainSearchBar\" type=\"text\">\r\n              <button class=\"btn btn-outline-primary rounded-pill m-1 w-fit-content h-fit-content align-self-md-center\"\r\n                (click)=\"onSubmit()\">{{'Search' |\r\n                translate}}</button>\r\n            </div>\r\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\r\n              <div class=\"input-group date-selector m-1\">\r\n                <input #dpFromDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpFromDate\"\r\n                  [value]=\"fromDate | formatDateNumberToDigits\"\r\n                  (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\">\r\n                <div class=\"input-group-append\">\r\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\r\n                    type=\"button\"></button>\r\n                </div>\r\n              </div>\r\n              <input name=\"datepicker\" class=\"form-control visually-hidden\" ngbDatepicker #datepicker=\"ngbDatepicker\"\r\n                [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\" [dayTemplate]=\"t\"\r\n                outsideDays=\"hidden\" [startDate]=\"fromDate || calendar.getToday()\" [container]=\"'body'\" tabindex=\"-1\">\r\n              <ng-template #t let-date let-focused=\"focused\">\r\n                <span class=\"custom-day\" [class.focused]=\"focused\" [class.range]=\"isRange(date)\"\r\n                  [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\r\n                  (mouseleave)=\"hoveredDate = null\">\r\n                  {{ date.day }}\r\n                </span>\r\n              </ng-template>\r\n              <span class=\"ms-1 p-2\">{{'to' | translate}}</span>\r\n              <div class=\"input-group date-selector m-1\">\r\n                <input #dpToDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpToDate\"\r\n                  [value]=\"toDate | formatDateNumberToDigits\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\">\r\n                <div class=\"input-group-append\">\r\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\r\n                    type=\"button\"></button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-1 justify-content-evenly\">\r\n              <button\r\n                class=\"btn btn-primary rounded-pill ms-1 w-25 w-md-fit-content h-md-fit-content align-self-md-center\"\r\n                type=\"button\" (click)=\"onApply()\" *ngIf=\"!isDateFilterApplied || dateChanged\">\r\n                {{'Apply' | translate}}\r\n              </button>\r\n              <span\r\n                class=\"appliedText ms-1 py-2 align-self-md-center pb-md-0 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\r\n                *ngIf=\"isDateFilterApplied && !dateChanged\">\r\n                <span class=\"iconify\" data-icon=\"ion:checkmark\" data-width=\"15\" data-height=\"15\"></span>\r\n                {{\"Applied\" | translate}}\r\n              </span>\r\n              <button\r\n                class=\"btn btn-outline-primary rounded-pill w-25 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\r\n                type=\"button\" (click)=\"onClearDates()\">{{'Clear'\r\n                |\r\n                translate}}</button>\r\n              <div\r\n                class=\"change-position-button align-self-end pb-2 align-self-md-center mx-2 pb-md-0 flex-nowrap w-25 w-md-fit-content h-md-fit-content\">\r\n                <input type=\"checkbox\" class=\"btn-check\" id=\"btn-check-outlined\" autocomplete=\"off\">\r\n                <label class=\"link-primary cursor-pointer text-decoration-underline\" (click)=\"onChangePositionClick()\"\r\n                  for=\"btn-check-outlined\">{{\r\n                  (isChangePositionVisible ? \"Close\" : \"Move to\") | translate }}</label>\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n    </nav>\r\n    <lib-navigation-bar *ngIf=\"isVisible && isChangePositionVisible\"></lib-navigation-bar>\r\n  </div>\r\n  <div *ngIf=\"isVisitor && isVisible\">\r\n    <div class=\"visitor-div\">\r\n      <div class=\"logo-container\" data-testid=\"dropdown-menu-button\">\r\n        <img class=\"img-logo\" alt=\"SmarterPlanLogo\" src=\"../assets/images/logos/logo-reserve.png\">\r\n      </div>\r\n      <div class=\"avatar-container-menu\">\r\n        <div class=\"profile_pic dropdown-toggle cursor-pointer\" data-bs-toggle=\"dropdown\">\r\n          <lib-avatar></lib-avatar>\r\n        </div>\r\n        <div class=\"dropdown-menu dropdown-menu-right\">\r\n          <button class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</button>\r\n          <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\r\n          <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\r\n            translate}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["#menu-bar{position:sticky;top:0;z-index:200}.navbar{z-index:200}.navbar-brand{padding-top:5px;padding-bottom:5px;cursor:pointer}.navbar-brand img{height:70px}.profile_pic{border-radius:50%;height:45px;width:45px;margin:8px;border:.2px solid rgb(150,150,150)}.navbar-nav .profile-pic-container .dropdown-menu{position:absolute}.navbar.second-nav{z-index:199;background-color:var(--smarterplan-primary)}.profile_pic.dropdown-toggle:after{display:none}.navbar-light{border-bottom:1px solid var(--smarterplan-primary);background-color:#fff}.navbar form{width:100%;margin:0;padding:0}input,select{margin-right:15px}.select{background:transparent;border:none;color:#fff;margin:6px 20px 0;width:auto}button{padding:5px 10px}button:disabled,button[disabled]{color:#c04f4f}.navbar-toggler{margin-right:1em}.icon{height:40px;width:40px;color:var(--smarterplan-primary)}.search-button-container{width:auto;align-items:stretch;justify-items:start}.search-button-container .search-button{width:auto;border-radius:1rem!important}.visitor-div{background-color:var(--smarterplan-primary);height:60px;display:flex;justify-content:space-between}.profile_pic-container{margin-right:1em}.logo-container,.img-logo{height:100%}.change-position-button{margin-left:2rem}.change-position-button label,.change-position-button .btn-check:checked,.change-position-button .btn-check:focus,.change-position-button .btn-outline-primary,.change-position-button .btn{box-shadow:none!important;outline:0}.change-position-button label{border-radius:16px}.change-position-button .btn-check:checked+.btn{background-color:var(--smarterplan-primary);color:#fff!important}.filters-menu-block{width:auto}@media (min-width: 1200px){.navbar-brand img{height:100px}.profile_pic{height:60px;width:60px;margin:15px}}@media (min-width: 992px) and (max-width: 1199.98px){.navbar-brand img{height:80px}.profile_pic{height:50px;width:50px;margin:12px}}@media (min-width: 768px) and (max-width: 991.98px){.navbar-brand img{height:60px}.profile_pic{height:40px;width:40px;margin:10px}}@media (max-width: 767.98px){.navbar-brand img{height:50px}.profile_pic{height:30px;width:30px;margin:8px}.search-button-container,.filters-menu-block{width:100%}}.form-container{margin:.5rem 0}.navbar-collapse.show{display:flex;padding-bottom:.5rem}.hidden{width:0;margin:0;border:none;padding:0}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:var(--smarterplan-primary-lighter);color:#fff}.custom-day.faded{background-color:var(--smarterplan-primary-transparent)}.calendar{height:100%}.appliedText,.appliedText span{color:var(--smarterplan-primary)}@media (max-width: 767px){.form-inline{flex-direction:column}}.hidden{opacity:0}.date-selector{flex-wrap:nowrap}.date-selector input{min-width:80px;margin:0}@media (min-width: 768px){.w-md-fit-content{width:fit-content!important}.h-md-content{height:fit-content!important}}\n"], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.NgbCollapse, selector: "[ngbCollapse]", inputs: ["animation", "ngbCollapse", "horizontal"], outputs: ["ngbCollapseChange", "shown", "hidden"], exportAs: ["ngbCollapse"] }, { kind: "directive", type: i1$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: AvatarComponent, selector: "lib-avatar", inputs: ["size", "userID"] }, { kind: "component", type: NavigationBarComponent, selector: "lib-navigation-bar" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FormatDateNumberToDigitsPipe, name: "formatDateNumberToDigits" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuBarComponent, selector: "lib-menu-bar", inputs: { cacheName: "cacheName" }, ngImport: i0, template: "<div id=\"menu-bar\">\n  <div *ngIf=\"!isVisitor\">\n    <nav class=\"navbar navbar-expand-md navbar-light p-0\">\n      <div class=\"container-fluid\" *ngIf=\"isVisible\">\n        <div class=\"navbar-brand order-md-0\" [routerLink]=\"['/dashboard']\">\n          <img alt=\"SmarterPlan\" src=\"../assets/images/logos/logo-immo.png\">\n        </div>\n        <div class=\"ms-auto nav-item dropdown profile_pic-container order-md-2\">\n          <div class=\"profile_pic dropdown-toggle\" data-testid=\"dropdown-menu-button\" data-bs-toggle=\"dropdown\">\n            <lib-avatar></lib-avatar>\n          </div>\n          <div class=\"dropdown-menu dropdown-menu-right\">\n            <p *ngIf=\"user && mission\" class=\"p-2\">\n              <span class=\"username\">{{ user.displayName }}</span><br />\n              <span class=\"user-role\">{{ mission.role }}</span><br />\n              <span class=\"org\">{{ mission.organisation ? mission.organisation.name : \"No organisation\" |\n                translate}}</span>\n            </p>\n            <div class=\"dropdown-divider\"></div>\n            <!-- <a class=\"dropdown-item\" routerLink=\"/debug\" *ngIf=\"isManager\">Debug</a> -->\n            <a class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</a>\n            <a class=\"dropdown-item\" routerLink=\"/dashboard\">{{'Data management' | translate}}</a>\n            <a class=\"dropdown-item\" data-testid=\"user-management-btn\" routerLink=\"/admin\" *ngIf=\"isManager\">\n              {{'Users management' | translate}}</a>\n            <a class=\"dropdown-item\" routerLink=\"/profile\">\n              {{'Profile' | translate}}</a>\n            <div class=\"dropdown-divider\"></div>\n            <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\n            <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\n              translate}}</button>\n          </div>\n        </div>\n        <button class=\"navbar-toggler order-md-1\" (click)=\"navbarCollapse.toggle()\" type=\"button\"\n          [attr.aria-expanded]=\"!isCollapsed\" aria-controls=\"navbar-collapse\">\n          <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=\"navbar-collapse order-md-1\" #navbarCollapse=\"ngbCollapse\" [(ngbCollapse)]=\"isCollapsed\"\n          [animation]=\"false\">\n          <form\n            class=\"form-inline m-0 mt-2 form-container d-flex justify-content-start align-items-start align-items-md-center flex-column flex-md-row flex-nowrap filters-menu-block\">\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\n              <input class=\"form-control search-button m-1\" placeholder=\"keyword\" id=\"mainSearchBar\" type=\"text\">\n              <button class=\"btn btn-outline-primary rounded-pill m-1 w-fit-content h-fit-content align-self-md-center\"\n                (click)=\"onSubmit()\">{{'Search' |\n                translate}}</button>\n            </div>\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\n              <div class=\"input-group date-selector m-1\">\n                <input #dpFromDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpFromDate\"\n                  [value]=\"fromDate | formatDateNumberToDigits\"\n                  (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\">\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\n                    type=\"button\"></button>\n                </div>\n              </div>\n              <input name=\"datepicker\" class=\"form-control visually-hidden\" ngbDatepicker #datepicker=\"ngbDatepicker\"\n                [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\" [dayTemplate]=\"t\"\n                outsideDays=\"hidden\" [startDate]=\"fromDate || calendar.getToday()\" [container]=\"'body'\" tabindex=\"-1\">\n              <ng-template #t let-date let-focused=\"focused\">\n                <span class=\"custom-day\" [class.focused]=\"focused\" [class.range]=\"isRange(date)\"\n                  [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\n                  (mouseleave)=\"hoveredDate = null\">\n                  {{ date.day }}\n                </span>\n              </ng-template>\n              <span class=\"ms-1 p-2\">{{'to' | translate}}</span>\n              <div class=\"input-group date-selector m-1\">\n                <input #dpToDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpToDate\"\n                  [value]=\"toDate | formatDateNumberToDigits\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\">\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\n                    type=\"button\"></button>\n                </div>\n              </div>\n            </div>\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-1 justify-content-evenly\">\n              <button\n                class=\"btn btn-primary rounded-pill ms-1 w-25 w-md-fit-content h-md-fit-content align-self-md-center\"\n                type=\"button\" (click)=\"onApply()\" *ngIf=\"!isDateFilterApplied || dateChanged\">\n                {{'Apply' | translate}}\n              </button>\n              <span\n                class=\"appliedText ms-1 py-2 align-self-md-center pb-md-0 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\n                *ngIf=\"isDateFilterApplied && !dateChanged\">\n                <span class=\"iconify\" data-icon=\"ion:checkmark\" data-width=\"15\" data-height=\"15\"></span>\n                {{\"Applied\" | translate}}\n              </span>\n              <button\n                class=\"btn btn-outline-primary rounded-pill w-25 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\n                type=\"button\" (click)=\"onClearDates()\">{{'Clear'\n                |\n                translate}}</button>\n              <div\n                class=\"change-position-button align-self-end pb-2 align-self-md-center mx-2 pb-md-0 flex-nowrap w-25 w-md-fit-content h-md-fit-content\">\n                <input type=\"checkbox\" class=\"btn-check\" id=\"btn-check-outlined\" autocomplete=\"off\">\n                <label class=\"link-primary cursor-pointer text-decoration-underline\" (click)=\"onChangePositionClick()\"\n                  for=\"btn-check-outlined\">{{\n                  (isChangePositionVisible ? \"Close\" : \"Move to\") | translate }}</label>\n              </div>\n            </div>\n          </form>\n        </div>\n      </div>\n    </nav>\n    <lib-navigation-bar *ngIf=\"isVisible && isChangePositionVisible\"></lib-navigation-bar>\n  </div>\n  <div *ngIf=\"isVisitor && isVisible\">\n    <div class=\"visitor-div\">\n      <div class=\"logo-container\" data-testid=\"dropdown-menu-button\">\n        <img class=\"img-logo\" alt=\"SmarterPlanLogo\" src=\"../assets/images/logos/logo-reserve.png\">\n      </div>\n      <div class=\"avatar-container-menu\">\n        <div class=\"profile_pic dropdown-toggle cursor-pointer\" data-bs-toggle=\"dropdown\">\n          <lib-avatar></lib-avatar>\n        </div>\n        <div class=\"dropdown-menu dropdown-menu-right\">\n          <button class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</button>\n          <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\n          <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\n            translate}}</button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: ["#menu-bar{position:sticky;top:0;z-index:200}.navbar{z-index:200}.navbar-brand{padding-top:5px;padding-bottom:5px;cursor:pointer}.navbar-brand img{height:70px}.profile_pic{border-radius:50%;height:45px;width:45px;margin:8px;border:.2px solid rgb(150,150,150)}.navbar-nav .profile-pic-container .dropdown-menu{position:absolute}.navbar.second-nav{z-index:199;background-color:var(--smarterplan-primary)}.profile_pic.dropdown-toggle:after{display:none}.navbar-light{border-bottom:1px solid var(--smarterplan-primary);background-color:#fff}.navbar form{width:100%;margin:0;padding:0}input,select{margin-right:15px}.select{background:transparent;border:none;color:#fff;margin:6px 20px 0;width:auto}button{padding:5px 10px}button:disabled,button[disabled]{color:#c04f4f}.navbar-toggler{margin-right:1em}.icon{height:40px;width:40px;color:var(--smarterplan-primary)}.search-button-container{width:auto;align-items:stretch;justify-items:start}.search-button-container .search-button{width:auto;border-radius:1rem!important}.visitor-div{background-color:var(--smarterplan-primary);height:60px;display:flex;justify-content:space-between}.profile_pic-container{margin-right:1em}.logo-container,.img-logo{height:100%}.change-position-button{margin-left:2rem}.change-position-button label,.change-position-button .btn-check:checked,.change-position-button .btn-check:focus,.change-position-button .btn-outline-primary,.change-position-button .btn{box-shadow:none!important;outline:0}.change-position-button label{border-radius:16px}.change-position-button .btn-check:checked+.btn{background-color:var(--smarterplan-primary);color:#fff!important}.filters-menu-block{width:auto}@media (min-width: 1200px){.navbar-brand img{height:100px}.profile_pic{height:60px;width:60px;margin:15px}}@media (min-width: 992px) and (max-width: 1199.98px){.navbar-brand img{height:80px}.profile_pic{height:50px;width:50px;margin:12px}}@media (min-width: 768px) and (max-width: 991.98px){.navbar-brand img{height:60px}.profile_pic{height:40px;width:40px;margin:10px}}@media (max-width: 767.98px){.navbar-brand img{height:50px}.profile_pic{height:30px;width:30px;margin:8px}.search-button-container,.filters-menu-block{width:100%}}.form-container{margin:.5rem 0}.navbar-collapse.show{display:flex;padding-bottom:.5rem}.hidden{width:0;margin:0;border:none;padding:0}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:var(--smarterplan-primary-lighter);color:#fff}.custom-day.faded{background-color:var(--smarterplan-primary-transparent)}.calendar{height:100%}.appliedText,.appliedText span{color:var(--smarterplan-primary)}@media (max-width: 767px){.form-inline{flex-direction:column}}.hidden{opacity:0}.date-selector{flex-wrap:nowrap}.date-selector input{min-width:80px;margin:0}@media (min-width: 768px){.w-md-fit-content{width:fit-content!important}.h-md-content{height:fit-content!important}}\n"], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.NgbCollapse, selector: "[ngbCollapse]", inputs: ["animation", "ngbCollapse", "horizontal"], outputs: ["ngbCollapseChange", "shown", "hidden"], exportAs: ["ngbCollapse"] }, { kind: "directive", type: i1$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: AvatarComponent, selector: "lib-avatar", inputs: ["size", "userID"] }, { kind: "component", type: NavigationBarComponent, selector: "lib-navigation-bar" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FormatDateNumberToDigitsPipe, name: "formatDateNumberToDigits" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-menu-bar', template: "<div id=\"menu-bar\">\r\n  <div *ngIf=\"!isVisitor\">\r\n    <nav class=\"navbar navbar-expand-md navbar-light p-0\">\r\n      <div class=\"container-fluid\" *ngIf=\"isVisible\">\r\n        <div class=\"navbar-brand order-md-0\" [routerLink]=\"['/dashboard']\">\r\n          <img alt=\"SmarterPlan\" src=\"../assets/images/logos/logo-immo.png\">\r\n        </div>\r\n        <div class=\"ms-auto nav-item dropdown profile_pic-container order-md-2\">\r\n          <div class=\"profile_pic dropdown-toggle\" data-testid=\"dropdown-menu-button\" data-bs-toggle=\"dropdown\">\r\n            <lib-avatar></lib-avatar>\r\n          </div>\r\n          <div class=\"dropdown-menu dropdown-menu-right\">\r\n            <p *ngIf=\"user && mission\" class=\"p-2\">\r\n              <span class=\"username\">{{ user.displayName }}</span><br />\r\n              <span class=\"user-role\">{{ mission.role }}</span><br />\r\n              <span class=\"org\">{{ mission.organisation ? mission.organisation.name : \"No organisation\" |\r\n                translate}}</span>\r\n            </p>\r\n            <div class=\"dropdown-divider\"></div>\r\n            <!-- <a class=\"dropdown-item\" routerLink=\"/debug\" *ngIf=\"isManager\">Debug</a> -->\r\n            <a class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</a>\r\n            <a class=\"dropdown-item\" routerLink=\"/dashboard\">{{'Data management' | translate}}</a>\r\n            <a class=\"dropdown-item\" data-testid=\"user-management-btn\" routerLink=\"/admin\" *ngIf=\"isManager\">\r\n              {{'Users management' | translate}}</a>\r\n            <a class=\"dropdown-item\" routerLink=\"/profile\">\r\n              {{'Profile' | translate}}</a>\r\n            <div class=\"dropdown-divider\"></div>\r\n            <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\r\n            <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\r\n              translate}}</button>\r\n          </div>\r\n        </div>\r\n        <button class=\"navbar-toggler order-md-1\" (click)=\"navbarCollapse.toggle()\" type=\"button\"\r\n          [attr.aria-expanded]=\"!isCollapsed\" aria-controls=\"navbar-collapse\">\r\n          <span class=\"navbar-toggler-icon\"></span>\r\n        </button>\r\n        <div class=\"navbar-collapse order-md-1\" #navbarCollapse=\"ngbCollapse\" [(ngbCollapse)]=\"isCollapsed\"\r\n          [animation]=\"false\">\r\n          <form\r\n            class=\"form-inline m-0 mt-2 form-container d-flex justify-content-start align-items-start align-items-md-center flex-column flex-md-row flex-nowrap filters-menu-block\">\r\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\r\n              <input class=\"form-control search-button m-1\" placeholder=\"keyword\" id=\"mainSearchBar\" type=\"text\">\r\n              <button class=\"btn btn-outline-primary rounded-pill m-1 w-fit-content h-fit-content align-self-md-center\"\r\n                (click)=\"onSubmit()\">{{'Search' |\r\n                translate}}</button>\r\n            </div>\r\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\r\n              <div class=\"input-group date-selector m-1\">\r\n                <input #dpFromDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpFromDate\"\r\n                  [value]=\"fromDate | formatDateNumberToDigits\"\r\n                  (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\">\r\n                <div class=\"input-group-append\">\r\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\r\n                    type=\"button\"></button>\r\n                </div>\r\n              </div>\r\n              <input name=\"datepicker\" class=\"form-control visually-hidden\" ngbDatepicker #datepicker=\"ngbDatepicker\"\r\n                [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\" [dayTemplate]=\"t\"\r\n                outsideDays=\"hidden\" [startDate]=\"fromDate || calendar.getToday()\" [container]=\"'body'\" tabindex=\"-1\">\r\n              <ng-template #t let-date let-focused=\"focused\">\r\n                <span class=\"custom-day\" [class.focused]=\"focused\" [class.range]=\"isRange(date)\"\r\n                  [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\r\n                  (mouseleave)=\"hoveredDate = null\">\r\n                  {{ date.day }}\r\n                </span>\r\n              </ng-template>\r\n              <span class=\"ms-1 p-2\">{{'to' | translate}}</span>\r\n              <div class=\"input-group date-selector m-1\">\r\n                <input #dpToDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpToDate\"\r\n                  [value]=\"toDate | formatDateNumberToDigits\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\">\r\n                <div class=\"input-group-append\">\r\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\r\n                    type=\"button\"></button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-1 justify-content-evenly\">\r\n              <button\r\n                class=\"btn btn-primary rounded-pill ms-1 w-25 w-md-fit-content h-md-fit-content align-self-md-center\"\r\n                type=\"button\" (click)=\"onApply()\" *ngIf=\"!isDateFilterApplied || dateChanged\">\r\n                {{'Apply' | translate}}\r\n              </button>\r\n              <span\r\n                class=\"appliedText ms-1 py-2 align-self-md-center pb-md-0 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\r\n                *ngIf=\"isDateFilterApplied && !dateChanged\">\r\n                <span class=\"iconify\" data-icon=\"ion:checkmark\" data-width=\"15\" data-height=\"15\"></span>\r\n                {{\"Applied\" | translate}}\r\n              </span>\r\n              <button\r\n                class=\"btn btn-outline-primary rounded-pill w-25 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\r\n                type=\"button\" (click)=\"onClearDates()\">{{'Clear'\r\n                |\r\n                translate}}</button>\r\n              <div\r\n                class=\"change-position-button align-self-end pb-2 align-self-md-center mx-2 pb-md-0 flex-nowrap w-25 w-md-fit-content h-md-fit-content\">\r\n                <input type=\"checkbox\" class=\"btn-check\" id=\"btn-check-outlined\" autocomplete=\"off\">\r\n                <label class=\"link-primary cursor-pointer text-decoration-underline\" (click)=\"onChangePositionClick()\"\r\n                  for=\"btn-check-outlined\">{{\r\n                  (isChangePositionVisible ? \"Close\" : \"Move to\") | translate }}</label>\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n    </nav>\r\n    <lib-navigation-bar *ngIf=\"isVisible && isChangePositionVisible\"></lib-navigation-bar>\r\n  </div>\r\n  <div *ngIf=\"isVisitor && isVisible\">\r\n    <div class=\"visitor-div\">\r\n      <div class=\"logo-container\" data-testid=\"dropdown-menu-button\">\r\n        <img class=\"img-logo\" alt=\"SmarterPlanLogo\" src=\"../assets/images/logos/logo-reserve.png\">\r\n      </div>\r\n      <div class=\"avatar-container-menu\">\r\n        <div class=\"profile_pic dropdown-toggle cursor-pointer\" data-bs-toggle=\"dropdown\">\r\n          <lib-avatar></lib-avatar>\r\n        </div>\r\n        <div class=\"dropdown-menu dropdown-menu-right\">\r\n          <button class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</button>\r\n          <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\r\n          <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\r\n            translate}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["#menu-bar{position:sticky;top:0;z-index:200}.navbar{z-index:200}.navbar-brand{padding-top:5px;padding-bottom:5px;cursor:pointer}.navbar-brand img{height:70px}.profile_pic{border-radius:50%;height:45px;width:45px;margin:8px;border:.2px solid rgb(150,150,150)}.navbar-nav .profile-pic-container .dropdown-menu{position:absolute}.navbar.second-nav{z-index:199;background-color:var(--smarterplan-primary)}.profile_pic.dropdown-toggle:after{display:none}.navbar-light{border-bottom:1px solid var(--smarterplan-primary);background-color:#fff}.navbar form{width:100%;margin:0;padding:0}input,select{margin-right:15px}.select{background:transparent;border:none;color:#fff;margin:6px 20px 0;width:auto}button{padding:5px 10px}button:disabled,button[disabled]{color:#c04f4f}.navbar-toggler{margin-right:1em}.icon{height:40px;width:40px;color:var(--smarterplan-primary)}.search-button-container{width:auto;align-items:stretch;justify-items:start}.search-button-container .search-button{width:auto;border-radius:1rem!important}.visitor-div{background-color:var(--smarterplan-primary);height:60px;display:flex;justify-content:space-between}.profile_pic-container{margin-right:1em}.logo-container,.img-logo{height:100%}.change-position-button{margin-left:2rem}.change-position-button label,.change-position-button .btn-check:checked,.change-position-button .btn-check:focus,.change-position-button .btn-outline-primary,.change-position-button .btn{box-shadow:none!important;outline:0}.change-position-button label{border-radius:16px}.change-position-button .btn-check:checked+.btn{background-color:var(--smarterplan-primary);color:#fff!important}.filters-menu-block{width:auto}@media (min-width: 1200px){.navbar-brand img{height:100px}.profile_pic{height:60px;width:60px;margin:15px}}@media (min-width: 992px) and (max-width: 1199.98px){.navbar-brand img{height:80px}.profile_pic{height:50px;width:50px;margin:12px}}@media (min-width: 768px) and (max-width: 991.98px){.navbar-brand img{height:60px}.profile_pic{height:40px;width:40px;margin:10px}}@media (max-width: 767.98px){.navbar-brand img{height:50px}.profile_pic{height:30px;width:30px;margin:8px}.search-button-container,.filters-menu-block{width:100%}}.form-container{margin:.5rem 0}.navbar-collapse.show{display:flex;padding-bottom:.5rem}.hidden{width:0;margin:0;border:none;padding:0}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:var(--smarterplan-primary-lighter);color:#fff}.custom-day.faded{background-color:var(--smarterplan-primary-transparent)}.calendar{height:100%}.appliedText,.appliedText span{color:var(--smarterplan-primary)}@media (max-width: 767px){.form-inline{flex-direction:column}}.hidden{opacity:0}.date-selector{flex-wrap:nowrap}.date-selector input{min-width:80px;margin:0}@media (min-width: 768px){.w-md-fit-content{width:fit-content!important}.h-md-content{height:fit-content!important}}\n"] }]
+            args: [{ selector: 'lib-menu-bar', template: "<div id=\"menu-bar\">\n  <div *ngIf=\"!isVisitor\">\n    <nav class=\"navbar navbar-expand-md navbar-light p-0\">\n      <div class=\"container-fluid\" *ngIf=\"isVisible\">\n        <div class=\"navbar-brand order-md-0\" [routerLink]=\"['/dashboard']\">\n          <img alt=\"SmarterPlan\" src=\"../assets/images/logos/logo-immo.png\">\n        </div>\n        <div class=\"ms-auto nav-item dropdown profile_pic-container order-md-2\">\n          <div class=\"profile_pic dropdown-toggle\" data-testid=\"dropdown-menu-button\" data-bs-toggle=\"dropdown\">\n            <lib-avatar></lib-avatar>\n          </div>\n          <div class=\"dropdown-menu dropdown-menu-right\">\n            <p *ngIf=\"user && mission\" class=\"p-2\">\n              <span class=\"username\">{{ user.displayName }}</span><br />\n              <span class=\"user-role\">{{ mission.role }}</span><br />\n              <span class=\"org\">{{ mission.organisation ? mission.organisation.name : \"No organisation\" |\n                translate}}</span>\n            </p>\n            <div class=\"dropdown-divider\"></div>\n            <!-- <a class=\"dropdown-item\" routerLink=\"/debug\" *ngIf=\"isManager\">Debug</a> -->\n            <a class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</a>\n            <a class=\"dropdown-item\" routerLink=\"/dashboard\">{{'Data management' | translate}}</a>\n            <a class=\"dropdown-item\" data-testid=\"user-management-btn\" routerLink=\"/admin\" *ngIf=\"isManager\">\n              {{'Users management' | translate}}</a>\n            <a class=\"dropdown-item\" routerLink=\"/profile\">\n              {{'Profile' | translate}}</a>\n            <div class=\"dropdown-divider\"></div>\n            <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\n            <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\n              translate}}</button>\n          </div>\n        </div>\n        <button class=\"navbar-toggler order-md-1\" (click)=\"navbarCollapse.toggle()\" type=\"button\"\n          [attr.aria-expanded]=\"!isCollapsed\" aria-controls=\"navbar-collapse\">\n          <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=\"navbar-collapse order-md-1\" #navbarCollapse=\"ngbCollapse\" [(ngbCollapse)]=\"isCollapsed\"\n          [animation]=\"false\">\n          <form\n            class=\"form-inline m-0 mt-2 form-container d-flex justify-content-start align-items-start align-items-md-center flex-column flex-md-row flex-nowrap filters-menu-block\">\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\n              <input class=\"form-control search-button m-1\" placeholder=\"keyword\" id=\"mainSearchBar\" type=\"text\">\n              <button class=\"btn btn-outline-primary rounded-pill m-1 w-fit-content h-fit-content align-self-md-center\"\n                (click)=\"onSubmit()\">{{'Search' |\n                translate}}</button>\n            </div>\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\n              <div class=\"input-group date-selector m-1\">\n                <input #dpFromDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpFromDate\"\n                  [value]=\"fromDate | formatDateNumberToDigits\"\n                  (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\">\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\n                    type=\"button\"></button>\n                </div>\n              </div>\n              <input name=\"datepicker\" class=\"form-control visually-hidden\" ngbDatepicker #datepicker=\"ngbDatepicker\"\n                [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\" [dayTemplate]=\"t\"\n                outsideDays=\"hidden\" [startDate]=\"fromDate || calendar.getToday()\" [container]=\"'body'\" tabindex=\"-1\">\n              <ng-template #t let-date let-focused=\"focused\">\n                <span class=\"custom-day\" [class.focused]=\"focused\" [class.range]=\"isRange(date)\"\n                  [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\n                  (mouseleave)=\"hoveredDate = null\">\n                  {{ date.day }}\n                </span>\n              </ng-template>\n              <span class=\"ms-1 p-2\">{{'to' | translate}}</span>\n              <div class=\"input-group date-selector m-1\">\n                <input #dpToDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpToDate\"\n                  [value]=\"toDate | formatDateNumberToDigits\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\">\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\n                    type=\"button\"></button>\n                </div>\n              </div>\n            </div>\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-1 justify-content-evenly\">\n              <button\n                class=\"btn btn-primary rounded-pill ms-1 w-25 w-md-fit-content h-md-fit-content align-self-md-center\"\n                type=\"button\" (click)=\"onApply()\" *ngIf=\"!isDateFilterApplied || dateChanged\">\n                {{'Apply' | translate}}\n              </button>\n              <span\n                class=\"appliedText ms-1 py-2 align-self-md-center pb-md-0 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\n                *ngIf=\"isDateFilterApplied && !dateChanged\">\n                <span class=\"iconify\" data-icon=\"ion:checkmark\" data-width=\"15\" data-height=\"15\"></span>\n                {{\"Applied\" | translate}}\n              </span>\n              <button\n                class=\"btn btn-outline-primary rounded-pill w-25 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\n                type=\"button\" (click)=\"onClearDates()\">{{'Clear'\n                |\n                translate}}</button>\n              <div\n                class=\"change-position-button align-self-end pb-2 align-self-md-center mx-2 pb-md-0 flex-nowrap w-25 w-md-fit-content h-md-fit-content\">\n                <input type=\"checkbox\" class=\"btn-check\" id=\"btn-check-outlined\" autocomplete=\"off\">\n                <label class=\"link-primary cursor-pointer text-decoration-underline\" (click)=\"onChangePositionClick()\"\n                  for=\"btn-check-outlined\">{{\n                  (isChangePositionVisible ? \"Close\" : \"Move to\") | translate }}</label>\n              </div>\n            </div>\n          </form>\n        </div>\n      </div>\n    </nav>\n    <lib-navigation-bar *ngIf=\"isVisible && isChangePositionVisible\"></lib-navigation-bar>\n  </div>\n  <div *ngIf=\"isVisitor && isVisible\">\n    <div class=\"visitor-div\">\n      <div class=\"logo-container\" data-testid=\"dropdown-menu-button\">\n        <img class=\"img-logo\" alt=\"SmarterPlanLogo\" src=\"../assets/images/logos/logo-reserve.png\">\n      </div>\n      <div class=\"avatar-container-menu\">\n        <div class=\"profile_pic dropdown-toggle cursor-pointer\" data-bs-toggle=\"dropdown\">\n          <lib-avatar></lib-avatar>\n        </div>\n        <div class=\"dropdown-menu dropdown-menu-right\">\n          <button class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</button>\n          <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\n          <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\n            translate}}</button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: ["#menu-bar{position:sticky;top:0;z-index:200}.navbar{z-index:200}.navbar-brand{padding-top:5px;padding-bottom:5px;cursor:pointer}.navbar-brand img{height:70px}.profile_pic{border-radius:50%;height:45px;width:45px;margin:8px;border:.2px solid rgb(150,150,150)}.navbar-nav .profile-pic-container .dropdown-menu{position:absolute}.navbar.second-nav{z-index:199;background-color:var(--smarterplan-primary)}.profile_pic.dropdown-toggle:after{display:none}.navbar-light{border-bottom:1px solid var(--smarterplan-primary);background-color:#fff}.navbar form{width:100%;margin:0;padding:0}input,select{margin-right:15px}.select{background:transparent;border:none;color:#fff;margin:6px 20px 0;width:auto}button{padding:5px 10px}button:disabled,button[disabled]{color:#c04f4f}.navbar-toggler{margin-right:1em}.icon{height:40px;width:40px;color:var(--smarterplan-primary)}.search-button-container{width:auto;align-items:stretch;justify-items:start}.search-button-container .search-button{width:auto;border-radius:1rem!important}.visitor-div{background-color:var(--smarterplan-primary);height:60px;display:flex;justify-content:space-between}.profile_pic-container{margin-right:1em}.logo-container,.img-logo{height:100%}.change-position-button{margin-left:2rem}.change-position-button label,.change-position-button .btn-check:checked,.change-position-button .btn-check:focus,.change-position-button .btn-outline-primary,.change-position-button .btn{box-shadow:none!important;outline:0}.change-position-button label{border-radius:16px}.change-position-button .btn-check:checked+.btn{background-color:var(--smarterplan-primary);color:#fff!important}.filters-menu-block{width:auto}@media (min-width: 1200px){.navbar-brand img{height:100px}.profile_pic{height:60px;width:60px;margin:15px}}@media (min-width: 992px) and (max-width: 1199.98px){.navbar-brand img{height:80px}.profile_pic{height:50px;width:50px;margin:12px}}@media (min-width: 768px) and (max-width: 991.98px){.navbar-brand img{height:60px}.profile_pic{height:40px;width:40px;margin:10px}}@media (max-width: 767.98px){.navbar-brand img{height:50px}.profile_pic{height:30px;width:30px;margin:8px}.search-button-container,.filters-menu-block{width:100%}}.form-container{margin:.5rem 0}.navbar-collapse.show{display:flex;padding-bottom:.5rem}.hidden{width:0;margin:0;border:none;padding:0}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:var(--smarterplan-primary-lighter);color:#fff}.custom-day.faded{background-color:var(--smarterplan-primary-transparent)}.calendar{height:100%}.appliedText,.appliedText span{color:var(--smarterplan-primary)}@media (max-width: 767px){.form-inline{flex-direction:column}}.hidden{opacity:0}.date-selector{flex-wrap:nowrap}.date-selector input{min-width:80px;margin:0}@media (min-width: 768px){.w-md-fit-content{width:fit-content!important}.h-md-content{height:fit-content!important}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Router }, { type: LocaleService }, { type: BaseUserService }, { type: NavigatorService }, { type: SupportService }, { type: BaseVisibilityService }, { type: i1$2.NgbCalendar }, { type: i1$2.NgbDateParserFormatter }, { type: FilterService }, { type: AmplifyCacheService }], propDecorators: { cacheName: [{
                 type: Input
             }] } });
@@ -15595,27 +16776,27 @@ class BaseTagService {
       throw new Error('updatePoiMetadata is not implemented in the base class.');
     }*/
     async prepareEquipmentHtml(equip) {
-        throw new Error(`prepareEquipmentHtml is not implemented in the base class.
+        throw new Error(`prepareEquipmentHtml is not implemented in the base class.
         Please override this method in your extended class.`);
     }
     async prepareTicketHtml(ticket) {
-        throw new Error(`prepareTicketHtml is not implemented in the base class.
+        throw new Error(`prepareTicketHtml is not implemented in the base class.
                          Please override this method in your extended class.`);
     }
     async prepareFeatureHtml(feature) {
-        throw new Error(`prepareFeatureHtml is not implemented in the base class.
+        throw new Error(`prepareFeatureHtml is not implemented in the base class.
                          Please override this method in your extended class.`);
     }
     async prepareMeasurementHtml(measure) {
-        throw new Error(`prepareMeasurementHtml is not implemented in the base class.
+        throw new Error(`prepareMeasurementHtml is not implemented in the base class.
                          Please override this method in your extended class.`);
     }
     async prepareDeskHtml(feature) {
-        throw new Error(`prepareDeskHtml is not implemented in the base class.
+        throw new Error(`prepareDeskHtml is not implemented in the base class.
                          Please override this method in your extended class.`);
     }
     async prepareIndicatorHtml(feature) {
-        throw new Error(`prepareDeskHtml is not implemented in the base class.
+        throw new Error(`prepareDeskHtml is not implemented in the base class.
                          Please override this method in your extended class.`);
     }
     async getSignedTagIconSource(tagIconSrc) {
@@ -15624,15 +16805,15 @@ class BaseTagService {
     getIconTagImageForFeature(feature, poi) {
         // const tagIcon = JSON.parse(poi.tagIcon);
         // return tagIcon.src;
-        throw new Error(`getIconTagImageForFeature is not implemented in the base class.
+        throw new Error(`getIconTagImageForFeature is not implemented in the base class.
                          Please override this method in your extended class.`);
     }
     getScriptForTag(object, tagType) {
-        throw new Error(`getScriptForTag is not implemented in the base class.
+        throw new Error(`getScriptForTag is not implemented in the base class.
         Please override this method in your extended class.`);
     }
     getAnnexeForCommentTypeInFeature(feature, commentType) {
-        throw new Error(`getAnnexeForCommentTypeInFeature is not implemented in the base class.
+        throw new Error(`getAnnexeForCommentTypeInFeature is not implemented in the base class.
         Please override this method in your extended class.`);
     }
     getBillboardMediaToEmbed(object) {
@@ -15641,27 +16822,27 @@ class BaseTagService {
         return { comment: null, tagDescription: '' };
     }
     onActionDetailClick(url) {
-        throw new Error(`onActionDetailClick is not implemented in the base class.
+        throw new Error(`onActionDetailClick is not implemented in the base class.
         Please override this method in your extended class.`);
     }
     onActionAudioClick(audioCommentID) {
-        throw new Error(`onActionDetailClick is not implemented in the base class.
+        throw new Error(`onActionDetailClick is not implemented in the base class.
         Please override this method in your extended class.`);
     }
     onActionVideoClick(url) {
-        throw new Error(`onActionVideoClick is not implemented in the base class.
+        throw new Error(`onActionVideoClick is not implemented in the base class.
         Please override this method in your extended class.`);
     }
     onActionImageClick(imageCommentID) {
-        throw new Error(`onActionImageClick is not implemented in the base class.
+        throw new Error(`onActionImageClick is not implemented in the base class.
         Please override this method in your extended class.`);
     }
     onActionDocClick(url) {
-        throw new Error(`onActionDocClick is not implemented in the base class.
+        throw new Error(`onActionDocClick is not implemented in the base class.
         Please override this method in your extended class.`);
     }
     onActionYoutubeClick(url) {
-        throw new Error(`onActionYoutubeClick is not implemented in the base class.
+        throw new Error(`onActionYoutubeClick is not implemented in the base class.
         Please override this method in your extended class.`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -19306,5 +20487,5 @@ function floatValidator() {
  * Generated bundle index. Do not edit.
  */
 
-export { AffectationService, AvatarComponent, BaseLateralTabService, BaseTagService, BaseUserService, BaseVisibilityService, CameraMode, CaptureService, CaptureViewer, CommentService, CommentType, Config, ContentService, CsvExportComponent, DomainService, DomainType, DurationToStringPipe, EmailStatus, EquipmentService, EventService, EventStatus, EventType, FeatureService, FeatureType, FilterService, HashtagFromIdPipe, HashtagService, InterventionService, InventoryStatus, LayerService, LevelStatus, LoaderComponent, Locale, LocaleService, MATTERPORT_SDK_KEY, MatterportImportService, MatterportService, MatterportTagCopyService, MatterportViewType, MattertagActionMode, MattertagData, MeasurementService, MenuBarComponent, MissionService, NavigationService, NavigatorService, NgxSmarterplanCoreModule, NgxSmarterplanCoreService, NodeService, Object3DService, OperationService, OrganisationService, PaymentStatus, PlanService, PoiService, PoiType, ProfileEntity, ProfileService, ProfileStatus, PropertyService, PropertyType, RoleStatus, SafeUrlPipe, SearchBarComponent, SearchObjectType, SearchService, SpModule, SpaceService, SpaceStatus, StatusEquipment, SupportModalComponent, SupportService, TagAction, TemplateService, ThreeJsImportService, ThreeJsService, TicketPriority, TicketStatus, TicketType, TicketsService, TimeDateToLocalStringPipe, TypeNote, UsernameFromIdPipe, ValidatorsService, ViewerInteractions, ViewerService, VisitService, ZoneChangeService, ZoneService, applyRigidTransformToDirection, applyRigidTransformToPoint, applyRigidTransformToYRotationDeg, arraysContainSameElements, checkElementById, computeRigidTransform, convertTimestampToLocalZone, copyFileInS3, copyFileInS3ViaDownload, dateHasExpired, dateTimeToLocalString, deleteFromS3, distance, downloadBlob, downloadEquipmentDocument, downloadFile, downloadFileAsObject, durationToString, emailValidator, enumToArray, filterUniqueArrayByID, floatValidator, getBufferForFileFromS3, getCoefficientsForImage, getCurrentLang, getDistanceBetweenTwoPoints, getHighestLevelForMissions, getHighestRoleForMissions, getLevelsBelow, getLocaleLong, getLocaleShort, getMetaForImage, getRolesBelowForManager, getSignedFile, getSignedImageUrlForEquipment, getSignedImageUrlForProfile, getSignedImageUrlForSpace, getSpaceIDFromUrl, getVisitUrl, isEmptyObject, listFilesInFolder, mean, noEmptyValidator, numberToDateString, openDocument, openModalForVisitSwitch, parseThreeJsPlacement, poiTypeToString, pointToString, removeAllFilesFromFolderS3, removeNullKeysFromObject, showScanPointsOnPlanInDiv, shuffleArray, solveThreeJsAlignment, sortAlphabeticallyOnName, stringLocaleToEnum, stringToLowercaseNoSpaces, styleButton, textValidator, translateDatePeriod, uploadBase64Image, uploadBase64ImageWithRetry, uploadFileToS3, uploadFileToS3WithProgress, uploadJsonToS3, validEmail, wait, waitUntil };
+export { AffectationService, AvatarComponent, BaseLateralTabService, BaseTagService, BaseUserService, BaseVisibilityService, CameraMode, CaptureService, CaptureViewer, CommentService, CommentType, Config, ContentService, CsvExportComponent, DomainService, DomainType, DurationToStringPipe, EmailStatus, EquipmentService, EventService, EventStatus, EventType, FeatureService, FeatureType, FilterService, HashtagFromIdPipe, HashtagService, InterventionService, InventoryStatus, LayerService, LevelStatus, LoaderComponent, Locale, LocaleService, MATTERPORT_SDK_KEY, MatterportImportService, MatterportService, MatterportTagCopyService, MatterportViewType, MattertagActionMode, MattertagData, MeasurementService, MenuBarComponent, MissionService, NavigationService, NavigatorService, NgxSmarterplanCoreModule, NgxSmarterplanCoreService, NodeService, Object3DService, OperationService, OrganisationService, PaymentStatus, PlanService, PoiService, PoiType, ProfileEntity, ProfileService, ProfileStatus, PropertyService, PropertyType, RoleStatus, SafeUrlPipe, SearchBarComponent, SearchObjectType, SearchService, SpModule, SpaceService, SpaceStatus, StatusEquipment, SupportModalComponent, SupportService, SweepLocatorService, THREEJS_MODEL_UP_OPTIONS, TagAction, TemplateService, ThreeJsImportService, ThreeJsService, TicketPriority, TicketStatus, TicketType, TicketsService, TimeDateToLocalStringPipe, TypeNote, UsernameFromIdPipe, ValidatorsService, ViewerInteractions, ViewerService, VisitService, ZoneChangeService, ZoneService, applyRigidTransformToDirection, applyRigidTransformToPoint, applyRigidTransformToYRotationDeg, arraysContainSameElements, checkElementById, computeRigidTransform, convertTimestampToLocalZone, copyFileInS3, copyFileInS3ViaDownload, dateHasExpired, dateTimeToLocalString, deleteFromS3, distance, downloadBlob, downloadEquipmentDocument, downloadFile, downloadFileAsObject, durationToString, emailValidator, enumToArray, filterUniqueArrayByID, floatValidator, getBufferForFileFromS3, getCoefficientsForImage, getCurrentLang, getDistanceBetweenTwoPoints, getHighestLevelForMissions, getHighestRoleForMissions, getLevelsBelow, getLocaleLong, getLocaleShort, getMetaForImage, getRolesBelowForManager, getSignedFile, getSignedImageUrlForEquipment, getSignedImageUrlForProfile, getSignedImageUrlForSpace, getSpaceIDFromUrl, getThreeJsPoiOrigin, getVisitUrl, isEmptyObject, listFilesInFolder, mean, noEmptyValidator, numberToDateString, openDocument, openModalForVisitSwitch, parseThreeJsPlacement, poiTypeToString, pointToString, removeAllFilesFromFolderS3, removeNullKeysFromObject, showScanPointsOnPlanInDiv, shuffleArray, solveThreeJsAlignment, sortAlphabeticallyOnName, stringLocaleToEnum, stringToLowercaseNoSpaces, styleButton, textValidator, translateDatePeriod, uploadBase64Image, uploadBase64ImageWithRetry, uploadFileToS3, uploadFileToS3WithProgress, uploadJsonToS3, validEmail, wait, waitUntil };
 //# sourceMappingURL=smarterplan-ngx-smarterplan-core.mjs.map