@colijnit/homedecorator 255.1.4 → 255.1.5

package/bundles/colijnit-homedecorator.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@colijnit/configuratorapi/build/enum/node-type.enum'), require('@colijnit/configuratorapi/build/model/configurator-statistics-environment'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/ioneconnector/build/model/data-service-response-data'), require('@colijnit/configuratorapi/build/model/frozen-article'), require('@colijnit/configuratorapi/build/model/selection'), require('@colijnit/configuratorapi/build/model/answer-price'), require('@colijnit/configuratorapi/build/model/article'), require('@colijnit/configuratorapi/build/model/deco-node'), require('@colijnit/configuratorapi/build/model/skip-button-info'), require('@colijnit/configuratorapi'), require('@colijnit/mainapi'), require('@colijnit/articleapi/build/articles'), require('@colijnit/configuratorapi/build/model/article-text.bo'), require('@colijnit/ioneconnector/build/service/business-object-factory'), require('@colijnit/ioneconnector/build/utils/image-utils'), require('@colijnit/articleapi/build/model/external-catalog-startup-info'), require('@colijnit/articleapi/build/model/catalog-definition.bo'), require('@colijnit/articleapi/build/model/external-source.bo'), require('@colijnit/articleapi/build/model/article-full-object'), require('@colijnit/configuratorapi/build/model/article-category'), require('@colijnit/articleapi/build/model/article-flat.bo'), require('@colijnit/mainapi/build/enum/internal-param.enum'), require('@colijnit/ioneconnector/build/utils/string-utils'), require('@colijnit/configuratorapi/build/utils/image-utils'), require('@angular/common/http'), require('axios'), require('textdiff-patch'), require('three'), require('@tweenjs/tween.js'), require('polygon-tools'), require('three-gpu-pathtracer'), require('three-mesh-bvh/src/workers/ParallelMeshBVHWorker.js'), require('three/examples/jsm/geometries/TextGeometry'), require('three/examples/jsm/loaders/FontLoader'), require('three/examples/jsm/webxr/XRControllerModelFactory'), require('@colijnit/configuratorapi/build/enum/hdeco-positioning.enum'), require('three/examples/jsm/postprocessing/OutlinePass'), require('three/examples/jsm/postprocessing/EffectComposer'), require('three/examples/jsm/postprocessing/RenderPass'), require('three/examples/jsm/postprocessing/ShaderPass'), require('three/examples/jsm/shaders/FXAAShader'), require('three/examples/jsm/postprocessing/OutputPass'), require('md5'), require('three/examples/jsm/libs/lil-gui.module.min'), require('n8ao'), require('three/examples/jsm/postprocessing/TAARenderPass'), require('@angular/platform-browser'), require('ngx-device-detector'), require('@angular/material/icon'), require('@angular/animations'), require('@angular/common'), require('@angular/material/dialog'), require('three/examples/jsm/loaders/RGBELoader'), require('@colijnit/configuratorapi/build/enum/hdeco-placement.enum'), require('rxjs/internal/observable/fromEvent'), require('rxjs/operators'), require('rxjs/internal/observable/of'), require('three/examples/jsm/utils/BufferGeometryUtils.js'), require('three/examples/jsm/loaders/OBJLoader'), require('three/examples/jsm/loaders/MTLLoader'), require('three/examples/jsm/loaders/GLTFLoader'), require('three/examples/jsm/exporters/GLTFExporter'), require('three/examples/jsm/loaders/DRACOLoader'), require('three/examples/jsm/loaders/KTX2Loader'), require('three/examples/jsm/exporters/USDZExporter'), require('@angular/material/list'), require('@angular/material/core'), require('@colijnit/configuratorapi/build/enum/deco-node-type.enum'), require('jszip'), require('@colijnit/configuratorapi/build/enum/deco-node-kind.enum'), require('@angular/material/checkbox'), require('@angular/material/button'), require('@angular/forms'), require('three/examples/jsm/utils/BufferGeometryUtils'), require('three-mesh-bvh'), require('three/src/constants'), require('@colijnit/corecomponents'), require('@angular/material/form-field'), require('@angular/material/select'), require('@angular/material/tooltip'), require('@colijnit/corecomponents_v12'), require('@angular/material/slider'), require('@angular/material/input'), require('dat.gui'), require('@migenius/realityserver-client'), require('@angular/material/grid-list'), require('@angular/material/progress-spinner'), require('@angular/flex-layout/flex'), require('@angular/material/progress-bar'), require('three/examples/jsm/geometries/DecalGeometry'), require('fabric'), require('@angular/material/button-toggle'), require('@angular/material/snack-bar'), require('@angular/material/slide-toggle'), require('@angular/material/divider'), require('browser-image-compression'), require('@angular/material/tabs'), require('@angular/flex-layout/extended'), require('ngx-color/chrome'), require('@angular/router'), require('delaunator'), require('three/examples/jsm/helpers/VertexNormalsHelper'), require('@angular/cdk/portal'), require('file-saver'), require('ng2-pdf-viewer'), require('html2canvas'), require('three/examples/jsm/controls/OrbitControls'), require('three/examples/jsm/loaders/FBXLoader'), require('three/examples/jsm/loaders/TDSLoader'), require('three/examples/jsm/loaders/STLLoader'), require('@angular/material/radio'), require('@angular/material/toolbar'), require('@angular/material/menu'), require('@angular/material/card'), require('@angular/material/sidenav'), require('@angular/material/badge'), require('@colijnit/articleapi/build/model/external-catalog-startup-info-request'), require('@colijnit/catalog'), require('ngx-lightbox'), require('@angular/flex-layout'), require('@angular/cdk/drag-drop'), require('jspdf'), require('jspdf-autotable')) :
-  typeof define === 'function' && define.amd ? define('@colijnit/homedecorator', ['exports', '@angular/core', 'rxjs', '@colijnit/configuratorapi/build/enum/node-type.enum', '@colijnit/configuratorapi/build/model/configurator-statistics-environment', '@colijnit/ioneconnector/build/model/options', '@colijnit/ioneconnector/build/model/data-service-response-data', '@colijnit/configuratorapi/build/model/frozen-article', '@colijnit/configuratorapi/build/model/selection', '@colijnit/configuratorapi/build/model/answer-price', '@colijnit/configuratorapi/build/model/article', '@colijnit/configuratorapi/build/model/deco-node', '@colijnit/configuratorapi/build/model/skip-button-info', '@colijnit/configuratorapi', '@colijnit/mainapi', '@colijnit/articleapi/build/articles', '@colijnit/configuratorapi/build/model/article-text.bo', '@colijnit/ioneconnector/build/service/business-object-factory', '@colijnit/ioneconnector/build/utils/image-utils', '@colijnit/articleapi/build/model/external-catalog-startup-info', '@colijnit/articleapi/build/model/catalog-definition.bo', '@colijnit/articleapi/build/model/external-source.bo', '@colijnit/articleapi/build/model/article-full-object', '@colijnit/configuratorapi/build/model/article-category', '@colijnit/articleapi/build/model/article-flat.bo', '@colijnit/mainapi/build/enum/internal-param.enum', '@colijnit/ioneconnector/build/utils/string-utils', '@colijnit/configuratorapi/build/utils/image-utils', '@angular/common/http', 'axios', 'textdiff-patch', 'three', '@tweenjs/tween.js', 'polygon-tools', 'three-gpu-pathtracer', 'three-mesh-bvh/src/workers/ParallelMeshBVHWorker.js', 'three/examples/jsm/geometries/TextGeometry', 'three/examples/jsm/loaders/FontLoader', 'three/examples/jsm/webxr/XRControllerModelFactory', '@colijnit/configuratorapi/build/enum/hdeco-positioning.enum', 'three/examples/jsm/postprocessing/OutlinePass', 'three/examples/jsm/postprocessing/EffectComposer', 'three/examples/jsm/postprocessing/RenderPass', 'three/examples/jsm/postprocessing/ShaderPass', 'three/examples/jsm/shaders/FXAAShader', 'three/examples/jsm/postprocessing/OutputPass', 'md5', 'three/examples/jsm/libs/lil-gui.module.min', 'n8ao', 'three/examples/jsm/postprocessing/TAARenderPass', '@angular/platform-browser', 'ngx-device-detector', '@angular/material/icon', '@angular/animations', '@angular/common', '@angular/material/dialog', 'three/examples/jsm/loaders/RGBELoader', '@colijnit/configuratorapi/build/enum/hdeco-placement.enum', 'rxjs/internal/observable/fromEvent', 'rxjs/operators', 'rxjs/internal/observable/of', 'three/examples/jsm/utils/BufferGeometryUtils.js', 'three/examples/jsm/loaders/OBJLoader', 'three/examples/jsm/loaders/MTLLoader', 'three/examples/jsm/loaders/GLTFLoader', 'three/examples/jsm/exporters/GLTFExporter', 'three/examples/jsm/loaders/DRACOLoader', 'three/examples/jsm/loaders/KTX2Loader', 'three/examples/jsm/exporters/USDZExporter', '@angular/material/list', '@angular/material/core', '@colijnit/configuratorapi/build/enum/deco-node-type.enum', 'jszip', '@colijnit/configuratorapi/build/enum/deco-node-kind.enum', '@angular/material/checkbox', '@angular/material/button', '@angular/forms', 'three/examples/jsm/utils/BufferGeometryUtils', 'three-mesh-bvh', 'three/src/constants', '@colijnit/corecomponents', '@angular/material/form-field', '@angular/material/select', '@angular/material/tooltip', '@colijnit/corecomponents_v12', '@angular/material/slider', '@angular/material/input', 'dat.gui', '@migenius/realityserver-client', '@angular/material/grid-list', '@angular/material/progress-spinner', '@angular/flex-layout/flex', '@angular/material/progress-bar', 'three/examples/jsm/geometries/DecalGeometry', 'fabric', '@angular/material/button-toggle', '@angular/material/snack-bar', '@angular/material/slide-toggle', '@angular/material/divider', 'browser-image-compression', '@angular/material/tabs', '@angular/flex-layout/extended', 'ngx-color/chrome', '@angular/router', 'delaunator', 'three/examples/jsm/helpers/VertexNormalsHelper', '@angular/cdk/portal', 'file-saver', 'ng2-pdf-viewer', 'html2canvas', 'three/examples/jsm/controls/OrbitControls', 'three/examples/jsm/loaders/FBXLoader', 'three/examples/jsm/loaders/TDSLoader', 'three/examples/jsm/loaders/STLLoader', '@angular/material/radio', '@angular/material/toolbar', '@angular/material/menu', '@angular/material/card', '@angular/material/sidenav', '@angular/material/badge', '@colijnit/articleapi/build/model/external-catalog-startup-info-request', '@colijnit/catalog', 'ngx-lightbox', '@angular/flex-layout', '@angular/cdk/drag-drop', 'jspdf', 'jspdf-autotable'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.homedecorator = {}), global.ng.core, global.rxjs, global.nodeType_enum, global.configuratorStatisticsEnvironment, global.options, global.dataServiceResponseData, global.frozenArticle, global.selection, global.answerPrice, global.article, global.decoNode, global.skipButtonInfo, global.configuratorapi, global.mainapi, global.articles, global.articleText_bo, global.businessObjectFactory, global.imageUtils, global.externalCatalogStartupInfo, global.catalogDefinition_bo, global.externalSource_bo, global.articleFullObject, global.articleCategory, global.articleFlat_bo, global.internalParam_enum, global.stringUtils, global.imageUtils$1, global.ng.common.http, global.axios, global.applyPatch, global.THREE, global.TWEEN, global.PolygonTools, global.threeGpuPathtracer, global.ParallelMeshBVHWorker_js, global.TextGeometry, global.FontLoader, global.XRControllerModelFactory, global.hdecoPositioning_enum, global.OutlinePass, global.EffectComposer, global.RenderPass, global.ShaderPass, global.FXAAShader, global.OutputPass, global.md5, global.GUI, global.n8ao, global.TAARenderPass, global.ng.platformBrowser, global.i2$1, global.ng.material.icon, global.ng.animations, global.ng.common, global.ng.material.dialog, global.RGBELoader, global.hdecoPlacement_enum, global.rxjs["internal/observable/fromEvent"], global.rxjs.operators, global.rxjs["internal/observable/of"], global.BufferGeometryUtils, global.OBJLoader, global.MTLLoader, global.GLTFLoader, global.GLTFExporter, global.DRACOLoader, global.KTX2Loader, global.USDZExporter, global.ng.material.list, global.ng.material.core, global.decoNodeType_enum, global.JSZip, global.decoNodeKind_enum, global.ng.material.checkbox, global.ng.material.button, global.ng.forms, global.BufferGeometryUtils$1, global.threeMeshBvh, global.constants, global.i4, global.ng.material.formField, global.ng.material.select, global.ng.material.tooltip, global.i4$1, global.ng.material.slider, global.ng.material.input, global.dat, global.realityserverClient, global.ng.material.gridList, global.ng.material.progressSpinner, global.ng.flexLayout.flex, global.ng.material.progressBar, global.DecalGeometry, global.fabric, global.ng.material.buttonToggle, global.ng.material.snackBar, global.ng.material.slideToggle, global.ng.material.divider, global.imageCompression, global.ng.material.tabs, global.ng.flexLayout.extended, global.i1$3, global.ng.router, global.Delaunator, global.VertexNormalsHelper, global.ng.cdk.portal, global.fileSaver, global.i6$2, global.html2canvas, global.OrbitControls, global.FBXLoader, global.TDSLoader, global.STLLoader, global.ng.material.radio, global.ng.material.toolbar, global.ng.material.menu, global.ng.material.card, global.ng.material.sidenav, global.ng.material.badge, global.externalCatalogStartupInfoRequest, global.i7$3, global.i1$5, global.ng.flexLayout, global.ng.cdk.dragDrop, global.jspdf, global.autoTable));
-})(this, (function (exports, i0, rxjs, nodeType_enum, configuratorStatisticsEnvironment, options, dataServiceResponseData, frozenArticle, selection, answerPrice, article, decoNode, skipButtonInfo, configuratorapi, mainapi, articles, articleText_bo, businessObjectFactory, imageUtils, externalCatalogStartupInfo, catalogDefinition_bo, externalSource_bo, articleFullObject, articleCategory, articleFlat_bo, internalParam_enum, stringUtils, imageUtils$1, i2, axios, applyPatch, THREE, TWEEN, PolygonTools, threeGpuPathtracer, ParallelMeshBVHWorker_js, TextGeometry, FontLoader, XRControllerModelFactory, hdecoPositioning_enum, OutlinePass, EffectComposer, RenderPass, ShaderPass, FXAAShader, OutputPass, md5, GUI, n8ao, TAARenderPass, i1, i2$1, i5$1, animations, i5, i1$1, RGBELoader, hdecoPlacement_enum, fromEvent, operators, of, BufferGeometryUtils, OBJLoader, MTLLoader, GLTFLoader, GLTFExporter, DRACOLoader, KTX2Loader, USDZExporter, i2$2, i3, decoNodeType_enum, JSZip, decoNodeKind_enum, i1$2, i3$1, i8, BufferGeometryUtils$1, threeMeshBvh, constants, i4, i7, i9, i10, i4$1, i7$1, i19, dat, realityserverClient, i3$2, i15, i3$3, i2$3, DecalGeometry, fabric, i7$2, i2$4, i10$1, i6, imageCompression, i1$4, i6$1, i1$3, i5$2, Delaunator, VertexNormalsHelper, i28, fileSaver, i6$2, html2canvas, OrbitControls, FBXLoader, TDSLoader, STLLoader, i9$1, i19$1, i22, i23, i26, i30, externalCatalogStartupInfoRequest, i7$3, i1$5, flexLayout, i10$2, jspdf, autoTable) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@colijnit/configuratorapi/build/enum/node-type.enum'), require('@colijnit/configuratorapi/build/model/configurator-statistics-environment'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/ioneconnector/build/model/data-service-response-data'), require('@colijnit/configuratorapi/build/model/frozen-article'), require('@colijnit/configuratorapi/build/model/selection'), require('@colijnit/configuratorapi/build/model/answer-price'), require('@colijnit/configuratorapi/build/model/article'), require('@colijnit/configuratorapi/build/model/deco-node'), require('@colijnit/configuratorapi/build/model/skip-button-info'), require('@colijnit/configuratorapi'), require('@colijnit/mainapi'), require('@colijnit/articleapi/build/articles'), require('@colijnit/configuratorapi/build/model/article-text.bo'), require('@colijnit/ioneconnector/build/service/business-object-factory'), require('@colijnit/ioneconnector/build/utils/image-utils'), require('@colijnit/articleapi/build/model/external-catalog-startup-info'), require('@colijnit/articleapi/build/model/catalog-definition.bo'), require('@colijnit/articleapi/build/model/external-source.bo'), require('@colijnit/articleapi/build/model/article-full-object'), require('@colijnit/configuratorapi/build/model/article-category'), require('@colijnit/articleapi/build/model/article-flat.bo'), require('@colijnit/mainapi/build/model/co-domain-value.bo'), require('@colijnit/mainapi/build/enum/domain-name.enum'), require('@colijnit/mainapi/build/enum/internal-param.enum'), require('@colijnit/ioneconnector/build/utils/string-utils'), require('@colijnit/configuratorapi/build/utils/image-utils'), require('@angular/common/http'), require('axios'), require('textdiff-patch'), require('three'), require('@tweenjs/tween.js'), require('polygon-tools'), require('three-gpu-pathtracer'), require('three-mesh-bvh/src/workers/ParallelMeshBVHWorker.js'), require('three/examples/jsm/geometries/TextGeometry'), require('three/examples/jsm/loaders/FontLoader'), require('three/examples/jsm/webxr/XRControllerModelFactory'), require('@colijnit/configuratorapi/build/enum/hdeco-positioning.enum'), require('three/examples/jsm/postprocessing/OutlinePass'), require('three/examples/jsm/postprocessing/EffectComposer'), require('three/examples/jsm/postprocessing/RenderPass'), require('three/examples/jsm/postprocessing/ShaderPass'), require('three/examples/jsm/shaders/FXAAShader'), require('three/examples/jsm/postprocessing/OutputPass'), require('three/examples/jsm/libs/lil-gui.module.min'), require('n8ao'), require('three/examples/jsm/shaders/BlendShader'), require('@angular/platform-browser'), require('ngx-device-detector'), require('@angular/material/icon'), require('@angular/animations'), require('@angular/common'), require('@angular/material/dialog'), require('three/examples/jsm/loaders/RGBELoader'), require('@colijnit/configuratorapi/build/enum/hdeco-placement.enum'), require('rxjs/internal/observable/fromEvent'), require('rxjs/operators'), require('rxjs/internal/observable/of'), require('three/examples/jsm/utils/BufferGeometryUtils.js'), require('three/examples/jsm/loaders/OBJLoader'), require('three/examples/jsm/loaders/MTLLoader'), require('three/examples/jsm/loaders/GLTFLoader'), require('three/examples/jsm/exporters/GLTFExporter'), require('three/examples/jsm/loaders/DRACOLoader'), require('three/examples/jsm/loaders/KTX2Loader'), require('three/examples/jsm/exporters/USDZExporter'), require('@angular/material/list'), require('@angular/material/core'), require('@colijnit/configuratorapi/build/enum/deco-node-type.enum'), require('jszip'), require('@colijnit/configuratorapi/build/enum/deco-node-kind.enum'), require('@angular/material/checkbox'), require('@angular/material/button'), require('@angular/forms'), require('three/examples/jsm/utils/BufferGeometryUtils'), require('three-mesh-bvh'), require('three/src/constants'), require('@colijnit/corecomponents'), require('@angular/material/form-field'), require('@angular/material/select'), require('@angular/material/tooltip'), require('@colijnit/corecomponents_v12'), require('@angular/material/slider'), require('@angular/material/input'), require('dat.gui'), require('@migenius/realityserver-client'), require('@angular/material/grid-list'), require('@angular/material/progress-spinner'), require('@angular/flex-layout/flex'), require('@angular/material/progress-bar'), require('three/examples/jsm/geometries/DecalGeometry'), require('fabric'), require('@angular/material/button-toggle'), require('@angular/material/snack-bar'), require('@angular/material/slide-toggle'), require('@angular/material/divider'), require('browser-image-compression'), require('@angular/material/tabs'), require('@angular/flex-layout/extended'), require('ngx-color/chrome'), require('@angular/router'), require('delaunator'), require('three/examples/jsm/helpers/VertexNormalsHelper'), require('@angular/cdk/portal'), require('file-saver'), require('ng2-pdf-viewer'), require('html2canvas'), require('three/examples/jsm/controls/OrbitControls'), require('three/examples/jsm/loaders/FBXLoader'), require('three/examples/jsm/loaders/TDSLoader'), require('three/examples/jsm/loaders/STLLoader'), require('@angular/material/toolbar'), require('@angular/material/menu'), require('@angular/material/card'), require('@angular/material/sidenav'), require('@angular/material/badge'), require('@colijnit/articleapi/build/model/external-catalog-startup-info-request'), require('@colijnit/catalog'), require('ngx-lightbox'), require('@angular/flex-layout'), require('@angular/cdk/drag-drop'), require('jspdf'), require('jspdf-autotable'), require('@angular/material/radio')) :
+  typeof define === 'function' && define.amd ? define('@colijnit/homedecorator', ['exports', '@angular/core', 'rxjs', '@colijnit/configuratorapi/build/enum/node-type.enum', '@colijnit/configuratorapi/build/model/configurator-statistics-environment', '@colijnit/ioneconnector/build/model/options', '@colijnit/ioneconnector/build/model/data-service-response-data', '@colijnit/configuratorapi/build/model/frozen-article', '@colijnit/configuratorapi/build/model/selection', '@colijnit/configuratorapi/build/model/answer-price', '@colijnit/configuratorapi/build/model/article', '@colijnit/configuratorapi/build/model/deco-node', '@colijnit/configuratorapi/build/model/skip-button-info', '@colijnit/configuratorapi', '@colijnit/mainapi', '@colijnit/articleapi/build/articles', '@colijnit/configuratorapi/build/model/article-text.bo', '@colijnit/ioneconnector/build/service/business-object-factory', '@colijnit/ioneconnector/build/utils/image-utils', '@colijnit/articleapi/build/model/external-catalog-startup-info', '@colijnit/articleapi/build/model/catalog-definition.bo', '@colijnit/articleapi/build/model/external-source.bo', '@colijnit/articleapi/build/model/article-full-object', '@colijnit/configuratorapi/build/model/article-category', '@colijnit/articleapi/build/model/article-flat.bo', '@colijnit/mainapi/build/model/co-domain-value.bo', '@colijnit/mainapi/build/enum/domain-name.enum', '@colijnit/mainapi/build/enum/internal-param.enum', '@colijnit/ioneconnector/build/utils/string-utils', '@colijnit/configuratorapi/build/utils/image-utils', '@angular/common/http', 'axios', 'textdiff-patch', 'three', '@tweenjs/tween.js', 'polygon-tools', 'three-gpu-pathtracer', 'three-mesh-bvh/src/workers/ParallelMeshBVHWorker.js', 'three/examples/jsm/geometries/TextGeometry', 'three/examples/jsm/loaders/FontLoader', 'three/examples/jsm/webxr/XRControllerModelFactory', '@colijnit/configuratorapi/build/enum/hdeco-positioning.enum', 'three/examples/jsm/postprocessing/OutlinePass', 'three/examples/jsm/postprocessing/EffectComposer', 'three/examples/jsm/postprocessing/RenderPass', 'three/examples/jsm/postprocessing/ShaderPass', 'three/examples/jsm/shaders/FXAAShader', 'three/examples/jsm/postprocessing/OutputPass', 'three/examples/jsm/libs/lil-gui.module.min', 'n8ao', 'three/examples/jsm/shaders/BlendShader', '@angular/platform-browser', 'ngx-device-detector', '@angular/material/icon', '@angular/animations', '@angular/common', '@angular/material/dialog', 'three/examples/jsm/loaders/RGBELoader', '@colijnit/configuratorapi/build/enum/hdeco-placement.enum', 'rxjs/internal/observable/fromEvent', 'rxjs/operators', 'rxjs/internal/observable/of', 'three/examples/jsm/utils/BufferGeometryUtils.js', 'three/examples/jsm/loaders/OBJLoader', 'three/examples/jsm/loaders/MTLLoader', 'three/examples/jsm/loaders/GLTFLoader', 'three/examples/jsm/exporters/GLTFExporter', 'three/examples/jsm/loaders/DRACOLoader', 'three/examples/jsm/loaders/KTX2Loader', 'three/examples/jsm/exporters/USDZExporter', '@angular/material/list', '@angular/material/core', '@colijnit/configuratorapi/build/enum/deco-node-type.enum', 'jszip', '@colijnit/configuratorapi/build/enum/deco-node-kind.enum', '@angular/material/checkbox', '@angular/material/button', '@angular/forms', 'three/examples/jsm/utils/BufferGeometryUtils', 'three-mesh-bvh', 'three/src/constants', '@colijnit/corecomponents', '@angular/material/form-field', '@angular/material/select', '@angular/material/tooltip', '@colijnit/corecomponents_v12', '@angular/material/slider', '@angular/material/input', 'dat.gui', '@migenius/realityserver-client', '@angular/material/grid-list', '@angular/material/progress-spinner', '@angular/flex-layout/flex', '@angular/material/progress-bar', 'three/examples/jsm/geometries/DecalGeometry', 'fabric', '@angular/material/button-toggle', '@angular/material/snack-bar', '@angular/material/slide-toggle', '@angular/material/divider', 'browser-image-compression', '@angular/material/tabs', '@angular/flex-layout/extended', 'ngx-color/chrome', '@angular/router', 'delaunator', 'three/examples/jsm/helpers/VertexNormalsHelper', '@angular/cdk/portal', 'file-saver', 'ng2-pdf-viewer', 'html2canvas', 'three/examples/jsm/controls/OrbitControls', 'three/examples/jsm/loaders/FBXLoader', 'three/examples/jsm/loaders/TDSLoader', 'three/examples/jsm/loaders/STLLoader', '@angular/material/toolbar', '@angular/material/menu', '@angular/material/card', '@angular/material/sidenav', '@angular/material/badge', '@colijnit/articleapi/build/model/external-catalog-startup-info-request', '@colijnit/catalog', 'ngx-lightbox', '@angular/flex-layout', '@angular/cdk/drag-drop', 'jspdf', 'jspdf-autotable', '@angular/material/radio'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.homedecorator = {}), global.ng.core, global.rxjs, global.nodeType_enum, global.configuratorStatisticsEnvironment, global.options, global.dataServiceResponseData, global.frozenArticle, global.selection, global.answerPrice, global.article, global.decoNode, global.skipButtonInfo, global.configuratorapi, global.mainapi, global.articles, global.articleText_bo, global.businessObjectFactory, global.imageUtils, global.externalCatalogStartupInfo, global.catalogDefinition_bo, global.externalSource_bo, global.articleFullObject, global.articleCategory, global.articleFlat_bo, global.coDomainValue_bo, global.domainName_enum, global.internalParam_enum, global.stringUtils, global.imageUtils$1, global.ng.common.http, global.axios, global.applyPatch, global.THREE, global.TWEEN, global.PolygonTools, global.threeGpuPathtracer, global.ParallelMeshBVHWorker_js, global.TextGeometry, global.FontLoader, global.XRControllerModelFactory, global.hdecoPositioning_enum, global.OutlinePass, global.EffectComposer, global.RenderPass, global.ShaderPass, global.FXAAShader, global.OutputPass, global.GUI, global.n8ao, global.BlendShader, global.ng.platformBrowser, global.i2$1, global.ng.material.icon, global.ng.animations, global.ng.common, global.ng.material.dialog, global.RGBELoader, global.hdecoPlacement_enum, global.rxjs["internal/observable/fromEvent"], global.rxjs.operators, global.rxjs["internal/observable/of"], global.BufferGeometryUtils, global.OBJLoader, global.MTLLoader, global.GLTFLoader, global.GLTFExporter, global.DRACOLoader, global.KTX2Loader, global.USDZExporter, global.ng.material.list, global.ng.material.core, global.decoNodeType_enum, global.JSZip, global.decoNodeKind_enum, global.ng.material.checkbox, global.ng.material.button, global.ng.forms, global.BufferGeometryUtils$1, global.threeMeshBvh, global.constants, global.i4, global.ng.material.formField, global.ng.material.select, global.ng.material.tooltip, global.i4$1, global.ng.material.slider, global.ng.material.input, global.dat, global.realityserverClient, global.ng.material.gridList, global.ng.material.progressSpinner, global.ng.flexLayout.flex, global.ng.material.progressBar, global.DecalGeometry, global.fabric, global.ng.material.buttonToggle, global.ng.material.snackBar, global.ng.material.slideToggle, global.ng.material.divider, global.imageCompression, global.ng.material.tabs, global.ng.flexLayout.extended, global.i1$3, global.ng.router, global.Delaunator, global.VertexNormalsHelper, global.ng.cdk.portal, global.fileSaver, global.i6$2, global.html2canvas, global.OrbitControls, global.FBXLoader, global.TDSLoader, global.STLLoader, global.ng.material.toolbar, global.ng.material.menu, global.ng.material.card, global.ng.material.sidenav, global.ng.material.badge, global.externalCatalogStartupInfoRequest, global.i7$2, global.i1$5, global.ng.flexLayout, global.ng.cdk.dragDrop, global.jspdf, global.autoTable, global.ng.material.radio));
+})(this, (function (exports, i0, rxjs, nodeType_enum, configuratorStatisticsEnvironment, options, dataServiceResponseData, frozenArticle, selection, answerPrice, article, decoNode, skipButtonInfo, configuratorapi, mainapi, articles, articleText_bo, businessObjectFactory, imageUtils, externalCatalogStartupInfo, catalogDefinition_bo, externalSource_bo, articleFullObject, articleCategory, articleFlat_bo, coDomainValue_bo, domainName_enum, internalParam_enum, stringUtils, imageUtils$1, i2, axios, applyPatch, THREE, TWEEN, PolygonTools, threeGpuPathtracer, ParallelMeshBVHWorker_js, TextGeometry, FontLoader, XRControllerModelFactory, hdecoPositioning_enum, OutlinePass, EffectComposer, RenderPass, ShaderPass, FXAAShader, OutputPass, GUI, n8ao, BlendShader, i1, i2$1, i5$1, animations, i5, i1$1, RGBELoader, hdecoPlacement_enum, fromEvent, operators, of, BufferGeometryUtils, OBJLoader, MTLLoader, GLTFLoader, GLTFExporter, DRACOLoader, KTX2Loader, USDZExporter, i2$2, i3, decoNodeType_enum, JSZip, decoNodeKind_enum, i1$2, i3$1, i8, BufferGeometryUtils$1, threeMeshBvh, constants, i4, i7, i12, i10, i4$1, i7$1, i19, dat, realityserverClient, i3$2, i16, i3$3, i2$3, DecalGeometry, fabric, i8$1, i2$4, i10$1, i6, imageCompression, i1$4, i6$1, i1$3, i5$2, Delaunator, VertexNormalsHelper, i28, fileSaver, i6$2, html2canvas, OrbitControls, FBXLoader, TDSLoader, STLLoader, i19$1, i22, i23, i26, i30, externalCatalogStartupInfoRequest, i7$2, i1$5, flexLayout, i10$2, jspdf, autoTable, radio) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,7 +31,6 @@
   var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
   var TWEEN__namespace = /*#__PURE__*/_interopNamespace(TWEEN);
   var PolygonTools__namespace = /*#__PURE__*/_interopNamespace(PolygonTools);
-  var md5__namespace = /*#__PURE__*/_interopNamespace(md5);
   var GUI__default = /*#__PURE__*/_interopDefaultLegacy(GUI);
   var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
   var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
@@ -48,17 +47,17 @@
   var BufferGeometryUtils__namespace$1 = /*#__PURE__*/_interopNamespace(BufferGeometryUtils$1);
   var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
   var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
-  var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
+  var i12__namespace = /*#__PURE__*/_interopNamespace(i12);
   var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
   var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
   var i7__namespace$1 = /*#__PURE__*/_interopNamespace(i7$1);
   var i19__namespace = /*#__PURE__*/_interopNamespace(i19);
   var dat__namespace = /*#__PURE__*/_interopNamespace(dat);
   var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
-  var i15__namespace = /*#__PURE__*/_interopNamespace(i15);
+  var i16__namespace = /*#__PURE__*/_interopNamespace(i16);
   var i3__namespace$3 = /*#__PURE__*/_interopNamespace(i3$3);
   var i2__namespace$3 = /*#__PURE__*/_interopNamespace(i2$3);
-  var i7__namespace$2 = /*#__PURE__*/_interopNamespace(i7$2);
+  var i8__namespace$1 = /*#__PURE__*/_interopNamespace(i8$1);
   var i2__namespace$4 = /*#__PURE__*/_interopNamespace(i2$4);
   var i10__namespace$1 = /*#__PURE__*/_interopNamespace(i10$1);
   var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
@@ -71,13 +70,12 @@
   var i28__namespace = /*#__PURE__*/_interopNamespace(i28);
   var i6__namespace$2 = /*#__PURE__*/_interopNamespace(i6$2);
   var html2canvas__default = /*#__PURE__*/_interopDefaultLegacy(html2canvas);
-  var i9__namespace$1 = /*#__PURE__*/_interopNamespace(i9$1);
   var i19__namespace$1 = /*#__PURE__*/_interopNamespace(i19$1);
   var i22__namespace = /*#__PURE__*/_interopNamespace(i22);
   var i23__namespace = /*#__PURE__*/_interopNamespace(i23);
   var i26__namespace = /*#__PURE__*/_interopNamespace(i26);
   var i30__namespace = /*#__PURE__*/_interopNamespace(i30);
-  var i7__namespace$3 = /*#__PURE__*/_interopNamespace(i7$3);
+  var i7__namespace$2 = /*#__PURE__*/_interopNamespace(i7$2);
   var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
   var i10__namespace$2 = /*#__PURE__*/_interopNamespace(i10$2);
   var autoTable__default = /*#__PURE__*/_interopDefaultLegacy(autoTable);
@@ -211,7 +209,7 @@
       if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
           return Reflect.metadata(metadataKey, metadataValue);
   }
-  function __awaiter$1o(thisArg, _arguments, P, generator) {
+  function __awaiter$1n(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 {
@@ -536,7 +534,7 @@
       __decorate: __decorate,
       __param: __param,
       __metadata: __metadata,
-      __awaiter: __awaiter$1o,
+      __awaiter: __awaiter$1n,
       __generator: __generator,
       __createBinding: __createBinding,
       __exportStar: __exportStar,
@@ -628,6 +626,8 @@
       MessageType["StartCroppingPDF"] = "StartCroppingPDF";
       MessageType["BlenderRenderFileReady"] = "BlenderRenderFileReady";
       MessageType["UserModelUploaded"] = "UserModelUploaded";
+      MessageType["ChangeTexture"] = "ChangeTexture";
+      MessageType["RenderError"] = "RenderError";
   })(MessageType || (MessageType = {}));
 
   var Preset = /** @class */ (function () {
@@ -734,6 +734,7 @@
           this.objectMovingOrRotating = new rxjs.Subject();
           this.addToCart = new rxjs.Subject();
           this.addExternalSourceToCart = new rxjs.Subject();
+          this.dirty = new rxjs.Subject();
       }
       return HomedecoratorAppEventService;
   }());
@@ -746,7 +747,7 @@
                   }]
           }] });
 
-  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 {
@@ -822,7 +823,7 @@
           configurable: true
       });
       HomedecoratorConnectorAdapterService.prototype.initConnector = function (options, externalSource, forceReload, externalSourceId) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var renewConnector, _a, externalSourceData, externalMainApi, externalVersion, catalogSettings, externalConfigurator, loginResponse, externalArticleApi, externalConnector;
               var _this = this;
               return __generator(this, function (_b) {
@@ -851,6 +852,8 @@
                       case 3:
                           if (!!this.connectors.hasOwnProperty(externalSource)) return [3 /*break*/, 8];
                           if (!(externalSourceId !== null)) return [3 /*break*/, 5];
+                          // make sure to set this.externalSource = undefined to get the data of the HOST and not the previous external source
+                          this.externalSource = undefined;
                           return [4 /*yield*/, this.getExternalSource(externalSourceId)];
                       case 4:
                           externalSourceData = _b.sent();
@@ -899,7 +902,7 @@
           });
       };
       HomedecoratorConnectorAdapterService.prototype.logOut = function () {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               return __generator(this, function (_a) {
                   switch (_a.label) {
                       case 0: return [4 /*yield*/, this.connector.logOut()];
@@ -934,7 +937,7 @@
           return 2;
       };
       HomedecoratorConnectorAdapterService.prototype.getWebViewStartupInfo = function (request) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -953,7 +956,7 @@
           });
       };
       HomedecoratorConnectorAdapterService.prototype.getGoodIdFromArticleNr = function (sku) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -981,7 +984,7 @@
           return this.connector.copyInstance(instanceId, shouldSaveCurrentInstanceId);
       };
       HomedecoratorConnectorAdapterService.prototype.saveConfigurations = function () {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var _a, _b, _i, key, connector;
               return __generator(this, function (_c) {
                   switch (_c.label) {
@@ -1016,7 +1019,7 @@
       };
       // @returns The initial article
       HomedecoratorConnectorAdapterService.prototype.getArticle = function (sku, branch) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var goodId;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1032,7 +1035,7 @@
           });
       };
       HomedecoratorConnectorAdapterService.prototype.getArticleQuickSel = function (goodId, branch) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1057,7 +1060,7 @@
           return this.connector.getQuestionAndAnswers();
       };
       HomedecoratorConnectorAdapterService.prototype.getSelectionsAsync = function () {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1073,7 +1076,7 @@
           });
       };
       HomedecoratorConnectorAdapterService.prototype.getDecosAsync = function () {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1089,7 +1092,7 @@
           });
       };
       HomedecoratorConnectorAdapterService.prototype.getAnswerPrices = function () {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1107,13 +1110,14 @@
       HomedecoratorConnectorAdapterService.prototype.getJsonConfiguredArticles = function (goodId, goodType, quantity, externalSource, showLoader, instanceId, configuratorStatistics) {
           if (externalSource === void 0) { externalSource = false; }
           if (showLoader === void 0) { showLoader = true; }
-          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();
       // }
       HomedecoratorConnectorAdapterService.prototype.setInstanceToConfigure = function (id) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               return __generator(this, function (_a) {
                   if (id !== null) {
                       return [2 /*return*/, this.connector.setInstanceToConfigure(id)];
@@ -1126,7 +1130,7 @@
           });
       };
       HomedecoratorConnectorAdapterService.prototype.selectAnswer = function (answer, userInput) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               return __generator(this, function (_a) {
                   return [2 /*return*/, this.connector.selectAnswer(answer, false, userInput)];
               });
@@ -1148,7 +1152,7 @@
       HomedecoratorConnectorAdapterService.prototype.getImageForAnswerOrSelection = function (answerOrSelection, publication, thumbNail, showLoader) {
           if (thumbNail === void 0) { thumbNail = true; }
           if (showLoader === void 0) { showLoader = true; }
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1172,7 +1176,7 @@
           });
       };
       HomedecoratorConnectorAdapterService.prototype.getSkipButtonImageAndText = function (goodId) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1192,7 +1196,7 @@
           return this.getImageForAnswerOrSelection(answerOrSelection, 32);
       };
       HomedecoratorConnectorAdapterService.prototype.getAnswerInfo = function (answer) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1208,7 +1212,7 @@
           });
       };
       HomedecoratorConnectorAdapterService.prototype.getInternalParameter = function (parameter) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1227,7 +1231,7 @@
           });
       };
       HomedecoratorConnectorAdapterService.prototype.store3DModelCDN = function (filename, fileContents) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1237,6 +1241,9 @@
                           if (response && response.validationResult && response.validationResult.success) {
                               return [2 /*return*/, response.resultObject];
                           }
+                          else if (!response.validationResult.success) {
+                              return [2 /*return*/, Promise.reject(response.validationResult.messages[0].message)];
+                          }
                           else {
                               return [2 /*return*/, ''];
                           }
@@ -1246,13 +1253,17 @@
           });
       };
       HomedecoratorConnectorAdapterService.prototype.getCatalogDefinitionsList = function () {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
-                      case 0: return [4 /*yield*/, this.articleApi.getCatalogDefinitions().catch(function (e) {
-                              return new dataServiceResponseData.DataServiceResponseData();
-                          })];
+                      case 0:
+                          if (!this.articleApi) {
+                              return [2 /*return*/];
+                          }
+                          return [4 /*yield*/, this.articleApi.getCatalogDefinitions().catch(function (e) {
+                                  return new dataServiceResponseData.DataServiceResponseData();
+                              })];
                       case 1:
                           response = _a.sent();
                           if (response && response.validationResult && response.validationResult.success) {
@@ -1267,7 +1278,7 @@
           });
       };
       HomedecoratorConnectorAdapterService.prototype.getExternalSource = function (externalSourceId) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1295,7 +1306,7 @@
           });
       };
       HomedecoratorConnectorAdapterService.prototype.getArticleFullObject = function (goodId) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var result;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1314,7 +1325,7 @@
           });
       };
       HomedecoratorConnectorAdapterService.prototype.getArticleCategories = function (publicationCode) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var result;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1334,7 +1345,7 @@
       };
       //
       HomedecoratorConnectorAdapterService.prototype.getArticleFlat = function (sku) {
-          return __awaiter$1n(this, void 0, void 0, function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
               var result;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1352,6 +1363,25 @@
               });
           });
       };
+      HomedecoratorConnectorAdapterService.prototype.getModelPlacementOptions = function () {
+          return __awaiter$1m(this, void 0, void 0, function () {
+              var result;
+              return __generator(this, function (_a) {
+                  switch (_a.label) {
+                      case 0: return [4 /*yield*/, this.mainApi.getDomainCollection('NL', domainName_enum.DomainName.Dom3DPlacement)];
+                      case 1:
+                          result = _a.sent();
+                          if (result.validationResult && result.validationResult.success) {
+                              return [2 /*return*/, this._boFactory.makeBOArrayFromRawBackendDataArray(coDomainValue_bo.CoDomainValue, result.resultObjects)];
+                          }
+                          else {
+                              console.error(result.validationMessagesAsString);
+                          }
+                          return [2 /*return*/];
+                  }
+              });
+          });
+      };
       // 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});
@@ -1384,7 +1414,7 @@
                   }]
           }], 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 {
@@ -1408,10 +1438,10 @@
       }
       JsonUtilsService.prototype.readJsonFile = function (filePath, includeBaseUrl) {
           if (includeBaseUrl === void 0) { includeBaseUrl = true; }
-          return __awaiter$1m(this, void 0, void 0, function () {
+          return __awaiter$1l(this, void 0, void 0, function () {
               var _this = this;
               return __generator(this, function (_a) {
-                  return [2 /*return*/, new Promise(function (resolve, reject) { return __awaiter$1m(_this, void 0, void 0, function () {
+                  return [2 /*return*/, new Promise(function (resolve, reject) { return __awaiter$1l(_this, void 0, void 0, function () {
                           var response, empty_1, e_1;
                           return __generator(this, function (_a) {
                               switch (_a.label) {
@@ -1595,7 +1625,7 @@
       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 {
@@ -1641,7 +1671,7 @@
           return text ? text : key;
       };
       HomedecoratorDictionaryService.prototype.setDictionary = function (path, client, languageCode, additionalTranslationFile) {
-          return __awaiter$1l(this, void 0, void 0, function () {
+          return __awaiter$1k(this, void 0, void 0, function () {
               var dictionaryData, fileName, fileName;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1677,7 +1707,7 @@
           });
       };
       HomedecoratorDictionaryService.prototype._getDictionaryData = function (path) {
-          return __awaiter$1l(this, void 0, void 0, function () {
+          return __awaiter$1k(this, void 0, void 0, function () {
               return __generator(this, function (_a) {
                   switch (_a.label) {
                       case 0: return [4 /*yield*/, this._jsonUtilsService.readJsonFile(path, false)
@@ -1700,7 +1730,7 @@
                   }]
           }], 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 {
@@ -1786,7 +1816,7 @@
           }
       };
       HomedecoratorSettingsService.prototype.initializeSettings = function () {
-          return __awaiter$1k(this, void 0, void 0, function () {
+          return __awaiter$1j(this, void 0, void 0, function () {
               var jsonSettings;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1810,7 +1840,7 @@
           });
       };
       HomedecoratorSettingsService.prototype.initialize = function (settings) {
-          return __awaiter$1k(this, void 0, void 0, function () {
+          return __awaiter$1j(this, void 0, void 0, function () {
               var path, e_1, path, uploadSetting;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1865,7 +1895,7 @@
           });
       };
       HomedecoratorSettingsService.prototype._checkUrlParameters = function () {
-          return __awaiter$1k(this, void 0, void 0, function () {
+          return __awaiter$1j(this, void 0, void 0, function () {
               var urlParams, client, jsonSettings;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -1896,7 +1926,7 @@
                   }]
           }], 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 {
@@ -1940,7 +1970,7 @@
           configurable: true
       });
       SkipButtonInfoService.prototype.getSkipButtonImageAndText = function (goodId) {
-          return __awaiter$1j(this, void 0, void 0, function () {
+          return __awaiter$1i(this, void 0, void 0, function () {
               var skipButtonInfo, image;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -2031,7 +2061,7 @@
                   }]
           }] });
 
-  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 {
@@ -2138,7 +2168,7 @@
           configurable: true
       });
       PermanentStoreService.prototype.updateRegisterForm = function (furniture) {
-          return __awaiter$1i(this, void 0, void 0, function () {
+          return __awaiter$1h(this, void 0, void 0, function () {
               var collectiveSheetKey, collectiveSheetScriptURL, customSheetScriptURL, sheetKey, postUrl, hostUrl, payLoad;
               var _this = this;
               return __generator(this, function (_a) {
@@ -2270,7 +2300,7 @@
                   }]
           }], 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 {
@@ -2303,7 +2333,6 @@
           this.articleReceived = new rxjs.Subject();
           this.selectionsReceived = new rxjs.Subject();
           // public readonly decoNodesReceived: Subject<DecoNode[]> = new Subject<DecoNode[]>();
-          this.answerCountReceived = new rxjs.Subject();
           this.answersReceived = new rxjs.Subject();
           this.extraAnswerDataLoaded = new rxjs.Subject();
           // public readonly moodImagesReceived: Subject<{ answerOrSelection: Answer | Selection, imageData: string }> =
@@ -2311,12 +2340,11 @@
           this.selectionsAndDecosLinked = new rxjs.Subject();
           this.connectionReset = new rxjs.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.Options();
           this._subs = [];
@@ -2362,16 +2390,6 @@
           enumerable: false,
           configurable: true
       });
-      Object.defineProperty(HomedecoratorConnectorService.prototype, "activeAnswers", {
-          // public get activeQuestion(): Question {
-          //   return this._activeQuestion;
-          // }
-          get: function () {
-              return this._activeAnswers;
-          },
-          enumerable: false,
-          configurable: true
-      });
       Object.defineProperty(HomedecoratorConnectorService.prototype, "activeSelection", {
           get: function () {
               return this._activeSelection;
@@ -2410,14 +2428,14 @@
           this._imageCache.clear();
       };
       HomedecoratorConnectorService.prototype.getWebViewStartupInfo = function (request) {
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               return __generator(this, function (_a) {
                   return [2 /*return*/, this._connector.getWebViewStartupInfo(request)];
               });
           });
       };
       HomedecoratorConnectorService.prototype.initNodeInstance = function (sku) {
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var goodId, response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -2433,7 +2451,7 @@
           });
       };
       HomedecoratorConnectorService.prototype.changeConnection = function (instanceId, oldConnection, newConnection) {
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -2450,6 +2468,10 @@
           this.selectionsToDisplay.length = 0;
           this.decoNodes.length = 0;
       };
+      HomedecoratorConnectorService.prototype.emptyAnswersAndQuestion = function () {
+          this.activeAnswers.length = 0;
+          this.activeQuestion = undefined;
+      };
       /**
        * Used for obsolete furniture
        * @param selections
@@ -2468,7 +2490,7 @@
           this._decoNodes = decoNodes;
       };
       HomedecoratorConnectorService.prototype.initConnection = function (forceReload) {
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var settings, e_1;
               var _this = this;
               return __generator(this, function (_a) {
@@ -2516,7 +2538,7 @@
       //   return this._connector.getJsonMatchTableArticles();
       // }
       HomedecoratorConnectorService.prototype.setInstance = function (id) {
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -2538,7 +2560,7 @@
           return this._copyInstance(instanceId, false, result);
       };
       HomedecoratorConnectorService.prototype.saveConfigurations = function () {
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var success;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -2554,13 +2576,13 @@
           });
       };
       HomedecoratorConnectorService.prototype.getArticle = function (sku, branch) {
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var article;
               return __generator(this, function (_a) {
                   switch (_a.label) {
                       case 0:
-                          this.selections = [];
-                          this._decoNodes = [];
+                          this.emptySelections();
+                          this.emptyAnswersAndQuestion();
                           return [4 /*yield*/, this._connector.getArticle(sku, branch)
                                   .catch(function (e) {
                                   return Promise.reject(e);
@@ -2586,7 +2608,7 @@
       //   this._connector.getQuestionAndAnswers();
       // }
       HomedecoratorConnectorService.prototype.getQuestionAndAnswersAsync = function () {
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var questionAndAnswers;
               var _this = this;
               return __generator(this, function (_a) {
@@ -2595,13 +2617,24 @@
                       case 1:
                           questionAndAnswers = _a.sent();
                           questionAndAnswers.answers = questionAndAnswers.answers.filter(function (a) { return _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 [2 /*return*/, questionAndAnswers];
                   }
               });
           });
       };
       HomedecoratorConnectorService.prototype.getSelectionsAsync = function () {
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var selections;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -2621,7 +2654,7 @@
           });
       };
       HomedecoratorConnectorService.prototype.getDecosAsync = function () {
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var _a;
               return __generator(this, function (_b) {
                   switch (_b.label) {
@@ -2657,7 +2690,7 @@
           return this._connector.replaceSelection(selection);
       };
       HomedecoratorConnectorService.prototype.getAnswerInfo = function (answer) {
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var articleTexts;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -2672,7 +2705,7 @@
       };
       HomedecoratorConnectorService.prototype.extendWithAnswerTextAndImage = function (answer, showLoader) {
           if (showLoader === void 0) { showLoader = true; }
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var _this = this;
               return __generator(this, function (_a) {
                   if (answer.nodeId) {
@@ -2698,7 +2731,7 @@
       };
       HomedecoratorConnectorService.prototype.extendWithSelectionImage = function (selection, showLoader) {
           if (showLoader === void 0) { showLoader = true; }
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var _this = this;
               return __generator(this, function (_a) {
                   if (selection.nodeId) {
@@ -2822,7 +2855,7 @@
           });
       };
       HomedecoratorConnectorService.prototype.addToCart = function (goodId, goodType, quantity, instanceId, externalSource) {
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var json, statistics, frozenArticle$1;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -2850,18 +2883,11 @@
           });
       };
       HomedecoratorConnectorService.prototype.handleAnswersReceived = function (answers) {
-          return __awaiter$1h(this, void 0, void 0, function () {
-              return __generator(this, function (_a) {
-                  this._activeAnswers = answers;
-                  this.answerCountReceived.next(this._activeAnswers.length);
-                  this._preloadCachedImages(answers);
-                  this.answersReceived.next(answers);
-                  if (this._activeAnswers) {
-                      this._loadPricesOfActiveAnswers();
-                  }
-                  return [2 /*return*/];
-              });
-          });
+          this._preloadCachedImages(answers);
+          this.answersReceived.next(answers);
+          if (this.activeAnswers && this.activeAnswers.length > 0) {
+              this._loadPricesOfActiveAnswers();
+          }
       };
       HomedecoratorConnectorService.prototype._prepareSelectionsToDisplayImages = function () {
           var _this = this;
@@ -2966,7 +2992,7 @@
       };
       // POSTCONDITION: current activeAnswers have price values.
       HomedecoratorConnectorService.prototype._loadPricesOfActiveAnswers = function () {
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var answerPrices;
               var _this = this;
               return __generator(this, function (_a) {
@@ -2977,7 +3003,7 @@
                           if (answerPrices) {
                               // paste price data onto our current answer objects; AnswerPrice.selId corresponds to Answer.node
                               answerPrices.forEach(function (answerPrice) {
-                                  var answerMatch = _this._activeAnswers.find(function (ans) { return ans.node === answerPrice.selId; });
+                                  var answerMatch = _this.activeAnswers.find(function (ans) { return ans.node === answerPrice.selId; });
                                   if (answerMatch) {
                                       answerMatch.price = // temp fix for price until backend is ready
                                           answerMatch.nodeLevel === 0 && answerPrice.addRetailPrice && answerMatch.seqO === 1 ?
@@ -2993,7 +3019,7 @@
           });
       };
       HomedecoratorConnectorService.prototype._copyInstance = function (originalInstanceId, shouldSaveCurrentInstanceId, result) {
-          return __awaiter$1h(this, void 0, void 0, function () {
+          return __awaiter$1g(this, void 0, void 0, function () {
               var copyInstanceResponse, newInstanceId;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -3038,7 +3064,7 @@
                   }]
           }], 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 {
@@ -3095,7 +3121,7 @@
           window.history.replaceState(data, title, url);
       };
       AppStateService.prototype.undo = function () {
-          return __awaiter$1g(this, void 0, void 0, function () {
+          return __awaiter$1f(this, void 0, void 0, function () {
               return __generator(this, function (_a) {
                   switch (_a.label) {
                       case 0:
@@ -3109,7 +3135,7 @@
           });
       };
       AppStateService.prototype.redo = function () {
-          return __awaiter$1g(this, void 0, void 0, function () {
+          return __awaiter$1f(this, void 0, void 0, function () {
               return __generator(this, function (_a) {
                   switch (_a.label) {
                       case 0:
@@ -3387,7 +3413,7 @@
                   }]
           }], 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 {
@@ -3432,7 +3458,7 @@
           }
       };
       LocalStorageService.prototype.getRecoverySaveState = function () {
-          return __awaiter$1f(this, void 0, void 0, function () {
+          return __awaiter$1e(this, void 0, void 0, function () {
               var indexedDBSave, localStorageSave;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -3455,7 +3481,7 @@
           });
       };
       LocalStorageService.prototype.getIndexedDBSaveState = function () {
-          return __awaiter$1f(this, void 0, void 0, function () {
+          return __awaiter$1e(this, void 0, void 0, function () {
               var getMessage;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -3468,7 +3494,7 @@
           });
       };
       LocalStorageService.prototype.writeIndexedDBSaveState = function (saveState) {
-          return __awaiter$1f(this, void 0, void 0, function () {
+          return __awaiter$1e(this, void 0, void 0, function () {
               var saveMessage;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -3485,7 +3511,7 @@
           });
       };
       LocalStorageService.prototype.checkForLocalSave = function () {
-          return __awaiter$1f(this, void 0, void 0, function () {
+          return __awaiter$1e(this, void 0, void 0, function () {
               var indexedDBSave;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -3517,7 +3543,7 @@
                   }]
           }], 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 {
@@ -3608,7 +3634,7 @@
           }
       };
       FileUtils.SaveGLBFile = function (data, assetPath) {
-          return __awaiter$1e(this, void 0, void 0, function () {
+          return __awaiter$1d(this, void 0, void 0, function () {
               return __generator(this, function (_a) {
                   return [2 /*return*/, new Promise(function (resolve, reject) {
                           var xhr = new XMLHttpRequest();
@@ -3767,7 +3793,7 @@
   }());
   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 {
@@ -3791,7 +3817,7 @@
           this._settingsService = _settingsService;
       }
       FileService.prototype.getTotalDownloadSize = function (files) {
-          return __awaiter$1d(this, void 0, void 0, function () {
+          return __awaiter$1c(this, void 0, void 0, function () {
               var url, data, response;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -3827,7 +3853,7 @@
                   }]
           }], 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 {
@@ -3864,7 +3890,7 @@
           configurable: true
       });
       ProgressService.prototype.prepareDownloads = function (furniture) {
-          return __awaiter$1c(this, void 0, void 0, function () {
+          return __awaiter$1b(this, void 0, void 0, function () {
               var files, i, model, realUrl, url, _a;
               return __generator(this, function (_b) {
                   switch (_b.label) {
@@ -4785,7 +4811,7 @@
   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 {
@@ -4994,7 +5020,7 @@
           scope.pan(new THREE__namespace.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 () {
               var changing, tween;
               var _this = this;
               return __generator(this, function (_a) {
@@ -5010,7 +5036,7 @@
           });
       };
       this.animateCameraMovement = function (endPosition, endTarget, endDuration) {
-          return __awaiter$1b(this, void 0, void 0, function () {
+          return __awaiter$1a(this, void 0, void 0, function () {
               var duration, position, target, targetTween, positionTween, targetPromise, positionPromise;
               var _this = this;
               return __generator(this, function (_a) {
@@ -5086,7 +5112,7 @@
           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 () {
               var position, distance, tween;
               return __generator(this, function (_a) {
                   position = scope.target.clone();
@@ -5277,7 +5303,7 @@
           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 () {
               var mousePos;
               return __generator(this, function (_a) {
                   if (!isMouseEventAllowed(event)) {
@@ -5643,7 +5669,7 @@
                   }]
           }] });
 
-  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 {
@@ -5854,7 +5880,7 @@
           this.cameraMovementChanged.next();
       };
       CameraService.prototype.moveCameraToFitObject = function (object, offset) {
-          return __awaiter$1a(this, void 0, void 0, function () {
+          return __awaiter$19(this, void 0, void 0, function () {
               var boundingBox, center, size, maxDim, fov, cameraZ, newPosition, tween;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -5924,7 +5950,7 @@
           return target.clone().add(new THREE.Vector3(0, targetDistance, targetDistance));
       };
       CameraService.prototype._placeWalkThroughCameraInCorner = function (viewCorner) {
-          return __awaiter$1a(this, void 0, void 0, function () {
+          return __awaiter$19(this, void 0, void 0, function () {
               var center2d, center, corner2d, corner, distance, diff, lerpAlpha, nearCorner, tween;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -6115,7 +6141,7 @@
                   }]
           }], 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 {
@@ -6141,7 +6167,7 @@
           this.messages = [];
       }
       MessageBoardService.prototype.init = function (scene) {
-          return __awaiter$19(this, void 0, void 0, function () {
+          return __awaiter$18(this, void 0, void 0, function () {
               return __generator(this, function (_a) {
                   this.scene = scene;
                   if (this._settingsService.settings.options.xrDebug) {
@@ -6183,7 +6209,7 @@
                   }]
           }], 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 {
@@ -6223,7 +6249,7 @@
           this._subs.forEach(function (s) { return s.unsubscribe(); });
       };
       XrService.prototype.init = function (renderer, scene, camera) {
-          return __awaiter$18(this, void 0, void 0, function () {
+          return __awaiter$17(this, void 0, void 0, function () {
               var displays;
               var _this = this;
               return __generator(this, function (_a) {
@@ -6508,7 +6534,7 @@
                   }]
           }], 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 {
@@ -6574,7 +6600,7 @@
        * @param {XRCoordinateSystem} frameOfRef
        */
       Reticle.prototype.update = function (session, camera, frameOfRef) {
-          return __awaiter$17(this, void 0, void 0, function () {
+          return __awaiter$16(this, void 0, void 0, function () {
               var ray, origin, direction, hits, hit, hitMatrix;
               return __generator(this, function (_a) {
                   this._rayCaster = this._rayCaster || new THREE.Raycaster();
@@ -7196,7 +7222,7 @@
       return 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 {
@@ -7278,7 +7304,7 @@
           this._outlinePass.selectedObjects = [item];
       };
       OutlineService.prototype.showOutline = function (item) {
-          return __awaiter$16(this, void 0, void 0, function () {
+          return __awaiter$15(this, void 0, void 0, function () {
               var _this = this;
               return __generator(this, function (_a) {
                   // if (item && (item instanceof FloorPin || item instanceof WallPin)) {
@@ -7301,7 +7327,7 @@
           });
       };
       OutlineService.prototype.hideOutline = function () {
-          return __awaiter$16(this, void 0, void 0, function () {
+          return __awaiter$15(this, void 0, void 0, function () {
               return __generator(this, function (_a) {
                   if (this._outlinePass.selectedObjects.length > 0) {
                       // await this._animatedOutlineStrength(300, 0);
@@ -8198,7 +8224,7 @@
       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 {
@@ -8267,7 +8293,7 @@
       };
       // use canvas to create rotated textures
       MaterialUtils.RotatedCanvasTexture = function (texture, textureURL, dimensions, adjustScale, repeatX, repeatY) {
-          return __awaiter$15(this, void 0, void 0, function () {
+          return __awaiter$14(this, void 0, void 0, function () {
               var img;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -8280,7 +8306,7 @@
           });
       };
       MaterialUtils.CustomTileMapTexture = function (texture, dimensions) {
-          return __awaiter$15(this, void 0, void 0, function () {
+          return __awaiter$14(this, void 0, void 0, function () {
               var img, ratio, tileSizeMax, newTileSize, t, image;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -8323,7 +8349,7 @@
       };
       // use canvas to create texture from photo
       MaterialUtils.FromImage = function (texture /*, dimensions: THREE.Vector2*/) {
-          return __awaiter$15(this, void 0, void 0, function () {
+          return __awaiter$14(this, void 0, void 0, function () {
               var img, canvas, threeTexture;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -8342,7 +8368,7 @@
           });
       };
       MaterialUtils.ReadAndResizePhotoAsDataURL = function (file) {
-          return __awaiter$15(this, void 0, void 0, function () {
+          return __awaiter$14(this, void 0, void 0, function () {
               var imageSrc;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -8362,7 +8388,8 @@
           var srcKey = src;
           var type = 'image/jpeg';
           if (isDataUri) {
-              srcKey = md5__namespace(src);
+              // srcKey = md5(src);
+              srcKey = src;
               if (src.indexOf('image/png') > -1) {
                   type = 'image/png';
               }
@@ -8409,7 +8436,7 @@
           });
       };
       MaterialUtils.GetMaterialMaps = function (material, texture, dimensions) {
-          return __awaiter$15(this, void 0, void 0, function () {
+          return __awaiter$14(this, void 0, void 0, function () {
               var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
               return __generator(this, function (_s) {
                   switch (_s.label) {
@@ -8524,7 +8551,7 @@
           });
       };
       MaterialUtils.loadMaterializeMaps = function (material, texture) {
-          return __awaiter$15(this, void 0, void 0, function () {
+          return __awaiter$14(this, void 0, void 0, function () {
               var _a, _b, _c, _d, _e;
               return __generator(this, function (_f) {
                   switch (_f.label) {
@@ -8604,7 +8631,7 @@
       };
       // use canvas to create texture from flipped photo
       MaterialUtils.FromFlippedImage = function (texture, dimensions) {
-          return __awaiter$15(this, void 0, void 0, function () {
+          return __awaiter$14(this, void 0, void 0, function () {
               var origImg, canvas, threeTexture;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -8642,7 +8669,7 @@
       };
       // use canvas to create custom textures
       MaterialUtils.CustomTileTexture = function (texture) {
-          return __awaiter$15(this, void 0, void 0, function () {
+          return __awaiter$14(this, void 0, void 0, function () {
               var img, canvas;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -8658,7 +8685,7 @@
           });
       };
       MaterialUtils.RotatedImageTexture = function (texture, textureURL) {
-          return __awaiter$15(this, void 0, void 0, function () {
+          return __awaiter$14(this, void 0, void 0, function () {
               var img, canvas;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -8674,7 +8701,7 @@
           });
       };
       MaterialUtils.CreateTileDataUrl = function (img, texture) {
-          return __awaiter$15(this, void 0, void 0, function () {
+          return __awaiter$14(this, void 0, void 0, function () {
               var canvas, tileUnit, tileCtx;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -8697,7 +8724,7 @@
           });
       };
       MaterialUtils.CreateTileMap = function (img, texture, oDimensions, adjustScale, repeatX, repeatY) {
-          return __awaiter$15(this, void 0, void 0, function () {
+          return __awaiter$14(this, void 0, void 0, function () {
               var dimensions, canvas, rotation, imgSize, ctx, bbHeight, bbWidth, i, j, threeTexture;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -8785,7 +8812,7 @@
   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 {
@@ -8840,7 +8867,7 @@
           Utils$1.DisposeObject(this._pointRepresentation);
       };
       ArService.prototype.resetPlaneDetection = function () {
-          return __awaiter$14(this, void 0, void 0, function () {
+          return __awaiter$13(this, void 0, void 0, function () {
               var _this = this;
               return __generator(this, function (_a) {
                   switch (_a.label) {
@@ -8868,7 +8895,7 @@
           this._session.end();
       };
       ArService.prototype.arIOSSupported = function () {
-          return __awaiter$14(this, void 0, void 0, function () {
+          return __awaiter$13(this, void 0, void 0, function () {
               var isIOS, anchor;
               return __generator(this, function (_a) {
                   isIOS = /iPad|iPhone|iPod/.test(navigator.platform) ||
@@ -8885,7 +8912,7 @@
           });
       };
       ArService.prototype.arSupported = function () {
-          return __awaiter$14(this, void 0, void 0, function () {
+          return __awaiter$13(this, void 0, void 0, function () {
               return __generator(this, function (_a) {
                   switch (_a.label) {
                       case 0:
@@ -9057,6 +9084,7 @@
           this._lightProbe.addEventListener('reflectionchange', function () {
               var rawData = _this._glBinding.getReflectionCubeMap(_this._lightProbe);
               var texProps = _this._renderer.properties.get(_this._cubeMapTexture);
+              // @ts-ignore
               texProps.__webglTexture = rawData;
           });
       };
@@ -9257,7 +9285,7 @@
           }
       };
       ArService.prototype._createPlaneMaterial = function () {
-          return __awaiter$14(this, void 0, void 0, function () {
+          return __awaiter$13(this, void 0, void 0, function () {
               var pm, _a;
               return __generator(this, function (_b) {
                   switch (_b.label) {
@@ -9276,7 +9304,7 @@
           });
       };
       ArService.prototype._onSessionStarted = function (session) {
-          return __awaiter$14(this, void 0, void 0, function () {
+          return __awaiter$13(this, void 0, void 0, function () {
               var domOverlay;
               var _this = this;
               return __generator(this, function (_a) {
@@ -9410,7 +9438,7 @@
           }
       };
       ArService.prototype._checkIfHoldTouchEvent = function ($event) {
-          return __awaiter$14(this, void 0, void 0, function () {
+          return __awaiter$13(this, void 0, void 0, function () {
               var _this = this;
               return __generator(this, function (_a) {
                   setTimeout(function () {
@@ -9771,37 +9799,87 @@
           this._renderer = renderer;
           this._scene = scene;
           this._camera = camera;
-          this._renderTarget = new THREE.WebGLRenderTarget(width, height, {
-              minFilter: THREE.NearestFilter,
-              magFilter: THREE.NearestFilter,
-              format: THREE.RGBAFormat,
-              colorSpace: THREE.SRGBColorSpace
-          });
-          this._renderTarget.samples = 4;
-          this._renderTarget.depthTexture = new THREE.DepthTexture(width, height, THREE.UnsignedIntType);
-          this._renderTarget.depthTexture.format = THREE.DepthFormat;
-          this._composer = new EffectComposer.EffectComposer(this._renderer, this._renderTarget);
-          this._n8aoPass = new n8ao.N8AOPass(scene, camera, width, height);
-          this._n8aoPass.configuration.gammaCorrection = false;
-          this._n8aoPass.debugMode = true;
+          this._width = width;
+          this._height = height;
+          this._postProcessingGui = new GUI__default["default"]();
+          this._postProcessingGui.hide();
+          this._renderPass = new RenderPass.RenderPass(this._scene, this._camera);
+          this._outputPass = new OutputPass.OutputPass();
+          this._initAoComposer();
+          this._initAaComposer();
+          this._initBlendComposer();
+      };
+      PostProcessingService.prototype._initAaComposer = function () {
+          this._aaRenderTarget = new THREE.WebGLRenderTarget(this._width, this._height, {
+              samples: 4,
+              type: THREE.HalfFloatType /*,
+              minFilter: NearestFilter,
+              magFilter: NearestFilter,
+              format: RGBAFormat,
+              colorSpace: SRGBColorSpace*/
+          });
+          this._aaComposer = new EffectComposer.EffectComposer(this._renderer, this._aaRenderTarget);
+          this._aaComposer.renderToScreen = false;
+          var fxaaPass = new ShaderPass.ShaderPass(FXAAShader.FXAAShader);
+          var 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();
+      };
+      PostProcessingService.prototype._initAoComposer = function () {
+          this._aoRenderTarget = new THREE.WebGLRenderTarget(this._width, this._height, {
+              samples: 4,
+              type: THREE.HalfFloatType /*,
+              minFilter: NearestFilter,
+              magFilter: NearestFilter,
+              format: RGBAFormat,
+              colorSpace: SRGBColorSpace*/
+          });
+          this._aoComposer = new EffectComposer.EffectComposer(this._renderer, this._aoRenderTarget);
+          this._aoComposer.renderToScreen = false;
+          this._n8aoPass = new n8ao.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.OutputPass();
-          this._taaRenderPass = new TAARenderPass.TAARenderPass(this._scene, this._camera, 0x000000, 0);
-          this._taaRenderPass.unbiased = false;
-          this._taaRenderPass.sampleLevel = 4;
-          this._renderPass = new RenderPass.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();
+      };
+      PostProcessingService.prototype._initBlendComposer = function () {
+          this._blendShader = new ShaderPass.ShaderPass(BlendShader.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.EffectComposer(this._renderer);
+          this._blendComposer.renderToScreen = true;
+          this._blendComposer.addPass(this._renderPass);
+          this._blendComposer.addPass(this._blendShader);
       };
       PostProcessingService.prototype._updatePass = function () {
           this._n8aoPass.configuration.aoRadius = this._effectController.aoRadius;
@@ -9823,10 +9901,8 @@
       };
       PostProcessingService.prototype._createGuiTaaPass = function () {
           var _this = this;
-          this._taaPassGui = new GUI__default["default"]();
-          this._taaPassGui.hide();
           var param = { TAAEnabled: '1', TAASampleLevel: 0 };
-          this._taaPassGui.add(param, 'TAAEnabled', {
+          this._postProcessingGui.add(param, 'TAAEnabled', {
               'Disabled': '0',
               'Enabled': '1'
           }).onFinishChange(function () {
@@ -9835,7 +9911,7 @@
               }
               _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,
@@ -9848,13 +9924,16 @@
               }
               _this.render();
           });
-          this._taaPassGui.open();
       };
       PostProcessingService.prototype.setSize = function (width, height) {
-          this._composer.setSize(width, height);
+          this._aoComposer.setSize(width, height);
+          this._aaComposer.setSize(width, height);
+          this._blendComposer.setSize(width, height);
       };
       PostProcessingService.prototype.render = function () {
-          this._composer.render();
+          this._aaComposer.render();
+          this._aoComposer.render();
+          this._blendComposer.render();
       };
       PostProcessingService.prototype.showGui = function () {
           this._postProcessingGui.show(true);
@@ -9867,8 +9946,16 @@
       };
       PostProcessingService.prototype._createGui = function () {
           var _this = this;
-          this._postProcessingGui = new GUI__default["default"]();
-          this._postProcessingGui.hide();
+          var param = { Enabled: '1' };
+          this._postProcessingGui.add(param, 'Enabled', {
+              'Disabled': '0',
+              'Enabled': '1'
+          }).onFinishChange(function () {
+              if (_this._aoComposer) {
+                  _this._aoComposer.renderToScreen = (param.Enabled === '1');
+              }
+              _this.render();
+          });
           this._postProcessingGui.add(this._effectController, 'aoSamples', 1.0, 64.0, 1.0).onChange(function () { return _this._updatePass(); });
           this._postProcessingGui.add(this._effectController, 'denoiseSamples', 1.0, 64.0, 1.0).onChange(function () { return _this._updatePass(); });
           this._postProcessingGui.add(this._effectController, 'denoiseRadius', 0.0, 24.0, 0.01).onChange(function () { return _this._updatePass(); });
@@ -9916,25 +10003,6 @@
                   }]
           }], 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());
-      });
-  };
   var SsrService = /** @class */ (function () {
       function SsrService(_settingsService) {
           this._settingsService = _settingsService;
@@ -9957,70 +10025,6 @@
       SsrService.prototype.ngOnDestroy = function () {
           this._subs.forEach(function (s) { return s.unsubscribe(); });
       };
-      SsrService.prototype.init = function () {
-          var _this = this;
-          var socket = new WebSocket('ws://localhost:7005');
-          var peerConnection = new RTCPeerConnection({
-              iceServers: [{ urls: 'stun:stun.1.google.com:19302' }]
-          });
-          peerConnection.onicecandidate = function (event) {
-              if (event.candidate) {
-                  socket.send(JSON.stringify({ candidate: event.candidate }));
-              }
-          };
-          peerConnection.ontrack = function (event) {
-              var remoteVideo = document.getElementById('remoteVideo');
-              // @ts-ignore
-              if (remoteVideo.srcObject !== event.streams[0]) {
-                  // @ts-ignore
-                  remoteVideo.srcObject = event.streams[0];
-              }
-          };
-          socket.onmessage = function (message) { return __awaiter$13(_this, void 0, void 0, function () {
-              var text, data, answer, e_1, e_2;
-              return __generator(this, function (_a) {
-                  switch (_a.label) {
-                      case 0:
-                          _a.trys.push([0, 10, , 11]);
-                          return [4 /*yield*/, message.data.text()];
-                      case 1:
-                          text = _a.sent();
-                          data = JSON.parse(text);
-                          if (!data.offer) return [3 /*break*/, 5];
-                          return [4 /*yield*/, peerConnection.setRemoteDescription(new RTCSessionDescription(data.offer))];
-                      case 2:
-                          _a.sent();
-                          return [4 /*yield*/, peerConnection.createAnswer()];
-                      case 3:
-                          answer = _a.sent();
-                          return [4 /*yield*/, peerConnection.setLocalDescription(answer)];
-                      case 4:
-                          _a.sent();
-                          socket.send(JSON.stringify({ answer: peerConnection.localDescription }));
-                          return [3 /*break*/, 9];
-                      case 5:
-                          if (!data.candidate) return [3 /*break*/, 9];
-                          _a.label = 6;
-                      case 6:
-                          _a.trys.push([6, 8, , 9]);
-                          return [4 /*yield*/, peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate))];
-                      case 7:
-                          _a.sent();
-                          return [3 /*break*/, 9];
-                      case 8:
-                          e_1 = _a.sent();
-                          console.error('Error adding ICE-Candidate', e_1);
-                          return [3 /*break*/, 9];
-                      case 9: return [3 /*break*/, 11];
-                      case 10:
-                          e_2 = _a.sent();
-                          console.error(e_2);
-                          return [3 /*break*/, 11];
-                      case 11: return [2 /*return*/];
-                  }
-              });
-          }); };
-      };
       SsrService.prototype.sceneChanged = function (scene) {
           if (this._websocket.readyState === WebSocket.OPEN) {
               var sceneClone = scene.clone(true);
@@ -10295,7 +10299,7 @@
               var canvasElement, context;
               return __generator(this, function (_a) {
                   canvasElement = document.createElement('canvas');
-                  context = canvasElement.getContext('webgl2', { antialias: true });
+                  context = canvasElement.getContext('webgl2');
                   this.webGL2Available = context !== undefined;
                   // this.renderer = new WebGPURenderer({ alpha: true, antialias: true });
                   // this.renderer =
@@ -10309,15 +10313,21 @@
                   //     logarithmicDepthBuffer: true*/
                   //   });
                   // this.renderer = new WebGLRenderer({alpha: true, antialias: false, preserveDrawingBuffer: true, premultipliedAlpha: true});
-                  this.renderer = new THREE.WebGLRenderer( /*{
-                    precision: 'highp',
-                    powerPreference: 'high-performance',
-                    antialias: true,
-                    stencil: false,
-                    depth: false
-                  }*/);
+                  this.renderer = new THREE.WebGLRenderer({
+                  /*
+                        precision: 'highp',
+                        powerPreference: 'high-performance',
+                  */
+                  /*
+                        antialias: true,
+                  */
+                  /*
+                        stencil: false,
+                        depth: false
+                  */
+                  });
                   this.renderer.outputColorSpace = THREE.SRGBColorSpace;
-                  this.renderer.autoClear = false;
+                  this.renderer.autoClear = true;
                   this.renderer.setPixelRatio(window.devicePixelRatio);
                   this.renderer.toneMapping = THREE.NoToneMapping; // ACESFilmicToneMapping; // LinearToneMapping;
                   this.renderer.shadowMap.enabled = true;
@@ -10382,7 +10392,7 @@
                       }
                       else {
                           this._postProcessing.render();
-                          this._outlineService.render();
+                          // this._outlineService.render();
                       }
                       // this.renderer.render(this.scene, this._cameraService.camera);
                   }
@@ -10477,7 +10487,7 @@
   // }
   //
   var PresetsService = /** @class */ (function () {
-      function PresetsService(_appStateService, _permanentStoreService, _jsonUtils, _messageService, _settingsService, _configurationService, _storageService, _progressService, _sceneService) {
+      function PresetsService(_appStateService, _permanentStoreService, _jsonUtils, _messageService, _settingsService, _configurationService, _storageService, _progressService, _sceneService, _eventService) {
           var _this = this;
           this._appStateService = _appStateService;
           this._permanentStoreService = _permanentStoreService;
@@ -10488,6 +10498,7 @@
           this._storageService = _storageService;
           this._progressService = _progressService;
           this._sceneService = _sceneService;
+          this._eventService = _eventService;
           // public static presetsPath = '/assets/presets';
           this.isLoading = false;
           this.beforeLoad = new rxjs.Subject();
@@ -10552,6 +10563,9 @@
                           _b.label = 2;
                       case 2:
                           modelObj = JSON.parse(preset.model);
+                          if (modelObj.floorplan && modelObj.floorplan.corners && Object.keys(modelObj.floorplan.corners).length > 0) {
+                              this._eventService.dirty.next(true);
+                          }
                           return [2 /*return*/, JSON.stringify(!modelObj.hasOwnProperty('needRescale') ? this._reScaleModel(modelObj) : modelObj)];
                   }
               });
@@ -10559,7 +10573,10 @@
       };
       PresetsService.prototype._loadSavedRoomFromCloud = function (code) {
           var _this = this;
-          this._loadRoomPlan(function () { return new Promise(function (resolve) { return _this._permanentStoreService.load(code).subscribe(function (json) { return resolve(JSON.stringify(json)); }); }); });
+          this._loadRoomPlan(function () { return new Promise(function (resolve) {
+              _this._eventService.dirty.next(true);
+              _this._permanentStoreService.load(code).subscribe(function (json) { return resolve(JSON.stringify(json)); });
+          }); });
       };
       PresetsService.prototype._clear = function () {
           return __awaiter$11(this, void 0, void 0, function () {
@@ -10797,14 +10814,14 @@
       };
       return PresetsService;
   }());
-  PresetsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PresetsService, deps: [{ token: AppStateService }, { token: PermanentStoreService }, { token: JsonUtilsService }, { token: MessageBusService }, { token: HomedecoratorSettingsService }, { token: ConfigurationService }, { token: LocalStorageService }, { token: ProgressService }, { token: SceneService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  PresetsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, 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__namespace.ɵɵFactoryTarget.Injectable });
   PresetsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PresetsService, providedIn: 'root' });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PresetsService, decorators: [{
               type: i0.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) {
@@ -14309,8 +14326,8 @@
   /* tslint:disable */
   var VersionInfo = {
       application: "Homedecorator",
-      appVersion: "255.1.2",
-      revision: "111849"
+      appVersion: "255.1.4",
+      revision: "112028"
   };
   /* tslint:enable */
 
@@ -15026,7 +15043,7 @@
           });
           var origScale = this.metadata.scale ? new THREE.Vector3(1, 1, 1).divide(this.metadata.scale) : new THREE.Vector3(1, 1, 1);
           var metadata = Object.assign({}, this.metadata);
-          metadata.skin = this.skin;
+          metadata.skin = Object.assign({}, this.skin);
           var copy = new CustomShapeFloorItem(metadata, new THREE.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();
@@ -15091,7 +15108,7 @@
           });
           var origScale = this.metadata.scale ? new THREE.Vector3(1, 1, 1).divide(this.metadata.scale) : new THREE.Vector3(1, 1, 1);
           var metadata = Object.assign({}, this.metadata);
-          metadata.skin = this.skin;
+          metadata.skin = Object.assign({}, this.skin);
           var copy = new CustomCylinderFloorItem(metadata, new THREE.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();
@@ -15577,12 +15594,13 @@
       });
   };
   var FloorService = /** @class */ (function () {
-      function FloorService(_sceneService, _outlineService, _itemService, _settingsService) {
+      function FloorService(_sceneService, _outlineService, _itemService, _settingsService, _messageService) {
           var _this = this;
           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(function (initialized) {
@@ -15636,6 +15654,8 @@
                           else {
                               this._updateFloorMaterial(this._floors[0], floorMaterial, texture);
                           }
+                          // emit new texture for appearance-section
+                          this._messageService.emit(MessageType.ChangeTexture, texture);
                           return [2 /*return*/];
                   }
               });
@@ -15813,14 +15833,14 @@
       };
       return FloorService;
   }());
-  FloorService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FloorService, deps: [{ token: SceneService }, { token: OutlineService }, { token: ItemService }, { token: HomedecoratorSettingsService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  FloorService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FloorService, deps: [{ token: SceneService }, { token: OutlineService }, { token: ItemService }, { token: HomedecoratorSettingsService }, { token: MessageBusService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
   FloorService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FloorService, providedIn: 'root' });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FloorService, decorators: [{
               type: i0.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 }]; } });
 
   var CeilingService = /** @class */ (function () {
       function CeilingService(_sceneService, _configurationService) {
@@ -15968,7 +15988,7 @@
           this._subs = [];
           this._subs.push(this._appService.floorTexturesLoaded.subscribe(function (floors) {
               if (floors) {
-                  _this._defaultFloorTexture = floors.find(function (f) { return f.default === true; });
+                  _this._defaultFloorTexture = floors.find(function (f) { return f.default === true && !f.useStandalone; });
               }
           }), this._cameraService.cameraMovementChanged.subscribe(function () { return _this._updateEdgeVisibility(_this._cameraService.camera.position); }), this._presetService.afterLoad.subscribe(function () { return _this._updateEdgeVisibility(_this._cameraService.camera.position); }), this._viewModeService.viewModeChanged.subscribe(function (mode) { return __awaiter$W(_this, void 0, void 0, function () {
               return __generator(this, function (_a) {
@@ -16218,6 +16238,9 @@
               }
           });
       };
+      RoomService.prototype.resetAllRooms = function () {
+          this.rooms = [];
+      };
       RoomService.prototype._showHideWalls = function (show) {
           this.walls.forEach(function (w) { return w.showHideWall(show); });
           this._sceneService.needsRender = true;
@@ -17463,7 +17486,7 @@
           });
           var origScale = this.metadata.scale ? new THREE.Vector3(1, 1, 1).divide(this.metadata.scale) : new THREE.Vector3(1, 1, 1);
           var metadata = Object.assign({}, this.metadata);
-          metadata.skin = this.skin;
+          metadata.skin = Object.assign({}, this.skin);
           var copy = new CustomShapeWallItem(metadata, new THREE.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();
@@ -17522,7 +17545,7 @@
           });
           var origScale = this.metadata.scale ? new THREE.Vector3(1, 1, 1).divide(this.metadata.scale) : new THREE.Vector3(1, 1, 1);
           var metadata = Object.assign({}, this.metadata);
-          metadata.skin = this.skin;
+          metadata.skin = Object.assign({}, this.skin);
           var copy = new CustomCylinderWallItem(metadata, new THREE.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();
@@ -19631,7 +19654,7 @@
                       _this.messageService.emit(MessageType.ShowLoadingIndicator, { title: 'Rendering...' });
                       _this.requestRender(filename, camera, standalone, renderParameters);
                   }).catch(function (error) {
-                      console.log(error);
+                      _this.messageService.emit(MessageType.RenderError, { title: 'Upload error', message: error.message });
                   });
                   return [2 /*return*/];
               });
@@ -19675,8 +19698,8 @@
                                           return dataURL;
                                       };
                                   }
-                              }).catch(function (err) {
-                                  console.log(err);
+                              }).catch(function (error) {
+                                  _this.messageService.emit(MessageType.RenderError, { title: 'Render error', message: error.message });
                               })];
                       case 1:
                           _a.sent();
@@ -24943,7 +24966,7 @@
               edge: 0,
               total: 0,
           };
-          console.log(floorMesh.position);
+          // console.log(floorMesh.position);
           var _b = this._checkIntersection2(floorMesh, floorPattern, geometry), floorHits = _b.floorHits, edgeHits = _b.edgeHits;
           try {
               for (var floorHits_1 = __values(floorHits), floorHits_1_1 = floorHits_1.next(); !floorHits_1_1.done; floorHits_1_1 = floorHits_1.next()) {
@@ -25136,7 +25159,6 @@
           this.arPlacementUpdate = new rxjs.Subject();
           this.showElementToolbar = false;
           this.isMouseOverObject = false;
-          this.activeAnswers = [];
           this.standAloneFirstBuildReady = false;
           this._useNodeIdToLink = true;
           this._standAlone = false;
@@ -25370,7 +25392,7 @@
           if (looseOriginalConfiguration === void 0) { looseOriginalConfiguration = true; }
           if (firstBuild === void 0) { firstBuild = false; }
           return __awaiter$G(this, void 0, void 0, function () {
-              var originalInstanceId_1, _a, _b, questionAndAnswers;
+              var originalInstanceId_1, _a, _b;
               return __generator(this, function (_c) {
                   switch (_c.label) {
                       case 0:
@@ -25413,22 +25435,14 @@
                           this.startPosition = result.metaData.position ? result.metaData.position.clone() : new THREE.Vector3();
                           return [4 /*yield*/, this._iOne.getQuestionAndAnswersAsync()];
                       case 7:
-                          questionAndAnswers = _c.sent();
-                          if (questionAndAnswers.question && !questionAndAnswers.question.grouped) {
-                              this._iOne.handleAnswersReceived(questionAndAnswers.answers);
-                          }
-                          this._appEventService.answerCountReceived.next(questionAndAnswers.answers.length);
-                          if (!(questionAndAnswers.answers.length === 0)) return [3 /*break*/, 9];
-                          this.activeAnswers = [];
-                          this.activeQuestion = undefined;
+                          _c.sent(); // see if there is user input needed
+                          if (!(this._iOne.activeAnswers.length === 0)) return [3 /*break*/, 9];
                           return [4 /*yield*/, this._prepareSelectionsAndDecos(result)
                                   .catch(function (e) { return Promise.reject(e); })];
                       case 8:
                           _c.sent();
                           return [2 /*return*/, this.build(result)];
                       case 9:
-                          this.activeQuestion = questionAndAnswers.question;
-                          this.activeAnswers = questionAndAnswers.answers;
                           if (!firstBuild) return [3 /*break*/, 11];
                           return [4 /*yield*/, this._prepareSelectionsAndDecos(result)
                                   .catch(function (e) { return Promise.reject(e); })];
@@ -26053,7 +26067,6 @@
           if (rebuild === void 0) { rebuild = true; }
           if (getAnswers === void 0) { getAnswers = false; }
           return __awaiter$G(this, void 0, void 0, function () {
-              var questionAndAnswers;
               return __generator(this, function (_a) {
                   switch (_a.label) {
                       case 0: return [4 /*yield*/, this._iOne.cancelAnswer()];
@@ -26066,9 +26079,7 @@
                           if (!getAnswers) return [3 /*break*/, 4];
                           return [4 /*yield*/, this._iOne.getQuestionAndAnswersAsync()];
                       case 3:
-                          questionAndAnswers = _a.sent();
-                          this._iOne.handleAnswersReceived(questionAndAnswers.answers);
-                          this._appEventService.answerCountReceived.next(questionAndAnswers.answers.length);
+                          _a.sent(); // see if there is user input needed
                           _a.label = 4;
                       case 4: return [2 /*return*/];
                   }
@@ -27264,7 +27275,7 @@
       return SelectedChildMaterialTextureComponent;
   }());
   SelectedChildMaterialTextureComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectedChildMaterialTextureComponent, deps: [{ token: HomedecoratorIconCacheService }, { token: SceneService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  SelectedChildMaterialTextureComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectedChildMaterialTextureComponent, selector: "development-selected-child-material-texture", inputs: { map: "map", title: "title" }, outputs: { mapChange: "mapChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["inputFile"], descendants: true, static: true }], ngImport: i0__namespace, template: "\n    <div class=\"map-title-wrapper\">\n      <div class=\"map-title\" [textContent]=\"title\"></div>\n      <div class=\"collapse-wrapper\">\n        <div class=\"collapse-handle\" [class.expanded]=\"showContent\" *ngIf=\"map\" (click)=\"showContent = !showContent\">\n          <co-icon class=\"collapse-handle-icon\" [iconData]=\"iconService.getIcon(icon.ArrowPointDown)\"></co-icon>\n        </div>\n        <div class=\"zoom-button\" [class.expanded]=\"showContent\" *ngIf=\"map\" (click)=\"showLargeImage()\">\n          <co-icon [iconData]=\"iconService.getIcon(icon.Magnifier)\"></co-icon>\n        </div>\n        <div class=\"delete-button\" *ngIf=\"map\" (click)=\"deleteMap()\">\n          <co-icon [iconData]=\"iconService.getIcon(icon.Cross)\"></co-icon>\n        </div>\n        <div class=\"map-image\" (click)=\"uploadImage('map')\">\n          <div class=\"no-image\" *ngIf=\"!map || !map.image || !map.image.currentSrc\"></div>\n          <img class=\"value\" *ngIf=\"map && map.image && map.image.currentSrc\" [src]=\"map.image.currentSrc\">\n        </div>\n      </div>\n    </div>\n    <div class=\"map-content\" *ngIf=\"showContent\" @showHideMapContent>\n      <div class=\"label\" [textContent]=\"'anisotrophy'\"></div>\n      <div class=\"value\">\n        <input type=\"number\" [(ngModel)]=\"map.anisotropy\" (ngModelChange)=\"render()\">\n      </div>\n      <div class=\"label\" [textContent]=\"'center'\"></div>\n      <div class=\"value\">\n        <span>x:</span><input type=\"number\" [(ngModel)]=\"map.center.x\" (ngModelChange)=\"render()\">\n        <span>y:</span><input type=\"number\" [(ngModel)]=\"map.center.y\" (ngModelChange)=\"render()\">\n      </div>\n      <div class=\"label\" [textContent]=\"'encoding'\"></div>\n<!--      <mat-form-field class=\"value\">-->\n<!--        <mat-select [(value)]=\"map.encoding\">-->\n<!--          <mat-option *ngFor=\"let encoding of textureEncodingList\" [value]=\"encoding.id\" (click)=\"render()\">-->\n<!--            {{ encoding.description }}-->\n<!--          </mat-option>-->\n<!--        </mat-select>-->\n<!--      </mat-form-field>-->\n      <div class=\"label\" [textContent]=\"'flipY'\"></div>\n      <div class=\"value\">\n        <input type=\"checkbox\" [ngModel]=\"map.flipY\" (ngModelChange)=\"changeFlip($event)\">\n      </div>\n      <div class=\"label\" [textContent]=\"'format'\"></div>\n      <mat-form-field class=\"value\">\n        <mat-select [(value)]=\"map.format\">\n          <mat-option *ngFor=\"let format of pixelFormatList\" [value]=\"format.id\" (click)=\"render()\">\n            {{ format.description }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"label\" [textContent]=\"'generateMipmaps'\"></div>\n      <div class=\"value\">\n        <input type=\"checkbox\" [(ngModel)]=\"map.generateMipmaps\" (ngModelChange)=\"render()\">\n      </div>\n      <div class=\"label\" [textContent]=\"'magFilter'\"></div>\n      <mat-form-field class=\"value\">\n        <mat-select [(value)]=\"map.magFilter\">\n          <mat-option *ngFor=\"let filter of textureFilterList\" [value]=\"filter.id\" (click)=\"render()\">\n            {{ filter.description }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"label\" [textContent]=\"'mapping'\"></div>\n      <mat-form-field class=\"value\">\n        <mat-select [(value)]=\"map.mapping\">\n          <mat-option *ngFor=\"let mapping of mappingList\" [value]=\"mapping.id\" (click)=\"render()\">\n            {{ mapping.description }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"label\" [textContent]=\"'minFilter'\"></div>\n      <mat-form-field class=\"value\">\n        <mat-select [(value)]=\"map.minFilter\">\n          <mat-option *ngFor=\"let filter of textureFilterList\" [value]=\"filter.id\" (click)=\"render()\">\n            {{ filter.description }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"label\" [textContent]=\"'offset'\"></div>\n      <div class=\"value\">\n        <span>x:</span><input type=\"number\" [(ngModel)]=\"map.offset.x\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n        <span>y:</span><input type=\"number\" [(ngModel)]=\"map.offset.y\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n      </div>\n      <div class=\"label\" [textContent]=\"'premultiplyAlpha'\"></div>\n      <div class=\"value\">\n        <input type=\"checkbox\" [(ngModel)]=\"map.premultiplyAlpha\" (ngModelChange)=\"render()\">\n      </div>\n      <div class=\"label\" [textContent]=\"'repeat'\"></div>\n      <div class=\"value\">\n        <span>x:</span><input type=\"number\" [(ngModel)]=\"map.repeat.x\" [min]=\"0\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n        <span>y:</span><input type=\"number\" [(ngModel)]=\"map.repeat.y\" [min]=\"0\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n      </div>\n      <div class=\"label\" [textContent]=\"'rotation'\"></div>\n      <div class=\"value\">\n        <input type=\"number\" [(ngModel)]=\"map.rotation\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n      </div>\n      <div class=\"label\" [textContent]=\"'type'\"></div>\n      <mat-form-field class=\"value\">\n        <mat-select [(value)]=\"map.type\">\n          <mat-option *ngFor=\"let type of typeList\" [value]=\"type.id\" (click)=\"render()\">\n            {{ type.description }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"label\" [textContent]=\"'wrapS'\"></div>\n      <mat-form-field class=\"value\">\n        <mat-select [(value)]=\"map.wrapS\">\n          <mat-option *ngFor=\"let wrapping of wrappingList\" [value]=\"wrapping.id\" (click)=\"render()\">\n            {{ wrapping.description }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"label\" [textContent]=\"'wrapT'\"></div>\n      <mat-form-field class=\"value\">\n        <mat-select [(value)]=\"map.wrapT\">\n          <mat-option *ngFor=\"let wrapping of wrappingList\" [value]=\"wrapping.id\" (click)=\"render()\">\n            {{ wrapping.description }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div class=\"large-image-viewer\" *ngIf=\"showZoomImage && viewImageSrc\" (click)=\"hideZoomImage($event)\">\n      <div class=\"large-image-viewer-content\">\n        <img [src]=\"viewImageSrc\">\n        <div class=\"large-image-viewer-close\" (click)=\"hideZoomImage($event)\">\n          <co-icon [iconData]=\"iconService.getIcon(icon.Cross)\"></co-icon>\n        </div>\n      </div>\n    </div>\n    <input #inputFile [accept]=\"'image/*'\" (change)=\"handleFileChange($event)\" type=\"file\" hidden/>\n  ", 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__namespace.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: i7__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i9__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i8__namespace.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__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i8__namespace.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }], animations: [
+  SelectedChildMaterialTextureComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectedChildMaterialTextureComponent, selector: "development-selected-child-material-texture", inputs: { map: "map", title: "title" }, outputs: { mapChange: "mapChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["inputFile"], descendants: true, static: true }], ngImport: i0__namespace, template: "\n    <div class=\"map-title-wrapper\">\n      <div class=\"map-title\" [textContent]=\"title\"></div>\n      <div class=\"collapse-wrapper\">\n        <div class=\"collapse-handle\" [class.expanded]=\"showContent\" *ngIf=\"map\" (click)=\"showContent = !showContent\">\n          <co-icon class=\"collapse-handle-icon\" [iconData]=\"iconService.getIcon(icon.ArrowPointDown)\"></co-icon>\n        </div>\n        <div class=\"zoom-button\" [class.expanded]=\"showContent\" *ngIf=\"map\" (click)=\"showLargeImage()\">\n          <co-icon [iconData]=\"iconService.getIcon(icon.Magnifier)\"></co-icon>\n        </div>\n        <div class=\"delete-button\" *ngIf=\"map\" (click)=\"deleteMap()\">\n          <co-icon [iconData]=\"iconService.getIcon(icon.Cross)\"></co-icon>\n        </div>\n        <div class=\"map-image\" (click)=\"uploadImage('map')\">\n          <div class=\"no-image\" *ngIf=\"!map || !map.image || !map.image.currentSrc\"></div>\n          <img class=\"value\" *ngIf=\"map && map.image && map.image.currentSrc\" [src]=\"map.image.currentSrc\">\n        </div>\n      </div>\n    </div>\n    <div class=\"map-content\" *ngIf=\"showContent\" @showHideMapContent>\n      <div class=\"label\" [textContent]=\"'anisotrophy'\"></div>\n      <div class=\"value\">\n        <input type=\"number\" [(ngModel)]=\"map.anisotropy\" (ngModelChange)=\"render()\">\n      </div>\n      <div class=\"label\" [textContent]=\"'center'\"></div>\n      <div class=\"value\">\n        <span>x:</span><input type=\"number\" [(ngModel)]=\"map.center.x\" (ngModelChange)=\"render()\">\n        <span>y:</span><input type=\"number\" [(ngModel)]=\"map.center.y\" (ngModelChange)=\"render()\">\n      </div>\n      <div class=\"label\" [textContent]=\"'encoding'\"></div>\n<!--      <mat-form-field class=\"value\">-->\n<!--        <mat-select [(value)]=\"map.encoding\">-->\n<!--          <mat-option *ngFor=\"let encoding of textureEncodingList\" [value]=\"encoding.id\" (click)=\"render()\">-->\n<!--            {{ encoding.description }}-->\n<!--          </mat-option>-->\n<!--        </mat-select>-->\n<!--      </mat-form-field>-->\n      <div class=\"label\" [textContent]=\"'flipY'\"></div>\n      <div class=\"value\">\n        <input type=\"checkbox\" [ngModel]=\"map.flipY\" (ngModelChange)=\"changeFlip($event)\">\n      </div>\n      <div class=\"label\" [textContent]=\"'format'\"></div>\n      <mat-form-field class=\"value\">\n        <mat-select [(value)]=\"map.format\">\n          <mat-option *ngFor=\"let format of pixelFormatList\" [value]=\"format.id\" (click)=\"render()\">\n            {{ format.description }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"label\" [textContent]=\"'generateMipmaps'\"></div>\n      <div class=\"value\">\n        <input type=\"checkbox\" [(ngModel)]=\"map.generateMipmaps\" (ngModelChange)=\"render()\">\n      </div>\n      <div class=\"label\" [textContent]=\"'magFilter'\"></div>\n      <mat-form-field class=\"value\">\n        <mat-select [(value)]=\"map.magFilter\">\n          <mat-option *ngFor=\"let filter of textureFilterList\" [value]=\"filter.id\" (click)=\"render()\">\n            {{ filter.description }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"label\" [textContent]=\"'mapping'\"></div>\n      <mat-form-field class=\"value\">\n        <mat-select [(value)]=\"map.mapping\">\n          <mat-option *ngFor=\"let mapping of mappingList\" [value]=\"mapping.id\" (click)=\"render()\">\n            {{ mapping.description }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"label\" [textContent]=\"'minFilter'\"></div>\n      <mat-form-field class=\"value\">\n        <mat-select [(value)]=\"map.minFilter\">\n          <mat-option *ngFor=\"let filter of textureFilterList\" [value]=\"filter.id\" (click)=\"render()\">\n            {{ filter.description }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"label\" [textContent]=\"'offset'\"></div>\n      <div class=\"value\">\n        <span>x:</span><input type=\"number\" [(ngModel)]=\"map.offset.x\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n        <span>y:</span><input type=\"number\" [(ngModel)]=\"map.offset.y\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n      </div>\n      <div class=\"label\" [textContent]=\"'premultiplyAlpha'\"></div>\n      <div class=\"value\">\n        <input type=\"checkbox\" [(ngModel)]=\"map.premultiplyAlpha\" (ngModelChange)=\"render()\">\n      </div>\n      <div class=\"label\" [textContent]=\"'repeat'\"></div>\n      <div class=\"value\">\n        <span>x:</span><input type=\"number\" [(ngModel)]=\"map.repeat.x\" [min]=\"0\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n        <span>y:</span><input type=\"number\" [(ngModel)]=\"map.repeat.y\" [min]=\"0\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n      </div>\n      <div class=\"label\" [textContent]=\"'rotation'\"></div>\n      <div class=\"value\">\n        <input type=\"number\" [(ngModel)]=\"map.rotation\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n      </div>\n      <div class=\"label\" [textContent]=\"'type'\"></div>\n      <mat-form-field class=\"value\">\n        <mat-select [(value)]=\"map.type\">\n          <mat-option *ngFor=\"let type of typeList\" [value]=\"type.id\" (click)=\"render()\">\n            {{ type.description }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"label\" [textContent]=\"'wrapS'\"></div>\n      <mat-form-field class=\"value\">\n        <mat-select [(value)]=\"map.wrapS\">\n          <mat-option *ngFor=\"let wrapping of wrappingList\" [value]=\"wrapping.id\" (click)=\"render()\">\n            {{ wrapping.description }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"label\" [textContent]=\"'wrapT'\"></div>\n      <mat-form-field class=\"value\">\n        <mat-select [(value)]=\"map.wrapT\">\n          <mat-option *ngFor=\"let wrapping of wrappingList\" [value]=\"wrapping.id\" (click)=\"render()\">\n            {{ wrapping.description }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div class=\"large-image-viewer\" *ngIf=\"showZoomImage && viewImageSrc\" (click)=\"hideZoomImage($event)\">\n      <div class=\"large-image-viewer-content\">\n        <img [src]=\"viewImageSrc\">\n        <div class=\"large-image-viewer-close\" (click)=\"hideZoomImage($event)\">\n          <co-icon [iconData]=\"iconService.getIcon(icon.Cross)\"></co-icon>\n        </div>\n      </div>\n    </div>\n    <input #inputFile [accept]=\"'image/*'\" (change)=\"handleFileChange($event)\" type=\"file\" hidden/>\n  ", 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__namespace.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: i7__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i12__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i8__namespace.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__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i8__namespace.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }], animations: [
           animations.trigger('showHideMapContent', [
               animations.state('void', animations.style({ 'height': '0', opacity: 0 })),
               animations.state('*', animations.style({ 'height': '*', opacity: 1 })),
@@ -27502,7 +27513,7 @@
       return SelectedChildMaterialComponent;
   }());
   SelectedChildMaterialComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectedChildMaterialComponent, deps: [{ token: HomedecoratorIconCacheService }, { token: SceneService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  SelectedChildMaterialComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectedChildMaterialComponent, selector: "development-selected-child-material", inputs: { material: "material", title: "title" }, outputs: { materialChange: "materialChange" }, ngImport: i0__namespace, template: "\n    <ng-container *ngIf=\"material\">\n      <div class=\"development-selected-child-material-wrapper\">\n        <div class=\"material-map-wrapper\">\n          <div class=\"title-wrapper\">\n            <span class=\"title\" [textContent]=\"title\"></span>\n            <button class=\"save-button\" mat-mini-fab matTooltip=\"{{'SAVE_MATERIAL' | localize}}\" (click)=\"saveMaterial()\">\n              <co-icon [iconData]=\"iconService.getIcon(icon.Download)\"></co-icon>\n            </button>\n          </div>\n          <div class=\"selected-child-material-content\">\n            <div class=\"label\" [textContent]=\"'alphaToCoverage'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.alphaToCoverage\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'aoMapIntensity'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.aoMapIntensity\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'blendDst'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.blendDst\">\n                <mat-option *ngFor=\"let blendDstFactor of blendDstFactorList\" [value]=\"blendDstFactor.id\" (click)=\"render()\">\n                  {{ blendDstFactor.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'blendDstAlpha'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.blendDstAlpha\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'blendEquation'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.blendEquation\">\n                <mat-option *ngFor=\"let blendingEquation of blendingEquationList\" [value]=\"blendingEquation.id\" (click)=\"render()\">\n                  {{ blendingEquation.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'blendEquationAlpha'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.blendEquationAlpha\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'blendSrc'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.blendSrc\">\n                <mat-option *ngFor=\"let blendSrcFactor of blendSrcFactorList\" [value]=\"blendSrcFactor.id\" (click)=\"render()\">\n                  {{ blendSrcFactor.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'blendSrcAlpha'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.blendSrcAlpha\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'blending'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.blending\">\n                <mat-option *ngFor=\"let blending of blendingList\" [value]=\"blending.id\" (click)=\"render()\">\n                  {{ blending.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'bumpScale'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.bumpScale\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'clipIntersection'\"></div>\n            <div class=\"value\">\n                <input type=\"checkbox\" [(ngModel)]=\"material.clipIntersection\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'clipShadows'\"></div>\n            <div class=\"value\">\n                <input type=\"checkbox\" [(ngModel)]=\"material.clipShadows\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'color'\"></div>\n            <div class=\"value\">\n              <input type=\"color\" [ngModel]=\"getColor(material.color)\" (ngModelChange)=\"changeColor('color', $event)\">\n            </div>\n            <div class=\"label\" [textContent]=\"'colorWrite'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.colorWrite\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'depthTest'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.depthTest\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'depthWrite'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.depthWrite\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'displacementBias'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.displacementBias\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'displacementScale'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.displacementScale\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'dithering'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.dithering\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'emissive'\"></div>\n            <div class=\"value\">\n              <input type=\"color\" [ngModel]=\"getColor(material.emissive)\" (ngModelChange)=\"changeColor('emissive', $event)\">\n            </div>\n            <div class=\"label\" [textContent]=\"'emissiveIntensity'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.emissiveIntensity\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'envMapIntensity'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.envMapIntensity\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'flatShading'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.flatShading\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'fog'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.fog\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'format'\"></div>\n<!--            <mat-form-field class=\"value\">-->\n<!--              <mat-select [(value)]=\"material.format\">-->\n<!--                <mat-option *ngFor=\"let pixelFormat of pixelFormatList\" [value]=\"pixelFormat.id\" (click)=\"render()\">-->\n<!--                  {{ pixelFormat.description }}-->\n<!--                </mat-option>-->\n<!--              </mat-select>-->\n<!--            </mat-form-field>-->\n            <div class=\"label\" [textContent]=\"'lightMapIntensity'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.lightMapIntensity\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'metalness'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.metalness\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'normalMapType'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.normalMapType\">\n                <mat-option *ngFor=\"let normalMapType of normalMapTypeList\" [value]=\"normalMapType.id\" (click)=\"render()\">\n                  {{ normalMapType.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'normalScale'\"></div>\n            <div class=\"value\">\n              <span>x:</span><input type=\"number\" [(ngModel)]=\"material.normalScale.x\" (ngModelChange)=\"render()\">\n              <span>y:</span><input type=\"number\" [(ngModel)]=\"material.normalScale.y\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'opacity'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.opacity\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'polygonOffset'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.polygonOffset\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'polygonOffsetFactor'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.polygonOffsetFactor\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'polygonOffsetUnits'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.polygonOffsetUnits\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'precision'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.precision\">\n                <mat-option *ngFor=\"let precision of precisionList\" [value]=\"precision.id\" (click)=\"render()\">\n                  {{ precision.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'premultipliedAlpha'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.premultipliedAlpha\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'reflectivity'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.reflectivity\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'refractionRatio'\"></div>\n<!--            <div class=\"value\">-->\n<!--              <input type=\"number\" [(ngModel)]=\"material.refractionRatio\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">-->\n<!--            </div>-->\n            <div class=\"label\" [textContent]=\"'roughness'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.roughness\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'shadowSide'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.shadowSide\">\n                <mat-option *ngFor=\"let side of sideListWithEmpty\" [value]=\"side.id\" (click)=\"render()\">\n                  {{ side.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'sheen'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.sheen\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'sheenColor'\"></div>\n            <div class=\"value\">\n              <input type=\"color\" [ngModel]=\"getColor(material.sheenColor)\" (ngModelChange)=\"changeColor('sheenColor', $event)\">\n            </div>\n            <div class=\"label\" [textContent]=\"'sheenRougness'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.sheenRoughness\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'side'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.side\">\n                <mat-option *ngFor=\"let side of sideList\" [value]=\"side.id\" (click)=\"render()\">\n                  {{ side.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'stencilFail'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.stencilFail\">\n                <mat-option *ngFor=\"let stencilOp of stencilOpList\" [value]=\"stencilOp.id\" (click)=\"render()\">\n                  {{ stencilOp.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'stencilFunc'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.stencilFunc\">\n                <mat-option *ngFor=\"let stencilFunc of stencilFuncList\" [value]=\"stencilFunc.id\" (click)=\"render()\">\n                  {{ stencilFunc.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'stencilFuncMask'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.stencilFuncMask\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'stencilRef'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.stencilRef\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'stencilWrite'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.stencilWrite\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'stencilWriteMask'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.stencilWriteMask\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'stencilZFail'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.stencilZFail\">\n                <mat-option *ngFor=\"let stencilOp of stencilOpList\" [value]=\"stencilOp.id\" (click)=\"render()\">\n                  {{ stencilOp.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'stencilZPass'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.stencilZPass\">\n                <mat-option *ngFor=\"let stencilOp of stencilOpList\" [value]=\"stencilOp.id\" (click)=\"render()\">\n                  {{ stencilOp.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'toneMapped'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.toneMapped\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'transparent'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.transparent\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'type'\"></div>\n            <div class=\"value\">\n              <input type=\"text\" [(ngModel)]=\"material.type\" readonly>\n            </div>\n            <div class=\"label\" [textContent]=\"'uuid'\"></div>\n            <div class=\"value\">\n              <input type=\"text\" [(ngModel)]=\"material.uuid\" readonly>\n            </div>\n            <div class=\"label\" [textContent]=\"'version'\"></div>\n            <div class=\"value\">\n              <input type=\"text\" [(ngModel)]=\"material.version\" readonly>\n            </div>\n            <div class=\"label\" [textContent]=\"'vertexColors'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.vertexColors\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'visible'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.visible\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'wireframe'\"></div>\n            <div class=\"value\">\n                <input type=\"checkbox\" [(ngModel)]=\"material.wireframe\" (ngModelChange)=\"render()\">\n            </div>\n          </div>\n          <div class=\"map-wrapper\">\n            <development-selected-child-material-texture [title]=\"'alphaMap'\" [(map)]=\"material.alphaMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'aoMap'\" [(map)]=\"material.aoMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'bumpMap'\" [(map)]=\"material.bumpMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'displacementMap'\" [(map)]=\"material.displacementMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'emissiveMap'\" [(map)]=\"material.emissiveMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'envMap'\" [(map)]=\"material.envMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'lightMap'\" [(map)]=\"material.lightMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'map'\" [(map)]=\"material.map\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'metalnessMap'\" [(map)]=\"material.metalnessMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'normalMap'\" [(map)]=\"material.normalMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'roughnessMap'\" [(map)]=\"material.roughnessMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'sheenRoughnessMap'\" [(map)]=\"material.sheenRoughnessMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'sheenColorMap'\" [(map)]=\"material.sheenColorMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  ", 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__namespace$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__namespace.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: i7__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i9__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: SelectedChildMaterialTextureComponent, selector: "development-selected-child-material-texture", inputs: ["map", "title"], outputs: ["mapChange"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8__namespace.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i8__namespace.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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i8__namespace.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }], pipes: { "localize": LocalizePipe } });
+  SelectedChildMaterialComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectedChildMaterialComponent, selector: "development-selected-child-material", inputs: { material: "material", title: "title" }, outputs: { materialChange: "materialChange" }, ngImport: i0__namespace, template: "\n    <ng-container *ngIf=\"material\">\n      <div class=\"development-selected-child-material-wrapper\">\n        <div class=\"material-map-wrapper\">\n          <div class=\"title-wrapper\">\n            <span class=\"title\" [textContent]=\"title\"></span>\n            <button class=\"save-button\" mat-mini-fab matTooltip=\"{{'SAVE_MATERIAL' | localize}}\" (click)=\"saveMaterial()\">\n              <co-icon [iconData]=\"iconService.getIcon(icon.Download)\"></co-icon>\n            </button>\n          </div>\n          <div class=\"selected-child-material-content\">\n            <div class=\"label\" [textContent]=\"'alphaToCoverage'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.alphaToCoverage\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'aoMapIntensity'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.aoMapIntensity\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'blendDst'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.blendDst\">\n                <mat-option *ngFor=\"let blendDstFactor of blendDstFactorList\" [value]=\"blendDstFactor.id\" (click)=\"render()\">\n                  {{ blendDstFactor.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'blendDstAlpha'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.blendDstAlpha\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'blendEquation'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.blendEquation\">\n                <mat-option *ngFor=\"let blendingEquation of blendingEquationList\" [value]=\"blendingEquation.id\" (click)=\"render()\">\n                  {{ blendingEquation.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'blendEquationAlpha'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.blendEquationAlpha\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'blendSrc'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.blendSrc\">\n                <mat-option *ngFor=\"let blendSrcFactor of blendSrcFactorList\" [value]=\"blendSrcFactor.id\" (click)=\"render()\">\n                  {{ blendSrcFactor.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'blendSrcAlpha'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.blendSrcAlpha\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'blending'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.blending\">\n                <mat-option *ngFor=\"let blending of blendingList\" [value]=\"blending.id\" (click)=\"render()\">\n                  {{ blending.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'bumpScale'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.bumpScale\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'clipIntersection'\"></div>\n            <div class=\"value\">\n                <input type=\"checkbox\" [(ngModel)]=\"material.clipIntersection\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'clipShadows'\"></div>\n            <div class=\"value\">\n                <input type=\"checkbox\" [(ngModel)]=\"material.clipShadows\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'color'\"></div>\n            <div class=\"value\">\n              <input type=\"color\" [ngModel]=\"getColor(material.color)\" (ngModelChange)=\"changeColor('color', $event)\">\n            </div>\n            <div class=\"label\" [textContent]=\"'colorWrite'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.colorWrite\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'depthTest'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.depthTest\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'depthWrite'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.depthWrite\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'displacementBias'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.displacementBias\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'displacementScale'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.displacementScale\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'dithering'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.dithering\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'emissive'\"></div>\n            <div class=\"value\">\n              <input type=\"color\" [ngModel]=\"getColor(material.emissive)\" (ngModelChange)=\"changeColor('emissive', $event)\">\n            </div>\n            <div class=\"label\" [textContent]=\"'emissiveIntensity'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.emissiveIntensity\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'envMapIntensity'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.envMapIntensity\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'flatShading'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.flatShading\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'fog'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.fog\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'format'\"></div>\n<!--            <mat-form-field class=\"value\">-->\n<!--              <mat-select [(value)]=\"material.format\">-->\n<!--                <mat-option *ngFor=\"let pixelFormat of pixelFormatList\" [value]=\"pixelFormat.id\" (click)=\"render()\">-->\n<!--                  {{ pixelFormat.description }}-->\n<!--                </mat-option>-->\n<!--              </mat-select>-->\n<!--            </mat-form-field>-->\n            <div class=\"label\" [textContent]=\"'lightMapIntensity'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.lightMapIntensity\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'metalness'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.metalness\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'normalMapType'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.normalMapType\">\n                <mat-option *ngFor=\"let normalMapType of normalMapTypeList\" [value]=\"normalMapType.id\" (click)=\"render()\">\n                  {{ normalMapType.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'normalScale'\"></div>\n            <div class=\"value\">\n              <span>x:</span><input type=\"number\" [(ngModel)]=\"material.normalScale.x\" (ngModelChange)=\"render()\">\n              <span>y:</span><input type=\"number\" [(ngModel)]=\"material.normalScale.y\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'opacity'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.opacity\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'polygonOffset'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.polygonOffset\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'polygonOffsetFactor'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.polygonOffsetFactor\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'polygonOffsetUnits'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.polygonOffsetUnits\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'precision'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.precision\">\n                <mat-option *ngFor=\"let precision of precisionList\" [value]=\"precision.id\" (click)=\"render()\">\n                  {{ precision.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'premultipliedAlpha'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.premultipliedAlpha\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'reflectivity'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.reflectivity\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'refractionRatio'\"></div>\n<!--            <div class=\"value\">-->\n<!--              <input type=\"number\" [(ngModel)]=\"material.refractionRatio\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">-->\n<!--            </div>-->\n            <div class=\"label\" [textContent]=\"'roughness'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.roughness\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'shadowSide'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.shadowSide\">\n                <mat-option *ngFor=\"let side of sideListWithEmpty\" [value]=\"side.id\" (click)=\"render()\">\n                  {{ side.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'sheen'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.sheen\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'sheenColor'\"></div>\n            <div class=\"value\">\n              <input type=\"color\" [ngModel]=\"getColor(material.sheenColor)\" (ngModelChange)=\"changeColor('sheenColor', $event)\">\n            </div>\n            <div class=\"label\" [textContent]=\"'sheenRougness'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.sheenRoughness\" [min]=\"0\" [max]=\"1\" [step]=\"0.01\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'side'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.side\">\n                <mat-option *ngFor=\"let side of sideList\" [value]=\"side.id\" (click)=\"render()\">\n                  {{ side.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'stencilFail'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.stencilFail\">\n                <mat-option *ngFor=\"let stencilOp of stencilOpList\" [value]=\"stencilOp.id\" (click)=\"render()\">\n                  {{ stencilOp.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'stencilFunc'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.stencilFunc\">\n                <mat-option *ngFor=\"let stencilFunc of stencilFuncList\" [value]=\"stencilFunc.id\" (click)=\"render()\">\n                  {{ stencilFunc.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'stencilFuncMask'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.stencilFuncMask\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'stencilRef'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.stencilRef\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'stencilWrite'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.stencilWrite\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'stencilWriteMask'\"></div>\n            <div class=\"value\">\n              <input type=\"number\" [(ngModel)]=\"material.stencilWriteMask\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'stencilZFail'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.stencilZFail\">\n                <mat-option *ngFor=\"let stencilOp of stencilOpList\" [value]=\"stencilOp.id\" (click)=\"render()\">\n                  {{ stencilOp.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'stencilZPass'\"></div>\n            <mat-form-field class=\"value\">\n              <mat-select [(value)]=\"material.stencilZPass\">\n                <mat-option *ngFor=\"let stencilOp of stencilOpList\" [value]=\"stencilOp.id\" (click)=\"render()\">\n                  {{ stencilOp.description }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <div class=\"label\" [textContent]=\"'toneMapped'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.toneMapped\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'transparent'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.transparent\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'type'\"></div>\n            <div class=\"value\">\n              <input type=\"text\" [(ngModel)]=\"material.type\" readonly>\n            </div>\n            <div class=\"label\" [textContent]=\"'uuid'\"></div>\n            <div class=\"value\">\n              <input type=\"text\" [(ngModel)]=\"material.uuid\" readonly>\n            </div>\n            <div class=\"label\" [textContent]=\"'version'\"></div>\n            <div class=\"value\">\n              <input type=\"text\" [(ngModel)]=\"material.version\" readonly>\n            </div>\n            <div class=\"label\" [textContent]=\"'vertexColors'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.vertexColors\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'visible'\"></div>\n            <div class=\"value\">\n              <input type=\"checkbox\" [(ngModel)]=\"material.visible\" (ngModelChange)=\"render()\">\n            </div>\n            <div class=\"label\" [textContent]=\"'wireframe'\"></div>\n            <div class=\"value\">\n                <input type=\"checkbox\" [(ngModel)]=\"material.wireframe\" (ngModelChange)=\"render()\">\n            </div>\n          </div>\n          <div class=\"map-wrapper\">\n            <development-selected-child-material-texture [title]=\"'alphaMap'\" [(map)]=\"material.alphaMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'aoMap'\" [(map)]=\"material.aoMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'bumpMap'\" [(map)]=\"material.bumpMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'displacementMap'\" [(map)]=\"material.displacementMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'emissiveMap'\" [(map)]=\"material.emissiveMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'envMap'\" [(map)]=\"material.envMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'lightMap'\" [(map)]=\"material.lightMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'map'\" [(map)]=\"material.map\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'metalnessMap'\" [(map)]=\"material.metalnessMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'normalMap'\" [(map)]=\"material.normalMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'roughnessMap'\" [(map)]=\"material.roughnessMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'sheenRoughnessMap'\" [(map)]=\"material.sheenRoughnessMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n            <development-selected-child-material-texture [title]=\"'sheenColorMap'\" [(map)]=\"material.sheenColorMap\" (mapChange)=\"handleMapChange($event)\"></development-selected-child-material-texture>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  ", 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__namespace$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__namespace.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: i7__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i12__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: SelectedChildMaterialTextureComponent, selector: "development-selected-child-material-texture", inputs: ["map", "title"], outputs: ["mapChange"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8__namespace.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i8__namespace.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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i8__namespace.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }], pipes: { "localize": LocalizePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectedChildMaterialComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -28442,7 +28453,7 @@
       return EditLightComponent;
   }());
   EditLightComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditLightComponent, deps: [{ token: SceneService }, { token: LightsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  EditLightComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef, static: true }], ngImport: i0__namespace, 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__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i1__namespace$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__namespace$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__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i7__namespace.MatLabel, selector: "mat-label" }, { type: i19__namespace.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__namespace.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__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "localize": LocalizePipe }, animations: [
+  EditLightComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef, static: true }], ngImport: i0__namespace, 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__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i1__namespace$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__namespace$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__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i7__namespace.MatLabel, selector: "mat-label" }, { type: i19__namespace.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__namespace.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__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "localize": LocalizePipe }, animations: [
           animations.trigger('showHideDialog', [
               animations.state('void', animations.style({ opacity: 0 })),
               animations.state('*', animations.style({ opacity: 1 })),
@@ -28540,7 +28551,7 @@
       return EditLightplanComponent;
   }());
   EditLightplanComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditLightplanComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  EditLightplanComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditLightplanComponent, selector: "edit-lightplan", inputs: { lightPreset: "lightPreset" }, outputs: { saveClick: "saveClick", cancelClick: "cancelClick" }, ngImport: i0__namespace, template: "\n      <div class=\"edit-popup\">\n          <div class=\"title-bar\">\n              <div class=\"title-description\" [textContent]=\"'EDIT' | localize\"></div>\n          </div>\n          <div class=\"edit-popup-wrapper\">\n              <mat-form-field class=\"full-width\">\n                  <mat-label [textContent]=\"'NAME' | localize\"></mat-label>\n                  <input matInput [(ngModel)]=\"lightPresetClone.name\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                  <mat-label [textContent]=\"'GROUP' | localize\"></mat-label>\n                  <input matInput [(ngModel)]=\"lightPresetClone.group\">\n              </mat-form-field>\n              <div class=\"key-value-grid\">\n                  <span class=\"key\" [textContent]=\"'NAVIGATOR_TYPE' | localize\"></span>\n                  <mat-select class=\"dropdown-container\" [value]=\"lightPresetClone.navigatorType\" (keydown)=\"handleSelectKeyDown($event, 'navigatorType')\">\n                      <mat-option *ngFor=\"let navigatorType of navigatorTypes | keys\" [value]=\"navigatorType.key\" (click)=\"lightPresetClone.navigatorType = navigatorType.value\">\n                          {{ navigatorType.key }}\n                      </mat-option>\n                  </mat-select>\n                  <span class=\"value-readonly\"></span>\n\n                  <span class=\"key\" [textContent]=\"'SHADOW_MAP_TYPE' | localize\"></span>\n                  <mat-select class=\"dropdown-container\" [value]=\"lightPresetClone.shadowMapType\">\n                      <mat-option *ngFor=\"let mapType of shadowMapTypes | keys\" [value]=\"mapType.key\" (click)=\"lightPresetClone.shadowMapType = mapType.value\">\n                          {{ mapType.key }}\n                      </mat-option>\n                  </mat-select>\n                  <span class=\"value-readonly\"></span>\n\n                  <span class=\"key\" [textContent]=\"'OUTPUT_ENCODING' | localize\"></span>\n                  <mat-select class=\"dropdown-container\" [value]=\"lightPresetClone.outputEncoding\">\n                      <mat-option *ngFor=\"let encoding of encodings | keys\" [value]=\"encoding.key\" (click)=\"lightPresetClone.outputEncoding = encoding.value\">\n                          {{ encoding.key }}\n                      </mat-option>\n                  </mat-select>\n                  <span class=\"value-readonly\"></span>\n\n                  <span class=\"key\" [textContent]=\"'TONE_MAPPING_EXPOSURE' | localize\"></span>\n                  <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"3\" step=\"0.1\" [value]=\"lightPresetClone.toneMappingExposure\" [(ngModel)]=\"lightPresetClone.toneMappingExposure\"></mat-slider>\n                  <input matInput type=\"number\" [step]=\"0.1\" [placeholder]=\"1\" [value]=\"lightPresetClone.toneMappingExposure\" [(ngModel)]=\"lightPresetClone.toneMappingExposure\">\n\n                  <span class=\"key\" [textContent]=\"'PHYSICALLY_CORRECT_LIGHTS' | localize\"></span>\n                  <mat-checkbox class=\"value\" [(ngModel)]=\"lightPresetClone.physicallyCorrectLights\"></mat-checkbox>\n                  <span class=\"value-readonly\"></span>\n\n                  <span class=\"key\" [textContent]=\"'DEFAULT' | localize\"></span>\n                  <mat-checkbox class=\"value\" [(ngModel)]=\"lightPresetClone.default\"></mat-checkbox>\n                  <span class=\"value-readonly\"></span>\n\n                  <span class=\"key\" [textContent]=\"'STANDALONE' | localize\"></span>\n                  <mat-checkbox class=\"value\" [(ngModel)]=\"lightPresetClone.standalone\"></mat-checkbox>\n                  <span class=\"value-readonly\"></span>\n              </div>\n          </div>\n          <div class=\"button-wrapper\">\n              <button mat-button class=\"custom-button\" (click)=\"cancel()\">\n                  <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">cancel</mat-icon>\n                  {{ 'CANCEL' | localize}}\n              </button>\n              <button mat-button class=\"custom-button\" (click)=\"save()\">\n                  <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">save</mat-icon>\n                  {{ 'SAVE' | localize}}\n              </button>\n          </div>\n      </div>\n  ", 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__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i9__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7__namespace$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__namespace$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__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i7__namespace.MatLabel, selector: "mat-label" }, { type: i19__namespace.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__namespace.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__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "localize": LocalizePipe, "keys": KeysPipe } });
+  EditLightplanComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditLightplanComponent, selector: "edit-lightplan", inputs: { lightPreset: "lightPreset" }, outputs: { saveClick: "saveClick", cancelClick: "cancelClick" }, ngImport: i0__namespace, template: "\n      <div class=\"edit-popup\">\n          <div class=\"title-bar\">\n              <div class=\"title-description\" [textContent]=\"'EDIT' | localize\"></div>\n          </div>\n          <div class=\"edit-popup-wrapper\">\n              <mat-form-field class=\"full-width\">\n                  <mat-label [textContent]=\"'NAME' | localize\"></mat-label>\n                  <input matInput [(ngModel)]=\"lightPresetClone.name\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                  <mat-label [textContent]=\"'GROUP' | localize\"></mat-label>\n                  <input matInput [(ngModel)]=\"lightPresetClone.group\">\n              </mat-form-field>\n              <div class=\"key-value-grid\">\n                  <span class=\"key\" [textContent]=\"'NAVIGATOR_TYPE' | localize\"></span>\n                  <mat-select class=\"dropdown-container\" [value]=\"lightPresetClone.navigatorType\" (keydown)=\"handleSelectKeyDown($event, 'navigatorType')\">\n                      <mat-option *ngFor=\"let navigatorType of navigatorTypes | keys\" [value]=\"navigatorType.key\" (click)=\"lightPresetClone.navigatorType = navigatorType.value\">\n                          {{ navigatorType.key }}\n                      </mat-option>\n                  </mat-select>\n                  <span class=\"value-readonly\"></span>\n\n                  <span class=\"key\" [textContent]=\"'SHADOW_MAP_TYPE' | localize\"></span>\n                  <mat-select class=\"dropdown-container\" [value]=\"lightPresetClone.shadowMapType\">\n                      <mat-option *ngFor=\"let mapType of shadowMapTypes | keys\" [value]=\"mapType.key\" (click)=\"lightPresetClone.shadowMapType = mapType.value\">\n                          {{ mapType.key }}\n                      </mat-option>\n                  </mat-select>\n                  <span class=\"value-readonly\"></span>\n\n                  <span class=\"key\" [textContent]=\"'OUTPUT_ENCODING' | localize\"></span>\n                  <mat-select class=\"dropdown-container\" [value]=\"lightPresetClone.outputEncoding\">\n                      <mat-option *ngFor=\"let encoding of encodings | keys\" [value]=\"encoding.key\" (click)=\"lightPresetClone.outputEncoding = encoding.value\">\n                          {{ encoding.key }}\n                      </mat-option>\n                  </mat-select>\n                  <span class=\"value-readonly\"></span>\n\n                  <span class=\"key\" [textContent]=\"'TONE_MAPPING_EXPOSURE' | localize\"></span>\n                  <mat-slider class=\"value\" thumbLabel min=\"0\" max=\"3\" step=\"0.1\" [value]=\"lightPresetClone.toneMappingExposure\" [(ngModel)]=\"lightPresetClone.toneMappingExposure\"></mat-slider>\n                  <input matInput type=\"number\" [step]=\"0.1\" [placeholder]=\"1\" [value]=\"lightPresetClone.toneMappingExposure\" [(ngModel)]=\"lightPresetClone.toneMappingExposure\">\n\n                  <span class=\"key\" [textContent]=\"'PHYSICALLY_CORRECT_LIGHTS' | localize\"></span>\n                  <mat-checkbox class=\"value\" [(ngModel)]=\"lightPresetClone.physicallyCorrectLights\"></mat-checkbox>\n                  <span class=\"value-readonly\"></span>\n\n                  <span class=\"key\" [textContent]=\"'DEFAULT' | localize\"></span>\n                  <mat-checkbox class=\"value\" [(ngModel)]=\"lightPresetClone.default\"></mat-checkbox>\n                  <span class=\"value-readonly\"></span>\n\n                  <span class=\"key\" [textContent]=\"'STANDALONE' | localize\"></span>\n                  <mat-checkbox class=\"value\" [(ngModel)]=\"lightPresetClone.standalone\"></mat-checkbox>\n                  <span class=\"value-readonly\"></span>\n              </div>\n          </div>\n          <div class=\"button-wrapper\">\n              <button mat-button class=\"custom-button\" (click)=\"cancel()\">\n                  <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">cancel</mat-icon>\n                  {{ 'CANCEL' | localize}}\n              </button>\n              <button mat-button class=\"custom-button\" (click)=\"save()\">\n                  <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">save</mat-icon>\n                  {{ 'SAVE' | localize}}\n              </button>\n          </div>\n      </div>\n  ", 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__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i12__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7__namespace$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__namespace$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__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i7__namespace.MatLabel, selector: "mat-label" }, { type: i19__namespace.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__namespace.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__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "localize": LocalizePipe, "keys": KeysPipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditLightplanComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -28746,7 +28757,7 @@
       return LightplanComponent;
   }());
   LightplanComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LightplanComponent, deps: [{ token: LightsService }, { token: ConfigurationService }, { token: DialogService }, { token: HomedecoratorDictionaryService }, { token: i0__namespace.ChangeDetectorRef }, { token: LightPresetsService }, { token: SceneService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  LightplanComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LightplanComponent, selector: "lightplan", host: { listeners: { "document:mousemove": "moveDialog($event)", "document:mouseup": "cancelMoveDialog($event)" }, properties: { "class.show": "this.showDialog", "class.popup-showing": "this.showPlanEditPopup" } }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialog"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "\n      <ng-container *ngIf=\"showDialog\">\n          <div class=\"lightplan-wrapper\" #dialog @showHideDialog [style.top.px]=\"top\" [style.left.px]=\"left\">\n              <div class=\"title-bar\">\n                  <div class=\"title-bar-move\" (mousedown)=\"handleTitleMouseMove($event)\"></div>\n                  <button mat-icon-button class=\"hide-dialog\" (click)=\"hideDialog()\">\n                      <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">close</mat-icon>\n                  </button>\n              </div>\n              <div class=\"content-wrapper\">\n                  <div class=\"section\">\n                      <div class=\"edit-lightplan-wrapper\">\n                          <h4 [textContent]=\"'LIGHTPLAN' | localize\"></h4>\n                          <div class=\"edit-button-wrapper\">\n                              <div matTooltip=\"{{'ADD' | localize}}\">\n                                  <button mat-icon-button (click)=\"newPreset()\">\n                                      <mat-icon class=\"homedecorator-material-icons\">add</mat-icon>\n                                  </button>\n                              </div>\n                          </div>\n                      </div>\n                      <div class=\"light-preset-selection\">\n                          <mat-select class=\"dropdown-container\" [ngModel]=\"lightPresetsService.activeLightPreset.name\" panelClass=\"dropdown-container\">\n                              <mat-select-trigger>\n                                  {{ lightPresetsService.activeLightPreset.name }}\n                              </mat-select-trigger>\n                              <div *ngFor=\"let lightPreset of lightPresetsService.loadedLightPresets\">\n                                  <mat-option [value]=\"lightPreset.name\" (click)=\"loadPreset(lightPreset)\">\n                                      {{ lightPreset.name }}\n                                      <mat-icon *ngIf=\"lightPreset.dirty\" class=\"homedecorator-material-icons\" (click)=\"saveAsPreset($event, lightPreset)\">save</mat-icon>\n                                  </mat-option>\n                              </div>\n                          </mat-select>\n                          <div matTooltip=\"{{'EDIT' | localize}}\">\n                              <button mat-icon-button (click)=\"editPreset(true)\">\n                                  <mat-icon class=\"homedecorator-material-icons\">edit</mat-icon>\n                              </button>\n                          </div>\n                          <div matTooltip=\"{{'REMOVE' | localize}}\">\n                              <button mat-icon-button (click)=\"deletePreset()\">\n                                  <mat-icon class=\"homedecorator-material-icons\">delete</mat-icon>\n                              </button>\n                          </div>\n                      </div>\n                  </div>\n                  <div class=\"section\">\n                      <h4 [textContent]=\"'GROUP' | localize\"></h4>\n                      <span [textContent]=\"lightPresetsService.activeLightPreset.group\"></span>\n                  </div>\n                  <div class=\"section\">\n                      <h4 [textContent]=\"'NAVIGATOR_TYPE' | localize\"></h4>\n                      <span [textContent]=\"lightPresetsService.activeLightPreset.navigatorType\"></span>\n                  </div>\n                  <div class=\"section\">\n                      <h4 [textContent]=\"'RENDER' | localize\"></h4>\n                      <div class=\"section-row\">\n                          <span [textContent]=\"'SHADOW_MAP_TYPE' | localize\"></span>\n                          <span [textContent]=\"lightPresetsService.activeLightPreset.shadowMapType\"></span>\n                      </div>\n                      <div class=\"section-row\">\n                          <span [textContent]=\"'OUTPUT_ENCODING' | localize\"></span>\n                          <span [textContent]=\"lightPresetsService.activeLightPreset.outputEncoding\"></span>\n                      </div>\n                      <div class=\"section-row\">\n                          <span [textContent]=\"'TONE_MAPPING_EXPOSURE' | localize\"></span>\n                          <span [textContent]=\"lightPresetsService.activeLightPreset.toneMappingExposure\"></span>\n                      </div>\n                      <div class=\"section-row\">\n                          <span [textContent]=\"'PHYSICALLY_CORRECT_LIGHTS' | localize\"></span>\n                          <span [textContent]=\"(lightPresetsService.activeLightPreset.physicallyCorrectLights ? 'TRUE' : 'FALSE') | localize\"></span>\n                      </div>\n                  </div>\n                  <div class=\"section\">\n                      <h4 [textContent]=\"'ADD' | localize\"></h4>\n                      <div class=\"button-row\">\n                          <button mat-button class=\"add-light\" (click)=\"addLight(light.SpotLight)\" fxLayout=\"row\" fxLayoutalign=\"center center\">\n                              <mat-icon class=\"homedecorator-material-icons\">wb_incandescent</mat-icon>\n                              {{ 'SPOTLIGHT' | localize }}\n                          </button>\n                          <button mat-button class=\"add-light\" (click)=\"addLight(light.DirectionalLight)\" fxLayout=\"row\" fxLayoutalign=\"center center\">\n                              <mat-icon class=\"homedecorator-material-icons\">wb_incandescent</mat-icon>\n                              {{ 'DIRECTIONAL' | localize }}\n                          </button>\n                          <button mat-button class=\"add-light\" (click)=\"addLight(light.HemisphereLight)\" fxLayout=\"row\" fxLayoutalign=\"center center\">\n                              <mat-icon class=\"homedecorator-material-icons\">wb_incandescent</mat-icon>\n                              {{ 'HEMISPHERE' | localize }}\n                          </button>\n                          <button mat-button class=\"add-light\" (click)=\"addLight(light.AmbientLight)\" fxLayout=\"row\" fxLayoutalign=\"center center\">\n                              <mat-icon class=\"homedecorator-material-icons\">wb_incandescent</mat-icon>\n                              {{ 'AMBIENT' | localize }}\n                          </button>\n                          <button mat-button class=\"add-light\" (click)=\"addLight(light.PointLight)\" fxLayout=\"row\" fxLayoutalign=\"center center\">\n                              <mat-icon class=\"homedecorator-material-icons\">wb_incandescent</mat-icon>\n                              {{ 'POINT' | localize }}\n                          </button>\n                      </div>\n                  </div>\n                  <div class=\"section\">\n                      <h4 [textContent]=\"'EDIT' | localize\"></h4>\n                      <div class=\"scene-lights\">\n                          <div class=\"scene-light\" *ngFor=\"let light of getLights(); let index = index\">\n                              <div class=\"edit-wrapper\">\n                                  <div class=\"light-name\" [textContent]=\"light.name\"></div>\n                                  <div class=\"edit-button-wrapper\">\n                                      <div matTooltip=\"{{'EDIT' | localize}}\">\n                                          <button mat-icon-button (click)=\"editLight(index)\">\n                                              <mat-icon class=\"homedecorator-material-icons\">edit</mat-icon>\n                                          </button>\n                                      </div>\n                                      <div matTooltip=\"{{'REMOVE' | localize}}\">\n                                          <button mat-icon-button (click)=\"removeLight(index)\">\n                                              <mat-icon class=\"homedecorator-material-icons\">delete</mat-icon>\n                                          </button>\n                                      </div>\n                                  </div>\n                              </div>\n                          </div>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"button-wrapper\">\n                  <div matTooltip=\"{{'SAVE_AS_PRESET' | localize}}\">\n                      <button mat-icon-button (click)=\"saveAsPreset($event)\">\n                          <mat-icon class=\"homedecorator-material-icons\">save</mat-icon>\n                      </button>\n                  </div>\n              </div>\n          </div>\n      </ng-container>\n      <edit-light *ngIf=\"showEditPopup\"\n                  [light]=\"lightToEdit\"\n                  (okClick)=\"handleSaveLight($event)\"\n                  (cancelClick)=\"handleCancelLight($event)\"\n      ></edit-light>\n      <edit-lightplan *ngIf=\"showPlanEditPopup\"\n                      [lightPreset]=\"lightPresetsService.activeLightPreset\"\n                      (saveClick)=\"savePreset($event)\"\n                      (cancelClick)=\"showPlanEditPopup = false\"\n      ></edit-lightplan>\n  ", 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__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "localize": LocalizePipe }, animations: [
+  LightplanComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LightplanComponent, selector: "lightplan", host: { listeners: { "document:mousemove": "moveDialog($event)", "document:mouseup": "cancelMoveDialog($event)" }, properties: { "class.show": "this.showDialog", "class.popup-showing": "this.showPlanEditPopup" } }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialog"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "\n      <ng-container *ngIf=\"showDialog\">\n          <div class=\"lightplan-wrapper\" #dialog @showHideDialog [style.top.px]=\"top\" [style.left.px]=\"left\">\n              <div class=\"title-bar\">\n                  <div class=\"title-bar-move\" (mousedown)=\"handleTitleMouseMove($event)\"></div>\n                  <button mat-icon-button class=\"hide-dialog\" (click)=\"hideDialog()\">\n                      <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">close</mat-icon>\n                  </button>\n              </div>\n              <div class=\"content-wrapper\">\n                  <div class=\"section\">\n                      <div class=\"edit-lightplan-wrapper\">\n                          <h4 [textContent]=\"'LIGHTPLAN' | localize\"></h4>\n                          <div class=\"edit-button-wrapper\">\n                              <div matTooltip=\"{{'ADD' | localize}}\">\n                                  <button mat-icon-button (click)=\"newPreset()\">\n                                      <mat-icon class=\"homedecorator-material-icons\">add</mat-icon>\n                                  </button>\n                              </div>\n                          </div>\n                      </div>\n                      <div class=\"light-preset-selection\">\n                          <mat-select class=\"dropdown-container\" [ngModel]=\"lightPresetsService.activeLightPreset.name\" panelClass=\"dropdown-container\">\n                              <mat-select-trigger>\n                                  {{ lightPresetsService.activeLightPreset.name }}\n                              </mat-select-trigger>\n                              <div *ngFor=\"let lightPreset of lightPresetsService.loadedLightPresets\">\n                                  <mat-option [value]=\"lightPreset.name\" (click)=\"loadPreset(lightPreset)\">\n                                      {{ lightPreset.name }}\n                                      <mat-icon *ngIf=\"lightPreset.dirty\" class=\"homedecorator-material-icons\" (click)=\"saveAsPreset($event, lightPreset)\">save</mat-icon>\n                                  </mat-option>\n                              </div>\n                          </mat-select>\n                          <div matTooltip=\"{{'EDIT' | localize}}\">\n                              <button mat-icon-button (click)=\"editPreset(true)\">\n                                  <mat-icon class=\"homedecorator-material-icons\">edit</mat-icon>\n                              </button>\n                          </div>\n                          <div matTooltip=\"{{'REMOVE' | localize}}\">\n                              <button mat-icon-button (click)=\"deletePreset()\">\n                                  <mat-icon class=\"homedecorator-material-icons\">delete</mat-icon>\n                              </button>\n                          </div>\n                      </div>\n                  </div>\n                  <div class=\"section\">\n                      <h4 [textContent]=\"'GROUP' | localize\"></h4>\n                      <span [textContent]=\"lightPresetsService.activeLightPreset.group\"></span>\n                  </div>\n                  <div class=\"section\">\n                      <h4 [textContent]=\"'NAVIGATOR_TYPE' | localize\"></h4>\n                      <span [textContent]=\"lightPresetsService.activeLightPreset.navigatorType\"></span>\n                  </div>\n                  <div class=\"section\">\n                      <h4 [textContent]=\"'RENDER' | localize\"></h4>\n                      <div class=\"section-row\">\n                          <span [textContent]=\"'SHADOW_MAP_TYPE' | localize\"></span>\n                          <span [textContent]=\"lightPresetsService.activeLightPreset.shadowMapType\"></span>\n                      </div>\n                      <div class=\"section-row\">\n                          <span [textContent]=\"'OUTPUT_ENCODING' | localize\"></span>\n                          <span [textContent]=\"lightPresetsService.activeLightPreset.outputEncoding\"></span>\n                      </div>\n                      <div class=\"section-row\">\n                          <span [textContent]=\"'TONE_MAPPING_EXPOSURE' | localize\"></span>\n                          <span [textContent]=\"lightPresetsService.activeLightPreset.toneMappingExposure\"></span>\n                      </div>\n                      <div class=\"section-row\">\n                          <span [textContent]=\"'PHYSICALLY_CORRECT_LIGHTS' | localize\"></span>\n                          <span [textContent]=\"(lightPresetsService.activeLightPreset.physicallyCorrectLights ? 'TRUE' : 'FALSE') | localize\"></span>\n                      </div>\n                  </div>\n                  <div class=\"section\">\n                      <h4 [textContent]=\"'ADD' | localize\"></h4>\n                      <div class=\"button-row\">\n                          <button mat-button class=\"add-light\" (click)=\"addLight(light.SpotLight)\" fxLayout=\"row\" fxLayoutalign=\"center center\">\n                              <mat-icon class=\"homedecorator-material-icons\">wb_incandescent</mat-icon>\n                              {{ 'SPOTLIGHT' | localize }}\n                          </button>\n                          <button mat-button class=\"add-light\" (click)=\"addLight(light.DirectionalLight)\" fxLayout=\"row\" fxLayoutalign=\"center center\">\n                              <mat-icon class=\"homedecorator-material-icons\">wb_incandescent</mat-icon>\n                              {{ 'DIRECTIONAL' | localize }}\n                          </button>\n                          <button mat-button class=\"add-light\" (click)=\"addLight(light.HemisphereLight)\" fxLayout=\"row\" fxLayoutalign=\"center center\">\n                              <mat-icon class=\"homedecorator-material-icons\">wb_incandescent</mat-icon>\n                              {{ 'HEMISPHERE' | localize }}\n                          </button>\n                          <button mat-button class=\"add-light\" (click)=\"addLight(light.AmbientLight)\" fxLayout=\"row\" fxLayoutalign=\"center center\">\n                              <mat-icon class=\"homedecorator-material-icons\">wb_incandescent</mat-icon>\n                              {{ 'AMBIENT' | localize }}\n                          </button>\n                          <button mat-button class=\"add-light\" (click)=\"addLight(light.PointLight)\" fxLayout=\"row\" fxLayoutalign=\"center center\">\n                              <mat-icon class=\"homedecorator-material-icons\">wb_incandescent</mat-icon>\n                              {{ 'POINT' | localize }}\n                          </button>\n                      </div>\n                  </div>\n                  <div class=\"section\">\n                      <h4 [textContent]=\"'EDIT' | localize\"></h4>\n                      <div class=\"scene-lights\">\n                          <div class=\"scene-light\" *ngFor=\"let light of getLights(); let index = index\">\n                              <div class=\"edit-wrapper\">\n                                  <div class=\"light-name\" [textContent]=\"light.name\"></div>\n                                  <div class=\"edit-button-wrapper\">\n                                      <div matTooltip=\"{{'EDIT' | localize}}\">\n                                          <button mat-icon-button (click)=\"editLight(index)\">\n                                              <mat-icon class=\"homedecorator-material-icons\">edit</mat-icon>\n                                          </button>\n                                      </div>\n                                      <div matTooltip=\"{{'REMOVE' | localize}}\">\n                                          <button mat-icon-button (click)=\"removeLight(index)\">\n                                              <mat-icon class=\"homedecorator-material-icons\">delete</mat-icon>\n                                          </button>\n                                      </div>\n                                  </div>\n                              </div>\n                          </div>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"button-wrapper\">\n                  <div matTooltip=\"{{'SAVE_AS_PRESET' | localize}}\">\n                      <button mat-icon-button (click)=\"saveAsPreset($event)\">\n                          <mat-icon class=\"homedecorator-material-icons\">save</mat-icon>\n                      </button>\n                  </div>\n              </div>\n          </div>\n      </ng-container>\n      <edit-light *ngIf=\"showEditPopup\"\n                  [light]=\"lightToEdit\"\n                  (okClick)=\"handleSaveLight($event)\"\n                  (cancelClick)=\"handleCancelLight($event)\"\n      ></edit-light>\n      <edit-lightplan *ngIf=\"showPlanEditPopup\"\n                      [lightPreset]=\"lightPresetsService.activeLightPreset\"\n                      (saveClick)=\"savePreset($event)\"\n                      (cancelClick)=\"showPlanEditPopup = false\"\n      ></edit-lightplan>\n  ", 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__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i12__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12__namespace.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "localize": LocalizePipe }, animations: [
           animations.trigger('showHideDialog', [
               animations.state('void', animations.style({ opacity: 0 })),
               animations.state('*', animations.style({ opacity: 1 })),
@@ -28843,7 +28854,7 @@
           this.addRenderOptions(this._sceneService.renderer);
           this.addLights(this._sceneService.scene);
       };
-      SceneControlComponent.prototype.addRenderOptions = function (renderer) {
+      SceneControlComponent.prototype.addRenderOptions = function (renderer /*| WebGPURenderer*/) {
           var _this = this;
           var folder = this.gui.addFolder('renderer');
           folder.add(renderer, 'toneMappingExposure', 0, 5).onChange(function () {
@@ -30849,7 +30860,7 @@
       });
   };
   var RenderDialogComponent = /** @class */ (function () {
-      function RenderDialogComponent(cameraService, renderService, messageService, _utilsService, _domSanitizer, _settingsService, _newRenderService, _3dmRenderApi) {
+      function RenderDialogComponent(cameraService, renderService, messageService, _utilsService, _domSanitizer, _settingsService, _newRenderService, _3dmRenderApi, _dialog) {
           var _this = this;
           this.cameraService = cameraService;
           this.renderService = renderService;
@@ -30859,6 +30870,7 @@
           this._settingsService = _settingsService;
           this._newRenderService = _newRenderService;
           this._3dmRenderApi = _3dmRenderApi;
+          this._dialog = _dialog;
           this.renderStatus = RenderStatus;
           this.iconName = IconName;
           this.renderModes = RenderModes;
@@ -31057,6 +31069,10 @@
           this.messageService.emit(MessageType.ShowLoadingIndicator, { title: 'Uploading...' });
           this._utilsService.prepRoomForRender(false, renderInput);
       };
+      RenderDialogComponent.prototype.cancelBlenderRender = function () {
+          this.messageService.emit(MessageType.HideLoadingIndicator);
+          this._dialog.closeAll();
+      };
       RenderDialogComponent.prototype.saveImage = function (url) {
           var link = document.createElement('a');
           link.setAttribute('target', '_blank');
@@ -31129,8 +31145,8 @@
       };
       return RenderDialogComponent;
   }());
-  RenderDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RenderDialogComponent, deps: [{ token: CameraService }, { token: RenderService }, { token: MessageBusService }, { token: UtilsService }, { token: i1__namespace.DomSanitizer }, { token: HomedecoratorSettingsService }, { token: NewRenderService }, { token: ApiServiceModule }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  RenderDialogComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i9__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3__namespace$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__namespace$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3__namespace$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: i5__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i15__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i19__namespace.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__namespace.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__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1__namespace$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.MatLabel, selector: "mat-label" }], pipes: { "localize": LocalizePipe }, animations: [
+  RenderDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RenderDialogComponent, deps: [{ token: CameraService }, { token: RenderService }, { token: MessageBusService }, { token: UtilsService }, { token: i1__namespace.DomSanitizer }, { token: HomedecoratorSettingsService }, { token: NewRenderService }, { token: ApiServiceModule }, { token: i1__namespace$1.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  RenderDialogComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i12__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3__namespace$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__namespace$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3__namespace$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: i5__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i16__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i19__namespace.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__namespace.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__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1__namespace$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.MatLabel, selector: "mat-label" }], pipes: { "localize": LocalizePipe }, animations: [
           animations.trigger('slideInOut', [
               animations.state('1', animations.style({ 'max-height': '*' })),
               animations.state('0', animations.style({ 'max-height': '0px' })),
@@ -31151,7 +31167,7 @@
                       templateUrl: './render-dialog.component.html',
                       styleUrls: ['./render-dialog.component.scss']
                   }]
-          }], ctorParameters: function () { return [{ type: CameraService }, { type: RenderService }, { type: MessageBusService }, { type: UtilsService }, { type: i1__namespace.DomSanitizer }, { type: HomedecoratorSettingsService }, { type: NewRenderService }, { type: ApiServiceModule }]; }, propDecorators: { renderImageField: [{
+          }], ctorParameters: function () { return [{ type: CameraService }, { type: RenderService }, { type: MessageBusService }, { type: UtilsService }, { type: i1__namespace.DomSanitizer }, { type: HomedecoratorSettingsService }, { type: NewRenderService }, { type: ApiServiceModule }, { type: i1__namespace$1.MatDialog }]; }, propDecorators: { renderImageField: [{
                   type: i0.ViewChild,
                   args: ['render_image', { static: true }]
               }], imageWidthField: [{
@@ -32832,7 +32848,7 @@
       return LiteSelectorComponent;
   }());
   LiteSelectorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LiteSelectorComponent, deps: [{ token: HomedecoratorConnectorService }, { token: BuildFurnitureService }, { token: HomedecoratorSettingsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  LiteSelectorComponent.ɵcmp = i0__namespace.ɵɵ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: i0.TemplateRef, static: true }], ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+  LiteSelectorComponent.ɵcmp = i0__namespace.ɵɵ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: i0.TemplateRef, static: true }], ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
           animations.trigger('showSelections', [
               animations.state('void', animations.style({ 'transform': 'translateX(100%)', opacity: 0 })),
               animations.state('*', animations.style({ 'transform': 'translateX(0%)', opacity: 1 })),
@@ -33595,7 +33611,7 @@
       });
   };
   var FloorplannerComponent = /** @class */ (function () {
-      function FloorplannerComponent(_floorplanService, _messageBusService, _configurationService, _dimensionService, _viewModeService) {
+      function FloorplannerComponent(_floorplanService, _messageBusService, _configurationService, _dimensionService, _viewModeService, _roomService) {
           var _a, _b;
           var _this = this;
           this._floorplanService = _floorplanService;
@@ -33603,6 +33619,7 @@
           this._configurationService = _configurationService;
           this._dimensionService = _dimensionService;
           this._viewModeService = _viewModeService;
+          this._roomService = _roomService;
           this.selectedWallChange = new rxjs.Subject();
           this._viewScaleMin = 50;
           this._viewScaleMax = 300;
@@ -33732,7 +33749,11 @@
           }
       };
       FloorplannerComponent.prototype.showStartMessage = function () {
-          this._diagramBackground.src = '';
+          if (this._diagramBackground) {
+              this._diagramBackground.src = '';
+          }
+          this._floorplanService.reset();
+          this._draw();
           this.showStartingMessages = true;
       };
       FloorplannerComponent.prototype.setMode = function (mode) {
@@ -34203,7 +34224,13 @@
           this.setSelectedMode(value);
       };
       FloorplannerComponent.prototype.setDiagramSettings = function (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;
@@ -34889,8 +34916,8 @@
       };
       return FloorplannerComponent;
   }());
-  FloorplannerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FloorplannerComponent, deps: [{ token: FloorplanService }, { token: MessageBusService }, { token: ConfigurationService }, { token: DimensioningService }, { token: ViewModeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  FloorplannerComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef, static: true }], ngImport: i0__namespace, 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__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i7__namespace$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe } });
+  FloorplannerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FloorplannerComponent, deps: [{ token: FloorplanService }, { token: MessageBusService }, { token: ConfigurationService }, { token: DimensioningService }, { token: ViewModeService }, { token: RoomService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  FloorplannerComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef, static: true }], ngImport: i0__namespace, 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__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i8__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FloorplannerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -34898,7 +34925,7 @@
                       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: i0.ViewChild,
                   args: ['floorplannerCanvas', { read: i0.ElementRef, static: true }]
               }], selectedWallChange: [{
@@ -35940,9 +35967,10 @@
       TextureEditorOptions[TextureEditorOptions["Both"] = 3] = "Both";
   })(TextureEditorOptions || (TextureEditorOptions = {}));
   var TextureEditorComponent = /** @class */ (function () {
-      function TextureEditorComponent(_settingsService) {
+      function TextureEditorComponent(messageService, _settingsService) {
           var _a;
           var _this = this;
+          this.messageService = messageService;
           this._settingsService = _settingsService;
           this.textureType = TextureType;
           this.dragNDropEnforced = false;
@@ -35984,6 +36012,7 @@
               };
           };
           // this.dampSetTexture = this.createDampener(this.setTexture);
+          this._subs.push(this.messageService.subscribe(MessageType.ChangeTexture, function (texture) { return _this.setNewTexture(texture); }));
       }
       TextureEditorComponent.prototype.ngOnInit = function () {
           var _this = this;
@@ -36005,7 +36034,9 @@
       TextureEditorComponent.prototype.ngOnDestroy = function () {
           var _this = this;
           // this.dampSetTexture.release();
-          this._subs.forEach(function (s) { s.unsubscribe(); });
+          this._subs.forEach(function (s) {
+              s.unsubscribe();
+          });
           this.canvas.nativeElement.removeEventListener('mousedown', function () { return _this.onMouseDown(); });
           this.canvas.nativeElement.removeEventListener('mouseup', function () { return _this.onMouseUp(); });
           this.canvas.nativeElement.removeEventListener('mousemove', function (e) { return _this.onMouseMove(e); });
@@ -36029,6 +36060,9 @@
               this.initializeTexture();
           }
       };
+      TextureEditorComponent.prototype.setNewTexture = function (texture) {
+          this.plainTexture = texture;
+      };
       TextureEditorComponent.prototype.handleRemoveTextureClick = function (event) {
           this.imageHasBeenResized = false;
           this.removeTexture.emit(event);
@@ -36242,7 +36276,12 @@
               return __generator(this, function (_a) {
                   switch (_a.label) {
                       case 0:
-                          texture = this.texturePlane ? this.texturePlane.getTexture() : this.plainTexture;
+                          if (this.texturePlane && this.texturePlane.getTexture() !== undefined) {
+                              texture = this.texturePlane.getTexture();
+                          }
+                          else {
+                              texture = this.plainTexture;
+                          }
                           if (!texture) return [3 /*break*/, 2];
                           return [4 /*yield*/, this._loadTextureData(texture, false)];
                       case 1:
@@ -36600,8 +36639,8 @@
       };
       return TextureEditorComponent;
   }());
-  TextureEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextureEditorComponent, deps: [{ token: HomedecoratorSettingsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  TextureEditorComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$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__namespace$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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$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__namespace$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__namespace$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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextureEditorComponent, deps: [{ token: MessageBusService }, { token: HomedecoratorSettingsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  TextureEditorComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$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__namespace$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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$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__namespace$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__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], pipes: { "localize": LocalizePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextureEditorComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -36609,7 +36648,7 @@
                       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: i0.ViewChild,
                   args: ['fileInput', { static: true }]
               }], canvas: [{
@@ -37473,7 +37512,7 @@
       return CustomShapeCreatorComponent;
   }());
   CustomShapeCreatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomShapeCreatorComponent, deps: [{ token: HudService }, { token: SceneService }, { token: RoomService }, { token: ItemService }, { token: SceneEventService }, { token: MessageBusService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CustomShapeCreatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomShapeCreatorComponent, selector: "rp-custom-shape-creator", inputs: { shape: "shape" }, ngImport: i0__namespace, 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__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10__namespace$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__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.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__namespace$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__namespace$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__namespace$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__namespace.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__namespace.MatLabel, selector: "mat-label" }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "localize": LocalizePipe } });
+  CustomShapeCreatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomShapeCreatorComponent, selector: "rp-custom-shape-creator", inputs: { shape: "shape" }, ngImport: i0__namespace, 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__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10__namespace$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__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.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__namespace$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__namespace$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__namespace$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__namespace.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__namespace.MatLabel, selector: "mat-label" }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "localize": LocalizePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomShapeCreatorComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -37726,6 +37765,8 @@
                           return [4 /*yield*/, MaterialUtils.FromImage(texture)];
                       case 1:
                           _a[_b] = new (_c.apply(THREE.MeshPhongMaterial, [void 0, (_d.map = _e.sent(),
+                                  _d.transparent = true,
+                                  _d.alphaTest = 0.5,
                                   _d)]))();
                           _e.label = 2;
                       case 2:
@@ -37743,7 +37784,7 @@
       return CustomCylinderCreatorComponent;
   }());
   CustomCylinderCreatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomCylinderCreatorComponent, deps: [{ token: HudService }, { token: SceneService }, { token: ItemService }, { token: RoomService }, { token: SceneEventService }, { token: MessageBusService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CustomCylinderCreatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomCylinderCreatorComponent, selector: "custom-cylinder-creator", inputs: { shape: "shape" }, ngImport: i0__namespace, 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__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10__namespace$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__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.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__namespace$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__namespace$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__namespace$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__namespace.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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatLabel, selector: "mat-label" }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "localize": LocalizePipe } });
+  CustomCylinderCreatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomCylinderCreatorComponent, selector: "custom-cylinder-creator", inputs: { shape: "shape" }, ngImport: i0__namespace, 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__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10__namespace$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__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.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__namespace$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__namespace$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__namespace$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__namespace.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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatLabel, selector: "mat-label" }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "localize": LocalizePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomCylinderCreatorComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -40335,7 +40376,7 @@
       return ModelDialogFurnitureListComponent;
   }());
   ModelDialogFurnitureListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ModelDialogFurnitureListComponent, deps: [{ token: HomedecoratorIconCacheService }, { token: HomedecoratorSettingsService }, { token: ItemService }, { token: GoogleTagManagerService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ModelDialogFurnitureListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ModelDialogFurnitureListComponent, selector: "dialog-furniture-list", inputs: { list: "list", label: "label", subLabel: "subLabel", showCopy: "showCopy", showDelete: "showDelete", showTotals: "showTotals" }, ngImport: i0__namespace, template: "\n    <ng-container *ngIf=\"list.length > 0\">\n      <div class=\"title\">\n        <h4 class=\"label\" *ngIf=\"label\" [textContent]=\"label | localize\"></h4>\n        <p class=\"sub-label\" *ngIf=\"subLabel\" [textContent]=\"subLabel | localize\"></p>\n      </div>\n\n\n      <ul class=\"furniture-list\">\n        <li *ngFor=\"let item of list; let i = index\" [attr.data-index]=\"i\" class=\"furniture-item\">\n          <div class=\"furniture-item-wrap\">\n            <div class=\"furniture-item-left\">\n              <div class=\"furniture-item-wrapper\">\n                <co-icon *ngIf=\"item.errorMessages.length > 0\" class=\"error-expand-handle\" [class.expanded]=\"item.showErrors\"\n                         [iconData]=\"iconService.getIcon(icon.ArrowPointDown)\" (click)=\"item.showErrors = !item.showErrors\"></co-icon>\n                <span class=\"furniture-item-title\" [textContent]=\"item.name\"></span>\n                <button *ngIf=showCopy class=\"furniture-item-copy\"\n                        [textContent]=\"item.toggle ? ('COPIED' | localize) : ('COPY' | localize)\"\n                        (click)=\"copyFurnitureName(item)\"></button>\n              </div>\n              <div class=\"error-messages-wrapper\" *ngIf=\"item.showErrors\" @showErrorMessages>\n                <error-messages [messages]=\"item.errorMessages\"></error-messages>\n              </div>\n            </div>\n            <div class=\"furniture-item-right\" *ngIf=\"showDelete\">\n              <button class=\"furniture-item-delete\" matTooltip=\"{{'REMOVE' | localize}}\"\n                      (click)=\"removeFurniture(item)\">\n                <mat-icon class=\"homedecorator-material-icons\">delete</mat-icon>\n              </button>\n            </div>\n          </div>\n          <!-- add conversionbtn here-->\n          <div class=\"furniture-item-conversion-wrap\" *ngIf=\"settingsService.settings.showConversionButtons\">\n            <div class=\"furniture-item-conversion-row furniture-item-conversion-button-wrap\">\n              <button\n                (click)=\"sendConversionToTagManager(item)\"\n                class=\"furniture-item-button furniture-item-conversion\"\n                [ngClass]=\"item.metaData.conversionGTMSend ? 'furniture-item-conversion-highlight':''\">\n                <mat-icon class=\"homedecorator-material-icons\">add_shopping_cart</mat-icon>\n              </button>\n            </div>\n            <div class=\"furniture-item-conversion-row furniture-item-conversion-input-wrap\">\n              <label *ngIf=\"item.metaData.conversionGTMSend\" class=\"furniture-item-conversion-input-label\">\n                {{ 'SALESPRICE' | localize }}\n              </label>\n              <input\n                type=\"text\"\n                [value]=\"item.metaData.conversionSubmittedPrice ? item.metaData.conversionSubmittedPrice : ''\"\n                [disabled]=\"!item.metaData.conversionGTMSend\"\n                (keydown.enter)=\"getInputValue($event, item)\"\n                (keydown.tab)=\"getInputValue($event, item)\"\n                [id]=\"item.instanceId\"\n              >\n              <button\n                class=\"input-binded-button\"\n                (click)=\"submitInput(item.instanceId, item)\"\n                [ngClass]=\"item.metaData.conversionSubmittedPrice && item.metaData.conversionSubmittedPrice !== '' ? 'input-binded-button-highlight' : ''\"\n              >\n                <mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon>\n              </button>\n            </div>\n          </div>\n        </li>\n      </ul>\n\n      <div class=\"furniture-item-totals\" *ngIf=\"showTotals && settingsService.settings.showConversionButtons\">\n        <div class=\"furniture-item-total-row furniture-item-total\">\n          <span>{{ 'TOTALPRICE' | localize }}: {{ totalPrice }}</span>\n        </div>\n        <div class=\"furniture-item-total-row furniture-item-total-submit\">\n          <button\n            name=\"submit project conversion\"\n            alt=\"submit project conversion\"\n            class=\"furniture-item-button furniture-item-total-button\"\n            (click)=\"submitTotalPriceEvent()\"\n            [ngClass]=\"totalEventSubmitted ? 'furniture-item-total-button-highlight' : ''\">\n            <mat-icon class=\"homedecorator-material-icons\" *ngIf=\"!totalEventSubmitted\">arrow_upward</mat-icon>\n            <mat-icon class=\"homedecorator-material-icons\" *ngIf=\"totalEventSubmitted\">check_circle</mat-icon>\n          </button>\n        </div>\n      </div>\n\n    </ng-container>\n  ", isInline: true, styles: [".title{margin-bottom:10px}.label{margin:0}.sub-label{font-size:12px;font-style:italic;margin:0}.furniture-item-button{-webkit-user-select:none;user-select:none;width:36px;height:36px;color:#fff;background:#3760a1;border:none;border-radius:100%;cursor:pointer;flex-shrink:0}.furniture-item-button .mat-icon{font-size:18px;line-height:36px;width:auto;height:auto}.furniture-list{display:flex;flex-direction:column;width:100%;padding:0;overflow:hidden;margin:0 0 10px}.furniture-list .furniture-item{display:flex;align-items:flex-start;width:100%;margin:2px 0 0;overflow:hidden}.furniture-list .furniture-item.furniture-model .furniture-item-left{padding-right:10px}.furniture-list .furniture-item .furniture-item-wrapper{display:flex;align-items:center}.furniture-list .furniture-item .furniture-item-wrapper .error-expand-handle{cursor:pointer;transform:rotate(0);height:40px;width:40px}.furniture-list .furniture-item .furniture-item-wrapper .error-expand-handle.expanded{transform:rotate(180deg);transition:.3s ease-in-out}.furniture-list .furniture-item .furniture-item-wrap{border:1px solid #dce4ea;padding:4px 0 4px 10px;display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left{display:flex;flex-direction:column;width:80%;font-size:13px;margin:0}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-title{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:32px}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-copy{float:right;border:none;padding:0 15px;margin:0 0 0 10px;line-height:32px;font-size:12px;text-transform:uppercase;background:transparent;color:#dce4ea;font-weight:600;cursor:pointer}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-copy:focus{outline:0}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-copy:hover{color:#000000de}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-right{display:flex;padding-top:4px;width:20%;flex-direction:column;justify-content:center;align-items:center}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-right .furniture-item-delete{-webkit-user-select:none;user-select:none;width:36px;height:36px;color:#fff;background:#3760a1;border:none;border-radius:100%;cursor:pointer;flex-shrink:0}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-right .furniture-item-delete .mat-icon{font-size:18px;line-height:36px;width:auto;height:auto}.furniture-list .furniture-item .furniture-item-conversion-wrap{display:flex;flex-direction:row;flex-wrap:wrap;padding-top:9px;box-sizing:border-box}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-row{display:flex;flex-direction:column;justify-content:center;align-items:center}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-button-wrap{width:30%}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap{width:70%;position:relative}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap input{width:90%;border:1px solid #e8eceb;border-radius:3px;box-sizing:border-box;padding:10px 5px}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap input:disabled{background:#eee}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .furniture-item-conversion-input-label{font-size:8px;position:absolute;top:2px;left:10px}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .input-binded-button{background:none;border:none;cursor:pointer;position:absolute;right:0;top:10px;color:#000}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .input-binded-button .mat-icon{height:14px;width:14px;font-size:14px}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .input-binded-button-highlight{color:#009a6d}.furniture-item-conversion-highlight{background:#009a6d}.furniture-item-conversion-highlight svg{fill:#fff}::ng-deep error-messages .error-message{font-weight:bold;font-size:12px}::ng-deep error-messages .error-description{font-size:11px}.furniture-item-totals{display:flex;flex-direction:row;justify-content:right;align-items:center}.furniture-item-totals .furniture-item-total-row{display:flex;flex-direction:column;margin-left:15px}.furniture-item-totals .furniture-item-total-button-highlight{background:#009a6d;color:#fff}\n"], components: [{ type: i4__namespace.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: ErrorMessageComponent, selector: "error-messages", inputs: ["messages"] }, { type: i5__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "localize": LocalizePipe }, animations: [
+  ModelDialogFurnitureListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ModelDialogFurnitureListComponent, selector: "dialog-furniture-list", inputs: { list: "list", label: "label", subLabel: "subLabel", showCopy: "showCopy", showDelete: "showDelete", showTotals: "showTotals" }, ngImport: i0__namespace, template: "\n    <ng-container *ngIf=\"list.length > 0\">\n      <div class=\"title\">\n        <h4 class=\"label\" *ngIf=\"label\" [textContent]=\"label | localize\"></h4>\n        <p class=\"sub-label\" *ngIf=\"subLabel\" [textContent]=\"subLabel | localize\"></p>\n      </div>\n\n\n      <ul class=\"furniture-list\">\n        <li *ngFor=\"let item of list; let i = index\" [attr.data-index]=\"i\" class=\"furniture-item\">\n          <div class=\"furniture-item-wrap\">\n            <div class=\"furniture-item-left\">\n              <div class=\"furniture-item-wrapper\">\n                <co-icon *ngIf=\"item.errorMessages.length > 0\" class=\"error-expand-handle\" [class.expanded]=\"item.showErrors\"\n                         [iconData]=\"iconService.getIcon(icon.ArrowPointDown)\" (click)=\"item.showErrors = !item.showErrors\"></co-icon>\n                <span class=\"furniture-item-title\" [textContent]=\"item.name ? item.name : item.sku\"></span>\n                <button *ngIf=showCopy class=\"furniture-item-copy\"\n                        [textContent]=\"item.toggle ? ('COPIED' | localize) : ('COPY' | localize)\"\n                        (click)=\"copyFurnitureName(item)\"></button>\n              </div>\n              <div class=\"error-messages-wrapper\" *ngIf=\"item.showErrors\" @showErrorMessages>\n                <error-messages [messages]=\"item.errorMessages\"></error-messages>\n              </div>\n            </div>\n            <div class=\"furniture-item-right\" *ngIf=\"showDelete\">\n              <button class=\"furniture-item-delete\" matTooltip=\"{{'REMOVE' | localize}}\"\n                      (click)=\"removeFurniture(item)\">\n                <mat-icon class=\"homedecorator-material-icons\">delete</mat-icon>\n              </button>\n            </div>\n          </div>\n          <!-- add conversionbtn here-->\n          <div class=\"furniture-item-conversion-wrap\" *ngIf=\"settingsService.settings.showConversionButtons\">\n            <div class=\"furniture-item-conversion-row furniture-item-conversion-button-wrap\">\n              <button\n                (click)=\"sendConversionToTagManager(item)\"\n                class=\"furniture-item-button furniture-item-conversion\"\n                [ngClass]=\"item.metaData.conversionGTMSend ? 'furniture-item-conversion-highlight':''\">\n                <mat-icon class=\"homedecorator-material-icons\">add_shopping_cart</mat-icon>\n              </button>\n            </div>\n            <div class=\"furniture-item-conversion-row furniture-item-conversion-input-wrap\">\n              <label *ngIf=\"item.metaData.conversionGTMSend\" class=\"furniture-item-conversion-input-label\">\n                {{ 'SALESPRICE' | localize }}\n              </label>\n              <input\n                type=\"text\"\n                [value]=\"item.metaData.conversionSubmittedPrice ? item.metaData.conversionSubmittedPrice : ''\"\n                [disabled]=\"!item.metaData.conversionGTMSend\"\n                (keydown.enter)=\"getInputValue($event, item)\"\n                (keydown.tab)=\"getInputValue($event, item)\"\n                [id]=\"item.instanceId\"\n              >\n              <button\n                class=\"input-binded-button\"\n                (click)=\"submitInput(item.instanceId, item)\"\n                [ngClass]=\"item.metaData.conversionSubmittedPrice && item.metaData.conversionSubmittedPrice !== '' ? 'input-binded-button-highlight' : ''\"\n              >\n                <mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon>\n              </button>\n            </div>\n          </div>\n        </li>\n      </ul>\n\n      <div class=\"furniture-item-totals\" *ngIf=\"showTotals && settingsService.settings.showConversionButtons\">\n        <div class=\"furniture-item-total-row furniture-item-total\">\n          <span>{{ 'TOTALPRICE' | localize }}: {{ totalPrice }}</span>\n        </div>\n        <div class=\"furniture-item-total-row furniture-item-total-submit\">\n          <button\n            name=\"submit project conversion\"\n            alt=\"submit project conversion\"\n            class=\"furniture-item-button furniture-item-total-button\"\n            (click)=\"submitTotalPriceEvent()\"\n            [ngClass]=\"totalEventSubmitted ? 'furniture-item-total-button-highlight' : ''\">\n            <mat-icon class=\"homedecorator-material-icons\" *ngIf=\"!totalEventSubmitted\">arrow_upward</mat-icon>\n            <mat-icon class=\"homedecorator-material-icons\" *ngIf=\"totalEventSubmitted\">check_circle</mat-icon>\n          </button>\n        </div>\n      </div>\n\n    </ng-container>\n  ", isInline: true, styles: [".title{margin-bottom:10px}.label{margin:0}.sub-label{font-size:12px;font-style:italic;margin:0}.furniture-item-button{-webkit-user-select:none;user-select:none;width:36px;height:36px;color:#fff;background:#3760a1;border:none;border-radius:100%;cursor:pointer;flex-shrink:0}.furniture-item-button .mat-icon{font-size:18px;line-height:36px;width:auto;height:auto}.furniture-list{display:flex;flex-direction:column;width:100%;padding:0;overflow:hidden;margin:0 0 10px}.furniture-list .furniture-item{display:flex;align-items:flex-start;width:100%;margin:2px 0 0;overflow:hidden}.furniture-list .furniture-item.furniture-model .furniture-item-left{padding-right:10px}.furniture-list .furniture-item .furniture-item-wrapper{display:flex;align-items:center}.furniture-list .furniture-item .furniture-item-wrapper .error-expand-handle{cursor:pointer;transform:rotate(0);height:40px;width:40px}.furniture-list .furniture-item .furniture-item-wrapper .error-expand-handle.expanded{transform:rotate(180deg);transition:.3s ease-in-out}.furniture-list .furniture-item .furniture-item-wrap{border:1px solid #dce4ea;padding:4px 0 4px 10px;display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left{display:flex;flex-direction:column;width:80%;font-size:13px;margin:0}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-title{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:32px}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-copy{float:right;border:none;padding:0 15px;margin:0 0 0 10px;line-height:32px;font-size:12px;text-transform:uppercase;background:transparent;color:#dce4ea;font-weight:600;cursor:pointer}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-copy:focus{outline:0}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-left .furniture-item-copy:hover{color:#000000de}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-right{display:flex;padding-top:4px;width:20%;flex-direction:column;justify-content:center;align-items:center}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-right .furniture-item-delete{-webkit-user-select:none;user-select:none;width:36px;height:36px;color:#fff;background:#3760a1;border:none;border-radius:100%;cursor:pointer;flex-shrink:0}.furniture-list .furniture-item .furniture-item-wrap .furniture-item-right .furniture-item-delete .mat-icon{font-size:18px;line-height:36px;width:auto;height:auto}.furniture-list .furniture-item .furniture-item-conversion-wrap{display:flex;flex-direction:row;flex-wrap:wrap;padding-top:9px;box-sizing:border-box}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-row{display:flex;flex-direction:column;justify-content:center;align-items:center}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-button-wrap{width:30%}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap{width:70%;position:relative}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap input{width:90%;border:1px solid #e8eceb;border-radius:3px;box-sizing:border-box;padding:10px 5px}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap input:disabled{background:#eee}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .furniture-item-conversion-input-label{font-size:8px;position:absolute;top:2px;left:10px}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .input-binded-button{background:none;border:none;cursor:pointer;position:absolute;right:0;top:10px;color:#000}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .input-binded-button .mat-icon{height:14px;width:14px;font-size:14px}.furniture-list .furniture-item .furniture-item-conversion-wrap .furniture-item-conversion-input-wrap .input-binded-button-highlight{color:#009a6d}.furniture-item-conversion-highlight{background:#009a6d}.furniture-item-conversion-highlight svg{fill:#fff}::ng-deep error-messages .error-message{font-weight:bold;font-size:12px}::ng-deep error-messages .error-description{font-size:11px}.furniture-item-totals{display:flex;flex-direction:row;justify-content:right;align-items:center}.furniture-item-totals .furniture-item-total-row{display:flex;flex-direction:column;margin-left:15px}.furniture-item-totals .furniture-item-total-button-highlight{background:#009a6d;color:#fff}\n"], components: [{ type: i4__namespace.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: ErrorMessageComponent, selector: "error-messages", inputs: ["messages"] }, { type: i5__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "localize": LocalizePipe }, animations: [
           animations.trigger('slideInOut', [
               animations.transition(':leave', [
                   animations.style({ transform: 'translateY(0%)', opacity: '1' }),
@@ -40352,7 +40393,7 @@
               type: i0.Component,
               args: [{
                       selector: 'dialog-furniture-list',
-                      template: "\n    <ng-container *ngIf=\"list.length > 0\">\n      <div class=\"title\">\n        <h4 class=\"label\" *ngIf=\"label\" [textContent]=\"label | localize\"></h4>\n        <p class=\"sub-label\" *ngIf=\"subLabel\" [textContent]=\"subLabel | localize\"></p>\n      </div>\n\n\n      <ul class=\"furniture-list\">\n        <li *ngFor=\"let item of list; let i = index\" [attr.data-index]=\"i\" class=\"furniture-item\">\n          <div class=\"furniture-item-wrap\">\n            <div class=\"furniture-item-left\">\n              <div class=\"furniture-item-wrapper\">\n                <co-icon *ngIf=\"item.errorMessages.length > 0\" class=\"error-expand-handle\" [class.expanded]=\"item.showErrors\"\n                         [iconData]=\"iconService.getIcon(icon.ArrowPointDown)\" (click)=\"item.showErrors = !item.showErrors\"></co-icon>\n                <span class=\"furniture-item-title\" [textContent]=\"item.name\"></span>\n                <button *ngIf=showCopy class=\"furniture-item-copy\"\n                        [textContent]=\"item.toggle ? ('COPIED' | localize) : ('COPY' | localize)\"\n                        (click)=\"copyFurnitureName(item)\"></button>\n              </div>\n              <div class=\"error-messages-wrapper\" *ngIf=\"item.showErrors\" @showErrorMessages>\n                <error-messages [messages]=\"item.errorMessages\"></error-messages>\n              </div>\n            </div>\n            <div class=\"furniture-item-right\" *ngIf=\"showDelete\">\n              <button class=\"furniture-item-delete\" matTooltip=\"{{'REMOVE' | localize}}\"\n                      (click)=\"removeFurniture(item)\">\n                <mat-icon class=\"homedecorator-material-icons\">delete</mat-icon>\n              </button>\n            </div>\n          </div>\n          <!-- add conversionbtn here-->\n          <div class=\"furniture-item-conversion-wrap\" *ngIf=\"settingsService.settings.showConversionButtons\">\n            <div class=\"furniture-item-conversion-row furniture-item-conversion-button-wrap\">\n              <button\n                (click)=\"sendConversionToTagManager(item)\"\n                class=\"furniture-item-button furniture-item-conversion\"\n                [ngClass]=\"item.metaData.conversionGTMSend ? 'furniture-item-conversion-highlight':''\">\n                <mat-icon class=\"homedecorator-material-icons\">add_shopping_cart</mat-icon>\n              </button>\n            </div>\n            <div class=\"furniture-item-conversion-row furniture-item-conversion-input-wrap\">\n              <label *ngIf=\"item.metaData.conversionGTMSend\" class=\"furniture-item-conversion-input-label\">\n                {{ 'SALESPRICE' | localize }}\n              </label>\n              <input\n                type=\"text\"\n                [value]=\"item.metaData.conversionSubmittedPrice ? item.metaData.conversionSubmittedPrice : ''\"\n                [disabled]=\"!item.metaData.conversionGTMSend\"\n                (keydown.enter)=\"getInputValue($event, item)\"\n                (keydown.tab)=\"getInputValue($event, item)\"\n                [id]=\"item.instanceId\"\n              >\n              <button\n                class=\"input-binded-button\"\n                (click)=\"submitInput(item.instanceId, item)\"\n                [ngClass]=\"item.metaData.conversionSubmittedPrice && item.metaData.conversionSubmittedPrice !== '' ? 'input-binded-button-highlight' : ''\"\n              >\n                <mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon>\n              </button>\n            </div>\n          </div>\n        </li>\n      </ul>\n\n      <div class=\"furniture-item-totals\" *ngIf=\"showTotals && settingsService.settings.showConversionButtons\">\n        <div class=\"furniture-item-total-row furniture-item-total\">\n          <span>{{ 'TOTALPRICE' | localize }}: {{ totalPrice }}</span>\n        </div>\n        <div class=\"furniture-item-total-row furniture-item-total-submit\">\n          <button\n            name=\"submit project conversion\"\n            alt=\"submit project conversion\"\n            class=\"furniture-item-button furniture-item-total-button\"\n            (click)=\"submitTotalPriceEvent()\"\n            [ngClass]=\"totalEventSubmitted ? 'furniture-item-total-button-highlight' : ''\">\n            <mat-icon class=\"homedecorator-material-icons\" *ngIf=\"!totalEventSubmitted\">arrow_upward</mat-icon>\n            <mat-icon class=\"homedecorator-material-icons\" *ngIf=\"totalEventSubmitted\">check_circle</mat-icon>\n          </button>\n        </div>\n      </div>\n\n    </ng-container>\n  ",
+                      template: "\n    <ng-container *ngIf=\"list.length > 0\">\n      <div class=\"title\">\n        <h4 class=\"label\" *ngIf=\"label\" [textContent]=\"label | localize\"></h4>\n        <p class=\"sub-label\" *ngIf=\"subLabel\" [textContent]=\"subLabel | localize\"></p>\n      </div>\n\n\n      <ul class=\"furniture-list\">\n        <li *ngFor=\"let item of list; let i = index\" [attr.data-index]=\"i\" class=\"furniture-item\">\n          <div class=\"furniture-item-wrap\">\n            <div class=\"furniture-item-left\">\n              <div class=\"furniture-item-wrapper\">\n                <co-icon *ngIf=\"item.errorMessages.length > 0\" class=\"error-expand-handle\" [class.expanded]=\"item.showErrors\"\n                         [iconData]=\"iconService.getIcon(icon.ArrowPointDown)\" (click)=\"item.showErrors = !item.showErrors\"></co-icon>\n                <span class=\"furniture-item-title\" [textContent]=\"item.name ? item.name : item.sku\"></span>\n                <button *ngIf=showCopy class=\"furniture-item-copy\"\n                        [textContent]=\"item.toggle ? ('COPIED' | localize) : ('COPY' | localize)\"\n                        (click)=\"copyFurnitureName(item)\"></button>\n              </div>\n              <div class=\"error-messages-wrapper\" *ngIf=\"item.showErrors\" @showErrorMessages>\n                <error-messages [messages]=\"item.errorMessages\"></error-messages>\n              </div>\n            </div>\n            <div class=\"furniture-item-right\" *ngIf=\"showDelete\">\n              <button class=\"furniture-item-delete\" matTooltip=\"{{'REMOVE' | localize}}\"\n                      (click)=\"removeFurniture(item)\">\n                <mat-icon class=\"homedecorator-material-icons\">delete</mat-icon>\n              </button>\n            </div>\n          </div>\n          <!-- add conversionbtn here-->\n          <div class=\"furniture-item-conversion-wrap\" *ngIf=\"settingsService.settings.showConversionButtons\">\n            <div class=\"furniture-item-conversion-row furniture-item-conversion-button-wrap\">\n              <button\n                (click)=\"sendConversionToTagManager(item)\"\n                class=\"furniture-item-button furniture-item-conversion\"\n                [ngClass]=\"item.metaData.conversionGTMSend ? 'furniture-item-conversion-highlight':''\">\n                <mat-icon class=\"homedecorator-material-icons\">add_shopping_cart</mat-icon>\n              </button>\n            </div>\n            <div class=\"furniture-item-conversion-row furniture-item-conversion-input-wrap\">\n              <label *ngIf=\"item.metaData.conversionGTMSend\" class=\"furniture-item-conversion-input-label\">\n                {{ 'SALESPRICE' | localize }}\n              </label>\n              <input\n                type=\"text\"\n                [value]=\"item.metaData.conversionSubmittedPrice ? item.metaData.conversionSubmittedPrice : ''\"\n                [disabled]=\"!item.metaData.conversionGTMSend\"\n                (keydown.enter)=\"getInputValue($event, item)\"\n                (keydown.tab)=\"getInputValue($event, item)\"\n                [id]=\"item.instanceId\"\n              >\n              <button\n                class=\"input-binded-button\"\n                (click)=\"submitInput(item.instanceId, item)\"\n                [ngClass]=\"item.metaData.conversionSubmittedPrice && item.metaData.conversionSubmittedPrice !== '' ? 'input-binded-button-highlight' : ''\"\n              >\n                <mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon>\n              </button>\n            </div>\n          </div>\n        </li>\n      </ul>\n\n      <div class=\"furniture-item-totals\" *ngIf=\"showTotals && settingsService.settings.showConversionButtons\">\n        <div class=\"furniture-item-total-row furniture-item-total\">\n          <span>{{ 'TOTALPRICE' | localize }}: {{ totalPrice }}</span>\n        </div>\n        <div class=\"furniture-item-total-row furniture-item-total-submit\">\n          <button\n            name=\"submit project conversion\"\n            alt=\"submit project conversion\"\n            class=\"furniture-item-button furniture-item-total-button\"\n            (click)=\"submitTotalPriceEvent()\"\n            [ngClass]=\"totalEventSubmitted ? 'furniture-item-total-button-highlight' : ''\">\n            <mat-icon class=\"homedecorator-material-icons\" *ngIf=\"!totalEventSubmitted\">arrow_upward</mat-icon>\n            <mat-icon class=\"homedecorator-material-icons\" *ngIf=\"totalEventSubmitted\">check_circle</mat-icon>\n          </button>\n        </div>\n      </div>\n\n    </ng-container>\n  ",
                       styleUrls: [
                           './model-dialog-furniture-list.component.scss'
                       ],
@@ -43840,7 +43881,7 @@
       return SaveDialogComponent;
   }());
   SaveDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SaveDialogComponent, deps: [{ token: i1$1.MAT_DIALOG_DATA }, { token: PermanentStoreService }, { token: HomedecoratorIconCacheService }, { token: i1__namespace$1.MatDialog }, { token: i1__namespace$1.MatDialogRef }, { token: MessageBusService }, { token: PresetsService }, { token: HomedecoratorDictionaryService }, { token: HomedecoratorSettingsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  SaveDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SaveDialogComponent, selector: "rp-save-dialog", ngImport: i0__namespace, 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__namespace$2.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i2__namespace$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i3__namespace$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__namespace.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }], directives: [{ type: i1__namespace$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3__namespace.MatLine, selector: "[mat-line], [matLine]" }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe } });
+  SaveDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SaveDialogComponent, selector: "rp-save-dialog", ngImport: i0__namespace, 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__namespace$2.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i2__namespace$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i3__namespace$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__namespace.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }], directives: [{ type: i1__namespace$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3__namespace.MatLine, selector: "[mat-line], [matLine]" }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SaveDialogComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -43886,8 +43927,8 @@
           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 };
@@ -43937,6 +43978,17 @@
                       _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(function () { return _this.draw(); });
           };
       }
@@ -43975,6 +44027,9 @@
               this.hiddenImage.nativeElement.src = url;
           }
       };
+      DrawDialogComponent.prototype.updateUserValue = function () {
+          this.customerInputLenght = this.inputLength.nativeElement.value;
+      };
       DrawDialogComponent.prototype.handleMouseDown = function (event) {
           if (this.draftingMode === 'movement') {
               this.isDragging = true;
@@ -44020,16 +44075,13 @@
           this.cameraZoom = Math.max(this.cameraZoom, this.minZoom);
       };
       DrawDialogComponent.prototype.handleMouseWheel = function (event) {
-          if (this.draftingMode === 'movement') {
-              var 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);
+          var 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);
           }
       };
       DrawDialogComponent.prototype.getEventLocation = function (e) {
@@ -44042,12 +44094,6 @@
       };
       DrawDialogComponent.prototype.setModus = function (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 = '';
-          }
       };
       DrawDialogComponent.prototype.submitLength = function () {
           if (this.inputLength.nativeElement.value !== '' && this.measurePoints.length === 2) {
@@ -44071,6 +44117,7 @@
                   backgroundWidth: this.hiddenImage.nativeElement.width,
                   cameraZoom: this.cameraZoom
               };
+              this._messageService.emit(MessageType.StartWithEmptyRoom);
               this._messageService.emit(MessageType.LoadScaledDiagram, output);
               this._dialog.closeAll();
           }
@@ -44123,7 +44170,7 @@
       return DrawDialogComponent;
   }());
   DrawDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DrawDialogComponent, deps: [{ token: i1$1.MAT_DIALOG_DATA }, { token: i1__namespace$1.MatDialogRef }, { token: i1__namespace$1.MatDialog }, { token: MessageBusService }, { token: UtilsService }, { token: PresetsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DrawDialogComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef, static: true }, { propertyName: "inputLength", first: true, predicate: ["inputLength"], descendants: true }, { propertyName: "hiddenImage", first: true, predicate: ["hiddenImage"], descendants: true }], ngImport: i0__namespace, 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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7__namespace$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__namespace$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "localize": LocalizePipe } });
+  DrawDialogComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef, static: true }, { propertyName: "inputLength", first: true, predicate: ["inputLength"], descendants: true }, { propertyName: "hiddenImage", first: true, predicate: ["hiddenImage"], descendants: true }], ngImport: i0__namespace, 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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8__namespace$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__namespace$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "localize": LocalizePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DrawDialogComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -44430,9 +44477,10 @@
       });
   };
   var ModelPreviewComponent = /** @class */ (function () {
-      function ModelPreviewComponent(data, settingsService, _dialogRef, _thirdPartyModelService, _messageService, _dialog, _adapterService, _lightPresetsService, _dictionaryService, _fontService) {
+      function ModelPreviewComponent(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;
@@ -44442,6 +44490,7 @@
           this._dictionaryService = _dictionaryService;
           this._fontService = _fontService;
           this.unitsOfMeasurement = 'cm';
+          this.units = ['cm', 'inches'];
           this.mathPi = Math.PI;
           this.showReferenceModel = true;
           this.floorSizeHeight = 10;
@@ -44451,16 +44500,23 @@
           this.distanceStep = 1;
           this.stackable = false;
           this.heightAdjustable = false;
+          this.selectedPlacement = 0;
           this._measurements = [];
+          this.icon = IconEnum;
           this.font = this._fontService.hudFont;
       }
       ModelPreviewComponent.prototype.ngOnInit = function () {
+          var _this = this;
           this.initScene();
           this.loadModel(this.data);
+          this._adapterService.getModelPlacementOptions().then(function (result) {
+              _this.placementOptions = result;
+          });
       };
       ModelPreviewComponent.prototype.ngOnDestroy = function () {
       };
       ModelPreviewComponent.prototype.initScene = function () {
+          var viewScale = 1.3;
           // init scene
           this.scenePreview = new THREE.Scene();
           // init renderer
@@ -44484,11 +44540,11 @@
           this.rendererPreview.outputColorSpace = THREE.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 THREE.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.OrbitControls(this.cameraPreview, this.rendererPreview.domElement);
           this.controls.update();
@@ -44618,6 +44674,7 @@
           }, options);
       };
       ModelPreviewComponent.prototype.scaleArticle = function () {
+          var model = this.scenePreview.getObjectByName(this.modelName);
           var inputHeight = this.heightArticle.nativeElement.value;
           var heightInMeter;
           if (this.unitsOfMeasurement === 'cm') {
@@ -44628,7 +44685,8 @@
           }
           // scale = this.bounding / heightInMeter and use Y as up/ height
           var 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);
       };
       ModelPreviewComponent.prototype.rotateModel = function (axis, degrees) {
           var model = this.scenePreview.getObjectByName(this.modelName);
@@ -44654,12 +44712,15 @@
           else if (axis === 'z') {
               model.position.z += amount;
           }
+          else if (axis === 'all') {
+              model.position.set(0, 0, 0);
+          }
           this._getBoundingBox(model);
       };
       ModelPreviewComponent.prototype.setUnit = function (event) {
           this.unitsOfMeasurement = event.value;
       };
-      ModelPreviewComponent.prototype.toggleShowReferenceModel = function () {
+      ModelPreviewComponent.prototype.toggleShowReferenceModel = function ($event) {
           var model = this.scenePreview.getObjectByName('Reference_model');
           model.visible = !this.showReferenceModel;
           this.showReferenceModel = !this.showReferenceModel;
@@ -44723,6 +44784,8 @@
                                       });
                                   });
                               }
+                          }).catch(function (error) {
+                              _this._messageService.emit(MessageType.RenderError, { title: 'Upload error', message: error });
                           });
                           return [2 /*return*/];
                       });
@@ -44798,6 +44861,8 @@
           this.boundingBoxSize = boundingBox.getSize(new THREE.Vector3());
           this._setMeasurements(this.boundingBoxSize);
           this._showMeasurements();
+          var modelBoxhelper = this.scenePreview.getObjectByName('modelBoxhelper');
+          this.scenePreview.remove(modelBoxhelper);
           var boxHelper = new THREE.BoxHelper(object);
           boxHelper.material.color.set(0xFF00FF);
           boxHelper.name = 'modelBoxhelper';
@@ -44928,20 +44993,20 @@
       };
       return ModelPreviewComponent;
   }());
-  ModelPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ModelPreviewComponent, deps: [{ token: i1$1.MAT_DIALOG_DATA }, { token: HomedecoratorSettingsService }, { token: i1__namespace$1.MatDialogRef }, { token: ThirdPartyModelService }, { token: MessageBusService }, { token: i1__namespace$1.MatDialog }, { token: HomedecoratorConnectorAdapterService }, { token: LightPresetsService }, { token: HomedecoratorDictionaryService }, { token: FontService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ModelPreviewComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n    <div class=\"model-preview\">\n      <div class=\"model-preview-container\" id=\"canvasContainer\">\n      </div>\n      <div class=\"model-preview-actions\">\n        <div class=\"input-height-container\">\n          <p>Centimeters of inches</p>\n          <div class=\"mat-radio-wrapper\">\n            <mat-radio-group aria-label=\"Select an unit\" (change)=\"setUnit($event)\">\n              <mat-radio-button [checked]=\"true\" value=\"cm\">Height in cm</mat-radio-button>\n              <mat-radio-button value=\"inches\">Height in inches</mat-radio-button>\n            </mat-radio-group>\n          </div>\n          <div>\n            <input type=\"text\" id=\"heightArticle\" #heightArticle>\n            <button (click)=\"scaleArticle()\">scale</button>\n          </div>\n        </div>\n\n        <div>\n          <button (click)=\"toggleShowReferenceModel()\">Show Reference model</button>\n        </div>\n\n        <div class=\"rotation-button-container\">\n          <p>Rotation</p>\n          <div class=\"rotation-x-buttons\">\n            <button (click)=\"rotateModel('x', mathPi / 2)\">x-as + 90 graden</button>\n            <button (click)=\"rotateModel('x', -mathPi / 2)\">x-as - 90 graden</button>\n          </div>\n          <div class=\"rotation-y-buttons\">\n            <button (click)=\"rotateModel('y', mathPi / 2)\">y-as + 90 graden</button>\n            <button (click)=\"rotateModel('y', -mathPi / 2)\">y-as - 90 graden</button>\n          </div>\n          <div class=\"rotation-z-buttons\">\n            <button (click)=\"rotateModel('z', mathPi / 2)\">z-as + 90 graden</button>\n            <button (click)=\"rotateModel('z', -mathPi / 2)\">z-as - 90 graden</button>\n          </div>\n        </div>\n\n\n        <div class=\"rotation-button-container\">\n          <p>Positie</p>\n          <div class=\"rotation-x-buttons\">\n            <button (click)=\"moveModel('x',  0.01)\">x-as + 0.01</button>\n            <button (click)=\"moveModel('x', -0.01)\">x-as -0.01</button>\n          </div>\n          <div class=\"rotation-y-buttons\">\n            <button (click)=\"moveModel('y', 0.01)\">y-as + 0.01</button>\n            <button (click)=\"moveModel('y', -0.01)\">y-as - 0.01</button>\n          </div>\n          <div class=\"rotation-z-buttons\">\n            <button (click)=\"moveModel('z',  0.01)\">z-as + 0.01</button>\n            <button (click)=\"moveModel('z', -0.01)\">z-as -0.01</button>\n          </div>\n        </div>\n\n        <div class=\"model-preview-info\" *ngIf=\"this.data\">\n          <div class=\"model-preview-info-container\">\n            <div class=\"model-preview-info-left\">\n              <label>Name</label>\n            </div>\n            <div class=\"model-preview-info-right\">\n              <input type=\"text\" id=\"fileName\" #fileName value=\"{{ this.data.file.file.name }}\">\n            </div>\n          </div>\n\n          <div class=\"model-preview-info-container\">\n            <div class=\"model-preview-info-left\">\n              <label>Stackable</label>\n            </div>\n            <div class=\"model-preview-info-right\">\n              <div class=\"mat-radio-wrapper\">\n                <mat-radio-group aria-label=\"Select an unit\" (change)=\"setStackable($event)\">\n                  <mat-radio-button [checked]=\"true\" value=\"false\">No</mat-radio-button>\n                  <mat-radio-button value=\"true\">Yes</mat-radio-button>\n                </mat-radio-group>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"model-preview-info-container\">\n            <div class=\"model-preview-info-left\">\n              <label>Height adjustable</label>\n            </div>\n            <div class=\"model-preview-info-right\">\n              <div class=\"mat-radio-wrapper\">\n                <mat-radio-group aria-label=\"Select an unit\" (change)=\"setHeightAdjustable($event)\">\n                  <mat-radio-button [checked]=\"true\" value=\"false\">No</mat-radio-button>\n                  <mat-radio-button value=\"true\">Yes</mat-radio-button>\n                </mat-radio-group>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"model-preview-info-container\">\n            <div class=\"model-preview-info-left\">\n              <label>Extension</label>\n            </div>\n            <div class=\"model-preview-info-right\">\n              <label>{{ this.data.file.fileType }}</label>\n            </div>\n          </div>\n          <button class=\"exportButton\" (click)=\"exportSceneAsGLB('upload')\">Upload to CDN and add to scene</button>\n          <p></p>\n          <button class=\"exportButton\" (click)=\"exportSceneAsGLB('download')\">Download model</button>\n        </div>\n      </div>\n    </div>\n  ", 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__namespace$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i9__namespace$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  ModelPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ModelPreviewComponent, deps: [{ token: i1$1.MAT_DIALOG_DATA }, { token: HomedecoratorSettingsService }, { token: HomedecoratorIconCacheService }, { token: i1__namespace$1.MatDialogRef }, { token: ThirdPartyModelService }, { token: MessageBusService }, { token: i1__namespace$1.MatDialog }, { token: HomedecoratorConnectorAdapterService }, { token: LightPresetsService }, { token: HomedecoratorDictionaryService }, { token: FontService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  ModelPreviewComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n    <div class=\"model-preview\">\n      <div class=\"model-preview-window\">\n        <div class=\"model-preview-container\" id=\"canvasContainer\"></div>\n        <div class=\"model-preview-window-bottom\">\n          <div>\n            <mat-slide-toggle\n              [checked]=\"showReferenceModel\"\n              [labelPosition]=\"'after'\"\n              (change)=\"toggleShowReferenceModel($event)\">\n              Show Reference model\n            </mat-slide-toggle>\n          </div>\n          <div class=\"disclaimer-text-container\">\n            <p class=\"disclaimer-text\">\n              Grid scale: 1 tile = 1x1 meter\n            </p>\n          </div>\n        </div>\n      </div>\n      <div class=\"model-preview-actions\">\n        <div class=\"input-height-container\">\n          <h2>Model settings</h2>\n          <div>\n            <h3>Scale:</h3>\n            <input type=\"text\" id=\"heightArticle\" #heightArticle placeholder=\"Set model height\">\n            <mat-form-field class=\"units-select-form\">\n              <mat-select class=\"units-mat-select\" [(value)]=\"unitsOfMeasurement\">\n                <mat-option class=\"units-mat-option\" *ngFor=\"let unit of units\" [value]=\"unit\">{{ unit }}</mat-option>\n              </mat-select>\n            </mat-form-field>\n            <button class=\"apply-button base-button\" (click)=\"scaleArticle()\">Apply</button>\n          </div>\n        </div>\n        <div class=\"rotation-button-container\">\n          <h3>Rotation:</h3>\n          <div>\n            <p>Rotate on X axis (90 degrees)</p>\n            <p>\n              <button (click)=\"rotateModel('x', -mathPi / 2)\">\n                <mat-icon svgIcon=\"dash-button\"></mat-icon>\n              </button>\n              <button (click)=\"rotateModel('x', mathPi / 2)\">\n                <mat-icon svgIcon=\"add-button\"></mat-icon>\n              </button>\n            </p>\n          </div>\n          <div>\n            <p>Rotate on Y axis (90 degrees)</p>\n            <p>\n              <button (click)=\"rotateModel('y', -mathPi / 2)\">\n                <mat-icon svgIcon=\"dash-button\"></mat-icon>\n              </button>\n              <button (click)=\"rotateModel('y', mathPi / 2)\">\n                <mat-icon svgIcon=\"add-button\"></mat-icon>\n              </button>\n            </p>\n          </div>\n          <div>\n            <p>Rotate on Z axis (90 degrees)</p>\n            <p>\n              <button (click)=\"rotateModel('z', -mathPi / 2)\">\n                <mat-icon svgIcon=\"dash-button\"></mat-icon>\n              </button>\n              <button (click)=\"rotateModel('z', mathPi / 2)\">\n                <mat-icon svgIcon=\"add-button\"></mat-icon>\n              </button>\n            </p>\n          </div>\n        </div>\n        <div class=\"rotation-button-container\">\n          <h3>Position:</h3>\n          <div>\n            <p>Reset to coordinates 0,0,0</p>\n            <p>\n              <button class=\"button-as-link\" (click)=\"moveModel('all', 0)\">\n                <mat-icon svgIcon=\"retry-button\"></mat-icon>\n                Reset\n              </button>\n            </p>\n          </div>\n          <div>\n            <p>Move on the Y axis (0.01 unit)</p>\n            <p>\n              <button (click)=\"moveModel('y', -0.01)\">\n                <mat-icon svgIcon=\"dash-button\"></mat-icon>\n              </button>\n              <button (click)=\"moveModel('y',  0.01)\">\n                <mat-icon svgIcon=\"add-button\"></mat-icon>\n              </button>\n            </p>\n          </div>\n        </div>\n\n        <div class=\"model-preview-info-container\">\n          <h3>Properties:</h3>\n          <div>\n            <mat-slide-toggle\n              [checked]=\"false\"\n              [labelPosition]=\"'before'\"\n              (change)=\"setStackable($event)\">\n              Stackable\n            </mat-slide-toggle>\n          </div>\n          <div>\n            <mat-slide-toggle\n              [checked]=\"false\"\n              [labelPosition]=\"'before'\"\n              (change)=\"setHeightAdjustable($event)\">\n              Height adjustable\n            </mat-slide-toggle>\n          </div>\n\n          <div class=\"model-placement-container\">\n            <div>\n              <label>Placement</label>\n\n              <mat-form-field *ngIf=\"placementOptions\">\n                <mat-select [(value)]=\"selectedPlacement\">\n                  <mat-option *ngFor=\"let placementOption of placementOptions\"\n                              [value]=\"placementOption.code\">{{ placementOption.description }}\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"model-preview-info\" *ngIf=\"this.data\">\n          <div class=\"model-preview-info-container\">\n            <div class=\"model-preview-info-left\">\n              <label>Save as:</label>\n            </div>\n            <div class=\"model-preview-info-right\">\n              <input type=\"text\" id=\"fileName\" #fileName value=\"{{ this.data.file.file.name }}\">\n            </div>\n          </div>\n          <div>\n            <button class=\"base-button exportButton\" (click)=\"exportSceneAsGLB('upload')\">Upload and add to scene</button>\n            <button class=\"base-button exportButtonDark\" (click)=\"exportSceneAsGLB('download')\">Download</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  ", 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__namespace$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__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i12__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ModelPreviewComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: 'rp-model-preview',
-                      template: "\n    <div class=\"model-preview\">\n      <div class=\"model-preview-container\" id=\"canvasContainer\">\n      </div>\n      <div class=\"model-preview-actions\">\n        <div class=\"input-height-container\">\n          <p>Centimeters of inches</p>\n          <div class=\"mat-radio-wrapper\">\n            <mat-radio-group aria-label=\"Select an unit\" (change)=\"setUnit($event)\">\n              <mat-radio-button [checked]=\"true\" value=\"cm\">Height in cm</mat-radio-button>\n              <mat-radio-button value=\"inches\">Height in inches</mat-radio-button>\n            </mat-radio-group>\n          </div>\n          <div>\n            <input type=\"text\" id=\"heightArticle\" #heightArticle>\n            <button (click)=\"scaleArticle()\">scale</button>\n          </div>\n        </div>\n\n        <div>\n          <button (click)=\"toggleShowReferenceModel()\">Show Reference model</button>\n        </div>\n\n        <div class=\"rotation-button-container\">\n          <p>Rotation</p>\n          <div class=\"rotation-x-buttons\">\n            <button (click)=\"rotateModel('x', mathPi / 2)\">x-as + 90 graden</button>\n            <button (click)=\"rotateModel('x', -mathPi / 2)\">x-as - 90 graden</button>\n          </div>\n          <div class=\"rotation-y-buttons\">\n            <button (click)=\"rotateModel('y', mathPi / 2)\">y-as + 90 graden</button>\n            <button (click)=\"rotateModel('y', -mathPi / 2)\">y-as - 90 graden</button>\n          </div>\n          <div class=\"rotation-z-buttons\">\n            <button (click)=\"rotateModel('z', mathPi / 2)\">z-as + 90 graden</button>\n            <button (click)=\"rotateModel('z', -mathPi / 2)\">z-as - 90 graden</button>\n          </div>\n        </div>\n\n\n        <div class=\"rotation-button-container\">\n          <p>Positie</p>\n          <div class=\"rotation-x-buttons\">\n            <button (click)=\"moveModel('x',  0.01)\">x-as + 0.01</button>\n            <button (click)=\"moveModel('x', -0.01)\">x-as -0.01</button>\n          </div>\n          <div class=\"rotation-y-buttons\">\n            <button (click)=\"moveModel('y', 0.01)\">y-as + 0.01</button>\n            <button (click)=\"moveModel('y', -0.01)\">y-as - 0.01</button>\n          </div>\n          <div class=\"rotation-z-buttons\">\n            <button (click)=\"moveModel('z',  0.01)\">z-as + 0.01</button>\n            <button (click)=\"moveModel('z', -0.01)\">z-as -0.01</button>\n          </div>\n        </div>\n\n        <div class=\"model-preview-info\" *ngIf=\"this.data\">\n          <div class=\"model-preview-info-container\">\n            <div class=\"model-preview-info-left\">\n              <label>Name</label>\n            </div>\n            <div class=\"model-preview-info-right\">\n              <input type=\"text\" id=\"fileName\" #fileName value=\"{{ this.data.file.file.name }}\">\n            </div>\n          </div>\n\n          <div class=\"model-preview-info-container\">\n            <div class=\"model-preview-info-left\">\n              <label>Stackable</label>\n            </div>\n            <div class=\"model-preview-info-right\">\n              <div class=\"mat-radio-wrapper\">\n                <mat-radio-group aria-label=\"Select an unit\" (change)=\"setStackable($event)\">\n                  <mat-radio-button [checked]=\"true\" value=\"false\">No</mat-radio-button>\n                  <mat-radio-button value=\"true\">Yes</mat-radio-button>\n                </mat-radio-group>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"model-preview-info-container\">\n            <div class=\"model-preview-info-left\">\n              <label>Height adjustable</label>\n            </div>\n            <div class=\"model-preview-info-right\">\n              <div class=\"mat-radio-wrapper\">\n                <mat-radio-group aria-label=\"Select an unit\" (change)=\"setHeightAdjustable($event)\">\n                  <mat-radio-button [checked]=\"true\" value=\"false\">No</mat-radio-button>\n                  <mat-radio-button value=\"true\">Yes</mat-radio-button>\n                </mat-radio-group>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"model-preview-info-container\">\n            <div class=\"model-preview-info-left\">\n              <label>Extension</label>\n            </div>\n            <div class=\"model-preview-info-right\">\n              <label>{{ this.data.file.fileType }}</label>\n            </div>\n          </div>\n          <button class=\"exportButton\" (click)=\"exportSceneAsGLB('upload')\">Upload to CDN and add to scene</button>\n          <p></p>\n          <button class=\"exportButton\" (click)=\"exportSceneAsGLB('download')\">Download model</button>\n        </div>\n      </div>\n    </div>\n  ",
+                      template: "\n    <div class=\"model-preview\">\n      <div class=\"model-preview-window\">\n        <div class=\"model-preview-container\" id=\"canvasContainer\"></div>\n        <div class=\"model-preview-window-bottom\">\n          <div>\n            <mat-slide-toggle\n              [checked]=\"showReferenceModel\"\n              [labelPosition]=\"'after'\"\n              (change)=\"toggleShowReferenceModel($event)\">\n              Show Reference model\n            </mat-slide-toggle>\n          </div>\n          <div class=\"disclaimer-text-container\">\n            <p class=\"disclaimer-text\">\n              Grid scale: 1 tile = 1x1 meter\n            </p>\n          </div>\n        </div>\n      </div>\n      <div class=\"model-preview-actions\">\n        <div class=\"input-height-container\">\n          <h2>Model settings</h2>\n          <div>\n            <h3>Scale:</h3>\n            <input type=\"text\" id=\"heightArticle\" #heightArticle placeholder=\"Set model height\">\n            <mat-form-field class=\"units-select-form\">\n              <mat-select class=\"units-mat-select\" [(value)]=\"unitsOfMeasurement\">\n                <mat-option class=\"units-mat-option\" *ngFor=\"let unit of units\" [value]=\"unit\">{{ unit }}</mat-option>\n              </mat-select>\n            </mat-form-field>\n            <button class=\"apply-button base-button\" (click)=\"scaleArticle()\">Apply</button>\n          </div>\n        </div>\n        <div class=\"rotation-button-container\">\n          <h3>Rotation:</h3>\n          <div>\n            <p>Rotate on X axis (90 degrees)</p>\n            <p>\n              <button (click)=\"rotateModel('x', -mathPi / 2)\">\n                <mat-icon svgIcon=\"dash-button\"></mat-icon>\n              </button>\n              <button (click)=\"rotateModel('x', mathPi / 2)\">\n                <mat-icon svgIcon=\"add-button\"></mat-icon>\n              </button>\n            </p>\n          </div>\n          <div>\n            <p>Rotate on Y axis (90 degrees)</p>\n            <p>\n              <button (click)=\"rotateModel('y', -mathPi / 2)\">\n                <mat-icon svgIcon=\"dash-button\"></mat-icon>\n              </button>\n              <button (click)=\"rotateModel('y', mathPi / 2)\">\n                <mat-icon svgIcon=\"add-button\"></mat-icon>\n              </button>\n            </p>\n          </div>\n          <div>\n            <p>Rotate on Z axis (90 degrees)</p>\n            <p>\n              <button (click)=\"rotateModel('z', -mathPi / 2)\">\n                <mat-icon svgIcon=\"dash-button\"></mat-icon>\n              </button>\n              <button (click)=\"rotateModel('z', mathPi / 2)\">\n                <mat-icon svgIcon=\"add-button\"></mat-icon>\n              </button>\n            </p>\n          </div>\n        </div>\n        <div class=\"rotation-button-container\">\n          <h3>Position:</h3>\n          <div>\n            <p>Reset to coordinates 0,0,0</p>\n            <p>\n              <button class=\"button-as-link\" (click)=\"moveModel('all', 0)\">\n                <mat-icon svgIcon=\"retry-button\"></mat-icon>\n                Reset\n              </button>\n            </p>\n          </div>\n          <div>\n            <p>Move on the Y axis (0.01 unit)</p>\n            <p>\n              <button (click)=\"moveModel('y', -0.01)\">\n                <mat-icon svgIcon=\"dash-button\"></mat-icon>\n              </button>\n              <button (click)=\"moveModel('y',  0.01)\">\n                <mat-icon svgIcon=\"add-button\"></mat-icon>\n              </button>\n            </p>\n          </div>\n        </div>\n\n        <div class=\"model-preview-info-container\">\n          <h3>Properties:</h3>\n          <div>\n            <mat-slide-toggle\n              [checked]=\"false\"\n              [labelPosition]=\"'before'\"\n              (change)=\"setStackable($event)\">\n              Stackable\n            </mat-slide-toggle>\n          </div>\n          <div>\n            <mat-slide-toggle\n              [checked]=\"false\"\n              [labelPosition]=\"'before'\"\n              (change)=\"setHeightAdjustable($event)\">\n              Height adjustable\n            </mat-slide-toggle>\n          </div>\n\n          <div class=\"model-placement-container\">\n            <div>\n              <label>Placement</label>\n\n              <mat-form-field *ngIf=\"placementOptions\">\n                <mat-select [(value)]=\"selectedPlacement\">\n                  <mat-option *ngFor=\"let placementOption of placementOptions\"\n                              [value]=\"placementOption.code\">{{ placementOption.description }}\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"model-preview-info\" *ngIf=\"this.data\">\n          <div class=\"model-preview-info-container\">\n            <div class=\"model-preview-info-left\">\n              <label>Save as:</label>\n            </div>\n            <div class=\"model-preview-info-right\">\n              <input type=\"text\" id=\"fileName\" #fileName value=\"{{ this.data.file.file.name }}\">\n            </div>\n          </div>\n          <div>\n            <button class=\"base-button exportButton\" (click)=\"exportSceneAsGLB('upload')\">Upload and add to scene</button>\n            <button class=\"base-button exportButtonDark\" (click)=\"exportSceneAsGLB('download')\">Download</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
                       styleUrls: ['./model-preview.component.scss']
                   }]
           }], ctorParameters: function () {
           return [{ type: undefined, decorators: [{
                           type: i0.Inject,
                           args: [i1$1.MAT_DIALOG_DATA]
-                      }] }, { type: HomedecoratorSettingsService }, { type: i1__namespace$1.MatDialogRef }, { type: ThirdPartyModelService }, { type: MessageBusService }, { type: i1__namespace$1.MatDialog }, { type: HomedecoratorConnectorAdapterService }, { type: LightPresetsService }, { type: HomedecoratorDictionaryService }, { type: FontService }];
+                      }] }, { type: HomedecoratorSettingsService }, { type: HomedecoratorIconCacheService }, { type: i1__namespace$1.MatDialogRef }, { type: ThirdPartyModelService }, { type: MessageBusService }, { type: i1__namespace$1.MatDialog }, { type: HomedecoratorConnectorAdapterService }, { type: LightPresetsService }, { type: HomedecoratorDictionaryService }, { type: FontService }];
       }, propDecorators: { glbExportName: [{
                   type: i0.ViewChild,
                   args: ['fileName']
@@ -45026,7 +45091,7 @@
           this._subs = [];
           this._subs.push(this.messageService.subscribe(MessageType.SetLeftSidebar, function (templateRef) { return _this._setLeftSidebar(templateRef); }), this.messageService.subscribe(MessageType.HideLeftSidebar, function () { return _this._closeLeftSidebar({ keepTemplateRef: true }); }), this.messageService.subscribe(MessageType.RegisterToolbarIcon, function (icon) { return _this._registerToolbarIcon(icon); }), this.messageService.subscribe(MessageType.ViewModeChanged, function () { return _this._closeLeftSidebar(); }), this.messageService.subscribe(MessageType.NewRoom, function () { return _this.newRoom(); }), this.messageService.subscribe(MessageType.ShowOpenDialog, function () { return _this.openOpenDialog(); }), this.messageService.subscribe(MessageType.FinishedIOneFurnitureBuild, function () { return _this._hideToast(); }), this.messageService.subscribe(MessageType.UndefinedErrorOccured, function () { return _this._hideToast(); }), this.messageService.subscribe(MessageType.RenderServiceTryToConnect, function () { return _this._hideToast(); }), this.messageService.subscribe(MessageType.RenderServiceConnected, function () { return _this._hideToast(); }), this._toastService.showToastSub.subscribe(function (toast) { return _this._showToast(toast); }), this._screenSizeService.screenSizeChanged.subscribe(function (info) { return _this.phoneSizeScreen = info.isPhoneSize; }), 
           // this.messageService.subscribe(MessageType.StartWithDiagram, () => this.openUploadDiagram()),
-          this.messageService.subscribe(MessageType.StartDrawingDiagram, function (file) { return _this.openDrawDiagram(file); }), this.messageService.subscribe(MessageType.StartCroppingPDF, function (file) { return _this.openCroppingDiagram(file); }), this.messageService.subscribe(MessageType.UserModelUploaded, function (file) { return _this.openModelPreview(file); }));
+          this.messageService.subscribe(MessageType.StartDrawingDiagram, function (file) { return _this.openDrawDiagram(file); }), this.messageService.subscribe(MessageType.StartCroppingPDF, function (file) { return _this.openCroppingDiagram(file); }), this.messageService.subscribe(MessageType.UserModelUploaded, function (file) { return _this.openModelPreview(file); }), this.messageService.subscribe(MessageType.RenderError, function (data) { return _this.showRenderError(data); }));
       }
       ToolbarComponent.prototype.handleKeyDown = function (event) {
           if (event.ctrlKey && event.shiftKey && event.key === 'S') {
@@ -45257,6 +45322,12 @@
               data: { file: file }
           });
       };
+      ToolbarComponent.prototype.showRenderError = function (data) {
+          this._dialog.open(ErrorDialogComponent, {
+              data: data
+          });
+          this.messageService.emit(MessageType.HideLoadingIndicator);
+      };
       ToolbarComponent.prototype.testRender = function () {
           this._newRenderService.forceRenderImage();
       };
@@ -45315,7 +45386,7 @@
       return ToolbarComponent;
   }());
   ToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ToolbarComponent, deps: [{ token: AppStateService }, { token: PresetsService }, { token: MessageBusService }, { token: HomedecoratorSettingsService }, { token: LocalStorageService }, { token: ScreenSizeAnalysisService }, { token: i1__namespace$1.MatDialog }, { token: ToastService }, { token: HomedecoratorAppService }, { token: PermanentStoreService }, { token: UtilsService }, { token: ThreedselectorService }, { token: ItemService }, { token: FloorplanService }, { token: FloorService }, { token: AnimationService }, { token: DevelopmentService }, { token: NewRenderService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolbarComponent, selector: "rp-toolbar", host: { listeners: { "document:keydown": "handleKeyDown($event)" } }, viewQueries: [{ propertyName: "leftSidebar", first: true, predicate: ["leftSidebar"], descendants: true, static: true }], ngImport: i0__namespace, template: "\n    <!--\n          <div class=\"layer layer&#45;&#45;toolbar\">\n    -->\n    <mat-toolbar class=\"toolbar\" color=\"primary\">\n      <button *ngIf=\"phoneSizeScreen\" mat-icon-button class=\"menu-icon\" [matMenuTriggerFor]=\"menu\">\n        <mat-icon class=\"homedecorator-material-icons\">menu</mat-icon>\n      </button>\n      <mat-menu #menu>\n        <ng-container *ngFor=\"let icon of toolbarIconsTop\">\n          <ng-container [cdkPortalOutlet]=\"icon.portal\">\n          </ng-container>\n        </ng-container>\n      </mat-menu>\n\n      <img src=\"assets/images/logo.svg\" class=\"toolbar-logo\"/>\n      <img *ngIf=\"settingsService.settings.secondaryLogo\" [src]=\"settingsService.settings.secondaryLogo\"\n           class=\"toolbar-logo secondary-logo\"/>\n      <ng-container *ngIf=\"settingsService.settings.options.development\">\n        <mat-card class=\"wip-card\">\n          <mat-card-content>\n            {{ 'WORK_IN_PROGRESS' | localize }}\n          </mat-card-content>\n        </mat-card>\n        <button mat-icon-button (click)=\"loadRoom()\">\n          <mat-icon class=\"homedecorator-material-icons\">weekend</mat-icon>\n        </button>\n        <button mat-icon-button (click)=\"loadResizableRoom()\">\n          <mat-icon class=\"homedecorator-material-icons\">camera-control</mat-icon>\n        </button>\n      </ng-container>\n      <ng-container *ngIf=\"settingsService.settings.options.showRoomDownloadButton\">\n        <button mat-icon-button (click)=\"downloadRoom()\">\n          <mat-icon class=\"homedecorator-material-icons\" matTooltip=\"{{'DOWNLOAD_ROOM_AS_GLB' | localize}}\">cloud_download</mat-icon>\n        </button>\n      </ng-container>\n      <div class=\"hd-toolbar-spacer\"></div>\n\n<!--      <ng-container>-->\n<!--        <rp-pdf-export></rp-pdf-export>-->\n<!--      </ng-container>-->\n\n      <mat-nav-list class=\"toolbar__nav\" role=\"list\">\n        <div matTooltip=\"{{'NEW_ROOM' | localize}}\">\n          <mat-list-item role=\"listitem\" (click)=\"newRoom()\">{{ 'NEW' | localize }}</mat-list-item>\n        </div>\n        <div matTooltip=\"{{'OPEN_EXISTING_PLAN' | localize}}\">\n          <mat-list-item role=\"listitem\" (click)=\"openOpenDialog()\">{{ 'OPEN' | localize }}</mat-list-item>\n        </div>\n        <div *ngIf=\"storageService.errorWhenSaving\" class=\"storage-error\"\n             [class.blinker]=\"showBlinkError\" matTooltip=\"{{'ERROR_SAVING_LOCALSTORAGE' | localize}}\"\n             (mousemove)=\"showBlinkError = false\"\n        ><span>!</span></div>\n        <div [class.blinker]=\"!showSaveNotification\" matTooltip=\"{{'SAVE_THE_PLAN' | localize}}\">\n          <mat-list-item\n            matTooltip=\"{{'SAVE_TOOLTIP' | localize}}\"\n            [matTooltipDisabled]=\"tooltipDisabled\"\n            matTooltipClass=\"tooltip-red\"\n            role=\"listitem\"\n            (click)=\"openSaveDialog() && stopTimer()\"\n          >{{ 'SAVE' | localize }}\n          </mat-list-item>\n        </div>\n        <div\n          class=\"badge\"\n          matBadge=\"!\"\n          matBadgeColor=\"warn\"\n          matBadgePosition=\"below before\"\n          matBadgeOverlap=\"true\"\n          matBadgeSize=\"medium\"\n          [matBadgeHidden]=\"badgeDisabled\">\n        </div>\n      </mat-nav-list>\n      <div matTooltip=\"{{'SAVE_IMAGE' | localize}}\">\n        <button mat-icon-button (click)=\"onTakeScreenshotClick()\">\n          <mat-icon class=\"homedecorator-material-icons\">photo_camera</mat-icon>\n        </button>\n      </div>\n      <div matTooltip=\"{{'UNDO' | localize}}\">\n        <button mat-icon-button (click)=\"messageService.emit(messageType.Undo)\"\n                [disabled]=\"presetsService.isLoading || !appState.canUndo()\"\n        >\n          <mat-icon class=\"homedecorator-material-icons\">undo</mat-icon>\n        </button>\n      </div>\n      <div matTooltip=\"{{'REDO' | localize}}\">\n        <button mat-icon-button (click)=\"messageService.emit(messageType.Redo)\"\n                [disabled]=\"presetsService.isLoading || !appState.canRedo()\"\n        >\n          <mat-icon class=\"homedecorator-material-icons\">redo</mat-icon>\n        </button>\n      </div>\n      <button mat-icon-button *ngIf=\"!fullscreen\" (click)=\"requestFullscreen()\" matTooltip=\"{{'REQUEST_FULLSCREEN' | localize}}\">\n        <mat-icon class=\"homedecorator-material-icons\">fullscreen</mat-icon>\n      </button>\n      <button mat-icon-button *ngIf=\"fullscreen\" (click)=\"exitFullscreen()\" matTooltip=\"{{'EXIT_FULLSCREEN' | localize}}\">\n        <mat-icon class=\"homedecorator-material-icons\">fullscreen_exit</mat-icon>\n      </button>\n    </mat-toolbar>\n\n    <limited-mode-message\n      *ngIf=\"phoneSizeScreen && showLimitedModeMessage\"\n      (closeClicked)=\"onCloseLimitedModeMessageClick()\">\n    </limited-mode-message>\n\n    <div class=\"toast-wrapper\"\n         [class.success]=\"toast.type ==  toastType.Success\"\n         [class.warning]=\"toast.type ==  toastType.Warning\"\n         [class.error]=\"toast.type ==  toastType.Error\"\n         *ngIf=\"toast\"\n         @showToast\n         [textContent]=\"toast.message\">\n    </div>\n\n    <mat-toolbar-row class=\"toolbar-row\">\n      <mat-toolbar class=\"toolbar toolbar--secondary\" *ngIf=\"!phoneSizeScreen\">\n        <ng-container *ngFor=\"let icon of toolbarIconsTop\">\n          <ng-container [cdkPortalOutlet]=\"icon.portal\"></ng-container>\n        </ng-container>\n        <span class=\"hd-toolbar-spacer\"></span>\n        <ng-container *ngFor=\"let icon of toolbarIconsBottom\">\n          <ng-container [cdkPortalOutlet]=\"icon.portal\"></ng-container>\n        </ng-container>\n      </mat-toolbar>\n\n      <mat-drawer-container class=\"drawer-container\">\n        <mat-drawer class=\"drawer\" mode=\"over\" position=\"left\" #leftSidebar>\n          <mat-drawer-content class=\"drawer__body\">\n            <button class=\"drawer__button\" mat-icon-button (click)=\"clickCloseLeftSidebar()\">\n              <mat-icon class=\"homedecorator-material-icons\">clear</mat-icon>\n            </button>\n            <ng-container [cdkPortalOutlet]=\"leftPortal\"></ng-container>\n          </mat-drawer-content>\n        </mat-drawer>\n      </mat-drawer-container>\n    </mat-toolbar-row>\n    <!--\n          </div>\n    -->\n  ", isInline: true, styles: [":host{display:flex;flex-direction:column;position:absolute;top:0;z-index:100;height:100%;width:100%;pointer-events:none}:host .hd-toolbar-spacer{display:flex;flex-basis:100%}:host .toast-wrapper{height:auto;position:absolute;top:64px;left:50%;-webkit-user-select:none;user-select:none;pointer-events:none;background:#74B77F;padding:30px;border-radius:0 0 10px 10px;min-width:150px;max-width:90%;color:#fff;text-align:center;transform:translate(-50%,-100%)}:host .toast-wrapper.warning{background:#F17300}:host .toast-wrapper.error{background:#CC2936}:host ::ng-deep .drawer__header{display:flex;align-items:center;min-height:40px;margin-bottom:16px}:host ::ng-deep .drawer__header h2{margin:0 auto 0 0}:host ::ng-deep mat-tab-header,:host ::ng-deep .FileDrop{margin-bottom:16px}:host ::ng-deep .tab--skin ::ng-deep .mat-tab-label{height:52px;min-width:auto}:host ::ng-deep .drawer p{white-space:pre-wrap}:host ::ng-deep .mat-divider{margin:16px 0 24px}:host ::ng-deep .mat-drawer-backdrop{display:none}.storage-error{min-width:30px;height:30px;display:flex;align-items:center;align-self:center;border-radius:50%;justify-content:center;background:white;color:#c00;font-size:25px;font-weight:bold}.layer--toolbar{display:flex;flex-direction:column}.toolbar{z-index:101;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.toolbar .menu-icon{min-width:50px;display:flex;justify-content:center;margin-left:-16px}.toolbar-logo{width:50px}.secondary-logo{margin-left:20px}.toolbar__nav{display:flex;flex-direction:row;padding-top:0}.toolbar__nav .mat-list-item{color:#fff;height:40px}.toolbar-row{flex:auto;display:flex;flex-direction:column;padding:0;pointer-events:none;position:relative;align-items:baseline;height:100%}.toolbar--secondary{width:64px;padding:16px 0;flex-direction:column;background:#fff;height:100%}.toolbar--secondary .drawer{flex:auto;pointer-events:none;background:transparent}.wip-card{margin-left:22px;padding:6px 22px;color:#fff;background-color:#ed912e}.drawer-container{position:static;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.drawer{width:420px;padding:16px;display:flex;flex-direction:column;left:65px}.toolbar,.toolbar--secondary>*,.drawer-container>*,.drawer>*{pointer-events:all}.drawer__button{min-width:initial;padding:0;border:none;position:absolute;top:0;right:0;border-radius:50%}.blinker{animation:blinker 1s linear infinite}.mat-badge-content{background-color:#b71c1c;animation:bounce 2s ease-out;animation-iteration-count:infinite;margin-left:5px}.badge{margin-right:20px;margin-bottom:20px}::ng-deep .tooltip-red{background:#b71c1c}@keyframes bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-20px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes blinker{50%{opacity:0}}::ng-deep .mat-menu-panel{width:256px!important}::ng-deep .mat-menu-panel .mat-menu-content{display:flex;flex-direction:column;padding-left:10px;padding-right:10px}::ng-deep mat-drawer-content.mat-drawer-content{display:flex;height:100%;flex-direction:column}\n"], components: [{ type: i19__namespace$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i22__namespace.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i23__namespace.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2__namespace$2.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i2__namespace$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: LimitedModeMessageComponent, selector: "limited-mode-message", outputs: ["closeClicked"] }, { type: i26__namespace.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { type: i26__namespace.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { type: i26__namespace.MatDrawerContent, selector: "mat-drawer-content" }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i22__namespace.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i28__namespace.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i23__namespace.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i30__namespace.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgePosition", "matBadgeSize", "matBadgeColor", "matBadgeOverlap", "matBadgeDescription", "matBadgeHidden", "matBadge"] }, { type: i19__namespace$1.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }], pipes: { "localize": LocalizePipe }, animations: [
+  ToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolbarComponent, selector: "rp-toolbar", host: { listeners: { "document:keydown": "handleKeyDown($event)" } }, viewQueries: [{ propertyName: "leftSidebar", first: true, predicate: ["leftSidebar"], descendants: true, static: true }], ngImport: i0__namespace, template: "\n    <!--\n          <div class=\"layer layer&#45;&#45;toolbar\">\n    -->\n    <mat-toolbar class=\"toolbar\" color=\"primary\">\n      <button *ngIf=\"phoneSizeScreen\" mat-icon-button class=\"menu-icon\" [matMenuTriggerFor]=\"menu\">\n        <mat-icon class=\"homedecorator-material-icons\">menu</mat-icon>\n      </button>\n      <mat-menu #menu>\n        <ng-container *ngFor=\"let icon of toolbarIconsTop\">\n          <ng-container [cdkPortalOutlet]=\"icon.portal\">\n          </ng-container>\n        </ng-container>\n      </mat-menu>\n\n      <img src=\"assets/images/logo.svg\" class=\"toolbar-logo\"/>\n      <img *ngIf=\"settingsService.settings.secondaryLogo\" [src]=\"settingsService.settings.secondaryLogo\"\n           class=\"toolbar-logo secondary-logo\"/>\n      <ng-container *ngIf=\"settingsService.settings.options.development\">\n        <mat-card class=\"wip-card\">\n          <mat-card-content>\n            {{ 'WORK_IN_PROGRESS' | localize }}\n          </mat-card-content>\n        </mat-card>\n        <button mat-icon-button (click)=\"loadRoom()\">\n          <mat-icon class=\"homedecorator-material-icons\">weekend</mat-icon>\n        </button>\n        <button mat-icon-button (click)=\"loadResizableRoom()\">\n          <mat-icon class=\"homedecorator-material-icons\">camera-control</mat-icon>\n        </button>\n      </ng-container>\n      <ng-container *ngIf=\"settingsService.settings.options.showRoomDownloadButton\">\n        <button mat-icon-button (click)=\"downloadRoom()\">\n          <mat-icon class=\"homedecorator-material-icons\" matTooltip=\"{{'DOWNLOAD_ROOM_AS_GLB' | localize}}\">cloud_download</mat-icon>\n        </button>\n      </ng-container>\n      <div class=\"hd-toolbar-spacer\"></div>\n\n      <!--      <ng-container>-->\n      <!--        <rp-pdf-export></rp-pdf-export>-->\n      <!--      </ng-container>-->\n\n      <mat-nav-list class=\"toolbar__nav\" role=\"list\">\n        <div matTooltip=\"{{'NEW_ROOM' | localize}}\">\n          <mat-list-item role=\"listitem\" (click)=\"newRoom()\">{{ 'NEW' | localize }}</mat-list-item>\n        </div>\n        <div matTooltip=\"{{'OPEN_EXISTING_PLAN' | localize}}\">\n          <mat-list-item role=\"listitem\" (click)=\"openOpenDialog()\">{{ 'OPEN' | localize }}</mat-list-item>\n        </div>\n        <div *ngIf=\"storageService.errorWhenSaving\" class=\"storage-error\"\n             [class.blinker]=\"showBlinkError\" matTooltip=\"{{'ERROR_SAVING_LOCALSTORAGE' | localize}}\"\n             (mousemove)=\"showBlinkError = false\"\n        ><span>!</span></div>\n        <div [class.blinker]=\"!showSaveNotification\" matTooltip=\"{{'SAVE_THE_PLAN' | localize}}\">\n          <mat-list-item\n            matTooltip=\"{{'SAVE_TOOLTIP' | localize}}\"\n            [matTooltipDisabled]=\"tooltipDisabled\"\n            matTooltipClass=\"tooltip-red\"\n            role=\"listitem\"\n            (click)=\"openSaveDialog() && stopTimer()\"\n          >{{ 'SAVE' | localize }}\n          </mat-list-item>\n        </div>\n        <div\n          class=\"badge\"\n          matBadge=\"!\"\n          matBadgeColor=\"warn\"\n          matBadgePosition=\"below before\"\n          matBadgeOverlap=\"true\"\n          matBadgeSize=\"medium\"\n          [matBadgeHidden]=\"badgeDisabled\">\n        </div>\n      </mat-nav-list>\n      <div matTooltip=\"{{'SAVE_IMAGE' | localize}}\">\n        <button mat-icon-button (click)=\"onTakeScreenshotClick()\">\n          <mat-icon class=\"homedecorator-material-icons\">photo_camera</mat-icon>\n        </button>\n      </div>\n      <div matTooltip=\"{{'UNDO' | localize}}\">\n        <button mat-icon-button (click)=\"messageService.emit(messageType.Undo)\"\n                [disabled]=\"presetsService.isLoading || !appState.canUndo()\"\n        >\n          <mat-icon class=\"homedecorator-material-icons\">undo</mat-icon>\n        </button>\n      </div>\n      <div matTooltip=\"{{'REDO' | localize}}\">\n        <button mat-icon-button (click)=\"messageService.emit(messageType.Redo)\"\n                [disabled]=\"presetsService.isLoading || !appState.canRedo()\"\n        >\n          <mat-icon class=\"homedecorator-material-icons\">redo</mat-icon>\n        </button>\n      </div>\n      <button mat-icon-button *ngIf=\"!fullscreen\" (click)=\"requestFullscreen()\" matTooltip=\"{{'REQUEST_FULLSCREEN' | localize}}\">\n        <mat-icon class=\"homedecorator-material-icons\">fullscreen</mat-icon>\n      </button>\n      <button mat-icon-button *ngIf=\"fullscreen\" (click)=\"exitFullscreen()\" matTooltip=\"{{'EXIT_FULLSCREEN' | localize}}\">\n        <mat-icon class=\"homedecorator-material-icons\">fullscreen_exit</mat-icon>\n      </button>\n    </mat-toolbar>\n\n    <limited-mode-message\n      *ngIf=\"phoneSizeScreen && showLimitedModeMessage\"\n      (closeClicked)=\"onCloseLimitedModeMessageClick()\">\n    </limited-mode-message>\n\n    <div class=\"toast-wrapper\"\n         [class.success]=\"toast.type ==  toastType.Success\"\n         [class.warning]=\"toast.type ==  toastType.Warning\"\n         [class.error]=\"toast.type ==  toastType.Error\"\n         *ngIf=\"toast\"\n         @showToast\n         [textContent]=\"toast.message\">\n    </div>\n\n    <mat-toolbar-row class=\"toolbar-row\">\n      <mat-toolbar class=\"toolbar toolbar--secondary\" *ngIf=\"!phoneSizeScreen\">\n        <ng-container *ngFor=\"let icon of toolbarIconsTop\">\n          <ng-container [cdkPortalOutlet]=\"icon.portal\"></ng-container>\n        </ng-container>\n        <span class=\"hd-toolbar-spacer\"></span>\n        <ng-container *ngFor=\"let icon of toolbarIconsBottom\">\n          <ng-container [cdkPortalOutlet]=\"icon.portal\"></ng-container>\n        </ng-container>\n      </mat-toolbar>\n\n      <mat-drawer-container class=\"drawer-container\">\n        <mat-drawer class=\"drawer\" mode=\"over\" position=\"left\" #leftSidebar>\n          <mat-drawer-content class=\"drawer__body\">\n            <button class=\"drawer__button\" mat-icon-button (click)=\"clickCloseLeftSidebar()\">\n              <mat-icon class=\"homedecorator-material-icons\">clear</mat-icon>\n            </button>\n            <ng-container [cdkPortalOutlet]=\"leftPortal\"></ng-container>\n          </mat-drawer-content>\n        </mat-drawer>\n      </mat-drawer-container>\n    </mat-toolbar-row>\n    <!--\n          </div>\n    -->\n  ", isInline: true, styles: [":host{display:flex;flex-direction:column;position:absolute;top:0;z-index:100;height:100%;width:100%;pointer-events:none}:host .hd-toolbar-spacer{display:flex;flex-basis:100%}:host .toast-wrapper{height:auto;position:absolute;top:64px;left:50%;-webkit-user-select:none;user-select:none;pointer-events:none;background:#74B77F;padding:30px;border-radius:0 0 10px 10px;min-width:150px;max-width:90%;color:#fff;text-align:center;transform:translate(-50%,-100%)}:host .toast-wrapper.warning{background:#F17300}:host .toast-wrapper.error{background:#CC2936}:host ::ng-deep .drawer__header{display:flex;align-items:center;min-height:40px;margin-bottom:16px}:host ::ng-deep .drawer__header h2{margin:0 auto 0 0}:host ::ng-deep mat-tab-header,:host ::ng-deep .FileDrop{margin-bottom:16px}:host ::ng-deep .tab--skin ::ng-deep .mat-tab-label{height:52px;min-width:auto}:host ::ng-deep .drawer p{white-space:pre-wrap}:host ::ng-deep .mat-divider{margin:16px 0 24px}:host ::ng-deep .mat-drawer-backdrop{display:none}.storage-error{min-width:30px;height:30px;display:flex;align-items:center;align-self:center;border-radius:50%;justify-content:center;background:white;color:#c00;font-size:25px;font-weight:bold}.layer--toolbar{display:flex;flex-direction:column}.toolbar{z-index:101;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.toolbar .menu-icon{min-width:50px;display:flex;justify-content:center;margin-left:-16px}.toolbar-logo{width:50px}.secondary-logo{margin-left:20px}.toolbar__nav{display:flex;flex-direction:row;padding-top:0}.toolbar__nav .mat-list-item{color:#fff;height:40px}.toolbar-row{flex:auto;display:flex;flex-direction:column;padding:0;pointer-events:none;position:relative;align-items:baseline;height:100%}.toolbar--secondary{width:64px;padding:16px 0;flex-direction:column;background:#fff;height:100%}.toolbar--secondary .drawer{flex:auto;pointer-events:none;background:transparent}.wip-card{margin-left:22px;padding:6px 22px;color:#fff;background-color:#ed912e}.drawer-container{position:static;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.drawer{width:420px;padding:16px;display:flex;flex-direction:column;left:65px}.toolbar,.toolbar--secondary>*,.drawer-container>*,.drawer>*{pointer-events:all}.drawer__button{min-width:initial;padding:0;border:none;position:absolute;top:0;right:0;border-radius:50%}.blinker{animation:blinker 1s linear infinite}.mat-badge-content{background-color:#b71c1c;animation:bounce 2s ease-out;animation-iteration-count:infinite;margin-left:5px}.badge{margin-right:20px;margin-bottom:20px}::ng-deep .tooltip-red{background:#b71c1c}@keyframes bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-20px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes blinker{50%{opacity:0}}::ng-deep .mat-menu-panel{width:256px!important}::ng-deep .mat-menu-panel .mat-menu-content{display:flex;flex-direction:column;padding-left:10px;padding-right:10px}::ng-deep mat-drawer-content.mat-drawer-content{display:flex;height:100%;flex-direction:column}\n"], components: [{ type: i19__namespace$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i22__namespace.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i23__namespace.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2__namespace$2.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i2__namespace$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: LimitedModeMessageComponent, selector: "limited-mode-message", outputs: ["closeClicked"] }, { type: i26__namespace.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { type: i26__namespace.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { type: i26__namespace.MatDrawerContent, selector: "mat-drawer-content" }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i22__namespace.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i28__namespace.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i23__namespace.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i30__namespace.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgePosition", "matBadgeSize", "matBadgeColor", "matBadgeOverlap", "matBadgeDescription", "matBadgeHidden", "matBadge"] }, { type: i19__namespace$1.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }], pipes: { "localize": LocalizePipe }, animations: [
           animations.trigger('showToast', [
               animations.state('void', animations.style({ 'transform-origin': 'top center', transform: 'translate(-50%, -100%)' })),
               animations.state('*', animations.style({ 'transform-origin': 'top center', transform: 'translate(-50%, 0)' })),
@@ -45332,7 +45403,7 @@
               type: i0.Component,
               args: [{
                       selector: 'rp-toolbar',
-                      template: "\n    <!--\n          <div class=\"layer layer&#45;&#45;toolbar\">\n    -->\n    <mat-toolbar class=\"toolbar\" color=\"primary\">\n      <button *ngIf=\"phoneSizeScreen\" mat-icon-button class=\"menu-icon\" [matMenuTriggerFor]=\"menu\">\n        <mat-icon class=\"homedecorator-material-icons\">menu</mat-icon>\n      </button>\n      <mat-menu #menu>\n        <ng-container *ngFor=\"let icon of toolbarIconsTop\">\n          <ng-container [cdkPortalOutlet]=\"icon.portal\">\n          </ng-container>\n        </ng-container>\n      </mat-menu>\n\n      <img src=\"assets/images/logo.svg\" class=\"toolbar-logo\"/>\n      <img *ngIf=\"settingsService.settings.secondaryLogo\" [src]=\"settingsService.settings.secondaryLogo\"\n           class=\"toolbar-logo secondary-logo\"/>\n      <ng-container *ngIf=\"settingsService.settings.options.development\">\n        <mat-card class=\"wip-card\">\n          <mat-card-content>\n            {{ 'WORK_IN_PROGRESS' | localize }}\n          </mat-card-content>\n        </mat-card>\n        <button mat-icon-button (click)=\"loadRoom()\">\n          <mat-icon class=\"homedecorator-material-icons\">weekend</mat-icon>\n        </button>\n        <button mat-icon-button (click)=\"loadResizableRoom()\">\n          <mat-icon class=\"homedecorator-material-icons\">camera-control</mat-icon>\n        </button>\n      </ng-container>\n      <ng-container *ngIf=\"settingsService.settings.options.showRoomDownloadButton\">\n        <button mat-icon-button (click)=\"downloadRoom()\">\n          <mat-icon class=\"homedecorator-material-icons\" matTooltip=\"{{'DOWNLOAD_ROOM_AS_GLB' | localize}}\">cloud_download</mat-icon>\n        </button>\n      </ng-container>\n      <div class=\"hd-toolbar-spacer\"></div>\n\n<!--      <ng-container>-->\n<!--        <rp-pdf-export></rp-pdf-export>-->\n<!--      </ng-container>-->\n\n      <mat-nav-list class=\"toolbar__nav\" role=\"list\">\n        <div matTooltip=\"{{'NEW_ROOM' | localize}}\">\n          <mat-list-item role=\"listitem\" (click)=\"newRoom()\">{{ 'NEW' | localize }}</mat-list-item>\n        </div>\n        <div matTooltip=\"{{'OPEN_EXISTING_PLAN' | localize}}\">\n          <mat-list-item role=\"listitem\" (click)=\"openOpenDialog()\">{{ 'OPEN' | localize }}</mat-list-item>\n        </div>\n        <div *ngIf=\"storageService.errorWhenSaving\" class=\"storage-error\"\n             [class.blinker]=\"showBlinkError\" matTooltip=\"{{'ERROR_SAVING_LOCALSTORAGE' | localize}}\"\n             (mousemove)=\"showBlinkError = false\"\n        ><span>!</span></div>\n        <div [class.blinker]=\"!showSaveNotification\" matTooltip=\"{{'SAVE_THE_PLAN' | localize}}\">\n          <mat-list-item\n            matTooltip=\"{{'SAVE_TOOLTIP' | localize}}\"\n            [matTooltipDisabled]=\"tooltipDisabled\"\n            matTooltipClass=\"tooltip-red\"\n            role=\"listitem\"\n            (click)=\"openSaveDialog() && stopTimer()\"\n          >{{ 'SAVE' | localize }}\n          </mat-list-item>\n        </div>\n        <div\n          class=\"badge\"\n          matBadge=\"!\"\n          matBadgeColor=\"warn\"\n          matBadgePosition=\"below before\"\n          matBadgeOverlap=\"true\"\n          matBadgeSize=\"medium\"\n          [matBadgeHidden]=\"badgeDisabled\">\n        </div>\n      </mat-nav-list>\n      <div matTooltip=\"{{'SAVE_IMAGE' | localize}}\">\n        <button mat-icon-button (click)=\"onTakeScreenshotClick()\">\n          <mat-icon class=\"homedecorator-material-icons\">photo_camera</mat-icon>\n        </button>\n      </div>\n      <div matTooltip=\"{{'UNDO' | localize}}\">\n        <button mat-icon-button (click)=\"messageService.emit(messageType.Undo)\"\n                [disabled]=\"presetsService.isLoading || !appState.canUndo()\"\n        >\n          <mat-icon class=\"homedecorator-material-icons\">undo</mat-icon>\n        </button>\n      </div>\n      <div matTooltip=\"{{'REDO' | localize}}\">\n        <button mat-icon-button (click)=\"messageService.emit(messageType.Redo)\"\n                [disabled]=\"presetsService.isLoading || !appState.canRedo()\"\n        >\n          <mat-icon class=\"homedecorator-material-icons\">redo</mat-icon>\n        </button>\n      </div>\n      <button mat-icon-button *ngIf=\"!fullscreen\" (click)=\"requestFullscreen()\" matTooltip=\"{{'REQUEST_FULLSCREEN' | localize}}\">\n        <mat-icon class=\"homedecorator-material-icons\">fullscreen</mat-icon>\n      </button>\n      <button mat-icon-button *ngIf=\"fullscreen\" (click)=\"exitFullscreen()\" matTooltip=\"{{'EXIT_FULLSCREEN' | localize}}\">\n        <mat-icon class=\"homedecorator-material-icons\">fullscreen_exit</mat-icon>\n      </button>\n    </mat-toolbar>\n\n    <limited-mode-message\n      *ngIf=\"phoneSizeScreen && showLimitedModeMessage\"\n      (closeClicked)=\"onCloseLimitedModeMessageClick()\">\n    </limited-mode-message>\n\n    <div class=\"toast-wrapper\"\n         [class.success]=\"toast.type ==  toastType.Success\"\n         [class.warning]=\"toast.type ==  toastType.Warning\"\n         [class.error]=\"toast.type ==  toastType.Error\"\n         *ngIf=\"toast\"\n         @showToast\n         [textContent]=\"toast.message\">\n    </div>\n\n    <mat-toolbar-row class=\"toolbar-row\">\n      <mat-toolbar class=\"toolbar toolbar--secondary\" *ngIf=\"!phoneSizeScreen\">\n        <ng-container *ngFor=\"let icon of toolbarIconsTop\">\n          <ng-container [cdkPortalOutlet]=\"icon.portal\"></ng-container>\n        </ng-container>\n        <span class=\"hd-toolbar-spacer\"></span>\n        <ng-container *ngFor=\"let icon of toolbarIconsBottom\">\n          <ng-container [cdkPortalOutlet]=\"icon.portal\"></ng-container>\n        </ng-container>\n      </mat-toolbar>\n\n      <mat-drawer-container class=\"drawer-container\">\n        <mat-drawer class=\"drawer\" mode=\"over\" position=\"left\" #leftSidebar>\n          <mat-drawer-content class=\"drawer__body\">\n            <button class=\"drawer__button\" mat-icon-button (click)=\"clickCloseLeftSidebar()\">\n              <mat-icon class=\"homedecorator-material-icons\">clear</mat-icon>\n            </button>\n            <ng-container [cdkPortalOutlet]=\"leftPortal\"></ng-container>\n          </mat-drawer-content>\n        </mat-drawer>\n      </mat-drawer-container>\n    </mat-toolbar-row>\n    <!--\n          </div>\n    -->\n  ",
+                      template: "\n    <!--\n          <div class=\"layer layer&#45;&#45;toolbar\">\n    -->\n    <mat-toolbar class=\"toolbar\" color=\"primary\">\n      <button *ngIf=\"phoneSizeScreen\" mat-icon-button class=\"menu-icon\" [matMenuTriggerFor]=\"menu\">\n        <mat-icon class=\"homedecorator-material-icons\">menu</mat-icon>\n      </button>\n      <mat-menu #menu>\n        <ng-container *ngFor=\"let icon of toolbarIconsTop\">\n          <ng-container [cdkPortalOutlet]=\"icon.portal\">\n          </ng-container>\n        </ng-container>\n      </mat-menu>\n\n      <img src=\"assets/images/logo.svg\" class=\"toolbar-logo\"/>\n      <img *ngIf=\"settingsService.settings.secondaryLogo\" [src]=\"settingsService.settings.secondaryLogo\"\n           class=\"toolbar-logo secondary-logo\"/>\n      <ng-container *ngIf=\"settingsService.settings.options.development\">\n        <mat-card class=\"wip-card\">\n          <mat-card-content>\n            {{ 'WORK_IN_PROGRESS' | localize }}\n          </mat-card-content>\n        </mat-card>\n        <button mat-icon-button (click)=\"loadRoom()\">\n          <mat-icon class=\"homedecorator-material-icons\">weekend</mat-icon>\n        </button>\n        <button mat-icon-button (click)=\"loadResizableRoom()\">\n          <mat-icon class=\"homedecorator-material-icons\">camera-control</mat-icon>\n        </button>\n      </ng-container>\n      <ng-container *ngIf=\"settingsService.settings.options.showRoomDownloadButton\">\n        <button mat-icon-button (click)=\"downloadRoom()\">\n          <mat-icon class=\"homedecorator-material-icons\" matTooltip=\"{{'DOWNLOAD_ROOM_AS_GLB' | localize}}\">cloud_download</mat-icon>\n        </button>\n      </ng-container>\n      <div class=\"hd-toolbar-spacer\"></div>\n\n      <!--      <ng-container>-->\n      <!--        <rp-pdf-export></rp-pdf-export>-->\n      <!--      </ng-container>-->\n\n      <mat-nav-list class=\"toolbar__nav\" role=\"list\">\n        <div matTooltip=\"{{'NEW_ROOM' | localize}}\">\n          <mat-list-item role=\"listitem\" (click)=\"newRoom()\">{{ 'NEW' | localize }}</mat-list-item>\n        </div>\n        <div matTooltip=\"{{'OPEN_EXISTING_PLAN' | localize}}\">\n          <mat-list-item role=\"listitem\" (click)=\"openOpenDialog()\">{{ 'OPEN' | localize }}</mat-list-item>\n        </div>\n        <div *ngIf=\"storageService.errorWhenSaving\" class=\"storage-error\"\n             [class.blinker]=\"showBlinkError\" matTooltip=\"{{'ERROR_SAVING_LOCALSTORAGE' | localize}}\"\n             (mousemove)=\"showBlinkError = false\"\n        ><span>!</span></div>\n        <div [class.blinker]=\"!showSaveNotification\" matTooltip=\"{{'SAVE_THE_PLAN' | localize}}\">\n          <mat-list-item\n            matTooltip=\"{{'SAVE_TOOLTIP' | localize}}\"\n            [matTooltipDisabled]=\"tooltipDisabled\"\n            matTooltipClass=\"tooltip-red\"\n            role=\"listitem\"\n            (click)=\"openSaveDialog() && stopTimer()\"\n          >{{ 'SAVE' | localize }}\n          </mat-list-item>\n        </div>\n        <div\n          class=\"badge\"\n          matBadge=\"!\"\n          matBadgeColor=\"warn\"\n          matBadgePosition=\"below before\"\n          matBadgeOverlap=\"true\"\n          matBadgeSize=\"medium\"\n          [matBadgeHidden]=\"badgeDisabled\">\n        </div>\n      </mat-nav-list>\n      <div matTooltip=\"{{'SAVE_IMAGE' | localize}}\">\n        <button mat-icon-button (click)=\"onTakeScreenshotClick()\">\n          <mat-icon class=\"homedecorator-material-icons\">photo_camera</mat-icon>\n        </button>\n      </div>\n      <div matTooltip=\"{{'UNDO' | localize}}\">\n        <button mat-icon-button (click)=\"messageService.emit(messageType.Undo)\"\n                [disabled]=\"presetsService.isLoading || !appState.canUndo()\"\n        >\n          <mat-icon class=\"homedecorator-material-icons\">undo</mat-icon>\n        </button>\n      </div>\n      <div matTooltip=\"{{'REDO' | localize}}\">\n        <button mat-icon-button (click)=\"messageService.emit(messageType.Redo)\"\n                [disabled]=\"presetsService.isLoading || !appState.canRedo()\"\n        >\n          <mat-icon class=\"homedecorator-material-icons\">redo</mat-icon>\n        </button>\n      </div>\n      <button mat-icon-button *ngIf=\"!fullscreen\" (click)=\"requestFullscreen()\" matTooltip=\"{{'REQUEST_FULLSCREEN' | localize}}\">\n        <mat-icon class=\"homedecorator-material-icons\">fullscreen</mat-icon>\n      </button>\n      <button mat-icon-button *ngIf=\"fullscreen\" (click)=\"exitFullscreen()\" matTooltip=\"{{'EXIT_FULLSCREEN' | localize}}\">\n        <mat-icon class=\"homedecorator-material-icons\">fullscreen_exit</mat-icon>\n      </button>\n    </mat-toolbar>\n\n    <limited-mode-message\n      *ngIf=\"phoneSizeScreen && showLimitedModeMessage\"\n      (closeClicked)=\"onCloseLimitedModeMessageClick()\">\n    </limited-mode-message>\n\n    <div class=\"toast-wrapper\"\n         [class.success]=\"toast.type ==  toastType.Success\"\n         [class.warning]=\"toast.type ==  toastType.Warning\"\n         [class.error]=\"toast.type ==  toastType.Error\"\n         *ngIf=\"toast\"\n         @showToast\n         [textContent]=\"toast.message\">\n    </div>\n\n    <mat-toolbar-row class=\"toolbar-row\">\n      <mat-toolbar class=\"toolbar toolbar--secondary\" *ngIf=\"!phoneSizeScreen\">\n        <ng-container *ngFor=\"let icon of toolbarIconsTop\">\n          <ng-container [cdkPortalOutlet]=\"icon.portal\"></ng-container>\n        </ng-container>\n        <span class=\"hd-toolbar-spacer\"></span>\n        <ng-container *ngFor=\"let icon of toolbarIconsBottom\">\n          <ng-container [cdkPortalOutlet]=\"icon.portal\"></ng-container>\n        </ng-container>\n      </mat-toolbar>\n\n      <mat-drawer-container class=\"drawer-container\">\n        <mat-drawer class=\"drawer\" mode=\"over\" position=\"left\" #leftSidebar>\n          <mat-drawer-content class=\"drawer__body\">\n            <button class=\"drawer__button\" mat-icon-button (click)=\"clickCloseLeftSidebar()\">\n              <mat-icon class=\"homedecorator-material-icons\">clear</mat-icon>\n            </button>\n            <ng-container [cdkPortalOutlet]=\"leftPortal\"></ng-container>\n          </mat-drawer-content>\n        </mat-drawer>\n      </mat-drawer-container>\n    </mat-toolbar-row>\n    <!--\n          </div>\n    -->\n  ",
                       styleUrls: ['./toolbar.component.scss'],
                       animations: [
                           animations.trigger('showToast', [
@@ -45426,7 +45497,7 @@
       return ProductOwnCollectionComponent;
   }());
   ProductOwnCollectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProductOwnCollectionComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ProductOwnCollectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProductOwnCollectionComponent, selector: "rp-product-own-collection", inputs: { settings: "settings" }, outputs: { articleClick: "articleClick", arButtonClick: "arButtonClick" }, ngImport: i0__namespace, template: "\n        <co-catalog-search\n                [(settings)]=\"settings\"\n                [showNavigation]=\"true\"\n                [title]=\"'CATALOG' | localize\"\n                [subTitle]=\"'Zoeken op artikelnummer, naam of omschrijving'\"\n                [searchPlaceholder]=\"'Zoeken op artikelnummer of omschrijving'\"\n                [showFilter]=\"true\"\n                (onArticleClick)=\"handleArticleClick($event)\"\n                (onArButtonClick)=\"handleArButtonClick($event)\"\n        ></co-catalog-search>\n    ", isInline: true, styles: [":host{display:block;overflow:auto}\n"], components: [{ type: i7__namespace$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 } });
+  ProductOwnCollectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProductOwnCollectionComponent, selector: "rp-product-own-collection", inputs: { settings: "settings" }, outputs: { articleClick: "articleClick", arButtonClick: "arButtonClick" }, ngImport: i0__namespace, template: "\n        <co-catalog-search\n                [(settings)]=\"settings\"\n                [showNavigation]=\"true\"\n                [title]=\"'CATALOG' | localize\"\n                [subTitle]=\"'Zoeken op artikelnummer, naam of omschrijving'\"\n                [searchPlaceholder]=\"'Zoeken op artikelnummer of omschrijving'\"\n                [showFilter]=\"true\"\n                (onArticleClick)=\"handleArticleClick($event)\"\n                (onArButtonClick)=\"handleArButtonClick($event)\"\n        ></co-catalog-search>\n    ", isInline: true, styles: [":host{display:block;overflow:auto}\n"], components: [{ type: i7__namespace$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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProductOwnCollectionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -45858,8 +45929,8 @@
       };
       return ProductCatalogComponent;
   }());
-  ProductCatalogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProductCatalogComponent, deps: [{ token: HomedecoratorSettingsService }, { token: MessageBusService }, { token: HomedecoratorConnectorService }, { token: ScreenSizeAnalysisService }, { token: SceneService }, { token: FloorplanService }, { token: i0__namespace.Injector }, { token: i7__namespace$3.CatalogService }, { token: DynamicScriptService }, { token: HomedecoratorConnectorAdapterService }, { token: BuildFurnitureService }, { token: ThirdPartyModelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ProductCatalogComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n      <div class=\"product-catalog-wrapper\">\n        <div class=\"catalog-button-wrapper\" *ngIf=\"showOwnCollection || showExternalCatalog\">\n          <div class=\"back-button\" (click)=\"handleBackClick($event)\">\n            <mat-icon class=\"homedecorator-material-icons\">arrow_back</mat-icon>\n            <span class=\"back-button-span\">Terug</span>\n          </div>\n          <div class=\"button-spacer\"></div>\n          <div class=\"refresh-button\" (click)=\"handleRefreshClick($event)\">\n            <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\n            <span class=\"refresh-button-span\">Verversen</span>\n          </div>\n\n          <div class=\"button-spacer\"></div>\n          <div class=\"refresh-button\" (click)=\"iframeTest()\">\n            <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\n            <span class=\"refresh-button-span\">iframeTest</span>\n          </div>\n\n        </div>\n        <ng-container *ngIf=\"showOwnCollection\">\n          <rp-product-own-collection\n            [settings]=\"settingsService.settings\"\n            (articleClick)=\"handleArticleClick($event)\"\n          ></rp-product-own-collection>\n        </ng-container>\n\n        <ng-container *ngIf=\"homeDecoHub && !showOwnCollection && !showExternalCatalog\">\n          <rp-model-uploader>\n\n          </rp-model-uploader>\n        </ng-container>\n\n\n        <ng-container *ngIf=\"!showOwnCollection && loaded\">\n          <div class=\"own-collection-button-wrapper\" (click)=\"handleShowOwnCollectionClick($event)\"\n               *ngIf=\"!showExternalCatalog && settingsService.settings.options.showOwnCatalogButton\">\n            <div class=\"own-collection-description\" [textContent]=\"'OWN_COLLECTION' | localize\"></div>\n            <co-image [source]=\"'assets/images/logo.svg'\"></co-image>\n          </div>\n          <co-catalog-external-sources *ngIf=\"!showExternalCatalog\"\n                                       (externalSourceClick)=\"handleExternalSourceClick($event)\"></co-catalog-external-sources>\n          <co-catalog-external-source *ngIf=\"showExternalCatalog\"\n                                      [options]=\"{searchOnStart: true}\"\n                                      [externalCatalogStartupInfo]=\"catalogInfo\"\n                                      [catalogDefinition]=\"catalogDefinition\"\n                                      [title]=\"'CATALOG' | localize | append: ' ' | append: externalCatalogName\"\n                                      [subTitle]=\"'Zoeken naar artikelen'\"\n                                      [searchPlaceholder]=\"'Zoek naar artikelen'\"\n                                      [name]=\"externalCatalogName\"\n                                      [showFilter]=\"false\"\n                                      (articleClick)=\"handleArticleClick($event, catalogInfo)\"\n                                      [class.hide-filter]=\"settingsService.settings.options.showOnlyHomeDecoFilter\"\n                                      (iFrameFeedbackReceived)=\"handleIFrameFeedback($event)\"\n          ></co-catalog-external-source>\n        </ng-container>\n        <button mat-icon-button class=\"hide-catalog\" (click)=\"hideCatalog()\">\n          <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">close</mat-icon>\n        </button>\n      </div>\n  ", 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__namespace$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__namespace$1.ImageComponent, selector: "co-image", inputs: ["source", "placeHolder"] }, { type: i7__namespace$3.ɵt, selector: "co-catalog-external-sources", outputs: ["externalSourceClick"] }, { type: i7__namespace$3.ɵbg, selector: "co-catalog-external-source", inputs: ["showFilter", "showNavigation", "externalCatalogStartupInfo", "catalogDefinition", "user", "title", "subTitle", "searchPlaceholder", "options", "name"], outputs: ["articleClick", "addArticleClick", "iFrameFeedbackReceived"] }, { type: i3__namespace$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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe, "append": AppendPipe } });
+  ProductCatalogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProductCatalogComponent, deps: [{ token: HomedecoratorSettingsService }, { token: MessageBusService }, { token: HomedecoratorConnectorService }, { token: ScreenSizeAnalysisService }, { token: SceneService }, { token: FloorplanService }, { token: i0__namespace.Injector }, { token: i7__namespace$2.CatalogService }, { token: DynamicScriptService }, { token: HomedecoratorConnectorAdapterService }, { token: BuildFurnitureService }, { token: ThirdPartyModelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  ProductCatalogComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n      <div class=\"product-catalog-wrapper\">\n        <div class=\"catalog-button-wrapper\" *ngIf=\"showOwnCollection || showExternalCatalog\">\n          <div class=\"back-button\" (click)=\"handleBackClick($event)\">\n            <mat-icon class=\"homedecorator-material-icons\">arrow_back</mat-icon>\n            <span class=\"back-button-span\">Terug</span>\n          </div>\n          <div class=\"button-spacer\"></div>\n          <div class=\"refresh-button\" (click)=\"handleRefreshClick($event)\">\n            <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\n            <span class=\"refresh-button-span\">Verversen</span>\n          </div>\n\n          <div class=\"button-spacer\"></div>\n          <div class=\"refresh-button\" (click)=\"iframeTest()\">\n            <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\n            <span class=\"refresh-button-span\">iframeTest</span>\n          </div>\n\n        </div>\n        <ng-container *ngIf=\"showOwnCollection\">\n          <rp-product-own-collection\n            [settings]=\"settingsService.settings\"\n            (articleClick)=\"handleArticleClick($event)\"\n          ></rp-product-own-collection>\n        </ng-container>\n\n        <ng-container *ngIf=\"homeDecoHub && !showOwnCollection && !showExternalCatalog\">\n          <rp-model-uploader>\n\n          </rp-model-uploader>\n        </ng-container>\n\n\n        <ng-container *ngIf=\"!showOwnCollection && loaded\">\n          <div class=\"own-collection-button-wrapper\" (click)=\"handleShowOwnCollectionClick($event)\"\n               *ngIf=\"!showExternalCatalog && settingsService.settings.options.showOwnCatalogButton\">\n            <div class=\"own-collection-description\" [textContent]=\"'OWN_COLLECTION' | localize\"></div>\n            <co-image [source]=\"'assets/images/logo.svg'\"></co-image>\n          </div>\n          <co-catalog-external-sources *ngIf=\"!showExternalCatalog\"\n                                       (externalSourceClick)=\"handleExternalSourceClick($event)\"></co-catalog-external-sources>\n          <co-catalog-external-source *ngIf=\"showExternalCatalog\"\n                                      [options]=\"{searchOnStart: true}\"\n                                      [externalCatalogStartupInfo]=\"catalogInfo\"\n                                      [catalogDefinition]=\"catalogDefinition\"\n                                      [title]=\"'CATALOG' | localize | append: ' ' | append: externalCatalogName\"\n                                      [subTitle]=\"'Zoeken naar artikelen'\"\n                                      [searchPlaceholder]=\"'Zoek naar artikelen'\"\n                                      [name]=\"externalCatalogName\"\n                                      [showFilter]=\"false\"\n                                      (articleClick)=\"handleArticleClick($event, catalogInfo)\"\n                                      [class.hide-filter]=\"settingsService.settings.options.showOnlyHomeDecoFilter\"\n                                      (iFrameFeedbackReceived)=\"handleIFrameFeedback($event)\"\n          ></co-catalog-external-source>\n        </ng-container>\n        <button mat-icon-button class=\"hide-catalog\" (click)=\"hideCatalog()\">\n          <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">close</mat-icon>\n        </button>\n      </div>\n  ", 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__namespace$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__namespace$1.ImageComponent, selector: "co-image", inputs: ["source", "placeHolder"] }, { type: i7__namespace$2.ɵt, selector: "co-catalog-external-sources", outputs: ["externalSourceClick"] }, { type: i7__namespace$2.ɵbg, selector: "co-catalog-external-source", inputs: ["showFilter", "showNavigation", "externalCatalogStartupInfo", "catalogDefinition", "user", "title", "subTitle", "searchPlaceholder", "options", "name"], outputs: ["articleClick", "addArticleClick", "iFrameFeedbackReceived"] }, { type: i3__namespace$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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe, "append": AppendPipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProductCatalogComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -45867,7 +45938,7 @@
                       template: "\n      <div class=\"product-catalog-wrapper\">\n        <div class=\"catalog-button-wrapper\" *ngIf=\"showOwnCollection || showExternalCatalog\">\n          <div class=\"back-button\" (click)=\"handleBackClick($event)\">\n            <mat-icon class=\"homedecorator-material-icons\">arrow_back</mat-icon>\n            <span class=\"back-button-span\">Terug</span>\n          </div>\n          <div class=\"button-spacer\"></div>\n          <div class=\"refresh-button\" (click)=\"handleRefreshClick($event)\">\n            <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\n            <span class=\"refresh-button-span\">Verversen</span>\n          </div>\n\n          <div class=\"button-spacer\"></div>\n          <div class=\"refresh-button\" (click)=\"iframeTest()\">\n            <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\n            <span class=\"refresh-button-span\">iframeTest</span>\n          </div>\n\n        </div>\n        <ng-container *ngIf=\"showOwnCollection\">\n          <rp-product-own-collection\n            [settings]=\"settingsService.settings\"\n            (articleClick)=\"handleArticleClick($event)\"\n          ></rp-product-own-collection>\n        </ng-container>\n\n        <ng-container *ngIf=\"homeDecoHub && !showOwnCollection && !showExternalCatalog\">\n          <rp-model-uploader>\n\n          </rp-model-uploader>\n        </ng-container>\n\n\n        <ng-container *ngIf=\"!showOwnCollection && loaded\">\n          <div class=\"own-collection-button-wrapper\" (click)=\"handleShowOwnCollectionClick($event)\"\n               *ngIf=\"!showExternalCatalog && settingsService.settings.options.showOwnCatalogButton\">\n            <div class=\"own-collection-description\" [textContent]=\"'OWN_COLLECTION' | localize\"></div>\n            <co-image [source]=\"'assets/images/logo.svg'\"></co-image>\n          </div>\n          <co-catalog-external-sources *ngIf=\"!showExternalCatalog\"\n                                       (externalSourceClick)=\"handleExternalSourceClick($event)\"></co-catalog-external-sources>\n          <co-catalog-external-source *ngIf=\"showExternalCatalog\"\n                                      [options]=\"{searchOnStart: true}\"\n                                      [externalCatalogStartupInfo]=\"catalogInfo\"\n                                      [catalogDefinition]=\"catalogDefinition\"\n                                      [title]=\"'CATALOG' | localize | append: ' ' | append: externalCatalogName\"\n                                      [subTitle]=\"'Zoeken naar artikelen'\"\n                                      [searchPlaceholder]=\"'Zoek naar artikelen'\"\n                                      [name]=\"externalCatalogName\"\n                                      [showFilter]=\"false\"\n                                      (articleClick)=\"handleArticleClick($event, catalogInfo)\"\n                                      [class.hide-filter]=\"settingsService.settings.options.showOnlyHomeDecoFilter\"\n                                      (iFrameFeedbackReceived)=\"handleIFrameFeedback($event)\"\n          ></co-catalog-external-source>\n        </ng-container>\n        <button mat-icon-button class=\"hide-catalog\" (click)=\"hideCatalog()\">\n          <mat-icon class=\"homedecorator-material-icons\" aria-hidden=\"true\">close</mat-icon>\n        </button>\n      </div>\n  ",
                       styleUrls: ['./product-catalog.component.scss']
                   }]
-          }], ctorParameters: function () { return [{ type: HomedecoratorSettingsService }, { type: MessageBusService }, { type: HomedecoratorConnectorService }, { type: ScreenSizeAnalysisService }, { type: SceneService }, { type: FloorplanService }, { type: i0__namespace.Injector }, { type: i7__namespace$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__namespace.Injector }, { type: i7__namespace$2.CatalogService }, { type: DynamicScriptService }, { type: HomedecoratorConnectorAdapterService }, { type: BuildFurnitureService }, { type: ThirdPartyModelService }]; }, propDecorators: { shown: [{
                   type: i0.HostBinding,
                   args: ['class.shown']
               }], phoneSizeScreen: [{
@@ -46008,7 +46079,7 @@
       });
   };
   var HomedecoratorComponent = /** @class */ (function () {
-      function HomedecoratorComponent(controllerService, appState, presetsService, screenAnalysis, _componentFactoryResolver, _iconRegistry, _domSanitizer, _messageService, _homedecoratorService) {
+      function HomedecoratorComponent(controllerService, appState, presetsService, screenAnalysis, _componentFactoryResolver, _iconRegistry, _domSanitizer, _messageService, _homedecoratorService, _eventService) {
           this.controllerService = controllerService;
           this.appState = appState;
           this.presetsService = presetsService;
@@ -46018,6 +46089,7 @@
           this._domSanitizer = _domSanitizer;
           this._messageService = _messageService;
           this._homedecoratorService = _homedecoratorService;
+          this._eventService = _eventService;
           this.showClass = true;
           this.loaded = false;
           this.title = 'MyRoomPlans';
@@ -46159,7 +46231,10 @@
               'hand-pointer',
               'check',
               'move-phone-ar',
-              'cart-shopping-regular'
+              'cart-shopping-regular',
+              'pen-ruler',
+              'dash-button',
+              'retry-button'
           ].map(addIcon);
       };
       HomedecoratorComponent.prototype.keyup = function (event) {
@@ -46190,6 +46265,7 @@
           });
       };
       HomedecoratorComponent.prototype._startWithEmptyRoom = function (switchTo2D) {
+          this._eventService.dirty.next(true);
           var preset = Preset.CreateModelFromInterface({ filename: 'assets/presets/empty.json' });
           this._startWithPreset(preset, switchTo2D);
       };
@@ -46206,7 +46282,7 @@
       };
       return HomedecoratorComponent;
   }());
-  HomedecoratorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HomedecoratorComponent, deps: [{ token: HomedecoratorConnectorService }, { token: AppStateService }, { token: PresetsService }, { token: ScreenSizeAnalysisService }, { token: i0__namespace.ComponentFactoryResolver }, { token: i5__namespace$1.MatIconRegistry }, { token: i1__namespace.DomSanitizer }, { token: MessageBusService }, { token: HomedecoratorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  HomedecoratorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HomedecoratorComponent, deps: [{ token: HomedecoratorConnectorService }, { token: AppStateService }, { token: PresetsService }, { token: ScreenSizeAnalysisService }, { token: i0__namespace.ComponentFactoryResolver }, { token: i5__namespace$1.MatIconRegistry }, { token: i1__namespace.DomSanitizer }, { token: MessageBusService }, { token: HomedecoratorService }, { token: HomedecoratorAppEventService }], target: i0__namespace.ɵɵFactoryTarget.Component });
   HomedecoratorComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n    <div class=\"viewport\" *ngIf=\"loaded\">\n      <progress-bar></progress-bar>\n      <rp-loading-overlay>\n          <rp-core3d></rp-core3d>\n          <rp-room-planner></rp-room-planner>\n          <rp-furniture-manager></rp-furniture-manager>\n          <rp-presets></rp-presets>\n          <rp-threedselector></rp-threedselector>\n          <rp-toolbar></rp-toolbar>\n          <rp-product-catalog></rp-product-catalog>\n          <rp-lite-selector></rp-lite-selector>\n          <rp-help></rp-help>\n      </rp-loading-overlay>\n    </div>\n    <rp-loader [show]=\"controllerService.shouldShowLoader\"></rp-loader>\n    <div *ngIf=\"shouldShowLandscapeMessage\" class=\"mobile-portrait-overlay\">\n<!--\n      <mat-icon svgIcon=\"tilt-phone\" class=\"tilt-phone-icon\"></mat-icon>\n-->\n      <div>\n<!--\n        {{'PLEASE_USE_PHONE_IN_LANDSCAPE_MODE' | localize}}\n-->\n      </div>\n    </div>\n  ", isInline: true, components: [{ type: ProgressBarComponent, selector: "progress-bar" }, { type: LoadingOverlayComponent, selector: "rp-loading-overlay" }, { type: Core3dComponent, selector: "rp-core3d" }, { type: RoomPlannerComponent, selector: "rp-room-planner", inputs: ["isLoading"], outputs: ["done", "showPlugin", "focusControls"] }, { type: FurnitureManagerComponent, selector: "rp-furniture-manager" }, { type: PresetsComponent, selector: "rp-presets" }, { type: ThreedselectorComponent, selector: "rp-threedselector", inputs: ["selections"], outputs: ["customizeButtonClicked"] }, { type: ToolbarComponent, selector: "rp-toolbar" }, { type: ProductCatalogComponent, selector: "rp-product-catalog" }, { type: LiteSelectorComponent, selector: "rp-lite-selector", inputs: ["showAnswers", "show", "showSelections", "showLabel", "canClose", "metadata", "customDimensions"], outputs: ["showChange", "answerChosen"] }, { type: HelpComponent, selector: "rp-help" }, { type: HdLoaderComponent, selector: "rp-loader", inputs: ["show"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HomedecoratorComponent, decorators: [{
               type: i0.Component,
@@ -46215,7 +46291,7 @@
                       template: "\n    <div class=\"viewport\" *ngIf=\"loaded\">\n      <progress-bar></progress-bar>\n      <rp-loading-overlay>\n          <rp-core3d></rp-core3d>\n          <rp-room-planner></rp-room-planner>\n          <rp-furniture-manager></rp-furniture-manager>\n          <rp-presets></rp-presets>\n          <rp-threedselector></rp-threedselector>\n          <rp-toolbar></rp-toolbar>\n          <rp-product-catalog></rp-product-catalog>\n          <rp-lite-selector></rp-lite-selector>\n          <rp-help></rp-help>\n      </rp-loading-overlay>\n    </div>\n    <rp-loader [show]=\"controllerService.shouldShowLoader\"></rp-loader>\n    <div *ngIf=\"shouldShowLandscapeMessage\" class=\"mobile-portrait-overlay\">\n<!--\n      <mat-icon svgIcon=\"tilt-phone\" class=\"tilt-phone-icon\"></mat-icon>\n-->\n      <div>\n<!--\n        {{'PLEASE_USE_PHONE_IN_LANDSCAPE_MODE' | localize}}\n-->\n      </div>\n    </div>\n  ",
                       encapsulation: i0.ViewEncapsulation.None
                   }]
-          }], ctorParameters: function () { return [{ type: HomedecoratorConnectorService }, { type: AppStateService }, { type: PresetsService }, { type: ScreenSizeAnalysisService }, { type: i0__namespace.ComponentFactoryResolver }, { type: i5__namespace$1.MatIconRegistry }, { type: i1__namespace.DomSanitizer }, { type: MessageBusService }, { type: HomedecoratorService }]; }, propDecorators: { settings: [{
+          }], ctorParameters: function () { return [{ type: HomedecoratorConnectorService }, { type: AppStateService }, { type: PresetsService }, { type: ScreenSizeAnalysisService }, { type: i0__namespace.ComponentFactoryResolver }, { type: i5__namespace$1.MatIconRegistry }, { type: i1__namespace.DomSanitizer }, { type: MessageBusService }, { type: HomedecoratorService }, { type: HomedecoratorAppEventService }]; }, propDecorators: { settings: [{
                   type: i0.Input
               }], showClass: [{
                   type: i0.HostBinding,
@@ -46657,10 +46733,10 @@
           i10.MatTooltipModule,
           i19.MatInputModule,
           i5$1.MatIconModule,
-          i9.MatSelectModule,
+          i12.MatSelectModule,
           i10$1.MatSlideToggleModule,
           i3$2.MatGridListModule,
-          i15.MatProgressSpinnerModule,
+          i16.MatProgressSpinnerModule,
           i8.FormsModule], exports: [RenderDialogComponent,
           RenderControlsComponent] });
   RenderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RenderModule, providers: [
@@ -46673,10 +46749,10 @@
               i10.MatTooltipModule,
               i19.MatInputModule,
               i5$1.MatIconModule,
-              i9.MatSelectModule,
+              i12.MatSelectModule,
               i10$1.MatSlideToggleModule,
               i3$2.MatGridListModule,
-              i15.MatProgressSpinnerModule,
+              i16.MatProgressSpinnerModule,
               i8.FormsModule
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RenderModule, decorators: [{
@@ -46690,10 +46766,10 @@
                           i10.MatTooltipModule,
                           i19.MatInputModule,
                           i5$1.MatIconModule,
-                          i9.MatSelectModule,
+                          i12.MatSelectModule,
                           i10$1.MatSlideToggleModule,
                           i3$2.MatGridListModule,
-                          i15.MatProgressSpinnerModule,
+                          i16.MatProgressSpinnerModule,
                           i8.FormsModule
                       ],
                       declarations: [
@@ -46727,7 +46803,7 @@
           DevelopmentDirective], imports: [i5.CommonModule,
           i1$2.MatCheckboxModule,
           i8.FormsModule,
-          i9.MatSelectModule,
+          i12.MatSelectModule,
           i4.IconModule,
           CoreModule,
           i3$1.MatButtonModule,
@@ -46740,7 +46816,7 @@
               i5.CommonModule,
               i1$2.MatCheckboxModule,
               i8.FormsModule,
-              i9.MatSelectModule,
+              i12.MatSelectModule,
               i4.IconModule,
               CoreModule,
               i3$1.MatButtonModule,
@@ -46753,7 +46829,7 @@
                           i5.CommonModule,
                           i1$2.MatCheckboxModule,
                           i8.FormsModule,
-                          i9.MatSelectModule,
+                          i12.MatSelectModule,
                           i4.IconModule,
                           CoreModule,
                           i3$1.MatButtonModule,
@@ -46936,7 +47012,7 @@
           // MatIconModule,
           i10.MatTooltipModule,
           i7$1.MatSliderModule,
-          i9.MatSelectModule,
+          i12.MatSelectModule,
           // MatProgressBarModule,
           // ToolbarIconModule,
           // ZoomControlsModule,
@@ -46981,7 +47057,7 @@
               // MatIconModule,
               i10.MatTooltipModule,
               i7$1.MatSliderModule,
-              i9.MatSelectModule,
+              i12.MatSelectModule,
               // MatProgressBarModule,
               // ToolbarIconModule,
               // ZoomControlsModule,
@@ -47020,7 +47096,7 @@
                           // MatIconModule,
                           i10.MatTooltipModule,
                           i7$1.MatSliderModule,
-                          i9.MatSelectModule,
+                          i12.MatSelectModule,
                           // MatProgressBarModule,
                           // ToolbarIconModule,
                           // ZoomControlsModule,
@@ -47108,7 +47184,7 @@
       return EditApplyComponent;
   }());
   EditApplyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditApplyComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  EditApplyComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe } });
+  EditApplyComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "localize": LocalizePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditApplyComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -47391,7 +47467,7 @@
           i5.CommonModule,
           ContextMenuModule,
           i3$1.MatButtonModule,
-          i7$2.MatButtonToggleModule,
+          i8$1.MatButtonToggleModule,
           i23.MatCardModule,
           i1$2.MatCheckboxModule,
           i7.MatFormFieldModule,
@@ -47402,7 +47478,7 @@
           i3$2.MatGridListModule,
           i5$1.MatIconModule,
           i1$4.MatTabsModule,
-          i9.MatSelectModule,
+          i12.MatSelectModule,
           i6.MatDividerModule,
           i10.MatTooltipModule,
           i2$4.MatSnackBarModule,
@@ -47430,7 +47506,7 @@
               i5.CommonModule,
               ContextMenuModule,
               i3$1.MatButtonModule,
-              i7$2.MatButtonToggleModule,
+              i8$1.MatButtonToggleModule,
               i23.MatCardModule,
               i1$2.MatCheckboxModule,
               i7.MatFormFieldModule,
@@ -47441,7 +47517,7 @@
               i3$2.MatGridListModule,
               i5$1.MatIconModule,
               i1$4.MatTabsModule,
-              i9.MatSelectModule,
+              i12.MatSelectModule,
               i6.MatDividerModule,
               i10.MatTooltipModule,
               i2$4.MatSnackBarModule,
@@ -47467,7 +47543,7 @@
                           i5.CommonModule,
                           ContextMenuModule,
                           i3$1.MatButtonModule,
-                          i7$2.MatButtonToggleModule,
+                          i8$1.MatButtonToggleModule,
                           i23.MatCardModule,
                           i1$2.MatCheckboxModule,
                           i7.MatFormFieldModule,
@@ -47478,7 +47554,7 @@
                           i3$2.MatGridListModule,
                           i5$1.MatIconModule,
                           i1$4.MatTabsModule,
-                          i9.MatSelectModule,
+                          i12.MatSelectModule,
                           i6.MatDividerModule,
                           i10.MatTooltipModule,
                           i2$4.MatSnackBarModule,
@@ -47546,7 +47622,7 @@
           i5.CommonModule,
           ContextMenuModule,
           i3$1.MatButtonModule,
-          i7$2.MatButtonToggleModule,
+          i8$1.MatButtonToggleModule,
           i26.MatSidenavModule,
           i23.MatCardModule,
           i7$1.MatSliderModule,
@@ -47567,7 +47643,7 @@
               i5.CommonModule,
               ContextMenuModule,
               i3$1.MatButtonModule,
-              i7$2.MatButtonToggleModule,
+              i8$1.MatButtonToggleModule,
               i26.MatSidenavModule,
               i23.MatCardModule,
               i7$1.MatSliderModule,
@@ -47587,7 +47663,7 @@
                           i5.CommonModule,
                           ContextMenuModule,
                           i3$1.MatButtonModule,
-                          i7$2.MatButtonToggleModule,
+                          i8$1.MatButtonToggleModule,
                           i26.MatSidenavModule,
                           i23.MatCardModule,
                           i7$1.MatSliderModule,
@@ -47786,7 +47862,7 @@
           ElementSliderComponent], imports: [i5.CommonModule,
           i8.FormsModule,
           i3$1.MatButtonModule,
-          i7$2.MatButtonToggleModule,
+          i8$1.MatButtonToggleModule,
           i26.MatSidenavModule,
           i23.MatCardModule,
           i7$1.MatSliderModule,
@@ -47812,7 +47888,7 @@
               i5.CommonModule,
               i8.FormsModule,
               i3$1.MatButtonModule,
-              i7$2.MatButtonToggleModule,
+              i8$1.MatButtonToggleModule,
               i26.MatSidenavModule,
               i23.MatCardModule,
               i7$1.MatSliderModule,
@@ -47841,7 +47917,7 @@
                           i5.CommonModule,
                           i8.FormsModule,
                           i3$1.MatButtonModule,
-                          i7$2.MatButtonToggleModule,
+                          i8$1.MatButtonToggleModule,
                           i26.MatSidenavModule,
                           i23.MatCardModule,
                           i7$1.MatSliderModule,
@@ -48208,7 +48284,7 @@
           i26.MatSidenavModule,
           i2$2.MatListModule,
           i1$1.MatDialogModule,
-          i7$2.MatButtonToggleModule,
+          i8$1.MatButtonToggleModule,
           i2$4.MatSnackBarModule,
           i19.MatInputModule,
           i7.MatFormFieldModule,
@@ -48238,7 +48314,7 @@
               i26.MatSidenavModule,
               i2$2.MatListModule,
               i1$1.MatDialogModule,
-              i7$2.MatButtonToggleModule,
+              i8$1.MatButtonToggleModule,
               i2$4.MatSnackBarModule,
               i19.MatInputModule,
               i7.MatFormFieldModule,
@@ -48272,7 +48348,7 @@
                           i26.MatSidenavModule,
                           i2$2.MatListModule,
                           i1$1.MatDialogModule,
-                          i7$2.MatButtonToggleModule,
+                          i8$1.MatButtonToggleModule,
                           i2$4.MatSnackBarModule,
                           i19.MatInputModule,
                           i7.MatFormFieldModule,
@@ -48329,11 +48405,11 @@
   ProductOwnCollectionModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProductOwnCollectionModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
   ProductOwnCollectionModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProductOwnCollectionModule, declarations: [ProductOwnCollectionComponent], imports: [i5.CommonModule,
           CoreModule,
-          i7$3.CatalogSearchModule], exports: [ProductOwnCollectionComponent] });
+          i7$2.CatalogSearchModule], exports: [ProductOwnCollectionComponent] });
   ProductOwnCollectionModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProductOwnCollectionModule, imports: [[
               i5.CommonModule,
               CoreModule,
-              i7$3.CatalogSearchModule
+              i7$2.CatalogSearchModule
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProductOwnCollectionModule, decorators: [{
               type: i0.NgModule,
@@ -48341,7 +48417,7 @@
                       imports: [
                           i5.CommonModule,
                           CoreModule,
-                          i7$3.CatalogSearchModule
+                          i7$2.CatalogSearchModule
                       ],
                       declarations: [
                           ProductOwnCollectionComponent
@@ -48365,9 +48441,14 @@
           i3$1.MatButtonModule,
           i4.ButtonModule,
           i4$1.ImageModule,
-          i7$3.CatalogExternalSourcesModule,
-          i7$3.CatalogExternalSourceModule,
-          i9$1.MatRadioModule], exports: [ModelUploaderComponent] });
+          i7$2.CatalogExternalSourcesModule,
+          i7$2.CatalogExternalSourceModule,
+          radio.MatRadioModule,
+          i10$1.MatSlideToggleModule,
+          i7.MatFormFieldModule,
+          i3.MatOptionModule,
+          i12.MatSelectModule,
+          i4.IconModule], exports: [ModelUploaderComponent] });
   ModelUploaderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ModelUploaderModule, imports: [[
               i5.CommonModule,
               CoreModule,
@@ -48375,9 +48456,14 @@
               i3$1.MatButtonModule,
               i4.ButtonModule,
               i4$1.ImageModule,
-              i7$3.CatalogExternalSourcesModule,
-              i7$3.CatalogExternalSourceModule,
-              i9$1.MatRadioModule,
+              i7$2.CatalogExternalSourcesModule,
+              i7$2.CatalogExternalSourceModule,
+              radio.MatRadioModule,
+              i10$1.MatSlideToggleModule,
+              i7.MatFormFieldModule,
+              i3.MatOptionModule,
+              i12.MatSelectModule,
+              i4.IconModule,
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ModelUploaderModule, decorators: [{
               type: i0.NgModule,
@@ -48389,9 +48475,14 @@
                           i3$1.MatButtonModule,
                           i4.ButtonModule,
                           i4$1.ImageModule,
-                          i7$3.CatalogExternalSourcesModule,
-                          i7$3.CatalogExternalSourceModule,
-                          i9$1.MatRadioModule,
+                          i7$2.CatalogExternalSourcesModule,
+                          i7$2.CatalogExternalSourceModule,
+                          radio.MatRadioModule,
+                          i10$1.MatSlideToggleModule,
+                          i7.MatFormFieldModule,
+                          i3.MatOptionModule,
+                          i12.MatSelectModule,
+                          i4.IconModule,
                       ],
                       exports: [
                           ModelUploaderComponent
@@ -48415,9 +48506,9 @@
           i3$1.MatButtonModule,
           i4.ButtonModule,
           i4$1.ImageModule,
-          i7$3.CatalogExternalSourcesModule,
+          i7$2.CatalogExternalSourcesModule,
           ProductOwnCollectionModule,
-          i7$3.CatalogExternalSourceModule,
+          i7$2.CatalogExternalSourceModule,
           ModelUploaderModule], exports: [ProductCatalogComponent] });
   ProductCatalogModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProductCatalogModule, imports: [[
               i5.CommonModule,
@@ -48426,9 +48517,9 @@
               i3$1.MatButtonModule,
               i4.ButtonModule,
               i4$1.ImageModule,
-              i7$3.CatalogExternalSourcesModule,
+              i7$2.CatalogExternalSourcesModule,
               ProductOwnCollectionModule,
-              i7$3.CatalogExternalSourceModule,
+              i7$2.CatalogExternalSourceModule,
               ModelUploaderModule
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProductCatalogModule, decorators: [{
@@ -48441,9 +48532,9 @@
                           i3$1.MatButtonModule,
                           i4.ButtonModule,
                           i4$1.ImageModule,
-                          i7$3.CatalogExternalSourcesModule,
+                          i7$2.CatalogExternalSourcesModule,
                           ProductOwnCollectionModule,
-                          i7$3.CatalogExternalSourceModule,
+                          i7$2.CatalogExternalSourceModule,
                           ModelUploaderModule
                       ],
                       exports: [