@colijnit/homedecorator 262.1.1 → 262.1.2

package/fesm2022/colijnit-homedecorator.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Injectable, Pipe, Component, Inject, Input, HostBinding, Optional, ViewChild, EventEmitter, ElementRef, Output, Directive, ChangeDetectionStrategy, HostListener, ViewEncapsulation, SkipSelf, Self, NgModule, NO_ERRORS_SCHEMA, forwardRef } from '@angular/core';
 import * as THREE from 'three';
 import { Vector2, Mesh, Object3D, PointLight, Matrix4, Box3, Vector3, Euler, BoxGeometry, MeshBasicMaterial, Scene, AxesHelper, Group, BufferGeometry, Float32BufferAttribute, Line, LineBasicMaterial, CylinderGeometry, EquirectangularReflectionMapping, Material as Material$1, Texture as Texture$1, Source, EventDispatcher, Color, PerspectiveCamera, Quaternion, PlaneGeometry, DoubleSide, MeshStandardMaterial, RingGeometry, MathUtils, Raycaster, DataTexture, UnsignedByteType, LinearFilter, Shape, LinearSRGBColorSpace, SRGBColorSpace, SphereGeometry, PCFSoftShadowMap, ShadowMaterial, LightProbe, DirectionalLight, MeshPhongMaterial, BackSide, FrontSide, NoToneMapping, ReinhardToneMapping, CineonToneMapping, ACESFilmicToneMapping, CustomToneMapping, NeutralToneMapping, BasicShadowMap, PCFShadowMap, VSMShadowMap, OrthographicCamera, WebGLRenderer, TextureLoader, EllipseCurve, ArcCurve, NearestFilter, MeshPhysicalMaterial, Path, ShapeGeometry, ConeGeometry, ObjectLoader, Light, Camera as Camera$1, RepeatWrapping, SpotLight, AmbientLight, HemisphereLight, AdditiveBlending, LineSegments, EdgesGeometry, CircleGeometry, ExtrudeGeometry, InstancedMesh, Clock, AnimationMixer, AnimationClip, BufferAttribute, NoColorSpace, ArrowHelper as ArrowHelper$1, UVMapping, CubeReflectionMapping, CubeRefractionMapping, EquirectangularRefractionMapping, CubeUVReflectionMapping, NearestMipmapNearestFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipMapLinearFilter, LinearMipmapNearestFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipMapLinearFilter, AlphaFormat, RGBAFormat, DepthFormat, DepthStencilFormat, RedFormat, RedIntegerFormat, RGFormat, RGIntegerFormat, RGBAIntegerFormat, ByteType, ShortType, UnsignedShortType, IntType, UnsignedIntType, FloatType, HalfFloatType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedInt248Type, ClampToEdgeWrapping, MirroredRepeatWrapping, ZeroFactor, OneFactor, SrcColorFactor, OneMinusSrcColorFactor, SrcAlphaFactor, OneMinusSrcAlphaFactor, DstAlphaFactor, OneMinusDstAlphaFactor, DstColorFactor, OneMinusDstColorFactor, AddEquation, SubtractEquation, ReverseSubtractEquation, MinEquation, MaxEquation, NoBlending, NormalBlending, SubtractiveBlending, MultiplyBlending, CustomBlending, TangentSpaceNormalMap, ObjectSpaceNormalMap, ZeroStencilOp, KeepStencilOp, ReplaceStencilOp, IncrementStencilOp, DecrementStencilOp, IncrementWrapStencilOp, DecrementWrapStencilOp, InvertStencilOp, NeverStencilFunc, LessStencilFunc, EqualStencilFunc, LessEqualStencilFunc, GreaterStencilFunc, NotEqualStencilFunc, GreaterEqualStencilFunc, AlwaysStencilFunc, SpotLightHelper, DirectionalLightHelper, HemisphereLightHelper, PointLightHelper, GridHelper, PMREMGenerator, BoxHelper } from 'three';
-import { BehaviorSubject, Subject, Observable, throwError, ReplaySubject, combineLatest, from } from 'rxjs';
+import { BehaviorSubject, Subject, Observable, throwError, ReplaySubject, combineLatest, filter as filter$1, take as take$1, from } from 'rxjs';
 import * as TWEEN from '@tweenjs/tween.js';
 import { Selection } from '@colijnit/configuratorapi/build/model/selection';
 import { HdecoPositioning } from '@colijnit/configuratorapi/build/enum/hdeco-positioning.enum';
@@ -41,7 +41,7 @@ import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
 import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
 import { RGBFormat, LinearToneMapping, AgXToneMapping, LinearFilter as LinearFilter$1, LinearSRGBColorSpace as LinearSRGBColorSpace$1, SrcAlphaSaturateFactor, FloatType as FloatType$1 } from 'three/src/constants.js';
-import * as md5 from 'md5';
+import md5 from 'md5';
 import { NodeType } from '@colijnit/configuratorapi/build/enum/node-type.enum';
 import { ConfiguratorStatisticsEnvironment } from '@colijnit/configuratorapi/build/model/configurator-statistics-environment';
 import { Options } from '@colijnit/ioneconnector/build/model/options';
@@ -103,30 +103,28 @@ import { MatIconModule, MatIcon } from '@angular/material/icon';
 import Delaunator from 'delaunator';
 import { VertexNormalsHelper } from 'three/examples/jsm/helpers/VertexNormalsHelper.js';
 import { FileUtils as FileUtils$1 } from '@colijnit/mainapi/build/utils/file-utils';
-import { trigger, state, transition, style, animate, query, animateChild } from '@angular/animations';
+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 { LoaderModule as LoaderModule$1, IconModule, TooltipDirectiveModule, ListOfValuesModule, ButtonModule, InputTextModule, ImageModule, CoreComponentsTranslationModule } from '@colijnit/corecomponents_v12';
-import * as i2$3 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i9 from '@angular/material/select';
+import * as i2$3 from '@angular/material/input';
+import { MatInputModule, MatFormField } from '@angular/material/input';
+import * as i12 from '@angular/material/select';
 import { MatSelectModule, MatSelect, MatOption } from '@angular/material/select';
 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/input';
-import { MatInputModule, MatFormField } from '@angular/material/input';
-import * as i4$1 from '@angular/material/slider';
+import * as i3$3 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 import * as dat from 'dat.gui';
-import * as i6 from '@angular/flex-layout/flex';
+import * as i14 from '@angular/flex-layout/flex';
 import * as i2$4 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i10 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i6$1 from '@angular/cdk/drag-drop';
+import * as i6 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i31 from '@colijnit/modelcreation';
 import { ModelCreationPageModule } from '@colijnit/modelcreation';
@@ -134,13 +132,13 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
 import { TDSLoader } from 'three/examples/jsm/loaders/TDSLoader.js';
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
-import * as i11 from '@angular/material/slide-toggle';
+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 { MatGridListModule } from '@angular/material/grid-list';
 import imageCompression from 'browser-image-compression';
-import * as i4$2 from '@angular/material/tabs';
+import * as i4$1 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i1$5 from 'ngx-color/chrome';
 import { ColorChromeModule } from 'ngx-color/chrome';
@@ -153,7 +151,7 @@ import * as i27 from '@colijnit/configurator';
 import { ConfigurationResultObject, ProductConfiguratorModule, ConfiguratorModule, LiteSelectorModule } from '@colijnit/configurator';
 import * as i31$1 from '@angular/cdk/portal';
 import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
-import * as i4$3 from 'ng2-pdf-viewer';
+import * as i4$2 from 'ng2-pdf-viewer';
 import { PdfViewerComponent, PdfViewerModule } from 'ng2-pdf-viewer';
 import html2canvas from 'html2canvas';
 import * as i23 from '@angular/material/toolbar';
@@ -168,6 +166,7 @@ import * as i33 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 import { ExternalCatalogStartupInfoRequest } from '@colijnit/articleapi/build/model/external-catalog-startup-info-request';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDividerModule } from '@angular/material/divider';
@@ -3300,7 +3299,9 @@ class HomedecoratorSettingsOptions {
         this.useAnimations = true;
         this.useThreedScene = true;
         this.showSlowConnectionWarning = false;
-        this.useExternalOpenSave = false;
+        this.useExternalSave = false;
+        this.useExternalOpen = false;
+        this.shadowSaveToCloud = false;
         this.floorFadeStart = 2.0;
         this.floorFadeEnd = 6.0;
     }
@@ -3658,7 +3659,8 @@ class HomedecoratorAppEventService {
         this.glbCreated = new Subject();
         this.dirty = new Subject();
         this.floorCreated = new BehaviorSubject(undefined);
-        this.externalSave = new BehaviorSubject(undefined);
+        this.externalSave = new Subject();
+        this.externalOpen = new Subject();
         this.searchClick = new Subject();
         this.shareProject = new Subject();
     }
@@ -12652,6 +12654,24 @@ class PresetsService {
         this.stateCreated.next();
         return output;
     }
+    saveToCloud(asNew = false) {
+        return new Promise(async (resolve, reject) => {
+            await Promise.all(this.plugins.map(async (plugin) => await plugin.copySceneInstance(asNew)));
+            const schema = await this.createState(true);
+            if (schema.length > this._permanentStoreService.maxSchemaSize) {
+                return reject('Your project has gotten too large to be stored in the cloud. Please select "Download a copy" to store your project locally.');
+            }
+            this._messageService.emit(MessageType.SavePreset);
+            const sub = this._permanentStoreService.save(schema, asNew).subscribe(code => {
+                window.localStorage.setItem('lastPlanId', code);
+                sub.unsubscribe();
+                return resolve(code);
+            }, error => {
+                reject('Error occured while saving the plan. Please check your connection and try again later.');
+                sub.unsubscribe();
+            });
+        });
+    }
     _loadSavedRoomFromPreset(preset) {
         this._loadRoomPlan(!!preset.model, async () => {
             if (!preset.model) {
@@ -12659,7 +12679,10 @@ class PresetsService {
                 const json = await this._jsonUtils.readJsonFile(path, false);
                 preset.model = JSON.stringify(json);
             }
-            const modelObj = JSON.parse(preset.model);
+            let modelObj = JSON.parse(preset.model);
+            if (typeof modelObj === 'string') { // multiple escapes...?
+                modelObj = JSON.parse(modelObj);
+            }
             if (!modelObj.hasOwnProperty('version')) {
                 modelObj.version = 1.0;
             }
@@ -13764,6 +13787,10 @@ class FloorService {
     _updateFloorMaterial(floor, floorMaterial, texture) {
         ObjectUtils.DisposeMaterial(floor.getMaterial());
         floor.floorMaterial = floorMaterial;
+        if (texture) {
+            // Update the texture as well
+            floor.floorTexture = texture;
+        }
         this._sceneService.needsRender = true;
         this._sceneService.updatePathTracer();
     }
@@ -26916,8 +26943,8 @@ class LightPresetsService {
         this._lightsService.removeAllLights();
         if (lightPreset.hdri) {
             ObjectUtils.LoadHDRI(this._settingsService.settings.assetPath + lightPreset.hdri, this._sceneService.scene).then(() => {
-                this._sceneService.scene.environmentIntensity = lightPreset.hdriIntensity || 1;
-                this._sceneService.scene.backgroundIntensity = lightPreset.hdriIntensity || 1;
+                this._sceneService.scene.environmentIntensity = lightPreset.hdriIntensity !== null && lightPreset.hdriIntensity !== undefined ? lightPreset.hdriIntensity : 1;
+                this._sceneService.scene.backgroundIntensity = lightPreset.hdriIntensity !== null && lightPreset.hdriIntensity !== undefined ? lightPreset.hdriIntensity : 1;
             });
         }
         this._sceneService.renderer.toneMapping = toneMappingMap.get(lightPreset.toneMapping || ToneMappingLocal.ACESFilmicToneMapping);
@@ -27188,7 +27215,7 @@ class LoadFurnitureBaseService {
         }
     }
     addToList(list, item) {
-        if (!item || (!item.instanceId && !item.metaData.objectUUID)) {
+        if (!item || (!item.metaData || (!item.instanceId && !item.metaData.objectUUID))) {
             return;
         }
         if ((item.instanceId && !list.find(l => l.instanceId === item.instanceId)) ||
@@ -27377,7 +27404,7 @@ class DimensionsService {
         this._itemService = _itemService;
         this._sceneService = _sceneService;
         this._fontService = _fontService;
-        this._offSet = 0.05;
+        this._offSet = 0;
         this._labelOffSet = 0.05;
         this._nameHeightArrow = 'height_arrow';
         this._nameWidthArrow = 'width_arrow';
@@ -27432,6 +27459,8 @@ class DimensionsService {
         if (!object.hasOwnProperty('halfSize')) {
             return;
         }
+        const yFlipped = Math.abs(object.rotation.y % (2 * Math.PI) - Math.PI) < 0.001;
+        const direction = yFlipped ? -1 : 1;
         const height = object.getHeight();
         const halfHeight = height / 2;
         const width = object.getWidth();
@@ -27443,7 +27472,7 @@ class DimensionsService {
         const heightArrow = dimensionObject.getObjectByName(this._nameHeightArrow);
         if (heightArrow) {
             ObjectUtils.UpdateArrowLength(heightArrow, height, new Vector3(0, 1, 0), this._headLength, this._headWidth, true);
-            heightArrow.position.set(-(halfWidth + this._offSet), 0, -(halfDepth + this._offSet));
+            heightArrow.position.set(-direction * ((halfWidth + this._offSet)), 0, -direction * (halfDepth + this._offSet));
         }
         const heightLabel = dimensionObject.getObjectByName('height_label');
         if (heightLabel) {
@@ -27453,33 +27482,36 @@ class DimensionsService {
             // newHeightLabel.geometry.rotateX(object.rotation.x);
             // newHeightLabel.geometry.rotateY(-object.rotation.y);
             // newHeightLabel.geometry.rotateZ(object.rotation.z);
-            newHeightLabel.position.set(-(halfWidth + this._offSet), 0, -(halfDepth + this._offSet));
+            const size = this._getBoxSize(newHeightLabel);
+            newHeightLabel.position.set(-direction * (halfWidth + (this._labelOffSet + size.x)), 0, -direction * (halfDepth + this._labelOffSet));
             dimensionObject.add(newHeightLabel);
         }
         const widthArrow = dimensionObject.getObjectByName(this._nameWidthArrow);
         if (widthArrow) {
             ObjectUtils.UpdateArrowLength(widthArrow, width, new Vector3(1, 0, 0), this._headLength, this._headWidth, true);
-            widthArrow.position.set(0, halfHeight + this._offSet, halfDepth + this._offSet);
+            widthArrow.position.set(0, halfHeight + this._offSet, direction * (-halfDepth + this._offSet));
         }
         const widthLabel = dimensionObject.getObjectByName('width_label');
         if (widthLabel) {
             dimensionObject.remove(widthLabel);
             const newWidthLabel = this._createLabel(Dimensioning.mToMeasure(width), 'width_label', object.rotation);
             // newWidthLabel.rotation.set(-object.rotation.x, -object.rotation.y, -object.rotation.z);
-            newWidthLabel.position.set(0, halfHeight + this._offSet, (halfDepth + this._offSet));
+            const size = this._getBoxSize(newWidthLabel);
+            newWidthLabel.position.set(-direction * (size.x / 2), halfHeight + this._labelOffSet, direction * (-halfDepth + this._labelOffSet));
             dimensionObject.add(newWidthLabel);
         }
         const depthArrow = dimensionObject.getObjectByName(this._nameDepthArrow);
         if (depthArrow) {
             ObjectUtils.UpdateArrowLength(depthArrow, depth, new Vector3(0, 0, 1), this._headLength, this._headWidth, true);
-            depthArrow.position.set(-(halfWidth + this._offSet), halfHeight + this._offSet, 0);
+            depthArrow.position.set(-direction * (halfWidth + this._offSet), -halfHeight + this._offSet, 0);
         }
         const depthLabel = dimensionObject.getObjectByName('depth_label');
         if (depthLabel) {
             dimensionObject.remove(depthLabel);
             const newDepthLabel = this._createLabel(Dimensioning.mToMeasure(depth), 'depth_label', object.rotation);
             // newDepthLabel.rotation.set(-object.rotation.x, -object.rotation.y, -object.rotation.z);
-            newDepthLabel.position.set(-(halfWidth + this._offSet), halfHeight + this._offSet, 0);
+            const size = this._getBoxSize(newDepthLabel);
+            newDepthLabel.position.set(-direction * (halfWidth + this._labelOffSet + size.x), -halfHeight + this._labelOffSet, 0);
             dimensionObject.add(newDepthLabel);
         }
     }
@@ -27526,6 +27558,12 @@ class DimensionsService {
         // label.quaternion.copy(new Quaternion().fromArray(new Vector4().setAxisAngleFromQuaternion(this._cameraService.camera.quaternion).negate().toArray()));
         return label;
     }
+    _getBoxSize(mesh) {
+        const box = new Box3().setFromObject(mesh);
+        const size = new Vector3();
+        box.getSize(size);
+        return size;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DimensionsService, deps: [{ token: ItemService }, { token: SceneService }, { token: FontService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DimensionsService }); }
 }
@@ -32411,7 +32449,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: i9.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: i9.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.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 })),
@@ -33173,7 +33211,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: i9.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: i9.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.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,
@@ -34342,7 +34380,7 @@ class RenderControlsComponent {
               </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: i3$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: i9.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: i9.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: i4$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "component", type: RenderProgressComponent, selector: "rp-render-progress", inputs: ["show", "title"] }, { 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: 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", inputs: ["show", "title"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderControlsComponent, decorators: [{
             type: Component,
@@ -34892,11 +34930,11 @@ 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    <input\r\n      matInput\r\n      [min]=\"min\"\r\n      [max]=\"max\"\r\n      type=\"number\"\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: i3$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: i4$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i4$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i6.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: i6.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: i6.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$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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SliderInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rp-slider-input', standalone: false, 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    <input\r\n      matInput\r\n      [min]=\"min\"\r\n      [max]=\"max\"\r\n      type=\"number\"\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"] }]
+            args: [{ selector: 'rp-slider-input', standalone: false, 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"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], min: [{
@@ -35091,7 +35129,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: i3$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: i4$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "component", type: i9.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: i9.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$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: [
             trigger('showHideDialog', [
                 state('void', style({ opacity: 0 })),
                 state('*', style({ opacity: 1 })),
@@ -35175,156 +35213,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: i3$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: i4$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i4$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: i9.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: i9.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$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" }] }); }
 }
 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
@@ -35634,7 +35672,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: i9.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: i9.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i9.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: 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: [
             trigger('showHideDialog', [
                 state('void', style({ opacity: 0 })),
                 state('*', style({ opacity: 1 })),
@@ -36440,7 +36478,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: i3$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: i6.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: i6.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: i6.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: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WallLengthInputComponent, decorators: [{
             type: Component,
@@ -37497,7 +37535,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: i9.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: i9.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.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,
@@ -37741,7 +37779,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$1.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$1.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.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,
@@ -38709,7 +38747,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: i11.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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i9.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: i9.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: 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModelPreviewComponent, decorators: [{
             type: Component,
@@ -39702,7 +39740,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: i6.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: i6.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: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileDropComponent, decorators: [{
             type: Component,
@@ -40271,7 +40309,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: i6.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: i6.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: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TextureEditorComponent, decorators: [{
             type: Component,
@@ -40476,7 +40514,7 @@ class ColorPickerComponent {
         this.colorSelected.emit(color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ColorPickerComponent, isStandalone: false, selector: "rp-color-picker", inputs: { color: "color", selectedTabIndex: "selectedTabIndex" }, outputs: { colorSelected: "colorSelected" }, ngImport: i0, template: "<mat-tab-group color=\"primary\" [(selectedIndex)]=\"selectedTabIndex\" #tabGroup>\r\n  <mat-tab label=\"{{'RAL_COLOR_CATALOGUE' | localize}}\">\r\n    <rp-ral-color-picker\r\n      [color]=\"color\"\r\n      (colorSelected)=\"setColor($event)\"\r\n    >\r\n    </rp-ral-color-picker>\r\n  </mat-tab>\r\n  <mat-tab label=\"{{'RGB_VALUE' | localize}}\">\r\n    <rp-rgb-color-picker\r\n      [color] = \"color\"\r\n      (colorSelected)=\"setColor($event)\"\r\n    >\r\n    </rp-rgb-color-picker>\r\n  </mat-tab>\r\n</mat-tab-group>\r\n", styles: [""], dependencies: [{ kind: "component", type: i4$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4$2.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: RgbColorPickerComponent, selector: "rp-rgb-color-picker", inputs: ["color"], outputs: ["colorSelected"] }, { kind: "component", type: RalColorPickerComponent, selector: "rp-ral-color-picker", inputs: ["color"], outputs: ["colorSelected"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ColorPickerComponent, isStandalone: false, selector: "rp-color-picker", inputs: { color: "color", selectedTabIndex: "selectedTabIndex" }, outputs: { colorSelected: "colorSelected" }, ngImport: i0, template: "<mat-tab-group color=\"primary\" [(selectedIndex)]=\"selectedTabIndex\" #tabGroup>\r\n  <mat-tab label=\"{{'RAL_COLOR_CATALOGUE' | localize}}\">\r\n    <rp-ral-color-picker\r\n      [color]=\"color\"\r\n      (colorSelected)=\"setColor($event)\"\r\n    >\r\n    </rp-ral-color-picker>\r\n  </mat-tab>\r\n  <mat-tab label=\"{{'RGB_VALUE' | localize}}\">\r\n    <rp-rgb-color-picker\r\n      [color] = \"color\"\r\n      (colorSelected)=\"setColor($event)\"\r\n    >\r\n    </rp-rgb-color-picker>\r\n  </mat-tab>\r\n</mat-tab-group>\r\n", styles: [""], dependencies: [{ 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: RgbColorPickerComponent, selector: "rp-rgb-color-picker", inputs: ["color"], outputs: ["colorSelected"] }, { kind: "component", type: RalColorPickerComponent, selector: "rp-ral-color-picker", inputs: ["color"], outputs: ["colorSelected"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -40537,7 +40575,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: i6.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$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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TexturePickerComponent, decorators: [{
             type: Component,
@@ -41031,7 +41069,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: i11.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.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,
@@ -41416,7 +41454,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: i11.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$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4$2.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.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,
@@ -41494,7 +41532,7 @@ class SelectedFloorComponent {
         this.floorSurfaceSize = floorWidth * floorLength;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectedFloorComponent, deps: [{ token: FloorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SelectedFloorComponent, isStandalone: false, selector: "rp-selected-floor", inputs: { floor: "floor", texturePlane: "texturePlane", color: "color" }, outputs: { setTexture: "setTexture", setColor: "setColor" }, ngImport: i0, template: "<section>\r\n  <h3 class=\"mat-subtitle-1\">{{'MEASUREMENTS' | localize}}</h3>\r\n  <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <span class=\"mat-subtitle-2\">{{'AREA' | localize}}:</span>\r\n      <span class=\"mat-subtitle-2\">{{floorSurfaceSize | smToMeasure}}</span>\r\n  </div>\r\n\r\n  <mat-divider></mat-divider>\r\n\r\n  <h3 class=\"mat-subtitle-1\">{{'APPEARANCE' | localize}}</h3>\r\n  <rp-appearance-section\r\n    type=\"floor\"\r\n    [texturePlane]=\"texturePlane\"\r\n    [color]=\"color\"\r\n    [photoOptions]=\"Options.Tiles\"\r\n    (setTexture)=\"setTexture.emit($event)\"\r\n    (setColor)=\"setColor.emit($event)\"\r\n  >\r\n  </rp-appearance-section>\r\n</section>\r\n", styles: [":host{overflow:hidden}:host section{overflow-y:auto;height:100%}.panel-item{height:40px;line-height:40px}.panel-item+h3{margin-top:16px}\n"], dependencies: [{ kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6.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: i6.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: 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" }, { kind: "pipe", type: SmToMeasurePipe, name: "smToMeasure" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SelectedFloorComponent, isStandalone: false, selector: "rp-selected-floor", inputs: { floor: "floor", texturePlane: "texturePlane", color: "color" }, outputs: { setTexture: "setTexture", setColor: "setColor" }, ngImport: i0, template: "<section>\r\n  <h3 class=\"mat-subtitle-1\">{{'MEASUREMENTS' | localize}}</h3>\r\n  <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <span class=\"mat-subtitle-2\">{{'AREA' | localize}}:</span>\r\n      <span class=\"mat-subtitle-2\">{{floorSurfaceSize | smToMeasure}}</span>\r\n  </div>\r\n\r\n  <mat-divider></mat-divider>\r\n\r\n  <h3 class=\"mat-subtitle-1\">{{'APPEARANCE' | localize}}</h3>\r\n  <rp-appearance-section\r\n    type=\"floor\"\r\n    [texturePlane]=\"texturePlane\"\r\n    [color]=\"color\"\r\n    [photoOptions]=\"Options.Tiles\"\r\n    (setTexture)=\"setTexture.emit($event)\"\r\n    (setColor)=\"setColor.emit($event)\"\r\n  >\r\n  </rp-appearance-section>\r\n</section>\r\n", styles: [":host{overflow:hidden}:host section{overflow-y:auto;height:100%}.panel-item{height:40px;line-height:40px}.panel-item+h3{margin-top:16px}\n"], dependencies: [{ 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: 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" }, { kind: "pipe", type: SmToMeasurePipe, name: "smToMeasure" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectedFloorComponent, decorators: [{
             type: Component,
@@ -41552,7 +41590,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: i3$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: i6.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: i6.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: i6.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: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DimensionInputComponent, decorators: [{
             type: Component,
@@ -41731,7 +41769,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: i11.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$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4$2.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: i6.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: i6.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.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,
@@ -41839,7 +41877,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: i3$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: i4$1.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$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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectedThreedObjectComponent, decorators: [{
             type: Component,
@@ -41899,7 +41937,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: i11.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: i6.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: i6.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: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectedWallComponent, decorators: [{
             type: Component,
@@ -41965,46 +42003,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: i11.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: i3$2.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 })),
@@ -42014,45 +42052,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 })),
@@ -42232,7 +42270,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: i3$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: i4$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i4$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: i11.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: i9.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: i9.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: i6.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: i6.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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsComponent, decorators: [{
             type: Component,
@@ -42459,7 +42497,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: i3$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: i11.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: i9.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: i9.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: i6.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: i6.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: i6.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: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomShapeCreatorComponent, decorators: [{
             type: Component,
@@ -42636,7 +42674,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: i3$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: i11.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: i9.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: i9.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: i6.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: i6.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: i6.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: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomCylinderCreatorComponent, decorators: [{
             type: Component,
@@ -44141,7 +44179,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: i6.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: i6.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: "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: 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: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoomPlannerComponent, decorators: [{
             type: Component,
@@ -45317,7 +45355,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: 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: [
             trigger('showHideEditMenu', [
                 state('void', style({ 'height': '0', opacity: 0 })),
                 state('*', style({ 'height': '*', opacity: 1 })),
@@ -45333,7 +45371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             state('*', style({ 'height': '*', opacity: 1 })),
                             transition('void <=> *', animate(200))
                         ])
-                    ], standalone: false, 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"] }]
+                    ], standalone: false, 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"] }]
         }], ctorParameters: () => [{ type: HomedecoratorSettingsService }, { type: HomedecoratorIconCacheService }], propDecorators: { elementPointer: [{
                 type: ViewChild,
                 args: ['elementPointer', { read: ElementRef, static: true }]
@@ -45854,7 +45892,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: i4$1.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$3.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,
@@ -45871,7 +45909,7 @@ class ThreedselectorComponent {
     get loadConfigurator() {
         return this._loadConfigurator;
     }
-    constructor(screenSizeService, _dialog, _appService, _iOne, _messageBus, _loadFurnitureService, _buildFurnitureService, _toastService, _messageService, _sceneService, _dialogService, _cameraService, _presetsService, _itemService, _settingsService, _appEventService, _bluePrintService, _wallService, _floorService, _iconCacheService, _googleTagManager, _appStateService, _progressService, _resizeService, _connectorAdapterService, _lightPresetService, _variationService, _configuringService) {
+    constructor(screenSizeService, _dialog, _appService, _iOne, _messageBus, _loadFurnitureService, _buildFurnitureService, _toastService, _messageService, _sceneService, _dialogService, _cameraService, _presetsService, _itemService, _settingsService, _appEventService, _bluePrintService, _wallService, _floorService, _iconCacheService, _googleTagManager, _appStateService, _progressService, _resizeService, _connectorAdapterService, _lightPresetService, _variationService, _configuringService, _configuratorEventService, _changeDetector) {
         this.screenSizeService = screenSizeService;
         this._dialog = _dialog;
         this._appService = _appService;
@@ -45900,6 +45938,8 @@ class ThreedselectorComponent {
         this._lightPresetService = _lightPresetService;
         this._variationService = _variationService;
         this._configuringService = _configuringService;
+        this._configuratorEventService = _configuratorEventService;
+        this._changeDetector = _changeDetector;
         this.iconName = IconName;
         this.customizeButtonClicked = new EventEmitter();
         this.selections = [];
@@ -45924,6 +45964,7 @@ class ThreedselectorComponent {
         this.showProgressText = true; // Show/Hide progress text
         this.showLoaderBar = false;
         this.showFullConfiguration = false;
+        this.firstBuild = false;
         this._loadConfigurator = false;
         this._skuAlreadySet = false;
         this._itemsFromScratch = [];
@@ -45936,7 +45977,9 @@ class ThreedselectorComponent {
         this._presetsService.register(this);
     }
     ngOnInit() {
-        this._subs.push(this._appEventService.answerCountReceived.subscribe((answerCount) => this._handleAnswerCountReceived(answerCount)), this._messageBus.subscribe(MessageType.LoadIOneFurnitureIntoSceneBySKU, ({ sku, settings, position }) => this._handleLoadIOneFurnitureIntoSceneBySKU(sku, settings, position)), this._messageBus.subscribe(MessageType.CopyIOneFurnitureIntoSceneBySKU, (original) => this._handleCopyIOneFurnitureIntoSceneBySKU(original)), this._buildFurnitureService.currentActiveService.configureModeChanged.subscribe(configuringModeChange => this._handleConfigureModeChange(configuringModeChange)), this._buildFurnitureService.currentActiveService.toggleSelectedElement.subscribe((element) => this._selectedElementToggle(element)), this._buildFurnitureService.currentActiveService.buildFinished.subscribe((result) => this._handleBuildFinished(result)), this._buildFurnitureService.currentActiveService.answerSelected.subscribe((result) => this._answerSelected(result)), this._sceneService.onAfterRender.subscribe(() => this._handleRender()), 
+        this._subs.push(this._appEventService.answerCountReceived.subscribe((answerCount) => this._handleAnswerCountReceived(answerCount)), this._messageBus.subscribe(MessageType.LoadIOneFurnitureIntoSceneBySKU, ({ sku, settings, position }) => this._handleLoadIOneFurnitureIntoSceneBySKU(sku, settings, position)), this._messageBus.subscribe(MessageType.CopyIOneFurnitureIntoSceneBySKU, (original) => this._handleCopyIOneFurnitureIntoSceneBySKU(original)), this._configuratorEventService.buildFinished.subscribe((result) => {
+            this.handleBuildResult(result);
+        }), this._buildFurnitureService.currentActiveService.configureModeChanged.subscribe(configuringModeChange => this._handleConfigureModeChange(configuringModeChange)), this._buildFurnitureService.currentActiveService.toggleSelectedElement.subscribe((element) => this._selectedElementToggle(element)), this._buildFurnitureService.currentActiveService.buildFinished.subscribe((result) => this._handleBuildFinished(result)), this._buildFurnitureService.currentActiveService.answerSelected.subscribe((result) => this._answerSelected(result)), this._sceneService.onAfterRender.subscribe(() => this._handleRender()), 
         // this._appService.skuSet.subscribe(sku => this._handleSkuSet(sku)),
         this._appService.materialPreviewSet.subscribe(material => this._handleMaterialSet(material)), this._appService.materialPreviewUpdate.subscribe(material => this._updateMaterialPreview(material)), this._appEventService.articleInfoReceived.subscribe(info => this._handleInfoClick(info)), this._messageService.subscribe(MessageType.UndefinedErrorOccured, () => this._handleUndefinedErrorOccured()), this._presetsService.afterLoad.subscribe(() => this._afterLoadFromPreset()), this._messageBus.subscribe(MessageType.Undo, () => this._clearItems()), this._messageBus.subscribe(MessageType.Redo, () => this._clearItems()), this._messageBus.subscribe(MessageType.StartWithEmptyRoom, () => this._clearItems()), this._messageBus.subscribe(MessageType.StartWithPreset, () => this._clearItems()), this._messageBus.subscribe(MessageType.LoadRoomFromPreset, () => this._clearItems()), this._messageBus.subscribe(MessageType.LoadRoomFromCloud, () => this._clearItems()), this._messageBus.subscribe(MessageType.NewRoom, () => this._clearItems()), this._messageBus.subscribe(MessageType.ResetRoomplan, () => this._clearItems()), this._messageBus.subscribe(MessageType.LoadScaledDiagram, () => this._clearItems()), this._presetsService.beforeLoad.subscribe(() => this._clearItems()), this._messageService.subscribe(MessageType.ItemSelected, (item) => this.objectSelected(item)), this._messageService.subscribe(MessageType.ItemUnselected, () => this._removeButtons()), this._messageService.subscribe(MessageType.UserModelUploaded, (data) => this._addUploadedItem(data)), this.screenSizeService.screenSizeChanged.subscribe((info) => {
             this.shouldShowLabel = info.isPhoneSize;
@@ -46077,6 +46120,9 @@ class ThreedselectorComponent {
     }
     // NEW CONFIGURATOR
     async handleBuildResult(result) {
+        if (!result || this.firstBuild) {
+            return;
+        }
         const customFloorGroupResult = new CustomFloorGroupResult();
         const metaData = this.setMetadateFromObject(result);
         if (result && !isFloorDecoration(result.placement)) {
@@ -46136,7 +46182,7 @@ class ThreedselectorComponent {
                 this._sceneService.needsRender = true;
             }
             else if (result.resultType === ResultType.NeedsUserInput) {
-                this._configuringService.isConfiguring = true;
+                // this._configuringService.isConfiguring = true;
             }
             else if (result.resultType === ResultType.BuildFromScratch) {
                 // if (this._loadedFromPreset) { // start configuring when loading is done
@@ -46224,10 +46270,10 @@ class ThreedselectorComponent {
         }
     }
     showConfiguratorChange(show) {
-        this._configuringService.isConfiguring = show;
         this.loadConfigurator = show;
     }
     async loadFurnitureFromSku(position, sku, settings) {
+        this.firstBuild = true;
         const configuratorSettings = this._settingsService.settings.projectSettings ?
             this._settingsService.settings.projectSettings : this._settingsService.settings;
         const configuratorSettingsClone = Object.assign({}, configuratorSettings);
@@ -46249,14 +46295,16 @@ class ThreedselectorComponent {
             }
         }
         this._configuringService.scene = this._sceneService.scene;
-        await this._configuringService.init(configuratorSettingsClone);
-        const furnitureData = new ConfigurationResultObject();
-        furnitureData.sku = sku;
-        this._configuringService.isConfiguring = false;
-        await this._configuringService.configure(furnitureData);
+        this._initConfigurator(configuratorSettingsClone, sku);
+        // await this._configuringService.init(configuratorSettingsClone);
+        // const furnitureData: ConfigurationResultObject = new ConfigurationResultObject();
+        // furnitureData.sku = sku;
+        // this._configuringService.isConfiguring = false;
+        // await this._configuringService.configure(furnitureData);
         this._startPosition = position;
         this.loadConfigurator = true;
-        return this.handleBuildResult(this._configuringService.buildResult);
+        this._changeDetector.detectChanges();
+        return this._waitForBuildToFinish(); // handleBuildResult(this._configuringService.buildResult);
     }
     async configureFurniture(object) {
         if (object instanceof Item) {
@@ -46267,16 +46315,37 @@ class ThreedselectorComponent {
                 this._externalSourceData = object.metadata.externalSettings; // set it so we can restore them with the new config.
             }
             // make sure that if the object contains metadata, we set from project true
-            await this._configuringService.init(configuratorSettingsClone);
-            const furnitureData = new ConfigurationResultObject();
-            furnitureData.sku = object.metadata.itemIdentifier;
-            furnitureData.instanceId = object.metadata.itemId;
-            this._configuringService.isConfiguring = true;
-            await this._configuringService.configure(furnitureData);
+            // await this._configuringService.init(configuratorSettingsClone);
+            this._initConfigurator(configuratorSettingsClone, object.metadata.itemIdentifier, object.metadata.itemId);
+            // const furnitureData: ConfigurationResultObject = new ConfigurationResultObject();
+            // furnitureData.sku = object.metadata.itemIdentifier;
+            // furnitureData.instanceId = object.metadata.itemId;
+            // this._configuringService.isConfiguring = true;
+            // await this._configuringService.configure(furnitureData);
             this._loadFurnitureService.currentActiveService.configurationDirty = true;
             this.loadConfigurator = true;
         }
     }
+    _initConfigurator(settings, sku, instanceId) {
+        this.configuratorSettings = settings;
+        this.configuratorSku = sku;
+        this.configuratorInstanceId = instanceId;
+    }
+    _resetConfigurator() {
+        this.configuratorSettings = undefined;
+        this.configuratorSku = undefined;
+        this.configuratorInstanceId = undefined;
+        this.loadConfigurator = false;
+        this.firstBuild = false;
+    }
+    _waitForBuildToFinish() {
+        return new Promise((resolve, reject) => {
+            this._configuratorEventService.buildFinished.pipe(filter$1(value => value !== undefined && value !== null), take$1(1)).subscribe((result) => {
+                this._resetConfigurator();
+                resolve(this.handleBuildResult(result));
+            });
+        });
+    }
     async _setSourceSettings(configuratorExternalSourceId) {
         const configuratorSettings = this._settingsService.settings.projectSettings ?
             this._settingsService.settings.projectSettings : this._settingsService.settings;
@@ -46301,7 +46370,7 @@ class ThreedselectorComponent {
         return configuratorSettingsClone;
     }
     _closeConfigurator() {
-        this._configuringService.isConfiguring = false;
+        // this._configuringService.isConfiguring = false;
         this.loadConfigurator = false;
     }
     _clearItems() {
@@ -46746,9 +46815,7 @@ class ThreedselectorComponent {
             }
             this._prepareAddButtons();
         }
-        if (this._callBackFnWhenBuildFinished && this.standAlone) {
-            this._callBackFnWhenBuildFinished(result.furniture);
-        }
+        // this.handleBuildResult(result);
     }
     _resetElementPosition() {
         if (this.selectedElement && !this.standAlone) {
@@ -47178,7 +47245,7 @@ class ThreedselectorComponent {
             this._externalSourceData = furnitureData.externalSettings; // set it so we can restore them with the new config.
         }
         this._configuringService.scene = this._sceneService.scene;
-        await this._configuringService.init(configuratorSettingsClone);
+        // await this._configuringService.init(configuratorSettingsClone);
         const data = new ConfigurationResultObject();
         data.sku = furnitureData.itemIdentifier;
         data.articleName = furnitureData.itemName;
@@ -47198,7 +47265,7 @@ class ThreedselectorComponent {
         data.rotation = furnitureData.rotation;
         data.originalMetadata = furnitureData;
         await this._configuringService.configure(data, shouldCopyInstance, looseOriginalConfiguration, standAlone, fromScratch, fromPreset, loadFromProject);
-        this._configuringService.isConfiguring = false;
+        // this._configuringService.isConfiguring = false;
         this.loadConfigurator = true;
     }
     _answerSelected(result) {
@@ -47247,6 +47314,7 @@ class ThreedselectorComponent {
         else {
             this._appStateService.undoDisabled = false;
             this._appStateService.redoDisabled = false;
+            this.loadConfigurator = false;
         }
         this.showAnswers = false;
         this.showSelections = configuringModeChange.configuring || this.standAlone;
@@ -47327,8 +47395,8 @@ class ThreedselectorComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ThreedselectorComponent, deps: [{ token: ScreenSizeAnalysisService }, { token: i1$2.MatDialog }, { token: HomedecoratorAppService }, { token: HomedecoratorConnectorService }, { token: MessageBusService }, { token: SwitchLoadFurnitureService }, { token: SwitchBuildFurnitureService }, { token: ToastService }, { token: MessageBusService }, { token: SceneService }, { token: DialogService }, { token: CameraService }, { token: PresetsService }, { token: ItemService }, { token: HomedecoratorSettingsService }, { token: HomedecoratorAppEventService }, { token: BluePrintService }, { token: WallService }, { token: FloorService }, { token: HomedecoratorIconCacheService }, { token: GoogleTagManagerService }, { token: AppStateService }, { token: ProgressService }, { token: ResizeService }, { token: HomedecoratorConnectorAdapterService }, { token: LightPresetsService }, { token: VariationService }, { token: i27.ConfiguringService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ThreedselectorComponent, isStandalone: false, selector: "rp-threedselector", inputs: { selections: "selections" }, outputs: { customizeButtonClicked: "customizeButtonClicked" }, viewQueries: [{ propertyName: "toolbarIconModels", first: true, predicate: ["toolbarIconModels"], descendants: true, static: true }, { propertyName: "selectedThreedObjectCustomizationSidebar", first: true, predicate: ["selectedThreedObjectCustomizationSidebar"], descendants: true, static: true }, { propertyName: "selectedThreedObjectAnimationSidebar", first: true, predicate: ["selectedThreedObjectAnimationSidebar"], descendants: true, static: true }, { propertyName: "customizeButtonClicked", first: true, predicate: ElementToolbarComponent, descendants: true, static: true }], ngImport: i0, template: "@if (loadConfigurator) {\r\n  <co-configurator\r\n    class=\"floating\"\r\n    [showErrorMessages]=\"true\"\r\n    [showLoader]=\"true\"\r\n    [outputErrorMessages]=\"true\"\r\n    (buildResult)=\"handleBuildResult($event)\"\r\n    (errorMessages)=\"handleErrorMessages($event)\"\r\n    (showChange)=\"showConfiguratorChange($event)\">\r\n  </co-configurator>\r\n}\r\n\r\n@if (showElementToolbar) {\r\n  <rp-element-toolbar class=\"rp-element-toolbar floating\" [class.custom]=\"standAlone\" @showElementToolbar\r\n    [editMenu]=\"editElementMenu\"\r\n    [showSwap]=\"showSwapButton\"\r\n    [showPointer]=\"selectedElementPosition !== undefined\"\r\n    (swapClicked)=\"swapElement()\"\r\n    (deleteClicked)=\"deleteElement()\"\r\n    (animationClicked)=\"openAnimationSidebar()\"\r\n  ></rp-element-toolbar>\r\n  <rp-element-buttons class=\"rp-element-buttons floating\" [class.animate]=\"animateEditAddButtons\"\r\n    [elementPointer]=\"elementToolbar?.elementPointer\"\r\n    [addButtons]=\"editAddButtons\"\r\n    [customizeButtons]=\"editCustomizeButton\"\r\n    [resizeButtons]=\"resizeButtons\"\r\n    [elementPosition]=\"selectedElementPosition\"\r\n    (customizeButtonClicked)=\"handleCustomizeClick()\"\r\n  ></rp-element-buttons>\r\n}\r\n\r\n@if (showCustomizeButtons) {\r\n  <rp-element-buttons class=\"rp-element-buttons floating\" [class.animate]=\"animateEditAddButtons\"\r\n    [elementPointer]=\"elementToolbar?.elementPointer\"\r\n    [customizeButtons]=\"editCustomizeButton\"\r\n    [elementPosition]=\"selectedElementPosition\"\r\n    (customizeButtonClicked)=\"handleCustomizeClick()\"\r\n  ></rp-element-buttons>\r\n}\r\n\r\n<ng-template #toolbarIconModels>\r\n  <rp-toolbar-icon\r\n    matIcon=\"list\"\r\n    tooltip=\"{{iconName.Objects | localize}}\"\r\n    (onClick)=\"setModelErrorDialog()\"\r\n    [showLabel]=\"shouldShowLabel\"\r\n  ></rp-toolbar-icon>\r\n</ng-template>\r\n\r\n<ng-template #selectedThreedObjectAnimationSidebar>\r\n  <header class=\"drawer__header\">\r\n    <h2 class=\"mat-headline-6\" [textContent]=\"'ANIMATE' | localize\"></h2>\r\n  </header>\r\n</ng-template>\r\n\r\n<ng-template #selectedThreedObjectCustomizationSidebar>\r\n  <header class=\"drawer__header\">\r\n    <h2 class=\"mat-headline-6\" [textContent]=\"'CUSTOMIZE' | localize\"></h2>\r\n  </header>\r\n</ng-template>\r\n\r\n<div class=\"slider-container\">\r\n  <rp-element-slider class=\"rp-element-slider\"></rp-element-slider>\r\n</div>\r\n", styles: [":host{position:absolute;top:0;left:0;pointer-events:none;margin:0;padding:0;width:100%;height:100%;overflow:hidden}:host .rp-element-buttons.animate ::ng-deep .element-add-button{animation-name:pulse-add-buttons;animation-duration:.4s;animation-iteration-count:6;animation-direction:alternate}:host>*{pointer-events:all}.input-wrapper{display:flex;flex-direction:column}.flex-wrap{display:flex;flex-flow:column nowrap;height:100%}.logo-menu-5th{position:absolute;top:220px;left:84px}.logo-menu-5th.front .mat-mdc-raised-button{width:170px;text-align:left}.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}.on-top{z-index:3}.solid-background{fill:#fff;background:#fff}.solid-background>*{fill:#fff;background:#fff}.button-close{height:36px;width:36px;min-width:initial;padding:0;border:none;position:absolute;right:20px;top:15px;border-radius:50%}.remove-all{position:absolute;top:15px;right:71px}#loader{width:300px;position:fixed;top:25%;left:50%;margin-left:-200px;background-color:#fff;border-radius:15px;transform:translate(-50%,-50%);text-align:center;font-family:Public sans,serif;z-index:1000;box-sizing:border-box;padding:15px}#loader.full{width:100%;top:0;left:0;margin-left:0;border-radius:0;transform:none;z-index:auto;padding:0;position:absolute}#loader.full #progress-bar{width:100%;height:5px;border:none;margin-top:0;border-radius:0}#loader-text{font-family:Public sans,serif;font-size:15px}#progress-bar{width:270px;height:20px;border:1px solid transparent;background:#e0e0e0;position:relative;margin-top:10px;border-radius:15px;overflow:hidden}.circular-progress-wrapper{position:absolute;width:90px;height:90px;left:50%;top:50%;transform:translate(-50%,-50%)}.circular-progress{width:90px;height:90px;transform:rotate(-90deg)}.bg{fill:none;stroke:#d1cec5;stroke-width:2}.progress{fill:none;stroke:#979284;stroke-width:2;stroke-linecap:round;transition:stroke-dasharray .3s ease}.percentage{position:absolute;top:0;left:0;width:90px;height:90px;font-size:16px;font-weight:600;line-height:90px;text-align:center;color:#979284}#progress{height:100%;width:0;background:#da9803;transition:width .3s}@keyframes pulse-add-buttons{50%{box-shadow:0 0 20px #ff5c33}}\n"], dependencies: [{ kind: "component", type: ToolbarIconComponent, selector: "rp-toolbar-icon", inputs: ["matIcon", "svgIcon", "tooltip", "disabled", "showLabel"], outputs: ["onClick"] }, { kind: "component", type: i27.ConfiguratorComponent, selector: "co-configurator", inputs: ["showLoader", "showProgressBar", "showErrorMessages", "outputErrorMessages", "canCloseConfigurator", "animateSlideout", "showHeaderInformation"], outputs: ["buildResult", "isLoading", "updateProgressBar", "errorMessages", "showChange"] }, { kind: "component", type: ElementToolbarComponent, selector: "rp-element-toolbar", inputs: ["editMenu", "showPointer", "showSwap"], outputs: ["deleteClicked", "swapClicked", "animationClicked"] }, { kind: "component", type: ElementButtonsComponent, selector: "rp-element-buttons", inputs: ["addButtons", "customizeButtons", "resizeButtons", "elementPointer", "elementPosition"], outputs: ["customizeButtonClicked"] }, { kind: "component", type: ElementSliderComponent, selector: "rp-element-slider" }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ThreedselectorComponent, deps: [{ token: ScreenSizeAnalysisService }, { token: i1$2.MatDialog }, { token: HomedecoratorAppService }, { token: HomedecoratorConnectorService }, { token: MessageBusService }, { token: SwitchLoadFurnitureService }, { token: SwitchBuildFurnitureService }, { token: ToastService }, { token: MessageBusService }, { token: SceneService }, { token: DialogService }, { token: CameraService }, { token: PresetsService }, { token: ItemService }, { token: HomedecoratorSettingsService }, { token: HomedecoratorAppEventService }, { token: BluePrintService }, { token: WallService }, { token: FloorService }, { token: HomedecoratorIconCacheService }, { token: GoogleTagManagerService }, { token: AppStateService }, { token: ProgressService }, { token: ResizeService }, { token: HomedecoratorConnectorAdapterService }, { token: LightPresetsService }, { token: VariationService }, { token: i27.ConfiguringService }, { token: i27.ConfiguratorEventService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ThreedselectorComponent, isStandalone: false, selector: "rp-threedselector", inputs: { selections: "selections" }, outputs: { customizeButtonClicked: "customizeButtonClicked" }, viewQueries: [{ propertyName: "toolbarIconModels", first: true, predicate: ["toolbarIconModels"], descendants: true, static: true }, { propertyName: "selectedThreedObjectCustomizationSidebar", first: true, predicate: ["selectedThreedObjectCustomizationSidebar"], descendants: true, static: true }, { propertyName: "selectedThreedObjectAnimationSidebar", first: true, predicate: ["selectedThreedObjectAnimationSidebar"], descendants: true, static: true }, { propertyName: "customizeButtonClicked", first: true, predicate: ElementToolbarComponent, descendants: true, static: true }], ngImport: i0, template: "@if (true) {\r\n  <co-configurator\r\n    class=\"floating\"\r\n    [settings]=\"configuratorSettings\"\r\n    [sku]=\"configuratorSku\"\r\n    [instanceId]=\"configuratorInstanceId\"\r\n    [show]=\"loadConfigurator && !firstBuild\"\r\n    [showErrorMessages]=\"true\"\r\n    [showLoader]=\"true\"\r\n    [outputErrorMessages]=\"true\"\r\n    (errorMessages)=\"handleErrorMessages($event)\"\r\n    (showChange)=\"showConfiguratorChange($event)\">\r\n  </co-configurator>\r\n}\r\n\r\n@if (showElementToolbar) {\r\n  <rp-element-toolbar class=\"rp-element-toolbar floating\" [class.custom]=\"standAlone\" @showElementToolbar\r\n    [editMenu]=\"editElementMenu\"\r\n    [showSwap]=\"showSwapButton\"\r\n    [showPointer]=\"selectedElementPosition !== undefined\"\r\n    (swapClicked)=\"swapElement()\"\r\n    (deleteClicked)=\"deleteElement()\"\r\n    (animationClicked)=\"openAnimationSidebar()\"\r\n  ></rp-element-toolbar>\r\n  <rp-element-buttons class=\"rp-element-buttons floating\" [class.animate]=\"animateEditAddButtons\"\r\n    [elementPointer]=\"elementToolbar?.elementPointer\"\r\n    [addButtons]=\"editAddButtons\"\r\n    [customizeButtons]=\"editCustomizeButton\"\r\n    [resizeButtons]=\"resizeButtons\"\r\n    [elementPosition]=\"selectedElementPosition\"\r\n    (customizeButtonClicked)=\"handleCustomizeClick()\"\r\n  ></rp-element-buttons>\r\n}\r\n\r\n@if (showCustomizeButtons) {\r\n  <rp-element-buttons class=\"rp-element-buttons floating\" [class.animate]=\"animateEditAddButtons\"\r\n    [elementPointer]=\"elementToolbar?.elementPointer\"\r\n    [customizeButtons]=\"editCustomizeButton\"\r\n    [elementPosition]=\"selectedElementPosition\"\r\n    (customizeButtonClicked)=\"handleCustomizeClick()\"\r\n  ></rp-element-buttons>\r\n}\r\n\r\n<ng-template #toolbarIconModels>\r\n  <rp-toolbar-icon\r\n    matIcon=\"list\"\r\n    tooltip=\"{{iconName.Objects | localize}}\"\r\n    (onClick)=\"setModelErrorDialog()\"\r\n    [showLabel]=\"shouldShowLabel\"\r\n  ></rp-toolbar-icon>\r\n</ng-template>\r\n\r\n<ng-template #selectedThreedObjectAnimationSidebar>\r\n  <header class=\"drawer__header\">\r\n    <h2 class=\"mat-headline-6\" [textContent]=\"'ANIMATE' | localize\"></h2>\r\n  </header>\r\n</ng-template>\r\n\r\n<ng-template #selectedThreedObjectCustomizationSidebar>\r\n  <header class=\"drawer__header\">\r\n    <h2 class=\"mat-headline-6\" [textContent]=\"'CUSTOMIZE' | localize\"></h2>\r\n  </header>\r\n</ng-template>\r\n\r\n<div class=\"slider-container\">\r\n  <rp-element-slider class=\"rp-element-slider\"></rp-element-slider>\r\n</div>\r\n", styles: [":host{position:absolute;top:0;left:0;pointer-events:none;margin:0;padding:0;width:100%;height:100%;overflow:hidden}:host .rp-element-buttons.animate ::ng-deep .element-add-button{animation-name:pulse-add-buttons;animation-duration:.4s;animation-iteration-count:6;animation-direction:alternate}:host>*{pointer-events:all}.input-wrapper{display:flex;flex-direction:column}.flex-wrap{display:flex;flex-flow:column nowrap;height:100%}.logo-menu-5th{position:absolute;top:220px;left:84px}.logo-menu-5th.front .mat-mdc-raised-button{width:170px;text-align:left}.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}.on-top{z-index:3}.solid-background{fill:#fff;background:#fff}.solid-background>*{fill:#fff;background:#fff}.button-close{height:36px;width:36px;min-width:initial;padding:0;border:none;position:absolute;right:20px;top:15px;border-radius:50%}.remove-all{position:absolute;top:15px;right:71px}#loader{width:300px;position:fixed;top:25%;left:50%;margin-left:-200px;background-color:#fff;border-radius:15px;transform:translate(-50%,-50%);text-align:center;font-family:Public sans,serif;z-index:1000;box-sizing:border-box;padding:15px}#loader.full{width:100%;top:0;left:0;margin-left:0;border-radius:0;transform:none;z-index:auto;padding:0;position:absolute}#loader.full #progress-bar{width:100%;height:5px;border:none;margin-top:0;border-radius:0}#loader-text{font-family:Public sans,serif;font-size:15px}#progress-bar{width:270px;height:20px;border:1px solid transparent;background:#e0e0e0;position:relative;margin-top:10px;border-radius:15px;overflow:hidden}.circular-progress-wrapper{position:absolute;width:90px;height:90px;left:50%;top:50%;transform:translate(-50%,-50%)}.circular-progress{width:90px;height:90px;transform:rotate(-90deg)}.bg{fill:none;stroke:#d1cec5;stroke-width:2}.progress{fill:none;stroke:#979284;stroke-width:2;stroke-linecap:round;transition:stroke-dasharray .3s ease}.percentage{position:absolute;top:0;left:0;width:90px;height:90px;font-size:16px;font-weight:600;line-height:90px;text-align:center;color:#979284}#progress{height:100%;width:0;background:#da9803;transition:width .3s}@keyframes pulse-add-buttons{50%{box-shadow:0 0 20px #ff5c33}}\n"], dependencies: [{ kind: "component", type: ToolbarIconComponent, selector: "rp-toolbar-icon", inputs: ["matIcon", "svgIcon", "tooltip", "disabled", "showLabel"], outputs: ["onClick"] }, { kind: "component", type: i27.ConfiguratorComponent, selector: "co-configurator", inputs: ["show", "sku", "instanceId", "settings", "scene", "showLoader", "showProgressBar", "showErrorMessages", "outputErrorMessages", "canCloseConfigurator", "animateSlideout", "showHeaderInformation"], outputs: ["isLoading", "updateProgressBar", "errorMessages", "showChange"] }, { kind: "component", type: ElementToolbarComponent, selector: "rp-element-toolbar", inputs: ["editMenu", "showPointer", "showSwap"], outputs: ["deleteClicked", "swapClicked", "animationClicked"] }, { kind: "component", type: ElementButtonsComponent, selector: "rp-element-buttons", inputs: ["addButtons", "customizeButtons", "resizeButtons", "elementPointer", "elementPosition"], outputs: ["customizeButtonClicked"] }, { kind: "component", type: ElementSliderComponent, selector: "rp-element-slider" }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('showElementToolbar', [
                 state('void', style({ opacity: 0 })),
                 state('*', style({ opacity: 1 })),
@@ -47346,8 +47414,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             transition('void => *', animate('500ms ease'))
                         ])
                     ] /*,
-                      changeDetection: ChangeDetectionStrategy.OnPush*/, standalone: false, template: "@if (loadConfigurator) {\r\n  <co-configurator\r\n    class=\"floating\"\r\n    [showErrorMessages]=\"true\"\r\n    [showLoader]=\"true\"\r\n    [outputErrorMessages]=\"true\"\r\n    (buildResult)=\"handleBuildResult($event)\"\r\n    (errorMessages)=\"handleErrorMessages($event)\"\r\n    (showChange)=\"showConfiguratorChange($event)\">\r\n  </co-configurator>\r\n}\r\n\r\n@if (showElementToolbar) {\r\n  <rp-element-toolbar class=\"rp-element-toolbar floating\" [class.custom]=\"standAlone\" @showElementToolbar\r\n    [editMenu]=\"editElementMenu\"\r\n    [showSwap]=\"showSwapButton\"\r\n    [showPointer]=\"selectedElementPosition !== undefined\"\r\n    (swapClicked)=\"swapElement()\"\r\n    (deleteClicked)=\"deleteElement()\"\r\n    (animationClicked)=\"openAnimationSidebar()\"\r\n  ></rp-element-toolbar>\r\n  <rp-element-buttons class=\"rp-element-buttons floating\" [class.animate]=\"animateEditAddButtons\"\r\n    [elementPointer]=\"elementToolbar?.elementPointer\"\r\n    [addButtons]=\"editAddButtons\"\r\n    [customizeButtons]=\"editCustomizeButton\"\r\n    [resizeButtons]=\"resizeButtons\"\r\n    [elementPosition]=\"selectedElementPosition\"\r\n    (customizeButtonClicked)=\"handleCustomizeClick()\"\r\n  ></rp-element-buttons>\r\n}\r\n\r\n@if (showCustomizeButtons) {\r\n  <rp-element-buttons class=\"rp-element-buttons floating\" [class.animate]=\"animateEditAddButtons\"\r\n    [elementPointer]=\"elementToolbar?.elementPointer\"\r\n    [customizeButtons]=\"editCustomizeButton\"\r\n    [elementPosition]=\"selectedElementPosition\"\r\n    (customizeButtonClicked)=\"handleCustomizeClick()\"\r\n  ></rp-element-buttons>\r\n}\r\n\r\n<ng-template #toolbarIconModels>\r\n  <rp-toolbar-icon\r\n    matIcon=\"list\"\r\n    tooltip=\"{{iconName.Objects | localize}}\"\r\n    (onClick)=\"setModelErrorDialog()\"\r\n    [showLabel]=\"shouldShowLabel\"\r\n  ></rp-toolbar-icon>\r\n</ng-template>\r\n\r\n<ng-template #selectedThreedObjectAnimationSidebar>\r\n  <header class=\"drawer__header\">\r\n    <h2 class=\"mat-headline-6\" [textContent]=\"'ANIMATE' | localize\"></h2>\r\n  </header>\r\n</ng-template>\r\n\r\n<ng-template #selectedThreedObjectCustomizationSidebar>\r\n  <header class=\"drawer__header\">\r\n    <h2 class=\"mat-headline-6\" [textContent]=\"'CUSTOMIZE' | localize\"></h2>\r\n  </header>\r\n</ng-template>\r\n\r\n<div class=\"slider-container\">\r\n  <rp-element-slider class=\"rp-element-slider\"></rp-element-slider>\r\n</div>\r\n", styles: [":host{position:absolute;top:0;left:0;pointer-events:none;margin:0;padding:0;width:100%;height:100%;overflow:hidden}:host .rp-element-buttons.animate ::ng-deep .element-add-button{animation-name:pulse-add-buttons;animation-duration:.4s;animation-iteration-count:6;animation-direction:alternate}:host>*{pointer-events:all}.input-wrapper{display:flex;flex-direction:column}.flex-wrap{display:flex;flex-flow:column nowrap;height:100%}.logo-menu-5th{position:absolute;top:220px;left:84px}.logo-menu-5th.front .mat-mdc-raised-button{width:170px;text-align:left}.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}.on-top{z-index:3}.solid-background{fill:#fff;background:#fff}.solid-background>*{fill:#fff;background:#fff}.button-close{height:36px;width:36px;min-width:initial;padding:0;border:none;position:absolute;right:20px;top:15px;border-radius:50%}.remove-all{position:absolute;top:15px;right:71px}#loader{width:300px;position:fixed;top:25%;left:50%;margin-left:-200px;background-color:#fff;border-radius:15px;transform:translate(-50%,-50%);text-align:center;font-family:Public sans,serif;z-index:1000;box-sizing:border-box;padding:15px}#loader.full{width:100%;top:0;left:0;margin-left:0;border-radius:0;transform:none;z-index:auto;padding:0;position:absolute}#loader.full #progress-bar{width:100%;height:5px;border:none;margin-top:0;border-radius:0}#loader-text{font-family:Public sans,serif;font-size:15px}#progress-bar{width:270px;height:20px;border:1px solid transparent;background:#e0e0e0;position:relative;margin-top:10px;border-radius:15px;overflow:hidden}.circular-progress-wrapper{position:absolute;width:90px;height:90px;left:50%;top:50%;transform:translate(-50%,-50%)}.circular-progress{width:90px;height:90px;transform:rotate(-90deg)}.bg{fill:none;stroke:#d1cec5;stroke-width:2}.progress{fill:none;stroke:#979284;stroke-width:2;stroke-linecap:round;transition:stroke-dasharray .3s ease}.percentage{position:absolute;top:0;left:0;width:90px;height:90px;font-size:16px;font-weight:600;line-height:90px;text-align:center;color:#979284}#progress{height:100%;width:0;background:#da9803;transition:width .3s}@keyframes pulse-add-buttons{50%{box-shadow:0 0 20px #ff5c33}}\n"] }]
-        }], ctorParameters: () => [{ type: ScreenSizeAnalysisService }, { type: i1$2.MatDialog }, { type: HomedecoratorAppService }, { type: HomedecoratorConnectorService }, { type: MessageBusService }, { type: SwitchLoadFurnitureService }, { type: SwitchBuildFurnitureService }, { type: ToastService }, { type: MessageBusService }, { type: SceneService }, { type: DialogService }, { type: CameraService }, { type: PresetsService }, { type: ItemService }, { type: HomedecoratorSettingsService }, { type: HomedecoratorAppEventService }, { type: BluePrintService }, { type: WallService }, { type: FloorService }, { type: HomedecoratorIconCacheService }, { type: GoogleTagManagerService }, { type: AppStateService }, { type: ProgressService }, { type: ResizeService }, { type: HomedecoratorConnectorAdapterService }, { type: LightPresetsService }, { type: VariationService }, { type: i27.ConfiguringService }], propDecorators: { toolbarIconModels: [{
+                      changeDetection: ChangeDetectionStrategy.OnPush*/, standalone: false, template: "@if (true) {\r\n  <co-configurator\r\n    class=\"floating\"\r\n    [settings]=\"configuratorSettings\"\r\n    [sku]=\"configuratorSku\"\r\n    [instanceId]=\"configuratorInstanceId\"\r\n    [show]=\"loadConfigurator && !firstBuild\"\r\n    [showErrorMessages]=\"true\"\r\n    [showLoader]=\"true\"\r\n    [outputErrorMessages]=\"true\"\r\n    (errorMessages)=\"handleErrorMessages($event)\"\r\n    (showChange)=\"showConfiguratorChange($event)\">\r\n  </co-configurator>\r\n}\r\n\r\n@if (showElementToolbar) {\r\n  <rp-element-toolbar class=\"rp-element-toolbar floating\" [class.custom]=\"standAlone\" @showElementToolbar\r\n    [editMenu]=\"editElementMenu\"\r\n    [showSwap]=\"showSwapButton\"\r\n    [showPointer]=\"selectedElementPosition !== undefined\"\r\n    (swapClicked)=\"swapElement()\"\r\n    (deleteClicked)=\"deleteElement()\"\r\n    (animationClicked)=\"openAnimationSidebar()\"\r\n  ></rp-element-toolbar>\r\n  <rp-element-buttons class=\"rp-element-buttons floating\" [class.animate]=\"animateEditAddButtons\"\r\n    [elementPointer]=\"elementToolbar?.elementPointer\"\r\n    [addButtons]=\"editAddButtons\"\r\n    [customizeButtons]=\"editCustomizeButton\"\r\n    [resizeButtons]=\"resizeButtons\"\r\n    [elementPosition]=\"selectedElementPosition\"\r\n    (customizeButtonClicked)=\"handleCustomizeClick()\"\r\n  ></rp-element-buttons>\r\n}\r\n\r\n@if (showCustomizeButtons) {\r\n  <rp-element-buttons class=\"rp-element-buttons floating\" [class.animate]=\"animateEditAddButtons\"\r\n    [elementPointer]=\"elementToolbar?.elementPointer\"\r\n    [customizeButtons]=\"editCustomizeButton\"\r\n    [elementPosition]=\"selectedElementPosition\"\r\n    (customizeButtonClicked)=\"handleCustomizeClick()\"\r\n  ></rp-element-buttons>\r\n}\r\n\r\n<ng-template #toolbarIconModels>\r\n  <rp-toolbar-icon\r\n    matIcon=\"list\"\r\n    tooltip=\"{{iconName.Objects | localize}}\"\r\n    (onClick)=\"setModelErrorDialog()\"\r\n    [showLabel]=\"shouldShowLabel\"\r\n  ></rp-toolbar-icon>\r\n</ng-template>\r\n\r\n<ng-template #selectedThreedObjectAnimationSidebar>\r\n  <header class=\"drawer__header\">\r\n    <h2 class=\"mat-headline-6\" [textContent]=\"'ANIMATE' | localize\"></h2>\r\n  </header>\r\n</ng-template>\r\n\r\n<ng-template #selectedThreedObjectCustomizationSidebar>\r\n  <header class=\"drawer__header\">\r\n    <h2 class=\"mat-headline-6\" [textContent]=\"'CUSTOMIZE' | localize\"></h2>\r\n  </header>\r\n</ng-template>\r\n\r\n<div class=\"slider-container\">\r\n  <rp-element-slider class=\"rp-element-slider\"></rp-element-slider>\r\n</div>\r\n", styles: [":host{position:absolute;top:0;left:0;pointer-events:none;margin:0;padding:0;width:100%;height:100%;overflow:hidden}:host .rp-element-buttons.animate ::ng-deep .element-add-button{animation-name:pulse-add-buttons;animation-duration:.4s;animation-iteration-count:6;animation-direction:alternate}:host>*{pointer-events:all}.input-wrapper{display:flex;flex-direction:column}.flex-wrap{display:flex;flex-flow:column nowrap;height:100%}.logo-menu-5th{position:absolute;top:220px;left:84px}.logo-menu-5th.front .mat-mdc-raised-button{width:170px;text-align:left}.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}.on-top{z-index:3}.solid-background{fill:#fff;background:#fff}.solid-background>*{fill:#fff;background:#fff}.button-close{height:36px;width:36px;min-width:initial;padding:0;border:none;position:absolute;right:20px;top:15px;border-radius:50%}.remove-all{position:absolute;top:15px;right:71px}#loader{width:300px;position:fixed;top:25%;left:50%;margin-left:-200px;background-color:#fff;border-radius:15px;transform:translate(-50%,-50%);text-align:center;font-family:Public sans,serif;z-index:1000;box-sizing:border-box;padding:15px}#loader.full{width:100%;top:0;left:0;margin-left:0;border-radius:0;transform:none;z-index:auto;padding:0;position:absolute}#loader.full #progress-bar{width:100%;height:5px;border:none;margin-top:0;border-radius:0}#loader-text{font-family:Public sans,serif;font-size:15px}#progress-bar{width:270px;height:20px;border:1px solid transparent;background:#e0e0e0;position:relative;margin-top:10px;border-radius:15px;overflow:hidden}.circular-progress-wrapper{position:absolute;width:90px;height:90px;left:50%;top:50%;transform:translate(-50%,-50%)}.circular-progress{width:90px;height:90px;transform:rotate(-90deg)}.bg{fill:none;stroke:#d1cec5;stroke-width:2}.progress{fill:none;stroke:#979284;stroke-width:2;stroke-linecap:round;transition:stroke-dasharray .3s ease}.percentage{position:absolute;top:0;left:0;width:90px;height:90px;font-size:16px;font-weight:600;line-height:90px;text-align:center;color:#979284}#progress{height:100%;width:0;background:#da9803;transition:width .3s}@keyframes pulse-add-buttons{50%{box-shadow:0 0 20px #ff5c33}}\n"] }]
+        }], ctorParameters: () => [{ type: ScreenSizeAnalysisService }, { type: i1$2.MatDialog }, { type: HomedecoratorAppService }, { type: HomedecoratorConnectorService }, { type: MessageBusService }, { type: SwitchLoadFurnitureService }, { type: SwitchBuildFurnitureService }, { type: ToastService }, { type: MessageBusService }, { type: SceneService }, { type: DialogService }, { type: CameraService }, { type: PresetsService }, { type: ItemService }, { type: HomedecoratorSettingsService }, { type: HomedecoratorAppEventService }, { type: BluePrintService }, { type: WallService }, { type: FloorService }, { type: HomedecoratorIconCacheService }, { type: GoogleTagManagerService }, { type: AppStateService }, { type: ProgressService }, { type: ResizeService }, { type: HomedecoratorConnectorAdapterService }, { type: LightPresetsService }, { type: VariationService }, { type: i27.ConfiguringService }, { type: i27.ConfiguratorEventService }, { type: i0.ChangeDetectorRef }], propDecorators: { toolbarIconModels: [{
                 type: ViewChild,
                 args: ['toolbarIconModels', { static: true }]
             }], selectedThreedObjectCustomizationSidebar: [{
@@ -47448,7 +47516,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: i6.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: i6.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: i6.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$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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LandingScreenModalComponent, decorators: [{
             type: Component,
@@ -47582,7 +47650,7 @@ class LoadFromCloudDialogComponent {
         this.dialog.open(ErrorDialogComponent, { data });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoadFromCloudDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialog }, { token: i1$2.MatDialogRef }, { token: MessageBusService }, { token: HomedecoratorDictionaryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LoadFromCloudDialogComponent, isStandalone: false, selector: "rp-load-from-cloud-dialog", viewQueries: [{ propertyName: "content", first: true, predicate: ["codeInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (preset && showEditPresetDialog) {\r\n  <edit-preset-dialog\r\n    [preset]=\"preset\"\r\n  ></edit-preset-dialog>\r\n}\r\n\r\n@if (!showEditPresetDialog) {\r\n  <div>\r\n    <h1 mat-dialog-title [textContent]=\"'LOAD_FROM_CLOUD' | localize\"></h1>\r\n    <div mat-dialog-content>\r\n      <div>\r\n        {{'ENTER_THE_CODE_OR_URL_OF_THE_PLAN_YOU_WANT_TO_LOAD' | localize}}:\r\n      </div>\r\n      <mat-form-field>\r\n        <input matInput\r\n          [(ngModel)]=\"code\"\r\n          (keydown.enter)=\"isValidInput(code) && load()\"\r\n          type=\"text\"\r\n          #codeInputModel=\"ngModel\"\r\n          #codeInput\r\n          />\r\n        </mat-form-field>\r\n        <div>\r\n          @if (codeInputModel.dirty && !isValidInput(code)) {\r\n            <mat-error>\r\n              {{'Invalid code or URL' | localize}}\r\n            </mat-error>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n  <div mat-dialog-actions fxLayoutAlign=\"end center\">\r\n    @if (showEditButton() && !showEditPresetDialog) {\r\n      <button mat-button color=\"primary\"\r\n        [disabled]=\"!isValidInput(code)\"\r\n        (click)=\"editPreset()\">\r\n        {{'Edit' | localize}}\r\n      </button>\r\n    }\r\n    @if (showEditPresetDialog) {\r\n      <button mat-button color=\"primary\"\r\n        (click)=\"cancelEditPreset()\">\r\n        {{'Cancel' | localize}}\r\n      </button>\r\n    }\r\n    <button mat-button color=\"primary\" [disabled]=\"!isValidInput(code)\" (click)=\"load()\">\r\n      {{'Open' | localize}}\r\n    </button>\r\n  </div>\r\n", styles: ["mat-form-field{width:100%}\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.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: "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: "directive", type: i3$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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.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: EditPresetDialogComponent, selector: "edit-preset-dialog", inputs: ["preset"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LoadFromCloudDialogComponent, isStandalone: false, selector: "rp-load-from-cloud-dialog", viewQueries: [{ propertyName: "content", first: true, predicate: ["codeInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (preset && showEditPresetDialog) {\r\n  <edit-preset-dialog\r\n    [preset]=\"preset\"\r\n  ></edit-preset-dialog>\r\n}\r\n\r\n@if (!showEditPresetDialog) {\r\n  <div>\r\n    <h1 mat-dialog-title [textContent]=\"'LOAD_FROM_CLOUD' | localize\"></h1>\r\n    <div mat-dialog-content>\r\n      <div>\r\n        {{'ENTER_THE_CODE_OR_URL_OF_THE_PLAN_YOU_WANT_TO_LOAD' | localize}}:\r\n      </div>\r\n      <mat-form-field>\r\n        <input matInput\r\n          [(ngModel)]=\"code\"\r\n          (keydown.enter)=\"isValidInput(code) && load()\"\r\n          type=\"text\"\r\n          #codeInputModel=\"ngModel\"\r\n          #codeInput\r\n          />\r\n        </mat-form-field>\r\n        <div>\r\n          @if (codeInputModel.dirty && !isValidInput(code)) {\r\n            <mat-error>\r\n              {{'Invalid code or URL' | localize}}\r\n            </mat-error>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n  <div mat-dialog-actions fxLayoutAlign=\"end center\">\r\n    @if (showEditButton() && !showEditPresetDialog) {\r\n      <button mat-button color=\"primary\"\r\n        [disabled]=\"!isValidInput(code)\"\r\n        (click)=\"editPreset()\">\r\n        {{'Edit' | localize}}\r\n      </button>\r\n    }\r\n    @if (showEditPresetDialog) {\r\n      <button mat-button color=\"primary\"\r\n        (click)=\"cancelEditPreset()\">\r\n        {{'Cancel' | localize}}\r\n      </button>\r\n    }\r\n    <button mat-button color=\"primary\" [disabled]=\"!isValidInput(code)\" (click)=\"load()\">\r\n      {{'Open' | localize}}\r\n    </button>\r\n  </div>\r\n", styles: ["mat-form-field{width:100%}\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.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: "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: "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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: EditPresetDialogComponent, selector: "edit-preset-dialog", inputs: ["preset"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoadFromCloudDialogComponent, decorators: [{
             type: Component,
@@ -47713,7 +47781,7 @@ class SavedDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SavedDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: MessageBusService }, { token: i2$5.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SavedDialogComponent, isStandalone: false, selector: "rp-saved-dialog", viewQueries: [{ propertyName: "codeInputRef", first: true, predicate: ["codeInput"], descendants: true, static: true }, { propertyName: "codeCopy", first: true, predicate: ["codeCopy"], descendants: true, static: true }], ngImport: i0, template: "<h1 mat-dialog-title>{{'SAVE_SUCCESSFUL' | localize}}!</h1>\r\n<div mat-dialog-content>\r\n  <p>{{'THE_SAVE_CODE_FOR_THE_PLAN_IS' | localize}}:\r\n    <strong #codeCopy>{{data.code}}</strong>\r\n  </p>\r\n  <p>{{'MAKE_SURE_TO_STORE_THE_CODE_IN_A_SAFE_PLACE' | localize}}!</p>\r\n<!--  <mat-form-field>-->\r\n<!--    <input-->\r\n<!--      matInput-->\r\n<!--      #codeInput-->\r\n<!--      type=\"text\"-->\r\n<!--      placeholder=\"{{'PLAN_URL' | localize}}\"-->\r\n<!--      [value]=\"planUrl\"-->\r\n<!--      (click)=\"selectUrl()\"-->\r\n<!--      readonly=\"true\"/>-->\r\n<!--      <mat-icon matSuffix (click)=\"copyToClipboard()\">file_copy</mat-icon>-->\r\n<!--  </mat-form-field>-->\r\n</div>\r\n<div mat-dialog-actions fxLayoutAlign=\"end center\">\r\n  <button mat-button mat-dialog-close>\r\n    {{'OK' | localize}}\r\n  </button>\r\n</div>\r\n", styles: ["mat-form-field{width:100%}mat-form-field ::ng-deep .mat-input-infix{padding-right:8px}\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.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: "directive", type: i6.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: "14.0.0", version: "20.3.16", type: SavedDialogComponent, isStandalone: false, selector: "rp-saved-dialog", viewQueries: [{ propertyName: "codeInputRef", first: true, predicate: ["codeInput"], descendants: true, static: true }, { propertyName: "codeCopy", first: true, predicate: ["codeCopy"], descendants: true, static: true }], ngImport: i0, template: "<h1 mat-dialog-title>{{'SAVE_SUCCESSFUL' | localize}}!</h1>\r\n<div mat-dialog-content>\r\n  <p>{{'THE_SAVE_CODE_FOR_THE_PLAN_IS' | localize}}:\r\n    <strong #codeCopy>{{data.code}}</strong>\r\n  </p>\r\n  <p>{{'MAKE_SURE_TO_STORE_THE_CODE_IN_A_SAFE_PLACE' | localize}}!</p>\r\n<!--  <mat-form-field>-->\r\n<!--    <input-->\r\n<!--      matInput-->\r\n<!--      #codeInput-->\r\n<!--      type=\"text\"-->\r\n<!--      placeholder=\"{{'PLAN_URL' | localize}}\"-->\r\n<!--      [value]=\"planUrl\"-->\r\n<!--      (click)=\"selectUrl()\"-->\r\n<!--      readonly=\"true\"/>-->\r\n<!--      <mat-icon matSuffix (click)=\"copyToClipboard()\">file_copy</mat-icon>-->\r\n<!--  </mat-form-field>-->\r\n</div>\r\n<div mat-dialog-actions fxLayoutAlign=\"end center\">\r\n  <button mat-button mat-dialog-close>\r\n    {{'OK' | localize}}\r\n  </button>\r\n</div>\r\n", styles: ["mat-form-field{width:100%}mat-form-field ::ng-deep .mat-input-infix{padding-right:8px}\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.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: "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: SavedDialogComponent, decorators: [{
             type: Component,
@@ -47772,30 +47840,27 @@ class SaveDialogComponent {
         this._dialogRef.close();
         this._messageService.emit(MessageType.ShowLoadingIndicator, { title: 'Saving...' });
         try {
-            await Promise.all(this.data.presetService.plugins.map(async (plugin) => await plugin.copySceneInstance(asNew)));
-            const schema = await this.data.presetService.createState(true);
-            if (schema.length > this.permanentStoreService.maxSchemaSize) {
-                return this._showError('Your project has gotten too large to be stored in the cloud. Please select "Download a copy" to store your project locally.');
-            }
-            this._messageService.emit(MessageType.SavePreset);
-            const sub = this.permanentStoreService.save(schema, asNew).subscribe(code => {
+            const code = await this.data.presetService.saveToCloud(asNew)
+                .catch((e) => {
+                this._showError(e);
+                return null;
+            });
+            if (code) {
                 const data = { code };
-                window.localStorage.setItem('lastPlanId', code);
                 this._messageService.emit(MessageType.HideLoadingIndicator);
                 this._dialog.closeAll();
                 this._dialog.open(SavedDialogComponent, { data });
-                sub.unsubscribe();
-            }, error => {
-                console.error('Error occured while saving the plan', error);
+            }
+            else {
+                this._dialog.closeAll();
+                console.error('Error occured while saving the plan');
                 this._showError('Error occured while saving the plan. Please check your connection and try again later.');
                 this.permanentStoreService.showLocalSave = true;
-                sub.unsubscribe();
-            });
+            }
         }
         catch (e) {
             console.error('Error occured while saving the plan', e);
             this._messageService.emit(MessageType.HideLoadingIndicator);
-            this._dialog.closeAll();
             this._showError('Error occured while saving the plan. Please check your connection and try again later.');
         }
     }
@@ -47813,11 +47878,53 @@ class SaveDialogComponent {
         this._dialog.open(ErrorDialogComponent, { data });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SaveDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialog }, { token: i1$2.MatDialogRef }, { token: MessageBusService }, { token: HomedecoratorDictionaryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SaveDialogComponent, isStandalone: false, selector: "rp-save-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{'SAVE_THE_PLAN' | localize}}</h1>\r\n<div mat-dialog-content class=\"dialog-wrapper\" cdkTrapFocus>\r\n  <mat-nav-list>\r\n    <mat-list-item (click)=\"saveToCloud()\">\r\n      <h4 mat-line><strong>{{'SAVE_TO_CLOUD' | localize}}</strong></h4>\r\n      <p mat-line class=\"item-description\">{{'ACCESS_THE_PLAN_USING_A_UNIQUE_CODE' | localize}}</p>\r\n    </mat-list-item>\r\n    @if (wasPlanSaved) {\r\n      <mat-list-item (click)=\"saveToCloud(true)\">\r\n        <h4 mat-line><strong>{{'SAVE_AS_NEW' | localize}}</strong></h4>\r\n        <p mat-line class=\"item-description\">{{'CREATE_A_COPY_OF_THE_PLAN' | localize}}</p>\r\n      </mat-list-item>\r\n    }\r\n    @if (permanentStoreService.code || showLocalSave) {\r\n      <button mat-mini-fab class=\"download-button\" (click)=\"download()\">\r\n        <co-icon [iconData]=\"iconCache.getIcon(icon.Download)\"></co-icon>\r\n      </button>\r\n    }\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}: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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SaveDialogComponent, isStandalone: false, selector: "rp-save-dialog", ngImport: i0, template: `
+        <h1 mat-dialog-title>{{'SAVE_THE_PLAN' | localize}}</h1>
+        <div mat-dialog-content class="dialog-wrapper" cdkTrapFocus>
+            <mat-nav-list>
+                <mat-list-item (click)="saveToCloud()">
+                    <h4 mat-line><strong>{{'SAVE_TO_CLOUD' | localize}}</strong></h4>
+                    <p mat-line class="item-description">{{'ACCESS_THE_PLAN_USING_A_UNIQUE_CODE' | localize}}</p>
+                </mat-list-item>
+                @if (wasPlanSaved) {
+                    <mat-list-item (click)="saveToCloud(true)">
+                        <h4 mat-line><strong>{{'SAVE_AS_NEW' | localize}}</strong></h4>
+                        <p mat-line class="item-description">{{'CREATE_A_COPY_OF_THE_PLAN' | localize}}</p>
+                    </mat-list-item>
+                }
+                @if (permanentStoreService.code || showLocalSave) {
+                    <button mat-mini-fab class="download-button" (click)="download()">
+                        <co-icon [iconData]="iconCache.getIcon(icon.Download)"></co-icon>
+                    </button>
+                }
+            </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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SaveDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rp-save-dialog', standalone: false, template: "<h1 mat-dialog-title>{{'SAVE_THE_PLAN' | localize}}</h1>\r\n<div mat-dialog-content class=\"dialog-wrapper\" cdkTrapFocus>\r\n  <mat-nav-list>\r\n    <mat-list-item (click)=\"saveToCloud()\">\r\n      <h4 mat-line><strong>{{'SAVE_TO_CLOUD' | localize}}</strong></h4>\r\n      <p mat-line class=\"item-description\">{{'ACCESS_THE_PLAN_USING_A_UNIQUE_CODE' | localize}}</p>\r\n    </mat-list-item>\r\n    @if (wasPlanSaved) {\r\n      <mat-list-item (click)=\"saveToCloud(true)\">\r\n        <h4 mat-line><strong>{{'SAVE_AS_NEW' | localize}}</strong></h4>\r\n        <p mat-line class=\"item-description\">{{'CREATE_A_COPY_OF_THE_PLAN' | localize}}</p>\r\n      </mat-list-item>\r\n    }\r\n    @if (permanentStoreService.code || showLocalSave) {\r\n      <button mat-mini-fab class=\"download-button\" (click)=\"download()\">\r\n        <co-icon [iconData]=\"iconCache.getIcon(icon.Download)\"></co-icon>\r\n      </button>\r\n    }\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}: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"] }]
+            args: [{ selector: 'rp-save-dialog', template: `
+        <h1 mat-dialog-title>{{'SAVE_THE_PLAN' | localize}}</h1>
+        <div mat-dialog-content class="dialog-wrapper" cdkTrapFocus>
+            <mat-nav-list>
+                <mat-list-item (click)="saveToCloud()">
+                    <h4 mat-line><strong>{{'SAVE_TO_CLOUD' | localize}}</strong></h4>
+                    <p mat-line class="item-description">{{'ACCESS_THE_PLAN_USING_A_UNIQUE_CODE' | localize}}</p>
+                </mat-list-item>
+                @if (wasPlanSaved) {
+                    <mat-list-item (click)="saveToCloud(true)">
+                        <h4 mat-line><strong>{{'SAVE_AS_NEW' | localize}}</strong></h4>
+                        <p mat-line class="item-description">{{'CREATE_A_COPY_OF_THE_PLAN' | localize}}</p>
+                    </mat-list-item>
+                }
+                @if (permanentStoreService.code || showLocalSave) {
+                    <button mat-mini-fab class="download-button" (click)="download()">
+                        <co-icon [iconData]="iconCache.getIcon(icon.Download)"></co-icon>
+                    </button>
+                }
+            </mat-nav-list>
+        </div>      
+    `, standalone: false, 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -48118,7 +48225,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$3.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: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PdfCropDialogComponent, decorators: [{
             type: Component,
@@ -48316,7 +48423,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._showSaveDialog(false, false);
+            this.handleSave();
         }
     }
     get fullscreen() {
@@ -48350,6 +48457,7 @@ class ToolbarComponent {
         this._homedecoratorEventService = _homedecoratorEventService;
         this.shareButton = false;
         this.externalSave = new EventEmitter();
+        this.externalOpen = new EventEmitter();
         this.toastType = ToastType;
         this.messageType = MessageType;
         this.icons = IconEnum;
@@ -48361,7 +48469,9 @@ class ToolbarComponent {
         this.timeLeft = 900;
         this.tooltipDisabled = true;
         this.badgeDisabled = true;
-        this.useExternalOpenSave = false;
+        this.useExternalSave = false;
+        this.useExternalOpen = false;
+        this.shadowSaveToCloud = false;
         this.enableSlowConnectionWarning = false;
         this.connectionStatus = '4g';
         this._subs = [];
@@ -48373,7 +48483,9 @@ class ToolbarComponent {
     }
     ngOnInit() {
         this.enableSlowConnectionWarning = this.settingsService.settings.options.showSlowConnectionWarning;
-        this.useExternalOpenSave = this.settingsService.settings.options.useExternalOpenSave;
+        this.useExternalSave = this.settingsService.settings.options.useExternalSave;
+        this.useExternalOpen = this.settingsService.settings.options.useExternalOpen;
+        this.shadowSaveToCloud = this.settingsService.settings.options.shadowSaveToCloud;
     }
     ngOnDestroy() {
         this._subs.forEach(s => s.unsubscribe());
@@ -48409,16 +48521,28 @@ class ToolbarComponent {
     animateModel(element) {
         this._animationService.playAnimation(element);
     }
-    handleExternalSave() {
-        this.externalSave.emit();
+    handleSave(saveOnOpen = true) {
+        if (this.useExternalSave) {
+            this.handleExternalSave();
+        }
+        else {
+            this.openSaveDialog();
+        }
+    }
+    async handleExternalSave() {
+        let code;
+        if (this.shadowSaveToCloud) { // save to the cloud first and send code to consumer
+            code = await this.presetsService.saveToCloud().catch(() => undefined);
+        }
+        this.externalSave.emit(code);
         this._stopTimer();
     }
-    async openSaveDialog() {
+    async openSaveDialog(saveOnOpen = true) {
         // const schema = this.presetsService.createState();
         // const image: CoDocument = new CoDocument();
         // this.onSaveProject.emit({image: image, schema: schema});
         if (!this._permanentStoreService.code) {
-            this._showSaveDialog(false, true);
+            this._showSaveDialog(false, saveOnOpen);
         }
         // if (!this._appService.userRegistered && this._permanentStoreService.code && environment.production && this.settingsService.settings.options.showFormDialog) {
         //   const regDialog = this._dialog.open(RegisterDialogComponent, {
@@ -48438,13 +48562,18 @@ class ToolbarComponent {
         this._stopTimer();
     }
     openOpenDialog() {
-        this._dialog.open(OpenDialogComponent, {
-            data: {
-                utilsService: this._utilsService,
-                presetService: this.presetsService,
-                permanentStoreService: this._permanentStoreService
-            }
-        });
+        if (this.useExternalOpen) {
+            this.externalOpen.emit();
+        }
+        else {
+            this._dialog.open(OpenDialogComponent, {
+                data: {
+                    utilsService: this._utilsService,
+                    presetService: this.presetsService,
+                    permanentStoreService: this._permanentStoreService
+                }
+            });
+        }
     }
     openShareDialog() {
         this._homedecoratorEventService.shareProject.next();
@@ -48668,7 +48797,7 @@ class ToolbarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolbarComponent, deps: [{ token: AppStateService }, { token: PresetsService }, { token: MessageBusService }, { token: HomedecoratorSettingsService }, { token: LocalStorageService }, { token: HomedecoratorIconCacheService }, { token: ScreenSizeAnalysisService }, { token: i1$2.MatDialog }, { token: ToastService }, { token: HomedecoratorAppService }, { token: PermanentStoreService }, { token: UtilsService }, { token: ItemService }, { token: FloorService }, { token: AnimationService }, { token: DevelopmentService }, { token: NewRenderService }, { token: ThirdPartyModelService }, { token: LightPresetsService }, { token: HomedecoratorConnectorAdapterService }, { token: ConnectionHeathService }, { token: HomedecoratorAppEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ToolbarComponent, isStandalone: false, selector: "rp-toolbar", inputs: { shareButton: "shareButton" }, outputs: { externalSave: "externalSave" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" } }, viewQueries: [{ propertyName: "leftSidebar", first: true, predicate: ["leftSidebar"], descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ToolbarComponent, isStandalone: false, selector: "rp-toolbar", inputs: { shareButton: "shareButton" }, outputs: { externalSave: "externalSave", externalOpen: "externalOpen" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" } }, viewQueries: [{ propertyName: "leftSidebar", first: true, predicate: ["leftSidebar"], descendants: true, static: true }], ngImport: i0, template: `
         <!--
         <div class="layer layer&#45;&#45;toolbar">
           -->
@@ -48767,7 +48896,7 @@ class ToolbarComponent {
                              (mousemove)="showBlinkError = false"
                         ><span>!</span></div>
                     }
-                    @if (!useExternalOpenSave) {
+                    @if (!useExternalSave) {
                         <div class="badge-tooltip" [class.blinker]="!showSaveNotification"
                              matTooltip="{{'SAVE_THE_PLAN' | localize}}" [matTooltipPosition]="'below'">
                             <mat-list-item class="mat-warn"
@@ -48775,7 +48904,7 @@ class ToolbarComponent {
                                            [matTooltipDisabled]="tooltipDisabled"
                                            matTooltipClass="tooltip-red"
                                            role="listitem"
-                                           (click)="openSaveDialog()"
+                                           (click)="handleSave()"
                             >{{ 'SAVE' | localize }}
                             </mat-list-item>
                             <div
@@ -48789,7 +48918,7 @@ class ToolbarComponent {
                             </div>
                         </div>
                     }
-                    @if (useExternalOpenSave) {
+                    @if (useExternalSave) {
                         <div class="badge-tooltip" [class.blinker]="!showSaveNotification"
                              matTooltip="{{'SAVE_THE_PLAN' | localize}}" [matTooltipPosition]="'below'">
                             <mat-list-item
@@ -48797,7 +48926,7 @@ class ToolbarComponent {
                                     [matTooltipDisabled]="tooltipDisabled"
                                     matTooltipClass="tooltip-red"
                                     role="listitem"
-                                    (click)="handleExternalSave()"
+                                    (click)="handleSave()"
                             >{{ 'SAVE' | localize }}
                             </mat-list-item>
                             <div
@@ -49037,7 +49166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                              (mousemove)="showBlinkError = false"
                         ><span>!</span></div>
                     }
-                    @if (!useExternalOpenSave) {
+                    @if (!useExternalSave) {
                         <div class="badge-tooltip" [class.blinker]="!showSaveNotification"
                              matTooltip="{{'SAVE_THE_PLAN' | localize}}" [matTooltipPosition]="'below'">
                             <mat-list-item class="mat-warn"
@@ -49045,7 +49174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                                            [matTooltipDisabled]="tooltipDisabled"
                                            matTooltipClass="tooltip-red"
                                            role="listitem"
-                                           (click)="openSaveDialog()"
+                                           (click)="handleSave()"
                             >{{ 'SAVE' | localize }}
                             </mat-list-item>
                             <div
@@ -49059,7 +49188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             </div>
                         </div>
                     }
-                    @if (useExternalOpenSave) {
+                    @if (useExternalSave) {
                         <div class="badge-tooltip" [class.blinker]="!showSaveNotification"
                              matTooltip="{{'SAVE_THE_PLAN' | localize}}" [matTooltipPosition]="'below'">
                             <mat-list-item
@@ -49067,7 +49196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                                     [matTooltipDisabled]="tooltipDisabled"
                                     matTooltipClass="tooltip-red"
                                     role="listitem"
-                                    (click)="handleExternalSave()"
+                                    (click)="handleSave()"
                             >{{ 'SAVE' | localize }}
                             </mat-list-item>
                             <div
@@ -49209,6 +49338,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], externalSave: [{
                 type: Output
+            }], externalOpen: [{
+                type: Output
             }], leftSidebar: [{
                 type: ViewChild,
                 args: ['leftSidebar', { static: true }]
@@ -49895,17 +50026,20 @@ class HomedecoratorComponent {
             }
         }
     }
-    async handleExternalSave() {
+    async handleExternalSave(code) {
         try {
             this.controllerService.shouldShowLoader = true;
             const screenShot = this._sceneService.takeScreenshot();
             const json = await this.presetsService.createState(true);
-            this._eventService.externalSave.next({ screenShot: screenShot, project: json });
+            this._eventService.externalSave.next({ screenShot: screenShot, project: json, code: code });
         }
         finally {
             this.controllerService.shouldShowLoader = false;
         }
     }
+    async handleExternalOpen() {
+        this._eventService.externalOpen.next();
+    }
     _startWithRoom(switchTo2D) {
         this._eventService.dirty.next(true);
         // Use bogus filename, because it's mandatory. It's not being used anyway when model is provided
@@ -49947,7 +50081,11 @@ class HomedecoratorComponent {
               <rp-furniture-manager></rp-furniture-manager>
               <rp-presets [openNewRoomDialog]="!projectToLoad"></rp-presets>
               <rp-threedselector></rp-threedselector>
-              <rp-toolbar [shareButton]="shareButton" (externalSave)="handleExternalSave()"></rp-toolbar>
+              <rp-toolbar 
+                    [shareButton]="shareButton" 
+                    (externalSave)="handleExternalSave($event)"
+                    (externalOpen)="handleExternalOpen()"
+              ></rp-toolbar>
               <rp-product-catalog
                 [generalFilterOrders]="generalFilterOrders"
                 [purchaseFilterOrders]="purchaseFilterOrders"
@@ -49972,7 +50110,7 @@ class HomedecoratorComponent {
           </div>
         }
       }
-      `, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "progress-bar" }, { kind: "component", type: LoadingOverlayComponent, selector: "rp-loading-overlay" }, { kind: "component", type: HdLoaderComponent, selector: "rp-loader", inputs: ["show"] }, { kind: "component", type: Core3dComponent, selector: "rp-core3d" }, { kind: "component", type: RoomPlannerComponent, selector: "rp-room-planner", inputs: ["isLoading"], outputs: ["done", "showPlugin", "focusControls"] }, { kind: "component", type: FurnitureManagerComponent, selector: "rp-furniture-manager" }, { kind: "component", type: PresetsComponent, selector: "rp-presets", inputs: ["openNewRoomDialog"] }, { kind: "component", type: ThreedselectorComponent, selector: "rp-threedselector", inputs: ["selections"], outputs: ["customizeButtonClicked"] }, { kind: "component", type: ToolbarComponent, selector: "rp-toolbar", inputs: ["shareButton"], outputs: ["externalSave"] }, { kind: "component", type: ProductCatalogComponent, selector: "rp-product-catalog", inputs: ["generalFilterOrders", "purchaseFilterOrders", "logisticsFilterOrders"] }, { kind: "component", type: HelpComponent, selector: "rp-help" }, { kind: "component", type: i27.LiteSelectorComponent, selector: "co-lite-selector", inputs: ["showAnswers", "show", "showSelections", "showLabel", "canClose", "animateSlideout", "customDimensions"], outputs: ["showChange", "answerChosen"] }], encapsulation: i0.ViewEncapsulation.None }); }
+      `, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "progress-bar" }, { kind: "component", type: LoadingOverlayComponent, selector: "rp-loading-overlay" }, { kind: "component", type: HdLoaderComponent, selector: "rp-loader", inputs: ["show"] }, { kind: "component", type: Core3dComponent, selector: "rp-core3d" }, { kind: "component", type: RoomPlannerComponent, selector: "rp-room-planner", inputs: ["isLoading"], outputs: ["done", "showPlugin", "focusControls"] }, { kind: "component", type: FurnitureManagerComponent, selector: "rp-furniture-manager" }, { kind: "component", type: PresetsComponent, selector: "rp-presets", inputs: ["openNewRoomDialog"] }, { kind: "component", type: ThreedselectorComponent, selector: "rp-threedselector", inputs: ["selections"], outputs: ["customizeButtonClicked"] }, { kind: "component", type: ToolbarComponent, selector: "rp-toolbar", inputs: ["shareButton"], outputs: ["externalSave", "externalOpen"] }, { kind: "component", type: ProductCatalogComponent, selector: "rp-product-catalog", inputs: ["generalFilterOrders", "purchaseFilterOrders", "logisticsFilterOrders"] }, { kind: "component", type: HelpComponent, selector: "rp-help" }, { kind: "component", type: i27.LiteSelectorComponent, selector: "co-lite-selector", inputs: ["show", "showLabel", "canClose", "animateSlideout", "customDimensions"], outputs: ["showChange", "answerChosen"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorComponent, decorators: [{
             type: Component,
@@ -49989,7 +50127,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               <rp-furniture-manager></rp-furniture-manager>
               <rp-presets [openNewRoomDialog]="!projectToLoad"></rp-presets>
               <rp-threedselector></rp-threedselector>
-              <rp-toolbar [shareButton]="shareButton" (externalSave)="handleExternalSave()"></rp-toolbar>
+              <rp-toolbar 
+                    [shareButton]="shareButton" 
+                    (externalSave)="handleExternalSave($event)"
+                    (externalOpen)="handleExternalOpen()"
+              ></rp-toolbar>
               <rp-product-catalog
                 [generalFilterOrders]="generalFilterOrders"
                 [purchaseFilterOrders]="purchaseFilterOrders"
@@ -51014,7 +51156,7 @@ class EditParameterComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EditParameterComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EditParameterComponent, isStandalone: false, selector: "rp-edit-parameter", inputs: { minValue: "minValue", value: "value", placeholder: "placeholder" }, outputs: { apply: "apply", cancel: "cancel", change: "change" }, viewQueries: [{ propertyName: "parameterInputRef", first: true, predicate: ["parameterInput"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<table>\r\n  <tr>\r\n    @if (!isEditing) {\r\n      <td>{{value | cmToMeasure}}</td>\r\n    }\r\n    <td [hidden]=\"!isEditing\">\r\n      <input matInput\r\n        type=\"number\"\r\n        [placeholder]=\"placeholder\"\r\n        [min]=\"minValue\"\r\n        [(ngModel)]=\"value\"\r\n        [step]=\"step\"\r\n        (keyup.enter)=\"editApplyParameter.onApply()\"\r\n        (keyup.esc)=\"editApplyParameter.onCancel()\"\r\n        #parameterInput\r\n        > cm<!-- units probably shouldn't be hardcoded -->\r\n      </td>\r\n      <td>\r\n        <rp-edit-apply\r\n          [watched]=\"value\"\r\n          [disable]=\"value < minValue\"\r\n          (apply)=\"onApply()\"\r\n          (toggleChange)=\"toggleEditing($event)\"\r\n          (cancel)=\"onCancel()\"\r\n          #editApplyParameter\r\n          >\r\n        </rp-edit-apply>\r\n      </td>\r\n    </tr>\r\n  </table>", styles: ["input{width:60px;min-height:28px}table{width:100%}td{text-align:right;line-height:28px}td input{height:26px;padding:0 5px;line-height:26px;min-width:80px;min-height:0;border:1px solid #ddd;border-radius:3px;text-align:right;font-size:16px;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i3$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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EditApplyComponent, selector: "rp-edit-apply", inputs: ["watched", "disable"], outputs: ["cancel", "apply", "toggleChange"] }, { kind: "pipe", type: CmToMeasurePipe, name: "cmToMeasure" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EditParameterComponent, isStandalone: false, selector: "rp-edit-parameter", inputs: { minValue: "minValue", value: "value", placeholder: "placeholder" }, outputs: { apply: "apply", cancel: "cancel", change: "change" }, viewQueries: [{ propertyName: "parameterInputRef", first: true, predicate: ["parameterInput"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<table>\r\n  <tr>\r\n    @if (!isEditing) {\r\n      <td>{{value | cmToMeasure}}</td>\r\n    }\r\n    <td [hidden]=\"!isEditing\">\r\n      <input matInput\r\n        type=\"number\"\r\n        [placeholder]=\"placeholder\"\r\n        [min]=\"minValue\"\r\n        [(ngModel)]=\"value\"\r\n        [step]=\"step\"\r\n        (keyup.enter)=\"editApplyParameter.onApply()\"\r\n        (keyup.esc)=\"editApplyParameter.onCancel()\"\r\n        #parameterInput\r\n        > cm<!-- units probably shouldn't be hardcoded -->\r\n      </td>\r\n      <td>\r\n        <rp-edit-apply\r\n          [watched]=\"value\"\r\n          [disable]=\"value < minValue\"\r\n          (apply)=\"onApply()\"\r\n          (toggleChange)=\"toggleEditing($event)\"\r\n          (cancel)=\"onCancel()\"\r\n          #editApplyParameter\r\n          >\r\n        </rp-edit-apply>\r\n      </td>\r\n    </tr>\r\n  </table>", styles: ["input{width:60px;min-height:28px}table{width:100%}td{text-align:right;line-height:28px}td input{height:26px;padding:0 5px;line-height:26px;min-width:80px;min-height:0;border:1px solid #ddd;border-radius:3px;text-align:right;font-size:16px;box-sizing:border-box}\n"], dependencies: [{ 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EditApplyComponent, selector: "rp-edit-apply", inputs: ["watched", "disable"], outputs: ["cancel", "apply", "toggleChange"] }, { kind: "pipe", type: CmToMeasurePipe, name: "cmToMeasure" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EditParameterComponent, decorators: [{
             type: Component,
@@ -51804,7 +51946,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: i3$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: i3$2.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,
@@ -52108,7 +52250,7 @@ class ViewControlComponent {
         <button mat-raised-button color="primary" (click)="changeImage()">{{'CHANGE_IMAGE'}}</button>
       </div>
     </div>
-  `, isInline: true, styles: [":host .dialog-form-wrapper{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:0 15px;grid-template-areas:\". .\" \". .\" \". .\"}:host .dialog-form-wrapper .mat-mdc-form-field{width:168px}: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:100px}:host .buttons-wrapper{justify-content:space-between}:host h1{cursor:move}\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.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: i3$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: i11.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: i6$1.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$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
+  `, isInline: true, styles: [":host .dialog-form-wrapper{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:0 15px;grid-template-areas:\". .\" \". .\" \". .\"}:host .dialog-form-wrapper .mat-mdc-form-field{width:168px}: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:100px}:host .buttons-wrapper{justify-content:space-between}:host h1{cursor:move}\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.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: 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: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ViewControlComponent, decorators: [{
             type: Component,
@@ -52333,7 +52475,7 @@ class RegisterDialogComponent {
                 useExisting: forwardRef(() => RegisterDialogComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<h1 mat-dialog-title [textContent]=\"'PLEASE_REGISTER' | localize\"></h1>\r\n<span class=\"registration-description\" [textContent]=\"'REGISTRATION_DESCRIPTION' | localize\"></span>\r\n<div mat-dialog-content class=\"dialog-content\" fxLayout=\"column\" cdkTrapFocus>\r\n  <form #form=\"ngForm\" id=\"ngForm\" (ngSubmit)=\"submitForm(form.value)\">\r\n    <mat-form-field class=\"form-full-width\" disabled=\"saving\">\r\n      <mat-label [textContent]=\"'NAME'| localize\"></mat-label>\r\n      <input matInput [placeholder]=\"'NAME' | localize\" ngModel required name=\"Voornaam\">\r\n    </mat-form-field>\r\n    <mat-form-field class=\"form-full-width\" disabled=\"saving\">\r\n      <mat-label [textContent]=\"'LAST_NAME'| localize\"></mat-label>\r\n      <input matInput [placeholder]=\"'LAST_NAME' | localize\" ngModel required name=\"Achternaam\">\r\n    </mat-form-field>\r\n    <mat-form-field class=\"form-full-width\" disabled=\"saving\">\r\n    <mat-label [textContent]=\"'EMAIL'| localize\"></mat-label>\r\n    <input matInput [placeholder]=\"'EMAIL' | localize\" ngModel name=\"Email\">\r\n    </mat-form-field>\r\n  </form>\r\n  <mat-dialog-actions align=\"end\">\r\n    <button class=\"mat-raised-button\" type=\"submit\" form=\"ngForm\" [disabled]=\"!form.form.valid || saving\"\r\n            [textContent]=\"'SAVE' | localize\"></button>\r\n    <button class=\"mat-raised-button\" (click)=\"cancel()\" [textContent]=\"'CANCEL' | localize\" [disabled]=\"saving\"></button>\r\n  </mat-dialog-actions>\r\n</div>\r\n", styles: [":host ::ng-deep co-input-text.invalid.form-submitted{color:#22313c;background:#fff}:host .cdk-overlay-pane{max-width:60vw}:host .dialog-content{padding:24px}:host .form-full-width{display:flex}:host ::ng-deep .mat-mdc-form-field-wrapper{width:100%}\n"], dependencies: [{ 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "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: "directive", type: i3$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: "directive", type: i6.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: "pipe", type: LocalizePipe, name: "localize" }] }); }
+        ], viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<h1 mat-dialog-title [textContent]=\"'PLEASE_REGISTER' | localize\"></h1>\r\n<span class=\"registration-description\" [textContent]=\"'REGISTRATION_DESCRIPTION' | localize\"></span>\r\n<div mat-dialog-content class=\"dialog-content\" fxLayout=\"column\" cdkTrapFocus>\r\n  <form #form=\"ngForm\" id=\"ngForm\" (ngSubmit)=\"submitForm(form.value)\">\r\n    <mat-form-field class=\"form-full-width\" disabled=\"saving\">\r\n      <mat-label [textContent]=\"'NAME'| localize\"></mat-label>\r\n      <input matInput [placeholder]=\"'NAME' | localize\" ngModel required name=\"Voornaam\">\r\n    </mat-form-field>\r\n    <mat-form-field class=\"form-full-width\" disabled=\"saving\">\r\n      <mat-label [textContent]=\"'LAST_NAME'| localize\"></mat-label>\r\n      <input matInput [placeholder]=\"'LAST_NAME' | localize\" ngModel required name=\"Achternaam\">\r\n    </mat-form-field>\r\n    <mat-form-field class=\"form-full-width\" disabled=\"saving\">\r\n    <mat-label [textContent]=\"'EMAIL'| localize\"></mat-label>\r\n    <input matInput [placeholder]=\"'EMAIL' | localize\" ngModel name=\"Email\">\r\n    </mat-form-field>\r\n  </form>\r\n  <mat-dialog-actions align=\"end\">\r\n    <button class=\"mat-raised-button\" type=\"submit\" form=\"ngForm\" [disabled]=\"!form.form.valid || saving\"\r\n            [textContent]=\"'SAVE' | localize\"></button>\r\n    <button class=\"mat-raised-button\" (click)=\"cancel()\" [textContent]=\"'CANCEL' | localize\" [disabled]=\"saving\"></button>\r\n  </mat-dialog-actions>\r\n</div>\r\n", styles: [":host ::ng-deep co-input-text.invalid.form-submitted{color:#22313c;background:#fff}:host .cdk-overlay-pane{max-width:60vw}:host .dialog-content{padding:24px}:host .form-full-width{display:flex}:host ::ng-deep .mat-mdc-form-field-wrapper{width:100%}\n"], dependencies: [{ 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "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: "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: "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: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RegisterDialogComponent, decorators: [{
             type: Component,