@colijnit/homedecorator 262.1.3 → 262.1.4

package/fesm2022/colijnit-homedecorator.mjs

@@ -98,7 +98,7 @@ import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3$1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import * as i3$2 from '@angular/material/icon';
+import * as i5 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import Delaunator from 'delaunator';
 import { VertexNormalsHelper } from 'three/examples/jsm/helpers/VertexNormalsHelper.js';
@@ -106,7 +106,7 @@ import { FileUtils as FileUtils$1 } from '@colijnit/mainapi/build/utils/file-uti
 import { trigger, state, style, transition, animate, query, animateChild } from '@angular/animations';
 import * as i2$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i5 from '@colijnit/corecomponents_v12';
+import * as i5$1 from '@colijnit/corecomponents_v12';
 import { LoaderModule as LoaderModule$1, IconModule, TooltipDirectiveModule, ListOfValuesModule, ButtonModule, InputTextModule, ImageModule, CoreComponentsTranslationModule } from '@colijnit/corecomponents_v12';
 import * as i2$3 from '@angular/material/input';
 import { MatInputModule, MatFormField } from '@angular/material/input';
@@ -116,7 +116,7 @@ import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$4 from 'ngx-color/sketch';
 import { ColorSketchModule } from 'ngx-color/sketch';
-import * as i3$3 from '@angular/material/slider';
+import * as i3$2 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 import * as dat from 'dat.gui';
 import * as i14 from '@angular/flex-layout/flex';
@@ -135,7 +135,7 @@ import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
 import * as i10$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule, MatSlideToggle } from '@angular/material/slide-toggle';
 import * as i7$1 from '@angular/flex-layout/extended';
-import * as i3$4 from '@angular/material/grid-list';
+import * as i3$3 from '@angular/material/grid-list';
 import { MatGridListModule } from '@angular/material/grid-list';
 import imageCompression from 'browser-image-compression';
 import * as i4$1 from '@angular/material/tabs';
@@ -146,7 +146,7 @@ import { jsPDF } from 'jspdf';
 import autoTable from 'jspdf-autotable';
 import * as i2$5 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i3$5 from '@angular/router';
+import * as i3$4 from '@angular/router';
 import * as i27 from '@colijnit/configurator';
 import { ConfigurationResultObject, ProductConfiguratorModule, ConfiguratorModule, LiteSelectorModule } from '@colijnit/configurator';
 import * as i31$1 from '@angular/cdk/portal';
@@ -3448,6 +3448,8 @@ const roomColor = '#ffecc147'; // '#f9f9f9';
 const selectedRoomColor = '#f9f9f9'; // same as roomColor for now
 const roomPolygonOffset = -0.3; // negative is offset to the inside
 const cornerTolerance = 0.2;
+// two walls count as collinear when the angle at the shared corner is within this margin of 180°
+const collinearAngleTolerance = Math.PI / 180; // ~1 degree
 const defaultWallColor = 0xffffff;
 const defaultEdgeColor = 0xcccccc;
 // wall config
@@ -15359,14 +15361,50 @@ class WallService {
         if (!wall || !corner) {
             return;
         }
-        this.createNewWall(corner, wall.getEnd(), wall.height, wall.thickness);
+        // Capture items + world position before the split: afterwards they must be
+        // distributed across the correct wall segment (otherwise they all stay on the
+        // shortened wall and shift along as its center moves).
+        const itemWorldPositions = [];
+        [...wall.items, ...wall.onItems].forEach((item) => {
+            if (item instanceof WallItem) {
+                const worldPosition = new Vector3();
+                item.getWorldPosition(worldPosition);
+                itemWorldPositions.push({ item, x: worldPosition.x, z: worldPosition.z });
+            }
+        });
+        const newWall = this.createNewWall(corner, wall.getEnd(), wall.height, wall.thickness);
         const prevCorner = wall.getEnd();
         wall.setEnd(corner);
+        // setEnd only swaps the corner reference; rebuild the 3D geometry of the shortened wall
+        wall.cornerMoved();
         corner.removeDuplicateWalls();
         prevCorner.removeDuplicateWalls();
+        // Re-place each item on the wall segment it falls on, at its original world position.
+        itemWorldPositions.forEach(({ item, x, z }) => {
+            const candidates = [wall, newWall].filter((w) => this.walls.indexOf(w) !== -1);
+            if (candidates.length === 0) {
+                return;
+            }
+            const target = candidates.length === 1 ? candidates[0] : this._closestWallForPoint(candidates, x, z);
+            item.moveTo2dPosition(x, z, target);
+        });
         this._updatePrevAndNextWalls();
         this._prepareOrphanWalls();
     }
+    /** Picks the wall whose closest point (clamped to the segment) is nearest to (x, z). */
+    _closestWallForPoint(walls, x, z) {
+        let best = walls[0];
+        let bestDistance = Number.POSITIVE_INFINITY;
+        walls.forEach((w) => {
+            const closest = w.closestPointTo(x, z);
+            const distance = Utils$1.Distance(x, z, closest.x, closest.y);
+            if (distance < bestDistance) {
+                bestDistance = distance;
+                best = w;
+            }
+        });
+        return best;
+    }
     updatePrevWall(wallId, prevWallId) {
         if (wallId && prevWallId) {
             const wall = this.walls.find(w => w.wallId === wallId);
@@ -15448,6 +15486,56 @@ class WallService {
         Utils$1.RemoveValue(this.walls, wall);
         wall.removeWall();
     }
+    /** Merges two collinear walls around a degree-2 corner into a single wall. */
+    joinCollinearWallsAt(corner) {
+        const attached = [...corner.wallStarts, ...corner.wallEnds];
+        if (attached.length !== 2) {
+            return;
+        }
+        const keep = attached[0];
+        const absorb = attached[1];
+        const farKeep = keep.getStart() === corner ? keep.getEnd() : keep.getStart();
+        const farAbsorb = absorb.getStart() === corner ? absorb.getEnd() : absorb.getStart();
+        if (farKeep === farAbsorb) {
+            return; // safety: degenerate case
+        }
+        if (!this._areCollinearThroughCorner(farKeep, corner, farAbsorb)) {
+            return; // not in line with each other -> leave as is
+        }
+        // Capture the world position of all items on BOTH walls before the structural change.
+        // Items already on 'keep' must be re-placed too: extending 'keep' shifts its center, so
+        // their (fixed) local position would otherwise map to a different world position.
+        const itemWorldPositions = [];
+        [...keep.items, ...keep.onItems, ...absorb.items, ...absorb.onItems].forEach((item) => {
+            if (item instanceof WallItem) {
+                const worldPosition = new Vector3();
+                item.getWorldPosition(worldPosition);
+                itemWorldPositions.push({ item, x: worldPosition.x, z: worldPosition.z });
+            }
+        });
+        // extend 'keep' so it spans from farKeep to farAbsorb
+        if (keep.getEnd() === corner) {
+            keep.setEnd(farAbsorb);
+        }
+        else {
+            keep.setStart(farAbsorb);
+        }
+        // setStart/setEnd only swaps the corner reference; rebuild the 3D geometry and
+        // transform for the new span (otherwise the old mesh stays in place).
+        keep.cornerMoved();
+        // Re-place each item on the merged wall at its original world position.
+        // moveTo2dPosition sets currentWall to 'keep', detaches the item from 'absorb' and
+        // bounds the position within the wall (doors/windows get their opening re-cut).
+        itemWorldPositions.forEach(({ item, x, z }) => item.moveTo2dPosition(x, z, keep));
+        this.removeWall(absorb); // also detaches from corner -> corner becomes orphan
+        this._updatePrevAndNextWalls();
+        this._prepareOrphanWalls();
+    }
+    /** True when the two walls are in line through 'corner' (angle ~180°). */
+    _areCollinearThroughCorner(a, corner, b) {
+        const angle = Utils$1.Angle(a.x - corner.x, a.y - corner.y, b.x - corner.x, b.y - corner.y);
+        return Math.abs(Math.abs(angle) - Math.PI) < collinearAngleTolerance;
+    }
     updateWallHeights(newHeight) {
         this.walls.forEach(wall => {
             wall.height = newHeight / 100;
@@ -18284,6 +18372,15 @@ class ItemService {
     }
     // todo: fix the any
     addItem(obj, addToScene = true) {
+        // Wall-only custom shapes/cylinders live exclusively on their wall (wall.onItems) and are added to
+        // the scene graph by placeOnWall() via Wall.addOnItem(). They must NOT also be tracked here: keeping
+        // them in `items` double-lists them on save (getFurniture/getNonFurniture read items + wall.onItems)
+        // and the scene.add() below would re-parent them off the wall, breaking their world position. They
+        // are disposed together with their wall and surfaced for save/selection through wall.onItems.
+        // (Detected via itemType rather than instanceof to avoid an item.service <-> wall-item-class import cycle.)
+        if (obj && obj.metadata && (isCustomShapeWallType(obj.metadata.itemType) || isCustomCylinderWallType(obj.metadata.itemType))) {
+            return;
+        }
         this.items.push(obj);
         if (addToScene) {
             this._sceneService.addObject(obj);
@@ -18317,7 +18414,7 @@ class ItemService {
     getFurniture() {
         const allItems = this.items.concat(...this.items.map(i => {
             if (i instanceof Wall) {
-                return i.items.filter(wi => !wi.configurable).concat(i.onItems.filter(woi => !woi.configurable));
+                return i.items.concat(i.onItems);
             }
         })).filter(i => i !== undefined);
         return allItems
@@ -19705,7 +19802,11 @@ class BluePrintFloorplanService extends BaseBluePrintService {
         return this.wallService.createWall(start, end, height, thickness);
     }
     removeWall(wall) {
+        const corner1 = wall.getStart();
+        const corner2 = wall.getEnd();
         this.roomService.removeWall(wall);
+        this.wallService.joinCollinearWallsAt(corner1);
+        this.wallService.joinCollinearWallsAt(corner2);
         this.cornerService.removeOrphanCorners();
         this.update();
     }
@@ -26968,7 +27069,7 @@ class DialogComponent {
           <button mat-raised-button color="primary" (click)="onConfirm()">{{ 'YES' | localize }}</button>
         </div>
       }
-      `, isInline: true, styles: [":host .title-wrapper{display:flex;flex-direction:row;align-items:center}:host .title-wrapper .mat-icon{margin-right:10px}:host .dialog-content{max-height:400px;overflow:auto}:host.info ::ng-deep .error-message:before{content:\"\"}\n"], dependencies: [{ kind: "component", type: ErrorMessageComponent, selector: "error-messages", inputs: ["messages"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+      `, isInline: true, styles: [":host .title-wrapper{display:flex;flex-direction:row;align-items:center}:host .title-wrapper .mat-icon{margin-right:10px}:host .dialog-content{max-height:400px;overflow:auto}:host.info ::ng-deep .error-message:before{content:\"\"}\n"], dependencies: [{ kind: "component", type: ErrorMessageComponent, selector: "error-messages", inputs: ["messages"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
@@ -28352,7 +28453,7 @@ class UploadImageComponent {
         Upload Image
       </button>
     </div>
-  `, isInline: true, styles: [":host .file-select-button{display:inline-block;margin:8px;width:335px}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+  `, isInline: true, styles: [":host .file-select-button{display:inline-block;margin:8px;width:335px}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UploadImageComponent, decorators: [{
             type: Component,
@@ -30510,9 +30611,9 @@ class FloorplanRenderService {
         }
         this._clear();
         this._drawGrid();
-        // if (this.diagramBackground && this.showDiagramBackground) {
-        //   this._drawBackground();
-        // }
+        if (this.diagramBackground && this.showDiagramBackground) {
+            this._drawBackground();
+        }
         this._drawRooms();
         this._drawWallsWithNoRoom();
         if (this._state.showWallItemMeasurements && this._state.activeItem) {
@@ -30552,6 +30653,24 @@ class FloorplanRenderService {
             ContextUtils.DrawLine(context, 0, gridSpacing * y + offsetY, canvas.width, gridSpacing * y + offsetY, gridWidth, gridColor);
         }
     }
+    _drawBackground() {
+        const context = this._state.context;
+        if (this.diagramBackgroundActiveZoom) {
+            if (this.diagramBackgroundCurrentScale <= this._coordinatesService.viewScale) {
+                this.diagramBackgroundWidth = this.diagramBackgroundWidth * this._coordinatesService.scalingFactor;
+                this.diagramBackgroundHeight = this.diagramBackgroundHeight * this._coordinatesService.scalingFactor;
+            }
+            else {
+                this.diagramBackgroundWidth = this.diagramBackgroundWidth * (1 / this._coordinatesService.scalingFactor);
+                this.diagramBackgroundHeight = this.diagramBackgroundHeight * (1 / this._coordinatesService.scalingFactor);
+            }
+            this.diagramBackgroundActiveZoom = false;
+        }
+        this.diagramBackgroundCurrentScale = this._coordinatesService.viewScale;
+        context.globalAlpha = this.diagramBackgroundAlpha;
+        context.drawImage(this.diagramBackground, Math.abs(this._coordinatesService.originX) - (this.diagramBackgroundWidth * this.diagramBackgroundScale / 2), Math.abs(this._coordinatesService.originY) - (this.diagramBackgroundHeight * this.diagramBackgroundScale / 2), this.diagramBackgroundWidth * this.diagramBackgroundScale, this.diagramBackgroundHeight * this.diagramBackgroundScale);
+        context.globalAlpha = 1;
+    }
     _drawRooms() {
         const rooms = this._state.rooms;
         rooms.forEach(room => {
@@ -31423,7 +31542,7 @@ class HdLoaderComponent {
         this.show = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HdLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: HdLoaderComponent, isStandalone: false, selector: "rp-loader", inputs: { show: "show" }, host: { properties: { "class.show": "this.show" } }, ngImport: i0, template: "<div class=\"loader-wrapper\">\r\n  <co-loader></co-loader>\r\n</div>\r\n", styles: [":host{-webkit-user-select:none;user-select:none;pointer-events:none}:host .loader-wrapper{z-index:1100;display:none;align-items:center;justify-content:center;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:100px;height:100px}:host .loader-wrapper svg{width:100%;height:100%}:host .loader-wrapper svg .ripple1{transform-origin:center;animation:ripple 1.5s infinite}:host .loader-wrapper svg .ripple2{transform-origin:center;animation:ripple 1.5s infinite .4s}:host.show .loader-wrapper{display:flex}@keyframes ripple{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:0}}\n"], dependencies: [{ kind: "component", type: i5.LoaderComponent, selector: "co-loader" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: HdLoaderComponent, isStandalone: false, selector: "rp-loader", inputs: { show: "show" }, host: { properties: { "class.show": "this.show" } }, ngImport: i0, template: "<div class=\"loader-wrapper\">\r\n  <co-loader></co-loader>\r\n</div>\r\n", styles: [":host{-webkit-user-select:none;user-select:none;pointer-events:none}:host .loader-wrapper{z-index:1100;display:none;align-items:center;justify-content:center;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:100px;height:100px}:host .loader-wrapper svg{width:100%;height:100%}:host .loader-wrapper svg .ripple1{transform-origin:center;animation:ripple 1.5s infinite}:host .loader-wrapper svg .ripple2{transform-origin:center;animation:ripple 1.5s infinite .4s}:host.show .loader-wrapper{display:flex}@keyframes ripple{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:0}}\n"], dependencies: [{ kind: "component", type: i5$1.LoaderComponent, selector: "co-loader" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HdLoaderComponent, decorators: [{
             type: Component,
@@ -32148,7 +32267,7 @@ class SelectedChildMaterialTextureComponent {
         </div>
       }
       <input #inputFile [accept]="'image/*'" (change)="handleFileChange($event)" type="file" hidden/>
-      `, isInline: true, styles: [".map-title-wrapper{display:flex;flex-direction:row;justify-content:space-between;height:30px}.map-title-wrapper .map-title{display:flex;align-items:center;font-size:12px}.map-title-wrapper .map-title img{height:30px;width:30px}.map-title-wrapper .collapse-wrapper{display:flex;flex-direction:row;column-gap:10px}.map-title-wrapper .collapse-wrapper .collapse-handle.expanded{transition:all .2s}.map-title-wrapper .collapse-wrapper .collapse-handle.expanded .collapse-handle-icon{transform:rotate(180deg)}.map-title-wrapper img{height:30px;width:30px}.map-title-wrapper .color-image,.map-title-wrapper .no-image,.map-title-wrapper img{cursor:pointer;display:flex;height:30px;width:30px;border:1px solid;position:relative;border-radius:5px}.map-title-wrapper .no-image:before,.map-title-wrapper .no-image:after,.map-title-wrapper img:before,.map-title-wrapper img:after{content:\"\";position:absolute;width:42px;height:42px}.map-title-wrapper .no-image:after,.map-title-wrapper img:after{border-bottom:1px solid;transform:rotate(135deg);top:8px;left:9px}.map-title-wrapper .no-image:before,.map-title-wrapper img:before{border-top:1px solid;transform:rotate(45deg);top:8px;left:-21px}.map-content{display:grid;grid-template-areas:\"label value\";grid-template-columns:175px 1fr;margin-left:10px;font-size:12px}.map-content .label{grid-area:label;grid-row:auto;display:flex;align-items:center;border-bottom:1px solid #d3d3d3}.map-content .value{grid-area:value;grid-row:auto;display:flex;height:35px;align-items:center;border-bottom:1px solid #d3d3d3}.map-content .value>*{display:flex;flex-basis:auto;flex-grow:1;flex-shrink:1;width:100%}.map-content .no-image,.map-content img{height:50px;width:50px;border:1px solid}.large-image-viewer{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999}.large-image-viewer .large-image-viewer-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-height:100vh;max-width:100vw}.large-image-viewer .large-image-viewer-content img{border:1px solid white}.large-image-viewer .large-image-viewer-content .large-image-viewer-close{cursor:pointer;position:absolute;top:0;right:0;background:#ffffff80}.child-material-color-picker{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000}\n"], dependencies: [{ kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ColorPickerDialogComponent, selector: "color-picker-dialog", inputs: ["color"], outputs: ["colorSelected"] }], animations: [
+      `, isInline: true, styles: [".map-title-wrapper{display:flex;flex-direction:row;justify-content:space-between;height:30px}.map-title-wrapper .map-title{display:flex;align-items:center;font-size:12px}.map-title-wrapper .map-title img{height:30px;width:30px}.map-title-wrapper .collapse-wrapper{display:flex;flex-direction:row;column-gap:10px}.map-title-wrapper .collapse-wrapper .collapse-handle.expanded{transition:all .2s}.map-title-wrapper .collapse-wrapper .collapse-handle.expanded .collapse-handle-icon{transform:rotate(180deg)}.map-title-wrapper img{height:30px;width:30px}.map-title-wrapper .color-image,.map-title-wrapper .no-image,.map-title-wrapper img{cursor:pointer;display:flex;height:30px;width:30px;border:1px solid;position:relative;border-radius:5px}.map-title-wrapper .no-image:before,.map-title-wrapper .no-image:after,.map-title-wrapper img:before,.map-title-wrapper img:after{content:\"\";position:absolute;width:42px;height:42px}.map-title-wrapper .no-image:after,.map-title-wrapper img:after{border-bottom:1px solid;transform:rotate(135deg);top:8px;left:9px}.map-title-wrapper .no-image:before,.map-title-wrapper img:before{border-top:1px solid;transform:rotate(45deg);top:8px;left:-21px}.map-content{display:grid;grid-template-areas:\"label value\";grid-template-columns:175px 1fr;margin-left:10px;font-size:12px}.map-content .label{grid-area:label;grid-row:auto;display:flex;align-items:center;border-bottom:1px solid #d3d3d3}.map-content .value{grid-area:value;grid-row:auto;display:flex;height:35px;align-items:center;border-bottom:1px solid #d3d3d3}.map-content .value>*{display:flex;flex-basis:auto;flex-grow:1;flex-shrink:1;width:100%}.map-content .no-image,.map-content img{height:50px;width:50px;border:1px solid}.large-image-viewer{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999}.large-image-viewer .large-image-viewer-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-height:100vh;max-width:100vw}.large-image-viewer .large-image-viewer-content img{border:1px solid white}.large-image-viewer .large-image-viewer-content .large-image-viewer-close{cursor:pointer;position:absolute;top:0;right:0;background:#ffffff80}.child-material-color-picker{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000}\n"], dependencies: [{ kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ColorPickerDialogComponent, selector: "color-picker-dialog", inputs: ["color"], outputs: ["colorSelected"] }], animations: [
             trigger('showHideMapContent', [
                 state('void', style({ 'height': '0', opacity: 0 })),
                 state('*', style({ 'height': '*', opacity: 1 })),
@@ -32910,7 +33029,7 @@ class SelectedChildMaterialComponent {
           </div>
         </div>
       }
-      `, isInline: true, styles: [".development-selected-child-material-wrapper{font-size:12px;position:fixed;right:0;top:65px;width:400px;height:100%;background:#fff;box-shadow:0 0 4px #01010180;z-index:10}.development-selected-child-material-wrapper .material-map-wrapper{padding:10px;height:calc(100% - 85px);overflow-y:auto;overflow-x:hidden}.development-selected-child-material-wrapper .selected-child-material-content{display:grid;grid-template-areas:\"label value\";grid-template-columns:175px 1fr}.development-selected-child-material-wrapper .title{font-size:14px;font-weight:700;margin-bottom:10px}.development-selected-child-material-wrapper .label{grid-area:label;grid-row:auto;display:flex;align-items:center;height:30px;border-bottom:1px solid #9bb0d0;background-color:#e4edf4}.development-selected-child-material-wrapper .value{grid-area:value;grid-row:auto;display:flex;align-items:center;height:30px;border-bottom:1px solid #9bb0d0;background-color:#e4edf4}\n"], dependencies: [{ kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SelectedChildMaterialTexturesComponent, selector: "selected-child-material-textures", inputs: ["material"], outputs: ["mapChange"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+      `, isInline: true, styles: [".development-selected-child-material-wrapper{font-size:12px;position:fixed;right:0;top:65px;width:400px;height:100%;background:#fff;box-shadow:0 0 4px #01010180;z-index:10}.development-selected-child-material-wrapper .material-map-wrapper{padding:10px;height:calc(100% - 85px);overflow-y:auto;overflow-x:hidden}.development-selected-child-material-wrapper .selected-child-material-content{display:grid;grid-template-areas:\"label value\";grid-template-columns:175px 1fr}.development-selected-child-material-wrapper .title{font-size:14px;font-weight:700;margin-bottom:10px}.development-selected-child-material-wrapper .label{grid-area:label;grid-row:auto;display:flex;align-items:center;height:30px;border-bottom:1px solid #9bb0d0;background-color:#e4edf4}.development-selected-child-material-wrapper .value{grid-area:value;grid-row:auto;display:flex;align-items:center;height:30px;border-bottom:1px solid #9bb0d0;background-color:#e4edf4}\n"], dependencies: [{ kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SelectedChildMaterialTexturesComponent, selector: "selected-child-material-textures", inputs: ["material"], outputs: ["mapChange"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectedChildMaterialComponent, decorators: [{
             type: Component,
@@ -33467,7 +33586,7 @@ class ToolbarIconComponent {
         <co-icon [iconData]="iconService.getIcon(matIcon)"></co-icon>
       }
     </ng-template>
-    `, isInline: true, styles: [".toolbar-button{display:flex;width:30px;height:30px;justify-content:center;align-items:center;cursor:pointer}.toolbar-button co-icon ::ng-deep{width:20px;height:20px}.toolbar-button co-icon ::ng-deep svg{fill:#fff}.toolbar-button co-icon ::ng-deep [fill]{fill:#fff}.toolbar-button.disabled{cursor:default}.toolbar-button.disabled co-icon ::ng-deep svg{fill:#00000073}.toolbar-button.disabled co-icon ::ng-deep [fill]{fill:#00000073}.toolbar-button .toolbar-icon-label{padding-left:20px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, styles: [".toolbar-button{display:flex;width:30px;height:30px;justify-content:center;align-items:center;cursor:pointer}.toolbar-button co-icon ::ng-deep{width:20px;height:20px}.toolbar-button co-icon ::ng-deep svg{fill:#fff}.toolbar-button co-icon ::ng-deep [fill]{fill:#fff}.toolbar-button.disabled{cursor:default}.toolbar-button.disabled co-icon ::ng-deep svg{fill:#00000073}.toolbar-button.disabled co-icon ::ng-deep [fill]{fill:#00000073}.toolbar-button .toolbar-icon-label{padding-left:20px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolbarIconComponent, decorators: [{
             type: Component,
@@ -34064,7 +34183,7 @@ class RenderControlsComponent {
                 </mat-icon>
             </button>
         </div>
-    `, isInline: true, styles: [".render-container{position:relative}.render-container .render-popup-container{background:#ffffffb3;padding:10px 25px 25px;border-radius:5px;box-shadow:0 1px 5px #0000001f}.render-container .render-popup-container .render-popup-header{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-header h3{display:flex;justify-content:space-between}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon{width:20px;height:20px;margin-left:20px}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg,.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg polygon{fill:#dc143c}.render-container .render-popup-container .render-popup-header .close-popup-container{cursor:pointer;border:none;background:none;float:none;height:auto;width:auto}.render-container .render-popup-container .render-popup-button-container{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-button-container .render-popup-button{float:none;width:100%;max-width:130px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-button-container .photo-button{color:#fff;background-color:#dda73f}.render-container .render-popup-container .render-popup-button-container .cancel-button{color:#fff;background-color:#5b6875}.render-container .render-popup-container .render-popup-preview{background-color:#fff;min-height:150px;min-width:275px;margin:5px 0;position:relative;width:275px;height:150px}.render-container .render-popup-container .render-popup-preview .render-popup-preview-placeholder{background-color:#fff;display:flex;justify-content:space-around;align-items:center;vertical-align:middle;min-height:150px;border:1px solid #ddd;color:#ddd;font-size:14px}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview{position:absolute;bottom:0;right:0;cursor:pointer;border-radius:0;border:none;height:30px;width:30px;background-color:#dda73f;color:#fff;margin:0}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-dropdown{margin:5px 0;width:100%}.render-container .render-popup-container .render-popup-dropdown .toggleable{cursor:pointer;display:flex;justify-content:right;align-content:center}.render-container .render-popup-container .render-popup-dropdown .toggleable p{padding:0;margin:0;font-size:12px;line-height:30px}.render-container .render-popup-container .render-popup-dropdown .toggleable .icon-rotate{transform:rotate(180deg)}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field{width:100%;font-size:14px}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-flex{background-color:#fff;color:#000;padding:3px 6px;border:1px solid #ddd}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-underline{display:none}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper{padding-bottom:0}.render-container .render-popup-container .render-popup-dropdown .setting-part-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .third-width{width:32%}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button{float:none;box-sizing:border-box;padding:2px;background:none;cursor:pointer;border:none;width:25px;height:25px;margin:0 5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon{display:block;width:25px;height:25px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon ::ng-deep svg{fill:#5b6875}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-slider .mat-slider-horizontal{min-width:110px;height:28px}.render-container .render-progress{float:left;min-width:50px;border-radius:25px;line-height:50px;text-align:center;padding:0 60px 0 20px;background:#fff;color:#74b77f;font-weight:700;margin:0 -50px 0 0}.render-container .render-input-container{float:right}.render-container .render-input-container input{width:100px;height:24px;margin:5px 0;padding:0 10px;font-size:14px}.render-container button{pointer-events:all;width:50px;height:50px;float:right;border-radius:100%;position:relative;z-index:2;margin-bottom:10px}.render-container button.active{background:#74b77f;color:#fff}.render-container button>*{pointer-events:none}.render-indicators div{position:fixed;width:100px;height:100px}.render-indicators .render-indicator-top-left{left:5vw;top:10vh;border-left:10px solid #dda73f;border-top:10px solid #dda73f;border-top-left-radius:20px}.render-indicators .render-indicator-top-right{right:5vw;top:10vh;border-right:10px solid #dda73f;border-top:10px solid #dda73f;border-top-right-radius:20px}.render-indicators .render-indicator-bottom-left{left:5vw;bottom:5vh;border-left:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-left-radius:20px}.render-indicators .render-indicator-bottom-right{right:5vw;bottom:5vh;border-right:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-right-radius:20px}.render-warning{width:500px;position:fixed;top:20%;left:calc(50% - 250px);border-radius:15px;box-sizing:border-box;background-color:#fff;box-shadow:1px 0 20px #0000001f}.render-warning .render-warming-header{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-warning .render-warming-header h2{padding:0;margin:0}.render-warning .render-warming-header .render-warning-close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-warning .render-warming-header .render-warning-close:hover mat-icon{fill:#46494c;color:#46494c}.render-warning .render-warning-body{padding:10px 20px}.render-warning .render-warning-footer{display:flex;justify-content:center;padding:0 20px 10px}.render-warning .render-warning-footer .render-popup-button{float:none;width:110px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly;color:#fff;background-color:#5b6875}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon svg path{fill:#fff}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i3$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "component", type: RenderProgressComponent, selector: "rp-render-progress" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    `, isInline: true, styles: [".render-container{position:relative}.render-container .render-popup-container{background:#ffffffb3;padding:10px 25px 25px;border-radius:5px;box-shadow:0 1px 5px #0000001f}.render-container .render-popup-container .render-popup-header{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-header h3{display:flex;justify-content:space-between}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon{width:20px;height:20px;margin-left:20px}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg,.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg polygon{fill:#dc143c}.render-container .render-popup-container .render-popup-header .close-popup-container{cursor:pointer;border:none;background:none;float:none;height:auto;width:auto}.render-container .render-popup-container .render-popup-button-container{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-button-container .render-popup-button{float:none;width:100%;max-width:130px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-button-container .photo-button{color:#fff;background-color:#dda73f}.render-container .render-popup-container .render-popup-button-container .cancel-button{color:#fff;background-color:#5b6875}.render-container .render-popup-container .render-popup-preview{background-color:#fff;min-height:150px;min-width:275px;margin:5px 0;position:relative;width:275px;height:150px}.render-container .render-popup-container .render-popup-preview .render-popup-preview-placeholder{background-color:#fff;display:flex;justify-content:space-around;align-items:center;vertical-align:middle;min-height:150px;border:1px solid #ddd;color:#ddd;font-size:14px}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview{position:absolute;bottom:0;right:0;cursor:pointer;border-radius:0;border:none;height:30px;width:30px;background-color:#dda73f;color:#fff;margin:0}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-dropdown{margin:5px 0;width:100%}.render-container .render-popup-container .render-popup-dropdown .toggleable{cursor:pointer;display:flex;justify-content:right;align-content:center}.render-container .render-popup-container .render-popup-dropdown .toggleable p{padding:0;margin:0;font-size:12px;line-height:30px}.render-container .render-popup-container .render-popup-dropdown .toggleable .icon-rotate{transform:rotate(180deg)}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field{width:100%;font-size:14px}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-flex{background-color:#fff;color:#000;padding:3px 6px;border:1px solid #ddd}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-underline{display:none}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper{padding-bottom:0}.render-container .render-popup-container .render-popup-dropdown .setting-part-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .third-width{width:32%}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button{float:none;box-sizing:border-box;padding:2px;background:none;cursor:pointer;border:none;width:25px;height:25px;margin:0 5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon{display:block;width:25px;height:25px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon ::ng-deep svg{fill:#5b6875}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-slider .mat-slider-horizontal{min-width:110px;height:28px}.render-container .render-progress{float:left;min-width:50px;border-radius:25px;line-height:50px;text-align:center;padding:0 60px 0 20px;background:#fff;color:#74b77f;font-weight:700;margin:0 -50px 0 0}.render-container .render-input-container{float:right}.render-container .render-input-container input{width:100px;height:24px;margin:5px 0;padding:0 10px;font-size:14px}.render-container button{pointer-events:all;width:50px;height:50px;float:right;border-radius:100%;position:relative;z-index:2;margin-bottom:10px}.render-container button.active{background:#74b77f;color:#fff}.render-container button>*{pointer-events:none}.render-indicators div{position:fixed;width:100px;height:100px}.render-indicators .render-indicator-top-left{left:5vw;top:10vh;border-left:10px solid #dda73f;border-top:10px solid #dda73f;border-top-left-radius:20px}.render-indicators .render-indicator-top-right{right:5vw;top:10vh;border-right:10px solid #dda73f;border-top:10px solid #dda73f;border-top-right-radius:20px}.render-indicators .render-indicator-bottom-left{left:5vw;bottom:5vh;border-left:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-left-radius:20px}.render-indicators .render-indicator-bottom-right{right:5vw;bottom:5vh;border-right:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-right-radius:20px}.render-warning{width:500px;position:fixed;top:20%;left:calc(50% - 250px);border-radius:15px;box-sizing:border-box;background-color:#fff;box-shadow:1px 0 20px #0000001f}.render-warning .render-warming-header{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-warning .render-warming-header h2{padding:0;margin:0}.render-warning .render-warming-header .render-warning-close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-warning .render-warming-header .render-warning-close:hover mat-icon{fill:#46494c;color:#46494c}.render-warning .render-warning-body{padding:10px 20px}.render-warning .render-warning-footer{display:flex;justify-content:center;padding:0 20px 10px}.render-warning .render-warning-footer .render-popup-button{float:none;width:110px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly;color:#fff;background-color:#5b6875}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon svg path{fill:#fff}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i3$2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "component", type: RenderProgressComponent, selector: "rp-render-progress" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderControlsComponent, decorators: [{
             type: Component,
@@ -34588,7 +34707,7 @@ class SliderInputComponent {
         this.onChange = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SliderInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SliderInputComponent, isStandalone: false, selector: "rp-slider-input", inputs: { title: "title", min: "min", max: "max", step: "step", value: "value" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"slider-group\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <mat-form-field class=\"slider-group-form-field\" fxFlex=\"20%\">\r\n    <mat-label [textContent]=\"title\"></mat-label>\r\n    <input\r\n      matInput\r\n      type=\"number\"\r\n      [min]=\"min\"\r\n      [max]=\"max\"\r\n      [placeholder]=\"title\"\r\n      [ngModel]=\"value\"\r\n      (change)=\"onChange.emit($event.target.value)\"\r\n    >\r\n  </mat-form-field>\r\n  <mat-slider\r\n    class=\"slider-group-slider\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    [step]=\"step\"\r\n    thumbLabel\r\n    fxFlex=\"grow\" #ngSlider>\r\n    <input matSliderThumb [value]=\"value\" (input)=\"onChange.emit({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)\" #ngSliderThumb=\"matSliderThumb\" />\r\n  </mat-slider>\r\n</div>\r\n", styles: [".slider-group{padding:0 1em;box-sizing:border-box}.slider-group input{text-align:right;font-size:14px}.slider-group .mat-mdc-form-field-infix{width:auto}.slider-group .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper .mat-mdc-form-field-label-wrapper .mat-mdc-form-field-label{transform:translateY(-1.34369em) scale(.75)}.slider-group .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper .mat-mdc-form-field-label-wrapper .mat-mdc-form-field-label span{font-size:12px;color:#000}.slider-group .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper .mat-mdc-form-field-infix{padding:5px 0}\n"], dependencies: [{ kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3$3.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SliderInputComponent, isStandalone: false, selector: "rp-slider-input", inputs: { title: "title", min: "min", max: "max", step: "step", value: "value" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"slider-group\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <mat-form-field class=\"slider-group-form-field\" fxFlex=\"20%\">\r\n    <mat-label [textContent]=\"title\"></mat-label>\r\n    <input\r\n      matInput\r\n      type=\"number\"\r\n      [min]=\"min\"\r\n      [max]=\"max\"\r\n      [placeholder]=\"title\"\r\n      [ngModel]=\"value\"\r\n      (change)=\"onChange.emit($event.target.value)\"\r\n    >\r\n  </mat-form-field>\r\n  <mat-slider\r\n    class=\"slider-group-slider\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    [step]=\"step\"\r\n    thumbLabel\r\n    fxFlex=\"grow\" #ngSlider>\r\n    <input matSliderThumb [value]=\"value\" (input)=\"onChange.emit({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)\" #ngSliderThumb=\"matSliderThumb\" />\r\n  </mat-slider>\r\n</div>\r\n", styles: [".slider-group{padding:0 1em;box-sizing:border-box}.slider-group input{text-align:right;font-size:14px}.slider-group .mat-mdc-form-field-infix{width:auto}.slider-group .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper .mat-mdc-form-field-label-wrapper .mat-mdc-form-field-label{transform:translateY(-1.34369em) scale(.75)}.slider-group .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper .mat-mdc-form-field-label-wrapper .mat-mdc-form-field-label span{font-size:12px;color:#000}.slider-group .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper .mat-mdc-form-field-infix{padding:5px 0}\n"], dependencies: [{ kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SliderInputComponent, decorators: [{
             type: Component,
@@ -34787,7 +34906,7 @@ class EditLightComponent {
         this._helper = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EditLightComponent, deps: [{ token: SceneService }, { token: LightsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EditLightComponent, isStandalone: false, selector: "edit-light", inputs: { light: "light" }, outputs: { okClick: "okClick", cancelClick: "cancelClick" }, host: { listeners: { "document:mousemove": "moveDialog($event)", "document:mouseup": "cancelMoveDialog($event)" } }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialog"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"edit-popup\" #dialog @showHideDialog [style.top.px]=\"top\" [style.left.px]=\"left\">\r\n  <div class=\"title-bar\">\r\n    <div class=\"title-bar-move\" (mousedown)=\"handleTitleMouseMove($event)\">\r\n      <div class=\"title-description\" [textContent]=\"'EDIT' | localize\"></div>\r\n    </div>\r\n    <button mat-icon-button class=\"hide-dialog\" (click)=\"hidePopup()\">\r\n      <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">close</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div class=\"edit-popup-wrapper\">\r\n    <mat-form-field class=\"full-width\">\r\n      <mat-label [textContent]=\"'NAME' | localize\"></mat-label>\r\n      <input matInput [(ngModel)]=\"light.name\">\r\n    </mat-form-field>\r\n    <div class=\"key-value-grid\">\r\n      <span class=\"key\" [textContent]=\"'VISIBLE' | localize\"></span>\r\n      <mat-checkbox class=\"value\" [(ngModel)]=\"light.visible\" (ngModelChange)=\"render()\"></mat-checkbox>\r\n      <span class=\"value-readonly\"></span>\r\n\r\n      @if (light.type === 'DirectionalLight') {\r\n        <span class=\"key\" [textContent]=\"'TOP-DOWN-DIRECTIONAL' | localize\"></span>\r\n        <mat-checkbox class=\"value\" [(ngModel)]=\"light.userData.topDownDirectional\" (ngModelChange)=\"this.updateOffsets(light)\"></mat-checkbox>\r\n        <span class=\"value-readonly\"></span>\r\n      }\r\n\r\n      @if (hasPosition && !light.userData.topDownDirectional) {\r\n        <span class=\"key\" [textContent]=\"'WALL-OFFSET'\"></span>\r\n        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"50\" step=\"1\" [(ngModel)]=\"light.userData.wallOffset\" (ngModelChange)=\"this.updateOffsets(light)\"></mat-slider>\r\n        <input matInput type=\"number\" [(ngModel)]=\"light.userData.wallOffset\" (ngModelChange)=\"render()\">\r\n        <span class=\"key\" [textContent]=\"'ROTATION-OFFSET'\"></span>\r\n        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"359\" step=\"1\" [(ngModel)]=\"light.userData.rotationOffset\" (ngModelChange)=\"this.updateOffsets(light)\"></mat-slider>\r\n        <input matInput type=\"number\" [(ngModel)]=\"light.userData.rotationOffset\" (ngModelChange)=\"render()\">\r\n        <span class=\"key\" [textContent]=\"'Y'\"></span>\r\n        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"50\" step=\"1\" [(ngModel)]=\"light.position.y\" (ngModelChange)=\"render()\"></mat-slider>\r\n        <input matInput type=\"number\" [(ngModel)]=\"light.position.y\" (ngModelChange)=\"render()\">\r\n      }\r\n\r\n      @if (light.hasOwnProperty('color')) {\r\n        <span class=\"key\" [textContent]=\"'COLOR' | localize\"></span>\r\n        <input class=\"value\" type=\"color\" matInput [ngModel]=\"lightColor\" (ngModelChange)=\"changeLightColor($event)\">\r\n        <span class=\"value-readonly\" [textContent]=\"lightColor\"></span>\r\n      }\r\n      @if (light.hasOwnProperty('groundColor')) {\r\n        <span class=\"key\" [textContent]=\"'GROUND_COLOR' | localize\"></span>\r\n        <input class=\"value\" type=\"color\" matInput [ngModel]=\"lightGroundColor\" (ngModelChange)=\"changeGroundLightColor($event)\">\r\n        <span class=\"value-readonly\" [textContent]=\"lightGroundColor\"></span>\r\n      }\r\n\r\n      @if (light.hasOwnProperty('intensity')) {\r\n        <span class=\"key\" [textContent]=\"'INTENSITY' | localize\"></span>\r\n        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"20\" step=\"0.01\" [(ngModel)]=\"light.intensity\" (ngModelChange)=\"render()\"></mat-slider>\r\n        <input matInput type=\"number\" [(ngModel)]=\"light.intensity\" (ngModelChange)=\"render()\">\r\n      }\r\n\r\n      <!--      <ng-container *ngIf=\"light.hasOwnProperty('angle')\">-->\r\n      <!--        <span class=\"key\" [textContent]=\"'ANGLE' | localize\"></span>-->\r\n      <!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"20\" step=\"0.01\" [(ngModel)]=\"light.angle\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n      <!--        <input matInput type=\"number\" [placeholder]=\"0\" [(ngModel)]=\"light.angle\" (ngModelChange)=\"render()\">-->\r\n    <!--      </ng-container>-->\r\n\r\n    <!--      <ng-container *ngIf=\"light.hasOwnProperty('power')\">-->\r\n    <!--        <span class=\"key\" [textContent]=\"'POWER' | localize\"></span>-->\r\n    <!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"20\" step=\"0.01\" [(ngModel)]=\"light.power\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n    <!--        <input matInput type=\"number\" [placeholder]=\"0\" [(ngModel)]=\"light.power\" (ngModelChange)=\"render()\">-->\r\n  <!--      </ng-container>-->\r\n\r\n  <!--      <ng-container *ngIf=\"light.hasOwnProperty('decay')\">-->\r\n  <!--        <span class=\"key\" [textContent]=\"'DECAY' | localize\"></span>-->\r\n  <!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"4\" step=\"0.001\" [(ngModel)]=\"light.decay\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n  <!--        <input matInput type=\"number\" [placeholder]=\"0\" [(ngModel)]=\"light.decay\" (ngModelChange)=\"render()\">-->\r\n<!--      </ng-container>-->\r\n\r\n<!--      <ng-container *ngIf=\"light.hasOwnProperty('distance')\">-->\r\n<!--        <span class=\"key\" [textContent]=\"'DISTANCE' | localize\"></span>-->\r\n<!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"20\" step=\"0.01\" [(ngModel)]=\"light.distance\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n<!--        <input matInput type=\"number\" [placeholder]=\"0\" [(ngModel)]=\"light.distance\" (ngModelChange)=\"render()\">-->\r\n<!--      </ng-container>-->\r\n\r\n<!--      <ng-container *ngIf=\"light.hasOwnProperty('penumbra')\">-->\r\n<!--        <span class=\"key\" [textContent]=\"'PENUMBRA' | localize\"></span>-->\r\n<!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"1\" step=\"0.01\" [(ngModel)]=\"light.penumbra\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n<!--        <input matInput type=\"number\" [placeholder]=\"0\" [(ngModel)]=\"light.penumbra\" (ngModelChange)=\"render()\">-->\r\n<!--      </ng-container>-->\r\n\r\n<!--      <ng-container *ngIf=\"light.hasOwnProperty('bias')\">-->\r\n<!--        <span class=\"key\" [textContent]=\"'BIAS' | localize\"></span>-->\r\n<!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"20\" step=\"0.01\" [(ngModel)]=\"light.bias\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n<!--        <input matInput type=\"number\" [placeholder]=\"0\" [(ngModel)]=\"light.bias\" (ngModelChange)=\"render()\">-->\r\n<!--      </ng-container>-->\r\n\r\n<!--      <ng-container *ngIf=\"light.hasOwnProperty('radius')\">-->\r\n<!--        <span class=\"key\" [textContent]=\"'RADIUS' | localize\"></span>-->\r\n<!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"20\" step=\"0.01\" [(ngModel)]=\"light.radius\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n<!--        <input matInput type=\"number\" [placeholder]=\"0\" [value]=\"!light.radius ? 0 : light.radius\" [(ngModel)]=\"light.radius\" (ngModelChange)=\"render()\">-->\r\n<!--      </ng-container>-->\r\n\r\n@if (light.hasOwnProperty('castShadow')) {\r\n  <span class=\"key\" [textContent]=\"'CAST_SHADOW' | localize\"></span>\r\n  <mat-checkbox class=\"value\" [(ngModel)]=\"light.castShadow\" (ngModelChange)=\"render()\"></mat-checkbox>\r\n  <span class=\"value-readonly\"></span>\r\n}\r\n\r\n@if (light.hasOwnProperty('shadow')) {\r\n  <span class=\"key\" [textContent]=\"'NEAR' | localize\"></span>\r\n  <!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"50\" step=\"1\" [(ngModel)]=\"light.shadow.near\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n  <!--        <input matInput type=\"number\" [placeholder]=\"0\" [value]=\"light.shadow.near\" [(ngModel)]=\"light.shadow.near\" (ngModelChange)=\"render()\">-->\r\n  <!--        <span class=\"key\" [textContent]=\"'FAR' | localize\"></span>-->\r\n  <!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"50\" step=\"1\" [(ngModel)]=\"light.shadow.far\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n  <!--        <input matInput type=\"number\" [placeholder]=\"0\" [value]=\"light.shadow.far\" [(ngModel)]=\"light.shadow.far\" (ngModelChange)=\"render()\">-->\r\n  <span class=\"key\" [textContent]=\"'SHADOW_MAPSIZE' | localize\"></span>\r\n  <mat-select class=\"dropdown-container\" [value]=\"light.shadow.mapSize.x\">\r\n    @for (mapSize of mapSizes; track mapSize) {\r\n      <mat-option [value]=\"mapSize\" (click)=\"updateShadowMapSize(mapSize)\">\r\n        {{ mapSize }}\r\n      </mat-option>\r\n    }\r\n  </mat-select>\r\n  <span class=\"value-readonly\"></span>\r\n  <span class=\"key\" [textContent]=\"'SHADOW_MAP_RADIUS' | localize\"></span>\r\n  <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"5\" step=\"0.1\" [(ngModel)]=\"light.shadow.radius\" (ngModelChange)=\"updateShadowMap()\"></mat-slider>\r\n  <input matInput type=\"number\" [placeholder]=\"0\" [value]=\"light.shadow.radius\" [(ngModel)]=\"light.shadow.radius\" (ngModelChange)=\"updateShadowMap()\">\r\n}\r\n\r\n@if (hasHelper) {\r\n  <span class=\"key\" [textContent]=\"'HELPER' | localize\"></span>\r\n  <mat-checkbox class=\"value\" [ngModel]=\"lightHelper\" (ngModelChange)=\"showHideHelper($event)\"></mat-checkbox>\r\n  <span class=\"value-readonly\"></span>\r\n}\r\n</div>\r\n</div>\r\n<div class=\"button-wrapper\">\r\n  <button mat-button class=\"custom-button\" (click)=\"cancel()\">\r\n    <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">cancel</mat-icon>\r\n    {{ 'CANCEL' | localize}}\r\n  </button>\r\n  <button mat-button class=\"custom-button\" (click)=\"save()\">\r\n    <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">save</mat-icon>\r\n    {{ 'SAVE' | localize}}\r\n  </button>\r\n</div>\r\n</div>\r\n", styles: [":host .edit-wrapper{display:flex;flex-direction:row;align-items:center}:host .custom-button{font-size:11px;border:1px solid #3760a1;border-radius:25px}:host .edit-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:1px 1px 3px 2px #0101014d;background:#fff;min-height:400px;min-width:500px;display:flex;flex-direction:column;z-index:905}:host .edit-popup .title-bar{display:flex;justify-content:space-between;background:#3760a1;color:#fff;padding-left:10px}:host .edit-popup .title-bar .title-bar-move{display:flex;flex-basis:100%;align-items:center}:host .edit-popup .title-bar .title-bar-move .title-description{-webkit-user-select:none;user-select:none}:host .edit-popup .title-bar mat-icon{color:#fff}:host .edit-popup .edit-popup-wrapper{padding:15px;font-size:14px;overflow-y:auto}:host .edit-popup .button-wrapper{display:flex;align-items:center;justify-content:flex-end;height:60px;padding:10px;bottom:0;right:0}:host .edit-popup .button-wrapper .custom-button:not(last-child){margin-right:10px}:host .edit-popup .full-width{width:100%}:host .edit-popup .key-value-grid{display:grid;grid-template-columns:30% 60% 10%;grid-auto-rows:30px}:host .edit-popup .key-value-grid .key,:host .edit-popup .key-value-grid .value,:host .edit-popup .key-value-grid .value-readonly{align-self:center}:host .edit-popup .key-value-grid mat-slider{height:30px}:host .edit-popup .key-value-grid ::ng-deep .mat-slider-horizontal .mat-slider-wrapper{top:50%}:host .dropdown-container{display:flex;flex-direction:column;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EditLightComponent, isStandalone: false, selector: "edit-light", inputs: { light: "light" }, outputs: { okClick: "okClick", cancelClick: "cancelClick" }, host: { listeners: { "document:mousemove": "moveDialog($event)", "document:mouseup": "cancelMoveDialog($event)" } }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialog"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"edit-popup\" #dialog @showHideDialog [style.top.px]=\"top\" [style.left.px]=\"left\">\r\n  <div class=\"title-bar\">\r\n    <div class=\"title-bar-move\" (mousedown)=\"handleTitleMouseMove($event)\">\r\n      <div class=\"title-description\" [textContent]=\"'EDIT' | localize\"></div>\r\n    </div>\r\n    <button mat-icon-button class=\"hide-dialog\" (click)=\"hidePopup()\">\r\n      <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">close</mat-icon>\r\n    </button>\r\n  </div>\r\n  <div class=\"edit-popup-wrapper\">\r\n    <mat-form-field class=\"full-width\">\r\n      <mat-label [textContent]=\"'NAME' | localize\"></mat-label>\r\n      <input matInput [(ngModel)]=\"light.name\">\r\n    </mat-form-field>\r\n    <div class=\"key-value-grid\">\r\n      <span class=\"key\" [textContent]=\"'VISIBLE' | localize\"></span>\r\n      <mat-checkbox class=\"value\" [(ngModel)]=\"light.visible\" (ngModelChange)=\"render()\"></mat-checkbox>\r\n      <span class=\"value-readonly\"></span>\r\n\r\n      @if (light.type === 'DirectionalLight') {\r\n        <span class=\"key\" [textContent]=\"'TOP-DOWN-DIRECTIONAL' | localize\"></span>\r\n        <mat-checkbox class=\"value\" [(ngModel)]=\"light.userData.topDownDirectional\" (ngModelChange)=\"this.updateOffsets(light)\"></mat-checkbox>\r\n        <span class=\"value-readonly\"></span>\r\n      }\r\n\r\n      @if (hasPosition && !light.userData.topDownDirectional) {\r\n        <span class=\"key\" [textContent]=\"'WALL-OFFSET'\"></span>\r\n        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"50\" step=\"1\" [(ngModel)]=\"light.userData.wallOffset\" (ngModelChange)=\"this.updateOffsets(light)\"></mat-slider>\r\n        <input matInput type=\"number\" [(ngModel)]=\"light.userData.wallOffset\" (ngModelChange)=\"render()\">\r\n        <span class=\"key\" [textContent]=\"'ROTATION-OFFSET'\"></span>\r\n        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"359\" step=\"1\" [(ngModel)]=\"light.userData.rotationOffset\" (ngModelChange)=\"this.updateOffsets(light)\"></mat-slider>\r\n        <input matInput type=\"number\" [(ngModel)]=\"light.userData.rotationOffset\" (ngModelChange)=\"render()\">\r\n        <span class=\"key\" [textContent]=\"'Y'\"></span>\r\n        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"50\" step=\"1\" [(ngModel)]=\"light.position.y\" (ngModelChange)=\"render()\"></mat-slider>\r\n        <input matInput type=\"number\" [(ngModel)]=\"light.position.y\" (ngModelChange)=\"render()\">\r\n      }\r\n\r\n      @if (light.hasOwnProperty('color')) {\r\n        <span class=\"key\" [textContent]=\"'COLOR' | localize\"></span>\r\n        <input class=\"value\" type=\"color\" matInput [ngModel]=\"lightColor\" (ngModelChange)=\"changeLightColor($event)\">\r\n        <span class=\"value-readonly\" [textContent]=\"lightColor\"></span>\r\n      }\r\n      @if (light.hasOwnProperty('groundColor')) {\r\n        <span class=\"key\" [textContent]=\"'GROUND_COLOR' | localize\"></span>\r\n        <input class=\"value\" type=\"color\" matInput [ngModel]=\"lightGroundColor\" (ngModelChange)=\"changeGroundLightColor($event)\">\r\n        <span class=\"value-readonly\" [textContent]=\"lightGroundColor\"></span>\r\n      }\r\n\r\n      @if (light.hasOwnProperty('intensity')) {\r\n        <span class=\"key\" [textContent]=\"'INTENSITY' | localize\"></span>\r\n        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"20\" step=\"0.01\" [(ngModel)]=\"light.intensity\" (ngModelChange)=\"render()\"></mat-slider>\r\n        <input matInput type=\"number\" [(ngModel)]=\"light.intensity\" (ngModelChange)=\"render()\">\r\n      }\r\n\r\n      <!--      <ng-container *ngIf=\"light.hasOwnProperty('angle')\">-->\r\n      <!--        <span class=\"key\" [textContent]=\"'ANGLE' | localize\"></span>-->\r\n      <!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"20\" step=\"0.01\" [(ngModel)]=\"light.angle\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n      <!--        <input matInput type=\"number\" [placeholder]=\"0\" [(ngModel)]=\"light.angle\" (ngModelChange)=\"render()\">-->\r\n    <!--      </ng-container>-->\r\n\r\n    <!--      <ng-container *ngIf=\"light.hasOwnProperty('power')\">-->\r\n    <!--        <span class=\"key\" [textContent]=\"'POWER' | localize\"></span>-->\r\n    <!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"20\" step=\"0.01\" [(ngModel)]=\"light.power\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n    <!--        <input matInput type=\"number\" [placeholder]=\"0\" [(ngModel)]=\"light.power\" (ngModelChange)=\"render()\">-->\r\n  <!--      </ng-container>-->\r\n\r\n  <!--      <ng-container *ngIf=\"light.hasOwnProperty('decay')\">-->\r\n  <!--        <span class=\"key\" [textContent]=\"'DECAY' | localize\"></span>-->\r\n  <!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"4\" step=\"0.001\" [(ngModel)]=\"light.decay\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n  <!--        <input matInput type=\"number\" [placeholder]=\"0\" [(ngModel)]=\"light.decay\" (ngModelChange)=\"render()\">-->\r\n<!--      </ng-container>-->\r\n\r\n<!--      <ng-container *ngIf=\"light.hasOwnProperty('distance')\">-->\r\n<!--        <span class=\"key\" [textContent]=\"'DISTANCE' | localize\"></span>-->\r\n<!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"20\" step=\"0.01\" [(ngModel)]=\"light.distance\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n<!--        <input matInput type=\"number\" [placeholder]=\"0\" [(ngModel)]=\"light.distance\" (ngModelChange)=\"render()\">-->\r\n<!--      </ng-container>-->\r\n\r\n<!--      <ng-container *ngIf=\"light.hasOwnProperty('penumbra')\">-->\r\n<!--        <span class=\"key\" [textContent]=\"'PENUMBRA' | localize\"></span>-->\r\n<!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"1\" step=\"0.01\" [(ngModel)]=\"light.penumbra\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n<!--        <input matInput type=\"number\" [placeholder]=\"0\" [(ngModel)]=\"light.penumbra\" (ngModelChange)=\"render()\">-->\r\n<!--      </ng-container>-->\r\n\r\n<!--      <ng-container *ngIf=\"light.hasOwnProperty('bias')\">-->\r\n<!--        <span class=\"key\" [textContent]=\"'BIAS' | localize\"></span>-->\r\n<!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"20\" step=\"0.01\" [(ngModel)]=\"light.bias\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n<!--        <input matInput type=\"number\" [placeholder]=\"0\" [(ngModel)]=\"light.bias\" (ngModelChange)=\"render()\">-->\r\n<!--      </ng-container>-->\r\n\r\n<!--      <ng-container *ngIf=\"light.hasOwnProperty('radius')\">-->\r\n<!--        <span class=\"key\" [textContent]=\"'RADIUS' | localize\"></span>-->\r\n<!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"20\" step=\"0.01\" [(ngModel)]=\"light.radius\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n<!--        <input matInput type=\"number\" [placeholder]=\"0\" [value]=\"!light.radius ? 0 : light.radius\" [(ngModel)]=\"light.radius\" (ngModelChange)=\"render()\">-->\r\n<!--      </ng-container>-->\r\n\r\n@if (light.hasOwnProperty('castShadow')) {\r\n  <span class=\"key\" [textContent]=\"'CAST_SHADOW' | localize\"></span>\r\n  <mat-checkbox class=\"value\" [(ngModel)]=\"light.castShadow\" (ngModelChange)=\"render()\"></mat-checkbox>\r\n  <span class=\"value-readonly\"></span>\r\n}\r\n\r\n@if (light.hasOwnProperty('shadow')) {\r\n  <span class=\"key\" [textContent]=\"'NEAR' | localize\"></span>\r\n  <!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"50\" step=\"1\" [(ngModel)]=\"light.shadow.near\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n  <!--        <input matInput type=\"number\" [placeholder]=\"0\" [value]=\"light.shadow.near\" [(ngModel)]=\"light.shadow.near\" (ngModelChange)=\"render()\">-->\r\n  <!--        <span class=\"key\" [textContent]=\"'FAR' | localize\"></span>-->\r\n  <!--        <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"50\" step=\"1\" [(ngModel)]=\"light.shadow.far\" (ngModelChange)=\"render()\"></mat-slider>-->\r\n  <!--        <input matInput type=\"number\" [placeholder]=\"0\" [value]=\"light.shadow.far\" [(ngModel)]=\"light.shadow.far\" (ngModelChange)=\"render()\">-->\r\n  <span class=\"key\" [textContent]=\"'SHADOW_MAPSIZE' | localize\"></span>\r\n  <mat-select class=\"dropdown-container\" [value]=\"light.shadow.mapSize.x\">\r\n    @for (mapSize of mapSizes; track mapSize) {\r\n      <mat-option [value]=\"mapSize\" (click)=\"updateShadowMapSize(mapSize)\">\r\n        {{ mapSize }}\r\n      </mat-option>\r\n    }\r\n  </mat-select>\r\n  <span class=\"value-readonly\"></span>\r\n  <span class=\"key\" [textContent]=\"'SHADOW_MAP_RADIUS' | localize\"></span>\r\n  <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"5\" step=\"0.1\" [(ngModel)]=\"light.shadow.radius\" (ngModelChange)=\"updateShadowMap()\"></mat-slider>\r\n  <input matInput type=\"number\" [placeholder]=\"0\" [value]=\"light.shadow.radius\" [(ngModel)]=\"light.shadow.radius\" (ngModelChange)=\"updateShadowMap()\">\r\n}\r\n\r\n@if (hasHelper) {\r\n  <span class=\"key\" [textContent]=\"'HELPER' | localize\"></span>\r\n  <mat-checkbox class=\"value\" [ngModel]=\"lightHelper\" (ngModelChange)=\"showHideHelper($event)\"></mat-checkbox>\r\n  <span class=\"value-readonly\"></span>\r\n}\r\n</div>\r\n</div>\r\n<div class=\"button-wrapper\">\r\n  <button mat-button class=\"custom-button\" (click)=\"cancel()\">\r\n    <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">cancel</mat-icon>\r\n    {{ 'CANCEL' | localize}}\r\n  </button>\r\n  <button mat-button class=\"custom-button\" (click)=\"save()\">\r\n    <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">save</mat-icon>\r\n    {{ 'SAVE' | localize}}\r\n  </button>\r\n</div>\r\n</div>\r\n", styles: [":host .edit-wrapper{display:flex;flex-direction:row;align-items:center}:host .custom-button{font-size:11px;border:1px solid #3760a1;border-radius:25px}:host .edit-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:1px 1px 3px 2px #0101014d;background:#fff;min-height:400px;min-width:500px;display:flex;flex-direction:column;z-index:905}:host .edit-popup .title-bar{display:flex;justify-content:space-between;background:#3760a1;color:#fff;padding-left:10px}:host .edit-popup .title-bar .title-bar-move{display:flex;flex-basis:100%;align-items:center}:host .edit-popup .title-bar .title-bar-move .title-description{-webkit-user-select:none;user-select:none}:host .edit-popup .title-bar mat-icon{color:#fff}:host .edit-popup .edit-popup-wrapper{padding:15px;font-size:14px;overflow-y:auto}:host .edit-popup .button-wrapper{display:flex;align-items:center;justify-content:flex-end;height:60px;padding:10px;bottom:0;right:0}:host .edit-popup .button-wrapper .custom-button:not(last-child){margin-right:10px}:host .edit-popup .full-width{width:100%}:host .edit-popup .key-value-grid{display:grid;grid-template-columns:30% 60% 10%;grid-auto-rows:30px}:host .edit-popup .key-value-grid .key,:host .edit-popup .key-value-grid .value,:host .edit-popup .key-value-grid .value-readonly{align-self:center}:host .edit-popup .key-value-grid mat-slider{height:30px}:host .edit-popup .key-value-grid ::ng-deep .mat-slider-horizontal .mat-slider-wrapper{top:50%}:host .dropdown-container{display:flex;flex-direction:column;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3$2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('showHideDialog', [
                 state('void', style({ opacity: 0 })),
                 state('*', style({ opacity: 1 })),
@@ -34871,156 +34990,156 @@ class EditLightplanComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EditLightplanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EditLightplanComponent, isStandalone: false, selector: "edit-lightplan", inputs: { lightPreset: "lightPreset" }, outputs: { saveClick: "saveClick", cancelClick: "cancelClick" }, ngImport: i0, template: `
-      <div class="edit-popup">
-        <div class="title-bar">
-          <div class="title-description" [textContent]="'EDIT' | localize"></div>
-        </div>
-        <div class="edit-popup-wrapper">
-          <mat-form-field class="full-width">
-            <mat-label [textContent]="'NAME' | localize"></mat-label>
-            <input matInput [(ngModel)]="lightPresetClone.name">
-          </mat-form-field>
-          <mat-form-field class="full-width">
-            <mat-label [textContent]="'GROUP' | localize"></mat-label>
-            <input matInput [(ngModel)]="lightPresetClone.group">
-          </mat-form-field>
-          <div class="key-value-grid">
-            <span class="key" [textContent]="'NAVIGATOR_TYPE' | localize"></span>
-            <mat-select class="dropdown-container" [value]="lightPresetClone.navigatorType" (keydown)="handleSelectKeyDown($event, 'navigatorType')">
-              @for (navigatorType of navigatorTypes | keys; track navigatorType) {
-                <mat-option [value]="navigatorType.key" (click)="lightPresetClone.navigatorType = navigatorType.value">
-                  {{ navigatorType.key }}
-                </mat-option>
-              }
-            </mat-select>
-            <span class="value-readonly"></span>
-      
-            <span class="key" [textContent]="'SHADOW_MAP_TYPE' | localize"></span>
-            <mat-select class="dropdown-container" [value]="lightPresetClone.shadowMapType">
-              @for (mapType of shadowMapTypes | keys; track mapType) {
-                <mat-option [value]="mapType.key" (click)="lightPresetClone.shadowMapType = mapType.value">
-                  {{ mapType.key }}
-                </mat-option>
-              }
-            </mat-select>
-            <span class="value-readonly"></span>
-      
-            <span class="key" [textContent]="'OUTPUT_ENCODING' | localize"></span>
-            <mat-select class="dropdown-container" [value]="lightPresetClone.outputEncoding">
-              @for (encoding of encodings | keys; track encoding) {
-                <mat-option [value]="encoding.key" (click)="lightPresetClone.outputEncoding = encoding.value">
-                  {{ encoding.key }}
-                </mat-option>
-              }
-            </mat-select>
-            <span class="value-readonly"></span>
-      
-            <span class="key" [textContent]="'TONE_MAPPING_EXPOSURE' | localize"></span>
-            <mat-slider class="value" thumbLabel min="0" max="3" step="0.1" [(ngModel)]="lightPresetClone.toneMappingExposure"><input matSliderThumb [value]="lightPresetClone.toneMappingExposure" /></mat-slider>
-            <input matInput type="number" [step]="0.1" [placeholder]="1" [value]="lightPresetClone.toneMappingExposure" [(ngModel)]="lightPresetClone.toneMappingExposure">
-      
-            <span class="key" [textContent]="'PHYSICALLY_CORRECT_LIGHTS' | localize"></span>
-            <mat-checkbox class="value" [(ngModel)]="lightPresetClone.physicallyCorrectLights"></mat-checkbox>
-            <span class="value-readonly"></span>
-      
-            <span class="key" [textContent]="'DEFAULT' | localize"></span>
-            <mat-checkbox class="value" [(ngModel)]="lightPresetClone.default"></mat-checkbox>
-            <span class="value-readonly"></span>
-      
-            <span class="key" [textContent]="'STANDALONE' | localize"></span>
-            <mat-checkbox class="value" [(ngModel)]="lightPresetClone.standalone"></mat-checkbox>
-            <span class="value-readonly"></span>
-          </div>
-        </div>
-        <div class="button-wrapper">
-          <button mat-button class="custom-button" (click)="cancel()">
-            <mat-icon class="homedecorator-material-icons" aria-hidden="true">cancel</mat-icon>
-            {{ 'CANCEL' | localize}}
-          </button>
-          <button mat-button class="custom-button" (click)="save()">
-            <mat-icon class="homedecorator-material-icons" aria-hidden="true">save</mat-icon>
-            {{ 'SAVE' | localize}}
-          </button>
-        </div>
-      </div>
-      `, isInline: true, styles: [":host .edit-wrapper{display:flex;flex-direction:row;align-items:center}:host .custom-button{font-size:11px;border:1px solid #3760a1;border-radius:25px}:host .edit-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:1px 1px 3px 2px #0101014d;background:#fff;display:flex;flex-direction:column;z-index:905}:host .edit-popup .title-bar{display:flex;justify-content:space-between;align-items:center;height:40px;background:#3760a1;color:#fff;padding-left:10px}:host .edit-popup .title-bar .title-bar-move{display:flex;flex-basis:100%;align-items:center}:host .edit-popup .title-bar .title-bar-move .title-description{-webkit-user-select:none;user-select:none}:host .edit-popup .title-bar mat-icon{color:#fff}:host .edit-popup .edit-popup-wrapper{padding:10px;font-size:12px;overflow-y:auto}:host .edit-popup .button-wrapper{display:flex;align-items:center;justify-content:flex-end;height:60px;padding:10px;bottom:0;right:0}:host .edit-popup .button-wrapper .custom-button:not(last-child){margin-right:10px}:host .edit-popup .full-width{width:100%}:host .edit-popup .key-value-grid{display:grid;grid-template-columns:40% 50% 10%;grid-auto-rows:30px}:host .edit-popup .key-value-grid .key,:host .edit-popup .key-value-grid .value,:host .edit-popup .key-value-grid .value-readonly{align-self:center}:host .edit-popup .key-value-grid mat-slider{height:30px}:host .edit-popup .key-value-grid ::ng-deep .mat-slider-horizontal .mat-slider-wrapper{top:50%}:host .dropdown-container{display:flex;flex-direction:column;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3$3.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: KeysPipe, name: "keys" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EditLightplanComponent, isStandalone: false, selector: "edit-lightplan", inputs: { lightPreset: "lightPreset" }, outputs: { saveClick: "saveClick", cancelClick: "cancelClick" }, ngImport: i0, template: `
+      <div class="edit-popup">
+        <div class="title-bar">
+          <div class="title-description" [textContent]="'EDIT' | localize"></div>
+        </div>
+        <div class="edit-popup-wrapper">
+          <mat-form-field class="full-width">
+            <mat-label [textContent]="'NAME' | localize"></mat-label>
+            <input matInput [(ngModel)]="lightPresetClone.name">
+          </mat-form-field>
+          <mat-form-field class="full-width">
+            <mat-label [textContent]="'GROUP' | localize"></mat-label>
+            <input matInput [(ngModel)]="lightPresetClone.group">
+          </mat-form-field>
+          <div class="key-value-grid">
+            <span class="key" [textContent]="'NAVIGATOR_TYPE' | localize"></span>
+            <mat-select class="dropdown-container" [value]="lightPresetClone.navigatorType" (keydown)="handleSelectKeyDown($event, 'navigatorType')">
+              @for (navigatorType of navigatorTypes | keys; track navigatorType) {
+                <mat-option [value]="navigatorType.key" (click)="lightPresetClone.navigatorType = navigatorType.value">
+                  {{ navigatorType.key }}
+                </mat-option>
+              }
+            </mat-select>
+            <span class="value-readonly"></span>
+      
+            <span class="key" [textContent]="'SHADOW_MAP_TYPE' | localize"></span>
+            <mat-select class="dropdown-container" [value]="lightPresetClone.shadowMapType">
+              @for (mapType of shadowMapTypes | keys; track mapType) {
+                <mat-option [value]="mapType.key" (click)="lightPresetClone.shadowMapType = mapType.value">
+                  {{ mapType.key }}
+                </mat-option>
+              }
+            </mat-select>
+            <span class="value-readonly"></span>
+      
+            <span class="key" [textContent]="'OUTPUT_ENCODING' | localize"></span>
+            <mat-select class="dropdown-container" [value]="lightPresetClone.outputEncoding">
+              @for (encoding of encodings | keys; track encoding) {
+                <mat-option [value]="encoding.key" (click)="lightPresetClone.outputEncoding = encoding.value">
+                  {{ encoding.key }}
+                </mat-option>
+              }
+            </mat-select>
+            <span class="value-readonly"></span>
+      
+            <span class="key" [textContent]="'TONE_MAPPING_EXPOSURE' | localize"></span>
+            <mat-slider class="value" thumbLabel min="0" max="3" step="0.1" [(ngModel)]="lightPresetClone.toneMappingExposure"><input matSliderThumb [value]="lightPresetClone.toneMappingExposure" /></mat-slider>
+            <input matInput type="number" [step]="0.1" [placeholder]="1" [value]="lightPresetClone.toneMappingExposure" [(ngModel)]="lightPresetClone.toneMappingExposure">
+      
+            <span class="key" [textContent]="'PHYSICALLY_CORRECT_LIGHTS' | localize"></span>
+            <mat-checkbox class="value" [(ngModel)]="lightPresetClone.physicallyCorrectLights"></mat-checkbox>
+            <span class="value-readonly"></span>
+      
+            <span class="key" [textContent]="'DEFAULT' | localize"></span>
+            <mat-checkbox class="value" [(ngModel)]="lightPresetClone.default"></mat-checkbox>
+            <span class="value-readonly"></span>
+      
+            <span class="key" [textContent]="'STANDALONE' | localize"></span>
+            <mat-checkbox class="value" [(ngModel)]="lightPresetClone.standalone"></mat-checkbox>
+            <span class="value-readonly"></span>
+          </div>
+        </div>
+        <div class="button-wrapper">
+          <button mat-button class="custom-button" (click)="cancel()">
+            <mat-icon class="homedecorator-material-icons" aria-hidden="true">cancel</mat-icon>
+            {{ 'CANCEL' | localize}}
+          </button>
+          <button mat-button class="custom-button" (click)="save()">
+            <mat-icon class="homedecorator-material-icons" aria-hidden="true">save</mat-icon>
+            {{ 'SAVE' | localize}}
+          </button>
+        </div>
+      </div>
+      `, isInline: true, styles: [":host .edit-wrapper{display:flex;flex-direction:row;align-items:center}:host .custom-button{font-size:11px;border:1px solid #3760a1;border-radius:25px}:host .edit-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:1px 1px 3px 2px #0101014d;background:#fff;display:flex;flex-direction:column;z-index:905}:host .edit-popup .title-bar{display:flex;justify-content:space-between;align-items:center;height:40px;background:#3760a1;color:#fff;padding-left:10px}:host .edit-popup .title-bar .title-bar-move{display:flex;flex-basis:100%;align-items:center}:host .edit-popup .title-bar .title-bar-move .title-description{-webkit-user-select:none;user-select:none}:host .edit-popup .title-bar mat-icon{color:#fff}:host .edit-popup .edit-popup-wrapper{padding:10px;font-size:12px;overflow-y:auto}:host .edit-popup .button-wrapper{display:flex;align-items:center;justify-content:flex-end;height:60px;padding:10px;bottom:0;right:0}:host .edit-popup .button-wrapper .custom-button:not(last-child){margin-right:10px}:host .edit-popup .full-width{width:100%}:host .edit-popup .key-value-grid{display:grid;grid-template-columns:40% 50% 10%;grid-auto-rows:30px}:host .edit-popup .key-value-grid .key,:host .edit-popup .key-value-grid .value,:host .edit-popup .key-value-grid .value-readonly{align-self:center}:host .edit-popup .key-value-grid mat-slider{height:30px}:host .edit-popup .key-value-grid ::ng-deep .mat-slider-horizontal .mat-slider-wrapper{top:50%}:host .dropdown-container{display:flex;flex-direction:column;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3$2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: KeysPipe, name: "keys" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EditLightplanComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'edit-lightplan', template: `
-      <div class="edit-popup">
-        <div class="title-bar">
-          <div class="title-description" [textContent]="'EDIT' | localize"></div>
-        </div>
-        <div class="edit-popup-wrapper">
-          <mat-form-field class="full-width">
-            <mat-label [textContent]="'NAME' | localize"></mat-label>
-            <input matInput [(ngModel)]="lightPresetClone.name">
-          </mat-form-field>
-          <mat-form-field class="full-width">
-            <mat-label [textContent]="'GROUP' | localize"></mat-label>
-            <input matInput [(ngModel)]="lightPresetClone.group">
-          </mat-form-field>
-          <div class="key-value-grid">
-            <span class="key" [textContent]="'NAVIGATOR_TYPE' | localize"></span>
-            <mat-select class="dropdown-container" [value]="lightPresetClone.navigatorType" (keydown)="handleSelectKeyDown($event, 'navigatorType')">
-              @for (navigatorType of navigatorTypes | keys; track navigatorType) {
-                <mat-option [value]="navigatorType.key" (click)="lightPresetClone.navigatorType = navigatorType.value">
-                  {{ navigatorType.key }}
-                </mat-option>
-              }
-            </mat-select>
-            <span class="value-readonly"></span>
-      
-            <span class="key" [textContent]="'SHADOW_MAP_TYPE' | localize"></span>
-            <mat-select class="dropdown-container" [value]="lightPresetClone.shadowMapType">
-              @for (mapType of shadowMapTypes | keys; track mapType) {
-                <mat-option [value]="mapType.key" (click)="lightPresetClone.shadowMapType = mapType.value">
-                  {{ mapType.key }}
-                </mat-option>
-              }
-            </mat-select>
-            <span class="value-readonly"></span>
-      
-            <span class="key" [textContent]="'OUTPUT_ENCODING' | localize"></span>
-            <mat-select class="dropdown-container" [value]="lightPresetClone.outputEncoding">
-              @for (encoding of encodings | keys; track encoding) {
-                <mat-option [value]="encoding.key" (click)="lightPresetClone.outputEncoding = encoding.value">
-                  {{ encoding.key }}
-                </mat-option>
-              }
-            </mat-select>
-            <span class="value-readonly"></span>
-      
-            <span class="key" [textContent]="'TONE_MAPPING_EXPOSURE' | localize"></span>
-            <mat-slider class="value" thumbLabel min="0" max="3" step="0.1" [(ngModel)]="lightPresetClone.toneMappingExposure"><input matSliderThumb [value]="lightPresetClone.toneMappingExposure" /></mat-slider>
-            <input matInput type="number" [step]="0.1" [placeholder]="1" [value]="lightPresetClone.toneMappingExposure" [(ngModel)]="lightPresetClone.toneMappingExposure">
-      
-            <span class="key" [textContent]="'PHYSICALLY_CORRECT_LIGHTS' | localize"></span>
-            <mat-checkbox class="value" [(ngModel)]="lightPresetClone.physicallyCorrectLights"></mat-checkbox>
-            <span class="value-readonly"></span>
-      
-            <span class="key" [textContent]="'DEFAULT' | localize"></span>
-            <mat-checkbox class="value" [(ngModel)]="lightPresetClone.default"></mat-checkbox>
-            <span class="value-readonly"></span>
-      
-            <span class="key" [textContent]="'STANDALONE' | localize"></span>
-            <mat-checkbox class="value" [(ngModel)]="lightPresetClone.standalone"></mat-checkbox>
-            <span class="value-readonly"></span>
-          </div>
-        </div>
-        <div class="button-wrapper">
-          <button mat-button class="custom-button" (click)="cancel()">
-            <mat-icon class="homedecorator-material-icons" aria-hidden="true">cancel</mat-icon>
-            {{ 'CANCEL' | localize}}
-          </button>
-          <button mat-button class="custom-button" (click)="save()">
-            <mat-icon class="homedecorator-material-icons" aria-hidden="true">save</mat-icon>
-            {{ 'SAVE' | localize}}
-          </button>
-        </div>
-      </div>
+            args: [{ selector: 'edit-lightplan', template: `
+      <div class="edit-popup">
+        <div class="title-bar">
+          <div class="title-description" [textContent]="'EDIT' | localize"></div>
+        </div>
+        <div class="edit-popup-wrapper">
+          <mat-form-field class="full-width">
+            <mat-label [textContent]="'NAME' | localize"></mat-label>
+            <input matInput [(ngModel)]="lightPresetClone.name">
+          </mat-form-field>
+          <mat-form-field class="full-width">
+            <mat-label [textContent]="'GROUP' | localize"></mat-label>
+            <input matInput [(ngModel)]="lightPresetClone.group">
+          </mat-form-field>
+          <div class="key-value-grid">
+            <span class="key" [textContent]="'NAVIGATOR_TYPE' | localize"></span>
+            <mat-select class="dropdown-container" [value]="lightPresetClone.navigatorType" (keydown)="handleSelectKeyDown($event, 'navigatorType')">
+              @for (navigatorType of navigatorTypes | keys; track navigatorType) {
+                <mat-option [value]="navigatorType.key" (click)="lightPresetClone.navigatorType = navigatorType.value">
+                  {{ navigatorType.key }}
+                </mat-option>
+              }
+            </mat-select>
+            <span class="value-readonly"></span>
+      
+            <span class="key" [textContent]="'SHADOW_MAP_TYPE' | localize"></span>
+            <mat-select class="dropdown-container" [value]="lightPresetClone.shadowMapType">
+              @for (mapType of shadowMapTypes | keys; track mapType) {
+                <mat-option [value]="mapType.key" (click)="lightPresetClone.shadowMapType = mapType.value">
+                  {{ mapType.key }}
+                </mat-option>
+              }
+            </mat-select>
+            <span class="value-readonly"></span>
+      
+            <span class="key" [textContent]="'OUTPUT_ENCODING' | localize"></span>
+            <mat-select class="dropdown-container" [value]="lightPresetClone.outputEncoding">
+              @for (encoding of encodings | keys; track encoding) {
+                <mat-option [value]="encoding.key" (click)="lightPresetClone.outputEncoding = encoding.value">
+                  {{ encoding.key }}
+                </mat-option>
+              }
+            </mat-select>
+            <span class="value-readonly"></span>
+      
+            <span class="key" [textContent]="'TONE_MAPPING_EXPOSURE' | localize"></span>
+            <mat-slider class="value" thumbLabel min="0" max="3" step="0.1" [(ngModel)]="lightPresetClone.toneMappingExposure"><input matSliderThumb [value]="lightPresetClone.toneMappingExposure" /></mat-slider>
+            <input matInput type="number" [step]="0.1" [placeholder]="1" [value]="lightPresetClone.toneMappingExposure" [(ngModel)]="lightPresetClone.toneMappingExposure">
+      
+            <span class="key" [textContent]="'PHYSICALLY_CORRECT_LIGHTS' | localize"></span>
+            <mat-checkbox class="value" [(ngModel)]="lightPresetClone.physicallyCorrectLights"></mat-checkbox>
+            <span class="value-readonly"></span>
+      
+            <span class="key" [textContent]="'DEFAULT' | localize"></span>
+            <mat-checkbox class="value" [(ngModel)]="lightPresetClone.default"></mat-checkbox>
+            <span class="value-readonly"></span>
+      
+            <span class="key" [textContent]="'STANDALONE' | localize"></span>
+            <mat-checkbox class="value" [(ngModel)]="lightPresetClone.standalone"></mat-checkbox>
+            <span class="value-readonly"></span>
+          </div>
+        </div>
+        <div class="button-wrapper">
+          <button mat-button class="custom-button" (click)="cancel()">
+            <mat-icon class="homedecorator-material-icons" aria-hidden="true">cancel</mat-icon>
+            {{ 'CANCEL' | localize}}
+          </button>
+          <button mat-button class="custom-button" (click)="save()">
+            <mat-icon class="homedecorator-material-icons" aria-hidden="true">save</mat-icon>
+            {{ 'SAVE' | localize}}
+          </button>
+        </div>
+      </div>
       `, standalone: false, styles: [":host .edit-wrapper{display:flex;flex-direction:row;align-items:center}:host .custom-button{font-size:11px;border:1px solid #3760a1;border-radius:25px}:host .edit-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:1px 1px 3px 2px #0101014d;background:#fff;display:flex;flex-direction:column;z-index:905}:host .edit-popup .title-bar{display:flex;justify-content:space-between;align-items:center;height:40px;background:#3760a1;color:#fff;padding-left:10px}:host .edit-popup .title-bar .title-bar-move{display:flex;flex-basis:100%;align-items:center}:host .edit-popup .title-bar .title-bar-move .title-description{-webkit-user-select:none;user-select:none}:host .edit-popup .title-bar mat-icon{color:#fff}:host .edit-popup .edit-popup-wrapper{padding:10px;font-size:12px;overflow-y:auto}:host .edit-popup .button-wrapper{display:flex;align-items:center;justify-content:flex-end;height:60px;padding:10px;bottom:0;right:0}:host .edit-popup .button-wrapper .custom-button:not(last-child){margin-right:10px}:host .edit-popup .full-width{width:100%}:host .edit-popup .key-value-grid{display:grid;grid-template-columns:40% 50% 10%;grid-auto-rows:30px}:host .edit-popup .key-value-grid .key,:host .edit-popup .key-value-grid .value,:host .edit-popup .key-value-grid .value-readonly{align-self:center}:host .edit-popup .key-value-grid mat-slider{height:30px}:host .edit-popup .key-value-grid ::ng-deep .mat-slider-horizontal .mat-slider-wrapper{top:50%}:host .dropdown-container{display:flex;flex-direction:column;justify-content:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { lightPreset: [{
                 type: Input
@@ -35330,7 +35449,7 @@ class LightplanComponent {
           (cancelClick)="showPlanEditPopup = false"
         ></edit-lightplan>
       }
-      `, isInline: true, styles: [":host.popup-showing .lightplan-wrapper{opacity:.1!important}:host.show{display:flex}:host .lightplan-wrapper{opacity:1;position:fixed;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:1px 1px 3px 2px #0101014d;z-index:904}:host .lightplan-wrapper .scene-lights{max-height:300px;overflow-y:auto}:host .title-bar{display:flex;justify-content:flex-end;background:#3760a1}:host .title-bar mat-icon{color:#fff}:host .title-bar .title-bar-move{display:flex;flex-basis:100%}:host .content-wrapper{font-size:14px;padding:15px;background:#fff;min-height:400px;min-width:500px;display:flex;flex-direction:column;max-height:500px;overflow-y:auto}:host .section:not(last-child){margin-bottom:20px}:host .button-wrapper{display:flex;height:60px;align-items:center;justify-content:flex-end}:host .edit-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between}:host .edit-button-wrapper{display:flex}:host h4{margin:10px 0}:host .edit-lightplan-wrapper{display:flex}:host .light-preset-selection{display:flex}:host .button-row{display:flex}:host .add-light{font-size:11px;border:1px solid #3760a1;border-radius:25px}:host .add-light:not(last-child){margin-right:5px}:host .dropdown-container{align-self:center}:host .section-row{display:flex;flex-direction:row;justify-content:space-between}::ng-deep .cdk-overlay-container .mat-mdc-select-panel .mat-option-text{display:flex;justify-content:space-between;align-items:center}\n"], dependencies: [{ kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i12.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EditLightComponent, selector: "edit-light", inputs: ["light"], outputs: ["okClick", "cancelClick"] }, { kind: "component", type: EditLightplanComponent, selector: "edit-lightplan", inputs: ["lightPreset"], outputs: ["saveClick", "cancelClick"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+      `, isInline: true, styles: [":host.popup-showing .lightplan-wrapper{opacity:.1!important}:host.show{display:flex}:host .lightplan-wrapper{opacity:1;position:fixed;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:1px 1px 3px 2px #0101014d;z-index:904}:host .lightplan-wrapper .scene-lights{max-height:300px;overflow-y:auto}:host .title-bar{display:flex;justify-content:flex-end;background:#3760a1}:host .title-bar mat-icon{color:#fff}:host .title-bar .title-bar-move{display:flex;flex-basis:100%}:host .content-wrapper{font-size:14px;padding:15px;background:#fff;min-height:400px;min-width:500px;display:flex;flex-direction:column;max-height:500px;overflow-y:auto}:host .section:not(last-child){margin-bottom:20px}:host .button-wrapper{display:flex;height:60px;align-items:center;justify-content:flex-end}:host .edit-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between}:host .edit-button-wrapper{display:flex}:host h4{margin:10px 0}:host .edit-lightplan-wrapper{display:flex}:host .light-preset-selection{display:flex}:host .button-row{display:flex}:host .add-light{font-size:11px;border:1px solid #3760a1;border-radius:25px}:host .add-light:not(last-child){margin-right:5px}:host .dropdown-container{align-self:center}:host .section-row{display:flex;flex-direction:row;justify-content:space-between}::ng-deep .cdk-overlay-container .mat-mdc-select-panel .mat-option-text{display:flex;justify-content:space-between;align-items:center}\n"], dependencies: [{ kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i12.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EditLightComponent, selector: "edit-light", inputs: ["light"], outputs: ["okClick", "cancelClick"] }, { kind: "component", type: EditLightplanComponent, selector: "edit-lightplan", inputs: ["lightPreset"], outputs: ["saveClick", "cancelClick"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('showHideDialog', [
                 state('void', style({ opacity: 0 })),
                 state('*', style({ opacity: 1 })),
@@ -35634,7 +35753,7 @@ class SceneOptionsComponent {
           </div>
         }
       </div>
-      `, isInline: true, styles: [":host{margin:0 5px}:host .buttons-wrapper{display:flex;flex-direction:row;align-items:center;column-gap:5px}:host .button-wrapper{position:relative}:host .children-wrapper{display:flex;flex-direction:column;position:absolute;transform:translateY(calc(-100% - 50px));z-index:999}:host button{z-index:1}:host button img{pointer-events:none;width:100%;height:100%}:host button.active{box-shadow:none}:host button.circle{width:50px;height:50px;border-radius:50%}:host button.circle img{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+      `, isInline: true, styles: [":host{margin:0 5px}:host .buttons-wrapper{display:flex;flex-direction:row;align-items:center;column-gap:5px}:host .button-wrapper{position:relative}:host .children-wrapper{display:flex;flex-direction:column;position:absolute;transform:translateY(calc(-100% - 50px));z-index:999}:host button{z-index:1}:host button img{pointer-events:none;width:100%;height:100%}:host button.active{box-shadow:none}:host button.circle{width:50px;height:50px;border-radius:50%}:host button.circle img{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('showHideChild', [
                 state('true', style({ 'opacity': '1', 'visibility': 'visible' })),
                 state('false', style({ 'opacity': '0', 'visibility': 'hidden' })),
@@ -35715,7 +35834,7 @@ class ArGuiButtonsComponent {
         this._arService.resetPlaneDetection();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ArGuiButtonsComponent, deps: [{ token: HomedecoratorIconCacheService }, { token: ArService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ArGuiButtonsComponent, isStandalone: false, selector: "ar-gui-buttons", ngImport: i0, template: "<div class=\"buttons-container\">\r\n  <div class=\"button-container\" xmlns=\"http://www.w3.org/1999/html\">\r\n    <button mat-mini-fab class=\"button-icon back\" (click)=\"endSession()\">\r\n      <co-icon class=\"icon rotated\" [iconData]=\"iconService.getIcon(icon.Cross)\"></co-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <!--div class=\"button-container\" xmlns=\"http://www.w3.org/1999/html\">\r\n    <button class=\"button-icon\" mat-mini-fab (click)=\"showConfigurator()\">\r\n      <co-icon class=\"icon\" [iconData]=\"iconService.getIcon(icon.MagicWand)\"></co-icon>\r\n    </button>\r\n  </div-->\r\n</div>\r\n", styles: [".buttons-container{position:absolute;display:flex;right:15px;top:15px}.button-container{padding:20px}.button-icon{text-align:-webkit-center}.back{padding-right:3px}.icon{width:65%;height:65%;fill:#fff}.rotated{transform:rotate(90deg)}\n"], dependencies: [{ kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ArGuiButtonsComponent, isStandalone: false, selector: "ar-gui-buttons", ngImport: i0, template: "<div class=\"buttons-container\">\r\n  <div class=\"button-container\" xmlns=\"http://www.w3.org/1999/html\">\r\n    <button mat-mini-fab class=\"button-icon back\" (click)=\"endSession()\">\r\n      <co-icon class=\"icon rotated\" [iconData]=\"iconService.getIcon(icon.Cross)\"></co-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <!--div class=\"button-container\" xmlns=\"http://www.w3.org/1999/html\">\r\n    <button class=\"button-icon\" mat-mini-fab (click)=\"showConfigurator()\">\r\n      <co-icon class=\"icon\" [iconData]=\"iconService.getIcon(icon.MagicWand)\"></co-icon>\r\n    </button>\r\n  </div-->\r\n</div>\r\n", styles: [".buttons-container{position:absolute;display:flex;right:15px;top:15px}.button-container{padding:20px}.button-icon{text-align:-webkit-center}.back{padding-right:3px}.icon{width:65%;height:65%;fill:#fff}.rotated{transform:rotate(90deg)}\n"], dependencies: [{ kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ArGuiButtonsComponent, decorators: [{
             type: Component,
@@ -35865,7 +35984,7 @@ class ArGuiRootComponent {
         return this._arService.showMovePhoneAnimation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ArGuiRootComponent, deps: [{ token: ViewModeService }, { token: ArService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ArGuiRootComponent, isStandalone: false, selector: "ar-gui-root", ngImport: i0, template: "<div id=\"ar-root\">\r\n  @if (inARViewMode()) {\r\n    <div>\r\n      <!-- TODO fix this icon -->\r\n      <!--    <div *ngIf=\"showMovePhoneAnimation()\" class=\"icon-wrapper\">-->\r\n      <!--      <mat-icon class=\"homedecorator-material-icons\" svgIcon=\"move-phone-ar\" class=\"move-phone-icon\"></mat-icon>-->\r\n    <!--    </div>-->\r\n    <ar-gui-buttons></ar-gui-buttons>\r\n    <ar-gui-notifications></ar-gui-notifications>\r\n    <ar-gui-configurator></ar-gui-configurator>\r\n    @if (showContextMenu()) {\r\n      <ar-gui-context-menu>\r\n        <button mat-mini-fab (click)=\"showConfigurator()\"\r\n          matTooltip=\"{{'CONFIGURE' | localize}}\">\r\n          <mat-icon class=\"homedecorator-material-icons\" svgIcon=\"magic-wand\"></mat-icon>\r\n        </button>\r\n      </ar-gui-context-menu>\r\n    }\r\n  </div>\r\n}\r\n</div>\r\n", styles: [":host .icon-wrapper{display:flex;width:100vw;height:100vh;justify-content:center}:host .move-phone-icon{filter:invert(1);align-self:center;padding-top:20px;animation:myAnimation 5s infinite}@keyframes myAnimation{0%{transform:scale(3) translate(0)}25%{transform:scale(3) translate(50%)}50%{transform:scale(3) translate(0)}75%{transform:scale(3) translate(-50%)}to{transform:scale(3) translate(0)}}\n"], dependencies: [{ kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ArGuiButtonsComponent, selector: "ar-gui-buttons" }, { kind: "component", type: ArGuiConfiguratorComponent, selector: "ar-gui-configurator" }, { kind: "component", type: ArGuiContextMenuComponent, selector: "ar-gui-context-menu" }, { kind: "component", type: ArGuiNotificationsComponent, selector: "ar-gui-notifications" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ArGuiRootComponent, isStandalone: false, selector: "ar-gui-root", ngImport: i0, template: "<div id=\"ar-root\">\r\n  @if (inARViewMode()) {\r\n    <div>\r\n      <!-- TODO fix this icon -->\r\n      <!--    <div *ngIf=\"showMovePhoneAnimation()\" class=\"icon-wrapper\">-->\r\n      <!--      <mat-icon class=\"homedecorator-material-icons\" svgIcon=\"move-phone-ar\" class=\"move-phone-icon\"></mat-icon>-->\r\n    <!--    </div>-->\r\n    <ar-gui-buttons></ar-gui-buttons>\r\n    <ar-gui-notifications></ar-gui-notifications>\r\n    <ar-gui-configurator></ar-gui-configurator>\r\n    @if (showContextMenu()) {\r\n      <ar-gui-context-menu>\r\n        <button mat-mini-fab (click)=\"showConfigurator()\"\r\n          matTooltip=\"{{'CONFIGURE' | localize}}\">\r\n          <mat-icon class=\"homedecorator-material-icons\" svgIcon=\"magic-wand\"></mat-icon>\r\n        </button>\r\n      </ar-gui-context-menu>\r\n    }\r\n  </div>\r\n}\r\n</div>\r\n", styles: [":host .icon-wrapper{display:flex;width:100vw;height:100vh;justify-content:center}:host .move-phone-icon{filter:invert(1);align-self:center;padding-top:20px;animation:myAnimation 5s infinite}@keyframes myAnimation{0%{transform:scale(3) translate(0)}25%{transform:scale(3) translate(50%)}50%{transform:scale(3) translate(0)}75%{transform:scale(3) translate(-50%)}to{transform:scale(3) translate(0)}}\n"], dependencies: [{ kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ArGuiButtonsComponent, selector: "ar-gui-buttons" }, { kind: "component", type: ArGuiConfiguratorComponent, selector: "ar-gui-configurator" }, { kind: "component", type: ArGuiContextMenuComponent, selector: "ar-gui-context-menu" }, { kind: "component", type: ArGuiNotificationsComponent, selector: "ar-gui-notifications" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ArGuiRootComponent, decorators: [{
             type: Component,
@@ -36043,7 +36162,7 @@ class Core3dComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Core3dComponent, deps: [{ token: ViewModeService }, { token: HomedecoratorSettingsService }, { token: XrService }, { token: VrService }, { token: PresetsService }, { token: MessageBusService }, { token: ConfigurationService }, { token: CameraService }, { token: BluePrintService }, { token: RoomService }, { token: ItemService }, { token: i1$2.MatDialog }, { token: HomedecoratorIconCacheService }, { token: ScreenSizeAnalysisService }, { token: WallMeasurementsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Core3dComponent, isStandalone: false, selector: "rp-core3d", host: { listeners: { "document:mouseup": "handledocumentMouseUp($event)", "document:mousemove": "handleDocumentMouseDown($event)" }, properties: { "class": "this.layerClass", "class.disable-mouse": "this._disableMouse" } }, viewQueries: [{ propertyName: "toolbarIconTopView", first: true, predicate: ["toolbarIconTopView"], descendants: true, static: true }, { propertyName: "toolbarIconWalkThrough", first: true, predicate: ["toolbarIconWalkThrough"], descendants: true, static: true }, { propertyName: "toolbarIconVR", first: true, predicate: ["toolbarIconVR"], descendants: true, static: true }], ngImport: i0, template: "<development-selected-object></development-selected-object>\r\n@if (!settingsService.settings.options.development) {\r\n  <div class=\"viewer\" scene></div>\r\n}\r\n@if (settingsService.settings.options.development) {\r\n  <div class=\"viewer\" scene development></div>\r\n}\r\n@if (show3DWaterMark) {\r\n  <div class=\"powered-by-wrapper\">\r\n    <co-icon [iconData]=\"iconService.getIcon(icon.CitPoweredWhite)\"></co-icon>\r\n  </div>\r\n}\r\n@if (showLightplan) {\r\n  <lightplan></lightplan>\r\n}\r\n@if (showSceneControls) {\r\n  <rp-scene-control></rp-scene-control>\r\n}\r\n<ng-template #toolbarIconTopView>\r\n  <rp-toolbar-icon\r\n    matIcon=\"camera_topdown\"\r\n    [disabled]=\"!hasRooms() || viewModeService.viewMode === viewModes.TopView || !threedOptionsAvailable\"\r\n    (onClick)=\"setViewModeTopView()\"\r\n    tooltip=\"{{iconName.TopView | localize}}\"\r\n    [showLabel]=\"phoneSizeScreen\">\r\n  </rp-toolbar-icon>\r\n</ng-template>\r\n\r\n<ng-template #toolbarIconWalkThrough>\r\n  <rp-toolbar-icon\r\n    matIcon=\"street_view\"\r\n    [disabled]=\"!hasRooms() || viewModeService.viewMode === viewModes.WalkThrough || !threedOptionsAvailable\"\r\n    (onClick)=\"setViewModeWalkThrough()\"\r\n    tooltip=\"{{iconName.WalkThrough | localize}}\"\r\n    [showLabel]=\"phoneSizeScreen\">\r\n  </rp-toolbar-icon>\r\n</ng-template>\r\n\r\n<ng-template #toolbarIconVR>\r\n  @if (xrService.vrSupported) {\r\n    <rp-toolbar-icon\r\n      svgIcon=\"google-cardboard-orange\"\r\n      [disabled]=\"!hasRooms() || viewModeService.viewMode === viewModes.VR\"\r\n      (onClick)=\"setViewModeVr()\"\r\n      tooltip=\"{{iconName.VR | localize}}\">\r\n    </rp-toolbar-icon>\r\n  }\r\n</ng-template>\r\n\r\n<rp-zoom-controls\r\n  [visible]=\"viewModeService.viewMode === viewModes.RoomPlan3D\"\r\n  (onZoomIn)=\"cameraZoomIn($event)\"\r\n  (onZoomReset)=\"cameraCenter($event)\"\r\n  (onZoomOut)=\"cameraZoomOut($event)\"\r\n></rp-zoom-controls>\r\n\r\n<div id=\"controls\" class=\"controls-bottom\">\r\n\r\n  @if (viewModeService.viewMode === viewModes.RoomPlan3D ||\r\n    viewModeService.viewMode === viewModes.WalkThrough ||\r\n    viewModeService.viewMode === viewModes.TopView) {\r\n    <rp-render-controls\r\n      >\r\n    </rp-render-controls>\r\n  }\r\n  <scene-options></scene-options>\r\n\r\n  @if (showCameraControlButtons && viewModeService.viewMode !== viewModes.FloorPlan2D) {\r\n    <div class=\"controls-directions desktop\">\r\n      <button class=\"control-left\" mat-raised-button (click)=\"cameraPanLeft($event)\" title=\"{{'LEFT' | localize}}\"\r\n        #controls>\r\n        <mat-icon class=\"homedecorator-material-icons\">arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"control-right\" mat-raised-button (click)=\"cameraPanRight($event)\" title=\"{{'RIGHT' | localize}}\">\r\n        <mat-icon class=\"homedecorator-material-icons\">arrow_forward</mat-icon>\r\n      </button>\r\n      <button class=\"control-up\" mat-raised-button (click)=\"cameraPanUp($event)\" title=\"{{'UP' | localize}}\">\r\n        <mat-icon class=\"homedecorator-material-icons\">arrow_upward</mat-icon>\r\n      </button>\r\n      <button class=\"control-down\" mat-raised-button (click)=\"cameraPanDown($event)\" title=\"{{'DOWN' | localize}}\">\r\n        <mat-icon class=\"homedecorator-material-icons\">arrow_downward</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n@if (viewModeService.viewMode === viewModes.WalkThrough && showCameraControls) {\r\n  <div\r\n    class=\"full-screen\"\r\n    >\r\n    <rp-walkthrough-camera-controls></rp-walkthrough-camera-controls>\r\n  </div>\r\n}\r\n\r\n<ar-gui-root></ar-gui-root>\r\n", styles: [":host{display:block}:host.disable-mouse #controls{pointer-events:none}:host .powered-by-wrapper{pointer-events:none;position:absolute;bottom:0;left:50%;transform:translate(-50%);width:30%;height:30px;background:#0000001a;border-radius:10px;padding:10px;opacity:.4}:host .powered-by-wrapper ::ng-deep co-icon{width:100%;height:100%}:host .powered-by-wrapper ::ng-deep co-icon svg{height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SelectedObjectComponent$1, selector: "development-selected-object" }, { kind: "directive", type: DevelopmentDirective, selector: "[development]" }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ToolbarIconComponent, selector: "rp-toolbar-icon", inputs: ["matIcon", "svgIcon", "tooltip", "disabled", "showLabel"], outputs: ["onClick"] }, { kind: "component", type: ZoomControlsComponent, selector: "rp-zoom-controls", inputs: ["visible"], outputs: ["onZoomIn", "onZoomReset", "onZoomOut"] }, { kind: "component", type: RenderControlsComponent, selector: "rp-render-controls" }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: SceneDirective, selector: "[scene]" }, { kind: "component", type: SceneControlComponent, selector: "rp-scene-control" }, { kind: "component", type: WalkthroughCameraControlsComponent, selector: "rp-walkthrough-camera-controls", inputs: ["fov", "aspect", "focus"] }, { kind: "component", type: LightplanComponent, selector: "lightplan" }, { kind: "component", type: SceneOptionsComponent, selector: "scene-options" }, { kind: "component", type: ArGuiRootComponent, selector: "ar-gui-root" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Core3dComponent, isStandalone: false, selector: "rp-core3d", host: { listeners: { "document:mouseup": "handledocumentMouseUp($event)", "document:mousemove": "handleDocumentMouseDown($event)" }, properties: { "class": "this.layerClass", "class.disable-mouse": "this._disableMouse" } }, viewQueries: [{ propertyName: "toolbarIconTopView", first: true, predicate: ["toolbarIconTopView"], descendants: true, static: true }, { propertyName: "toolbarIconWalkThrough", first: true, predicate: ["toolbarIconWalkThrough"], descendants: true, static: true }, { propertyName: "toolbarIconVR", first: true, predicate: ["toolbarIconVR"], descendants: true, static: true }], ngImport: i0, template: "<development-selected-object></development-selected-object>\r\n@if (!settingsService.settings.options.development) {\r\n  <div class=\"viewer\" scene></div>\r\n}\r\n@if (settingsService.settings.options.development) {\r\n  <div class=\"viewer\" scene development></div>\r\n}\r\n@if (show3DWaterMark) {\r\n  <div class=\"powered-by-wrapper\">\r\n    <co-icon [iconData]=\"iconService.getIcon(icon.CitPoweredWhite)\"></co-icon>\r\n  </div>\r\n}\r\n@if (showLightplan) {\r\n  <lightplan></lightplan>\r\n}\r\n@if (showSceneControls) {\r\n  <rp-scene-control></rp-scene-control>\r\n}\r\n<ng-template #toolbarIconTopView>\r\n  <rp-toolbar-icon\r\n    matIcon=\"camera_topdown\"\r\n    [disabled]=\"!hasRooms() || viewModeService.viewMode === viewModes.TopView || !threedOptionsAvailable\"\r\n    (onClick)=\"setViewModeTopView()\"\r\n    tooltip=\"{{iconName.TopView | localize}}\"\r\n    [showLabel]=\"phoneSizeScreen\">\r\n  </rp-toolbar-icon>\r\n</ng-template>\r\n\r\n<ng-template #toolbarIconWalkThrough>\r\n  <rp-toolbar-icon\r\n    matIcon=\"street_view\"\r\n    [disabled]=\"!hasRooms() || viewModeService.viewMode === viewModes.WalkThrough || !threedOptionsAvailable\"\r\n    (onClick)=\"setViewModeWalkThrough()\"\r\n    tooltip=\"{{iconName.WalkThrough | localize}}\"\r\n    [showLabel]=\"phoneSizeScreen\">\r\n  </rp-toolbar-icon>\r\n</ng-template>\r\n\r\n<ng-template #toolbarIconVR>\r\n  @if (xrService.vrSupported) {\r\n    <rp-toolbar-icon\r\n      svgIcon=\"google-cardboard-orange\"\r\n      [disabled]=\"!hasRooms() || viewModeService.viewMode === viewModes.VR\"\r\n      (onClick)=\"setViewModeVr()\"\r\n      tooltip=\"{{iconName.VR | localize}}\">\r\n    </rp-toolbar-icon>\r\n  }\r\n</ng-template>\r\n\r\n<rp-zoom-controls\r\n  [visible]=\"viewModeService.viewMode === viewModes.RoomPlan3D\"\r\n  (onZoomIn)=\"cameraZoomIn($event)\"\r\n  (onZoomReset)=\"cameraCenter($event)\"\r\n  (onZoomOut)=\"cameraZoomOut($event)\"\r\n></rp-zoom-controls>\r\n\r\n<div id=\"controls\" class=\"controls-bottom\">\r\n\r\n  @if (viewModeService.viewMode === viewModes.RoomPlan3D ||\r\n    viewModeService.viewMode === viewModes.WalkThrough ||\r\n    viewModeService.viewMode === viewModes.TopView) {\r\n    <rp-render-controls\r\n      >\r\n    </rp-render-controls>\r\n  }\r\n  <scene-options></scene-options>\r\n\r\n  @if (showCameraControlButtons && viewModeService.viewMode !== viewModes.FloorPlan2D) {\r\n    <div class=\"controls-directions desktop\">\r\n      <button class=\"control-left\" mat-raised-button (click)=\"cameraPanLeft($event)\" title=\"{{'LEFT' | localize}}\"\r\n        #controls>\r\n        <mat-icon class=\"homedecorator-material-icons\">arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"control-right\" mat-raised-button (click)=\"cameraPanRight($event)\" title=\"{{'RIGHT' | localize}}\">\r\n        <mat-icon class=\"homedecorator-material-icons\">arrow_forward</mat-icon>\r\n      </button>\r\n      <button class=\"control-up\" mat-raised-button (click)=\"cameraPanUp($event)\" title=\"{{'UP' | localize}}\">\r\n        <mat-icon class=\"homedecorator-material-icons\">arrow_upward</mat-icon>\r\n      </button>\r\n      <button class=\"control-down\" mat-raised-button (click)=\"cameraPanDown($event)\" title=\"{{'DOWN' | localize}}\">\r\n        <mat-icon class=\"homedecorator-material-icons\">arrow_downward</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n@if (viewModeService.viewMode === viewModes.WalkThrough && showCameraControls) {\r\n  <div\r\n    class=\"full-screen\"\r\n    >\r\n    <rp-walkthrough-camera-controls></rp-walkthrough-camera-controls>\r\n  </div>\r\n}\r\n\r\n<ar-gui-root></ar-gui-root>\r\n", styles: [":host{display:block}:host.disable-mouse #controls{pointer-events:none}:host .powered-by-wrapper{pointer-events:none;position:absolute;bottom:0;left:50%;transform:translate(-50%);width:30%;height:30px;background:#0000001a;border-radius:10px;padding:10px;opacity:.4}:host .powered-by-wrapper ::ng-deep co-icon{width:100%;height:100%}:host .powered-by-wrapper ::ng-deep co-icon svg{height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SelectedObjectComponent$1, selector: "development-selected-object" }, { kind: "directive", type: DevelopmentDirective, selector: "[development]" }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ToolbarIconComponent, selector: "rp-toolbar-icon", inputs: ["matIcon", "svgIcon", "tooltip", "disabled", "showLabel"], outputs: ["onClick"] }, { kind: "component", type: ZoomControlsComponent, selector: "rp-zoom-controls", inputs: ["visible"], outputs: ["onZoomIn", "onZoomReset", "onZoomOut"] }, { kind: "component", type: RenderControlsComponent, selector: "rp-render-controls" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: SceneDirective, selector: "[scene]" }, { kind: "component", type: SceneControlComponent, selector: "rp-scene-control" }, { kind: "component", type: WalkthroughCameraControlsComponent, selector: "rp-walkthrough-camera-controls", inputs: ["fov", "aspect", "focus"] }, { kind: "component", type: LightplanComponent, selector: "lightplan" }, { kind: "component", type: SceneOptionsComponent, selector: "scene-options" }, { kind: "component", type: ArGuiRootComponent, selector: "ar-gui-root" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Core3dComponent, decorators: [{
             type: Component,
@@ -36136,7 +36255,7 @@ class WallLengthInputComponent {
         this._messageService.emit(MessageType.WallLengthInputValueChanged, this.length);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WallLengthInputComponent, deps: [{ token: MessageBusService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: WallLengthInputComponent, isStandalone: false, selector: "wall-length-input", ngImport: i0, template: "@if (show) {\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"auto center\">\r\n    <mat-form-field fxFlex=\"grow\">\r\n      <input\r\n        matInput\r\n        type=\"number\"\r\n        [placeholder]=\"'LENGTH' | localize\"\r\n        [inputAutofocus]=\"show\"\r\n        [(ngModel)]=\"length\"\r\n        (keydown.enter)=\"onOkButtonClick()\"\r\n        >\r\n      </mat-form-field>\r\n      <button mat-icon-button\r\n        [disabled]=\"!length\"\r\n        (click)=\"onOkButtonClick()\"\r\n        >\r\n        <mat-icon class=\"homedecorator-material-icons size-16\">check</mat-icon>\r\n      </button>\r\n      <button mat-icon-button\r\n        [disabled]=\"!length\"\r\n        (click)=\"onCancelButtonClick()\"\r\n        (dragover)=\"onCancelButtonClick()\"\r\n        >\r\n        <mat-icon class=\"homedecorator-material-icons size-16\">cancel</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n", styles: [":host{position:absolute;top:80px;left:100px}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[inputAutofocus]", inputs: ["inputAutofocus"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: WallLengthInputComponent, isStandalone: false, selector: "wall-length-input", ngImport: i0, template: "@if (show) {\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"auto center\">\r\n    <mat-form-field fxFlex=\"grow\">\r\n      <input\r\n        matInput\r\n        type=\"number\"\r\n        [placeholder]=\"'LENGTH' | localize\"\r\n        [inputAutofocus]=\"show\"\r\n        [(ngModel)]=\"length\"\r\n        (keydown.enter)=\"onOkButtonClick()\"\r\n        >\r\n      </mat-form-field>\r\n      <button mat-icon-button\r\n        [disabled]=\"!length\"\r\n        (click)=\"onOkButtonClick()\"\r\n        >\r\n        <mat-icon class=\"homedecorator-material-icons size-16\">check</mat-icon>\r\n      </button>\r\n      <button mat-icon-button\r\n        [disabled]=\"!length\"\r\n        (click)=\"onCancelButtonClick()\"\r\n        (dragover)=\"onCancelButtonClick()\"\r\n        >\r\n        <mat-icon class=\"homedecorator-material-icons size-16\">cancel</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n", styles: [":host{position:absolute;top:80px;left:100px}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[inputAutofocus]", inputs: ["inputAutofocus"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WallLengthInputComponent, decorators: [{
             type: Component,
@@ -36240,11 +36359,6 @@ class FloorplannerComponent {
         this._lastNode = null;
         this._subs = [];
         this._selectedFloor = null;
-        this._diagramBackgroundScale = 1;
-        this._diagramBackgroundCurrentScale = 100;
-        this._diagramBackgroundActiveZoom = false;
-        this._diagramBackgroundAlpha = 0.5;
-        this._showDiagramBackground = true;
         this._readyToDraw = false;
         this._needsRedraw = false;
         Object.keys(this._configToSync).forEach((key) => {
@@ -36277,7 +36391,7 @@ class FloorplannerComponent {
                 const dataUrl = this._canvas.toDataURL('image/jpeg');
                 FileUtils.DownloadFromDataUri(dataUrl, `MyRoomplan${new Date().toISOString()}.jpeg`);
             }
-        }), this._messageBusService.subscribe(MessageType.StartWithEmptyRoom, () => this.showStartMessage()), this._messageBusService.subscribe(MessageType.LoadScaledDiagram, (input) => this.setDiagramSettings(input)), this._messageBusService.subscribe(MessageType.ToggleDiagram, () => this.toggleDiagram()));
+        }), this._messageBusService.subscribe(MessageType.StartWithPreset, () => this._clearBackground()), this._messageBusService.subscribe(MessageType.LoadRoomFromPreset, () => this._clearBackground()), this._messageBusService.subscribe(MessageType.LoadRoomFromCloud, () => this._clearBackground()), this._messageBusService.subscribe(MessageType.NewRoom, () => this._clearBackground()), this._messageBusService.subscribe(MessageType.ResetRoomplan, () => this._clearBackground()), this._messageBusService.subscribe(MessageType.LoadScaledDiagram, () => this._clearBackground()), this._messageBusService.subscribe(MessageType.StartWithEmptyRoom, () => this.showStartMessage()), this._messageBusService.subscribe(MessageType.LoadScaledDiagram, (input) => this.setDiagramSettings(input)), this._messageBusService.subscribe(MessageType.ToggleDiagram, () => this.toggleDiagram()));
         this.touchMode = this._configurationService.getValue(ConfigurationKey.EnableTouch);
         this.currentDimensioning = this._configurationService.getValue(ConfigurationKey.DimensioningUnit);
         this.currentRoundingDecimals = this._configurationService.getValue(ConfigurationKey.RoundingDecimals);
@@ -36341,10 +36455,13 @@ class FloorplannerComponent {
             this._draw();
         });
     }
-    showStartMessage() {
-        if (this._diagramBackground) {
-            this._diagramBackground.src = '';
+    _clearBackground() {
+        if (this._renderService.diagramBackground) {
+            this._renderService.diagramBackground = undefined;
         }
+    }
+    showStartMessage() {
+        this._clearBackground();
         this._bluePrintService.reset();
         this.showStartingMessages = true;
         this._requestDraw();
@@ -36370,10 +36487,9 @@ class FloorplannerComponent {
         if (!this._coordinatesService.canZoomIn) {
             return;
         }
-        this._clear();
         this._coordinatesService.zoomIn();
-        this._diagramBackgroundScale *= this._coordinatesService.scalingFactor;
-        this._diagramBackgroundActiveZoom = true;
+        this._renderService.diagramBackgroundScale *= this._coordinatesService.scalingFactor;
+        this._renderService.diagramBackgroundActiveZoom = true;
         this._scale(this._coordinatesService.scalingFactor, this._coordinatesService.scalingFactor);
         this.resizeView();
         this._requestDraw();
@@ -36382,16 +36498,14 @@ class FloorplannerComponent {
         if (!this._coordinatesService.canZoomOut) {
             return;
         }
-        this._clear();
         this._coordinatesService.zoomOut();
-        this._diagramBackgroundScale *= (1 / this._coordinatesService.scalingFactor);
-        this._diagramBackgroundActiveZoom = true;
+        this._renderService.diagramBackgroundScale *= (1 / this._coordinatesService.scalingFactor);
+        this._renderService.diagramBackgroundActiveZoom = true;
         this._scale(1 / this._coordinatesService.scalingFactor, 1 / this._coordinatesService.scalingFactor);
         this.resizeView();
         this._requestDraw();
     }
     zoomReset() {
-        this._clear();
         this._scale(1 / this._viewScale, 1 / this._viewScale);
         this.reset();
     }
@@ -36736,15 +36850,15 @@ class FloorplannerComponent {
         this._coordinatesService.resetOrigin();
         this._viewScale = 100;
         this._bluePrintService.reset();
-        this._diagramBackground = input.background;
-        this._diagramBackgroundHeight = input.backgroundHeight;
-        this._diagramBackgroundWidth = input.backgroundWidth;
-        this._diagramScale = input.scale;
+        this._renderService.diagramBackground = input.background;
+        this._renderService.diagramBackgroundHeight = input.backgroundHeight;
+        this._renderService.diagramBackgroundWidth = input.backgroundWidth;
+        this._renderService.diagramBackgroundScale = input.scale;
         this._cameraZoom = input.cameraZoom;
         this._requestDraw();
     }
     toggleDiagram() {
-        this._showDiagramBackground = !this._showDiagramBackground;
+        this._renderService.showDiagramBackground = !this._renderService.showDiagramBackground;
         this._requestDraw();
     }
     _removeWall() {
@@ -36818,23 +36932,6 @@ class FloorplannerComponent {
         await this._bluePrintService.update();
         this._requestDraw();
     }
-    _drawBackground() {
-        if (this._diagramBackgroundActiveZoom) {
-            if (this._diagramBackgroundCurrentScale <= this._viewScale) {
-                this._diagramBackgroundWidth = this._diagramBackgroundWidth * this._coordinatesService.scalingFactor;
-                this._diagramBackgroundHeight = this._diagramBackgroundHeight * this._coordinatesService.scalingFactor;
-            }
-            else {
-                this._diagramBackgroundWidth = this._diagramBackgroundWidth * (1 / this._coordinatesService.scalingFactor);
-                this._diagramBackgroundHeight = this._diagramBackgroundHeight * (1 / this._coordinatesService.scalingFactor);
-            }
-            this._diagramBackgroundActiveZoom = false;
-        }
-        this._diagramBackgroundCurrentScale = this._viewScale;
-        this._context.globalAlpha = this._diagramBackgroundAlpha;
-        this._context.drawImage(this._diagramBackground, Math.abs(this._coordinatesService.originX) - (this._diagramBackgroundWidth * this._diagramScale / 2), Math.abs(this._coordinatesService.originY) - (this._diagramBackgroundHeight * this._diagramScale / 2), this._diagramBackgroundWidth * this._diagramScale, this._diagramBackgroundHeight * this._diagramScale);
-        this._context.globalAlpha = 1;
-    }
     _handleWindowResize() {
         if (this._canvas) {
             const parent = this._canvas.parentElement;
@@ -36847,11 +36944,6 @@ class FloorplannerComponent {
             this._requestDraw();
         }
     }
-    _clear() {
-        if (this._context && this._canvas) {
-            this._context.clearRect(0, 0, this._canvas.width, this._canvas.height);
-        }
-    }
     _updateWallPosition() {
         if (this._wallLength) {
             const startPoint = this._lastNode;
@@ -37193,7 +37285,7 @@ class FloorplannerComponent {
           {{ 'TAB_ANYWHERE_TO_START' | localize }}
         </div>
       }
-      `, isInline: true, styles: [":host{display:flex;height:100%;width:100%;background:#fff}:host.hidden{visibility:hidden}canvas{width:inherit;height:inherit}.controls-top{pointer-events:none;position:absolute;top:80px;width:100%;display:flex;align-items:center;justify-content:center}.controls-top:not(.disable-mouse)>*{pointer-events:all;margin:0 3px}.controls-top:not(.disable-mouse)>* .mdc-floating-label,.controls-top:not(.disable-mouse)>*.dimensioning-select,.controls-top:not(.disable-mouse)>*.round-select{pointer-events:all}.controls-top .mat-mdc-floating-label.mdc-floating-label{pointer-events:none!important}.controls-top .dimensioning-select,.controls-top .round-select{pointer-events:none;height:38px;width:70px;padding:5px;border:solid 1px rgba(0,0,0,.12);border-radius:3px;background:#fff}.hint{position:absolute;bottom:20px;left:50%;margin-left:-200px;padding:10px 20px;background:#74b77f;border:1px solid #cccccc;border-radius:3px;text-align:center}.mat-button-toggle-checked{color:#fff;background-color:#da9803}.mat-button-toggle-checked co-icon ::ng-deep svg{fill:#fff}.mat-button-toggle-checked co-icon ::ng-deep [fill]{fill:#fff}.mat-button-toggle ::ng-deep .mat-button-toggle-label-content{width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0}.mat-button-toggle ::ng-deep co-icon ::ng-deep{width:24px;height:24px}\n"], dependencies: [{ kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: WallLengthInputComponent, selector: "wall-length-input" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+      `, isInline: true, styles: [":host{display:flex;height:100%;width:100%;background:#fff}:host.hidden{visibility:hidden}canvas{width:inherit;height:inherit}.controls-top{pointer-events:none;position:absolute;top:80px;width:100%;display:flex;align-items:center;justify-content:center}.controls-top:not(.disable-mouse)>*{pointer-events:all;margin:0 3px}.controls-top:not(.disable-mouse)>* .mdc-floating-label,.controls-top:not(.disable-mouse)>*.dimensioning-select,.controls-top:not(.disable-mouse)>*.round-select{pointer-events:all}.controls-top .mat-mdc-floating-label.mdc-floating-label{pointer-events:none!important}.controls-top .dimensioning-select,.controls-top .round-select{pointer-events:none;height:38px;width:70px;padding:5px;border:solid 1px rgba(0,0,0,.12);border-radius:3px;background:#fff}.hint{position:absolute;bottom:20px;left:50%;margin-left:-200px;padding:10px 20px;background:#74b77f;border:1px solid #cccccc;border-radius:3px;text-align:center}.mat-button-toggle-checked{color:#fff;background-color:#da9803}.mat-button-toggle-checked co-icon ::ng-deep svg{fill:#fff}.mat-button-toggle-checked co-icon ::ng-deep [fill]{fill:#fff}.mat-button-toggle ::ng-deep .mat-button-toggle-label-content{width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0}.mat-button-toggle ::ng-deep co-icon ::ng-deep{width:24px;height:24px}\n"], dependencies: [{ kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: WallLengthInputComponent, selector: "wall-length-input" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FloorplannerComponent, decorators: [{
             type: Component,
@@ -37437,7 +37529,7 @@ class MaterialDialogComponent {
           </div>
         }
       </div>
-      `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%}:host .material-textures{padding:20px 0}\n"], dependencies: [{ kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: SelectedChildMaterialTexturesComponent, selector: "selected-child-material-textures", inputs: ["material"], outputs: ["mapChange"] }, { kind: "component", type: SelectedChildMaterialColorComponent, selector: "selected-child-material-color", inputs: ["material"], outputs: ["colorChange"] }, { kind: "component", type: i5.ListOfValuesComponent, selector: "co-list-of-values", inputs: ["model", "multiselect", "showToggleAll", "largeCollection", "displayField", "optionIcon", "collection", "collectionLoadFn", "collectionLoadFnProp", "leftIconData", "searchPlaceholder", "searchDisabled", "showChips"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+      `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%}:host .material-textures{padding:20px 0}\n"], dependencies: [{ kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: SelectedChildMaterialTexturesComponent, selector: "selected-child-material-textures", inputs: ["material"], outputs: ["mapChange"] }, { kind: "component", type: SelectedChildMaterialColorComponent, selector: "selected-child-material-color", inputs: ["material"], outputs: ["colorChange"] }, { kind: "component", type: i5$1.ListOfValuesComponent, selector: "co-list-of-values", inputs: ["model", "multiselect", "showToggleAll", "largeCollection", "displayField", "optionIcon", "collection", "collectionLoadFn", "collectionLoadFnProp", "leftIconData", "searchPlaceholder", "searchDisabled", "showChips"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MaterialDialogComponent, decorators: [{
             type: Component,
@@ -37482,9 +37574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }] }] });
 
 class ModelUploaderComponent {
-    constructor(settingsService, _messageService) {
-        this.settingsService = settingsService;
-        this._messageService = _messageService;
+    constructor() {
         this.fileUploaded = new EventEmitter();
         this.file = null;
         this.fileMaxSize = 30; // file size in mb
@@ -37545,7 +37635,7 @@ class ModelUploaderComponent {
             reader.readAsArrayBuffer(file);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModelUploaderComponent, deps: [{ token: HomedecoratorSettingsService }, { token: MessageBusService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModelUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModelUploaderComponent, isStandalone: false, selector: "rp-model-uploader", outputs: { fileUploaded: "fileUploaded" }, viewQueries: [{ propertyName: "fileUploadInput", first: true, predicate: ["fileUpload"], descendants: true }], ngImport: i0, template: `
     <div class="model-upload-container" (click)="fileUpload.click()">
       <div class="header-container">
@@ -37565,7 +37655,7 @@ class ModelUploaderComponent {
       }
       <input style="display: none;" type="file" id="fileUpload" class="file-input" (change)="onChange($event)" #fileUpload/>
     </div>
-    `, isInline: true, styles: [".model-upload-container{border:1px solid #5b6875;box-sizing:border-box;padding:10px;width:100%;max-width:400px;border-radius:4px;cursor:pointer}.model-upload-container .header-container{display:flex;justify-content:space-between}.model-upload-container .header-container h3{font-weight:bolder;font-size:18px;padding:0;margin:0}.model-upload-container .header-container .description{font-size:12px;margin:0;padding:0}.modelSupport{display:block;font-size:12px;font-style:italic}.upload-error-container{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border-radius:.25rem;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}\n"], dependencies: [{ kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    `, isInline: true, styles: [".model-upload-container{border:1px solid #5b6875;box-sizing:border-box;padding:10px;width:100%;max-width:400px;border-radius:4px;cursor:pointer}.model-upload-container .header-container{display:flex;justify-content:space-between}.model-upload-container .header-container h3{font-weight:bolder;font-size:18px;padding:0;margin:0}.model-upload-container .header-container .description{font-size:12px;margin:0;padding:0}.modelSupport{display:block;font-size:12px;font-style:italic}.upload-error-container{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border-radius:.25rem;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModelUploaderComponent, decorators: [{
             type: Component,
@@ -37589,7 +37679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <input style="display: none;" type="file" id="fileUpload" class="file-input" (change)="onChange($event)" #fileUpload/>
     </div>
     `, standalone: false, styles: [".model-upload-container{border:1px solid #5b6875;box-sizing:border-box;padding:10px;width:100%;max-width:400px;border-radius:4px;cursor:pointer}.model-upload-container .header-container{display:flex;justify-content:space-between}.model-upload-container .header-container h3{font-weight:bolder;font-size:18px;padding:0;margin:0}.model-upload-container .header-container .description{font-size:12px;margin:0;padding:0}.modelSupport{display:block;font-size:12px;font-style:italic}.upload-error-container{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border-radius:.25rem;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}\n"] }]
-        }], ctorParameters: () => [{ type: HomedecoratorSettingsService }, { type: MessageBusService }], propDecorators: { fileUploadInput: [{
+        }], propDecorators: { fileUploadInput: [{
                 type: ViewChild,
                 args: ['fileUpload']
             }], fileUploaded: [{
@@ -38405,7 +38495,7 @@ class ModelPreviewComponent {
 
           </div>
       </div>
-  `, isInline: true, styles: [".model-preview{display:flex;flex-direction:row;font-size:14px;position:relative}.model-preview .model-preview-window .model-preview-window-bottom{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.model-preview .model-preview-window .model-preview-window-bottom .disclaimer-text-container{padding-right:20px;text-align:right;font-style:italic;font-size:12px}.model-preview .model-preview-actions{min-width:350px;box-sizing:border-box;padding:10px 20px;border-left:1px solid #5b6875}.model-preview .model-preview-actions #heightArticle{max-width:160px}.model-preview .model-preview-actions .units-select-form{width:80px;margin:0 5px}.model-preview .model-preview-actions .model-preview-info-container{margin-bottom:10px}.model-preview .model-preview-actions .model-preview-info-container .model-preview-info-left{font-weight:bolder}.model-preview .model-preview-actions .model-preview-info{margin-top:80px}.model-preview .exportButton{cursor:pointer;color:#fff;background:#da9803;border:1px solid #da9803;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}.model-preview .exportButton:hover{background:#da9803;color:#fff}.model-preview input{border:1px solid #5b6875;box-sizing:border-box;padding:3px 10px;border-radius:3px;line-height:30px;width:100%}.mat-radio-wrapper{margin:10px 0}mat-radio-group mat-radio-button{display:block}.base-button{cursor:pointer;color:#fff;background:#da9803;border:1px solid #da9803;border-radius:3px;box-sizing:border-box;padding:4px 10px;line-height:30px}.base-button:hover{background:#da9803;color:#fff}.model-placement-container div{display:flex;justify-content:space-between;margin:5px 0;align-items:center}.rotation-button-container div{display:flex;justify-content:space-between;margin-bottom:5px}.rotation-button-container div p{margin:0;padding:0}.rotation-button-container div button{display:flex;justify-content:center;align-items:center;margin:0 0 0 10px;cursor:pointer;color:#5b6875;background:#fff;border:2px solid #5b6875;border-radius:50%;box-sizing:border-box;padding:0;height:22px;width:22px;font-size:18px}.rotation-button-container div button svg [fill]{fill:#5b6875}.rotation-button-container div button:hover{background:#da9803;color:#fff}.rotation-button-container div .button-as-link{color:#da9803;border:none;width:100%;height:100%;font-size:14px;position:relative;top:-15px}.rotation-button-container div .button-as-link ::ng-deep mat-icon{width:25px;height:25px;position:relative;top:8px}.rotation-button-container div .button-as-link ::ng-deep mat-icon svg path{fill:#da9803}.rotation-button-container div .button-as-link:hover{background:none;color:#da9803}.error-container{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid #f5c6cb;border-radius:.25rem;color:#721c24;background-color:#f8d7da;max-width:190px}.exportButton,.exportButtonDark{display:inline-block!important;margin-right:10px}.exportButtonDark{background:#5b6875;border-color:#5b6875}.exportButtonDark:hover{background:#5b6875;color:#fff}.model-close-preview{text-align:right;cursor:pointer}.model-error-background{position:absolute;inset:-52px -24px -24px;z-index:99;background:#0009}.model-error-container{position:relative;background:#fff;box-sizing:border-box;padding:10px 25px;border:1px solid #5b6875;top:30%;left:50%;width:400px;margin-left:-200px}.model-error-container .model-error-header{display:flex;justify-content:space-between}:host ::ng-deep .mat-mdc-form-field-wrapper{padding-bottom:0;border:1px solid #5b6875;border-radius:4px}:host ::ng-deep .mat-mdc-form-field-appearance-legacy .mat-mdc-form-field-infix{padding:0;border:none}:host ::ng-deep .mat-select-value{padding-left:5px}:host ::ng-deep .mat-mdc-form-field-appearance-legacy .mat-mdc-form-field-underline{height:0}:host ::ng-deep .mat-select-trigger{line-height:36px}:host ::ng-deep mat-icon{width:18px;height:18px}:host ::ng-deep mat-icon svg path{fill:#5b6875}:host ::ng-deep .mat-slide-toggle-content{width:calc(100% - 36px);min-width:300px}\n"], dependencies: [{ kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoaderComponent, selector: "rp-loader", inputs: ["show"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".model-preview{display:flex;flex-direction:row;font-size:14px;position:relative}.model-preview .model-preview-window .model-preview-window-bottom{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.model-preview .model-preview-window .model-preview-window-bottom .disclaimer-text-container{padding-right:20px;text-align:right;font-style:italic;font-size:12px}.model-preview .model-preview-actions{min-width:350px;box-sizing:border-box;padding:10px 20px;border-left:1px solid #5b6875}.model-preview .model-preview-actions #heightArticle{max-width:160px}.model-preview .model-preview-actions .units-select-form{width:80px;margin:0 5px}.model-preview .model-preview-actions .model-preview-info-container{margin-bottom:10px}.model-preview .model-preview-actions .model-preview-info-container .model-preview-info-left{font-weight:bolder}.model-preview .model-preview-actions .model-preview-info{margin-top:80px}.model-preview .exportButton{cursor:pointer;color:#fff;background:#da9803;border:1px solid #da9803;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}.model-preview .exportButton:hover{background:#da9803;color:#fff}.model-preview input{border:1px solid #5b6875;box-sizing:border-box;padding:3px 10px;border-radius:3px;line-height:30px;width:100%}.mat-radio-wrapper{margin:10px 0}mat-radio-group mat-radio-button{display:block}.base-button{cursor:pointer;color:#fff;background:#da9803;border:1px solid #da9803;border-radius:3px;box-sizing:border-box;padding:4px 10px;line-height:30px}.base-button:hover{background:#da9803;color:#fff}.model-placement-container div{display:flex;justify-content:space-between;margin:5px 0;align-items:center}.rotation-button-container div{display:flex;justify-content:space-between;margin-bottom:5px}.rotation-button-container div p{margin:0;padding:0}.rotation-button-container div button{display:flex;justify-content:center;align-items:center;margin:0 0 0 10px;cursor:pointer;color:#5b6875;background:#fff;border:2px solid #5b6875;border-radius:50%;box-sizing:border-box;padding:0;height:22px;width:22px;font-size:18px}.rotation-button-container div button svg [fill]{fill:#5b6875}.rotation-button-container div button:hover{background:#da9803;color:#fff}.rotation-button-container div .button-as-link{color:#da9803;border:none;width:100%;height:100%;font-size:14px;position:relative;top:-15px}.rotation-button-container div .button-as-link ::ng-deep mat-icon{width:25px;height:25px;position:relative;top:8px}.rotation-button-container div .button-as-link ::ng-deep mat-icon svg path{fill:#da9803}.rotation-button-container div .button-as-link:hover{background:none;color:#da9803}.error-container{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid #f5c6cb;border-radius:.25rem;color:#721c24;background-color:#f8d7da;max-width:190px}.exportButton,.exportButtonDark{display:inline-block!important;margin-right:10px}.exportButtonDark{background:#5b6875;border-color:#5b6875}.exportButtonDark:hover{background:#5b6875;color:#fff}.model-close-preview{text-align:right;cursor:pointer}.model-error-background{position:absolute;inset:-52px -24px -24px;z-index:99;background:#0009}.model-error-container{position:relative;background:#fff;box-sizing:border-box;padding:10px 25px;border:1px solid #5b6875;top:30%;left:50%;width:400px;margin-left:-200px}.model-error-container .model-error-header{display:flex;justify-content:space-between}:host ::ng-deep .mat-mdc-form-field-wrapper{padding-bottom:0;border:1px solid #5b6875;border-radius:4px}:host ::ng-deep .mat-mdc-form-field-appearance-legacy .mat-mdc-form-field-infix{padding:0;border:none}:host ::ng-deep .mat-select-value{padding-left:5px}:host ::ng-deep .mat-mdc-form-field-appearance-legacy .mat-mdc-form-field-underline{height:0}:host ::ng-deep .mat-select-trigger{line-height:36px}:host ::ng-deep mat-icon{width:18px;height:18px}:host ::ng-deep mat-icon svg path{fill:#5b6875}:host ::ng-deep .mat-slide-toggle-content{width:calc(100% - 36px);min-width:300px}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoaderComponent, selector: "rp-loader", inputs: ["show"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModelPreviewComponent, decorators: [{
             type: Component,
@@ -39170,7 +39260,7 @@ class ButtonElevationComponent {
           </button>
         </div>
       }
-    `, isInline: true, styles: [":host{position:relative}:host button ::ng-deep co-icon svg [fill]{fill:#fff}:host .main-button{z-index:1}:host .extended-wrapper .extended-wrapper-flex{display:flex;width:calc(100% - 10px);margin-left:10px}:host .extended-wrapper .extended-button{cursor:pointer;background:transparent;border:none;color:#fff}:host .extended-wrapper .extended-lock-button{box-shadow:none;display:block;margin:0 auto}:host .extended-wrapper #up_button,:host .extended-wrapper #down_button{flex:0 0 20%;align-items:center;justify-content:center;width:35px;height:35px}:host .extended-wrapper .label-wrapper{flex:0 0 60%;align-items:center;justify-content:center;background:none;border-radius:15px}:host .extended-wrapper .label-wrapper label{display:none;font-weight:700;font-size:12px;text-align:center;line-height:35px}:host .extended-wrapper .label-wrapper label.show{display:block;color:#fff}:host .extended-wrapper .label-wrapper input{display:none;width:100%;font-weight:700;font-size:12px;text-align:center;line-height:35px}:host .extended-wrapper .label-wrapper input.show{display:block}:host,button-elevation{color:#fff}:host .rp-item-context-menu-item,button-elevation .rp-item-context-menu-item{cursor:pointer;padding:5px 15px 5px 0;border-radius:5px}:host .rp-item-context-menu-item span,:host .rp-item-context-menu-item label,button-elevation .rp-item-context-menu-item span,button-elevation .rp-item-context-menu-item label{display:inline-block;width:auto;line-height:24px;font-size:12px;font-weight:lighter;vertical-align:middle}:host .rp-item-context-menu-item .icon,button-elevation .rp-item-context-menu-item .icon{margin-right:10px}:host .rp-item-context-menu-item .icon svg,button-elevation .rp-item-context-menu-item .icon svg{height:15px;width:15px}:host .rp-item-context-menu-item:hover,button-elevation .rp-item-context-menu-item:hover{background:#dcdcdc80}:host .rp-item-context-menu-header,button-elevation .rp-item-context-menu-header{border-bottom:1px solid #808080;margin-bottom:10px;padding-left:15px}:host .rp-item-context-menu-header p,button-elevation .rp-item-context-menu-header p{color:#da9803;font-size:14px}\n"], dependencies: [{ kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: MToMeasurePipe, name: "mToMeasure" }], animations: [
+    `, isInline: true, styles: [":host{position:relative}:host button ::ng-deep co-icon svg [fill]{fill:#fff}:host .main-button{z-index:1}:host .extended-wrapper .extended-wrapper-flex{display:flex;width:calc(100% - 10px);margin-left:10px}:host .extended-wrapper .extended-button{cursor:pointer;background:transparent;border:none;color:#fff}:host .extended-wrapper .extended-lock-button{box-shadow:none;display:block;margin:0 auto}:host .extended-wrapper #up_button,:host .extended-wrapper #down_button{flex:0 0 20%;align-items:center;justify-content:center;width:35px;height:35px}:host .extended-wrapper .label-wrapper{flex:0 0 60%;align-items:center;justify-content:center;background:none;border-radius:15px}:host .extended-wrapper .label-wrapper label{display:none;font-weight:700;font-size:12px;text-align:center;line-height:35px}:host .extended-wrapper .label-wrapper label.show{display:block;color:#fff}:host .extended-wrapper .label-wrapper input{display:none;width:100%;font-weight:700;font-size:12px;text-align:center;line-height:35px}:host .extended-wrapper .label-wrapper input.show{display:block}:host,button-elevation{color:#fff}:host .rp-item-context-menu-item,button-elevation .rp-item-context-menu-item{cursor:pointer;padding:5px 15px 5px 0;border-radius:5px}:host .rp-item-context-menu-item span,:host .rp-item-context-menu-item label,button-elevation .rp-item-context-menu-item span,button-elevation .rp-item-context-menu-item label{display:inline-block;width:auto;line-height:24px;font-size:12px;font-weight:lighter;vertical-align:middle}:host .rp-item-context-menu-item .icon,button-elevation .rp-item-context-menu-item .icon{margin-right:10px}:host .rp-item-context-menu-item .icon svg,button-elevation .rp-item-context-menu-item .icon svg{height:15px;width:15px}:host .rp-item-context-menu-item:hover,button-elevation .rp-item-context-menu-item:hover{background:#dcdcdc80}:host .rp-item-context-menu-header,button-elevation .rp-item-context-menu-header{border-bottom:1px solid #808080;margin-bottom:10px;padding-left:15px}:host .rp-item-context-menu-header p,button-elevation .rp-item-context-menu-header p{color:#da9803;font-size:14px}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: MToMeasurePipe, name: "mToMeasure" }], animations: [
             trigger('showHideExtended', [
                 transition('void <=> *', [
                     query('@*', animateChild(), { optional: true })
@@ -39322,7 +39412,7 @@ class ObjectLibraryComponent {
         this.setDragged.emit(object);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ObjectLibraryComponent, deps: [{ token: MessageBusService }, { token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ObjectLibraryComponent, isStandalone: false, selector: "rp-object-library", inputs: { objects: "objects" }, outputs: { setDragged: "setDragged", releaseDragged: "releaseDragged", onObjectClick: "onObjectClick" }, ngImport: i0, template: "<mat-grid-list cols=\"2\" rowHeight=\"150px\">\r\n  @for (object of objects; track object) {\r\n    <mat-grid-tile (click)=\"onObjectClick.emit(object)\">\r\n      <mat-grid-tile-header\r\n        draggable=\"true\"\r\n        (touchmove)=\"touchMove()\"\r\n        (touchend)=\"touchEnd($event, object)\"\r\n        (dragstart)=\"dragstart($event, object)\"\r\n        (dragend)=\"releaseDragged.emit()\"\r\n        >\r\n        {{object.name | localize}}\r\n      </mat-grid-tile-header>\r\n      <img\r\n        [src]=\"assetPath + object.thumbnailUrl\"\r\n        (touchmove)=\"touchMove()\"\r\n        (touchend)=\"touchEnd($event, object)\"\r\n        (dragstart)=\"dragstart($event, object)\"\r\n        (dragend)=\"releaseDragged.emit()\"\r\n        />\r\n        <co-button [label]=\"'LOOKAT' | localize\" class=\"lookat\"></co-button>\r\n        @if (object.description) {\r\n          <div class=\"description-wrapper\">\r\n            @if (object.description) {\r\n              <span class=\"description\" [textContent]=\"object.description | localize\"></span>\r\n            }\r\n          </div>\r\n        }\r\n      </mat-grid-tile>\r\n    }\r\n  </mat-grid-list>\r\n", styles: [":host{overflow-y:auto}:host .description-wrapper{display:flex;align-items:center;justify-content:center;position:absolute;bottom:0;width:100%;background:#ffffff80}:host .description{margin:5px;font-size:11px;word-break:break-word;white-space:normal}:host .co-button{background-color:#da9803;border-radius:20px}:host .co-button:hover{filter:none}.lookat{position:absolute;display:none}mat-grid-tile:hover{cursor:pointer}mat-grid-tile:hover .lookat{display:flex}button.close{height:36px;width:36px;min-width:initial;padding:0;border:none;position:absolute;right:0;top:10px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: i3$4.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$4.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i3$4.MatGridTileText, selector: "mat-grid-tile-header, mat-grid-tile-footer" }, { kind: "directive", type: i3$4.MatGridTileHeaderCssMatStyler, selector: "mat-grid-tile-header" }, { kind: "component", type: i5.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ObjectLibraryComponent, isStandalone: false, selector: "rp-object-library", inputs: { objects: "objects" }, outputs: { setDragged: "setDragged", releaseDragged: "releaseDragged", onObjectClick: "onObjectClick" }, ngImport: i0, template: "<mat-grid-list cols=\"2\" rowHeight=\"150px\">\r\n  @for (object of objects; track object) {\r\n    <mat-grid-tile (click)=\"onObjectClick.emit(object)\">\r\n      <mat-grid-tile-header\r\n        draggable=\"true\"\r\n        (touchmove)=\"touchMove()\"\r\n        (touchend)=\"touchEnd($event, object)\"\r\n        (dragstart)=\"dragstart($event, object)\"\r\n        (dragend)=\"releaseDragged.emit()\"\r\n        >\r\n        {{object.name | localize}}\r\n      </mat-grid-tile-header>\r\n      <img\r\n        [src]=\"assetPath + object.thumbnailUrl\"\r\n        (touchmove)=\"touchMove()\"\r\n        (touchend)=\"touchEnd($event, object)\"\r\n        (dragstart)=\"dragstart($event, object)\"\r\n        (dragend)=\"releaseDragged.emit()\"\r\n        />\r\n        <co-button [label]=\"'LOOKAT' | localize\" class=\"lookat\"></co-button>\r\n        @if (object.description) {\r\n          <div class=\"description-wrapper\">\r\n            @if (object.description) {\r\n              <span class=\"description\" [textContent]=\"object.description | localize\"></span>\r\n            }\r\n          </div>\r\n        }\r\n      </mat-grid-tile>\r\n    }\r\n  </mat-grid-list>\r\n", styles: [":host{overflow-y:auto}:host .description-wrapper{display:flex;align-items:center;justify-content:center;position:absolute;bottom:0;width:100%;background:#ffffff80}:host .description{margin:5px;font-size:11px;word-break:break-word;white-space:normal}:host .co-button{background-color:#da9803;border-radius:20px}:host .co-button:hover{filter:none}.lookat{position:absolute;display:none}mat-grid-tile:hover{cursor:pointer}mat-grid-tile:hover .lookat{display:flex}button.close{height:36px;width:36px;min-width:initial;padding:0;border:none;position:absolute;right:0;top:10px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: i3$3.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$3.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i3$3.MatGridTileText, selector: "mat-grid-tile-header, mat-grid-tile-footer" }, { kind: "directive", type: i3$3.MatGridTileHeaderCssMatStyler, selector: "mat-grid-tile-header" }, { kind: "component", type: i5$1.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ObjectLibraryComponent, decorators: [{
             type: Component,
@@ -39398,7 +39488,7 @@ class FileDropComponent {
         return imageElement.src;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FileDropComponent, isStandalone: false, selector: "rp-file-drop", inputs: { showDragDrop: "showDragDrop", showRemove: "showRemove" }, outputs: { fileContentChanged: "fileContentChanged", removeClick: "removeClick" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  class=\"FileDrop\" [class.small]=\"!showDragDrop\"\r\n  (drop)=\"onDrop($event)\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  fxLayout=\"column\"\r\n  fxLayoutAlign=\"center center\"\r\n  >\r\n  @if (showDragDrop) {\r\n    <mat-icon class=\"homedecorator-material-icons\">cloud_upload</mat-icon>\r\n    <p>\r\n      {{'DRAG_DROP_FILES_HERE' | localize}}\r\n    </p>\r\n    <span>{{'OR' | localize}}</span>\r\n  }\r\n  <button mat-button (click)=\"fileInput.click()\">{{'BROWSE_FILES' | localize}}</button>\r\n  @if (showRemove) {\r\n    <button mat-button (click)=\"removeClick.emit($event)\">{{'REMOVE_FILE' | localize}}</button>\r\n  }\r\n  <input type=\"file\" (change)=\"readPhoto($event.target.files[0])\" style=\"display: none\" #fileInput>\r\n</div>\r\n", styles: [".FileDrop{box-sizing:border-box;margin:0 auto 15px 0;position:relative}.FileDrop:not(.small){height:200px}.FileDrop:before{content:\" \";border:2px dashed rgba(78,82,89,.45);display:block;height:87%;left:50%;opacity:.75;position:absolute;top:50%;transform:translate3d(-50%,-50%,0);width:95%}.FileDrop p{margin:.5em 0}.FileDrop button{color:#53c0f9;font-size:12px}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FileDropComponent, isStandalone: false, selector: "rp-file-drop", inputs: { showDragDrop: "showDragDrop", showRemove: "showRemove" }, outputs: { fileContentChanged: "fileContentChanged", removeClick: "removeClick" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  class=\"FileDrop\" [class.small]=\"!showDragDrop\"\r\n  (drop)=\"onDrop($event)\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  fxLayout=\"column\"\r\n  fxLayoutAlign=\"center center\"\r\n  >\r\n  @if (showDragDrop) {\r\n    <mat-icon class=\"homedecorator-material-icons\">cloud_upload</mat-icon>\r\n    <p>\r\n      {{'DRAG_DROP_FILES_HERE' | localize}}\r\n    </p>\r\n    <span>{{'OR' | localize}}</span>\r\n  }\r\n  <button mat-button (click)=\"fileInput.click()\">{{'BROWSE_FILES' | localize}}</button>\r\n  @if (showRemove) {\r\n    <button mat-button (click)=\"removeClick.emit($event)\">{{'REMOVE_FILE' | localize}}</button>\r\n  }\r\n  <input type=\"file\" (change)=\"readPhoto($event.target.files[0])\" style=\"display: none\" #fileInput>\r\n</div>\r\n", styles: [".FileDrop{box-sizing:border-box;margin:0 auto 15px 0;position:relative}.FileDrop:not(.small){height:200px}.FileDrop:before{content:\" \";border:2px dashed rgba(78,82,89,.45);display:block;height:87%;left:50%;opacity:.75;position:absolute;top:50%;transform:translate3d(-50%,-50%,0);width:95%}.FileDrop p{margin:.5em 0}.FileDrop button{color:#53c0f9;font-size:12px}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileDropComponent, decorators: [{
             type: Component,
@@ -39967,7 +40057,7 @@ class TextureEditorComponent {
         return destCanvas;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TextureEditorComponent, deps: [{ token: MessageBusService }, { token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TextureEditorComponent, isStandalone: false, selector: "rp-texture-editor", inputs: { width: "width", height: "height", texturePlane: "texturePlane", plainTexture: "plainTexture", changedTexture: "changedTexture", tiled: "tiled", options: "options", dragNDropEnforced: "dragNDropEnforced" }, outputs: { setTexture: "setTexture", removeTexture: "removeTexture" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<rp-file-drop\r\n  [showDragDrop]=\"((!changedTexture || texture?.type === textureType.Basic) && options !== Options.None) || dragNDropEnforced\"\r\n  [showRemove]=\"changedTexture\"\r\n  (fileContentChanged)=\"onPhotoDataChange($event)\"\r\n  (removeClick)=\"handleRemoveTextureClick($event)\"\r\n  >\r\n</rp-file-drop>\r\n\r\n@if (imageHasBeenResized) {\r\n  <div class=\"resize-message-wrapper\">\r\n    <span class=\"resize-message\" [textContent]=\"'IMAGE_RESIZED' | localize\"></span>\r\n  </div>\r\n}\r\n<div class=\"picture-editor\" [hidden]=\"!texture || !changedTexture || dragNDropEnforced\">\r\n  <div class=\"picture-editor-canvas\"\r\n    [hidden]=\"options === Options.None || (texture?.type === textureType.Basic)\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (drop)=\"onDrop($event)\">\r\n    <div\r\n      class=\"canvas-wrapper\"\r\n      fxLayout=\"column inline\"\r\n      fxLayoutAlign=\"center center\">\r\n      <canvas [hidden]=\"texture && texture.stretch\" #canvas></canvas>\r\n      @if (options === Options.Both) {\r\n        <mat-button-toggle-group\r\n          (change)=\"tiledChanged($event.value === 'texture')\"\r\n          [value]=\"tiled ? 'texture' : 'stretch'\"\r\n          >\r\n          <mat-button-toggle\r\n            value=\"stretch\"\r\n            title=\"{{'PICTURE' | localize}}\"\r\n            [checked]=\"!tiled\">\r\n            <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n              <mat-icon class=\"homedecorator-material-icons\">photo_size_select_large</mat-icon>\r\n              {{'SKIN_FULL_WALL' | localize}}\r\n            </div>\r\n          </mat-button-toggle>\r\n          <mat-button-toggle\r\n            value=\"texture\"\r\n            title=\"{{'TILE' | localize}}\"\r\n            [checked]=\"tiled\"\r\n            >\r\n            <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n              <mat-icon class=\"homedecorator-material-icons\">texture</mat-icon>\r\n              {{'CREATE_TEXTURE' | localize}}\r\n            </div>\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (texture?.type === textureType.CustomPattern\r\n    || ((texture?.type === textureType.Basic || texture?.type === textureType.PBR)\r\n    && options === Options.None)) {\r\n    <div class=\"sliders\">\r\n      <rp-slider-input\r\n        title=\"{{'TILE_ROTATION' | localize}}\"\r\n        min=\"-180\"\r\n        max=\"180\"\r\n        step=\"1\"\r\n        [value]=\"tileRotationDeg\"\r\n        (onChange)=\"onTileRotationChange($event)\">\r\n      </rp-slider-input>\r\n      <rp-slider-input\r\n        title=\"{{'TILE_SIZE' | localize}}\"\r\n        [min]=\"tileSizeMin\"\r\n        [max]=\"tileSizeMax\"\r\n        step=\"0.1\"\r\n        [value]=\"tileSize\"\r\n        (onChange)=\"onTileSizeChange($event)\">\r\n      </rp-slider-input>\r\n    </div>\r\n  }\r\n\r\n  @if (!isBasic(texture) && !isPBR(texture)) {\r\n    <div class=\"sliders\">\r\n      <rp-slider-input\r\n        title=\"{{'ROTATION' | localize}}\"\r\n        min=\"-180\"\r\n        max=\"180\"\r\n        step=\"1\"\r\n        [value]=\"textureRotationDeg\"\r\n        (onChange)=\"onRotationChange($event)\">\r\n      </rp-slider-input>\r\n      <rp-slider-input\r\n        title=\"{{'ZOOM' | localize}}\"\r\n        [min]=\"-zoomSliderMax\"\r\n        [max]=\"zoomSliderMax\"\r\n        step=\"0.1\"\r\n        [value]=\"textureScaleSlider\"\r\n        (onChange)=\"onScaleChange($event)\">\r\n      </rp-slider-input>\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n  <footer class=\"picture-editor-footer\">\r\n    <button *ngIf=\"texture?.type !== TextureType.Basic || options === Options.None\"\r\n      mat-stroked-button color=\"warn\"\r\n      (click)=\"resetTexture()\"\r\n      >\r\n      {{ 'Remove' | localize }}\r\n    </button>\r\n  </footer>\r\n  -->\r\n</div>\r\n", styles: ["rp-texture-editor{display:block;width:100%}.picture-editor-footer{margin-bottom:16px}.picture-editor-canvas{margin-top:.75em;margin-bottom:1.5em;text-align:center}.canvas-wrapper{position:relative}.canvas-wrapper mat-button-toggle-group{text-align:center;width:320px}.canvas-wrapper mat-button-toggle{flex-basis:50%;padding:4px 0}.resize-message-wrapper{margin:10px 3px 3px;text-align:-webkit-center}.resize-message-wrapper .resize-message{color:red;font-style:italic;font-weight:700;font-size:.9em}:host ::ng-deep .mat-slider-ticks-container{background-color:transparent}:host ::ng-deep .mat-slider-track-wrapper{overflow:visible}:host ::ng-deep .mat-slider-track-background{background-color:#ccc}:host ::ng-deep .mat-slider-track-fill{background-color:#da9803}:host ::ng-deep .mat-slider-thumb-label{background-color:#da9803}:host ::ng-deep .mat-slider-thumb{background-color:#da9803}\n"], dependencies: [{ kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SliderInputComponent, selector: "rp-slider-input", inputs: ["title", "min", "max", "step", "value"], outputs: ["onChange"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: FileDropComponent, selector: "rp-file-drop", inputs: ["showDragDrop", "showRemove"], outputs: ["fileContentChanged", "removeClick"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TextureEditorComponent, isStandalone: false, selector: "rp-texture-editor", inputs: { width: "width", height: "height", texturePlane: "texturePlane", plainTexture: "plainTexture", changedTexture: "changedTexture", tiled: "tiled", options: "options", dragNDropEnforced: "dragNDropEnforced" }, outputs: { setTexture: "setTexture", removeTexture: "removeTexture" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<rp-file-drop\r\n  [showDragDrop]=\"((!changedTexture || texture?.type === textureType.Basic) && options !== Options.None) || dragNDropEnforced\"\r\n  [showRemove]=\"changedTexture\"\r\n  (fileContentChanged)=\"onPhotoDataChange($event)\"\r\n  (removeClick)=\"handleRemoveTextureClick($event)\"\r\n  >\r\n</rp-file-drop>\r\n\r\n@if (imageHasBeenResized) {\r\n  <div class=\"resize-message-wrapper\">\r\n    <span class=\"resize-message\" [textContent]=\"'IMAGE_RESIZED' | localize\"></span>\r\n  </div>\r\n}\r\n<div class=\"picture-editor\" [hidden]=\"!texture || !changedTexture || dragNDropEnforced\">\r\n  <div class=\"picture-editor-canvas\"\r\n    [hidden]=\"options === Options.None || (texture?.type === textureType.Basic)\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (drop)=\"onDrop($event)\">\r\n    <div\r\n      class=\"canvas-wrapper\"\r\n      fxLayout=\"column inline\"\r\n      fxLayoutAlign=\"center center\">\r\n      <canvas [hidden]=\"texture && texture.stretch\" #canvas></canvas>\r\n      @if (options === Options.Both) {\r\n        <mat-button-toggle-group\r\n          (change)=\"tiledChanged($event.value === 'texture')\"\r\n          [value]=\"tiled ? 'texture' : 'stretch'\"\r\n          >\r\n          <mat-button-toggle\r\n            value=\"stretch\"\r\n            title=\"{{'PICTURE' | localize}}\"\r\n            [checked]=\"!tiled\">\r\n            <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n              <mat-icon class=\"homedecorator-material-icons\">photo_size_select_large</mat-icon>\r\n              {{'SKIN_FULL_WALL' | localize}}\r\n            </div>\r\n          </mat-button-toggle>\r\n          <mat-button-toggle\r\n            value=\"texture\"\r\n            title=\"{{'TILE' | localize}}\"\r\n            [checked]=\"tiled\"\r\n            >\r\n            <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n              <mat-icon class=\"homedecorator-material-icons\">texture</mat-icon>\r\n              {{'CREATE_TEXTURE' | localize}}\r\n            </div>\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (texture?.type === textureType.CustomPattern\r\n    || ((texture?.type === textureType.Basic || texture?.type === textureType.PBR)\r\n    && options === Options.None)) {\r\n    <div class=\"sliders\">\r\n      <rp-slider-input\r\n        title=\"{{'TILE_ROTATION' | localize}}\"\r\n        min=\"-180\"\r\n        max=\"180\"\r\n        step=\"1\"\r\n        [value]=\"tileRotationDeg\"\r\n        (onChange)=\"onTileRotationChange($event)\">\r\n      </rp-slider-input>\r\n      <rp-slider-input\r\n        title=\"{{'TILE_SIZE' | localize}}\"\r\n        [min]=\"tileSizeMin\"\r\n        [max]=\"tileSizeMax\"\r\n        step=\"0.1\"\r\n        [value]=\"tileSize\"\r\n        (onChange)=\"onTileSizeChange($event)\">\r\n      </rp-slider-input>\r\n    </div>\r\n  }\r\n\r\n  @if (!isBasic(texture) && !isPBR(texture)) {\r\n    <div class=\"sliders\">\r\n      <rp-slider-input\r\n        title=\"{{'ROTATION' | localize}}\"\r\n        min=\"-180\"\r\n        max=\"180\"\r\n        step=\"1\"\r\n        [value]=\"textureRotationDeg\"\r\n        (onChange)=\"onRotationChange($event)\">\r\n      </rp-slider-input>\r\n      <rp-slider-input\r\n        title=\"{{'ZOOM' | localize}}\"\r\n        [min]=\"-zoomSliderMax\"\r\n        [max]=\"zoomSliderMax\"\r\n        step=\"0.1\"\r\n        [value]=\"textureScaleSlider\"\r\n        (onChange)=\"onScaleChange($event)\">\r\n      </rp-slider-input>\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n  <footer class=\"picture-editor-footer\">\r\n    <button *ngIf=\"texture?.type !== TextureType.Basic || options === Options.None\"\r\n      mat-stroked-button color=\"warn\"\r\n      (click)=\"resetTexture()\"\r\n      >\r\n      {{ 'Remove' | localize }}\r\n    </button>\r\n  </footer>\r\n  -->\r\n</div>\r\n", styles: ["rp-texture-editor{display:block;width:100%}.picture-editor-footer{margin-bottom:16px}.picture-editor-canvas{margin-top:.75em;margin-bottom:1.5em;text-align:center}.canvas-wrapper{position:relative}.canvas-wrapper mat-button-toggle-group{text-align:center;width:320px}.canvas-wrapper mat-button-toggle{flex-basis:50%;padding:4px 0}.resize-message-wrapper{margin:10px 3px 3px;text-align:-webkit-center}.resize-message-wrapper .resize-message{color:red;font-style:italic;font-weight:700;font-size:.9em}:host ::ng-deep .mat-slider-ticks-container{background-color:transparent}:host ::ng-deep .mat-slider-track-wrapper{overflow:visible}:host ::ng-deep .mat-slider-track-background{background-color:#ccc}:host ::ng-deep .mat-slider-track-fill{background-color:#da9803}:host ::ng-deep .mat-slider-thumb-label{background-color:#da9803}:host ::ng-deep .mat-slider-thumb{background-color:#da9803}\n"], dependencies: [{ kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SliderInputComponent, selector: "rp-slider-input", inputs: ["title", "min", "max", "step", "value"], outputs: ["onChange"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: FileDropComponent, selector: "rp-file-drop", inputs: ["showDragDrop", "showRemove"], outputs: ["fileContentChanged", "removeClick"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TextureEditorComponent, decorators: [{
             type: Component,
@@ -40112,7 +40202,7 @@ class RalColorPickerComponent {
             }
           </mat-grid-list>
         }
-      `, isInline: true, styles: [".color-small-cell{width:70px;height:70px;margin:0 5px}.ral-info{width:calc(100% - 70px);padding:0 10px;overflow:hidden}.ral-color-ral{font-weight:700}.ral-color-name{font-size:small;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}mat-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}mat-icon.color-variants{left:24px;top:29px;transform:none}.mat-grid-list{padding:10px 0}.mat-grid-tile .mat-grid-tile-header.color-header{display:block;padding:0;width:24px;height:24px;line-height:24px;top:8px;left:8px;text-align:center;background:transparent}\n"], dependencies: [{ kind: "component", type: i3$4.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$4.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i3$4.MatGridTileText, selector: "mat-grid-tile-header, mat-grid-tile-footer" }, { kind: "directive", type: i3$4.MatGridTileHeaderCssMatStyler, selector: "mat-grid-tile-header" }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+      `, isInline: true, styles: [".color-small-cell{width:70px;height:70px;margin:0 5px}.ral-info{width:calc(100% - 70px);padding:0 10px;overflow:hidden}.ral-color-ral{font-weight:700}.ral-color-name{font-size:small;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}mat-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}mat-icon.color-variants{left:24px;top:29px;transform:none}.mat-grid-list{padding:10px 0}.mat-grid-tile .mat-grid-tile-header.color-header{display:block;padding:0;width:24px;height:24px;line-height:24px;top:8px;left:8px;text-align:center;background:transparent}\n"], dependencies: [{ kind: "component", type: i3$3.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$3.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i3$3.MatGridTileText, selector: "mat-grid-tile-header, mat-grid-tile-footer" }, { kind: "directive", type: i3$3.MatGridTileHeaderCssMatStyler, selector: "mat-grid-tile-header" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RalColorPickerComponent, decorators: [{
             type: Component,
@@ -40233,7 +40323,7 @@ class TexturePickerComponent {
         return this.textures.find((t) => t.name === currentName);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TexturePickerComponent, deps: [{ token: HomedecoratorIconCacheService }, { token: HomedecoratorAppService }, { token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TexturePickerComponent, isStandalone: false, selector: "rp-texture-picker", inputs: { allowedTextureType: "allowedTextureType", current: "current" }, outputs: { textureSelected: "textureSelected" }, usesOnChanges: true, ngImport: i0, template: "<mat-grid-list cols=\"2\" rowHeight=\"150px\">\r\n  @for (texture of textures | filter:'show':true; track texture) {\r\n    <mat-grid-tile [ngClass]=\"{'is-selected': current === texture.name}\">\r\n      <img [src]=\"assetPath + texture.url\" (click)=\"textureSelected.emit(texture)\">\r\n      <mat-grid-tile-footer fxLayoutAlign=\"{{(current === texture.name) ? 'space-between center' : 'start center'}}\">\r\n        <span class=\"texture-name\">\r\n          {{texture.name | localize}}\r\n        </span>\r\n        @if (current === texture.name) {\r\n          <co-icon [iconData]=\"iconService.getIcon(icon.CircleCheck)\"></co-icon>\r\n        }\r\n      </mat-grid-tile-footer>\r\n    </mat-grid-tile>\r\n  }\r\n</mat-grid-list>\r\n", styles: [":host ::ng-deep .mat-grid-tile{cursor:pointer}:host ::ng-deep .mat-grid-tile:after{content:\" \";border:4px solid transparent;position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;pointer-events:none;transition:all .2s ease-in}:host ::ng-deep .mat-grid-tile.is-selected:after{border:4px solid #da9803}:host ::ng-deep .mat-grid-tile.is-selected .mat-grid-tile-footer{background-color:#da98035e}:host ::ng-deep .mat-grid-tile:hover:after{border:4px solid rgba(218,152,3,.5294117647)}:host ::ng-deep .mat-grid-tile .mat-grid-tile-footer{background-color:#7880887d;padding:0 8px}:host ::ng-deep .mat-grid-tile .mat-grid-tile-footer span{overflow:hidden;padding-right:4px;text-overflow:ellipsis}:host ::ng-deep .mat-grid-tile .mat-grid-tile-footer co-icon ::ng-deep{height:20px;width:20px}:host ::ng-deep .mat-grid-tile .mat-grid-tile-footer co-icon ::ng-deep svg{fill:#fff}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$4.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$4.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i3$4.MatGridTileText, selector: "mat-grid-tile-header, mat-grid-tile-footer" }, { kind: "directive", type: i3$4.MatGridTileFooterCssMatStyler, selector: "mat-grid-tile-footer" }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: FilterPipe, name: "filter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TexturePickerComponent, isStandalone: false, selector: "rp-texture-picker", inputs: { allowedTextureType: "allowedTextureType", current: "current" }, outputs: { textureSelected: "textureSelected" }, usesOnChanges: true, ngImport: i0, template: "<mat-grid-list cols=\"2\" rowHeight=\"150px\">\r\n  @for (texture of textures | filter:'show':true; track texture) {\r\n    <mat-grid-tile [ngClass]=\"{'is-selected': current === texture.name}\">\r\n      <img [src]=\"assetPath + texture.url\" (click)=\"textureSelected.emit(texture)\">\r\n      <mat-grid-tile-footer fxLayoutAlign=\"{{(current === texture.name) ? 'space-between center' : 'start center'}}\">\r\n        <span class=\"texture-name\">\r\n          {{texture.name | localize}}\r\n        </span>\r\n        @if (current === texture.name) {\r\n          <co-icon [iconData]=\"iconService.getIcon(icon.CircleCheck)\"></co-icon>\r\n        }\r\n      </mat-grid-tile-footer>\r\n    </mat-grid-tile>\r\n  }\r\n</mat-grid-list>\r\n", styles: [":host ::ng-deep .mat-grid-tile{cursor:pointer}:host ::ng-deep .mat-grid-tile:after{content:\" \";border:4px solid transparent;position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;pointer-events:none;transition:all .2s ease-in}:host ::ng-deep .mat-grid-tile.is-selected:after{border:4px solid #da9803}:host ::ng-deep .mat-grid-tile.is-selected .mat-grid-tile-footer{background-color:#da98035e}:host ::ng-deep .mat-grid-tile:hover:after{border:4px solid rgba(218,152,3,.5294117647)}:host ::ng-deep .mat-grid-tile .mat-grid-tile-footer{background-color:#7880887d;padding:0 8px}:host ::ng-deep .mat-grid-tile .mat-grid-tile-footer span{overflow:hidden;padding-right:4px;text-overflow:ellipsis}:host ::ng-deep .mat-grid-tile .mat-grid-tile-footer co-icon ::ng-deep{height:20px;width:20px}:host ::ng-deep .mat-grid-tile .mat-grid-tile-footer co-icon ::ng-deep svg{fill:#fff}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$3.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$3.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i3$3.MatGridTileText, selector: "mat-grid-tile-header, mat-grid-tile-footer" }, { kind: "directive", type: i3$3.MatGridTileFooterCssMatStyler, selector: "mat-grid-tile-footer" }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: FilterPipe, name: "filter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TexturePickerComponent, decorators: [{
             type: Component,
@@ -40727,7 +40817,7 @@ class FloorCatalogComponent {
                 </div>
               </div>
     
-    `, isInline: true, styles: [".base-button{cursor:pointer;color:#fff;background:#da9803;border:1px solid #da9803;border-radius:3px;box-sizing:border-box;padding:4px 10px;line-height:30px;width:100%}.base-button:hover{background:#da9803;color:#fff}.floor-catalog-wrap .floor-catalog-selected-floor{background:#eee;display:flex;box-sizing:border-box;padding:15px;margin:5px 0 15px}.floor-catalog-wrap .floor-catalog-selected-floor .selected-floor-thumbnail{min-width:105px;max-width:160px;margin-right:10px;justify-content:center;align-items:center;vertical-align:middle;display:flex;height:auto}.floor-catalog-wrap .floor-catalog-selected-floor .selected-floor-thumbnail img{display:block;max-width:100%;height:max-content}.floor-catalog-wrap .selected-floor-info{display:flex;flex-direction:column;gap:10px}.floor-catalog-wrap .selected-floor-info p{margin:0;font-size:14px}.floor-catalog-wrap .floor-catalog-standard-floor{background:#eee;box-sizing:border-box;padding:15px;margin:5px 0 15px}.floor-catalog-wrap .floor-catalog-standard-floor .selected-floor-info p{margin:0;font-size:14px}.selected-floor-properties p{font-weight:700;margin:0 0 10px;padding:0;font-size:14px}.selected-floor-properties .selected-floor-scale,.selected-floor-properties .floor-installation{display:flex;gap:10px;margin-bottom:20px;align-items:center}.selected-floor-properties .selected-floor-scale .up-down-input-wrapper,.selected-floor-properties .floor-installation .up-down-input-wrapper{position:relative}.selected-floor-properties .selected-floor-scale .up-down-input-wrapper label,.selected-floor-properties .floor-installation .up-down-input-wrapper label{position:absolute;font-size:12px;padding:5px}.selected-floor-properties .selected-floor-scale .selected-floor-input,.selected-floor-properties .floor-installation .selected-floor-input{border:1px solid #9FA9B4;box-sizing:border-box;padding:15px 10px 0;border-radius:3px;line-height:30px;width:100%}.selected-floor-properties .selected-floor-scale .placement-input,.selected-floor-properties .floor-installation .placement-input{min-width:300px}.selected-floor-properties .selected-floor-scale .scale-input,.selected-floor-properties .floor-installation .scale-input{min-width:100px}.selected-floor-properties .selected-floor-scale .range-slider,.selected-floor-properties .floor-installation .range-slider{color:#da9803;min-width:180px}.selected-floor-properties .up-down-buttons{display:flex;gap:10px;align-items:center;justify-content:center}.selected-floor-properties button{margin:0;cursor:pointer;border:none;box-sizing:border-box;padding:0;height:22px;width:22px;background:transparent;border-radius:100%}.selected-floor-properties button ::ng-deep co-icon{display:block;width:22px;height:22px}.selected-floor-properties button:hover ::ng-deep co-icon svg{fill:#da9803}:host ::ng-deep mat-icon{width:18px;height:18px}:host ::ng-deep mat-icon svg path{fill:#5b6875}.placeholderimage{height:90px;width:150px;background-color:#5b6875}.floor-detail-item{display:flex;justify-content:space-between}.floor-detail-item p{font-weight:300;font-size:14px}.floor-detail-download{display:flex;justify-content:flex-end}.floor-detail-download button{max-width:150px}\n"], dependencies: [{ kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ExportPdfComponent, selector: "rp-pdf-export", inputs: ["labelPlanksLeft", "labelPlanksRight", "labelPlanksTotal", "labelPlanksAngle"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    `, isInline: true, styles: [".base-button{cursor:pointer;color:#fff;background:#da9803;border:1px solid #da9803;border-radius:3px;box-sizing:border-box;padding:4px 10px;line-height:30px;width:100%}.base-button:hover{background:#da9803;color:#fff}.floor-catalog-wrap .floor-catalog-selected-floor{background:#eee;display:flex;box-sizing:border-box;padding:15px;margin:5px 0 15px}.floor-catalog-wrap .floor-catalog-selected-floor .selected-floor-thumbnail{min-width:105px;max-width:160px;margin-right:10px;justify-content:center;align-items:center;vertical-align:middle;display:flex;height:auto}.floor-catalog-wrap .floor-catalog-selected-floor .selected-floor-thumbnail img{display:block;max-width:100%;height:max-content}.floor-catalog-wrap .selected-floor-info{display:flex;flex-direction:column;gap:10px}.floor-catalog-wrap .selected-floor-info p{margin:0;font-size:14px}.floor-catalog-wrap .floor-catalog-standard-floor{background:#eee;box-sizing:border-box;padding:15px;margin:5px 0 15px}.floor-catalog-wrap .floor-catalog-standard-floor .selected-floor-info p{margin:0;font-size:14px}.selected-floor-properties p{font-weight:700;margin:0 0 10px;padding:0;font-size:14px}.selected-floor-properties .selected-floor-scale,.selected-floor-properties .floor-installation{display:flex;gap:10px;margin-bottom:20px;align-items:center}.selected-floor-properties .selected-floor-scale .up-down-input-wrapper,.selected-floor-properties .floor-installation .up-down-input-wrapper{position:relative}.selected-floor-properties .selected-floor-scale .up-down-input-wrapper label,.selected-floor-properties .floor-installation .up-down-input-wrapper label{position:absolute;font-size:12px;padding:5px}.selected-floor-properties .selected-floor-scale .selected-floor-input,.selected-floor-properties .floor-installation .selected-floor-input{border:1px solid #9FA9B4;box-sizing:border-box;padding:15px 10px 0;border-radius:3px;line-height:30px;width:100%}.selected-floor-properties .selected-floor-scale .placement-input,.selected-floor-properties .floor-installation .placement-input{min-width:300px}.selected-floor-properties .selected-floor-scale .scale-input,.selected-floor-properties .floor-installation .scale-input{min-width:100px}.selected-floor-properties .selected-floor-scale .range-slider,.selected-floor-properties .floor-installation .range-slider{color:#da9803;min-width:180px}.selected-floor-properties .up-down-buttons{display:flex;gap:10px;align-items:center;justify-content:center}.selected-floor-properties button{margin:0;cursor:pointer;border:none;box-sizing:border-box;padding:0;height:22px;width:22px;background:transparent;border-radius:100%}.selected-floor-properties button ::ng-deep co-icon{display:block;width:22px;height:22px}.selected-floor-properties button:hover ::ng-deep co-icon svg{fill:#da9803}:host ::ng-deep mat-icon{width:18px;height:18px}:host ::ng-deep mat-icon svg path{fill:#5b6875}.placeholderimage{height:90px;width:150px;background-color:#5b6875}.floor-detail-item{display:flex;justify-content:space-between}.floor-detail-item p{font-weight:300;font-size:14px}.floor-detail-download{display:flex;justify-content:flex-end}.floor-detail-download button{max-width:150px}\n"], dependencies: [{ kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ExportPdfComponent, selector: "rp-pdf-export", inputs: ["labelPlanksLeft", "labelPlanksRight", "labelPlanksTotal", "labelPlanksAngle"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FloorCatalogComponent, decorators: [{
             type: Component,
@@ -41112,7 +41202,7 @@ class AppearanceSectionComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppearanceSectionComponent, deps: [{ token: HomedecoratorIconCacheService }, { token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AppearanceSectionComponent, isStandalone: false, selector: "rp-appearance-section", inputs: { type: "type", hideTextureTab: "hideTextureTab", hideColorTab: "hideColorTab", hidePhotoTab: "hidePhotoTab", showGlassOption: "showGlassOption", texturePlane: "texturePlane", plainTexture: "plainTexture", color: "color", textureWidth: "textureWidth", textureHeight: "textureHeight", photoOptions: "photoOptions", glassMaterial: "glassMaterial" }, outputs: { setTexture: "setTexture", setColor: "setColor", setMaterial: "setMaterial" }, usesOnChanges: true, ngImport: i0, template: "<mat-tab-group\r\n  mat-stretch-tabs\r\n  class=\"tab tab--skin\"\r\n  [selectedIndex]=\"selectedTabIndex\"\r\n  (selectedIndexChange)=\"updateSelectedTabIndex($event)\"\r\n  >\r\n  @if (showProductTab) {\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <div class=\"appearance-tile\">\r\n          <co-icon [iconData]=\"iconService.getIcon(icon.GridLight)\"></co-icon>\r\n          <span class=\"appearance-label\">{{ 'PRODUCT' | localize }}</span>\r\n        </div>\r\n      </ng-template>\r\n      <div>\r\n        @if (type === 'floor') {\r\n          <rp-floor-catalog\r\n            [type]=\"type\"\r\n            [currentTexture]=\"texture\"\r\n            [texturePlane]=\"texturePlane\"\r\n            [plainTexture]=\"plainTexture\"\r\n            >\r\n          </rp-floor-catalog>\r\n        }\r\n      </div>\r\n    </mat-tab>\r\n  }\r\n  @if (!hideTextureTab) {\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <div class=\"appearance-tile\">\r\n          <co-icon [iconData]=\"iconService.getIcon(icon.PaintRollerLight)\"></co-icon>\r\n          <span class=\"appearance-label\">{{ 'TEXTURE' | localize }}</span>\r\n        </div>\r\n      </ng-template>\r\n      <div>\r\n        @if (texture?.type === textureType.Basic || texture?.type === textureType.PBR) {\r\n          <rp-texture-editor\r\n            [width]=\"textureWidth || texture?.tileSize\"\r\n            [height]=\"textureHeight || texture?.tileSize\"\r\n            [changedTexture]=\"texture\"\r\n            (setTexture)=\"newTexture($event)\"\r\n            [texturePlane]=\"texturePlane\"\r\n            [plainTexture]=\"plainTexture\"\r\n            [options]=\"options.None\"\r\n            [tiled]=\"type === 'floor'\"\r\n            >\r\n          </rp-texture-editor>\r\n        }\r\n        <rp-texture-picker\r\n          (textureSelected)=\"loadBasicTexture($event)\"\r\n          [allowedTextureType]=\"type\"\r\n          [current]=\"texture?.name\"\r\n          >\r\n        </rp-texture-picker>\r\n      </div>\r\n    </mat-tab>\r\n  }\r\n  @if (!hideColorTab) {\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <div class=\"appearance-tile\">\r\n          <co-icon [iconData]=\"iconService.getIcon(icon.FillDripLight)\"></co-icon>\r\n          <span class=\"appearance-label\">{{ 'COLOR' | localize }}</span>\r\n        </div>\r\n      </ng-template>\r\n      @if (!hidePhotoTab && showGlassOption) {\r\n        <div class=\"sliders-wrapper\">\r\n          <mat-slide-toggle\r\n            [checked]=\"glassMaterial\"\r\n            (change)=\"newTexture('GLASS')\"\r\n            [labelPosition]=\"'before'\"\r\n            >\r\n            {{ 'GLASS' | localize }}\r\n          </mat-slide-toggle>\r\n          <mat-divider></mat-divider>\r\n        </div>\r\n      }\r\n      <div>\r\n        @if (!glassMaterial) {\r\n          <rp-color-picker\r\n            [color]=\"texture ? null : color\"\r\n            (colorSelected)=\"updateColor($event)\"\r\n            [selectedTabIndex]=\"selectedTabIndex\"\r\n            >\r\n          </rp-color-picker>\r\n        }\r\n      </div>\r\n    </mat-tab>\r\n  }\r\n  @if (!hidePhotoTab && !glassMaterial) {\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <div class=\"appearance-tile\">\r\n          <co-icon [iconData]=\"iconService.getIcon(icon.ImageLight)\"></co-icon>\r\n          <span class=\"appearance-label\">{{ 'IMAGE' | localize }}</span>\r\n        </div>\r\n      </ng-template>\r\n      <div>\r\n        <rp-texture-editor\r\n          [width]=\"textureWidth || texture?.tileSize\"\r\n          [height]=\"textureHeight || texture?.tileSize\"\r\n          [changedTexture]=\"texture\"\r\n          (setTexture)=\"newTexture($event)\"\r\n          (removeTexture)=\"removeTexture()\"\r\n          [texturePlane]=\"texturePlane\"\r\n          [plainTexture]=\"plainTexture\"\r\n          [options]=\"photoOptions\"\r\n          [tiled]=\"type === 'floor'\"\r\n        ></rp-texture-editor>\r\n      </div>\r\n    </mat-tab>\r\n  }\r\n</mat-tab-group>\r\n", styles: [":host{flex:1;overflow-y:auto}mat-tab-group mat-icon{margin-bottom:4px}mat-tab-group ::ng-deep .mat-mdc-tab-header .mat-ink-bar{background-color:#da9803}mat-tab-group ::ng-deep .mat-mdc-tab-header .mat-tab-label{height:60px;padding:0 15px;min-width:auto;opacity:1}mat-tab-group ::ng-deep .appearance-tile{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px}mat-tab-group ::ng-deep .appearance-tile co-icon ::ng-deep{width:20px;height:20px}\n"], dependencies: [{ kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i4$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ColorPickerComponent, selector: "rp-color-picker", inputs: ["color", "selectedTabIndex"], outputs: ["colorSelected"] }, { kind: "component", type: TexturePickerComponent, selector: "rp-texture-picker", inputs: ["allowedTextureType", "current"], outputs: ["textureSelected"] }, { kind: "component", type: TextureEditorComponent, selector: "rp-texture-editor", inputs: ["width", "height", "texturePlane", "plainTexture", "changedTexture", "tiled", "options", "dragNDropEnforced"], outputs: ["setTexture", "removeTexture"] }, { kind: "component", type: FloorCatalogComponent, selector: "rp-floor-catalog", inputs: ["type", "currentTexture", "texturePlane", "plainTexture"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AppearanceSectionComponent, isStandalone: false, selector: "rp-appearance-section", inputs: { type: "type", hideTextureTab: "hideTextureTab", hideColorTab: "hideColorTab", hidePhotoTab: "hidePhotoTab", showGlassOption: "showGlassOption", texturePlane: "texturePlane", plainTexture: "plainTexture", color: "color", textureWidth: "textureWidth", textureHeight: "textureHeight", photoOptions: "photoOptions", glassMaterial: "glassMaterial" }, outputs: { setTexture: "setTexture", setColor: "setColor", setMaterial: "setMaterial" }, usesOnChanges: true, ngImport: i0, template: "<mat-tab-group\r\n  mat-stretch-tabs\r\n  class=\"tab tab--skin\"\r\n  [selectedIndex]=\"selectedTabIndex\"\r\n  (selectedIndexChange)=\"updateSelectedTabIndex($event)\"\r\n  >\r\n  @if (showProductTab) {\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <div class=\"appearance-tile\">\r\n          <co-icon [iconData]=\"iconService.getIcon(icon.GridLight)\"></co-icon>\r\n          <span class=\"appearance-label\">{{ 'PRODUCT' | localize }}</span>\r\n        </div>\r\n      </ng-template>\r\n      <div>\r\n        @if (type === 'floor') {\r\n          <rp-floor-catalog\r\n            [type]=\"type\"\r\n            [currentTexture]=\"texture\"\r\n            [texturePlane]=\"texturePlane\"\r\n            [plainTexture]=\"plainTexture\"\r\n            >\r\n          </rp-floor-catalog>\r\n        }\r\n      </div>\r\n    </mat-tab>\r\n  }\r\n  @if (!hideTextureTab) {\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <div class=\"appearance-tile\">\r\n          <co-icon [iconData]=\"iconService.getIcon(icon.PaintRollerLight)\"></co-icon>\r\n          <span class=\"appearance-label\">{{ 'TEXTURE' | localize }}</span>\r\n        </div>\r\n      </ng-template>\r\n      <div>\r\n        @if (texture?.type === textureType.Basic || texture?.type === textureType.PBR) {\r\n          <rp-texture-editor\r\n            [width]=\"textureWidth || texture?.tileSize\"\r\n            [height]=\"textureHeight || texture?.tileSize\"\r\n            [changedTexture]=\"texture\"\r\n            (setTexture)=\"newTexture($event)\"\r\n            [texturePlane]=\"texturePlane\"\r\n            [plainTexture]=\"plainTexture\"\r\n            [options]=\"options.None\"\r\n            [tiled]=\"type === 'floor'\"\r\n            >\r\n          </rp-texture-editor>\r\n        }\r\n        <rp-texture-picker\r\n          (textureSelected)=\"loadBasicTexture($event)\"\r\n          [allowedTextureType]=\"type\"\r\n          [current]=\"texture?.name\"\r\n          >\r\n        </rp-texture-picker>\r\n      </div>\r\n    </mat-tab>\r\n  }\r\n  @if (!hideColorTab) {\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <div class=\"appearance-tile\">\r\n          <co-icon [iconData]=\"iconService.getIcon(icon.FillDripLight)\"></co-icon>\r\n          <span class=\"appearance-label\">{{ 'COLOR' | localize }}</span>\r\n        </div>\r\n      </ng-template>\r\n      @if (!hidePhotoTab && showGlassOption) {\r\n        <div class=\"sliders-wrapper\">\r\n          <mat-slide-toggle\r\n            [checked]=\"glassMaterial\"\r\n            (change)=\"newTexture('GLASS')\"\r\n            [labelPosition]=\"'before'\"\r\n            >\r\n            {{ 'GLASS' | localize }}\r\n          </mat-slide-toggle>\r\n          <mat-divider></mat-divider>\r\n        </div>\r\n      }\r\n      <div>\r\n        @if (!glassMaterial) {\r\n          <rp-color-picker\r\n            [color]=\"texture ? null : color\"\r\n            (colorSelected)=\"updateColor($event)\"\r\n            [selectedTabIndex]=\"selectedTabIndex\"\r\n            >\r\n          </rp-color-picker>\r\n        }\r\n      </div>\r\n    </mat-tab>\r\n  }\r\n  @if (!hidePhotoTab && !glassMaterial) {\r\n    <mat-tab>\r\n      <ng-template mat-tab-label>\r\n        <div class=\"appearance-tile\">\r\n          <co-icon [iconData]=\"iconService.getIcon(icon.ImageLight)\"></co-icon>\r\n          <span class=\"appearance-label\">{{ 'IMAGE' | localize }}</span>\r\n        </div>\r\n      </ng-template>\r\n      <div>\r\n        <rp-texture-editor\r\n          [width]=\"textureWidth || texture?.tileSize\"\r\n          [height]=\"textureHeight || texture?.tileSize\"\r\n          [changedTexture]=\"texture\"\r\n          (setTexture)=\"newTexture($event)\"\r\n          (removeTexture)=\"removeTexture()\"\r\n          [texturePlane]=\"texturePlane\"\r\n          [plainTexture]=\"plainTexture\"\r\n          [options]=\"photoOptions\"\r\n          [tiled]=\"type === 'floor'\"\r\n        ></rp-texture-editor>\r\n      </div>\r\n    </mat-tab>\r\n  }\r\n</mat-tab-group>\r\n", styles: [":host{flex:1;overflow-y:auto}mat-tab-group mat-icon{margin-bottom:4px}mat-tab-group ::ng-deep .mat-mdc-tab-header .mat-ink-bar{background-color:#da9803}mat-tab-group ::ng-deep .mat-mdc-tab-header .mat-tab-label{height:60px;padding:0 15px;min-width:auto;opacity:1}mat-tab-group ::ng-deep .appearance-tile{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px}mat-tab-group ::ng-deep .appearance-tile co-icon ::ng-deep{width:20px;height:20px}\n"], dependencies: [{ kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i4$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ColorPickerComponent, selector: "rp-color-picker", inputs: ["color", "selectedTabIndex"], outputs: ["colorSelected"] }, { kind: "component", type: TexturePickerComponent, selector: "rp-texture-picker", inputs: ["allowedTextureType", "current"], outputs: ["textureSelected"] }, { kind: "component", type: TextureEditorComponent, selector: "rp-texture-editor", inputs: ["width", "height", "texturePlane", "plainTexture", "changedTexture", "tiled", "options", "dragNDropEnforced"], outputs: ["setTexture", "removeTexture"] }, { kind: "component", type: FloorCatalogComponent, selector: "rp-floor-catalog", inputs: ["type", "currentTexture", "texturePlane", "plainTexture"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppearanceSectionComponent, decorators: [{
             type: Component,
@@ -41248,7 +41338,7 @@ class DimensionInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DimensionInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DimensionInputComponent, isStandalone: false, selector: "rp-dimension-input", inputs: { minValue: "minValue", maxValue: "maxValue", sourceValue: "sourceValue", title: "title" }, outputs: { dimensionChanged: "dimensionChanged", focus: "focus", blur: "blur" }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"auto center\">\r\n  <mat-form-field fxFlex=\"grow\">\r\n      <mat-label [textContent]=\"title\"></mat-label>\r\n    <input matInput\r\n      [min]=\"minValue\"\r\n      [max]=\"maxValue\"\r\n      type=\"number\"\r\n      [ngModel]=\"dimension\"\r\n      (ngModelChange)=\"handleDimensionChange($event)\"\r\n      (keydown.enter)=\"handleSave()\"\r\n      (focus)=\"focus.emit($event)\"\r\n      (blur)=\"blur.emit($event)\"\r\n    >\r\n<!--\r\n    <input\r\n      matInput\r\n      [min]=\"minValue\"\r\n      [max]=\"maxValue\"\r\n      type=\"number\"\r\n      [placeholder]=\"title\"\r\n      [ngModel]=\"dimension\"\r\n      (ngModelChange)=\"handleDimensionChange($event)\"\r\n      (keydown.enter)=\"handleSave()\"\r\n      (focus)=\"focus.emit($event)\"\r\n      (blur)=\"blur.emit($event)\"\r\n    >\r\n-->\r\n  </mat-form-field>\r\n  <button mat-icon-button\r\n    [disabled]=\"!valid\"\r\n    (click)=\"applyChange(dimension)\"\r\n  >\r\n    <mat-icon class=\"homedecorator-material-icons size-16\">check</mat-icon>\r\n  </button>\r\n  <button mat-icon-button\r\n    [disabled]=\"same\"\r\n    (click)=\"handleCancel()\"\r\n  >\r\n    <mat-icon class=\"homedecorator-material-icons size-16\">cancel</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{flex:1;overflow-y:auto}mat-icon.size-16{width:16px;height:16px;line-height:16px}mat-form-field input{text-align:right}\n"], dependencies: [{ kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DimensionInputComponent, isStandalone: false, selector: "rp-dimension-input", inputs: { minValue: "minValue", maxValue: "maxValue", sourceValue: "sourceValue", title: "title" }, outputs: { dimensionChanged: "dimensionChanged", focus: "focus", blur: "blur" }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"auto center\">\r\n  <mat-form-field fxFlex=\"grow\">\r\n      <mat-label [textContent]=\"title\"></mat-label>\r\n    <input matInput\r\n      [min]=\"minValue\"\r\n      [max]=\"maxValue\"\r\n      type=\"number\"\r\n      [ngModel]=\"dimension\"\r\n      (ngModelChange)=\"handleDimensionChange($event)\"\r\n      (keydown.enter)=\"handleSave()\"\r\n      (focus)=\"focus.emit($event)\"\r\n      (blur)=\"blur.emit($event)\"\r\n    >\r\n<!--\r\n    <input\r\n      matInput\r\n      [min]=\"minValue\"\r\n      [max]=\"maxValue\"\r\n      type=\"number\"\r\n      [placeholder]=\"title\"\r\n      [ngModel]=\"dimension\"\r\n      (ngModelChange)=\"handleDimensionChange($event)\"\r\n      (keydown.enter)=\"handleSave()\"\r\n      (focus)=\"focus.emit($event)\"\r\n      (blur)=\"blur.emit($event)\"\r\n    >\r\n-->\r\n  </mat-form-field>\r\n  <button mat-icon-button\r\n    [disabled]=\"!valid\"\r\n    (click)=\"applyChange(dimension)\"\r\n  >\r\n    <mat-icon class=\"homedecorator-material-icons size-16\">check</mat-icon>\r\n  </button>\r\n  <button mat-icon-button\r\n    [disabled]=\"same\"\r\n    (click)=\"handleCancel()\"\r\n  >\r\n    <mat-icon class=\"homedecorator-material-icons size-16\">cancel</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{flex:1;overflow-y:auto}mat-icon.size-16{width:16px;height:16px;line-height:16px}mat-form-field input{text-align:right}\n"], dependencies: [{ kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DimensionInputComponent, decorators: [{
             type: Component,
@@ -41427,7 +41517,7 @@ class SelectedObjectComponent {
         this._hudService.updateSelectedItemHud();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectedObjectComponent, deps: [{ token: MessageBusService }, { token: SceneService }, { token: HudService }, { token: HomedecoratorIconCacheService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SelectedObjectComponent, isStandalone: false, selector: "rp-selected-object", inputs: { object: "object" }, outputs: { onSelectedObjectChange: "onSelectedObjectChange" }, usesOnChanges: true, ngImport: i0, template: "@if (object) {\r\n  <section>\r\n    <h3 class=\"mat-subheading-2\">{{object.name | localize}}</h3>\r\n    @if (object.description) {\r\n      <p class=\"mat-body\">{{object.description | localize}}</p>\r\n    }\r\n    @if (object.isCustom) {\r\n      <div>\r\n        <h3 class=\"mat-subheading-2\">{{'MEASUREMENTS' | localize}}</h3>\r\n        <rp-dimension-input\r\n          [sourceValue]=\"object.getWidth() * 100\"\r\n          [minValue]=\"minWidth\"\r\n          title=\"{{'WIDTH' | localize}}\"\r\n          (dimensionChanged)=\"applyWidth($event / 100)\"\r\n          >\r\n        </rp-dimension-input>\r\n        <rp-dimension-input\r\n          [sourceValue]=\"object.getHeight() * 100\"\r\n          [minValue]=\"minHeight\"\r\n          title=\"{{'HEIGHT' | localize}}\"\r\n          (dimensionChanged)=\"applyHeight($event / 100)\"\r\n          >\r\n        </rp-dimension-input>\r\n        <mat-divider></mat-divider>\r\n      </div>\r\n    }\r\n    @if (object.opening && !object.doorpost) {\r\n      <div class=\"sliders-wrapper\">\r\n        <h3 class=\"mat-subheading-2\">{{'OPENING_INDICATIONS' | localize}}</h3>\r\n        <mat-slide-toggle\r\n          min=\"0\"\r\n          max=\"1\"\r\n          [checked]=\"object.opening.show\"\r\n          [labelPosition]=\"'before'\"\r\n          (change)=\"openingDirectionChange('show', $event)\"\r\n          >\r\n          {{'SHOW' | localize}}:\r\n        </mat-slide-toggle>\r\n        @if (object.opening.show) {\r\n          <div>\r\n            <mat-slide-toggle\r\n              min=\"0\"\r\n              max=\"1\"\r\n              [checked]=\"object.opening.double\"\r\n              [labelPosition]=\"'before'\"\r\n              (change)=\"openingDirectionChange('double', $event)\"\r\n              >\r\n              {{'DOUBLE' | localize}}:\r\n            </mat-slide-toggle>\r\n          </div>\r\n          <div>\r\n            <mat-slide-toggle\r\n              min=\"0\"\r\n              max=\"1\"\r\n              [checked]=\"object.opening.invertDirection\"\r\n              [labelPosition]=\"'before'\"\r\n              (change)=\"openingDirectionChange('invertDirection', $event)\"\r\n              >\r\n              {{'OPENING_DIRECTION_FRONT_BACK' | localize}}:\r\n            </mat-slide-toggle>\r\n          </div>\r\n          @if (!object.opening.double) {\r\n            <mat-slide-toggle\r\n              min=\"0\"\r\n              max=\"1\"\r\n              [checked]=\"object.opening.invertSide\"\r\n              [labelPosition]=\"'before'\"\r\n              (change)=\"openingDirectionChange('invertSide', $event)\"\r\n              >\r\n              {{'OPENING_SIDE_LEFT_RIGHT' | localize}}:\r\n            </mat-slide-toggle>\r\n          }\r\n        }\r\n        <mat-divider></mat-divider>\r\n      </div>\r\n    }\r\n    @if (object.scalable) {\r\n      <div>\r\n        <rp-slider-input\r\n          title=\"{{'SCALE_PERCENTAGE' | localize}}\"\r\n          min=\"50\"\r\n          max=\"200\"\r\n          step=\"1\"\r\n          [value]=\"object.scalePercentage\"\r\n          (onChange)=\"updateObjectScale($event)\">\r\n        </rp-slider-input>\r\n      </div>\r\n    }\r\n    @if (object.isCustom) {\r\n      <div>\r\n        <h3 class=\"mat-subheading-2\">{{'APPEARANCE' | localize}}</h3>\r\n        <ng-template #color_content>\r\n          <rp-appearance-section\r\n            type=\"wallFloor\"\r\n            [hideTextureTab]=\"true\"\r\n            [hidePhotoTab]=\"true\"\r\n            [color]=\"object.frameColor\"\r\n            (setColor)=\"updateFrameColor($event)\"\r\n            >\r\n          </rp-appearance-section>\r\n        </ng-template>\r\n        @if (object.doorpost) {\r\n          <ng-container [ngTemplateOutlet]=\"color_content\"></ng-container>\r\n        } @else {\r\n          <mat-tab-group mat-stretch-tabs\r\n            class=\"tab tab--skin\"\r\n            [selectedIndex]=\"selectedTabIndex\"\r\n            (selectedIndexChange)=\"updateSelectedTabIndex($event)\"\r\n            >\r\n            <mat-tab>\r\n              <ng-template mat-tab-label>\r\n                <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n                  <co-icon [iconData]=\"iconService.getIcon(icon.ConfFrame)\"></co-icon>\r\n                  {{object.frameTitle | localize}}\r\n                </div>\r\n              </ng-template>\r\n              <div>\r\n                <ng-container [ngTemplateOutlet]=\"color_content\"></ng-container>\r\n              </div>\r\n            </mat-tab>\r\n            <mat-tab>\r\n              <ng-template mat-tab-label>\r\n                <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n                  <co-icon [iconData]=\"iconService.getIcon(icon.ConfPlane)\"></co-icon>\r\n                  {{object.customMeshTitle | localize}}\r\n                </div>\r\n              </ng-template>\r\n              <div>\r\n                <rp-appearance-section\r\n                  type=\"wallFloor\"\r\n                  [showGlassOption]=\"true\"\r\n                  [plainTexture]=\"object.texture\"\r\n                  [textureWidth]=\"object.getWidth() * 100\"\r\n                  [textureHeight]=\"object.getHeight() * 100\"\r\n                  [hideTextureTab]=\"true\"\r\n                  [hideColorTab]=\"!object.canChangeCustomMeshColor\"\r\n                  [color]=\"object.doorColor\"\r\n                  [glassMaterial]=\"object.isGlass\"\r\n                  [photoOptions]=\"Options.Image\"\r\n                  (setTexture)=\"updateTexture($event)\"\r\n                  (setColor)=\"updateColor($event)\"\r\n                  (setMaterial)=\"updateMaterial($event)\"\r\n                  >\r\n                </rp-appearance-section>\r\n              </div>\r\n            </mat-tab>\r\n          </mat-tab-group>\r\n        }\r\n      </div>\r\n    }\r\n  </section>\r\n}\r\n", styles: [":host{overflow:hidden}:host section{overflow-y:auto;height:100%}.sliders-wrapper{margin-bottom:8px}:host ::ng-deep .mat-mdc-slide-toggle{width:100%;height:32px;margin-bottom:8px}:host ::ng-deep .mat-mdc-slide-toggle .mat-slide-toggle-label{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i4$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: SliderInputComponent, selector: "rp-slider-input", inputs: ["title", "min", "max", "step", "value"], outputs: ["onChange"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { kind: "component", type: AppearanceSectionComponent, selector: "rp-appearance-section", inputs: ["type", "hideTextureTab", "hideColorTab", "hidePhotoTab", "showGlassOption", "texturePlane", "plainTexture", "color", "textureWidth", "textureHeight", "photoOptions", "glassMaterial"], outputs: ["setTexture", "setColor", "setMaterial"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SelectedObjectComponent, isStandalone: false, selector: "rp-selected-object", inputs: { object: "object" }, outputs: { onSelectedObjectChange: "onSelectedObjectChange" }, usesOnChanges: true, ngImport: i0, template: "@if (object) {\r\n  <section>\r\n    <h3 class=\"mat-subheading-2\">{{object.name | localize}}</h3>\r\n    @if (object.description) {\r\n      <p class=\"mat-body\">{{object.description | localize}}</p>\r\n    }\r\n    @if (object.isCustom) {\r\n      <div>\r\n        <h3 class=\"mat-subheading-2\">{{'MEASUREMENTS' | localize}}</h3>\r\n        <rp-dimension-input\r\n          [sourceValue]=\"object.getWidth() * 100\"\r\n          [minValue]=\"minWidth\"\r\n          title=\"{{'WIDTH' | localize}}\"\r\n          (dimensionChanged)=\"applyWidth($event / 100)\"\r\n          >\r\n        </rp-dimension-input>\r\n        <rp-dimension-input\r\n          [sourceValue]=\"object.getHeight() * 100\"\r\n          [minValue]=\"minHeight\"\r\n          title=\"{{'HEIGHT' | localize}}\"\r\n          (dimensionChanged)=\"applyHeight($event / 100)\"\r\n          >\r\n        </rp-dimension-input>\r\n        <mat-divider></mat-divider>\r\n      </div>\r\n    }\r\n    @if (object.opening && !object.doorpost) {\r\n      <div class=\"sliders-wrapper\">\r\n        <h3 class=\"mat-subheading-2\">{{'OPENING_INDICATIONS' | localize}}</h3>\r\n        <mat-slide-toggle\r\n          min=\"0\"\r\n          max=\"1\"\r\n          [checked]=\"object.opening.show\"\r\n          [labelPosition]=\"'before'\"\r\n          (change)=\"openingDirectionChange('show', $event)\"\r\n          >\r\n          {{'SHOW' | localize}}:\r\n        </mat-slide-toggle>\r\n        @if (object.opening.show) {\r\n          <div>\r\n            <mat-slide-toggle\r\n              min=\"0\"\r\n              max=\"1\"\r\n              [checked]=\"object.opening.double\"\r\n              [labelPosition]=\"'before'\"\r\n              (change)=\"openingDirectionChange('double', $event)\"\r\n              >\r\n              {{'DOUBLE' | localize}}:\r\n            </mat-slide-toggle>\r\n          </div>\r\n          <div>\r\n            <mat-slide-toggle\r\n              min=\"0\"\r\n              max=\"1\"\r\n              [checked]=\"object.opening.invertDirection\"\r\n              [labelPosition]=\"'before'\"\r\n              (change)=\"openingDirectionChange('invertDirection', $event)\"\r\n              >\r\n              {{'OPENING_DIRECTION_FRONT_BACK' | localize}}:\r\n            </mat-slide-toggle>\r\n          </div>\r\n          @if (!object.opening.double) {\r\n            <mat-slide-toggle\r\n              min=\"0\"\r\n              max=\"1\"\r\n              [checked]=\"object.opening.invertSide\"\r\n              [labelPosition]=\"'before'\"\r\n              (change)=\"openingDirectionChange('invertSide', $event)\"\r\n              >\r\n              {{'OPENING_SIDE_LEFT_RIGHT' | localize}}:\r\n            </mat-slide-toggle>\r\n          }\r\n        }\r\n        <mat-divider></mat-divider>\r\n      </div>\r\n    }\r\n    @if (object.scalable) {\r\n      <div>\r\n        <rp-slider-input\r\n          title=\"{{'SCALE_PERCENTAGE' | localize}}\"\r\n          min=\"50\"\r\n          max=\"200\"\r\n          step=\"1\"\r\n          [value]=\"object.scalePercentage\"\r\n          (onChange)=\"updateObjectScale($event)\">\r\n        </rp-slider-input>\r\n      </div>\r\n    }\r\n    @if (object.isCustom) {\r\n      <div>\r\n        <h3 class=\"mat-subheading-2\">{{'APPEARANCE' | localize}}</h3>\r\n        <ng-template #color_content>\r\n          <rp-appearance-section\r\n            type=\"wallFloor\"\r\n            [hideTextureTab]=\"true\"\r\n            [hidePhotoTab]=\"true\"\r\n            [color]=\"object.frameColor\"\r\n            (setColor)=\"updateFrameColor($event)\"\r\n            >\r\n          </rp-appearance-section>\r\n        </ng-template>\r\n        @if (object.doorpost) {\r\n          <ng-container [ngTemplateOutlet]=\"color_content\"></ng-container>\r\n        } @else {\r\n          <mat-tab-group mat-stretch-tabs\r\n            class=\"tab tab--skin\"\r\n            [selectedIndex]=\"selectedTabIndex\"\r\n            (selectedIndexChange)=\"updateSelectedTabIndex($event)\"\r\n            >\r\n            <mat-tab>\r\n              <ng-template mat-tab-label>\r\n                <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n                  <co-icon [iconData]=\"iconService.getIcon(icon.ConfFrame)\"></co-icon>\r\n                  {{object.frameTitle | localize}}\r\n                </div>\r\n              </ng-template>\r\n              <div>\r\n                <ng-container [ngTemplateOutlet]=\"color_content\"></ng-container>\r\n              </div>\r\n            </mat-tab>\r\n            <mat-tab>\r\n              <ng-template mat-tab-label>\r\n                <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n                  <co-icon [iconData]=\"iconService.getIcon(icon.ConfPlane)\"></co-icon>\r\n                  {{object.customMeshTitle | localize}}\r\n                </div>\r\n              </ng-template>\r\n              <div>\r\n                <rp-appearance-section\r\n                  type=\"wallFloor\"\r\n                  [showGlassOption]=\"true\"\r\n                  [plainTexture]=\"object.texture\"\r\n                  [textureWidth]=\"object.getWidth() * 100\"\r\n                  [textureHeight]=\"object.getHeight() * 100\"\r\n                  [hideTextureTab]=\"true\"\r\n                  [hideColorTab]=\"!object.canChangeCustomMeshColor\"\r\n                  [color]=\"object.doorColor\"\r\n                  [glassMaterial]=\"object.isGlass\"\r\n                  [photoOptions]=\"Options.Image\"\r\n                  (setTexture)=\"updateTexture($event)\"\r\n                  (setColor)=\"updateColor($event)\"\r\n                  (setMaterial)=\"updateMaterial($event)\"\r\n                  >\r\n                </rp-appearance-section>\r\n              </div>\r\n            </mat-tab>\r\n          </mat-tab-group>\r\n        }\r\n      </div>\r\n    }\r\n  </section>\r\n}\r\n", styles: [":host{overflow:hidden}:host section{overflow-y:auto;height:100%}.sliders-wrapper{margin-bottom:8px}:host ::ng-deep .mat-mdc-slide-toggle{width:100%;height:32px;margin-bottom:8px}:host ::ng-deep .mat-mdc-slide-toggle .mat-slide-toggle-label{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i4$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: SliderInputComponent, selector: "rp-slider-input", inputs: ["title", "min", "max", "step", "value"], outputs: ["onChange"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { kind: "component", type: AppearanceSectionComponent, selector: "rp-appearance-section", inputs: ["type", "hideTextureTab", "hideColorTab", "hidePhotoTab", "showGlassOption", "texturePlane", "plainTexture", "color", "textureWidth", "textureHeight", "photoOptions", "glassMaterial"], outputs: ["setTexture", "setColor", "setMaterial"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectedObjectComponent, decorators: [{
             type: Component,
@@ -41535,7 +41625,7 @@ class SelectedThreedObjectComponent {
         return degrees;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectedThreedObjectComponent, deps: [{ token: MessageBusService }, { token: ItemService }, { token: SceneService }, { token: HudService }, { token: RotationService }, { token: ConfigurationService }, { token: HomedecoratorIconCacheService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SelectedThreedObjectComponent, isStandalone: false, selector: "rp-selected-threed-object", inputs: { object: "object", showCopy: "showCopy", showDelete: "showDelete", showLock: "showLock" }, outputs: { onSelectedObjectChange: "onSelectedObjectChange" }, ngImport: i0, template: "@if (object) {\r\n  <section>\r\n    <h3 class=\"mat-subheading-2\">{{object.name | localize}}</h3>\r\n    @if (object.description) {\r\n      <p class=\"mat-body\">{{object.description | localize}}</p>\r\n    }\r\n    <div>\r\n      <h3 class=\"mat-subheading-2\">{{'ROTATION' | localize}}</h3>\r\n      @if (object.canRotateX) {\r\n        <div class=\"rotation-wrapper\">\r\n          <span [textContent]=\"'x'\"></span>\r\n          <mat-slider class=\"value\" thumbLabel min=\"-180\" max=\"180\"\r\n            [step]=\"step\"\r\n            [ngModel]=\"rotationX\"\r\n            [disabled]=\"object.locked\"\r\n          (input)=\"handleUpdateRotationX($event)\"></mat-slider>\r\n          <input matInput type=\"number\" min=\"-180\" max=\"180\"\r\n            [step]=\"step\"\r\n            [ngModel]=\"rotationX\"\r\n            [disabled]=\"object.locked\"\r\n            (ngModelChange)=\"handleUpdateRotationXValue($event)\">\r\n            <button mat-mini-fab primary (click)=\"resetRotationX()\" matTooltip=\"{{'RESET' | localize}}\" [disabled]=\"object.locked\">\r\n              <mat-icon class=\"homedecorator-material-icons\">cached</mat-icon>\r\n            </button>\r\n          </div>\r\n        }\r\n        @if (object.canRotateY) {\r\n          <div class=\"rotation-wrapper\">\r\n            <span [textContent]=\"'y'\"></span>\r\n            <mat-slider class=\"value\" thumbLabel min=\"-180\" max=\"180\"\r\n              [step]=\"step\"\r\n              [ngModel]=\"rotationY\"\r\n              [disabled]=\"object.locked\"\r\n            (input)=\"handleUpdateRotationY($event)\"></mat-slider>\r\n            <input matInput type=\"number\" min=\"-180\" max=\"180\"\r\n              [step]=\"step\"\r\n              [ngModel]=\"rotationY\"\r\n              [disabled]=\"object.locked\"\r\n              (ngModelChange)=\"handleUpdateRotationYValue($event)\">\r\n              <button mat-mini-fab primary (click)=\"resetRotationY()\" matTooltip=\"{{'RESET' | localize}}\" [disabled]=\"object.locked\">\r\n                <mat-icon class=\"homedecorator-material-icons\">cached</mat-icon>\r\n              </button>\r\n            </div>\r\n          }\r\n          @if (object.canRotateZ) {\r\n            <div class=\"rotation-wrapper\">\r\n              <span [textContent]=\"'z'\"></span>\r\n              <mat-slider class=\"value\" thumbLabel min=\"-180\" max=\"180\"\r\n                [step]=\"step\"\r\n                [ngModel]=\"rotationZ\"\r\n                [disabled]=\"object.locked\"\r\n              (input)=\"handleUpdateRotationZ($event)\"></mat-slider>\r\n              <input matInput type=\"number\" min=\"-180\" max=\"180\"\r\n                [step]=\"step\"\r\n                [ngModel]=\"rotationZ\"\r\n                [disabled]=\"object.locked\"\r\n                (ngModelChange)=\"handleUpdateRotationZValue($event)\">\r\n                <button mat-mini-fab primary (click)=\"resetRotationZ()\" matTooltip=\"{{'RESET' | localize}}\" [disabled]=\"object.locked\">\r\n                  <mat-icon class=\"homedecorator-material-icons\">cached</mat-icon>\r\n                </button>\r\n              </div>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div class=\"button-wrapper\">\r\n              @if (showCopy) {\r\n                <button mat-mini-fab primary (click)=\"copyObject()\" matTooltip=\"{{'COPY' | localize}}\">\r\n                  <mat-icon class=\"homedecorator-material-icons\">file_copy</mat-icon>\r\n                </button>\r\n              }\r\n              @if (showDelete) {\r\n                <button mat-mini-fab (click)=\"removeObject()\" matTooltip=\"{{'REMOVE' | localize}}\">\r\n                  <mat-icon class=\"homedecorator-material-icons\">delete</mat-icon>\r\n                </button>\r\n              }\r\n              @if (showLock) {\r\n                <button mat-mini-fab (click)=\"toggleLockObject()\" matTooltip=\"{{(object.locked ? 'UNLOCK' : 'LOCK') | localize}}\">\r\n                  <mat-icon class=\"homedecorator-material-icons\" [textContent]=\"object.locked ? 'lock' : 'lock_open'\"></mat-icon>\r\n                </button>\r\n              }\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n          </div>\r\n        </section>\r\n      }\r\n", styles: [":host{overflow:hidden}:host section{overflow-y:auto;height:100%}:host .rotation-wrapper{display:flex;align-items:center}:host .rotation-wrapper mat-slider{width:72%}:host .rotation-wrapper input{width:15%}:host .rotation-wrapper button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background-color:#fff;color:#000}:host .button-wrapper{padding:0 100px;display:flex;justify-content:space-between}:host .button-wrapper button{background-color:#fff;color:#000}\n"], dependencies: [{ kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SelectedThreedObjectComponent, isStandalone: false, selector: "rp-selected-threed-object", inputs: { object: "object", showCopy: "showCopy", showDelete: "showDelete", showLock: "showLock" }, outputs: { onSelectedObjectChange: "onSelectedObjectChange" }, ngImport: i0, template: "@if (object) {\r\n  <section>\r\n    <h3 class=\"mat-subheading-2\">{{object.name | localize}}</h3>\r\n    @if (object.description) {\r\n      <p class=\"mat-body\">{{object.description | localize}}</p>\r\n    }\r\n    <div>\r\n      <h3 class=\"mat-subheading-2\">{{'ROTATION' | localize}}</h3>\r\n      @if (object.canRotateX) {\r\n        <div class=\"rotation-wrapper\">\r\n          <span [textContent]=\"'x'\"></span>\r\n          <mat-slider class=\"value\" thumbLabel min=\"-180\" max=\"180\"\r\n            [step]=\"step\"\r\n            [ngModel]=\"rotationX\"\r\n            [disabled]=\"object.locked\"\r\n          (input)=\"handleUpdateRotationX($event)\"></mat-slider>\r\n          <input matInput type=\"number\" min=\"-180\" max=\"180\"\r\n            [step]=\"step\"\r\n            [ngModel]=\"rotationX\"\r\n            [disabled]=\"object.locked\"\r\n            (ngModelChange)=\"handleUpdateRotationXValue($event)\">\r\n            <button mat-mini-fab primary (click)=\"resetRotationX()\" matTooltip=\"{{'RESET' | localize}}\" [disabled]=\"object.locked\">\r\n              <mat-icon class=\"homedecorator-material-icons\">cached</mat-icon>\r\n            </button>\r\n          </div>\r\n        }\r\n        @if (object.canRotateY) {\r\n          <div class=\"rotation-wrapper\">\r\n            <span [textContent]=\"'y'\"></span>\r\n            <mat-slider class=\"value\" thumbLabel min=\"-180\" max=\"180\"\r\n              [step]=\"step\"\r\n              [ngModel]=\"rotationY\"\r\n              [disabled]=\"object.locked\"\r\n            (input)=\"handleUpdateRotationY($event)\"></mat-slider>\r\n            <input matInput type=\"number\" min=\"-180\" max=\"180\"\r\n              [step]=\"step\"\r\n              [ngModel]=\"rotationY\"\r\n              [disabled]=\"object.locked\"\r\n              (ngModelChange)=\"handleUpdateRotationYValue($event)\">\r\n              <button mat-mini-fab primary (click)=\"resetRotationY()\" matTooltip=\"{{'RESET' | localize}}\" [disabled]=\"object.locked\">\r\n                <mat-icon class=\"homedecorator-material-icons\">cached</mat-icon>\r\n              </button>\r\n            </div>\r\n          }\r\n          @if (object.canRotateZ) {\r\n            <div class=\"rotation-wrapper\">\r\n              <span [textContent]=\"'z'\"></span>\r\n              <mat-slider class=\"value\" thumbLabel min=\"-180\" max=\"180\"\r\n                [step]=\"step\"\r\n                [ngModel]=\"rotationZ\"\r\n                [disabled]=\"object.locked\"\r\n              (input)=\"handleUpdateRotationZ($event)\"></mat-slider>\r\n              <input matInput type=\"number\" min=\"-180\" max=\"180\"\r\n                [step]=\"step\"\r\n                [ngModel]=\"rotationZ\"\r\n                [disabled]=\"object.locked\"\r\n                (ngModelChange)=\"handleUpdateRotationZValue($event)\">\r\n                <button mat-mini-fab primary (click)=\"resetRotationZ()\" matTooltip=\"{{'RESET' | localize}}\" [disabled]=\"object.locked\">\r\n                  <mat-icon class=\"homedecorator-material-icons\">cached</mat-icon>\r\n                </button>\r\n              </div>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div class=\"button-wrapper\">\r\n              @if (showCopy) {\r\n                <button mat-mini-fab primary (click)=\"copyObject()\" matTooltip=\"{{'COPY' | localize}}\">\r\n                  <mat-icon class=\"homedecorator-material-icons\">file_copy</mat-icon>\r\n                </button>\r\n              }\r\n              @if (showDelete) {\r\n                <button mat-mini-fab (click)=\"removeObject()\" matTooltip=\"{{'REMOVE' | localize}}\">\r\n                  <mat-icon class=\"homedecorator-material-icons\">delete</mat-icon>\r\n                </button>\r\n              }\r\n              @if (showLock) {\r\n                <button mat-mini-fab (click)=\"toggleLockObject()\" matTooltip=\"{{(object.locked ? 'UNLOCK' : 'LOCK') | localize}}\">\r\n                  <mat-icon class=\"homedecorator-material-icons\" [textContent]=\"object.locked ? 'lock' : 'lock_open'\"></mat-icon>\r\n                </button>\r\n              }\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n          </div>\r\n        </section>\r\n      }\r\n", styles: [":host{overflow:hidden}:host section{overflow-y:auto;height:100%}:host .rotation-wrapper{display:flex;align-items:center}:host .rotation-wrapper mat-slider{width:72%}:host .rotation-wrapper input{width:15%}:host .rotation-wrapper button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background-color:#fff;color:#000}:host .button-wrapper{padding:0 100px;display:flex;justify-content:space-between}:host .button-wrapper button{background-color:#fff;color:#000}\n"], dependencies: [{ kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectedThreedObjectComponent, decorators: [{
             type: Component,
@@ -41595,7 +41685,7 @@ class SelectedWallComponent {
         this.deselectCorner();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectedWallComponent, deps: [{ token: MessageBusService }, { token: ConfigurationService }, { token: ViewModeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SelectedWallComponent, isStandalone: false, selector: "rp-selected-wall", inputs: { wall: "wall", texturePlane: "texturePlane", color: "color", minWallHeight: "minWallHeight", maxWallHeight: "maxWallHeight", maxWallThickness: "maxWallThickness", maxWallLength: "maxWallLength", minWallLength: "minWallLength" }, outputs: { remove: "remove", setLength: "setLength", setHeight: "setHeight", setThickness: "setThickness", selectCorner: "selectCorner", setTexture: "setTexture", setColor: "setColor" }, ngImport: i0, template: "@if (wall) {\r\n  <section>\r\n    @if (viewModeService.viewMode === viewModes.FloorPlan2D) {\r\n      <button\r\n        mat-raised-button\r\n        class=\"remove\"\r\n        (click)=\"remove.emit(wall)\">\r\n        <mat-icon class=\"homedecorator-material-icons\">delete</mat-icon>\r\n        {{'REMOVE' | localize}}\r\n      </button>\r\n    }\r\n    <h3 class=\"mat-subheading-2\"> {{ 'MEASUREMENTS' | localize}}</h3>\r\n    <div>\r\n      @if (!detailedWallMeasurementsMode) {\r\n        <rp-dimension-input\r\n          [sourceValue]=\"wall.innerLength * 100\"\r\n          [maxValue]=\"maxWallLength\"\r\n          [minValue]=\"minWallLength\"\r\n          title=\"{{'LENGTH' | localize}}\"\r\n          (focus)=\"markCorner()\"\r\n          (blur)=\"deselectCorner()\"\r\n          (dimensionChanged)=\"lengthChanged($event)\"\r\n          >\r\n        </rp-dimension-input>\r\n      }\r\n      <div class=\"wall-direction-toggle\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n        <span class=\"mat-body-2\">{{'REVERSE_WALL_DIRECTION' | localize}}</span>\r\n        <mat-slide-toggle\r\n          min=\"0\"\r\n          max=\"1\"\r\n          [checked]=\"wallDirectionReversed\"\r\n          (focusout)=\"deselectCorner()\"\r\n          (change)=\"reverseWallDirection($event.checked)\"\r\n          >\r\n        </mat-slide-toggle>\r\n      </div>\r\n      <rp-dimension-input\r\n        [sourceValue]=\"wall.height * 100\"\r\n        [minValue]=\"minWallHeight\"\r\n        [maxValue]=\"maxWallHeight\"\r\n        title=\"{{'HEIGHT' | localize}}\"\r\n        (dimensionChanged)=\"setHeight.emit($event / 100)\"\r\n        >\r\n      </rp-dimension-input>\r\n      <rp-dimension-input\r\n        [sourceValue]=\"wall.thickness * 100\"\r\n        [maxValue]=\"maxWallThickness\"\r\n        title=\"{{'THICKNESS' | localize}}\"\r\n        (dimensionChanged)=\"setThickness.emit($event / 100)\"\r\n        >\r\n      </rp-dimension-input>\r\n    </div>\r\n    @if (viewModeService.viewMode === viewModes.RoomPlan3D || viewModes.FloorPlan2D) {\r\n      <div>\r\n        <mat-divider></mat-divider>\r\n        <h3 class=\"mat-subheading-2\">{{'APPEARANCE' | localize}}</h3>\r\n        <rp-appearance-section\r\n          type=\"wall\"\r\n          [texturePlane]=\"texturePlane\"\r\n          [color]=\"color\"\r\n          [textureWidth]=\"wall.length * 100\"\r\n          [textureHeight]=\"wall.height * 100\"\r\n          [photoOptions]=\"editorOptions.Both\"\r\n          (setTexture)=\"setTexture.emit($event)\"\r\n          (setColor)=\"setColor.emit($event)\"\r\n          >\r\n        </rp-appearance-section>\r\n      </div>\r\n    }\r\n  </section>\r\n}\r\n", styles: [":host{overflow:hidden}:host section{overflow-y:auto;height:100%}h1{margin-bottom:.25em}mat-icon.size-16{width:16px;height:16px;line-height:16px}button.remove{position:absolute;top:15px;right:70px}.wall-direction-toggle{margin:5px 7px 20px 0}mat-form-field input{text-align:right}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { kind: "component", type: AppearanceSectionComponent, selector: "rp-appearance-section", inputs: ["type", "hideTextureTab", "hideColorTab", "hidePhotoTab", "showGlassOption", "texturePlane", "plainTexture", "color", "textureWidth", "textureHeight", "photoOptions", "glassMaterial"], outputs: ["setTexture", "setColor", "setMaterial"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SelectedWallComponent, isStandalone: false, selector: "rp-selected-wall", inputs: { wall: "wall", texturePlane: "texturePlane", color: "color", minWallHeight: "minWallHeight", maxWallHeight: "maxWallHeight", maxWallThickness: "maxWallThickness", maxWallLength: "maxWallLength", minWallLength: "minWallLength" }, outputs: { remove: "remove", setLength: "setLength", setHeight: "setHeight", setThickness: "setThickness", selectCorner: "selectCorner", setTexture: "setTexture", setColor: "setColor" }, ngImport: i0, template: "@if (wall) {\r\n  <section>\r\n    @if (viewModeService.viewMode === viewModes.FloorPlan2D) {\r\n      <button\r\n        mat-raised-button\r\n        class=\"remove\"\r\n        (click)=\"remove.emit(wall)\">\r\n        <mat-icon class=\"homedecorator-material-icons\">delete</mat-icon>\r\n        {{'REMOVE' | localize}}\r\n      </button>\r\n    }\r\n    <h3 class=\"mat-subheading-2\"> {{ 'MEASUREMENTS' | localize}}</h3>\r\n    <div>\r\n      @if (!detailedWallMeasurementsMode) {\r\n        <rp-dimension-input\r\n          [sourceValue]=\"wall.innerLength * 100\"\r\n          [maxValue]=\"maxWallLength\"\r\n          [minValue]=\"minWallLength\"\r\n          title=\"{{'LENGTH' | localize}}\"\r\n          (focus)=\"markCorner()\"\r\n          (blur)=\"deselectCorner()\"\r\n          (dimensionChanged)=\"lengthChanged($event)\"\r\n          >\r\n        </rp-dimension-input>\r\n      }\r\n      <div class=\"wall-direction-toggle\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n        <span class=\"mat-body-2\">{{'REVERSE_WALL_DIRECTION' | localize}}</span>\r\n        <mat-slide-toggle\r\n          min=\"0\"\r\n          max=\"1\"\r\n          [checked]=\"wallDirectionReversed\"\r\n          (focusout)=\"deselectCorner()\"\r\n          (change)=\"reverseWallDirection($event.checked)\"\r\n          >\r\n        </mat-slide-toggle>\r\n      </div>\r\n      <rp-dimension-input\r\n        [sourceValue]=\"wall.height * 100\"\r\n        [minValue]=\"minWallHeight\"\r\n        [maxValue]=\"maxWallHeight\"\r\n        title=\"{{'HEIGHT' | localize}}\"\r\n        (dimensionChanged)=\"setHeight.emit($event / 100)\"\r\n        >\r\n      </rp-dimension-input>\r\n      <rp-dimension-input\r\n        [sourceValue]=\"wall.thickness * 100\"\r\n        [maxValue]=\"maxWallThickness\"\r\n        title=\"{{'THICKNESS' | localize}}\"\r\n        (dimensionChanged)=\"setThickness.emit($event / 100)\"\r\n        >\r\n      </rp-dimension-input>\r\n    </div>\r\n    @if (viewModeService.viewMode === viewModes.RoomPlan3D || viewModes.FloorPlan2D) {\r\n      <div>\r\n        <mat-divider></mat-divider>\r\n        <h3 class=\"mat-subheading-2\">{{'APPEARANCE' | localize}}</h3>\r\n        <rp-appearance-section\r\n          type=\"wall\"\r\n          [texturePlane]=\"texturePlane\"\r\n          [color]=\"color\"\r\n          [textureWidth]=\"wall.length * 100\"\r\n          [textureHeight]=\"wall.height * 100\"\r\n          [photoOptions]=\"editorOptions.Both\"\r\n          (setTexture)=\"setTexture.emit($event)\"\r\n          (setColor)=\"setColor.emit($event)\"\r\n          >\r\n        </rp-appearance-section>\r\n      </div>\r\n    }\r\n  </section>\r\n}\r\n", styles: [":host{overflow:hidden}:host section{overflow-y:auto;height:100%}h1{margin-bottom:.25em}mat-icon.size-16{width:16px;height:16px;line-height:16px}button.remove{position:absolute;top:15px;right:70px}.wall-direction-toggle{margin:5px 7px 20px 0}mat-form-field input{text-align:right}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { kind: "component", type: AppearanceSectionComponent, selector: "rp-appearance-section", inputs: ["type", "hideTextureTab", "hideColorTab", "hidePhotoTab", "showGlassOption", "texturePlane", "plainTexture", "color", "textureWidth", "textureHeight", "photoOptions", "glassMaterial"], outputs: ["setTexture", "setColor", "setMaterial"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectedWallComponent, decorators: [{
             type: Component,
@@ -41661,46 +41751,46 @@ class SettingsOptionsComponent {
         this.onclose.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsOptionsComponent, deps: [{ token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SettingsOptionsComponent, isStandalone: false, selector: "settings-options", outputs: { onclose: "onclose" }, host: { listeners: { "document:mousemove": "moveDialog($event)", "document:mouseup": "cancelMoveDialog($event)" } }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialog"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `
-    <div class="edit-popup" #dialog @showHideDialog [style.top.px]="top" [style.left.px]="left">
-      <div class="title-bar">
-        <div class="title-bar-move" (mousedown)="handleTitleMouseDown($event)">
-          <div class="title-description" [textContent]="'OPTIONS' | localize"></div>
-        </div>
-        <button mat-icon-button class="hide-dialog" (click)="hidePopup()">
-          <mat-icon class="homedecorator-material-icons" aria-hidden="true">close</mat-icon>
-        </button>
-      </div>
-      <div class="popup-content">
-        <span class="section-title" [textContent]="'GENERAL' | localize"></span>
-        <div class="section-content">
-          <span class="option-label key" [textContent]="'VR_ENABLED' | localize"></span>
-          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.vrEnabled"
-                            (change)="settingsService.settings.options.vrEnabled = $event.checked"
-          ></mat-slide-toggle>
-          <span class="option-label key" [textContent]="'AR_ENABLED' | localize"></span>
-          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.arEnabled"
-                            (change)="settingsService.settings.options.arEnabled = $event.checked"
-          ></mat-slide-toggle>
-          <span class="option-label key" [textContent]="'SHOW_DOWNLOAD_BUTTON' | localize"></span>
-          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.showDownloadButton"
-            (change)="settingsService.settings.options.showDownloadButton = $event.checked"
-          ></mat-slide-toggle>
-        </div>
-        <span class="section-title" [textContent]="'CONFIGURATOR' | localize"></span>
-        <div class="section-content">
-          <span class="option-label key" [textContent]="'INLINE_ANSWERS' | localize"></span>
-          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.inlineAnswers"
-                            (change)="settingsService.settings.options.inlineAnswers = $event.checked"
-          ></mat-slide-toggle>
-          <span class="option-label key" [textContent]="'INSTANT_EDIT_MENU' | localize"></span>
-          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.instantEditMenu"
-                            (change)="settingsService.settings.options.instantEditMenu = $event.checked"
-          ></mat-slide-toggle>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host .edit-popup{position:fixed;min-height:200px;min-width:400px;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 0 5px 1px #00000080}:host .title-bar{display:flex;justify-content:space-between;background:#3760a1;color:#fff;padding-left:10px}:host .title-bar .title-bar-move{display:flex;flex-basis:100%;align-items:center}:host .title-bar .title-bar-move .title-description{-webkit-user-select:none;user-select:none}:host .title-bar mat-icon{color:#fff}:host .popup-content{padding:20px}:host .section-title{font-size:12px;font-weight:700}:host .section-content{margin-top:10px;font-size:12px;display:grid;grid-template-columns:80% 20%}\n"], dependencies: [{ kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SettingsOptionsComponent, isStandalone: false, selector: "settings-options", outputs: { onclose: "onclose" }, host: { listeners: { "document:mousemove": "moveDialog($event)", "document:mouseup": "cancelMoveDialog($event)" } }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialog"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `
+    <div class="edit-popup" #dialog @showHideDialog [style.top.px]="top" [style.left.px]="left">
+      <div class="title-bar">
+        <div class="title-bar-move" (mousedown)="handleTitleMouseDown($event)">
+          <div class="title-description" [textContent]="'OPTIONS' | localize"></div>
+        </div>
+        <button mat-icon-button class="hide-dialog" (click)="hidePopup()">
+          <mat-icon class="homedecorator-material-icons" aria-hidden="true">close</mat-icon>
+        </button>
+      </div>
+      <div class="popup-content">
+        <span class="section-title" [textContent]="'GENERAL' | localize"></span>
+        <div class="section-content">
+          <span class="option-label key" [textContent]="'VR_ENABLED' | localize"></span>
+          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.vrEnabled"
+                            (change)="settingsService.settings.options.vrEnabled = $event.checked"
+          ></mat-slide-toggle>
+          <span class="option-label key" [textContent]="'AR_ENABLED' | localize"></span>
+          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.arEnabled"
+                            (change)="settingsService.settings.options.arEnabled = $event.checked"
+          ></mat-slide-toggle>
+          <span class="option-label key" [textContent]="'SHOW_DOWNLOAD_BUTTON' | localize"></span>
+          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.showDownloadButton"
+            (change)="settingsService.settings.options.showDownloadButton = $event.checked"
+          ></mat-slide-toggle>
+        </div>
+        <span class="section-title" [textContent]="'CONFIGURATOR' | localize"></span>
+        <div class="section-content">
+          <span class="option-label key" [textContent]="'INLINE_ANSWERS' | localize"></span>
+          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.inlineAnswers"
+                            (change)="settingsService.settings.options.inlineAnswers = $event.checked"
+          ></mat-slide-toggle>
+          <span class="option-label key" [textContent]="'INSTANT_EDIT_MENU' | localize"></span>
+          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.instantEditMenu"
+                            (change)="settingsService.settings.options.instantEditMenu = $event.checked"
+          ></mat-slide-toggle>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host .edit-popup{position:fixed;min-height:200px;min-width:400px;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 0 5px 1px #00000080}:host .title-bar{display:flex;justify-content:space-between;background:#3760a1;color:#fff;padding-left:10px}:host .title-bar .title-bar-move{display:flex;flex-basis:100%;align-items:center}:host .title-bar .title-bar-move .title-description{-webkit-user-select:none;user-select:none}:host .title-bar mat-icon{color:#fff}:host .popup-content{padding:20px}:host .section-title{font-size:12px;font-weight:700}:host .section-content{margin-top:10px;font-size:12px;display:grid;grid-template-columns:80% 20%}\n"], dependencies: [{ kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('showHideDialog', [
                 state('void', style({ opacity: 0 })),
                 state('*', style({ opacity: 1 })),
@@ -41710,45 +41800,45 @@ class SettingsOptionsComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'settings-options', template: `
-    <div class="edit-popup" #dialog @showHideDialog [style.top.px]="top" [style.left.px]="left">
-      <div class="title-bar">
-        <div class="title-bar-move" (mousedown)="handleTitleMouseDown($event)">
-          <div class="title-description" [textContent]="'OPTIONS' | localize"></div>
-        </div>
-        <button mat-icon-button class="hide-dialog" (click)="hidePopup()">
-          <mat-icon class="homedecorator-material-icons" aria-hidden="true">close</mat-icon>
-        </button>
-      </div>
-      <div class="popup-content">
-        <span class="section-title" [textContent]="'GENERAL' | localize"></span>
-        <div class="section-content">
-          <span class="option-label key" [textContent]="'VR_ENABLED' | localize"></span>
-          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.vrEnabled"
-                            (change)="settingsService.settings.options.vrEnabled = $event.checked"
-          ></mat-slide-toggle>
-          <span class="option-label key" [textContent]="'AR_ENABLED' | localize"></span>
-          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.arEnabled"
-                            (change)="settingsService.settings.options.arEnabled = $event.checked"
-          ></mat-slide-toggle>
-          <span class="option-label key" [textContent]="'SHOW_DOWNLOAD_BUTTON' | localize"></span>
-          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.showDownloadButton"
-            (change)="settingsService.settings.options.showDownloadButton = $event.checked"
-          ></mat-slide-toggle>
-        </div>
-        <span class="section-title" [textContent]="'CONFIGURATOR' | localize"></span>
-        <div class="section-content">
-          <span class="option-label key" [textContent]="'INLINE_ANSWERS' | localize"></span>
-          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.inlineAnswers"
-                            (change)="settingsService.settings.options.inlineAnswers = $event.checked"
-          ></mat-slide-toggle>
-          <span class="option-label key" [textContent]="'INSTANT_EDIT_MENU' | localize"></span>
-          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.instantEditMenu"
-                            (change)="settingsService.settings.options.instantEditMenu = $event.checked"
-          ></mat-slide-toggle>
-        </div>
-      </div>
-    </div>
+            args: [{ selector: 'settings-options', template: `
+    <div class="edit-popup" #dialog @showHideDialog [style.top.px]="top" [style.left.px]="left">
+      <div class="title-bar">
+        <div class="title-bar-move" (mousedown)="handleTitleMouseDown($event)">
+          <div class="title-description" [textContent]="'OPTIONS' | localize"></div>
+        </div>
+        <button mat-icon-button class="hide-dialog" (click)="hidePopup()">
+          <mat-icon class="homedecorator-material-icons" aria-hidden="true">close</mat-icon>
+        </button>
+      </div>
+      <div class="popup-content">
+        <span class="section-title" [textContent]="'GENERAL' | localize"></span>
+        <div class="section-content">
+          <span class="option-label key" [textContent]="'VR_ENABLED' | localize"></span>
+          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.vrEnabled"
+                            (change)="settingsService.settings.options.vrEnabled = $event.checked"
+          ></mat-slide-toggle>
+          <span class="option-label key" [textContent]="'AR_ENABLED' | localize"></span>
+          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.arEnabled"
+                            (change)="settingsService.settings.options.arEnabled = $event.checked"
+          ></mat-slide-toggle>
+          <span class="option-label key" [textContent]="'SHOW_DOWNLOAD_BUTTON' | localize"></span>
+          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.showDownloadButton"
+            (change)="settingsService.settings.options.showDownloadButton = $event.checked"
+          ></mat-slide-toggle>
+        </div>
+        <span class="section-title" [textContent]="'CONFIGURATOR' | localize"></span>
+        <div class="section-content">
+          <span class="option-label key" [textContent]="'INLINE_ANSWERS' | localize"></span>
+          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.inlineAnswers"
+                            (change)="settingsService.settings.options.inlineAnswers = $event.checked"
+          ></mat-slide-toggle>
+          <span class="option-label key" [textContent]="'INSTANT_EDIT_MENU' | localize"></span>
+          <mat-slide-toggle class="value" min="0" max="1" [checked]="settingsService.settings.options.instantEditMenu"
+                            (change)="settingsService.settings.options.instantEditMenu = $event.checked"
+          ></mat-slide-toggle>
+        </div>
+      </div>
+    </div>
   `, animations: [
                         trigger('showHideDialog', [
                             state('void', style({ opacity: 0 })),
@@ -41928,7 +42018,7 @@ class SettingsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsComponent, deps: [{ token: HomedecoratorSettingsService }, { token: i2$5.MatSnackBar }, { token: MessageBusService }, { token: ConfigurationService }, { token: SceneService }, { token: ItemService }, { token: HomedecoratorAppService }, { token: FontService }, { token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SettingsComponent, isStandalone: false, selector: "rp-settings", inputs: { minWallHeight: "minWallHeight", placeCameraDisabled: "placeCameraDisabled" }, outputs: { onWallsHeightUpdate: "onWallsHeightUpdate" }, viewQueries: [{ propertyName: "versionFieldRef", first: true, predicate: ["versionField"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'ENABLE_TOUCH' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"enableTouch\"\r\n            (change)=\"toggle(configurationKey.EnableTouch, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n\r\n\r\n<h3 class=\"mat-subtitle-1\">{{ 'WALLS' | localize }}</h3>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <rp-dimension-input\r\n            [sourceValue]=\"wallHeight\"\r\n            [minValue]=\"minWallHeight\"\r\n            title=\"{{'DEFAULT_HEIGHT' | localize}}\"\r\n            (dimensionChanged)=\"applyNewHeight($event)\"\r\n    >\r\n    </rp-dimension-input>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'DEFAULT_THICKNESS' | localize }}:</b>\r\n    <span class=\"mat-body-2\">{{ wallThickness }}</span>\r\n</div>\r\n@if (showDetailedWallMeasurements) {\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n        <b class=\"mat-body-2\">{{ 'SHOW_DETAILED_WALL_MEASUREMENTS' | localize }}</b>\r\n        <mat-slide-toggle\r\n                min=\"0\"\r\n                max=\"1\"\r\n                [checked]=\"showDetailedWallMeasurements\"\r\n                (change)=\"toggle(configurationKey.ShowDetailedWallMeasurements, $event.checked)\"\r\n        >\r\n        </mat-slide-toggle>\r\n    </div>\r\n}\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'SHOW_DISTANCES_OF_WALL_ITEMS_IN_2D' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"showWallItemMeasurements\"\r\n            (change)=\"toggle(configurationKey.ShowWallItemMeasurements, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'ENABLE_SNAPPING_OF_WALLS_TO_BASIC_ANGLES' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"wallSnapping\"\r\n            (change)=\"toggle(configurationKey.WallSnapping, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'ENABLE_SNAPPING_TO_WALL_JOINTS' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"cornerSnapping\"\r\n            (change)=\"toggle(configurationKey.CornerSnapping, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n\r\n<h3 class=\"mat-subtitle-1\">{{ 'OBJECTS' | localize }}</h3>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'SHOW_DISTANCES' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"showObjectDistances\"\r\n            (change)=\"toggle(configurationKey.ShowObjectDistances, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'SHOW_MEASUREMENTS' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"showObjectMeasurements\"\r\n            (change)=\"toggle(configurationKey.ShowObjectMeasurements, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'ENABLE_ROTATION_SNAPPING' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"rotationSnappingEnabled\"\r\n            (change)=\"toggle(configurationKey.RotationSnappingEnabled, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'DISPLAY_CUSTOM_SHAPE_NAMES' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"displayCustomShapeNames\"\r\n            (change)=\"toggle(configurationKey.DisplayCustomShapeNames, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n\r\n<h3 class=\"mat-subtitle-1\">{{ 'UNIT_INFO' | localize }}</h3>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'SELECT_DIMENSION' | localize }}:</b>\r\n    <mat-select [value]=\"currentDimensioning\">\r\n        @for (dimensioning of dimensioningOptions; track dimensioning) {\r\n            <mat-option\r\n                    [value]=\"dimensioning\"\r\n                    [textContent]=\"dimensioning\"\r\n                    (click)=\"handleDimensioningChoice(dimensioning)\">\r\n            </mat-option>\r\n        }\r\n    </mat-select>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'SELECT_DECIMALS' | localize }}:</b>\r\n    <mat-select [value]=\"currentRoundingDecimals\">\r\n        <mat-option [value]=\"0\" (click)=\"handleDecimalsChoice(0)\" [textContent]=\"'0'\"></mat-option>\r\n        <mat-option [value]=\"1\" (click)=\"handleDecimalsChoice(1)\" [textContent]=\"'1'\"></mat-option>\r\n        <mat-option [value]=\"2\" (click)=\"handleDecimalsChoice(2)\" [textContent]=\"'2'\"></mat-option>\r\n    </mat-select>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'ANGLES' | localize }}:</b>\r\n    <span class=\"mat-body-2\">{{ angleUnit }}</span>\r\n</div>\r\n\r\n<h3 class=\"mat-subtitle-1\">{{ 'CAMERA' | localize }}</h3>\r\n<b class=\"mat-subtitle-2\">{{ 'SET_START_POSITION_FOR_WALK_THROUGH_MODE' | localize }}</b>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <button\r\n            mat-button\r\n            [disabled]=\"placeCameraDisabled\"\r\n            class=\"place-camera\"\r\n            (click)=\"placeCamera()\"\r\n            fxLayout=\"row\"\r\n            fxLayoutalign=\"center center\"\r\n    >\r\n        <mat-icon class=\"homedecorator-material-icons\">photo_camera</mat-icon>\r\n        {{ 'PLACE_CAMERA' | localize }}\r\n    </button>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'SHOW_CAMERA_CONFIGURATION' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"showCameraControls\"\r\n            (change)=\"toggle(configurationKey.ShowWalkThroughCameraControls, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n\r\n@if (settingsService.settings.options.development) {\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n        <b class=\"mat-body-2\">Camera FOV</b>\r\n        <mat-slider class=\"slider-group-slider\" showTickMarks discrete\r\n                    [min]=\"1\"\r\n                    [max]=\"125\"\r\n                    [step]=\"1\">\r\n            <input matSliderThumb [value]=\"cameraFOV\" (valueChange)=\"setCameraFOV($event)\">\r\n        </mat-slider>\r\n        <span class=\"mat-body-2\">{{ cameraFOV }}</span>\r\n    </div>\r\n}\r\n<div class=\"panel-item\" fxLayout=\"column\">\r\n    <h3 class=\"mat-subtitle-1\">{{ 'CLEAR_ROOM' | localize }}</h3>\r\n    <b class=\"mat-subtitle-2\">{{ 'CLEAR_ALL_FURNITURE_FROM_ROOM' | localize }}</b>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n        <button\r\n                mat-button\r\n                class=\"remove-all\"\r\n                (click)=\"removeAll()\"\r\n                fxLayout=\"row\"\r\n                fxLayoutalign=\"center center\"\r\n        >\r\n            <mat-icon class=\"homedecorator-material-icons\">delete_sweep</mat-icon>\r\n            {{ 'CLEAR_FURNITURE' | localize }}\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n@if (settingsService.settings.options.development) {\r\n    <div class=\"panel-item\" fxLayout=\"column\">\r\n        <h3 class=\"mat-subheading-2\">{{ 'LIGHTS' | localize }}</h3>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <b class=\"mat-body-2\">{{ 'SHOW_LIGHTING_CONFIGURATION' | localize }}</b>\r\n            <mat-slide-toggle\r\n                    min=\"0\"\r\n                    max=\"1\"\r\n                    [checked]=\"showLightControls\"\r\n                    (change)=\"toggle(configurationKey.ShowLightingControls, $event.checked)\"\r\n            >\r\n            </mat-slide-toggle>\r\n        </div>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <button\r\n                    mat-button\r\n                    (click)=\"toggle(configurationKey.ShowLightplansDialog, true)\"\r\n                    fxLayout=\"row\"\r\n                    fxLayoutalign=\"center center\"\r\n            >\r\n                <mat-icon class=\"homedecorator-material-icons\">wb_incandescent</mat-icon>\r\n                {{ 'MANAGE_LIGHTPLANS' | localize }}\r\n            </button>\r\n        </div>\r\n        <div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <b class=\"mat-body-2\">{{ 'SHOW_INTERIOR_LIGHTS' | localize }}</b>\r\n            <mat-slide-toggle\r\n                    min=\"0\"\r\n                    max=\"1\"\r\n                    [checked]=\"showInteriorLights\"\r\n                    (change)=\"toggle(configurationKey.ShowInteriorLights, $event.checked)\"\r\n            >\r\n            </mat-slide-toggle>\r\n        </div>\r\n        <div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <b class=\"mat-body-2\">{{ 'INTERIOR_LIGHT_INTENSITY' | localize }}</b>\r\n            <mat-slider class=\"slider-group-slider\" showTickMarks discrete\r\n                        [min]=\"1\"\r\n                        [max]=\"1600\"\r\n                        [step]=\"1\">\r\n                <input matSliderThumb [value]=\"interiorLightIntensity\" (valueChange)=\"setInteriorLightIntensity($event)\">\r\n            </mat-slider>\r\n            <span class=\"mat-body-2\">{{ interiorLightIntensity }}</span>\r\n        </div>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <b class=\"mat-body-2\">{{ 'SHOW_POST_PROCESSING_SETTINGS' | localize }}</b>\r\n            <mat-slide-toggle\r\n                    min=\"0\"\r\n                    max=\"1\"\r\n                    [checked]=\"showPostProcessingSettings\"\r\n                    (change)=\"toggle(configurationKey.ShowPostProcessingSettings, $event.checked)\"\r\n            >\r\n            </mat-slide-toggle>\r\n        </div>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <b class=\"mat-body-2\">{{ 'SHOW_WALLS' | localize }}</b>\r\n            <mat-slide-toggle\r\n                    min=\"0\"\r\n                    max=\"1\"\r\n                    [checked]=\"showWalls\"\r\n                    (change)=\"toggle(configurationKey.ShowWalls, $event.checked)\"\r\n            >\r\n            </mat-slide-toggle>\r\n        </div>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <b class=\"mat-body-2\">{{ 'SHOW_CEILING' | localize }}</b>\r\n            <mat-slide-toggle\r\n                    min=\"0\"\r\n                    max=\"1\"\r\n                    [checked]=\"showCeiling\"\r\n                    (change)=\"toggle(configurationKey.ShowCeiling, $event.checked)\"\r\n            >\r\n            </mat-slide-toggle>\r\n        </div>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <button (click)=\"hideMaterials()\">{{ 'HIDE_MATERIALS' | localize }}</button>\r\n        </div>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <button (click)=\"showConnectors()\">{{ 'SHOW_CONNECTORS' | localize }}</button>\r\n        </div>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <button\r\n                    mat-button\r\n                    (click)=\"showSettingsOptions = true\"\r\n                    fxLayout=\"row\"\r\n                    fxLayoutalign=\"center center\"\r\n            >\r\n                <mat-icon class=\"homedecorator-material-icons\">settings</mat-icon>\r\n                {{ 'SHOW_SETTINGS_OPTIONS' | localize }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n    <div class=\"panel-item\" fxLayout=\"column\">\r\n        <b class=\"mat-body-2\">{{ 'APP_VERSION' | localize }}:</b>\r\n        <mat-form-field>\r\n            <input\r\n                    matInput\r\n                    #versionField\r\n                    type=\"text\"\r\n                    readonly=\"true\"\r\n                    [value]=\"version\"\r\n                    (click)=\"selectVersionFieldContent()\"\r\n            />\r\n            <mat-icon matSuffix (click)=\"copyToClipboard()\">file_copy</mat-icon>\r\n        </mat-form-field>\r\n    </div>\r\n    <h3 class=\"mat-subheading-2\">{{ 'CONNECTION' | localize }}</h3>\r\n    <div class=\"panel-item\" fxLayout=\"column\">\r\n        <b class=\"mat-body-2\">{{ 'iONE backend url' | localize }}:</b>\r\n        <mat-form-field>\r\n            <input\r\n                    matInput\r\n                    #ioneBackendUrl\r\n                    type=\"text\"\r\n                    [value]=\"settingsService.settings?.url\"\r\n                    (keydown)=\"handleBackendUrlChange($event)\"\r\n            />\r\n        </mat-form-field>\r\n    </div>\r\n}\r\n<div class=\"powered-by-wrapper\">\r\n    <span>MyRoomPlans is powered by</span>\r\n    <span class=\"powered-logo-wrapper\">\r\n        <a href=\"https://www.colijn-it.nl\" target=\"_blank\" alt=\"Colijn IT\" class=\"colijn-it-logo\"><img\r\n                src=\"assets/images/colijn-logo.webp\"/></a>\r\n        <a href=\"https://ione360.com\" target=\"_blank\" alt=\"iONE360\" class=\"ione-360-logo\"><img\r\n                src=\"assets/images/ione360-logo.webp\"/></a>\r\n      </span>\r\n    <span>Copyright Colijn IT 2021</span>\r\n</div>\r\n@if (showSettingsOptions) {\r\n    <settings-options (onclose)=\"showSettingsOptions = false\"></settings-options>\r\n}\r\n", styles: [":host{overflow-y:auto;overflow-x:hidden}:host .powered-by-wrapper{margin-top:20px;font-size:12px}:host .powered-by-wrapper .powered-logo-wrapper{display:flex;align-items:center;justify-content:space-between}:host .powered-by-wrapper .colijn-it-logo{margin:0 5px}:host .powered-by-wrapper .colijn-it-logo img{width:100px}:host .powered-by-wrapper .ione-360-logo{margin:5px}:host .powered-by-wrapper .ione-360-logo img{width:134px}.panel-item{min-height:40px}.panel-item+h3{margin-top:16px;font-weight:600}mat-form-field{width:100%}mat-select{width:70px}::ng-deep .mat-drawer-content{overflow-y:auto;overflow-x:hidden}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3$3.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: SettingsOptionsComponent, selector: "settings-options", outputs: ["onclose"] }, { kind: "component", type: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SettingsComponent, isStandalone: false, selector: "rp-settings", inputs: { minWallHeight: "minWallHeight", placeCameraDisabled: "placeCameraDisabled" }, outputs: { onWallsHeightUpdate: "onWallsHeightUpdate" }, viewQueries: [{ propertyName: "versionFieldRef", first: true, predicate: ["versionField"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'ENABLE_TOUCH' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"enableTouch\"\r\n            (change)=\"toggle(configurationKey.EnableTouch, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n\r\n\r\n<h3 class=\"mat-subtitle-1\">{{ 'WALLS' | localize }}</h3>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <rp-dimension-input\r\n            [sourceValue]=\"wallHeight\"\r\n            [minValue]=\"minWallHeight\"\r\n            title=\"{{'DEFAULT_HEIGHT' | localize}}\"\r\n            (dimensionChanged)=\"applyNewHeight($event)\"\r\n    >\r\n    </rp-dimension-input>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'DEFAULT_THICKNESS' | localize }}:</b>\r\n    <span class=\"mat-body-2\">{{ wallThickness }}</span>\r\n</div>\r\n@if (showDetailedWallMeasurements) {\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n        <b class=\"mat-body-2\">{{ 'SHOW_DETAILED_WALL_MEASUREMENTS' | localize }}</b>\r\n        <mat-slide-toggle\r\n                min=\"0\"\r\n                max=\"1\"\r\n                [checked]=\"showDetailedWallMeasurements\"\r\n                (change)=\"toggle(configurationKey.ShowDetailedWallMeasurements, $event.checked)\"\r\n        >\r\n        </mat-slide-toggle>\r\n    </div>\r\n}\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'SHOW_DISTANCES_OF_WALL_ITEMS_IN_2D' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"showWallItemMeasurements\"\r\n            (change)=\"toggle(configurationKey.ShowWallItemMeasurements, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'ENABLE_SNAPPING_OF_WALLS_TO_BASIC_ANGLES' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"wallSnapping\"\r\n            (change)=\"toggle(configurationKey.WallSnapping, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'ENABLE_SNAPPING_TO_WALL_JOINTS' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"cornerSnapping\"\r\n            (change)=\"toggle(configurationKey.CornerSnapping, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n\r\n<h3 class=\"mat-subtitle-1\">{{ 'OBJECTS' | localize }}</h3>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'SHOW_DISTANCES' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"showObjectDistances\"\r\n            (change)=\"toggle(configurationKey.ShowObjectDistances, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'SHOW_MEASUREMENTS' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"showObjectMeasurements\"\r\n            (change)=\"toggle(configurationKey.ShowObjectMeasurements, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'ENABLE_ROTATION_SNAPPING' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"rotationSnappingEnabled\"\r\n            (change)=\"toggle(configurationKey.RotationSnappingEnabled, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'DISPLAY_CUSTOM_SHAPE_NAMES' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"displayCustomShapeNames\"\r\n            (change)=\"toggle(configurationKey.DisplayCustomShapeNames, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n\r\n<h3 class=\"mat-subtitle-1\">{{ 'UNIT_INFO' | localize }}</h3>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'SELECT_DIMENSION' | localize }}:</b>\r\n    <mat-select [value]=\"currentDimensioning\">\r\n        @for (dimensioning of dimensioningOptions; track dimensioning) {\r\n            <mat-option\r\n                    [value]=\"dimensioning\"\r\n                    [textContent]=\"dimensioning\"\r\n                    (click)=\"handleDimensioningChoice(dimensioning)\">\r\n            </mat-option>\r\n        }\r\n    </mat-select>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'SELECT_DECIMALS' | localize }}:</b>\r\n    <mat-select [value]=\"currentRoundingDecimals\">\r\n        <mat-option [value]=\"0\" (click)=\"handleDecimalsChoice(0)\" [textContent]=\"'0'\"></mat-option>\r\n        <mat-option [value]=\"1\" (click)=\"handleDecimalsChoice(1)\" [textContent]=\"'1'\"></mat-option>\r\n        <mat-option [value]=\"2\" (click)=\"handleDecimalsChoice(2)\" [textContent]=\"'2'\"></mat-option>\r\n    </mat-select>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'ANGLES' | localize }}:</b>\r\n    <span class=\"mat-body-2\">{{ angleUnit }}</span>\r\n</div>\r\n\r\n<h3 class=\"mat-subtitle-1\">{{ 'CAMERA' | localize }}</h3>\r\n<b class=\"mat-subtitle-2\">{{ 'SET_START_POSITION_FOR_WALK_THROUGH_MODE' | localize }}</b>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <button\r\n            mat-button\r\n            [disabled]=\"placeCameraDisabled\"\r\n            class=\"place-camera\"\r\n            (click)=\"placeCamera()\"\r\n            fxLayout=\"row\"\r\n            fxLayoutalign=\"center center\"\r\n    >\r\n        <mat-icon class=\"homedecorator-material-icons\">photo_camera</mat-icon>\r\n        {{ 'PLACE_CAMERA' | localize }}\r\n    </button>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <b class=\"mat-subtitle-2\">{{ 'SHOW_CAMERA_CONFIGURATION' | localize }}</b>\r\n    <mat-slide-toggle\r\n            min=\"0\"\r\n            max=\"1\"\r\n            [checked]=\"showCameraControls\"\r\n            (change)=\"toggle(configurationKey.ShowWalkThroughCameraControls, $event.checked)\"\r\n    >\r\n    </mat-slide-toggle>\r\n</div>\r\n\r\n@if (settingsService.settings.options.development) {\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n        <b class=\"mat-body-2\">Camera FOV</b>\r\n        <mat-slider class=\"slider-group-slider\" showTickMarks discrete\r\n                    [min]=\"1\"\r\n                    [max]=\"125\"\r\n                    [step]=\"1\">\r\n            <input matSliderThumb [value]=\"cameraFOV\" (valueChange)=\"setCameraFOV($event)\">\r\n        </mat-slider>\r\n        <span class=\"mat-body-2\">{{ cameraFOV }}</span>\r\n    </div>\r\n}\r\n<div class=\"panel-item\" fxLayout=\"column\">\r\n    <h3 class=\"mat-subtitle-1\">{{ 'CLEAR_ROOM' | localize }}</h3>\r\n    <b class=\"mat-subtitle-2\">{{ 'CLEAR_ALL_FURNITURE_FROM_ROOM' | localize }}</b>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n        <button\r\n                mat-button\r\n                class=\"remove-all\"\r\n                (click)=\"removeAll()\"\r\n                fxLayout=\"row\"\r\n                fxLayoutalign=\"center center\"\r\n        >\r\n            <mat-icon class=\"homedecorator-material-icons\">delete_sweep</mat-icon>\r\n            {{ 'CLEAR_FURNITURE' | localize }}\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n@if (settingsService.settings.options.development) {\r\n    <div class=\"panel-item\" fxLayout=\"column\">\r\n        <h3 class=\"mat-subheading-2\">{{ 'LIGHTS' | localize }}</h3>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <b class=\"mat-body-2\">{{ 'SHOW_LIGHTING_CONFIGURATION' | localize }}</b>\r\n            <mat-slide-toggle\r\n                    min=\"0\"\r\n                    max=\"1\"\r\n                    [checked]=\"showLightControls\"\r\n                    (change)=\"toggle(configurationKey.ShowLightingControls, $event.checked)\"\r\n            >\r\n            </mat-slide-toggle>\r\n        </div>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <button\r\n                    mat-button\r\n                    (click)=\"toggle(configurationKey.ShowLightplansDialog, true)\"\r\n                    fxLayout=\"row\"\r\n                    fxLayoutalign=\"center center\"\r\n            >\r\n                <mat-icon class=\"homedecorator-material-icons\">wb_incandescent</mat-icon>\r\n                {{ 'MANAGE_LIGHTPLANS' | localize }}\r\n            </button>\r\n        </div>\r\n        <div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <b class=\"mat-body-2\">{{ 'SHOW_INTERIOR_LIGHTS' | localize }}</b>\r\n            <mat-slide-toggle\r\n                    min=\"0\"\r\n                    max=\"1\"\r\n                    [checked]=\"showInteriorLights\"\r\n                    (change)=\"toggle(configurationKey.ShowInteriorLights, $event.checked)\"\r\n            >\r\n            </mat-slide-toggle>\r\n        </div>\r\n        <div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <b class=\"mat-body-2\">{{ 'INTERIOR_LIGHT_INTENSITY' | localize }}</b>\r\n            <mat-slider class=\"slider-group-slider\" showTickMarks discrete\r\n                        [min]=\"1\"\r\n                        [max]=\"1600\"\r\n                        [step]=\"1\">\r\n                <input matSliderThumb [value]=\"interiorLightIntensity\" (valueChange)=\"setInteriorLightIntensity($event)\">\r\n            </mat-slider>\r\n            <span class=\"mat-body-2\">{{ interiorLightIntensity }}</span>\r\n        </div>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <b class=\"mat-body-2\">{{ 'SHOW_POST_PROCESSING_SETTINGS' | localize }}</b>\r\n            <mat-slide-toggle\r\n                    min=\"0\"\r\n                    max=\"1\"\r\n                    [checked]=\"showPostProcessingSettings\"\r\n                    (change)=\"toggle(configurationKey.ShowPostProcessingSettings, $event.checked)\"\r\n            >\r\n            </mat-slide-toggle>\r\n        </div>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <b class=\"mat-body-2\">{{ 'SHOW_WALLS' | localize }}</b>\r\n            <mat-slide-toggle\r\n                    min=\"0\"\r\n                    max=\"1\"\r\n                    [checked]=\"showWalls\"\r\n                    (change)=\"toggle(configurationKey.ShowWalls, $event.checked)\"\r\n            >\r\n            </mat-slide-toggle>\r\n        </div>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <b class=\"mat-body-2\">{{ 'SHOW_CEILING' | localize }}</b>\r\n            <mat-slide-toggle\r\n                    min=\"0\"\r\n                    max=\"1\"\r\n                    [checked]=\"showCeiling\"\r\n                    (change)=\"toggle(configurationKey.ShowCeiling, $event.checked)\"\r\n            >\r\n            </mat-slide-toggle>\r\n        </div>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <button (click)=\"hideMaterials()\">{{ 'HIDE_MATERIALS' | localize }}</button>\r\n        </div>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <button (click)=\"showConnectors()\">{{ 'SHOW_CONNECTORS' | localize }}</button>\r\n        </div>\r\n        <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n            <button\r\n                    mat-button\r\n                    (click)=\"showSettingsOptions = true\"\r\n                    fxLayout=\"row\"\r\n                    fxLayoutalign=\"center center\"\r\n            >\r\n                <mat-icon class=\"homedecorator-material-icons\">settings</mat-icon>\r\n                {{ 'SHOW_SETTINGS_OPTIONS' | localize }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n    <div class=\"panel-item\" fxLayout=\"column\">\r\n        <b class=\"mat-body-2\">{{ 'APP_VERSION' | localize }}:</b>\r\n        <mat-form-field>\r\n            <input\r\n                    matInput\r\n                    #versionField\r\n                    type=\"text\"\r\n                    readonly=\"true\"\r\n                    [value]=\"version\"\r\n                    (click)=\"selectVersionFieldContent()\"\r\n            />\r\n            <mat-icon matSuffix (click)=\"copyToClipboard()\">file_copy</mat-icon>\r\n        </mat-form-field>\r\n    </div>\r\n    <h3 class=\"mat-subheading-2\">{{ 'CONNECTION' | localize }}</h3>\r\n    <div class=\"panel-item\" fxLayout=\"column\">\r\n        <b class=\"mat-body-2\">{{ 'iONE backend url' | localize }}:</b>\r\n        <mat-form-field>\r\n            <input\r\n                    matInput\r\n                    #ioneBackendUrl\r\n                    type=\"text\"\r\n                    [value]=\"settingsService.settings?.url\"\r\n                    (keydown)=\"handleBackendUrlChange($event)\"\r\n            />\r\n        </mat-form-field>\r\n    </div>\r\n}\r\n<div class=\"powered-by-wrapper\">\r\n    <span>MyRoomPlans is powered by</span>\r\n    <span class=\"powered-logo-wrapper\">\r\n        <a href=\"https://www.colijn-it.nl\" target=\"_blank\" alt=\"Colijn IT\" class=\"colijn-it-logo\"><img\r\n                src=\"assets/images/colijn-logo.webp\"/></a>\r\n        <a href=\"https://ione360.com\" target=\"_blank\" alt=\"iONE360\" class=\"ione-360-logo\"><img\r\n                src=\"assets/images/ione360-logo.webp\"/></a>\r\n      </span>\r\n    <span>Copyright Colijn IT 2021</span>\r\n</div>\r\n@if (showSettingsOptions) {\r\n    <settings-options (onclose)=\"showSettingsOptions = false\"></settings-options>\r\n}\r\n", styles: [":host{overflow-y:auto;overflow-x:hidden}:host .powered-by-wrapper{margin-top:20px;font-size:12px}:host .powered-by-wrapper .powered-logo-wrapper{display:flex;align-items:center;justify-content:space-between}:host .powered-by-wrapper .colijn-it-logo{margin:0 5px}:host .powered-by-wrapper .colijn-it-logo img{width:100px}:host .powered-by-wrapper .ione-360-logo{margin:5px}:host .powered-by-wrapper .ione-360-logo img{width:134px}.panel-item{min-height:40px}.panel-item+h3{margin-top:16px;font-weight:600}mat-form-field{width:100%}mat-select{width:70px}::ng-deep .mat-drawer-content{overflow-y:auto;overflow-x:hidden}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: SettingsOptionsComponent, selector: "settings-options", outputs: ["onclose"] }, { kind: "component", type: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsComponent, decorators: [{
             type: Component,
@@ -42155,7 +42245,7 @@ class CustomShapeCreatorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomShapeCreatorComponent, deps: [{ token: HudService }, { token: SceneService }, { token: RoomService }, { token: ItemService }, { token: SceneEventService }, { token: MessageBusService }, { token: WallService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CustomShapeCreatorComponent, isStandalone: false, selector: "rp-custom-shape-creator", inputs: { shape: "shape" }, ngImport: i0, template: "<section>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"auto center\">\r\n    <mat-form-field fxFlex=\"grow\">\r\n      <input matInput #nameInputRef\r\n        type=\"text\"\r\n        placeholder=\"{{'SHAPES_NAME' | localize}}\"\r\n        [value]=\"name\"\r\n      >\r\n    </mat-form-field>\r\n    <button mat-icon-button\r\n      [disabled]=\"name === nameInputRef.value\"\r\n      (click)=\"setName(nameInputRef.value)\"\r\n    >\r\n      <mat-icon class=\"homedecorator-material-icons size-16\">check</mat-icon>\r\n    </button>\r\n    <button mat-icon-button\r\n      [disabled]=\"name === nameInputRef.value\"\r\n      (click)=\"nameInputRef.value = name\"\r\n    >\r\n      <mat-icon class=\"homedecorator-material-icons size-16\">cancel</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"switcher\">\r\n    <h2 class=\"mat-subtitle-2\">{{isFloorType ? ('FLOOR' | localize) : ('WALL' | localize)}}</h2>\r\n    <mat-slide-toggle\r\n      [checked]=\"isFloorType\"\r\n      (change)=\"toggleItemType()\"\r\n      [labelPosition]=\"'before'\"\r\n    >\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <h3 class=\"mat-subtitle-1\"> {{ 'MEASUREMENTS' | localize}}</h3>\r\n  <div>\r\n      <rp-dimension-input\r\n      title=\"{{'HEIGHT' | localize}}\"\r\n      [sourceValue]=\"height * scaleFactor\"\r\n      [minValue]=\"0\"\r\n      (dimensionChanged)=\"setHeight($event / scaleFactor)\"\r\n    >\r\n    </rp-dimension-input>\r\n\r\n    <rp-dimension-input\r\n      title=\"{{'WIDTH' | localize}}\"\r\n      [sourceValue]=\"width * scaleFactor\"\r\n      [minValue]=\"0\"\r\n      (dimensionChanged)=\"setWidth($event / scaleFactor)\"\r\n    >\r\n    </rp-dimension-input>\r\n\r\n    <rp-dimension-input\r\n      title=\"{{'DEPTH' | localize}}\"\r\n      [sourceValue]=\"depth * scaleFactor\"\r\n      [minValue]=\"0\"\r\n      (dimensionChanged)=\"setDepth($event / scaleFactor)\"\r\n    >\r\n    </rp-dimension-input>\r\n\r\n    <rp-dimension-input\r\n      title=\"{{'ELEVATION' | localize}}\"\r\n      [sourceValue]=\"elevation * scaleFactor\"\r\n      [minValue]=\"0\"\r\n      (dimensionChanged)=\"setElevation($event / scaleFactor)\"\r\n    >\r\n    </rp-dimension-input>\r\n  </div>\r\n\r\n  <div>\r\n    <h3 class=\"mat-subtitle-1\"> {{ 'TEXTURES' | localize}}</h3>\r\n    <mat-form-field id=\"face-select-form\">\r\n      <mat-label>{{\"SELECT_FACE\" | localize}}</mat-label>\r\n      <mat-select [(ngModel)]=\"selectedFace\">\r\n        <mat-option [value]=\"faceRef.All\">{{ 'ALL' | localize }}</mat-option>\r\n        <mat-option [value]=\"faceRef.Top\">{{ 'TOP' | localize }}</mat-option>\r\n        <mat-option [value]=\"faceRef.Bottom\">{{ 'BOTTOM' | localize }}</mat-option>\r\n        <mat-option [value]=\"faceRef.Front\">{{ 'FRONT' | localize }}</mat-option>\r\n        <mat-option [value]=\"faceRef.Back\">{{ 'BACK' | localize }}</mat-option>\r\n        <mat-option [value]=\"faceRef.Left\">{{ 'LEFT' | localize }}</mat-option>\r\n        <mat-option [value]=\"faceRef.Right\">{{ 'RIGHT' | localize }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n\r\n    <rp-appearance-section\r\n      type=\"shape\"\r\n      [hideTextureTab]=\"true\"\r\n      [color]=\"skin[selectedFace].color\"\r\n      [plainTexture]=\"skin[selectedFace].texture\"\r\n      [textureWidth]=\"skin[selectedFace].width() * 100\"\r\n      [textureHeight]=\"skin[selectedFace].height() * 100\"\r\n      [photoOptions]=\"textureOptions.Tiles\"\r\n      (setTexture)=\"setTexture($event)\"\r\n      (setColor)=\"setColor($event)\"\r\n    >\r\n    </rp-appearance-section>\r\n  </div>\r\n</section>\r\n", styles: [":host{overflow:hidden}:host section{overflow-y:auto;height:100%}#face-select-form{width:100%}#create-button{color:#fff;background:#3760a1}::ng-deep .mat-mdc-select-panel{max-height:80vh!important}.switcher{margin-right:10px}\n"], dependencies: [{ kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { kind: "component", type: AppearanceSectionComponent, selector: "rp-appearance-section", inputs: ["type", "hideTextureTab", "hideColorTab", "hidePhotoTab", "showGlassOption", "texturePlane", "plainTexture", "color", "textureWidth", "textureHeight", "photoOptions", "glassMaterial"], outputs: ["setTexture", "setColor", "setMaterial"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CustomShapeCreatorComponent, isStandalone: false, selector: "rp-custom-shape-creator", inputs: { shape: "shape" }, ngImport: i0, template: "<section>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"auto center\">\r\n    <mat-form-field fxFlex=\"grow\">\r\n      <input matInput #nameInputRef\r\n        type=\"text\"\r\n        placeholder=\"{{'SHAPES_NAME' | localize}}\"\r\n        [value]=\"name\"\r\n      >\r\n    </mat-form-field>\r\n    <button mat-icon-button\r\n      [disabled]=\"name === nameInputRef.value\"\r\n      (click)=\"setName(nameInputRef.value)\"\r\n    >\r\n      <mat-icon class=\"homedecorator-material-icons size-16\">check</mat-icon>\r\n    </button>\r\n    <button mat-icon-button\r\n      [disabled]=\"name === nameInputRef.value\"\r\n      (click)=\"nameInputRef.value = name\"\r\n    >\r\n      <mat-icon class=\"homedecorator-material-icons size-16\">cancel</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"switcher\">\r\n    <h2 class=\"mat-subtitle-2\">{{isFloorType ? ('FLOOR' | localize) : ('WALL' | localize)}}</h2>\r\n    <mat-slide-toggle\r\n      [checked]=\"isFloorType\"\r\n      (change)=\"toggleItemType()\"\r\n      [labelPosition]=\"'before'\"\r\n    >\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <h3 class=\"mat-subtitle-1\"> {{ 'MEASUREMENTS' | localize}}</h3>\r\n  <div>\r\n      <rp-dimension-input\r\n      title=\"{{'HEIGHT' | localize}}\"\r\n      [sourceValue]=\"height * scaleFactor\"\r\n      [minValue]=\"0\"\r\n      (dimensionChanged)=\"setHeight($event / scaleFactor)\"\r\n    >\r\n    </rp-dimension-input>\r\n\r\n    <rp-dimension-input\r\n      title=\"{{'WIDTH' | localize}}\"\r\n      [sourceValue]=\"width * scaleFactor\"\r\n      [minValue]=\"0\"\r\n      (dimensionChanged)=\"setWidth($event / scaleFactor)\"\r\n    >\r\n    </rp-dimension-input>\r\n\r\n    <rp-dimension-input\r\n      title=\"{{'DEPTH' | localize}}\"\r\n      [sourceValue]=\"depth * scaleFactor\"\r\n      [minValue]=\"0\"\r\n      (dimensionChanged)=\"setDepth($event / scaleFactor)\"\r\n    >\r\n    </rp-dimension-input>\r\n\r\n    <rp-dimension-input\r\n      title=\"{{'ELEVATION' | localize}}\"\r\n      [sourceValue]=\"elevation * scaleFactor\"\r\n      [minValue]=\"0\"\r\n      (dimensionChanged)=\"setElevation($event / scaleFactor)\"\r\n    >\r\n    </rp-dimension-input>\r\n  </div>\r\n\r\n  <div>\r\n    <h3 class=\"mat-subtitle-1\"> {{ 'TEXTURES' | localize}}</h3>\r\n    <mat-form-field id=\"face-select-form\">\r\n      <mat-label>{{\"SELECT_FACE\" | localize}}</mat-label>\r\n      <mat-select [(ngModel)]=\"selectedFace\">\r\n        <mat-option [value]=\"faceRef.All\">{{ 'ALL' | localize }}</mat-option>\r\n        <mat-option [value]=\"faceRef.Top\">{{ 'TOP' | localize }}</mat-option>\r\n        <mat-option [value]=\"faceRef.Bottom\">{{ 'BOTTOM' | localize }}</mat-option>\r\n        <mat-option [value]=\"faceRef.Front\">{{ 'FRONT' | localize }}</mat-option>\r\n        <mat-option [value]=\"faceRef.Back\">{{ 'BACK' | localize }}</mat-option>\r\n        <mat-option [value]=\"faceRef.Left\">{{ 'LEFT' | localize }}</mat-option>\r\n        <mat-option [value]=\"faceRef.Right\">{{ 'RIGHT' | localize }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n\r\n    <rp-appearance-section\r\n      type=\"shape\"\r\n      [hideTextureTab]=\"true\"\r\n      [color]=\"skin[selectedFace].color\"\r\n      [plainTexture]=\"skin[selectedFace].texture\"\r\n      [textureWidth]=\"skin[selectedFace].width() * 100\"\r\n      [textureHeight]=\"skin[selectedFace].height() * 100\"\r\n      [photoOptions]=\"textureOptions.Tiles\"\r\n      (setTexture)=\"setTexture($event)\"\r\n      (setColor)=\"setColor($event)\"\r\n    >\r\n    </rp-appearance-section>\r\n  </div>\r\n</section>\r\n", styles: [":host{overflow:hidden}:host section{overflow-y:auto;height:100%}#face-select-form{width:100%}#create-button{color:#fff;background:#3760a1}::ng-deep .mat-mdc-select-panel{max-height:80vh!important}.switcher{margin-right:10px}\n"], dependencies: [{ kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { kind: "component", type: AppearanceSectionComponent, selector: "rp-appearance-section", inputs: ["type", "hideTextureTab", "hideColorTab", "hidePhotoTab", "showGlassOption", "texturePlane", "plainTexture", "color", "textureWidth", "textureHeight", "photoOptions", "glassMaterial"], outputs: ["setTexture", "setColor", "setMaterial"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomShapeCreatorComponent, decorators: [{
             type: Component,
@@ -42332,7 +42422,7 @@ class CustomCylinderCreatorComponent {
         this._sceneService.needsRender = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomCylinderCreatorComponent, deps: [{ token: HudService }, { token: SceneService }, { token: ItemService }, { token: RoomService }, { token: SceneEventService }, { token: MessageBusService }, { token: WallService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CustomCylinderCreatorComponent, isStandalone: false, selector: "custom-cylinder-creator", inputs: { shape: "shape" }, ngImport: i0, template: "<section>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"auto center\">\r\n    <mat-form-field fxFlex=\"grow\">\r\n      <input matInput #nameInputRef\r\n        type=\"text\"\r\n        placeholder=\"{{'SHAPES_NAME' | localize}}\"\r\n        [value]=\"name\"\r\n        >\r\n      </mat-form-field>\r\n      <button mat-icon-button\r\n        [disabled]=\"name === nameInputRef.value\"\r\n        (click)=\"setName(nameInputRef.value)\"\r\n        >\r\n        <mat-icon class=\"homedecorator-material-icons size-16\">check</mat-icon>\r\n      </button>\r\n      <button mat-icon-button\r\n        [disabled]=\"name === nameInputRef.value\"\r\n        (click)=\"nameInputRef.value = name\"\r\n        >\r\n        <mat-icon class=\"homedecorator-material-icons size-16\">cancel</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"switcher\">\r\n      <h2 class=\"mat-subtitle-2\">{{isFloorType ? ('FLOOR' | localize) : ('WALL' | localize)}}</h2>\r\n      <mat-slide-toggle\r\n        [checked]=\"isFloorType\"\r\n        (change)=\"toggleItemType()\"\r\n        [labelPosition]=\"'before'\"\r\n        >\r\n      </mat-slide-toggle>\r\n    </div>\r\n\r\n    <h3 class=\"mat-subtitle-1\"> {{ 'MEASUREMENTS' | localize}}</h3>\r\n    <div>\r\n      <rp-dimension-input\r\n        title=\"{{'RADIUS' | localize}}\"\r\n        [sourceValue]=\"radius * scaleFactor\"\r\n        [minValue]=\"0\"\r\n        (dimensionChanged)=\"setRadius($event / scaleFactor)\"\r\n        >\r\n      </rp-dimension-input>\r\n\r\n      <rp-dimension-input\r\n        title=\"{{'HEIGHT' | localize}}\"\r\n        [sourceValue]=\"height * scaleFactor\"\r\n        [minValue]=\"0\"\r\n        (dimensionChanged)=\"setHeight($event / scaleFactor)\"\r\n        >\r\n      </rp-dimension-input>\r\n\r\n      @if (isFloorType) {\r\n        <rp-dimension-input\r\n          title=\"{{'ELEVATION' | localize}}\"\r\n          [sourceValue]=\"elevation * scaleFactor\"\r\n          [minValue]=\"0\"\r\n          (dimensionChanged)=\"setElevation($event / scaleFactor)\"\r\n          >\r\n        </rp-dimension-input>\r\n      }\r\n    </div>\r\n\r\n    <div>\r\n      <h3 class=\"mat-subtitle-1\"> {{ 'TEXTURES' | localize}}</h3>\r\n      <mat-form-field class=\"face-select-form\">\r\n        <mat-label>{{\"SELECT_FACE\" | localize}}</mat-label>\r\n        <mat-select [(ngModel)]=\"selectedFace\">\r\n          <mat-option [value]=\"faceRef.All\">{{ 'ALL' | localize }}</mat-option>\r\n          <mat-option [value]=\"faceRef.Top\">{{ 'TOP' | localize }}</mat-option>\r\n          <mat-option [value]=\"faceRef.Bottom\">{{ 'BOTTOM' | localize }}</mat-option>\r\n          <mat-option [value]=\"faceRef.Front\">{{ 'FRONT' | localize }}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <rp-appearance-section\r\n        [hideTextureTab]=\"true\"\r\n        [color]=\"skin[selectedFace].color\"\r\n        [plainTexture]=\"skin[selectedFace].texture\"\r\n        [photoOptions]=\"textureOptions.Tiles\"\r\n        [textureWidth]=\"skin[selectedFace].width() * 100\"\r\n        [textureHeight]=\"skin[selectedFace].height() * 100\"\r\n        (setTexture)=\"setTexture($event)\"\r\n        (setColor)=\"setColor($event)\"\r\n        >\r\n      </rp-appearance-section>\r\n    </div>\r\n  </section>\r\n", styles: [":host{overflow:hidden}:host section{overflow-y:auto;height:100%}.face-select-form{width:100%}::ng-deep .mat-mdc-select-panel{max-height:80vh!important}.switcher{margin-right:10px}\n"], dependencies: [{ kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { kind: "component", type: AppearanceSectionComponent, selector: "rp-appearance-section", inputs: ["type", "hideTextureTab", "hideColorTab", "hidePhotoTab", "showGlassOption", "texturePlane", "plainTexture", "color", "textureWidth", "textureHeight", "photoOptions", "glassMaterial"], outputs: ["setTexture", "setColor", "setMaterial"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CustomCylinderCreatorComponent, isStandalone: false, selector: "custom-cylinder-creator", inputs: { shape: "shape" }, ngImport: i0, template: "<section>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"auto center\">\r\n    <mat-form-field fxFlex=\"grow\">\r\n      <input matInput #nameInputRef\r\n        type=\"text\"\r\n        placeholder=\"{{'SHAPES_NAME' | localize}}\"\r\n        [value]=\"name\"\r\n        >\r\n      </mat-form-field>\r\n      <button mat-icon-button\r\n        [disabled]=\"name === nameInputRef.value\"\r\n        (click)=\"setName(nameInputRef.value)\"\r\n        >\r\n        <mat-icon class=\"homedecorator-material-icons size-16\">check</mat-icon>\r\n      </button>\r\n      <button mat-icon-button\r\n        [disabled]=\"name === nameInputRef.value\"\r\n        (click)=\"nameInputRef.value = name\"\r\n        >\r\n        <mat-icon class=\"homedecorator-material-icons size-16\">cancel</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"switcher\">\r\n      <h2 class=\"mat-subtitle-2\">{{isFloorType ? ('FLOOR' | localize) : ('WALL' | localize)}}</h2>\r\n      <mat-slide-toggle\r\n        [checked]=\"isFloorType\"\r\n        (change)=\"toggleItemType()\"\r\n        [labelPosition]=\"'before'\"\r\n        >\r\n      </mat-slide-toggle>\r\n    </div>\r\n\r\n    <h3 class=\"mat-subtitle-1\"> {{ 'MEASUREMENTS' | localize}}</h3>\r\n    <div>\r\n      <rp-dimension-input\r\n        title=\"{{'RADIUS' | localize}}\"\r\n        [sourceValue]=\"radius * scaleFactor\"\r\n        [minValue]=\"0\"\r\n        (dimensionChanged)=\"setRadius($event / scaleFactor)\"\r\n        >\r\n      </rp-dimension-input>\r\n\r\n      <rp-dimension-input\r\n        title=\"{{'HEIGHT' | localize}}\"\r\n        [sourceValue]=\"height * scaleFactor\"\r\n        [minValue]=\"0\"\r\n        (dimensionChanged)=\"setHeight($event / scaleFactor)\"\r\n        >\r\n      </rp-dimension-input>\r\n\r\n      @if (isFloorType) {\r\n        <rp-dimension-input\r\n          title=\"{{'ELEVATION' | localize}}\"\r\n          [sourceValue]=\"elevation * scaleFactor\"\r\n          [minValue]=\"0\"\r\n          (dimensionChanged)=\"setElevation($event / scaleFactor)\"\r\n          >\r\n        </rp-dimension-input>\r\n      }\r\n    </div>\r\n\r\n    <div>\r\n      <h3 class=\"mat-subtitle-1\"> {{ 'TEXTURES' | localize}}</h3>\r\n      <mat-form-field class=\"face-select-form\">\r\n        <mat-label>{{\"SELECT_FACE\" | localize}}</mat-label>\r\n        <mat-select [(ngModel)]=\"selectedFace\">\r\n          <mat-option [value]=\"faceRef.All\">{{ 'ALL' | localize }}</mat-option>\r\n          <mat-option [value]=\"faceRef.Top\">{{ 'TOP' | localize }}</mat-option>\r\n          <mat-option [value]=\"faceRef.Bottom\">{{ 'BOTTOM' | localize }}</mat-option>\r\n          <mat-option [value]=\"faceRef.Front\">{{ 'FRONT' | localize }}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <rp-appearance-section\r\n        [hideTextureTab]=\"true\"\r\n        [color]=\"skin[selectedFace].color\"\r\n        [plainTexture]=\"skin[selectedFace].texture\"\r\n        [photoOptions]=\"textureOptions.Tiles\"\r\n        [textureWidth]=\"skin[selectedFace].width() * 100\"\r\n        [textureHeight]=\"skin[selectedFace].height() * 100\"\r\n        (setTexture)=\"setTexture($event)\"\r\n        (setColor)=\"setColor($event)\"\r\n        >\r\n      </rp-appearance-section>\r\n    </div>\r\n  </section>\r\n", styles: [":host{overflow:hidden}:host section{overflow-y:auto;height:100%}.face-select-form{width:100%}::ng-deep .mat-mdc-select-panel{max-height:80vh!important}.switcher{margin-right:10px}\n"], dependencies: [{ kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { kind: "component", type: AppearanceSectionComponent, selector: "rp-appearance-section", inputs: ["type", "hideTextureTab", "hideColorTab", "hidePhotoTab", "showGlassOption", "texturePlane", "plainTexture", "color", "textureWidth", "textureHeight", "photoOptions", "glassMaterial"], outputs: ["setTexture", "setColor", "setMaterial"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomCylinderCreatorComponent, decorators: [{
             type: Component,
@@ -42535,7 +42625,7 @@ class ConfigurationPresetLoaderComponent {
       </div>
     }
 
-  `, isInline: true, styles: [".co-configurator-preset-loader .configurator-preset-loader-container{position:fixed;background:#fff;right:50px;bottom:50px;width:100%;max-width:400px;min-height:40px;box-sizing:border-box;padding:15px 5px;display:flex;justify-content:space-between;align-items:center;border-radius:15px;box-shadow:1px 1px 4px #0003;pointer-events:all;z-index:102}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-icon{background:#4e9b7e;border-radius:50%;width:30px;height:30px}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-icon .co-icon svg polygon{fill:#fff}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-head{text-transform:uppercase;font-size:12px}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-sku{font-size:18px;font-weight:700;margin:5px 0 15px}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-text-link{font-size:14px;cursor:pointer;color:#4e9b7e;text-align:center}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-text-link:hover{text-decoration:underline}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-close .co-button{background:none}\n"], dependencies: [{ kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i5.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".co-configurator-preset-loader .configurator-preset-loader-container{position:fixed;background:#fff;right:50px;bottom:50px;width:100%;max-width:400px;min-height:40px;box-sizing:border-box;padding:15px 5px;display:flex;justify-content:space-between;align-items:center;border-radius:15px;box-shadow:1px 1px 4px #0003;pointer-events:all;z-index:102}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-icon{background:#4e9b7e;border-radius:50%;width:30px;height:30px}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-icon .co-icon svg polygon{fill:#fff}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-head{text-transform:uppercase;font-size:12px}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-sku{font-size:18px;font-weight:700;margin:5px 0 15px}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-text-link{font-size:14px;cursor:pointer;color:#4e9b7e;text-align:center}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-text-link:hover{text-decoration:underline}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-close .co-button{background:none}\n"], dependencies: [{ kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i5$1.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigurationPresetLoaderComponent, decorators: [{
             type: Component,
@@ -43926,7 +44016,7 @@ class RoomPlannerComponent {
             }
         }
 
-    `, isInline: true, styles: [".with-scrollable-section{overflow:hidden;height:100%}.with-scrollable-section section{overflow-y:auto}.RoomPlanner{width:inherit;height:inherit;pointer-events:none}.RoomPlanner>*{pointer-events:all}.sidebar-toggles .mat-mdc-raised-button{width:110px;text-align:left}.logo-menu{position:absolute;top:20px;left:20px;z-index:2}.logo-menu-2nd{position:absolute;top:140px;left:84px}.logo-menu-4th{position:absolute;top:180px;left:84px}.sidebar{position:absolute;left:0;top:0;height:100vh;max-width:30%;width:400px;background:#fff;padding:0 20px;box-shadow:0 0 20px #00000040}.flex-wrap{display:flex;flex-flow:column nowrap;height:100%}.solid-background>canvas{fill:#fff;background:#fff}.toolbar__divider{border-bottom:2px solid rgba(199,195,195,.5411764706);width:70%;margin:5px 0}.toolbar__divider.context-menu{border-color:#c7c3c38a;width:100%}.show-inner-wall-measurement-button ::ng-deep .co-icon{transform:rotate(180deg)}.on-top{z-index:3}.rp-item-context-menu-wrap{color:#fff;background:#17253391;border-radius:5px;box-sizing:border-box;padding:10px;position:relative}.rp-item-context-menu-wrap .rp-item-context-menu-item{cursor:pointer;flex-direction:row;display:flex;padding:5px;border-radius:5px}.rp-item-context-menu-wrap .rp-item-context-menu-item span,.rp-item-context-menu-wrap .rp-item-context-menu-item label{display:flex;flex-direction:column;line-height:20px;font-size:12px;font-weight:lighter;vertical-align:middle}.rp-item-context-menu-wrap .rp-item-context-menu-item .label{width:150px}.rp-item-context-menu-wrap .rp-item-context-menu-item .icon{width:20px;margin-right:10px}.rp-item-context-menu-wrap .rp-item-context-menu-item .icon svg,.rp-item-context-menu-wrap .rp-item-context-menu-item .icon co-icon,.rp-item-context-menu-wrap .rp-item-context-menu-item .icon .mat-icon{height:15px;width:15px;font-size:18px}.rp-item-context-menu-wrap .rp-item-context-menu-item:hover{background:#dcdcdc80}.rp-item-context-menu-wrap .rp-item-context-menu-item-highlight{color:#da9803}.rp-item-context-menu-wrap .rp-item-context-menu-item-highlight svg{fill:#da9803}.rp-item-context-menu-wrap .conversion-button-selected .icon-selected{color:#009a6d}.rp-item-context-menu-wrap .rp-item-context-menu-header{border-bottom:2px solid rgba(199,195,195,.5411764706);margin-bottom:10px;padding-left:5px;padding-right:25px;max-width:160px;overflow:hidden}.rp-item-context-menu-wrap .rp-item-context-menu-header p{color:#da9803;font-size:13px;margin:0;padding:5px 0 10px}.rp-item-context-menu-wrap .rp-item-context-menu-close{position:absolute;right:7px;top:5px;z-index:2;cursor:pointer;width:15px;height:15px}.rp-item-context-menu-wrap .rp-item-context-menu-close .close-icon co-icon{height:15px;width:15px;font-size:18px}.rp-right-context-menu-wrap{color:#fff;background:#17253391;border-radius:5px 0 0 5px;box-sizing:border-box;padding:5px;position:relative}.rp-right-context-menu-wrap .rp-right-context-menu-item{cursor:pointer;flex-direction:row;display:flex;padding:10px;justify-content:center;border-bottom:2px solid rgba(199,195,195,.5411764706)}.rp-right-context-menu-wrap .rp-right-context-menu-item:last-child{border-bottom:none}.rp-right-context-menu-wrap .rp-right-context-menu-item span,.rp-right-context-menu-wrap .rp-right-context-menu-item label{display:flex;flex-direction:column;font-weight:lighter;vertical-align:middle}.rp-right-context-menu-wrap .rp-right-context-menu-item .icon{width:auto;margin-right:0}.rp-right-context-menu-wrap .rp-right-context-menu-item .icon svg,.rp-right-context-menu-wrap .rp-right-context-menu-item .icon co-icon,.rp-right-context-menu-wrap .rp-right-context-menu-item .icon .mat-icon{height:20px;width:20px;font-size:20px}.rp-right-context-menu-wrap .rp-right-context-menu-item:hover{background:#dcdcdc80}.rp-right-context-menu-wrap .rp-right-context-menu-item-highlight{color:#da9803}.rp-right-context-menu-wrap .rp-right-context-menu-item-highlight svg{fill:#da9803}.rp-right-context-menu-wrap .conversion-button-selected .icon-selected{color:#009a6d}::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:#da9803}::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar .mat-slide-toggle-thumb-container .mat-slide-toggle-thumb{background-color:#fff}::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar:hover .mat-ripple-element{background-color:#da9803}::ng-deep .mat-mdc-slide-toggle .mat-slide-toggle-bar{width:40px;height:20px;border-radius:15px}::ng-deep .mat-mdc-slide-toggle .mat-slide-toggle-bar .mat-slide-toggle-thumb-container{width:17px;height:17px;top:2px;left:5px}::ng-deep .mat-mdc-slide-toggle .mat-slide-toggle-bar .mat-slide-toggle-thumb-container .mat-slide-toggle-thumb{height:16px;width:16px}::ng-deep mat-slider{height:24px}::ng-deep mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{overflow:visible}::ng-deep mat-slider .mat-slider-wrapper .mat-slider-track-fill{background-color:#da9803}::ng-deep mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,::ng-deep mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb-label{background-color:#da9803}::ng-deep mat-list .mat-mdc-list-item{border-bottom:1px solid #9bb0d0}.mrp-save-grouping{pointer-events:all;position:absolute;bottom:10%;left:50%}\n"], dependencies: [{ kind: "component", type: CategoryLibraryComponent, selector: "rp-category-library", inputs: ["categories"], outputs: ["categoryClick"] }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ContextMenuComponent, selector: "rp-context-menu", inputs: ["openMouseEvent"] }, { kind: "component", type: ItemContextMenuComponent, selector: "rp-item-context-menu", inputs: ["item"], outputs: ["deletePressed"] }, { kind: "component", type: RightContextMenuComponent, selector: "rp-right-context-menu", inputs: ["item"], outputs: ["deletePressed"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ToolbarIconComponent, selector: "rp-toolbar-icon", inputs: ["matIcon", "svgIcon", "tooltip", "disabled", "showLabel"], outputs: ["onClick"] }, { kind: "component", type: ZoomControlsComponent, selector: "rp-zoom-controls", inputs: ["visible"], outputs: ["onZoomIn", "onZoomReset", "onZoomOut"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ButtonElevationComponent, selector: "button-elevation", inputs: ["item"] }, { kind: "component", type: ObjectLibraryComponent, selector: "rp-object-library", inputs: ["objects"], outputs: ["setDragged", "releaseDragged", "onObjectClick"] }, { kind: "component", type: FloorplannerComponent, selector: "floor-planner", outputs: ["selectedWallChange"] }, { kind: "component", type: SelectedFloorComponent, selector: "rp-selected-floor", inputs: ["floor", "texturePlane", "color"], outputs: ["setTexture", "setColor"] }, { kind: "component", type: SelectedObjectComponent, selector: "rp-selected-object", inputs: ["object"], outputs: ["onSelectedObjectChange"] }, { kind: "component", type: SelectedThreedObjectComponent, selector: "rp-selected-threed-object", inputs: ["object", "showCopy", "showDelete", "showLock"], outputs: ["onSelectedObjectChange"] }, { kind: "component", type: SelectedWallComponent, selector: "rp-selected-wall", inputs: ["wall", "texturePlane", "color", "minWallHeight", "maxWallHeight", "maxWallThickness", "maxWallLength", "minWallLength"], outputs: ["remove", "setLength", "setHeight", "setThickness", "selectCorner", "setTexture", "setColor"] }, { kind: "component", type: SettingsComponent, selector: "rp-settings", inputs: ["minWallHeight", "placeCameraDisabled"], outputs: ["onWallsHeightUpdate"] }, { kind: "component", type: CustomShapeCreatorComponent, selector: "rp-custom-shape-creator", inputs: ["shape"] }, { kind: "component", type: CustomCylinderCreatorComponent, selector: "custom-cylinder-creator", inputs: ["shape"] }, { kind: "component", type: SelectedObjectScaleComponent, selector: "rp-selected-object-scale", inputs: ["object"], outputs: ["objectChange"] }, { kind: "component", type: ConfigurationPresetLoaderComponent, selector: "co-configurator-preset-loader" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    `, isInline: true, styles: [".with-scrollable-section{overflow:hidden;height:100%}.with-scrollable-section section{overflow-y:auto}.RoomPlanner{width:inherit;height:inherit;pointer-events:none}.RoomPlanner>*{pointer-events:all}.sidebar-toggles .mat-mdc-raised-button{width:110px;text-align:left}.logo-menu{position:absolute;top:20px;left:20px;z-index:2}.logo-menu-2nd{position:absolute;top:140px;left:84px}.logo-menu-4th{position:absolute;top:180px;left:84px}.sidebar{position:absolute;left:0;top:0;height:100vh;max-width:30%;width:400px;background:#fff;padding:0 20px;box-shadow:0 0 20px #00000040}.flex-wrap{display:flex;flex-flow:column nowrap;height:100%}.solid-background>canvas{fill:#fff;background:#fff}.toolbar__divider{border-bottom:2px solid rgba(199,195,195,.5411764706);width:70%;margin:5px 0}.toolbar__divider.context-menu{border-color:#c7c3c38a;width:100%}.show-inner-wall-measurement-button ::ng-deep .co-icon{transform:rotate(180deg)}.on-top{z-index:3}.rp-item-context-menu-wrap{color:#fff;background:#17253391;border-radius:5px;box-sizing:border-box;padding:10px;position:relative}.rp-item-context-menu-wrap .rp-item-context-menu-item{cursor:pointer;flex-direction:row;display:flex;padding:5px;border-radius:5px}.rp-item-context-menu-wrap .rp-item-context-menu-item span,.rp-item-context-menu-wrap .rp-item-context-menu-item label{display:flex;flex-direction:column;line-height:20px;font-size:12px;font-weight:lighter;vertical-align:middle}.rp-item-context-menu-wrap .rp-item-context-menu-item .label{width:150px}.rp-item-context-menu-wrap .rp-item-context-menu-item .icon{width:20px;margin-right:10px}.rp-item-context-menu-wrap .rp-item-context-menu-item .icon svg,.rp-item-context-menu-wrap .rp-item-context-menu-item .icon co-icon,.rp-item-context-menu-wrap .rp-item-context-menu-item .icon .mat-icon{height:15px;width:15px;font-size:18px}.rp-item-context-menu-wrap .rp-item-context-menu-item:hover{background:#dcdcdc80}.rp-item-context-menu-wrap .rp-item-context-menu-item-highlight{color:#da9803}.rp-item-context-menu-wrap .rp-item-context-menu-item-highlight svg{fill:#da9803}.rp-item-context-menu-wrap .conversion-button-selected .icon-selected{color:#009a6d}.rp-item-context-menu-wrap .rp-item-context-menu-header{border-bottom:2px solid rgba(199,195,195,.5411764706);margin-bottom:10px;padding-left:5px;padding-right:25px;max-width:160px;overflow:hidden}.rp-item-context-menu-wrap .rp-item-context-menu-header p{color:#da9803;font-size:13px;margin:0;padding:5px 0 10px}.rp-item-context-menu-wrap .rp-item-context-menu-close{position:absolute;right:7px;top:5px;z-index:2;cursor:pointer;width:15px;height:15px}.rp-item-context-menu-wrap .rp-item-context-menu-close .close-icon co-icon{height:15px;width:15px;font-size:18px}.rp-right-context-menu-wrap{color:#fff;background:#17253391;border-radius:5px 0 0 5px;box-sizing:border-box;padding:5px;position:relative}.rp-right-context-menu-wrap .rp-right-context-menu-item{cursor:pointer;flex-direction:row;display:flex;padding:10px;justify-content:center;border-bottom:2px solid rgba(199,195,195,.5411764706)}.rp-right-context-menu-wrap .rp-right-context-menu-item:last-child{border-bottom:none}.rp-right-context-menu-wrap .rp-right-context-menu-item span,.rp-right-context-menu-wrap .rp-right-context-menu-item label{display:flex;flex-direction:column;font-weight:lighter;vertical-align:middle}.rp-right-context-menu-wrap .rp-right-context-menu-item .icon{width:auto;margin-right:0}.rp-right-context-menu-wrap .rp-right-context-menu-item .icon svg,.rp-right-context-menu-wrap .rp-right-context-menu-item .icon co-icon,.rp-right-context-menu-wrap .rp-right-context-menu-item .icon .mat-icon{height:20px;width:20px;font-size:20px}.rp-right-context-menu-wrap .rp-right-context-menu-item:hover{background:#dcdcdc80}.rp-right-context-menu-wrap .rp-right-context-menu-item-highlight{color:#da9803}.rp-right-context-menu-wrap .rp-right-context-menu-item-highlight svg{fill:#da9803}.rp-right-context-menu-wrap .conversion-button-selected .icon-selected{color:#009a6d}::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:#da9803}::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar .mat-slide-toggle-thumb-container .mat-slide-toggle-thumb{background-color:#fff}::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar:hover .mat-ripple-element{background-color:#da9803}::ng-deep .mat-mdc-slide-toggle .mat-slide-toggle-bar{width:40px;height:20px;border-radius:15px}::ng-deep .mat-mdc-slide-toggle .mat-slide-toggle-bar .mat-slide-toggle-thumb-container{width:17px;height:17px;top:2px;left:5px}::ng-deep .mat-mdc-slide-toggle .mat-slide-toggle-bar .mat-slide-toggle-thumb-container .mat-slide-toggle-thumb{height:16px;width:16px}::ng-deep mat-slider{height:24px}::ng-deep mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{overflow:visible}::ng-deep mat-slider .mat-slider-wrapper .mat-slider-track-fill{background-color:#da9803}::ng-deep mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,::ng-deep mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb-label{background-color:#da9803}::ng-deep mat-list .mat-mdc-list-item{border-bottom:1px solid #9bb0d0}.mrp-save-grouping{pointer-events:all;position:absolute;bottom:10%;left:50%}\n"], dependencies: [{ kind: "component", type: CategoryLibraryComponent, selector: "rp-category-library", inputs: ["categories"], outputs: ["categoryClick"] }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ContextMenuComponent, selector: "rp-context-menu", inputs: ["openMouseEvent"] }, { kind: "component", type: ItemContextMenuComponent, selector: "rp-item-context-menu", inputs: ["item"], outputs: ["deletePressed"] }, { kind: "component", type: RightContextMenuComponent, selector: "rp-right-context-menu", inputs: ["item"], outputs: ["deletePressed"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ToolbarIconComponent, selector: "rp-toolbar-icon", inputs: ["matIcon", "svgIcon", "tooltip", "disabled", "showLabel"], outputs: ["onClick"] }, { kind: "component", type: ZoomControlsComponent, selector: "rp-zoom-controls", inputs: ["visible"], outputs: ["onZoomIn", "onZoomReset", "onZoomOut"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ButtonElevationComponent, selector: "button-elevation", inputs: ["item"] }, { kind: "component", type: ObjectLibraryComponent, selector: "rp-object-library", inputs: ["objects"], outputs: ["setDragged", "releaseDragged", "onObjectClick"] }, { kind: "component", type: FloorplannerComponent, selector: "floor-planner", outputs: ["selectedWallChange"] }, { kind: "component", type: SelectedFloorComponent, selector: "rp-selected-floor", inputs: ["floor", "texturePlane", "color"], outputs: ["setTexture", "setColor"] }, { kind: "component", type: SelectedObjectComponent, selector: "rp-selected-object", inputs: ["object"], outputs: ["onSelectedObjectChange"] }, { kind: "component", type: SelectedThreedObjectComponent, selector: "rp-selected-threed-object", inputs: ["object", "showCopy", "showDelete", "showLock"], outputs: ["onSelectedObjectChange"] }, { kind: "component", type: SelectedWallComponent, selector: "rp-selected-wall", inputs: ["wall", "texturePlane", "color", "minWallHeight", "maxWallHeight", "maxWallThickness", "maxWallLength", "minWallLength"], outputs: ["remove", "setLength", "setHeight", "setThickness", "selectCorner", "setTexture", "setColor"] }, { kind: "component", type: SettingsComponent, selector: "rp-settings", inputs: ["minWallHeight", "placeCameraDisabled"], outputs: ["onWallsHeightUpdate"] }, { kind: "component", type: CustomShapeCreatorComponent, selector: "rp-custom-shape-creator", inputs: ["shape"] }, { kind: "component", type: CustomCylinderCreatorComponent, selector: "custom-cylinder-creator", inputs: ["shape"] }, { kind: "component", type: SelectedObjectScaleComponent, selector: "rp-selected-object-scale", inputs: ["object"], outputs: ["objectChange"] }, { kind: "component", type: ConfigurationPresetLoaderComponent, selector: "co-configurator-preset-loader" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoomPlannerComponent, decorators: [{
             type: Component,
@@ -44562,7 +44652,7 @@ class FurnitureLibraryComponent {
         return this.constructFn({ name, options });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FurnitureLibraryComponent, deps: [{ token: MessageBusService }, { token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FurnitureLibraryComponent, isStandalone: false, selector: "rp-furniture-library", inputs: { furnitures: "furnitures", constructFn: "constructFn" }, outputs: { close: "close", setDragged: "setDragged", releaseDragged: "releaseDragged" }, ngImport: i0, template: "<mat-grid-list cols=\"2\" rowHeight=\"200px\">\r\n  @for (furniture of furnitures | filter:'show':true; track furniture; let idx = $index) {\r\n    <mat-grid-tile>\r\n      <mat-grid-tile-header\r\n        draggable=\"true\"\r\n        (touchmove)=\"touchMove()\"\r\n        (touchend)=\"touchEnd($event, furniture)\"\r\n        (dragstart)=\"dragstart($event, furniture)\"\r\n        (dragend)=\"releaseDragged.emit()\"\r\n        >\r\n        {{furniture.name | localize}}\r\n      </mat-grid-tile-header>\r\n      <img\r\n        [src]=\"assetPath + furniture.thumbnailUrl\"\r\n        (touchmove)=\"touchMove()\"\r\n        (touchend)=\"touchEnd($event, furniture)\"\r\n        (dragstart)=\"dragstart($event, furniture)\"\r\n        (dragend)=\"releaseDragged.emit()\"\r\n        >\r\n        @if (furniture.isCopy) {\r\n          <mat-grid-tile-footer>\r\n            Copy #{{idx + 1}}\r\n          </mat-grid-tile-footer>\r\n        }\r\n      </mat-grid-tile>\r\n    }\r\n  </mat-grid-list>\r\n", styles: [":host{flex:1;overflow-y:auto}mat-grid-tile:hover{cursor:pointer}button.close{height:36px;width:36px;min-width:initial;padding:0;border:none;position:absolute;right:0;top:10px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: i3$4.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$4.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i3$4.MatGridTileText, selector: "mat-grid-tile-header, mat-grid-tile-footer" }, { kind: "directive", type: i3$4.MatGridTileHeaderCssMatStyler, selector: "mat-grid-tile-header" }, { kind: "directive", type: i3$4.MatGridTileFooterCssMatStyler, selector: "mat-grid-tile-footer" }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: FilterPipe, name: "filter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FurnitureLibraryComponent, isStandalone: false, selector: "rp-furniture-library", inputs: { furnitures: "furnitures", constructFn: "constructFn" }, outputs: { close: "close", setDragged: "setDragged", releaseDragged: "releaseDragged" }, ngImport: i0, template: "<mat-grid-list cols=\"2\" rowHeight=\"200px\">\r\n  @for (furniture of furnitures | filter:'show':true; track furniture; let idx = $index) {\r\n    <mat-grid-tile>\r\n      <mat-grid-tile-header\r\n        draggable=\"true\"\r\n        (touchmove)=\"touchMove()\"\r\n        (touchend)=\"touchEnd($event, furniture)\"\r\n        (dragstart)=\"dragstart($event, furniture)\"\r\n        (dragend)=\"releaseDragged.emit()\"\r\n        >\r\n        {{furniture.name | localize}}\r\n      </mat-grid-tile-header>\r\n      <img\r\n        [src]=\"assetPath + furniture.thumbnailUrl\"\r\n        (touchmove)=\"touchMove()\"\r\n        (touchend)=\"touchEnd($event, furniture)\"\r\n        (dragstart)=\"dragstart($event, furniture)\"\r\n        (dragend)=\"releaseDragged.emit()\"\r\n        >\r\n        @if (furniture.isCopy) {\r\n          <mat-grid-tile-footer>\r\n            Copy #{{idx + 1}}\r\n          </mat-grid-tile-footer>\r\n        }\r\n      </mat-grid-tile>\r\n    }\r\n  </mat-grid-list>\r\n", styles: [":host{flex:1;overflow-y:auto}mat-grid-tile:hover{cursor:pointer}button.close{height:36px;width:36px;min-width:initial;padding:0;border:none;position:absolute;right:0;top:10px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: i3$3.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$3.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i3$3.MatGridTileText, selector: "mat-grid-tile-header, mat-grid-tile-footer" }, { kind: "directive", type: i3$3.MatGridTileHeaderCssMatStyler, selector: "mat-grid-tile-header" }, { kind: "directive", type: i3$3.MatGridTileFooterCssMatStyler, selector: "mat-grid-tile-footer" }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: FilterPipe, name: "filter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FurnitureLibraryComponent, decorators: [{
             type: Component,
@@ -45068,13 +45158,13 @@ class PresetsComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PresetsComponent, deps: [{ token: i1$2.MatDialog }, { token: MessageBusService }, { token: i3$5.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PresetsComponent, deps: [{ token: i1$2.MatDialog }, { token: MessageBusService }, { token: i3$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PresetsComponent, isStandalone: false, selector: "rp-presets", inputs: { openNewRoomDialog: "openNewRoomDialog" }, host: { properties: { "class": "this.layerClass" } }, ngImport: i0, template: "", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PresetsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rp-presets', standalone: false, template: "" }]
-        }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: MessageBusService }, { type: i3$5.ActivatedRoute }], propDecorators: { openNewRoomDialog: [{
+        }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: MessageBusService }, { type: i3$4.ActivatedRoute }], propDecorators: { openNewRoomDialog: [{
                 type: Input
             }], layerClass: [{
                 type: HostBinding,
@@ -45105,7 +45195,7 @@ class ElementToolbarComponent {
         this.showEditMenu = !this.showEditMenu;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ElementToolbarComponent, deps: [{ token: HomedecoratorSettingsService }, { token: HomedecoratorIconCacheService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ElementToolbarComponent, isStandalone: false, selector: "rp-element-toolbar", inputs: { editMenu: "editMenu", showPointer: "showPointer", showSwap: "showSwap" }, outputs: { deleteClicked: "deleteClicked", swapClicked: "swapClicked", animationClicked: "animationClicked" }, host: { properties: { "class.rp-element-toolbar": "this.hostClass", "class.custom-menu": "this.instantMenu" } }, viewQueries: [{ propertyName: "elementPointer", first: true, predicate: ["elementPointer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"toolbar-wrapper\">\r\n  @if (settingsService.settings.options.instantEditMenu) {\r\n    <span class=\"toolbar-label\" [textContent]=\"'SELECTION_OPTIONS' | localize\"></span>\r\n  }\r\n  @if (!settingsService.settings.options.instantEditMenu && editMenu && editMenu.length > 0) {\r\n    <div class=\"toolbar-button\" (click)=\"handleEditClick()\">\r\n      <button mat-mini-fab>\r\n        <co-icon class=\"button-icon\" [iconData]=\"iconCache.getIcon(icon.PencilLight)\"></co-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"toolbar-button\" (click)=\"deleteClicked.emit()\">\r\n    @if (settingsService.settings.options.instantEditMenu) {\r\n      <div class=\"instant-edit-button\">\r\n        <co-icon class=\"button-icon\" [iconData]=\"iconCache.getIcon(icon.TrashCanLight)\"></co-icon>\r\n        <span class=\"toolbar-label\" [textContent]=\"'DELETE' | localize\"></span>\r\n      </div>\r\n    }\r\n\r\n    @if (!settingsService.settings.options.instantEditMenu) {\r\n      <button mat-mini-fab>\r\n        <co-icon class=\"button-icon\" [iconData]=\"iconCache.getIcon(icon.TrashCanLight)\"></co-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @if (showSwap) {\r\n    <div class=\"toolbar-button\" (click)=\"swapClicked.emit()\">\r\n      @if (settingsService.settings.options.instantEditMenu) {\r\n        <div class=\"instant-edit-button\">\r\n          <co-icon class=\"button-icon\" [iconData]=\"iconCache.getIcon(icon.RotateLight)\"></co-icon>\r\n          <span class=\"toolbar-label\" [textContent]=\"'REPLACE' | localize\"></span>\r\n        </div>\r\n      }\r\n      @if (!settingsService.settings.options.instantEditMenu) {\r\n        <button mat-mini-fab>\r\n          <co-icon class=\"button-icon\" [iconData]=\"iconCache.getIcon(icon.RotateLight)\"></co-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (settingsService.settings.options.animationButton) {\r\n    <div class=\"toolbar-button\" (click)=\"animationClicked.emit()\">\r\n      <!--div class=\"instant-edit-button\" *ngIf=\"settingsService.settings.options.instantEditMenu\">\r\n      <co-icon class=\"button-icon\" [iconData]=\"iconCache.getIcon(icon.Check)\"></co-icon>\r\n      <span class=\"toolbar-label\" [textContent]=\"'ANIMATE' | localize\"></span>\r\n    </div-->\r\n    @if (!settingsService.settings.options.instantEditMenu) {\r\n      <button mat-mini-fab>\r\n        <co-icon class=\"button-icon\" [iconData]=\"iconCache.getIcon(icon.Check)\"></co-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n\r\n</div>\r\n@if (showEditMenu || settingsService.settings.options.instantEditMenu) {\r\n  <div class=\"edit-menu-wrapper\" @showHideEditMenu>\r\n    @for (item of editMenu; track item) {\r\n      <div class=\"edit-menu\" (click)=\"item.handler()\">\r\n        <span [textContent]=\"item.caption\"></span>\r\n        <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">chevron_right</mat-icon>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{position:absolute;display:block;height:50px;top:64px;left:50%;width:150px;transform:translate(-50%)}:host.custom-menu{top:90px;left:80px;height:auto;transform:translate(0)}:host.custom-menu .toolbar-wrapper{column-gap:10px}:host.custom-menu .toolbar-button{cursor:pointer;display:flex;align-items:center}:host.custom-menu .toolbar-button .instant-edit-button{display:flex;align-items:center}:host.custom-menu .toolbar-button .instant-edit-button ::ng-deep co-icon{margin-right:7px;border:none;width:16px;height:16px;border-radius:10px}:host.custom-menu .toolbar-button .instant-edit-button ::ng-deep co-icon svg g polygon{fill:#000}:host.custom-menu .toolbar-button .instant-edit-button ::ng-deep co-icon svg g path{fill:#000}:host.custom-menu .toolbar-button button{box-shadow:none;border:1px solid rgba(0,0,0,.1);height:30px;width:30px}:host.custom-menu .toolbar-button button .mat-icon{height:30px;width:30px}:host.custom-menu .toolbar-label{font-size:12px;font-weight:700;margin-right:22px}:host.custom-menu .edit-menu-wrapper{left:0;transform:translate(0)}@media screen and (max-width: 768px){:host.custom-menu{top:18px;left:5%}}.toolbar-wrapper{display:flex;align-items:center;gap:2px}.toolbar-wrapper button:not(:last-child){margin-right:5px}:host ::ng-deep .mat-mdc-mini-fab .mat-button-wrapper{padding:0;display:flex;line-height:0px;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-unelevated-button.mat-accent,:host ::ng-deep .mat-mdc-raised-button.mat-accent,:host ::ng-deep .mat-mdc-fab.mat-accent,:host ::ng-deep .mat-mdc-mini-fab.mat-accent{background-color:#17253391;width:36px;height:36px;border-radius:4px}:host ::ng-deep .mat-mdc-unelevated-button.mat-accent co-icon,:host ::ng-deep .mat-mdc-raised-button.mat-accent co-icon,:host ::ng-deep .mat-mdc-fab.mat-accent co-icon,:host ::ng-deep .mat-mdc-mini-fab.mat-accent co-icon{width:16px;height:16px}:host ::ng-deep .mat-mdc-unelevated-button.mat-accent co-icon svg,:host ::ng-deep .mat-mdc-raised-button.mat-accent co-icon svg,:host ::ng-deep .mat-mdc-fab.mat-accent co-icon svg,:host ::ng-deep .mat-mdc-mini-fab.mat-accent co-icon svg{fill:#fff}:host ::ng-deep .mat.mat-mdc-mini-fab{margin-right:200px}:host ::ng-deep .mat-icon{height:40px;width:40px}.element-pointer{pointer-events:none;position:absolute;width:0px;border-left:2px dashed #2c67ff;transform-origin:top center;top:45px;left:50%;margin-left:20px}.edit-menu-wrapper{position:absolute;margin-top:10px;min-width:175px;left:25px;transform:translate(-50%);overflow:hidden}.edit-menu-wrapper .edit-menu:not(:last-child){margin-bottom:5px}.edit-menu{font-size:12px;background:#fff;color:#41403d;height:30px;align-items:center;padding:5px;cursor:pointer;white-space:nowrap;display:flex;justify-content:space-between}.edit-menu span{margin-right:50px}.edit-menu mat-icon{width:20px;height:20px}\n"], dependencies: [{ kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ElementToolbarComponent, isStandalone: false, selector: "rp-element-toolbar", inputs: { editMenu: "editMenu", showPointer: "showPointer", showSwap: "showSwap" }, outputs: { deleteClicked: "deleteClicked", swapClicked: "swapClicked", animationClicked: "animationClicked" }, host: { properties: { "class.rp-element-toolbar": "this.hostClass", "class.custom-menu": "this.instantMenu" } }, viewQueries: [{ propertyName: "elementPointer", first: true, predicate: ["elementPointer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"toolbar-wrapper\">\r\n  @if (settingsService.settings.options.instantEditMenu) {\r\n    <span class=\"toolbar-label\" [textContent]=\"'SELECTION_OPTIONS' | localize\"></span>\r\n  }\r\n  @if (!settingsService.settings.options.instantEditMenu && editMenu && editMenu.length > 0) {\r\n    <div class=\"toolbar-button\" (click)=\"handleEditClick()\">\r\n      <button mat-mini-fab>\r\n        <co-icon class=\"button-icon\" [iconData]=\"iconCache.getIcon(icon.PencilLight)\"></co-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"toolbar-button\" (click)=\"deleteClicked.emit()\">\r\n    @if (settingsService.settings.options.instantEditMenu) {\r\n      <div class=\"instant-edit-button\">\r\n        <co-icon class=\"button-icon\" [iconData]=\"iconCache.getIcon(icon.TrashCanLight)\"></co-icon>\r\n        <span class=\"toolbar-label\" [textContent]=\"'DELETE' | localize\"></span>\r\n      </div>\r\n    }\r\n\r\n    @if (!settingsService.settings.options.instantEditMenu) {\r\n      <button mat-mini-fab>\r\n        <co-icon class=\"button-icon\" [iconData]=\"iconCache.getIcon(icon.TrashCanLight)\"></co-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @if (showSwap) {\r\n    <div class=\"toolbar-button\" (click)=\"swapClicked.emit()\">\r\n      @if (settingsService.settings.options.instantEditMenu) {\r\n        <div class=\"instant-edit-button\">\r\n          <co-icon class=\"button-icon\" [iconData]=\"iconCache.getIcon(icon.RotateLight)\"></co-icon>\r\n          <span class=\"toolbar-label\" [textContent]=\"'REPLACE' | localize\"></span>\r\n        </div>\r\n      }\r\n      @if (!settingsService.settings.options.instantEditMenu) {\r\n        <button mat-mini-fab>\r\n          <co-icon class=\"button-icon\" [iconData]=\"iconCache.getIcon(icon.RotateLight)\"></co-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (settingsService.settings.options.animationButton) {\r\n    <div class=\"toolbar-button\" (click)=\"animationClicked.emit()\">\r\n      <!--div class=\"instant-edit-button\" *ngIf=\"settingsService.settings.options.instantEditMenu\">\r\n      <co-icon class=\"button-icon\" [iconData]=\"iconCache.getIcon(icon.Check)\"></co-icon>\r\n      <span class=\"toolbar-label\" [textContent]=\"'ANIMATE' | localize\"></span>\r\n    </div-->\r\n    @if (!settingsService.settings.options.instantEditMenu) {\r\n      <button mat-mini-fab>\r\n        <co-icon class=\"button-icon\" [iconData]=\"iconCache.getIcon(icon.Check)\"></co-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n\r\n</div>\r\n@if (showEditMenu || settingsService.settings.options.instantEditMenu) {\r\n  <div class=\"edit-menu-wrapper\" @showHideEditMenu>\r\n    @for (item of editMenu; track item) {\r\n      <div class=\"edit-menu\" (click)=\"item.handler()\">\r\n        <span [textContent]=\"item.caption\"></span>\r\n        <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">chevron_right</mat-icon>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{position:absolute;display:block;height:50px;top:64px;left:50%;width:150px;transform:translate(-50%)}:host.custom-menu{top:90px;left:80px;height:auto;transform:translate(0)}:host.custom-menu .toolbar-wrapper{column-gap:10px}:host.custom-menu .toolbar-button{cursor:pointer;display:flex;align-items:center}:host.custom-menu .toolbar-button .instant-edit-button{display:flex;align-items:center}:host.custom-menu .toolbar-button .instant-edit-button ::ng-deep co-icon{margin-right:7px;border:none;width:16px;height:16px;border-radius:10px}:host.custom-menu .toolbar-button .instant-edit-button ::ng-deep co-icon svg g polygon{fill:#000}:host.custom-menu .toolbar-button .instant-edit-button ::ng-deep co-icon svg g path{fill:#000}:host.custom-menu .toolbar-button button{box-shadow:none;border:1px solid rgba(0,0,0,.1);height:30px;width:30px}:host.custom-menu .toolbar-button button .mat-icon{height:30px;width:30px}:host.custom-menu .toolbar-label{font-size:12px;font-weight:700;margin-right:22px}:host.custom-menu .edit-menu-wrapper{left:0;transform:translate(0)}@media screen and (max-width: 768px){:host.custom-menu{top:18px;left:5%}}.toolbar-wrapper{display:flex;align-items:center;gap:2px}.toolbar-wrapper button:not(:last-child){margin-right:5px}:host ::ng-deep .mat-mdc-mini-fab .mat-button-wrapper{padding:0;display:flex;line-height:0px;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-unelevated-button.mat-accent,:host ::ng-deep .mat-mdc-raised-button.mat-accent,:host ::ng-deep .mat-mdc-fab.mat-accent,:host ::ng-deep .mat-mdc-mini-fab.mat-accent{background-color:#17253391;width:36px;height:36px;border-radius:4px}:host ::ng-deep .mat-mdc-unelevated-button.mat-accent co-icon,:host ::ng-deep .mat-mdc-raised-button.mat-accent co-icon,:host ::ng-deep .mat-mdc-fab.mat-accent co-icon,:host ::ng-deep .mat-mdc-mini-fab.mat-accent co-icon{width:16px;height:16px}:host ::ng-deep .mat-mdc-unelevated-button.mat-accent co-icon svg,:host ::ng-deep .mat-mdc-raised-button.mat-accent co-icon svg,:host ::ng-deep .mat-mdc-fab.mat-accent co-icon svg,:host ::ng-deep .mat-mdc-mini-fab.mat-accent co-icon svg{fill:#fff}:host ::ng-deep .mat.mat-mdc-mini-fab{margin-right:200px}:host ::ng-deep .mat-icon{height:40px;width:40px}.element-pointer{pointer-events:none;position:absolute;width:0px;border-left:2px dashed #2c67ff;transform-origin:top center;top:45px;left:50%;margin-left:20px}.edit-menu-wrapper{position:absolute;margin-top:10px;min-width:175px;left:25px;transform:translate(-50%);overflow:hidden}.edit-menu-wrapper .edit-menu:not(:last-child){margin-bottom:5px}.edit-menu{font-size:12px;background:#fff;color:#41403d;height:30px;align-items:center;padding:5px;cursor:pointer;white-space:nowrap;display:flex;justify-content:space-between}.edit-menu span{margin-right:50px}.edit-menu mat-icon{width:20px;height:20px}\n"], dependencies: [{ kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('showHideEditMenu', [
                 state('void', style({ 'height': '0', opacity: 0 })),
                 state('*', style({ 'height': '*', opacity: 1 })),
@@ -45326,7 +45416,7 @@ class ModelDialogFurnitureListComponent {
       </div>
 
     </ng-container>
-  `, isInline: true, styles: [".title{margin-bottom:10px}.label{margin:0}.sub-label{font-size:12px;font-style:italic;margin:0}.furniture-item-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:36px;height:36px;color:#fff;background:#3760a1;border:none;border-radius:100%;cursor:pointer;flex-shrink:0}.furniture-item-button .mat-icon{font-size:18px;line-height:36px;width:auto;height:auto}.furniture-list{display:flex;flex-direction:column;width:100%;padding:0;overflow:hidden;margin:0 0 10px}.furniture-list .furniture-item{display:flex;align-items:flex-start;width:100%;margin:2px 0 0;overflow:hidden}.furniture-list .furniture-item.furniture-model .furniture-item-left{padding-right:10px}.furniture-list .furniture-item .furniture-item-wrapper{display:flex;align-items:center}.furniture-list .furniture-item .furniture-item-wrapper .error-expand-handle{cursor:pointer;transform:rotate(0);height:40px;width:40px}.furniture-list .furniture-item .furniture-item-wrapper .error-expand-handle.expanded{transform:rotate(180deg);transition:.3s ease-in-out}.furniture-list .furniture-item .furniture-item-wrap{border:1px solid #dce4ea;padding:4px 0 4px 10px;display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left{display:flex;flex-direction:column;width:80%;font-size:13px;margin:0}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-title{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:32px}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-copy{float:right;border:none;padding:0 15px;margin:0 0 0 10px;line-height:32px;font-size:12px;text-transform:uppercase;background:transparent;color:#dce4ea;font-weight:600;cursor:pointer}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-copy:focus{outline:0}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-copy:hover{color:#000000de}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-right{display:flex;padding-top:4px;width:20%;flex-direction:column;justify-content:center;align-items:center}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-right .furniture-item-delete{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:36px;height:36px;color:#fff;background:#3760a1;border:none;border-radius:100%;cursor:pointer;flex-shrink:0}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-right .furniture-item-delete .mat-icon{font-size:18px;line-height:36px;width:auto;height:auto}.furniture-list .furniture-item .furniture-item-conversion-wrap{display:flex;flex-direction:row;flex-wrap:wrap;padding-top:9px;box-sizing:border-box}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-row{display:flex;flex-direction:column;justify-content:center;align-items:center}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-button-wrap{width:30%}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap{width:70%;position:relative}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap input{width:90%;border:1px solid #e8eceb;border-radius:3px;box-sizing:border-box;padding:10px 5px}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap input:disabled{background:#eee}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .furniture-item-conversion-input-label{font-size:8px;position:absolute;top:2px;left:10px}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .input-binded-button{background:none;border:none;cursor:pointer;position:absolute;right:0;top:10px;color:#000}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .input-binded-button .mat-icon{height:14px;width:14px;font-size:14px}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .input-binded-button-highlight{color:#009a6d}.furniture-item-conversion-highlight{background:#009a6d}.furniture-item-conversion-highlight svg{fill:#fff}::ng-deep error-messages .error-message{font-weight:700;font-size:12px}::ng-deep error-messages .error-description{font-size:11px}.furniture-item-totals{display:flex;flex-direction:row;justify-content:right;align-items:center}.furniture-item-totals .furniture-item-total-row{display:flex;flex-direction:column;margin-left:15px}.furniture-item-totals .furniture-item-total-button-highlight{background:#009a6d;color:#fff}\n"], dependencies: [{ kind: "component", type: ErrorMessageComponent, selector: "error-messages", inputs: ["messages"] }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+  `, isInline: true, styles: [".title{margin-bottom:10px}.label{margin:0}.sub-label{font-size:12px;font-style:italic;margin:0}.furniture-item-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:36px;height:36px;color:#fff;background:#3760a1;border:none;border-radius:100%;cursor:pointer;flex-shrink:0}.furniture-item-button .mat-icon{font-size:18px;line-height:36px;width:auto;height:auto}.furniture-list{display:flex;flex-direction:column;width:100%;padding:0;overflow:hidden;margin:0 0 10px}.furniture-list .furniture-item{display:flex;align-items:flex-start;width:100%;margin:2px 0 0;overflow:hidden}.furniture-list .furniture-item.furniture-model .furniture-item-left{padding-right:10px}.furniture-list .furniture-item .furniture-item-wrapper{display:flex;align-items:center}.furniture-list .furniture-item .furniture-item-wrapper .error-expand-handle{cursor:pointer;transform:rotate(0);height:40px;width:40px}.furniture-list .furniture-item .furniture-item-wrapper .error-expand-handle.expanded{transform:rotate(180deg);transition:.3s ease-in-out}.furniture-list .furniture-item .furniture-item-wrap{border:1px solid #dce4ea;padding:4px 0 4px 10px;display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left{display:flex;flex-direction:column;width:80%;font-size:13px;margin:0}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-title{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:32px}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-copy{float:right;border:none;padding:0 15px;margin:0 0 0 10px;line-height:32px;font-size:12px;text-transform:uppercase;background:transparent;color:#dce4ea;font-weight:600;cursor:pointer}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-copy:focus{outline:0}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-copy:hover{color:#000000de}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-right{display:flex;padding-top:4px;width:20%;flex-direction:column;justify-content:center;align-items:center}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-right .furniture-item-delete{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:36px;height:36px;color:#fff;background:#3760a1;border:none;border-radius:100%;cursor:pointer;flex-shrink:0}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-right .furniture-item-delete .mat-icon{font-size:18px;line-height:36px;width:auto;height:auto}.furniture-list .furniture-item .furniture-item-conversion-wrap{display:flex;flex-direction:row;flex-wrap:wrap;padding-top:9px;box-sizing:border-box}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-row{display:flex;flex-direction:column;justify-content:center;align-items:center}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-button-wrap{width:30%}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap{width:70%;position:relative}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap input{width:90%;border:1px solid #e8eceb;border-radius:3px;box-sizing:border-box;padding:10px 5px}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap input:disabled{background:#eee}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .furniture-item-conversion-input-label{font-size:8px;position:absolute;top:2px;left:10px}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .input-binded-button{background:none;border:none;cursor:pointer;position:absolute;right:0;top:10px;color:#000}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .input-binded-button .mat-icon{height:14px;width:14px;font-size:14px}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .input-binded-button-highlight{color:#009a6d}.furniture-item-conversion-highlight{background:#009a6d}.furniture-item-conversion-highlight svg{fill:#fff}::ng-deep error-messages .error-message{font-weight:700;font-size:12px}::ng-deep error-messages .error-description{font-size:11px}.furniture-item-totals{display:flex;flex-direction:row;justify-content:right;align-items:center}.furniture-item-totals .furniture-item-total-row{display:flex;flex-direction:column;margin-left:15px}.furniture-item-totals .furniture-item-total-button-highlight{background:#009a6d;color:#fff}\n"], dependencies: [{ kind: "component", type: ErrorMessageComponent, selector: "error-messages", inputs: ["messages"] }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('slideInOut', [
                 transition(':leave', [
                     style({ transform: 'translateY(0%)', opacity: '1' }),
@@ -45516,7 +45606,7 @@ class ModelDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModelDialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModelDialogComponent, isStandalone: false, selector: "rp-error-dialog", ngImport: i0, template: "<div @slideInOut>\r\n  <div mat-dialog-content>\r\n    @if (!noProductsLoaded) {\r\n      @if (furniture.length > 0 || furnitureFixed.length > 0 || obsoleteFurniture.length > 0 || simpleFurniture.length > 0) {\r\n        <div class=\"content-wrapper\">\r\n          <div class=\"title-wrapper\" (click)=\"showLoaded = !showLoaded\">\r\n            <co-icon class=\"expand-icon\" [class.expanded]=\"showLoaded\"\r\n            [iconData]=\"iconService.getIcon(icon.ArrowPointDown)\"></co-icon>\r\n            <h3 [textContent]=\"'LOADED_PRODUCTS' | localize\"></h3>\r\n          </div>\r\n          @if (showLoaded) {\r\n            <div class=\"content\" @showHideContent>\r\n              @if (furniture.length > 0) {\r\n                <dialog-furniture-list\r\n                  [iconCacheService]=\"iconService\"\r\n                  [settingsService]=\"settingsService\"\r\n                  [googleTagManagerService]=\"googleTagManagerService\"\r\n                  [messagesService]=\"messagesService\"\r\n                  [list]=\"furniture\" [showDelete]=\"true\" [showCopy]=\"false\"\r\n                [showTotals]=\"true\"></dialog-furniture-list>\r\n              }\r\n              @if (furnitureFixed.length > 0) {\r\n                <dialog-furniture-list\r\n                  [iconCacheService]=\"iconService\"\r\n                  [settingsService]=\"settingsService\"\r\n                  [googleTagManagerService]=\"googleTagManagerService\"\r\n                  [messagesService]=\"messagesService\"\r\n                  [list]=\"furnitureFixed\" [label]=\"'LOADED_FIXED'\" [subLabel]=\"'LOADED_FIXED_DESC'\"\r\n                [showDelete]=\"true\" [showCopy]=\"false\"></dialog-furniture-list>\r\n              }\r\n              @if (obsoleteFurniture.length > 0) {\r\n                <dialog-furniture-list\r\n                  [iconCacheService]=\"iconService\"\r\n                  [settingsService]=\"settingsService\"\r\n                  [googleTagManagerService]=\"googleTagManagerService\"\r\n                  [messagesService]=\"messagesService\"\r\n                  [list]=\"obsoleteFurniture\" [label]=\"'OBSOLETE'\" [subLabel]=\"'OBSOLETE_DESC'\"\r\n                [showDelete]=\"true\" [showCopy]=\"false\"></dialog-furniture-list>\r\n              }\r\n              @if (simpleFurniture.length > 0) {\r\n                <dialog-furniture-list\r\n                  [iconCacheService]=\"iconService\"\r\n                  [settingsService]=\"settingsService\"\r\n                  [googleTagManagerService]=\"googleTagManagerService\"\r\n                  [messagesService]=\"messagesService\"\r\n                  [list]=\"simpleFurniture\" [showDelete]=\"true\"\r\n                [showCopy]=\"false\"></dialog-furniture-list>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (notLoaded.length > 0 || notFixedFurniture.length > 0) {\r\n        <div class=\"content-wrapper\">\r\n          <div class=\"title-wrapper\" (click)=\"showNotLoaded = !showNotLoaded\">\r\n            <co-icon class=\"expand-icon\" [class.expanded]=\"showLoaded\"\r\n            [iconData]=\"iconService.getIcon(icon.ArrowPointDown)\"></co-icon>\r\n            <h3 [textContent]=\"'NOT_LOADED_PRODUCTS' | localize\"></h3>\r\n          </div>\r\n          @if (showNotLoaded) {\r\n            <div class=\"content\" @showHideContent>\r\n              <dialog-furniture-list\r\n                [iconCacheService]=\"iconService\"\r\n                [settingsService]=\"settingsService\"\r\n                [googleTagManagerService]=\"googleTagManagerService\"\r\n                [messagesService]=\"messagesService\"\r\n                [list]=\"notLoaded\" [label]=\"'UNFIXED_PRODUCTS'\" [subLabel]=\"'UNFIXED_PRODUCTS_DESC'\" [showDelete]=\"false\"\r\n              [showCopy]=\"true\"></dialog-furniture-list>\r\n              <dialog-furniture-list\r\n                [iconCacheService]=\"iconService\"\r\n                [settingsService]=\"settingsService\"\r\n                [googleTagManagerService]=\"googleTagManagerService\"\r\n                [messagesService]=\"messagesService\"\r\n                [list]=\"notFixedFurniture\" [label]=\"'MODEL_CANNOT_BE_LOADED'\" [subLabel]=\"'MODEL_CANNOT_BE_LOADED_DESC'\"\r\n              [showDelete]=\"false\" [showCopy]=\"true\"></dialog-furniture-list>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n    @if (noProductsLoaded) {\r\n      @if (furniture.length === 0 && obsoleteFurniture.length === 0 && simpleFurniture.length === 0) {\r\n        <p\r\n        [textContent]=\"'NO_PRODUCTS_LOADED' | localize\"></p>\r\n      }\r\n    }\r\n\r\n  </div>\r\n  <button mat-button mat-dialog-close>OK</button>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;width:600px}:host .title-wrapper{display:flex;align-items:center;cursor:pointer}:host .content-wrapper{border:1px solid rgba(1,1,1,.1);padding:10px;overflow:hidden}:host p{font-size:14px;line-height:160%}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ModelDialogFurnitureListComponent, selector: "dialog-furniture-list", inputs: ["list", "label", "subLabel", "showCopy", "showDelete", "showTotals", "iconCacheService", "settingsService", "googleTagManagerService", "messagesService"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModelDialogComponent, isStandalone: false, selector: "rp-error-dialog", ngImport: i0, template: "<div @slideInOut>\r\n  <div mat-dialog-content>\r\n    @if (!noProductsLoaded) {\r\n      @if (furniture.length > 0 || furnitureFixed.length > 0 || obsoleteFurniture.length > 0 || simpleFurniture.length > 0) {\r\n        <div class=\"content-wrapper\">\r\n          <div class=\"title-wrapper\" (click)=\"showLoaded = !showLoaded\">\r\n            <co-icon class=\"expand-icon\" [class.expanded]=\"showLoaded\"\r\n            [iconData]=\"iconService.getIcon(icon.ArrowPointDown)\"></co-icon>\r\n            <h3 [textContent]=\"'LOADED_PRODUCTS' | localize\"></h3>\r\n          </div>\r\n          @if (showLoaded) {\r\n            <div class=\"content\" @showHideContent>\r\n              @if (furniture.length > 0) {\r\n                <dialog-furniture-list\r\n                  [iconCacheService]=\"iconService\"\r\n                  [settingsService]=\"settingsService\"\r\n                  [googleTagManagerService]=\"googleTagManagerService\"\r\n                  [messagesService]=\"messagesService\"\r\n                  [list]=\"furniture\" [showDelete]=\"true\" [showCopy]=\"false\"\r\n                [showTotals]=\"true\"></dialog-furniture-list>\r\n              }\r\n              @if (furnitureFixed.length > 0) {\r\n                <dialog-furniture-list\r\n                  [iconCacheService]=\"iconService\"\r\n                  [settingsService]=\"settingsService\"\r\n                  [googleTagManagerService]=\"googleTagManagerService\"\r\n                  [messagesService]=\"messagesService\"\r\n                  [list]=\"furnitureFixed\" [label]=\"'LOADED_FIXED'\" [subLabel]=\"'LOADED_FIXED_DESC'\"\r\n                [showDelete]=\"true\" [showCopy]=\"false\"></dialog-furniture-list>\r\n              }\r\n              @if (obsoleteFurniture.length > 0) {\r\n                <dialog-furniture-list\r\n                  [iconCacheService]=\"iconService\"\r\n                  [settingsService]=\"settingsService\"\r\n                  [googleTagManagerService]=\"googleTagManagerService\"\r\n                  [messagesService]=\"messagesService\"\r\n                  [list]=\"obsoleteFurniture\" [label]=\"'OBSOLETE'\" [subLabel]=\"'OBSOLETE_DESC'\"\r\n                [showDelete]=\"true\" [showCopy]=\"false\"></dialog-furniture-list>\r\n              }\r\n              @if (simpleFurniture.length > 0) {\r\n                <dialog-furniture-list\r\n                  [iconCacheService]=\"iconService\"\r\n                  [settingsService]=\"settingsService\"\r\n                  [googleTagManagerService]=\"googleTagManagerService\"\r\n                  [messagesService]=\"messagesService\"\r\n                  [list]=\"simpleFurniture\" [showDelete]=\"true\"\r\n                [showCopy]=\"false\"></dialog-furniture-list>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (notLoaded.length > 0 || notFixedFurniture.length > 0) {\r\n        <div class=\"content-wrapper\">\r\n          <div class=\"title-wrapper\" (click)=\"showNotLoaded = !showNotLoaded\">\r\n            <co-icon class=\"expand-icon\" [class.expanded]=\"showLoaded\"\r\n            [iconData]=\"iconService.getIcon(icon.ArrowPointDown)\"></co-icon>\r\n            <h3 [textContent]=\"'NOT_LOADED_PRODUCTS' | localize\"></h3>\r\n          </div>\r\n          @if (showNotLoaded) {\r\n            <div class=\"content\" @showHideContent>\r\n              <dialog-furniture-list\r\n                [iconCacheService]=\"iconService\"\r\n                [settingsService]=\"settingsService\"\r\n                [googleTagManagerService]=\"googleTagManagerService\"\r\n                [messagesService]=\"messagesService\"\r\n                [list]=\"notLoaded\" [label]=\"'UNFIXED_PRODUCTS'\" [subLabel]=\"'UNFIXED_PRODUCTS_DESC'\" [showDelete]=\"false\"\r\n              [showCopy]=\"true\"></dialog-furniture-list>\r\n              <dialog-furniture-list\r\n                [iconCacheService]=\"iconService\"\r\n                [settingsService]=\"settingsService\"\r\n                [googleTagManagerService]=\"googleTagManagerService\"\r\n                [messagesService]=\"messagesService\"\r\n                [list]=\"notFixedFurniture\" [label]=\"'MODEL_CANNOT_BE_LOADED'\" [subLabel]=\"'MODEL_CANNOT_BE_LOADED_DESC'\"\r\n              [showDelete]=\"false\" [showCopy]=\"true\"></dialog-furniture-list>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n    @if (noProductsLoaded) {\r\n      @if (furniture.length === 0 && obsoleteFurniture.length === 0 && simpleFurniture.length === 0) {\r\n        <p\r\n        [textContent]=\"'NO_PRODUCTS_LOADED' | localize\"></p>\r\n      }\r\n    }\r\n\r\n  </div>\r\n  <button mat-button mat-dialog-close>OK</button>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;width:600px}:host .title-wrapper{display:flex;align-items:center;cursor:pointer}:host .content-wrapper{border:1px solid rgba(1,1,1,.1);padding:10px;overflow:hidden}:host p{font-size:14px;line-height:160%}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ModelDialogFurnitureListComponent, selector: "dialog-furniture-list", inputs: ["list", "label", "subLabel", "showCopy", "showDelete", "showTotals", "iconCacheService", "settingsService", "googleTagManagerService", "messagesService"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('slideInOut', [
                 transition(':leave', [
                     style({ transform: 'translateY(0%)', opacity: '1' }),
@@ -45603,7 +45693,7 @@ class ElementButtonsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ElementButtonsComponent, deps: [{ token: HomedecoratorIconCacheService }, { token: i0.ElementRef }, { token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ElementButtonsComponent, isStandalone: false, selector: "rp-element-buttons", inputs: { addButtons: "addButtons", customizeButtons: "customizeButtons", resizeButtons: "resizeButtons", elementPointer: "elementPointer", elementPosition: "elementPosition" }, outputs: { customizeButtonClicked: "customizeButtonClicked" }, host: { listeners: { "document:mouseup": "handledocumentMouseUp($event)", "document:mousemove": "handleDocumentMouseDown($event)" }, properties: { "class.disable-mouse": "this._disableMouse" } }, ngImport: i0, template: "@for (button of addButtons; track button) {\r\n  <div class=\"add-button-wrapper\" (click)=\"button.handler()\"\r\n    [style.left.px]=\"button.xPos\"\r\n    [style.top.px]=\"button.yPos\"\r\n    [style.opacity]=\"button.opacity\">\r\n    @if (showCaptionAddButton) {\r\n      <div class=\"add-button-label\" [textContent]=\"button.caption\"></div>\r\n    }\r\n    <button mat-mini-fab class=\"element-add-button\"\r\n      [style.width.px]=\"button.size\"\r\n      [style.height.px]=\"button.size\"\r\n      >\r\n      <co-icon [iconData]=\"iconCache.getIcon(icon.PlusRegular)\"></co-icon>\r\n    </button>\r\n  </div>\r\n}\r\n@for (button of customizeButtons; track button) {\r\n  <button mat-mini-fab (click)=\"customizeButtonClicked.emit()\"\r\n    class=\"element-add-button\"\r\n    [style.left.px]=\"button.xPos\"\r\n    [style.top.px]=\"button.yPos\"\r\n    [style.width.px]=\"button.size\"\r\n    [style.height.px]=\"button.size\"\r\n    [style.opacity]=\"button.opacity\"\r\n    >\r\n    <co-icon class=\"icon-color\" [iconData]=\"iconCache.getIcon(icon.Brush)\"></co-icon>\r\n  </button>\r\n}\r\n@for (button of resizeButtons; track button) {\r\n  <button mat-mini-fab (click)=\"button.handler()\"\r\n    class=\"element-add-button\"\r\n    [style.left.px]=\"button.xPos\"\r\n    [style.top.px]=\"button.yPos\"\r\n    [style.width.px]=\"button.size\"\r\n    [style.height.px]=\"button.size\"\r\n    [style.opacity]=\"button.opacity\"\r\n    >\r\n    <co-icon [iconData]=\"iconCache.getIcon(icon.Brush)\"></co-icon>\r\n  </button>\r\n}\r\n", styles: [":host{pointer-events:all}:host.disable-mouse{pointer-events:none}.add-button-wrapper{display:flex;flex-direction:column;position:absolute;cursor:pointer}.add-button-label{color:#fff;transform:translate(-50%,-35px);text-shadow:-1px 0 2px black,0 1px 2px black,1px 0 2px black,0 -1px 2px black}.element-add-button{border-radius:50%;cursor:pointer;flex-shrink:0;position:absolute;min-height:30px;min-width:30px;height:35px;width:35px;max-height:30px;max-width:30px;background:#17253391;transform:translate(-15px,-15px);box-shadow:0 0 0 5px #00000012}.element-add-button ::ng-deep co-icon{width:16px;height:16px}.element-add-button ::ng-deep co-icon svg{fill:#fff}.element-bullet{pointer-events:none;position:absolute;border-radius:50%;height:10px;width:10px;cursor:default;background:#2c67ff;transform:translate(-5px,-5px)}:host ::ng-deep .mat-mdc-mini-fab .mat-button-wrapper{padding:0;display:flex;line-height:0px;align-items:center;justify-content:center}:host ::ng-deep .mat-icon{height:30px;width:30px}\n"], dependencies: [{ kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ElementButtonsComponent, isStandalone: false, selector: "rp-element-buttons", inputs: { addButtons: "addButtons", customizeButtons: "customizeButtons", resizeButtons: "resizeButtons", elementPointer: "elementPointer", elementPosition: "elementPosition" }, outputs: { customizeButtonClicked: "customizeButtonClicked" }, host: { listeners: { "document:mouseup": "handledocumentMouseUp($event)", "document:mousemove": "handleDocumentMouseDown($event)" }, properties: { "class.disable-mouse": "this._disableMouse" } }, ngImport: i0, template: "@for (button of addButtons; track button) {\r\n  <div class=\"add-button-wrapper\" (click)=\"button.handler()\"\r\n    [style.left.px]=\"button.xPos\"\r\n    [style.top.px]=\"button.yPos\"\r\n    [style.opacity]=\"button.opacity\">\r\n    @if (showCaptionAddButton) {\r\n      <div class=\"add-button-label\" [textContent]=\"button.caption\"></div>\r\n    }\r\n    <button mat-mini-fab class=\"element-add-button\"\r\n      [style.width.px]=\"button.size\"\r\n      [style.height.px]=\"button.size\"\r\n      >\r\n      <co-icon [iconData]=\"iconCache.getIcon(icon.PlusRegular)\"></co-icon>\r\n    </button>\r\n  </div>\r\n}\r\n@for (button of customizeButtons; track button) {\r\n  <button mat-mini-fab (click)=\"customizeButtonClicked.emit()\"\r\n    class=\"element-add-button\"\r\n    [style.left.px]=\"button.xPos\"\r\n    [style.top.px]=\"button.yPos\"\r\n    [style.width.px]=\"button.size\"\r\n    [style.height.px]=\"button.size\"\r\n    [style.opacity]=\"button.opacity\"\r\n    >\r\n    <co-icon class=\"icon-color\" [iconData]=\"iconCache.getIcon(icon.Brush)\"></co-icon>\r\n  </button>\r\n}\r\n@for (button of resizeButtons; track button) {\r\n  <button mat-mini-fab (click)=\"button.handler()\"\r\n    class=\"element-add-button\"\r\n    [style.left.px]=\"button.xPos\"\r\n    [style.top.px]=\"button.yPos\"\r\n    [style.width.px]=\"button.size\"\r\n    [style.height.px]=\"button.size\"\r\n    [style.opacity]=\"button.opacity\"\r\n    >\r\n    <co-icon [iconData]=\"iconCache.getIcon(icon.Brush)\"></co-icon>\r\n  </button>\r\n}\r\n", styles: [":host{pointer-events:all}:host.disable-mouse{pointer-events:none}.add-button-wrapper{display:flex;flex-direction:column;position:absolute;cursor:pointer}.add-button-label{color:#fff;transform:translate(-50%,-35px);text-shadow:-1px 0 2px black,0 1px 2px black,1px 0 2px black,0 -1px 2px black}.element-add-button{border-radius:50%;cursor:pointer;flex-shrink:0;position:absolute;min-height:30px;min-width:30px;height:35px;width:35px;max-height:30px;max-width:30px;background:#17253391;transform:translate(-15px,-15px);box-shadow:0 0 0 5px #00000012}.element-add-button ::ng-deep co-icon{width:16px;height:16px}.element-add-button ::ng-deep co-icon svg{fill:#fff}.element-bullet{pointer-events:none;position:absolute;border-radius:50%;height:10px;width:10px;cursor:default;background:#2c67ff;transform:translate(-5px,-5px)}:host ::ng-deep .mat-mdc-mini-fab .mat-button-wrapper{padding:0;display:flex;line-height:0px;align-items:center;justify-content:center}:host ::ng-deep .mat-icon{height:30px;width:30px}\n"], dependencies: [{ kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ElementButtonsComponent, decorators: [{
             type: Component,
@@ -45642,7 +45732,7 @@ class ElementSliderComponent {
         return this._rotationService.sliderValue = event.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ElementSliderComponent, deps: [{ token: RotationService }, { token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ElementSliderComponent, isStandalone: false, selector: "rp-element-slider", ngImport: i0, template: "@if (settingsService.settings.options.cameraPositionFixedAndScrollbar) {\r\n  <div class=\"slidecontainer\">\r\n    <mat-slider class=\"slider\" min=\"-180\" max=\"180\" [(ngModel)]=\"sliderValue\" [step]=\"step\" (input)=\"getSliderValue($event)\"></mat-slider>\r\n  </div>\r\n}\r\n", styles: [".slidecontainer{width:40%;position:absolute;left:30%;top:85%;z-index:99}.slider{appearance:none;width:100%;height:25px;background:#d3d3d3;outline:none;opacity:.7;transition:opacity .2s;border-radius:25px}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;background:#0094ff;cursor:pointer;border-radius:25px}::ng-deep .mat-mdc-slider.mat-slider-horizontal .mat-slider-wrapper{top:12px}::ng-deep .mat-mdc-slider.mat-slider-horizontal .mat-slider-track-wrapper{height:0;border-radius:0}::ng-deep .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb{background:#0094ff}\n"], dependencies: [{ kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ElementSliderComponent, isStandalone: false, selector: "rp-element-slider", ngImport: i0, template: "@if (settingsService.settings.options.cameraPositionFixedAndScrollbar) {\r\n  <div class=\"slidecontainer\">\r\n    <mat-slider class=\"slider\" min=\"-180\" max=\"180\" [(ngModel)]=\"sliderValue\" [step]=\"step\" (input)=\"getSliderValue($event)\"></mat-slider>\r\n  </div>\r\n}\r\n", styles: [".slidecontainer{width:40%;position:absolute;left:30%;top:85%;z-index:99}.slider{appearance:none;width:100%;height:25px;background:#d3d3d3;outline:none;opacity:.7;transition:opacity .2s;border-radius:25px}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;background:#0094ff;cursor:pointer;border-radius:25px}::ng-deep .mat-mdc-slider.mat-slider-horizontal .mat-slider-wrapper{top:12px}::ng-deep .mat-mdc-slider.mat-slider-horizontal .mat-slider-track-wrapper{height:0;border-radius:0}::ng-deep .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb{background:#0094ff}\n"], dependencies: [{ kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ElementSliderComponent, decorators: [{
             type: Component,
@@ -47318,7 +47408,7 @@ class LandingScreenModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LandingScreenModalComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }, { token: MessageBusService }, { token: ScreenSizeAnalysisService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LandingScreenModalComponent, isStandalone: false, selector: "rp-landing-screen-modal", ngImport: i0, template: "<h1 mat-dialog-title class=\"mat-headline-5\">{{ 'HOMEDECOHUB' | localize | uppercase }}</h1>\r\n\r\n<div mat-dialog-content class=\"dialog-content\" fxLayout=\"column\" cdkTrapFocus>\r\n  <div class=\"actions\" fxLayout=\"row\" fxLayoutAlign=\"space-around flex-start\">\r\n\r\n    @if (desktopSizeScreen) {\r\n      <div class=\"col\">\r\n        <button mat-raised-button color=\"primary\" (click)=\"startFromScratch()\">\r\n          <span class=\"icon-wrapper\"><co-icon [iconData]=\"iconService.getIcon(icons.PencilLight)\"></co-icon></span>\r\n          <span>{{ 'CREATE_NEW_PLAN_FROM_SCRATCH' | localize }}</span>\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n    @if (desktopSizeScreen && showUploadDiagram) {\r\n      <div class=\"col\">\r\n        <button mat-raised-button color=\"primary\" (click)=\"fileInput.click()\">\r\n          <span class=\"icon-wrapper\"><co-icon [iconData]=\"iconService.getIcon(icons.UploadLight)\"></co-icon></span>\r\n          <span>{{ 'CREATE_FROM_DIAGRAM' | localize }}</span>\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"col\">\r\n      <button mat-raised-button color=\"primary\" (click)=\"openOpenDialog()\">\r\n        <span class=\"icon-wrapper\"><co-icon [iconData]=\"iconService.getIcon(icons.CloudArrowUp)\"></co-icon></span>\r\n        <span>{{ 'OPEN_SAVED_ROOM_PLAN' | localize }}</span>\r\n      </button>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"library\" fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\">\r\n    @if (desktopSizeScreen) {\r\n      <div class=\"col left\" fxFlex=\"grow\">\r\n        <h2 class=\"mat-subtitle-1\" [textContent]=\"'START_WITH_A_ROOM_SHAPE' | localize\"></h2>\r\n        <mat-grid-list cols=\"2\" rowHeight=\"115px\">\r\n          @for (room of floorPlans | filter:'show':true; track room) {\r\n            <mat-grid-tile>\r\n              <button mat-button (click)=\"startWithRoom(room, true)\">\r\n                <img [src]=\"assetPath + room.thumbnail\">\r\n              </button>\r\n            </mat-grid-tile>\r\n          }\r\n        </mat-grid-list>\r\n      </div>\r\n    }\r\n    <div class=\"col\" [class.right]=\"desktopSizeScreen\" fxFlex=\"grow\">\r\n      <h2 class=\"mat-subtitle-1\">\r\n        {{ 'OPEN_A_COMPLETE_ROOM' | localize }}\r\n      </h2>\r\n      <mat-grid-list [cols]=\"desktopSizeScreen ? 2 : 3\" rowHeight=\"115px\">\r\n        @for (preset of presets | filter:'show':true; track preset) {\r\n          <mat-grid-tile>\r\n            <button mat-button (click)=\"startWithRoom(preset)\">\r\n              <img [src]=\"assetPath + preset.thumbnail\">\r\n            </button>\r\n          </mat-grid-tile>\r\n        }\r\n      </mat-grid-list>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<input\r\n  type=\"file\"\r\n  id=\"fileInput\"\r\n  (change)=\"validateImportFile($event)\"\r\n  style=\"display: none\"\r\n  #fileInput\r\n  >\r\n", styles: [":host{width:inherit;height:inherit;background:#fff;display:flex;flex-direction:column}.mat-headline-5{text-align:center;line-height:1;font-weight:600;margin:0 0 16px}.mat-mdc-dialog-content{padding:0 15px;margin:0}:host img{max-width:100%}.col{height:100%;width:33%}.icon-wrapper{display:inline-block;margin-right:10px}.actions{margin-top:8px;margin-bottom:24px;min-height:50px;gap:10px}.actions>.col{height:100%}.actions ::ng-deep button{height:50px;width:100%;background:#da9803;padding:0 10px}.actions ::ng-deep button span{font-size:13px}.actions ::ng-deep button co-icon ::ng-deep{width:20px;height:20px}.actions ::ng-deep button co-icon ::ng-deep svg{fill:#fff}.library ::ng-deep button{height:100%;width:100%}.library .mat-subtitle-1{text-align:center}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3$4.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$4.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: FilterPipe, name: "filter" }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LandingScreenModalComponent, isStandalone: false, selector: "rp-landing-screen-modal", ngImport: i0, template: "<h1 mat-dialog-title class=\"mat-headline-5\">{{ 'HOMEDECOHUB' | localize | uppercase }}</h1>\r\n\r\n<div mat-dialog-content class=\"dialog-content\" fxLayout=\"column\" cdkTrapFocus>\r\n  <div class=\"actions\" fxLayout=\"row\" fxLayoutAlign=\"space-around flex-start\">\r\n\r\n    @if (desktopSizeScreen) {\r\n      <div class=\"col\">\r\n        <button mat-raised-button color=\"primary\" (click)=\"startFromScratch()\">\r\n          <span class=\"icon-wrapper\"><co-icon [iconData]=\"iconService.getIcon(icons.PencilLight)\"></co-icon></span>\r\n          <span>{{ 'CREATE_NEW_PLAN_FROM_SCRATCH' | localize }}</span>\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n    @if (desktopSizeScreen && showUploadDiagram) {\r\n      <div class=\"col\">\r\n        <button mat-raised-button color=\"primary\" (click)=\"fileInput.click()\">\r\n          <span class=\"icon-wrapper\"><co-icon [iconData]=\"iconService.getIcon(icons.UploadLight)\"></co-icon></span>\r\n          <span>{{ 'CREATE_FROM_DIAGRAM' | localize }}</span>\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"col\">\r\n      <button mat-raised-button color=\"primary\" (click)=\"openOpenDialog()\">\r\n        <span class=\"icon-wrapper\"><co-icon [iconData]=\"iconService.getIcon(icons.CloudArrowUp)\"></co-icon></span>\r\n        <span>{{ 'OPEN_SAVED_ROOM_PLAN' | localize }}</span>\r\n      </button>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"library\" fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\">\r\n    @if (desktopSizeScreen) {\r\n      <div class=\"col left\" fxFlex=\"grow\">\r\n        <h2 class=\"mat-subtitle-1\" [textContent]=\"'START_WITH_A_ROOM_SHAPE' | localize\"></h2>\r\n        <mat-grid-list cols=\"2\" rowHeight=\"115px\">\r\n          @for (room of floorPlans | filter:'show':true; track room) {\r\n            <mat-grid-tile>\r\n              <button mat-button (click)=\"startWithRoom(room, true)\">\r\n                <img [src]=\"assetPath + room.thumbnail\">\r\n              </button>\r\n            </mat-grid-tile>\r\n          }\r\n        </mat-grid-list>\r\n      </div>\r\n    }\r\n    <div class=\"col\" [class.right]=\"desktopSizeScreen\" fxFlex=\"grow\">\r\n      <h2 class=\"mat-subtitle-1\">\r\n        {{ 'OPEN_A_COMPLETE_ROOM' | localize }}\r\n      </h2>\r\n      <mat-grid-list [cols]=\"desktopSizeScreen ? 2 : 3\" rowHeight=\"115px\">\r\n        @for (preset of presets | filter:'show':true; track preset) {\r\n          <mat-grid-tile>\r\n            <button mat-button (click)=\"startWithRoom(preset)\">\r\n              <img [src]=\"assetPath + preset.thumbnail\">\r\n            </button>\r\n          </mat-grid-tile>\r\n        }\r\n      </mat-grid-list>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<input\r\n  type=\"file\"\r\n  id=\"fileInput\"\r\n  (change)=\"validateImportFile($event)\"\r\n  style=\"display: none\"\r\n  #fileInput\r\n  >\r\n", styles: [":host{width:inherit;height:inherit;background:#fff;display:flex;flex-direction:column}.mat-headline-5{text-align:center;line-height:1;font-weight:600;margin:0 0 16px}.mat-mdc-dialog-content{padding:0 15px;margin:0}:host img{max-width:100%}.col{height:100%;width:33%}.icon-wrapper{display:inline-block;margin-right:10px}.actions{margin-top:8px;margin-bottom:24px;min-height:50px;gap:10px}.actions>.col{height:100%}.actions ::ng-deep button{height:50px;width:100%;background:#da9803;padding:0 10px}.actions ::ng-deep button span{font-size:13px}.actions ::ng-deep button co-icon ::ng-deep{width:20px;height:20px}.actions ::ng-deep button co-icon ::ng-deep svg{fill:#fff}.library ::ng-deep button{height:100%;width:100%}.library .mat-subtitle-1{text-align:center}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3$3.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$3.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: FilterPipe, name: "filter" }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LandingScreenModalComponent, decorators: [{
             type: Component,
@@ -47511,7 +47601,7 @@ class OpenDialogComponent {
         this._dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpenDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: LocalStorageService }, { token: i1$2.MatDialogRef }, { token: i1$2.MatDialog }, { token: MessageBusService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: OpenDialogComponent, isStandalone: false, selector: "rp-open-dialog", viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<h1 mat-dialog-title>{{'OPEN_A_PLAN' | localize}}</h1>\r\n<div mat-dialog-content class=\"dialog-wrapper\" cdkTrapFocus>\r\n  <mat-nav-list>\r\n    <mat-list-item (click)=\"loadFromCloud()\">\r\n      <h4 mat-line><strong>{{'LOAD_FROM_CLOUD' | localize}}</strong></h4>\r\n      <p mat-line class=\"item-description\">{{'ENTER_AN_ID_TO_LOAD_A_PLAN_STORED_ON_CLOUD' | localize}}</p>\r\n    </mat-list-item>\r\n    <mat-list-item (click)=\"fileInput.click()\">\r\n      <h4 mat-line><strong>{{'LOAD_FROM_DISK' | localize}}</strong></h4>\r\n      <p mat-line class=\"item-description\">{{'LOAD_A_PLAN_STORED_ON_YOUR_COMPUTER' | localize}}</p>\r\n    </mat-list-item>\r\n    @if (storageService.saveStateExists) {\r\n      <mat-list-item (click)=\"openLastState()\">\r\n        <h4 mat-line><strong>{{'RECOVER_LAST_PROJECT' | localize}}</strong></h4>\r\n        <p mat-line class=\"item-description\">{{'RECOVER_LAST_PROJECT_DESC' | localize}}</p>\r\n      </mat-list-item>\r\n    }\r\n  </mat-nav-list>\r\n</div>\r\n<input\r\n  type=\"file\"\r\n  (change)=\"readSchema($event)\"\r\n  style=\"display: none\"\r\n  #fileInput\r\n  >\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3$4.MatLine, selector: "[mat-line], [matLine]" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: OpenDialogComponent, isStandalone: false, selector: "rp-open-dialog", viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<h1 mat-dialog-title>{{'OPEN_A_PLAN' | localize}}</h1>\r\n<div mat-dialog-content class=\"dialog-wrapper\" cdkTrapFocus>\r\n  <mat-nav-list>\r\n    <mat-list-item (click)=\"loadFromCloud()\">\r\n      <h4 mat-line><strong>{{'LOAD_FROM_CLOUD' | localize}}</strong></h4>\r\n      <p mat-line class=\"item-description\">{{'ENTER_AN_ID_TO_LOAD_A_PLAN_STORED_ON_CLOUD' | localize}}</p>\r\n    </mat-list-item>\r\n    <mat-list-item (click)=\"fileInput.click()\">\r\n      <h4 mat-line><strong>{{'LOAD_FROM_DISK' | localize}}</strong></h4>\r\n      <p mat-line class=\"item-description\">{{'LOAD_A_PLAN_STORED_ON_YOUR_COMPUTER' | localize}}</p>\r\n    </mat-list-item>\r\n    @if (storageService.saveStateExists) {\r\n      <mat-list-item (click)=\"openLastState()\">\r\n        <h4 mat-line><strong>{{'RECOVER_LAST_PROJECT' | localize}}</strong></h4>\r\n        <p mat-line class=\"item-description\">{{'RECOVER_LAST_PROJECT_DESC' | localize}}</p>\r\n      </mat-list-item>\r\n    }\r\n  </mat-nav-list>\r\n</div>\r\n<input\r\n  type=\"file\"\r\n  (change)=\"readSchema($event)\"\r\n  style=\"display: none\"\r\n  #fileInput\r\n  >\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3$3.MatLine, selector: "[mat-line], [matLine]" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpenDialogComponent, decorators: [{
             type: Component,
@@ -47540,7 +47630,7 @@ class DownloadDialogComponent {
         this._dialogRef.close(DownloadType.DownloadNew);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DownloadDialogComponent, deps: [{ token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DownloadDialogComponent, isStandalone: false, selector: "rp-download-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{'DOWNLOAD' | localize}}</h1>\r\n<div mat-dialog-content class=\"dialog-wrapper\" cdkTrapFocus>\r\n  <mat-nav-list>\r\n    <mat-list-item (click)=\"download()\">\r\n      <h4 mat-line><strong>{{'DOWNLOAD_A_COPY' | localize}}</strong></h4>\r\n      <p mat-line class=\"item-description\">{{'DOWNLOAD_THE_PLAN_TO_YOUR_DEVICE' | localize}}</p>\r\n    </mat-list-item>\r\n    <mat-list-item (click)=\"downloadNew()\">\r\n      <h4 mat-line><strong>{{'DOWNLOAD_A_COPY_COPY' | localize}}</strong></h4>\r\n      <p mat-line class=\"item-description\">{{'DOWNLOAD_THE_PLAN_TO_YOUR_DEVICE_COPY' | localize}}</p>\r\n    </mat-list-item>\r\n  </mat-nav-list>\r\n</div>\r\n", styles: [":host .mat-mdc-dialog-content{margin:0;overflow:hidden}:host .mat-mdc-nav-list{display:flex;flex-direction:column}:host .mat-mdc-nav-list .mat-mdc-list-item:not(:last-child){margin-bottom:30px}.mat-mdc-dialog-actions{margin-bottom:0}.item-description{white-space:inherit!important}\n"], dependencies: [{ kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3$4.MatLine, selector: "[mat-line], [matLine]" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DownloadDialogComponent, isStandalone: false, selector: "rp-download-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{'DOWNLOAD' | localize}}</h1>\r\n<div mat-dialog-content class=\"dialog-wrapper\" cdkTrapFocus>\r\n  <mat-nav-list>\r\n    <mat-list-item (click)=\"download()\">\r\n      <h4 mat-line><strong>{{'DOWNLOAD_A_COPY' | localize}}</strong></h4>\r\n      <p mat-line class=\"item-description\">{{'DOWNLOAD_THE_PLAN_TO_YOUR_DEVICE' | localize}}</p>\r\n    </mat-list-item>\r\n    <mat-list-item (click)=\"downloadNew()\">\r\n      <h4 mat-line><strong>{{'DOWNLOAD_A_COPY_COPY' | localize}}</strong></h4>\r\n      <p mat-line class=\"item-description\">{{'DOWNLOAD_THE_PLAN_TO_YOUR_DEVICE_COPY' | localize}}</p>\r\n    </mat-list-item>\r\n  </mat-nav-list>\r\n</div>\r\n", styles: [":host .mat-mdc-dialog-content{margin:0;overflow:hidden}:host .mat-mdc-nav-list{display:flex;flex-direction:column}:host .mat-mdc-nav-list .mat-mdc-list-item:not(:last-child){margin-bottom:30px}.mat-mdc-dialog-actions{margin-bottom:0}.item-description{white-space:inherit!important}\n"], dependencies: [{ kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3$3.MatLine, selector: "[mat-line], [matLine]" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DownloadDialogComponent, decorators: [{
             type: Component,
@@ -47701,7 +47791,7 @@ class SaveDialogComponent {
                 }
             </mat-nav-list>
         </div>      
-    `, isInline: true, styles: [":host .mat-mdc-dialog-content{margin:0;overflow:hidden}:host .mat-mdc-nav-list{display:flex;flex-direction:column}:host .mat-mdc-nav-list .mat-mdc-list-item:not(:last-child){margin-bottom:30px}:host .download-button{box-shadow:none;background-color:#3760a1;display:flex;align-items:center;justify-content:center;align-self:flex-end}:host .download-button ::ng-deep co-icon [fill]{fill:#fff}.mat-mdc-dialog-actions{margin-bottom:0}.item-description{white-space:inherit!important}\n"], dependencies: [{ kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3$4.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    `, isInline: true, styles: [":host .mat-mdc-dialog-content{margin:0;overflow:hidden}:host .mat-mdc-nav-list{display:flex;flex-direction:column}:host .mat-mdc-nav-list .mat-mdc-list-item:not(:last-child){margin-bottom:30px}:host .download-button{box-shadow:none;background-color:#3760a1;display:flex;align-items:center;justify-content:center;align-self:flex-end}:host .download-button ::ng-deep co-icon [fill]{fill:#fff}.mat-mdc-dialog-actions{margin-bottom:0}.item-description{white-space:inherit!important}\n"], dependencies: [{ kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3$3.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SaveDialogComponent, decorators: [{
             type: Component,
@@ -47831,7 +47921,7 @@ class DrawDialogComponent {
         this.customerInputLenght = this.inputLength.nativeElement.value;
     }
     handleMouseDown(event) {
-        if (this.draftingMode === 'movement') {
+        if (event.button === 2) { // right mouse button -> drag
             this.isDragging = true;
             this.dragStart.x = this.getEventLocation(event).x / this.cameraZoom - this.cameraOffset.x;
             this.dragStart.y = this.getEventLocation(event).y / this.cameraZoom - this.cameraOffset.y;
@@ -47844,11 +47934,9 @@ class DrawDialogComponent {
         }
     }
     handleMouseMove(event) {
-        if (this.draftingMode === 'movement') {
-            if (this.isDragging) {
-                this.cameraOffset.x = this.getEventLocation(event).x / this.cameraZoom - this.dragStart.x;
-                this.cameraOffset.y = this.getEventLocation(event).y / this.cameraZoom - this.dragStart.y;
-            }
+        if (this.isDragging) {
+            this.cameraOffset.x = this.getEventLocation(event).x / this.cameraZoom - this.dragStart.x;
+            this.cameraOffset.y = this.getEventLocation(event).y / this.cameraZoom - this.dragStart.y;
         }
     }
     handleMouseUp(event) {
@@ -47858,22 +47946,6 @@ class DrawDialogComponent {
     }
     handleMouseLeave(event) {
     }
-    clickingZoom(option) {
-        const zoomIn = -0.5;
-        const zoomOut = 0.5;
-        const zoomReset = 1;
-        if (option === 'in') {
-            this.cameraZoom -= zoomIn;
-        }
-        else if (option === 'out') {
-            this.cameraZoom -= zoomOut;
-        }
-        else if (option === 'reset') {
-            this.cameraZoom = zoomReset;
-        }
-        this.cameraZoom = Math.min(this.cameraZoom, this.maxZoom);
-        this.cameraZoom = Math.max(this.cameraZoom, this.minZoom);
-    }
     handleMouseWheel(event) {
         const zoomAmount = event.deltaY * this.scrollSensitivity;
         if (!this.isDragging) {
@@ -47884,6 +47956,9 @@ class DrawDialogComponent {
             this.cameraZoom = Math.max(this.cameraZoom, this.minZoom);
         }
     }
+    handleContextMenu(event) {
+        return false;
+    }
     getEventLocation(e) {
         if (e.touches && e.touches.length === 1) {
             return { x: e.touches[0].clientX, y: e.touches[0].clientY };
@@ -47967,11 +48042,11 @@ class DrawDialogComponent {
         return new Vector2(canvasX, canvasY);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DrawDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }, { token: i1$2.MatDialog }, { token: MessageBusService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DrawDialogComponent, isStandalone: false, selector: "rp-draw-dialog", viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["drawCanvas"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputLength", first: true, predicate: ["inputLength"], descendants: true }, { propertyName: "hiddenImage", first: true, predicate: ["hiddenImage"], descendants: true }], ngImport: i0, template: "<div class=\"model-header\">\r\n  <h1 mat-dialog-title>{{ 'OPEN_A_DIAGRAM' | localize }}</h1>\r\n  <button (click)=\"cancelAndReset()\" class=\"close-button\">\r\n    <mat-icon class=\"homedecorator-material-icons\">close</mat-icon>\r\n  </button>\r\n</div>\r\n<div class=\"top-bar-container\">\r\n  @if (draftingMode === 'movement') {\r\n    <div class=\"zoom-button-containers\">\r\n      <button (click)=\"clickingZoom('in')\">\r\n        <mat-icon class=\"homedecorator-material-icons\">zoom_in</mat-icon>\r\n      </button>\r\n      <button (click)=\"clickingZoom('reset')\">\r\n        <mat-icon class=\"homedecorator-material-icons\">all_out</mat-icon>\r\n      </button>\r\n      <button (click)=\"clickingZoom('out')\">\r\n        <mat-icon class=\"homedecorator-material-icons\">zoom_out</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n<div class=\"main-button-container\">\r\n  <mat-button-toggle-group\r\n    class=\"mode-toggle\"\r\n    (change)=\"setModus($event.value)\"\r\n    [value]=\"draftingMode\">\r\n    <mat-button-toggle [value]=\"'movement'\" [matTooltip]=\"'Zoom / verplaats modus'\">\r\n      <mat-icon svgIcon=\"hand-pointer\"></mat-icon>\r\n    </mat-button-toggle>\r\n    <mat-button-toggle [value]=\"'scaling'\" [matTooltip]=\"'Maak referentie meting'\">\r\n      <mat-icon svgIcon=\"pen-ruler\"></mat-icon>\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<div class=\"canvas-wrapper\">\r\n  <canvas\r\n    #drawCanvas\r\n    (mousedown)=\"handleMouseDown($event)\"\r\n    (mousemove)=\"handleMouseMove($event)\"\r\n    (mouseup)=\"handleMouseUp($event)\"\r\n    (mouseleave)=\"handleMouseLeave($event)\"\r\n    (wheel)=\"handleMouseWheel($event)\"\r\n  ></canvas>\r\n</div>\r\n\r\n<div class=\"modal-footer\">\r\n  @if (draftingMode === 'scaling') {\r\n    <div class=\"reference-input-container\">\r\n      <div class=\"input-button-container\">\r\n        <input\r\n          (change)=\"updateUserValue()\"\r\n          [value]=\"customerInputLenght\"\r\n          #inputLength\r\n          type=\"number\"\r\n          placeholder=\"{{ 'PDF_REFERENCE_PLACEHOLDER' | localize}}\"\r\n          [attr.disabled]=\"this.measurePoints.length === 0 ? '' : null\"\r\n          >\r\n          <button (click)=\"resetPoints()\" title=\"Reset referentie meting\">\r\n            <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\r\n          </button>\r\n        </div>\r\n        <p class=\"helper-text\">{{ 'PDF_REFERENCE_HELPER' | localize }}</p>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"save-cancel-button-container\">\r\n      @if (draftingMode === 'scaling') {\r\n        <button (click)=\"submitLength()\" title=\"Opslaan\">\r\n          <mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon>\r\n          <span>{{'NEXT' | localize}}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <img #hiddenImage src=\"\" style=\"display: none;\">\r\n", styles: ["canvas{position:relative}button{cursor:pointer;color:#fff;background:#da9803;border:1px solid #da9803;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}button:hover{background:#da9803;color:#fff}.main-button-container{display:flex;justify-content:center;margin-bottom:15px}.main-button-container .mat-button-toggle-checked{background:#da9803;color:#fff}.model-header{display:flex;justify-content:space-between;align-items:start}.model-header .close-button{background:none;color:#333;border:none;padding:0}.modal-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:30px}.reference-input-container .input-button-container{display:flex;align-items:center}.reference-input-container .input-button-container input{min-width:285px;border:1px solid #f7f7f9;border-radius:3px;height:35px;line-height:35px;box-sizing:border-box;padding:10px}.reference-input-container .input-button-container input:disabled{background:#f7f7f9;cursor:default}.reference-input-container .input-button-container button{border:none;display:inline-block}.reference-input-container .helper-text{font-size:13px;font-style:italic;margin:0;padding:0;display:block}.zoom-button-containers{display:flex;justify-items:center;justify-content:right}.zoom-button-containers button{margin:0 5px}.save-cancel-button-container{display:flex;justify-content:center;justify-items:center}.save-cancel-button-container button{margin:3px 10px;padding:8px 15px}.save-cancel-button-container button .homedecorator-material-icons{font-size:18px}.save-cancel-button-container button span{line-height:18px;font-size:15px}.canvas-wrapper{overflow:hidden;max-height:60vh;max-width:80vw}\n"], dependencies: [{ kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DrawDialogComponent, isStandalone: false, selector: "rp-draw-dialog", viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["drawCanvas"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputLength", first: true, predicate: ["inputLength"], descendants: true }, { propertyName: "hiddenImage", first: true, predicate: ["hiddenImage"], descendants: true }], ngImport: i0, template: "<div class=\"model-header\">\r\n  <h1 mat-dialog-title>{{ 'OPEN_A_DIAGRAM' | localize }}</h1>\r\n  <button (click)=\"cancelAndReset()\" class=\"close-button\">\r\n    <mat-icon class=\"homedecorator-material-icons\">close</mat-icon>\r\n  </button>\r\n</div>\r\n<div class=\"canvas-wrapper\">\r\n  <canvas\r\n    #drawCanvas\r\n    (mousedown)=\"handleMouseDown($event)\"\r\n    (mousemove)=\"handleMouseMove($event)\"\r\n    (mouseup)=\"handleMouseUp($event)\"\r\n    (mouseleave)=\"handleMouseLeave($event)\"\r\n    (wheel)=\"handleMouseWheel($event)\"\r\n    (contextmenu)=\"handleContextMenu($event)\"\r\n  ></canvas>\r\n</div>\r\n\r\n<div class=\"modal-footer\">\r\n  @if (draftingMode === 'scaling') {\r\n    <div class=\"reference-input-container\">\r\n      <div class=\"input-button-container\">\r\n        <input\r\n          (change)=\"updateUserValue()\"\r\n          [value]=\"customerInputLenght\"\r\n          #inputLength\r\n          type=\"number\"\r\n          placeholder=\"{{ 'PDF_REFERENCE_PLACEHOLDER' | localize}}\"\r\n          [attr.disabled]=\"this.measurePoints.length === 0 ? '' : null\"\r\n          >\r\n          <button (click)=\"resetPoints()\" title=\"Reset referentie meting\">\r\n            <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\r\n          </button>\r\n        </div>\r\n        <p class=\"helper-text\">{{ 'PDF_REFERENCE_HELPER' | localize }}</p>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"save-cancel-button-container\">\r\n      @if (draftingMode === 'scaling') {\r\n        <button (click)=\"submitLength()\" title=\"Opslaan\">\r\n          <mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon>\r\n          <span>{{'NEXT' | localize}}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <img #hiddenImage src=\"\" style=\"display: none;\">\r\n", styles: ["canvas{position:relative}button{cursor:pointer;color:#fff;background:#da9803;border:1px solid #da9803;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}button:hover{background:#da9803;color:#fff}.main-button-container{display:flex;justify-content:center;margin-bottom:15px}.main-button-container .mat-button-toggle-checked{background:#da9803;color:#fff}.model-header{display:flex;justify-content:space-between;align-items:start}.model-header .close-button{background:none;color:#333;border:none;padding:0}.modal-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:30px}.reference-input-container .input-button-container{display:flex;align-items:center}.reference-input-container .input-button-container input{min-width:285px;border:1px solid #f7f7f9;border-radius:3px;height:35px;line-height:35px;box-sizing:border-box;padding:10px}.reference-input-container .input-button-container input:disabled{background:#f7f7f9;cursor:default}.reference-input-container .input-button-container button{border:none;display:inline-block}.reference-input-container .helper-text{font-size:13px;font-style:italic;margin:0;padding:0;display:block}.zoom-button-containers{display:flex;justify-items:center;justify-content:right}.zoom-button-containers button{margin:0 5px}.save-cancel-button-container{display:flex;justify-content:center;justify-items:center}.save-cancel-button-container button{margin:3px 10px;padding:8px 15px}.save-cancel-button-container button .homedecorator-material-icons{font-size:18px}.save-cancel-button-container button span{line-height:18px;font-size:15px}.canvas-wrapper{overflow:hidden;max-height:60vh;max-width:80vw}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DrawDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rp-draw-dialog', standalone: false, template: "<div class=\"model-header\">\r\n  <h1 mat-dialog-title>{{ 'OPEN_A_DIAGRAM' | localize }}</h1>\r\n  <button (click)=\"cancelAndReset()\" class=\"close-button\">\r\n    <mat-icon class=\"homedecorator-material-icons\">close</mat-icon>\r\n  </button>\r\n</div>\r\n<div class=\"top-bar-container\">\r\n  @if (draftingMode === 'movement') {\r\n    <div class=\"zoom-button-containers\">\r\n      <button (click)=\"clickingZoom('in')\">\r\n        <mat-icon class=\"homedecorator-material-icons\">zoom_in</mat-icon>\r\n      </button>\r\n      <button (click)=\"clickingZoom('reset')\">\r\n        <mat-icon class=\"homedecorator-material-icons\">all_out</mat-icon>\r\n      </button>\r\n      <button (click)=\"clickingZoom('out')\">\r\n        <mat-icon class=\"homedecorator-material-icons\">zoom_out</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n<div class=\"main-button-container\">\r\n  <mat-button-toggle-group\r\n    class=\"mode-toggle\"\r\n    (change)=\"setModus($event.value)\"\r\n    [value]=\"draftingMode\">\r\n    <mat-button-toggle [value]=\"'movement'\" [matTooltip]=\"'Zoom / verplaats modus'\">\r\n      <mat-icon svgIcon=\"hand-pointer\"></mat-icon>\r\n    </mat-button-toggle>\r\n    <mat-button-toggle [value]=\"'scaling'\" [matTooltip]=\"'Maak referentie meting'\">\r\n      <mat-icon svgIcon=\"pen-ruler\"></mat-icon>\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<div class=\"canvas-wrapper\">\r\n  <canvas\r\n    #drawCanvas\r\n    (mousedown)=\"handleMouseDown($event)\"\r\n    (mousemove)=\"handleMouseMove($event)\"\r\n    (mouseup)=\"handleMouseUp($event)\"\r\n    (mouseleave)=\"handleMouseLeave($event)\"\r\n    (wheel)=\"handleMouseWheel($event)\"\r\n  ></canvas>\r\n</div>\r\n\r\n<div class=\"modal-footer\">\r\n  @if (draftingMode === 'scaling') {\r\n    <div class=\"reference-input-container\">\r\n      <div class=\"input-button-container\">\r\n        <input\r\n          (change)=\"updateUserValue()\"\r\n          [value]=\"customerInputLenght\"\r\n          #inputLength\r\n          type=\"number\"\r\n          placeholder=\"{{ 'PDF_REFERENCE_PLACEHOLDER' | localize}}\"\r\n          [attr.disabled]=\"this.measurePoints.length === 0 ? '' : null\"\r\n          >\r\n          <button (click)=\"resetPoints()\" title=\"Reset referentie meting\">\r\n            <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\r\n          </button>\r\n        </div>\r\n        <p class=\"helper-text\">{{ 'PDF_REFERENCE_HELPER' | localize }}</p>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"save-cancel-button-container\">\r\n      @if (draftingMode === 'scaling') {\r\n        <button (click)=\"submitLength()\" title=\"Opslaan\">\r\n          <mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon>\r\n          <span>{{'NEXT' | localize}}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <img #hiddenImage src=\"\" style=\"display: none;\">\r\n", styles: ["canvas{position:relative}button{cursor:pointer;color:#fff;background:#da9803;border:1px solid #da9803;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}button:hover{background:#da9803;color:#fff}.main-button-container{display:flex;justify-content:center;margin-bottom:15px}.main-button-container .mat-button-toggle-checked{background:#da9803;color:#fff}.model-header{display:flex;justify-content:space-between;align-items:start}.model-header .close-button{background:none;color:#333;border:none;padding:0}.modal-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:30px}.reference-input-container .input-button-container{display:flex;align-items:center}.reference-input-container .input-button-container input{min-width:285px;border:1px solid #f7f7f9;border-radius:3px;height:35px;line-height:35px;box-sizing:border-box;padding:10px}.reference-input-container .input-button-container input:disabled{background:#f7f7f9;cursor:default}.reference-input-container .input-button-container button{border:none;display:inline-block}.reference-input-container .helper-text{font-size:13px;font-style:italic;margin:0;padding:0;display:block}.zoom-button-containers{display:flex;justify-items:center;justify-content:right}.zoom-button-containers button{margin:0 5px}.save-cancel-button-container{display:flex;justify-content:center;justify-items:center}.save-cancel-button-container button{margin:3px 10px;padding:8px 15px}.save-cancel-button-container button .homedecorator-material-icons{font-size:18px}.save-cancel-button-container button span{line-height:18px;font-size:15px}.canvas-wrapper{overflow:hidden;max-height:60vh;max-width:80vw}\n"] }]
+            args: [{ selector: 'rp-draw-dialog', standalone: false, template: "<div class=\"model-header\">\r\n  <h1 mat-dialog-title>{{ 'OPEN_A_DIAGRAM' | localize }}</h1>\r\n  <button (click)=\"cancelAndReset()\" class=\"close-button\">\r\n    <mat-icon class=\"homedecorator-material-icons\">close</mat-icon>\r\n  </button>\r\n</div>\r\n<div class=\"canvas-wrapper\">\r\n  <canvas\r\n    #drawCanvas\r\n    (mousedown)=\"handleMouseDown($event)\"\r\n    (mousemove)=\"handleMouseMove($event)\"\r\n    (mouseup)=\"handleMouseUp($event)\"\r\n    (mouseleave)=\"handleMouseLeave($event)\"\r\n    (wheel)=\"handleMouseWheel($event)\"\r\n    (contextmenu)=\"handleContextMenu($event)\"\r\n  ></canvas>\r\n</div>\r\n\r\n<div class=\"modal-footer\">\r\n  @if (draftingMode === 'scaling') {\r\n    <div class=\"reference-input-container\">\r\n      <div class=\"input-button-container\">\r\n        <input\r\n          (change)=\"updateUserValue()\"\r\n          [value]=\"customerInputLenght\"\r\n          #inputLength\r\n          type=\"number\"\r\n          placeholder=\"{{ 'PDF_REFERENCE_PLACEHOLDER' | localize}}\"\r\n          [attr.disabled]=\"this.measurePoints.length === 0 ? '' : null\"\r\n          >\r\n          <button (click)=\"resetPoints()\" title=\"Reset referentie meting\">\r\n            <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\r\n          </button>\r\n        </div>\r\n        <p class=\"helper-text\">{{ 'PDF_REFERENCE_HELPER' | localize }}</p>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"save-cancel-button-container\">\r\n      @if (draftingMode === 'scaling') {\r\n        <button (click)=\"submitLength()\" title=\"Opslaan\">\r\n          <mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon>\r\n          <span>{{'NEXT' | localize}}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <img #hiddenImage src=\"\" style=\"display: none;\">\r\n", styles: ["canvas{position:relative}button{cursor:pointer;color:#fff;background:#da9803;border:1px solid #da9803;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}button:hover{background:#da9803;color:#fff}.main-button-container{display:flex;justify-content:center;margin-bottom:15px}.main-button-container .mat-button-toggle-checked{background:#da9803;color:#fff}.model-header{display:flex;justify-content:space-between;align-items:start}.model-header .close-button{background:none;color:#333;border:none;padding:0}.modal-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:30px}.reference-input-container .input-button-container{display:flex;align-items:center}.reference-input-container .input-button-container input{min-width:285px;border:1px solid #f7f7f9;border-radius:3px;height:35px;line-height:35px;box-sizing:border-box;padding:10px}.reference-input-container .input-button-container input:disabled{background:#f7f7f9;cursor:default}.reference-input-container .input-button-container button{border:none;display:inline-block}.reference-input-container .helper-text{font-size:13px;font-style:italic;margin:0;padding:0;display:block}.zoom-button-containers{display:flex;justify-items:center;justify-content:right}.zoom-button-containers button{margin:0 5px}.save-cancel-button-container{display:flex;justify-content:center;justify-items:center}.save-cancel-button-container button{margin:3px 10px;padding:8px 15px}.save-cancel-button-container button .homedecorator-material-icons{font-size:18px}.save-cancel-button-container button span{line-height:18px;font-size:15px}.canvas-wrapper{overflow:hidden;max-height:60vh;max-width:80vw}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -48027,7 +48102,7 @@ class PdfCropDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PdfCropDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }, { token: i1$2.MatDialog }, { token: MessageBusService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PdfCropDialogComponent, isStandalone: false, selector: "rp-draw-dialog", viewQueries: [{ propertyName: "pdfComponent", first: true, predicate: ["pdf"], descendants: true, read: PdfViewerComponent }, { propertyName: "pdfContainer", first: true, predicate: ["pdfcontainer"], descendants: true, read: HTMLElement }, { propertyName: "hiddenImage", first: true, predicate: ["image"], descendants: true }], ngImport: i0, template: "<h1 mat-dialog-title>{{ 'OPEN_A_DIAGRAM' | localize }}</h1>\r\n<div mat-dialog-content class=\"dialog-wrapper\" cdkTrapFocus>\r\n  <div class=\"model-header-container\">\r\n    <button (click)=\"crop()\" title=\"Continue\">\r\n      <mat-icon class=\"homedecorator-material-icons\">check</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n\r\n  <div #pdfcontainer class=\"pdf-container top-margin\">\r\n    <pdf-viewer\r\n      #pdf\r\n      [(src)]=\"pdfSrc\"\r\n      [render-text]=\"true\"\r\n      [autoresize]=\"true\"\r\n      (page-rendered)=\"pageRendered()\"\r\n      style=\"position: relative; min-height: 80vh; min-width: 80vw; display: block\">\r\n    </pdf-viewer>\r\n  </div>\r\n</div>\r\n", styles: [".model-header-container{display:flex;justify-content:center}.model-header-container button{cursor:pointer;color:#000;background:#fff;border:1px solid #dddddd;border-radius:3px;box-sizing:border-box;padding:5px}.model-header-container button:hover{background:#da9803;color:#fff}\n"], dependencies: [{ kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4$2.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PdfCropDialogComponent, isStandalone: false, selector: "rp-draw-dialog", viewQueries: [{ propertyName: "pdfComponent", first: true, predicate: ["pdf"], descendants: true, read: PdfViewerComponent }, { propertyName: "pdfContainer", first: true, predicate: ["pdfcontainer"], descendants: true, read: HTMLElement }, { propertyName: "hiddenImage", first: true, predicate: ["image"], descendants: true }], ngImport: i0, template: "<h1 mat-dialog-title>{{ 'OPEN_A_DIAGRAM' | localize }}</h1>\r\n<div mat-dialog-content class=\"dialog-wrapper\" cdkTrapFocus>\r\n  <div class=\"model-header-container\">\r\n    <button (click)=\"crop()\" title=\"Continue\">\r\n      <mat-icon class=\"homedecorator-material-icons\">check</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n\r\n  <div #pdfcontainer class=\"pdf-container top-margin\">\r\n    <pdf-viewer\r\n      #pdf\r\n      [(src)]=\"pdfSrc\"\r\n      [render-text]=\"true\"\r\n      [autoresize]=\"true\"\r\n      (page-rendered)=\"pageRendered()\"\r\n      style=\"position: relative; min-height: 80vh; min-width: 80vw; display: block\">\r\n    </pdf-viewer>\r\n  </div>\r\n</div>\r\n", styles: [".model-header-container{display:flex;justify-content:center}.model-header-container button{cursor:pointer;color:#000;background:#fff;border:1px solid #dddddd;border-radius:3px;box-sizing:border-box;padding:5px}.model-header-container button:hover{background:#da9803;color:#fff}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4$2.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PdfCropDialogComponent, decorators: [{
             type: Component,
@@ -48076,7 +48151,7 @@ class LightboxComponent {
             </div>
         </div>
         
-    `, isInline: true, dependencies: [{ kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LightboxComponent, decorators: [{
             type: Component,
@@ -48172,7 +48247,7 @@ class HelpDialogComponent {
                 (closeClick)="showLightbox = false"
         ></co-lightbox>
       }
-      `, isInline: true, styles: [".mat-headline-5{text-align:center;line-height:1;margin:0 0 16px}.help-button{height:100%;width:100%;pointer-events:all}.help-button ::ng-deep .mat-button-wrapper{display:flex;flex-direction:column;white-space:normal}.help-button ::ng-deep .mat-button-wrapper>*{max-width:100%;max-height:100%}.help-button ::ng-deep .mat-button-wrapper .help-image-label{font-size:12px;line-height:1.5;min-height:36px;margin-top:10px}.help-image{display:block;max-width:100%;max-height:100%}\n"], dependencies: [{ kind: "component", type: i3$4.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$4.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: LightboxComponent, selector: "co-lightbox", inputs: ["content", "title"], outputs: ["closeClick"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }] }); }
+      `, isInline: true, styles: [".mat-headline-5{text-align:center;line-height:1;margin:0 0 16px}.help-button{height:100%;width:100%;pointer-events:all}.help-button ::ng-deep .mat-button-wrapper{display:flex;flex-direction:column;white-space:normal}.help-button ::ng-deep .mat-button-wrapper>*{max-width:100%;max-height:100%}.help-button ::ng-deep .mat-button-wrapper .help-image-label{font-size:12px;line-height:1.5;min-height:36px;margin-top:10px}.help-image{display:block;max-width:100%;max-height:100%}\n"], dependencies: [{ kind: "component", type: i3$3.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i3$3.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: LightboxComponent, selector: "co-lightbox", inputs: ["content", "title"], outputs: ["closeClick"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: i2$2.UpperCasePipe, name: "uppercase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HelpDialogComponent, decorators: [{
             type: Component,
@@ -48213,7 +48288,7 @@ class LimitedModeMessageComponent {
         this.closeClicked.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LimitedModeMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LimitedModeMessageComponent, isStandalone: false, selector: "limited-mode-message", outputs: { closeClicked: "closeClicked" }, ngImport: i0, template: "<span [textContent]=\"'APPLICATION_RUNS_LIMITED_MODE' | localize\"></span>\r\n<button mat-icon-button (click)=\"onCloseClick()\">\r\n  <mat-icon class=\"homedecorator-material-icons\">clear</mat-icon>\r\n</button>\r\n", styles: [":host{display:flex;justify-content:center;align-items:center;background:#fe4400;color:#fff;height:25px;font-size:small;z-index:1}\n"], dependencies: [{ kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LimitedModeMessageComponent, isStandalone: false, selector: "limited-mode-message", outputs: { closeClicked: "closeClicked" }, ngImport: i0, template: "<span [textContent]=\"'APPLICATION_RUNS_LIMITED_MODE' | localize\"></span>\r\n<button mat-icon-button (click)=\"onCloseClick()\">\r\n  <mat-icon class=\"homedecorator-material-icons\">clear</mat-icon>\r\n</button>\r\n", styles: [":host{display:flex;justify-content:center;align-items:center;background:#fe4400;color:#fff;height:25px;font-size:small;z-index:1}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LimitedModeMessageComponent, decorators: [{
             type: Component,
@@ -48225,7 +48300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class ToolbarComponent {
     handleKeyDown(event) {
         if (event.ctrlKey && event.shiftKey && event.key === 'S') {
-            this.handleSave();
+            this.handleSave(false);
         }
     }
     get fullscreen() {
@@ -48328,7 +48403,7 @@ class ToolbarComponent {
             this.handleExternalSave();
         }
         else {
-            this.openSaveDialog();
+            this.openSaveDialog(saveOnOpen);
         }
     }
     async handleExternalSave() {
@@ -48853,7 +48928,7 @@ class ToolbarComponent {
         <!--
       </div>
       -->
-    `, isInline: true, styles: [":host{display:flex;flex-direction:column;position:absolute;top:0;z-index:100;height:100%;width:100%;pointer-events:none}:host h2{font-weight:600}:host h3{font-weight:600}:host .mat-toolbar.mat-primary{box-shadow:none;padding:0;background:transparent;height:40px;justify-content:space-between}:host .mat-toolbar .mat-icon{height:20px;width:20px;font-size:20px;line-height:20px}:host .hd-toolbar-spacer{display:flex;flex-basis:100%}:host .toast-wrapper{height:auto;position:absolute;top:0;left:50%;-webkit-user-select:none;user-select:none;pointer-events:none;background:#74b77f;padding:30px;border-radius:0 0 10px 10px;min-width:150px;max-width:90%;color:#fff;text-align:center;transform:translate(-50%,-100%)}:host .toast-wrapper.warning{background:#f17300}:host .toast-wrapper.error{background:#cc2936}:host ::ng-deep .drawer__header{display:flex;align-items:center;min-height:40px;margin-bottom:16px}:host ::ng-deep .drawer__header h2{margin:0 auto 0 0;font-weight:600}:host ::ng-deep .mat-headline-6{font-weight:600}:host ::ng-deep .mat-subtitle-1{font-weight:600}:host ::ng-deep mat-tab-header,:host ::ng-deep .FileDrop{margin-bottom:16px}:host ::ng-deep .tab--skin ::ng-deep .mat-tab-label{height:52px;min-width:auto}:host ::ng-deep .drawer p{white-space:pre-wrap}:host ::ng-deep .mat-divider{margin:16px 0 24px}:host ::ng-deep .mat-drawer-backdrop{display:none}.storage-error{min-width:30px;height:30px;display:flex;align-items:center;align-self:center;border-radius:50%;justify-content:center;background:#fff;color:#c00;font-size:25px;font-weight:700}.layer--toolbar{display:flex;flex-direction:column}.toolbar{display:flex;z-index:101;flex-wrap:nowrap}.toolbar .menu-icon{min-width:50px;display:flex;justify-content:center;margin-left:-16px}.toolbar .left-toolbar,.toolbar .right-toolbar{display:flex;align-items:center;background:#da9803;border-radius:0 0 10px;padding:0 20px 0 10px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;height:100%;gap:12px}.toolbar .right-toolbar{border-radius:0 0 0 10px;padding:0 5px 0 10px}.toolbar .right-toolbar.modified{padding:0 5px 0 0}.toolbar .share-button{height:100%;padding:0 15px;border-radius:0 0 0 10px;border:none;color:#fff;background-color:#2c67ff;cursor:pointer}.toolbar .toolbar-icon-list{display:flex;align-items:center;justify-content:center}.toolbar .toolbar-icon-sub{display:flex;align-items:center;justify-content:center;padding:0 10px;gap:5px;border-right:1px solid rgba(255,255,255,.3803921569)}.toolbar .toolbar-icon-sub:last-child{border-right:none}.toolbar .toolbar-icon-sub:first-child{border-left:1px solid rgba(255,255,255,.3803921569);margin-left:10px}.toolbar .toolbar-icon{height:30px;width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.toolbar .toolbar-icon co-icon ::ng-deep{width:20px;height:20px}.toolbar .toolbar-icon co-icon ::ng-deep svg,.toolbar .toolbar-icon co-icon ::ng-deep path{fill:#fff}.toolbar .toolbar-icon co-icon.loading-green ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-green ::ng-deep path{fill:#74b77f}.toolbar .toolbar-icon co-icon.loading-orange ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-orange ::ng-deep path{fill:#f17300}.toolbar .toolbar-icon co-icon.loading-yellow ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-yellow ::ng-deep path{fill:#cc2936}.toolbar .toolbar-icon co-icon.loading-red ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-red ::ng-deep path{fill:#cc2936}.toolbar .toolbar-icon.search co-icon{height:30px;width:30px}.toolbar .toolbar-icon.disabled{cursor:default}.toolbar .toolbar-icon.disabled co-icon ::ng-deep svg{fill:#00000042}.toolbar-logo{height:20px}.secondary-logo{margin-left:20px}.toolbar__nav{display:flex;flex-direction:row;padding-top:0}.toolbar__nav .mat-mdc-list-item{color:#fff;height:40px}.toolbar-row{flex:auto;display:flex;flex-direction:column;padding:0;pointer-events:none;position:relative;align-items:baseline;height:100%}::ng-deep mat-toolbar-row .toolbar--secondary{width:50px;padding:15px 0;flex-direction:column;background:#17253391;height:100%;gap:5px}::ng-deep mat-toolbar-row .toolbar--secondary button ::ng-deep{width:30px;height:30px;line-height:30px;color:#fff;display:flex;justify-content:center}::ng-deep mat-toolbar-row .toolbar--secondary .add-to-cart-button button ::ng-deep{color:#da9803}.toolbar--secondary .drawer{flex:auto;pointer-events:none;background:transparent}.wip-card{margin-left:5px;padding:0 10px;color:#fff;background-color:#7a828a}.wip-card .mat-mdc-card-content{font-size:12px}.drawer-container{position:static;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.drawer{width:420px;padding:16px;display:flex;flex-direction:column;left:50px}::ng-deep rp-category-library .mat-mdc-list-item ::ng-deep{border-color:#747c84}::ng-deep rp-category-library .mdc-list-item__primary-text{color:#000}::ng-deep rp-category-library .mdc-list-item:hover .mdc-list-item__primary-text{color:#000}.toolbar,.toolbar--secondary>*,.drawer-container>*,.drawer>*{pointer-events:all}.drawer__button{min-width:initial;padding:0;border:none;position:absolute;top:0;right:0;border-radius:50%}.blinker{animation:blinker 1s linear infinite}.badge-tooltip{position:relative}.badge-tooltip .mat-badge{position:absolute;margin:0;display:flex;align-items:center;justify-content:center;right:-2px;bottom:13px}.badge-tooltip .mat-badge .mat-badge-content{background-color:transparent;color:#b71c1c;border:1px solid #b71c1c;animation:bounce 2s ease-out;animation-iteration-count:infinite;right:initial;left:initial;position:relative;height:12px;width:12px;line-height:12px;font-size:10px;bottom:initial}::ng-deep .tooltip-red{background:#b71c1c}@keyframes bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-20px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes blinker{50%{opacity:0}}::ng-deep .mat-mdc-menu-panel{width:256px!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content{display:flex;flex-direction:column;padding-left:10px;padding-right:10px}::ng-deep mat-drawer-content.mat-drawer-content{display:flex;height:100%;flex-direction:column}\n"], dependencies: [{ kind: "component", type: i23.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i23.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i27$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i27$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i27$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i29.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i29.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i30.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i30.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i31$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "directive", type: i33.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: LimitedModeMessageComponent, selector: "limited-mode-message", outputs: ["closeClicked"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+    `, isInline: true, styles: [":host{display:flex;flex-direction:column;position:absolute;top:0;z-index:100;height:100%;width:100%;pointer-events:none}:host h2{font-weight:600}:host h3{font-weight:600}:host .mat-toolbar.mat-primary{box-shadow:none;padding:0;background:transparent;height:40px;justify-content:space-between}:host .mat-toolbar .mat-icon{height:20px;width:20px;font-size:20px;line-height:20px}:host .hd-toolbar-spacer{display:flex;flex-basis:100%}:host .toast-wrapper{height:auto;position:absolute;top:0;left:50%;-webkit-user-select:none;user-select:none;pointer-events:none;background:#74b77f;padding:30px;border-radius:0 0 10px 10px;min-width:150px;max-width:90%;color:#fff;text-align:center;transform:translate(-50%,-100%)}:host .toast-wrapper.warning{background:#f17300}:host .toast-wrapper.error{background:#cc2936}:host ::ng-deep .drawer__header{display:flex;align-items:center;min-height:40px;margin-bottom:16px}:host ::ng-deep .drawer__header h2{margin:0 auto 0 0;font-weight:600}:host ::ng-deep .mat-headline-6{font-weight:600}:host ::ng-deep .mat-subtitle-1{font-weight:600}:host ::ng-deep mat-tab-header,:host ::ng-deep .FileDrop{margin-bottom:16px}:host ::ng-deep .tab--skin ::ng-deep .mat-tab-label{height:52px;min-width:auto}:host ::ng-deep .drawer p{white-space:pre-wrap}:host ::ng-deep .mat-divider{margin:16px 0 24px}:host ::ng-deep .mat-drawer-backdrop{display:none}.storage-error{min-width:30px;height:30px;display:flex;align-items:center;align-self:center;border-radius:50%;justify-content:center;background:#fff;color:#c00;font-size:25px;font-weight:700}.layer--toolbar{display:flex;flex-direction:column}.toolbar{display:flex;z-index:101;flex-wrap:nowrap}.toolbar .menu-icon{min-width:50px;display:flex;justify-content:center;margin-left:-16px}.toolbar .left-toolbar,.toolbar .right-toolbar{display:flex;align-items:center;background:#da9803;border-radius:0 0 10px;padding:0 20px 0 10px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;height:100%;gap:12px}.toolbar .right-toolbar{border-radius:0 0 0 10px;padding:0 5px 0 10px}.toolbar .right-toolbar.modified{padding:0 5px 0 0}.toolbar .share-button{height:100%;padding:0 15px;border-radius:0 0 0 10px;border:none;color:#fff;background-color:#2c67ff;cursor:pointer}.toolbar .toolbar-icon-list{display:flex;align-items:center;justify-content:center}.toolbar .toolbar-icon-sub{display:flex;align-items:center;justify-content:center;padding:0 10px;gap:5px;border-right:1px solid rgba(255,255,255,.3803921569)}.toolbar .toolbar-icon-sub:last-child{border-right:none}.toolbar .toolbar-icon-sub:first-child{border-left:1px solid rgba(255,255,255,.3803921569);margin-left:10px}.toolbar .toolbar-icon{height:30px;width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.toolbar .toolbar-icon co-icon ::ng-deep{width:20px;height:20px}.toolbar .toolbar-icon co-icon ::ng-deep svg,.toolbar .toolbar-icon co-icon ::ng-deep path{fill:#fff}.toolbar .toolbar-icon co-icon.loading-green ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-green ::ng-deep path{fill:#74b77f}.toolbar .toolbar-icon co-icon.loading-orange ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-orange ::ng-deep path{fill:#f17300}.toolbar .toolbar-icon co-icon.loading-yellow ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-yellow ::ng-deep path{fill:#cc2936}.toolbar .toolbar-icon co-icon.loading-red ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-red ::ng-deep path{fill:#cc2936}.toolbar .toolbar-icon.search co-icon{height:30px;width:30px}.toolbar .toolbar-icon.disabled{cursor:default}.toolbar .toolbar-icon.disabled co-icon ::ng-deep svg{fill:#00000042}.toolbar-logo{height:20px}.secondary-logo{margin-left:20px}.toolbar__nav{display:flex;flex-direction:row;padding-top:0}.toolbar__nav .mat-mdc-list-item{color:#fff;height:40px}.toolbar-row{flex:auto;display:flex;flex-direction:column;padding:0;pointer-events:none;position:relative;align-items:baseline;height:100%}::ng-deep mat-toolbar-row .toolbar--secondary{width:50px;padding:15px 0;flex-direction:column;background:#17253391;height:100%;gap:5px}::ng-deep mat-toolbar-row .toolbar--secondary button ::ng-deep{width:30px;height:30px;line-height:30px;color:#fff;display:flex;justify-content:center}::ng-deep mat-toolbar-row .toolbar--secondary .add-to-cart-button button ::ng-deep{color:#da9803}.toolbar--secondary .drawer{flex:auto;pointer-events:none;background:transparent}.wip-card{margin-left:5px;padding:0 10px;color:#fff;background-color:#7a828a}.wip-card .mat-mdc-card-content{font-size:12px}.drawer-container{position:static;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.drawer{width:420px;padding:16px;display:flex;flex-direction:column;left:50px}::ng-deep rp-category-library .mat-mdc-list-item ::ng-deep{border-color:#747c84}::ng-deep rp-category-library .mdc-list-item__primary-text{color:#000}::ng-deep rp-category-library .mdc-list-item:hover .mdc-list-item__primary-text{color:#000}.toolbar,.toolbar--secondary>*,.drawer-container>*,.drawer>*{pointer-events:all}.drawer__button{min-width:initial;padding:0;border:none;position:absolute;top:0;right:0;border-radius:50%}.blinker{animation:blinker 1s linear infinite}.badge-tooltip{position:relative}.badge-tooltip .mat-badge{position:absolute;margin:0;display:flex;align-items:center;justify-content:center;right:-2px;bottom:13px}.badge-tooltip .mat-badge .mat-badge-content{background-color:transparent;color:#b71c1c;border:1px solid #b71c1c;animation:bounce 2s ease-out;animation-iteration-count:infinite;right:initial;left:initial;position:relative;height:12px;width:12px;line-height:12px;font-size:10px;bottom:initial}::ng-deep .tooltip-red{background:#b71c1c}@keyframes bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-20px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes blinker{50%{opacity:0}}::ng-deep .mat-mdc-menu-panel{width:256px!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content{display:flex;flex-direction:column;padding-left:10px;padding-right:10px}::ng-deep mat-drawer-content.mat-drawer-content{display:flex;height:100%;flex-direction:column}\n"], dependencies: [{ kind: "component", type: i23.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i23.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i27$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i27$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i27$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i29.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i29.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i30.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i30.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i31$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "directive", type: i33.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: LimitedModeMessageComponent, selector: "limited-mode-message", outputs: ["closeClicked"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('showToast', [
                 state('void', style({ 'transform-origin': 'top center', transform: 'translate(-50%, -100%)' })),
                 state('*', style({ 'transform-origin': 'top center', transform: 'translate(-50%, 0)' })),
@@ -49458,7 +49533,7 @@ class ProductCatalogComponent {
       </button>
     </div>
     }
-    `, isInline: true, styles: [":host{display:none;z-index:99;overflow:hidden}:host .layer{pointer-events:all!important;overflow-y:hidden;display:flex;flex-direction:column}:host .product-catalog-wrapper{display:flex;flex-direction:column;height:100%;padding:60px 30px 30px;width:100%;box-sizing:border-box}:host .product-catalog-wrapper .catalog-button-wrapper{font-size:16px;margin-bottom:20px}:host .product-catalog-wrapper .co-catalog-external-source{display:flex;flex-basis:100%}:host .own-collection-button-wrapper{cursor:pointer}:host .own-collection-button-wrapper .own-collection-description{font-size:12px;font-weight:700;text-shadow:none;text-transform:capitalize;margin:10px 0}:host .own-collection-button-wrapper .co-image{padding:25px;background:#3760a1;border-radius:10px}:host.shown{display:inline-block;position:relative;top:0;left:50px;width:calc(100% - 50px);height:calc(100vh + -0px);background-color:#fff}:host.no-offset{left:0;width:100%;z-index:100}:host .ione-catalog{display:block;overflow:hidden}:host .ione-catalog ::ng-deep app-catalog{overflow:hidden}:host .catalog-button-wrapper .back-button,:host .catalog-button-wrapper .refresh-button{cursor:pointer;display:inline-block;font-weight:700}:host .catalog-button-wrapper .back-button .refresh-button-span,:host .catalog-button-wrapper .back-button .back-button-span,:host .catalog-button-wrapper .refresh-button .refresh-button-span,:host .catalog-button-wrapper .refresh-button .back-button-span{vertical-align:top;line-height:25px;margin:10px 5px 0}:host .catalog-button-wrapper .button-spacer{display:inline-block;margin:0 10px}:host .product-catalog-wrapper{overflow:auto}:host .hide-catalog{position:absolute;top:50px;right:15px;z-index:100}.co-catalog-external-sources .external-source-item .co-image img{object-fit:cover}::ng-deep .co-catalog-navigation{position:relative}::ng-deep .co-catalog-navigation .navigation-overlay-wrapper{position:absolute!important;left:-40px!important;padding:20px 40px;grid-column-gap:60px}::ng-deep co-pagination-bar .pagination{box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.ImageComponent, selector: "co-image", inputs: ["source", "placeHolder"] }, { kind: "component", type: i7.CatalogExternalSourcesComponent, selector: "co-catalog-external-sources", inputs: ["isStandalone", "embedded", "currentTransactionBranchId"], outputs: ["externalSourceClick", "catalogsLoaded"] }, { kind: "component", type: ProductOwnCollectionComponent, selector: "rp-product-own-collection", inputs: ["settings", "generalFilterOrders", "purchaseFilterOrders", "logisticsFilterOrders"], outputs: ["articleClick", "arButtonClick"] }, { kind: "component", type: i7.CatalogExternalSourceComponent, selector: "co-catalog-external-source", inputs: ["catalogDefinition", "user", "externalCatalogStartupInfo", "title", "subTitle", "searchPlaceholder", "tempFilter", "showNavigation", "options", "embedded", "languageCode", "name"], outputs: ["articleClick", "addArticleClick", "lookAtArticleClick", "iFrameFeedbackReceived"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: AppendPipe, name: "append" }] }); }
+    `, isInline: true, styles: [":host{display:none;z-index:99;overflow:hidden}:host .layer{pointer-events:all!important;overflow-y:hidden;display:flex;flex-direction:column}:host .product-catalog-wrapper{display:flex;flex-direction:column;height:100%;padding:60px 30px 30px;width:100%;box-sizing:border-box}:host .product-catalog-wrapper .catalog-button-wrapper{font-size:16px;margin-bottom:20px}:host .product-catalog-wrapper .co-catalog-external-source{display:flex;flex-basis:100%}:host .own-collection-button-wrapper{cursor:pointer}:host .own-collection-button-wrapper .own-collection-description{font-size:12px;font-weight:700;text-shadow:none;text-transform:capitalize;margin:10px 0}:host .own-collection-button-wrapper .co-image{padding:25px;background:#3760a1;border-radius:10px}:host.shown{display:inline-block;position:relative;top:0;left:50px;width:calc(100% - 50px);height:calc(100vh + -0px);background-color:#fff}:host.no-offset{left:0;width:100%;z-index:100}:host .ione-catalog{display:block;overflow:hidden}:host .ione-catalog ::ng-deep app-catalog{overflow:hidden}:host .catalog-button-wrapper .back-button,:host .catalog-button-wrapper .refresh-button{cursor:pointer;display:inline-block;font-weight:700}:host .catalog-button-wrapper .back-button .refresh-button-span,:host .catalog-button-wrapper .back-button .back-button-span,:host .catalog-button-wrapper .refresh-button .refresh-button-span,:host .catalog-button-wrapper .refresh-button .back-button-span{vertical-align:top;line-height:25px;margin:10px 5px 0}:host .catalog-button-wrapper .button-spacer{display:inline-block;margin:0 10px}:host .product-catalog-wrapper{overflow:auto}:host .hide-catalog{position:absolute;top:50px;right:15px;z-index:100}.co-catalog-external-sources .external-source-item .co-image img{object-fit:cover}::ng-deep .co-catalog-navigation{position:relative}::ng-deep .co-catalog-navigation .navigation-overlay-wrapper{position:absolute!important;left:-40px!important;padding:20px 40px;grid-column-gap:60px}::ng-deep co-pagination-bar .pagination{box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.ImageComponent, selector: "co-image", inputs: ["source", "placeHolder"] }, { kind: "component", type: i7.CatalogExternalSourcesComponent, selector: "co-catalog-external-sources", inputs: ["isStandalone", "embedded", "currentTransactionBranchId"], outputs: ["externalSourceClick", "catalogsLoaded"] }, { kind: "component", type: ProductOwnCollectionComponent, selector: "rp-product-own-collection", inputs: ["settings", "generalFilterOrders", "purchaseFilterOrders", "logisticsFilterOrders"], outputs: ["articleClick", "arButtonClick"] }, { kind: "component", type: i7.CatalogExternalSourceComponent, selector: "co-catalog-external-source", inputs: ["catalogDefinition", "user", "externalCatalogStartupInfo", "title", "subTitle", "searchPlaceholder", "tempFilter", "showNavigation", "options", "embedded", "languageCode", "name"], outputs: ["articleClick", "addArticleClick", "lookAtArticleClick", "iFrameFeedbackReceived"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: AppendPipe, name: "append" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductCatalogComponent, decorators: [{
             type: Component,
@@ -49856,7 +49931,7 @@ class HomedecoratorComponent {
     _initConnection() {
         this._homedecoratorService.init(this._settings);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorComponent, deps: [{ token: HomedecoratorAppService }, { token: HomedecoratorConnectorService }, { token: AppStateService }, { token: PresetsService }, { token: ScreenSizeAnalysisService }, { token: i3$2.MatIconRegistry }, { token: i1$1.DomSanitizer }, { token: MessageBusService }, { token: HomedecoratorService }, { token: HomedecoratorAppEventService, optional: true, skipSelf: true }, { token: HomedecoratorAppEventService, optional: true, self: true }, { token: IntegrationService }, { token: SceneService }, { token: WebWorkerService }, { token: ConfigurationPresetLoadService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorComponent, deps: [{ token: HomedecoratorAppService }, { token: HomedecoratorConnectorService }, { token: AppStateService }, { token: PresetsService }, { token: ScreenSizeAnalysisService }, { token: i5.MatIconRegistry }, { token: i1$1.DomSanitizer }, { token: MessageBusService }, { token: HomedecoratorService }, { token: HomedecoratorAppEventService, optional: true, skipSelf: true }, { token: HomedecoratorAppEventService, optional: true, self: true }, { token: IntegrationService }, { token: SceneService }, { token: WebWorkerService }, { token: ConfigurationPresetLoadService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HomedecoratorComponent, isStandalone: false, selector: "co-homedecorator", inputs: { generalFilterOrders: "generalFilterOrders", purchaseFilterOrders: "purchaseFilterOrders", logisticsFilterOrders: "logisticsFilterOrders", initCommunication: "initCommunication", projectToLoad: "projectToLoad", shareButton: "shareButton", loadWithConfigurationPreset: "loadWithConfigurationPreset", settings: "settings" }, host: { listeners: { "document:keyup": "keyup($event)" }, properties: { "class.co-homedecorator": "this.showClass" } }, providers: [
             APPLICATION_SERVICES_PROVIDERS
         ], ngImport: i0, template: `
@@ -49950,7 +50025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     ],
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: HomedecoratorAppService }, { type: HomedecoratorConnectorService }, { type: AppStateService }, { type: PresetsService }, { type: ScreenSizeAnalysisService }, { type: i3$2.MatIconRegistry }, { type: i1$1.DomSanitizer }, { type: MessageBusService }, { type: HomedecoratorService }, { type: HomedecoratorAppEventService, decorators: [{
+        }], ctorParameters: () => [{ type: HomedecoratorAppService }, { type: HomedecoratorConnectorService }, { type: AppStateService }, { type: PresetsService }, { type: ScreenSizeAnalysisService }, { type: i5.MatIconRegistry }, { type: i1$1.DomSanitizer }, { type: MessageBusService }, { type: HomedecoratorService }, { type: HomedecoratorAppEventService, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
@@ -50005,7 +50080,7 @@ class DebugComponent {
         return this.debugService.getFramesMeasuredAmount();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DebugComponent, deps: [{ token: HomedecoratorSettingsService }, { token: DebugService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DebugComponent, isStandalone: false, selector: "rp-debug", ngImport: i0, template: "@if (settingsService.settings?.options?.xrDebug) {\r\n  @if (debugService.debugMessages.length > 0) {\r\n    <div class=\"debug-window-wrapper\" @showMessages>\r\n      <h3 [textContent]=\"'Debug messages'\"></h3>\r\n      <ul>\r\n        @for (message of debugService.debugMessages; track message) {\r\n          <li>\r\n            <span [textContent]=\"message\"></span>\r\n          </li>\r\n        }\r\n      </ul>\r\n      <div class=\"button-wrapper\">\r\n        <button mat-icon-button\r\n          (click)=\"clearMessages()\"\r\n          matTooltip=\"{{'DELETE' | localize}}\"\r\n          [disabled]=\"debugService.debugMessages.length < 1\"\r\n          >\r\n          <mat-icon class=\"homedecorator-material-icons\">delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"debug-window-wrapper fps\">\r\n    <button (click)=\"startToggle()\">START/PAUSE</button>\r\n    <button (click)=\"resetMeasurements()\">RESET</button>\r\n    <h5>Avg frame render time: {{getAverageRenderTime()}}ms ({{getFramesMeasuredAmount()}} frames)</h5>\r\n  </div>\r\n}\r\n", styles: [":host{z-index:2}.debug-window-wrapper{padding:10px;position:absolute;top:64px;right:0;background:#0101011a;width:300px;overflow-y:auto}.debug-window-wrapper ul{margin:0;padding:0}.debug-window-wrapper li{list-style:none}.debug-window-wrapper li:before{content:\"-\"}.fps{top:245px}\n"], dependencies: [{ kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DebugComponent, isStandalone: false, selector: "rp-debug", ngImport: i0, template: "@if (settingsService.settings?.options?.xrDebug) {\r\n  @if (debugService.debugMessages.length > 0) {\r\n    <div class=\"debug-window-wrapper\" @showMessages>\r\n      <h3 [textContent]=\"'Debug messages'\"></h3>\r\n      <ul>\r\n        @for (message of debugService.debugMessages; track message) {\r\n          <li>\r\n            <span [textContent]=\"message\"></span>\r\n          </li>\r\n        }\r\n      </ul>\r\n      <div class=\"button-wrapper\">\r\n        <button mat-icon-button\r\n          (click)=\"clearMessages()\"\r\n          matTooltip=\"{{'DELETE' | localize}}\"\r\n          [disabled]=\"debugService.debugMessages.length < 1\"\r\n          >\r\n          <mat-icon class=\"homedecorator-material-icons\">delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"debug-window-wrapper fps\">\r\n    <button (click)=\"startToggle()\">START/PAUSE</button>\r\n    <button (click)=\"resetMeasurements()\">RESET</button>\r\n    <h5>Avg frame render time: {{getAverageRenderTime()}}ms ({{getFramesMeasuredAmount()}} frames)</h5>\r\n  </div>\r\n}\r\n", styles: [":host{z-index:2}.debug-window-wrapper{padding:10px;position:absolute;top:64px;right:0;background:#0101011a;width:300px;overflow-y:auto}.debug-window-wrapper ul{margin:0;padding:0}.debug-window-wrapper li{list-style:none}.debug-window-wrapper li:before{content:\"-\"}.fps{top:245px}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('showMessages', [
                 state('void', style({ 'right': '-100%' })),
                 state('*', style({ 'right': '0' })),
@@ -50885,7 +50960,7 @@ class EditApplyComponent {
         this.toggleChange.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EditApplyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EditApplyComponent, isStandalone: false, selector: "rp-edit-apply", inputs: { watched: "watched", disable: "disable" }, outputs: { cancel: "cancel", apply: "apply", toggleChange: "toggleChange" }, ngImport: i0, template: "@if (!checked) {\r\n  <mat-button-toggle\r\n    (change)=\"toggle($event)\">\r\n    <mat-icon class=\"homedecorator-material-icons\">mode_edit</mat-icon>\r\n    <span>{{'EDIT' | localize}}</span>\r\n  </mat-button-toggle>\r\n}\r\n@if (checked) {\r\n  <article>\r\n    <button mat-raised-button (click)=\"onCancel()\">\r\n      <mat-icon class=\"homedecorator-material-icons\">clear</mat-icon>\r\n    </button>\r\n    <button mat-raised-button\r\n      [disabled]=\"!watched || disable\"\r\n      (click)=\"onApply()\"\r\n      >\r\n      <mat-icon class=\"homedecorator-material-icons\">done</mat-icon>\r\n    </button>\r\n  </article>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EditApplyComponent, isStandalone: false, selector: "rp-edit-apply", inputs: { watched: "watched", disable: "disable" }, outputs: { cancel: "cancel", apply: "apply", toggleChange: "toggleChange" }, ngImport: i0, template: "@if (!checked) {\r\n  <mat-button-toggle\r\n    (change)=\"toggle($event)\">\r\n    <mat-icon class=\"homedecorator-material-icons\">mode_edit</mat-icon>\r\n    <span>{{'EDIT' | localize}}</span>\r\n  </mat-button-toggle>\r\n}\r\n@if (checked) {\r\n  <article>\r\n    <button mat-raised-button (click)=\"onCancel()\">\r\n      <mat-icon class=\"homedecorator-material-icons\">clear</mat-icon>\r\n    </button>\r\n    <button mat-raised-button\r\n      [disabled]=\"!watched || disable\"\r\n      (click)=\"onApply()\"\r\n      >\r\n      <mat-icon class=\"homedecorator-material-icons\">done</mat-icon>\r\n    </button>\r\n  </article>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EditApplyComponent, decorators: [{
             type: Component,
@@ -51737,7 +51812,7 @@ class CameraSettingsDialogComponent {
         <button mat-raised-button color="primary" (click)="exportSettings()">{{'EXPORT_SETTINGS' | localize}}</button>
       </div>
     </div>
-  `, isInline: true, styles: [":host .dialog-form-wrapper{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr 1fr;gap:0 15px;grid-template-areas:\". .\" \". .\" \". .\" \". .\" \". .\"}:host .input-button-wrapper{display:flex;align-items:center;justify-content:space-between}:host .input-button-wrapper button{margin-bottom:21.5px;margin-right:10px}:host .input-button-wrapper .mat-mdc-form-field{width:200px}\n"], dependencies: [{ kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+  `, isInline: true, styles: [":host .dialog-form-wrapper{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr 1fr;gap:0 15px;grid-template-areas:\". .\" \". .\" \". .\" \". .\" \". .\"}:host .input-button-wrapper{display:flex;align-items:center;justify-content:space-between}:host .input-button-wrapper button{margin-bottom:21.5px;margin-right:10px}:host .input-button-wrapper .mat-mdc-form-field{width:200px}\n"], dependencies: [{ kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CameraSettingsDialogComponent, decorators: [{
             type: Component,
@@ -52642,7 +52717,7 @@ class HomedecoratorModule {
             PluginsModule,
             DialogModule,
             A11yModule,
-            ProductConfiguratorModule, i5.CoreComponentsTranslationModule, LiteSelectorModule], exports: [HomedecoratorComponent] }); }
+            ProductConfiguratorModule, i5$1.CoreComponentsTranslationModule, LiteSelectorModule], exports: [HomedecoratorComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorModule, imports: [CommonModule,
             ProgressBarModule,
             LoadingOverlayModule,