@colijnit/homedecorator 255.1.4 → 255.1.5

package/fesm2015/colijnit-homedecorator.js

@@ -23,6 +23,8 @@ import { ExternalSource } from '@colijnit/articleapi/build/model/external-source
 import { ArticleFullObject } from '@colijnit/articleapi/build/model/article-full-object';
 import { ArticleCategory } from '@colijnit/configuratorapi/build/model/article-category';
 import { ArticleFlat } from '@colijnit/articleapi/build/model/article-flat.bo';
+import { CoDomainValue } from '@colijnit/mainapi/build/model/co-domain-value.bo';
+import { DomainName } from '@colijnit/mainapi/build/enum/domain-name.enum';
 import { InternalParam } from '@colijnit/mainapi/build/enum/internal-param.enum';
 import { StringUtils } from '@colijnit/ioneconnector/build/utils/string-utils';
 import { ImageUtils as ImageUtils$2 } from '@colijnit/configuratorapi/build/utils/image-utils';
@@ -31,7 +33,7 @@ import { HttpHeaders } from '@angular/common/http';
 import axios from 'axios';
 import * as applyPatch from 'textdiff-patch';
 import * as THREE from 'three';
-import { Vector2, Material as Material$1, Object3D, Mesh, Vector3, Scene, EventDispatcher, PerspectiveCamera, Box3, PlaneGeometry, MeshBasicMaterial, DoubleSide, MeshStandardMaterial, CylinderGeometry, RingGeometry, Matrix4, Raycaster, PointLight, Euler, BoxGeometry, WebGLRenderTarget, NearestFilter, RGBAFormat, SRGBColorSpace, AxesHelper, Group, BufferGeometry, Line, DataTexture, LuminanceAlphaFormat, UnsignedByteType, LinearFilter, Shape, SphereGeometry, PCFSoftShadowMap, ShadowMaterial, LightProbe, Texture as Texture$1, DirectionalLight, MeshPhongMaterial, DepthTexture, UnsignedIntType, DepthFormat, Color, OrthographicCamera, WebGLRenderer, NoToneMapping, TextureLoader, EllipseCurve, ArcCurve, BufferAttribute, MeshPhysicalMaterial, Quaternion, Path, ShapeGeometry, BasicShadowMap, PCFShadowMap, VSMShadowMap, LinearSRGBColorSpace, Float32BufferAttribute, LineBasicMaterial, EquirectangularReflectionMapping, FrontSide, AdditiveBlending, LineSegments, EdgesGeometry, CircleGeometry, MathUtils, ObjectLoader, Light, Camera as Camera$1, RepeatWrapping, InstancedMesh, UVMapping, CubeReflectionMapping, CubeRefractionMapping, EquirectangularRefractionMapping, CubeUVReflectionMapping, NearestMipmapNearestFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipMapLinearFilter, LinearMipmapNearestFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipMapLinearFilter, AlphaFormat, LuminanceFormat, DepthStencilFormat, RedFormat, RedIntegerFormat, RGFormat, RGIntegerFormat, RGBAIntegerFormat, ByteType, ShortType, UnsignedShortType, IntType, 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, BackSide, ZeroStencilOp, KeepStencilOp, ReplaceStencilOp, IncrementStencilOp, DecrementStencilOp, IncrementWrapStencilOp, DecrementWrapStencilOp, InvertStencilOp, NeverStencilFunc, LessStencilFunc, EqualStencilFunc, LessEqualStencilFunc, GreaterStencilFunc, NotEqualStencilFunc, GreaterEqualStencilFunc, AlwaysStencilFunc, Source, SpotLight, AmbientLight, HemisphereLight, SpotLightHelper, DirectionalLightHelper, HemisphereLightHelper, PointLightHelper, CanvasTexture, Clock, AnimationMixer, AnimationClip, NoColorSpace, ArrowHelper, GridHelper, PMREMGenerator, BoxHelper } from 'three';
+import { Vector2, Material as Material$1, Object3D, Mesh, Vector3, Scene, EventDispatcher, PerspectiveCamera, Box3, PlaneGeometry, MeshBasicMaterial, DoubleSide, MeshStandardMaterial, CylinderGeometry, RingGeometry, Matrix4, Raycaster, PointLight, Euler, BoxGeometry, WebGLRenderTarget, NearestFilter, RGBAFormat, SRGBColorSpace, AxesHelper, Group, BufferGeometry, Line, DataTexture, LuminanceAlphaFormat, UnsignedByteType, LinearFilter, Shape, SphereGeometry, PCFSoftShadowMap, ShadowMaterial, LightProbe, Texture as Texture$1, DirectionalLight, MeshPhongMaterial, HalfFloatType, Color, OrthographicCamera, WebGLRenderer, NoToneMapping, TextureLoader, EllipseCurve, ArcCurve, BufferAttribute, MeshPhysicalMaterial, Quaternion, Path, ShapeGeometry, BasicShadowMap, PCFShadowMap, VSMShadowMap, LinearSRGBColorSpace, Float32BufferAttribute, LineBasicMaterial, EquirectangularReflectionMapping, FrontSide, AdditiveBlending, LineSegments, EdgesGeometry, CircleGeometry, MathUtils, ObjectLoader, Light, Camera as Camera$1, RepeatWrapping, InstancedMesh, UVMapping, CubeReflectionMapping, CubeRefractionMapping, EquirectangularRefractionMapping, CubeUVReflectionMapping, NearestMipmapNearestFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipMapLinearFilter, LinearMipmapNearestFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipMapLinearFilter, AlphaFormat, LuminanceFormat, DepthFormat, DepthStencilFormat, RedFormat, RedIntegerFormat, RGFormat, RGIntegerFormat, RGBAIntegerFormat, ByteType, ShortType, UnsignedShortType, IntType, UnsignedIntType, FloatType, 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, BackSide, ZeroStencilOp, KeepStencilOp, ReplaceStencilOp, IncrementStencilOp, DecrementStencilOp, IncrementWrapStencilOp, DecrementWrapStencilOp, InvertStencilOp, NeverStencilFunc, LessStencilFunc, EqualStencilFunc, LessEqualStencilFunc, GreaterStencilFunc, NotEqualStencilFunc, GreaterEqualStencilFunc, AlwaysStencilFunc, Source, SpotLight, AmbientLight, HemisphereLight, SpotLightHelper, DirectionalLightHelper, HemisphereLightHelper, PointLightHelper, CanvasTexture, Clock, AnimationMixer, AnimationClip, NoColorSpace, ArrowHelper, GridHelper, PMREMGenerator, BoxHelper } from 'three';
 import * as TWEEN from '@tweenjs/tween.js';
 import * as PolygonTools from 'polygon-tools';
 import { WebGLPathTracer } from 'three-gpu-pathtracer';
@@ -46,10 +48,9 @@ import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
 import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
 import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader';
 import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass';
-import * as md5 from 'md5';
 import GUI from 'three/examples/jsm/libs/lil-gui.module.min';
 import { N8AOPass } from 'n8ao';
-import { TAARenderPass } from 'three/examples/jsm/postprocessing/TAARenderPass';
+import { BlendShader } from 'three/examples/jsm/shaders/BlendShader';
 import * as i1 from '@angular/platform-browser';
 import * as i2$1 from 'ngx-device-detector';
 import * as i5$1 from '@angular/material/icon';
@@ -92,7 +93,7 @@ import * as i4 from '@colijnit/corecomponents';
 import { IconModule, CardModule, SlideoutModule, SummaryLineModule, PriceDisplayPipeModule, ButtonModule, HtmlHeaderModule, InputTextModule, InputTextChipsModule } from '@colijnit/corecomponents';
 import * as i7 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i9 from '@angular/material/select';
+import * as i12 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i10 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -106,14 +107,14 @@ import * as dat from 'dat.gui';
 import { Service, Command } from '@migenius/realityserver-client';
 import * as i3$2 from '@angular/material/grid-list';
 import { MatGridListModule } from '@angular/material/grid-list';
-import * as i15 from '@angular/material/progress-spinner';
+import * as i16 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i3$3 from '@angular/flex-layout/flex';
 import * as i2$3 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { DecalGeometry } from 'three/examples/jsm/geometries/DecalGeometry';
 import { fabric } from 'fabric';
-import * as i7$2 from '@angular/material/button-toggle';
+import * as i8$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i2$4 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -140,8 +141,6 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
 import { TDSLoader } from 'three/examples/jsm/loaders/TDSLoader';
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
-import * as i9$1 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
 import * as i19$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i22 from '@angular/material/menu';
@@ -153,7 +152,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import * as i30 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 import { ExternalCatalogStartupInfoRequest } from '@colijnit/articleapi/build/model/external-catalog-startup-info-request';
-import * as i7$3 from '@colijnit/catalog';
+import * as i7$2 from '@colijnit/catalog';
 import { CatalogSearchModule, CatalogExternalSourcesModule, CatalogExternalSourceModule } from '@colijnit/catalog';
 import * as i1$5 from 'ngx-lightbox';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -161,6 +160,7 @@ import * as i10$2 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { jsPDF } from 'jspdf';
 import autoTable from 'jspdf-autotable';
+import { MatRadioModule } from '@angular/material/radio';
 
 var MessageType;
 (function (MessageType) {
@@ -231,6 +231,8 @@ var MessageType;
     MessageType["StartCroppingPDF"] = "StartCroppingPDF";
     MessageType["BlenderRenderFileReady"] = "BlenderRenderFileReady";
     MessageType["UserModelUploaded"] = "UserModelUploaded";
+    MessageType["ChangeTexture"] = "ChangeTexture";
+    MessageType["RenderError"] = "RenderError";
 })(MessageType || (MessageType = {}));
 
 class Preset {
@@ -333,6 +335,7 @@ class HomedecoratorAppEventService {
         this.objectMovingOrRotating = new Subject();
         this.addToCart = new Subject();
         this.addExternalSourceToCart = new Subject();
+        this.dirty = new Subject();
     }
 }
 HomedecoratorAppEventService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HomedecoratorAppEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -344,7 +347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
-var __awaiter$1n = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$1m = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -395,7 +398,7 @@ class HomedecoratorConnectorAdapterService {
         }
     }
     initConnector(options, externalSource, forceReload, externalSourceId) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             if (externalSource === undefined || externalSource === null) {
                 const renewConnector = (this._connector ? this._connector.url !== options.url : false) || forceReload;
                 if (!this._connector || renewConnector) {
@@ -415,6 +418,8 @@ class HomedecoratorConnectorAdapterService {
             else {
                 if (!this.connectors.hasOwnProperty(externalSource)) {
                     if (externalSourceId !== null) {
+                        // make sure to set this.externalSource = undefined to get the data of the HOST and not the previous external source
+                        this.externalSource = undefined;
                         const externalSourceData = yield this.getExternalSource(externalSourceId);
                         if (externalSourceData !== null) {
                             if (externalSourceData.password !== undefined && externalSourceData.username !== undefined) {
@@ -453,7 +458,7 @@ class HomedecoratorConnectorAdapterService {
         });
     }
     logOut() {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             yield this.connector.logOut();
         });
     }
@@ -481,7 +486,7 @@ class HomedecoratorConnectorAdapterService {
         return 2;
     }
     getWebViewStartupInfo(request) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             // @ts-ignore
             const response = yield this.articleApi.getWebviewStartupInfo(request);
             if (response && response.validationResult && response.validationResult.success) {
@@ -493,7 +498,7 @@ class HomedecoratorConnectorAdapterService {
         });
     }
     getGoodIdFromArticleNr(sku) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             const response = yield this.articleApi.getGoodIdFromArticleNr(sku);
             if (response && response.validationResult && response.validationResult.success) {
                 return response.resultObject;
@@ -513,7 +518,7 @@ class HomedecoratorConnectorAdapterService {
         return this.connector.copyInstance(instanceId, shouldSaveCurrentInstanceId);
     }
     saveConfigurations() {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             yield this.connector.saveConfigurations().catch((e) => {
                 return false;
             });
@@ -531,7 +536,7 @@ class HomedecoratorConnectorAdapterService {
     }
     // @returns The initial article
     getArticle(sku, branch) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             const goodId = yield this.getGoodIdFromArticleNr(sku);
             if (goodId) {
                 return this.getArticleQuickSel(goodId, branch);
@@ -540,7 +545,7 @@ class HomedecoratorConnectorAdapterService {
         });
     }
     getArticleQuickSel(goodId, branch) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             const response = yield this.articleApi.getArticleQuickSel(goodId, branch);
             if (response && response.validationResult && response.validationResult.success) {
                 return this._boFactory.makeWithRawBackendData(Article, response.resultObject.oArticle[0]);
@@ -558,7 +563,7 @@ class HomedecoratorConnectorAdapterService {
         return this.connector.getQuestionAndAnswers();
     }
     getSelectionsAsync() {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             const response = yield this.connector.getSelections();
             if (response && response.validationResult && response.validationResult.success) {
                 return this._boFactory.makeBOArrayFromRawBackendDataArray(Selection, response.resultObjects);
@@ -567,7 +572,7 @@ class HomedecoratorConnectorAdapterService {
         });
     }
     getDecosAsync() {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             const response = yield this.connector.getDecos();
             if (response && response.validationResult && response.validationResult.success) {
                 return this._boFactory.makeBOArrayFromRawBackendDataArray(DecoNode, response.resultObjects);
@@ -576,7 +581,7 @@ class HomedecoratorConnectorAdapterService {
         });
     }
     getAnswerPrices() {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             const response = yield this.connector.getAnswersPrices();
             if (response && response.validationResult && response.validationResult.success) {
                 return this._boFactory.makeBOArrayFromRawBackendDataArray(AnswerPrice, response.resultObjects);
@@ -585,13 +590,14 @@ class HomedecoratorConnectorAdapterService {
         });
     }
     getJsonConfiguredArticles(goodId, goodType, quantity, externalSource = false, showLoader = true, instanceId, configuratorStatistics) {
-        return this.articleApi.getJsonArticleFlatTree(goodId, goodType, quantity, externalSource, showLoader, instanceId, configuratorStatistics);
+        // @ts-ignore
+        return this.articleApi.getJsonArticleFlatTree(goodId, goodType, quantity, externalSource, showLoader, instanceId.toString(), configuratorStatistics);
     }
     // public getJsonMatchTableArticles(): Promise<void> {
     //   return this.connector.getJsonMatchTableArticles();
     // }
     setInstanceToConfigure(id) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             if (id !== null) {
                 return this.connector.setInstanceToConfigure(id);
             }
@@ -601,7 +607,7 @@ class HomedecoratorConnectorAdapterService {
         });
     }
     selectAnswer(answer, userInput) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             return this.connector.selectAnswer(answer, false, userInput);
         });
     }
@@ -618,7 +624,7 @@ class HomedecoratorConnectorAdapterService {
         return this.connector.replaceSelection(selection);
     }
     getImageForAnswerOrSelection(answerOrSelection, publication, thumbNail = true, showLoader = true) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             const response = yield this.articleApi.getSingleImage(answerOrSelection.nodeId, publication, true, thumbNail);
             if (response && response.validationResult && response.validationResult.success && response.resultObject) {
                 if (response.resultObject.filePath !== null && response.resultObject.filePath !== undefined && response.resultObject.filePath !== '') {
@@ -634,7 +640,7 @@ class HomedecoratorConnectorAdapterService {
         });
     }
     getSkipButtonImageAndText(goodId) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             const response = yield this.connector.getSkipButtonImageAndText(goodId, false);
             if (response && response.validationResult && response.validationResult.success) {
                 return this._boFactory.makeWithRawBackendData(SkipButtonInfo, response.resultObject);
@@ -646,7 +652,7 @@ class HomedecoratorConnectorAdapterService {
         return this.getImageForAnswerOrSelection(answerOrSelection, 32);
     }
     getAnswerInfo(answer) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             const response = yield this.connector.getAnswerTexts(answer.nodeId, false);
             if (response && response.validationResult && response.validationResult.success) {
                 return this._boFactory.makeBOArrayFromRawBackendDataArray(ArticleText, response.resultObject);
@@ -655,7 +661,7 @@ class HomedecoratorConnectorAdapterService {
         });
     }
     getInternalParameter(parameter) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             const response = yield this.mainApi.getInternalParameterValue(parameter);
             if (response && response.validationResult && response.validationResult.success) {
                 return response.resultObject;
@@ -666,18 +672,24 @@ class HomedecoratorConnectorAdapterService {
         });
     }
     store3DModelCDN(filename, fileContents) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             const response = yield this.mainApi.uploadModelToCDN(filename, fileContents);
             if (response && response.validationResult && response.validationResult.success) {
                 return response.resultObject;
             }
+            else if (!response.validationResult.success) {
+                return Promise.reject(response.validationResult.messages[0].message);
+            }
             else {
                 return '';
             }
         });
     }
     getCatalogDefinitionsList() {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
+            if (!this.articleApi) {
+                return;
+            }
             const response = yield this.articleApi.getCatalogDefinitions().catch(e => {
                 return new DataServiceResponseData();
             });
@@ -690,7 +702,7 @@ class HomedecoratorConnectorAdapterService {
         });
     }
     getExternalSource(externalSourceId) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             if (!externalSourceId) {
                 return null;
             }
@@ -709,7 +721,7 @@ class HomedecoratorConnectorAdapterService {
         });
     }
     getArticleFullObject(goodId) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             const result = yield this.articleApi.getArticleFullObject(goodId);
             if (result.validationResult && result.validationResult.success) {
                 return this._boFactory.makeWithRawBackendData(ArticleFullObject, result.resultObject);
@@ -720,7 +732,7 @@ class HomedecoratorConnectorAdapterService {
         });
     }
     getArticleCategories(publicationCode) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             const result = yield this.articleApi.getArticleCategories(publicationCode);
             if (result.validationResult && result.validationResult.success) {
                 return this._boFactory.makeBOArrayFromRawBackendDataArray(ArticleCategory, result.resultObjects);
@@ -732,7 +744,7 @@ class HomedecoratorConnectorAdapterService {
     }
     //
     getArticleFlat(sku) {
-        return __awaiter$1n(this, void 0, void 0, function* () {
+        return __awaiter$1m(this, void 0, void 0, function* () {
             const result = yield this.articleApi.getArticleFlat(sku);
             if (result.validationResult && result.validationResult.success) {
                 return this._boFactory.makeWithRawBackendData(ArticleFlat, result.resultObject);
@@ -742,6 +754,18 @@ class HomedecoratorConnectorAdapterService {
             }
         });
     }
+    getModelPlacementOptions() {
+        return __awaiter$1m(this, void 0, void 0, function* () {
+            // DOM_3D_PLACEMENT
+            const result = yield this.mainApi.getDomainCollection('NL', DomainName.Dom3DPlacement);
+            if (result.validationResult && result.validationResult.success) {
+                return this._boFactory.makeBOArrayFromRawBackendDataArray(CoDomainValue, result.resultObjects);
+            }
+            else {
+                console.error(result.validationMessagesAsString);
+            }
+        });
+    }
     // public async addToCart(goodId: number, goodType: GoodType, instanceId: number, sessionId: string, quantity: number = 1): Promise<void> {
     //   const json: string = await this._getJSONFromArticleObject(goodId, goodType, instanceId, sessionId, quantity);
     //   this._appEventService.addToCart.next({article: json, quantity: 1});
@@ -773,7 +797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: HomedecoratorAppEventService }]; } });
 
-var __awaiter$1m = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$1l = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -784,8 +808,8 @@ var __awaiter$1m = (this && this.__awaiter) || function (thisArg, _arguments, P,
 };
 class JsonUtilsService {
     readJsonFile(filePath, includeBaseUrl = true) {
-        return __awaiter$1m(this, void 0, void 0, function* () {
-            return new Promise((resolve, reject) => __awaiter$1m(this, void 0, void 0, function* () {
+        return __awaiter$1l(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => __awaiter$1l(this, void 0, void 0, function* () {
                 try {
                     filePath = includeBaseUrl ? this._includeBaseUrl(filePath) : filePath;
                     const response = yield fetch(filePath);
@@ -951,7 +975,7 @@ function isEmpty(value) {
     return value === null || value === undefined || value === '';
 }
 
-var __awaiter$1l = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$1k = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -982,7 +1006,7 @@ class HomedecoratorDictionaryService {
         return text ? text : key;
     }
     setDictionary(path, client, languageCode, additionalTranslationFile) {
-        return __awaiter$1l(this, void 0, void 0, function* () {
+        return __awaiter$1k(this, void 0, void 0, function* () {
             this._language = languageCode ? languageCode : this._language;
             let dictionaryData;
             if (additionalTranslationFile) {
@@ -1003,7 +1027,7 @@ class HomedecoratorDictionaryService {
         });
     }
     _getDictionaryData(path) {
-        return __awaiter$1l(this, void 0, void 0, function* () {
+        return __awaiter$1k(this, void 0, void 0, function* () {
             return yield this._jsonUtilsService.readJsonFile(path, false)
                 .catch(() => {
                 return null;
@@ -1020,7 +1044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: JsonUtilsService }]; } });
 
-var __awaiter$1k = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$1j = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1088,7 +1112,7 @@ class HomedecoratorSettingsService {
         }
     }
     initializeSettings() {
-        return __awaiter$1k(this, void 0, void 0, function* () {
+        return __awaiter$1j(this, void 0, void 0, function* () {
             if (environment.useSettings) {
                 // see if there's a json file for application settings
                 const jsonSettings = yield this._jsonUtilsService.readJsonFile('./settings/ione-connector.json', true);
@@ -1101,7 +1125,7 @@ class HomedecoratorSettingsService {
         });
     }
     initialize(settings) {
-        return __awaiter$1k(this, void 0, void 0, function* () {
+        return __awaiter$1j(this, void 0, void 0, function* () {
             if (settings) {
                 yield this.createSettingsFromObject(settings);
             }
@@ -1134,7 +1158,7 @@ class HomedecoratorSettingsService {
         });
     }
     _checkUrlParameters() {
-        return __awaiter$1k(this, void 0, void 0, function* () {
+        return __awaiter$1j(this, void 0, void 0, function* () {
             const urlParams = new URLSearchParams(window.location.search);
             const client = urlParams.get('client');
             if (client) {
@@ -1155,7 +1179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: JsonUtilsService }, { type: HomedecoratorDictionaryService }, { type: HomedecoratorConnectorAdapterService }]; } });
 
-var __awaiter$1j = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$1i = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1181,7 +1205,7 @@ class SkipButtonInfoService {
         this._imageBody = value;
     }
     getSkipButtonImageAndText(goodId) {
-        return __awaiter$1j(this, void 0, void 0, function* () {
+        return __awaiter$1i(this, void 0, void 0, function* () {
             if (!this.text || !this.imageBody) {
                 const skipButtonInfo = yield this._connector.getSkipButtonImageAndText(goodId);
                 this.text = skipButtonInfo.oText;
@@ -1249,7 +1273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
-var __awaiter$1i = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$1h = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1334,7 +1358,7 @@ class PermanentStoreService {
         this._registerFormID = value;
     }
     updateRegisterForm(furniture) {
-        return __awaiter$1i(this, void 0, void 0, function* () {
+        return __awaiter$1h(this, void 0, void 0, function* () {
             const collectiveSheetKey = '13V6FBPWbICfjonrtAEReucHkE61ijWRmau806u5EGZs';
             const collectiveSheetScriptURL = 'https://script.google.com/macros/s/AKfycbwtgNNj0PjBPdNiiYgKtYAAUVFu1GwKzMkwMFnEDm7Va-QiYdc/exec';
             const customSheetScriptURL = 'https://script.google.com/macros/s/AKfycby-iJ_RdsdeCZ3TJN_qEMiv_DGhetyFMFIeNJGqvi-jQmDA2NBuSWFI-wmF-NtNQDLL/exec';
@@ -1458,7 +1482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: HomedecoratorSettingsService }, { type: PermanentStoreService }]; } });
 
-var __awaiter$1h = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$1g = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1481,7 +1505,6 @@ class HomedecoratorConnectorService {
         this.articleReceived = new Subject();
         this.selectionsReceived = new Subject();
         // public readonly decoNodesReceived: Subject<DecoNode[]> = new Subject<DecoNode[]>();
-        this.answerCountReceived = new Subject();
         this.answersReceived = new Subject();
         this.extraAnswerDataLoaded = new Subject();
         // public readonly moodImagesReceived: Subject<{ answerOrSelection: Answer | Selection, imageData: string }> =
@@ -1489,12 +1512,11 @@ class HomedecoratorConnectorService {
         this.selectionsAndDecosLinked = new Subject();
         this.connectionReset = new Subject();
         this.selectionsToDisplay = [];
+        this.activeAnswers = [];
         this._hideLoaderTimerTimeout = 500;
         this._selections = [];
         this._currentSelections = [];
         this._decoNodes = [];
-        // private _activeQuestion: Question;
-        this._activeAnswers = [];
         this._articlePrice = 0;
         this._connectorOptions = new Options();
         this._subs = [];
@@ -1524,12 +1546,6 @@ class HomedecoratorConnectorService {
     get currentSelections() {
         return this._currentSelections;
     }
-    // public get activeQuestion(): Question {
-    //   return this._activeQuestion;
-    // }
-    get activeAnswers() {
-        return this._activeAnswers;
-    }
     get activeSelection() {
         return this._activeSelection;
     }
@@ -1555,19 +1571,19 @@ class HomedecoratorConnectorService {
         this._imageCache.clear();
     }
     getWebViewStartupInfo(request) {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             return this._connector.getWebViewStartupInfo(request);
         });
     }
     initNodeInstance(sku) {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             const goodId = yield this._connector.getGoodIdFromArticleNr(sku);
             const response = yield this._connector.initNodeInstance(goodId);
             return this._handleInstanceResponse(response);
         });
     }
     changeConnection(instanceId, oldConnection, newConnection) {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             const response = yield this._connector.changeConnection(instanceId, oldConnection, newConnection);
             return response && response.validationResult && response.validationResult.success;
         });
@@ -1577,6 +1593,10 @@ class HomedecoratorConnectorService {
         this.selectionsToDisplay.length = 0;
         this.decoNodes.length = 0;
     }
+    emptyAnswersAndQuestion() {
+        this.activeAnswers.length = 0;
+        this.activeQuestion = undefined;
+    }
     /**
      * Used for obsolete furniture
      * @param selections
@@ -1594,7 +1614,7 @@ class HomedecoratorConnectorService {
         this._decoNodes = decoNodes;
     }
     initConnection(forceReload) {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             if ((this._initialized || this._initializing) && !forceReload) {
                 return;
             }
@@ -1627,7 +1647,7 @@ class HomedecoratorConnectorService {
     //   return this._connector.getJsonMatchTableArticles();
     // }
     setInstance(id) {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             const response = yield this._connector.setInstanceToConfigure(id).catch(error => {
                 console.log(error);
                 return new DataServiceResponseData();
@@ -1642,7 +1662,7 @@ class HomedecoratorConnectorService {
         return this._copyInstance(instanceId, false, result);
     }
     saveConfigurations() {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             const success = yield this._connector.saveConfigurations();
             if (!success) {
                 console.error('error saving configurations');
@@ -1650,9 +1670,9 @@ class HomedecoratorConnectorService {
         });
     }
     getArticle(sku, branch) {
-        return __awaiter$1h(this, void 0, void 0, function* () {
-            this.selections = [];
-            this._decoNodes = [];
+        return __awaiter$1g(this, void 0, void 0, function* () {
+            this.emptySelections();
+            this.emptyAnswersAndQuestion();
             const article = yield this._connector.getArticle(sku, branch)
                 .catch(e => {
                 return Promise.reject(e);
@@ -1673,14 +1693,25 @@ class HomedecoratorConnectorService {
     //   this._connector.getQuestionAndAnswers();
     // }
     getQuestionAndAnswersAsync() {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             const questionAndAnswers = yield this._connector.getQuestionAndAnswersAsync();
             questionAndAnswers.answers = questionAndAnswers.answers.filter(a => this._isAnswerPublished(a));
+            // if (questionAndAnswers.question && !questionAndAnswers.question.grouped) {
+            this.handleAnswersReceived(questionAndAnswers.answers);
+            // }
+            this._appEventService.answerCountReceived.next(questionAndAnswers.answers.length);
+            if (questionAndAnswers.answers.length === 0) {
+                this.emptyAnswersAndQuestion();
+            }
+            else {
+                this.activeQuestion = questionAndAnswers.question;
+                this.activeAnswers = questionAndAnswers.answers;
+            }
             return questionAndAnswers;
         });
     }
     getSelectionsAsync() {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             // this.selectionsToDisplay.length = 0;
             this.selections.length = 0;
             const selections = yield this._connector.getSelectionsAsync()
@@ -1691,7 +1722,7 @@ class HomedecoratorConnectorService {
         });
     }
     getDecosAsync() {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             this._decoNodes = yield this._connector.getDecosAsync()
                 .catch(() => {
                 return [];
@@ -1716,13 +1747,13 @@ class HomedecoratorConnectorService {
         return this._connector.replaceSelection(selection);
     }
     getAnswerInfo(answer) {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             const articleTexts = yield this._connector.getAnswerInfo(answer);
             this._onAnswerInfoReceived({ answer: answer, info: articleTexts });
         });
     }
     extendWithAnswerTextAndImage(answer, showLoader = true) {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             if (answer.nodeId) {
                 if (!this._imageCache.has(answer.nodeId)) {
                     this._connector.getImageForAnswerOrSelection(answer, 4, true, showLoader).then((imageData) => {
@@ -1743,7 +1774,7 @@ class HomedecoratorConnectorService {
         });
     }
     extendWithSelectionImage(selection, showLoader = true) {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             if (selection.nodeId) {
                 if (!this._imageCache.has(selection.nodeId)) {
                     this._connector.getImageForAnswerOrSelection(selection, 4, true, showLoader).then((imageData) => {
@@ -1860,7 +1891,7 @@ class HomedecoratorConnectorService {
         });
     }
     addToCart(goodId, goodType, quantity, instanceId, externalSource) {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             let json;
             const statistics = new ConfiguratorStatisticsEnvironment();
             statistics.userType = 'Homedecorator';
@@ -1881,15 +1912,11 @@ class HomedecoratorConnectorService {
         });
     }
     handleAnswersReceived(answers) {
-        return __awaiter$1h(this, void 0, void 0, function* () {
-            this._activeAnswers = answers;
-            this.answerCountReceived.next(this._activeAnswers.length);
-            this._preloadCachedImages(answers);
-            this.answersReceived.next(answers);
-            if (this._activeAnswers) {
-                this._loadPricesOfActiveAnswers();
-            }
-        });
+        this._preloadCachedImages(answers);
+        this.answersReceived.next(answers);
+        if (this.activeAnswers && this.activeAnswers.length > 0) {
+            this._loadPricesOfActiveAnswers();
+        }
     }
     _prepareSelectionsToDisplayImages() {
         if (this.selectionsToDisplay && this.selectionsToDisplay.length > 0) {
@@ -1989,12 +2016,12 @@ class HomedecoratorConnectorService {
     }
     // POSTCONDITION: current activeAnswers have price values.
     _loadPricesOfActiveAnswers() {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             const answerPrices = yield this._connector.getAnswerPrices();
             if (answerPrices) {
                 // paste price data onto our current answer objects; AnswerPrice.selId corresponds to Answer.node
                 answerPrices.forEach(answerPrice => {
-                    const answerMatch = this._activeAnswers.find(ans => ans.node === answerPrice.selId);
+                    const answerMatch = this.activeAnswers.find(ans => ans.node === answerPrice.selId);
                     if (answerMatch) {
                         answerMatch.price = // temp fix for price until backend is ready
                             answerMatch.nodeLevel === 0 && answerPrice.addRetailPrice && answerMatch.seqO === 1 ?
@@ -2007,7 +2034,7 @@ class HomedecoratorConnectorService {
         });
     }
     _copyInstance(originalInstanceId, shouldSaveCurrentInstanceId, result) {
-        return __awaiter$1h(this, void 0, void 0, function* () {
+        return __awaiter$1g(this, void 0, void 0, function* () {
             const copyInstanceResponse = yield this._connector.copyInstance(originalInstanceId, shouldSaveCurrentInstanceId).catch((e) => {
                 if (e === 'ECONNABORTED' || e === undefined) {
                     result.resultType = ResultType.Timeout;
@@ -2044,7 +2071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: HomedecoratorConnectorAdapterService }, { type: JsonUtilsService }, { type: HomedecoratorSettingsService }, { type: SkipButtonInfoService }, { type: MessageBusService }, { type: HomedecoratorAppEventService }, { type: GoogleTagManagerService }]; } });
 
-var __awaiter$1g = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$1f = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -2084,13 +2111,13 @@ class AppStateService {
         window.history.replaceState(data, title, url);
     }
     undo() {
-        return __awaiter$1g(this, void 0, void 0, function* () {
+        return __awaiter$1f(this, void 0, void 0, function* () {
             this.currentStateIndex -= 1;
             yield this.applyStateFn(this.getValue(this.currentStateIndex));
         });
     }
     redo() {
-        return __awaiter$1g(this, void 0, void 0, function* () {
+        return __awaiter$1f(this, void 0, void 0, function* () {
             this.currentStateIndex += 1;
             yield this.applyStateFn(this.getValue(this.currentStateIndex));
         });
@@ -2353,7 +2380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-var __awaiter$1f = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$1e = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -2388,7 +2415,7 @@ class LocalStorageService {
         }
     }
     getRecoverySaveState() {
-        return __awaiter$1f(this, void 0, void 0, function* () {
+        return __awaiter$1e(this, void 0, void 0, function* () {
             const indexedDBSave = yield this.getIndexedDBSaveState();
             const localStorageSave = this._getSaveStateInLocalStorage();
             if (indexedDBSave) {
@@ -2403,13 +2430,13 @@ class LocalStorageService {
         });
     }
     getIndexedDBSaveState() {
-        return __awaiter$1f(this, void 0, void 0, function* () {
+        return __awaiter$1e(this, void 0, void 0, function* () {
             const getMessage = yield this._webWorkerService.postMessage(WebWorkerType.IndexedDB, { messageType: WebWorkerMessage.GetRecoverySaveDataFromIndexedDB });
             return getMessage.data;
         });
     }
     writeIndexedDBSaveState(saveState) {
-        return __awaiter$1f(this, void 0, void 0, function* () {
+        return __awaiter$1e(this, void 0, void 0, function* () {
             const saveMessage = yield this._webWorkerService.postMessage(WebWorkerType.IndexedDB, { messageType: WebWorkerMessage.WriteCurrentSaveDataToIndexedDB, messageData: saveState });
             if (!this.saveStateExists && saveMessage.data) {
                 this.saveStateExists = true;
@@ -2419,7 +2446,7 @@ class LocalStorageService {
         });
     }
     checkForLocalSave() {
-        return __awaiter$1f(this, void 0, void 0, function* () {
+        return __awaiter$1e(this, void 0, void 0, function* () {
             if (!this.saveStateExists) {
                 const indexedDBSave = yield this.getIndexedDBSaveState();
                 if (indexedDBSave || this._getSaveStateInLocalStorage() !== null) {
@@ -2441,7 +2468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: WebWorkerService }]; } });
 
-var __awaiter$1e = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$1d = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -2520,7 +2547,7 @@ class FileUtils {
         }
     }
     static SaveGLBFile(data, assetPath) {
-        return __awaiter$1e(this, void 0, void 0, function* () {
+        return __awaiter$1d(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
                 const xhr = new XMLHttpRequest();
                 xhr.open('POST', `${assetPath}saveGLBFile.php`, true);
@@ -2675,7 +2702,7 @@ class FileUtils {
 }
 FileUtils._cachedTextureUploads = new Map();
 
-var __awaiter$1d = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$1c = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -2689,7 +2716,7 @@ class FileService {
         this._settingsService = _settingsService;
     }
     getTotalDownloadSize(files) {
-        return __awaiter$1d(this, void 0, void 0, function* () {
+        return __awaiter$1c(this, void 0, void 0, function* () {
             const url = `${this._settingsService.settings.assetPath}/fileSize.php`;
             const data = {
                 files: files
@@ -2716,7 +2743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: HomedecoratorSettingsService }]; } });
 
-var __awaiter$1c = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$1b = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -2739,7 +2766,7 @@ class ProgressService {
         return (current / this.total) * 100;
     }
     prepareDownloads(furniture) {
-        return __awaiter$1c(this, void 0, void 0, function* () {
+        return __awaiter$1b(this, void 0, void 0, function* () {
             this._reset();
             const files = [];
             if (furniture && furniture.length > 0) {
@@ -3628,7 +3655,7 @@ class RelativePositionUtils {
 RelativePositionUtils.appOffsetTop = 0;
 RelativePositionUtils.appOffsetLeft = 0;
 
-var __awaiter$1b = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$1a = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3827,7 +3854,7 @@ Controls = function (camera, domElement) {
         scope.pan(new THREE.Vector2(x, y));
     };
     this.animateCamera = function (type, change) {
-        return __awaiter$1b(this, void 0, void 0, function* () {
+        return __awaiter$1a(this, void 0, void 0, function* () {
             const changing = new THREE.Vector2();
             const tween = new TWEEN.Tween(changing).to(new THREE.Vector2(change, 0), 200);
             tween.easing(TWEEN.Easing.Quadratic.In);
@@ -3838,7 +3865,7 @@ Controls = function (camera, domElement) {
         });
     };
     this.animateCameraMovement = function (endPosition, endTarget, endDuration) {
-        return __awaiter$1b(this, void 0, void 0, function* () {
+        return __awaiter$1a(this, void 0, void 0, function* () {
             if (!isFinite(endPosition.x) || !isFinite(endPosition.y) || !isFinite(endPosition.z)) {
                 return;
             }
@@ -3910,7 +3937,7 @@ Controls = function (camera, domElement) {
         this.updatePositionTarget(this.camera.position, this.target);
     };
     this.animateMoveTo = function (target) {
-        return __awaiter$1b(this, void 0, void 0, function* () {
+        return __awaiter$1a(this, void 0, void 0, function* () {
             const position = scope.target.clone();
             const distance = target.distanceTo(position);
             const tween = new TWEEN.Tween(position).to(target, distance);
@@ -4094,7 +4121,7 @@ Controls = function (camera, domElement) {
         return event && event.target && event.target === document.body;
     }
     function onMouseMove(event) {
-        return __awaiter$1b(this, void 0, void 0, function* () {
+        return __awaiter$1a(this, void 0, void 0, function* () {
             if (!isMouseEventAllowed(event)) {
                 return;
             }
@@ -4443,7 +4470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
-var __awaiter$1a = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$19 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4628,7 +4655,7 @@ class CameraService {
         this.cameraMovementChanged.next();
     }
     moveCameraToFitObject(object, offset) {
-        return __awaiter$1a(this, void 0, void 0, function* () {
+        return __awaiter$19(this, void 0, void 0, function* () {
             if (!object) {
                 return;
             }
@@ -4699,7 +4726,7 @@ class CameraService {
         return target.clone().add(new Vector3(0, targetDistance, targetDistance));
     }
     _placeWalkThroughCameraInCorner(viewCorner) {
-        return __awaiter$1a(this, void 0, void 0, function* () {
+        return __awaiter$19(this, void 0, void 0, function* () {
             const center2d = this._viewCenter;
             const center = new Vector3(center2d.x, this.cameraDefaultHeight, center2d.y);
             // place in a corner to have a better view
@@ -4874,7 +4901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-var __awaiter$19 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$18 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4890,7 +4917,7 @@ class MessageBoardService {
         this.messages = [];
     }
     init(scene) {
-        return __awaiter$19(this, void 0, void 0, function* () {
+        return __awaiter$18(this, void 0, void 0, function* () {
             this.scene = scene;
             if (this._settingsService.settings.options.xrDebug) {
                 this._createMessageBoard();
@@ -4928,7 +4955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: HomedecoratorSettingsService }, { type: FontService }]; } });
 
-var __awaiter$18 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$17 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4958,7 +4985,7 @@ class XrService {
         this._subs.forEach(s => s.unsubscribe());
     }
     init(renderer, scene, camera) {
-        return __awaiter$18(this, void 0, void 0, function* () {
+        return __awaiter$17(this, void 0, void 0, function* () {
             if (!this._settingsService.settings.options.vrEnabled && !this._settingsService.settings.options.arEnabled) {
                 return;
             }
@@ -5314,7 +5341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: HomedecoratorSettingsService }, { type: DebugService }, { type: MessageBoardService }]; } });
 
-var __awaiter$17 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$16 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -5368,7 +5395,7 @@ class Reticle extends Object3D {
      * @param {XRCoordinateSystem} frameOfRef
      */
     update(session, camera, frameOfRef) {
-        return __awaiter$17(this, void 0, void 0, function* () {
+        return __awaiter$16(this, void 0, void 0, function* () {
             this._rayCaster = this._rayCaster || new Raycaster();
             this._rayCaster.setFromCamera(new THREE.Vector2(0, 0), camera);
             const ray = this._rayCaster.ray;
@@ -5963,7 +5990,7 @@ class BaseItem extends Object3D {
 class ServiceLocator {
 }
 
-var __awaiter$16 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$15 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -6034,7 +6061,7 @@ class OutlineService {
         this._outlinePass.selectedObjects = [item];
     }
     showOutline(item) {
-        return __awaiter$16(this, void 0, void 0, function* () {
+        return __awaiter$15(this, void 0, void 0, function* () {
             // if (item && (item instanceof FloorPin || item instanceof WallPin)) {
             //   return;
             // }
@@ -6053,7 +6080,7 @@ class OutlineService {
         });
     }
     hideOutline() {
-        return __awaiter$16(this, void 0, void 0, function* () {
+        return __awaiter$15(this, void 0, void 0, function* () {
             if (this._outlinePass.selectedObjects.length > 0) {
                 // await this._animatedOutlineStrength(300, 0);
                 this._outlinePass.selectedObjects = [];
@@ -6886,7 +6913,7 @@ var TextureType;
     TextureType[TextureType["PBR"] = 3] = "PBR";
 })(TextureType || (TextureType = {}));
 
-var __awaiter$15 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$14 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -6943,13 +6970,13 @@ class MaterialUtils {
     }
     // use canvas to create rotated textures
     static RotatedCanvasTexture(texture, textureURL, dimensions, adjustScale, repeatX, repeatY) {
-        return __awaiter$15(this, void 0, void 0, function* () {
+        return __awaiter$14(this, void 0, void 0, function* () {
             const img = yield MaterialUtils.LoadImageCached(textureURL);
             return MaterialUtils.CreateTileMap(img, texture, dimensions, adjustScale, repeatX, repeatY);
         });
     }
     static CustomTileMapTexture(texture, dimensions) {
-        return __awaiter$15(this, void 0, void 0, function* () {
+        return __awaiter$14(this, void 0, void 0, function* () {
             let img = yield MaterialUtils.LoadImageCached(texture.data);
             if (MaterialUtils.TextureSourceModified(texture)) {
                 img = yield MaterialUtils.CreateShiftedDataUrl(img, texture);
@@ -6982,7 +7009,7 @@ class MaterialUtils {
     }
     // use canvas to create texture from photo
     static FromImage(texture /*, dimensions: THREE.Vector2*/) {
-        return __awaiter$15(this, void 0, void 0, function* () {
+        return __awaiter$14(this, void 0, void 0, function* () {
             const img = yield MaterialUtils.LoadImageCached(texture.data);
             const canvas = yield MaterialUtils.GetCanvasFromImageTexture(img, texture, true);
             const threeTexture = new THREE.Texture(canvas);
@@ -6992,7 +7019,7 @@ class MaterialUtils {
         });
     }
     static ReadAndResizePhotoAsDataURL(file) {
-        return __awaiter$15(this, void 0, void 0, function* () {
+        return __awaiter$14(this, void 0, void 0, function* () {
             const imageSrc = yield MaterialUtils.ReadFileAsDataURL(file);
             return MaterialUtils.LoadImageCached(imageSrc, false);
             // const image = new Image();
@@ -7015,7 +7042,8 @@ class MaterialUtils {
         let srcKey = src;
         let type = 'image/jpeg';
         if (isDataUri) {
-            srcKey = md5(src);
+            // srcKey = md5(src);
+            srcKey = src;
             if (src.indexOf('image/png') > -1) {
                 type = 'image/png';
             }
@@ -7062,7 +7090,7 @@ class MaterialUtils {
         });
     }
     static GetMaterialMaps(material, texture, dimensions) {
-        return __awaiter$15(this, void 0, void 0, function* () {
+        return __awaiter$14(this, void 0, void 0, function* () {
             if (!texture) {
                 return;
             }
@@ -7094,7 +7122,7 @@ class MaterialUtils {
         });
     }
     static loadMaterializeMaps(material, texture) {
-        return __awaiter$15(this, void 0, void 0, function* () {
+        return __awaiter$14(this, void 0, void 0, function* () {
             material.map = yield MaterialUtils.FromUrl(texture.materializeUrl + '_diffuseOriginal.jpg', texture.stretch, texture.tileSize, texture.repeatX, texture.repeatY, texture.dimensions, texture.tileRotation);
             material.normalMap = yield MaterialUtils.FromUrl(texture.materializeUrl + '_normal.jpg', texture.stretch, texture.tileSize, texture.repeatX, texture.repeatY, texture.dimensions, texture.tileRotation);
             material.roughnessMap = yield MaterialUtils.FromUrl(texture.materializeUrl + '_smoothness.jpg', texture.stretch, texture.tileSize, texture.repeatX, texture.repeatY, texture.dimensions, texture.tileRotation);
@@ -7153,7 +7181,7 @@ class MaterialUtils {
     }
     // use canvas to create texture from flipped photo
     static FromFlippedImage(texture, dimensions) {
-        return __awaiter$15(this, void 0, void 0, function* () {
+        return __awaiter$14(this, void 0, void 0, function* () {
             const origImg = yield MaterialUtils.LoadImageCached(texture.data);
             const canvas = yield MaterialUtils.GetCanvasFromImageTexture(origImg, texture, false, true);
             const threeTexture = new THREE.Texture(canvas);
@@ -7182,21 +7210,21 @@ class MaterialUtils {
     }
     // use canvas to create custom textures
     static CustomTileTexture(texture) {
-        return __awaiter$15(this, void 0, void 0, function* () {
+        return __awaiter$14(this, void 0, void 0, function* () {
             const img = yield MaterialUtils.LoadImageCached(texture.data);
             const canvas = yield MaterialUtils.GetCanvasFromImageTexture(img, texture, true, true);
             return MaterialUtils.CreateTileFromTexture(canvas, texture);
         });
     }
     static RotatedImageTexture(texture, textureURL) {
-        return __awaiter$15(this, void 0, void 0, function* () {
+        return __awaiter$14(this, void 0, void 0, function* () {
             const img = yield MaterialUtils.LoadImageCached(textureURL);
             const canvas = yield MaterialUtils.GetCanvasFromImageTexture(img, texture, false, true);
             return MaterialUtils.CreateTileFromTexture(canvas, texture);
         });
     }
     static CreateTileDataUrl(img, texture) {
-        return __awaiter$15(this, void 0, void 0, function* () {
+        return __awaiter$14(this, void 0, void 0, function* () {
             if (typeof img === 'string') {
                 img = yield this.CreateImageElementFromSource(img);
             }
@@ -7210,7 +7238,7 @@ class MaterialUtils {
         });
     }
     static CreateTileMap(img, texture, oDimensions, adjustScale, repeatX, repeatY) {
-        return __awaiter$15(this, void 0, void 0, function* () {
+        return __awaiter$14(this, void 0, void 0, function* () {
             if (typeof img === 'string') {
                 img = yield this.CreateImageElementFromSource(img);
             }
@@ -7289,7 +7317,7 @@ MaterialUtils.imgElement = undefined;
 MaterialUtils.imageCache = new Map();
 MaterialUtils.textureCache = new Map();
 
-var __awaiter$14 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$13 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7333,7 +7361,7 @@ class ArService {
         Utils$1.DisposeObject(this._pointRepresentation);
     }
     resetPlaneDetection() {
-        return __awaiter$14(this, void 0, void 0, function* () {
+        return __awaiter$13(this, void 0, void 0, function* () {
             this._reticle.visible = false;
             this._activeARModel.visible = false;
             this._vertexList = [];
@@ -7352,7 +7380,7 @@ class ArService {
         this._session.end();
     }
     arIOSSupported() {
-        return __awaiter$14(this, void 0, void 0, function* () {
+        return __awaiter$13(this, void 0, void 0, function* () {
             const isIOS = /iPad|iPhone|iPod/.test(navigator.platform) ||
                 (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
             if (isIOS) {
@@ -7365,7 +7393,7 @@ class ArService {
         });
     }
     arSupported() {
-        return __awaiter$14(this, void 0, void 0, function* () {
+        return __awaiter$13(this, void 0, void 0, function* () {
             if (navigator.xr) {
                 return yield navigator.xr.isSessionSupported('immersive-ar');
             }
@@ -7531,6 +7559,7 @@ class ArService {
         this._lightProbe.addEventListener('reflectionchange', () => {
             const rawData = this._glBinding.getReflectionCubeMap(this._lightProbe);
             const texProps = this._renderer.properties.get(this._cubeMapTexture);
+            // @ts-ignore
             texProps.__webglTexture = rawData;
         });
     }
@@ -7687,7 +7716,7 @@ class ArService {
         }
     }
     _createPlaneMaterial() {
-        return __awaiter$14(this, void 0, void 0, function* () {
+        return __awaiter$13(this, void 0, void 0, function* () {
             const pm = new MeshPhongMaterial({ transparent: true, side: DoubleSide });
             pm.map = yield MaterialUtils.FromUrl('assets/textures/Floor/Tiles/ar_floor_texture.png', false, 1, 2, 2);
             pm.map.flipY = false;
@@ -7696,7 +7725,7 @@ class ArService {
         });
     }
     _onSessionStarted(session) {
-        return __awaiter$14(this, void 0, void 0, function* () {
+        return __awaiter$13(this, void 0, void 0, function* () {
             const domOverlay = document.getElementById('ar-root');
             session.addEventListener('end', this._onSessionEnded.bind(this));
             session.addEventListener('select', () => this._handleTouchEvent());
@@ -7818,7 +7847,7 @@ class ArService {
         }
     }
     _checkIfHoldTouchEvent($event) {
-        return __awaiter$14(this, void 0, void 0, function* () {
+        return __awaiter$13(this, void 0, void 0, function* () {
             setTimeout(() => {
                 if (!this.userInSelectionMenu && this._lastEventTimestamp === $event.timeStamp && this._session.inputSources.length === 1) {
                     this._holdingTouch = true;
@@ -8163,37 +8192,87 @@ class PostProcessingService {
         this._renderer = renderer;
         this._scene = scene;
         this._camera = camera;
-        this._renderTarget = new WebGLRenderTarget(width, height, {
+        this._width = width;
+        this._height = height;
+        this._postProcessingGui = new GUI();
+        this._postProcessingGui.hide();
+        this._renderPass = new RenderPass(this._scene, this._camera);
+        this._outputPass = new OutputPass();
+        this._initAoComposer();
+        this._initAaComposer();
+        this._initBlendComposer();
+    }
+    _initAaComposer() {
+        this._aaRenderTarget = new WebGLRenderTarget(this._width, this._height, {
+            samples: 4,
+            type: HalfFloatType /*,
             minFilter: NearestFilter,
             magFilter: NearestFilter,
             format: RGBAFormat,
-            colorSpace: SRGBColorSpace
-        });
-        this._renderTarget.samples = 4;
-        this._renderTarget.depthTexture = new DepthTexture(width, height, UnsignedIntType);
-        this._renderTarget.depthTexture.format = DepthFormat;
-        this._composer = new EffectComposer(this._renderer, this._renderTarget);
-        this._n8aoPass = new N8AOPass(scene, camera, width, height);
-        this._n8aoPass.configuration.gammaCorrection = false;
-        this._n8aoPass.debugMode = true;
+            colorSpace: SRGBColorSpace*/
+        });
+        this._aaComposer = new EffectComposer(this._renderer, this._aaRenderTarget);
+        this._aaComposer.renderToScreen = false;
+        const fxaaPass = new ShaderPass(FXAAShader);
+        const pixelRatio = this._renderer.getPixelRatio();
+        // fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / (this._width * pixelRatio);
+        // fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / (this._height * pixelRatio);
+        fxaaPass.uniforms['resolution'].value.x = 1 / (this._width * pixelRatio);
+        fxaaPass.uniforms['resolution'].value.y = 1 / (this._height * pixelRatio);
+        // this._taaRenderPass = new TAARenderPass(this._scene, this._camera, 0x000000, 0);
+        // this._taaRenderPass.unbiased = true;
+        // this._taaRenderPass.sampleLevel = 4;
+        // this._renderPass.enabled = false;
+        // sao
+        // this._saoPass = new SAOPass( this._scene, this._camera, new Vector2(2048, 2048));
+        // this._saoPass.resolution.set(2048, 2048);
+        // this._saoPass.renderToScreen = true;
+        // this._saoPass.enabled = true;
+        this._aaComposer.addPass(this._renderPass);
+        // this._aaComposer.addPass(this._taaRenderPass);
+        this._aaComposer.addPass(fxaaPass);
+        this._aaComposer.addPass(this._outputPass);
+        this._createGuiTaaPass();
+    }
+    _initAoComposer() {
+        this._aoRenderTarget = new WebGLRenderTarget(this._width, this._height, {
+            samples: 4,
+            type: HalfFloatType /*,
+            minFilter: NearestFilter,
+            magFilter: NearestFilter,
+            format: RGBAFormat,
+            colorSpace: SRGBColorSpace*/
+        });
+        this._aoComposer = new EffectComposer(this._renderer, this._aoRenderTarget);
+        this._aoComposer.renderToScreen = false;
+        this._n8aoPass = new N8AOPass(this._scene, this._camera, this._width, this._height);
+        // this._n8aoPass.configuration.gammaCorrection = false;
+        // this._n8aoPass.renderToScreen = false;
+        // this._n8aoPass.debugMode = true;
         // const smaaPass = new SMAAPass(width, height);
         // this._composer.addPass(smaaPass);
-        // const fxaaPass = new ShaderPass(FXAAShader);
-        // const pixelRatio = this._renderer.getPixelRatio();
-        // fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / (width * pixelRatio);
-        // fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / (height * pixelRatio);
-        this._outputPass = new OutputPass();
-        this._taaRenderPass = new TAARenderPass(this._scene, this._camera, 0x000000, 0);
-        this._taaRenderPass.unbiased = false;
-        this._taaRenderPass.sampleLevel = 4;
-        this._renderPass = new RenderPass(this._scene, this._camera);
         // this._renderPass.enabled = false;
-        this._composer.addPass(this._renderPass);
-        this._composer.addPass(this._taaRenderPass);
-        this._composer.addPass(this._n8aoPass);
-        this._composer.addPass(this._outputPass);
+        // sao
+        // this._saoPass = new SAOPass( this._scene, this._camera, new Vector2(2048, 2048));
+        // this._saoPass.resolution.set(2048, 2048);
+        // this._saoPass.renderToScreen = true;
+        // this._saoPass.enabled = true;
+        this._aoComposer.addPass(this._renderPass);
+        this._aoComposer.addPass(this._n8aoPass);
+        this._aoComposer.addPass(this._outputPass);
+        // this._composer.addPass(this._saoPass);
+        // this._aoComposer.addPass(this._aoOutputPass);
         this._createGui();
-        this._createGuiTaaPass();
+    }
+    _initBlendComposer() {
+        this._blendShader = new ShaderPass(BlendShader);
+        this._blendShader.uniforms.tDiffuse1.value = this._aaRenderTarget.texture;
+        this._blendShader.uniforms.tDiffuse2.value = this._aoRenderTarget.texture;
+        // blendShader.uniforms['mixRatio'].value = 0.9;
+        this._blendComposer = new EffectComposer(this._renderer);
+        this._blendComposer.renderToScreen = true;
+        this._blendComposer.addPass(this._renderPass);
+        this._blendComposer.addPass(this._blendShader);
     }
     _updatePass() {
         this._n8aoPass.configuration.aoRadius = this._effectController.aoRadius;
@@ -8214,10 +8293,8 @@ class PostProcessingService {
         this.render();
     }
     _createGuiTaaPass() {
-        this._taaPassGui = new GUI();
-        this._taaPassGui.hide();
         const param = { TAAEnabled: '1', TAASampleLevel: 0 };
-        this._taaPassGui.add(param, 'TAAEnabled', {
+        this._postProcessingGui.add(param, 'TAAEnabled', {
             'Disabled': '0',
             'Enabled': '1'
         }).onFinishChange(() => {
@@ -8226,7 +8303,7 @@ class PostProcessingService {
             }
             this.render();
         });
-        this._taaPassGui.add(param, 'TAASampleLevel', {
+        this._postProcessingGui.add(param, 'TAASampleLevel', {
             'Level 0: 1 Sample': 0,
             'Level 1: 2 Samples': 1,
             'Level 2: 4 Samples': 2,
@@ -8239,13 +8316,16 @@ class PostProcessingService {
             }
             this.render();
         });
-        this._taaPassGui.open();
     }
     setSize(width, height) {
-        this._composer.setSize(width, height);
+        this._aoComposer.setSize(width, height);
+        this._aaComposer.setSize(width, height);
+        this._blendComposer.setSize(width, height);
     }
     render() {
-        this._composer.render();
+        this._aaComposer.render();
+        this._aoComposer.render();
+        this._blendComposer.render();
     }
     showGui() {
         this._postProcessingGui.show(true);
@@ -8257,8 +8337,16 @@ class PostProcessingService {
         show ? this.showGui() : this.hideGui();
     }
     _createGui() {
-        this._postProcessingGui = new GUI();
-        this._postProcessingGui.hide();
+        const param = { Enabled: '1' };
+        this._postProcessingGui.add(param, 'Enabled', {
+            'Disabled': '0',
+            'Enabled': '1'
+        }).onFinishChange(() => {
+            if (this._aoComposer) {
+                this._aoComposer.renderToScreen = (param.Enabled === '1');
+            }
+            this.render();
+        });
         this._postProcessingGui.add(this._effectController, 'aoSamples', 1.0, 64.0, 1.0).onChange(() => this._updatePass());
         this._postProcessingGui.add(this._effectController, 'denoiseSamples', 1.0, 64.0, 1.0).onChange(() => this._updatePass());
         this._postProcessingGui.add(this._effectController, 'denoiseRadius', 0.0, 24.0, 0.01).onChange(() => this._updatePass());
@@ -8305,15 +8393,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
 
-var __awaiter$13 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 class SsrService {
     constructor(_settingsService) {
         this._settingsService = _settingsService;
@@ -8332,48 +8411,6 @@ class SsrService {
     ngOnDestroy() {
         this._subs.forEach(s => s.unsubscribe());
     }
-    init() {
-        const socket = new WebSocket('ws://localhost:7005');
-        const peerConnection = new RTCPeerConnection({
-            iceServers: [{ urls: 'stun:stun.1.google.com:19302' }]
-        });
-        peerConnection.onicecandidate = (event) => {
-            if (event.candidate) {
-                socket.send(JSON.stringify({ candidate: event.candidate }));
-            }
-        };
-        peerConnection.ontrack = (event) => {
-            const remoteVideo = document.getElementById('remoteVideo');
-            // @ts-ignore
-            if (remoteVideo.srcObject !== event.streams[0]) {
-                // @ts-ignore
-                remoteVideo.srcObject = event.streams[0];
-            }
-        };
-        socket.onmessage = (message) => __awaiter$13(this, void 0, void 0, function* () {
-            try {
-                const text = yield message.data.text();
-                const data = JSON.parse(text);
-                if (data.offer) {
-                    yield peerConnection.setRemoteDescription(new RTCSessionDescription(data.offer));
-                    const answer = yield peerConnection.createAnswer();
-                    yield peerConnection.setLocalDescription(answer);
-                    socket.send(JSON.stringify({ answer: peerConnection.localDescription }));
-                }
-                else if (data.candidate) {
-                    try {
-                        yield peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate));
-                    }
-                    catch (e) {
-                        console.error('Error adding ICE-Candidate', e);
-                    }
-                }
-            }
-            catch (e) {
-                console.error(e);
-            }
-        });
-    }
     sceneChanged(scene) {
         if (this._websocket.readyState === WebSocket.OPEN) {
             const sceneClone = scene.clone(true);
@@ -8622,7 +8659,7 @@ class SceneService {
             //   throw new Error('No WebGPU or WebGL2 support');
             // }
             const canvasElement = document.createElement('canvas');
-            const context = canvasElement.getContext('webgl2', { antialias: true });
+            const context = canvasElement.getContext('webgl2');
             this.webGL2Available = context !== undefined;
             // this.renderer = new WebGPURenderer({ alpha: true, antialias: true });
             // this.renderer =
@@ -8636,15 +8673,21 @@ class SceneService {
             //     logarithmicDepthBuffer: true*/
             //   });
             // this.renderer = new WebGLRenderer({alpha: true, antialias: false, preserveDrawingBuffer: true, premultipliedAlpha: true});
-            this.renderer = new WebGLRenderer( /*{
-              precision: 'highp',
-              powerPreference: 'high-performance',
-              antialias: true,
-              stencil: false,
-              depth: false
-            }*/);
+            this.renderer = new WebGLRenderer({
+            /*
+                  precision: 'highp',
+                  powerPreference: 'high-performance',
+            */
+            /*
+                  antialias: true,
+            */
+            /*
+                  stencil: false,
+                  depth: false
+            */
+            });
             this.renderer.outputColorSpace = SRGBColorSpace;
-            this.renderer.autoClear = false;
+            this.renderer.autoClear = true;
             this.renderer.setPixelRatio(window.devicePixelRatio);
             this.renderer.toneMapping = NoToneMapping; // ACESFilmicToneMapping; // LinearToneMapping;
             this.renderer.shadowMap.enabled = true;
@@ -8707,7 +8750,7 @@ class SceneService {
                     }
                     else {
                         this._postProcessing.render();
-                        this._outlineService.render();
+                        // this._outlineService.render();
                     }
                     // this.renderer.render(this.scene, this._cameraService.camera);
                 }
@@ -8788,7 +8831,7 @@ const modelEmpty = JSON.stringify(presetEmpty);
 // }
 //
 class PresetsService {
-    constructor(_appStateService, _permanentStoreService, _jsonUtils, _messageService, _settingsService, _configurationService, _storageService, _progressService, _sceneService) {
+    constructor(_appStateService, _permanentStoreService, _jsonUtils, _messageService, _settingsService, _configurationService, _storageService, _progressService, _sceneService, _eventService) {
         this._appStateService = _appStateService;
         this._permanentStoreService = _permanentStoreService;
         this._jsonUtils = _jsonUtils;
@@ -8798,6 +8841,7 @@ class PresetsService {
         this._storageService = _storageService;
         this._progressService = _progressService;
         this._sceneService = _sceneService;
+        this._eventService = _eventService;
         // public static presetsPath = '/assets/presets';
         this.isLoading = false;
         this.beforeLoad = new Subject();
@@ -8854,11 +8898,17 @@ class PresetsService {
                 preset.model = JSON.stringify(json);
             }
             const modelObj = JSON.parse(preset.model);
+            if (modelObj.floorplan && modelObj.floorplan.corners && Object.keys(modelObj.floorplan.corners).length > 0) {
+                this._eventService.dirty.next(true);
+            }
             return JSON.stringify(!modelObj.hasOwnProperty('needRescale') ? this._reScaleModel(modelObj) : modelObj);
         }));
     }
     _loadSavedRoomFromCloud(code) {
-        this._loadRoomPlan(() => new Promise(resolve => this._permanentStoreService.load(code).subscribe((json) => resolve(JSON.stringify(json)))));
+        this._loadRoomPlan(() => new Promise(resolve => {
+            this._eventService.dirty.next(true);
+            this._permanentStoreService.load(code).subscribe((json) => resolve(JSON.stringify(json)));
+        }));
     }
     _clear() {
         return __awaiter$11(this, void 0, void 0, function* () {
@@ -9036,14 +9086,14 @@ class PresetsService {
         }
     }
 }
-PresetsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PresetsService, deps: [{ token: AppStateService }, { token: PermanentStoreService }, { token: JsonUtilsService }, { token: MessageBusService }, { token: HomedecoratorSettingsService }, { token: ConfigurationService }, { token: LocalStorageService }, { token: ProgressService }, { token: SceneService }], target: i0.ɵɵFactoryTarget.Injectable });
+PresetsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PresetsService, deps: [{ token: AppStateService }, { token: PermanentStoreService }, { token: JsonUtilsService }, { token: MessageBusService }, { token: HomedecoratorSettingsService }, { token: ConfigurationService }, { token: LocalStorageService }, { token: ProgressService }, { token: SceneService }, { token: HomedecoratorAppEventService }], target: i0.ɵɵFactoryTarget.Injectable });
 PresetsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PresetsService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PresetsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: AppStateService }, { type: PermanentStoreService }, { type: JsonUtilsService }, { type: MessageBusService }, { type: HomedecoratorSettingsService }, { type: ConfigurationService }, { type: LocalStorageService }, { type: ProgressService }, { type: SceneService }]; } });
+        }], ctorParameters: function () { return [{ type: AppStateService }, { type: PermanentStoreService }, { type: JsonUtilsService }, { type: MessageBusService }, { type: HomedecoratorSettingsService }, { type: ConfigurationService }, { type: LocalStorageService }, { type: ProgressService }, { type: SceneService }, { type: HomedecoratorAppEventService }]; } });
 
 var DeviceSizeType;
 (function (DeviceSizeType) {
@@ -12167,8 +12217,8 @@ class MediaResource {
 /* tslint:disable */
 const VersionInfo = {
     application: "Homedecorator",
-    appVersion: "255.1.2",
-    revision: "111849"
+    appVersion: "255.1.4",
+    revision: "112028"
 };
 /* tslint:enable */
 
@@ -12780,7 +12830,7 @@ class CustomShapeFloorItem extends FloorItem {
         });
         const origScale = this.metadata.scale ? new Vector3(1, 1, 1).divide(this.metadata.scale) : new Vector3(1, 1, 1);
         const metadata = Object.assign({}, this.metadata);
-        metadata.skin = this.skin;
+        metadata.skin = Object.assign({}, this.skin);
         const copy = new CustomShapeFloorItem(metadata, new Mesh(this.customMesh.geometry.clone().scale(origScale.x, origScale.y, origScale.z), materialsCloned));
         copy.scaleGeometry(this.scale.x, this.scale.y, this.scale.z);
         copy.calculateHalfSize();
@@ -12826,7 +12876,7 @@ class CustomCylinderFloorItem extends FloorItem {
         });
         const origScale = this.metadata.scale ? new Vector3(1, 1, 1).divide(this.metadata.scale) : new Vector3(1, 1, 1);
         const metadata = Object.assign({}, this.metadata);
-        metadata.skin = this.skin;
+        metadata.skin = Object.assign({}, this.skin);
         const copy = new CustomCylinderFloorItem(metadata, new Mesh(this.customMesh.geometry.clone().scale(origScale.x, origScale.y, origScale.z), materialsCloned));
         copy.scaleGeometry(this.scale.x, this.scale.y, this.scale.z);
         copy.calculateHalfSize();
@@ -13261,11 +13311,12 @@ var __awaiter$X = (this && this.__awaiter) || function (thisArg, _arguments, P,
     });
 };
 class FloorService {
-    constructor(_sceneService, _outlineService, _itemService, _settingsService) {
+    constructor(_sceneService, _outlineService, _itemService, _settingsService, _messageService) {
         this._sceneService = _sceneService;
         this._outlineService = _outlineService;
         this._itemService = _itemService;
         this._settingsService = _settingsService;
+        this._messageService = _messageService;
         this._floors = [];
         this._subs = [];
         this._subs.push(this._sceneService.sceneInitialized.subscribe((initialized) => {
@@ -13310,6 +13361,8 @@ class FloorService {
             else {
                 this._updateFloorMaterial(this._floors[0], floorMaterial, texture);
             }
+            // emit new texture for appearance-section
+            this._messageService.emit(MessageType.ChangeTexture, texture);
             // room.floorColor = null;
         });
     }
@@ -13461,14 +13514,14 @@ class FloorService {
         return floorCenter;
     }
 }
-FloorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloorService, deps: [{ token: SceneService }, { token: OutlineService }, { token: ItemService }, { token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Injectable });
+FloorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloorService, deps: [{ token: SceneService }, { token: OutlineService }, { token: ItemService }, { token: HomedecoratorSettingsService }, { token: MessageBusService }], target: i0.ɵɵFactoryTarget.Injectable });
 FloorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloorService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: SceneService }, { type: OutlineService }, { type: ItemService }, { type: HomedecoratorSettingsService }]; } });
+        }], ctorParameters: function () { return [{ type: SceneService }, { type: OutlineService }, { type: ItemService }, { type: HomedecoratorSettingsService }, { type: MessageBusService }]; } });
 
 class CeilingService {
     constructor(_sceneService, _configurationService) {
@@ -13595,7 +13648,7 @@ class RoomService {
         this._subs = [];
         this._subs.push(this._appService.floorTexturesLoaded.subscribe((floors) => {
             if (floors) {
-                this._defaultFloorTexture = floors.find(f => f.default === true);
+                this._defaultFloorTexture = floors.find(f => f.default === true && !f.useStandalone);
             }
         }), this._cameraService.cameraMovementChanged.subscribe(() => this._updateEdgeVisibility(this._cameraService.camera.position)), this._presetService.afterLoad.subscribe(() => this._updateEdgeVisibility(this._cameraService.camera.position)), this._viewModeService.viewModeChanged.subscribe((mode) => __awaiter$W(this, void 0, void 0, function* () {
             if ((mode === ViewMode.RoomPlan3D || mode === ViewMode.TopView) && !_arService.arModeHasBeenActive()) {
@@ -13814,6 +13867,9 @@ class RoomService {
             }
         });
     }
+    resetAllRooms() {
+        this.rooms = [];
+    }
     _showHideWalls(show) {
         this.walls.forEach(w => w.showHideWall(show));
         this._sceneService.needsRender = true;
@@ -14954,7 +15010,7 @@ class CustomShapeWallItem extends WallItem {
         });
         const origScale = this.metadata.scale ? new Vector3(1, 1, 1).divide(this.metadata.scale) : new Vector3(1, 1, 1);
         const metadata = Object.assign({}, this.metadata);
-        metadata.skin = this.skin;
+        metadata.skin = Object.assign({}, this.skin);
         const copy = new CustomShapeWallItem(metadata, new Mesh(this.customMesh.geometry.clone().scale(origScale.x, origScale.y, origScale.z), materialsCloned));
         copy.scaleGeometry(this.scale.x, this.scale.y, this.scale.z);
         copy.calculateHalfSize();
@@ -14998,7 +15054,7 @@ class CustomCylinderWallItem extends WallItem {
         });
         const origScale = this.metadata.scale ? new Vector3(1, 1, 1).divide(this.metadata.scale) : new Vector3(1, 1, 1);
         const metadata = Object.assign({}, this.metadata);
-        metadata.skin = this.skin;
+        metadata.skin = Object.assign({}, this.skin);
         const copy = new CustomCylinderWallItem(metadata, new Mesh(this.customMesh.geometry.clone().scale(origScale.x, origScale.y, origScale.z), materialsCloned));
         copy.scaleGeometry(this.scale.x, this.scale.y, this.scale.z);
         copy.calculateHalfSize();
@@ -16908,7 +16964,7 @@ class ApiServiceModule {
                 this.messageService.emit(MessageType.ShowLoadingIndicator, { title: 'Rendering...' });
                 this.requestRender(filename, camera, standalone, renderParameters);
             }).catch(error => {
-                console.log(error);
+                this.messageService.emit(MessageType.RenderError, { title: 'Upload error', message: error.message });
             });
         });
     }
@@ -16946,8 +17002,8 @@ class ApiServiceModule {
                         return dataURL;
                     };
                 }
-            }).catch(err => {
-                console.log(err);
+            }).catch(error => {
+                this.messageService.emit(MessageType.RenderError, { title: 'Render error', message: error.message });
             });
         });
     }
@@ -21461,7 +21517,7 @@ class FloorTileIntersectionService {
             edge: 0,
             total: 0,
         };
-        console.log(floorMesh.position);
+        // console.log(floorMesh.position);
         const { floorHits, edgeHits } = this._checkIntersection2(floorMesh, floorPattern, geometry);
         for (const floorHit of floorHits) {
             if (floorHit.isLeft) {
@@ -21610,7 +21666,6 @@ class BuildFurnitureService {
         this.arPlacementUpdate = new Subject();
         this.showElementToolbar = false;
         this.isMouseOverObject = false;
-        this.activeAnswers = [];
         this.standAloneFirstBuildReady = false;
         this._useNodeIdToLink = true;
         this._standAlone = false;
@@ -21826,21 +21881,13 @@ class BuildFurnitureService {
             }
             result.instanceId = result.metaData.itemId;
             this.startPosition = result.metaData.position ? result.metaData.position.clone() : new Vector3();
-            const questionAndAnswers = yield this._iOne.getQuestionAndAnswersAsync(); // see if there is user input needed
-            if (questionAndAnswers.question && !questionAndAnswers.question.grouped) {
-                this._iOne.handleAnswersReceived(questionAndAnswers.answers);
-            }
-            this._appEventService.answerCountReceived.next(questionAndAnswers.answers.length);
-            if (questionAndAnswers.answers.length === 0) {
-                this.activeAnswers = [];
-                this.activeQuestion = undefined;
+            yield this._iOne.getQuestionAndAnswersAsync(); // see if there is user input needed
+            if (this._iOne.activeAnswers.length === 0) {
                 yield this._prepareSelectionsAndDecos(result)
                     .catch((e) => Promise.reject(e));
                 return this.build(result);
             }
             else {
-                this.activeQuestion = questionAndAnswers.question;
-                this.activeAnswers = questionAndAnswers.answers;
                 if (firstBuild) {
                     yield this._prepareSelectionsAndDecos(result)
                         .catch((e) => Promise.reject(e));
@@ -22422,9 +22469,7 @@ class BuildFurnitureService {
                 this._startToBuildFromConfigurator(metadata);
             }
             else if (getAnswers) { // if not rebuild then check if we need to get answers
-                const questionAndAnswers = yield this._iOne.getQuestionAndAnswersAsync(); // see if there is user input needed
-                this._iOne.handleAnswersReceived(questionAndAnswers.answers);
-                this._appEventService.answerCountReceived.next(questionAndAnswers.answers.length);
+                yield this._iOne.getQuestionAndAnswersAsync(); // see if there is user input needed
             }
         });
     }
@@ -23640,7 +23685,7 @@ SelectedChildMaterialTextureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVer
       </div>
     </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;grid-column-gap:10px;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 .no-image,.map-title-wrapper img{cursor:pointer;display:flex;height:30px;width:30px;border:1px solid;position:relative}.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}.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:rgba(0,0,0,.5);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:rgba(255,255,255,.5)}\n"], components: [{ type: i4.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }], 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;grid-column-gap:10px;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 .no-image,.map-title-wrapper img{cursor:pointer;display:flex;height:30px;width:30px;border:1px solid;position:relative}.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}.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:rgba(0,0,0,.5);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:rgba(255,255,255,.5)}\n"], components: [{ type: i4.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }], animations: [
         trigger('showHideMapContent', [
             state('void', style({ 'height': '0', opacity: 0 })),
             state('*', style({ 'height': '*', opacity: 1 })),
@@ -24311,7 +24356,7 @@ SelectedChildMaterialComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
         </div>
       </div>
     </ng-container>
-  `, isInline: true, styles: [".development-selected-child-material-wrapper{font-size:12px;position:fixed;right:0;top:65px;width:400px;height:100%;background:white;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:bold;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"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: SelectedChildMaterialTextureComponent, selector: "development-selected-child-material-texture", inputs: ["map", "title"], outputs: ["mapChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }], pipes: { "localize": LocalizePipe } });
+  `, isInline: true, styles: [".development-selected-child-material-wrapper{font-size:12px;position:fixed;right:0;top:65px;width:400px;height:100%;background:white;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:bold;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"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: SelectedChildMaterialTextureComponent, selector: "development-selected-child-material-texture", inputs: ["map", "title"], outputs: ["mapChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }], pipes: { "localize": LocalizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectedChildMaterialComponent, decorators: [{
             type: Component,
             args: [{
@@ -25558,7 +25603,7 @@ class EditLightComponent {
     }
 }
 EditLightComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditLightComponent, deps: [{ token: SceneService }, { token: LightsService }], target: i0.ɵɵFactoryTarget.Component });
-EditLightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditLightComponent, 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      <ng-container *ngIf=\"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      </ng-container>\r\n\r\n      <ng-container *ngIf=\"hasPosition && !light.userData.topDownDirectional\">\r\n\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\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\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      </ng-container>\r\n\r\n      <ng-container *ngIf=\"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      </ng-container>\r\n      <ng-container *ngIf=\"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      </ng-container>\r\n\r\n      <ng-container *ngIf=\"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      </ng-container>\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      <ng-container *ngIf=\"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      </ng-container>\r\n\r\n      <ng-container *ngIf=\"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          <mat-option *ngFor=\"let mapSize of mapSizes\" [value]=\"mapSize\" (click)=\"updateShadowMapSize(mapSize)\">\r\n            {{ mapSize }}\r\n          </mat-option>\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      </ng-container>\r\n\r\n      <ng-container *ngIf=\"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      </ng-container>\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:white;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"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i7$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "vertical", "displayWith", "valueText"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i7.MatLabel, selector: "mat-label" }, { type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "localize": LocalizePipe }, animations: [
+EditLightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditLightComponent, 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      <ng-container *ngIf=\"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      </ng-container>\r\n\r\n      <ng-container *ngIf=\"hasPosition && !light.userData.topDownDirectional\">\r\n\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\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\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      </ng-container>\r\n\r\n      <ng-container *ngIf=\"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      </ng-container>\r\n      <ng-container *ngIf=\"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      </ng-container>\r\n\r\n      <ng-container *ngIf=\"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      </ng-container>\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      <ng-container *ngIf=\"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      </ng-container>\r\n\r\n      <ng-container *ngIf=\"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          <mat-option *ngFor=\"let mapSize of mapSizes\" [value]=\"mapSize\" (click)=\"updateShadowMapSize(mapSize)\">\r\n            {{ mapSize }}\r\n          </mat-option>\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      </ng-container>\r\n\r\n      <ng-container *ngIf=\"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      </ng-container>\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:white;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"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i7$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "vertical", "displayWith", "valueText"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i7.MatLabel, selector: "mat-label" }, { type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "localize": LocalizePipe }, animations: [
         trigger('showHideDialog', [
             state('void', style({ opacity: 0 })),
             state('*', style({ opacity: 1 })),
@@ -25715,7 +25760,7 @@ EditLightplanComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
               </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:white;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"], components: [{ type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "vertical", "displayWith", "valueText"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i7.MatLabel, selector: "mat-label" }, { type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "localize": LocalizePipe, "keys": KeysPipe } });
+  `, 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:white;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"], components: [{ type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "vertical", "displayWith", "valueText"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i7.MatLabel, selector: "mat-label" }, { type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "localize": LocalizePipe, "keys": KeysPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditLightplanComponent, decorators: [{
             type: Component,
             args: [{
@@ -26102,7 +26147,7 @@ LightplanComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                       (saveClick)="savePreset($event)"
                       (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:white;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:white;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-select-panel .mat-option-text{display:flex;justify-content:space-between;align-items:center}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: EditLightComponent, selector: "edit-light", inputs: ["light"], outputs: ["okClick", "cancelClick"] }, { type: EditLightplanComponent, selector: "edit-lightplan", inputs: ["lightPreset"], outputs: ["saveClick", "cancelClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "localize": LocalizePipe }, animations: [
+  `, isInline: true, styles: [":host.popup-showing .lightplan-wrapper{opacity:.1!important}:host.show{display:flex}:host .lightplan-wrapper{opacity:1;position:fixed;background:white;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:white;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-select-panel .mat-option-text{display:flex;justify-content:space-between;align-items:center}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: EditLightComponent, selector: "edit-light", inputs: ["light"], outputs: ["okClick", "cancelClick"] }, { type: EditLightplanComponent, selector: "edit-lightplan", inputs: ["lightPreset"], outputs: ["saveClick", "cancelClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "localize": LocalizePipe }, animations: [
         trigger('showHideDialog', [
             state('void', style({ opacity: 0 })),
             state('*', style({ opacity: 1 })),
@@ -26335,7 +26380,7 @@ class SceneControlComponent {
         this.addRenderOptions(this._sceneService.renderer);
         this.addLights(this._sceneService.scene);
     }
-    addRenderOptions(renderer) {
+    addRenderOptions(renderer /*| WebGPURenderer*/) {
         const folder = this.gui.addFolder('renderer');
         folder.add(renderer, 'toneMappingExposure', 0, 5).onChange(() => {
             this._updateScene();
@@ -28093,7 +28138,7 @@ var __awaiter$w = (this && this.__awaiter) || function (thisArg, _arguments, P,
     });
 };
 class RenderDialogComponent {
-    constructor(cameraService, renderService, messageService, _utilsService, _domSanitizer, _settingsService, _newRenderService, _3dmRenderApi) {
+    constructor(cameraService, renderService, messageService, _utilsService, _domSanitizer, _settingsService, _newRenderService, _3dmRenderApi, _dialog) {
         this.cameraService = cameraService;
         this.renderService = renderService;
         this.messageService = messageService;
@@ -28102,6 +28147,7 @@ class RenderDialogComponent {
         this._settingsService = _settingsService;
         this._newRenderService = _newRenderService;
         this._3dmRenderApi = _3dmRenderApi;
+        this._dialog = _dialog;
         this.renderStatus = RenderStatus;
         this.iconName = IconName;
         this.renderModes = RenderModes;
@@ -28269,6 +28315,10 @@ class RenderDialogComponent {
         this.messageService.emit(MessageType.ShowLoadingIndicator, { title: 'Uploading...' });
         this._utilsService.prepRoomForRender(false, renderInput);
     }
+    cancelBlenderRender() {
+        this.messageService.emit(MessageType.HideLoadingIndicator);
+        this._dialog.closeAll();
+    }
     saveImage(url) {
         const link = document.createElement('a');
         link.setAttribute('target', '_blank');
@@ -28338,8 +28388,8 @@ class RenderDialogComponent {
         }
     }
 }
-RenderDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RenderDialogComponent, deps: [{ token: CameraService }, { token: RenderService }, { token: MessageBusService }, { token: UtilsService }, { token: i1.DomSanitizer }, { token: HomedecoratorSettingsService }, { token: NewRenderService }, { token: ApiServiceModule }], target: i0.ɵɵFactoryTarget.Component });
-RenderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RenderDialogComponent, selector: "rp-render-dialog", viewQueries: [{ propertyName: "renderImageField", first: true, predicate: ["render_image"], descendants: true, static: true }, { propertyName: "imageWidthField", first: true, predicate: ["render_image_width"], descendants: true, static: true }, { propertyName: "imageHeightField", first: true, predicate: ["render_image_height"], descendants: true, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"renderService.serverData.renderMode === renderModes.RenderIone\">\r\n  <div mat-dialog-content>\r\n    <div class=\"render-camera-positions\">\r\n      <div class=\"render-camera-positions-left\">\r\n        <!--\r\n        <button mat-raised-button class=\"matrixToggle\" (click)=\"toggleCameraPosition()\">{{ showMatrix ? ('HIDE_MATRIX' | localize) : ('SHOW_MATRIX' | localize) }}</button>\r\n        <div class=\"position-matrix-container\" *ngIf=\"showMatrix\">\r\n          <mat-grid-list [cols]=\"4\" rowHeight=\"35px\" class=\"camera_position_grid\">\r\n            <ng-container *ngFor=\"let item of cameraMatrix; let i = index\">\r\n              <mat-grid-tile colspan=\"1\"><b>{{ i }}:</b></mat-grid-tile>\r\n              <mat-grid-tile colspan=\"3\"><span>{{item}}</span></mat-grid-tile>\r\n            </ng-container>\r\n          </mat-grid-list>\r\n        </div>\r\n        -->\r\n\r\n        <h4>{{'LIGHTNING' | localize}}</h4>\r\n        <mat-form-field class=\"face-select-form\">\r\n          <mat-select [(ngModel)]=\"inputLight\">\r\n            <mat-option *ngFor=\"let light of renderService.lightnings\" [value]=\"light.id\">{{ light.name }}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <h4>{{'SIZE' | localize}}</h4>\r\n        <mat-form-field class=\"face-select-form\">\r\n          <mat-select [(value)]=\"inputSize\">\r\n            <mat-option *ngFor=\"let size of renderService.imageSizes\" [value]=\"size.id\">{{ size.name }} | <em>{{ size.width }}x{{ size.height }}</em></mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <p>You selected: {{inputSize}}</p>\r\n        <div class=\"position-separator\"></div>\r\n\r\n        <h4>{{'NAME' | localize}}</h4>\r\n        <mat-form-field>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            [(ngModel)]=\"inputName\"\r\n          />\r\n        </mat-form-field>\r\n\r\n        <p>{{ 'ADD_CURRENT_CAMERA_POSITION_TO_RENDER' | localize }}</p>\r\n\r\n        <button mat-raised-button class=\"add_camera_position\" color=\"primary\" title=\"{{'ADD_CURRENT_POSITION' | localize}}\" (click)=\"addRenderCustom()\">\r\n          {{'ADD_CURRENT_POSITION' | localize}}\r\n        </button>\r\n\r\n        <ng-container *ngIf=\"this.galleryInfo.items === 0\">\r\n\r\n          <div class=\"position-separator\"></div>\r\n\r\n          <p>{{ 'ADD_GALLERY_POSITIONS_TO_RENDER_INFO' | localize }}</p>\r\n\r\n          <button mat-raised-button class=\"add_gallery_positions\" color=\"primary\" title=\"{{'ADD_GALLERY_POSITIONS' | localize}}\" (click)=\"addRenderGallery()\">\r\n            {{'ADD_GALLERY_POSITIONS' | localize}}\r\n          </button>\r\n\r\n        </ng-container>\r\n\r\n      </div>\r\n      <div class=\"render-camera-positions-right\">\r\n        <mat-grid-list [cols]=\"16\" rowHeight=\"35px\" class=\"camera_positions_grid\">\r\n          <mat-grid-tile colspan=\"1\"><div class=\"grid-tile-head\"></div></mat-grid-tile>\r\n          <mat-grid-tile colspan=\"3\"><div class=\"grid-tile-head\">{{'AVAILABLE' | localize}}</div></mat-grid-tile>\r\n          <mat-grid-tile colspan=\"5\"><div class=\"grid-tile-head\">{{'NAME' | localize}}</div></mat-grid-tile>\r\n          <mat-grid-tile colspan=\"3\"><div class=\"grid-tile-head\">{{'LIGHT' | localize}}</div></mat-grid-tile>\r\n          <mat-grid-tile colspan=\"3\"><div class=\"grid-tile-head\">{{'SIZE' | localize}}</div></mat-grid-tile>\r\n          <mat-grid-tile colspan=\"1\"></mat-grid-tile>\r\n        </mat-grid-list>\r\n        <mat-grid-list [cols]=\"16\" rowHeight=\"55px\" class=\"camera_positions_grid\">\r\n          <ng-container *ngFor=\"let render of renderService.renders; index as i\">\r\n            <ng-container *ngIf=\"render.cameraPosition.type === 'custom' && render.productHash === renderService.currentProductHash\" class=\"grid_head\">\r\n              <mat-grid-tile colspan=\"1\">\r\n                <div class=\"grid-tile-content no-padding\" [hidden]=\"render.status === renderStatus.IsWaiting || render.status === renderStatus.IsRunning\">\r\n                  <input type=\"checkbox\" [(ngModel)]=\"inputReRenderChecked[i]\" [value]=\"render.id\" (change)=\"renderOnChange()\">\r\n                </div>\r\n              </mat-grid-tile>\r\n              <mat-grid-tile colspan=\"3\">\r\n                <div class=\"grid-tile-content grid-tile-image\">\r\n                  <div class=\"image-container\">\r\n                    <mat-icon class=\"homedecorator-material-icons\" *ngIf=\"render.url === '' && render.status !== renderStatus.IsRunning\">camera_alt</mat-icon>\r\n                    <a href=\"{{ render.url }}\" target=\"_blank\" download *ngIf=\"render.url !== '' && render.status !== renderStatus.IsRunning\">\r\n                      <img src=\"{{ render.url }}\">\r\n                    </a>\r\n                    <mat-spinner *ngIf=\"render.status === renderStatus.IsRunning\" [diameter]=\"25\" [mode]=\"'determinate'\" [value]=\"render.progress > 10 ? render.progress : 10\"></mat-spinner>\r\n                  </div>\r\n                </div>\r\n              </mat-grid-tile>\r\n              <mat-grid-tile colspan=\"5\"><div class=\"grid-tile-content\">{{ render.cameraPosition.name }}</div></mat-grid-tile>\r\n              <mat-grid-tile colspan=\"3\"><div class=\"grid-tile-content\">{{ render.lightning.name }}</div></mat-grid-tile>\r\n              <mat-grid-tile colspan=\"3\"><div class=\"grid-tile-content\">{{ render.imageSize.name }} | <em>{{ render.imageSize.width }}x{{ render.imageSize.height }}</em></div></mat-grid-tile>\r\n              <mat-grid-tile colspan=\"1\"><div class=\"grid-tile-content no-padding right\"><button (click)=\"removeCameraPosition(render)\" class=\"remove-btn\" [hidden]=\"render.status === renderStatus.IsWaiting || render.status === renderStatus.IsRunning\"><mat-icon class=\"homedecorator-material-icons\">delete</mat-icon></button></div></mat-grid-tile>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"this.galleryInfo.items > 0\">\r\n            <ng-container>\r\n              <mat-grid-tile colspan=\"1\" class=\"grid_head\">\r\n                <div class=\"grid-tile-content no-padding\" [hidden]=\"galleryInfo.renderInfo.status === renderStatus.IsWaiting || galleryInfo.renderInfo.status === renderStatus.IsRunning\">\r\n                  <input type=\"checkbox\" (change)=\"galleryRenderOnChange($event)\">\r\n                </div>\r\n              </mat-grid-tile>\r\n              <mat-grid-tile colspan=\"8\" class=\"grid_head\"><div class=\"grid-tile-content\">{{ 'GALLERY_IMAGES_FROM' | localize }} {{ galleryInfo.items }} {{ 'CAMERA_POSITIONS' | localize }}</div></mat-grid-tile>\r\n              <mat-grid-tile colspan=\"3\" class=\"grid_head\"><div class=\"grid-tile-content\">{{ galleryInfo.renderInfo.lightning.name }}</div></mat-grid-tile>\r\n              <mat-grid-tile colspan=\"3\" class=\"grid_head\"><div class=\"grid-tile-content\">{{ galleryInfo.renderInfo.imageSize.name }} | <em>{{ galleryInfo.renderInfo.imageSize.width }}x{{ galleryInfo.renderInfo.imageSize.height }}</em></div></mat-grid-tile>\r\n              <mat-grid-tile colspan=\"1\" class=\"grid_head\"><div class=\"grid-tile-content no-padding right\"><button (click)=\"removeCameraPosition('gallery')\" class=\"remove-btn\" [hidden]=\"galleryInfo.renderInfo.status === renderStatus.IsWaiting || galleryInfo.renderInfo.status === renderStatus.IsRunning\"><mat-icon class=\"homedecorator-material-icons\">delete</mat-icon></button></div></mat-grid-tile>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let render of renderService.renders; index as i\">\r\n              <ng-container *ngIf=\"render.cameraPosition.type === 'gallery' && render.productHash === renderService.currentProductHash\">\r\n                <mat-grid-tile colspan=\"2\">\r\n                  <div class=\"grid-tile-content\" [hidden]=\"true\"><input type=\"checkbox\" [(ngModel)]=\"inputReRenderChecked[i]\" [value]=\"render.id\" (change)=\"renderOnChange()\"></div>\r\n                  <div class=\"grid-tile-content small-padding grid-tile-image\">\r\n                    <div class=\"image-container\">\r\n                      <mat-icon class=\"homedecorator-material-icons\" *ngIf=\"render.url === '' && render.status !== renderStatus.IsRunning\">camera_alt</mat-icon>\r\n                      <a href=\"{{ render.url }}\" target=\"_blank\" download *ngIf=\"render.url !== '' && render.status !== renderStatus.IsRunning\">\r\n                        <img src=\"{{ render.url }}\">\r\n                      </a>\r\n                      <mat-spinner *ngIf=\"render.status === renderStatus.IsRunning\" [diameter]=\"25\" [mode]=\"'determinate'\" [value]=\"render.progress > 10 ? render.progress : 10\"></mat-spinner>\r\n                    </div>\r\n                  </div>\r\n                </mat-grid-tile>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </mat-grid-list>\r\n      </div>\r\n    </div>\r\n\r\n    <button mat-raised-button class=\"render_btn\" (click)=\"addRendersToQueue()\" color=\"primary\" title=\"{{'CREATE_RENDERS' | localize}}\" [disabled]=\"!canRender || renderService.renderQueue.length > 0\">\r\n      {{'CREATE_RENDERS' | localize}}\r\n    </button>\r\n\r\n  </div>\r\n\r\n  <button mat-button mat-dialog-close class=\"close_btn\">X</button>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"renderService.serverData.renderMode === renderModes.RenderRoom\">\r\n\r\n  <div mat-dialog-content>\r\n    <div class=\"render-camera-positions\">\r\n      <div class=\"render-camera-positions-left large\">\r\n        <div *ngIf=\"imageRenderSource != ''\" class=\"render-image-content\">\r\n          <img [src]=\"imageRenderSource\" #render_image>\r\n          <div class=\"loader\" [ngClass]=\"(renderProgress == 100 ? 'ready' : '')\">\r\n            <span class=\"loader_progress\" [style.width.%]=\"(renderProgress ? renderProgress : 0)\">\r\n              <span>{{ (renderProgress ? renderProgress : 0) }}</span>\r\n            </span>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"imageRenderSource == ''\" class=\"image_spacer\">\r\n          <mat-icon class=\"homedecorator-material-icons\">camera_alt</mat-icon>\r\n        </div>\r\n        <div class=\"position-separator\"></div>\r\n        <mat-form-field class=\"face-select-form\" *ngIf=\"renderService.serverData.renderMode === renderModes.RenderRoom\">\r\n          <mat-label>{{\"IMAGE_SIZE\" | localize}}</mat-label>\r\n          <mat-select [(ngModel)]=\"renderService.selectedImageSize\">\r\n            <mat-option *ngFor=\"let size of renderService.imageSizes\" [value]=\"size.id\">{{ size.name }} {{ size.width }}x{{ size.height }}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <div *ngIf=\"renderService.blenderRenderService\">\r\n          <mat-form-field\r\n            class=\"face-select-form\"\r\n            *ngIf=\"renderService.serverData.renderMode === renderModes.RenderRoom\">\r\n            <mat-label>{{ \"ENVIRONMENT\" | localize }}</mat-label>\r\n            <mat-select [(ngModel)]=\"renderService.selectedRenderScene\">\r\n              <mat-option\r\n                *ngFor=\"let scene of renderService.renderScenes\"\r\n                [value]=\"scene.sceneAssetId\">{{ scene.name }}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n\r\n\r\n<!--        <mat-form-field class=\"face-select-form\" *ngIf=\"renderService.serverData.renderMode === renderModes.RenderRoom\">-->\r\n<!--          <mat-label>{{\"ENVIRONMENT\" | localize}}</mat-label>-->\r\n<!--          <mat-select [(ngModel)]=\"renderService.selectedEnvironment\">-->\r\n<!--            <mat-option *ngFor=\"let renderEnvironment of renderService.renderEnvironments\" [value]=\"renderEnvironment.id\">{{ renderEnvironment.name }}</mat-option>-->\r\n<!--          </mat-select>-->\r\n<!--        </mat-form-field>-->\r\n\r\n        <button  *ngIf=\"!renderService.blenderRenderService\" mat-raised-button (click)=\"startRenderingRoom()\" color=\"primary\" title=\"{{'MAKE_A_PICTURE' | localize}}\" [disabled]=\"disablePictureButton\">\r\n          {{'MAKE_A_PICTURE' | localize}}\r\n        </button>\r\n\r\n        <button  *ngIf=\"renderService.blenderRenderService\" mat-raised-button (click)=\"createBlenderRender()\" color=\"primary\" title=\"{{'MAKE_A_PICTURE' | localize}}\" [disabled]=\"disablePictureButton\">\r\n          {{'MAKE_A_PICTURE' | localize}}\r\n        </button>\r\n\r\n      </div>\r\n\r\n\r\n<!--      <div class=\"render-camera-positions-right small\">-->\r\n<!--        <mat-grid-list [cols]=\"10\" rowHeight=\"35px\" class=\"camera_positions_grid\">-->\r\n<!--          <mat-grid-tile colspan=\"3\"><div class=\"grid-tile-head\">{{'IMAGE' | localize}}</div></mat-grid-tile>-->\r\n<!--          <mat-grid-tile colspan=\"6\"><div class=\"grid-tile-head\">{{'NAME' | localize}}</div></mat-grid-tile>-->\r\n<!--          <mat-grid-tile colspan=\"1\"><div class=\"grid-tile-head\"></div></mat-grid-tile>-->\r\n<!--        </mat-grid-list>-->\r\n<!--        <mat-grid-list [cols]=\"11\" rowHeight=\"55px\" class=\"camera_positions_grid\">-->\r\n<!--          <ng-container *ngFor=\"let image of renderedImages; let index = index\">-->\r\n<!--            <mat-grid-tile colspan=\"3\">-->\r\n<!--              <div class=\"grid-tile-content grid-tile-image\">-->\r\n<!--                <div class=\"image-container\">-->\r\n<!--                  <a href=\"{{ image }}\" target=\"_blank\" download>-->\r\n<!--                    <img src=\"{{ image }}\">-->\r\n<!--                  </a>-->\r\n<!--                </div>-->\r\n<!--              </div>-->\r\n<!--            </mat-grid-tile>-->\r\n<!--            <mat-grid-tile colspan=\"6\"><div class=\"grid-tile-content\">{{ 'IMAGE' | localize }}</div></mat-grid-tile>-->\r\n<!--            <mat-grid-tile colspan=\"2\">-->\r\n<!--              <div class=\"grid-tile-content\">-->\r\n<!--                <button mat-icon-button (click)=\"saveImage(image)\" title=\"{{'DOWNLOAD_IMAGE' | localize}}\">-->\r\n<!--                  <mat-icon class=\"homedecorator-material-icons\">get_app</mat-icon>-->\r\n<!--                </button>-->\r\n<!--              </div>-->\r\n<!--              <div class=\"grid-tile-content no-padding right\"><button (click)=\"removeRender(image, index)\" class=\"remove-btn\"><mat-icon class=\"homedecorator-material-icons\">delete</mat-icon></button></div>-->\r\n<!--            </mat-grid-tile>-->\r\n<!--          </ng-container>-->\r\n<!--        </mat-grid-list>-->\r\n<!--      </div>-->\r\n    </div>\r\n\r\n    <button mat-button mat-dialog-close class=\"close_btn\">X</button>\r\n\r\n  </div>\r\n\r\n</ng-container>\r\n", styles: ["::ng-deep .render-dialog-content .mat-dialog-container{margin:0;padding:0}::ng-deep .render-dialog-content .mat-dialog-container .mat-dialog-content{margin:0;padding:0}:host{display:block;max-width:100%;position:relative;box-sizing:border-box}:host *{box-sizing:border-box}:host [hidden]{display:none!important}:host .close_btn{position:absolute;top:0;right:0;font-size:30px;padding:0;width:50px;min-width:0px;line-height:45px}:host .render_btn{position:absolute;left:65%;margin:0 0 0 -83px;bottom:15px}:host .render-camera-positions{display:flex;font-size:14px}:host .render-camera-positions .render-camera-positions-left{min-width:300px;background:#e4edf4;padding:15px;text-align:center}:host .render-camera-positions .render-camera-positions-left h3{text-align:left}:host .render-camera-positions .render-camera-positions-left h4{text-align:left;margin:0}:host .render-camera-positions .render-camera-positions-left .position-separator{width:100%;font-size:0;height:1px;background:#fff;margin:15px 0}:host .render-camera-positions .render-camera-positions-left p{font-size:12px;text-align:center;line-height:170%}:host .render-camera-positions .render-camera-positions-left button{font-size:12px;line-height:32px}:host .render-camera-positions .render-camera-positions-left button.matrixToggle{margin:0 0 5px}:host .render-camera-positions .render-camera-positions-left mat-grid-list{text-align:left}:host .render-camera-positions .render-camera-positions-left mat-grid-list mat-grid-tile .mat-figure{justify-content:left}:host .render-camera-positions .render-camera-positions-left mat-grid-list mat-grid-tile b{text-align:left;width:100%}:host .render-camera-positions .render-camera-positions-left mat-grid-list mat-grid-tile span{display:inline-block;text-align:right;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px;background:#fff;border-radius:5px;line-height:30px;font-size:90%}:host .render-camera-positions .render-camera-positions-left .mat-form-field{width:100%}:host .render-camera-positions .render-camera-positions-left mat-slide-toggle{float:right}:host .render-camera-positions .render-camera-positions-left .render-image-content{width:100%;align-self:start;position:relative}:host .render-camera-positions .render-camera-positions-left .render-image-content img{width:100%;max-width:100%;align-self:start;border-radius:5px}:host .render-camera-positions .render-camera-positions-left .render-image-content .loader{align-self:start;width:calc(100% - 20px);font-size:0;line-height:0;height:6px;position:absolute;left:10px;bottom:15px;z-index:2;text-align:left}:host .render-camera-positions .render-camera-positions-left .render-image-content .loader.ready .loader_progress{background:#74B77F}:host .render-camera-positions .render-camera-positions-left .render-image-content .loader.ready .loader_progress span{color:#74b77f;border-color:#74b77f}:host .render-camera-positions .render-camera-positions-left .render-image-content .loader .loader_progress{vertical-align:top;display:inline-block;background:#3760a1;height:6px;position:relative;transition:.2s ease-in-out;-moz-transition:.2s ease-in-out;-webkit-transition:.2s ease-in-out;border-radius:5px;min-width:25px}:host .render-camera-positions .render-camera-positions-left .render-image-content .loader .loader_progress span{float:left;width:25px;height:16px;line-height:16px;border-radius:4px;text-align:center;position:absolute;top:-5px;font-size:9px;font-weight:bold;background:#fff;right:0px}:host .render-camera-positions .render-camera-positions-left .image_spacer{position:relative;background:#fafafa;width:100%;height:200px;border-radius:5px}:host .render-camera-positions .render-camera-positions-left .image_spacer .mat-icon{position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;width:60px;height:60px;font-size:60px}:host .render-camera-positions .render-camera-positions-right{width:70%;padding:15px 15px 66px;font-size:12px}:host .render-camera-positions .render-camera-positions-right.large{width:60%}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile{border-bottom:1px solid #e4edf4}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile.grid_head{border-color:#fff}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-head{width:100%;text-align:left;font-weight:bold;padding:0 15px}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content{width:100%;text-align:left;padding:0 15px}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.no-padding{padding:0}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.small-padding{padding:0 2px}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.right{text-align:right}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.grid-tile-image .image-container{width:100%;height:46px;border:1px solid #e4edf4;border-radius:5px;vertical-align:top;text-align:center;display:table;font-size:0}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.grid-tile-image .image-container a{display:table-cell;vertical-align:middle}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.grid-tile-image .image-container a img{max-width:100%;max-height:46px;display:inline-block}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.grid-tile-image .image-container .mat-icon{height:46px;line-height:46px}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.grid-tile-image .image-container .mat-spinner{margin:11px 0 0;display:inline-block}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content .remove-btn{border:none;background:transparent;color:#0003;cursor:pointer}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content .remove-btn:hover{color:red}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content .remove-btn .mat-icon{height:18px;width:18px;font-size:18px}\n"], components: [{ type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i15.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.MatLabel, selector: "mat-label" }], pipes: { "localize": LocalizePipe }, animations: [
+RenderDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RenderDialogComponent, deps: [{ token: CameraService }, { token: RenderService }, { token: MessageBusService }, { token: UtilsService }, { token: i1.DomSanitizer }, { token: HomedecoratorSettingsService }, { token: NewRenderService }, { token: ApiServiceModule }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+RenderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RenderDialogComponent, selector: "rp-render-dialog", viewQueries: [{ propertyName: "renderImageField", first: true, predicate: ["render_image"], descendants: true, static: true }, { propertyName: "imageWidthField", first: true, predicate: ["render_image_width"], descendants: true, static: true }, { propertyName: "imageHeightField", first: true, predicate: ["render_image_height"], descendants: true, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"renderService.serverData.renderMode === renderModes.RenderIone\">\r\n  <div mat-dialog-content>\r\n    <div class=\"render-camera-positions\">\r\n      <div class=\"render-camera-positions-left\">\r\n        <!--\r\n        <button mat-raised-button class=\"matrixToggle\" (click)=\"toggleCameraPosition()\">{{ showMatrix ? ('HIDE_MATRIX' | localize) : ('SHOW_MATRIX' | localize) }}</button>\r\n        <div class=\"position-matrix-container\" *ngIf=\"showMatrix\">\r\n          <mat-grid-list [cols]=\"4\" rowHeight=\"35px\" class=\"camera_position_grid\">\r\n            <ng-container *ngFor=\"let item of cameraMatrix; let i = index\">\r\n              <mat-grid-tile colspan=\"1\"><b>{{ i }}:</b></mat-grid-tile>\r\n              <mat-grid-tile colspan=\"3\"><span>{{item}}</span></mat-grid-tile>\r\n            </ng-container>\r\n          </mat-grid-list>\r\n        </div>\r\n        -->\r\n\r\n        <h4>{{'LIGHTNING' | localize}}</h4>\r\n        <mat-form-field class=\"face-select-form\">\r\n          <mat-select [(ngModel)]=\"inputLight\">\r\n            <mat-option *ngFor=\"let light of renderService.lightnings\" [value]=\"light.id\">{{ light.name }}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <h4>{{'SIZE' | localize}}</h4>\r\n        <mat-form-field class=\"face-select-form\">\r\n          <mat-select [(value)]=\"inputSize\">\r\n            <mat-option *ngFor=\"let size of renderService.imageSizes\" [value]=\"size.id\">{{ size.name }} | <em>{{ size.width }}x{{ size.height }}</em></mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <p>You selected: {{inputSize}}</p>\r\n        <div class=\"position-separator\"></div>\r\n\r\n        <h4>{{'NAME' | localize}}</h4>\r\n        <mat-form-field>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            [(ngModel)]=\"inputName\"\r\n          />\r\n        </mat-form-field>\r\n\r\n        <p>{{ 'ADD_CURRENT_CAMERA_POSITION_TO_RENDER' | localize }}</p>\r\n\r\n        <button mat-raised-button class=\"add_camera_position\" color=\"primary\" title=\"{{'ADD_CURRENT_POSITION' | localize}}\" (click)=\"addRenderCustom()\">\r\n          {{'ADD_CURRENT_POSITION' | localize}}\r\n        </button>\r\n\r\n        <ng-container *ngIf=\"this.galleryInfo.items === 0\">\r\n\r\n          <div class=\"position-separator\"></div>\r\n\r\n          <p>{{ 'ADD_GALLERY_POSITIONS_TO_RENDER_INFO' | localize }}</p>\r\n\r\n          <button mat-raised-button class=\"add_gallery_positions\" color=\"primary\" title=\"{{'ADD_GALLERY_POSITIONS' | localize}}\" (click)=\"addRenderGallery()\">\r\n            {{'ADD_GALLERY_POSITIONS' | localize}}\r\n          </button>\r\n\r\n        </ng-container>\r\n\r\n      </div>\r\n      <div class=\"render-camera-positions-right\">\r\n        <mat-grid-list [cols]=\"16\" rowHeight=\"35px\" class=\"camera_positions_grid\">\r\n          <mat-grid-tile colspan=\"1\"><div class=\"grid-tile-head\"></div></mat-grid-tile>\r\n          <mat-grid-tile colspan=\"3\"><div class=\"grid-tile-head\">{{'AVAILABLE' | localize}}</div></mat-grid-tile>\r\n          <mat-grid-tile colspan=\"5\"><div class=\"grid-tile-head\">{{'NAME' | localize}}</div></mat-grid-tile>\r\n          <mat-grid-tile colspan=\"3\"><div class=\"grid-tile-head\">{{'LIGHT' | localize}}</div></mat-grid-tile>\r\n          <mat-grid-tile colspan=\"3\"><div class=\"grid-tile-head\">{{'SIZE' | localize}}</div></mat-grid-tile>\r\n          <mat-grid-tile colspan=\"1\"></mat-grid-tile>\r\n        </mat-grid-list>\r\n        <mat-grid-list [cols]=\"16\" rowHeight=\"55px\" class=\"camera_positions_grid\">\r\n          <ng-container *ngFor=\"let render of renderService.renders; index as i\">\r\n            <ng-container *ngIf=\"render.cameraPosition.type === 'custom' && render.productHash === renderService.currentProductHash\" class=\"grid_head\">\r\n              <mat-grid-tile colspan=\"1\">\r\n                <div class=\"grid-tile-content no-padding\" [hidden]=\"render.status === renderStatus.IsWaiting || render.status === renderStatus.IsRunning\">\r\n                  <input type=\"checkbox\" [(ngModel)]=\"inputReRenderChecked[i]\" [value]=\"render.id\" (change)=\"renderOnChange()\">\r\n                </div>\r\n              </mat-grid-tile>\r\n              <mat-grid-tile colspan=\"3\">\r\n                <div class=\"grid-tile-content grid-tile-image\">\r\n                  <div class=\"image-container\">\r\n                    <mat-icon class=\"homedecorator-material-icons\" *ngIf=\"render.url === '' && render.status !== renderStatus.IsRunning\">camera_alt</mat-icon>\r\n                    <a href=\"{{ render.url }}\" target=\"_blank\" download *ngIf=\"render.url !== '' && render.status !== renderStatus.IsRunning\">\r\n                      <img src=\"{{ render.url }}\">\r\n                    </a>\r\n                    <mat-spinner *ngIf=\"render.status === renderStatus.IsRunning\" [diameter]=\"25\" [mode]=\"'determinate'\" [value]=\"render.progress > 10 ? render.progress : 10\"></mat-spinner>\r\n                  </div>\r\n                </div>\r\n              </mat-grid-tile>\r\n              <mat-grid-tile colspan=\"5\"><div class=\"grid-tile-content\">{{ render.cameraPosition.name }}</div></mat-grid-tile>\r\n              <mat-grid-tile colspan=\"3\"><div class=\"grid-tile-content\">{{ render.lightning.name }}</div></mat-grid-tile>\r\n              <mat-grid-tile colspan=\"3\"><div class=\"grid-tile-content\">{{ render.imageSize.name }} | <em>{{ render.imageSize.width }}x{{ render.imageSize.height }}</em></div></mat-grid-tile>\r\n              <mat-grid-tile colspan=\"1\"><div class=\"grid-tile-content no-padding right\"><button (click)=\"removeCameraPosition(render)\" class=\"remove-btn\" [hidden]=\"render.status === renderStatus.IsWaiting || render.status === renderStatus.IsRunning\"><mat-icon class=\"homedecorator-material-icons\">delete</mat-icon></button></div></mat-grid-tile>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"this.galleryInfo.items > 0\">\r\n            <ng-container>\r\n              <mat-grid-tile colspan=\"1\" class=\"grid_head\">\r\n                <div class=\"grid-tile-content no-padding\" [hidden]=\"galleryInfo.renderInfo.status === renderStatus.IsWaiting || galleryInfo.renderInfo.status === renderStatus.IsRunning\">\r\n                  <input type=\"checkbox\" (change)=\"galleryRenderOnChange($event)\">\r\n                </div>\r\n              </mat-grid-tile>\r\n              <mat-grid-tile colspan=\"8\" class=\"grid_head\"><div class=\"grid-tile-content\">{{ 'GALLERY_IMAGES_FROM' | localize }} {{ galleryInfo.items }} {{ 'CAMERA_POSITIONS' | localize }}</div></mat-grid-tile>\r\n              <mat-grid-tile colspan=\"3\" class=\"grid_head\"><div class=\"grid-tile-content\">{{ galleryInfo.renderInfo.lightning.name }}</div></mat-grid-tile>\r\n              <mat-grid-tile colspan=\"3\" class=\"grid_head\"><div class=\"grid-tile-content\">{{ galleryInfo.renderInfo.imageSize.name }} | <em>{{ galleryInfo.renderInfo.imageSize.width }}x{{ galleryInfo.renderInfo.imageSize.height }}</em></div></mat-grid-tile>\r\n              <mat-grid-tile colspan=\"1\" class=\"grid_head\"><div class=\"grid-tile-content no-padding right\"><button (click)=\"removeCameraPosition('gallery')\" class=\"remove-btn\" [hidden]=\"galleryInfo.renderInfo.status === renderStatus.IsWaiting || galleryInfo.renderInfo.status === renderStatus.IsRunning\"><mat-icon class=\"homedecorator-material-icons\">delete</mat-icon></button></div></mat-grid-tile>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let render of renderService.renders; index as i\">\r\n              <ng-container *ngIf=\"render.cameraPosition.type === 'gallery' && render.productHash === renderService.currentProductHash\">\r\n                <mat-grid-tile colspan=\"2\">\r\n                  <div class=\"grid-tile-content\" [hidden]=\"true\"><input type=\"checkbox\" [(ngModel)]=\"inputReRenderChecked[i]\" [value]=\"render.id\" (change)=\"renderOnChange()\"></div>\r\n                  <div class=\"grid-tile-content small-padding grid-tile-image\">\r\n                    <div class=\"image-container\">\r\n                      <mat-icon class=\"homedecorator-material-icons\" *ngIf=\"render.url === '' && render.status !== renderStatus.IsRunning\">camera_alt</mat-icon>\r\n                      <a href=\"{{ render.url }}\" target=\"_blank\" download *ngIf=\"render.url !== '' && render.status !== renderStatus.IsRunning\">\r\n                        <img src=\"{{ render.url }}\">\r\n                      </a>\r\n                      <mat-spinner *ngIf=\"render.status === renderStatus.IsRunning\" [diameter]=\"25\" [mode]=\"'determinate'\" [value]=\"render.progress > 10 ? render.progress : 10\"></mat-spinner>\r\n                    </div>\r\n                  </div>\r\n                </mat-grid-tile>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </mat-grid-list>\r\n      </div>\r\n    </div>\r\n\r\n    <button mat-raised-button class=\"render_btn\" (click)=\"addRendersToQueue()\" color=\"primary\" title=\"{{'CREATE_RENDERS' | localize}}\" [disabled]=\"!canRender || renderService.renderQueue.length > 0\">\r\n      {{'CREATE_RENDERS' | localize}}\r\n    </button>\r\n\r\n  </div>\r\n\r\n  <button mat-button mat-dialog-close class=\"close_btn\">X</button>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"renderService.serverData.renderMode === renderModes.RenderRoom\">\r\n\r\n  <div mat-dialog-content>\r\n    <div class=\"render-camera-positions\">\r\n      <div class=\"render-camera-positions-left large\">\r\n        <div *ngIf=\"imageRenderSource != ''\" class=\"render-image-content\">\r\n          <img [src]=\"imageRenderSource\" #render_image>\r\n          <div class=\"loader\" [ngClass]=\"(renderProgress == 100 ? 'ready' : '')\">\r\n            <span class=\"loader_progress\" [style.width.%]=\"(renderProgress ? renderProgress : 0)\">\r\n              <span>{{ (renderProgress ? renderProgress : 0) }}</span>\r\n            </span>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"imageRenderSource == ''\" class=\"image_spacer\">\r\n          <mat-icon class=\"homedecorator-material-icons\">camera_alt</mat-icon>\r\n        </div>\r\n        <div class=\"position-separator\"></div>\r\n        <mat-form-field class=\"face-select-form\" *ngIf=\"renderService.serverData.renderMode === renderModes.RenderRoom\">\r\n          <mat-label>{{\"IMAGE_SIZE\" | localize}}</mat-label>\r\n          <mat-select [(ngModel)]=\"renderService.selectedImageSize\">\r\n            <mat-option *ngFor=\"let size of renderService.imageSizes\" [value]=\"size.id\">{{ size.name }} {{ size.width }}x{{ size.height }}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <div *ngIf=\"renderService.blenderRenderService\">\r\n          <mat-form-field\r\n            class=\"face-select-form\"\r\n            *ngIf=\"renderService.serverData.renderMode === renderModes.RenderRoom\">\r\n            <mat-label>{{ \"ENVIRONMENT\" | localize }}</mat-label>\r\n            <mat-select [(ngModel)]=\"renderService.selectedRenderScene\">\r\n              <mat-option\r\n                *ngFor=\"let scene of renderService.renderScenes\"\r\n                [value]=\"scene.sceneAssetId\">{{ scene.name }}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n\r\n\r\n<!--        <mat-form-field class=\"face-select-form\" *ngIf=\"renderService.serverData.renderMode === renderModes.RenderRoom\">-->\r\n<!--          <mat-label>{{\"ENVIRONMENT\" | localize}}</mat-label>-->\r\n<!--          <mat-select [(ngModel)]=\"renderService.selectedEnvironment\">-->\r\n<!--            <mat-option *ngFor=\"let renderEnvironment of renderService.renderEnvironments\" [value]=\"renderEnvironment.id\">{{ renderEnvironment.name }}</mat-option>-->\r\n<!--          </mat-select>-->\r\n<!--        </mat-form-field>-->\r\n\r\n        <button  *ngIf=\"!renderService.blenderRenderService\" mat-raised-button (click)=\"startRenderingRoom()\" color=\"primary\" title=\"{{'MAKE_A_PICTURE' | localize}}\" [disabled]=\"disablePictureButton\">\r\n          {{'MAKE_A_PICTURE' | localize}}\r\n        </button>\r\n\r\n        <button  *ngIf=\"renderService.blenderRenderService\" mat-raised-button (click)=\"createBlenderRender()\" color=\"primary\" title=\"{{'MAKE_A_PICTURE' | localize}}\" [disabled]=\"disablePictureButton\">\r\n          {{'MAKE_A_PICTURE' | localize}}\r\n        </button>\r\n\r\n        <button  *ngIf=\"renderService.blenderRenderService\" mat-raised-button (click)=\"cancelBlenderRender()\" color=\"accent\" title=\"{{'CANCEL' | localize}}\" [disabled]=\"disablePictureButton\">\r\n          {{'CANCEL' | localize}}\r\n        </button>\r\n\r\n      </div>\r\n\r\n\r\n<!--      <div class=\"render-camera-positions-right small\">-->\r\n<!--        <mat-grid-list [cols]=\"10\" rowHeight=\"35px\" class=\"camera_positions_grid\">-->\r\n<!--          <mat-grid-tile colspan=\"3\"><div class=\"grid-tile-head\">{{'IMAGE' | localize}}</div></mat-grid-tile>-->\r\n<!--          <mat-grid-tile colspan=\"6\"><div class=\"grid-tile-head\">{{'NAME' | localize}}</div></mat-grid-tile>-->\r\n<!--          <mat-grid-tile colspan=\"1\"><div class=\"grid-tile-head\"></div></mat-grid-tile>-->\r\n<!--        </mat-grid-list>-->\r\n<!--        <mat-grid-list [cols]=\"11\" rowHeight=\"55px\" class=\"camera_positions_grid\">-->\r\n<!--          <ng-container *ngFor=\"let image of renderedImages; let index = index\">-->\r\n<!--            <mat-grid-tile colspan=\"3\">-->\r\n<!--              <div class=\"grid-tile-content grid-tile-image\">-->\r\n<!--                <div class=\"image-container\">-->\r\n<!--                  <a href=\"{{ image }}\" target=\"_blank\" download>-->\r\n<!--                    <img src=\"{{ image }}\">-->\r\n<!--                  </a>-->\r\n<!--                </div>-->\r\n<!--              </div>-->\r\n<!--            </mat-grid-tile>-->\r\n<!--            <mat-grid-tile colspan=\"6\"><div class=\"grid-tile-content\">{{ 'IMAGE' | localize }}</div></mat-grid-tile>-->\r\n<!--            <mat-grid-tile colspan=\"2\">-->\r\n<!--              <div class=\"grid-tile-content\">-->\r\n<!--                <button mat-icon-button (click)=\"saveImage(image)\" title=\"{{'DOWNLOAD_IMAGE' | localize}}\">-->\r\n<!--                  <mat-icon class=\"homedecorator-material-icons\">get_app</mat-icon>-->\r\n<!--                </button>-->\r\n<!--              </div>-->\r\n<!--              <div class=\"grid-tile-content no-padding right\"><button (click)=\"removeRender(image, index)\" class=\"remove-btn\"><mat-icon class=\"homedecorator-material-icons\">delete</mat-icon></button></div>-->\r\n<!--            </mat-grid-tile>-->\r\n<!--          </ng-container>-->\r\n<!--        </mat-grid-list>-->\r\n<!--      </div>-->\r\n    </div>\r\n\r\n    <button mat-button mat-dialog-close class=\"close_btn\">X</button>\r\n\r\n  </div>\r\n\r\n</ng-container>\r\n", styles: ["::ng-deep .render-dialog-content .mat-dialog-container{margin:0;padding:0}::ng-deep .render-dialog-content .mat-dialog-container .mat-dialog-content{margin:0;padding:0}:host{display:block;max-width:100%;position:relative;box-sizing:border-box}:host *{box-sizing:border-box}:host [hidden]{display:none!important}:host .close_btn{position:absolute;top:0;right:0;font-size:30px;padding:0;width:50px;min-width:0px;line-height:45px}:host .render_btn{position:absolute;left:65%;margin:0 0 0 -83px;bottom:15px}:host .render-camera-positions{display:flex;font-size:14px}:host .render-camera-positions .render-camera-positions-left{min-width:300px;background:#e4edf4;padding:15px;text-align:center}:host .render-camera-positions .render-camera-positions-left h3{text-align:left}:host .render-camera-positions .render-camera-positions-left h4{text-align:left;margin:0}:host .render-camera-positions .render-camera-positions-left .position-separator{width:100%;font-size:0;height:1px;background:#fff;margin:15px 0}:host .render-camera-positions .render-camera-positions-left p{font-size:12px;text-align:center;line-height:170%}:host .render-camera-positions .render-camera-positions-left button{font-size:12px;line-height:32px}:host .render-camera-positions .render-camera-positions-left button.matrixToggle{margin:0 0 5px}:host .render-camera-positions .render-camera-positions-left mat-grid-list{text-align:left}:host .render-camera-positions .render-camera-positions-left mat-grid-list mat-grid-tile .mat-figure{justify-content:left}:host .render-camera-positions .render-camera-positions-left mat-grid-list mat-grid-tile b{text-align:left;width:100%}:host .render-camera-positions .render-camera-positions-left mat-grid-list mat-grid-tile span{display:inline-block;text-align:right;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px;background:#fff;border-radius:5px;line-height:30px;font-size:90%}:host .render-camera-positions .render-camera-positions-left .mat-form-field{width:100%}:host .render-camera-positions .render-camera-positions-left mat-slide-toggle{float:right}:host .render-camera-positions .render-camera-positions-left .render-image-content{width:100%;align-self:start;position:relative}:host .render-camera-positions .render-camera-positions-left .render-image-content img{width:100%;max-width:100%;align-self:start;border-radius:5px}:host .render-camera-positions .render-camera-positions-left .render-image-content .loader{align-self:start;width:calc(100% - 20px);font-size:0;line-height:0;height:6px;position:absolute;left:10px;bottom:15px;z-index:2;text-align:left}:host .render-camera-positions .render-camera-positions-left .render-image-content .loader.ready .loader_progress{background:#74B77F}:host .render-camera-positions .render-camera-positions-left .render-image-content .loader.ready .loader_progress span{color:#74b77f;border-color:#74b77f}:host .render-camera-positions .render-camera-positions-left .render-image-content .loader .loader_progress{vertical-align:top;display:inline-block;background:#3760a1;height:6px;position:relative;transition:.2s ease-in-out;-moz-transition:.2s ease-in-out;-webkit-transition:.2s ease-in-out;border-radius:5px;min-width:25px}:host .render-camera-positions .render-camera-positions-left .render-image-content .loader .loader_progress span{float:left;width:25px;height:16px;line-height:16px;border-radius:4px;text-align:center;position:absolute;top:-5px;font-size:9px;font-weight:bold;background:#fff;right:0px}:host .render-camera-positions .render-camera-positions-left .image_spacer{position:relative;background:#fafafa;width:100%;height:200px;border-radius:5px}:host .render-camera-positions .render-camera-positions-left .image_spacer .mat-icon{position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;width:60px;height:60px;font-size:60px}:host .render-camera-positions .render-camera-positions-right{width:70%;padding:15px 15px 66px;font-size:12px}:host .render-camera-positions .render-camera-positions-right.large{width:60%}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile{border-bottom:1px solid #e4edf4}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile.grid_head{border-color:#fff}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-head{width:100%;text-align:left;font-weight:bold;padding:0 15px}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content{width:100%;text-align:left;padding:0 15px}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.no-padding{padding:0}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.small-padding{padding:0 2px}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.right{text-align:right}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.grid-tile-image .image-container{width:100%;height:46px;border:1px solid #e4edf4;border-radius:5px;vertical-align:top;text-align:center;display:table;font-size:0}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.grid-tile-image .image-container a{display:table-cell;vertical-align:middle}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.grid-tile-image .image-container a img{max-width:100%;max-height:46px;display:inline-block}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.grid-tile-image .image-container .mat-icon{height:46px;line-height:46px}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content.grid-tile-image .image-container .mat-spinner{margin:11px 0 0;display:inline-block}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content .remove-btn{border:none;background:transparent;color:#0003;cursor:pointer}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content .remove-btn:hover{color:red}:host .render-camera-positions .render-camera-positions-right .mat-grid-tile .grid-tile-content .remove-btn .mat-icon{height:18px;width:18px;font-size:18px}\n"], components: [{ type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i16.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.MatLabel, selector: "mat-label" }], pipes: { "localize": LocalizePipe }, animations: [
         trigger('slideInOut', [
             state('1', style({ 'max-height': '*' })),
             state('0', style({ 'max-height': '0px' })),
@@ -28360,7 +28410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     templateUrl: './render-dialog.component.html',
                     styleUrls: ['./render-dialog.component.scss']
                 }]
-        }], ctorParameters: function () { return [{ type: CameraService }, { type: RenderService }, { type: MessageBusService }, { type: UtilsService }, { type: i1.DomSanitizer }, { type: HomedecoratorSettingsService }, { type: NewRenderService }, { type: ApiServiceModule }]; }, propDecorators: { renderImageField: [{
+        }], ctorParameters: function () { return [{ type: CameraService }, { type: RenderService }, { type: MessageBusService }, { type: UtilsService }, { type: i1.DomSanitizer }, { type: HomedecoratorSettingsService }, { type: NewRenderService }, { type: ApiServiceModule }, { type: i1$1.MatDialog }]; }, propDecorators: { renderImageField: [{
                 type: ViewChild,
                 args: ['render_image', { static: true }]
             }], imageWidthField: [{
@@ -30364,7 +30414,7 @@ class LiteSelectorComponent {
     }
 }
 LiteSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LiteSelectorComponent, deps: [{ token: HomedecoratorConnectorService }, { token: BuildFurnitureService }, { token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Component });
-LiteSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LiteSelectorComponent, selector: "rp-lite-selector", inputs: { showAnswers: "showAnswers", show: "show", showSelections: "showSelections", showLabel: "showLabel", canClose: "canClose", metadata: "metadata", customDimensions: "customDimensions" }, outputs: { showChange: "showChange", answerChosen: "answerChosen" }, host: { properties: { "class.custom-dimensions": "this.customDimensions" } }, viewQueries: [{ propertyName: "templateAnswers", first: true, predicate: ["templateAnswers"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"show\">\r\n  <rp-selections-summary *ngIf=\"showSelections && iOne.selectionsToDisplay.length > 0\" @showSelections [@.disabled]=\"!animateSlideout\"\r\n                         class=\"rp-selections-summary\"\r\n                         [showLabel]=\"showLabel\"\r\n                         [canClose]=\"canClose\"\r\n                         [customDimensions]=\"customDimensions\"\r\n                         [answersTemplate]=\"inlineAnswers ? templateAnswers : undefined\"\r\n                         [answerToShowFromSelectionText]=\"answerToShowFromSelectionText\"\r\n                         [selections]=\"iOne.selectionsToDisplay\"\r\n                         (selectSelection)=\"onSelectionsSummarySelectSelection($event)\"\r\n                         (closeClick)=\"onCloseLiteSelectorButtonClick()\"\r\n  >\r\n  </rp-selections-summary>\r\n  <ng-container *ngIf=\"!inlineAnswers\" [ngTemplateOutlet]=\"templateAnswers\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #templateAnswers>\r\n  <rp-answers-slideout\r\n    class=\"rp-answers-slideout\"\r\n    [metadata]=\"metadata\"\r\n    [isShown]=\"showAnswers && buildFurnitureService.activeAnswers.length > 0\"\r\n    [showTitle]=\"!inlineAnswers\"\r\n    [showFilter]=\"!inlineAnswers\"\r\n    [useSlideout]=\"!inlineAnswers\"\r\n    [customDimensions]=\"customDimensions\"\r\n    [question]=\"buildFurnitureService.activeQuestion\"\r\n    [answers]=\"buildFurnitureService.activeAnswers\"\r\n    (answerChosen)=\"onAnswersSlideoutAnswerChosen($event)\"\r\n  ></rp-answers-slideout>\r\n</ng-template>\r\n", styles: [":host.floating ::ng-deep rp-selections-summary{position:absolute;right:0;max-height:calc(100vh - 120px)}:host:not(.custom-dimensions).floating ::ng-deep rp-selections-summary{top:64px;max-height:calc(100vh - 184px)}\n"], components: [{ type: SelectionsSummaryComponent, selector: "rp-selections-summary", inputs: ["selections", "showLabel", "canClose", "answersTemplate", "answerToShowFromSelectionText", "customDimensions"], outputs: ["closeClick", "cancelAnswers", "selectSelection"] }, { type: AnswersSlideoutComponent, selector: "rp-answers-slideout", inputs: ["isShown", "question", "showTitle", "showFilter", "metadata", "answers", "useSlideout", "customDimensions"], outputs: ["isShownChange", "answerChosen"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+LiteSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LiteSelectorComponent, selector: "rp-lite-selector", inputs: { showAnswers: "showAnswers", show: "show", showSelections: "showSelections", showLabel: "showLabel", canClose: "canClose", metadata: "metadata", customDimensions: "customDimensions" }, outputs: { showChange: "showChange", answerChosen: "answerChosen" }, host: { properties: { "class.custom-dimensions": "this.customDimensions" } }, viewQueries: [{ propertyName: "templateAnswers", first: true, predicate: ["templateAnswers"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"show\">\r\n  <rp-selections-summary *ngIf=\"showSelections && iOne.selectionsToDisplay.length > 0\" @showSelections [@.disabled]=\"!animateSlideout\"\r\n                         class=\"rp-selections-summary\"\r\n                         [showLabel]=\"showLabel\"\r\n                         [canClose]=\"canClose\"\r\n                         [customDimensions]=\"customDimensions\"\r\n                         [answersTemplate]=\"inlineAnswers ? templateAnswers : undefined\"\r\n                         [answerToShowFromSelectionText]=\"answerToShowFromSelectionText\"\r\n                         [selections]=\"iOne.selectionsToDisplay\"\r\n                         (selectSelection)=\"onSelectionsSummarySelectSelection($event)\"\r\n                         (closeClick)=\"onCloseLiteSelectorButtonClick()\"\r\n  >\r\n  </rp-selections-summary>\r\n  <ng-container *ngIf=\"!inlineAnswers\" [ngTemplateOutlet]=\"templateAnswers\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #templateAnswers>\r\n  <rp-answers-slideout\r\n    class=\"rp-answers-slideout\"\r\n    [metadata]=\"metadata\"\r\n    [isShown]=\"showAnswers && iOne.activeAnswers.length > 0\"\r\n    [showTitle]=\"!inlineAnswers\"\r\n    [showFilter]=\"!inlineAnswers\"\r\n    [useSlideout]=\"!inlineAnswers\"\r\n    [customDimensions]=\"customDimensions\"\r\n    [question]=\"iOne.activeQuestion\"\r\n    [answers]=\"iOne.activeAnswers\"\r\n    (answerChosen)=\"onAnswersSlideoutAnswerChosen($event)\"\r\n  ></rp-answers-slideout>\r\n</ng-template>\r\n", styles: [":host.floating ::ng-deep rp-selections-summary{position:absolute;right:0;max-height:calc(100vh - 120px)}:host:not(.custom-dimensions).floating ::ng-deep rp-selections-summary{top:64px;max-height:calc(100vh - 184px)}\n"], components: [{ type: SelectionsSummaryComponent, selector: "rp-selections-summary", inputs: ["selections", "showLabel", "canClose", "answersTemplate", "answerToShowFromSelectionText", "customDimensions"], outputs: ["closeClick", "cancelAnswers", "selectSelection"] }, { type: AnswersSlideoutComponent, selector: "rp-answers-slideout", inputs: ["isShown", "question", "showTitle", "showFilter", "metadata", "answers", "useSlideout", "customDimensions"], outputs: ["isShownChange", "answerChosen"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
         trigger('showSelections', [
             state('void', style({ 'transform': 'translateX(100%)', opacity: 0 })),
             state('*', style({ 'transform': 'translateX(0%)', opacity: 1 })),
@@ -31063,12 +31113,13 @@ var __awaiter$s = (this && this.__awaiter) || function (thisArg, _arguments, P,
     });
 };
 class FloorplannerComponent {
-    constructor(_floorplanService, _messageBusService, _configurationService, _dimensionService, _viewModeService) {
+    constructor(_floorplanService, _messageBusService, _configurationService, _dimensionService, _viewModeService, _roomService) {
         this._floorplanService = _floorplanService;
         this._messageBusService = _messageBusService;
         this._configurationService = _configurationService;
         this._dimensionService = _dimensionService;
         this._viewModeService = _viewModeService;
+        this._roomService = _roomService;
         this.selectedWallChange = new Subject();
         this._viewScaleMin = 50;
         this._viewScaleMax = 300;
@@ -31182,7 +31233,11 @@ class FloorplannerComponent {
         }
     }
     showStartMessage() {
-        this._diagramBackground.src = '';
+        if (this._diagramBackground) {
+            this._diagramBackground.src = '';
+        }
+        this._floorplanService.reset();
+        this._draw();
         this.showStartingMessages = true;
     }
     setMode(mode) {
@@ -31656,7 +31711,13 @@ class FloorplannerComponent {
         this.setSelectedMode(value);
     }
     setDiagramSettings(input) {
+        this.reset();
+        this._resetOrigin();
+        this._viewScale = 100;
+        this._updateCmPerPixel();
+        this._draw();
         this._floorplanService.reset();
+        this._roomService.resetAllRooms();
         this._diagramBackground = input.background;
         this._diagramBackgroundHeight = input.backgroundHeight;
         this._diagramBackgroundWidth = input.backgroundWidth;
@@ -32308,8 +32369,8 @@ class FloorplannerComponent {
         this._wallLength = null;
     }
 }
-FloorplannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloorplannerComponent, deps: [{ token: FloorplanService }, { token: MessageBusService }, { token: ConfigurationService }, { token: DimensioningService }, { token: ViewModeService }], target: i0.ɵɵFactoryTarget.Component });
-FloorplannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FloorplannerComponent, selector: "floor-planner", outputs: { selectedWallChange: "selectedWallChange" }, host: { listeners: { "document:keydown": "handleDocKeyDown($event)", "document:keyup": "handleDocKeyUp($event)", "window:resize": "resizeGrid()" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["floorplannerCanvas"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<canvas #floorplannerCanvas\r\n        (contextmenu)=\"handleContextMenu($event)\"\r\n        (mousedown)=\"handleMouseDown($event)\"\r\n        (mousemove)=\"handleMouseMove($event)\"\r\n        (mouseup)=\"handleMouseUp($event)\"\r\n        (mouseleave)=\"handleMouseLeave($event)\"\r\n        (wheel)=\"handleMouseWheel($event)\"\r\n        (touchstart)=\"handleTouchStart($event)\"\r\n        (touchmove)=\"handleTouchMove($event)\"\r\n        (touchend)=\"handleTouchUp($event)\"\r\n        (touchcancel)=\"handleTouchEnd($event)\"\r\n></canvas>\r\n\r\n<wall-length-input></wall-length-input>\r\n\r\n<div class=\"controls-top\">\r\n  <mat-button-toggle-group class=\"mode-toggle\"\r\n                           (change)=\"changeFloorplannerMode($event.value)\"\r\n                           [value]=\"selectedMode\"\r\n  >\r\n    <mat-button-toggle [value]=\"floorplannerMode.Draw\" [matTooltip]=\"'DRAW_WALLS' | localize\">\r\n      <mat-icon class=\"homedecorator-material-icons\">edit</mat-icon>\r\n    </mat-button-toggle>\r\n    <mat-button-toggle [value]=\"floorplannerMode.Move\" [matTooltip]=\"'SELECT_AND_MOVE_WALLS' | localize\">\r\n      <mat-icon class=\"homedecorator-material-icons\" svgIcon=\"hand-pointer\"></mat-icon>\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<div class=\"hint\" *ngIf=\"mode === floorplannerMode.Drawing\" (click)=\"changeFloorplannerMode(floorplannerMode.Draw)\">\r\n  {{ 'CLICK_HERE_TO_EXIT_DRAWING_MODE_OR_PRESS_THE_ESC_KEY' | localize }}\r\n</div>\r\n\r\n<div class=\"hint\" *ngIf=\"mode === floorplannerMode.Draw && this.showStartingMessages\">\r\n  {{ 'TAB_ANYWHERE_TO_START' | localize }}\r\n</div>\r\n", 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>*{pointer-events:all;background:#fff;margin:0 3px}.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}.mode-toggle>.mat-button-toggle-checked{color:#fff;background-color:#3760a1}\n"], components: [{ type: WallLengthInputComponent, selector: "wall-length-input" }, { type: i7$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i7$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe } });
+FloorplannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloorplannerComponent, deps: [{ token: FloorplanService }, { token: MessageBusService }, { token: ConfigurationService }, { token: DimensioningService }, { token: ViewModeService }, { token: RoomService }], target: i0.ɵɵFactoryTarget.Component });
+FloorplannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FloorplannerComponent, selector: "floor-planner", outputs: { selectedWallChange: "selectedWallChange" }, host: { listeners: { "document:keydown": "handleDocKeyDown($event)", "document:keyup": "handleDocKeyUp($event)", "window:resize": "resizeGrid()" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["floorplannerCanvas"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<canvas #floorplannerCanvas\r\n        (contextmenu)=\"handleContextMenu($event)\"\r\n        (mousedown)=\"handleMouseDown($event)\"\r\n        (mousemove)=\"handleMouseMove($event)\"\r\n        (mouseup)=\"handleMouseUp($event)\"\r\n        (mouseleave)=\"handleMouseLeave($event)\"\r\n        (wheel)=\"handleMouseWheel($event)\"\r\n        (touchstart)=\"handleTouchStart($event)\"\r\n        (touchmove)=\"handleTouchMove($event)\"\r\n        (touchend)=\"handleTouchUp($event)\"\r\n        (touchcancel)=\"handleTouchEnd($event)\"\r\n></canvas>\r\n\r\n<wall-length-input></wall-length-input>\r\n\r\n<div class=\"controls-top\">\r\n  <mat-button-toggle-group class=\"mode-toggle\"\r\n                           (change)=\"changeFloorplannerMode($event.value)\"\r\n                           [value]=\"selectedMode\"\r\n  >\r\n    <mat-button-toggle [value]=\"floorplannerMode.Draw\" [matTooltip]=\"'DRAW_WALLS' | localize\">\r\n      <mat-icon class=\"homedecorator-material-icons\">edit</mat-icon>\r\n    </mat-button-toggle>\r\n    <mat-button-toggle [value]=\"floorplannerMode.Move\" [matTooltip]=\"'SELECT_AND_MOVE_WALLS' | localize\">\r\n      <mat-icon class=\"homedecorator-material-icons\" svgIcon=\"hand-pointer\"></mat-icon>\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<div class=\"hint\" *ngIf=\"mode === floorplannerMode.Drawing\" (click)=\"changeFloorplannerMode(floorplannerMode.Draw)\">\r\n  {{ 'CLICK_HERE_TO_EXIT_DRAWING_MODE_OR_PRESS_THE_ESC_KEY' | localize }}\r\n</div>\r\n\r\n<div class=\"hint\" *ngIf=\"mode === floorplannerMode.Draw && this.showStartingMessages\">\r\n  {{ 'TAB_ANYWHERE_TO_START' | localize }}\r\n</div>\r\n", 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>*{pointer-events:all;background:#fff;margin:0 3px}.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}.mode-toggle>.mat-button-toggle-checked{color:#fff;background-color:#3760a1}\n"], components: [{ type: WallLengthInputComponent, selector: "wall-length-input" }, { type: i8$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i8$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloorplannerComponent, decorators: [{
             type: Component,
             args: [{
@@ -32317,7 +32378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     templateUrl: './floorplanner.component.html',
                     styleUrls: ['./floorplanner.component.scss']
                 }]
-        }], ctorParameters: function () { return [{ type: FloorplanService }, { type: MessageBusService }, { type: ConfigurationService }, { type: DimensioningService }, { type: ViewModeService }]; }, propDecorators: { canvasElement: [{
+        }], ctorParameters: function () { return [{ type: FloorplanService }, { type: MessageBusService }, { type: ConfigurationService }, { type: DimensioningService }, { type: ViewModeService }, { type: RoomService }]; }, propDecorators: { canvasElement: [{
                 type: ViewChild,
                 args: ['floorplannerCanvas', { read: ElementRef, static: true }]
             }], selectedWallChange: [{
@@ -33431,7 +33492,8 @@ var TextureEditorOptions;
     TextureEditorOptions[TextureEditorOptions["Both"] = 3] = "Both";
 })(TextureEditorOptions || (TextureEditorOptions = {}));
 class TextureEditorComponent {
-    constructor(_settingsService) {
+    constructor(messageService, _settingsService) {
+        this.messageService = messageService;
         this._settingsService = _settingsService;
         this.textureType = TextureType;
         this.dragNDropEnforced = false;
@@ -33473,6 +33535,7 @@ class TextureEditorComponent {
             };
         };
         // this.dampSetTexture = this.createDampener(this.setTexture);
+        this._subs.push(this.messageService.subscribe(MessageType.ChangeTexture, (texture) => this.setNewTexture(texture)));
     }
     ngOnInit() {
         this.setTiled(false);
@@ -33492,7 +33555,9 @@ class TextureEditorComponent {
     }
     ngOnDestroy() {
         // this.dampSetTexture.release();
-        this._subs.forEach((s) => { s.unsubscribe(); });
+        this._subs.forEach((s) => {
+            s.unsubscribe();
+        });
         this.canvas.nativeElement.removeEventListener('mousedown', () => this.onMouseDown());
         this.canvas.nativeElement.removeEventListener('mouseup', () => this.onMouseUp());
         this.canvas.nativeElement.removeEventListener('mousemove', e => this.onMouseMove(e));
@@ -33516,6 +33581,9 @@ class TextureEditorComponent {
             this.initializeTexture();
         }
     }
+    setNewTexture(texture) {
+        this.plainTexture = texture;
+    }
     handleRemoveTextureClick(event) {
         this.imageHasBeenResized = false;
         this.removeTexture.emit(event);
@@ -33655,7 +33723,13 @@ class TextureEditorComponent {
     }
     initializeTexture() {
         return __awaiter$p(this, void 0, void 0, function* () {
-            const texture = this.texturePlane ? this.texturePlane.getTexture() : this.plainTexture;
+            let texture;
+            if (this.texturePlane && this.texturePlane.getTexture() !== undefined) {
+                texture = this.texturePlane.getTexture();
+            }
+            else {
+                texture = this.plainTexture;
+            }
             if (texture) {
                 yield this._loadTextureData(texture, false);
             }
@@ -33776,6 +33850,7 @@ class TextureEditorComponent {
             // this.dampSetTexture.emit(texture);
             this.imageHasBeenResized = resized;
             this.setTexture.emit(texture);
+            // this.setNewTexture(texture);
         });
     }
     onMouseMove(event) {
@@ -33980,8 +34055,8 @@ class TextureEditorComponent {
         return destCanvas;
     }
 }
-TextureEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextureEditorComponent, deps: [{ token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Component });
-TextureEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextureEditorComponent, selector: "rp-texture-editor", inputs: { width: "width", height: "height", texturePlane: "texturePlane", plainTexture: "plainTexture", changedTexture: "changedTexture", 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<div class=\"resize-message-wrapper\" *ngIf=\"imageHasBeenResized\">\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\r\n    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  >\r\n    <div\r\n      class=\"canvas-wrapper\"\r\n      fxLayout=\"column inline\"\r\n      fxLayoutAlign=\"center center\"\r\n    >\r\n      <canvas [hidden]=\"texture && texture.stretch\" #canvas></canvas>\r\n      <mat-button-toggle-group\r\n        *ngIf=\"options === Options.Both\"\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    </div>\r\n  </div>\r\n\r\n  <div class=\"sliders\" *ngIf=\"texture?.type === textureType.CustomPattern\r\n    || ((texture?.type === textureType.Basic || texture?.type === textureType.PBR)\r\n    && options === Options.None)\r\n\"\r\n    >\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  <div class=\"sliders\" *ngIf=\"!isBasic(texture) && !isPBR(texture)\">\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  <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:bold;font-size:.9em}\n"], components: [{ type: FileDropComponent, selector: "rp-file-drop", inputs: ["showDragDrop", "showRemove"], outputs: ["fileContentChanged", "removeClick"] }, { type: i7$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SliderInputComponent, selector: "rp-slider-input", inputs: ["title", "min", "max", "step", "value"], outputs: ["onChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.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"] }, { type: i3$3.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"] }, { type: i7$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], pipes: { "localize": LocalizePipe } });
+TextureEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextureEditorComponent, deps: [{ token: MessageBusService }, { token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Component });
+TextureEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextureEditorComponent, selector: "rp-texture-editor", inputs: { width: "width", height: "height", texturePlane: "texturePlane", plainTexture: "plainTexture", changedTexture: "changedTexture", 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<div class=\"resize-message-wrapper\" *ngIf=\"imageHasBeenResized\">\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\r\n    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  >\r\n    <div\r\n      class=\"canvas-wrapper\"\r\n      fxLayout=\"column inline\"\r\n      fxLayoutAlign=\"center center\"\r\n    >\r\n      <canvas [hidden]=\"texture && texture.stretch\" #canvas></canvas>\r\n      <mat-button-toggle-group\r\n        *ngIf=\"options === Options.Both\"\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    </div>\r\n  </div>\r\n\r\n  <div class=\"sliders\" *ngIf=\"texture?.type === textureType.CustomPattern\r\n    || ((texture?.type === textureType.Basic || texture?.type === textureType.PBR)\r\n    && options === Options.None)\r\n\"\r\n    >\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  <div class=\"sliders\" *ngIf=\"!isBasic(texture) && !isPBR(texture)\">\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  <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:bold;font-size:.9em}\n"], components: [{ type: FileDropComponent, selector: "rp-file-drop", inputs: ["showDragDrop", "showRemove"], outputs: ["fileContentChanged", "removeClick"] }, { type: i8$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SliderInputComponent, selector: "rp-slider-input", inputs: ["title", "min", "max", "step", "value"], outputs: ["onChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.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"] }, { type: i3$3.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"] }, { type: i8$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], pipes: { "localize": LocalizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextureEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -33989,7 +34064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     templateUrl: './texture-editor.component.html',
                     styleUrls: ['./texture-editor.component.scss']
                 }]
-        }], ctorParameters: function () { return [{ type: HomedecoratorSettingsService }]; }, propDecorators: { fileInput: [{
+        }], ctorParameters: function () { return [{ type: MessageBusService }, { type: HomedecoratorSettingsService }]; }, propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput', { static: true }]
             }], canvas: [{
@@ -34743,7 +34818,7 @@ class CustomShapeCreatorComponent {
     }
 }
 CustomShapeCreatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomShapeCreatorComponent, deps: [{ token: HudService }, { token: SceneService }, { token: RoomService }, { token: ItemService }, { token: SceneEventService }, { token: MessageBusService }], target: i0.ɵɵFactoryTarget.Component });
-CustomShapeCreatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomShapeCreatorComponent, 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-body-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-subheading-2\"> {{ 'MEASUREMENTS' | localize}}</h3>\r\n  <div>\r\n      <rp-dimension-input\r\n      title=\"{{'HEIGHT' | localize}}\"\r\n      [sourceValue]=\"height * scaleFactor\"\r\n      [minValue]=\"10\"\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]=\"10\"\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]=\"10\"\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-subheading-2\"> {{ '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-select-panel{max-height:80vh!important}.switcher{margin-right:10px}\n"], components: [{ type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: AppearanceSectionComponent, selector: "rp-appearance-section", inputs: ["type", "hideTextureTab", "hideColorTab", "hidePhotoTab", "showGlassOption", "texturePlane", "plainTexture", "color", "textureWidth", "textureHeight", "photoOptions", "glassMaterial"], outputs: ["setTexture", "setColor", "setMaterial"] }], directives: [{ type: i3$3.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"] }, { type: i3$3.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"] }, { type: i3$3.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"] }, { type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i7.MatLabel, selector: "mat-label" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "localize": LocalizePipe } });
+CustomShapeCreatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomShapeCreatorComponent, 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-body-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-subheading-2\"> {{ '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-subheading-2\"> {{ '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-select-panel{max-height:80vh!important}.switcher{margin-right:10px}\n"], components: [{ type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: AppearanceSectionComponent, selector: "rp-appearance-section", inputs: ["type", "hideTextureTab", "hideColorTab", "hidePhotoTab", "showGlassOption", "texturePlane", "plainTexture", "color", "textureWidth", "textureHeight", "photoOptions", "glassMaterial"], outputs: ["setTexture", "setColor", "setMaterial"] }], directives: [{ type: i3$3.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"] }, { type: i3$3.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"] }, { type: i3$3.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"] }, { type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i7.MatLabel, selector: "mat-label" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "localize": LocalizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomShapeCreatorComponent, decorators: [{
             type: Component,
             args: [{
@@ -34919,7 +34994,9 @@ class CustomCylinderCreatorComponent {
                 texture.width = this.skin[face].width();
                 texture.dimensions = new Vector2(this.skin[face].width(), this.skin[face].height()).multiplyScalar(100);
                 this.shape.customMesh.material[CylinderFaces.indexOf(face)] = new MeshPhongMaterial({
-                    map: yield MaterialUtils.FromImage(texture)
+                    map: yield MaterialUtils.FromImage(texture),
+                    transparent: true,
+                    alphaTest: 0.5
                 });
             }
             this.shape.skin[face] = { texture: texture };
@@ -34932,7 +35009,7 @@ class CustomCylinderCreatorComponent {
     }
 }
 CustomCylinderCreatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomCylinderCreatorComponent, deps: [{ token: HudService }, { token: SceneService }, { token: ItemService }, { token: RoomService }, { token: SceneEventService }, { token: MessageBusService }], target: i0.ɵɵFactoryTarget.Component });
-CustomCylinderCreatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomCylinderCreatorComponent, 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-body-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-subheading-2\"> {{ '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    <rp-dimension-input\r\n      *ngIf=\"isFloorType\"\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-subheading-2\"> {{ '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-select-panel{max-height:80vh!important}.switcher{margin-right:10px}\n"], components: [{ type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: AppearanceSectionComponent, selector: "rp-appearance-section", inputs: ["type", "hideTextureTab", "hideColorTab", "hidePhotoTab", "showGlassOption", "texturePlane", "plainTexture", "color", "textureWidth", "textureHeight", "photoOptions", "glassMaterial"], outputs: ["setTexture", "setColor", "setMaterial"] }], directives: [{ type: i3$3.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"] }, { type: i3$3.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"] }, { type: i3$3.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"] }, { type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatLabel, selector: "mat-label" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "localize": LocalizePipe } });
+CustomCylinderCreatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomCylinderCreatorComponent, 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-body-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-subheading-2\"> {{ '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    <rp-dimension-input\r\n      *ngIf=\"isFloorType\"\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-subheading-2\"> {{ '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-select-panel{max-height:80vh!important}.switcher{margin-right:10px}\n"], components: [{ type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: AppearanceSectionComponent, selector: "rp-appearance-section", inputs: ["type", "hideTextureTab", "hideColorTab", "hidePhotoTab", "showGlassOption", "texturePlane", "plainTexture", "color", "textureWidth", "textureHeight", "photoOptions", "glassMaterial"], outputs: ["setTexture", "setColor", "setMaterial"] }], directives: [{ type: i3$3.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"] }, { type: i3$3.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"] }, { type: i3$3.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"] }, { type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatLabel, selector: "mat-label" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "localize": LocalizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomCylinderCreatorComponent, decorators: [{
             type: Component,
             args: [{
@@ -37823,7 +37900,7 @@ ModelDialogFurnitureListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
               <div class="furniture-item-wrapper">
                 <co-icon *ngIf="item.errorMessages.length > 0" class="error-expand-handle" [class.expanded]="item.showErrors"
                          [iconData]="iconService.getIcon(icon.ArrowPointDown)" (click)="item.showErrors = !item.showErrors"></co-icon>
-                <span class="furniture-item-title" [textContent]="item.name"></span>
+                <span class="furniture-item-title" [textContent]="item.name ? item.name : item.sku"></span>
                 <button *ngIf=showCopy class="furniture-item-copy"
                         [textContent]="item.toggle ? ('COPIED' | localize) : ('COPY' | localize)"
                         (click)="copyFurnitureName(item)"></button>
@@ -37923,7 +38000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
               <div class="furniture-item-wrapper">
                 <co-icon *ngIf="item.errorMessages.length > 0" class="error-expand-handle" [class.expanded]="item.showErrors"
                          [iconData]="iconService.getIcon(icon.ArrowPointDown)" (click)="item.showErrors = !item.showErrors"></co-icon>
-                <span class="furniture-item-title" [textContent]="item.name"></span>
+                <span class="furniture-item-title" [textContent]="item.name ? item.name : item.sku"></span>
                 <button *ngIf=showCopy class="furniture-item-copy"
                         [textContent]="item.toggle ? ('COPIED' | localize) : ('COPY' | localize)"
                         (click)="copyFurnitureName(item)"></button>
@@ -41067,7 +41144,7 @@ class SaveDialogComponent {
     }
 }
 SaveDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SaveDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: PermanentStoreService }, { token: HomedecoratorIconCacheService }, { token: i1$1.MatDialog }, { token: i1$1.MatDialogRef }, { token: MessageBusService }, { token: PresetsService }, { token: HomedecoratorDictionaryService }, { token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Component });
-SaveDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SaveDialogComponent, 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    <mat-list-item *ngIf=\"wasPlanSaved\" (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    <button mat-mini-fab class=\"download-button\" (click)=\"download()\" *ngIf=\"permanentStoreService.code || showLocalSave\">\r\n      <co-icon [iconData]=\"iconCache.getIcon(icon.Download)\"></co-icon>\r\n    </button>\r\n  </mat-nav-list>\r\n</div>\r\n", styles: [":host .mat-dialog-content{margin:0;padding:0;overflow:hidden}:host .mat-nav-list{display:flex;flex-direction:column}:host .mat-nav-list .mat-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-dialog-actions{margin-bottom:0}.item-description{white-space:inherit!important}\n"], components: [{ type: i2$2.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }], directives: [{ type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3.MatLine, selector: "[mat-line], [matLine]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe } });
+SaveDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SaveDialogComponent, 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    <mat-list-item *ngIf=\"wasPlanSaved\" (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    <ng-container *ngIf=\"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    </ng-container>\r\n  </mat-nav-list>\r\n</div>\r\n", styles: [":host .mat-dialog-content{margin:0;padding:0;overflow:hidden}:host .mat-nav-list{display:flex;flex-direction:column}:host .mat-nav-list .mat-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-dialog-actions{margin-bottom:0}.item-description{white-space:inherit!important}\n"], components: [{ type: i2$2.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }], directives: [{ type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3.MatLine, selector: "[mat-line], [matLine]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SaveDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -41100,8 +41177,8 @@ class DrawDialogComponent {
         this.draftingMode = 'movement';
         this.cameraOffset = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
         this.cameraZoom = 1;
-        this.maxZoom = 5;
-        this.minZoom = 1;
+        this.maxZoom = 10;
+        this.minZoom = 0.1;
         this.scrollSensitivity = 0.005;
         this.isDragging = false;
         this.dragStart = { x: 0, y: 0 };
@@ -41140,6 +41217,17 @@ class DrawDialogComponent {
                     this._context.stroke();
                 }
             }
+            if (this.draftingMode === 'movement') {
+                this._canvas.style.cursor = 'pointer';
+            }
+            else {
+                if (this.isDragging) {
+                    this._canvas.style.cursor = 'pointer';
+                }
+                else {
+                    this._canvas.style.cursor = `url(${drawModeCursorImageUrl}) 0 ${drawModeCursorHeight}, auto`;
+                }
+            }
             requestAnimationFrame(() => this.draw());
         };
     }
@@ -41175,6 +41263,9 @@ class DrawDialogComponent {
             this.hiddenImage.nativeElement.src = url;
         }
     }
+    updateUserValue() {
+        this.customerInputLenght = this.inputLength.nativeElement.value;
+    }
     handleMouseDown(event) {
         if (this.draftingMode === 'movement') {
             this.isDragging = true;
@@ -41220,16 +41311,13 @@ class DrawDialogComponent {
         this.cameraZoom = Math.max(this.cameraZoom, this.minZoom);
     }
     handleMouseWheel(event) {
-        if (this.draftingMode === 'movement') {
-            const zoomAmount = event.deltaY * this.scrollSensitivity;
-            console.log(zoomAmount);
-            if (!this.isDragging) {
-                if (zoomAmount) {
-                    this.cameraZoom -= zoomAmount;
-                }
-                this.cameraZoom = Math.min(this.cameraZoom, this.maxZoom);
-                this.cameraZoom = Math.max(this.cameraZoom, this.minZoom);
+        const zoomAmount = event.deltaY * this.scrollSensitivity;
+        if (!this.isDragging) {
+            if (zoomAmount) {
+                this.cameraZoom -= zoomAmount;
             }
+            this.cameraZoom = Math.min(this.cameraZoom, this.maxZoom);
+            this.cameraZoom = Math.max(this.cameraZoom, this.minZoom);
         }
     }
     getEventLocation(e) {
@@ -41242,12 +41330,6 @@ class DrawDialogComponent {
     }
     setModus(modus) {
         this.draftingMode = modus;
-        if (this.draftingMode === 'scaling') {
-            this._canvas.style.cursor = `url(assets/cursors/pencil.png) 0 26}, auto`;
-        }
-        else {
-            this._canvas.style.cursor = '';
-        }
     }
     submitLength() {
         if (this.inputLength.nativeElement.value !== '' && this.measurePoints.length === 2) {
@@ -41271,6 +41353,7 @@ class DrawDialogComponent {
                 backgroundWidth: this.hiddenImage.nativeElement.width,
                 cameraZoom: this.cameraZoom
             };
+            this._messageService.emit(MessageType.StartWithEmptyRoom);
             this._messageService.emit(MessageType.LoadScaledDiagram, output);
             this._dialog.closeAll();
         }
@@ -41321,7 +41404,7 @@ class DrawDialogComponent {
     }
 }
 DrawDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DrawDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }, { token: i1$1.MatDialog }, { token: MessageBusService }, { token: UtilsService }, { token: PresetsService }], target: i0.ɵɵFactoryTarget.Component });
-DrawDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DrawDialogComponent, selector: "rp-draw-dialog", viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["drawCanvas"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputLength", first: true, predicate: ["inputLength"], descendants: true }, { propertyName: "hiddenImage", first: true, predicate: ["hiddenImage"], descendants: true }], ngImport: i0, template: "<h1 mat-dialog-title>{{ 'OPEN_A_DIAGRAM' | localize }}</h1>\r\n\r\n\r\n<div  class=\"top-bar-container\" >\r\n  <div class=\"reference-input-container\" *ngIf=\"draftingMode === 'scaling'\">\r\n    <div class=\"input-button-container\">\r\n      <input\r\n        #inputLength\r\n        type=\"number\"\r\n        placeholder=\"{{ 'PDF_REFERENCE_PLACEHOLDER' | localize}}\"\r\n        [attr.disabled]=\"this.measurePoints.length === 0 ? '' : null\"\r\n      >\r\n      <button (click)=\"resetPoints()\" title=\"Reset referentie meting\">\r\n        <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\r\n      </button>\r\n    </div>\r\n    <p class=\"helper-text\">{{ 'PDF_REFERENCE_HELPER' | localize }}</p>\r\n  </div>\r\n\r\n<!--  <div class=\"rotation-input-container\" *ngIf=\"draftingMode === 'scaling'\">-->\r\n<!--    rotatiedingen-->\r\n<!--  </div>-->\r\n\r\n  <div class=\"zoom-button-containers\"  *ngIf=\"draftingMode === 'movement'\">\r\n    <button (click)=\"clickingZoom('in')\">\r\n      <mat-icon class=\"homedecorator-material-icons\">zoom_in</mat-icon>\r\n    </button>\r\n    <button (click)=\"clickingZoom('reset')\">\r\n      <mat-icon class=\"homedecorator-material-icons\">all_out</mat-icon>\r\n    </button>\r\n    <button (click)=\"clickingZoom('out')\">\r\n      <mat-icon class=\"homedecorator-material-icons\">zoom_out</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"main-button-container\">\r\n  <mat-button-toggle-group\r\n    class=\"mode-toggle\"\r\n    (change)=\"setModus($event.value)\"\r\n    [value]=\"draftingMode\">\r\n    <mat-button-toggle [value]=\"'movement'\" [matTooltip]=\"'Zoom / verplaats modus'\">\r\n      <mat-icon svgIcon=\"hand-pointer\"></mat-icon>\r\n    </mat-button-toggle>\r\n    <mat-button-toggle [value]=\"'scaling'\" [matTooltip]=\"'Maak referentie meting'\">\r\n      <mat-icon svgIcon=\"pen-ruler\"></mat-icon>\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<div class=\"canvas-wrapper\">\r\n  <canvas\r\n    #drawCanvas\r\n    (mousedown)=\"handleMouseDown($event)\"\r\n    (mousemove)=\"handleMouseMove($event)\"\r\n    (mouseup)=\"handleMouseUp($event)\"\r\n    (mouseleave)=\"handleMouseLeave($event)\"\r\n    (wheel)=\"handleMouseWheel($event)\"\r\n  ></canvas>\r\n</div>\r\n\r\n<div class=\"save-cancel-button-container\">\r\n  <button (click)=\"cancelAndReset()\">\r\n    <mat-icon class=\"homedecorator-material-icons\">cancel</mat-icon>\r\n    <span>Cancel</span>\r\n  </button>\r\n  <button (click)=\"submitLength()\" title=\"Opslaan\" *ngIf=\"draftingMode === 'scaling'\">\r\n    <mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon>\r\n    <span>Ok</span>\r\n  </button>\r\n</div>\r\n\r\n<img #hiddenImage src=\"\" style=\"display: none;\">\r\n", styles: ["canvas{position:relative}button{cursor:pointer;color:#fff;background:#dda73f;border:1px solid #dda73f;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}button:hover{background:#dda73f;color:#fff}.main-button-container{display:flex;justify-content:center;margin-bottom:15px}.main-button-container .mat-button-toggle-checked{background:#dda73f;color:#fff}.reference-input-container .input-button-container{display:flex;align-items:center}.reference-input-container .input-button-container input{min-width:285px;border:1px solid #f7f7f9;border-radius:3px;height:35px;line-height:35px;box-sizing:border-box;padding:10px}.reference-input-container .input-button-container input:disabled{background:#f7f7f9;cursor:default}.reference-input-container .input-button-container button{border:none;display:inline-block}.reference-input-container .helper-text{font-size:13px;font-style:italic;margin:0;padding:0;display:block}.zoom-button-containers{display:flex;justify-items:center;justify-content:right}.zoom-button-containers button{margin:0 5px}.save-cancel-button-container{display:flex;justify-content:center;justify-items:center}.save-cancel-button-container button{margin:3px 10px;padding:8px 15px}.save-cancel-button-container button .homedecorator-material-icons{font-size:18px}.save-cancel-button-container button span{line-height:18px;font-size:15px}.canvas-wrapper{overflow:scroll;max-height:60vh;max-width:80vw}\n"], components: [{ type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "localize": LocalizePipe } });
+DrawDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DrawDialogComponent, selector: "rp-draw-dialog", viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["drawCanvas"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputLength", first: true, predicate: ["inputLength"], descendants: true }, { propertyName: "hiddenImage", first: true, predicate: ["hiddenImage"], descendants: true }], ngImport: i0, template: "<h1 mat-dialog-title>{{ 'OPEN_A_DIAGRAM' | localize }}</h1>\r\n\r\n\r\n<div  class=\"top-bar-container\" >\r\n  <div class=\"reference-input-container\" *ngIf=\"draftingMode === 'scaling'\">\r\n    <div class=\"input-button-container\">\r\n      <input\r\n        (change)=\"updateUserValue()\"\r\n        [value]=\"customerInputLenght\"\r\n        #inputLength\r\n        type=\"number\"\r\n        placeholder=\"{{ 'PDF_REFERENCE_PLACEHOLDER' | localize}}\"\r\n        [attr.disabled]=\"this.measurePoints.length === 0 ? '' : null\"\r\n      >\r\n      <button (click)=\"resetPoints()\" title=\"Reset referentie meting\">\r\n        <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\r\n      </button>\r\n    </div>\r\n    <p class=\"helper-text\">{{ 'PDF_REFERENCE_HELPER' | localize }}</p>\r\n  </div>\r\n\r\n<!--  <div class=\"rotation-input-container\" *ngIf=\"draftingMode === 'scaling'\">-->\r\n<!--    rotatiedingen-->\r\n<!--  </div>-->\r\n\r\n  <div class=\"zoom-button-containers\"  *ngIf=\"draftingMode === 'movement'\">\r\n    <button (click)=\"clickingZoom('in')\">\r\n      <mat-icon class=\"homedecorator-material-icons\">zoom_in</mat-icon>\r\n    </button>\r\n    <button (click)=\"clickingZoom('reset')\">\r\n      <mat-icon class=\"homedecorator-material-icons\">all_out</mat-icon>\r\n    </button>\r\n    <button (click)=\"clickingZoom('out')\">\r\n      <mat-icon class=\"homedecorator-material-icons\">zoom_out</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"main-button-container\">\r\n  <mat-button-toggle-group\r\n    class=\"mode-toggle\"\r\n    (change)=\"setModus($event.value)\"\r\n    [value]=\"draftingMode\">\r\n    <mat-button-toggle [value]=\"'movement'\" [matTooltip]=\"'Zoom / verplaats modus'\">\r\n      <mat-icon svgIcon=\"hand-pointer\"></mat-icon>\r\n    </mat-button-toggle>\r\n    <mat-button-toggle [value]=\"'scaling'\" [matTooltip]=\"'Maak referentie meting'\">\r\n      <mat-icon svgIcon=\"pen-ruler\"></mat-icon>\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<div class=\"canvas-wrapper\">\r\n  <canvas\r\n    #drawCanvas\r\n    (mousedown)=\"handleMouseDown($event)\"\r\n    (mousemove)=\"handleMouseMove($event)\"\r\n    (mouseup)=\"handleMouseUp($event)\"\r\n    (mouseleave)=\"handleMouseLeave($event)\"\r\n    (wheel)=\"handleMouseWheel($event)\"\r\n  ></canvas>\r\n</div>\r\n\r\n<div class=\"save-cancel-button-container\">\r\n  <button (click)=\"cancelAndReset()\">\r\n    <mat-icon class=\"homedecorator-material-icons\">cancel</mat-icon>\r\n    <span>Cancel</span>\r\n  </button>\r\n  <button (click)=\"submitLength()\" title=\"Opslaan\" *ngIf=\"draftingMode === 'scaling'\">\r\n    <mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon>\r\n    <span>Ok</span>\r\n  </button>\r\n</div>\r\n\r\n<img #hiddenImage src=\"\" style=\"display: none;\">\r\n", styles: ["canvas{position:relative}button{cursor:pointer;color:#fff;background:#dda73f;border:1px solid #dda73f;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}button:hover{background:#dda73f;color:#fff}.main-button-container{display:flex;justify-content:center;margin-bottom:15px}.main-button-container .mat-button-toggle-checked{background:#dda73f;color:#fff}.reference-input-container .input-button-container{display:flex;align-items:center}.reference-input-container .input-button-container input{min-width:285px;border:1px solid #f7f7f9;border-radius:3px;height:35px;line-height:35px;box-sizing:border-box;padding:10px}.reference-input-container .input-button-container input:disabled{background:#f7f7f9;cursor:default}.reference-input-container .input-button-container button{border:none;display:inline-block}.reference-input-container .helper-text{font-size:13px;font-style:italic;margin:0;padding:0;display:block}.zoom-button-containers{display:flex;justify-items:center;justify-content:right}.zoom-button-containers button{margin:0 5px}.save-cancel-button-container{display:flex;justify-content:center;justify-items:center}.save-cancel-button-container button{margin:3px 10px;padding:8px 15px}.save-cancel-button-container button .homedecorator-material-icons{font-size:18px}.save-cancel-button-container button span{line-height:18px;font-size:15px}.canvas-wrapper{overflow:hidden;max-height:60vh;max-width:80vw}\n"], components: [{ type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "localize": LocalizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DrawDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -41555,9 +41638,10 @@ var __awaiter$4 = (this && this.__awaiter) || function (thisArg, _arguments, P,
     });
 };
 class ModelPreviewComponent {
-    constructor(data, settingsService, _dialogRef, _thirdPartyModelService, _messageService, _dialog, _adapterService, _lightPresetsService, _dictionaryService, _fontService) {
+    constructor(data, settingsService, iconCache, _dialogRef, _thirdPartyModelService, _messageService, _dialog, _adapterService, _lightPresetsService, _dictionaryService, _fontService) {
         this.data = data;
         this.settingsService = settingsService;
+        this.iconCache = iconCache;
         this._dialogRef = _dialogRef;
         this._thirdPartyModelService = _thirdPartyModelService;
         this._messageService = _messageService;
@@ -41567,6 +41651,7 @@ class ModelPreviewComponent {
         this._dictionaryService = _dictionaryService;
         this._fontService = _fontService;
         this.unitsOfMeasurement = 'cm';
+        this.units = ['cm', 'inches'];
         this.mathPi = Math.PI;
         this.showReferenceModel = true;
         this.floorSizeHeight = 10;
@@ -41576,16 +41661,22 @@ class ModelPreviewComponent {
         this.distanceStep = 1;
         this.stackable = false;
         this.heightAdjustable = false;
+        this.selectedPlacement = 0;
         this._measurements = [];
+        this.icon = IconEnum;
         this.font = this._fontService.hudFont;
     }
     ngOnInit() {
         this.initScene();
         this.loadModel(this.data);
+        this._adapterService.getModelPlacementOptions().then(result => {
+            this.placementOptions = result;
+        });
     }
     ngOnDestroy() {
     }
     initScene() {
+        const viewScale = 1.3;
         // init scene
         this.scenePreview = new Scene();
         // init renderer
@@ -41609,11 +41700,11 @@ class ModelPreviewComponent {
         this.rendererPreview.outputColorSpace = LinearSRGBColorSpace;
         canvReference.appendChild(this.rendererPreview.domElement);
         this.rendererPreview.domElement.setAttribute('id', 'threed');
-        this.rendererPreview.setSize(window.innerWidth / 2, window.innerHeight / 2, true);
+        this.rendererPreview.setSize(window.innerHeight / viewScale, window.innerHeight / viewScale, true);
         // init camera
         this.cameraPreview = new PerspectiveCamera(45, 1, 0.01, 100000000);
         this.cameraPreview.position.set(0, 2, 10);
-        this.cameraPreview.aspect = window.innerWidth / window.innerHeight;
+        this.cameraPreview.aspect = (window.innerHeight / viewScale) / (window.innerHeight / viewScale);
         this.cameraPreview.updateProjectionMatrix();
         this.controls = new OrbitControls(this.cameraPreview, this.rendererPreview.domElement);
         this.controls.update();
@@ -41726,6 +41817,7 @@ class ModelPreviewComponent {
         }, options);
     }
     scaleArticle() {
+        const model = this.scenePreview.getObjectByName(this.modelName);
         const inputHeight = this.heightArticle.nativeElement.value;
         let heightInMeter;
         if (this.unitsOfMeasurement === 'cm') {
@@ -41736,7 +41828,8 @@ class ModelPreviewComponent {
         }
         // scale = this.bounding / heightInMeter and use Y as up/ height
         const scale = this.boundingBoxSize.y / heightInMeter;
-        this.scenePreview.getObjectByName(this.modelName).scale.set(this.scenePreview.children[0].scale.x / scale, this.scenePreview.children[0].scale.y / scale, this.scenePreview.children[0].scale.z / scale);
+        model.scale.set(model.scale.x / scale, model.scale.y / scale, model.scale.z / scale);
+        this._getBoundingBox(model);
     }
     rotateModel(axis, degrees) {
         const model = this.scenePreview.getObjectByName(this.modelName);
@@ -41762,12 +41855,15 @@ class ModelPreviewComponent {
         else if (axis === 'z') {
             model.position.z += amount;
         }
+        else if (axis === 'all') {
+            model.position.set(0, 0, 0);
+        }
         this._getBoundingBox(model);
     }
     setUnit(event) {
         this.unitsOfMeasurement = event.value;
     }
-    toggleShowReferenceModel() {
+    toggleShowReferenceModel($event) {
         const model = this.scenePreview.getObjectByName('Reference_model');
         model.visible = !this.showReferenceModel;
         this.showReferenceModel = !this.showReferenceModel;
@@ -41799,6 +41895,7 @@ class ModelPreviewComponent {
     }
     _sendModelToCDN(fileName, blob) {
         return __awaiter$4(this, void 0, void 0, function* () {
+            // console.log(this.placementOptions[this.selectedPlacement]);
             const reader = new FileReader();
             reader.readAsDataURL(blob);
             reader.onloadend = (event) => __awaiter$4(this, void 0, void 0, function* () {
@@ -41820,6 +41917,8 @@ class ModelPreviewComponent {
                             });
                         });
                     }
+                }).catch(error => {
+                    this._messageService.emit(MessageType.RenderError, { title: 'Upload error', message: error });
                 });
             });
         });
@@ -41887,6 +41986,8 @@ class ModelPreviewComponent {
         this.boundingBoxSize = boundingBox.getSize(new Vector3());
         this._setMeasurements(this.boundingBoxSize);
         this._showMeasurements();
+        const modelBoxhelper = this.scenePreview.getObjectByName('modelBoxhelper');
+        this.scenePreview.remove(modelBoxhelper);
         const boxHelper = new BoxHelper(object);
         boxHelper.material.color.set(0xFF00FF);
         boxHelper.name = 'modelBoxhelper';
@@ -42009,225 +42110,297 @@ class ModelPreviewComponent {
         }
     }
 }
-ModelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ModelPreviewComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: HomedecoratorSettingsService }, { token: i1$1.MatDialogRef }, { token: ThirdPartyModelService }, { token: MessageBusService }, { token: i1$1.MatDialog }, { token: HomedecoratorConnectorAdapterService }, { token: LightPresetsService }, { token: HomedecoratorDictionaryService }, { token: FontService }], target: i0.ɵɵFactoryTarget.Component });
+ModelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ModelPreviewComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: HomedecoratorSettingsService }, { token: HomedecoratorIconCacheService }, { token: i1$1.MatDialogRef }, { token: ThirdPartyModelService }, { token: MessageBusService }, { token: i1$1.MatDialog }, { token: HomedecoratorConnectorAdapterService }, { token: LightPresetsService }, { token: HomedecoratorDictionaryService }, { token: FontService }], target: i0.ɵɵFactoryTarget.Component });
 ModelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ModelPreviewComponent, selector: "rp-model-preview", viewQueries: [{ propertyName: "glbExportName", first: true, predicate: ["fileName"], descendants: true }, { propertyName: "heightArticle", first: true, predicate: ["heightArticle"], descendants: true }], ngImport: i0, template: `
     <div class="model-preview">
-      <div class="model-preview-container" id="canvasContainer">
+      <div class="model-preview-window">
+        <div class="model-preview-container" id="canvasContainer"></div>
+        <div class="model-preview-window-bottom">
+          <div>
+            <mat-slide-toggle
+              [checked]="showReferenceModel"
+              [labelPosition]="'after'"
+              (change)="toggleShowReferenceModel($event)">
+              Show Reference model
+            </mat-slide-toggle>
+          </div>
+          <div class="disclaimer-text-container">
+            <p class="disclaimer-text">
+              Grid scale: 1 tile = 1x1 meter
+            </p>
+          </div>
+        </div>
       </div>
       <div class="model-preview-actions">
         <div class="input-height-container">
-          <p>Centimeters of inches</p>
-          <div class="mat-radio-wrapper">
-            <mat-radio-group aria-label="Select an unit" (change)="setUnit($event)">
-              <mat-radio-button [checked]="true" value="cm">Height in cm</mat-radio-button>
-              <mat-radio-button value="inches">Height in inches</mat-radio-button>
-            </mat-radio-group>
-          </div>
+          <h2>Model settings</h2>
           <div>
-            <input type="text" id="heightArticle" #heightArticle>
-            <button (click)="scaleArticle()">scale</button>
+            <h3>Scale:</h3>
+            <input type="text" id="heightArticle" #heightArticle placeholder="Set model height">
+            <mat-form-field class="units-select-form">
+              <mat-select class="units-mat-select" [(value)]="unitsOfMeasurement">
+                <mat-option class="units-mat-option" *ngFor="let unit of units" [value]="unit">{{ unit }}</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <button class="apply-button base-button" (click)="scaleArticle()">Apply</button>
           </div>
         </div>
-
-        <div>
-          <button (click)="toggleShowReferenceModel()">Show Reference model</button>
-        </div>
-
         <div class="rotation-button-container">
-          <p>Rotation</p>
-          <div class="rotation-x-buttons">
-            <button (click)="rotateModel('x', mathPi / 2)">x-as + 90 graden</button>
-            <button (click)="rotateModel('x', -mathPi / 2)">x-as - 90 graden</button>
+          <h3>Rotation:</h3>
+          <div>
+            <p>Rotate on X axis (90 degrees)</p>
+            <p>
+              <button (click)="rotateModel('x', -mathPi / 2)">
+                <mat-icon svgIcon="dash-button"></mat-icon>
+              </button>
+              <button (click)="rotateModel('x', mathPi / 2)">
+                <mat-icon svgIcon="add-button"></mat-icon>
+              </button>
+            </p>
           </div>
-          <div class="rotation-y-buttons">
-            <button (click)="rotateModel('y', mathPi / 2)">y-as + 90 graden</button>
-            <button (click)="rotateModel('y', -mathPi / 2)">y-as - 90 graden</button>
+          <div>
+            <p>Rotate on Y axis (90 degrees)</p>
+            <p>
+              <button (click)="rotateModel('y', -mathPi / 2)">
+                <mat-icon svgIcon="dash-button"></mat-icon>
+              </button>
+              <button (click)="rotateModel('y', mathPi / 2)">
+                <mat-icon svgIcon="add-button"></mat-icon>
+              </button>
+            </p>
           </div>
-          <div class="rotation-z-buttons">
-            <button (click)="rotateModel('z', mathPi / 2)">z-as + 90 graden</button>
-            <button (click)="rotateModel('z', -mathPi / 2)">z-as - 90 graden</button>
+          <div>
+            <p>Rotate on Z axis (90 degrees)</p>
+            <p>
+              <button (click)="rotateModel('z', -mathPi / 2)">
+                <mat-icon svgIcon="dash-button"></mat-icon>
+              </button>
+              <button (click)="rotateModel('z', mathPi / 2)">
+                <mat-icon svgIcon="add-button"></mat-icon>
+              </button>
+            </p>
           </div>
         </div>
-
-
         <div class="rotation-button-container">
-          <p>Positie</p>
-          <div class="rotation-x-buttons">
-            <button (click)="moveModel('x',  0.01)">x-as + 0.01</button>
-            <button (click)="moveModel('x', -0.01)">x-as -0.01</button>
-          </div>
-          <div class="rotation-y-buttons">
-            <button (click)="moveModel('y', 0.01)">y-as + 0.01</button>
-            <button (click)="moveModel('y', -0.01)">y-as - 0.01</button>
+          <h3>Position:</h3>
+          <div>
+            <p>Reset to coordinates 0,0,0</p>
+            <p>
+              <button class="button-as-link" (click)="moveModel('all', 0)">
+                <mat-icon svgIcon="retry-button"></mat-icon>
+                Reset
+              </button>
+            </p>
           </div>
-          <div class="rotation-z-buttons">
-            <button (click)="moveModel('z',  0.01)">z-as + 0.01</button>
-            <button (click)="moveModel('z', -0.01)">z-as -0.01</button>
+          <div>
+            <p>Move on the Y axis (0.01 unit)</p>
+            <p>
+              <button (click)="moveModel('y', -0.01)">
+                <mat-icon svgIcon="dash-button"></mat-icon>
+              </button>
+              <button (click)="moveModel('y',  0.01)">
+                <mat-icon svgIcon="add-button"></mat-icon>
+              </button>
+            </p>
           </div>
         </div>
 
-        <div class="model-preview-info" *ngIf="this.data">
-          <div class="model-preview-info-container">
-            <div class="model-preview-info-left">
-              <label>Name</label>
-            </div>
-            <div class="model-preview-info-right">
-              <input type="text" id="fileName" #fileName value="{{ this.data.file.file.name }}">
-            </div>
+        <div class="model-preview-info-container">
+          <h3>Properties:</h3>
+          <div>
+            <mat-slide-toggle
+              [checked]="false"
+              [labelPosition]="'before'"
+              (change)="setStackable($event)">
+              Stackable
+            </mat-slide-toggle>
           </div>
-
-          <div class="model-preview-info-container">
-            <div class="model-preview-info-left">
-              <label>Stackable</label>
-            </div>
-            <div class="model-preview-info-right">
-              <div class="mat-radio-wrapper">
-                <mat-radio-group aria-label="Select an unit" (change)="setStackable($event)">
-                  <mat-radio-button [checked]="true" value="false">No</mat-radio-button>
-                  <mat-radio-button value="true">Yes</mat-radio-button>
-                </mat-radio-group>
-              </div>
-            </div>
+          <div>
+            <mat-slide-toggle
+              [checked]="false"
+              [labelPosition]="'before'"
+              (change)="setHeightAdjustable($event)">
+              Height adjustable
+            </mat-slide-toggle>
           </div>
 
-          <div class="model-preview-info-container">
-            <div class="model-preview-info-left">
-              <label>Height adjustable</label>
-            </div>
-            <div class="model-preview-info-right">
-              <div class="mat-radio-wrapper">
-                <mat-radio-group aria-label="Select an unit" (change)="setHeightAdjustable($event)">
-                  <mat-radio-button [checked]="true" value="false">No</mat-radio-button>
-                  <mat-radio-button value="true">Yes</mat-radio-button>
-                </mat-radio-group>
-              </div>
+          <div class="model-placement-container">
+            <div>
+              <label>Placement</label>
+
+              <mat-form-field *ngIf="placementOptions">
+                <mat-select [(value)]="selectedPlacement">
+                  <mat-option *ngFor="let placementOption of placementOptions"
+                              [value]="placementOption.code">{{ placementOption.description }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
             </div>
           </div>
+        </div>
 
+        <div class="model-preview-info" *ngIf="this.data">
           <div class="model-preview-info-container">
             <div class="model-preview-info-left">
-              <label>Extension</label>
+              <label>Save as:</label>
             </div>
             <div class="model-preview-info-right">
-              <label>{{ this.data.file.fileType }}</label>
+              <input type="text" id="fileName" #fileName value="{{ this.data.file.file.name }}">
             </div>
           </div>
-          <button class="exportButton" (click)="exportSceneAsGLB('upload')">Upload to CDN and add to scene</button>
-          <p></p>
-          <button class="exportButton" (click)="exportSceneAsGLB('download')">Download model</button>
+          <div>
+            <button class="base-button exportButton" (click)="exportSceneAsGLB('upload')">Upload and add to scene</button>
+            <button class="base-button exportButtonDark" (click)="exportSceneAsGLB('download')">Download</button>
+          </div>
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [".model-preview{display:flex;flex-direction:row}.model-preview .model-preview-actions{min-width:240px;box-sizing:border-box;padding:10px 20px;border-left:1px solid #5b6875}.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 .exportButton{cursor:pointer;color:#fff;background:#dda73f;border:1px solid #dda73f;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}.model-preview .exportButton:hover{background:#dda73f;color:#fff}input{border:1px solid #5b6875;box-sizing:border-box;padding:3px 10px;border-radius:3px}.mat-radio-wrapper{margin:10px 0}mat-radio-group mat-radio-button{display:block}.rotation-button-container div{display:flex;justify-content:space-between;margin-bottom:10px}.rotation-button-container div button{cursor:pointer;color:#fff;background:#dda73f;border:1px solid #dda73f;border-radius:3px;box-sizing:border-box;padding:5px}.rotation-button-container div button:hover{background:#dda73f;color:#fff}\n"], components: [{ type: i9$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i9$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, styles: [".model-preview{display:flex;flex-direction:row;font-size:14px}.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:#dda73f;border:1px solid #dda73f;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}.model-preview .exportButton:hover{background:#dda73f;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:#dda73f;border:1px solid #dda73f;border-radius:3px;box-sizing:border-box;padding:4px 10px;line-height:30px}.base-button:hover{background:#dda73f;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{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;text-align:center}.rotation-button-container div button:hover{background:#dda73f;color:#fff}.rotation-button-container div .button-as-link{color:#dda73f;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:#dda73f}.rotation-button-container div .button-as-link:hover{background:none;color:#dda73f}.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}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0;border:1px solid #5b6875;border-radius:4px}:host ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-infix{padding:0;border:none}:host ::ng-deep .mat-select-value{padding-left:5px}:host ::ng-deep .mat-form-field-appearance-legacy .mat-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"], components: [{ type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ModelPreviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rp-model-preview',
                     template: `
     <div class="model-preview">
-      <div class="model-preview-container" id="canvasContainer">
+      <div class="model-preview-window">
+        <div class="model-preview-container" id="canvasContainer"></div>
+        <div class="model-preview-window-bottom">
+          <div>
+            <mat-slide-toggle
+              [checked]="showReferenceModel"
+              [labelPosition]="'after'"
+              (change)="toggleShowReferenceModel($event)">
+              Show Reference model
+            </mat-slide-toggle>
+          </div>
+          <div class="disclaimer-text-container">
+            <p class="disclaimer-text">
+              Grid scale: 1 tile = 1x1 meter
+            </p>
+          </div>
+        </div>
       </div>
       <div class="model-preview-actions">
         <div class="input-height-container">
-          <p>Centimeters of inches</p>
-          <div class="mat-radio-wrapper">
-            <mat-radio-group aria-label="Select an unit" (change)="setUnit($event)">
-              <mat-radio-button [checked]="true" value="cm">Height in cm</mat-radio-button>
-              <mat-radio-button value="inches">Height in inches</mat-radio-button>
-            </mat-radio-group>
-          </div>
+          <h2>Model settings</h2>
           <div>
-            <input type="text" id="heightArticle" #heightArticle>
-            <button (click)="scaleArticle()">scale</button>
+            <h3>Scale:</h3>
+            <input type="text" id="heightArticle" #heightArticle placeholder="Set model height">
+            <mat-form-field class="units-select-form">
+              <mat-select class="units-mat-select" [(value)]="unitsOfMeasurement">
+                <mat-option class="units-mat-option" *ngFor="let unit of units" [value]="unit">{{ unit }}</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <button class="apply-button base-button" (click)="scaleArticle()">Apply</button>
           </div>
         </div>
-
-        <div>
-          <button (click)="toggleShowReferenceModel()">Show Reference model</button>
-        </div>
-
         <div class="rotation-button-container">
-          <p>Rotation</p>
-          <div class="rotation-x-buttons">
-            <button (click)="rotateModel('x', mathPi / 2)">x-as + 90 graden</button>
-            <button (click)="rotateModel('x', -mathPi / 2)">x-as - 90 graden</button>
+          <h3>Rotation:</h3>
+          <div>
+            <p>Rotate on X axis (90 degrees)</p>
+            <p>
+              <button (click)="rotateModel('x', -mathPi / 2)">
+                <mat-icon svgIcon="dash-button"></mat-icon>
+              </button>
+              <button (click)="rotateModel('x', mathPi / 2)">
+                <mat-icon svgIcon="add-button"></mat-icon>
+              </button>
+            </p>
           </div>
-          <div class="rotation-y-buttons">
-            <button (click)="rotateModel('y', mathPi / 2)">y-as + 90 graden</button>
-            <button (click)="rotateModel('y', -mathPi / 2)">y-as - 90 graden</button>
+          <div>
+            <p>Rotate on Y axis (90 degrees)</p>
+            <p>
+              <button (click)="rotateModel('y', -mathPi / 2)">
+                <mat-icon svgIcon="dash-button"></mat-icon>
+              </button>
+              <button (click)="rotateModel('y', mathPi / 2)">
+                <mat-icon svgIcon="add-button"></mat-icon>
+              </button>
+            </p>
           </div>
-          <div class="rotation-z-buttons">
-            <button (click)="rotateModel('z', mathPi / 2)">z-as + 90 graden</button>
-            <button (click)="rotateModel('z', -mathPi / 2)">z-as - 90 graden</button>
+          <div>
+            <p>Rotate on Z axis (90 degrees)</p>
+            <p>
+              <button (click)="rotateModel('z', -mathPi / 2)">
+                <mat-icon svgIcon="dash-button"></mat-icon>
+              </button>
+              <button (click)="rotateModel('z', mathPi / 2)">
+                <mat-icon svgIcon="add-button"></mat-icon>
+              </button>
+            </p>
           </div>
         </div>
-
-
         <div class="rotation-button-container">
-          <p>Positie</p>
-          <div class="rotation-x-buttons">
-            <button (click)="moveModel('x',  0.01)">x-as + 0.01</button>
-            <button (click)="moveModel('x', -0.01)">x-as -0.01</button>
-          </div>
-          <div class="rotation-y-buttons">
-            <button (click)="moveModel('y', 0.01)">y-as + 0.01</button>
-            <button (click)="moveModel('y', -0.01)">y-as - 0.01</button>
+          <h3>Position:</h3>
+          <div>
+            <p>Reset to coordinates 0,0,0</p>
+            <p>
+              <button class="button-as-link" (click)="moveModel('all', 0)">
+                <mat-icon svgIcon="retry-button"></mat-icon>
+                Reset
+              </button>
+            </p>
           </div>
-          <div class="rotation-z-buttons">
-            <button (click)="moveModel('z',  0.01)">z-as + 0.01</button>
-            <button (click)="moveModel('z', -0.01)">z-as -0.01</button>
+          <div>
+            <p>Move on the Y axis (0.01 unit)</p>
+            <p>
+              <button (click)="moveModel('y', -0.01)">
+                <mat-icon svgIcon="dash-button"></mat-icon>
+              </button>
+              <button (click)="moveModel('y',  0.01)">
+                <mat-icon svgIcon="add-button"></mat-icon>
+              </button>
+            </p>
           </div>
         </div>
 
-        <div class="model-preview-info" *ngIf="this.data">
-          <div class="model-preview-info-container">
-            <div class="model-preview-info-left">
-              <label>Name</label>
-            </div>
-            <div class="model-preview-info-right">
-              <input type="text" id="fileName" #fileName value="{{ this.data.file.file.name }}">
-            </div>
+        <div class="model-preview-info-container">
+          <h3>Properties:</h3>
+          <div>
+            <mat-slide-toggle
+              [checked]="false"
+              [labelPosition]="'before'"
+              (change)="setStackable($event)">
+              Stackable
+            </mat-slide-toggle>
           </div>
-
-          <div class="model-preview-info-container">
-            <div class="model-preview-info-left">
-              <label>Stackable</label>
-            </div>
-            <div class="model-preview-info-right">
-              <div class="mat-radio-wrapper">
-                <mat-radio-group aria-label="Select an unit" (change)="setStackable($event)">
-                  <mat-radio-button [checked]="true" value="false">No</mat-radio-button>
-                  <mat-radio-button value="true">Yes</mat-radio-button>
-                </mat-radio-group>
-              </div>
-            </div>
+          <div>
+            <mat-slide-toggle
+              [checked]="false"
+              [labelPosition]="'before'"
+              (change)="setHeightAdjustable($event)">
+              Height adjustable
+            </mat-slide-toggle>
           </div>
 
-          <div class="model-preview-info-container">
-            <div class="model-preview-info-left">
-              <label>Height adjustable</label>
-            </div>
-            <div class="model-preview-info-right">
-              <div class="mat-radio-wrapper">
-                <mat-radio-group aria-label="Select an unit" (change)="setHeightAdjustable($event)">
-                  <mat-radio-button [checked]="true" value="false">No</mat-radio-button>
-                  <mat-radio-button value="true">Yes</mat-radio-button>
-                </mat-radio-group>
-              </div>
+          <div class="model-placement-container">
+            <div>
+              <label>Placement</label>
+
+              <mat-form-field *ngIf="placementOptions">
+                <mat-select [(value)]="selectedPlacement">
+                  <mat-option *ngFor="let placementOption of placementOptions"
+                              [value]="placementOption.code">{{ placementOption.description }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
             </div>
           </div>
+        </div>
 
+        <div class="model-preview-info" *ngIf="this.data">
           <div class="model-preview-info-container">
             <div class="model-preview-info-left">
-              <label>Extension</label>
+              <label>Save as:</label>
             </div>
             <div class="model-preview-info-right">
-              <label>{{ this.data.file.fileType }}</label>
+              <input type="text" id="fileName" #fileName value="{{ this.data.file.file.name }}">
             </div>
           </div>
-          <button class="exportButton" (click)="exportSceneAsGLB('upload')">Upload to CDN and add to scene</button>
-          <p></p>
-          <button class="exportButton" (click)="exportSceneAsGLB('download')">Download model</button>
+          <div>
+            <button class="base-button exportButton" (click)="exportSceneAsGLB('upload')">Upload and add to scene</button>
+            <button class="base-button exportButtonDark" (click)="exportSceneAsGLB('download')">Download</button>
+          </div>
         </div>
       </div>
     </div>
@@ -42237,7 +42410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: HomedecoratorSettingsService }, { type: i1$1.MatDialogRef }, { type: ThirdPartyModelService }, { type: MessageBusService }, { type: i1$1.MatDialog }, { type: HomedecoratorConnectorAdapterService }, { type: LightPresetsService }, { type: HomedecoratorDictionaryService }, { type: FontService }]; }, propDecorators: { glbExportName: [{
+                }] }, { type: HomedecoratorSettingsService }, { type: HomedecoratorIconCacheService }, { type: i1$1.MatDialogRef }, { type: ThirdPartyModelService }, { type: MessageBusService }, { type: i1$1.MatDialog }, { type: HomedecoratorConnectorAdapterService }, { type: LightPresetsService }, { type: HomedecoratorDictionaryService }, { type: FontService }]; }, propDecorators: { glbExportName: [{
                 type: ViewChild,
                 args: ['fileName']
             }], heightArticle: [{
@@ -42309,7 +42482,7 @@ class ToolbarComponent {
         this._subs = [];
         this._subs.push(this.messageService.subscribe(MessageType.SetLeftSidebar, (templateRef) => this._setLeftSidebar(templateRef)), this.messageService.subscribe(MessageType.HideLeftSidebar, () => this._closeLeftSidebar({ keepTemplateRef: true })), this.messageService.subscribe(MessageType.RegisterToolbarIcon, (icon) => this._registerToolbarIcon(icon)), this.messageService.subscribe(MessageType.ViewModeChanged, () => this._closeLeftSidebar()), this.messageService.subscribe(MessageType.NewRoom, () => this.newRoom()), this.messageService.subscribe(MessageType.ShowOpenDialog, () => this.openOpenDialog()), this.messageService.subscribe(MessageType.FinishedIOneFurnitureBuild, () => this._hideToast()), this.messageService.subscribe(MessageType.UndefinedErrorOccured, () => this._hideToast()), this.messageService.subscribe(MessageType.RenderServiceTryToConnect, () => this._hideToast()), this.messageService.subscribe(MessageType.RenderServiceConnected, () => this._hideToast()), this._toastService.showToastSub.subscribe((toast) => this._showToast(toast)), this._screenSizeService.screenSizeChanged.subscribe(info => this.phoneSizeScreen = info.isPhoneSize), 
         // this.messageService.subscribe(MessageType.StartWithDiagram, () => this.openUploadDiagram()),
-        this.messageService.subscribe(MessageType.StartDrawingDiagram, (file) => this.openDrawDiagram(file)), this.messageService.subscribe(MessageType.StartCroppingPDF, (file) => this.openCroppingDiagram(file)), this.messageService.subscribe(MessageType.UserModelUploaded, (file) => this.openModelPreview(file)));
+        this.messageService.subscribe(MessageType.StartDrawingDiagram, (file) => this.openDrawDiagram(file)), this.messageService.subscribe(MessageType.StartCroppingPDF, (file) => this.openCroppingDiagram(file)), this.messageService.subscribe(MessageType.UserModelUploaded, (file) => this.openModelPreview(file)), this.messageService.subscribe(MessageType.RenderError, (data) => this.showRenderError(data)));
     }
     handleKeyDown(event) {
         if (event.ctrlKey && event.shiftKey && event.key === 'S') {
@@ -42507,6 +42680,12 @@ class ToolbarComponent {
             data: { file: file }
         });
     }
+    showRenderError(data) {
+        this._dialog.open(ErrorDialogComponent, {
+            data: data
+        });
+        this.messageService.emit(MessageType.HideLoadingIndicator);
+    }
     testRender() {
         this._newRenderService.forceRenderImage();
     }
@@ -42599,9 +42778,9 @@ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
       </ng-container>
       <div class="hd-toolbar-spacer"></div>
 
-<!--      <ng-container>-->
-<!--        <rp-pdf-export></rp-pdf-export>-->
-<!--      </ng-container>-->
+      <!--      <ng-container>-->
+      <!--        <rp-pdf-export></rp-pdf-export>-->
+      <!--      </ng-container>-->
 
       <mat-nav-list class="toolbar__nav" role="list">
         <div matTooltip="{{'NEW_ROOM' | localize}}">
@@ -42755,9 +42934,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
       </ng-container>
       <div class="hd-toolbar-spacer"></div>
 
-<!--      <ng-container>-->
-<!--        <rp-pdf-export></rp-pdf-export>-->
-<!--      </ng-container>-->
+      <!--      <ng-container>-->
+      <!--        <rp-pdf-export></rp-pdf-export>-->
+      <!--      </ng-container>-->
 
       <mat-nav-list class="toolbar__nav" role="list">
         <div matTooltip="{{'NEW_ROOM' | localize}}">
@@ -42958,7 +43137,7 @@ ProductOwnCollectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
                 (onArticleClick)="handleArticleClick($event)"
                 (onArButtonClick)="handleArButtonClick($event)"
         ></co-catalog-search>
-    `, isInline: true, styles: [":host{display:block;overflow:auto}\n"], components: [{ type: i7$3.ɵbf, selector: "co-catalog-search", inputs: ["createFrozenArticle", "showNavigation", "showLandingPage", "showFilter", "showViewModes", "settings", "title", "subTitle", "searchPlaceholder"], outputs: ["settingsChange", "onLookAtArticleButtonClick", "onArButtonClick", "onAddArticleButtonClick", "onArticleClick", "onStockDetailsClick", "onExternalSourceClick"] }], pipes: { "localize": LocalizePipe } });
+    `, isInline: true, styles: [":host{display:block;overflow:auto}\n"], components: [{ type: i7$2.ɵbf, selector: "co-catalog-search", inputs: ["createFrozenArticle", "showNavigation", "showLandingPage", "showFilter", "showViewModes", "settings", "title", "subTitle", "searchPlaceholder"], outputs: ["settingsChange", "onLookAtArticleButtonClick", "onArButtonClick", "onAddArticleButtonClick", "onArticleClick", "onStockDetailsClick", "onExternalSourceClick"] }], pipes: { "localize": LocalizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProductOwnCollectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -43391,7 +43570,7 @@ class ProductCatalogComponent {
         });
     }
 }
-ProductCatalogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProductCatalogComponent, deps: [{ token: HomedecoratorSettingsService }, { token: MessageBusService }, { token: HomedecoratorConnectorService }, { token: ScreenSizeAnalysisService }, { token: SceneService }, { token: FloorplanService }, { token: i0.Injector }, { token: i7$3.CatalogService }, { token: DynamicScriptService }, { token: HomedecoratorConnectorAdapterService }, { token: BuildFurnitureService }, { token: ThirdPartyModelService }], target: i0.ɵɵFactoryTarget.Component });
+ProductCatalogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProductCatalogComponent, deps: [{ token: HomedecoratorSettingsService }, { token: MessageBusService }, { token: HomedecoratorConnectorService }, { token: ScreenSizeAnalysisService }, { token: SceneService }, { token: FloorplanService }, { token: i0.Injector }, { token: i7$2.CatalogService }, { token: DynamicScriptService }, { token: HomedecoratorConnectorAdapterService }, { token: BuildFurnitureService }, { token: ThirdPartyModelService }], target: i0.ɵɵFactoryTarget.Component });
 ProductCatalogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProductCatalogComponent, selector: "rp-product-catalog", host: { properties: { "class.shown": "this.shown", "class.no-offset": "this.phoneSizeScreen" } }, ngImport: i0, template: `
       <div class="product-catalog-wrapper">
         <div class="catalog-button-wrapper" *ngIf="showOwnCollection || showExternalCatalog">
@@ -43452,7 +43631,7 @@ ProductCatalogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
           <mat-icon class="homedecorator-material-icons" aria-hidden="true">close</mat-icon>
         </button>
       </div>
-  `, isInline: true, styles: [":host{display:none;z-index:99;overflow:hidden}:host .layer{pointer-events:all!important;overflow-y:hidden;display:flex;flex-direction:column}:host .product-catalog-wrapper{display:flex;flex-direction:column;height:100%;padding:30px}:host .product-catalog-wrapper .catalog-button-wrapper{font-size:16px;margin-bottom:20px}:host .product-catalog-wrapper .co-catalog-external-source{display:flex;flex-basis:100%}:host .own-collection-button-wrapper{cursor:pointer}:host .own-collection-button-wrapper .own-collection-description{font-size:12px;font-weight:bold;text-shadow:none;text-transform:capitalize;margin:10px 0}:host .own-collection-button-wrapper .co-image{padding:25px;background:#3760a1;border-radius:10px}:host.shown{display:inline-block;position:relative;top:64px;left:64px;width:calc(100% - 64px);height:calc(100vh - 64px);background-color:#fff}:host.no-offset{left:0;width:100%;z-index:100}:host .ione-catalog{display:block;overflow:hidden}:host .ione-catalog ::ng-deep app-catalog{overflow:hidden}:host .catalog-button-wrapper .back-button,:host .catalog-button-wrapper .refresh-button{cursor:pointer;display:inline-block;font-weight:bold}:host .catalog-button-wrapper .back-button .refresh-button-span,:host .catalog-button-wrapper .back-button .back-button-span,:host .catalog-button-wrapper .refresh-button .refresh-button-span,:host .catalog-button-wrapper .refresh-button .back-button-span{vertical-align:top;line-height:25px;margin:10px 5px 0}:host .catalog-button-wrapper .button-spacer{display:inline-block;margin:0 10px}:host .product-catalog-wrapper{overflow:auto}:host .hide-catalog{position:absolute;top:6px;right:0px;z-index:100}.co-catalog-external-sources .external-source-item .co-image img{object-fit:cover}::ng-deep .co-catalog-navigation{position:relative}::ng-deep .co-catalog-navigation .navigation-overlay-wrapper{position:absolute!important;left:-40px!important;padding:20px 40px;grid-column-gap:60px}\n"], components: [{ type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ProductOwnCollectionComponent, selector: "rp-product-own-collection", inputs: ["settings"], outputs: ["articleClick", "arButtonClick"] }, { type: ModelUploaderComponent, selector: "rp-model-uploader" }, { type: i4$1.ImageComponent, selector: "co-image", inputs: ["source", "placeHolder"] }, { type: i7$3.ɵt, selector: "co-catalog-external-sources", outputs: ["externalSourceClick"] }, { type: i7$3.ɵbg, selector: "co-catalog-external-source", inputs: ["showFilter", "showNavigation", "externalCatalogStartupInfo", "catalogDefinition", "user", "title", "subTitle", "searchPlaceholder", "options", "name"], outputs: ["articleClick", "addArticleClick", "iFrameFeedbackReceived"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe, "append": AppendPipe } });
+  `, isInline: true, styles: [":host{display:none;z-index:99;overflow:hidden}:host .layer{pointer-events:all!important;overflow-y:hidden;display:flex;flex-direction:column}:host .product-catalog-wrapper{display:flex;flex-direction:column;height:100%;padding:30px}:host .product-catalog-wrapper .catalog-button-wrapper{font-size:16px;margin-bottom:20px}:host .product-catalog-wrapper .co-catalog-external-source{display:flex;flex-basis:100%}:host .own-collection-button-wrapper{cursor:pointer}:host .own-collection-button-wrapper .own-collection-description{font-size:12px;font-weight:bold;text-shadow:none;text-transform:capitalize;margin:10px 0}:host .own-collection-button-wrapper .co-image{padding:25px;background:#3760a1;border-radius:10px}:host.shown{display:inline-block;position:relative;top:64px;left:64px;width:calc(100% - 64px);height:calc(100vh - 64px);background-color:#fff}:host.no-offset{left:0;width:100%;z-index:100}:host .ione-catalog{display:block;overflow:hidden}:host .ione-catalog ::ng-deep app-catalog{overflow:hidden}:host .catalog-button-wrapper .back-button,:host .catalog-button-wrapper .refresh-button{cursor:pointer;display:inline-block;font-weight:bold}:host .catalog-button-wrapper .back-button .refresh-button-span,:host .catalog-button-wrapper .back-button .back-button-span,:host .catalog-button-wrapper .refresh-button .refresh-button-span,:host .catalog-button-wrapper .refresh-button .back-button-span{vertical-align:top;line-height:25px;margin:10px 5px 0}:host .catalog-button-wrapper .button-spacer{display:inline-block;margin:0 10px}:host .product-catalog-wrapper{overflow:auto}:host .hide-catalog{position:absolute;top:6px;right:0px;z-index:100}.co-catalog-external-sources .external-source-item .co-image img{object-fit:cover}::ng-deep .co-catalog-navigation{position:relative}::ng-deep .co-catalog-navigation .navigation-overlay-wrapper{position:absolute!important;left:-40px!important;padding:20px 40px;grid-column-gap:60px}\n"], components: [{ type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ProductOwnCollectionComponent, selector: "rp-product-own-collection", inputs: ["settings"], outputs: ["articleClick", "arButtonClick"] }, { type: ModelUploaderComponent, selector: "rp-model-uploader" }, { type: i4$1.ImageComponent, selector: "co-image", inputs: ["source", "placeHolder"] }, { type: i7$2.ɵt, selector: "co-catalog-external-sources", outputs: ["externalSourceClick"] }, { type: i7$2.ɵbg, selector: "co-catalog-external-source", inputs: ["showFilter", "showNavigation", "externalCatalogStartupInfo", "catalogDefinition", "user", "title", "subTitle", "searchPlaceholder", "options", "name"], outputs: ["articleClick", "addArticleClick", "iFrameFeedbackReceived"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe, "append": AppendPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ProductCatalogComponent, decorators: [{
             type: Component,
             args: [{
@@ -43520,7 +43699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
   `,
                     styleUrls: ['./product-catalog.component.scss']
                 }]
-        }], ctorParameters: function () { return [{ type: HomedecoratorSettingsService }, { type: MessageBusService }, { type: HomedecoratorConnectorService }, { type: ScreenSizeAnalysisService }, { type: SceneService }, { type: FloorplanService }, { type: i0.Injector }, { type: i7$3.CatalogService }, { type: DynamicScriptService }, { type: HomedecoratorConnectorAdapterService }, { type: BuildFurnitureService }, { type: ThirdPartyModelService }]; }, propDecorators: { shown: [{
+        }], ctorParameters: function () { return [{ type: HomedecoratorSettingsService }, { type: MessageBusService }, { type: HomedecoratorConnectorService }, { type: ScreenSizeAnalysisService }, { type: SceneService }, { type: FloorplanService }, { type: i0.Injector }, { type: i7$2.CatalogService }, { type: DynamicScriptService }, { type: HomedecoratorConnectorAdapterService }, { type: BuildFurnitureService }, { type: ThirdPartyModelService }]; }, propDecorators: { shown: [{
                 type: HostBinding,
                 args: ['class.shown']
             }], phoneSizeScreen: [{
@@ -43692,7 +43871,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 class HomedecoratorComponent {
-    constructor(controllerService, appState, presetsService, screenAnalysis, _componentFactoryResolver, _iconRegistry, _domSanitizer, _messageService, _homedecoratorService) {
+    constructor(controllerService, appState, presetsService, screenAnalysis, _componentFactoryResolver, _iconRegistry, _domSanitizer, _messageService, _homedecoratorService, _eventService) {
         this.controllerService = controllerService;
         this.appState = appState;
         this.presetsService = presetsService;
@@ -43702,6 +43881,7 @@ class HomedecoratorComponent {
         this._domSanitizer = _domSanitizer;
         this._messageService = _messageService;
         this._homedecoratorService = _homedecoratorService;
+        this._eventService = _eventService;
         this.showClass = true;
         this.loaded = false;
         this.title = 'MyRoomPlans';
@@ -43833,7 +44013,10 @@ class HomedecoratorComponent {
             'hand-pointer',
             'check',
             'move-phone-ar',
-            'cart-shopping-regular'
+            'cart-shopping-regular',
+            'pen-ruler',
+            'dash-button',
+            'retry-button'
         ].map(addIcon);
     }
     keyup(event) {
@@ -43857,6 +44040,7 @@ class HomedecoratorComponent {
         });
     }
     _startWithEmptyRoom(switchTo2D) {
+        this._eventService.dirty.next(true);
         const preset = Preset.CreateModelFromInterface({ filename: 'assets/presets/empty.json' });
         this._startWithPreset(preset, switchTo2D);
     }
@@ -43871,7 +44055,7 @@ class HomedecoratorComponent {
         this._messageService.emit(MessageType.LoadRoomFromPreset, preset);
     }
 }
-HomedecoratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HomedecoratorComponent, deps: [{ token: HomedecoratorConnectorService }, { token: AppStateService }, { token: PresetsService }, { token: ScreenSizeAnalysisService }, { token: i0.ComponentFactoryResolver }, { token: i5$1.MatIconRegistry }, { token: i1.DomSanitizer }, { token: MessageBusService }, { token: HomedecoratorService }], target: i0.ɵɵFactoryTarget.Component });
+HomedecoratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HomedecoratorComponent, deps: [{ token: HomedecoratorConnectorService }, { token: AppStateService }, { token: PresetsService }, { token: ScreenSizeAnalysisService }, { token: i0.ComponentFactoryResolver }, { token: i5$1.MatIconRegistry }, { token: i1.DomSanitizer }, { token: MessageBusService }, { token: HomedecoratorService }, { token: HomedecoratorAppEventService }], target: i0.ɵɵFactoryTarget.Component });
 HomedecoratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HomedecoratorComponent, selector: "co-homedecorator", inputs: { settings: "settings" }, host: { listeners: { "document:keyup": "keyup($event)" }, properties: { "class.co-homedecorator": "this.showClass" } }, ngImport: i0, template: `
     <div class="viewport" *ngIf="loaded">
       <progress-bar></progress-bar>
@@ -43932,7 +44116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
   `,
                     encapsulation: ViewEncapsulation.None
                 }]
-        }], ctorParameters: function () { return [{ type: HomedecoratorConnectorService }, { type: AppStateService }, { type: PresetsService }, { type: ScreenSizeAnalysisService }, { type: i0.ComponentFactoryResolver }, { type: i5$1.MatIconRegistry }, { type: i1.DomSanitizer }, { type: MessageBusService }, { type: HomedecoratorService }]; }, propDecorators: { settings: [{
+        }], ctorParameters: function () { return [{ type: HomedecoratorConnectorService }, { type: AppStateService }, { type: PresetsService }, { type: ScreenSizeAnalysisService }, { type: i0.ComponentFactoryResolver }, { type: i5$1.MatIconRegistry }, { type: i1.DomSanitizer }, { type: MessageBusService }, { type: HomedecoratorService }, { type: HomedecoratorAppEventService }]; }, propDecorators: { settings: [{
                 type: Input
             }], showClass: [{
                 type: HostBinding,
@@ -44785,7 +44969,7 @@ class EditApplyComponent {
     }
 }
 EditApplyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditApplyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditApplyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditApplyComponent, selector: "rp-edit-apply", inputs: { watched: "watched", disable: "disable" }, outputs: { cancel: "cancel", apply: "apply", toggleChange: "toggleChange" }, ngImport: i0, template: "<mat-button-toggle\r\n  *ngIf=\"!checked\"\r\n  (change)=\"toggle($event)\">\r\n  <mat-icon class=\"homedecorator-material-icons\">mode_edit</mat-icon>\r\n  <span>{{'EDIT' | localize}}</span>\r\n</mat-button-toggle>\r\n<article *ngIf=\"checked\">\r\n  <button mat-raised-button (click)=\"onCancel()\">\r\n      <mat-icon class=\"homedecorator-material-icons\">clear</mat-icon>\r\n  </button>\r\n  <button mat-raised-button\r\n    [disabled]=\"!watched || disable\"\r\n    (click)=\"onApply()\"\r\n  >\r\n  <mat-icon class=\"homedecorator-material-icons\">done</mat-icon>\r\n  </button>\r\n</article>\r\n", styles: [""], components: [{ type: i7$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe } });
+EditApplyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditApplyComponent, selector: "rp-edit-apply", inputs: { watched: "watched", disable: "disable" }, outputs: { cancel: "cancel", apply: "apply", toggleChange: "toggleChange" }, ngImport: i0, template: "<mat-button-toggle\r\n  *ngIf=\"!checked\"\r\n  (change)=\"toggle($event)\">\r\n  <mat-icon class=\"homedecorator-material-icons\">mode_edit</mat-icon>\r\n  <span>{{'EDIT' | localize}}</span>\r\n</mat-button-toggle>\r\n<article *ngIf=\"checked\">\r\n  <button mat-raised-button (click)=\"onCancel()\">\r\n      <mat-icon class=\"homedecorator-material-icons\">clear</mat-icon>\r\n  </button>\r\n  <button mat-raised-button\r\n    [disabled]=\"!watched || disable\"\r\n    (click)=\"onApply()\"\r\n  >\r\n  <mat-icon class=\"homedecorator-material-icons\">done</mat-icon>\r\n  </button>\r\n</article>\r\n", styles: [""], components: [{ type: i8$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditApplyComponent, decorators: [{
             type: Component,
             args: [{
@@ -46079,7 +46263,12 @@ ModelUploaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         ImageModule,
         CatalogExternalSourcesModule,
         CatalogExternalSourceModule,
-        MatRadioModule], exports: [ModelUploaderComponent] });
+        MatRadioModule,
+        MatSlideToggleModule,
+        MatFormFieldModule,
+        MatOptionModule,
+        MatSelectModule,
+        IconModule], exports: [ModelUploaderComponent] });
 ModelUploaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ModelUploaderModule, imports: [[
             CommonModule,
             CoreModule,
@@ -46090,6 +46279,11 @@ ModelUploaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
             CatalogExternalSourcesModule,
             CatalogExternalSourceModule,
             MatRadioModule,
+            MatSlideToggleModule,
+            MatFormFieldModule,
+            MatOptionModule,
+            MatSelectModule,
+            IconModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ModelUploaderModule, decorators: [{
             type: NgModule,
@@ -46104,6 +46298,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         CatalogExternalSourcesModule,
                         CatalogExternalSourceModule,
                         MatRadioModule,
+                        MatSlideToggleModule,
+                        MatFormFieldModule,
+                        MatOptionModule,
+                        MatSelectModule,
+                        IconModule,
                     ],
                     exports: [
                         ModelUploaderComponent