@smarterplan/ngx-smarterplan-core 1.4.15 → 1.4.16

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

@@ -7,12 +7,19 @@ import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbDate, NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
+import * as THREE from 'three';
 import { Matrix4, Vector3, Color, Object3D, Euler, PerspectiveCamera, CylinderBufferGeometry, BoxGeometry, MeshBasicMaterial, NormalBlending, BackSide, Mesh, EdgesGeometry, AdditiveBlending, ShaderMaterial, AnimationMixer, VectorKeyframeTrack, InterpolateSmooth, AnimationClip, LoopOnce, Group, PlaneBufferGeometry, CanvasTexture, Texture, LinearFilter } from 'three';
 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
-import { Auth, API, graphqlOperation, Storage, Cache } from 'aws-amplify';
+import { Storage, Auth, API, graphqlOperation, Cache } from 'aws-amplify';
 import { DateTime } from 'luxon';
 import * as i11 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
+import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader';
+import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
 import * as FileSaver from 'file-saver';
 import levenshtein from 'js-levenshtein';
 import InformationIcon from '@iconify/icons-mdi/information-outline';
@@ -29,6 +36,7 @@ import * as CryptoJS from 'crypto-js';
 import { GlobalWorkerOptions, getDocument } from 'pdfjs-dist';
 import panzoom from 'panzoom';
 import videojs from 'video.js';
+import { v4 } from 'uuid';
 
 class NgxSmarterplanCoreService {
     constructor() { }
@@ -79,11 +87,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: [{
@@ -248,6 +256,7 @@ var CaptureViewer;
     CaptureViewer["CUPIX"] = "CUPIX";
     CaptureViewer["MATTERPORT"] = "MATTERPORT";
     CaptureViewer["SMARTERPLAN_V1"] = "SMARTERPLAN_V1";
+    CaptureViewer["THREEJS"] = "THREEJS";
 })(CaptureViewer || (CaptureViewer = {}));
 var InventoryStatus;
 (function (InventoryStatus) {
@@ -786,30 +795,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) {
@@ -1002,30 +1011,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) {
@@ -1042,6 +1051,198 @@ const makeViewFrustumMesh = function () {
     return new ViewFrustumMesh();
 };
 
+const deleteFromS3 = async (path) => {
+    await Storage.remove(path, { level: "public" })
+        .then((result) => console.log("Successfully deleted =>", result))
+        .catch((error) => console.log("Deleting from S3 error:", error));
+};
+const uploadFileToS3 = async (path, file, objectId) => {
+    const prefix = objectId ? `${objectId.slice(0, 8)}_` : "";
+    return Storage.put(path + prefix + file.name, file, {
+        progressCallback(progress) {
+            // console.log('Uploaded : ', progress);
+        },
+        contentType: file.type,
+    })
+        .then((result) => {
+        console.log("Success =>", result);
+        return result.key;
+    });
+};
+/**
+ * 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.
+ */
+const uploadFileToS3WithProgress = async (path, file, onProgress) => {
+    return Storage.put(path + file.name, file, {
+        contentType: file.type || "application/octet-stream",
+        progressCallback(progress) {
+            if (onProgress && progress.total > 0) {
+                onProgress(progress.loaded / progress.total);
+            }
+        },
+    }).then((result) => result.key);
+};
+const getSignedImageUrlForEquipment = async (equip) => {
+    if (!equip.photo) {
+        return Promise.resolve(null);
+    }
+    return Storage.get(equip.photo, { level: "public" })
+        .then((result) => {
+        return result;
+    })
+        .catch((error) => {
+        console.log("error fetching file from s3 =>", error);
+        return null;
+    });
+};
+const getSignedImageUrlForProfile = async (profile) => {
+    return Storage.get(profile.avatar, { level: "public" })
+        .then((result) => {
+        return result;
+    })
+        .catch((error) => {
+        console.log("error fetching file from s3 =>", error);
+    });
+};
+const getSignedImageUrlForSpace = async (space) => {
+    return Storage.get(space.annexes, { level: "public" })
+        .then((result) => {
+        return result;
+    })
+        .catch((error) => {
+        console.log("error fetching file from s3 =>", error);
+    });
+};
+const uploadBase64Image = async (uri, objectId, path, friendlyFileName) => {
+    return fetch(uri)
+        .then((res) => res.blob())
+        .then((blob) => {
+        const file = new File([blob], `${friendlyFileName}.jpeg`, {
+            type: "image/jpeg",
+        });
+        return uploadFileToS3(path, file, objectId);
+    });
+};
+const uploadBase64ImageWithRetry = async (uri, objectId, path, friendlyFileName, retry) => {
+    return new Promise(async (resolve, reject) => {
+        while (retry > 0) {
+            try {
+                const r = await uploadBase64Image(uri, objectId, path, friendlyFileName);
+                resolve(r);
+                return;
+            }
+            catch (e) {
+                retry--;
+                console.error(`Upload error, retry n° ${retry} : `, e);
+            }
+        }
+        ;
+        reject("Max retry exceeded");
+    });
+};
+const removeAllFilesFromFolderS3 = async (folderPath) => {
+    const arrayOfPromises = [];
+    Storage.list(folderPath, { level: "public" })
+        .then((res) => {
+        Object.keys(res).map(async (key) => {
+            const file = res[key];
+            arrayOfPromises.push(deleteFromS3(file.key));
+        });
+    })
+        .catch((error) => console.error("List failure", error));
+    return Promise.all(arrayOfPromises);
+};
+const listFilesInFolder = async (folderPath) => {
+    return Storage.list(folderPath, { level: "public", pageSize: 'ALL' })
+        .then((res) => {
+        return res.results;
+    })
+        .catch((error) => console.error("List failure", error));
+};
+const getSignedFile = async (path) => {
+    return Storage.get(path, { level: "public" })
+        .then((result) => {
+        return result;
+    })
+        .catch((error) => {
+        console.log("error fetching file from s3 =>", error);
+        return null;
+    });
+};
+const downloadFileAsObject = async (path) => {
+    return Storage.get(path, { download: true, level: "public" })
+        .then((result) => {
+        return result;
+    })
+        .catch((error) => {
+        console.log("error fetching file from s3 =>", error);
+    });
+};
+const getBufferForFileFromS3 = async (path) => {
+    const object = await downloadFileAsObject(path);
+    if (object) {
+        // @ts-ignore
+        return new ArrayBuffer(object.Body, "binary");
+    }
+    return null;
+};
+const uploadJsonToS3 = async (path, json, filename) => {
+    return Storage.put(path + filename, json, {
+        contentType: "application/json",
+    })
+        .then((result) => {
+        console.log("Success =>", result);
+        return result.key;
+    })
+        .catch((error) => {
+        console.log("error =>", error);
+        return null;
+    });
+};
+/**
+ * Physically duplicates an S3 object to a new key. Used when copying attachments
+ * between features/tickets/etc. so the copy is fully independent: deleting the
+ * original file later must not affect the copy.
+ * IMPORTANT: does NOT swallow errors — callers need the real error (e.g. NoSuchKey)
+ * to distinguish an orphaned DB reference from a genuine copy failure.
+ */
+const copyFileInS3 = async (sourceKey, destKey) => {
+    const result = await Storage.copy({ key: sourceKey, level: "public" }, { key: destKey, level: "public" });
+    return result.key;
+};
+/**
+ * Fallback duplication: downloads the object and re-uploads it under the new key.
+ *
+ * Storage.copy() builds the S3 `x-amz-copy-source` header by plain string concatenation
+ * (see @aws-amplify/storage AWSS3Provider.copy: `${bucket}/${srcPrefix}${srcKey}`), with no
+ * URL-encoding of the key. A key holding a space, an accent or a parenthesis therefore
+ * yields a header that does not match the signed canonical request, and S3 answers
+ * "The request signature we calculated does not match the signature you provided".
+ *
+ * Round-tripping the bytes avoids that header entirely and works for any key, at the cost
+ * of transferring the file through the browser — hence its use as a fallback only.
+ * IMPORTANT: like copyFileInS3, this must NOT swallow errors.
+ */
+const copyFileInS3ViaDownload = async (sourceKey, destKey) => {
+    const downloaded = await Storage.get(sourceKey, {
+        download: true,
+        level: "public",
+    });
+    const body = downloaded?.Body;
+    if (!body) {
+        throw new Error(`Empty download for "${sourceKey}", cannot duplicate it`);
+    }
+    const result = await Storage.put(destKey, body, {
+        level: "public",
+        contentType: downloaded.ContentType || undefined,
+    });
+    return result.key;
+};
+
 class ProfileService {
     API;
     constructor(apiInjected) {
@@ -1987,32 +2188,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 = [];
@@ -2779,11 +2980,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';
@@ -4794,22 +4995,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) {
@@ -5385,65 +5586,1370 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     args: [MATTERPORT_SDK_KEY]
                 }] }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: BaseVisibilityService }, { type: i0.NgZone }, { type: MatterportMeasurementService }, { type: MatterportNavigationService }, { type: MatterportPointerService }, { type: MatterportObject3DService }, { type: MatterportTagService }] });
 
-/* eslint-disable no-await-in-loop */
-/* eslint-disable camelcase */
-/* eslint-disable no-underscore-dangle */
-/* eslint-disable class-methods-use-this */
-class ViewerService {
-    sdkKey;
-    poiService;
-    matterportService;
-    viewerMode = 'Matterport';
-    currentModel3D;
-    tourUrl;
-    viewerIsOn = new Subject();
-    dataIsLoaded = new Subject();
-    isLoaded = false;
-    showingViewer = false;
-    sweepToMove;
-    rotationToMove;
-    goToTriggered = new Subject();
-    toolboxStates = {
-        dollhouse: {
-            stat: false,
-            iconId: 'ui-dollhouse',
-            show() {
-            },
-            hide() {
-            },
-        },
-        floorplan: {
-            stat: false,
-        },
-        mesure: {
-            stat: false,
-            iconId: 'ui-mesure',
-            show() {
-            },
-            hide() {
-            },
-        },
-        filter: {
-            stat: false,
-        },
-    };
-    isObjectLoaded = false;
-    constructor(sdkKey, poiService, matterportService) {
-        this.sdkKey = sdkKey;
-        this.poiService = poiService;
-        this.matterportService = matterportService;
-        this.setMode('Matterport');
+/**
+ * Builds an orthonormal frame from three points, or null when they are (nearly) collinear.
+ *
+ * Three points define a plane, and a plane plus an origin defines an orientation. Collinear points
+ * do not: they leave the rotation about their common line undetermined, which is why the caller has
+ * to reject them rather than produce a confident wrong answer.
+ */
+function frameFromPoints(a, b, c) {
+    const e1 = b.clone().sub(a);
+    if (e1.lengthSq() < 1e-12) {
+        return null;
     }
-    /*-----------------------------------------------------------------------------------------------------------------
-         Utils
-      -----------------------------------------------------------------------------------------------------------------*/
-    checkMode(indexMode) {
-        return this.viewerMode === indexMode;
+    e1.normalize();
+    const toC = c.clone().sub(a);
+    const e2 = toC.clone().sub(e1.clone().multiplyScalar(toC.dot(e1)));
+    if (e2.lengthSq() < 1e-12) {
+        return null;
+    }
+    e2.normalize();
+    return new THREE.Matrix4().makeBasis(e1, e2, e1.clone().cross(e2));
+}
+/**
+ * Solves the transform that maps stored tag coordinates onto the loaded model.
+ *
+ * Takes exactly the correspondences a person can produce by hand: three tags, each pointed at twice
+ * - once where it currently sits, once where it belongs. That is the minimum that pins down all
+ * three parts of the answer. One pair fixes only translation; two leave the rotation about the line
+ * between them free; three resolve it.
+ *
+ * Returns null when the points are collinear or degenerate, because a wrong alignment applied
+ * silently is worse than none.
+ */
+function solveThreeJsAlignment(pairs) {
+    if (!pairs || pairs.length < 3) {
+        return null;
+    }
+    const sources = pairs.slice(0, 3).map((pair) => new THREE.Vector3(pair.source.x, pair.source.y, pair.source.z));
+    const targets = pairs.slice(0, 3).map((pair) => new THREE.Vector3(pair.target.x, pair.target.y, pair.target.z));
+    const sourceFrame = frameFromPoints(sources[0], sources[1], sources[2]);
+    const targetFrame = frameFromPoints(targets[0], targets[1], targets[2]);
+    if (!sourceFrame || !targetFrame) {
+        return null;
+    }
+    // A rotation's inverse is its transpose, so this is the rotation carrying one frame onto the other.
+    const rotation = targetFrame.multiply(sourceFrame.clone().transpose());
+    // Scale from how far apart the points are in each space, averaged over the three edges so a single
+    // sloppy click does not set it on its own.
+    const edges = [[0, 1], [1, 2], [0, 2]];
+    let ratioSum = 0;
+    let ratioCount = 0;
+    for (const [i, j] of edges) {
+        const sourceLength = sources[i].distanceTo(sources[j]);
+        const targetLength = targets[i].distanceTo(targets[j]);
+        if (sourceLength > 1e-9) {
+            ratioSum += targetLength / sourceLength;
+            ratioCount += 1;
+        }
+    }
+    if (ratioCount === 0) {
+        return null;
+    }
+    const scale = ratioSum / ratioCount;
+    // The group applies position, then rotation, then scale, so a point lands at t + s*R*p. Solving
+    // that for t at the centroids gives the translation.
+    const sourceCentroid = sources.reduce((sum, v) => sum.add(v), new THREE.Vector3()).multiplyScalar(1 / 3);
+    const targetCentroid = targets.reduce((sum, v) => sum.add(v), new THREE.Vector3()).multiplyScalar(1 / 3);
+    const translation = targetCentroid
+        .clone()
+        .sub(sourceCentroid.clone().applyMatrix4(rotation).multiplyScalar(scale));
+    const euler = new THREE.Euler().setFromRotationMatrix(rotation);
+    return {
+        translation: { x: translation.x, y: translation.y, z: translation.z },
+        rotation: { x: euler.x, y: euler.y, z: euler.z },
+        scale,
+    };
+}
+class ThreeJsService {
+    ngZone;
+    scene;
+    camera;
+    renderer;
+    controls;
+    animationFrameId;
+    // Raycasting and interaction
+    raycaster = new THREE.Raycaster();
+    mouse = new THREE.Vector2();
+    isDraggingCamera = false;
+    isDraggingTimer;
+    clickableObjects = [];
+    // Observables for the viewer component
+    objectHovered$ = new Subject();
+    objectClicked$ = new Subject();
+    /** Emits when the user clicks a tag, mirroring Matterport's tag click. */
+    tagClicked$ = new Subject();
+    // Tags live under the model rather than the scene, so the centering and scaling applied when the
+    // model is placed carries over and POI coordinates can stay in the model's own space.
+    tagGroup = new THREE.Group();
+    tagSprites = new Map();
+    canvasResizeObserver;
+    /** Aborts the in-flight model download. Parsing cannot be interrupted, only not started. */
+    loadAbortController;
+    // 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. */
+    placingTag = false;
+    /** Position and normal of the last placed tag, in model space, awaiting commit to a POI. */
+    pendingTagPlacement = null;
+    /** Emits once a tag is dropped on the model, so the UI can confirm and persist it. */
+    tagPlaced$ = new Subject();
+    /** Translucent marker shown under the cursor while placing. */
+    placementPreview;
+    aligning = false;
+    alignmentPairs = [];
+    alignmentSource = null;
+    /** Drives the alignment walkthrough's UI: how many pairs are done and what it wants next. */
+    alignmentProgress$ = new Subject();
+    /** In-flight camera move started by goToTag, advanced by the render loop. */
+    cameraTween = null;
+    /** Emits true while a heavy OBJ file is being parsed (in a worker, when available), false once done. */
+    modelLoading$ = new Subject();
+    /**
+     * Download progress for GLB models, as a 0-1 fraction, or null when the total size is unknown.
+     *
+     * A null means the server did not send Content-Length (chunked responses, some proxies) and no
+     * percentage can be derived; show an indeterminate indicator rather than guessing at one.
+     */
+    modelLoadProgress$ = new Subject();
+    /**
+     * Emits when a load actually stopped short, which is not the same as asking it to.
+     *
+     * cancelModelLoad() can arrive after parse() has taken the main thread, and parse cannot be
+     * interrupted - the model finishes loading regardless. Only this tells the UI which of the two
+     * happened, so it does not offer to reload something that is already on screen.
+     */
+    modelLoadCancelled$ = new Subject();
+    // Background parsing of heavy .obj files, provided by the hosting app (see setObjParserWorker).
+    // Angular libraries built with ng-packagr can't bundle `new Worker(new URL(...))` themselves,
+    // so the app instantiates the worker (its build pipeline supports it) and hands it over here.
+    objParserWorker;
+    objParserPendingRequests = new Map();
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+    }
+    /**
+     * Registers a Web Worker used to parse heavy .obj files off the main thread.
+     * Must be instantiated by the consuming app (e.g. `new Worker(new URL('./obj-parser.worker', import.meta.url))`),
+     * since a library packaged with ng-packagr cannot bundle worker files itself.
+     * When no worker is provided, loadObjModel falls back to parsing on the main thread.
+     */
+    setObjParserWorker(worker) {
+        this.objParserWorker = worker;
+        this.objParserWorker.onmessage = ({ data }) => {
+            const pending = this.objParserPendingRequests.get(data.requestId);
+            if (!pending) {
+                return;
+            }
+            this.objParserPendingRequests.delete(data.requestId);
+            if (data.success && data.meshes) {
+                pending.resolve(data.meshes);
+            }
+            else {
+                pending.reject(new Error(data.error || 'Unknown error while parsing OBJ file in worker'));
+            }
+        };
+    }
+    requestObjParseInWorker(objUrl) {
+        return new Promise((resolve, reject) => {
+            const requestId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+            this.objParserPendingRequests.set(requestId, { resolve, reject });
+            this.objParserWorker.postMessage({ requestId, objUrl });
+            // Diagnostic only: large models legitimately take a while, this isn't a timeout/abort,
+            // just a signal in case the worker went silent (e.g. it ran out of memory mid-parse).
+            setTimeout(() => {
+                if (this.objParserPendingRequests.has(requestId)) {
+                    console.warn(`ThreeJsService: obj-parser worker has not replied after 60s for request ${requestId} (objUrl=${objUrl}). Still waiting - large files can take a while, but this may also mean the worker hung or ran out of memory.`);
+                }
+            }, 60000);
+        });
+    }
+    /** Rebuilds a THREE.Mesh from the raw typed arrays sent back by the parser worker. */
+    meshFromParsedData(data, materials) {
+        const geometry = new THREE.BufferGeometry();
+        geometry.setAttribute('position', new THREE.BufferAttribute(data.position, 3));
+        if (data.uv) {
+            geometry.setAttribute('uv', new THREE.BufferAttribute(data.uv, 2));
+        }
+        // Index has to be set before any normal computation, which reads it to average shared faces.
+        if (data.index) {
+            geometry.setIndex(new THREE.BufferAttribute(data.index, 1));
+        }
+        if (data.normal) {
+            geometry.setAttribute('normal', new THREE.BufferAttribute(data.normal, 3));
+        }
+        else {
+            geometry.computeVertexNormals();
+        }
+        // Box3.setFromObject() reuses an already-set boundingBox instead of walking every vertex,
+        // so adopting the worker's makes framing the camera cheap no matter how dense the mesh is.
+        if (data.boundingBox) {
+            geometry.boundingBox = new THREE.Box3(new THREE.Vector3(...data.boundingBox.min), new THREE.Vector3(...data.boundingBox.max));
+        }
+        const resolvedMaterials = data.materialNames.map((name) => {
+            const material = materials && name ? materials.create(name) : undefined;
+            if (!material) {
+                console.warn(`ThreeJsService: no MTL material named "${name}" for mesh "${data.name}", using a plain fallback (no texture).`);
+            }
+            return material || new THREE.MeshPhongMaterial();
+        });
+        let mesh;
+        if (data.groups && data.groups.length > 0) {
+            data.groups.forEach((group) => geometry.addGroup(group.start, group.count, group.materialIndex));
+            mesh = new THREE.Mesh(geometry, resolvedMaterials);
+        }
+        else {
+            mesh = new THREE.Mesh(geometry, resolvedMaterials[0]);
+        }
+        mesh.name = data.name;
+        return mesh;
+    }
+    init(canvas) {
+        // This service is a singleton but the viewer component is rebuilt on every navigation, so state
+        // from the previous scene is still here. Two things outlive it and have to go first:
+        //
+        //  - A download still in flight. Its onLoaded resolves against whatever `this.scene` points at
+        //    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.
+        this.discardCurrentLoad();
+        this.clearTags();
+        this.cameraTween = null;
+        this.modelRoot = undefined;
+        // 1. Setup Scene
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0xe0f7ff); // from POC
+        // 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
+        // 3. Setup WebGL Renderer
+        this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+        this.renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
+        this.observeCanvasResize(canvas);
+        // Fix for Three.js r147 vs r152+ color management
+        if ('outputColorSpace' in this.renderer) {
+            this.renderer.outputColorSpace = 'srgb'; // THREE.SRGBColorSpace
+        }
+        else {
+            this.renderer.outputEncoding = 3001; // THREE.sRGBEncoding
+        }
+        // Without tone mapping anything brighter than 1.0 is simply cut off to pure white. Captured
+        // textures carry a small fraction of very bright pixels - sky reflected in windows, sunlit
+        // render - and once lighting pushes those past the limit they flatten into white specks with
+        // no detail left. Rolling the highlights off instead keeps that detail and keeps bright areas
+        // reading as bright rather than blown.
+        this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
+        this.renderer.toneMappingExposure = 1.0;
+        // 4. Lighting, kept deliberately restrained and neutral.
+        //
+        // Captured/photogrammetry models already have lighting baked into their textures (the sun and
+        // shadows came with the photos), so lighting them again distorts what they actually look like.
+        // The intensities below add up to roughly 1.0 on a surface facing the viewer, which renders the
+        // texture at its true value. Anything above 1.0 is clipped to pure white by the renderer, which
+        // is what turns bright areas into flat white patches with no detail left in them.
+        //
+        // Neutral white is used rather than a warm tint for the same reason: a tinted light shifts every
+        // colour in the model away from what was captured.
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
+        this.scene.add(ambientLight);
+        // Headlight rather than a fixed sun: parented to the camera so it always points at whatever is
+        // being looked at, giving shape to surfaces without ever leaving a face unlit. No shadow casting
+        // - shadows would double up with the ones already baked into the textures, and the shadow map
+        // was a real cost per frame.
+        const headLight = new THREE.DirectionalLight(0xffffff, 0.35);
+        headLight.position.set(0, 0, 1);
+        this.camera.add(headLight);
+        // 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);
+        this.controls.rotateSpeed = 1.0;
+        this.controls.dampingFactor = 0.1;
+        this.controls.enableDamping = true;
+        this.controls.mouseButtons = {
+            LEFT: THREE.MOUSE.ROTATE,
+            MIDDLE: THREE.MOUSE.DOLLY,
+            RIGHT: THREE.MOUSE.PAN,
+        };
+        this.controls.target.set(0, 0, 0);
+        // Event listeners on controls to differentiate dragging vs clicking
+        this.controls.addEventListener('start', () => {
+            this.isDraggingTimer = setTimeout(() => {
+                this.isDraggingCamera = true;
+            }, 150);
+        });
+        this.controls.addEventListener('end', () => {
+            clearTimeout(this.isDraggingTimer);
+            if (this.isDraggingCamera) {
+                setTimeout(() => {
+                    this.isDraggingCamera = false;
+                }, 250);
+            }
+        });
+        // Interaction Event Listeners on canvas
+        canvas.addEventListener('click', this.onMouseClick.bind(this), false);
+        canvas.addEventListener('mousemove', this.onMouseMove.bind(this), false);
+        // 6. Start the render loop
+        this.ngZone.runOutsideAngular(() => {
+            this.animate();
+        });
+    }
+    /**
+     * Path (served by the app) holding basis_transcoder.js/.wasm, which KTX2Loader needs to turn
+     * Basis Universal textures into whatever compressed format the local GPU actually supports.
+     */
+    ktx2TranscoderPath = 'assets/basis/';
+    /** Overrides where the Basis transcoder files are served from. */
+    setKtx2TranscoderPath(path) {
+        this.ktx2TranscoderPath = path;
+    }
+    /**
+     * Loads a base 3D model in GLTF/GLB format - the preferred format for large models.
+     * Unlike .obj, geometry arrives as binary typed arrays (no text parsing to offload to a worker)
+     * and stays indexed, so far less data reaches the GPU. KTX2 textures are supported too: they
+     * stay compressed in VRAM instead of being decoded to raw pixels like JPEG/PNG.
+     */
+    loadGLTFModel(url, cameraPosition, rotation) {
+        const loader = new GLTFLoader();
+        // KTX2 needs the renderer to report which compressed formats this GPU accepts, so this has to
+        // happen after init(). Guarded so a model without KTX2 textures still loads if it's missing.
+        if (this.renderer) {
+            try {
+                const ktx2Loader = new KTX2Loader()
+                    .setTranscoderPath(this.ktx2TranscoderPath)
+                    .detectSupport(this.renderer);
+                loader.setKTX2Loader(ktx2Loader);
+            }
+            catch (error) {
+                console.warn('ThreeJsService: could not set up KTX2 texture support, falling back to uncompressed textures.', error);
+            }
+        }
+        // Lets gltfpack/gltf-transform output using EXT_meshopt_compression load without extra setup.
+        loader.setMeshoptDecoder(MeshoptDecoder);
+        this.modelLoading$.next(true);
+        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) => {
+            this.convertToPhongMaterials(gltf.scene);
+            this.forceDoubleSidedMaterials(gltf.scene);
+            this.ensureVertexNormals(gltf.scene);
+            this.tuneTextureSampling(gltf.scene);
+            this.placeLoadedObjectInScene(gltf.scene, cameraPosition, rotation);
+            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);
+        };
+        // 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
+        // path uses via MTLLoader, come out clean. GLTFLoader already falls back to that decoder for
+        // Safari and older Firefox; this simply extends the fallback to cover this case too.
+        //
+        // The decoder is chosen while GLTFParser is being constructed, which happens synchronously
+        // inside parse(), so hiding createImageBitmap only has to hold across that call rather than
+        // for the whole download.
+        this.fetchWithProgress(url)
+            // parse() holds the main thread for seconds on a large model. Yield until the browser has
+            // actually painted first, otherwise the final progress update never reaches the screen and
+            // the bar appears to stall short of the end.
+            .then((buffer) => this.afterNextPaint().then(() => buffer))
+            .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) {
+                throw new DOMException('Model load cancelled', 'AbortError');
+            }
+            const globalScope = globalThis;
+            const originalCreateImageBitmap = globalScope.createImageBitmap;
+            globalScope.createImageBitmap = undefined;
+            try {
+                loader.parse(buffer, url.substring(0, url.lastIndexOf('/') + 1), onLoaded, onError);
+            }
+            finally {
+                globalScope.createImageBitmap = originalCreateImageBitmap;
+            }
+        })
+            .catch(onError);
+    }
+    /**
+     * Stops the model download in progress, if any.
+     *
+     * Only the download can be interrupted: parse() runs synchronously and holds the main thread until
+     * it finishes, so once it has begun there is nothing to cancel. In practice the download is the
+     * long part, which is where someone reaches for this.
+     */
+    cancelModelLoad() {
+        this.loadAbortController?.abort();
+    }
+    /**
+     * Abandons the load in progress without reporting it as cancelled.
+     *
+     * Dropping the controller is what makes the difference: onError treats an abort as user-initiated
+     * only while the controller that aborted is still the current one. Tearing down or rebuilding the
+     * scene is not something the person asked for, so it must not surface as "loading cancelled".
+     */
+    discardCurrentLoad() {
+        this.loadAbortController?.abort();
+        this.loadAbortController = undefined;
+    }
+    /**
+     * Resolves once the browser has painted at least one frame.
+     *
+     * A requestAnimationFrame callback runs *before* that frame is painted, so a single one is not
+     * enough to guarantee pending DOM changes are on screen; the second fires after the first frame
+     * has gone out. Falls back to a timeout where rAF isn't available (SSR, tests).
+     */
+    afterNextPaint() {
+        if (typeof requestAnimationFrame !== 'function') {
+            return new Promise((resolve) => setTimeout(resolve, 0));
+        }
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+        });
+    }
+    /**
+     * Downloads a file, reporting progress on modelLoadProgress$ as it arrives.
+     *
+     * GLTFLoader.load() would report progress through XHR, but this path deliberately uses fetch() +
+     * parse() instead (see loadGLTFModel for why), so progress is read off the response stream here.
+     * That is also the more useful number: on a model of this size the download dominates, and the
+     * stream reports it as it happens rather than in one jump at the end.
+     */
+    async fetchWithProgress(url) {
+        // A load already running is replaced, not raced: whichever finished last would otherwise win.
+        this.loadAbortController?.abort();
+        this.loadAbortController = new AbortController();
+        const { signal } = this.loadAbortController;
+        const response = await fetch(url, { signal });
+        if (!response.ok) {
+            throw new Error(`Failed to fetch ${url}: ${response.status} ${response.statusText}`);
+        }
+        const contentLength = Number(response.headers.get('Content-Length'));
+        const total = Number.isFinite(contentLength) && contentLength > 0 ? contentLength : 0;
+        // Without a readable stream (older browsers, some polyfills) there is nothing to measure, so
+        // fall back to a plain buffered read and let the UI show an indeterminate indicator.
+        if (!response.body?.getReader) {
+            this.modelLoadProgress$.next(null);
+            return response.arrayBuffer();
+        }
+        const reader = response.body.getReader();
+        // With a known size, write chunks straight into one pre-allocated buffer. Collecting them in an
+        // array and concatenating afterwards would hold both copies at once - on a 164 MB model that is
+        // an avoidable 300+ MB peak.
+        const buffer = total > 0 ? new Uint8Array(total) : null;
+        const chunks = [];
+        let usingBuffer = buffer !== null;
+        let received = 0;
+        // Chunks arrive in tens of kilobytes, so a 164 MB model produces thousands of them. Emitting on
+        // every one would run change detection just as often to move a bar that is measured in whole
+        // percent, so only report when the displayed value would actually change.
+        let lastReported = -1;
+        if (total === 0) {
+            this.modelLoadProgress$.next(null);
+        }
+        for (;;) {
+            const { done, value } = await reader.read();
+            if (done) {
+                break;
+            }
+            if (signal.aborted) {
+                // Free the connection rather than leaving it draining in the background.
+                await reader.cancel();
+                throw new DOMException('Model load cancelled', 'AbortError');
+            }
+            if (usingBuffer && received + value.length > total) {
+                // Content-Length understated the real size. Move what we have into the chunk list and stay
+                // there for the rest of the response, rather than truncating the tail.
+                chunks.push(buffer.slice(0, received));
+                usingBuffer = false;
+            }
+            if (usingBuffer) {
+                buffer.set(value, received);
+            }
+            else {
+                chunks.push(value);
+            }
+            received += value.length;
+            if (total > 0) {
+                const percent = Math.min(Math.round((received / total) * 100), 100);
+                if (percent !== lastReported) {
+                    lastReported = percent;
+                    this.modelLoadProgress$.next(percent / 100);
+                }
+            }
+        }
+        // The stream can end below the advertised size (or with no size at all). Land on a full bar
+        // rather than leaving it stuck at whatever the last chunk happened to reach.
+        if (total > 0 && lastReported !== 100) {
+            this.modelLoadProgress$.next(1);
+        }
+        if (usingBuffer && received === total) {
+            return buffer.buffer;
+        }
+        if (usingBuffer) {
+            // Fewer bytes than advertised: hand back exactly what arrived.
+            return buffer.buffer.slice(0, received);
+        }
+        const merged = new Uint8Array(received);
+        let offset = 0;
+        chunks.forEach((chunk) => {
+            merged.set(chunk, offset);
+            offset += chunk.length;
+        });
+        return merged.buffer;
+    }
+    /**
+     * Fits the camera's clipping planes to how big the model actually is.
+     *
+     * Depth precision depends on the far/near ratio, and the fixed 0.1 / 10000 the camera starts with
+     * is a ratio of 100000 for a model only ~10 units across. That wastes most of the depth buffer on
+     * empty space and lets nearly coincident surfaces - which captured meshes have everywhere -
+     * flicker against each other.
+     */
+    adjustClippingPlanes(radius) {
+        if (radius < 10) {
+            this.camera.near = 0.01;
+            this.camera.far = 100;
+        }
+        else if (radius < 100) {
+            this.camera.near = 0.1;
+            this.camera.far = 1000;
+        }
+        else if (radius < 1000) {
+            this.camera.near = 10;
+            this.camera.far = 10000;
+        }
+        else {
+            this.camera.near = 100;
+            this.camera.far = 1000000;
+        }
+        this.camera.updateProjectionMatrix();
+    }
+    /**
+     * Swaps the PBR materials GLTFLoader builds for the plain Phong ones the .obj path produces.
+     *
+     * MeshStandardMaterial keeps a specular reflection even at metalness 0, since every dielectric
+     * reflects some light, and Fresnel drives that reflection towards white as a surface turns away
+     * from the viewer. On an aerial view of a facade most surfaces sit at exactly those grazing
+     * angles, which paints white highlights over window frames and roof edges - the same model
+     * loaded as .obj never shows them, because MTLLoader builds Phong materials and OBJLoader zeroes
+     * their specular when the .mtl declares Ns 0.
+     *
+     * Captured models carry their lighting in the texture and want no specular response at all, so
+     * matching the .obj path here is both the fix and the more faithful choice.
+     */
+    convertToPhongMaterials(root) {
+        const converted = new Map();
+        root.traverse((child) => {
+            const mesh = child;
+            if (!mesh.isMesh) {
+                return;
+            }
+            const convert = (source) => {
+                if (!source || !source.isMeshStandardMaterial) {
+                    return source;
+                }
+                if (!converted.has(source)) {
+                    const phong = new THREE.MeshPhongMaterial({
+                        map: source.map,
+                        color: source.color,
+                        transparent: source.transparent,
+                        opacity: source.opacity,
+                        alphaTest: source.alphaTest,
+                        side: source.side,
+                        specular: new THREE.Color(0x000000),
+                        shininess: 0,
+                    });
+                    phong.name = source.name;
+                    converted.set(source, phong);
+                }
+                return converted.get(source);
+            };
+            mesh.material = Array.isArray(mesh.material)
+                ? mesh.material.map(convert)
+                : convert(mesh.material);
+        });
+    }
+    /**
+     * Renders every material double-sided.
+     *
+     * Reality capture meshes routinely contain triangles with reversed winding - an artefact of the
+     * reconstruction, not of the file. With the default FrontSide those triangles are culled, leaving
+     * scattered holes that show the scene background through the model. Against a light background
+     * they read as white specks with no discernible pattern.
+     *
+     * Drawing both sides costs a little fill rate but is what makes captured geometry render as
+     * solid; other viewers of this kind of content do the same unconditionally.
+     */
+    forceDoubleSidedMaterials(root) {
+        const seen = new Set();
+        root.traverse((child) => {
+            const mesh = child;
+            if (!mesh.isMesh) {
+                return;
+            }
+            const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+            materials.forEach((material) => {
+                if (material && !seen.has(material)) {
+                    seen.add(material);
+                    material.side = THREE.DoubleSide;
+                    material.needsUpdate = true;
+                }
+            });
+        });
+    }
+    /**
+     * Computes real vertex normals for any geometry that arrived without them.
+     *
+     * A glTF without a NORMAL attribute is spec-compliant, and GLTFLoader handles it by switching the
+     * material to flatShading, which makes the shader derive the normal per pixel from screen-space
+     * derivatives. That derivation collapses on the degenerate, needle-thin triangles that reality
+     * capture meshes are full of: the face has almost no area, the derived normal is meaningless, and
+     * lighting blows those fragments out to white specks - densest exactly where fine detail is.
+     *
+     * Computing normals from the geometry instead is robust to those triangles, since a degenerate
+     * face contributes almost nothing to the average and its neighbours dominate.
+     */
+    ensureVertexNormals(root) {
+        root.traverse((child) => {
+            const mesh = child;
+            if (!mesh.isMesh) {
+                return;
+            }
+            const geometry = mesh.geometry;
+            if (geometry.getAttribute('normal')) {
+                return;
+            }
+            geometry.computeVertexNormals();
+            // GLTFLoader already switched these materials to flatShading because normals were missing;
+            // now that real ones exist, let them be used instead of the derivative fallback.
+            const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+            materials.forEach((material) => {
+                if (material && material.flatShading) {
+                    material.flatShading = false;
+                    material.needsUpdate = true;
+                }
+            });
+        });
+    }
+    /**
+     * Configures how every texture in a model is sampled: maximum anisotropy, and no mipmapping.
+     *
+     * Photogrammetry atlases pack their UV islands with unused gutter pixels between them. Mipmapping
+     * averages neighbouring pixels at each level, so those gutters bleed further into the islands the
+     * smaller the level gets - and viewing the whole model at once uses the smallest levels, painting
+     * bright gutter pixels over the edges of fine detail. Sampling the full-resolution image avoids
+     * that, at the cost of some shimmer on minified surfaces.
+     *
+     * Note that anisotropy only takes effect while mipmapping is on, so with the settings below it is
+     * inert; it is set anyway so the sampling stays correct for anyone who re-enables mipmaps here.
+     */
+    tuneTextureSampling(root) {
+        if (!this.renderer) {
+            return;
+        }
+        const maxAnisotropy = this.renderer.capabilities.getMaxAnisotropy();
+        if (!maxAnisotropy || maxAnisotropy <= 1) {
+            return;
+        }
+        const seen = new Set();
+        root.traverse((child) => {
+            const mesh = child;
+            if (!mesh.isMesh) {
+                return;
+            }
+            const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+            materials.forEach((material) => {
+                if (!material) {
+                    return;
+                }
+                // Same texture is reused across the model's materials; only touch each one once.
+                ['map', 'normalMap', 'roughnessMap', 'metalnessMap', 'emissiveMap', 'aoMap'].forEach((slot) => {
+                    const texture = material[slot];
+                    if (texture && !seen.has(texture)) {
+                        seen.add(texture);
+                        texture.anisotropy = maxAnisotropy;
+                        texture.generateMipmaps = false;
+                        texture.minFilter = THREE.LinearFilter;
+                        texture.needsUpdate = true;
+                    }
+                });
+            });
+        });
+    }
+    /**
+     * Loads an OBJ model with MTL.
+     * The heavy text-parsing step runs in a Web Worker when one has been registered via
+     * setObjParserWorker (see there for why the app, not this library, provides it); this keeps
+     * the main thread free while large architecture models (millions of vertices) are parsed.
+     * Falls back to parsing on the main thread otherwise.
+     */
+    loadObjModel(mtlUrl, objUrl, cameraPosition, rotation) {
+        const mtlLoader = new MTLLoader();
+        const basePath = mtlUrl.substring(0, mtlUrl.lastIndexOf('/') + 1);
+        mtlLoader.setPath(basePath);
+        const mtlFileName = mtlUrl.substring(mtlUrl.lastIndexOf('/') + 1);
+        this.modelLoading$.next(true);
+        mtlLoader.load(mtlFileName, (materials) => {
+            materials.preload();
+            if (this.objParserWorker) {
+                this.requestObjParseInWorker(objUrl)
+                    .then((meshes) => {
+                    const group = new THREE.Group();
+                    meshes.forEach((meshData) => {
+                        group.add(this.meshFromParsedData(meshData, materials));
+                    });
+                    this.placeLoadedObjectInScene(group, cameraPosition, rotation);
+                })
+                    .catch((error) => {
+                    console.error('Error parsing OBJ model in worker:', error);
+                })
+                    .finally(() => this.modelLoading$.next(false));
+                return;
+            }
+            const objLoader = new OBJLoader();
+            objLoader.setMaterials(materials);
+            objLoader.load(objUrl, (object) => {
+                this.placeLoadedObjectInScene(object, cameraPosition, rotation);
+                this.modelLoading$.next(false);
+            }, undefined, (error) => {
+                console.error('Error loading OBJ model:', error);
+                this.modelLoading$.next(false);
+            });
+        }, undefined, (error) => {
+            console.error('Error loading MTL file:', error);
+            this.modelLoading$.next(false);
+        });
+    }
+    /** Centers, scales and adds a loaded object to the scene, then frames the camera on it. */
+    placeLoadedObjectInScene(object, cameraPosition, rotation) {
+        const box = new THREE.Box3().setFromObject(object);
+        const center = box.getCenter(new THREE.Vector3());
+        const size = box.getSize(new THREE.Vector3());
+        const maxDim = Math.max(size.x, size.y, size.z);
+        const scale = maxDim > 0 ? 10 / maxDim : 1;
+        // Two nested groups so tags can share the model's frame: `centered` carries the offset that
+        // moves the model's own origin to the scene origin, `group` carries the scale. A tag positioned
+        // with raw POI coordinates then lands in the same place the model's geometry does.
+        const group = new THREE.Group();
+        const centered = new THREE.Group();
+        centered.position.sub(center);
+        if (rotation) {
+            object.rotation.set(rotation.x, rotation.y, rotation.z);
+        }
+        this.modelRoot = object;
+        centered.add(object);
+        centered.add(this.tagGroup);
+        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.adjustClippingPlanes((size.length() / 2) * scale);
+        if (cameraPosition) {
+            this.camera.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z);
+        }
+        else {
+            this.camera.position.set(0, 5, 15);
+        }
+        this.controls.target.set(0, 0, 0);
+        this.controls.update();
+    }
+    /**
+     * Keeps the drawing buffer and camera matched to the canvas as it is resized.
+     *
+     * renderer.setSize() writes explicit pixel width/height into the canvas's style, overriding the
+     * 100%/100% it starts with. Without this, the canvas keeps whatever size it had at startup: hiding
+     * the top menu grows the container, the canvas does not follow, and the strip that opens up shows
+     * the page behind it instead of the scene.
+     *
+     * The parent is observed rather than the canvas, because resizing the canvas is what this reacts
+     * to - watching the element we resize would retrigger the observer.
+     */
+    observeCanvasResize(canvas) {
+        const container = canvas.parentElement;
+        if (!container || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.canvasResizeObserver = new ResizeObserver(() => {
+            const width = container.clientWidth;
+            const height = container.clientHeight;
+            if (width === 0 || height === 0) {
+                return;
+            }
+            this.camera.aspect = width / height;
+            this.camera.updateProjectionMatrix();
+            this.renderer.setSize(width, height);
+        });
+        this.canvasResizeObserver.observe(container);
+    }
+    /**
+     * Starts the alignment walkthrough: pick a tag, then click where it really is, three times.
+     *
+     * Existing tags are the correspondences - they already carry the stored coordinate, so the person
+     * only has to supply the matching spot on the model. No new records are written; nothing is
+     * applied until solveAlignmentFromPairs() succeeds.
+     */
+    startTagAlignment() {
+        this.aligning = true;
+        this.alignmentPairs = [];
+        this.alignmentSource = null;
+        if (this.renderer) {
+            this.renderer.domElement.style.cursor = 'crosshair';
+        }
+        this.alignmentProgress$.next({ pairs: 0, awaiting: 'tag' });
+    }
+    cancelTagAlignment() {
+        this.aligning = false;
+        this.alignmentPairs = [];
+        this.alignmentSource = null;
+        if (this.renderer) {
+            this.renderer.domElement.style.cursor = 'default';
+        }
+        this.alignmentProgress$.next({ pairs: 0, awaiting: null });
+    }
+    isAligningTags() {
+        return this.aligning;
+    }
+    /**
+     * Solves and applies the alignment collected so far, returning it so the caller can persist it.
+     *
+     * Returns null when the three tags turn out to be collinear, in which case nothing is applied and
+     * the walkthrough stays open for the person to pick a better third point.
+     */
+    solveAlignmentFromPairs() {
+        const alignment = solveThreeJsAlignment(this.alignmentPairs);
+        if (!alignment) {
+            return null;
+        }
+        this.setTagAlignment(alignment);
+        this.aligning = false;
+        this.renderer.domElement.style.cursor = 'default';
+        this.alignmentProgress$.next({ pairs: this.alignmentPairs.length, awaiting: null });
+        return alignment;
+    }
+    /** Handles a click while the alignment walkthrough is running. */
+    handleAlignmentClick(event) {
+        if (!this.alignmentSource) {
+            // First half of a pair: which tag are we talking about?
+            const hit = this.raycaster.intersectObjects(this.tagGroup.children, false)[0];
+            if (!hit) {
+                return;
+            }
+            // The sprite's own position is the stored coordinate, untouched by any alignment already
+            // applied - that transform lives on the group, not on the sprite.
+            const stored = hit.object.position;
+            this.alignmentSource = { x: stored.x, y: stored.y, z: stored.z };
+            this.alignmentProgress$.next({
+                pairs: this.alignmentPairs.length,
+                awaiting: 'point',
+                tagId: hit.object.name,
+            });
+            return;
+        }
+        // Second half: where that tag actually belongs on the model.
+        const placement = this.pickPlacementOnModel(event);
+        if (!placement) {
+            return;
+        }
+        this.alignmentPairs.push({ source: this.alignmentSource, target: placement.position });
+        this.alignmentSource = null;
+        this.alignmentProgress$.next({
+            pairs: this.alignmentPairs.length,
+            awaiting: this.alignmentPairs.length >= 3 ? null : 'tag',
+        });
+    }
+    /** Arms tag placement: the next click on the model drops a tag instead of being ignored. */
+    startTagPlacement() {
+        this.placingTag = true;
+        this.pendingTagPlacement = null;
+        if (this.renderer) {
+            this.renderer.domElement.style.cursor = 'crosshair';
+        }
+    }
+    /** Leaves placement mode without placing anything. */
+    cancelTagPlacement() {
+        this.placingTag = false;
+        this.pendingTagPlacement = null;
+        this.removePlacementPreview();
+        if (this.renderer) {
+            this.renderer.domElement.style.cursor = 'default';
+        }
+    }
+    /**
+     * Shows a translucent tag under the cursor while placing, so the spot is visible before commiting.
+     *
+     * Matterport does this with a tag that follows the pointer; the equivalent here is a preview
+     * sprite that gets removed the moment the real tag takes its place.
+     */
+    updatePlacementPreview(event) {
+        const placement = this.pickPlacementOnModel(event);
+        if (!placement) {
+            this.removePlacementPreview();
+            this.renderer.domElement.style.cursor = 'not-allowed';
+            return;
+        }
+        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,
+            }));
+            this.placementPreview.renderOrder = 999;
+            this.tagGroup.add(this.placementPreview);
+            this.scaleTagForModel(this.placementPreview);
+        }
+        this.placementPreview.position.set(placement.position.x, placement.position.y, placement.position.z);
+    }
+    removePlacementPreview() {
+        if (!this.placementPreview) {
+            return;
+        }
+        this.tagGroup.remove(this.placementPreview);
+        this.placementPreview.material.map?.dispose();
+        this.placementPreview.material.dispose();
+        this.placementPreview = undefined;
+    }
+    /** Shows or hides one tag, leaving it registered so it can be brought back without reloading. */
+    setTagVisibility(elementId, visible) {
+        const sprite = this.tagSprites.get(elementId);
+        if (sprite) {
+            sprite.visible = visible;
+        }
+    }
+    /**
+     * Shows only tags of the given types, hiding the rest.
+     *
+     * Passing null shows everything - the "no filter" state, distinct from an empty array, which is a
+     * filter that happens to match nothing.
+     */
+    setVisibleTagTypes(types) {
+        this.tagSprites.forEach((sprite) => {
+            sprite.visible = types === null || types.includes(sprite.userData.poiType);
+        });
+    }
+    /**
+     * Moves the camera to look at a tag, mirroring Matterport's goToTag.
+     *
+     * Animated rather than teleported: jumping the camera loses the viewer's sense of where they were
+     * relative to the model. The approach distance follows the model's size so it frames sensibly
+     * whatever the units are.
+     */
+    goToTag(elementId) {
+        const sprite = this.tagSprites.get(elementId);
+        if (!sprite || !this.camera) {
+            return;
+        }
+        const target = sprite.getWorldPosition(new THREE.Vector3());
+        const distance = this.modelRoot
+            ? new THREE.Box3().setFromObject(this.modelRoot).getSize(new THREE.Vector3()).length() * 0.15
+            : 5;
+        // Approach along the current viewing direction, so the camera closes in rather than swinging
+        // around to an arbitrary side.
+        const direction = this.camera.position.clone().sub(this.controls.target).normalize();
+        this.cameraTween = {
+            fromPosition: this.camera.position.clone(),
+            toPosition: target.clone().add(direction.multiplyScalar(distance)),
+            fromTarget: this.controls.target.clone(),
+            toTarget: target,
+            startedAt: performance.now(),
+            durationMs: 600,
+        };
+    }
+    /** Advances the camera animation started by goToTag, if one is running. */
+    stepCameraTween() {
+        if (!this.cameraTween) {
+            return;
+        }
+        const { fromPosition, toPosition, fromTarget, toTarget, startedAt, durationMs } = this.cameraTween;
+        const linear = Math.min((performance.now() - startedAt) / durationMs, 1);
+        // Ease out, so the move settles instead of stopping dead.
+        const t = 1 - Math.pow(1 - linear, 3);
+        this.camera.position.lerpVectors(fromPosition, toPosition, t);
+        this.controls.target.lerpVectors(fromTarget, toTarget, t);
+        if (linear >= 1) {
+            this.cameraTween = null;
+        }
+    }
+    isPlacingTag() {
+        return this.placingTag;
+    }
+    /** The spot picked by the last placement, for whoever commits it to a POI. */
+    getPendingTagPlacement() {
+        return this.pendingTagPlacement;
+    }
+    /**
+     * Turns a click into a point on the model, in model space.
+     *
+     * Returns null when the click missed the geometry, which is a normal outcome - the user clicked
+     * the sky - and leaves placement mode armed so they can simply try again.
+     */
+    pickPlacementOnModel(event) {
+        if (!this.modelRoot) {
+            return null;
+        }
+        const rect = this.renderer.domElement.getBoundingClientRect();
+        this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+        this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+        this.raycaster.setFromCamera(this.mouse, this.camera);
+        const hit = this.raycaster.intersectObject(this.modelRoot, true)[0];
+        if (!hit) {
+            return null;
+        }
+        // The hit arrives in world space. Everything persisted has to be in the model's own space, so
+        // it survives the centering and scaling applied at load - and any future re-export.
+        const position = this.modelRoot.worldToLocal(hit.point.clone());
+        // A face normal is in the geometry's local space already, but the mesh it belongs to may sit
+        // under transforms of its own, so bring it back through those to match the position's frame.
+        let normal = new THREE.Vector3(0, 1, 0);
+        if (hit.face) {
+            normal = hit.face.normal
+                .clone()
+                .transformDirection(hit.object.matrixWorld)
+                .transformDirection(new THREE.Matrix4().copy(this.modelRoot.matrixWorld).invert())
+                .normalize();
+        }
+        return {
+            position: { x: position.x, y: position.y, z: position.z },
+            normal: { x: normal.x, y: normal.y, z: normal.z },
+        };
+    }
+    /**
+     * Sets the transform mapping captured tag coordinates onto this model's space.
+     *
+     * Every tag comes from the same source space, so this is one transform on the group rather than
+     * per-tag maths - which also means it applies retroactively to tags already placed, and can be
+     * adjusted live while someone dials the numbers in.
+     *
+     * Passing null resets to identity, i.e. tag coordinates are already in model space.
+     */
+    setTagAlignment(alignment) {
+        const { translation, rotation, scale } = alignment ?? {};
+        this.tagGroup.position.set(translation?.x ?? 0, translation?.y ?? 0, translation?.z ?? 0);
+        this.tagGroup.rotation.set(rotation?.x ?? 0, rotation?.y ?? 0, rotation?.z ?? 0);
+        this.tagGroup.scale.setScalar(scale ?? 1);
+        // Tag size is derived from the world scale it inherits, which this call just changed.
+        this.tagSprites.forEach((sprite) => this.scaleTagForModel(sprite));
+    }
+    /**
+     * Adds a tag, or moves/restyles the one already registered for this element.
+     *
+     * Upsert rather than a declarative "here is the full list" call, because tags arrive per type
+     * (equipment, then tickets, then measurements...) from separate subscriptions - replacing the set
+     * on each of those would wipe the types that came before.
+     */
+    upsertTag(tag) {
+        const existing = this.tagSprites.get(tag.id);
+        if (existing) {
+            existing.position.set(tag.position.x, tag.position.y, tag.position.z);
+            existing.userData.poiType = tag.poiType ?? existing.userData.poiType;
+            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.
+            depthTest: false,
+            transparent: true,
+        }));
+        sprite.name = tag.id;
+        sprite.userData.poiType = tag.poiType ?? null;
+        sprite.position.set(tag.position.x, tag.position.y, tag.position.z);
+        sprite.renderOrder = 999;
+        this.scaleTagForModel(sprite);
+        this.tagGroup.add(sprite);
+        this.tagSprites.set(tag.id, sprite);
+        if (tag.iconUrl) {
+            this.applyTagIcon(sprite, tag.iconUrl);
+        }
+    }
+    /** Removes the tag registered for an element, if there is one. */
+    removeTag(elementId) {
+        const sprite = this.tagSprites.get(elementId);
+        if (!sprite) {
+            return;
+        }
+        this.tagGroup.remove(sprite);
+        sprite.material.map?.dispose();
+        sprite.material.dispose();
+        this.tagSprites.delete(elementId);
+    }
+    /** Removes every tag from the scene. */
+    clearTags() {
+        [...this.tagSprites.keys()].forEach((id) => this.removeTag(id));
+    }
+    /** Loads an icon into an existing tag, leaving the fallback disc in place if it fails. */
+    applyTagIcon(sprite, iconUrl) {
+        new THREE.TextureLoader().load(iconUrl, (texture) => {
+            sprite.material.map?.dispose();
+            sprite.material.map = texture;
+            sprite.material.needsUpdate = true;
+        }, undefined, () => console.warn(`ThreeJsService: could not load tag icon "${iconUrl}", keeping the default marker.`));
+    }
+    /** Draws the default tag marker: a filled disc with a white ring, so it reads on any background. */
+    createTagTexture(color = '#1E88E5') {
+        const size = 128;
+        const canvas = document.createElement('canvas');
+        canvas.width = size;
+        canvas.height = size;
+        const context = canvas.getContext('2d');
+        context.beginPath();
+        context.arc(size / 2, size / 2, size / 2 - 8, 0, Math.PI * 2);
+        context.fillStyle = color;
+        context.fill();
+        context.lineWidth = 8;
+        context.strokeStyle = '#FFFFFF';
+        context.stroke();
+        return new THREE.CanvasTexture(canvas);
+    }
+    /**
+     * Sizes a tag relative to 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.
+     */
+    scaleTagForModel(sprite) {
+        const worldScale = this.tagGroup.getWorldScale(new THREE.Vector3()).x || 1;
+        const size = 0.4 / worldScale;
+        sprite.scale.set(size, size, 1);
+    }
+    /**
+     * Adds secondary interactive objects (e.g., POIs, sensors) to the scene.
+     */
+    updateObjsToScene(objsAdded) {
+        const existingIds = this.clickableObjects.map((obj) => obj.name);
+        const objLoader = new OBJLoader();
+        // delete objects that are not in the provided array
+        this.clickableObjects.forEach((obj) => {
+            if (!objsAdded.find((objData) => objData.id === obj.name)) {
+                this.scene.remove(obj);
+                this.clickableObjects = this.clickableObjects.filter((object) => object.name !== obj.name);
+            }
+        });
+        objsAdded.forEach((objectData) => {
+            if (!existingIds.includes(objectData.id)) {
+                objLoader.load(objectData.file, (newObject) => {
+                    newObject.name = objectData.id;
+                    newObject.traverse((child) => {
+                        if (child.isMesh) {
+                            const mesh = child;
+                            if (mesh.material instanceof THREE.Material) {
+                                mesh.material.transparent = true;
+                                mesh.material.opacity = 0.8;
+                            }
+                        }
+                    });
+                    // set object position and rotation
+                    newObject.position.set(objectData.position.x, objectData.position.y, objectData.position.z);
+                    // The JSON configuration has rotation already in radians (e.g. 3.1415...)
+                    newObject.rotation.set(objectData.rotation.x, objectData.rotation.y, objectData.rotation.z);
+                    newObject.scale.set(objectData.scale.x, objectData.scale.y, objectData.scale.z);
+                    this.scene.add(newObject);
+                    this.clickableObjects.push(newObject);
+                });
+            }
+        });
+    }
+    onMouseMove(event) {
+        if (!this.isDraggingCamera) {
+            const rect = this.renderer.domElement.getBoundingClientRect();
+            this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+            this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+            this.raycaster.setFromCamera(this.mouse, this.camera);
+            // While placing, the preview follows the pointer and nothing else should react to it.
+            if (this.placingTag) {
+                this.updatePlacementPreview(event);
+                return;
+            }
+            // Tags first: they draw on top of the model, so they have to answer the pointer first too.
+            if (this.raycaster.intersectObjects(this.tagGroup.children, false).some((hit) => hit.object.visible)) {
+                this.renderer.domElement.style.cursor = 'pointer';
+                this.objectHovered$.next(null);
+                return;
+            }
+            const intersects = this.raycaster.intersectObjects(this.clickableObjects, true);
+            if (intersects.length > 0) {
+                this.renderer.domElement.style.cursor = 'pointer';
+                const intersectedObjectId = intersects[0].object?.parent?.name;
+                if (intersectedObjectId) {
+                    this.objectHovered$.next({ id: intersectedObjectId, event });
+                }
+            }
+            else {
+                this.renderer.domElement.style.cursor = 'default';
+                this.objectHovered$.next(null);
+            }
+        }
+        else {
+            this.renderer.domElement.style.cursor = 'grabbing';
+            this.objectHovered$.next(null);
+        }
+    }
+    onMouseClick(event) {
+        if (!this.isDraggingCamera) {
+            const rect = this.renderer.domElement.getBoundingClientRect();
+            this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+            this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+            // Alignment and placement both take the click before anything can be opened by it.
+            if (this.aligning) {
+                this.raycaster.setFromCamera(this.mouse, this.camera);
+                this.handleAlignmentClick(event);
+                return;
+            }
+            // Placement wins over everything: while armed, a click means "put it here", not "open that".
+            if (this.placingTag) {
+                const placement = this.pickPlacementOnModel(event);
+                if (placement) {
+                    this.pendingTagPlacement = placement;
+                    this.placingTag = false;
+                    this.removePlacementPreview();
+                    this.renderer.domElement.style.cursor = 'default';
+                    this.tagPlaced$.next(placement);
+                }
+                return;
+            }
+            this.raycaster.setFromCamera(this.mouse, this.camera);
+            // Same precedence as hover: a tag drawn over the model claims the click.
+            const tagHits = this.raycaster.intersectObjects(this.tagGroup.children, false)
+                .filter((hit) => hit.object.visible);
+            if (tagHits.length > 0) {
+                const tag = tagHits[0].object;
+                this.tagClicked$.next({ elementId: tag.name, poiType: tag.userData.poiType ?? null });
+                return;
+            }
+            const intersects = this.raycaster.intersectObjects(this.clickableObjects, true);
+            if (intersects.length > 0) {
+                const clickedObject = intersects[0].object;
+                const id = clickedObject?.parent?.name;
+                if (id) {
+                    this.objectClicked$.next(id);
+                }
+            }
+            else {
+                this.objectClicked$.next(null);
+            }
+        }
+    }
+    animate = () => {
+        this.animationFrameId = requestAnimationFrame(this.animate);
+        this.stepCameraTween();
+        this.controls.update();
+        this.renderer.render(this.scene, this.camera);
+    };
+    destroy() {
+        if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId);
+        }
+        if (this.canvasResizeObserver) {
+            this.canvasResizeObserver.disconnect();
+            this.canvasResizeObserver = undefined;
+        }
+        this.discardCurrentLoad();
+        this.clearTags();
+        if (this.renderer) {
+            this.renderer.dispose();
+        }
+        if (this.controls) {
+            this.controls.dispose();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThreeJsService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThreeJsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThreeJsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
+/* eslint-disable no-await-in-loop */
+/* eslint-disable camelcase */
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable class-methods-use-this */
+class ViewerService {
+    sdkKey;
+    poiService;
+    matterportService;
+    threeJsService;
+    viewerMode = 'Matterport';
+    currentModel3D;
+    tourUrl;
+    viewerIsOn = new Subject();
+    dataIsLoaded = new Subject();
+    isLoaded = false;
+    showingViewer = false;
+    sweepToMove;
+    rotationToMove;
+    goToTriggered = new Subject();
+    toolboxStates = {
+        dollhouse: {
+            stat: false,
+            iconId: 'ui-dollhouse',
+            show() {
+            },
+            hide() {
+            },
+        },
+        floorplan: {
+            stat: false,
+        },
+        mesure: {
+            stat: false,
+            iconId: 'ui-mesure',
+            show() {
+            },
+            hide() {
+            },
+        },
+        filter: {
+            stat: false,
+        },
+    };
+    isObjectLoaded = false;
+    constructor(sdkKey, poiService, matterportService, threeJsService) {
+        this.sdkKey = sdkKey;
+        this.poiService = poiService;
+        this.matterportService = matterportService;
+        this.threeJsService = threeJsService;
+        this.setMode('Matterport');
+    }
+    /*-----------------------------------------------------------------------------------------------------------------
+         Utils
+      -----------------------------------------------------------------------------------------------------------------*/
+    checkMode(indexMode) {
+        return this.viewerMode === indexMode;
     }
     /*-----------------------------------------------------------------------------------------------------------------
          Setters
       -----------------------------------------------------------------------------------------------------------------*/
     setMode(indexMode) {
+        // Leaving Three.js means no Three.js work should still be running. The service behind it is a
+        // singleton and outlives the component, so a download started for a model the user has navigated
+        // away from would otherwise finish - and its parse would hold the main thread for seconds,
+        // stalling whatever viewer they actually opened.
+        if (this.viewerMode === 'threejs' && indexMode !== 'threejs') {
+            this.threeJsService.destroy();
+        }
         this.viewerMode = indexMode;
     }
     setTourUrl(options) {
@@ -5503,7 +7009,10 @@ class ViewerService {
     async clearAll() {
         // this.sweepToMove = null;
         // this.rotationToMove = null;
-        if (this.checkMode('Matterport')) {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.destroy();
+        }
+        else if (this.checkMode('Matterport')) {
             this.showingViewer = false;
             this.isLoaded = false;
             await this.matterportService.clearAll();
@@ -5581,15 +7090,136 @@ class ViewerService {
         if (this.checkMode('Matterport')) {
             return this.matterportService.createMattertagFromPOI(poi.type, object, poi);
         }
+        if (this.checkMode('threejs')) {
+            return this.addThreeJsTagFromPOI(object, poi);
+        }
         // Cupix
         // TODO
         return Promise.resolve();
     }
+    /**
+     * Draws a POI as a tag in the Three.js scene.
+     *
+     * Both viewers are fed by the same subscriptions on the same POI records, so a tag created in
+     * either one shows up in the other without any syncing of its own - this is just the Three.js end
+     * of the pipeline that already drives Matterport.
+     */
+    async addThreeJsTagFromPOI(object, poi) {
+        if (!poi.coordinate) {
+            return;
+        }
+        let position;
+        try {
+            position = JSON.parse(poi.coordinate);
+        }
+        catch {
+            console.warn(`ViewerService: unparseable POI coordinate for element ${object.id}:`, poi.coordinate);
+            return;
+        }
+        if (![position?.x, position?.y, position?.z].every((value) => typeof value === 'number')) {
+            return;
+        }
+        this.threeJsService.upsertTag({
+            id: object.id,
+            position,
+            poiType: poi.type,
+            iconUrl: poi.tagIcon ? await getSignedFile(poi.tagIcon) : null,
+        });
+    }
+    /** Moves the Three.js camera to frame a tag, mirroring Matterport's goToTag. */
+    goToThreeJsTag(elementId) {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.goToTag(elementId);
+        }
+    }
+    /** Shows only tags of the given POI types; null clears the filter. */
+    setVisibleThreeJsTagTypes(types) {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.setVisibleTagTypes(types);
+        }
+    }
+    /**
+     * Alignment walkthrough: pick a tag, then click where it really sits, three times over.
+     *
+     * Uses tags that already exist, so nothing is created and nothing is written until the caller
+     * saves the result. See threeJsAlignmentProgress$ for what the UI should be asking for.
+     */
+    startThreeJsTagAlignment() {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.startTagAlignment();
+        }
+    }
+    cancelThreeJsTagAlignment() {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.cancelTagAlignment();
+        }
+    }
+    get threeJsAlignmentProgress$() {
+        return this.threeJsService.alignmentProgress$;
+    }
+    /**
+     * Solves the alignment and applies it to the scene, returning it as the JSON to store in the
+     * capture's metadata. Null means the three tags were collinear and nothing was applied.
+     */
+    solveThreeJsTagAlignment(existingMetadata) {
+        if (!this.checkMode('threejs')) {
+            return null;
+        }
+        const alignment = this.threeJsService.solveAlignmentFromPairs();
+        if (!alignment) {
+            return null;
+        }
+        // Merged into whatever the capture already stores, so an existing camera placement survives.
+        let stored = {};
+        try {
+            stored = existingMetadata ? JSON.parse(existingMetadata) : {};
+        }
+        catch {
+            stored = {};
+        }
+        stored.alignment = alignment;
+        return { alignment, metadata: JSON.stringify(stored) };
+    }
+    /** Shows or hides a single Three.js tag. */
+    setThreeJsTagVisibility(elementId, visible) {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.setTagVisibility(elementId, visible);
+        }
+    }
     async action_delete_element(element) {
         // Matterport
         if (this.checkMode('Matterport')) {
             await this.matterportService.deleteMattertagForObject(element.id);
         }
+        if (this.checkMode('threejs')) {
+            this.threeJsService.removeTag(element.id);
+        }
+    }
+    /** Emits when a Three.js model load actually stopped short, rather than merely being asked to. */
+    get threeJsModelLoadCancelled$() {
+        return this.threeJsService.modelLoadCancelled$;
+    }
+    /** Stops the Three.js model download in progress. */
+    cancelThreeJsModelLoad() {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.cancelModelLoad();
+        }
+    }
+    /** Emits the element id of a tag clicked in the Three.js scene. */
+    get threeJsTagClicked$() {
+        return this.threeJsService.tagClicked$;
+    }
+    /**
+     * Applies the visit's stored tag alignment, mapping captured tag coordinates onto this model.
+     *
+     * Safe to call before the model or any tag exists: it is a transform on the group both end up
+     * under, so it applies to whatever arrives later.
+     */
+    setThreeJsTagAlignmentFromMetadata(metadata) {
+        if (!this.checkMode('threejs')) {
+            return;
+        }
+        this.threeJsService.setTagAlignment(parseThreeJsPlacement(metadata)?.alignment ?? null);
     }
     /**
      * Enable tag placement menu to add a new element depending on its type (TICKET, DATA, EQUIPMENT etc)
@@ -5601,6 +7231,9 @@ class ViewerService {
             this.matterportService.getInteractionMode() === ViewerInteractions.DEFAULT) {
             await this.matterportService.addMattertagWhenAdding(poiType);
         }
+        if (this.checkMode('threejs')) {
+            this.threeJsService.startTagPlacement();
+        }
     }
     /**
      * Launches the repositioning of an existing Mattertag related to parameter object
@@ -5621,6 +7254,9 @@ class ViewerService {
         if (this.checkMode('Matterport')) {
             this.matterportService.cancelFollowingCursor();
         }
+        if (this.checkMode('threejs')) {
+            this.threeJsService.cancelTagPlacement();
+        }
     }
     action_toolbox_inside_view() {
         // Matterport
@@ -5704,8 +7340,51 @@ class ViewerService {
             this.matterportService.deleteLastMattertag();
             return Promise.resolve(poi);
         }
+        if (this.checkMode('threejs')) {
+            return this.commitThreeJsTagPlacement(poi, isValid, element);
+        }
         return Promise.resolve(poi);
     }
+    /**
+     * Writes the spot picked in the Three.js scene into the POI, mirroring the Matterport branch.
+     *
+     * The coordinate goes in the same field and the same space Matterport writes, which is what makes
+     * a tag created here show up in the right place there - and the other way round.
+     */
+    async commitThreeJsTagPlacement(poi, isValid, element) {
+        const placement = this.threeJsService.getPendingTagPlacement();
+        if (!isValid || !placement || !poi) {
+            this.threeJsService.cancelTagPlacement();
+            return Promise.resolve(poi);
+        }
+        const poiMetadata = poi.metadata ? JSON.parse(poi.metadata) : {};
+        poiMetadata.normal = placement.normal;
+        const updatedPoi = await this.poiService.updatePoi({
+            id: poi.id,
+            coordinate: JSON.stringify(placement.position),
+            metadata: JSON.stringify(poiMetadata),
+            // matterportSweepID is left as it was: this viewer has no sweeps, and Matterport filters tag
+            // visibility by them, so clearing it would hide the tag over there.
+        });
+        this.threeJsService.upsertTag({
+            id: element.id,
+            position: placement.position,
+            poiType: updatedPoi?.type ?? poi.type,
+            iconUrl: updatedPoi?.tagIcon ? await getSignedFile(updatedPoi.tagIcon) : null,
+        });
+        this.threeJsService.cancelTagPlacement();
+        return updatedPoi;
+    }
+    /** Emits when a tag is dropped on the model in the Three.js scene. */
+    get threeJsTagPlaced$() {
+        return this.threeJsService.tagPlaced$;
+    }
+    /** Leaves Three.js tag placement mode without placing anything. */
+    cancelThreeJsTagPlacement() {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.cancelTagPlacement();
+        }
+    }
     editOnlyTagStyleForPoi(poi, object) {
         if (this.checkMode('Matterport')) {
             const tagData = this.matterportService.getTagFromElementId(poi.elementID);
@@ -5757,6 +7436,79 @@ class ViewerService {
       https://matterport.github.io/showcase-sdk/docs/sdk/reference/current/modules/mattertag.html#add
       https://matterport.github.io/showcase-sdk/docs/sdk/reference/current/modules/mattertag.html#remove
   -----------------------------------------------------------------------------------------------------------------*/
+    initThreeJs(canvas) {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.init(canvas);
+        }
+    }
+    /**
+     * Loads a 3D model into the Three.js scene (GLTF).
+     * Only works when the viewer is in 'threejs' mode.
+     */
+    loadGLTFModel(url, cameraPosition, rotation) {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.loadGLTFModel(url, cameraPosition, rotation);
+        }
+    }
+    /**
+     * Loads a GLB stored in S3, given its key (e.g. `visits/<id>/model.glb`).
+     *
+     * Resolves the key to a signed URL first, then loads it like any other. The signed URL only
+     * covers authentication - the bucket still needs a CORS rule allowing GET from the app's origin,
+     * or the browser blocks the download before it starts.
+     *
+     * `placementMetadata` is the capture's stored placement; when absent or unusable the viewer falls
+     * back to framing the model automatically.
+     */
+    async loadGLTFModelFromS3(key, placementMetadata) {
+        if (!this.checkMode('threejs')) {
+            return;
+        }
+        // A key under assets/ is served by the app itself, so it needs no signing. This is what lets a
+        // model bundled with the build stand in for one in S3 while the two are otherwise identical.
+        const isLocalAsset = key.startsWith('assets/');
+        const url = isLocalAsset ? key : await getSignedFile(key);
+        if (!url) {
+            console.error(`ViewerService: could not resolve a signed URL for the 3D model at "${key}".`);
+            return;
+        }
+        const placement = parseThreeJsPlacement(placementMetadata);
+        this.threeJsService.loadGLTFModel(url, placement?.cameraPosition, placement?.rotation);
+    }
+    /**
+     * Loads a 3D model into the Three.js scene (OBJ).
+     */
+    loadObjModel(mtlUrl, objUrl, cameraPosition, rotation) {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.loadObjModel(mtlUrl, objUrl, cameraPosition, rotation);
+        }
+    }
+    get threeJsObjectHovered$() {
+        return this.threeJsService.objectHovered$;
+    }
+    get threeJsObjectClicked$() {
+        return this.threeJsService.objectClicked$;
+    }
+    /** Emits true while a heavy .obj file is being parsed (in a worker, when available), false once done. */
+    get threeJsModelLoading$() {
+        return this.threeJsService.modelLoading$;
+    }
+    /** Download progress for GLB models as a 0-1 fraction, or null when the size isn't known upfront. */
+    get threeJsModelLoadProgress$() {
+        return this.threeJsService.modelLoadProgress$;
+    }
+    /**
+     * Registers the Web Worker used to parse heavy .obj files off the main thread.
+     * Must be created by the app (see obj-parser.worker.ts), since this library can't bundle worker files.
+     */
+    setObjParserWorker(worker) {
+        this.threeJsService.setObjParserWorker(worker);
+    }
+    addThreeJsObjects(objs) {
+        if (this.checkMode('threejs')) {
+            this.threeJsService.updateObjsToScene(objs);
+        }
+    }
     async initMatterportSdk(spaceID, model3D, tagService, module = SpModule.IMMO) {
         this.isLoaded = false;
         this.matterportService.currentSpaceID = spaceID;
@@ -5816,235 +7568,105 @@ class ViewerService {
     isObject3DLoadedInPosition() {
         return this.isObjectLoaded;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewerService, deps: [{ token: MATTERPORT_SDK_KEY }, { token: PoiService }, { token: MatterportService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewerService, deps: [{ token: MATTERPORT_SDK_KEY }, { token: PoiService }, { token: MatterportService }, { token: ThreeJsService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewerService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MATTERPORT_SDK_KEY]
-                }] }, { type: PoiService }, { type: MatterportService }] });
-
-class ModalSwitchVisitComponent {
-    activeModal;
-    router;
-    viewerService;
-    content;
-    model3D;
-    spaceID;
-    dataToMove;
-    constructor(activeModal, router, viewerService) {
-        this.activeModal = activeModal;
-        this.router = router;
-        this.viewerService = viewerService;
-    }
-    ngOnInit() { }
-    switchVisit() {
-        this.activeModal.close();
-        if (this.dataToMove) {
-            this.viewerService.setSweepToMove(this.dataToMove.sweepToMove);
-            this.viewerService.setRotationToMove(this.dataToMove.rotation);
-        }
-        // this.objectSubService.forceRemove = true; // we reset the tags when changing visit
-        this.router.navigate(["visit", this.spaceID], {
-            queryParams: { model3D: this.model3D },
-        });
-    }
-    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" }] });
-}
-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"] }]
-        }], ctorParameters: () => [{ type: i1$2.NgbActiveModal }, { type: i1$1.Router }, { type: ViewerService }], propDecorators: { content: [{
-                type: Input
-            }], model3D: [{
-                type: Input
-            }], spaceID: [{
-                type: Input
-            }], dataToMove: [{
-                type: Input
-            }] } });
-
-const deleteFromS3 = async (path) => {
-    await Storage.remove(path, { level: "public" })
-        .then((result) => console.log("Successfully deleted =>", result))
-        .catch((error) => console.log("Deleting from S3 error:", error));
-};
-const uploadFileToS3 = async (path, file, objectId) => {
-    const prefix = objectId ? `${objectId.slice(0, 8)}_` : "";
-    return Storage.put(path + prefix + file.name, file, {
-        progressCallback(progress) {
-            // console.log('Uploaded : ', progress);
-        },
-        contentType: file.type,
-    })
-        .then((result) => {
-        console.log("Success =>", result);
-        return result.key;
-    });
-};
-const getSignedImageUrlForEquipment = async (equip) => {
-    if (!equip.photo) {
-        return Promise.resolve(null);
-    }
-    return Storage.get(equip.photo, { level: "public" })
-        .then((result) => {
-        return result;
-    })
-        .catch((error) => {
-        console.log("error fetching file from s3 =>", error);
-        return null;
-    });
-};
-const getSignedImageUrlForProfile = async (profile) => {
-    return Storage.get(profile.avatar, { level: "public" })
-        .then((result) => {
-        return result;
-    })
-        .catch((error) => {
-        console.log("error fetching file from s3 =>", error);
-    });
-};
-const getSignedImageUrlForSpace = async (space) => {
-    return Storage.get(space.annexes, { level: "public" })
-        .then((result) => {
-        return result;
-    })
-        .catch((error) => {
-        console.log("error fetching file from s3 =>", error);
-    });
-};
-const uploadBase64Image = async (uri, objectId, path, friendlyFileName) => {
-    return fetch(uri)
-        .then((res) => res.blob())
-        .then((blob) => {
-        const file = new File([blob], `${friendlyFileName}.jpeg`, {
-            type: "image/jpeg",
-        });
-        return uploadFileToS3(path, file, objectId);
-    });
-};
-const uploadBase64ImageWithRetry = async (uri, objectId, path, friendlyFileName, retry) => {
-    return new Promise(async (resolve, reject) => {
-        while (retry > 0) {
-            try {
-                const r = await uploadBase64Image(uri, objectId, path, friendlyFileName);
-                resolve(r);
-                return;
-            }
-            catch (e) {
-                retry--;
-                console.error(`Upload error, retry n° ${retry} : `, e);
-            }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MATTERPORT_SDK_KEY]
+                }] }, { type: PoiService }, { type: MatterportService }, { type: ThreeJsService }] });
+
+class ModalSwitchVisitComponent {
+    activeModal;
+    router;
+    viewerService;
+    content;
+    model3D;
+    spaceID;
+    dataToMove;
+    constructor(activeModal, router, viewerService) {
+        this.activeModal = activeModal;
+        this.router = router;
+        this.viewerService = viewerService;
+    }
+    ngOnInit() { }
+    switchVisit() {
+        this.activeModal.close();
+        if (this.dataToMove) {
+            this.viewerService.setSweepToMove(this.dataToMove.sweepToMove);
+            this.viewerService.setRotationToMove(this.dataToMove.rotation);
         }
-        ;
-        reject("Max retry exceeded");
-    });
-};
-const removeAllFilesFromFolderS3 = async (folderPath) => {
-    const arrayOfPromises = [];
-    Storage.list(folderPath, { level: "public" })
-        .then((res) => {
-        Object.keys(res).map(async (key) => {
-            const file = res[key];
-            arrayOfPromises.push(deleteFromS3(file.key));
+        // this.objectSubService.forceRemove = true; // we reset the tags when changing visit
+        this.router.navigate(["visit", this.spaceID], {
+            queryParams: { model3D: this.model3D },
         });
-    })
-        .catch((error) => console.error("List failure", error));
-    return Promise.all(arrayOfPromises);
-};
-const listFilesInFolder = async (folderPath) => {
-    return Storage.list(folderPath, { level: "public", pageSize: 'ALL' })
-        .then((res) => {
-        return res.results;
-    })
-        .catch((error) => console.error("List failure", error));
-};
-const getSignedFile = async (path) => {
-    return Storage.get(path, { level: "public" })
-        .then((result) => {
-        return result;
-    })
-        .catch((error) => {
-        console.log("error fetching file from s3 =>", error);
-        return null;
-    });
-};
-const downloadFileAsObject = async (path) => {
-    return Storage.get(path, { download: true, level: "public" })
-        .then((result) => {
-        return result;
-    })
-        .catch((error) => {
-        console.log("error fetching file from s3 =>", error);
-    });
-};
-const getBufferForFileFromS3 = async (path) => {
-    const object = await downloadFileAsObject(path);
-    if (object) {
-        // @ts-ignore
-        return new ArrayBuffer(object.Body, "binary");
     }
-    return null;
-};
-const uploadJsonToS3 = async (path, json, filename) => {
-    return Storage.put(path + filename, json, {
-        contentType: "application/json",
-    })
-        .then((result) => {
-        console.log("Success =>", result);
-        return result.key;
-    })
-        .catch((error) => {
-        console.log("error =>", error);
-        return null;
-    });
-};
-/**
- * Physically duplicates an S3 object to a new key. Used when copying attachments
- * between features/tickets/etc. so the copy is fully independent: deleting the
- * original file later must not affect the copy.
- * IMPORTANT: does NOT swallow errors — callers need the real error (e.g. NoSuchKey)
- * to distinguish an orphaned DB reference from a genuine copy failure.
- */
-const copyFileInS3 = async (sourceKey, destKey) => {
-    const result = await Storage.copy({ key: sourceKey, level: "public" }, { key: destKey, level: "public" });
-    return result.key;
-};
+    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\">\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\">\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: [{
+                type: Input
+            }], spaceID: [{
+                type: Input
+            }], dataToMove: [{
+                type: Input
+            }] } });
+
 /**
- * Fallback duplication: downloads the object and re-uploads it under the new key.
- *
- * Storage.copy() builds the S3 `x-amz-copy-source` header by plain string concatenation
- * (see @aws-amplify/storage AWSS3Provider.copy: `${bucket}/${srcPrefix}${srcKey}`), with no
- * URL-encoding of the key. A key holding a space, an accent or a parenthesis therefore
- * yields a header that does not match the signed canonical request, and S3 answers
- * "The request signature we calculated does not match the signature you provided".
+ * Parses the placement stored in a Three.js capture's metadata, or null when there is none.
  *
- * Round-tripping the bytes avoids that header entirely and works for any key, at the cost
- * of transferring the file through the browser — hence its use as a fallback only.
- * IMPORTANT: like copyFileInS3, this must NOT swallow errors.
+ * Both the import (writing the navigation entry) and the viewer (framing the camera) need this, so
+ * it lives here rather than on either service. Placement is optional - the viewer frames the model
+ * automatically without it - so unusable metadata is warned about and dropped, never thrown.
  */
-const copyFileInS3ViaDownload = async (sourceKey, destKey) => {
-    const downloaded = await Storage.get(sourceKey, {
-        download: true,
-        level: "public",
-    });
-    const body = downloaded?.Body;
-    if (!body) {
-        throw new Error(`Empty download for "${sourceKey}", cannot duplicate it`);
+function parseThreeJsPlacement(metadata) {
+    if (!metadata || !metadata.trim()) {
+        return null;
     }
-    const result = await Storage.put(destKey, body, {
-        level: "public",
-        contentType: downloaded.ContentType || undefined,
-    });
-    return result.key;
-};
-
+    try {
+        const parsed = JSON.parse(metadata);
+        const isVector = (value) => value && ["x", "y", "z"].every((axis) => typeof value[axis] === "number");
+        const placement = {};
+        if (isVector(parsed.cameraPosition)) {
+            placement.cameraPosition = parsed.cameraPosition;
+        }
+        if (isVector(parsed.rotation)) {
+            placement.rotation = parsed.rotation;
+        }
+        const source = parsed.alignment;
+        if (source) {
+            const alignment = {};
+            if (isVector(source.translation)) {
+                alignment.translation = source.translation;
+            }
+            if (isVector(source.rotation)) {
+                alignment.rotation = source.rotation;
+            }
+            // Scale 0 would collapse every tag onto a point, so treat it as unset rather than honour it.
+            if (typeof source.scale === "number" && source.scale > 0) {
+                alignment.scale = source.scale;
+            }
+            if (Object.keys(alignment).length > 0) {
+                placement.alignment = alignment;
+            }
+        }
+        return placement.cameraPosition || placement.rotation || placement.alignment ? placement : null;
+    }
+    catch {
+        console.warn("Ignoring unparseable Three.js placement metadata:", metadata);
+        return null;
+    }
+}
 function getDistanceBetweenTwoPoints(startPoint, endPoint) {
     const dx = endPoint.x - startPoint.x;
     const dy = endPoint.y - startPoint.y;
@@ -9589,11 +11211,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: [{
@@ -10041,11 +11663,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: [{
@@ -10103,11 +11725,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 {
@@ -11523,7 +13145,15 @@ class VisitService {
         this.planService = planService;
         this.userService = userService;
     }
-    async getVisitsForSpaceForUser(spaceID) {
+    /**
+     * The visits a user may open for a space.
+     *
+     * `includeImageCount` drives one S3 listing per node, awaited in sequence, purely to fill
+     * `nmbImagesImported`. Callers that only need to know which visits exist - the viewer's model
+     * picker, for one - should pass false: waiting on S3 to draw a button is a visible delay, and
+     * the count is not read on that path.
+     */
+    async getVisitsForSpaceForUser(spaceID, includeImageCount = true) {
         const visits = [];
         const missionsForSpace = this.userService.currentMissions.filter((mis) => mis.spaceID === spaceID);
         const allAllowed = this.userService.userHasAccessToAllZonesInSpace(spaceID);
@@ -11541,9 +13171,12 @@ class VisitService {
         }
         for (const node of allAllowedNodes) {
             // console.log(node)
-            const folder = `visits/${node.model3D}/sweeps/`;
-            const files = await listFilesInFolder(folder);
-            const nmbImages = files.length;
+            let nmbImages = 0;
+            if (includeImageCount) {
+                const folder = `visits/${node.model3D}/sweeps/`;
+                const files = await listFilesInFolder(folder);
+                nmbImages = files.length;
+            }
             const capture = captures.find((cap) => cap.nodes.items.includes(node));
             const visit = {
                 captureID: node.captureID,
@@ -11555,6 +13188,7 @@ class VisitService {
                 node,
                 name: node.metadata,
                 nmbImagesImported: nmbImages,
+                captureMetadata: capture.metadata,
             };
             visits.push(visit);
         }
@@ -12343,12 +13977,31 @@ class SpaceService {
         }
         return null;
     }
+    /**
+     * The visit the current user is allowed to open for this space.
+     *
+     * Callers need more than the model reference - which viewer the visit was captured with decides
+     * whether it opens in Matterport or Three.js - so the whole visit is returned here.
+     */
+    async getAllowedVisitForSpace(spaceID) {
+        const visits = await this.getAllowedVisitsForSpace(spaceID);
+        return visits.length > 0 ? visits[0] : null;
+    }
+    /**
+     * Every visit the current user may open for this space.
+     *
+     * A site can carry more than one - a Matterport capture plus one or more 3D models - and the
+     * viewer offers them as a list, so the caller needs all of them rather than just the first.
+     */
+    async getAllowedVisitsForSpace(spaceID) {
+        // No image count: this feeds the viewer, which only needs to know which visits exist. Asking
+        // for it would add an S3 listing per node before anything can be drawn.
+        const visits = await this.visitService.getVisitsForSpaceForUser(spaceID, false);
+        return visits ?? [];
+    }
     async getAllowedModel3DForSpace(spaceID) {
-        const visits = await this.visitService.getVisitsForSpaceForUser(spaceID);
-        if (visits.length > 0) {
-            return visits[0].model3d;
-        }
-        return null;
+        const visit = await this.getAllowedVisitForSpace(spaceID);
+        return visit ? visit.model3d : null;
     }
     async softDeleteSpace(spaceID) {
         await this.updateSpace({
@@ -12812,11 +14465,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']
@@ -13085,11 +14738,11 @@ class MenuBarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuBarComponent, deps: [{ token: i1$1.Router }, { token: LocaleService }, { token: BaseUserService }, { token: NavigatorService }, { token: SupportService }, { token: BaseVisibilityService }, { token: i1$2.NgbCalendar }, { token: i1$2.NgbDateParserFormatter }, { token: FilterService }, { token: AmplifyCacheService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuBarComponent, selector: "lib-menu-bar", inputs: { cacheName: "cacheName" }, ngImport: i0, template: "<div id=\"menu-bar\">\r\n  <div *ngIf=\"!isVisitor\">\r\n    <nav class=\"navbar navbar-expand-md navbar-light p-0\">\r\n      <div class=\"container-fluid\" *ngIf=\"isVisible\">\r\n        <div class=\"navbar-brand order-md-0\" [routerLink]=\"['/dashboard']\">\r\n          <img alt=\"SmarterPlan\" src=\"../assets/images/logos/logo-immo.png\">\r\n        </div>\r\n        <div class=\"ms-auto nav-item dropdown profile_pic-container order-md-2\">\r\n          <div class=\"profile_pic dropdown-toggle\" data-testid=\"dropdown-menu-button\" data-bs-toggle=\"dropdown\">\r\n            <lib-avatar></lib-avatar>\r\n          </div>\r\n          <div class=\"dropdown-menu dropdown-menu-right\">\r\n            <p *ngIf=\"user && mission\" class=\"p-2\">\r\n              <span class=\"username\">{{ user.displayName }}</span><br />\r\n              <span class=\"user-role\">{{ mission.role }}</span><br />\r\n              <span class=\"org\">{{ mission.organisation ? mission.organisation.name : \"No organisation\" |\r\n                translate}}</span>\r\n            </p>\r\n            <div class=\"dropdown-divider\"></div>\r\n            <!-- <a class=\"dropdown-item\" routerLink=\"/debug\" *ngIf=\"isManager\">Debug</a> -->\r\n            <a class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</a>\r\n            <a class=\"dropdown-item\" routerLink=\"/dashboard\">{{'Data management' | translate}}</a>\r\n            <a class=\"dropdown-item\" data-testid=\"user-management-btn\" routerLink=\"/admin\" *ngIf=\"isManager\">\r\n              {{'Users management' | translate}}</a>\r\n            <a class=\"dropdown-item\" routerLink=\"/profile\">\r\n              {{'Profile' | translate}}</a>\r\n            <div class=\"dropdown-divider\"></div>\r\n            <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\r\n            <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\r\n              translate}}</button>\r\n          </div>\r\n        </div>\r\n        <button class=\"navbar-toggler order-md-1\" (click)=\"navbarCollapse.toggle()\" type=\"button\"\r\n          [attr.aria-expanded]=\"!isCollapsed\" aria-controls=\"navbar-collapse\">\r\n          <span class=\"navbar-toggler-icon\"></span>\r\n        </button>\r\n        <div class=\"navbar-collapse order-md-1\" #navbarCollapse=\"ngbCollapse\" [(ngbCollapse)]=\"isCollapsed\"\r\n          [animation]=\"false\">\r\n          <form\r\n            class=\"form-inline m-0 mt-2 form-container d-flex justify-content-start align-items-start align-items-md-center flex-column flex-md-row flex-nowrap filters-menu-block\">\r\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\r\n              <input class=\"form-control search-button m-1\" placeholder=\"keyword\" id=\"mainSearchBar\" type=\"text\">\r\n              <button class=\"btn btn-outline-primary rounded-pill m-1 w-fit-content h-fit-content align-self-md-center\"\r\n                (click)=\"onSubmit()\">{{'Search' |\r\n                translate}}</button>\r\n            </div>\r\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\r\n              <div class=\"input-group date-selector m-1\">\r\n                <input #dpFromDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpFromDate\"\r\n                  [value]=\"fromDate | formatDateNumberToDigits\"\r\n                  (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\">\r\n                <div class=\"input-group-append\">\r\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\r\n                    type=\"button\"></button>\r\n                </div>\r\n              </div>\r\n              <input name=\"datepicker\" class=\"form-control visually-hidden\" ngbDatepicker #datepicker=\"ngbDatepicker\"\r\n                [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\" [dayTemplate]=\"t\"\r\n                outsideDays=\"hidden\" [startDate]=\"fromDate || calendar.getToday()\" [container]=\"'body'\" tabindex=\"-1\">\r\n              <ng-template #t let-date let-focused=\"focused\">\r\n                <span class=\"custom-day\" [class.focused]=\"focused\" [class.range]=\"isRange(date)\"\r\n                  [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\r\n                  (mouseleave)=\"hoveredDate = null\">\r\n                  {{ date.day }}\r\n                </span>\r\n              </ng-template>\r\n              <span class=\"ms-1 p-2\">{{'to' | translate}}</span>\r\n              <div class=\"input-group date-selector m-1\">\r\n                <input #dpToDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpToDate\"\r\n                  [value]=\"toDate | formatDateNumberToDigits\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\">\r\n                <div class=\"input-group-append\">\r\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\r\n                    type=\"button\"></button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-1 justify-content-evenly\">\r\n              <button\r\n                class=\"btn btn-primary rounded-pill ms-1 w-25 w-md-fit-content h-md-fit-content align-self-md-center\"\r\n                type=\"button\" (click)=\"onApply()\" *ngIf=\"!isDateFilterApplied || dateChanged\">\r\n                {{'Apply' | translate}}\r\n              </button>\r\n              <span\r\n                class=\"appliedText ms-1 py-2 align-self-md-center pb-md-0 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\r\n                *ngIf=\"isDateFilterApplied && !dateChanged\">\r\n                <span class=\"iconify\" data-icon=\"ion:checkmark\" data-width=\"15\" data-height=\"15\"></span>\r\n                {{\"Applied\" | translate}}\r\n              </span>\r\n              <button\r\n                class=\"btn btn-outline-primary rounded-pill w-25 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\r\n                type=\"button\" (click)=\"onClearDates()\">{{'Clear'\r\n                |\r\n                translate}}</button>\r\n              <div\r\n                class=\"change-position-button align-self-end pb-2 align-self-md-center mx-2 pb-md-0 flex-nowrap w-25 w-md-fit-content h-md-fit-content\">\r\n                <input type=\"checkbox\" class=\"btn-check\" id=\"btn-check-outlined\" autocomplete=\"off\">\r\n                <label class=\"link-primary cursor-pointer text-decoration-underline\" (click)=\"onChangePositionClick()\"\r\n                  for=\"btn-check-outlined\">{{\r\n                  (isChangePositionVisible ? \"Close\" : \"Move to\") | translate }}</label>\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n    </nav>\r\n    <lib-navigation-bar *ngIf=\"isVisible && isChangePositionVisible\"></lib-navigation-bar>\r\n  </div>\r\n  <div *ngIf=\"isVisitor && isVisible\">\r\n    <div class=\"visitor-div\">\r\n      <div class=\"logo-container\" data-testid=\"dropdown-menu-button\">\r\n        <img class=\"img-logo\" alt=\"SmarterPlanLogo\" src=\"../assets/images/logos/logo-reserve.png\">\r\n      </div>\r\n      <div class=\"avatar-container-menu\">\r\n        <div class=\"profile_pic dropdown-toggle cursor-pointer\" data-bs-toggle=\"dropdown\">\r\n          <lib-avatar></lib-avatar>\r\n        </div>\r\n        <div class=\"dropdown-menu dropdown-menu-right\">\r\n          <button class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</button>\r\n          <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\r\n          <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\r\n            translate}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["#menu-bar{position:sticky;top:0;z-index:200}.navbar{z-index:200}.navbar-brand{padding-top:5px;padding-bottom:5px;cursor:pointer}.navbar-brand img{height:70px}.profile_pic{border-radius:50%;height:45px;width:45px;margin:8px;border:.2px solid rgb(150,150,150)}.navbar-nav .profile-pic-container .dropdown-menu{position:absolute}.navbar.second-nav{z-index:199;background-color:var(--smarterplan-primary)}.profile_pic.dropdown-toggle:after{display:none}.navbar-light{border-bottom:1px solid var(--smarterplan-primary);background-color:#fff}.navbar form{width:100%;margin:0;padding:0}input,select{margin-right:15px}.select{background:transparent;border:none;color:#fff;margin:6px 20px 0;width:auto}button{padding:5px 10px}button:disabled,button[disabled]{color:#c04f4f}.navbar-toggler{margin-right:1em}.icon{height:40px;width:40px;color:var(--smarterplan-primary)}.search-button-container{width:auto;align-items:stretch;justify-items:start}.search-button-container .search-button{width:auto;border-radius:1rem!important}.visitor-div{background-color:var(--smarterplan-primary);height:60px;display:flex;justify-content:space-between}.profile_pic-container{margin-right:1em}.logo-container,.img-logo{height:100%}.change-position-button{margin-left:2rem}.change-position-button label,.change-position-button .btn-check:checked,.change-position-button .btn-check:focus,.change-position-button .btn-outline-primary,.change-position-button .btn{box-shadow:none!important;outline:0}.change-position-button label{border-radius:16px}.change-position-button .btn-check:checked+.btn{background-color:var(--smarterplan-primary);color:#fff!important}.filters-menu-block{width:auto}@media (min-width: 1200px){.navbar-brand img{height:100px}.profile_pic{height:60px;width:60px;margin:15px}}@media (min-width: 992px) and (max-width: 1199.98px){.navbar-brand img{height:80px}.profile_pic{height:50px;width:50px;margin:12px}}@media (min-width: 768px) and (max-width: 991.98px){.navbar-brand img{height:60px}.profile_pic{height:40px;width:40px;margin:10px}}@media (max-width: 767.98px){.navbar-brand img{height:50px}.profile_pic{height:30px;width:30px;margin:8px}.search-button-container,.filters-menu-block{width:100%}}.form-container{margin:.5rem 0}.navbar-collapse.show{display:flex;padding-bottom:.5rem}.hidden{width:0;margin:0;border:none;padding:0}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:var(--smarterplan-primary-lighter);color:#fff}.custom-day.faded{background-color:var(--smarterplan-primary-transparent)}.calendar{height:100%}.appliedText,.appliedText span{color:var(--smarterplan-primary)}@media (max-width: 767px){.form-inline{flex-direction:column}}.hidden{opacity:0}.date-selector{flex-wrap:nowrap}.date-selector input{min-width:80px;margin:0}@media (min-width: 768px){.w-md-fit-content{width:fit-content!important}.h-md-content{height:fit-content!important}}\n"], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.NgbCollapse, selector: "[ngbCollapse]", inputs: ["animation", "ngbCollapse", "horizontal"], outputs: ["ngbCollapseChange", "shown", "hidden"], exportAs: ["ngbCollapse"] }, { kind: "directive", type: i1$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: AvatarComponent, selector: "lib-avatar", inputs: ["size", "userID"] }, { kind: "component", type: NavigationBarComponent, selector: "lib-navigation-bar" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FormatDateNumberToDigitsPipe, name: "formatDateNumberToDigits" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuBarComponent, selector: "lib-menu-bar", inputs: { cacheName: "cacheName" }, ngImport: i0, template: "<div id=\"menu-bar\">\n  <div *ngIf=\"!isVisitor\">\n    <nav class=\"navbar navbar-expand-md navbar-light p-0\">\n      <div class=\"container-fluid\" *ngIf=\"isVisible\">\n        <div class=\"navbar-brand order-md-0\" [routerLink]=\"['/dashboard']\">\n          <img alt=\"SmarterPlan\" src=\"../assets/images/logos/logo-immo.png\">\n        </div>\n        <div class=\"ms-auto nav-item dropdown profile_pic-container order-md-2\">\n          <div class=\"profile_pic dropdown-toggle\" data-testid=\"dropdown-menu-button\" data-bs-toggle=\"dropdown\">\n            <lib-avatar></lib-avatar>\n          </div>\n          <div class=\"dropdown-menu dropdown-menu-right\">\n            <p *ngIf=\"user && mission\" class=\"p-2\">\n              <span class=\"username\">{{ user.displayName }}</span><br />\n              <span class=\"user-role\">{{ mission.role }}</span><br />\n              <span class=\"org\">{{ mission.organisation ? mission.organisation.name : \"No organisation\" |\n                translate}}</span>\n            </p>\n            <div class=\"dropdown-divider\"></div>\n            <!-- <a class=\"dropdown-item\" routerLink=\"/debug\" *ngIf=\"isManager\">Debug</a> -->\n            <a class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</a>\n            <a class=\"dropdown-item\" routerLink=\"/dashboard\">{{'Data management' | translate}}</a>\n            <a class=\"dropdown-item\" data-testid=\"user-management-btn\" routerLink=\"/admin\" *ngIf=\"isManager\">\n              {{'Users management' | translate}}</a>\n            <a class=\"dropdown-item\" routerLink=\"/profile\">\n              {{'Profile' | translate}}</a>\n            <div class=\"dropdown-divider\"></div>\n            <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\n            <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\n              translate}}</button>\n          </div>\n        </div>\n        <button class=\"navbar-toggler order-md-1\" (click)=\"navbarCollapse.toggle()\" type=\"button\"\n          [attr.aria-expanded]=\"!isCollapsed\" aria-controls=\"navbar-collapse\">\n          <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=\"navbar-collapse order-md-1\" #navbarCollapse=\"ngbCollapse\" [(ngbCollapse)]=\"isCollapsed\"\n          [animation]=\"false\">\n          <form\n            class=\"form-inline m-0 mt-2 form-container d-flex justify-content-start align-items-start align-items-md-center flex-column flex-md-row flex-nowrap filters-menu-block\">\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\n              <input class=\"form-control search-button m-1\" placeholder=\"keyword\" id=\"mainSearchBar\" type=\"text\">\n              <button class=\"btn btn-outline-primary rounded-pill m-1 w-fit-content h-fit-content align-self-md-center\"\n                (click)=\"onSubmit()\">{{'Search' |\n                translate}}</button>\n            </div>\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\n              <div class=\"input-group date-selector m-1\">\n                <input #dpFromDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpFromDate\"\n                  [value]=\"fromDate | formatDateNumberToDigits\"\n                  (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\">\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\n                    type=\"button\"></button>\n                </div>\n              </div>\n              <input name=\"datepicker\" class=\"form-control visually-hidden\" ngbDatepicker #datepicker=\"ngbDatepicker\"\n                [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\" [dayTemplate]=\"t\"\n                outsideDays=\"hidden\" [startDate]=\"fromDate || calendar.getToday()\" [container]=\"'body'\" tabindex=\"-1\">\n              <ng-template #t let-date let-focused=\"focused\">\n                <span class=\"custom-day\" [class.focused]=\"focused\" [class.range]=\"isRange(date)\"\n                  [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\n                  (mouseleave)=\"hoveredDate = null\">\n                  {{ date.day }}\n                </span>\n              </ng-template>\n              <span class=\"ms-1 p-2\">{{'to' | translate}}</span>\n              <div class=\"input-group date-selector m-1\">\n                <input #dpToDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpToDate\"\n                  [value]=\"toDate | formatDateNumberToDigits\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\">\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\n                    type=\"button\"></button>\n                </div>\n              </div>\n            </div>\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-1 justify-content-evenly\">\n              <button\n                class=\"btn btn-primary rounded-pill ms-1 w-25 w-md-fit-content h-md-fit-content align-self-md-center\"\n                type=\"button\" (click)=\"onApply()\" *ngIf=\"!isDateFilterApplied || dateChanged\">\n                {{'Apply' | translate}}\n              </button>\n              <span\n                class=\"appliedText ms-1 py-2 align-self-md-center pb-md-0 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\n                *ngIf=\"isDateFilterApplied && !dateChanged\">\n                <span class=\"iconify\" data-icon=\"ion:checkmark\" data-width=\"15\" data-height=\"15\"></span>\n                {{\"Applied\" | translate}}\n              </span>\n              <button\n                class=\"btn btn-outline-primary rounded-pill w-25 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\n                type=\"button\" (click)=\"onClearDates()\">{{'Clear'\n                |\n                translate}}</button>\n              <div\n                class=\"change-position-button align-self-end pb-2 align-self-md-center mx-2 pb-md-0 flex-nowrap w-25 w-md-fit-content h-md-fit-content\">\n                <input type=\"checkbox\" class=\"btn-check\" id=\"btn-check-outlined\" autocomplete=\"off\">\n                <label class=\"link-primary cursor-pointer text-decoration-underline\" (click)=\"onChangePositionClick()\"\n                  for=\"btn-check-outlined\">{{\n                  (isChangePositionVisible ? \"Close\" : \"Move to\") | translate }}</label>\n              </div>\n            </div>\n          </form>\n        </div>\n      </div>\n    </nav>\n    <lib-navigation-bar *ngIf=\"isVisible && isChangePositionVisible\"></lib-navigation-bar>\n  </div>\n  <div *ngIf=\"isVisitor && isVisible\">\n    <div class=\"visitor-div\">\n      <div class=\"logo-container\" data-testid=\"dropdown-menu-button\">\n        <img class=\"img-logo\" alt=\"SmarterPlanLogo\" src=\"../assets/images/logos/logo-reserve.png\">\n      </div>\n      <div class=\"avatar-container-menu\">\n        <div class=\"profile_pic dropdown-toggle cursor-pointer\" data-bs-toggle=\"dropdown\">\n          <lib-avatar></lib-avatar>\n        </div>\n        <div class=\"dropdown-menu dropdown-menu-right\">\n          <button class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</button>\n          <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\n          <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\n            translate}}</button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: ["#menu-bar{position:sticky;top:0;z-index:200}.navbar{z-index:200}.navbar-brand{padding-top:5px;padding-bottom:5px;cursor:pointer}.navbar-brand img{height:70px}.profile_pic{border-radius:50%;height:45px;width:45px;margin:8px;border:.2px solid rgb(150,150,150)}.navbar-nav .profile-pic-container .dropdown-menu{position:absolute}.navbar.second-nav{z-index:199;background-color:var(--smarterplan-primary)}.profile_pic.dropdown-toggle:after{display:none}.navbar-light{border-bottom:1px solid var(--smarterplan-primary);background-color:#fff}.navbar form{width:100%;margin:0;padding:0}input,select{margin-right:15px}.select{background:transparent;border:none;color:#fff;margin:6px 20px 0;width:auto}button{padding:5px 10px}button:disabled,button[disabled]{color:#c04f4f}.navbar-toggler{margin-right:1em}.icon{height:40px;width:40px;color:var(--smarterplan-primary)}.search-button-container{width:auto;align-items:stretch;justify-items:start}.search-button-container .search-button{width:auto;border-radius:1rem!important}.visitor-div{background-color:var(--smarterplan-primary);height:60px;display:flex;justify-content:space-between}.profile_pic-container{margin-right:1em}.logo-container,.img-logo{height:100%}.change-position-button{margin-left:2rem}.change-position-button label,.change-position-button .btn-check:checked,.change-position-button .btn-check:focus,.change-position-button .btn-outline-primary,.change-position-button .btn{box-shadow:none!important;outline:0}.change-position-button label{border-radius:16px}.change-position-button .btn-check:checked+.btn{background-color:var(--smarterplan-primary);color:#fff!important}.filters-menu-block{width:auto}@media (min-width: 1200px){.navbar-brand img{height:100px}.profile_pic{height:60px;width:60px;margin:15px}}@media (min-width: 992px) and (max-width: 1199.98px){.navbar-brand img{height:80px}.profile_pic{height:50px;width:50px;margin:12px}}@media (min-width: 768px) and (max-width: 991.98px){.navbar-brand img{height:60px}.profile_pic{height:40px;width:40px;margin:10px}}@media (max-width: 767.98px){.navbar-brand img{height:50px}.profile_pic{height:30px;width:30px;margin:8px}.search-button-container,.filters-menu-block{width:100%}}.form-container{margin:.5rem 0}.navbar-collapse.show{display:flex;padding-bottom:.5rem}.hidden{width:0;margin:0;border:none;padding:0}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:var(--smarterplan-primary-lighter);color:#fff}.custom-day.faded{background-color:var(--smarterplan-primary-transparent)}.calendar{height:100%}.appliedText,.appliedText span{color:var(--smarterplan-primary)}@media (max-width: 767px){.form-inline{flex-direction:column}}.hidden{opacity:0}.date-selector{flex-wrap:nowrap}.date-selector input{min-width:80px;margin:0}@media (min-width: 768px){.w-md-fit-content{width:fit-content!important}.h-md-content{height:fit-content!important}}\n"], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.NgbCollapse, selector: "[ngbCollapse]", inputs: ["animation", "ngbCollapse", "horizontal"], outputs: ["ngbCollapseChange", "shown", "hidden"], exportAs: ["ngbCollapse"] }, { kind: "directive", type: i1$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: AvatarComponent, selector: "lib-avatar", inputs: ["size", "userID"] }, { kind: "component", type: NavigationBarComponent, selector: "lib-navigation-bar" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FormatDateNumberToDigitsPipe, name: "formatDateNumberToDigits" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-menu-bar', template: "<div id=\"menu-bar\">\r\n  <div *ngIf=\"!isVisitor\">\r\n    <nav class=\"navbar navbar-expand-md navbar-light p-0\">\r\n      <div class=\"container-fluid\" *ngIf=\"isVisible\">\r\n        <div class=\"navbar-brand order-md-0\" [routerLink]=\"['/dashboard']\">\r\n          <img alt=\"SmarterPlan\" src=\"../assets/images/logos/logo-immo.png\">\r\n        </div>\r\n        <div class=\"ms-auto nav-item dropdown profile_pic-container order-md-2\">\r\n          <div class=\"profile_pic dropdown-toggle\" data-testid=\"dropdown-menu-button\" data-bs-toggle=\"dropdown\">\r\n            <lib-avatar></lib-avatar>\r\n          </div>\r\n          <div class=\"dropdown-menu dropdown-menu-right\">\r\n            <p *ngIf=\"user && mission\" class=\"p-2\">\r\n              <span class=\"username\">{{ user.displayName }}</span><br />\r\n              <span class=\"user-role\">{{ mission.role }}</span><br />\r\n              <span class=\"org\">{{ mission.organisation ? mission.organisation.name : \"No organisation\" |\r\n                translate}}</span>\r\n            </p>\r\n            <div class=\"dropdown-divider\"></div>\r\n            <!-- <a class=\"dropdown-item\" routerLink=\"/debug\" *ngIf=\"isManager\">Debug</a> -->\r\n            <a class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</a>\r\n            <a class=\"dropdown-item\" routerLink=\"/dashboard\">{{'Data management' | translate}}</a>\r\n            <a class=\"dropdown-item\" data-testid=\"user-management-btn\" routerLink=\"/admin\" *ngIf=\"isManager\">\r\n              {{'Users management' | translate}}</a>\r\n            <a class=\"dropdown-item\" routerLink=\"/profile\">\r\n              {{'Profile' | translate}}</a>\r\n            <div class=\"dropdown-divider\"></div>\r\n            <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\r\n            <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\r\n              translate}}</button>\r\n          </div>\r\n        </div>\r\n        <button class=\"navbar-toggler order-md-1\" (click)=\"navbarCollapse.toggle()\" type=\"button\"\r\n          [attr.aria-expanded]=\"!isCollapsed\" aria-controls=\"navbar-collapse\">\r\n          <span class=\"navbar-toggler-icon\"></span>\r\n        </button>\r\n        <div class=\"navbar-collapse order-md-1\" #navbarCollapse=\"ngbCollapse\" [(ngbCollapse)]=\"isCollapsed\"\r\n          [animation]=\"false\">\r\n          <form\r\n            class=\"form-inline m-0 mt-2 form-container d-flex justify-content-start align-items-start align-items-md-center flex-column flex-md-row flex-nowrap filters-menu-block\">\r\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\r\n              <input class=\"form-control search-button m-1\" placeholder=\"keyword\" id=\"mainSearchBar\" type=\"text\">\r\n              <button class=\"btn btn-outline-primary rounded-pill m-1 w-fit-content h-fit-content align-self-md-center\"\r\n                (click)=\"onSubmit()\">{{'Search' |\r\n                translate}}</button>\r\n            </div>\r\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\r\n              <div class=\"input-group date-selector m-1\">\r\n                <input #dpFromDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpFromDate\"\r\n                  [value]=\"fromDate | formatDateNumberToDigits\"\r\n                  (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\">\r\n                <div class=\"input-group-append\">\r\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\r\n                    type=\"button\"></button>\r\n                </div>\r\n              </div>\r\n              <input name=\"datepicker\" class=\"form-control visually-hidden\" ngbDatepicker #datepicker=\"ngbDatepicker\"\r\n                [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\" [dayTemplate]=\"t\"\r\n                outsideDays=\"hidden\" [startDate]=\"fromDate || calendar.getToday()\" [container]=\"'body'\" tabindex=\"-1\">\r\n              <ng-template #t let-date let-focused=\"focused\">\r\n                <span class=\"custom-day\" [class.focused]=\"focused\" [class.range]=\"isRange(date)\"\r\n                  [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\r\n                  (mouseleave)=\"hoveredDate = null\">\r\n                  {{ date.day }}\r\n                </span>\r\n              </ng-template>\r\n              <span class=\"ms-1 p-2\">{{'to' | translate}}</span>\r\n              <div class=\"input-group date-selector m-1\">\r\n                <input #dpToDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpToDate\"\r\n                  [value]=\"toDate | formatDateNumberToDigits\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\">\r\n                <div class=\"input-group-append\">\r\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\r\n                    type=\"button\"></button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-1 justify-content-evenly\">\r\n              <button\r\n                class=\"btn btn-primary rounded-pill ms-1 w-25 w-md-fit-content h-md-fit-content align-self-md-center\"\r\n                type=\"button\" (click)=\"onApply()\" *ngIf=\"!isDateFilterApplied || dateChanged\">\r\n                {{'Apply' | translate}}\r\n              </button>\r\n              <span\r\n                class=\"appliedText ms-1 py-2 align-self-md-center pb-md-0 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\r\n                *ngIf=\"isDateFilterApplied && !dateChanged\">\r\n                <span class=\"iconify\" data-icon=\"ion:checkmark\" data-width=\"15\" data-height=\"15\"></span>\r\n                {{\"Applied\" | translate}}\r\n              </span>\r\n              <button\r\n                class=\"btn btn-outline-primary rounded-pill w-25 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\r\n                type=\"button\" (click)=\"onClearDates()\">{{'Clear'\r\n                |\r\n                translate}}</button>\r\n              <div\r\n                class=\"change-position-button align-self-end pb-2 align-self-md-center mx-2 pb-md-0 flex-nowrap w-25 w-md-fit-content h-md-fit-content\">\r\n                <input type=\"checkbox\" class=\"btn-check\" id=\"btn-check-outlined\" autocomplete=\"off\">\r\n                <label class=\"link-primary cursor-pointer text-decoration-underline\" (click)=\"onChangePositionClick()\"\r\n                  for=\"btn-check-outlined\">{{\r\n                  (isChangePositionVisible ? \"Close\" : \"Move to\") | translate }}</label>\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n    </nav>\r\n    <lib-navigation-bar *ngIf=\"isVisible && isChangePositionVisible\"></lib-navigation-bar>\r\n  </div>\r\n  <div *ngIf=\"isVisitor && isVisible\">\r\n    <div class=\"visitor-div\">\r\n      <div class=\"logo-container\" data-testid=\"dropdown-menu-button\">\r\n        <img class=\"img-logo\" alt=\"SmarterPlanLogo\" src=\"../assets/images/logos/logo-reserve.png\">\r\n      </div>\r\n      <div class=\"avatar-container-menu\">\r\n        <div class=\"profile_pic dropdown-toggle cursor-pointer\" data-bs-toggle=\"dropdown\">\r\n          <lib-avatar></lib-avatar>\r\n        </div>\r\n        <div class=\"dropdown-menu dropdown-menu-right\">\r\n          <button class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</button>\r\n          <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\r\n          <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\r\n            translate}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["#menu-bar{position:sticky;top:0;z-index:200}.navbar{z-index:200}.navbar-brand{padding-top:5px;padding-bottom:5px;cursor:pointer}.navbar-brand img{height:70px}.profile_pic{border-radius:50%;height:45px;width:45px;margin:8px;border:.2px solid rgb(150,150,150)}.navbar-nav .profile-pic-container .dropdown-menu{position:absolute}.navbar.second-nav{z-index:199;background-color:var(--smarterplan-primary)}.profile_pic.dropdown-toggle:after{display:none}.navbar-light{border-bottom:1px solid var(--smarterplan-primary);background-color:#fff}.navbar form{width:100%;margin:0;padding:0}input,select{margin-right:15px}.select{background:transparent;border:none;color:#fff;margin:6px 20px 0;width:auto}button{padding:5px 10px}button:disabled,button[disabled]{color:#c04f4f}.navbar-toggler{margin-right:1em}.icon{height:40px;width:40px;color:var(--smarterplan-primary)}.search-button-container{width:auto;align-items:stretch;justify-items:start}.search-button-container .search-button{width:auto;border-radius:1rem!important}.visitor-div{background-color:var(--smarterplan-primary);height:60px;display:flex;justify-content:space-between}.profile_pic-container{margin-right:1em}.logo-container,.img-logo{height:100%}.change-position-button{margin-left:2rem}.change-position-button label,.change-position-button .btn-check:checked,.change-position-button .btn-check:focus,.change-position-button .btn-outline-primary,.change-position-button .btn{box-shadow:none!important;outline:0}.change-position-button label{border-radius:16px}.change-position-button .btn-check:checked+.btn{background-color:var(--smarterplan-primary);color:#fff!important}.filters-menu-block{width:auto}@media (min-width: 1200px){.navbar-brand img{height:100px}.profile_pic{height:60px;width:60px;margin:15px}}@media (min-width: 992px) and (max-width: 1199.98px){.navbar-brand img{height:80px}.profile_pic{height:50px;width:50px;margin:12px}}@media (min-width: 768px) and (max-width: 991.98px){.navbar-brand img{height:60px}.profile_pic{height:40px;width:40px;margin:10px}}@media (max-width: 767.98px){.navbar-brand img{height:50px}.profile_pic{height:30px;width:30px;margin:8px}.search-button-container,.filters-menu-block{width:100%}}.form-container{margin:.5rem 0}.navbar-collapse.show{display:flex;padding-bottom:.5rem}.hidden{width:0;margin:0;border:none;padding:0}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:var(--smarterplan-primary-lighter);color:#fff}.custom-day.faded{background-color:var(--smarterplan-primary-transparent)}.calendar{height:100%}.appliedText,.appliedText span{color:var(--smarterplan-primary)}@media (max-width: 767px){.form-inline{flex-direction:column}}.hidden{opacity:0}.date-selector{flex-wrap:nowrap}.date-selector input{min-width:80px;margin:0}@media (min-width: 768px){.w-md-fit-content{width:fit-content!important}.h-md-content{height:fit-content!important}}\n"] }]
+            args: [{ selector: 'lib-menu-bar', template: "<div id=\"menu-bar\">\n  <div *ngIf=\"!isVisitor\">\n    <nav class=\"navbar navbar-expand-md navbar-light p-0\">\n      <div class=\"container-fluid\" *ngIf=\"isVisible\">\n        <div class=\"navbar-brand order-md-0\" [routerLink]=\"['/dashboard']\">\n          <img alt=\"SmarterPlan\" src=\"../assets/images/logos/logo-immo.png\">\n        </div>\n        <div class=\"ms-auto nav-item dropdown profile_pic-container order-md-2\">\n          <div class=\"profile_pic dropdown-toggle\" data-testid=\"dropdown-menu-button\" data-bs-toggle=\"dropdown\">\n            <lib-avatar></lib-avatar>\n          </div>\n          <div class=\"dropdown-menu dropdown-menu-right\">\n            <p *ngIf=\"user && mission\" class=\"p-2\">\n              <span class=\"username\">{{ user.displayName }}</span><br />\n              <span class=\"user-role\">{{ mission.role }}</span><br />\n              <span class=\"org\">{{ mission.organisation ? mission.organisation.name : \"No organisation\" |\n                translate}}</span>\n            </p>\n            <div class=\"dropdown-divider\"></div>\n            <!-- <a class=\"dropdown-item\" routerLink=\"/debug\" *ngIf=\"isManager\">Debug</a> -->\n            <a class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</a>\n            <a class=\"dropdown-item\" routerLink=\"/dashboard\">{{'Data management' | translate}}</a>\n            <a class=\"dropdown-item\" data-testid=\"user-management-btn\" routerLink=\"/admin\" *ngIf=\"isManager\">\n              {{'Users management' | translate}}</a>\n            <a class=\"dropdown-item\" routerLink=\"/profile\">\n              {{'Profile' | translate}}</a>\n            <div class=\"dropdown-divider\"></div>\n            <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\n            <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\n              translate}}</button>\n          </div>\n        </div>\n        <button class=\"navbar-toggler order-md-1\" (click)=\"navbarCollapse.toggle()\" type=\"button\"\n          [attr.aria-expanded]=\"!isCollapsed\" aria-controls=\"navbar-collapse\">\n          <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=\"navbar-collapse order-md-1\" #navbarCollapse=\"ngbCollapse\" [(ngbCollapse)]=\"isCollapsed\"\n          [animation]=\"false\">\n          <form\n            class=\"form-inline m-0 mt-2 form-container d-flex justify-content-start align-items-start align-items-md-center flex-column flex-md-row flex-nowrap filters-menu-block\">\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\n              <input class=\"form-control search-button m-1\" placeholder=\"keyword\" id=\"mainSearchBar\" type=\"text\">\n              <button class=\"btn btn-outline-primary rounded-pill m-1 w-fit-content h-fit-content align-self-md-center\"\n                (click)=\"onSubmit()\">{{'Search' |\n                translate}}</button>\n            </div>\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-0\">\n              <div class=\"input-group date-selector m-1\">\n                <input #dpFromDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpFromDate\"\n                  [value]=\"fromDate | formatDateNumberToDigits\"\n                  (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\">\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\n                    type=\"button\"></button>\n                </div>\n              </div>\n              <input name=\"datepicker\" class=\"form-control visually-hidden\" ngbDatepicker #datepicker=\"ngbDatepicker\"\n                [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\" [dayTemplate]=\"t\"\n                outsideDays=\"hidden\" [startDate]=\"fromDate || calendar.getToday()\" [container]=\"'body'\" tabindex=\"-1\">\n              <ng-template #t let-date let-focused=\"focused\">\n                <span class=\"custom-day\" [class.focused]=\"focused\" [class.range]=\"isRange(date)\"\n                  [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\n                  (mouseleave)=\"hoveredDate = null\">\n                  {{ date.day }}\n                </span>\n              </ng-template>\n              <span class=\"ms-1 p-2\">{{'to' | translate}}</span>\n              <div class=\"input-group date-selector m-1\">\n                <input #dpToDate class=\"form-control\" placeholder=\"dd/MM/yyyy\" name=\"dpToDate\"\n                  [value]=\"toDate | formatDateNumberToDigits\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\">\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-outline-secondary calendar\" (click)=\"datepicker.toggle()\"\n                    type=\"button\"></button>\n                </div>\n              </div>\n            </div>\n            <div class=\"input-group search-button-container d-flex flex-row flex-nowrap p-0 m-1 justify-content-evenly\">\n              <button\n                class=\"btn btn-primary rounded-pill ms-1 w-25 w-md-fit-content h-md-fit-content align-self-md-center\"\n                type=\"button\" (click)=\"onApply()\" *ngIf=\"!isDateFilterApplied || dateChanged\">\n                {{'Apply' | translate}}\n              </button>\n              <span\n                class=\"appliedText ms-1 py-2 align-self-md-center pb-md-0 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\n                *ngIf=\"isDateFilterApplied && !dateChanged\">\n                <span class=\"iconify\" data-icon=\"ion:checkmark\" data-width=\"15\" data-height=\"15\"></span>\n                {{\"Applied\" | translate}}\n              </span>\n              <button\n                class=\"btn btn-outline-primary rounded-pill w-25 mx-2 w-md-fit-content h-md-fit-content align-self-md-center\"\n                type=\"button\" (click)=\"onClearDates()\">{{'Clear'\n                |\n                translate}}</button>\n              <div\n                class=\"change-position-button align-self-end pb-2 align-self-md-center mx-2 pb-md-0 flex-nowrap w-25 w-md-fit-content h-md-fit-content\">\n                <input type=\"checkbox\" class=\"btn-check\" id=\"btn-check-outlined\" autocomplete=\"off\">\n                <label class=\"link-primary cursor-pointer text-decoration-underline\" (click)=\"onChangePositionClick()\"\n                  for=\"btn-check-outlined\">{{\n                  (isChangePositionVisible ? \"Close\" : \"Move to\") | translate }}</label>\n              </div>\n            </div>\n          </form>\n        </div>\n      </div>\n    </nav>\n    <lib-navigation-bar *ngIf=\"isVisible && isChangePositionVisible\"></lib-navigation-bar>\n  </div>\n  <div *ngIf=\"isVisitor && isVisible\">\n    <div class=\"visitor-div\">\n      <div class=\"logo-container\" data-testid=\"dropdown-menu-button\">\n        <img class=\"img-logo\" alt=\"SmarterPlanLogo\" src=\"../assets/images/logos/logo-reserve.png\">\n      </div>\n      <div class=\"avatar-container-menu\">\n        <div class=\"profile_pic dropdown-toggle cursor-pointer\" data-bs-toggle=\"dropdown\">\n          <lib-avatar></lib-avatar>\n        </div>\n        <div class=\"dropdown-menu dropdown-menu-right\">\n          <button class=\"dropdown-item\" (click)=\"localeService.modal()\">{{'Language' | translate}}</button>\n          <button class=\"dropdown-item\" (click)=\"openSupportForm()\">{{\"Help\" | translate}}</button>\n          <button data-testid=\"logout-auth-btn\" class=\"dropdown-item\" (click)=\"signOut()\">{{\"Logout\" |\n            translate}}</button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: ["#menu-bar{position:sticky;top:0;z-index:200}.navbar{z-index:200}.navbar-brand{padding-top:5px;padding-bottom:5px;cursor:pointer}.navbar-brand img{height:70px}.profile_pic{border-radius:50%;height:45px;width:45px;margin:8px;border:.2px solid rgb(150,150,150)}.navbar-nav .profile-pic-container .dropdown-menu{position:absolute}.navbar.second-nav{z-index:199;background-color:var(--smarterplan-primary)}.profile_pic.dropdown-toggle:after{display:none}.navbar-light{border-bottom:1px solid var(--smarterplan-primary);background-color:#fff}.navbar form{width:100%;margin:0;padding:0}input,select{margin-right:15px}.select{background:transparent;border:none;color:#fff;margin:6px 20px 0;width:auto}button{padding:5px 10px}button:disabled,button[disabled]{color:#c04f4f}.navbar-toggler{margin-right:1em}.icon{height:40px;width:40px;color:var(--smarterplan-primary)}.search-button-container{width:auto;align-items:stretch;justify-items:start}.search-button-container .search-button{width:auto;border-radius:1rem!important}.visitor-div{background-color:var(--smarterplan-primary);height:60px;display:flex;justify-content:space-between}.profile_pic-container{margin-right:1em}.logo-container,.img-logo{height:100%}.change-position-button{margin-left:2rem}.change-position-button label,.change-position-button .btn-check:checked,.change-position-button .btn-check:focus,.change-position-button .btn-outline-primary,.change-position-button .btn{box-shadow:none!important;outline:0}.change-position-button label{border-radius:16px}.change-position-button .btn-check:checked+.btn{background-color:var(--smarterplan-primary);color:#fff!important}.filters-menu-block{width:auto}@media (min-width: 1200px){.navbar-brand img{height:100px}.profile_pic{height:60px;width:60px;margin:15px}}@media (min-width: 992px) and (max-width: 1199.98px){.navbar-brand img{height:80px}.profile_pic{height:50px;width:50px;margin:12px}}@media (min-width: 768px) and (max-width: 991.98px){.navbar-brand img{height:60px}.profile_pic{height:40px;width:40px;margin:10px}}@media (max-width: 767.98px){.navbar-brand img{height:50px}.profile_pic{height:30px;width:30px;margin:8px}.search-button-container,.filters-menu-block{width:100%}}.form-container{margin:.5rem 0}.navbar-collapse.show{display:flex;padding-bottom:.5rem}.hidden{width:0;margin:0;border:none;padding:0}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:var(--smarterplan-primary-lighter);color:#fff}.custom-day.faded{background-color:var(--smarterplan-primary-transparent)}.calendar{height:100%}.appliedText,.appliedText span{color:var(--smarterplan-primary)}@media (max-width: 767px){.form-inline{flex-direction:column}}.hidden{opacity:0}.date-selector{flex-wrap:nowrap}.date-selector input{min-width:80px;margin:0}@media (min-width: 768px){.w-md-fit-content{width:fit-content!important}.h-md-content{height:fit-content!important}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Router }, { type: LocaleService }, { type: BaseUserService }, { type: NavigatorService }, { type: SupportService }, { type: BaseVisibilityService }, { type: i1$2.NgbCalendar }, { type: i1$2.NgbDateParserFormatter }, { type: FilterService }, { type: AmplifyCacheService }], propDecorators: { cacheName: [{
                 type: Input
             }] } });
@@ -13244,27 +14897,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) {
@@ -13273,15 +14926,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) {
@@ -13290,27 +14943,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 });
@@ -13833,6 +15486,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     args: [MATTERPORT_SDK_KEY]
                 }] }, { 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'];
+class ThreeJsImportService {
+    navigationService;
+    zoneService;
+    layerService;
+    userService;
+    planService;
+    _spaceID;
+    get spaceID() {
+        return this._spaceID;
+    }
+    set spaceID(value) {
+        this._spaceID = value;
+    }
+    constructor(navigationService, zoneService, layerService, userService, planService) {
+        this.navigationService = navigationService;
+        this.zoneService = zoneService;
+        this.layerService = layerService;
+        this.userService = userService;
+        this.planService = planService;
+    }
+    /**
+     * Checks that an S3 key points at something the viewer can actually load.
+     *
+     * Returns the reason it can't, or null when it's fine. This runs before anything is written, so a
+     * mistyped key fails on the form rather than creating zones and navigation for a model that will
+     * 404 the first time someone opens the visit.
+     */
+    validateModelKey(key) {
+        if (!key || !key.trim()) {
+            return 'A 3D model file (.glb) is required for a Three.js visit.';
+        }
+        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.`;
+        }
+        // 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.
+        if (/^https?:\/\//i.test(trimmed)) {
+            return 'Enter the S3 key of the file (e.g. visits/my-model.glb), not a full URL.';
+        }
+        return null;
+    }
+    async importData(spaceID, surface, reloading = false, node = null, overrideExisting = true, placementMetadata = null) {
+        if (reloading) {
+            // Reloading is not fully applicable to static 3D models the same way as Matterport
+            return Promise.resolve(true);
+        }
+        const keyError = this.validateModelKey(node?.model3D);
+        if (keyError) {
+            return Promise.reject(new Error(keyError));
+        }
+        this.spaceID = spaceID;
+        const zones = await this.zoneService.getZonesBySpace(spaceID);
+        const mainZone = zones.find((z) => !z.parentID);
+        if (!mainZone) {
+            return Promise.reject(new Error('Missing data (no main Building Zone)'));
+        }
+        console.log('[ThreeJsImportService] Importing data for Three.js model');
+        // 1. Check/create layer of building type
+        const layerBuilding = await this.getLayerByName('BUILDING');
+        // We generate a dummy ID to act as our single "sweep" equivalent
+        const dummySweepID = v4();
+        // 2. Create the default Zone
+        const createdDefaultZone = await this.createZone(node.metadata || 'Three.js 3D Model', layerBuilding.id, surface, mainZone.id, [dummySweepID], node);
+        if (!createdDefaultZone) {
+            return Promise.resolve(false);
+        }
+        // 3. Create a blank Plan for the model (to ensure consistency in the app structure)
+        const plan = {
+            name: `plan_threejs_${node.id}`,
+            annexe: '', // No floorplan image generated automatically yet
+            zoneID: createdDefaultZone.id,
+            spaceID: this.spaceID,
+            isCurrentForZone: true,
+            isModified: false,
+            isImportedMatterport: false, // Explicitly not matterport
+        };
+        await this.planService.createPlan(plan);
+        // 4. Create the single Navigation entry this model is viewed from.
+        // Matterport derives these from its sweeps; a static model has no sweeps, so the placement
+        // comes from the metadata entered on the form, falling back to the origin.
+        const placement = parseThreeJsPlacement(placementMetadata);
+        const origin = { x: 0, y: 0, z: 0 };
+        const navigationInput = {
+            matterportSweepID: dummySweepID,
+            position: JSON.stringify(placement?.cameraPosition ?? origin),
+            rotation: JSON.stringify(placement?.rotation ?? origin),
+            level: LevelStatus.LOW,
+            nodeID: node.id,
+            spaceID,
+        };
+        const nav = await this.navigationService.createNavigation(navigationInput);
+        if (!nav) {
+            console.log('Could not create navigation for', navigationInput);
+        }
+        console.log('[ThreeJsImportService] Import done.');
+        return Promise.resolve(true);
+    }
+    async createZone(name, layerID, surface = null, parentID = null, sweeps = [], node = null, metadata = null) {
+        const zoneInput = {
+            name,
+            spaceID: this.spaceID,
+            layerID,
+            sweepIDs: sweeps,
+            nodeIDs: node ? [node.id] : null,
+        };
+        removeNullKeysFromObject(zoneInput);
+        if (surface) {
+            zoneInput.surface = surface;
+        }
+        if (parentID) {
+            zoneInput.parentID = parentID;
+        }
+        if (metadata) {
+            zoneInput.metadata = metadata;
+        }
+        const newLocal = await this.zoneService.create(zoneInput);
+        return newLocal;
+    }
+    async getLayerByName(name) {
+        const mission = this.userService.currentMission(this.spaceID);
+        const currentOrgId = mission.organisationID;
+        const layers = await this.layerService.getLayerByNameForOrganisation(name, currentOrgId);
+        if (layers.length > 0) {
+            return layers[0];
+        }
+        // Create it if it doesn't exist
+        return this.layerService.createLayerForOrganisation(name, currentOrgId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThreeJsImportService, deps: [{ token: NavigationService }, { token: ZoneService }, { token: LayerService }, { token: BaseUserService }, { token: PlanService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThreeJsImportService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThreeJsImportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: NavigationService }, { type: ZoneService }, { type: LayerService }, { type: BaseUserService }, { type: PlanService }] });
+
 // matterport-transform.util.ts
 /**
  * Computes the rigid transform (Y-axis rotation + translation) between two
@@ -16363,5 +18157,5 @@ function floatValidator() {
  * Generated bundle index. Do not edit.
  */
 
-export { AffectationService, AvatarComponent, BaseLateralTabService, BaseTagService, BaseUserService, BaseVisibilityService, CameraMode, CaptureService, CaptureViewer, CommentService, CommentType, Config, ContentService, CsvExportComponent, DomainService, DomainType, DurationToStringPipe, EmailStatus, EquipmentService, EventService, EventStatus, EventType, FeatureService, FeatureType, FilterService, HashtagFromIdPipe, HashtagService, InterventionService, InventoryStatus, LayerService, LevelStatus, LoaderComponent, Locale, LocaleService, MATTERPORT_SDK_KEY, MatterportImportService, MatterportService, MatterportTagCopyService, MatterportViewType, MattertagActionMode, MattertagData, MeasurementService, MenuBarComponent, MissionService, NavigationService, NavigatorService, NgxSmarterplanCoreModule, NgxSmarterplanCoreService, NodeService, Object3DService, OperationService, OrganisationService, PaymentStatus, PlanService, PoiService, PoiType, ProfileEntity, ProfileService, ProfileStatus, PropertyService, PropertyType, RoleStatus, SafeUrlPipe, SearchBarComponent, SearchObjectType, SearchService, SpModule, SpaceService, SpaceStatus, StatusEquipment, SupportModalComponent, SupportService, TagAction, TemplateService, TicketPriority, TicketStatus, TicketType, TicketsService, TimeDateToLocalStringPipe, TypeNote, UsernameFromIdPipe, ValidatorsService, ViewerInteractions, ViewerService, VisitService, ZoneChangeService, ZoneService, applyRigidTransformToDirection, applyRigidTransformToPoint, applyRigidTransformToYRotationDeg, arraysContainSameElements, checkElementById, computeRigidTransform, convertTimestampToLocalZone, copyFileInS3, copyFileInS3ViaDownload, dateHasExpired, dateTimeToLocalString, deleteFromS3, distance, downloadBlob, downloadEquipmentDocument, downloadFile, downloadFileAsObject, durationToString, emailValidator, enumToArray, filterUniqueArrayByID, floatValidator, getBufferForFileFromS3, getCoefficientsForImage, getCurrentLang, getDistanceBetweenTwoPoints, getHighestLevelForMissions, getHighestRoleForMissions, getLevelsBelow, getLocaleLong, getLocaleShort, getMetaForImage, getRolesBelowForManager, getSignedFile, getSignedImageUrlForEquipment, getSignedImageUrlForProfile, getSignedImageUrlForSpace, getSpaceIDFromUrl, getVisitUrl, isEmptyObject, listFilesInFolder, mean, noEmptyValidator, numberToDateString, openDocument, openModalForVisitSwitch, poiTypeToString, pointToString, removeAllFilesFromFolderS3, removeNullKeysFromObject, showScanPointsOnPlanInDiv, shuffleArray, sortAlphabeticallyOnName, stringLocaleToEnum, stringToLowercaseNoSpaces, styleButton, textValidator, translateDatePeriod, uploadBase64Image, uploadBase64ImageWithRetry, uploadFileToS3, uploadJsonToS3, validEmail, wait, waitUntil };
+export { AffectationService, AvatarComponent, BaseLateralTabService, BaseTagService, BaseUserService, BaseVisibilityService, CameraMode, CaptureService, CaptureViewer, CommentService, CommentType, Config, ContentService, CsvExportComponent, DomainService, DomainType, DurationToStringPipe, EmailStatus, EquipmentService, EventService, EventStatus, EventType, FeatureService, FeatureType, FilterService, HashtagFromIdPipe, HashtagService, InterventionService, InventoryStatus, LayerService, LevelStatus, LoaderComponent, Locale, LocaleService, MATTERPORT_SDK_KEY, MatterportImportService, MatterportService, MatterportTagCopyService, MatterportViewType, MattertagActionMode, MattertagData, MeasurementService, MenuBarComponent, MissionService, NavigationService, NavigatorService, NgxSmarterplanCoreModule, NgxSmarterplanCoreService, NodeService, Object3DService, OperationService, OrganisationService, PaymentStatus, PlanService, PoiService, PoiType, ProfileEntity, ProfileService, ProfileStatus, PropertyService, PropertyType, RoleStatus, SafeUrlPipe, SearchBarComponent, SearchObjectType, SearchService, SpModule, SpaceService, SpaceStatus, StatusEquipment, SupportModalComponent, SupportService, TagAction, TemplateService, ThreeJsImportService, ThreeJsService, TicketPriority, TicketStatus, TicketType, TicketsService, TimeDateToLocalStringPipe, TypeNote, UsernameFromIdPipe, ValidatorsService, ViewerInteractions, ViewerService, VisitService, ZoneChangeService, ZoneService, applyRigidTransformToDirection, applyRigidTransformToPoint, applyRigidTransformToYRotationDeg, arraysContainSameElements, checkElementById, computeRigidTransform, convertTimestampToLocalZone, copyFileInS3, copyFileInS3ViaDownload, dateHasExpired, dateTimeToLocalString, deleteFromS3, distance, downloadBlob, downloadEquipmentDocument, downloadFile, downloadFileAsObject, durationToString, emailValidator, enumToArray, filterUniqueArrayByID, floatValidator, getBufferForFileFromS3, getCoefficientsForImage, getCurrentLang, getDistanceBetweenTwoPoints, getHighestLevelForMissions, getHighestRoleForMissions, getLevelsBelow, getLocaleLong, getLocaleShort, getMetaForImage, getRolesBelowForManager, getSignedFile, getSignedImageUrlForEquipment, getSignedImageUrlForProfile, getSignedImageUrlForSpace, getSpaceIDFromUrl, getVisitUrl, isEmptyObject, listFilesInFolder, mean, noEmptyValidator, numberToDateString, openDocument, openModalForVisitSwitch, parseThreeJsPlacement, poiTypeToString, pointToString, removeAllFilesFromFolderS3, removeNullKeysFromObject, showScanPointsOnPlanInDiv, shuffleArray, solveThreeJsAlignment, sortAlphabeticallyOnName, stringLocaleToEnum, stringToLowercaseNoSpaces, styleButton, textValidator, translateDatePeriod, uploadBase64Image, uploadBase64ImageWithRetry, uploadFileToS3, uploadFileToS3WithProgress, uploadJsonToS3, validEmail, wait, waitUntil };
 //# sourceMappingURL=smarterplan-ngx-smarterplan-core.mjs.map