@smarterplan/ngx-smarterplan-core 1.4.20 → 1.4.21

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

@@ -8,7 +8,7 @@ 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 { 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, Box3, MathUtils } from 'three';
 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import { Storage, Auth, API, graphqlOperation, Cache } from 'aws-amplify';
 import { DateTime } from 'luxon';
@@ -90,11 +90,11 @@ class CsvExportComponent {
         link.remove();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CsvExportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CsvExportComponent, selector: "lib-csv-export", inputs: { headers: "headers", rowsInput: "rowsInput", getRows: "getRows", title: "title", buttonLabel: "buttonLabel" }, ngImport: i0, template: "<span [style.cursor]=\"'pointer'\" (click)=\"onClickDownload()\" class=\"download-csv d-flex\">\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" }] });
+    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" }] });
 }
 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\">\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"] }]
+            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"] }]
         }], propDecorators: { headers: [{
                 type: Input
             }], rowsInput: [{
@@ -386,6 +386,8 @@ var ViewerInteractions;
     ViewerInteractions[ViewerInteractions["DEFAULT"] = 0] = "DEFAULT";
     ViewerInteractions[ViewerInteractions["ADDING"] = 1] = "ADDING";
     ViewerInteractions[ViewerInteractions["POSITIONING"] = 2] = "POSITIONING";
+    /** A loaded 3D object follows the cursor until the user clicks (validate) or cancels */
+    ViewerInteractions[ViewerInteractions["PLACING_OBJECT3D"] = 3] = "PLACING_OBJECT3D";
 })(ViewerInteractions || (ViewerInteractions = {}));
 class ProfileEntity {
     id;
@@ -633,7 +635,9 @@ class SecurityCamera extends SceneComponent {
         this.makeHighlight();
         // attach highighting to the mesh it represents
         // TODO (scene query): this is very brittle but is the only way to attach something to a room of the model
-        this.outputs.objectRoot.parent.parent.add(this.highlight);
+        if (this.highlight) {
+            this.outputs.objectRoot.parent.parent.add(this.highlight);
+        }
         // create the animation mixer to rotate the camera
         this.makeAnimation();
     }
@@ -672,6 +676,12 @@ class SecurityCamera extends SceneComponent {
             this.edges = null;
         }
         function edgesToCylinders(edgesGeometry, thickness) {
+            // API to be updated in bundle - JSSDK-1222
+            const merge = THREE.mergeBufferGeometries ?? THREE.BufferGeometryUtils?.mergeBufferGeometries;
+            // not exported by the three.js of recent SDK bundles: the caller falls back to plain lines
+            if (!merge)
+                return null;
+            const Cylinder = THREE.CylinderGeometry ?? THREE.CylinderBufferGeometry;
             const { position } = edgesGeometry.attributes;
             const { array, count } = position;
             const r = thickness / 2;
@@ -681,15 +691,14 @@ class SecurityCamera extends SceneComponent {
                 const b = new THREE.Vector3(array[i + 3], array[i + 4], array[i + 5]);
                 const vec = new THREE.Vector3().subVectors(b, a);
                 const len = vec.length();
-                const geom = new THREE.CylinderBufferGeometry(r, r, len, 8);
+                const geom = new Cylinder(r, r, len, 8);
                 geom.translate(0, len / 2, 0);
                 geom.rotateX(Math.PI / 2);
                 geom.lookAt(vec);
                 geom.translate(a.x, a.y, a.z);
                 geoms.push(geom);
             }
-            // API to be updated in bundle - JSSDK-1222
-            return THREE.mergeBufferGeometries(geoms);
+            return merge(geoms);
         }
         const frustumLength = this.inputs.farPlane - this.inputs.nearPlane;
         const boxGeometry = new THREE.BoxGeometry(2, 2, frustumLength);
@@ -725,6 +734,16 @@ class SecurityCamera extends SceneComponent {
         });
         this.box = new THREE.Mesh(boxGeometry, boxMaterial);
         const edgesGeometry = edgesToCylinders(new THREE.EdgesGeometry(boxGeometry), 0.015);
+        if (!edgesGeometry) {
+            // thick edges need mergeBufferGeometries: draw the frustum with lines
+            this.edges = new THREE.LineSegments(new THREE.EdgesGeometry(boxGeometry), new THREE.LineBasicMaterial({
+                color: this.inputs.color,
+                opacity: 0.8,
+                transparent: true,
+                depthWrite: false,
+            }));
+            return;
+        }
         this.edges = new THREE.Mesh(edgesGeometry, new THREE.MeshBasicMaterial({
             color: 0xffffff,
             opacity: 0.25,
@@ -745,8 +764,12 @@ class SecurityCamera extends SceneComponent {
     makeHighlight() {
         const THREE = this.context.three;
         // TODO (scene query): this is very brittle and hardcoded but is the only way to get room geometries until we have a better way to query the scene graph
-        const floorMesh = this.outputs.objectRoot.parent.parent.getObjectByName('FloorMesh:0');
-        const roomMesh = floorMesh.children[0];
+        const floorMesh = this.outputs.objectRoot.parent?.parent?.getObjectByName('FloorMesh:0');
+        const roomMesh = floorMesh?.children[0];
+        if (!roomMesh?.geometry) {
+            // no room mesh found in the scene graph: the frustum is shown without the highlight
+            return;
+        }
         updateHighlightUniforms$1(this.projector, this.highlightUniforms);
         this.highlightUniforms.color.value.setHex(this.inputs.color);
         const shader = new THREE.ShaderMaterial({
@@ -798,30 +821,30 @@ class SecurityCamera extends SceneComponent {
     }
 }
 function vertexShader$1() {
-    return `
-    uniform mat4 lightMatrix;
-
-    varying vec4 vLightCoords;
-
-    void main() {
-      // create a UV region [0,1] x [0,1] to represent what the lightMatrix "sees"
-      vLightCoords = lightMatrix *  modelMatrix * vec4(position, 1.0);
-      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    }
+    return `
+    uniform mat4 lightMatrix;
+
+    varying vec4 vLightCoords;
+
+    void main() {
+      // create a UV region [0,1] x [0,1] to represent what the lightMatrix "sees"
+      vLightCoords = lightMatrix *  modelMatrix * vec4(position, 1.0);
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
   `;
 }
 function fragmentShader$1() {
-    return `
-    uniform vec3 color;
-
-    varying vec4 vLightCoords;
-
-    void main() {
-      vec2 lightUV = vLightCoords.xy / vLightCoords.w;
-      float inView = float(max(lightUV.x, lightUV.y) <= 1.0 && min(lightUV.x, lightUV.y) >= 0.0 && vLightCoords.z > 0.0);
-
-      gl_FragColor = vec4(color, min(inView, 0.2));
-    }
+    return `
+    uniform vec3 color;
+
+    varying vec4 vLightCoords;
+
+    void main() {
+      vec2 lightUV = vLightCoords.xy / vLightCoords.w;
+      float inView = float(max(lightUV.x, lightUV.y) <= 1.0 && min(lightUV.x, lightUV.y) >= 0.0 && vLightCoords.z > 0.0);
+
+      gl_FragColor = vec4(color, min(inView, 0.2));
+    }
   `;
 }
 function updateHighlightUniforms$1(projector, uniforms) {
@@ -1014,30 +1037,30 @@ class ViewFrustumMesh extends SceneComponent {
     }
 }
 function vertexShader() {
-    return `
-    uniform mat4 lightMatrix;
-
-    varying vec4 vLightCoords;
-
-    void main() {
-      // create a UV region [0,1] x [0,1] to represent what the lightMatrix "sees"
-      vLightCoords = lightMatrix *  modelMatrix * vec4(position, 1.0);
-      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    }
+    return `
+    uniform mat4 lightMatrix;
+
+    varying vec4 vLightCoords;
+
+    void main() {
+      // create a UV region [0,1] x [0,1] to represent what the lightMatrix "sees"
+      vLightCoords = lightMatrix *  modelMatrix * vec4(position, 1.0);
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
   `;
 }
 function fragmentShader() {
-    return `
-    uniform vec3 color;
-
-    varying vec4 vLightCoords;
-
-    void main() {
-      vec2 lightUV = vLightCoords.xy / vLightCoords.w;
-      float inView = float(max(lightUV.x, lightUV.y) <= 1.0 && min(lightUV.x, lightUV.y) >= 0.0 && vLightCoords.z > 0.0);
-
-      gl_FragColor = vec4(color, min(inView, 0.2));
-    }
+    return `
+    uniform vec3 color;
+
+    varying vec4 vLightCoords;
+
+    void main() {
+      vec2 lightUV = vLightCoords.xy / vLightCoords.w;
+      float inView = float(max(lightUV.x, lightUV.y) <= 1.0 && min(lightUV.x, lightUV.y) >= 0.0 && vLightCoords.z > 0.0);
+
+      gl_FragColor = vec4(color, min(inView, 0.2));
+    }
   `;
 }
 function updateHighlightUniforms(projector, uniforms) {
@@ -2200,32 +2223,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 = [];
@@ -2293,6 +2316,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     args: ['currentAwsKinesisAnalyticsService']
                 }] }, { type: BaseUserService }, { type: ZoneChangeService }] });
 
+// matterport-framing.util.ts
+/**
+ * Camera rotation that shows `target` from `camera`, at a given horizontal place of the viewer.
+ * Matterport yaw is 0 when looking toward -Z and grows when turning left; pitch is positive upward.
+ * @param horizontalTanHalfFov tan(horizontal FOV / 2), i.e. 1 / projection[0] of the camera pose
+ * @param screenX where the target must appear, from -1 (left edge) to 1 (right edge); 0 = center.
+ *                Used when part of the viewer is covered (side panel), to frame the visible area.
+ */
+function computeFramingRotation(camera, target, horizontalTanHalfFov = 1, screenX = 0) {
+    const dx = target.x - camera.x;
+    const dy = target.y - camera.y;
+    const dz = target.z - camera.z;
+    const yawToTarget = Math.atan2(-dx, -dz);
+    // the target is seen at screenX when the camera looks that much to its side
+    const offset = Math.atan(screenX * horizontalTanHalfFov);
+    return {
+        x: toDegrees(Math.atan2(dy, Math.hypot(dx, dz))),
+        y: toDegrees(yawToTarget + offset),
+    };
+}
+/**
+ * Horizontal place (-1..1) of the center of the visible part of the viewer.
+ * @param viewer client rect of the viewer iframe
+ * @param visibleLeft / visibleRight client X bounds of the part not covered by other panels
+ */
+function visibleCenterScreenX(viewer, visibleLeft, visibleRight) {
+    if (!viewer.width)
+        return 0;
+    const left = Math.max(viewer.left, visibleLeft);
+    const right = Math.min(viewer.left + viewer.width, visibleRight);
+    if (right <= left)
+        return 0;
+    const center = (left + right) / 2;
+    return ((center - viewer.left) / viewer.width) * 2 - 1;
+}
+function toDegrees(rad) {
+    return (rad * 180) / Math.PI;
+}
+/** Height of the floor under a sweep: its puck, or 1.5 m under the camera when the SDK gives none */
+function sweepFloorY(sweep) {
+    return sweep.puckPosition?.y ?? sweep.floorPosition?.y ?? sweep.position.y - 1.5;
+}
+/**
+ * Sweep closest to an object placed at `position`, among the sweeps of the same storey: the camera
+ * of the storey below is often nearer in 3D than a sweep of the same room. A sweep is on the same
+ * storey when the object stands between 0.5 m under its floor and 3 m above it; without any such
+ * sweep, all of them are considered. Distances are measured horizontally.
+ */
+function pickNearestSweepOnSameStorey(sweeps, position) {
+    const sameStorey = sweeps.filter((s) => position.y >= s.floorY - 0.5 && position.y < s.floorY + 3);
+    const candidates = sameStorey.length > 0 ? sameStorey : sweeps;
+    let best = null;
+    let bestDist = Infinity;
+    for (const sweep of candidates) {
+        const dist = Math.hypot(sweep.position.x - position.x, sweep.position.z - position.z);
+        if (dist < bestDist) {
+            bestDist = dist;
+            best = sweep.sid;
+        }
+    }
+    return best;
+}
+
 /* eslint-disable unicorn/filename-case */
 class MattertagData {
     object;
@@ -3030,11 +3116,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';
@@ -3463,6 +3549,28 @@ class MatterportObject3DService {
     azimuthalCrown;
     threeJSScene;
     noLightForObjects = true;
+    /** Max time (ms) to wait for a model to be loaded by the SDK */
+    loadTimeoutMs = 15000;
+    /** Max distance (m) an object can travel from where a translate drag started */
+    maxDragDistance = 2;
+    /** Max vertical travel (m, up and down) during a translate drag, so an object cannot jump to another floor */
+    maxDragHeight = 1.5;
+    /** Emits on every gizmo change and on setObject3DTransform */
+    object3DTransformChanged$ = new Subject();
+    /** Security camera animators by object uuid (`securityCameraAnimator` stays the last loaded one) */
+    securityCameraAnimators = new Map();
+    viewFrustumVisible = new Map();
+    lastSecurityCameraUuid = null;
+    /** Loader component of each model (outputs.objectRoot is set once loaded) */
+    loaderComponents = new Map();
+    gizmos = new Map();
+    activeGizmoUuid = null;
+    gizmoSnap = null;
+    /** Sweeps disabled by setNavigationLocked(true), re-enabled on unlock */
+    sweepsDisabledByLock = [];
+    /** Sweeps re-enabled by the last unlock (the SDK may still report them disabled for a moment) */
+    sweepsEnabledByUnlock = [];
+    tmpBox = new Box3();
     constructor() { }
     async init3DObjectViewer(sdk) {
         const [sceneObject] = await sdk.Scene.createObjects(1);
@@ -3473,112 +3581,184 @@ class MatterportObject3DService {
         this.objectControl = nodeControl.addComponent('mp.transformControls');
         nodeControl.start();
     }
-    async add3DObject(sdk, obj, mode) {
-        return new Promise(async (resolve) => {
-            const [sceneObject] = await sdk.Scene.createObjects(1);
-            let isAnimatedSecurityCamera = (obj.object === "security_camera");
-            let isNestThermostat = (obj.object === "nest_thermostat");
-            let isSmarterplanPromotionalVideo = (obj.object === 'video');
-            let isAzimuthalCrown = (obj.object === 'azimuth');
-            const modelNode = sceneObject.addNode();
-            let component = null;
-            const initial = {
-                url: `/assets/3Dobjects/objects/${obj.object}${obj.format.indexOf('.') === -1 ? '.' + obj.format : obj.format}`,
-                localRotation: { "x": 0, "y": 0, "z": 0 },
-                localPosition: { "x": 0, "y": 0, "z": 0 },
-                visible: true,
-                colliderEnabled: true
-            };
-            switch (obj.format) {
-                case '.obj':
-                case 'obj':
-                    component = modelNode.addComponent('mp.objLoader', initial);
-                    break;
-                case '.fbx':
-                case 'fbx':
-                    component = modelNode.addComponent('mp.fbxLoader', initial);
-                    break;
-                case '.gltf':
-                case 'gltf':
-                case '.glb':
-                case 'glb':
-                    component = modelNode.addComponent('mp.gltfLoader', initial);
-                    break;
-                case '.dae':
-                case 'dae':
-                    component = modelNode.addComponent('mp.daeLoader', initial);
-                    break;
-                default:
-                    console.log('Format not supported');
-                    break;
+    /** SDK loader component name for a model format, null when the format is not supported */
+    getLoaderComponentName(format) {
+        switch ((format || '').toLowerCase()) {
+            case '.obj':
+            case 'obj': return 'mp.objLoader';
+            case '.fbx':
+            case 'fbx': return 'mp.fbxLoader';
+            case '.gltf':
+            case 'gltf':
+            case '.glb':
+            case 'glb': return 'mp.gltfLoader';
+            case '.dae':
+            case 'dae': return 'mp.daeLoader';
+            default: return null;
+        }
+    }
+    /** Resolves once the loader component has produced its objectRoot, rejects after `timeoutMs` */
+    waitForModelLoaded(component, timeoutMs) {
+        return new Promise((resolve, reject) => {
+            const isLoaded = () => !!component?.outputs?.objectRoot;
+            if (isLoaded()) {
+                resolve();
+                return;
             }
-            if (this.noLightForObjects) {
-                const lightsNode = sceneObject.addNode();
-                lightsNode.addComponent('mp.ambientLight', {
-                    intensity: 1,
-                    color: { r: 1.0, g: 1.0, b: 1.0 },
-                });
-                this.noLightForObjects = false;
-            }
-            modelNode.obj3D.position.set(obj.position.x, obj.position.y, obj.position.z);
-            modelNode.obj3D.rotation.set(obj.rotation.x, obj.rotation.y, obj.rotation.z);
-            modelNode.obj3D.scale.set(obj.scale.x, obj.scale.y, obj.scale.z);
-            if (isAzimuthalCrown) {
-                this.azimuthalCrown = modelNode;
-            }
-            if (mode && !isNestThermostat) {
-                this.attachGizmoControlTo3DObject(sdk, modelNode, sceneObject, mode, true, true).catch((e) => console.log(e));
-            }
-            if (this.lastObject3D && typeof this.lastObject3D.id === 'string') {
-                modelNode.obj3D.uuid = this.lastObject3D.id;
-            }
-            else if (obj.id) {
-                modelNode.obj3D.uuid = obj.id;
-            }
-            this.lastObject3D = modelNode.obj3D;
-            this.dictionnaryObjects3D.set(modelNode.obj3D.uuid, modelNode);
-            this.dictionnarySceneObjects3D.set(modelNode.obj3D.uuid, sceneObject);
-            if (isAnimatedSecurityCamera) {
-                const animator = modelNode.addComponent('mp.securityCamera', {
-                    "nearPlane": 0.1, "farPlane": 10, "horizontalFOV": 52, "aspect": 1.7777777777777777,
-                    "localPosition": { "x": 0.3, "y": 0.18, "z": 0 },
-                    "localRotation": { "x": -15, "y": -90, "z": 0 },
-                    "color": 65280, "panPeriod": 5, "panAngle": -45
-                });
-                this.securityCameraAnimator = animator;
-                if (!obj.viewFrustum) {
-                    setTimeout(() => { animator.toggleViewFrustum(); }, 1000);
+            const poll = setInterval(() => {
+                if (isLoaded()) {
+                    clearInterval(poll);
+                    clearTimeout(timer);
+                    resolve();
                 }
-            }
-            if (isNestThermostat) {
-                const cv = new CanvasRenderer();
-                cv.onInit();
-                const plane = new PlaneRenderer();
-                plane.outputs = { objectRoot: new Object3D(), collider: new Object3D() };
-                const inputTexture = cv.outputs.texture;
-                plane.setRootScene(this.threeJSScene);
-                plane.onInit(modelNode, inputTexture);
-                const sc = new NestThermostat();
-                sc.setComponent(component, plane, cv);
-                sc.setRootScene(this.threeJSScene);
-                sc.onInit(modelNode, plane, inputTexture);
-                cv.setCanvasNestThermostatPainter(sc);
-                setTimeout(() => { sc.inputs.loadingState = "Loaded"; sc.onInputsUpdated(); }, 5000);
-            }
-            if (isSmarterplanPromotionalVideo) {
-                const sc = new TvPlayer();
-                sc.setComponent(component);
-                sc.onInit(modelNode);
-                setTimeout(() => { sc.inputs.loadingState = "Loaded"; sc.onInputsUpdated(); }, 5000);
-            }
-            sceneObject.start();
-            resolve(this.lastObject3D);
+            }, 50);
+            const timer = setTimeout(() => {
+                clearInterval(poll);
+                reject(new Error(`3D model not loaded after ${timeoutMs} ms`));
+            }, timeoutMs);
         });
     }
+    /**
+     * Adds a 3D model to the scene.
+     * The promise resolves with the three.js object once the model is actually loaded, and rejects
+     * (after cleaning the scene) when the format is unknown or the load times out.
+     * The position / rotation / scale of `obj` are applied to the model origin, as stored in DB.
+     */
+    async add3DObject(sdk, obj, mode) {
+        const loaderName = this.getLoaderComponentName(obj.format);
+        if (!loaderName) {
+            throw new Error(`3D object format not supported: ${obj.format}`);
+        }
+        const [sceneObject] = await sdk.Scene.createObjects(1);
+        const isAnimatedSecurityCamera = (!obj.url && obj.object === 'security_camera');
+        const isNestThermostat = (!obj.url && obj.object === 'nest_thermostat');
+        const isSmarterplanPromotionalVideo = (!obj.url && obj.object === 'video');
+        const isAzimuthalCrown = (!obj.url && obj.object === 'azimuth');
+        const modelNode = sceneObject.addNode();
+        const initial = {
+            url: obj.url || `/assets/3Dobjects/objects/${obj.object}${obj.format.indexOf('.') === -1 ? '.' + obj.format : obj.format}`,
+            localRotation: { 'x': 0, 'y': 0, 'z': 0 },
+            localPosition: { 'x': 0, 'y': 0, 'z': 0 },
+            visible: true,
+            colliderEnabled: true
+        };
+        const component = modelNode.addComponent(loaderName, initial);
+        if (this.noLightForObjects) {
+            const lightsNode = sceneObject.addNode();
+            lightsNode.addComponent('mp.ambientLight', {
+                intensity: 1,
+                color: { r: 1.0, g: 1.0, b: 1.0 },
+            });
+            this.noLightForObjects = false;
+        }
+        modelNode.obj3D.position.set(obj.position.x, obj.position.y, obj.position.z);
+        modelNode.obj3D.rotation.set(obj.rotation.x, obj.rotation.y, obj.rotation.z);
+        modelNode.obj3D.scale.set(obj.scale.x, obj.scale.y, obj.scale.z);
+        // The DB id replaces the three.js uuid. The id pre-set through setLastObject3D is only a fallback
+        // for callers without id: taking it first gave the same id to every object loaded meanwhile
+        // (several cameras or cubes loading while an add is starting), which then overwrote each other.
+        if (obj.id) {
+            modelNode.obj3D.uuid = obj.id;
+        }
+        else if (this.lastObject3D && typeof this.lastObject3D.id === 'string') {
+            modelNode.obj3D.uuid = this.lastObject3D.id;
+        }
+        const uuid = modelNode.obj3D.uuid;
+        this.lastObject3D = modelNode.obj3D;
+        this.dictionnaryObjects3D.set(uuid, modelNode);
+        this.dictionnarySceneObjects3D.set(uuid, sceneObject);
+        this.loaderComponents.set(uuid, component);
+        if (isAzimuthalCrown) {
+            this.azimuthalCrown = modelNode;
+        }
+        if (mode && !isNestThermostat) {
+            this.attachGizmo(uuid, mode).catch(() => { });
+        }
+        let animator = null;
+        if (isAnimatedSecurityCamera) {
+            animator = modelNode.addComponent('mp.securityCamera', {
+                'nearPlane': 0.1, 'farPlane': 10, 'horizontalFOV': 52, 'aspect': 1.7777777777777777,
+                'localPosition': { 'x': 0.3, 'y': 0.18, 'z': 0 },
+                'localRotation': { 'x': -15, 'y': -90, 'z': 0 },
+                'color': 65280, 'panPeriod': 5, 'panAngle': -45
+            });
+            this.securityCameraAnimator = animator;
+            this.securityCameraAnimators.set(uuid, animator);
+            this.viewFrustumVisible.set(uuid, true); // the component shows its frustum by default
+            this.lastSecurityCameraUuid = uuid;
+        }
+        if (isNestThermostat) {
+            const cv = new CanvasRenderer();
+            cv.onInit();
+            const plane = new PlaneRenderer();
+            plane.outputs = { objectRoot: new Object3D(), collider: new Object3D() };
+            const inputTexture = cv.outputs.texture;
+            plane.setRootScene(this.threeJSScene);
+            plane.onInit(modelNode, inputTexture);
+            const sc = new NestThermostat();
+            sc.setComponent(component, plane, cv);
+            sc.setRootScene(this.threeJSScene);
+            sc.onInit(modelNode, plane, inputTexture);
+            cv.setCanvasNestThermostatPainter(sc);
+            setTimeout(() => { sc.inputs.loadingState = 'Loaded'; sc.onInputsUpdated(); }, 5000);
+        }
+        if (isSmarterplanPromotionalVideo) {
+            const sc = new TvPlayer();
+            sc.setComponent(component);
+            sc.onInit(modelNode);
+            setTimeout(() => { sc.inputs.loadingState = 'Loaded'; sc.onInputsUpdated(); }, 5000);
+        }
+        sceneObject.start();
+        try {
+            await this.waitForModelLoaded(component, this.loadTimeoutMs);
+        }
+        catch (e) {
+            await this.deleteObject3D(uuid);
+            throw e;
+        }
+        if (animator && !obj.viewFrustum) {
+            // The camera component starts with the model node, so it is ready now that the model is loaded
+            this.applyViewFrustum(uuid, false);
+        }
+        return modelNode.obj3D;
+    }
+    /**
+     * Removes a 3D object for good: detaches its gizmo, stops its scene object and forgets it.
+     */
     async deleteObject3D(uuid) {
-        const obj = this.dictionnaryObjects3D.get(uuid);
-        if (obj)
-            obj.obj3D.visible = false;
+        this.detachGizmo(uuid);
+        const node = this.dictionnaryObjects3D.get(uuid);
+        const sceneObject = this.dictionnarySceneObjects3D.get(uuid);
+        if (node) {
+            try {
+                node.obj3D.visible = false;
+            }
+            catch { /* already destroyed */ }
+        }
+        if (sceneObject && typeof sceneObject.stop === 'function') {
+            try {
+                sceneObject.stop();
+            }
+            catch { /* already stopped */ }
+        }
+        this.dictionnaryObjects3D.delete(uuid);
+        this.dictionnarySceneObjects3D.delete(uuid);
+        this.loaderComponents.delete(uuid);
+        if (this.lastObject3D && (this.lastObject3D.uuid === uuid || this.lastObject3D.id === uuid)) {
+            this.lastObject3D = null;
+        }
+        if (node && this.azimuthalCrown === node) {
+            this.azimuthalCrown = null;
+        }
+        const animator = this.securityCameraAnimators.get(uuid);
+        if (animator && this.securityCameraAnimator === animator) {
+            this.securityCameraAnimator = null;
+        }
+        this.securityCameraAnimators.delete(uuid);
+        this.viewFrustumVisible.delete(uuid);
+        if (this.lastSecurityCameraUuid === uuid) {
+            this.lastSecurityCameraUuid = null;
+        }
     }
     getObject3DModelNodeFromDictionnary(uuid) {
         let obj = this.dictionnaryObjects3D.get(uuid);
@@ -3598,10 +3778,32 @@ class MatterportObject3DService {
         let obj = this.dictionnaryObjects3D.get(objectId);
         return obj ? obj.obj3D.visible : false;
     }
+    /** Shows / hides a model (used by the placement preview) */
+    setObject3DVisible(uuid, visible) {
+        const node = this.dictionnaryObjects3D.get(uuid);
+        if (node)
+            node.obj3D.visible = visible;
+    }
+    /** Enables / disables the pointer collider of a model (disabled while it follows the cursor) */
+    setObject3DColliderEnabled(uuid, enabled) {
+        const component = this.loaderComponents.get(uuid);
+        if (component?.inputs) {
+            component.inputs.colliderEnabled = enabled;
+        }
+    }
+    /**
+     * Moves the camera next to a 3D object by creating a temporary tag on the object centre.
+     * @returns false when the object is unknown or no tag could be reached
+     */
     async pointCameraTo3DObject(sdk, objectId, createTagCallback, goToTagCallback, deleteLastTagCallback, getTagFromElementId) {
-        let obj = this.dictionnaryObjects3D.get(objectId);
+        const obj = this.dictionnaryObjects3D.get(objectId);
+        if (!obj)
+            return false;
+        // Tag on the bounding box centre (the model origin is a corner for most models)
+        const box = this.getObject3DBoundingBox(objectId);
+        const anchor = box ? box.center : this.toPoint(obj.obj3D.position);
         const poiObject = {
-            coordinate: JSON.stringify(obj.obj3D.position),
+            coordinate: JSON.stringify(anchor),
             type: PoiType.OBJECT3D,
             elementID: objectId,
         };
@@ -3610,9 +3812,16 @@ class MatterportObject3DService {
             await createTagCallback(PoiType.OBJECT3D, objectDb, poiObject);
         }
         catch (err) { }
-        let result = getTagFromElementId(objectId);
-        await goToTagCallback(result.tag);
-        deleteLastTagCallback();
+        try {
+            const result = getTagFromElementId(objectId);
+            if (!result?.tag)
+                return false;
+            await goToTagCallback(result.tag);
+            return true;
+        }
+        finally {
+            deleteLastTagCallback();
+        }
     }
     getSceneNodeFromObject3DId(uuid) {
         return this.dictionnarySceneObjects3D.get(uuid);
@@ -3622,49 +3831,449 @@ class MatterportObject3DService {
             this.azimuthalCrown.obj3D.position.set(poseCamera.position.x, poseCamera.position.y, poseCamera.position.z);
         }
     }
+    //
+    // ---------- Geometry helpers ----------
+    //
+    toPoint(v) {
+        return { x: v.x, y: v.y, z: v.z };
+    }
+    /**
+     * Geometry of the model itself (the loader output): the node also holds the helpers added by other
+     * components, like the view frustum of a security camera, which must not count in its size.
+     */
+    modelRoot(uuid, node) {
+        return this.loaderComponents.get(uuid)?.outputs?.objectRoot ?? node.obj3D;
+    }
+    /** World-space bounding box of the model, null when unknown or when nothing is loaded yet */
+    getObject3DBoundingBox(uuid) {
+        const node = this.dictionnaryObjects3D.get(uuid);
+        if (!node)
+            return null;
+        node.obj3D.updateWorldMatrix(true, true);
+        const box = this.tmpBox.setFromObject(this.modelRoot(uuid, node));
+        if (box.isEmpty())
+            return null;
+        const size = box.getSize(new Vector3());
+        const center = box.getCenter(new Vector3());
+        return {
+            min: this.toPoint(box.min),
+            max: this.toPoint(box.max),
+            size: this.toPoint(size),
+            center: this.toPoint(center),
+        };
+    }
+    /**
+     * Real dimensions of the model in meters (width x, height y, depth z), scale included but not
+     * its rotation: the world bounding box of a rotated object is larger than the object itself.
+     */
+    getObject3DDimensions(uuid) {
+        const node = this.dictionnaryObjects3D.get(uuid);
+        if (!node)
+            return null;
+        const rotation = node.obj3D.rotation.clone();
+        node.obj3D.rotation.set(0, 0, 0);
+        try {
+            node.obj3D.updateWorldMatrix(true, true);
+            const box = this.tmpBox.setFromObject(this.modelRoot(uuid, node));
+            return box.isEmpty() ? null : this.toPoint(box.getSize(new Vector3()));
+        }
+        finally {
+            node.obj3D.rotation.copy(rotation);
+            node.obj3D.updateWorldMatrix(true, true);
+        }
+    }
+    /**
+     * Uniform scale so that the largest bounding box dimension equals `targetSizeMeters`.
+     * The node position is untouched, so call placeObject3DOnSurface afterwards.
+     * @returns the new scale, null when the object is unknown / not loaded / `targetSizeMeters` invalid
+     */
+    normalizeObject3DSize(uuid, targetSizeMeters) {
+        const node = this.dictionnaryObjects3D.get(uuid);
+        const box = this.getObject3DBoundingBox(uuid);
+        if (!node || !box || !(targetSizeMeters > 0))
+            return null;
+        const largest = Math.max(box.size.x, box.size.y, box.size.z);
+        if (!(largest > 0))
+            return null;
+        const factor = targetSizeMeters / largest;
+        node.obj3D.scale.multiplyScalar(factor);
+        this.emitTransformChanged(uuid);
+        return this.toPoint(node.obj3D.scale);
+    }
+    /**
+     * Places the model on a surface point without touching its pivot: the node position is
+     * adjusted so that the bounding box bottom-center lies on `point`.
+     * - floor (normal pointing up, or no normal): bottom-center on the point
+     * - wall (mostly horizontal normal): model turned around Y so its +Z faces away from the wall,
+     *   and pushed along the normal by half its depth so it does not cut the wall
+     * - ceiling (normal pointing down): the model hangs, top-center on the point
+     * @returns the new transform, null when the object is unknown or not loaded
+     */
+    /**
+     * @param frontYawOffset rotation (radians, around Y) that turns the front of the model toward its +Z
+     *                       axis, for models whose front is another axis (e.g. -PI/2 when it is +X)
+     */
+    placeObject3DOnSurface(uuid, point, normal, frontYawOffset = 0) {
+        const node = this.dictionnaryObjects3D.get(uuid);
+        if (!node || !this.getObject3DBoundingBox(uuid))
+            return null;
+        const obj = node.obj3D;
+        const n = normal ? new Vector3(normal.x, normal.y, normal.z) : new Vector3(0, 1, 0);
+        if (n.lengthSq() === 0)
+            n.set(0, 1, 0);
+        n.normalize();
+        const isWall = Math.abs(n.y) < 0.5;
+        const isCeiling = !isWall && n.y < 0;
+        const target = new Vector3(point.x, point.y, point.z);
+        if (isWall) {
+            // Face away from the wall; the box has to be measured after the rotation
+            obj.rotation.y = Math.atan2(n.x, n.z) + frontYawOffset;
+        }
+        const box = this.getObject3DBoundingBox(uuid);
+        if (isWall) {
+            const horizontal = new Vector3(n.x, 0, n.z).normalize();
+            const halfDepth = 0.5 * (Math.abs(horizontal.x) * box.size.x + Math.abs(horizontal.z) * box.size.z);
+            target.addScaledVector(horizontal, halfDepth);
+        }
+        const anchorY = isCeiling ? box.max.y : box.min.y;
+        obj.position.x += target.x - box.center.x;
+        obj.position.y += target.y - anchorY;
+        obj.position.z += target.z - box.center.z;
+        this.emitTransformChanged(uuid);
+        return this.getObject3DTransform(uuid);
+    }
+    getObject3DTransform(uuid) {
+        const node = this.dictionnaryObjects3D.get(uuid);
+        if (!node)
+            return null;
+        const o = node.obj3D;
+        return {
+            position: this.toPoint(o.position),
+            rotation: { x: o.rotation.x, y: o.rotation.y, z: o.rotation.z },
+            scale: this.toPoint(o.scale),
+        };
+    }
+    /** Applies a (partial) transform. Rotation is in radians. */
+    setObject3DTransform(uuid, transform) {
+        const node = this.dictionnaryObjects3D.get(uuid);
+        if (!node)
+            return false;
+        const o = node.obj3D;
+        if (transform.position)
+            o.position.set(transform.position.x, transform.position.y, transform.position.z);
+        if (transform.rotation)
+            o.rotation.set(transform.rotation.x, transform.rotation.y, transform.rotation.z);
+        if (transform.scale)
+            o.scale.set(transform.scale.x, transform.scale.y, transform.scale.z);
+        this.emitTransformChanged(uuid);
+        return true;
+    }
+    emitTransformChanged(uuid) {
+        const transform = this.getObject3DTransform(uuid);
+        if (transform) {
+            this.object3DTransformChanged$.next({ uuid, ...transform });
+        }
+    }
+    //
+    // ---------- Gizmo ----------
+    //
+    /** Creates the mp.transformControls node of a model and wires it (events, snap) */
+    createGizmo(uuid, modelNode, sceneObject, mode, visible, node) {
+        const gizmoNode = node ?? sceneObject.addNode();
+        const component = gizmoNode.addComponent('mp.transformControls');
+        gizmoNode.start();
+        const tc = component.transformControls;
+        tc.visible = visible;
+        component.inputs.selection = modelNode;
+        component.inputs.mode = mode;
+        modelNode.obj3D.controls = component;
+        const entry = {
+            uuid,
+            node: gizmoNode,
+            component,
+            mode,
+            dragStart: null,
+            lastPosition: modelNode.obj3D.position.clone(),
+            onDraggingChanged: (event) => {
+                entry.dragStart = event?.value ? modelNode.obj3D.position.clone() : null;
+                entry.lastPosition = modelNode.obj3D.position.clone();
+            },
+            onObjectChange: () => this.onGizmoObjectChange(entry, modelNode),
+        };
+        if (typeof tc.addEventListener === 'function') {
+            tc.addEventListener('dragging-changed', entry.onDraggingChanged);
+            tc.addEventListener('objectChange', entry.onObjectChange);
+        }
+        this.applySnap(tc);
+        this.gizmos.set(uuid, entry);
+        this.activeGizmoUuid = uuid;
+        return entry;
+    }
+    /** Keeps a translate drag within maxDragDistance / maxDragHeight of where it started, then notifies */
+    onGizmoObjectChange(entry, modelNode) {
+        const pos = modelNode.obj3D.position;
+        if (entry.mode === 'translate') {
+            const start = entry.dragStart ?? entry.lastPosition;
+            const delta = pos.clone().sub(start);
+            delta.y = MathUtils.clamp(delta.y, -this.maxDragHeight, this.maxDragHeight);
+            const length = delta.length();
+            if (length > this.maxDragDistance) {
+                delta.multiplyScalar(this.maxDragDistance / length);
+            }
+            pos.copy(start).add(delta);
+        }
+        entry.lastPosition = pos.clone();
+        this.emitTransformChanged(entry.uuid);
+    }
+    applySnap(tc) {
+        if (!tc)
+            return;
+        const snap = this.gizmoSnap;
+        const translation = snap?.translation ?? null;
+        const rotation = snap?.rotationDeg != null ? MathUtils.degToRad(snap.rotationDeg) : null;
+        const scale = snap?.scale ?? null;
+        if (typeof tc.setTranslationSnap === 'function')
+            tc.setTranslationSnap(translation);
+        else
+            tc.translationSnap = translation;
+        if (typeof tc.setRotationSnap === 'function')
+            tc.setRotationSnap(rotation);
+        else
+            tc.rotationSnap = rotation;
+        if (typeof tc.setScaleSnap === 'function')
+            tc.setScaleSnap(scale);
+        else
+            tc.scaleSnap = scale;
+    }
+    /**
+     * Shows the transform gizmo on an object (any previous gizmo is detached first).
+     * Re-attaching to the object that already has the gizmo only changes its mode.
+     */
+    async attachGizmo(uuid, mode, sdk) {
+        const modelNode = this.dictionnaryObjects3D.get(uuid);
+        const sceneObject = this.dictionnarySceneObjects3D.get(uuid);
+        if (!modelNode || !sceneObject)
+            return false;
+        const existing = this.gizmos.get(uuid);
+        if (existing && this.activeGizmoUuid === uuid) {
+            this.setGizmoMode(mode);
+            return true;
+        }
+        // A started scene object refuses new nodes (addNode returns null): use a dedicated one
+        let node = sceneObject.addNode();
+        let gizmoSceneObject = null;
+        if (!node) {
+            if (!sdk?.Scene)
+                return false;
+            [gizmoSceneObject] = await sdk.Scene.createObjects(1);
+            node = gizmoSceneObject.addNode();
+        }
+        this.detachGizmo();
+        const entry = this.createGizmo(uuid, modelNode, sceneObject, mode, true, node);
+        entry.sceneObject = gizmoSceneObject;
+        this.lastObject3D = modelNode.obj3D;
+        return true;
+    }
+    /** Switches the active gizmo between translate / rotate / scale without re-attaching it */
+    setGizmoMode(mode) {
+        const entry = this.activeGizmoUuid ? this.gizmos.get(this.activeGizmoUuid) : null;
+        if (!entry)
+            return;
+        entry.mode = mode;
+        entry.dragStart = null;
+        entry.component.inputs.mode = mode;
+        const tc = entry.component.transformControls;
+        if (tc && typeof tc.setMode === 'function')
+            tc.setMode(mode);
+    }
+    /** Really removes the gizmo from the scene (default: the active one) */
+    detachGizmo(uuid) {
+        const id = uuid ?? this.activeGizmoUuid;
+        if (!id)
+            return;
+        const entry = this.gizmos.get(id);
+        if (!entry)
+            return;
+        const tc = entry.component?.transformControls;
+        if (tc) {
+            if (typeof tc.removeEventListener === 'function') {
+                tc.removeEventListener('dragging-changed', entry.onDraggingChanged);
+                tc.removeEventListener('objectChange', entry.onObjectChange);
+            }
+            tc.visible = false;
+            if (typeof tc.detach === 'function')
+                tc.detach();
+            if (typeof tc.dispose === 'function')
+                tc.dispose();
+            if (tc.parent && typeof tc.parent.remove === 'function')
+                tc.parent.remove(tc);
+        }
+        try {
+            entry.node.stop();
+        }
+        catch { /* already stopped */ }
+        try {
+            entry.sceneObject?.stop();
+        }
+        catch { /* already stopped */ }
+        const modelNode = this.dictionnaryObjects3D.get(id);
+        if (modelNode?.obj3D)
+            modelNode.obj3D.controls = null;
+        this.gizmos.delete(id);
+        if (this.activeGizmoUuid === id)
+            this.activeGizmoUuid = null;
+    }
+    isGizmoAttached(uuid) {
+        return uuid ? this.gizmos.has(uuid) : this.activeGizmoUuid !== null;
+    }
+    /** Snap steps for all gizmos (null / missing value = no snap) */
+    setGizmoSnap(snap) {
+        this.gizmoSnap = snap ? { ...snap } : null;
+        this.gizmos.forEach((entry) => this.applySnap(entry.component?.transformControls));
+    }
+    setGizmoMaxDragDistance(maxDistance, maxHeight) {
+        if (maxDistance > 0)
+            this.maxDragDistance = maxDistance;
+        if (maxHeight !== undefined && maxHeight > 0)
+            this.maxDragHeight = maxHeight;
+    }
+    /**
+     * Prevents camera navigation to other sweeps while a gizmo is edited.
+     * The SDK has no "freeze camera" switch, so every enabled sweep except the current one is
+     * disabled (Sweep.disable); exactly those sweeps are re-enabled on unlock. Sweeps already
+     * disabled (forbidden sweeps, edit mode) are never touched, and `keepDisabled` lists sweeps
+     * that must stay disabled on unlock.
+     * @returns false when the lock could not be applied (SDK without Sweep.disable, unknown current sweep)
+     */
+    async setNavigationLocked(sdk, locked, sweepCollection, currentSweepId, keepDisabled = []) {
+        if (!sdk?.Sweep || typeof sdk.Sweep.disable !== 'function' || typeof sdk.Sweep.enable !== 'function') {
+            return false;
+        }
+        if (locked) {
+            if (this.sweepsDisabledByLock.length > 0)
+                return true;
+            if (!sweepCollection || !currentSweepId)
+                return false;
+            // a sweep this lock re-enabled just before may still be reported disabled by the SDK
+            const ids = Object.keys(sweepCollection).filter((sid) => sid !== currentSweepId &&
+                (sweepCollection[sid]?.enabled !== false || this.sweepsEnabledByUnlock.includes(sid)));
+            if (ids.length === 0)
+                return true;
+            try {
+                await sdk.Sweep.disable(...ids);
+                this.sweepsDisabledByLock = ids;
+            }
+            catch {
+                // fall back to one call per sweep to know exactly which ones were disabled
+                const results = await Promise.allSettled(ids.map((sid) => sdk.Sweep.disable(sid)));
+                this.sweepsDisabledByLock = ids.filter((_, i) => results[i].status === 'fulfilled');
+            }
+            return true;
+        }
+        const toEnable = this.sweepsDisabledByLock.filter((sid) => !keepDisabled.includes(sid));
+        this.sweepsDisabledByLock = [];
+        this.sweepsEnabledByUnlock = toEnable;
+        if (toEnable.length > 0) {
+            try {
+                await sdk.Sweep.enable(...toEnable);
+            }
+            catch {
+                await Promise.allSettled(toEnable.map((sid) => sdk.Sweep.enable(sid)));
+            }
+        }
+        return true;
+    }
+    isNavigationLocked() {
+        return this.sweepsDisabledByLock.length > 0;
+    }
+    /** Sweeps currently disabled by the navigation lock */
+    getSweepsDisabledByLock() {
+        return [...this.sweepsDisabledByLock];
+    }
+    /**
+     * Legacy API: attaches a gizmo to a model node. Prefer attachGizmo(uuid, mode).
+     */
     async attachGizmoControlTo3DObject(sdk, modelNode, sceneObject, mode, visible, isNewObject) {
         let node = sceneObject.addNode();
         if (!node) {
             const [newSceneObject] = await sdk.Scene.createObjects(1);
             node = newSceneObject.addNode();
         }
-        const myControl = node.addComponent('mp.transformControls');
-        node.start();
-        myControl.transformControls.visible = visible;
-        myControl.inputs.selection = modelNode;
-        myControl.inputs.mode = mode;
-        modelNode.obj3D.controls = myControl;
-        if (isNewObject) {
-            if (!this.lastObject3D || !this.lastObject3D.controls) {
-                try {
-                    modelNode.obj3D.uuid = this.lastObject3D.uuid || this.lastObject3D.id;
-                }
-                catch (e) {
-                    console.log(`id obj in Scene was not assigned to id from DB`);
-                }
-                this.lastObject3D = modelNode.obj3D;
+        if (isNewObject && (!this.lastObject3D || !this.lastObject3D.controls)) {
+            try {
+                modelNode.obj3D.uuid = this.lastObject3D.uuid || this.lastObject3D.id;
+            }
+            catch (e) {
+                // lastObject3D is not set: the model keeps its own uuid
             }
         }
-        else {
-            this.lastObject3D = modelNode.obj3D;
-        }
+        this.detachGizmo();
+        this.createGizmo(modelNode.obj3D.uuid, modelNode, sceneObject, mode, visible, node);
+        this.lastObject3D = modelNode.obj3D;
         return modelNode;
     }
+    /** Removes the gizmo of the last added / edited object */
     removeGizmoFromLastObject() {
-        if (this.lastObject3D && this.lastObject3D.controls) {
-            this.lastObject3D.controls.transformControls.visible = false;
-            this.lastObject3D.controls.transformControls.dispose();
-            this.lastObject3D.controls = null;
+        const last = this.lastObject3D;
+        if (!last)
+            return;
+        const uuid = last.uuid ?? last.id;
+        if (uuid && this.gizmos.has(uuid)) {
+            this.detachGizmo(uuid);
+        }
+        else if (last.controls) {
+            // gizmo not created by this service: best effort
+            last.controls.transformControls.visible = false;
+            last.controls.transformControls.dispose();
+            last.controls = null;
         }
     }
-    toggleViewFrustum() {
-        if (this.securityCameraAnimator) {
+    //
+    // ---------- Security camera ----------
+    //
+    applyViewFrustum(uuid, visible) {
+        const animator = this.securityCameraAnimators.get(uuid);
+        if (!animator)
+            return false;
+        const current = this.viewFrustumVisible.get(uuid) ?? true;
+        if (current === visible)
+            return true;
+        try {
+            animator.toggleViewFrustum();
+        }
+        catch {
+            return false;
+        }
+        this.viewFrustumVisible.set(uuid, visible);
+        return true;
+    }
+    /** Shows / hides the view frustum of the security camera `uuid` */
+    setViewFrustum(uuid, visible) {
+        return this.applyViewFrustum(uuid, visible);
+    }
+    isViewFrustumVisible(uuid) {
+        return this.viewFrustumVisible.get(uuid) ?? false;
+    }
+    /** Toggles the frustum of `uuid`, or of the last loaded security camera when omitted */
+    toggleViewFrustum(uuid) {
+        const id = uuid ?? this.lastSecurityCameraUuid;
+        if (id && this.securityCameraAnimators.has(id)) {
+            this.applyViewFrustum(id, !(this.viewFrustumVisible.get(id) ?? true));
+        }
+        else if (!uuid && this.securityCameraAnimator) {
+            // animator set by hand (legacy)
             this.securityCameraAnimator.toggleViewFrustum();
         }
     }
     clear() {
+        Array.from(this.gizmos.keys()).forEach((id) => this.detachGizmo(id));
         this.dictionnaryObjects3D.clear();
         this.dictionnarySceneObjects3D.clear();
+        this.loaderComponents.clear();
+        this.securityCameraAnimators.clear();
+        this.viewFrustumVisible.clear();
+        this.lastSecurityCameraUuid = null;
+        this.sweepsDisabledByLock = [];
         this.lastObject3D = null;
         this.azimuthalCrown = null;
         this.securityCameraAnimator = null;
@@ -4361,6 +4970,8 @@ class Config {
     constructor() { }
 }
 
+/** Pointer intersections a 3D object can be placed on (Pointer.Colliders MODEL and SWEEP) */
+const PLACEMENT_SURFACES = ['intersectedobject.model', 'intersectedobject.sweep'];
 class MatterportService {
     sdkKey;
     router;
@@ -4381,6 +4992,18 @@ class MatterportService {
     isMeasureModeOn = false;
     interactionMode = ViewerInteractions.DEFAULT;
     cameraMode = 'INSIDE';
+    /** Emitted when a placement (tag following the cursor, or 3D object preview) is cancelled by right click or Escape */
+    placementCancelled$ = new Subject();
+    /** Pending interactive placement of a 3D object (see startObject3DPlacement) */
+    object3DPlacement = null;
+    /** Sweeps snapshot taken when navigation is locked (disabled sweeps vanish from Sweep.data) */
+    lockedSweepsSnapshot = {};
+    /**
+     * Every sweep seen in Sweep.data. After an unlock the SDK re-emits the re-enabled sweeps little by
+     * little: a lock asked meanwhile must still know all of them (it found nothing to disable).
+     */
+    knownSweeps = {};
+    keydownTargets = [];
     get mattertagIDs() {
         return this.matterportTagService.mattertagIDs;
     }
@@ -4522,6 +5145,10 @@ class MatterportService {
      * Actions on left click when positioning mattertag in visit
      */
     pointerLeftClickHandler = (evt) => {
+        if (this.object3DPlacement) {
+            this.validateObject3DPlacement();
+            return;
+        }
         if (this.mattertagToFollow) {
             const mattertagData = this.dictionnaryTags.get(this.mattertagToFollow);
             if (mattertagData) {
@@ -4535,8 +5162,7 @@ class MatterportService {
     };
     pointerRightClickHandler = (e) => {
         e.preventDefault();
-        this.cancelFollowingCursor();
-        alert('action cancelled');
+        this.cancelCurrentPlacement();
     };
     pointerMiddleClickHandler = (e) => {
         this.pointerService.updateCursorDisplay(this.poseMatterport);
@@ -4583,6 +5209,7 @@ class MatterportService {
                 onRightClick: this.pointerRightClickHandler.bind(this),
                 onMiddleClick: this.pointerMiddleClickHandler.bind(this),
             });
+            this.registerEscapeListener(iframe);
             // Load SDK
             const showcaseWindow = iframe.contentWindow;
             iframe.addEventListener('load', async () => {
@@ -4659,6 +5286,9 @@ class MatterportService {
                         // (we are about to validate, but it exists in sdk already)
                         this.enable_following_tag(this.mattertagToFollow);
                     }
+                    if (this.object3DPlacement) {
+                        this.updateObject3DPlacementPreview(intersection);
+                    }
                     if (this.pointerService) {
                         this.pointerService.setCursorPositionButtonDisplayed(false);
                     }
@@ -4684,6 +5314,11 @@ class MatterportService {
                 // subscribe to sweeps
                 this.sdk.Sweep.data.subscribe({
                     onCollectionUpdated: function subscr(collection) {
+                        this.knownSweeps = { ...this.knownSweeps, ...collection };
+                        if (this.object3DService.isNavigationLocked()) {
+                            // sweeps disabled by the lock are no longer in the collection: keep them known
+                            collection = { ...this.lockedSweepsSnapshot, ...collection };
+                        }
                         this.sweeps = Object.keys(collection);
                         this.sweepCollection = collection;
                         // Rebuild sid ↔ uuid maps whenever the collection updates
@@ -4795,7 +5430,7 @@ class MatterportService {
                 // Pointer trick
                 // Create a div that will appear when the cursor is still
                 // It will intercept the click of the mouse before it trigerring the Matterport's tour navigation
-                this.pointerService.startPointerTrick(this.sdk, this.container, () => this.poseMatterport, () => this.poseCamera, () => this.interactionMode, () => this.mattertagToFollow);
+                this.pointerService.startPointerTrick(this.sdk, this.container, () => this.poseMatterport, () => this.poseCamera, () => this.interactionMode, () => this.getFollowTarget());
                 /**
                 * Transitions
                 */
@@ -4867,7 +5502,7 @@ class MatterportService {
      * Styling of pointer
      */
     updatePointerTrick() {
-        this.pointerService.updatePointerTrick(this.sdk, this.container, this.poseMatterport, this.poseCamera, this.interactionMode, this.mattertagToFollow);
+        this.pointerService.updatePointerTrick(this.sdk, this.container, this.poseMatterport, this.poseCamera, this.interactionMode, this.getFollowTarget());
     }
     /**
      * Triggers a tag visibility refresh based on current camera mode, floor and sweep.
@@ -5184,22 +5819,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) {
@@ -5296,6 +5931,9 @@ class MatterportService {
      * @param uuid
      */
     async deleteObject3D(uuid) {
+        if (this.object3DPlacement?.uuid === uuid) {
+            this.cancelObject3DPlacement();
+        }
         return this.object3DService.deleteObject3D(uuid);
     }
     getObject3DModelNodeFromDictionnary(uuid) {
@@ -5340,6 +5978,11 @@ class MatterportService {
      * Cancels following of cursor (meaning deleting last Mattertag)
      */
     cancelFollowingCursor() {
+        if (this.object3DPlacement) {
+            // generic cancel (toolbox buttons...) while a 3D object follows the cursor
+            this.cancelObject3DPlacement();
+            return;
+        }
         this.deleteLastMattertag();
         this.setInteractionMode(ViewerInteractions.DEFAULT);
     }
@@ -5708,7 +6351,10 @@ class MatterportService {
      * Clear all variables, deletes all tags (when viewer is remover or model changed=reload needed)
      */
     async clearAll() {
-        console.log('removing viewer');
+        this.cancelObject3DPlacement();
+        this.removeEscapeListener();
+        this.lockedSweepsSnapshot = {};
+        this.knownSweeps = {};
         this.clearViewSubscriptions();
         this.viewsByType.clear();
         this.currentView = null;
@@ -5732,6 +6378,9 @@ class MatterportService {
     async init3DObjectViewer() {
         return this.object3DService.init3DObjectViewer(this.sdk);
     }
+    /**
+     * Adds a 3D model; resolves once it is loaded, rejects on unknown format or load timeout (~15 s).
+     */
     async add3DObject(obj, mode) {
         return this.object3DService.add3DObject(this.sdk, obj, mode);
     }
@@ -5741,7 +6390,43 @@ class MatterportService {
     isObjectVisible(objectId) {
         return this.object3DService.isObjectVisible(objectId);
     }
-    async pointCameraTo3DObject(objectId) {
+    /** Moves the camera to the object (centered on its bounding box). Resolves false when the object is unknown. */
+    /**
+     * Moves the camera to the sweep closest to a 3D object and turns it toward the object.
+     * @param visibleArea client X bounds of the part of the viewer not covered by other panels
+     *                    (the lateral menu covers the right of the viewer): the object is centered there.
+     * Falls back to the temporary tag navigation when no sweep can be used.
+     */
+    async pointCameraTo3DObject(objectId, visibleArea) {
+        const box = this.object3DService.getObject3DBoundingBox(objectId);
+        const sweep = box ? this.findNearestSweep(box.center) : null;
+        const sweepData = sweep ? { ...this.lockedSweepsSnapshot, ...(this.sweepCollection ?? {}) }[sweep.sid] : null;
+        if (box && sweepData?.position && this.sdk?.Sweep) {
+            const projection = this.poseCamera?.projection;
+            const tanHalfFov = projection?.[0] ? 1 / projection[0] : 1;
+            let screenX = 0;
+            const viewer = document.querySelector('#viewer-module');
+            if (visibleArea && viewer) {
+                const rect = viewer.getBoundingClientRect();
+                screenX = visibleCenterScreenX(rect, visibleArea.left, visibleArea.right);
+            }
+            const rotation = computeFramingRotation(sweepData.position, box.center, tanHalfFov, screenX);
+            try {
+                if (this.poseCamera?.sweep === sweep.sid) {
+                    await this.sdk.Camera.setRotation(rotation, { speed: 80 });
+                }
+                else {
+                    await this.sdk.Sweep.moveTo(sweep.sid, {
+                        rotation,
+                        transition: this.sdk.Sweep.Transition?.FLY,
+                    });
+                }
+                return true;
+            }
+            catch (error) {
+                // disabled or unreachable sweep: use the tag navigation below
+            }
+        }
         return this.object3DService.pointCameraTo3DObject(this.sdk, objectId, this.createMattertagFromPOI.bind(this), this.goToTag.bind(this), this.deleteLastMattertag.bind(this), this.getTagFromElementId.bind(this));
     }
     getSceneNodeFromObject3DId(uuid) {
@@ -5756,8 +6441,252 @@ class MatterportService {
     removeGizmoFromLastObject() {
         this.object3DService.removeGizmoFromLastObject();
     }
-    toggleViewFrustum() {
-        this.object3DService.toggleViewFrustum();
+    /** Toggles the frustum of the security camera `uuid` (default: the last loaded one) */
+    toggleViewFrustum(uuid) {
+        this.object3DService.toggleViewFrustum(uuid);
+    }
+    setViewFrustum(uuid, visible) {
+        return this.object3DService.setViewFrustum(uuid, visible);
+    }
+    isViewFrustumVisible(uuid) {
+        return this.object3DService.isViewFrustumVisible(uuid);
+    }
+    //
+    // ---------- 3D objects: geometry, transform, gizmo ----------
+    //
+    /** Emits on gizmo changes and on setObject3DTransform / placeObject3DOnSurface / normalizeObject3DSize */
+    get object3DTransformChanged$() {
+        return this.object3DService.object3DTransformChanged$;
+    }
+    /** World-space bounding box, null when the object is unknown or not loaded */
+    getObject3DBoundingBox(uuid) {
+        return this.object3DService.getObject3DBoundingBox(uuid);
+    }
+    /** Dimensions of the model in meters, without its rotation */
+    getObject3DDimensions(uuid) {
+        return this.object3DService.getObject3DDimensions(uuid);
+    }
+    /** Uniform scale so the largest dimension equals `targetSizeMeters`; returns the new scale or null */
+    normalizeObject3DSize(uuid, targetSizeMeters) {
+        return this.object3DService.normalizeObject3DSize(uuid, targetSizeMeters);
+    }
+    /** Moves the object so its bounding box bottom-center (top-center on a ceiling) lies on `point` */
+    placeObject3DOnSurface(uuid, point, normal, frontYawOffset = 0) {
+        return this.object3DService.placeObject3DOnSurface(uuid, point, normal, frontYawOffset);
+    }
+    getObject3DTransform(uuid) {
+        return this.object3DService.getObject3DTransform(uuid);
+    }
+    /** Rotation in radians */
+    setObject3DTransform(uuid, transform) {
+        return this.object3DService.setObject3DTransform(uuid, transform);
+    }
+    attachGizmo(uuid, mode) {
+        return this.object3DService.attachGizmo(uuid, mode, this.sdk);
+    }
+    setGizmoMode(mode) {
+        this.object3DService.setGizmoMode(mode);
+    }
+    detachGizmo(uuid) {
+        this.object3DService.detachGizmo(uuid);
+    }
+    isGizmoAttached(uuid) {
+        return this.object3DService.isGizmoAttached(uuid);
+    }
+    /** null disables snapping (default) */
+    setGizmoSnap(snap) {
+        this.object3DService.setGizmoSnap(snap);
+    }
+    /** Limits of a translate drag from its start (default 2 m, +/- 1.5 m vertically) */
+    setGizmoMaxDragDistance(maxDistance, maxHeight) {
+        this.object3DService.setGizmoMaxDragDistance(maxDistance, maxHeight);
+    }
+    /**
+     * Locks / unlocks camera navigation to other sweeps while a gizmo is edited: every enabled sweep
+     * except the current one is disabled, and exactly those are re-enabled on unlock.
+     * @returns false when the lock could not be applied (SDK not ready, current sweep unknown)
+     */
+    async setNavigationLocked(locked) {
+        if (!this.sdk)
+            return false;
+        const currentSweep = this.poseCamera?.sweep ?? null;
+        const sweeps = { ...this.knownSweeps, ...(this.sweepCollection ?? {}) };
+        if (locked && !this.object3DService.isNavigationLocked()) {
+            this.lockedSweepsSnapshot = sweeps;
+        }
+        const keepDisabled = (this.forbiddenSweeps ?? []).map((s) => this.navigationService.resolveSweepSid(s));
+        const done = await this.object3DService.setNavigationLocked(this.sdk, locked, sweeps, currentSweep, keepDisabled);
+        if (!locked || !done) {
+            this.lockedSweepsSnapshot = {};
+        }
+        return done;
+    }
+    isNavigationLocked() {
+        return this.object3DService.isNavigationLocked();
+    }
+    //
+    // ---------- 3D objects: interactive placement ----------
+    //
+    /**
+     * Makes an already loaded model follow the cursor on the surfaces of the visit.
+     * Left click resolves with the surface point / normal under the cursor (read the object origin
+     * with getObject3DTransform); right click or Escape hides the model and resolves null
+     * (deleting it is up to the caller). Resolves null right away if another interaction is running.
+     */
+    startObject3DPlacement(uuid, options = {}) {
+        if (!this.object3DService.getObject3DModelNodeFromDictionnary(uuid)) {
+            return Promise.resolve(null);
+        }
+        if (this.object3DPlacement) {
+            this.cancelObject3DPlacement();
+        }
+        if (this.interactionMode !== ViewerInteractions.DEFAULT) {
+            return Promise.resolve(null);
+        }
+        return new Promise((resolve) => {
+            this.object3DPlacement = { uuid, resolve, lastPoint: null, lastNormal: null, frontYawOffset: options.frontYawOffset ?? 0 };
+            this.object3DService.setObject3DColliderEnabled(uuid, false);
+            this.object3DService.setObject3DVisible(uuid, false);
+            this.setInteractionMode(ViewerInteractions.PLACING_OBJECT3D);
+            if (this.poseMatterport?.position) {
+                this.updateObject3DPlacementPreview(this.poseMatterport);
+            }
+        });
+    }
+    isPlacingObject3D() {
+        return !!this.object3DPlacement;
+    }
+    /** Cancels the running object placement (model hidden, promise resolves null) */
+    cancelObject3DPlacement() {
+        const placement = this.object3DPlacement;
+        if (!placement)
+            return;
+        this.endObject3DPlacement();
+        this.object3DService.setObject3DVisible(placement.uuid, false);
+        placement.resolve(null);
+    }
+    /**
+     * Drops the object where it is previewed (same as a left click). Touch screens have no hover: each
+     * tap moves the preview, and the app confirms with a button.
+     * @returns false when no surface was pointed yet
+     */
+    confirmObject3DPlacement() {
+        if (!this.object3DPlacement?.lastPoint)
+            return false;
+        this.validateObject3DPlacement();
+        return true;
+    }
+    /** True once the preview stands on a surface (the placement can be confirmed) */
+    hasObject3DPlacementPoint() {
+        return !!this.object3DPlacement?.lastPoint;
+    }
+    validateObject3DPlacement() {
+        const placement = this.object3DPlacement;
+        if (!placement || !placement.lastPoint)
+            return; // no surface under the cursor yet
+        this.endObject3DPlacement();
+        placement.resolve({
+            position: placement.lastPoint,
+            normal: placement.lastNormal ?? { x: 0, y: 1, z: 0 },
+        });
+    }
+    endObject3DPlacement() {
+        const placement = this.object3DPlacement;
+        if (!placement)
+            return;
+        this.object3DPlacement = null;
+        this.object3DService.setObject3DColliderEnabled(placement.uuid, true);
+        this.setInteractionMode(ViewerInteractions.DEFAULT);
+    }
+    updateObject3DPlacementPreview(intersection) {
+        const placement = this.object3DPlacement;
+        if (!placement || !intersection?.position)
+            return;
+        // Only the scanned surfaces: hitting the preview itself (reported as "unknown") would push it away
+        // along the ray at each move, until it lands kilometers from the camera
+        if (typeof intersection.object === 'string' && !PLACEMENT_SURFACES.includes(intersection.object))
+            return;
+        const point = { x: intersection.position.x, y: intersection.position.y, z: intersection.position.z };
+        const normal = intersection.normal
+            ? { x: intersection.normal.x, y: intersection.normal.y, z: intersection.normal.z }
+            : { x: 0, y: 1, z: 0 };
+        if (!placement.lastPoint) {
+            // hidden until it is on a surface (it was loaded at the camera position)
+            this.object3DService.setObject3DVisible(placement.uuid, true);
+        }
+        placement.lastPoint = point;
+        placement.lastNormal = normal;
+        this.object3DService.placeObject3DOnSurface(placement.uuid, point, normal, placement.frontYawOffset);
+    }
+    /** Token for the pointer trick: truthy while something follows the cursor (tag or 3D object) */
+    getFollowTarget() {
+        return this.mattertagToFollow ?? this.object3DPlacement?.uuid ?? null;
+    }
+    /**
+     * Cancels whatever follows the cursor (right click / Escape): the 3D object preview, or the tag.
+     * Emits placementCancelled$ when something was actually running.
+     */
+    cancelCurrentPlacement() {
+        const wasRunning = this.interactionMode !== ViewerInteractions.DEFAULT || !!this.object3DPlacement;
+        // nothing follows the cursor: a plain right click must not remove the last (existing) tag
+        if (!wasRunning)
+            return;
+        if (this.object3DPlacement) {
+            this.cancelObject3DPlacement();
+        }
+        else {
+            this.cancelFollowingCursor();
+        }
+        this.placementCancelled$.next();
+    }
+    /** Escape cancels any placement. Listens on the page and on the (same-origin) Showcase iframe, which takes the focus on click. */
+    registerEscapeListener(iframe) {
+        this.removeEscapeListener();
+        const handler = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            if (this.interactionMode !== ViewerInteractions.DEFAULT || this.object3DPlacement) {
+                this.cancelCurrentPlacement();
+            }
+        };
+        const targets = [document];
+        try {
+            if (iframe?.contentWindow)
+                targets.push(iframe.contentWindow);
+        }
+        catch { /* cross-origin iframe: page listener only */ }
+        targets.forEach((target) => {
+            target.addEventListener('keydown', handler);
+            this.keydownTargets.push({ target, handler });
+        });
+    }
+    removeEscapeListener() {
+        this.keydownTargets.forEach(({ target, handler }) => target.removeEventListener('keydown', handler));
+        this.keydownTargets = [];
+    }
+    ngOnDestroy() {
+        this.cancelObject3DPlacement();
+        this.removeEscapeListener();
+    }
+    //
+    // ---------- Sweeps ----------
+    //
+    /**
+     * Closest enabled sweep to a world position (for instance to re-assign the zone of a moved object).
+     * `sweepId` is the DB-format id (like currentSweep), `sid` the SDK id. null when no sweep is known.
+     */
+    findNearestSweep(position) {
+        const collection = { ...this.lockedSweepsSnapshot, ...(this.sweepCollection ?? {}) };
+        const sids = Object.keys(collection).filter((sid) => collection[sid]?.position && collection[sid].enabled !== false);
+        const best = pickNearestSweepOnSameStorey(sids.map((sid) => ({ sid, position: collection[sid].position, floorY: sweepFloorY(collection[sid]) })), position);
+        const data = best ? collection[best] : null;
+        if (!best)
+            return null;
+        return {
+            sweepId: this.navigationService.resolveSweepUuid(best),
+            sid: best,
+            floorSequence: data.floorInfo?.sequence ?? (typeof data.floor === 'number' ? data.floor : null),
+        };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MatterportService, deps: [{ token: 'config' }, { token: MATTERPORT_SDK_KEY }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: BaseVisibilityService }, { token: i0.NgZone }, { token: MatterportMeasurementService }, { token: MatterportNavigationService }, { token: MatterportPointerService }, { token: MatterportObject3DService }, { token: MatterportTagService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MatterportService, providedIn: 'root' });
@@ -9663,11 +10592,11 @@ class ModalSwitchVisitComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalSwitchVisitComponent, deps: [{ token: i1$2.NgbActiveModal }, { token: i1$1.Router }, { token: ViewerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ModalSwitchVisitComponent, selector: "lib-modal-switch-visit", inputs: { content: "content", model3D: "model3D", spaceID: "spaceID", dataToMove: "dataToMove" }, ngImport: i0, template: "<div class=\"modal-container\">\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" }] });
+    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\">\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"] }]
+            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: [{
@@ -14386,11 +15315,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\">\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" }] });
+    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" }] });
 }
 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\">\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"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: SearchService }], propDecorators: { searchable: [{
                 type: Input
             }], objectType: [{
@@ -14838,11 +15767,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\">\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"] }] });
+    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"] }] });
 }
 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\">\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"] }]
+            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"] }]
         }], ctorParameters: () => [], propDecorators: { useLogo: [{
                 type: Input
             }], color: [{
@@ -14900,11 +15829,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\">\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" }] });
+    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" }] });
 }
 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\">\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"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: SupportService }, { type: i1$2.NgbActiveModal }, { type: i3.UntypedFormBuilder }, { type: BaseUserService }, { type: ValidatorsService }] });
 
 class LocaleService {
@@ -16344,11 +17273,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\">\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" }] });
+    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" }] });
 }
 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\">\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"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['currentAwsKinesisAnalyticsService']
@@ -16617,11 +17546,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\">\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" }] });
+    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" }] });
 }
 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\">\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"] }]
+            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"] }]
         }], 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
             }] } });
@@ -16776,27 +17705,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) {
@@ -16805,15 +17734,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) {
@@ -16822,27 +17751,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 });