@smarterplan/ngx-smarterplan-core 1.4.21 → 1.4.22

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, InjectionToken, Inject, EventEmitter, isDevMode, Output, Pipe, ViewChild, NgModule } from '@angular/core';
+import { Injectable, Input, Component, InjectionToken, Inject, EventEmitter, isDevMode, Output, Pipe, ViewChild, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { Subject, BehaviorSubject, takeUntil, Observable } from 'rxjs';
@@ -90,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: [{
@@ -821,30 +821,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) {
@@ -1037,30 +1037,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) {
@@ -1095,22 +1095,62 @@ const uploadFileToS3 = async (path, file, objectId) => {
         return result.key;
     });
 };
+/**
+ * Fetches fresh credentials, and says in the console how long the ones held had left: when an
+ * upload is refused, this is what tells why.
+ */
+const renewCredentials = async () => {
+    try {
+        const held = await Auth.currentCredentials();
+        const left = held?.expiration ? new Date(held.expiration).getTime() - Date.now() : 0;
+        console.info(`[upload] credentials held expire in ${Math.round(left / 60000)} min, fetching new ones`);
+        // What Amplify itself does on signing in. Nobody signs in here through a federated provider,
+        // whose stored sign-in this would also drop.
+        await Auth.Credentials.clear();
+        await Auth.currentCredentials();
+    }
+    catch (error) {
+        // The upload will say what is wrong, if anything is.
+        console.warn("[upload] could not renew the credentials:", error);
+    }
+};
+const isExpiredTokenError = (error) => /ExpiredToken|token has expired/i.test(`${error?.name ?? ""} ${error?.Code ?? ""} ${error?.message ?? error ?? ""}`);
 /**
  * Uploads a file, reporting progress as a 0-1 fraction.
  *
  * uploadFileToS3 above swallows progress, which is fine for a photo and unusable for a 3D model:
  * these run to hundreds of megabytes, and an upload with no feedback is indistinguishable from a
  * frozen page. Returns the stored key, which is what gets saved on the record.
+ *
+ * A large file is sent in parts, each signed when it is sent. Left to itself, Storage.put signs
+ * them all with whatever credentials Amplify last handed the S3 provider, for any call - credentials
+ * that last an hour at most, and an upload of a few gigabytes takes longer: every part after they
+ * expire is refused with "The provided token has expired", and fetching new ones does not help, the
+ * upload never asks for them. Passing no credentials at all makes it ask Amplify for them part by
+ * part, and Amplify renews them as they age. Should they run out anyway, it starts once more.
  */
 const uploadFileToS3WithProgress = async (path, file, onProgress) => {
-    return Storage.put(path + file.name, file, {
+    const put = () => Storage.put(path + file.name, file, {
         contentType: file.type || "application/octet-stream",
+        // Present and empty, so that it replaces the provider's own; see above.
+        credentials: undefined,
         progressCallback(progress) {
             if (onProgress && progress.total > 0) {
                 onProgress(progress.loaded / progress.total);
             }
         },
     }).then((result) => result.key);
+    try {
+        return await put();
+    }
+    catch (error) {
+        if (!isExpiredTokenError(error)) {
+            throw error;
+        }
+        console.warn("[upload] refused, the token had expired; starting again with new credentials", error);
+        await renewCredentials();
+        return put();
+    }
 };
 const getSignedImageUrlForEquipment = async (equip) => {
     if (!equip.photo) {
@@ -2223,32 +2263,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 = [];
@@ -3116,11 +3156,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';
@@ -4648,11 +4688,11 @@ class MatterportTagService {
      * floor and room context. Must be called after each sweep, floor or mode change.
      *
      * Rules:
-     *  - DOLLHOUSE / FLOORPLAN → all tags hidden (opacity 0).
-     *  - INSIDE → only tags whose sweep belongs to the current floor are shown;
-     *    proximity-based opacity is applied via computeTagOpacity().
-     *    Tags on other floors are hidden (opacity 0).
-     *  - TRANSITIONING → no change (skip update to avoid flickering).
+     *  - A tag shows when its sweep is on the floor being displayed, in every mode. Tags on
+     *    other floors are hidden (opacity 0) and cannot be opened.
+     *  - While all floors are displayed - the usual state of DOLLHOUSE and FLOORPLAN - every
+     *    tag shows.
+     *  - A tag with no sweep belongs to no floor and always shows.
      *
      * @param sdk          Matterport SDK instance.
      * @param poseCamera   Current camera pose.
@@ -4664,7 +4704,12 @@ class MatterportTagService {
         if (!sdk || this.dictionnaryTags.size === 0)
             return;
         const isInteriorMode = currentCameraMode === CameraMode.INSIDE;
-        const currentFloorId = currentFloorSequence !== null ? currentFloorSequence.toString() : null;
+        // The SDK reports sequence -1 while all floors are displayed, which is the dollhouse's and the
+        // floor plan's normal state. That is "no floor in particular", not a floor that no tag is on:
+        // read as a floor id, it matched nothing and hid every tag that has a sweep.
+        const currentFloorId = currentFloorSequence !== null && currentFloorSequence >= 0
+            ? currentFloorSequence.toString()
+            : null;
         const promises = [];
         for (const [tagId, mattertagData] of this.dictionnaryTags) {
             if (tagId === mattertagToFollow)
@@ -5819,22 +5864,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) {
@@ -6824,6 +6869,15 @@ function solveReducedAlignment(pairs, up) {
         scale,
     };
 }
+/**
+ * The 3D viewers' background where there is nothing to draw, unless the app sets its own as
+ * --smarterplan-viewer-background: the SmarterPlan app's light blue, from the POC.
+ */
+const VIEWER_BACKGROUND = '#e0f7ff';
+/** The 3D viewers' background as the app sets it, where the element is. */
+function viewerBackground(element) {
+    return getComputedStyle(element).getPropertyValue('--smarterplan-viewer-background').trim() || VIEWER_BACKGROUND;
+}
 class ThreeJsService {
     ngZone;
     scene;
@@ -6842,6 +6896,17 @@ class ThreeJsService {
     objectClicked$ = new Subject();
     /** Emits when the user clicks a tag, mirroring Matterport's tag click. */
     tagClicked$ = new Subject();
+    /**
+     * Emits the tag the camera is sent to (goToTag): for a viewer drawing the model elsewhere, the
+     * splat viewer, to point it out.
+     */
+    tagFocused$ = new Subject();
+    /**
+     * Emits when the tags change - added, moved, removed, filtered, calibrated differently - at most
+     * once per turn of the event loop, however many changed in it.
+     */
+    tagsChanged$ = new Subject();
+    tagsChangeQueued = false;
     /** Emits a tag's label while the pointer is over it, and null when it leaves. */
     tagHovered$ = new Subject();
     // Tags live under the model rather than the scene, so the centering and scaling applied when the
@@ -6851,6 +6916,22 @@ class ThreeJsService {
     canvasResizeObserver;
     /** Aborts the in-flight model download. Parsing cannot be interrupted, only not started. */
     loadAbortController;
+    /**
+     * Which load is the wanted one. Every load takes the next number as it starts, and anything that
+     * makes it unwanted - another load, the scene being rebuilt, the viewer closing - moves the
+     * number on.
+     *
+     * Aborting the download is not enough to stop a load. A model read from the cache has no
+     * download to abort, and one that has finished downloading still has seconds of work ahead of it
+     * before it reaches the screen. A load that finds the number has moved on drops what it has.
+     */
+    loadGeneration = 0;
+    /** Whether the wanted load is still on its way, so abandoning it can say that it stopped. */
+    loadInProgress = false;
+    /** Whether a scene is up: started by init() and not yet taken down by destroy(). */
+    live = false;
+    /** Takes off each listener init() put on the canvas. */
+    canvasListeners = [];
     // The loaded base model, kept so tag placement can raycast against its geometry.
     modelRoot;
     /** True while the next click on the model places a tag instead of orbiting. */
@@ -6872,6 +6953,12 @@ class ThreeJsService {
      * placed in this one are told from those that came from elsewhere.
      */
     currentCaptureID = null;
+    /**
+     * Whether the visit on screen is the only one the site has. A tag records the visit it was placed
+     * in, but some do not - placed before that was recorded, or in the development model. With
+     * another visit around, such a tag is taken to come from it. With none, it can only be this one's.
+     */
+    soleVisit = false;
     /**
      * The model's surface as a grid: every cell some part of the surface passes through.
      *
@@ -6916,6 +7003,17 @@ class ThreeJsService {
     modelUp = 'y';
     /** While measuring: how many points and each segment's length. Null when it is abandoned. */
     measurementProgress$ = new Subject();
+    /**
+     * True when a measurement starts taking clicks, false when it stops - finished or abandoned. For a
+     * viewer drawing the model elsewhere, which takes the clicks itself; see addMeasurePointAtModelPoint.
+     */
+    measuringChanged$ = new Subject();
+    /**
+     * A measurement - under way or finished - was taken off the model. For a viewer drawing it
+     * elsewhere, the splat viewer: a finished one stays drawn while its form is open, which
+     * measurementProgress$ does not say the end of.
+     */
+    measurementCleared$ = new Subject();
     /**
      * Layer carrying the model alone, so the depth pick can render it without the tags.
      *
@@ -6923,8 +7021,18 @@ class ThreeJsService {
      * their parent passed, so marking the model's own meshes is enough - no re-parenting.
      */
     static PICK_LAYER = 1;
+    /** How large a tag is drawn, in CSS pixels. About what Matterport draws its own at. */
+    static TAG_SCREEN_PX = 28;
     /** The app's highlight colour, so a measurement reads as the active thing on screen. */
     static MEASURE_COLOR = '#FFB103';
+    /** Green for the points of a calibration that are settled, as opposed to the one in hand. */
+    static CALIBRATION_DONE_COLOR = '#1E9E5A';
+    /** Size on screen of the numbered pin left where a tag was matched: a little under a tag's. */
+    static CALIBRATION_PIN_PX = 24;
+    /** How long a mark just dropped takes to settle to its size, in milliseconds. */
+    static CONFIRM_PULSE_MS = 350;
+    /** How many matched tags a calibration takes. Three settle everything there is to settle. */
+    static CALIBRATION_PAIRS = 3;
     /** Cache Storage bucket holding downloaded models, and how many to keep. */
     static MODEL_CACHE = 'smarterplan-3d-models';
     static MODEL_CACHE_SIZE = 3;
@@ -6939,12 +7047,36 @@ class ThreeJsService {
     /** Translucent marker shown under the cursor while placing. */
     placementPreview;
     aligning = false;
+    /**
+     * True from the moment the calibration panel opens, before the walkthrough is armed: the tags
+     * from elsewhere are all on show, as they are while calibrating, so that what there is to
+     * calibrate with can be seen while reading what calibrating involves.
+     */
+    revealingCalibrationTags = false;
     alignmentPairs = [];
     alignmentSource = null;
     /** The tag `alignmentSource` was read from, kept so the same tag is not matched twice. */
     alignmentSourceTagId;
+    /**
+     * Everything drawn for the calibration under way: a numbered pin where each tag was matched, a
+     * line from the pin to its tag, and a ring round the tag being matched.
+     *
+     * A sibling of the tag group rather than a child of it. The points clicked are where the tags are
+     * to end up, in the frame the calibration maps onto (see pickAlignmentTarget) - not in the tags'
+     * own frame, which is the one about to change.
+     */
+    calibrationGroup = new THREE.Group();
+    /** Marks still settling after being dropped, advanced by the render loop. */
+    pulses = [];
     /** Drives the alignment walkthrough's UI: how many pairs are done and what it wants next. */
     alignmentProgress$ = new Subject();
+    /**
+     * Emits when a click during calibration did nothing, with what it was expected to land on.
+     *
+     * A click that changes nothing looks the same as a click that was not received. This lets the
+     * panel point at what it is waiting for instead.
+     */
+    alignmentClickIgnored$ = new Subject();
     /** In-flight camera move started by goToTag, advanced by the render loop. */
     cameraTween = null;
     /** Emits true while a heavy OBJ file is being parsed (in a worker, when available), false once done. */
@@ -7056,15 +7188,30 @@ class ThreeJsService {
         //    by then, so the model being abandoned would be handed to the scene built below.
         //  - The tag group, which is a field and keeps its sprites. They would be re-parented under the
         //    new model and show the previous visit's tags on it.
+        // Usually destroy() ran before this and there is nothing left to stop. When it did not, the
+        // scene before would carry on beside the one started below: its render loop drawing every
+        // frame as well, its model still on the graphics card, its listeners answering every click a
+        // second time.
+        if (this.live) {
+            this.destroy();
+        }
         this.discardCurrentLoad();
         this.clearTags();
         this.measuring = false;
         this.clearMeasurement();
+        // A calibration left half-done belongs to the scene it was started in: its points mean nothing
+        // in the next one, and left armed it would take that scene's first clicks for itself.
+        this.aligning = false;
+        this.revealingCalibrationTags = false;
+        this.soleVisit = false;
+        this.alignmentPairs = [];
+        this.clearAlignmentSource();
+        this.clearCalibrationMarks();
+        this.pulses = [];
         this.cameraTween = null;
-        this.modelRoot = undefined;
         // 1. Setup Scene
         this.scene = new THREE.Scene();
-        this.scene.background = new THREE.Color(0xe0f7ff); // from POC
+        this.scene.background = new THREE.Color(viewerBackground(canvas));
         // 2. Setup Camera
         this.camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 10000);
         this.camera.position.set(0, 5, 10); // will be overridden later if passed
@@ -7109,7 +7256,14 @@ class ThreeJsService {
         // A light only contributes while it is part of the scene graph, and this one hangs off the camera.
         this.scene.add(this.camera);
         // 5. Setup Controls (from POC)
-        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        //
+        // Created outside Angular's zone, as is the pointer-move listener further down. The controls
+        // listen to every pointer move and wheel tick, and inside the zone each of those events had
+        // Angular re-check the whole page - dozens of times a second while the camera is dragged,
+        // competing with the frames being drawn - for a change that only ever concerns the canvas.
+        this.ngZone.runOutsideAngular(() => {
+            this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        });
         this.controls.rotateSpeed = 1.0;
         this.controls.dampingFactor = 0.1;
         this.controls.enableDamping = true;
@@ -7133,9 +7287,18 @@ class ThreeJsService {
                 }, 250);
             }
         });
-        // Interaction Event Listeners on canvas
-        canvas.addEventListener('click', this.onMouseClick.bind(this), false);
-        canvas.addEventListener('mousemove', this.onMouseMove.bind(this), false);
+        // Interaction Event Listeners on canvas. Kept so that destroy() can take them off again: the
+        // same canvas is used again when one 3D model is swapped for another, and a second set of
+        // listeners would answer every click twice.
+        const listen = (type, handler) => {
+            canvas.addEventListener(type, handler, false);
+            this.canvasListeners.push(() => canvas.removeEventListener(type, handler, false));
+        };
+        // A click changes what the page shows - a panel opens, a point is recorded - so Angular has to
+        // hear of it, wherever init() itself was called from.
+        listen('click', (event) => this.ngZone.run(() => this.onMouseClick(event)));
+        // Moving the pointer does not: it moves the ghost and the tooltip, both drawn here.
+        this.ngZone.runOutsideAngular(() => listen('mousemove', (event) => this.onMouseMove(event)));
         // Escape backs out of placement and calibration. On the window rather than the canvas, which
         // would need focus the user has no reason to have given it - they are aiming with the mouse.
         // Removed first because this service is a singleton: init() runs again for every canvas, and
@@ -7148,6 +7311,7 @@ class ThreeJsService {
         this.pickCamera = undefined;
         window.addEventListener('keydown', this.onKeyDown);
         // 6. Start the render loop
+        this.live = true;
         this.ngZone.runOutsideAngular(() => {
             this.animate();
         });
@@ -7184,33 +7348,25 @@ class ThreeJsService {
         }
         // Lets gltfpack/gltf-transform output using EXT_meshopt_compression load without extra setup.
         loader.setMeshoptDecoder(MeshoptDecoder);
-        this.modelLoading$.next(true);
+        const wanted = this.beginLoad();
         this.modelLoadProgress$.next(0);
         // Order matters: normals must exist before anisotropy, and the Phong conversion has to run
         // before side/flatShading are touched so those settings land on the materials we keep.
         const onLoaded = (gltf) => {
+            if (!wanted()) {
+                // Built for a request that has since been replaced or abandoned. It was never on screen;
+                // what it holds is freed here because nothing else ever will.
+                this.disposeModel(gltf.scene);
+                return;
+            }
             this.convertToPhongMaterials(gltf.scene);
             this.forceDoubleSidedMaterials(gltf.scene);
             this.ensureVertexNormals(gltf.scene);
             this.tuneTextureSampling(gltf.scene);
             this.placeLoadedObjectInScene(gltf.scene, cameraPosition, rotation, up);
-            this.modelLoading$.next(false);
-        };
-        const onError = (error) => {
-            // Cancelling is a decision, not a failure: clear the overlay without an error in the console.
-            if (error?.name === 'AbortError') {
-                // Only a cancel of the load that is still current came from the user; anything else is this
-                // load having been superseded or discarded.
-                if (this.loadAbortController?.signal.aborted) {
-                    this.modelLoadCancelled$.next();
-                }
-            }
-            else {
-                console.error('Error loading GLTF model:', error);
-            }
-            this.modelLoading$.next(false);
-            this.modelLoadProgress$.next(null);
+            this.endLoad();
         };
+        const onError = (error) => this.loadFailed(wanted, error, 'GLTF model');
         // GLTFLoader decodes embedded images with createImageBitmap when the browser offers it, and on
         // large texture atlases that path returns visibly corrupt data - scattered white blocks across
         // the model. The exact same bytes decoded through an HTMLImageElement, which is what the .obj
@@ -7228,7 +7384,8 @@ class ThreeJsService {
             .then((buffer) => {
             // parse() cannot be interrupted, so a cancel that lands during the paint yield has to be
             // caught here - the last moment before the main thread is committed for several seconds.
-            if (this.loadAbortController?.signal.aborted) {
+            // The same goes for a load nobody is waiting for any more.
+            if (!wanted() || this.loadAbortController?.signal.aborted) {
                 throw new DOMException('Model load cancelled', 'AbortError');
             }
             const globalScope = globalThis;
@@ -7243,6 +7400,28 @@ class ThreeJsService {
         })
             .catch(onError);
     }
+    /** Ends a load that failed, unless another load has replaced it in the meantime. */
+    loadFailed(wanted, error, what) {
+        if (!wanted()) {
+            // Whatever replaced this load owns the loading indicator now; ending it from here would
+            // switch the indicator off while that one is still on its way.
+            return;
+        }
+        this.loadInProgress = false;
+        // Cancelling is a decision, not a failure: clear the overlay without an error in the console.
+        if (error?.name === 'AbortError') {
+            // Only a cancel of the load that is still current came from the user; anything else is this
+            // load having been superseded or discarded.
+            if (this.loadAbortController?.signal.aborted) {
+                this.modelLoadCancelled$.next();
+            }
+        }
+        else {
+            console.error(`Error loading ${what}:`, error);
+        }
+        this.modelLoading$.next(false);
+        this.modelLoadProgress$.next(null);
+    }
     /**
      * Stops the model download in progress, if any.
      *
@@ -7261,8 +7440,30 @@ class ThreeJsService {
      * scene is not something the person asked for, so it must not surface as "loading cancelled".
      */
     discardCurrentLoad() {
+        this.loadGeneration += 1;
         this.loadAbortController?.abort();
         this.loadAbortController = undefined;
+        if (this.loadInProgress) {
+            this.loadInProgress = false;
+            this.modelLoading$.next(false);
+            this.modelLoadProgress$.next(null);
+        }
+    }
+    /**
+     * Starts a load, replacing whichever was under way, and returns the question it has to keep
+     * asking: is it still the one that is wanted?
+     */
+    beginLoad() {
+        this.loadGeneration += 1;
+        const generation = this.loadGeneration;
+        this.loadInProgress = true;
+        this.modelLoading$.next(true);
+        return () => generation === this.loadGeneration;
+    }
+    /** Marks the wanted load as over, whichever way it ended. */
+    endLoad() {
+        this.loadInProgress = false;
+        this.modelLoading$.next(false);
     }
     /**
      * Resolves once the browser has painted at least one frame.
@@ -7293,6 +7494,11 @@ class ThreeJsService {
         this.loadAbortController = new AbortController();
         const { signal } = this.loadAbortController;
         const cached = await this.readModelFromCache(cacheKey);
+        if (signal.aborted) {
+            // Replaced or abandoned while the cache was being read. With nothing being downloaded, this
+            // is the only place a load served from the cache can find that out.
+            throw new DOMException('Model load cancelled', 'AbortError');
+        }
         if (cached) {
             this.modelLoadProgress$.next(1);
             return cached;
@@ -7633,12 +7839,25 @@ class ThreeJsService {
         const basePath = mtlUrl.substring(0, mtlUrl.lastIndexOf('/') + 1);
         mtlLoader.setPath(basePath);
         const mtlFileName = mtlUrl.substring(mtlUrl.lastIndexOf('/') + 1);
-        this.modelLoading$.next(true);
+        // These loaders cannot be interrupted, so a load that is no longer wanted runs to its end and
+        // is dropped there - see loadGeneration.
+        const wanted = this.beginLoad();
+        const finish = () => {
+            if (wanted()) {
+                this.endLoad();
+            }
+        };
         mtlLoader.load(mtlFileName, (materials) => {
+            if (!wanted()) {
+                return;
+            }
             materials.preload();
             if (this.objParserWorker) {
                 this.requestObjParseInWorker(objUrl)
                     .then((meshes) => {
+                    if (!wanted()) {
+                        return;
+                    }
                     const group = new THREE.Group();
                     meshes.forEach((meshData) => {
                         group.add(this.meshFromParsedData(meshData, materials));
@@ -7648,25 +7867,42 @@ class ThreeJsService {
                     .catch((error) => {
                     console.error('Error parsing OBJ model in worker:', error);
                 })
-                    .finally(() => this.modelLoading$.next(false));
+                    .finally(finish);
                 return;
             }
             const objLoader = new OBJLoader();
             objLoader.setMaterials(materials);
             objLoader.load(objUrl, (object) => {
+                if (!wanted()) {
+                    this.disposeModel(object);
+                    return;
+                }
                 this.placeLoadedObjectInScene(object, cameraPosition, rotation);
-                this.modelLoading$.next(false);
+                finish();
             }, undefined, (error) => {
                 console.error('Error loading OBJ model:', error);
-                this.modelLoading$.next(false);
+                finish();
             });
         }, undefined, (error) => {
             console.error('Error loading MTL file:', error);
-            this.modelLoading$.next(false);
+            finish();
         });
     }
     /** Centers, scales and adds a loaded object to the scene, then frames the camera on it. */
     placeLoadedObjectInScene(object, cameraPosition, rotation, up) {
+        // A scene shows one model. Whatever was there is taken out and freed first, or the two would be
+        // drawn through each other, every frame, for as long as the viewer stays open.
+        if (this.modelRoot) {
+            // Points being clicked for a calibration or a measurement were clicked on the model that is
+            // about to go; they say nothing about the one arriving.
+            if (this.aligning) {
+                this.cancelTagAlignment();
+            }
+            if (this.measuring) {
+                this.cancelMeasuring();
+            }
+        }
+        this.removeModel();
         const box = new THREE.Box3().setFromObject(object);
         const center = box.getCenter(new THREE.Vector3());
         const size = box.getSize(new THREE.Vector3());
@@ -7703,8 +7939,9 @@ class ThreeJsService {
         group.add(centered);
         group.scale.setScalar(scale);
         this.scene.add(group);
-        // Tags registered before the model finished loading were sized against the old scale.
-        this.tagSprites.forEach((sprite) => this.scaleTagForModel(sprite));
+        this.scene.updateMatrixWorld(true);
+        // Markers registered before the model finished loading were sized against the old scale.
+        this.refreshScreenSizes();
         this.adjustClippingPlanes((size.length() / 2) * scale);
         if (cameraPosition) {
             this.camera.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z);
@@ -7720,16 +7957,25 @@ class ThreeJsService {
      * 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:
+     * and scanning exports). A Z-up model loads lying on its side. Three independent cues say which
+     * axis is the vertical one:
      *
      *  - 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.
+     *  - Openness. A capture made from outside has ground and roofs but nothing underneath them, so
+     *    along the vertical nearly all of its surface faces one way; walls face both ways evenly.
+     *
+     * Each is wrong often enough on its own - a long corridor has more wall than floor, a tower is
+     * taller than it is wide - so a cue only counts when its answer is clear-cut, and the model is
+     * turned when the clear answers agree. It used to take area and extent agreeing with each other,
+     * which failed on exactly the models that need this most: in a whole building or a city block
+     * there is as much wall as floor, the area cue comes out a three-way tie, and a model 130 m wide
+     * and 34 m tall with 86% of its surface facing one way was left lying on its 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.
+     * Turning a model that was fine is worse than leaving one that was not: when the clear answers
+     * contradict each other, or there is none, nothing is turned. A model that already has Y as its
+     * vertical is never touched.
      */
     detectModelUp(object, size) {
         const axes = ['x', 'y', 'z'];
@@ -7744,6 +7990,7 @@ class ThreeJsService {
             }
         });
         if (triangleCount === 0) {
+            // Nothing with faces to weigh: the convention.
             return 'y';
         }
         // A sample is plenty to see where the area lies, and keeps this cheap on models with millions
@@ -7774,16 +8021,45 @@ class ThreeJsService {
             }
         });
         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) {
+        const extent = { x: size.x, y: size.y, z: size.z };
+        // How one-sided the surface is along each axis: 0 when it faces both ways evenly, 1 when it
+        // all faces the same way.
+        const lopsided = { x: 0, y: 0, z: 0 };
+        axes.forEach((axis) => {
+            lopsided[axis] = total[axis] > 0 ? Math.abs(area[axis][0] - area[axis][1]) / total[axis] : 0;
+        });
+        /** The axes ordered by a measure, largest first. */
+        const ranked = (measure) => [...axes].sort((first, second) => measure[second] - measure[first]);
+        const [mostArea, nextArea] = ranked(total);
+        const [, middleExtent, shortest] = ranked(extent);
+        const [mostOpen, nextOpen] = ranked(lopsided);
+        // What each cue says, when it says it clearly; null when it has no clear answer.
+        const areaSays = total[mostArea] >= 1.25 * total[nextArea] ? mostArea : null;
+        const extentSays = extent[middleExtent] >= 1.5 * extent[shortest] ? shortest : null;
+        const opennessSays = lopsided[mostOpen] >= 0.5
+            && lopsided[mostOpen] >= 2 * lopsided[nextOpen]
+            // Not on the strength of a few stray triangles: the surface along that axis has to matter.
+            && total[mostOpen] >= 0.25 * total[mostArea]
+            ? mostOpen
+            : null;
+        const clear = [areaSays, extentSays, opennessSays].filter((axis) => axis !== null);
+        let vertical = 'y';
+        if (clear.length > 0) {
+            // Clear answers that contradict each other are no answer.
+            vertical = clear.every((axis) => axis === clear[0]) ? clear[0] : 'y';
+        }
+        else if (mostArea === shortest && total[mostArea] >= 1.25 * total.y) {
+            // Nothing clear-cut, but area and extent lean the same way and away from Y.
+            vertical = mostArea;
+        }
+        if (vertical === '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}`;
+        const [positive, negative] = area[vertical];
+        const up = `${negative > 0.65 * (positive + negative) ? '-' : ''}${vertical}`;
         console.info(`ThreeJsService: this model's vertical axis looks like ${up}, not y - standing it upright.`);
         return up;
     }
@@ -7833,6 +8109,7 @@ class ThreeJsService {
             this.camera.updateProjectionMatrix();
             this.renderer.setSize(width, height);
             this.updateMeasureLineResolution();
+            this.refreshScreenSizes();
         });
         this.canvasResizeObserver.observe(container);
     }
@@ -7843,6 +8120,34 @@ class ThreeJsService {
      * only has to supply the matching spot on the model. No new records are written; nothing is
      * applied until solveAlignmentFromPairs() succeeds.
      */
+    /**
+     * Shows every tag that came from elsewhere, whether or not it lands on the model, without arming
+     * anything: clicks still do what they always do.
+     *
+     * Calibrating shows them too, and ending a calibration - saved or abandoned - puts them back
+     * under the usual rule, so this only ever has to be switched on.
+     */
+    revealCalibrationTags(revealed = true) {
+        this.revealingCalibrationTags = revealed;
+        this.refreshTagVisibility();
+        // Another viewer showing the tags shows these as well now; see showsCalibrationTags.
+        this.announceTagsChanged();
+    }
+    /**
+     * Whether the tags a calibration works with are on show - while one is under way, or its panel
+     * open - including those that do not land on the model. For another viewer showing the tags,
+     * which otherwise leaves out the ones from elsewhere until the model is calibrated.
+     */
+    showsCalibrationTags() {
+        return this.aligning || this.revealingCalibrationTags;
+    }
+    /** Says a tag was clicked in a viewer drawing the model elsewhere, as a click on it here would. */
+    clickTag(elementId) {
+        const sprite = this.tagSprites.get(elementId);
+        if (sprite) {
+            this.tagClicked$.next({ elementId, poiType: sprite.userData.poiType ?? null });
+        }
+    }
     startTagAlignment() {
         // One pointer mode at a time, the same rule startMeasuring() applies the other way round.
         if (this.measuring) {
@@ -7850,27 +8155,28 @@ class ThreeJsService {
         }
         this.aligning = true;
         this.alignmentPairs = [];
-        this.alignmentSource = null;
+        this.clearAlignmentSource();
         // 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';
         }
-        this.alignmentProgress$.next({ pairs: 0, awaiting: 'tag' });
+        this.alignmentChanged();
+        this.announceTagsChanged();
     }
     cancelTagAlignment() {
         const wasAligning = this.aligning;
         this.aligning = false;
+        this.revealingCalibrationTags = false;
         this.alignmentPairs = [];
-        this.alignmentSource = null;
-        this.pendingPreviewEvent = null;
-        this.removePlacementPreview();
+        this.clearAlignmentSource();
         this.refreshTagVisibility();
         if (this.renderer) {
             this.renderer.domElement.style.cursor = 'default';
         }
-        this.alignmentProgress$.next({ pairs: 0, awaiting: null });
+        this.alignmentChanged();
+        this.announceTagsChanged();
         if (wasAligning) {
             this.alignmentCancelled$.next();
         }
@@ -7918,11 +8224,10 @@ class ThreeJsService {
         // 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.revealingCalibrationTags = false;
         this.applyAlignmentKeepingOwnTags(alignment);
-        this.pendingPreviewEvent = null;
-        this.removePlacementPreview();
         this.renderer.domElement.style.cursor = 'default';
-        this.alignmentProgress$.next({ pairs: this.alignmentPairs.length, awaiting: null });
+        this.alignmentChanged();
         return alignment;
     }
     /**
@@ -7981,7 +8286,8 @@ class ThreeJsService {
      */
     selectAlignmentTag(elementId) {
         const sprite = this.tagSprites.get(elementId);
-        if (!this.aligning || this.alignmentSource || !sprite || !this.calibrationCandidates().includes(sprite)) {
+        if (!this.aligning || this.alignmentSource || !this.canMatchAnotherTag()
+            || !sprite || !this.calibrationCandidates().includes(sprite)) {
             return false;
         }
         this.setAlignmentSource(sprite);
@@ -7993,18 +8299,28 @@ class ThreeJsService {
         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,
-        });
+        this.alignmentChanged('tag');
+    }
+    clearAlignmentSource() {
+        this.alignmentSource = null;
+        this.alignmentSourceTagId = undefined;
+    }
+    /** Whether the calibration still has room for a pair and a tag to make it from. */
+    canMatchAnotherTag() {
+        return this.alignmentPairs.length < ThreeJsService.CALIBRATION_PAIRS
+            && this.calibrationCandidates().length > 0;
     }
     /** 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?
+            if (!this.canMatchAnotherTag()) {
+                // Nothing left to match: what remains is to save, or to take a pair back.
+                return;
+            }
             const hit = this.raycaster.intersectObjects(this.calibrationCandidates(), false)[0];
             if (!hit) {
+                this.alignmentClickIgnored$.next('tag');
                 return;
             }
             this.setAlignmentSource(hit.object);
@@ -8013,18 +8329,220 @@ class ThreeJsService {
         // Second half: where that tag actually belongs on the model.
         const target = this.pickAlignmentTarget(event);
         if (!target) {
+            this.alignmentClickIgnored$.next('point');
             return;
         }
         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.clearAlignmentSource();
+        this.alignmentChanged('point');
+    }
+    /**
+     * Records where the tag being matched really is, from a spot another viewer picked on the model -
+     * the splat viewer - in the model's own coordinates: the frame pickAlignmentTarget measures a
+     * click in, as placeTagAtModelPoint takes it. False when no tag is waiting for its spot.
+     */
+    matchAlignmentTagAtModelPoint(point) {
+        if (!this.aligning || !this.alignmentSource) {
+            return false;
+        }
+        this.alignmentPairs.push({
+            tagId: this.alignmentSourceTagId,
+            source: this.alignmentSource,
+            target: { x: point.x, y: point.y, z: point.z },
+        });
+        this.clearAlignmentSource();
+        this.alignmentChanged('point');
+        return true;
+    }
+    /**
+     * Takes back the last thing done in the calibration under way: the choice of tag while its place
+     * on the model is being asked for, the last matched pair otherwise.
+     *
+     * One step at a time, so a click made by mistake costs that click and not the whole calibration.
+     * Returns false when there is nothing to take back.
+     */
+    undoAlignmentStep() {
+        if (!this.aligning) {
+            return false;
+        }
+        if (this.alignmentSource) {
+            this.clearAlignmentSource();
+        }
+        else if (this.alignmentPairs.length > 0) {
+            this.alignmentPairs.pop();
+        }
+        else {
+            return false;
+        }
+        this.alignmentChanged();
+        return true;
+    }
+    /**
+     * Removes one matched pair, whichever it is, putting its tag back on offer.
+     *
+     * For the point noticed to be wrong only after others were matched: taking steps back one by one
+     * to reach it would throw away the good ones made since.
+     */
+    removeAlignmentPair(index) {
+        if (!this.aligning || !Number.isInteger(index) || index < 0 || index >= this.alignmentPairs.length) {
+            return false;
+        }
+        this.alignmentPairs.splice(index, 1);
+        this.alignmentChanged();
+        return true;
+    }
+    /** The tags matched so far in the calibration under way, in the order they are numbered in. */
+    getAlignmentPairs() {
+        return this.alignmentPairs.map((pair) => {
+            const sprite = this.tagSprites.get(pair.tagId);
+            return {
+                tagId: pair.tagId,
+                label: sprite?.userData.label ?? null,
+                poiType: sprite?.userData.poiType ?? null,
+                target: { ...pair.target },
+            };
+        });
+    }
+    /**
+     * Brings the scene and the panel in line with the calibration's state, after anything changed it.
+     *
+     * `dropped` names the mark the change put down, if it put one down, so that it can be shown
+     * arriving: that movement is what tells someone their click was taken.
+     */
+    alignmentChanged(dropped) {
+        // The ghost previews the pin about to be dropped, number included, so it is never carried over
+        // from one state to the next; the next pointer move draws the right one.
         this.pendingPreviewEvent = null;
         this.removePlacementPreview();
+        if (this.aligning && this.renderer) {
+            this.renderer.domElement.style.cursor = 'crosshair';
+        }
+        this.redrawCalibrationMarks(dropped);
+        let awaiting = null;
+        if (this.aligning) {
+            if (this.alignmentSource) {
+                awaiting = 'point';
+            }
+            else if (this.canMatchAnotherTag()) {
+                // Otherwise done at three, or sooner when there are no more tags to match: fewer pairs
+                // still calibrate, only less completely.
+                awaiting = 'tag';
+            }
+        }
         this.alignmentProgress$.next({
             pairs: this.alignmentPairs.length,
-            // 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',
+            awaiting,
+            tagId: awaiting === 'point' ? this.alignmentSourceTagId : undefined,
+            matched: this.getAlignmentPairs(),
+        });
+    }
+    /**
+     * Draws the calibration as it stands: what has been matched, and what is being matched.
+     *
+     * Redrawn whole on every change rather than patched. There are at most three pairs, and undoing
+     * or removing one renumbers the others.
+     */
+    redrawCalibrationMarks(dropped) {
+        this.clearCalibrationMarks();
+        if (!this.aligning) {
+            return;
+        }
+        const frame = this.tagGroup.parent ?? this.scene;
+        if (this.calibrationGroup.parent !== frame) {
+            frame.add(this.calibrationGroup);
+        }
+        this.tagGroup.updateMatrix();
+        // Where a tag is drawn at the moment, in the frame the marks are drawn in.
+        const drawnAt = (stored) => new THREE.Vector3(stored.x, stored.y, stored.z).applyMatrix4(this.tagGroup.matrix);
+        this.alignmentPairs.forEach((pair, index) => {
+            const target = new THREE.Vector3(pair.target.x, pair.target.y, pair.target.z);
+            // From where the tag is to where it was said to belong: the correction, made visible.
+            const link = this.createMeasureLine(drawnAt(pair.source), target, ThreeJsService.CALIBRATION_DONE_COLOR, 2);
+            link.material.opacity = 0.75;
+            // The same green as the pin it leads to; see createCalibrationMark.
+            link.material.color.convertSRGBToLinear();
+            link.material.toneMapped = false;
+            // Behind the tags: it sets off from the middle of one, and should come out from under its
+            // icon rather than run across it.
+            link.renderOrder = 997;
+            this.calibrationGroup.add(link);
+            const pin = this.createCalibrationMark(this.createNumberedTexture(index + 1, ThreeJsService.CALIBRATION_DONE_COLOR), 1001);
+            pin.position.copy(target);
+            this.calibrationGroup.add(pin);
+            this.setScreenSize(pin, ThreeJsService.CALIBRATION_PIN_PX);
+            if (dropped === 'point' && index === this.alignmentPairs.length - 1) {
+                this.pulse(pin);
+            }
+            // Its tag is spoken for; it stays in view to show what the pin refers to, but stands back.
+            const matched = this.tagSprites.get(pair.tagId);
+            if (matched) {
+                matched.material.opacity = 0.4;
+            }
+        });
+        if (this.alignmentSource) {
+            const ring = this.createCalibrationMark(this.createRingTexture(ThreeJsService.MEASURE_COLOR), 998);
+            ring.position.copy(drawnAt(this.alignmentSource));
+            this.calibrationGroup.add(ring);
+            this.setScreenSize(ring, ThreeJsService.TAG_SCREEN_PX * 1.6);
+            if (dropped === 'tag') {
+                this.pulse(ring);
+            }
+        }
+    }
+    /** Removes everything drawn for a calibration, and gives the tags it dimmed their look back. */
+    clearCalibrationMarks() {
+        [...this.calibrationGroup.children].forEach((child) => {
+            this.calibrationGroup.remove(child);
+            child.geometry?.dispose?.();
+            child.material?.map?.dispose?.();
+            child.material?.dispose?.();
+        });
+        this.tagSprites.forEach((sprite) => {
+            sprite.material.opacity = 1;
+        });
+    }
+    /**
+     * A calibration mark: a fixed size on screen and showing through the model, as the tags do, and
+     * drawn in the colours it was painted in.
+     *
+     * The renderer's tone mapping and output conversion are there for the model's lighting. Put
+     * through them a mark comes out pale - the amber nearer to cream - and a mark that has to be
+     * picked out against a photograph of a building is the last thing that should be.
+     */
+    createCalibrationMark(map, renderOrder) {
+        // Says the canvas holds sRGB, which it does, so the output conversion gives it back unchanged.
+        if ('colorSpace' in map) {
+            map.colorSpace = 'srgb'; // THREE.SRGBColorSpace, r152+
+        }
+        else {
+            map.encoding = 3001; // THREE.sRGBEncoding
+        }
+        const mark = new THREE.Sprite(new THREE.SpriteMaterial({
+            map, depthTest: false, transparent: true, sizeAttenuation: false, toneMapped: false,
+        }));
+        mark.renderOrder = renderOrder;
+        return mark;
+    }
+    /** Shows a mark arriving: it starts oversized and settles. */
+    pulse(sprite) {
+        this.pulses.push({ sprite, startedAt: performance.now() });
+    }
+    stepPulses() {
+        if (this.pulses.length === 0) {
+            return;
+        }
+        const now = performance.now();
+        this.pulses = this.pulses.filter(({ sprite, startedAt }) => {
+            const size = sprite.userData.screenSize;
+            if (!sprite.parent || !size) {
+                // Redrawn or cleared in the meantime.
+                return false;
+            }
+            const progress = Math.min(1, (now - startedAt) / ThreeJsService.CONFIRM_PULSE_MS);
+            this.setScreenSize(sprite, size[0], size[1]);
+            // Eased out, so most of the settling happens while the eye is still on the click.
+            sprite.scale.multiplyScalar(1 + 0.9 * (1 - progress) ** 2);
+            return progress < 1;
         });
     }
     /**
@@ -8049,6 +8567,7 @@ class ThreeJsService {
         if (this.renderer) {
             this.renderer.domElement.style.cursor = 'crosshair';
         }
+        this.measuringChanged$.next(true);
         this.measurementProgress$.next({ points: 0, distances: [] });
     }
     /**
@@ -8069,8 +8588,10 @@ class ThreeJsService {
             this.renderer.domElement.style.cursor = 'default';
         }
         if (wasMeasuring) {
+            this.measuringChanged$.next(false);
             this.measurementProgress$.next(null);
         }
+        this.measurementCleared$.next();
     }
     /**
      * Ends the measurement and returns it, or null when there are not yet two points to measure
@@ -8079,11 +8600,12 @@ class ThreeJsService {
      * The drawing stays on the model so it is still visible while the person names the measurement;
      * cancelMeasuring() takes it away afterwards.
      */
-    finishMeasuring() {
+    finishMeasuring(screenshot) {
         if (!this.measuring || this.measurePoints.length < 2) {
             return null;
         }
         this.measuring = false;
+        this.measuringChanged$.next(false);
         this.pendingPreviewEvent = null;
         this.removePlacementPreview();
         this.updateMeasureRubberBand(null);
@@ -8091,10 +8613,32 @@ class ThreeJsService {
         this.lastMeasurement = {
             points: this.measurePoints.map((point) => ({ x: point.x, y: point.y, z: point.z })),
             distances: this.measureDistances(),
-            screenshot: this.captureMeasurementScreenshot(),
+            // From the viewer the model is drawn in, when it is not this scene: the splat viewer.
+            screenshot: screenshot ?? this.captureMeasurementScreenshot(),
         };
         return this.lastMeasurement;
     }
+    /**
+     * Adds a point to the measurement under way from a spot another viewer picked on the model - the
+     * splat viewer - in the model's own coordinates. Into the frame the measurement is kept in, the
+     * tags', through the calibration, as placeTagAtModelPoint does. False when not measuring.
+     */
+    addMeasurePointAtModelPoint(point) {
+        if (!this.measuring) {
+            return false;
+        }
+        this.tagGroup.updateMatrix();
+        this.addMeasurePoint(new THREE.Vector3(point.x, point.y, point.z).applyMatrix4(this.tagGroup.matrix.clone().invert()));
+        return true;
+    }
+    /** The measurement's points, under way or finished, in the model's own coordinates: for a viewer drawing it elsewhere. */
+    getMeasurePointsInModelFrame() {
+        this.tagGroup.updateMatrix();
+        return this.measurePoints.map((point) => {
+            const { x, y, z } = point.clone().applyMatrix4(this.tagGroup.matrix);
+            return { x, y, z };
+        });
+    }
     isMeasuring() {
         return this.measuring;
     }
@@ -8123,10 +8667,10 @@ class ThreeJsService {
             // 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);
+        this.setScreenSize(marker, 12);
         if (previous) {
             this.measureGroup.add(this.createMeasureLine(previous, point));
             const distance = Math.round(previous.distanceTo(point) * 100) / 100;
@@ -8136,10 +8680,10 @@ class ThreeJsService {
                 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.setScreenSize(label, 84, 28);
         }
         this.measurementProgress$.next({
             points: this.measurePoints.length,
@@ -8152,12 +8696,12 @@ class ThreeJsService {
      * 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) {
+    createMeasureLine(from, to, color = ThreeJsService.MEASURE_COLOR, width = 3) {
         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,
+            color: new THREE.Color(color).getHex(),
+            linewidth: width,
             depthTest: false,
             transparent: true,
         });
@@ -8173,7 +8717,7 @@ class ThreeJsService {
             return;
         }
         const size = this.renderer.getSize(new THREE.Vector2());
-        this.measureGroup.children.forEach((child) => {
+        [...this.measureGroup.children, ...this.calibrationGroup.children].forEach((child) => {
             if (child.material?.resolution) {
                 child.material.resolution.set(size.x, size.y);
             }
@@ -8259,6 +8803,12 @@ class ThreeJsService {
         });
         return canvas.toDataURL('image/jpeg', 0.85);
     }
+    /**
+     * True when tag placement is armed, false when it ends - placed or abandoned. For a viewer drawing
+     * the model instead of this scene, the splat viewer, which picks the spot itself; see
+     * placeTagAtModelPoint.
+     */
+    placementChanged$ = new Subject();
     /** Arms tag placement: the next click on the model drops a tag instead of being ignored. */
     startTagPlacement(poiType = null) {
         this.placingTag = true;
@@ -8267,9 +8817,40 @@ class ThreeJsService {
         if (this.renderer) {
             this.renderer.domElement.style.cursor = 'crosshair';
         }
+        this.placementChanged$.next(true);
+    }
+    /**
+     * Places the armed tag at a spot another viewer picked on the model - the splat viewer - given
+     * in the model's own coordinates, as a click on the model in this scene would. Into the frame tag
+     * coordinates are stored in, through the calibration, as pickPlacementOnModel does.
+     */
+    placeTagAtModelPoint(point, normal = null) {
+        if (!this.placingTag) {
+            return null;
+        }
+        this.tagGroup.updateMatrix();
+        const position = new THREE.Vector3(point.x, point.y, point.z).applyMatrix4(this.tagGroup.matrix.clone().invert());
+        // Turned only: the calibration's scale changes no direction.
+        const facing = normal
+            ? new THREE.Vector3(normal.x, normal.y, normal.z).applyQuaternion(this.tagGroup.quaternion.clone().invert()).normalize()
+            : new THREE.Vector3(0, 1, 0);
+        const placement = {
+            position: { x: position.x, y: position.y, z: position.z },
+            normal: { x: facing.x, y: facing.y, z: facing.z },
+            poiType: this.placementPoiType,
+        };
+        this.pendingTagPlacement = placement;
+        this.placingTag = false;
+        this.removePlacementPreview();
+        this.placementChanged$.next(false);
+        this.tagPlaced$.next(placement);
+        return placement;
     }
     /** Leaves placement mode without placing anything. */
     cancelTagPlacement() {
+        if (this.placingTag) {
+            this.placementChanged$.next(false);
+        }
         this.placingTag = false;
         this.pendingTagPlacement = null;
         this.pendingPreviewEvent = null;
@@ -8294,15 +8875,20 @@ class ThreeJsService {
         }
         this.renderer.domElement.style.cursor = 'crosshair';
         if (!this.placementPreview) {
-            this.placementPreview = new THREE.Sprite(new THREE.SpriteMaterial({
-                map: this.createTagTexture('#9E9E9E'),
-                depthTest: false,
-                transparent: true,
-                opacity: 0.6,
-            }));
+            // While calibrating, the ghost is the pin the click will leave, number and all: what is
+            // under the pointer is what stays there.
+            this.placementPreview = this.aligning
+                ? this.createCalibrationMark(this.createNumberedTexture(this.alignmentPairs.length + 1, ThreeJsService.CALIBRATION_DONE_COLOR), 999)
+                : new THREE.Sprite(new THREE.SpriteMaterial({
+                    map: this.createTagTexture('#9E9E9E'),
+                    depthTest: false,
+                    transparent: true,
+                    sizeAttenuation: false,
+                }));
             this.placementPreview.renderOrder = 999;
+            this.placementPreview.material.opacity = 0.6;
             this.tagGroup.add(this.placementPreview);
-            this.scaleTagForModel(this.placementPreview);
+            this.setScreenSize(this.placementPreview, this.aligning ? ThreeJsService.CALIBRATION_PIN_PX : ThreeJsService.TAG_SCREEN_PX);
         }
         this.placementPreview.position.copy(position);
         this.updateMeasureRubberBand(position);
@@ -8409,6 +8995,16 @@ class ThreeJsService {
     setVisibleTagTypes(types) {
         this.visibleTagTypes = types;
         this.tagSprites.forEach((sprite) => this.applyTagVisibility(sprite));
+        this.announceTagsChanged();
+    }
+    /** Says whether the visit on screen is the site's only one; see soleVisit. */
+    setSoleVisit(sole) {
+        this.soleVisit = sole;
+        this.tagSprites.forEach((sprite) => {
+            this.parentTag(sprite);
+            this.applyTagVisibility(sprite);
+        });
+        this.announceTagsChanged();
     }
     /** Says which capture is on screen, so the tags placed in it can be told from the rest. */
     setCurrentCapture(captureID) {
@@ -8417,6 +9013,7 @@ class ThreeJsService {
             this.parentTag(sprite);
             this.applyTagVisibility(sprite);
         });
+        this.announceTagsChanged();
     }
     /** Every tag registered in the scene, shown or not. */
     getTags() {
@@ -8492,8 +9089,8 @@ class ThreeJsService {
     }
     /** Whether the tag was placed in the visit on screen. */
     isOwnedByVisit(sprite) {
-        return !!sprite.userData.originCaptureID
-            && sprite.userData.originCaptureID === this.currentCaptureID;
+        const origin = sprite.userData.originCaptureID;
+        return origin ? origin === this.currentCaptureID : this.soleVisit;
     }
     /**
      * A tag shows when its type is not filtered out and it belongs on this model.
@@ -8522,8 +9119,9 @@ class ThreeJsService {
         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) {
+        // Calibrating is matching tags to where they belong, so they all have to be on offer - from
+        // the moment the panel opens, not only once the first click is being waited for.
+        if (this.aligning || this.revealingCalibrationTags) {
             return true;
         }
         return this.isOnModel(sprite);
@@ -8661,6 +9259,9 @@ class ThreeJsService {
      */
     goToTag(elementId) {
         const sprite = this.tagSprites.get(elementId);
+        if (sprite) {
+            this.tagFocused$.next(elementId);
+        }
         if (!sprite || !this.camera) {
             return;
         }
@@ -8782,10 +9383,11 @@ class ThreeJsService {
         this.tagGroup.rotation.set(rotation?.x ?? 0, rotation?.y ?? 0, rotation?.z ?? 0);
         this.tagGroup.scale.setScalar(scale ?? 1);
         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));
+        // Marker sizes are worked back from the scale they inherit, which this call just changed - and
+        // so is which tags land on the model.
+        this.refreshScreenSizes();
         this.refreshTagVisibility();
+        this.announceTagsChanged();
     }
     /**
      * Adds a tag, or moves/restyles the one already registered for this element.
@@ -8802,22 +9404,29 @@ class ThreeJsService {
             existing.userData.label = tag.label ?? existing.userData.label;
             existing.userData.originCaptureID = tag.originCaptureID ?? existing.userData.originCaptureID;
             existing.userData.frame = tag.frame ?? existing.userData.frame;
+            existing.userData.iconUrl = tag.iconUrl ?? existing.userData.iconUrl;
+            existing.userData.normal = tag.normal ?? existing.userData.normal;
             this.parentTag(existing);
             this.applyTagVisibility(existing);
+            this.announceTagsChanged();
             return;
         }
         const sprite = new THREE.Sprite(new THREE.SpriteMaterial({
             map: this.createTagTexture(tag.color),
             // Tags read as UI rather than geometry, so they stay visible through the model instead of
-            // being occluded by whatever wall happens to be between them and the camera.
+            // being occluded by whatever wall happens to be between them and the camera - and, for
+            // the same reason, keep one size on screen rather than a size in the model.
             depthTest: false,
             transparent: true,
+            sizeAttenuation: false,
         }));
         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.userData.iconUrl = tag.iconUrl ?? null;
+        sprite.userData.normal = tag.normal ?? null;
         sprite.position.set(tag.position.x, tag.position.y, tag.position.z);
         sprite.renderOrder = 999;
         this.parentTag(sprite);
@@ -8827,6 +9436,52 @@ class ThreeJsService {
         if (tag.iconUrl) {
             this.applyTagIcon(sprite, tag.iconUrl);
         }
+        this.announceTagsChanged();
+    }
+    /**
+     * The tags another viewer should show, and the calibration they are drawn under.
+     *
+     * The same ones this scene would offer, short of the test against the model's surface, which needs
+     * the model here: the type filter applies, and a tag placed in another model before it was
+     * calibrated is left out, its coordinates meaning nothing in this one.
+     */
+    getTagSnapshot() {
+        const tags = [];
+        this.tagSprites.forEach((sprite) => {
+            const owned = this.isOwnedByVisit(sprite);
+            const typeAllowed = this.visibleTagTypes === null || this.visibleTagTypes.includes(sprite.userData.poiType);
+            if (!typeAllowed || (sprite.userData.frame === 'model' && !owned)) {
+                return;
+            }
+            tags.push({
+                id: sprite.name,
+                position: { x: sprite.position.x, y: sprite.position.y, z: sprite.position.z },
+                label: sprite.userData.label ?? null,
+                poiType: sprite.userData.poiType ?? null,
+                iconUrl: sprite.userData.iconUrl ?? null,
+                inModelFrame: sprite.userData.frame === 'model' && owned,
+                normal: sprite.userData.normal ?? null,
+            });
+        });
+        const group = this.tagGroup;
+        return {
+            tags,
+            alignment: {
+                translation: { x: group.position.x, y: group.position.y, z: group.position.z },
+                rotation: { x: group.rotation.x, y: group.rotation.y, z: group.rotation.z },
+                scale: group.scale.x,
+            },
+        };
+    }
+    announceTagsChanged() {
+        if (this.tagsChangeQueued) {
+            return;
+        }
+        this.tagsChangeQueued = true;
+        queueMicrotask(() => {
+            this.tagsChangeQueued = false;
+            this.tagsChanged$.next();
+        });
     }
     /** Removes the tag registered for an element, if there is one. */
     removeTag(elementId) {
@@ -8838,6 +9493,7 @@ class ThreeJsService {
         sprite.material.map?.dispose();
         sprite.material.dispose();
         this.tagSprites.delete(elementId);
+        this.announceTagsChanged();
     }
     /** Removes every tag from the scene. */
     clearTags() {
@@ -8867,18 +9523,78 @@ class ThreeJsService {
         context.stroke();
         return new THREE.CanvasTexture(canvas);
     }
+    /** The default marker with a number on it: the nth point of a calibration. */
+    createNumberedTexture(number, color) {
+        const texture = this.createTagTexture(color);
+        const canvas = texture.image;
+        const context = canvas.getContext('2d');
+        context.fillStyle = '#FFFFFF';
+        context.font = 'bold 76px sans-serif';
+        context.textAlign = 'center';
+        context.textBaseline = 'middle';
+        context.fillText(String(number), canvas.width / 2, canvas.height / 2 + 5);
+        return texture;
+    }
+    /** A ring with nothing in the middle, to go round a tag and leave it showing. */
+    createRingTexture(color) {
+        const size = 128;
+        const canvas = document.createElement('canvas');
+        canvas.width = size;
+        canvas.height = size;
+        const context = canvas.getContext('2d');
+        // White under the colour, a little wider, for the same reason the tags have a white edge.
+        context.beginPath();
+        context.arc(size / 2, size / 2, size / 2 - 10, 0, Math.PI * 2);
+        context.lineWidth = 16;
+        context.strokeStyle = '#FFFFFF';
+        context.stroke();
+        context.lineWidth = 10;
+        context.strokeStyle = color;
+        context.stroke();
+        return new THREE.CanvasTexture(canvas);
+    }
     /**
-     * Sizes a tag relative to the model.
+     * Gives a tag its size: the same number of pixels on screen whatever the model.
      *
-     * A sprite inherits the model's scale and the alignment's, so a fixed size would come out tiny on
-     * a large model and huge on a small one. Dividing by the group's world scale keeps tags the same
-     * size on screen whatever the model's units are.
+     * It used to be a fixed fraction of the model instead. That reads fine on a room, but on a model
+     * the size of a city block it is a tag several metres across, which fills the view as soon as
+     * the camera moves in to look at anything.
      */
     scaleTagForModel(sprite) {
-        // 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);
+        this.setScreenSize(sprite, ThreeJsService.TAG_SCREEN_PX);
+    }
+    /**
+     * Fixes a sprite's size on screen, in CSS pixels.
+     *
+     * The sprite must be drawn without size attenuation, which makes its size a proportion of the
+     * viewport instead of something that shrinks with distance. Its scale is then worked back from
+     * the pixels wanted, the viewport's height and the scale it inherits from its parents - the
+     * model's normalisation and, for tags, the calibration - so none of those show in the result.
+     * The size asked for is kept on the sprite, so it can be worked out again when any of them changes.
+     */
+    setScreenSize(sprite, widthPx, heightPx = widthPx) {
+        sprite.userData.screenSize = [widthPx, heightPx];
+        const inherited = (sprite.parent ?? this.tagGroup).getWorldScale(new THREE.Vector3()).x || 1;
+        const perPixel = this.worldUnitsPerPixel() / inherited;
+        sprite.scale.set(widthPx * perPixel, heightPx * perPixel, 1);
+    }
+    /** What one screen pixel is worth in the scale of a sprite drawn without size attenuation. */
+    worldUnitsPerPixel() {
+        const height = this.renderer?.getSize?.(new THREE.Vector2()).y || 800;
+        const fieldOfView = THREE.MathUtils.degToRad(this.camera?.fov ?? 75);
+        return (2 * Math.tan(fieldOfView / 2)) / height;
+    }
+    /** Re-applies every marker's on-screen size: the viewport, the model or the calibration changed. */
+    refreshScreenSizes() {
+        const resize = (object) => {
+            if (object?.userData?.screenSize) {
+                this.setScreenSize(object, object.userData.screenSize[0], object.userData.screenSize[1]);
+            }
+        };
+        this.tagSprites.forEach(resize);
+        this.measureGroup.children.forEach(resize);
+        this.calibrationGroup.children.forEach(resize);
+        resize(this.placementPreview);
     }
     /**
      * Adds secondary interactive objects (e.g., POIs, sensors) to the scene.
@@ -8992,6 +9708,7 @@ class ThreeJsService {
                     this.placingTag = false;
                     this.removePlacementPreview();
                     this.renderer.domElement.style.cursor = 'default';
+                    this.placementChanged$.next(false);
                     this.tagPlaced$.next(placement);
                 }
                 return;
@@ -9019,12 +9736,19 @@ class ThreeJsService {
         }
     }
     /**
-     * Escape cancels whatever the pointer is currently committed to.
+     * Escape cancels whatever the pointer is currently committed to. While calibrating, the undo keys
+     * take back one step of it instead of all of it.
      *
      * Emits through the same subjects the explicit Cancel buttons use, so the UI driving them follows
      * along instead of being left showing a mode that is no longer armed.
      */
     onKeyDown = (event) => {
+        if (this.aligning && this.isUndoKey(event)) {
+            if (this.undoAlignmentStep()) {
+                event.preventDefault();
+            }
+            return;
+        }
         if (event.key !== 'Escape') {
             return;
         }
@@ -9041,9 +9765,22 @@ class ThreeJsService {
             this.cancelTagAlignment();
         }
     };
+    /**
+     * Ctrl+Z (Cmd+Z on a Mac) or Backspace, unless typed into a field - where they mean something
+     * else, to whatever the field is.
+     */
+    isUndoKey(event) {
+        const target = event.target;
+        if (target?.isContentEditable || ['INPUT', 'TEXTAREA'].includes(target?.tagName ?? '')) {
+            return false;
+        }
+        return event.key === 'Backspace'
+            || ((event.ctrlKey || event.metaKey) && !event.shiftKey && event.key.toLowerCase() === 'z');
+    }
     animate = () => {
         this.animationFrameId = requestAnimationFrame(this.animate);
         this.stepCameraTween();
+        this.stepPulses();
         this.controls.update();
         // One pick per frame, against the pointer's latest position - see onMouseMove.
         if (this.pendingPreviewEvent) {
@@ -9053,11 +9790,84 @@ class ThreeJsService {
         }
         this.renderer.render(this.scene, this.camera);
     };
-    destroy() {
+    /**
+     * Stops drawing the scene, or starts again. For while another viewer covers it - the splat viewer
+     * - where it would otherwise go on drawing, unseen, every frame, on the graphics card the other
+     * viewer needs. The scene keeps its tags and calibration all the same.
+     */
+    setRenderingPaused(paused) {
+        if (paused) {
+            this.stopRendering();
+        }
+        else if (this.live && !this.animationFrameId) {
+            this.ngZone.runOutsideAngular(() => this.animate());
+        }
+    }
+    /** Stops the render loop, if one is running. */
+    stopRendering() {
         if (this.animationFrameId) {
             cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = 0;
+        }
+    }
+    /**
+     * Takes the model out of the scene and frees what it holds on the graphics card.
+     *
+     * The tags are kept. They hang from the model's group so as to share its frame, and are moved out
+     * of it first: they belong to the visit, not to the file that was drawn under them.
+     */
+    removeModel() {
+        const group = this.modelGroup;
+        const model = this.modelRoot;
+        this.modelGroup = undefined;
+        this.modelRoot = undefined;
+        this.surfaceCells = null;
+        this.modelWorldRadius = 0;
+        [this.tagGroup, this.modelTagGroup, this.calibrationGroup].forEach((kept) => kept.parent?.remove(kept));
+        group?.parent?.remove(group);
+        if (model) {
+            this.disposeModel(model);
         }
+    }
+    /**
+     * Frees a model's geometry, materials and textures.
+     *
+     * Dropping the last reference to a model does not do this. What it uploaded stays on the graphics
+     * card until the page is closed - hundreds of megabytes for a captured building - and on a
+     * machine whose graphics memory is shared with the rest of the system, everything slows down
+     * long before anything fails.
+     */
+    disposeModel(model) {
+        const freed = new Set();
+        const free = (resource) => {
+            if (resource && typeof resource.dispose === 'function' && !freed.has(resource)) {
+                freed.add(resource);
+                resource.dispose();
+            }
+        };
+        model.traverse((child) => {
+            free(child.geometry);
+            const materials = Array.isArray(child.material) ? child.material : [child.material];
+            materials.forEach((material) => {
+                if (!material) {
+                    return;
+                }
+                // Whichever slots this kind of material has: map, normalMap, emissiveMap...
+                Object.values(material).forEach((value) => {
+                    if (value?.isTexture) {
+                        free(value);
+                    }
+                });
+                free(material);
+            });
+        });
+    }
+    destroy() {
+        this.live = false;
+        this.stopRendering();
         window.removeEventListener('keydown', this.onKeyDown);
+        this.canvasListeners.forEach((remove) => remove());
+        this.canvasListeners = [];
         if (this.canvasResizeObserver) {
             this.canvasResizeObserver.disconnect();
             this.canvasResizeObserver = undefined;
@@ -9066,6 +9876,13 @@ class ThreeJsService {
         this.clearTags();
         this.measuring = false;
         this.clearMeasurement();
+        this.clearCalibrationMarks();
+        this.pulses = [];
+        // While the renderer is still there to hand the memory back through.
+        this.removeModel();
+        // They were in the scene that is going. Kept, the next scene would go on testing every pointer
+        // move against objects nobody can see, and would skip loading them again as "already there".
+        this.clickableObjects = [];
         if (this.renderer) {
             this.renderer.dispose();
         }
@@ -9551,6 +10368,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 /* eslint-disable camelcase */
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable class-methods-use-this */
+/**
+ * What a Gaussian splat file is named with, when it is a .ply: the content is what tells it from
+ * another .ply, and the key is all a visit stores (see isGaussianSplatPly).
+ */
+const GAUSSIAN_SPLAT_PLY_SUFFIX = '.splat.ply';
+/**
+ * Whether a 3D model file holds Gaussian splats, which the Three.js viewer cannot draw: .spz,
+ * .splat, .ksplat, SuperSplat's .sog, a .ply named with GAUSSIAN_SPLAT_PLY_SUFFIX, or the
+ * lod-meta.json of a Streamed SOG - SuperSplat's levels of detail, in pieces beside it.
+ */
+function isGaussianSplatFile(name) {
+    return /\.(spz|splat|ksplat|sog|splat\.ply)($|\?)/i.test(name ?? '') || isStreamedSplatFile(name);
+}
+/**
+ * Whether a .ply holds Gaussian splats: what splat tools export carries, for each splat, its colour
+ * as spherical harmonics (f_dc_0...) and its size (scale_0...). Only the header is read.
+ */
+async function isGaussianSplatPly(file) {
+    const start = await file.slice(0, 64 * 1024).text();
+    const end = start.indexOf('end_header');
+    if (!start.startsWith('ply') || end < 0) {
+        return false;
+    }
+    const properties = start.slice(0, end).split(/\r?\n/)
+        .map((line) => line.trim().split(/\s+/))
+        .filter((words) => words[0] === 'property')
+        .map((words) => words[words.length - 1]);
+    return properties.includes('f_dc_0') && properties.includes('scale_0');
+}
+/** Whether a 3D model file is the lod-meta.json of a Streamed SOG; see isGaussianSplatFile. */
+function isStreamedSplatFile(name) {
+    return /(^|\/)lod-meta\.json($|\?)/i.test(name ?? '');
+}
 class ViewerService {
     sdkKey;
     config;
@@ -9827,15 +10677,35 @@ class ViewerService {
         if (![position?.x, position?.y, position?.z].every((value) => typeof value === 'number')) {
             return;
         }
+        // A tag is its position; the icon is how it is dressed. One that cannot be fetched - a
+        // signature that expired, a file gone from the bucket - must not cost the tag itself.
+        let iconUrl;
+        try {
+            iconUrl = await this.resolveTagIconUrl(poi);
+        }
+        catch (error) {
+            console.warn(`ViewerService: no icon for the tag of element ${object.id}, using the default one.`, error);
+            iconUrl = this.defaultTagIconUrl(poi.type);
+        }
         const origin = getThreeJsPoiOrigin(poi);
+        // Matterport's stem, kept with the POI by both viewers that place tags.
+        let normal = null;
+        try {
+            const stored = poi.metadata ? JSON.parse(poi.metadata)?.normal : null;
+            normal = [stored?.x, stored?.y, stored?.z].every((value) => typeof value === 'number') ? stored : null;
+        }
+        catch {
+            normal = null;
+        }
         this.threeJsService.upsertTag({
             id: object.id,
             position,
             poiType: poi.type,
             label: object.name ?? object.title ?? null,
-            iconUrl: await this.resolveTagIconUrl(poi),
+            iconUrl,
             originCaptureID: origin?.captureID ?? null,
             frame: origin?.frame ?? null,
+            normal,
         });
     }
     /**
@@ -9953,6 +10823,40 @@ class ViewerService {
             this.threeJsService.goToTag(elementId);
         }
     }
+    /** The tag the Three.js camera is sent to, for the splat viewer to point out; see goToThreeJsTag. */
+    get threeJsTagFocused$() {
+        return this.threeJsService.tagFocused$;
+    }
+    /** A tag clicked in the splat viewer, said as threeJsTagClicked$ says one clicked in the scene. */
+    clickThreeJsTag(elementId) {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.clickTag(elementId);
+        }
+    }
+    /** Whether the visit's 3D model has a calibration, from its capture's metadata. */
+    isThreeJsCalibrated() {
+        return this.threeJsCalibrated;
+    }
+    /** Whether the tags a calibration works with are on show; see ThreeJsService.showsCalibrationTags. */
+    isThreeJsShowingCalibrationTags() {
+        return this.checkMode('threejs') && this.threeJsService.showsCalibrationTags();
+    }
+    /** Whether a calibration is under way in the Three.js scene. */
+    isThreeJsAligningTags() {
+        return this.checkMode('threejs') && this.threeJsService.isAligningTags();
+    }
+    /** Whether a measurement is taking clicks in the Three.js scene. */
+    isThreeJsMeasuring() {
+        return this.checkMode('threejs') && this.threeJsService.isMeasuring();
+    }
+    /** True when a measurement starts taking clicks, false when it stops; see ThreeJsService.measuringChanged$. */
+    get threeJsMeasuringChanged$() {
+        return this.threeJsService.measuringChanged$;
+    }
+    /** Says a click in the splat viewer was of no use to the calibration, as one in the scene would. */
+    ignoreThreeJsAlignmentClick(expected) {
+        this.threeJsService.alignmentClickIgnored$.next(expected);
+    }
     /** Shows only tags of the given POI types; null clears the filter. */
     setVisibleThreeJsTagTypes(types) {
         if (this.checkMode('threejs')) {
@@ -9975,6 +10879,24 @@ class ViewerService {
             this.threeJsService.cancelTagAlignment();
         }
     }
+    /**
+     * Says whether the 3D model on screen is the site's only visit. Then there is nowhere else for a
+     * tag to have come from, and the tags that do not record where they were placed are its own.
+     */
+    setThreeJsSoleVisit(sole) {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.setSoleVisit(sole);
+        }
+    }
+    /**
+     * Shows the tags a calibration would work with, including those hidden for not landing on the
+     * model, before anything is armed. Cancelling or saving the calibration hides them again.
+     */
+    revealThreeJsCalibrationTags() {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.revealCalibrationTags(true);
+        }
+    }
     get threeJsAlignmentProgress$() {
         return this.threeJsService.alignmentProgress$;
     }
@@ -10149,17 +11071,35 @@ class ViewerService {
     get threeJsMeasurementProgress$() {
         return this.threeJsService.measurementProgress$;
     }
-    /** Ends the Three.js measurement in progress, or returns null when it has fewer than two points. */
-    finishThreeJsMeasurement() {
+    /**
+     * Ends the Three.js measurement in progress, or returns null when it has fewer than two points.
+     * `screenshot` is the picture of it, when the model is drawn by another viewer than the scene.
+     */
+    finishThreeJsMeasurement(screenshot) {
         if (!this.checkMode('threejs')) {
             return null;
         }
-        const measurement = this.threeJsService.finishMeasuring();
+        const measurement = this.threeJsService.finishMeasuring(screenshot);
         if (measurement) {
             this.toolboxStates.mesure.stat = false;
         }
         return measurement;
     }
+    /** A measurement was taken off the model, finished or not; see ThreeJsService.measurementCleared$. */
+    get threeJsMeasurementCleared$() {
+        return this.threeJsService.measurementCleared$;
+    }
+    /**
+     * Adds a point to the measurement under way, picked on the model in another viewer - the splat
+     * viewer - in the model's own coordinates. False when no measurement is under way.
+     */
+    addThreeJsMeasurePointAtModelPoint(point) {
+        return this.checkMode('threejs') && this.threeJsService.addMeasurePointAtModelPoint(point);
+    }
+    /** The points of the measurement on the model, in the model's own coordinates, for another viewer to draw. */
+    getThreeJsMeasurePointsInModelFrame() {
+        return this.checkMode('threejs') ? this.threeJsService.getMeasurePointsInModelFrame() : [];
+    }
     /** The measurement last finished in the Three.js viewer, for the form that saves it. */
     getThreeJsLastMeasurement() {
         return this.checkMode('threejs') ? this.threeJsService.getLastMeasurement() : null;
@@ -10221,6 +11161,24 @@ class ViewerService {
     selectThreeJsAlignmentTag(elementId) {
         return this.checkMode('threejs') && this.threeJsService.selectAlignmentTag(elementId);
     }
+    /**
+     * Gives the tag being matched in the calibration under way its real place, picked on the model in
+     * another viewer - the splat viewer - in the model's own coordinates. False when no tag was waiting.
+     */
+    matchThreeJsAlignmentTagAtModelPoint(point) {
+        return this.checkMode('threejs') && this.threeJsService.matchAlignmentTagAtModelPoint(point);
+    }
+    /**
+     * Takes back the last step of the calibration under way: the tag just chosen, or else the last
+     * pair matched. False when there was nothing to take back.
+     */
+    undoThreeJsAlignmentStep() {
+        return this.checkMode('threejs') && this.threeJsService.undoAlignmentStep();
+    }
+    /** Removes one matched pair of the calibration under way, by its place in the list. */
+    removeThreeJsAlignmentPair(index) {
+        return this.checkMode('threejs') && this.threeJsService.removeAlignmentPair(index);
+    }
     /** 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;
@@ -10295,6 +11253,11 @@ class ViewerService {
             position: placement.position,
             poiType: updatedPoi?.type ?? poi.type,
             iconUrl: updatedPoi?.tagIcon ? await getSignedFile(updatedPoi.tagIcon) : null,
+            normal: placement.normal,
+            // As it is stored (see buildThreeJsPoiMetadata): placed in this model, and in its own
+            // coordinates while it is not calibrated - so that it shows as the model's own straight away.
+            ...(this.currentCaptureID ? { originCaptureID: this.currentCaptureID } : {}),
+            ...(this.currentCaptureID && !this.threeJsCalibrated ? { frame: 'model' } : {}),
         });
         this.threeJsService.cancelTagPlacement();
         return updatedPoi;
@@ -10309,7 +11272,7 @@ class ViewerService {
      *
      * Returns null when there is no pending placement, which is the normal case in Matterport mode.
      */
-    async createPoiForThreeJsPlacement(element, poiType) {
+    async createPoiForThreeJsPlacement(element, poiType, extra = {}) {
         if (!this.checkMode('threejs')) {
             return null;
         }
@@ -10321,6 +11284,8 @@ class ViewerService {
         // 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({
+            // What a form asked for besides the place - the museum's, say - under what the placement says.
+            ...extra,
             coordinate: JSON.stringify(placement.position),
             type: poiType,
             elementID: element.id,
@@ -10342,6 +11307,35 @@ class ViewerService {
     get threeJsAlignmentCancelled$() {
         return this.threeJsService.alignmentCancelled$;
     }
+    /** Emits when the Three.js tags change; see getThreeJsTagSnapshot. */
+    get threeJsTagsChanged$() {
+        return this.threeJsService.tagsChanged$;
+    }
+    /** The tags, and their calibration, as a viewer drawing the scene elsewhere needs them. */
+    getThreeJsTagSnapshot() {
+        return this.threeJsService.getTagSnapshot();
+    }
+    /** Stops drawing the Three.js scene while another viewer covers it, or starts again. */
+    setThreeJsRenderingPaused(paused) {
+        this.threeJsService.setRenderingPaused(paused);
+    }
+    /** Emits when a click during calibration landed on nothing it could use: a tag, or the model. */
+    get threeJsAlignmentClickIgnored$() {
+        return this.threeJsService.alignmentClickIgnored$;
+    }
+    /** Emits when Three.js tag placement is armed (true) and when it ends (false). */
+    get threeJsPlacementChanged$() {
+        return this.threeJsService.placementChanged$;
+    }
+    /**
+     * Completes an armed Three.js tag placement at a spot the splat viewer picked, in the model's own
+     * coordinates: the creation form then opens as for a click in the Three.js scene.
+     */
+    placeThreeJsTagAtModelPoint(point, normal = null) {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.placeTagAtModelPoint(point, normal);
+        }
+    }
     /** Leaves Three.js tag placement mode without placing anything. */
     cancelThreeJsTagPlacement() {
         if (this.checkMode('threejs')) {
@@ -10492,7 +11486,12 @@ class ViewerService {
         }
     }
     async initMatterportSdk(spaceID, model3D, tagService, module = SpModule.IMMO) {
-        this.isLoaded = false;
+        // A Three.js visit is announced as loaded by initThreeJs, and when one visit is swapped for
+        // another that has already happened by the time this runs. Clearing the flag here left the
+        // rest of the page believing no viewer was up - "show in 3D" greyed out on every panel.
+        if (!this.checkMode('threejs')) {
+            this.isLoaded = false;
+        }
         this.matterportService.currentSpaceID = spaceID;
         if (this.matterportService.sdk) {
             await this.clearAll();
@@ -10592,11 +11591,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: [{
@@ -15315,11 +16314,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: [{
@@ -15767,11 +16766,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: [{
@@ -15829,11 +16828,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 {
@@ -17273,11 +18272,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']
@@ -17546,15 +18545,367 @@ 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
             }] } });
 
+/**
+ * Gaussian splats, drawn by SuperSplat's viewer (PlayCanvas) in an iframe, as Matterport's showcase
+ * is: the page built from projects/splat-viewer, which each app serves from assets/viewers/splat.
+ *
+ * The visit's Three.js scene stays underneath, unseen, holding the tags, their calibration and the
+ * measurement, as it does for a model it draws itself; this hands the viewer what the scene holds,
+ * and turns what is clicked in it into what a click in the scene does - through ViewerService, so
+ * that whatever drives the scene (the add buttons, the calibration panel, the measuring tool, the
+ * tag lists) drives this as well. Tags clicked come out of ViewerService.threeJsTagClicked$, as
+ * clicks in the scene do.
+ *
+ * What it says of loading is for the app's own loading overlay; see the outputs.
+ */
+class SplatViewerComponent {
+    viewerService;
+    host;
+    sanitizer;
+    translate;
+    /** The model: the S3 key - or assets/ path - of a splat file, or of a Streamed SOG's lod-meta.json. */
+    modelKey = null;
+    /** Which of the model's axes is up, from its capture's placement; null for the viewer's own idea. */
+    up = null;
+    /** How far loading has got, from 0 to 1, or null when the size is not known. 0 when it starts. */
+    loadProgress = new EventEmitter();
+    loaded = new EventEmitter();
+    loadFailed = new EventEmitter();
+    /** Said whenever the mode changes, the viewer's own buttons included. */
+    modeChange = new EventEmitter();
+    frame;
+    /**
+     * The viewer's page, made once, in ngOnInit: a new object, even for the same address, would make
+     * Angular set the iframe's src again, which loads the viewer afresh with nothing in it.
+     */
+    page;
+    /** Whether the page has said it is ready; it says so again each time it starts over. */
+    ready = false;
+    /** The model handed to the page, so the same one is not downloaded twice. */
+    loadedKey = null;
+    /** Set by cancelLoad: the page, starting over empty, waits to be asked again (reload). */
+    cancelled = false;
+    /** Whether the page was last asked to take a click for a calibration. */
+    pickingForCalibration = false;
+    /** The calibration under way, as ViewerService last said. */
+    alignment = null;
+    /** Each segment's length of the measurement on the model, as ViewerService last said. */
+    measureDistances = [];
+    /** The last lod-meta.json handed to the page, as a link of this page's own. */
+    streamedMeta = null;
+    /** Pictures asked of the page, by the number they were asked with, until it answers. */
+    snapshots = new Map();
+    snapshotCount = 0;
+    destroyed$ = new Subject();
+    constructor(viewerService, host, sanitizer, translate) {
+        this.viewerService = viewerService;
+        this.host = host;
+        this.sanitizer = sanitizer;
+        this.translate = translate;
+    }
+    ngOnInit() {
+        // In the app's language, which the viewer's controls speak, and in its colours, as this element's
+        // styles take them from the app's - by now in the page, where they reach it.
+        const style = getComputedStyle(this.host.nativeElement);
+        const query = new URLSearchParams({
+            lang: this.translate.currentLang || 'en',
+            accent: style.color,
+            background: style.backgroundColor,
+        });
+        this.page = this.sanitizer.bypassSecurityTrustResourceUrl(`assets/viewers/splat/index.html?${query}`);
+        // The Three.js scene underneath has nothing to draw while this covers it, and the splat viewer
+        // needs all the graphics card there is.
+        this.viewerService.setThreeJsRenderingPaused(true);
+        const on = (source, next) => source.pipe(takeUntil(this.destroyed$)).subscribe(next);
+        on(this.viewerService.threeJsTagsChanged$, () => this.postTags());
+        // Placing a tag starts from the add buttons, the same in every viewer; the page picks the spot
+        // and says where ('picked').
+        on(this.viewerService.threeJsPlacementChanged$, (placing) => this.post({ type: 'placing', on: placing }));
+        on(this.viewerService.threeJsAlignmentProgress$, (progress) => {
+            this.alignment = progress;
+            this.postCalibration();
+        });
+        on(this.viewerService.threeJsAlignmentCancelled$, () => {
+            this.alignment = null;
+            this.postCalibration();
+        });
+        on(this.viewerService.threeJsMeasuringChanged$, (measuring) => this.post({ type: 'measuring', on: measuring }));
+        on(this.viewerService.threeJsMeasurementProgress$, (progress) => {
+            this.measureDistances = progress?.distances ?? [];
+            this.postMeasurement(!!progress);
+        });
+        // A finished measurement stays drawn while its form is open; this is when it goes.
+        on(this.viewerService.threeJsMeasurementCleared$, () => {
+            this.measureDistances = [];
+            this.postMeasurement(false);
+        });
+        // The camera sent to a tag, from a list: the page points it out.
+        on(this.viewerService.threeJsTagFocused$, (id) => this.post({ type: 'goToTag', id }));
+    }
+    ngOnChanges(changes) {
+        if (changes['modelKey'] && this.ready && !this.cancelled) {
+            void this.load();
+        }
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+        this.viewerService.setThreeJsRenderingPaused(false);
+        if (this.streamedMeta) {
+            URL.revokeObjectURL(this.streamedMeta);
+        }
+        this.snapshots.forEach((resolve) => resolve(null));
+        this.snapshots.clear();
+    }
+    /** Stops the model loading; nothing is loaded again until reload(). */
+    cancelLoad() {
+        this.cancelled = true;
+        this.loadedKey = null;
+        this.post({ type: 'cancel-load' });
+    }
+    /** Loads the model again, after cancelLoad. */
+    reload() {
+        this.cancelled = false;
+        this.loadedKey = null;
+        if (this.ready) {
+            void this.load();
+        }
+    }
+    setMode(mode) {
+        this.post({ type: 'mode', mode });
+    }
+    /**
+     * The scene as it is on screen, with the measurement drawn on it and no tags, as a JPEG data URL;
+     * null when there is no scene to take, or the page does not answer within ten seconds.
+     */
+    snapshot() {
+        const id = ++this.snapshotCount;
+        return new Promise((resolve) => {
+            this.snapshots.set(id, resolve);
+            this.post({ type: 'snapshot', id });
+            setTimeout(() => {
+                if (this.snapshots.delete(id)) {
+                    resolve(null);
+                }
+            }, 10000);
+        });
+    }
+    /** What the page says: that it is ready, how loading goes, what was clicked in it. */
+    onMessage(event) {
+        // Only this component's page, served from this same origin.
+        if (event.source !== this.frame?.nativeElement.contentWindow || event.origin !== window.location.origin) {
+            return;
+        }
+        const message = event.data;
+        const aligning = this.viewerService.isThreeJsAligningTags();
+        switch (message?.type) {
+            case 'ready':
+                // A new page, with nothing loaded or armed in it: the first, or the viewer starting over
+                // for the next model or after a cancelled load.
+                this.ready = true;
+                this.loadedKey = null;
+                this.pickingForCalibration = false;
+                if (!this.cancelled) {
+                    void this.load();
+                }
+                this.postTags();
+                this.postCalibration();
+                this.post({ type: 'measuring', on: this.viewerService.isThreeJsMeasuring() });
+                this.postMeasurement(this.viewerService.getThreeJsMeasurePointsInModelFrame().length > 0);
+                break;
+            case 'progress':
+                this.loadProgress.emit(message.fraction ?? null);
+                break;
+            case 'loaded':
+                this.loaded.emit();
+                break;
+            case 'error':
+                console.error('Splat viewer:', message.message);
+                this.loadFailed.emit(String(message.message ?? ''));
+                break;
+            case 'mode':
+                this.modeChange.emit(message.mode);
+                break;
+            case 'picked':
+                if (aligning && this.alignment?.awaiting === 'point') {
+                    // Where the tag being matched really is, as a click on the model in the scene would say.
+                    if (!this.viewerService.matchThreeJsAlignmentTagAtModelPoint(message.position)) {
+                        this.viewerService.ignoreThreeJsAlignmentClick('point');
+                    }
+                    break;
+                }
+                // As a click on the model in the scene: the app opens the creation form from threeJsTagPlaced$.
+                this.viewerService.placeThreeJsTagAtModelPoint(message.position, message.normal ?? null);
+                break;
+            case 'placing-cancelled':
+                // Escape, as in the scene: it ends a measurement or a calibration as it ends placing a tag.
+                if (this.viewerService.isThreeJsMeasuring()) {
+                    this.viewerService.action_toolbox_cancel_mesure();
+                }
+                else if (aligning) {
+                    this.viewerService.cancelThreeJsTagAlignment();
+                }
+                else {
+                    this.viewerService.cancelThreeJsTagPlacement();
+                }
+                break;
+            case 'calibration-undo':
+                // Ctrl+Z or Backspace in the page, as in the scene.
+                this.viewerService.undoThreeJsAlignmentStep();
+                break;
+            case 'measure-point':
+                this.viewerService.addThreeJsMeasurePointAtModelPoint(message.position);
+                break;
+            case 'tagClick':
+                if (aligning) {
+                    // Calibrating: a tag clicked is the one to match, as in the scene, and opens nothing.
+                    if (this.alignment?.awaiting !== 'tag' || !this.viewerService.selectThreeJsAlignmentTag(message.id)) {
+                        this.viewerService.ignoreThreeJsAlignmentClick('tag');
+                    }
+                    break;
+                }
+                this.viewerService.clickThreeJsTag(message.id);
+                break;
+            case 'snapshot':
+                this.snapshots.get(message.id)?.(message.image ?? null);
+                this.snapshots.delete(message.id);
+                break;
+            case 'sign': {
+                // A piece of the Streamed SOG open, by its name beside lod-meta.json.
+                const key = this.loadedKey;
+                const folder = key ? key.slice(0, key.lastIndexOf('/') + 1) : '';
+                const file = String(message.file ?? '');
+                const allowed = key && isStreamedSplatFile(key) && /^[\w.-]+$/.test(file);
+                (allowed ? getSignedFile(folder + file) : Promise.resolve(null)).then((url) => {
+                    this.post({ type: 'signed', id: message.id, url });
+                });
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    async load() {
+        const key = this.modelKey;
+        if (!key || key === this.loadedKey) {
+            return;
+        }
+        this.loadedKey = key;
+        this.loadProgress.emit(0);
+        let url = key.startsWith('assets/') ? key : await getSignedFile(key);
+        if (url && isStreamedSplatFile(key)) {
+            url = await this.streamedEntry(url);
+        }
+        if (this.loadedKey !== key) {
+            // Another model was asked for, or the load cancelled, while the link was being signed.
+            return;
+        }
+        this.post({ type: 'load', url, fileName: key.split('/').pop(), up: this.up });
+    }
+    /**
+     * The lod-meta.json of a Streamed SOG, with its pieces named so that the page asks for each of
+     * them when it needs it ('sign').
+     *
+     * The pieces sit beside lod-meta.json in S3 and are named relative to it, which a signed link -
+     * its signature in the query - does not survive. And they are fetched while the visit lasts, as the
+     * camera reaches them, long after any link signed up front has run out.
+     */
+    async streamedEntry(signedMeta) {
+        const meta = await (await fetch(signedMeta)).json();
+        meta.filenames = (meta.filenames ?? []).map((name) => `https://splat.invalid/${name}`);
+        if (this.streamedMeta) {
+            URL.revokeObjectURL(this.streamedMeta);
+        }
+        this.streamedMeta = URL.createObjectURL(new Blob([JSON.stringify(meta)], { type: 'application/json' }));
+        return this.streamedMeta;
+    }
+    postTags() {
+        const { tags, alignment } = this.viewerService.getThreeJsTagSnapshot();
+        // Tags placed elsewhere - in Matterport, in another model - are in that place's coordinates,
+        // and only a calibration says where they are in this one. Without it they float off the model
+        // and seem to slide as the camera moves: they are left out until it is calibrated. A
+        // calibration under way, or its panel open, shows them all: they are what it matches.
+        const all = this.viewerService.isThreeJsCalibrated() || this.viewerService.isThreeJsShowingCalibrationTags();
+        const shown = all ? tags : tags.filter((tag) => tag.inModelFrame);
+        this.post({
+            type: 'tags',
+            tags: shown.map(({ id, position, label, iconUrl, inModelFrame, normal }) => ({ id, position, label, iconUrl, inModelFrame, normal })),
+            alignment,
+        });
+    }
+    /**
+     * The calibration under way, for the page to draw - the pins dropped, the tag being matched - and,
+     * while the place of a tag is asked for, to take the click on the model that says where ('picked').
+     */
+    postCalibration() {
+        const on = this.viewerService.isThreeJsAligningTags() && !!this.alignment;
+        const awaiting = on ? this.alignment.awaiting : null;
+        this.post({
+            type: 'calibration',
+            calibration: on
+                ? {
+                    selected: awaiting === 'point' ? this.alignment.tagId ?? null : null,
+                    pairs: this.alignment.matched.map(({ tagId, target }) => ({ tagId, target })),
+                }
+                : null,
+        });
+        const picking = awaiting === 'point';
+        // Only when it changes: placing a tag uses the same click, and is not to be switched off here.
+        if (picking !== this.pickingForCalibration) {
+            this.pickingForCalibration = picking;
+            this.post({ type: 'placing', on: picking });
+        }
+    }
+    /** The measurement for the page to draw - its points, each segment's length - or nothing. */
+    postMeasurement(drawn) {
+        this.post({
+            type: 'measurement',
+            measurement: drawn
+                ? { points: this.viewerService.getThreeJsMeasurePointsInModelFrame(), distances: this.measureDistances }
+                : null,
+        });
+    }
+    post(command) {
+        const page = this.frame?.nativeElement.contentWindow;
+        if (page && this.ready) {
+            page.postMessage(command, window.location.origin);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SplatViewerComponent, deps: [{ token: ViewerService }, { token: i0.ElementRef }, { token: i1$3.DomSanitizer }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SplatViewerComponent, selector: "lib-splat-viewer", inputs: { modelKey: "modelKey", up: "up" }, outputs: { loadProgress: "loadProgress", loaded: "loaded", loadFailed: "loadFailed", modeChange: "modeChange" }, host: { listeners: { "window:message": "onMessage($event)" } }, viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: '<iframe #frame [src]="page" title="3D" allow="fullscreen; xr-spatial-tracking" allowfullscreen></iframe>', isInline: true, styles: [":host{display:block;color:var(--smarterplan-primary, rgb(83, 182, 187));background-color:var(--smarterplan-viewer-background, #e0f7ff)}iframe{display:block;width:100%;height:100%;border:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SplatViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-splat-viewer', template: '<iframe #frame [src]="page" title="3D" allow="fullscreen; xr-spatial-tracking" allowfullscreen></iframe>', styles: [":host{display:block;color:var(--smarterplan-primary, rgb(83, 182, 187));background-color:var(--smarterplan-viewer-background, #e0f7ff)}iframe{display:block;width:100%;height:100%;border:0}\n"] }]
+        }], ctorParameters: () => [{ type: ViewerService }, { type: i0.ElementRef }, { type: i1$3.DomSanitizer }, { type: i1.TranslateService }], propDecorators: { modelKey: [{
+                type: Input
+            }], up: [{
+                type: Input
+            }], loadProgress: [{
+                type: Output
+            }], loaded: [{
+                type: Output
+            }], loadFailed: [{
+                type: Output
+            }], modeChange: [{
+                type: Output
+            }], frame: [{
+                type: ViewChild,
+                args: ['frame', { static: true }]
+            }], onMessage: [{
+                type: HostListener,
+                args: ['window:message', ['$event']]
+            }] } });
+
 class NgxSmarterplanCoreModule {
     static forRoot(config) {
         return {
@@ -17581,7 +18932,8 @@ class NgxSmarterplanCoreModule {
             NavigationBarComponent,
             LoaderComponent,
             SupportModalComponent,
-            FormatDateNumberToDigitsPipe], imports: [FormsModule,
+            FormatDateNumberToDigitsPipe,
+            SplatViewerComponent], imports: [FormsModule,
             ReactiveFormsModule,
             CommonModule,
             RouterModule,
@@ -17595,7 +18947,8 @@ class NgxSmarterplanCoreModule {
             MenuBarComponent,
             LoaderComponent,
             SupportModalComponent,
-            AvatarComponent] });
+            AvatarComponent,
+            SplatViewerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxSmarterplanCoreModule, imports: [FormsModule,
             ReactiveFormsModule,
             CommonModule,
@@ -17622,7 +18975,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NavigationBarComponent,
                         LoaderComponent,
                         SupportModalComponent,
-                        FormatDateNumberToDigitsPipe
+                        FormatDateNumberToDigitsPipe,
+                        SplatViewerComponent
                     ],
                     imports: [
                         FormsModule,
@@ -17646,6 +19000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         LoaderComponent,
                         SupportModalComponent,
                         AvatarComponent,
+                        SplatViewerComponent,
                     ]
                 }]
         }] });
@@ -17705,27 +19060,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) {
@@ -17734,15 +19089,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) {
@@ -17751,27 +19106,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 });
@@ -18302,7 +19657,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }] }, { type: NavigationService }, { type: ZoneService }, { type: ViewerService }, { type: LayerService }, { type: BaseUserService }, { type: PlanService }] });
 
 /** File extensions the Three.js viewer can load as a base model. */
-const SUPPORTED_MODEL_EXTENSIONS = ['.glb', '.gltf'];
+// The splat formats open in the splat viewer, which runs in an iframe.
+const SUPPORTED_MODEL_EXTENSIONS = ['.glb', '.gltf', '.splat.ply', '.spz', '.splat', '.ksplat', '.sog', 'lod-meta.json'];
 class ThreeJsImportService {
     navigationService;
     zoneService;
@@ -18332,11 +19688,12 @@ class ThreeJsImportService {
      */
     validateModelKey(key) {
         if (!key || !key.trim()) {
-            return 'A 3D model file (.glb) is required for a Three.js visit.';
+            return 'A 3D model file is required.';
         }
         const trimmed = key.trim();
         if (!SUPPORTED_MODEL_EXTENSIONS.some((extension) => trimmed.toLowerCase().endsWith(extension))) {
-            return `The 3D model must be a ${SUPPORTED_MODEL_EXTENSIONS.join(' or ')} file.`;
+            const listed = SUPPORTED_MODEL_EXTENSIONS.slice(0, -1).join(', ');
+            return `The 3D model must be a ${listed} or ${SUPPORTED_MODEL_EXTENSIONS[SUPPORTED_MODEL_EXTENSIONS.length - 1]} file.`;
         }
         // A full https:// URL is a signed link that expires; the stored value has to be the key itself
         // so a fresh URL can be signed on every visit.
@@ -18442,6 +19799,655 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], ctorParameters: () => [{ type: NavigationService }, { type: ZoneService }, { type: LayerService }, { type: BaseUserService }, { type: PlanService }] });
 
+/**
+ * Converts an .obj model, with its .mtl and textures, into the .glb the Three.js viewer loads - in
+ * the browser, as the model is added, with nothing to install.
+ *
+ * It does what obj2gltf did in converte-modelo.sh, and the reason is the same. An .obj lists every
+ * corner of every triangle; loaded as it is, a captured model's 2.6 million distinct vertices become
+ * 12.6 million, one per corner. Here each position and texture coordinate pair becomes one vertex,
+ * shared by every triangle that uses it, so what reaches the graphics card is the 2.6 million.
+ *
+ * Textures go in as they are, their bytes untouched: a JPEG re-encoded would lose quality and gain
+ * nothing. Normals are only written when the .obj has them; without, the viewer works them out as
+ * it loads the model. The axes are left as the .obj has them - the viewer finds which way is up.
+ *
+ * The .obj is read as a stream, so a file of hundreds of megabytes is never held whole.
+ */
+/** Whether a set of files holds an .obj model to convert. */
+function hasObjModel(files) {
+    return files.some((file) => /\.obj$/i.test(file.name));
+}
+/**
+ * Converts the .obj among `files` into a .glb, using the .mtl and the images found with it.
+ */
+async function convertObjToGlb(files, options = {}) {
+    const objs = files.filter((file) => /\.obj$/i.test(file.name));
+    if (objs.length !== 1) {
+        throw new Error(objs.length === 0 ? 'No .obj file was given.' : 'Give one .obj file at a time.');
+    }
+    const obj = objs[0];
+    const byName = new Map(files.map((file) => [baseName(file.name).toLowerCase(), file]));
+    // The .obj's own reading is most of the time; the rest is shared out over what follows.
+    const parsed = await readObj(obj.stream(), obj.size, {
+        ...options,
+        onProgress: (fraction) => options.onProgress?.(fraction * 0.85),
+    });
+    if (parsed.triangleCount === 0) {
+        throw new Error(`${obj.name} has no faces.`);
+    }
+    // Materials: from the .mtl files the .obj names, or failing that any .mtl given with it.
+    const named = parsed.materialLibraries.map((library) => byName.get(baseName(library).toLowerCase())).filter(Boolean);
+    const libraries = named.length > 0 ? named : files.filter((file) => /\.mtl$/i.test(file.name));
+    const materials = new Map();
+    for (const library of libraries) {
+        parseMtl(await library.text()).forEach((material) => materials.set(material.name, material));
+    }
+    await pause(options.signal);
+    const breaks = new Breaks(options.signal, options.onProgress);
+    const geometry = await indexGeometry(parsed, breaks);
+    options.onProgress?.(0.95);
+    await pause(options.signal);
+    const missing = new Set();
+    const glb = await writeGlb(parsed, geometry, materials, byName, missing, obj.name, breaks);
+    options.onProgress?.(1);
+    return {
+        file: new File([glb], obj.name.replace(/\.obj$/i, '') + '.glb', { type: 'model/gltf-binary' }),
+        vertices: geometry.vertexCount,
+        triangles: parsed.triangleCount,
+        materials: parsed.groups.length,
+        missingTextures: [...missing],
+    };
+}
+/** The file name without its folders, which is how an .mtl or a texture is looked up. */
+function baseName(path) {
+    return path.trim().replace(/^"|"$/g, '').split(/[\\/]/).pop() ?? path;
+}
+/** Lets the page draw and answer for a moment, and stops here if the conversion was cancelled. */
+async function pause(signal) {
+    if (signal?.aborted) {
+        throw new DOMException('Model conversion cancelled', 'AbortError');
+    }
+    await new Promise((resolve) => setTimeout(resolve, 0));
+}
+/**
+ * Stops a long loop now and then so the page can draw and answer clicks. Checked only every few
+ * thousand turns of the loop: waiting on a promise every turn would cost more than the loop.
+ */
+class Breaks {
+    signal;
+    onProgress;
+    last = performance.now();
+    constructor(signal, onProgress) {
+        this.signal = signal;
+        this.onProgress = onProgress;
+    }
+    /** Whether this turn of the loop should stop for a moment. Synchronous: it is asked every turn. */
+    due(turn) {
+        return (turn & 0x3fff) === 0 && performance.now() - this.last > 40;
+    }
+    /** Stops for a moment, reporting how far the conversion has got. */
+    async take(fraction) {
+        this.onProgress?.(fraction);
+        await pause(this.signal);
+        this.last = performance.now();
+    }
+}
+/** A growable typed array: an .obj does not say up front how many of anything it holds. */
+class Growable {
+    data;
+    length = 0;
+    constructor(data) {
+        this.data = data;
+    }
+    push(value) {
+        if (this.length === this.data.length) {
+            const bigger = new this.data.constructor(this.data.length * 2);
+            bigger.set(this.data);
+            this.data = bigger;
+        }
+        this.data[this.length] = value;
+        this.length += 1;
+    }
+    view() {
+        return this.data.subarray(0, this.length);
+    }
+}
+/**
+ * Reads an .obj from a stream of its bytes: positions, texture coordinates, normals, and triangles
+ * grouped by material. Polygons are split into triangles; negative indices, counting back from the
+ * end, are resolved; anything else (objects, groups, smoothing) is skipped.
+ */
+async function readObj(stream, size, options = {}) {
+    const parser = new ObjParser();
+    const reader = stream.getReader();
+    let read = 0;
+    let lastBreak = performance.now();
+    try {
+        for (;;) {
+            if (options.signal?.aborted) {
+                throw new DOMException('Model conversion cancelled', 'AbortError');
+            }
+            const { done, value } = await reader.read();
+            if (done) {
+                break;
+            }
+            parser.push(value);
+            read += value.length;
+            if (performance.now() - lastBreak > 40) {
+                options.onProgress?.(size > 0 ? Math.min(read / size, 1) : 0);
+                await new Promise((resolve) => setTimeout(resolve, 0));
+                lastBreak = performance.now();
+            }
+        }
+    }
+    finally {
+        reader.cancel().catch(() => undefined);
+    }
+    parser.end();
+    options.onProgress?.(1);
+    return parser.result();
+}
+/**
+ * Line by line, straight from the bytes. Building a string for each of the millions of lines of a
+ * captured model would be most of the work; this reads the numbers off the bytes instead.
+ */
+class ObjParser {
+    positions = new Growable(new Float64Array(1 << 16));
+    uvs = new Growable(new Float64Array(1 << 16));
+    normals = new Growable(new Float64Array(1 << 16));
+    groups = [];
+    groupByMaterial = new Map();
+    current = null;
+    materialLibraries = [];
+    triangleCount = 0;
+    /** The bytes of the line being read, kept across chunks. */
+    line = new Uint8Array(256);
+    lineLength = 0;
+    // The corners of the face being read, as position/texture/normal indices.
+    face = new Int32Array(3 * 64);
+    push(bytes) {
+        for (let index = 0; index < bytes.length; index += 1) {
+            const byte = bytes[index];
+            if (byte === 10) {
+                this.readLine();
+                this.lineLength = 0;
+            }
+            else {
+                if (this.lineLength === this.line.length) {
+                    const longer = new Uint8Array(this.line.length * 2);
+                    longer.set(this.line);
+                    this.line = longer;
+                }
+                this.line[this.lineLength] = byte;
+                this.lineLength += 1;
+            }
+        }
+    }
+    end() {
+        this.readLine();
+        this.lineLength = 0;
+    }
+    result() {
+        return {
+            positions: this.positions.view(),
+            uvs: this.uvs.view(),
+            normals: this.normals.view(),
+            groups: this.groups.filter((group) => group.corners.length > 0),
+            materialLibraries: this.materialLibraries,
+            triangleCount: this.triangleCount,
+        };
+    }
+    readLine() {
+        const line = this.line;
+        const length = this.lineLength;
+        let at = 0;
+        while (at < length && (line[at] === 32 || line[at] === 9)) {
+            at += 1;
+        }
+        if (at + 1 >= length) {
+            return;
+        }
+        const first = line[at];
+        const second = line[at + 1];
+        if (first === 118 && (second === 32 || second === 9)) {
+            // v x y z
+            this.readNumbers(at + 2, 3, this.positions);
+        }
+        else if (first === 118 && second === 116) {
+            // vt u v
+            this.readNumbers(at + 3, 2, this.uvs);
+        }
+        else if (first === 118 && second === 110) {
+            // vn x y z
+            this.readNumbers(at + 3, 3, this.normals);
+        }
+        else if (first === 102 && (second === 32 || second === 9)) {
+            this.readFace(at + 2);
+        }
+        else if (this.startsWith(at, 'usemtl')) {
+            this.useMaterial(this.restOfLine(at + 6));
+        }
+        else if (this.startsWith(at, 'mtllib')) {
+            this.materialLibraries.push(...this.restOfLine(at + 6).split(/\s+(?=\S+\.mtl\b)/i).filter(Boolean));
+        }
+    }
+    startsWith(at, word) {
+        for (let index = 0; index < word.length; index += 1) {
+            if (this.line[at + index] !== word.charCodeAt(index)) {
+                return false;
+            }
+        }
+        const after = this.line[at + word.length];
+        return after === 32 || after === 9;
+    }
+    restOfLine(at) {
+        let end = this.lineLength;
+        while (end > at && (this.line[end - 1] === 13 || this.line[end - 1] === 32 || this.line[end - 1] === 9)) {
+            end -= 1;
+        }
+        return new TextDecoder().decode(this.line.subarray(at, end)).trim();
+    }
+    useMaterial(name) {
+        let group = this.groupByMaterial.get(name);
+        if (!group) {
+            group = { material: name, corners: new Growable(new Int32Array(1 << 12)) };
+            this.groupByMaterial.set(name, group);
+            this.groups.push(group);
+        }
+        this.current = group;
+    }
+    /** Reads up to `count` numbers from `at` onwards into `target`, padding a short line with 0. */
+    readNumbers(at, count, target) {
+        let read = 0;
+        let position = at;
+        while (read < count) {
+            const [value, next] = this.readNumber(position);
+            if (next === position) {
+                break;
+            }
+            target.push(value);
+            read += 1;
+            position = next;
+        }
+        for (; read < count; read += 1) {
+            target.push(0);
+        }
+    }
+    /** Reads one number starting at or after `at`; returns it and where it ended. */
+    readNumber(at) {
+        const line = this.line;
+        const length = this.lineLength;
+        let index = at;
+        while (index < length && (line[index] === 32 || line[index] === 9 || line[index] === 13)) {
+            index += 1;
+        }
+        const start = index;
+        let negative = false;
+        if (line[index] === 45 || line[index] === 43) {
+            negative = line[index] === 45;
+            index += 1;
+        }
+        let whole = 0;
+        let fraction = 0;
+        let scale = 1;
+        let digits = 0;
+        while (index < length && line[index] >= 48 && line[index] <= 57) {
+            whole = whole * 10 + (line[index] - 48);
+            index += 1;
+            digits += 1;
+        }
+        if (line[index] === 46) {
+            index += 1;
+            while (index < length && line[index] >= 48 && line[index] <= 57) {
+                fraction = fraction * 10 + (line[index] - 48);
+                scale *= 10;
+                index += 1;
+                digits += 1;
+            }
+        }
+        if (digits === 0) {
+            return [0, at];
+        }
+        let value = whole + fraction / scale;
+        if (line[index] === 101 || line[index] === 69) {
+            index += 1;
+            let negativeExponent = false;
+            if (line[index] === 45 || line[index] === 43) {
+                negativeExponent = line[index] === 45;
+                index += 1;
+            }
+            let exponent = 0;
+            while (index < length && line[index] >= 48 && line[index] <= 57) {
+                exponent = exponent * 10 + (line[index] - 48);
+                index += 1;
+            }
+            value *= 10 ** (negativeExponent ? -exponent : exponent);
+        }
+        return [negative ? -value : value, index === start ? at : index];
+    }
+    /** f v/vt/vn ... - any of the three forms, any number of corners, split into a fan. */
+    readFace(at) {
+        const line = this.line;
+        const length = this.lineLength;
+        let corners = 0;
+        let index = at;
+        while (index < length) {
+            while (index < length && (line[index] === 32 || line[index] === 9 || line[index] === 13)) {
+                index += 1;
+            }
+            if (index >= length) {
+                break;
+            }
+            // One corner: up to three integers separated by '/', any of the last two possibly empty.
+            const values = [0, 0, 0];
+            for (let slot = 0; slot < 3; slot += 1) {
+                let negative = false;
+                if (line[index] === 45) {
+                    negative = true;
+                    index += 1;
+                }
+                let value = 0;
+                let digits = 0;
+                while (index < length && line[index] >= 48 && line[index] <= 57) {
+                    value = value * 10 + (line[index] - 48);
+                    index += 1;
+                    digits += 1;
+                }
+                values[slot] = digits === 0 ? 0 : negative ? -value : value;
+                if (line[index] !== 47) {
+                    break;
+                }
+                index += 1;
+            }
+            if (corners < 64 && values[0] !== 0) {
+                // To zero-based indices, counting a negative one back from what has been read so far; -1
+                // means "none" for the texture and normal.
+                this.face[corners * 3] = this.resolve(values[0], this.positions.length / 3);
+                this.face[corners * 3 + 1] = values[1] === 0 ? -1 : this.resolve(values[1], this.uvs.length / 2);
+                this.face[corners * 3 + 2] = values[2] === 0 ? -1 : this.resolve(values[2], this.normals.length / 3);
+                corners += 1;
+            }
+            // Skip to the next separator, past anything unexpected in this token.
+            while (index < length && line[index] !== 32 && line[index] !== 9) {
+                index += 1;
+            }
+        }
+        if (corners < 3) {
+            return;
+        }
+        if (!this.current) {
+            this.useMaterial(null);
+        }
+        const target = this.current.corners;
+        for (let corner = 1; corner + 1 < corners; corner += 1) {
+            for (const which of [0, corner, corner + 1]) {
+                target.push(this.face[which * 3]);
+                target.push(this.face[which * 3 + 1]);
+                target.push(this.face[which * 3 + 2]);
+            }
+            this.triangleCount += 1;
+        }
+    }
+    resolve(index, count) {
+        return index > 0 ? index - 1 : count + index;
+    }
+}
+/**
+ * Turns corners into shared vertices: one vertex per distinct position, texture and normal triple.
+ *
+ * Corners are grouped by position first, and the few corners that share a position are compared
+ * with one another. That needs no table of every triple ever seen - which, over millions of
+ * corners, would cost far more memory than the model itself.
+ */
+async function indexGeometry(parsed, breaks) {
+    const positionCount = parsed.positions.length / 3;
+    const groups = parsed.groups.map((group) => group.corners.view());
+    const cornerCount = groups.reduce((sum, corners) => sum + corners.length / 3, 0);
+    // Every corner, numbered across all groups, listed under its position.
+    const perPosition = new Int32Array(positionCount + 1);
+    groups.forEach((corners) => {
+        for (let at = 0; at < corners.length; at += 3) {
+            perPosition[corners[at] + 1] += 1;
+        }
+    });
+    for (let position = 0; position < positionCount; position += 1) {
+        perPosition[position + 1] += perPosition[position];
+    }
+    const filled = perPosition.slice(0, positionCount);
+    const byPosition = new Int32Array(cornerCount);
+    const cornerStart = [];
+    let numbered = 0;
+    groups.forEach((corners) => {
+        cornerStart.push(numbered);
+        for (let at = 0; at < corners.length; at += 3) {
+            byPosition[filled[corners[at]]] = numbered;
+            filled[corners[at]] += 1;
+            numbered += 1;
+        }
+    });
+    // Which group each corner is in, so its triple can be read back where it already is rather than
+    // from a copy of every corner.
+    const groupOf = new Uint16Array(cornerCount);
+    groups.forEach((corners, group) => groupOf.fill(group, cornerStart[group], cornerStart[group] + corners.length / 3));
+    const vertexOfCorner = new Uint32Array(cornerCount);
+    const sources = new Growable(new Int32Array(Math.max(16, positionCount * 3 * 1.3) | 0));
+    let vertexCount = 0;
+    for (let position = 0; position < positionCount; position += 1) {
+        if (breaks.due(position)) {
+            await breaks.take(0.85 + 0.07 * (position / positionCount));
+        }
+        const first = vertexCount;
+        for (let at = perPosition[position]; at < perPosition[position + 1]; at += 1) {
+            const corner = byPosition[at];
+            const group = groupOf[corner];
+            const triple = (corner - cornerStart[group]) * 3;
+            const uv = groups[group][triple + 1];
+            const normal = groups[group][triple + 2];
+            let found = -1;
+            for (let vertex = first; vertex < vertexCount; vertex += 1) {
+                if (sources.data[vertex * 3 + 1] === uv && sources.data[vertex * 3 + 2] === normal) {
+                    found = vertex;
+                    break;
+                }
+            }
+            if (found < 0) {
+                found = vertexCount;
+                sources.push(position);
+                sources.push(uv);
+                sources.push(normal);
+                vertexCount += 1;
+            }
+            vertexOfCorner[corner] = found;
+        }
+    }
+    return {
+        vertexCount,
+        sources: sources.view(),
+        indices: groups.map((corners, group) => vertexOfCorner.slice(cornerStart[group], cornerStart[group] + corners.length / 3)),
+    };
+}
+/** The parts of an .mtl that matter here: the colour, the opacity and the colour texture. */
+function parseMtl(text) {
+    const materials = [];
+    let current = null;
+    text.split(/\r?\n/).forEach((raw) => {
+        const line = raw.trim();
+        const [keyword, ...rest] = line.split(/\s+/);
+        if (keyword === 'newmtl') {
+            current = { name: rest.join(' '), colour: [1, 1, 1], opacity: 1, texture: null };
+            materials.push(current);
+        }
+        else if (!current) {
+            return;
+        }
+        else if (keyword === 'Kd' && rest.length >= 3) {
+            current.colour = [Number(rest[0]), Number(rest[1]), Number(rest[2])];
+        }
+        else if (keyword === 'd' && rest.length >= 1) {
+            current.opacity = Number(rest[0]);
+        }
+        else if (keyword === 'map_Kd' && rest.length >= 1) {
+            // Options (-s 1 1 1, -o ..., -bm 0.5) come before the file name, which is what is left.
+            current.texture = rest[rest.length - 1];
+        }
+    });
+    return materials;
+}
+/**
+ * Writes the .glb. The binary part is assembled from the arrays and the texture files as they are,
+ * into a Blob - so the textures are never read into memory, nor the whole file built in one buffer.
+ */
+async function writeGlb(parsed, geometry, materials, files, missing, name, breaks) {
+    const { vertexCount, sources } = geometry;
+    const hasUv = parsed.uvs.length > 0 && hasAny(sources, 1);
+    const hasNormals = parsed.normals.length > 0 && hasAny(sources, 2);
+    const positions = new Float32Array(vertexCount * 3);
+    const min = [Infinity, Infinity, Infinity];
+    const max = [-Infinity, -Infinity, -Infinity];
+    const uvs = hasUv ? new Float32Array(vertexCount * 2) : null;
+    const normals = hasNormals ? new Float32Array(vertexCount * 3) : null;
+    for (let vertex = 0; vertex < vertexCount; vertex += 1) {
+        if (breaks.due(vertex)) {
+            await breaks.take(0.95 + 0.04 * (vertex / vertexCount));
+        }
+        const position = sources[vertex * 3];
+        for (let axis = 0; axis < 3; axis += 1) {
+            const value = parsed.positions[position * 3 + axis];
+            positions[vertex * 3 + axis] = value;
+            min[axis] = Math.min(min[axis], Math.fround(value));
+            max[axis] = Math.max(max[axis], Math.fround(value));
+        }
+        if (uvs) {
+            const uv = sources[vertex * 3 + 1];
+            // An .obj counts v up from the bottom of the image, glTF down from the top.
+            uvs[vertex * 2] = uv >= 0 ? parsed.uvs[uv * 2] : 0;
+            uvs[vertex * 2 + 1] = uv >= 0 ? 1 - parsed.uvs[uv * 2 + 1] : 0;
+        }
+        if (normals) {
+            const normal = sources[vertex * 3 + 2];
+            for (let axis = 0; axis < 3; axis += 1) {
+                normals[vertex * 3 + axis] = normal >= 0 ? parsed.normals[normal * 3 + axis] : 0;
+            }
+        }
+    }
+    const parts = [];
+    const bufferViews = [];
+    let byteLength = 0;
+    const addView = (part, size, target) => {
+        const padding = (4 - (byteLength % 4)) % 4;
+        if (padding) {
+            parts.push(new Uint8Array(padding));
+            byteLength += padding;
+        }
+        parts.push(part);
+        bufferViews.push({ buffer: 0, byteOffset: byteLength, byteLength: size, ...(target ? { target } : {}) });
+        byteLength += size;
+        return bufferViews.length - 1;
+    };
+    const accessors = [];
+    const addAccessor = (data, type, count, extra = {}, target) => {
+        const view = addView(data, data.byteLength, target);
+        accessors.push({ bufferView: view, componentType: data instanceof Float32Array ? 5126 : 5125, count, type, ...extra });
+        return accessors.length - 1;
+    };
+    const attributes = {
+        POSITION: addAccessor(positions, 'VEC3', vertexCount, { min, max }, 34962),
+    };
+    if (normals) {
+        attributes['NORMAL'] = addAccessor(normals, 'VEC3', vertexCount, {}, 34962);
+    }
+    if (uvs) {
+        attributes['TEXCOORD_0'] = addAccessor(uvs, 'VEC2', vertexCount, {}, 34962);
+    }
+    // Materials, each texture file stored once however many materials use it.
+    const images = [];
+    const textures = [];
+    const textureOf = new Map();
+    const textureIndex = (fileName) => {
+        const key = baseName(fileName).toLowerCase();
+        if (textureOf.has(key)) {
+            return textureOf.get(key);
+        }
+        const file = files.get(key);
+        if (!file) {
+            missing.add(baseName(fileName));
+            return null;
+        }
+        const mimeType = /\.png$/i.test(file.name) ? 'image/png' : 'image/jpeg';
+        images.push({ bufferView: addView(file, file.size), mimeType, name: baseName(file.name) });
+        textures.push({ source: images.length - 1, sampler: 0 });
+        textureOf.set(key, textures.length - 1);
+        return textures.length - 1;
+    };
+    const gltfMaterials = [];
+    const primitives = parsed.groups.map((group, index) => {
+        const material = group.material !== null ? materials.get(group.material) : undefined;
+        const texture = material?.texture ? textureIndex(material.texture) : null;
+        gltfMaterials.push({
+            name: group.material ?? 'default',
+            pbrMetallicRoughness: {
+                ...(texture !== null ? { baseColorTexture: { index: texture } } : {}),
+                baseColorFactor: texture !== null ? [1, 1, 1, material?.opacity ?? 1] : [...(material?.colour ?? [0.8, 0.8, 0.8]), material?.opacity ?? 1],
+                metallicFactor: 0,
+                roughnessFactor: 1,
+            },
+            ...(material && material.opacity < 1 ? { alphaMode: 'BLEND' } : {}),
+        });
+        const triangles = geometry.indices[index];
+        return {
+            attributes,
+            indices: addAccessor(triangles, 'SCALAR', triangles.length, {}, 34963),
+            material: gltfMaterials.length - 1,
+        };
+    });
+    const json = {
+        asset: { version: '2.0', generator: 'SmarterPlan obj-to-glb' },
+        scene: 0,
+        scenes: [{ nodes: [0] }],
+        nodes: [{ mesh: 0, name: name.replace(/\.obj$/i, '') }],
+        meshes: [{ primitives }],
+        materials: gltfMaterials,
+        ...(textures.length ? {
+            textures,
+            images,
+            // Linear filtering with mipmaps, repeating: what a captured model's atlas expects.
+            samplers: [{ magFilter: 9729, minFilter: 9987, wrapS: 10497, wrapT: 10497 }],
+        } : {}),
+        accessors,
+        bufferViews,
+        buffers: [{ byteLength }],
+    };
+    let jsonBytes = new TextEncoder().encode(JSON.stringify(json));
+    const jsonPadding = (4 - (jsonBytes.length % 4)) % 4;
+    if (jsonPadding) {
+        const padded = new Uint8Array(jsonBytes.length + jsonPadding).fill(32);
+        padded.set(jsonBytes);
+        jsonBytes = padded;
+    }
+    const binPadding = (4 - (byteLength % 4)) % 4;
+    const binLength = byteLength + binPadding;
+    const header = new DataView(new ArrayBuffer(12 + 8));
+    header.setUint32(0, 0x46546c67, true); // "glTF"
+    header.setUint32(4, 2, true);
+    header.setUint32(8, 12 + 8 + jsonBytes.length + 8 + binLength, true);
+    header.setUint32(12, jsonBytes.length, true);
+    header.setUint32(16, 0x4e4f534a, true); // "JSON"
+    const binHeader = new DataView(new ArrayBuffer(8));
+    binHeader.setUint32(0, binLength, true);
+    binHeader.setUint32(4, 0x004e4942, true); // "BIN"
+    return new Blob([header, jsonBytes, binHeader, ...parts, new Uint8Array(binPadding)]);
+}
+/** Whether any vertex uses the given slot of its source triple (texture or normal). */
+function hasAny(sources, slot) {
+    for (let at = slot; at < sources.length; at += 3) {
+        if (sources[at] >= 0) {
+            return true;
+        }
+    }
+    return false;
+}
+
 // matterport-transform.util.ts
 /**
  * Computes the rigid transform (Y-axis rotation + translation) between two
@@ -21416,5 +23422,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, 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 };
+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, GAUSSIAN_SPLAT_PLY_SUFFIX, 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, SplatViewerComponent, StatusEquipment, SupportModalComponent, SupportService, SweepLocatorService, THREEJS_MODEL_UP_OPTIONS, TagAction, TemplateService, ThreeJsImportService, ThreeJsService, TicketPriority, TicketStatus, TicketType, TicketsService, TimeDateToLocalStringPipe, TypeNote, UsernameFromIdPipe, VIEWER_BACKGROUND, ValidatorsService, ViewerInteractions, ViewerService, VisitService, ZoneChangeService, ZoneService, applyRigidTransformToDirection, applyRigidTransformToPoint, applyRigidTransformToYRotationDeg, arraysContainSameElements, checkElementById, computeRigidTransform, convertObjToGlb, 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, hasObjModel, isEmptyObject, isGaussianSplatFile, isGaussianSplatPly, isStreamedSplatFile, listFilesInFolder, mean, noEmptyValidator, numberToDateString, openDocument, openModalForVisitSwitch, parseThreeJsPlacement, poiTypeToString, pointToString, readObj, 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