@smarterplan/ngx-smarterplan-locations 0.0.21 → 0.1.0

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

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Component, Output, Input, ViewChild, HostListener, NgModule } from '@angular/core';
 import { __awaiter } from 'tslib';
-import * as i2 from 'ngx-smarterplan-core';
-import { enumToArray, LevelStatus, uploadFileToS3, deleteFromS3, PropertyType, getSignedImageUrlForSpace, SearchObjectType, SpaceStatus, getMetaForImage, getSignedFile, downloadFileAsObject, downloadBlob, CaptureViewer, showScanPointsOnPlanInDiv, getCoefficientsForImage, wait, InventoryStatus, sortAlphabeticallyOnName, NgxSmarterplanCoreModule } from 'ngx-smarterplan-core';
+import * as i2 from '@smarterplan/ngx-smarterplan-core';
+import { enumToArray, LevelStatus, uploadFileToS3, deleteFromS3, PropertyType, getSignedImageUrlForSpace, SearchObjectType, SpaceStatus, getMetaForImage, getSignedFile, downloadFileAsObject, downloadBlob, CaptureViewer, showScanPointsOnPlanInDiv, getCoefficientsForImage, wait, InventoryStatus, sortAlphabeticallyOnName, NgxSmarterplanCoreModule } from '@smarterplan/ngx-smarterplan-core';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i5 from '@angular/common';
@@ -1666,6 +1666,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 args: ["content", { static: false }]
             }] } });
 
+function isInPolygon(p, polygon) {
+    let isInside = false;
+    let minX = polygon[0].x;
+    let maxX = polygon[0].x;
+    let minY = polygon[0].y;
+    let maxY = polygon[0].y;
+    for (let n = 1; n < polygon.length; n++) {
+        const q = polygon[n];
+        minX = Math.min(q.x, minX);
+        maxX = Math.max(q.x, maxX);
+        minY = Math.min(q.y, minY);
+        maxY = Math.max(q.y, maxY);
+    }
+    if (p.x < minX || p.x > maxX || p.y < minY || p.y > maxY) {
+        return false;
+    }
+    for (let index = 0, index_ = polygon.length - 1; index < polygon.length; index_ = index++) {
+        if (polygon[index].y > p.y !== polygon[index_].y > p.y &&
+            p.x <
+                ((polygon[index_].x - polygon[index].x) *
+                    (p.y - polygon[index].y)) /
+                    (polygon[index_].y - polygon[index].y) +
+                    polygon[index].x) {
+            isInside = !isInside;
+        }
+    }
+    return isInside;
+}
+function rotate(point, center, angle) {
+    let xM;
+    let yM;
+    let x;
+    let y;
+    angle *= Math.PI / 180;
+    xM = point.x - center.x;
+    yM = point.y - center.y;
+    x = xM * Math.cos(angle) + yM * Math.sin(angle) + center.x;
+    y = -xM * Math.sin(angle) + yM * Math.cos(angle) + center.y;
+    return { x: Math.round(x), y: Math.round(y) };
+}
+/**
+    * Check if an HtmlElement is inside a selection
+    * @param button HTMLElement
+    * @param selection
+    * @returns true if the element is inside the selection, false otherwise
+    */
+function buttonIsInSelection(button, selection) {
+    const bounds = button.getBoundingClientRect();
+    return (bounds.bottom > selection.top &&
+        bounds.top < selection.top + selection.height &&
+        bounds.right > selection.left &&
+        bounds.left < selection.left + selection.width);
+}
+/**
+ * Styles the button that represents a sweep on the plan: green-added to zone, red -not added
+ * @param button HTMLButtonElement, button on the plan,
+ * @param isAdded boolean, if the sweep added to the zone
+ */
+function styleButton(button, isAdded = false) {
+    button.style.backgroundImage = isAdded
+        ? `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`
+        : `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`;
+    button.style.backgroundColor = "transparent";
+    button.style.position = "absolute";
+    button.style.border = "none";
+    button.style.width = "17px";
+    button.style.height = "17px";
+    button.disabled = false;
+    button.type = "button";
+}
+/**
+ * Check if sweep (button) is chosen; it is reprsented by image style "mdi:adjust"
+ * @param button HTMLElement
+ * @returns boolean, if button was selected
+ */
+function buttonIsChosen(button) {
+    return button.style.backgroundImage.includes("adjust");
+}
+/**
+     * Visually change the state of a scan button, a selected button is blue
+     * @param button HTMLElement
+     * @param selected if true the button will be blue, otherwise it will red or green
+     */
+function setVisuallySelected(button, selected) {
+    if (selected) {
+        /** Color in blue */
+        button.style.backgroundImage = button.style.backgroundImage
+            .replace("red", "blue")
+            .replace("green", "blue");
+    }
+    else {
+        /** Get back in red or green */
+        const color = buttonIsChosen(button) ? "green" : "red";
+        button.style.backgroundImage = button.style.backgroundImage.replace("blue", color);
+    }
+}
+
 class CarouselComponent {
     constructor() {
         this.currentScan = new EventEmitter();
@@ -1789,6 +1886,7 @@ class AddZoneComponent {
         /** Scan buttons that are in the current selection */
         this.buttonsInSelection = [];
         this.zoneIsMatterportFloor = false;
+        this.multipleFloors = false;
     }
     ngOnInit() {
         this.parentZones = this.zones.filter((zone) => zone.layer && zone.layer.name === "FLOOR");
@@ -1823,6 +1921,8 @@ class AddZoneComponent {
                 this.isMuseumVisit = this.zoneEdit.isMuseumVisitZone
                     ? this.zoneEdit.isMuseumVisitZone
                     : false;
+                this.multipleFloors = this.zoneEdit.isMultipleFloorZone ? this.zoneEdit.isMuseumVisitZone
+                    : false;
                 this.zoneForm = this.fb.group({
                     id: this.zoneEdit.id,
                     name: [this.zoneEdit.name, [Validators.required]],
@@ -1833,9 +1933,10 @@ class AddZoneComponent {
                     newLayer: null,
                     isMuseumVisitZone: this.isMuseumVisit,
                 });
+                this.onChangeMultipleFloors();
             }
             else {
-                const mainZone = this.zones.find((z) => !z.parentID);
+                const mainZone = this.getDefaultZone();
                 this.zoneForm = this.fb.group({
                     name: [
                         this.newZoneData ? this.newZoneData.name : "",
@@ -1861,7 +1962,7 @@ class AddZoneComponent {
             if (!this.zoneForm.valid) {
                 return;
             }
-            const formValue = this.zoneForm.value;
+            const formValue = this.zoneForm.getRawValue(); //because we need values of disables controls as well
             if (formValue.newLayer) {
                 yield this.createLayer(formValue.newLayer).then((layer) => {
                     formValue.layerID = layer.id;
@@ -1878,6 +1979,7 @@ class AddZoneComponent {
                 layerID: formValue.layerID,
                 parentID: formValue.parentID,
                 isMuseumVisitZone: this.isMuseumVisit,
+                isMultipleFloorZone: this.multipleFloors,
                 sweepIDs: [],
             };
             try {
@@ -1888,14 +1990,12 @@ class AddZoneComponent {
                     zoneUpdate.sweepIDs = this.zoneEdit.sweepIDs;
                     zoneUpdate.id = formValue.id;
                     yield this.setSweepsAndNodeForZoneInput(zoneUpdate);
-                    console.log(zoneUpdate);
                     yield this.zoneService.updateZone(zoneUpdate);
                     this.zoneEdit = null;
                     this.updatedZone.emit(zoneUpdate.id);
                 }
                 else {
                     yield this.setSweepsAndNodeForZoneInput(zoneInput);
-                    // console.log(zoneInput);
                     yield this.zoneService
                         .create(zoneInput)
                         .then(zoneCreated => {
@@ -2003,7 +2103,9 @@ class AddZoneComponent {
     }
     onPlanClick(plan = this.chosenPlan) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.chosenScansOnPlan = [];
+            if (!this.multipleFloors) {
+                this.chosenScansOnPlan = [];
+            }
             this.chosenPlan = plan;
             this.clearDivPlan();
             this.addScanPoints();
@@ -2021,11 +2123,13 @@ class AddZoneComponent {
                 if (this.navIDsZoneEdit.length > 0 &&
                     this.navIDsZoneEdit.includes(element.id) // button id is the navigation(not graph!) ids
                 ) {
-                    this.styleButton(element, true);
-                    this.chosenScansOnPlan.push(element.id);
+                    styleButton(element, true);
+                    if (!this.chosenScansOnPlan.includes(element.id)) {
+                        this.chosenScansOnPlan.push(element.id);
+                    }
                 }
                 else {
-                    this.styleButton(element);
+                    styleButton(element);
                 }
                 element.addEventListener("click", (event) => this.onButtonScanClicked(event.target));
             }
@@ -2044,10 +2148,10 @@ class AddZoneComponent {
      * @param button
      */
     onButtonScanClicked(button) {
-        button.style.backgroundImage = this.buttonIsChosen(button)
+        button.style.backgroundImage = buttonIsChosen(button)
             ? `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`
             : `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`;
-        if (this.buttonIsChosen(button)) {
+        if (buttonIsChosen(button)) {
             if (!this.chosenScansOnPlan.includes(button.id)) {
                 this.chosenScansOnPlan.push(button.id);
             }
@@ -2057,21 +2161,6 @@ class AddZoneComponent {
             this.chosenScansOnPlan.splice(index, 1);
         }
     }
-    styleButton(button, isAdded = false) {
-        button.style.backgroundImage = isAdded
-            ? `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`
-            : `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`;
-        button.style.backgroundColor = "transparent";
-        button.style.position = "absolute";
-        button.style.border = "none";
-        button.style.width = "17px";
-        button.style.height = "17px";
-        button.disabled = false;
-        button.type = "button";
-    }
-    buttonIsChosen(button) {
-        return button.style.backgroundImage.includes("adjust");
-    }
     clearDivPlan() {
         if (this.divPlan)
             this.divPlan.innerHTML = "";
@@ -2082,6 +2171,7 @@ class AddZoneComponent {
             this.onPlanClick();
         }, 500);
     }
+    /** Function if we are coming for svg editor workflow */
     setScanByDraw(navigations) {
         return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
             const rect = {
@@ -2117,7 +2207,7 @@ class AddZoneComponent {
                 let navX = (calibrage.offsetX + position.x * calibrage.x) / coeffX;
                 let navY = (calibrage.offsetY + position.z * calibrage.y) / coeffY;
                 if (element.angle) {
-                    const rotatePos = this.rotate({ x: navX, y: navY }, { x: element.cx, y: element.cy }, element.angle);
+                    const rotatePos = rotate({ x: navX, y: navY }, { x: element.cx, y: element.cy }, element.angle);
                     navX = rotatePos.x;
                     navY = rotatePos.y;
                 }
@@ -2142,7 +2232,7 @@ class AddZoneComponent {
                 let navX = (calibrage.offsetX + position.x * calibrage.x) / coeffX;
                 let navY = (calibrage.offsetY + position.z * calibrage.y) / coeffY;
                 if (element.angle) {
-                    const rotatePos = this.rotate({ x: navX, y: navY }, { x: element.cx, y: element.cy }, element.angle);
+                    const rotatePos = rotate({ x: navX, y: navY }, { x: element.cx, y: element.cy }, element.angle);
                     navX = rotatePos.x;
                     navY = rotatePos.y;
                 }
@@ -2171,70 +2261,13 @@ class AddZoneComponent {
                 //         element.angle,
                 //     );
                 // }
-                if ((yield this.isInPolygon(p, element.segList)) &&
+                if (isInPolygon(p, element.segList) &&
                     !this.navIDsZoneEdit.includes(navigation.id)) {
                     this.navIDsZoneEdit.push(navigation.id);
                 }
             }));
         });
     }
-    isInPolygon(p, polygon) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve) => {
-                let isInside = false;
-                let minX = polygon[0].x;
-                let maxX = polygon[0].x;
-                let minY = polygon[0].y;
-                let maxY = polygon[0].y;
-                for (let n = 1; n < polygon.length; n++) {
-                    const q = polygon[n];
-                    minX = Math.min(q.x, minX);
-                    maxX = Math.max(q.x, maxX);
-                    minY = Math.min(q.y, minY);
-                    maxY = Math.max(q.y, maxY);
-                }
-                if (p.x < minX || p.x > maxX || p.y < minY || p.y > maxY) {
-                    resolve(false);
-                }
-                for (let index = 0, index_ = polygon.length - 1; index < polygon.length; index_ = index++) {
-                    if (polygon[index].y > p.y !== polygon[index_].y > p.y &&
-                        p.x <
-                            ((polygon[index_].x - polygon[index].x) *
-                                (p.y - polygon[index].y)) /
-                                (polygon[index_].y - polygon[index].y) +
-                                polygon[index].x) {
-                        isInside = !isInside;
-                    }
-                }
-                resolve(isInside);
-            });
-        });
-    }
-    rotate(point, center, angle) {
-        let xM;
-        let yM;
-        let x;
-        let y;
-        angle *= Math.PI / 180;
-        xM = point.x - center.x;
-        yM = point.y - center.y;
-        x = xM * Math.cos(angle) + yM * Math.sin(angle) + center.x;
-        y = -xM * Math.sin(angle) + yM * Math.cos(angle) + center.y;
-        return { x: Math.round(x), y: Math.round(y) };
-    }
-    /**
-     * Check if an HtmlElement is inside a selection
-     * @param button HTMLElement
-     * @param selection
-     * @returns true if the element is inside the selection, false otherwise
-     */
-    buttonIsInSelection(button, selection) {
-        const bounds = button.getBoundingClientRect();
-        return (bounds.bottom > selection.top &&
-            bounds.top < selection.top + selection.height &&
-            bounds.right > selection.left &&
-            bounds.left < selection.left + selection.width);
-    }
     /**
      * Trigger each by the selectionComponent when selection change
      * Update the current selected scan buttons
@@ -2245,7 +2278,7 @@ class AddZoneComponent {
         const newSelectedButtons = [];
         /** For each button, decide whether will be add to selected list or unselected list */
         for (const button of this.buttonElements) {
-            const isSelected = this.buttonIsInSelection(button, selection);
+            const isSelected = buttonIsInSelection(button, selection);
             if (this.buttonsInSelection.includes(button)) {
                 /** If the button is already in the selected list, we check if it should be unselect */
                 if (!isSelected) {
@@ -2258,11 +2291,11 @@ class AddZoneComponent {
         }
         /** Visually Update unselected list */
         for (const button of unselectedButtons) {
-            this.setVisuallySelected(button, false);
+            setVisuallySelected(button, false);
         }
         /** Visually Update selected list */
         for (const button of newSelectedButtons) {
-            this.setVisuallySelected(button, true);
+            setVisuallySelected(button, true);
         }
         /** Remove  unselected list */
         this.buttonsInSelection = this.buttonsInSelection.filter((button) => {
@@ -2274,24 +2307,6 @@ class AddZoneComponent {
             ...newSelectedButtons,
         ];
     }
-    /**
-     * Visually change the state of a scan button, a selected button is blue
-     * @param button
-     * @param selected if true the button will be blue, otherwise it will red or green
-     */
-    setVisuallySelected(button, selected) {
-        if (selected) {
-            /** Color in blue */
-            button.style.backgroundImage = button.style.backgroundImage
-                .replace("red", "blue")
-                .replace("green", "blue");
-        }
-        else {
-            /** Get back in red or green */
-            const color = this.buttonIsChosen(button) ? "green" : "red";
-            button.style.backgroundImage = button.style.backgroundImage.replace("blue", color);
-        }
-    }
     /**
      * Trigger when the user click to add the selected scans
      */
@@ -2320,7 +2335,7 @@ class AddZoneComponent {
     onSelectAll() {
         this.buttonsInSelection = [...this.buttonElements];
         for (const button of this.buttonsInSelection) {
-            this.setVisuallySelected(button, true);
+            setVisuallySelected(button, true);
         }
     }
     /**
@@ -2337,18 +2352,38 @@ class AddZoneComponent {
      * Adds all sweeps of the space
      */
     onAddAll() {
-        const defaultZone = this.zones.find((zone) => zone.layer && zone.layer.name === "BUILDING" && zone.sweepIDs);
+        const defaultZone = this.getDefaultZone();
         if (defaultZone) {
             this.chosenScansOnPlan = defaultZone.sweepIDs;
             this.zoneForm.get("parentID").setValue(defaultZone.id);
+            this.zoneForm.get("parentID").disable();
+            this.multipleFloors = true;
+        }
+    }
+    getDefaultZone() {
+        return this.zones.find((zone) => zone.layer && zone.layer.name === "BUILDING" && zone.sweepIDs);
+    }
+    /**
+     * Multiple floors
+     */
+    onChangeMultipleFloors() {
+        if (this.multipleFloors) {
+            const defaultZone = this.getDefaultZone();
+            if (defaultZone) {
+                this.zoneForm.get("parentID").setValue(defaultZone.id);
+                this.zoneForm.get("parentID").disable();
+            }
+        }
+        else {
+            this.zoneForm.get("parentID").enable();
         }
     }
 }
 AddZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddZoneComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.ZoneService }, { token: i2.LayerService }, { token: i2.BaseUserService }, { token: i2.NavigationService }, { token: i2.PlanService }], target: i0.ɵɵFactoryTarget.Component });
-AddZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AddZoneComponent, selector: "lib-add-zone", inputs: { zoneEdit: "zoneEdit", spaceID: "spaceID", images360: "images360", navigationIDs: "navigationIDs", zones: "zones", newZoneData: "newZoneData", chosenPlan: "chosenPlan", isMuseumVisit: "isMuseumVisit", defaultZone: "defaultZone" }, outputs: { updatedZone: "updatedZone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" [class.is-invalid]=\"name.invalid && isSubmitted\" required\r\n                        formControlName=\"name\">\r\n                    <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" [disabled]=\"!plans\"\r\n                        (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 ||images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 ||images360.length === 0\">\r\n                        {{'Add all scans of this space' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div ngbDropdown class=\"row d-inline-block me-3\" *ngIf=\"fromPlan\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                        ngbDropdownToggle>{{chosenPlan ?\r\n                        chosenPlan.name : ('Choose Plan' | translate) }}</button>\r\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                        <button type=\"button\" ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\"\r\n                            [disabled]=\"!plan.calibration\">{{ plan.name }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mt-1\" *ngIf=\"fromPlan\">\r\n                <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\r\n                    <div class=\"selectZone\" oncontextmenu=\"return false;\">\r\n                        <div class=\"row\">\r\n                            <div style=\"overflow: hidden;width:100%;\">\r\n                                <div style=\"height: 400px; width: 100%;\" id=\"planDiv\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </lib-selection>\r\n\r\n                <div class=\"col-md-4 scanTool\" *ngIf=\"buttonElements.length > 0\">\r\n                    <div class=\"row mb-5 d-inline-block\">\r\n                        <h2>Selection tool</h2>\r\n                        <div class=\"protip\">Hold right click and move your cursor to select multiple scans.</div>\r\n                    </div>\r\n\r\n                    <div class=\"row mb-4\">\r\n                        <div class=\"col-3\" style=\"padding:0px\">\r\n                            <label class=\"tool-label\" for=\"scanSize\">Scan size</label>\r\n                        </div>\r\n                        <div class=\"col-9\">\r\n                            <input type=\"range\" class=\"form-range\" min=\"0.001\" max=\"5\" step=\"0.01\" value=\"1\"\r\n                                id=\"scanSize\" (input)=\"onChangeScanSize($event)\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"row mb-4\">\r\n                        <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSelectAll()\">Select all scans</button>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"buttonsInSelection.length > 0\" class=\"row editSelected\">\r\n                        <span class=\"tool-label\">Edit selected scans : </span>\r\n                        <button type=\"button\" class=\"btn btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">Add</button>\r\n                        <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSelectionRemove()\">Remove</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</div>", styles: [".form-range{width:100%}.scanTool{padding-left:50px;padding-right:50px}h2{color:var(--smarterplan-primary)}.protip{color:gray}.tool-label{font-size:1.3rem}.selectZone{background-color:gray;border-radius:1rem;overflow:hidden}.col-form-label{margin-bottom:1rem}.btn-outline-primary{min-width:200px;margin-bottom:1rem;margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}\n"], components: [{ type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }, { type: SelectionComponent, selector: "lib-selection", outputs: ["onSelectionChanged"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe, "slice": i5.SlicePipe } });
+AddZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AddZoneComponent, selector: "lib-add-zone", inputs: { zoneEdit: "zoneEdit", spaceID: "spaceID", images360: "images360", navigationIDs: "navigationIDs", zones: "zones", newZoneData: "newZoneData", chosenPlan: "chosenPlan", isMuseumVisit: "isMuseumVisit", defaultZone: "defaultZone" }, outputs: { updatedZone: "updatedZone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\" \r\n                    (change)=\"onChangeMultipleFloors()\" [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" [disabled]=\"!plans\"\r\n                        (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 ||images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 ||images360.length === 0\">\r\n                        {{'Add all scans of this space' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div ngbDropdown class=\"row d-inline-block me-3\" *ngIf=\"fromPlan\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                        ngbDropdownToggle>{{chosenPlan ?\r\n                        chosenPlan.name : ('Choose Plan' | translate) }}</button>\r\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                        <button type=\"button\" ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\"\r\n                            [disabled]=\"!plan.calibration\">{{ plan.name }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            \r\n\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\r\n            <div class=\"selectZone\" oncontextmenu=\"return false;\">\r\n                <div class=\"row\">\r\n                    <div style=\"overflow: hidden;width:100%;\">\r\n                        <div style=\"height: 400px; width: 100%;\" id=\"planDiv\">\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </lib-selection>\r\n\r\n        <div class=\"col-md-4 scanTool\" *ngIf=\"buttonElements.length > 0\">\r\n            <div class=\"row mb-4 d-inline-block\">\r\n                <h2>{{'selectTool.title' | translate}}</h2>\r\n                <div class=\"protip\">{{'selectTool.tip' | translate}}.</div>\r\n            </div>\r\n\r\n            <div class=\"row mb-4\">\r\n                <div class=\"col-3\" style=\"padding:0px\">\r\n                    <label class=\"tool-label\" for=\"scanSize\">{{'selectTool.size' | translate}}</label>\r\n                </div>\r\n                <div class=\"col-9\">\r\n                    <input type=\"range\" class=\"form-range\" min=\"0.001\" max=\"5\" step=\"0.01\" value=\"1\"\r\n                        id=\"scanSize\" (input)=\"onChangeScanSize($event)\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-4\">\r\n                <button type=\"button\" class=\"btn btn-primary rounded-pill\" (click)=\"onSelectAll()\">{{'selectTool.selectAll' | translate}}</button>\r\n            </div>\r\n\r\n            <div *ngIf=\"buttonsInSelection.length > 0\" class=\"edit-selected\">\r\n                <span class=\"tool-label\">{{'selectTool.edit' | translate}} : </span>\r\n                <div class=\"row\">\r\n                    <button type=\"button\" class=\"btn rounded-pill btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">{{'Add' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-primary rounded-pill\" (click)=\"onSelectionRemove()\">{{'Remove' | translate}}</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}.scanTool{margin:0px 1rem}h2{color:var(--smarterplan-primary);padding:0}.protip{color:gray;padding:0}.tool-label{font-size:1rem}.selectZone{background-color:gray;border-radius:1rem;overflow:hidden}.edit-selected{display:flex;flex-direction:column}.col-form-label{margin-bottom:1rem}.btn-outline-primary{min-width:200px;margin-bottom:1rem;margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}\n"], components: [{ type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }, { type: SelectionComponent, selector: "lib-selection", outputs: ["onSelectionChanged"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe, "slice": i5.SlicePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddZoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-add-zone', template: "<div class=\"row\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" [class.is-invalid]=\"name.invalid && isSubmitted\" required\r\n                        formControlName=\"name\">\r\n                    <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" [disabled]=\"!plans\"\r\n                        (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 ||images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 ||images360.length === 0\">\r\n                        {{'Add all scans of this space' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div ngbDropdown class=\"row d-inline-block me-3\" *ngIf=\"fromPlan\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                        ngbDropdownToggle>{{chosenPlan ?\r\n                        chosenPlan.name : ('Choose Plan' | translate) }}</button>\r\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                        <button type=\"button\" ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\"\r\n                            [disabled]=\"!plan.calibration\">{{ plan.name }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mt-1\" *ngIf=\"fromPlan\">\r\n                <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\r\n                    <div class=\"selectZone\" oncontextmenu=\"return false;\">\r\n                        <div class=\"row\">\r\n                            <div style=\"overflow: hidden;width:100%;\">\r\n                                <div style=\"height: 400px; width: 100%;\" id=\"planDiv\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </lib-selection>\r\n\r\n                <div class=\"col-md-4 scanTool\" *ngIf=\"buttonElements.length > 0\">\r\n                    <div class=\"row mb-5 d-inline-block\">\r\n                        <h2>Selection tool</h2>\r\n                        <div class=\"protip\">Hold right click and move your cursor to select multiple scans.</div>\r\n                    </div>\r\n\r\n                    <div class=\"row mb-4\">\r\n                        <div class=\"col-3\" style=\"padding:0px\">\r\n                            <label class=\"tool-label\" for=\"scanSize\">Scan size</label>\r\n                        </div>\r\n                        <div class=\"col-9\">\r\n                            <input type=\"range\" class=\"form-range\" min=\"0.001\" max=\"5\" step=\"0.01\" value=\"1\"\r\n                                id=\"scanSize\" (input)=\"onChangeScanSize($event)\">\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"row mb-4\">\r\n                        <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSelectAll()\">Select all scans</button>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"buttonsInSelection.length > 0\" class=\"row editSelected\">\r\n                        <span class=\"tool-label\">Edit selected scans : </span>\r\n                        <button type=\"button\" class=\"btn btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">Add</button>\r\n                        <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSelectionRemove()\">Remove</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</div>", styles: [".form-range{width:100%}.scanTool{padding-left:50px;padding-right:50px}h2{color:var(--smarterplan-primary)}.protip{color:gray}.tool-label{font-size:1.3rem}.selectZone{background-color:gray;border-radius:1rem;overflow:hidden}.col-form-label{margin-bottom:1rem}.btn-outline-primary{min-width:200px;margin-bottom:1rem;margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}\n"] }]
+            args: [{ selector: 'lib-add-zone', template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\" \r\n                    (change)=\"onChangeMultipleFloors()\" [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" [disabled]=\"!plans\"\r\n                        (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 ||images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 ||images360.length === 0\">\r\n                        {{'Add all scans of this space' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div ngbDropdown class=\"row d-inline-block me-3\" *ngIf=\"fromPlan\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                        ngbDropdownToggle>{{chosenPlan ?\r\n                        chosenPlan.name : ('Choose Plan' | translate) }}</button>\r\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                        <button type=\"button\" ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\"\r\n                            [disabled]=\"!plan.calibration\">{{ plan.name }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            \r\n\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill me-2\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\r\n            <div class=\"selectZone\" oncontextmenu=\"return false;\">\r\n                <div class=\"row\">\r\n                    <div style=\"overflow: hidden;width:100%;\">\r\n                        <div style=\"height: 400px; width: 100%;\" id=\"planDiv\">\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </lib-selection>\r\n\r\n        <div class=\"col-md-4 scanTool\" *ngIf=\"buttonElements.length > 0\">\r\n            <div class=\"row mb-4 d-inline-block\">\r\n                <h2>{{'selectTool.title' | translate}}</h2>\r\n                <div class=\"protip\">{{'selectTool.tip' | translate}}.</div>\r\n            </div>\r\n\r\n            <div class=\"row mb-4\">\r\n                <div class=\"col-3\" style=\"padding:0px\">\r\n                    <label class=\"tool-label\" for=\"scanSize\">{{'selectTool.size' | translate}}</label>\r\n                </div>\r\n                <div class=\"col-9\">\r\n                    <input type=\"range\" class=\"form-range\" min=\"0.001\" max=\"5\" step=\"0.01\" value=\"1\"\r\n                        id=\"scanSize\" (input)=\"onChangeScanSize($event)\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-4\">\r\n                <button type=\"button\" class=\"btn btn-primary rounded-pill\" (click)=\"onSelectAll()\">{{'selectTool.selectAll' | translate}}</button>\r\n            </div>\r\n\r\n            <div *ngIf=\"buttonsInSelection.length > 0\" class=\"edit-selected\">\r\n                <span class=\"tool-label\">{{'selectTool.edit' | translate}} : </span>\r\n                <div class=\"row\">\r\n                    <button type=\"button\" class=\"btn rounded-pill btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">{{'Add' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-primary rounded-pill\" (click)=\"onSelectionRemove()\">{{'Remove' | translate}}</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}.scanTool{margin:0px 1rem}h2{color:var(--smarterplan-primary);padding:0}.protip{color:gray;padding:0}.tool-label{font-size:1rem}.selectZone{background-color:gray;border-radius:1rem;overflow:hidden}.edit-selected{display:flex;flex-direction:column}.col-form-label{margin-bottom:1rem}.btn-outline-primary{min-width:200px;margin-bottom:1rem;margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i2.ZoneService }, { type: i2.LayerService }, { type: i2.BaseUserService }, { type: i2.NavigationService }, { type: i2.PlanService }]; }, propDecorators: { zoneEdit: [{
                 type: Input
             }], spaceID: [{
@@ -2469,6 +2504,7 @@ class ZonesComponent {
         return __awaiter(this, void 0, void 0, function* () {
             this.lotIndexDetails = index === this.lotIndexDetails ? -1 : index;
             if (this.lotIndexDetails === -1) {
+                this.currentZone = null;
                 return;
             }
             this.currentZone = zone;
@@ -2487,6 +2523,7 @@ class ZonesComponent {
         this.defaultShowing = false;
         this.floorDetails = index === this.floorDetails ? -1 : index;
         if (this.floorDetails === -1) {
+            this.currentZone = null;
             return;
         }
         this.currentZone = floor;
@@ -2542,16 +2579,18 @@ class ZonesComponent {
             label: "New Museum Itinerary",
         });
     }
-    onDelete(zone, floorID) {
+    onDelete(zone) {
         return __awaiter(this, void 0, void 0, function* () {
             const message = this.translate.instant("confirm.deleteZone");
             // eslint-disable-next-line no-alert
             if (window.confirm(message)) {
                 yield this.zoneService.deleteZone(zone.id);
                 this.allZones.splice(this.allZones.indexOf(zone), 1);
-                const floorZones = this.zonesMap.get(floorID);
-                floorZones.splice(floorZones.indexOf(zone), 1);
-                this.zonesMap.set(floorID, floorZones);
+                if (zone.parentID && Array.from(this.zonesMap.keys()).includes(zone.parentID)) {
+                    const zonesForParent = this.zonesMap.get(zone.parentID);
+                    zonesForParent.splice(zonesForParent.indexOf(zone), 1);
+                    this.zonesMap.set(zone.parentID, zonesForParent);
+                }
             }
         });
     }
@@ -2580,10 +2619,10 @@ class ZonesComponent {
     }
 }
 ZonesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ZonesComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.ZoneService }, { token: i2.SpaceService }, { token: i2.VisitService }, { token: i2.NavigationService }, { token: i2.BaseUserService }, { token: i2.PlanService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-ZonesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ZonesComponent, selector: "lib-zones", outputs: { updatedZone: "updatedZone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\">\r\n    <div class=\"m-3\">\r\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"col-md-6\">\r\n        <ul class=\"list-group list-group-flush\" *ngIf=\"!isEditingZone\">\r\n          <li class=\"list-group-item default-zone-line-item\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\" *ngIf=\"defaultZone\">\r\n              {{defaultZone.name}}\r\n              <div class=\"default-zone-label\">{{ \"whole space\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"defaultShowing\" (click)=\"onToggleDefaultZone()\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"defaultShowing\">\r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{currentZone.layer ?\r\n                  currentZone.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"currentZone.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{currentZone.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!currentZone.virtual\">{{'Scan Points' | translate}}:\r\n                  {{currentZone.sweepIDs ? currentZone.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n              </ul>\r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == defaultZone.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">{{'Zone not visible in 3D visit'\r\n                            |\r\n                            translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <!-- <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot, floor.id)\">{{'Delete'\r\n                          | translate}}</button> -->\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n          \r\n          <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n              {{floor.name}}\r\n              <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\r\n              <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"index==floorDetails\" (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"index==floorDetails\">  \r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\r\n                  floor.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{floor.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\r\n                  {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\r\n                  translate}}</li>\r\n              </ul>\r\n              <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\r\n                translate}}</button>\r\n  \r\n              <!-- List of children zones -->\r\n  \r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == floor.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">{{'Zone not visible in 3D visit'\r\n                            |\r\n                            translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot, floor.id)\">{{'Delete'\r\n                          | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n  \r\n        <div *ngIf=\"!isEditingZone\">\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\r\n            translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\"\r\n            *ngIf=\"isGuide || isAdmin\">\r\n            {{'Add museum itinerary' | translate}}</button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-6\" *ngIf=\"!isEditingZone\">\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\r\n          <div class=\"spinner-border\" role=\"status\">\r\n            <span class=\"visually-hidden\">Loading...</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\" style=\"overflow: hidden;\" *ngIf=\"currentZone\">\r\n          <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\" *ngIf=\"currentPlan\"></div>\r\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentPlan && plans && !currentZone.virtual && !loadingPlan\">\r\n            {{ 'Plan is not calibrated' | translate}}\r\n          </div>\r\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone && currentZone.virtual\">\r\n            {{ 'No scan points chosen' | translate}}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isEditingZone\">\r\n      <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\r\n        [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\" [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\r\n    </div>\r\n  </div>\r\n", styles: [".museum-label{background-color:#6f3974;font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}.default-zone-line-item{border-bottom-width:3px}.default-zone-label{background-color:var(--smarterplan-primary);font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }, { type: AddZoneComponent, selector: "lib-add-zone", inputs: ["zoneEdit", "spaceID", "images360", "navigationIDs", "zones", "newZoneData", "chosenPlan", "isMuseumVisit", "defaultZone"], outputs: ["updatedZone"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3.TranslatePipe, "keyvalue": i5.KeyValuePipe } });
+ZonesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ZonesComponent, selector: "lib-zones", outputs: { updatedZone: "updatedZone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\">\r\n    <div class=\"m-3\">\r\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"col-md-6\">\r\n        <ul class=\"list-group list-group-flush\" *ngIf=\"!isEditingZone\">\r\n          <li class=\"list-group-item default-zone-line-item\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\" *ngIf=\"defaultZone\">\r\n              {{defaultZone.name}}\r\n              <div class=\"default-zone-label\">{{ \"whole space\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"defaultShowing\" (click)=\"onToggleDefaultZone()\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"defaultShowing\">\r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{currentZone.layer ?\r\n                  currentZone.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"currentZone.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{currentZone.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!currentZone.virtual\">{{'Scan Points' | translate}}:\r\n                  {{currentZone.sweepIDs ? currentZone.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n              </ul>\r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == defaultZone.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">\r\n                            {{'Surface' | translate}},m<sup>2</sup>: {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\r\n                            {{'Zone not visible in 3D visit' | translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n          \r\n          <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n              {{floor.name}}\r\n              <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\r\n              <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"index==floorDetails\" (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"index==floorDetails\">  \r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\r\n                  floor.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{floor.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\r\n                  {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\r\n                  translate}}</li>\r\n              </ul>\r\n              <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\r\n                translate}}</button>\r\n  \r\n              <!-- List of children zones -->\r\n  \r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == floor.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">{{'Zone not visible in 3D visit'\r\n                            |\r\n                            translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n  \r\n        <div *ngIf=\"!isEditingZone\">\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\r\n            translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\"\r\n            *ngIf=\"isGuide || isAdmin\">\r\n            {{'Add museum itinerary' | translate}}</button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-6\" *ngIf=\"!isEditingZone\">\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\r\n          <div class=\"spinner-border\" role=\"status\">\r\n            <span class=\"visually-hidden\">Loading...</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\" style=\"overflow: hidden;\" *ngIf=\"currentZone\">\r\n          <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\" *ngIf=\"currentPlan\"></div>\r\n          <div *ngIf=\"!currentPlan && plans && !loadingPlan\">\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentZone.virtual && !currentZone.isMultipleFloorZone\">\r\n              {{ 'Plan is not calibrated' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.virtual\">\r\n              {{ 'No scan points chosen' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.isMultipleFloorZone\">\r\n              {{ 'The zone is on several floors' | translate}}\r\n            </div>\r\n          </div>\r\n          \r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isEditingZone\">\r\n      <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\r\n        [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\" [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\r\n    </div>\r\n  </div>\r\n", styles: [".museum-label{background-color:#6f3974;font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}.default-zone-line-item{border-bottom-width:3px}.default-zone-label{background-color:var(--smarterplan-primary);font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}\n"], components: [{ type: TabNavigationComponent, selector: "lib-tab-navigation", inputs: ["menuItems"], outputs: ["onGoBack"] }, { type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }, { type: AddZoneComponent, selector: "lib-add-zone", inputs: ["zoneEdit", "spaceID", "images360", "navigationIDs", "zones", "newZoneData", "chosenPlan", "isMuseumVisit", "defaultZone"], outputs: ["updatedZone"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3.TranslatePipe, "keyvalue": i5.KeyValuePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ZonesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-zones', template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\">\r\n    <div class=\"m-3\">\r\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"col-md-6\">\r\n        <ul class=\"list-group list-group-flush\" *ngIf=\"!isEditingZone\">\r\n          <li class=\"list-group-item default-zone-line-item\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\" *ngIf=\"defaultZone\">\r\n              {{defaultZone.name}}\r\n              <div class=\"default-zone-label\">{{ \"whole space\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"defaultShowing\" (click)=\"onToggleDefaultZone()\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"defaultShowing\">\r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{currentZone.layer ?\r\n                  currentZone.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"currentZone.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{currentZone.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!currentZone.virtual\">{{'Scan Points' | translate}}:\r\n                  {{currentZone.sweepIDs ? currentZone.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n              </ul>\r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == defaultZone.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">{{'Zone not visible in 3D visit'\r\n                            |\r\n                            translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <!-- <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot, floor.id)\">{{'Delete'\r\n                          | translate}}</button> -->\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n          \r\n          <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n              {{floor.name}}\r\n              <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\r\n              <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"index==floorDetails\" (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"index==floorDetails\">  \r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\r\n                  floor.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{floor.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\r\n                  {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\r\n                  translate}}</li>\r\n              </ul>\r\n              <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\r\n                translate}}</button>\r\n  \r\n              <!-- List of children zones -->\r\n  \r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == floor.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">{{'Zone not visible in 3D visit'\r\n                            |\r\n                            translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot, floor.id)\">{{'Delete'\r\n                          | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n  \r\n        <div *ngIf=\"!isEditingZone\">\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\r\n            translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\"\r\n            *ngIf=\"isGuide || isAdmin\">\r\n            {{'Add museum itinerary' | translate}}</button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-6\" *ngIf=\"!isEditingZone\">\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\r\n          <div class=\"spinner-border\" role=\"status\">\r\n            <span class=\"visually-hidden\">Loading...</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\" style=\"overflow: hidden;\" *ngIf=\"currentZone\">\r\n          <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\" *ngIf=\"currentPlan\"></div>\r\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentPlan && plans && !currentZone.virtual && !loadingPlan\">\r\n            {{ 'Plan is not calibrated' | translate}}\r\n          </div>\r\n          <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone && currentZone.virtual\">\r\n            {{ 'No scan points chosen' | translate}}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isEditingZone\">\r\n      <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\r\n        [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\" [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\r\n    </div>\r\n  </div>\r\n", styles: [".museum-label{background-color:#6f3974;font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}.default-zone-line-item{border-bottom-width:3px}.default-zone-label{background-color:var(--smarterplan-primary);font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}\n"] }]
+            args: [{ selector: 'lib-zones', template: "<div class=\"container-fluid\" *ngIf=\"currentSpace\">\r\n    <div class=\"m-3\">\r\n      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)=\"onGoBack()\"></lib-tab-navigation>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"col-md-6\">\r\n        <ul class=\"list-group list-group-flush\" *ngIf=\"!isEditingZone\">\r\n          <li class=\"list-group-item default-zone-line-item\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\" *ngIf=\"defaultZone\">\r\n              {{defaultZone.name}}\r\n              <div class=\"default-zone-label\">{{ \"whole space\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"defaultShowing\" (click)=\"onToggleDefaultZone()\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"defaultShowing\">\r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{currentZone.layer ?\r\n                  currentZone.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"currentZone.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{currentZone.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!currentZone.virtual\">{{'Scan Points' | translate}}:\r\n                  {{currentZone.sweepIDs ? currentZone.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n              </ul>\r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == defaultZone.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">\r\n                            {{'Surface' | translate}},m<sup>2</sup>: {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">\r\n                            {{'Zone not visible in 3D visit' | translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n          \r\n          <li class=\"list-group-item\" *ngFor=\"let floor of floorZones; index as index\">\r\n            <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n              {{floor.name}}\r\n              <!-- <small>({{ lot.metadata ? ('Calibrated' | translate) : ('Not calibrated' | translate)}})</small> -->\r\n              <div class=\"museum-label\" *ngIf=\"floor.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n              <lib-chevron [conditionShowing]=\"index==floorDetails\" (click)=\"onToggleDetailFloor(index, floor)\"></lib-chevron>\r\n            </div>\r\n            <div *ngIf=\"index==floorDetails\">  \r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent\">{{'Type of zone' | translate}}: {{floor.layer ?\r\n                  floor.layer.name :\r\n                  \"No type\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.surface\">{{'Surface' | translate}}, m<sup>2</sup>:\r\n                  {{floor.surface }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"!floor.virtual\">{{'Scan Points' | translate}}:\r\n                  {{floor.sweepIDs ? floor.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                <li class=\"list-group-item bg-transparent\" *ngIf=\"floor.virtual\">{{'Zone not visible in 3D visit' |\r\n                  translate}}</li>\r\n              </ul>\r\n              <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onEdit(floor)\">{{'Edit' |\r\n                translate}}</button>\r\n  \r\n              <!-- List of children zones -->\r\n  \r\n              <div *ngFor=\"let pair of zonesMap | keyvalue\">\r\n                <div *ngIf=\"pair.key == floor.id\">\r\n                  <h5 style=\"margin: 8px;\" *ngIf=\"pair.value.length > 0\">{{'Children zones'|translate}}</h5>\r\n                  <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item list-group-flush list-group-item-action\"\r\n                      *ngFor=\"let lot of pair.value; index as zoneIndex\">\r\n                      <div class=\"d-flex justify-content-between align-items-center zone-name\">\r\n                        {{lot.name}}\r\n                        <div class=\"museum-label\" *ngIf=\"lot.isMuseumVisitZone\">{{ \"itinerary\" | translate }}</div>\r\n                        <lib-chevron [conditionShowing]=\"zoneIndex==lotIndexDetails\" (click)=\"onToggleDetail(zoneIndex, lot)\"></lib-chevron>\r\n                        \r\n                      </div>\r\n                      <div *ngIf=\"zoneIndex==lotIndexDetails\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.isMuseumVisitZone\">{{'Type of zone' |\r\n                            translate}}: {{lot.layer ? lot.layer.name :\r\n                            \"No type\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.surface\">{{'Surface' | translate}},\r\n                            m<sup>2</sup>:\r\n                            {{lot.surface }}\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"!lot.virtual\">{{'Scan Points' | translate}}:\r\n                            {{lot.sweepIDs ? lot.sweepIDs.length : \"No scan points\" | translate}} </li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"lot.virtual\">{{'Zone not visible in 3D visit'\r\n                            |\r\n                            translate}}</li>\r\n                        </ul>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\"\r\n                          (click)=\"onEdit(lot)\">{{'Edit' |\r\n                          translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\"\r\n                          (click)=\"onDelete(lot)\">{{'Delete' | translate}}</button>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n  \r\n        <div *ngIf=\"!isEditingZone\">\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddLot()\">{{'Add zone' |\r\n            translate}}</button>\r\n          <button class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddMuseumZone()\"\r\n            *ngIf=\"isGuide || isAdmin\">\r\n            {{'Add museum itinerary' | translate}}</button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-6\" *ngIf=\"!isEditingZone\">\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"loadingPlan\">\r\n          <div class=\"spinner-border\" role=\"status\">\r\n            <span class=\"visually-hidden\">Loading...</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\" style=\"overflow: hidden;\" *ngIf=\"currentZone\">\r\n          <div class=\"mt-3 ms-3\" style=\"height: 500px; width: 100%;\" id=\"planDiv\" *ngIf=\"currentPlan\"></div>\r\n          <div *ngIf=\"!currentPlan && plans && !loadingPlan\">\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"!currentZone.virtual && !currentZone.isMultipleFloorZone\">\r\n              {{ 'Plan is not calibrated' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.virtual\">\r\n              {{ 'No scan points chosen' | translate}}\r\n            </div>\r\n            <div class=\"mt-3 ms-3\" id=\"no-plan\" *ngIf=\"currentZone.isMultipleFloorZone\">\r\n              {{ 'The zone is on several floors' | translate}}\r\n            </div>\r\n          </div>\r\n          \r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\" *ngIf=\"isEditingZone\">\r\n      <lib-add-zone [zoneEdit]=\"zoneForEdit\" [spaceID]=\"spaceID\" [images360]=\"images360\" [navigationIDs]=\"navigations\"\r\n        [zones]=\"allZones\" [defaultZone]=\"defaultZone\" (updatedZone)=\"editCompleted($event)\" [isMuseumVisit]=\"isMuseumVisit\"></lib-add-zone>\r\n    </div>\r\n  </div>\r\n", styles: [".museum-label{background-color:#6f3974;font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}.default-zone-line-item{border-bottom-width:3px}.default-zone-label{background-color:var(--smarterplan-primary);font-size:.95rem;border-radius:10px;padding:5px 10px;color:#fff;text-transform:uppercase;margin-left:auto;margin-right:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.ZoneService }, { type: i2.SpaceService }, { type: i2.VisitService }, { type: i2.NavigationService }, { type: i2.BaseUserService }, { type: i2.PlanService }, { type: i3.TranslateService }]; }, propDecorators: { updatedZone: [{
                 type: Output
             }] } });