@colijnit/homedecorator 255.1.4 → 255.1.6

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/OutputPass'), require('three/examples/jsm/libs/lil-gui.module.min'), require('n8ao'), require('three/examples/jsm/shaders/FXAAShader'), require('three/examples/jsm/postprocessing/ShaderPass'), 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/OutputPass', 'three/examples/jsm/libs/lil-gui.module.min', 'n8ao', 'three/examples/jsm/shaders/FXAAShader', 'three/examples/jsm/postprocessing/ShaderPass', '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.OutputPass, global.GUI, global.n8ao, global.FXAAShader, global.ShaderPass, 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, OutputPass, GUI, n8ao, FXAAShader, ShaderPass, 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, i9, 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);
@@ -55,10 +54,10 @@
   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) {
@@ -1514,6 +1544,8 @@
           this.pathTracer = false;
           this.ssrEnabled = false;
           this.maxRenderSamples = 100;
+          this.aoEnabled = true;
+          this.aaEnabled = true;
       }
       return HomedecoratorSettingsOptions;
   }());
@@ -1595,7 +1627,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 +1673,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 +1709,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 +1732,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 {
@@ -1725,6 +1757,7 @@
           this._dictionaryService = _dictionaryService;
           this._connectorService = _connectorService;
           this.settingsLoaded = new rxjs.BehaviorSubject(false);
+          this.settingsChanged = new rxjs.Subject();
           this._settings = new HomedecoratorSettings();
           // this._initializeSettings();
       }
@@ -1786,7 +1819,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 +1843,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 +1898,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 +1929,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 +1973,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 +2064,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 +2171,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 +2303,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 +2336,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 +2343,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 +2393,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 +2431,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 +2454,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 +2471,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 +2493,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 +2541,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 +2563,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 +2579,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 +2611,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 +2620,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 +2657,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 +2693,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 +2708,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 +2734,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 +2858,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 +2886,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 +2995,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 +3006,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 +3022,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 +3067,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 +3124,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 +3138,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 +3416,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 +3461,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 +3484,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 +3497,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 +3514,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 +3546,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 +3637,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 +3796,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 +3820,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 +3856,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 +3893,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 +4814,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 +5023,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 +5039,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 +5115,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 +5306,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 +5672,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 +5883,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 +5953,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 +6144,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 +6170,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 +6212,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 +6252,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 +6537,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 +6603,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 +7225,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 {
@@ -7247,14 +7276,14 @@
           var renderPass = new RenderPass.RenderPass(this._scene, this._camera);
           this._outputPass = new OutputPass.OutputPass();
           this._outlinePass = new OutlinePass.OutlinePass(new THREE.Vector2(width, height), this._scene, this._camera);
-          this._fxaaPass = new ShaderPass.ShaderPass(FXAAShader.FXAAShader);
-          this._fxaaPass.material.uniforms['resolution'].value.set(1 / width, 1 / height);
+          // this._fxaaPass = new ShaderPass(FXAAShader);
+          // this._fxaaPass.material.uniforms['resolution'].value.set(1 / width, 1 / height);
           // needed for the sRGBEncoding to work
           // https://stackoverflow.com/questions/72936071/srgbencoding-in-not-working-in-three-effectcomposer
           // const gammaCorrectionPass = new ShaderPass(GammaCorrectionShader);
           this._composer.addPass(renderPass);
           this._composer.addPass(this._outlinePass);
-          this._composer.addPass(this._fxaaPass);
+          // this._composer.addPass(this._fxaaPass);
           // this._composer.addPass(gammaCorrectionPass);
           this._composer.addPass(this._outputPass);
           this._setSelectionGlowSettings();
@@ -7278,7 +7307,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 +7330,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 +8227,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 +8296,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 +8309,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 +8352,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 +8371,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 +8391,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 +8439,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 +8554,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 +8634,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 +8672,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 +8688,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 +8704,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 +8727,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 +8815,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 +8870,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 +8898,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 +8915,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 +9087,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 +9288,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 +9307,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 +9441,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 () {
@@ -9737,9 +9768,10 @@
           }], ctorParameters: function () { return [{ type: ViewModeService }, { type: CameraService }, { type: HomedecoratorSettingsService }, { type: HomedecoratorConnectorService }]; } });
 
   var PostProcessingService = /** @class */ (function () {
-      function PostProcessingService(_configurationService) {
+      function PostProcessingService(_configurationService, _settingsService) {
           var _this = this;
           this._configurationService = _configurationService;
+          this._settingsService = _settingsService;
           this._effectController = {
               aoSamples: 32.0,
               denoiseSamples: 8.0,
@@ -9755,13 +9787,24 @@
               color: [0, 0, 0],
               colorMultiply: true,
               stencil: true,
-              accumulate: false
+              accumulate: false,
+              gammaCorrection: false
           };
           this._subs = [];
           this._subs.push(this._configurationService.onChange.subscribe(function (changed) {
               if (ConfigurationKey.ShowPostProcessingSettings in changed) {
                   _this._showHideGui(changed[ConfigurationKey.ShowPostProcessingSettings]);
               }
+          }), this._settingsService.settingsLoaded.subscribe(function () {
+              _this._aoEnabled = _this._settingsService.settings.options.aoEnabled;
+              _this._aaEnabled = _this._settingsService.settings.options.aaEnabled;
+          }), this._settingsService.settingsChanged.subscribe(function () {
+              if (_this._aoEnabled !== _this._settingsService.settings.options.aoEnabled || _this._aaEnabled !== _this._settingsService.settings.options.aaEnabled) {
+                  _this._aoEnabled = _this._settingsService.settings.options.aoEnabled;
+                  _this._aaEnabled = _this._settingsService.settings.options.aaEnabled;
+                  _this._initComposers();
+                  _this.render();
+              }
           }));
       }
       PostProcessingService.prototype.ngOnDestroy = function () {
@@ -9771,37 +9814,127 @@
           this._renderer = renderer;
           this._scene = scene;
           this._camera = camera;
-          this._renderTarget = new THREE.WebGLRenderTarget(width, height, {
+          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._initComposers();
+          this._createGui();
+          // this._createGuiTaaPass();
+      };
+      PostProcessingService.prototype.setSize = function (width, height) {
+          if (this._aoComposer) {
+              this._aoComposer.setSize(width, height);
+          }
+          if (this._aaComposer) {
+              this._aaComposer.setSize(width, height);
+          }
+          if (this._blendComposer) {
+              this._blendComposer.setSize(width, height);
+          }
+      };
+      PostProcessingService.prototype.render = function () {
+          if (this._settingsService.settings.options.aaEnabled && this._aaComposer) {
+              this._aaComposer.render();
+          }
+          if (this._settingsService.settings.options.aoEnabled && this._aoComposer) {
+              this._aoComposer.render();
+          }
+          if (this._blendComposer) {
+              this._blendComposer.render();
+          }
+      };
+      PostProcessingService.prototype.showGui = function () {
+          this._postProcessingGui.show(true);
+      };
+      PostProcessingService.prototype.hideGui = function () {
+          this._postProcessingGui.hide();
+      };
+      PostProcessingService.prototype._initComposers = function () {
+          this._initAaComposer();
+          this._initAoComposer();
+          this._initBlendComposer();
+      };
+      PostProcessingService.prototype._initAaComposer = function () {
+          if (this._aaComposer) {
+              this._aaComposer.dispose();
+          }
+          if (!this._aaEnabled) {
+              return;
+          }
+          this._aaRenderTarget = new THREE.WebGLRenderTarget(this._width, this._height, {
+              samples: 4,
+              type: THREE.HalfFloatType,
               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._aaComposer = new EffectComposer.EffectComposer(this._renderer, this._aaRenderTarget);
+          this._aaComposer.renderToScreen = false;
+          this._fxaaPass = new ShaderPass.ShaderPass(FXAAShader.FXAAShader);
+          var pixelRatio = this._renderer.getPixelRatio();
+          // this._fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / (this._width * pixelRatio);
+          // this._fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / (this._height * pixelRatio);
+          this._fxaaPass.uniforms['resolution'].value.x = 1 / (this._width * pixelRatio);
+          this._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._aaComposer.addPass(this._renderPass);
+          // this._aaComposer.addPass(this._taaRenderPass);
+          this._aaComposer.addPass(this._fxaaPass);
+          this._aaComposer.addPass(this._outputPass);
+      };
+      PostProcessingService.prototype._initAoComposer = function () {
+          if (this._aoComposer) {
+              this._aoComposer.dispose();
+          }
+          if (!this._aoEnabled) {
+              return;
+          }
+          this._aoRenderTarget = new THREE.WebGLRenderTarget(this._width, this._height, {
+              samples: 4,
+              type: THREE.HalfFloatType,
+              minFilter: THREE.NearestFilter,
+              magFilter: THREE.NearestFilter,
+              format: THREE.RGBAFormat,
+              colorSpace: THREE.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.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);
-          this._createGui();
-          this._createGuiTaaPass();
+          // this._n8aoPass.debugMode = true;
+          // this._aoComposer.addPass(this._renderPass);
+          this._aoComposer.addPass(this._n8aoPass);
+          this._aoComposer.addPass(this._outputPass);
+      };
+      PostProcessingService.prototype._initBlendComposer = function () {
+          if (this._blendShader) {
+              this._blendShader.dispose();
+          }
+          this._blendShader = new ShaderPass.ShaderPass(BlendShader.BlendShader);
+          if (this._aaEnabled && this._aoEnabled) {
+              this._blendShader.uniforms.tDiffuse1.value = this._aaRenderTarget.texture;
+              this._blendShader.uniforms.tDiffuse2.value = this._aoRenderTarget.texture;
+          }
+          else if (this._aoEnabled) {
+              this._blendShader.uniforms.tDiffuse1.value = this._aoRenderTarget.texture;
+          }
+          else if (this._aaEnabled) {
+              this._blendShader.uniforms.tDiffuse1.value = this._aaRenderTarget.texture;
+          }
+          this._blendShader.uniforms.mixRatio.value = 0.2;
+          this._blendComposer = new EffectComposer.EffectComposer(this._renderer);
+          this._blendComposer.renderToScreen = true;
+          this._blendComposer.addPass(this._renderPass);
+          if (this._aaEnabled || this._aoEnabled) {
+              this._blendComposer.addPass(this._blendShader);
+          }
+          // this._blendComposer.addPass(this._outputPass);
       };
       PostProcessingService.prototype._updatePass = function () {
           this._n8aoPass.configuration.aoRadius = this._effectController.aoRadius;
@@ -9819,14 +9952,13 @@
           this._n8aoPass.configuration.depthAwareUpsampling = this._effectController.depthAwareUpsampling;
           this._n8aoPass.configuration.colorMultiply = this._effectController.colorMultiply;
           this._n8aoPass.configuration.accumulate = this._effectController.accumulate;
+          this._n8aoPass.configuration.gammaCorrection = this._effectController.gammaCorrection;
           this.render();
       };
       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 +9967,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,27 +9980,12 @@
               }
               _this.render();
           });
-          this._taaPassGui.open();
-      };
-      PostProcessingService.prototype.setSize = function (width, height) {
-          this._composer.setSize(width, height);
-      };
-      PostProcessingService.prototype.render = function () {
-          this._composer.render();
-      };
-      PostProcessingService.prototype.showGui = function () {
-          this._postProcessingGui.show(true);
-      };
-      PostProcessingService.prototype.hideGui = function () {
-          this._postProcessingGui.hide();
       };
       PostProcessingService.prototype._showHideGui = function (show) {
           show ? this.showGui() : this.hideGui();
       };
       PostProcessingService.prototype._createGui = function () {
           var _this = this;
-          this._postProcessingGui = new GUI__default["default"]();
-          this._postProcessingGui.hide();
           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(); });
@@ -9895,6 +10012,9 @@
               df.updateDisplay();
               _this._updatePass();
           });
+          var blendShaderParams = {
+              mixRatio: 0.5
+          };
           this._postProcessingGui.add(this._effectController, 'halfRes').onChange(function () { return _this._updatePass(); });
           this._postProcessingGui.add(this._effectController, 'transparencyAware').onChange(function () { return _this._updatePass(); });
           this._postProcessingGui.add(this._effectController, 'depthAwareUpsampling').onChange(function () { return _this._updatePass(); });
@@ -9903,38 +10023,24 @@
           this._postProcessingGui.addColor(this._effectController, 'color').onChange(function () { return _this._updatePass(); });
           this._postProcessingGui.add(this._effectController, 'colorMultiply').onChange(function () { return _this._updatePass(); });
           this._postProcessingGui.add(this._effectController, 'accumulate').onChange(function () { return _this._updatePass(); });
+          this._postProcessingGui.add(this._effectController, 'gammaCorrection').onChange(function () { return _this._updatePass(); });
           this._postProcessingGui.add(this._effectController, 'renderMode', ['Combined', 'AO', 'No AO', 'Split', 'Split AO']).onChange(function () { return _this._updatePass(); });
+          this._postProcessingGui.add(blendShaderParams, 'mixRatio', 0.0, 10.0, 0.01).onChange(function () {
+              _this._blendShader.uniforms.mixRatio.value = blendShaderParams.mixRatio;
+              _this.render();
+          });
       };
       return PostProcessingService;
   }());
-  PostProcessingService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PostProcessingService, deps: [{ token: ConfigurationService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  PostProcessingService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PostProcessingService, deps: [{ token: ConfigurationService }, { token: HomedecoratorSettingsService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
   PostProcessingService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PostProcessingService, providedIn: 'root' });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PostProcessingService, decorators: [{
               type: i0.Injectable,
               args: [{
                       providedIn: 'root'
                   }]
-          }], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
+          }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: HomedecoratorSettingsService }]; } });
 
-  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 +10063,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);
@@ -10028,7 +10070,7 @@
           }
       };
       SsrService.prototype._prepareWebsocket = function () {
-          if (!this._settingsService.settings.newRenderParameters.websocket) {
+          if (!this._settingsService.settings.options.useRenderWebsocket || !this._settingsService.settings.newRenderParameters.websocket) {
               return;
           }
           var webSocketConnection = this._settingsService.settings.newRenderParameters.websocket;
@@ -10134,56 +10176,63 @@
           configurable: true
       });
       SceneService.prototype.init = function (element) {
-          var _this = this;
-          this.domElement = element;
-          this._initScene();
-          this._initRenderer();
-          this._initCamera();
-          this._initOutline();
-          this._initPostProcessing();
-          this._animate();
-          this._subs.push(this._cameraService.cameraMovementChanged.subscribe(function () {
-              _this.needsRender = true;
-          }), this._messageBusService.subscribe(MessageType.TakeScreenshot, function () { return __awaiter$12(_this, void 0, void 0, function () {
-              var dataUrl;
+          return __awaiter$12(this, void 0, void 0, function () {
+              var _this = this;
               return __generator(this, function (_a) {
-                  if (this._viewModeService.is3dViewActive() || this._viewModeService.isTopViewActive()) {
-                      this.renderer.render(this.scene, this._cameraService.camera);
-                      dataUrl = this.renderer.domElement.toDataURL('image/jpeg');
-                      FileUtils.DownloadFromDataUri(dataUrl, "MyRoomplan" + new Date().toISOString() + ".jpeg");
-                  }
+                  this.domElement = element;
+                  this._initScene();
+                  this._initRenderer();
+                  this._initCamera();
+                  this._initOutline();
+                  this._initPostProcessing();
+                  this._animate();
+                  this._subs.push(this._cameraService.cameraMovementChanged.subscribe(function () {
+                      _this.needsRender = true;
+                  }), this._messageBusService.subscribe(MessageType.TakeScreenshot, function () { return __awaiter$12(_this, void 0, void 0, function () {
+                      var dataUrl;
+                      return __generator(this, function (_a) {
+                          if (this._viewModeService.is3dViewActive() || this._viewModeService.isTopViewActive()) {
+                              this.renderer.render(this.scene, this._cameraService.camera);
+                              dataUrl = this.renderer.domElement.toDataURL('image/jpeg');
+                              FileUtils.DownloadFromDataUri(dataUrl, "MyRoomplan" + new Date().toISOString() + ".jpeg");
+                          }
+                          return [2 /*return*/];
+                      });
+                  }); }), this._arService.shouldAddObjectToScene.subscribe(function (object) {
+                      _this.arMode = false;
+                      _this.addObject(object);
+                  }), this._viewModeService.viewModeChanged.subscribe(function (mode) {
+                      // if (this._is3DMode(mode)) {
+                      //   this._animate();
+                      // } else {
+                      //   this._pauseAnimation();
+                      // }
+                      if (mode === ViewMode.VR) {
+                          _this._vrService.init(_this.scene, _this.renderer);
+                      }
+                      else {
+                          _this._vrService.endSession();
+                      }
+                  }), this._settingsService.settingsLoaded.subscribe(function (loaded) {
+                      if (loaded) {
+                          _this._initPathTracer();
+                          _this._maxRenderSamples = _this._settingsService.settings.options.maxRenderSamples;
+                          _this._ssrService.enabled = _this._settingsService.settings.options.ssrEnabled;
+                      }
+                  })
+                  // this._xrService.sessionStarted.subscribe((mode: XrMode) => {
+                  //   if (mode === XrMode.ArMode) {
+                  //     this._animateAr();
+                  //   }
+                  // })
+                  );
+                  this._xrService.init(this.renderer, this.scene, this._cameraService.camera);
+                  // const hdriPath: string = '/assets/hdri/TSStudio3Point.hdr';
+                  // await ObjectUtils.LoadHDRI(hdriPath, this.scene);
+                  this.sceneInitialized.next(true);
                   return [2 /*return*/];
               });
-          }); }), this._arService.shouldAddObjectToScene.subscribe(function (object) {
-              _this.arMode = false;
-              _this.addObject(object);
-          }), this._viewModeService.viewModeChanged.subscribe(function (mode) {
-              // if (this._is3DMode(mode)) {
-              //   this._animate();
-              // } else {
-              //   this._pauseAnimation();
-              // }
-              if (mode === ViewMode.VR) {
-                  _this._vrService.init(_this.scene, _this.renderer);
-              }
-              else {
-                  _this._vrService.endSession();
-              }
-          }), this._settingsService.settingsLoaded.subscribe(function (loaded) {
-              if (loaded) {
-                  _this._initPathTracer();
-                  _this._maxRenderSamples = _this._settingsService.settings.options.maxRenderSamples;
-                  _this._ssrService.enabled = _this._settingsService.settings.options.ssrEnabled;
-              }
-          })
-          // this._xrService.sessionStarted.subscribe((mode: XrMode) => {
-          //   if (mode === XrMode.ArMode) {
-          //     this._animateAr();
-          //   }
-          // })
-          );
-          this._xrService.init(this.renderer, this.scene, this._cameraService.camera);
-          this.sceneInitialized.next(true);
+          });
       };
       SceneService.prototype.addObject = function (obj, forceRender) {
           if (forceRender === void 0) { forceRender = true; }
@@ -10295,7 +10344,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 +10358,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;
@@ -10367,29 +10422,29 @@
               this._numberOfSamplesRendered = Math.floor(this.pathTracer.samples);
           }
           else {
-              if (this._needsRender || this.arMode || this._viewModeService.isVRViewActive() || this._outlineService.needsRender) {
-                  this.renderer.clear();
-                  if (this._arMode && frame) {
-                      this._arService.handleFrame(frame);
-                  }
-                  else if (this._viewModeService.isVRViewActive()) {
-                      this._vrService.render();
+              // if (this._needsRender || this.arMode || this._viewModeService.isVRViewActive() || this._outlineService.needsRender) {
+              this.renderer.clear();
+              if (this._arMode && frame) {
+                  this._arService.handleFrame(frame);
+              }
+              else if (this._viewModeService.isVRViewActive()) {
+                  this._vrService.render();
+              }
+              else {
+                  this.onBeforeRender.next({ renderer: this.renderer, scene: this.scene });
+                  if (!this._settingsService.settings.options.aaEnabled && !this._settingsService.settings.options.aoEnabled) {
+                      // this.renderer.render(this.scene, this._cameraService.camera);
+                      this._outlineService.render();
                   }
                   else {
-                      this.onBeforeRender.next({ renderer: this.renderer, scene: this.scene });
-                      if (!this.renderingThroughPostProcessingPipeline) {
-                          this.renderer.render(this.scene, this._cameraService.camera);
-                      }
-                      else {
-                          this._postProcessing.render();
-                          this._outlineService.render();
-                      }
-                      // this.renderer.render(this.scene, this._cameraService.camera);
+                      this._postProcessing.render();
+                      // this._outlineService.render();
                   }
-                  this.onAfterRender.next({ renderer: this.renderer, scene: this.scene });
-                  this._outlineService.needsRender = false;
-                  this.needsRender = false;
               }
+              this.onAfterRender.next({ renderer: this.renderer, scene: this.scene });
+              this._outlineService.needsRender = false;
+              this.needsRender = false;
+              // }
           }
       };
       SceneService.prototype._animate = function () {
@@ -10477,7 +10532,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 +10543,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 +10608,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 +10618,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 +10859,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) {
@@ -11099,7 +11161,9 @@
           });
       };
       LoadingOverlayComponent.prototype.hideLoadingIndicator = function () {
-          this.loadingDialogRef.close();
+          if (this.loadingDialogRef) {
+              this.loadingDialogRef.close();
+          }
       };
       return LoadingOverlayComponent;
   }());
@@ -14309,8 +14373,8 @@
   /* tslint:disable */
   var VersionInfo = {
       application: "Homedecorator",
-      appVersion: "255.1.2",
-      revision: "111849"
+      appVersion: "255.1.6",
+      revision: "112253"
   };
   /* tslint:enable */
 
@@ -15026,7 +15090,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 +15155,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();
@@ -15317,7 +15381,8 @@
           case hdecoPlacement_enum.HdecoPlacement.FloorWall:
               return ItemType.CustomWallFloor;
           case hdecoPlacement_enum.HdecoPlacement.Ceiling:
-          // return ItemType.Ceiling;
+              // TODO implement ceiling placement the correct way.
+              return ItemType.CustomFloorGroup;
           case hdecoPlacement_enum.HdecoPlacement.WallDecoration:
               return ItemType.WallDecoration;
           case hdecoPlacement_enum.HdecoPlacement.WindowDecoration:
@@ -15577,12 +15642,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 +15702,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 +15881,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 +16036,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 +16286,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 +17534,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 +17593,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 +19702,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 +19746,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();
@@ -21774,19 +21845,16 @@
                       case 0:
                           this._overrideDefaultCursorStyle('pointer');
                           point = this._pointOnFloor(this._mousePosition);
-                          if (!point) return [3 /*break*/, 3];
+                          if (!point) return [3 /*break*/, 2];
                           distance = this._camera.position.distanceTo(point);
                           this._hudService.exploreFloorHover(this._mousePosition, point, distance);
-                          if (!!this._mouseMoved) return [3 /*break*/, 3];
-                          return [4 /*yield*/, this._hudService.confirmExplore()];
-                      case 1:
-                          _a.sent();
+                          if (!!this._mouseMoved) return [3 /*break*/, 2];
                           return [4 /*yield*/, this._cameraService.controls.animateMoveTo(point)];
-                      case 2:
+                      case 1:
                           _a.sent();
                           this._updateExplorePoint();
-                          _a.label = 3;
-                      case 3: return [2 /*return*/];
+                          _a.label = 2;
+                      case 2: return [2 /*return*/];
                   }
               });
           });
@@ -22296,12 +22364,20 @@
           }
       };
       SceneEventService.prototype._addToItemGroup = function (object, prevSelectedObject) {
-          var isIntersectWithGroupMember = object instanceof ItemGroup || object.parent instanceof ItemGroup;
-          if (!isIntersectWithGroupMember && !object.configuring && this._canGroupItems(object, prevSelectedObject)) {
-              if (prevSelectedObject) {
-                  this._itemGroupService.addIfNotExist(prevSelectedObject);
+          var isIntersectWithGroupMember;
+          if (object && object.parent !== null) {
+              isIntersectWithGroupMember = object instanceof ItemGroup || object.parent instanceof ItemGroup;
+          }
+          else {
+              isIntersectWithGroupMember = object instanceof ItemGroup;
+          }
+          if (object && object.configuring !== null) {
+              if (!isIntersectWithGroupMember && !object.configuring && this._canGroupItems(object, prevSelectedObject)) {
+                  if (prevSelectedObject) {
+                      this._itemGroupService.addIfNotExist(prevSelectedObject);
+                  }
+                  this._itemGroupService.addOrRemoveIfExist(object);
               }
-              this._itemGroupService.addOrRemoveIfExist(object);
           }
       };
       SceneEventService.prototype._canGroupFloorItem = function (item) {
@@ -24291,8 +24367,9 @@
   var FloorPatternService = /** @class */ (function () {
       function FloorPatternService() {
       }
-      FloorPatternService.prototype.generatePattern = function (floorPattern, plankSize, floorSize, direction) {
+      FloorPatternService.prototype.generatePattern = function (floorPattern, plankSize, floorSize, direction, heartLine) {
           if (direction === void 0) { direction = FloorPatternDirection.LYING; }
+          if (heartLine === void 0) { heartLine = 0; }
           var floorRotation = direction === FloorPatternDirection.STANDING ? 90 : 0;
           var floorWidth = floorSize.x;
           var floorLength = floorSize.z;
@@ -24300,15 +24377,18 @@
               floorWidth = floorSize.z;
               floorLength = floorSize.x;
           }
+          if (heartLine < 0)
+              heartLine = heartLine * -1;
+          heartLine = heartLine % 100 / 100;
           switch (floorPattern) {
               case FloorPattern.NORMAL:
-                  return this._normalPattern(plankSize, floorWidth, floorLength, floorRotation);
+                  return this._normalPattern(plankSize, floorWidth, floorLength, floorRotation, heartLine);
               case FloorPattern.HERRINGBONE:
-                  return this._herringBone(plankSize, floorWidth, floorLength, floorRotation);
+                  return this._herringBone(plankSize, floorWidth, floorLength, floorRotation, heartLine);
               case FloorPattern.HON45:
-                  return this._hon(plankSize, floorWidth, floorLength, floorRotation, 45);
+                  return this._hon(plankSize, floorWidth, floorLength, floorRotation, 45, heartLine);
               case FloorPattern.HON60:
-                  return this._hon(plankSize, floorWidth, floorLength, floorRotation, 60);
+                  return this._hon(plankSize, floorWidth, floorLength, floorRotation, 60, heartLine);
           }
       };
       FloorPatternService.prototype._rotatePatternOnZAxis = function (items, floorRotation) {
@@ -24322,14 +24402,15 @@
               });
           }
       };
-      FloorPatternService.prototype._normalPattern = function (plankSize, floorWidth, floorLength, floorRotation) {
+      FloorPatternService.prototype._normalPattern = function (plankSize, floorWidth, floorLength, floorRotation, heartLine) {
           var items = [];
           var stepOffsetAmount = .4;
           var plankWidth = plankSize.x;
           var plankLength = plankSize.z;
           var offsetSteps = plankWidth / stepOffsetAmount;
+          var heartLineOffset = plankWidth * heartLine;
           var rows = Math.ceil(floorLength / plankLength);
-          var columns = Math.ceil(floorWidth / plankWidth);
+          var columns = Math.ceil(floorWidth / plankWidth + heartLineOffset);
           var centerOffsetX = (floorWidth / 2 * -1) + (plankWidth / 2);
           var centerOffsetZ = (floorLength / 2 * -1) + (plankLength / 2);
           var currentOffsetStep = 0;
@@ -24343,7 +24424,7 @@
               for (var col = 0; col < planks; col++) {
                   var plankPosX = (plankWidth * col) - currentOffsetAmount;
                   items.push({
-                      position: new THREE.Vector3(plankPosX + centerOffsetX, 0, plankPosZ + centerOffsetZ),
+                      position: new THREE.Vector3(plankPosX + centerOffsetX - heartLineOffset, 0, plankPosZ + centerOffsetZ),
                       rotation: new THREE.Vector3(0, THREE.MathUtils.degToRad(floorRotation), 0),
                       isLeft: true
                   });
@@ -24353,7 +24434,7 @@
           this._rotatePatternOnZAxis(items, floorRotation);
           return items;
       };
-      FloorPatternService.prototype._herringBone = function (plankSize, floorWidth, floorLength, floorRotation) {
+      FloorPatternService.prototype._herringBone = function (plankSize, floorWidth, floorLength, floorRotation, heartLine) {
           var items = [];
           var herringBoneAngle = 45;
           var sqrt2 = Math.sqrt(2);
@@ -24361,7 +24442,8 @@
           var plankLength = plankSize.z;
           var offsetPlankPosX = plankWidth * sqrt2;
           var offsetPlankPosZ = plankLength * sqrt2;
-          var columns = Math.ceil(floorWidth / (plankWidth * sqrt2));
+          var heartLinePosX = offsetPlankPosX * heartLine;
+          var columns = Math.ceil(floorWidth / (plankWidth * sqrt2) + heartLinePosX);
           var rows = Math.ceil(floorLength / (plankLength * sqrt2) +
               // add extra rows so that there isn't a gap
               offsetPlankPosX * 2);
@@ -24372,12 +24454,12 @@
               for (var row = 0; row < rows; row++) {
                   var plankPosZ = offsetPlankPosZ * row;
                   var plankLeft = {
-                      position: new THREE.Vector3(plankPosX + centerOffsetX, 0, plankPosZ + centerOffsetZ),
+                      position: new THREE.Vector3(plankPosX + centerOffsetX - heartLinePosX, 0, plankPosZ + centerOffsetZ),
                       rotation: new THREE.Vector3(0, THREE.MathUtils.degToRad(floorRotation + herringBoneAngle), 0),
                       isLeft: true
                   };
                   var plankRight = {
-                      position: new THREE.Vector3(plankPosX + offsetPlankPosX / 2 + centerOffsetX, 0, plankPosZ + offsetPlankPosZ / 2 + centerOffsetZ),
+                      position: new THREE.Vector3(plankPosX + offsetPlankPosX / 2 + centerOffsetX - heartLinePosX, 0, plankPosZ + offsetPlankPosZ / 2 + centerOffsetZ),
                       rotation: new THREE.Vector3(0, THREE.MathUtils.degToRad(floorRotation - herringBoneAngle), 0),
                       isLeft: false
                   };
@@ -24387,7 +24469,7 @@
           this._rotatePatternOnZAxis(items, floorRotation);
           return items;
       };
-      FloorPatternService.prototype._hon = function (plankSize, floorWidth, floorLength, floorRotation, patternAngle) {
+      FloorPatternService.prototype._hon = function (plankSize, floorWidth, floorLength, floorRotation, patternAngle, heartLine) {
           var items = [];
           var patternAngleRad = THREE.MathUtils.degToRad(patternAngle);
           var plankWidth = plankSize.x;
@@ -24398,21 +24480,22 @@
           var rowExtendValue = plankWidth * cos;
           var offsetZ = plankLength * cos * 2;
           var offsetX = plankWidth * sin;
-          var centerOffsetX = (floorWidth - offsetX) / 2 + overlapValue;
+          var heartLinePosX = offsetX * heartLine;
+          var centerOffsetX = ((floorWidth - offsetX) / 2 + overlapValue);
           var centerOffsetZ = (floorLength + rowExtendValue) / 2;
-          var columns = Math.ceil(floorWidth / ((offsetX - overlapValue) * 2));
+          var columns = Math.ceil(floorWidth / ((offsetX - overlapValue) * 2) + heartLinePosX);
           var rows = Math.ceil((floorLength + rowExtendValue) / offsetZ);
           for (var column = 0; column < columns; column++) {
               var plankPosX = column * (offsetX - overlapValue) * 2;
               for (var row = 0; row < rows; row++) {
                   var plankPosZ = row * offsetZ;
                   var plankLeft = {
-                      position: new THREE.Vector3(plankPosX - centerOffsetX, 0, plankPosZ - centerOffsetZ),
+                      position: new THREE.Vector3(plankPosX - centerOffsetX - heartLinePosX, 0, plankPosZ - centerOffsetZ),
                       rotation: new THREE.Vector3(0, THREE.MathUtils.degToRad((90 - patternAngle) + floorRotation), 0),
                       isLeft: true
                   };
                   var plankRight = {
-                      position: new THREE.Vector3(plankPosX + offsetX - overlapValue - centerOffsetX, 0, plankPosZ - centerOffsetZ),
+                      position: new THREE.Vector3(plankPosX + offsetX - overlapValue - centerOffsetX - heartLinePosX, 0, plankPosZ - centerOffsetZ),
                       rotation: new THREE.Vector3(0, THREE.MathUtils.degToRad((90 + patternAngle) + floorRotation), 0),
                       isLeft: false
                   };
@@ -24935,16 +25018,17 @@
       FloorTileIntersectionService.prototype.toggleDebug = function () {
           this._debug = !this._debug;
       };
-      FloorTileIntersectionService.prototype.countTiles = function (floorMesh, floorPattern, geometry) {
+      FloorTileIntersectionService.prototype.countTiles = function (floorMesh, floorPattern, geometryLeft, geometryRight, addFiltered) {
           var e_1, _a;
+          if (geometryRight === void 0) { geometryRight = null; }
+          if (addFiltered === void 0) { addFiltered = false; }
           var result = {
               left: 0,
               right: 0,
               edge: 0,
-              total: 0,
+              total: 0
           };
-          console.log(floorMesh.position);
-          var _b = this._checkIntersection2(floorMesh, floorPattern, geometry), floorHits = _b.floorHits, edgeHits = _b.edgeHits;
+          var _b = this._checkIntersection2(floorMesh, floorPattern, geometryLeft, geometryRight), 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()) {
                   var floorHit = floorHits_1_1.value;
@@ -24965,22 +25049,28 @@
           }
           result.edge = edgeHits.length;
           result.total = floorHits.length;
+          if (addFiltered)
+              result.filtered = floorHits;
           return result;
       };
-      FloorTileIntersectionService.prototype._checkIntersection2 = function (floorMesh, floorPattern, geometry) {
+      FloorTileIntersectionService.prototype._checkIntersection2 = function (floorMesh, floorPattern, geometryLeft, geometryRight) {
           var e_2, _a;
-          // const edgeColliders = this._generateEdgeColliders(floorMesh.geometry);
+          var edgeColliders = this._generateEdgeColliders(floorMesh.geometry);
           var result = {
               floorHits: new Array(),
               edgeHits: new Array()
           };
-          var bvh = new threeMeshBvh.MeshBVH(geometry);
+          var bvhLeft = new threeMeshBvh.MeshBVH(geometryLeft);
+          var bvhRight = (geometryRight !== null) ? new threeMeshBvh.MeshBVH(geometryRight) : null;
           var positionReference = new THREE.Object3D();
           try {
               for (var floorPattern_1 = __values(floorPattern), floorPattern_1_1 = floorPattern_1.next(); !floorPattern_1_1.done; floorPattern_1_1 = floorPattern_1.next()) {
                   var floorItem = floorPattern_1_1.value;
+                  var bvh = (floorItem.isLeft) ? bvhLeft : bvhRight;
                   var pos = floorItem.position;
+                  var rot = floorItem.rotation;
                   positionReference.position.set(pos.x, pos.y, pos.z);
+                  positionReference.rotation.set(rot.x, rot.y, rot.z);
                   positionReference.updateMatrixWorld();
                   var floorWorldToBhv = new THREE.Matrix4()
                       .copy(positionReference.matrixWorld)
@@ -25136,7 +25226,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 +25459,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 +25502,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); })];
@@ -25565,6 +25646,7 @@
           });
       };
       BuildFurnitureService.prototype._generateLayingPattern = function (floor) {
+          var e_1, _a;
           var floorPatternInfo = this._generateFloorPatternInfo(floor);
           floor.restoreFloorObject();
           var meshLeft = this.full3DObjectToUse.children.find(function (m) { return m.name === floorPatternInfo.meshIdLeft; });
@@ -25577,42 +25659,57 @@
           var floorSize = floor.size;
           var plankSize = new THREE.Vector3();
           meshLeft.geometry.boundingBox.getSize(plankSize);
-          var items = this._floorPatternService.generatePattern(floorPatternInfo.floorPattern, plankSize, floorSize, floorPatternInfo.floorPatternDirection);
-          var itemAmount = (meshRight === null) ? items.length : items.length / 2;
+          var items = this._floorPatternService.generatePattern(floorPatternInfo.floorPattern, plankSize, floorSize, floorPatternInfo.floorPatternDirection, floorPatternInfo.heartLine);
           var material = floor.getMaterial();
-          var planksLeft = new THREE.InstancedMesh(meshLeft.geometry, material, itemAmount);
+          this._floorTileIntersectionService.toggleDebug();
+          var floorCountResult = this._floorTileIntersectionService.countTiles(floor.floorMesh, items, meshLeft.geometry, (meshRight) ? meshRight.geometry : null, true);
+          floor.metadata.floorCountResult = floorCountResult;
+          var leftItems = new Array();
+          var rightItems = new Array();
+          try {
+              for (var _b = __values(floorCountResult.filtered), _c = _b.next(); !_c.done; _c = _b.next()) {
+                  var item = _c.value;
+                  if (item.isLeft) {
+                      leftItems.push(item);
+                  }
+                  else {
+                      rightItems.push(item);
+                  }
+              }
+          }
+          catch (e_1_1) { e_1 = { error: e_1_1 }; }
+          finally {
+              try {
+                  if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+              }
+              finally { if (e_1) throw e_1.error; }
+          }
+          var planksLeft = this._instancedMeshFromFloorPatternTransform(meshLeft.geometry, leftItems, material);
           var planksRight;
           if (meshRight) {
-              planksRight = new THREE.InstancedMesh(meshRight.geometry, material, itemAmount);
+              planksRight = this._instancedMeshFromFloorPatternTransform(meshRight.geometry, rightItems, material);
           }
-          // assign transform to each item in instanced mesh
+          var customFloorWrapper = new THREE.Object3D();
+          customFloorWrapper.add(planksLeft);
+          if (planksRight)
+              customFloorWrapper.add(planksRight);
+          floor.floorObject = customFloorWrapper;
+      };
+      BuildFurnitureService.prototype._instancedMeshFromFloorPatternTransform = function (geom, pattern, material) {
+          if (pattern.length <= 0)
+              return null;
+          var targetPlankMesh = new THREE.InstancedMesh(geom, material, pattern.length);
           var dummy = new THREE.Object3D();
-          var matrixIndex = 0;
-          for (var i = 0; i < items.length; i++) {
-              var item = items[i];
-              var targetPlankMesh = (item.isLeft) ? planksLeft : planksRight;
+          for (var i = 0; i < pattern.length; i++) {
+              var item = pattern[i];
               var position = item.position;
               var rotation = item.rotation;
               dummy.position.set(position.x, position.y, position.z);
               dummy.rotation.set(rotation.x, rotation.y, rotation.z);
               dummy.updateMatrix();
-              targetPlankMesh.setMatrixAt(matrixIndex, dummy.matrix);
-              if (planksRight) {
-                  if (i !== 0 && (i % 2 !== 0)) {
-                      matrixIndex++;
-                  }
-              }
-              else {
-                  matrixIndex++;
-              }
+              targetPlankMesh.setMatrixAt(i, dummy.matrix);
           }
-          var customFloorWrapper = new THREE.Object3D();
-          customFloorWrapper.add(planksLeft);
-          if (planksRight)
-              customFloorWrapper.add(planksRight);
-          floor.floorObject = customFloorWrapper;
-          // this._floorTileIntersectionService.toggleDebug();
-          floor.metadata.floorCountResult = this._floorTileIntersectionService.countTiles(floor.floorMesh, items, meshLeft.geometry);
+          return targetPlankMesh;
       };
       BuildFurnitureService.prototype._generateFloorPatternInfo = function (item) {
           this._generateSelectedInMetadata(item);
@@ -25620,7 +25717,8 @@
               meshIdLeft: null,
               meshIdRight: null,
               floorPattern: FloorPattern.NORMAL,
-              floorPatternDirection: FloorPatternDirection.LYING
+              floorPatternDirection: FloorPatternDirection.LYING,
+              heartLine: 0
           };
           var selected = item.metadata.selections;
           var afmeting = selected.find(function (s) { return s.question.toLowerCase() === 'plank afmeting'; });
@@ -25628,6 +25726,13 @@
           afmetingString = afmetingString.substr(afmetingString.lastIndexOf(' ') + 1);
           var legPatroonAnswer = selected.find(function (s) { return s.question.toLowerCase() === 'leg patroon'; }).answer.toLowerCase();
           var legPatroonString = '';
+          var hartlineType = selected.find(function (s) { return s.question.toLowerCase() === 'hartlijn'; });
+          if (hartlineType && hartlineType.answer.toLowerCase() === 'aangepast') {
+              var hartlineValue = selected.find(function (s) { return s.question.toLowerCase() === 'hartlijn_aangepast'; });
+              if (hartlineValue && hartlineValue.userInputValue !== undefined) {
+                  info.heartLine = Number(hartlineValue.userInputValue);
+              }
+          }
           switch (true) {
               case legPatroonAnswer.indexOf('recht') !== -1:
                   legPatroonString = '90';
@@ -25732,7 +25837,7 @@
       };
       BuildFurnitureService.prototype._prepareSelectionsAndDecos = function (result) {
           return __awaiter$G(this, void 0, void 0, function () {
-              var selectionsAndDecoPromise, e_1, e_2;
+              var selectionsAndDecoPromise, e_2, e_3;
               return __generator(this, function (_a) {
                   switch (_a.label) {
                       case 0:
@@ -25748,7 +25853,7 @@
                           this._preloadMaterials(result.metaData.schema);
                           return [3 /*break*/, 4];
                       case 3:
-                          e_1 = _a.sent();
+                          e_2 = _a.sent();
                           return [3 /*break*/, 4];
                       case 4:
                           if (!(this._iOne.selections.length < 2)) return [3 /*break*/, 9];
@@ -25767,8 +25872,8 @@
                           this._getSelectionsAndDecosFromMetadata(result);
                           return [3 /*break*/, 9];
                       case 8:
-                          e_2 = _a.sent();
-                          return [2 /*return*/, Promise.reject(e_2)];
+                          e_3 = _a.sent();
+                          return [2 /*return*/, Promise.reject(e_3)];
                       case 9:
                           this._iOne.selections.forEach(function (s) {
                               s.schema = result.metaData.schema;
@@ -26053,7 +26158,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 +26170,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*/];
                   }
@@ -27693,12 +27795,19 @@
           if (light instanceof THREE.AmbientLight || light instanceof THREE.HemisphereLight) {
               return;
           }
+          var corners = this._floorplanService.getCorners();
+          if (!corners || corners.length < 1) {
+              return;
+          }
           var ro = light.userData.rotationOffset;
           var wo = light.userData.wallOffset;
           var fc = this._floorplanService.getCenter();
           var size = this._floorplanService.getSize();
           var planHalfWidth = isFinite(size.x) ? size.x / 2.0 : 0;
           var planHalfDepth = isFinite(size.z) ? size.z / 2.0 : 0;
+          if (wo === 0) { // just use position of light
+              return;
+          }
           // Reset position & rotation
           light.position.x = fc.x;
           light.position.z = fc.z;
@@ -28026,7 +28135,7 @@
                   else {
                       if (!_this._appService.sku) {
                           var navigatorType_1 = _this._screenSizeAnalysis.navigatorType();
-                          var lightPreset = _this.loadedLightPresets.find(function (preset) { return preset.navigatorType === navigatorType_1 && !preset.standalone; });
+                          var lightPreset = _this.loadedLightPresets.find(function (preset) { return preset.navigatorType === navigatorType_1 && preset.default && !preset.standalone; });
                           if (!lightPreset) {
                               lightPreset = _this.loadedLightPresets.find(function (preset) { return preset.default; });
                           }
@@ -28037,7 +28146,7 @@
                   }
                   if (_this._appService.sku) {
                       var navigatorType_2 = _this._screenSizeAnalysis.navigatorType();
-                      var lightPreset = _this.loadedLightPresets.find(function (preset) { return preset.navigatorType === navigatorType_2 && preset.standalone; });
+                      var lightPreset = _this.loadedLightPresets.find(function (preset) { return preset.navigatorType === navigatorType_2 && preset.default && preset.standalone; });
                       if (!lightPreset) {
                           lightPreset = _this.loadedLightPresets.find(function (preset) { return preset.standalone; });
                       }
@@ -28243,17 +28352,20 @@
       };
       LightPresetsService.prototype._createLightFromProperties = function (lightProperties) {
           var lightType = lightProperties.type;
-          // const light: Light = new (this._lightsMap.get(lightType))();
-          var getLights = new LightCreateService();
-          var light = getLights.createNewLight(lightType);
+          var lightConstructor = this._lightsMap.get(lightType);
+          var light = new lightConstructor();
           light.userData.wallOffset = lightProperties.wallOffset;
           light.userData.rotationOffset = lightProperties.rotationOffset;
           light.userData.topDownDirectional = lightProperties.topDownDirectional;
           for (var property in lightProperties) {
-              if (!light.hasOwnProperty(property)) {
+              if (!(property in light)) {
                   continue;
               }
               if (property === 'position') {
+                  if (light.userData.wallOffset === 0) {
+                      light.position.x = lightProperties.position.x;
+                      light.position.z = lightProperties.position.z;
+                  }
                   light.position.y = lightProperties.position.y;
               }
               else if (property === 'color') {
@@ -28843,7 +28955,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 () {
@@ -28973,9 +29085,9 @@
               folder.add(light, 'decay', 0, 5).onChange(function (val) {
                   _this._updateScene();
               });
-              folder.add(light, 'distance', 0, 100).onChange(function (val) {
-                  _this._updateScene();
-              });
+              // folder.add(light, 'distance', 0, 100).onChange((val: any) => {
+              //   this._updateScene();
+              // });
           }
           folder.add(light, 'intensity', 0.01, 20).step(0.01).onChange(function () {
               _this._updateScene();
@@ -30547,7 +30659,9 @@
                           data.files = {
                               glbData: this._arrayBufferToBase64(sceneData)
                           };
-                          this._handleWebSocketRoomRender(data);
+                          if (this._settingsService.settings.options.useRenderWebsocket) {
+                              this._handleWebSocketRoomRender(data);
+                          }
                           return [2 /*return*/];
                   }
               });
@@ -30849,7 +30963,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 +30973,7 @@
           this._settingsService = _settingsService;
           this._newRenderService = _newRenderService;
           this._3dmRenderApi = _3dmRenderApi;
+          this._dialog = _dialog;
           this.renderStatus = RenderStatus;
           this.iconName = IconName;
           this.renderModes = RenderModes;
@@ -31057,6 +31172,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 +31248,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      </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:20px;padding:0;width:30px;min-width:0px;line-height:30px}: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:400px;background:#e4edf4;padding:30px;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: 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 +31270,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: [{
@@ -31179,7 +31298,8 @@
           // this.messageService.emit(MessageType.ShowLoadingIndicator, {title: 'Uploading...'});
           // this._utilsService.prepRoomForRender();
           this._dialog.open(RenderDialogComponent, {
-              panelClass: 'render-dialog-content'
+              panelClass: 'render-dialog-content',
+              width: '400px'
           });
           // // if (this.settingsService.settings.options.useNewRender) {
           // //   this.newRenderService.renderImage();
@@ -32595,12 +32715,17 @@
           });
       };
       AnswersSlideoutComponent.prototype._containsTextParts = function (value) {
-          for (var i = 0; i < this.chipTexts.length; i++) {
-              if (value.indexOf(this.chipTexts[i].toLowerCase()) < 0) {
-                  return false;
+          if (this.chipTexts !== undefined) {
+              for (var i = 0; i < this.chipTexts.length; i++) {
+                  if (value.indexOf(this.chipTexts[i].toLowerCase()) < 0) {
+                      return false;
+                  }
               }
+              return true;
+          }
+          else {
+              return true;
           }
-          return true;
       };
       AnswersSlideoutComponent.prototype._setArrays = function () {
           var _this = this;
@@ -32832,7 +32957,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 +33720,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 +33728,7 @@
           this._configurationService = _configurationService;
           this._dimensionService = _dimensionService;
           this._viewModeService = _viewModeService;
+          this._roomService = _roomService;
           this.selectedWallChange = new rxjs.Subject();
           this._viewScaleMin = 50;
           this._viewScaleMax = 300;
@@ -33727,12 +33853,16 @@
               this._context = this.canvasElement.nativeElement.getContext('2d');
               this._offsetX = this._canvas.clientLeft;
               this._offsetY = this._canvas.clientTop;
-              this._handleWindowResize();
               this._readyToDraw = true;
+              this._handleWindowResize();
           }
       };
       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 +34333,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;
@@ -34228,8 +34364,10 @@
       FloorplannerComponent.prototype._handleWindowResize = function () {
           if (this._canvas) {
               var parent = this._canvas.parentElement;
-              this._canvas.height = parent.clientHeight;
-              this._canvas.width = parent.clientWidth;
+              if (parent && parent.clientHeight > 0) { // don't set dimensions of canvas to 0
+                  this._canvas.height = parent.clientHeight;
+                  this._canvas.width = parent.clientWidth;
+              }
               this._draw();
           }
       };
@@ -34889,8 +35027,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 +35036,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: [{
@@ -35579,7 +35717,7 @@
       });
   };
   var SettingsComponent = /** @class */ (function () {
-      function SettingsComponent(settingsService, _snackBar, _messageBus, _configurationService, _sceneService, _itemService, _appService, _fontService) {
+      function SettingsComponent(settingsService, _snackBar, _messageBus, _configurationService, _sceneService, _itemService, _appService, _fontService, _settingsService) {
           this.settingsService = settingsService;
           this._snackBar = _snackBar;
           this._messageBus = _messageBus;
@@ -35588,6 +35726,7 @@
           this._itemService = _itemService;
           this._appService = _appService;
           this._fontService = _fontService;
+          this._settingsService = _settingsService;
           this.configurationKey = ConfigurationKey;
           this.onWallsHeightUpdate = new i0.EventEmitter();
           this.version = 'Version: ' + (VersionInfo.appVersion || 'Unknown')
@@ -35606,6 +35745,8 @@
           this.showCameraControls = this._configurationService.getValue(ConfigurationKey.ShowWalkThroughCameraControls);
           this.showLightControls = this._configurationService.getValue(ConfigurationKey.ShowLightingControls);
           this.showPostProcessingSettings = this._configurationService.getValue(ConfigurationKey.ShowPostProcessingSettings);
+          this.showAA = this._settingsService.settings.options.aaEnabled;
+          this.showAO = this._settingsService.settings.options.aoEnabled;
           this.showWalls = this._configurationService.getValue(ConfigurationKey.ShowWalls);
           this.showCeiling = this._configurationService.getValue(ConfigurationKey.ShowCeiling);
           this.wallSnapping = this._configurationService.getValue(ConfigurationKey.WallSnapping);
@@ -35629,6 +35770,10 @@
           this[key] = checked;
           this._configurationService.setValue(key, checked);
       };
+      SettingsComponent.prototype.toggleOption = function (option, checked) {
+          this._settingsService.settings.options[option] = checked;
+          this._settingsService.settingsChanged.next();
+      };
       SettingsComponent.prototype.setInteriorLightIntensity = function (value) {
           this._configurationService.setValue(ConfigurationKey.InteriorLightIntensity, value);
       };
@@ -35709,8 +35854,8 @@
       };
       return SettingsComponent;
   }());
-  SettingsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SettingsComponent, deps: [{ token: HomedecoratorSettingsService }, { token: i2__namespace$4.MatSnackBar }, { token: MessageBusService }, { token: ConfigurationService }, { token: SceneService }, { token: ItemService }, { token: HomedecoratorAppService }, { token: FontService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  SettingsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SettingsComponent, selector: "rp-settings", inputs: { minWallHeight: "minWallHeight", placeCameraDisabled: "placeCameraDisabled" }, outputs: { onWallsHeightUpdate: "onWallsHeightUpdate" }, viewQueries: [{ propertyName: "versionFieldRef", first: true, predicate: ["versionField"], descendants: true, static: true }], ngImport: i0__namespace, template: "\r\n\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'ENABLE_TOUCH' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"enableTouch\"\r\n    (change)=\"toggle(configurationKey.EnableTouch, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n\r\n\r\n<h3 class=\"mat-subheading-2\">{{'WALLS' | localize}}</h3>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <rp-dimension-input\r\n    [sourceValue]=\"wallHeight\"\r\n    [minValue]=\"minWallHeight\"\r\n    title=\"{{'DEFAULT_HEIGHT' | localize}}\"\r\n    (dimensionChanged)=\"applyNewHeight($event)\"\r\n  >\r\n  </rp-dimension-input>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'DEFAULT_THICKNESS' | localize}}:</b>\r\n  <span class=\"mat-body-1\">{{wallThickness}}</span>\r\n</div>\r\n<div *ngIf=\"showDetailedWallMeasurements\" class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'SHOW_DETAILED_WALL_MEASUREMENTS' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"showDetailedWallMeasurements\"\r\n    (change)=\"toggle(configurationKey.ShowDetailedWallMeasurements, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'SHOW_DISTANCES_OF_WALL_ITEMS_IN_2D' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"showWallItemMeasurements\"\r\n    (change)=\"toggle(configurationKey.ShowWallItemMeasurements, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'ENABLE_SNAPPING_OF_WALLS_TO_BASIC_ANGLES' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"wallSnapping\"\r\n    (change)=\"toggle(configurationKey.WallSnapping, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'ENABLE_SNAPPING_TO_WALL_JOINTS' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"cornerSnapping\"\r\n    (change)=\"toggle(configurationKey.CornerSnapping, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n\r\n<h3 class=\"mat-subheading-2\">{{'OBJECTS' | localize}}</h3>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'SHOW_DISTANCES' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"showObjectDistances\"\r\n    (change)=\"toggle(configurationKey.ShowObjectDistances, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'SHOW_MEASUREMENTS' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"showObjectMeasurements\"\r\n    (change)=\"toggle(configurationKey.ShowObjectMeasurements, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'ENABLE_ROTATION_SNAPPING' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"rotationSnappingEnabled\"\r\n    (change)=\"toggle(configurationKey.RotationSnappingEnabled, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'DISPLAY_CUSTOM_SHAPE_NAMES' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"displayCustomShapeNames\"\r\n    (change)=\"toggle(configurationKey.DisplayCustomShapeNames, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n\r\n<h3 class=\"mat-subheading-2\">{{'UNIT_INFO' | localize}}</h3>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'MEASUREMENTS' | localize}}:</b>\r\n  <span class=\"mat-body-1\">{{dimensioningUnit}}</span>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'ANGLES' | localize}}:</b>\r\n  <span class=\"mat-body-1\">{{angleUnit}}</span>\r\n</div>\r\n\r\n<h3 class=\"mat-subheading-2\">{{'CAMERA' | localize}}</h3>\r\n<b class=\"mat-body-2\">{{'SET_START_POSITION_FOR_WALK_THROUGH_MODE' | localize}}</b>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <button\r\n    mat-button\r\n    [disabled]=\"placeCameraDisabled\"\r\n    class=\"place-camera\"\r\n    (click)=\"placeCamera()\"\r\n    fxLayout=\"row\"\r\n    fxLayoutalign=\"center center\"\r\n  >\r\n    <mat-icon class=\"homedecorator-material-icons\">photo_camera</mat-icon>\r\n    {{'PLACE_CAMERA' | localize}}\r\n  </button>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'SHOW_CAMERA_CONFIGURATION' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"showCameraControls\"\r\n    (change)=\"toggle(configurationKey.ShowWalkThroughCameraControls, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n\r\n<div class=\"panel-item\" fxLayout=\"column\">\r\n  <h3 class=\"mat-subheading-2\">{{'CLEAR_ROOM' | localize}}</h3>\r\n  <b class=\"mat-body-2\">{{'CLEAR_ALL_FURNITURE_FROM_ROOM' | localize}}</b>\r\n  <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <button\r\n      mat-button\r\n      class=\"remove-all\"\r\n      (click)=\"removeAll()\"\r\n      fxLayout=\"row\"\r\n      fxLayoutalign=\"center center\"\r\n    >\r\n      <mat-icon class=\"homedecorator-material-icons\">delete_sweep</mat-icon>\r\n      {{'CLEAR_FURNITURE' | localize}}\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"settingsService.settings.options.development\">\r\n  <div class=\"panel-item\" fxLayout=\"column\">\r\n    <h3 class=\"mat-subheading-2\">{{'LIGHTS' | localize}}</h3>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <b class=\"mat-body-2\">{{'SHOW_LIGHTING_CONFIGURATION' | localize}}</b>\r\n      <mat-slide-toggle\r\n        min=\"0\"\r\n        max=\"1\"\r\n        [checked]=\"showLightControls\"\r\n        (change)=\"toggle(configurationKey.ShowLightingControls, $event.checked)\"\r\n      >\r\n      </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <button\r\n        mat-button\r\n        (click)=\"toggle(configurationKey.ShowLightplansDialog, true)\"\r\n        fxLayout=\"row\"\r\n        fxLayoutalign=\"center center\"\r\n      >\r\n        <mat-icon class=\"homedecorator-material-icons\">wb_incandescent</mat-icon>\r\n        {{'MANAGE_LIGHTPLANS' | localize}}\r\n      </button>\r\n    </div>\r\n    <div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <b class=\"mat-body-2\">{{'SHOW_INTERIOR_LIGHTS' | localize}}</b>\r\n      <mat-slide-toggle\r\n        min=\"0\"\r\n        max=\"1\"\r\n        [checked]=\"showInteriorLights\"\r\n        (change)=\"toggle(configurationKey.ShowInteriorLights, $event.checked)\"\r\n      >\r\n      </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <b class=\"mat-body-2\">{{'INTERIOR_LIGHT_INTENSITY' | localize}}</b>\r\n      <mat-slider\r\n        class=\"slider-group-slider\"\r\n        [min]=\"1\"\r\n        [max]=\"1600\"\r\n        [step]=\"1\"\r\n        [value]=\"interiorLightIntensity\"\r\n        thumbLabel\r\n        (input)=\"setInteriorLightIntensity($event.value)\"\r\n        fxFlex=\"grow\">\r\n      </mat-slider>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <b class=\"mat-body-2\">{{'SHOW_POST_PROCESSING_SETTINGS' | localize}}</b>\r\n      <mat-slide-toggle\r\n        min=\"0\"\r\n        max=\"1\"\r\n        [checked]=\"showPostProcessingSettings\"\r\n        (change)=\"toggle(configurationKey.ShowPostProcessingSettings, $event.checked)\"\r\n      >\r\n      </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <b class=\"mat-body-2\">{{'SHOW_WALLS' | localize}}</b>\r\n      <mat-slide-toggle\r\n        min=\"0\"\r\n        max=\"1\"\r\n        [checked]=\"showWalls\"\r\n        (change)=\"toggle(configurationKey.ShowWalls, $event.checked)\"\r\n      >\r\n      </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <b class=\"mat-body-2\">{{'SHOW_CEILING' | localize}}</b>\r\n      <mat-slide-toggle\r\n        min=\"0\"\r\n        max=\"1\"\r\n        [checked]=\"showCeiling\"\r\n        (change)=\"toggle(configurationKey.ShowCeiling, $event.checked)\"\r\n      >\r\n      </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <button (click)=\"hideMaterials()\">{{ 'HIDE_MATERIALS' | localize }}</button>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <button (click)=\"showConnectors()\">{{ 'SHOW_CONNECTORS' | localize }}</button>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <button\r\n        mat-button\r\n        (click)=\"showSettingsOptions = true\"\r\n        fxLayout=\"row\"\r\n        fxLayoutalign=\"center center\"\r\n      >\r\n        <mat-icon class=\"homedecorator-material-icons\">settings</mat-icon>\r\n        {{'SHOW_SETTINGS_OPTIONS' | localize}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-divider></mat-divider>\r\n\r\n  <div class=\"panel-item\" fxLayout=\"column\">\r\n    <b class=\"mat-body-2\">{{'APP_VERSION' | localize}}:</b>\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        #versionField\r\n        type=\"text\"\r\n        readonly=\"true\"\r\n        [value]=\"version\"\r\n        (click)=\"selectVersionFieldContent()\"\r\n      />\r\n      <mat-icon matSuffix (click)=\"copyToClipboard()\">file_copy</mat-icon>\r\n    </mat-form-field>\r\n  </div>\r\n  <h3 class=\"mat-subheading-2\">{{'CONNECTION' | localize}}</h3>\r\n  <div class=\"panel-item\" fxLayout=\"column\">\r\n    <b class=\"mat-body-2\">{{'iONE backend url' | localize}}:</b>\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        #ioneBackendUrl\r\n        type=\"text\"\r\n        [value]=\"settingsService.settings?.url\"\r\n        (keydown)=\"handleBackendUrlChange($event)\"\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n</ng-container>\r\n<div class=\"powered-by-wrapper\">\r\n  <span>MyRoomPlans is powered by</span>\r\n  <span class=\"powered-logo-wrapper\">\r\n    <a href=\"https://www.colijn-it.nl\" target=\"_blank\" alt=\"Colijn IT\" class=\"colijn-it-logo\"><img src=\"assets/images/colijn-logo.webp\"/></a>\r\n    <a href=\"https://ione360.com\" target=\"_blank\" alt=\"iONE360\" class=\"ione-360-logo\"><img src=\"assets/images/ione360-logo.webp\"/></a>\r\n  </span>\r\n  <span>Copyright Colijn IT 2021</span>\r\n</div>\r\n<settings-options *ngIf=\"showSettingsOptions\" (onclose)=\"showSettingsOptions = false\"></settings-options>\r\n", styles: [":host{overflow-y:auto;overflow-x:hidden}:host .powered-by-wrapper{margin-top:20px;font-size:12px}:host .powered-by-wrapper .powered-logo-wrapper{display:flex;align-items:center;justify-content:space-between}:host .powered-by-wrapper .colijn-it-logo{margin:0 5px}:host .powered-by-wrapper .colijn-it-logo img{width:100px}:host .powered-by-wrapper .ione-360-logo{margin:5px}:host .powered-by-wrapper .ione-360-logo img{width:134px}.panel-item{min-height:40px}.panel-item+h3{margin-top:16px}mat-form-field{width:100%}::ng-deep .mat-drawer-content{overflow-y:auto;overflow-x:hidden}\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: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { 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$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: i6__namespace.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i7__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: SettingsOptionsComponent, selector: "settings-options", outputs: ["onclose"] }], 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: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MatSuffix, selector: "[matSuffix]" }], pipes: { "localize": LocalizePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  SettingsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SettingsComponent, deps: [{ token: HomedecoratorSettingsService }, { token: i2__namespace$4.MatSnackBar }, { token: MessageBusService }, { token: ConfigurationService }, { token: SceneService }, { token: ItemService }, { token: HomedecoratorAppService }, { token: FontService }, { token: HomedecoratorSettingsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  SettingsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SettingsComponent, selector: "rp-settings", inputs: { minWallHeight: "minWallHeight", placeCameraDisabled: "placeCameraDisabled" }, outputs: { onWallsHeightUpdate: "onWallsHeightUpdate" }, viewQueries: [{ propertyName: "versionFieldRef", first: true, predicate: ["versionField"], descendants: true, static: true }], ngImport: i0__namespace, template: "\r\n\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'ENABLE_TOUCH' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"enableTouch\"\r\n    (change)=\"toggle(configurationKey.EnableTouch, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n\r\n\r\n<h3 class=\"mat-subheading-2\">{{'WALLS' | localize}}</h3>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <rp-dimension-input\r\n    [sourceValue]=\"wallHeight\"\r\n    [minValue]=\"minWallHeight\"\r\n    title=\"{{'DEFAULT_HEIGHT' | localize}}\"\r\n    (dimensionChanged)=\"applyNewHeight($event)\"\r\n  >\r\n  </rp-dimension-input>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'DEFAULT_THICKNESS' | localize}}:</b>\r\n  <span class=\"mat-body-1\">{{wallThickness}}</span>\r\n</div>\r\n<div *ngIf=\"showDetailedWallMeasurements\" class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'SHOW_DETAILED_WALL_MEASUREMENTS' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"showDetailedWallMeasurements\"\r\n    (change)=\"toggle(configurationKey.ShowDetailedWallMeasurements, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'SHOW_DISTANCES_OF_WALL_ITEMS_IN_2D' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"showWallItemMeasurements\"\r\n    (change)=\"toggle(configurationKey.ShowWallItemMeasurements, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'ENABLE_SNAPPING_OF_WALLS_TO_BASIC_ANGLES' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"wallSnapping\"\r\n    (change)=\"toggle(configurationKey.WallSnapping, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'ENABLE_SNAPPING_TO_WALL_JOINTS' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"cornerSnapping\"\r\n    (change)=\"toggle(configurationKey.CornerSnapping, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n\r\n<h3 class=\"mat-subheading-2\">{{'OBJECTS' | localize}}</h3>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'SHOW_DISTANCES' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"showObjectDistances\"\r\n    (change)=\"toggle(configurationKey.ShowObjectDistances, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'SHOW_MEASUREMENTS' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"showObjectMeasurements\"\r\n    (change)=\"toggle(configurationKey.ShowObjectMeasurements, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'ENABLE_ROTATION_SNAPPING' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"rotationSnappingEnabled\"\r\n    (change)=\"toggle(configurationKey.RotationSnappingEnabled, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n<div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'DISPLAY_CUSTOM_SHAPE_NAMES' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"displayCustomShapeNames\"\r\n    (change)=\"toggle(configurationKey.DisplayCustomShapeNames, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n\r\n<h3 class=\"mat-subheading-2\">{{'UNIT_INFO' | localize}}</h3>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'MEASUREMENTS' | localize}}:</b>\r\n  <span class=\"mat-body-1\">{{dimensioningUnit}}</span>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'ANGLES' | localize}}:</b>\r\n  <span class=\"mat-body-1\">{{angleUnit}}</span>\r\n</div>\r\n\r\n<h3 class=\"mat-subheading-2\">{{'CAMERA' | localize}}</h3>\r\n<b class=\"mat-body-2\">{{'SET_START_POSITION_FOR_WALK_THROUGH_MODE' | localize}}</b>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <button\r\n    mat-button\r\n    [disabled]=\"placeCameraDisabled\"\r\n    class=\"place-camera\"\r\n    (click)=\"placeCamera()\"\r\n    fxLayout=\"row\"\r\n    fxLayoutalign=\"center center\"\r\n  >\r\n    <mat-icon class=\"homedecorator-material-icons\">photo_camera</mat-icon>\r\n    {{'PLACE_CAMERA' | localize}}\r\n  </button>\r\n</div>\r\n<div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n  <b class=\"mat-body-2\">{{'SHOW_CAMERA_CONFIGURATION' | localize}}</b>\r\n  <mat-slide-toggle\r\n    min=\"0\"\r\n    max=\"1\"\r\n    [checked]=\"showCameraControls\"\r\n    (change)=\"toggle(configurationKey.ShowWalkThroughCameraControls, $event.checked)\"\r\n  >\r\n  </mat-slide-toggle>\r\n</div>\r\n\r\n<div class=\"panel-item\" fxLayout=\"column\">\r\n  <h3 class=\"mat-subheading-2\">{{'CLEAR_ROOM' | localize}}</h3>\r\n  <b class=\"mat-body-2\">{{'CLEAR_ALL_FURNITURE_FROM_ROOM' | localize}}</b>\r\n  <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n    <button\r\n      mat-button\r\n      class=\"remove-all\"\r\n      (click)=\"removeAll()\"\r\n      fxLayout=\"row\"\r\n      fxLayoutalign=\"center center\"\r\n    >\r\n      <mat-icon class=\"homedecorator-material-icons\">delete_sweep</mat-icon>\r\n      {{'CLEAR_FURNITURE' | localize}}\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"settingsService.settings.options.development\">\r\n  <div class=\"panel-item\" fxLayout=\"column\">\r\n    <h3 class=\"mat-subheading-2\">{{'LIGHTS' | localize}}</h3>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <b class=\"mat-body-2\">{{'SHOW_LIGHTING_CONFIGURATION' | localize}}</b>\r\n      <mat-slide-toggle\r\n        min=\"0\"\r\n        max=\"1\"\r\n        [checked]=\"showLightControls\"\r\n        (change)=\"toggle(configurationKey.ShowLightingControls, $event.checked)\"\r\n      >\r\n      </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <button\r\n        mat-button\r\n        (click)=\"toggle(configurationKey.ShowLightplansDialog, true)\"\r\n        fxLayout=\"row\"\r\n        fxLayoutalign=\"center center\"\r\n      >\r\n        <mat-icon class=\"homedecorator-material-icons\">wb_incandescent</mat-icon>\r\n        {{'MANAGE_LIGHTPLANS' | localize}}\r\n      </button>\r\n    </div>\r\n    <div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <b class=\"mat-body-2\">{{'SHOW_INTERIOR_LIGHTS' | localize}}</b>\r\n      <mat-slide-toggle\r\n        min=\"0\"\r\n        max=\"1\"\r\n        [checked]=\"showInteriorLights\"\r\n        (change)=\"toggle(configurationKey.ShowInteriorLights, $event.checked)\"\r\n      >\r\n      </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"panel-item\" psefxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <b class=\"mat-body-2\">{{'INTERIOR_LIGHT_INTENSITY' | localize}}</b>\r\n      <mat-slider\r\n        class=\"slider-group-slider\"\r\n        [min]=\"1\"\r\n        [max]=\"1600\"\r\n        [step]=\"1\"\r\n        [value]=\"interiorLightIntensity\"\r\n        thumbLabel\r\n        (input)=\"setInteriorLightIntensity($event.value)\"\r\n        fxFlex=\"grow\">\r\n      </mat-slider>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <b class=\"mat-body-2\">{{'SHOW_POST_PROCESSING_SETTINGS' | localize}}</b>\r\n      <mat-slide-toggle\r\n        min=\"0\"\r\n        max=\"1\"\r\n        [checked]=\"showPostProcessingSettings\"\r\n        (change)=\"toggle(configurationKey.ShowPostProcessingSettings, $event.checked)\"\r\n      >\r\n      </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <b class=\"mat-body-2\">{{'SHOW_AA' | localize}}</b>\r\n      <mat-slide-toggle\r\n        min=\"0\"\r\n        max=\"1\"\r\n        [checked]=\"showAA\"\r\n        (change)=\"toggleOption('aaEnabled', $event.checked)\"\r\n      >\r\n      </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <b class=\"mat-body-2\">{{'SHOW_AO' | localize}}</b>\r\n      <mat-slide-toggle\r\n        min=\"0\"\r\n        max=\"1\"\r\n        [checked]=\"showAO\"\r\n        (change)=\"toggleOption('aoEnabled', $event.checked)\"\r\n      >\r\n      </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <b class=\"mat-body-2\">{{'SHOW_WALLS' | localize}}</b>\r\n      <mat-slide-toggle\r\n        min=\"0\"\r\n        max=\"1\"\r\n        [checked]=\"showWalls\"\r\n        (change)=\"toggle(configurationKey.ShowWalls, $event.checked)\"\r\n      >\r\n      </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <b class=\"mat-body-2\">{{'SHOW_CEILING' | localize}}</b>\r\n      <mat-slide-toggle\r\n        min=\"0\"\r\n        max=\"1\"\r\n        [checked]=\"showCeiling\"\r\n        (change)=\"toggle(configurationKey.ShowCeiling, $event.checked)\"\r\n      >\r\n      </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <button (click)=\"hideMaterials()\">{{ 'HIDE_MATERIALS' | localize }}</button>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <button (click)=\"showConnectors()\">{{ 'SHOW_CONNECTORS' | localize }}</button>\r\n    </div>\r\n    <div class=\"panel-item\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <button\r\n        mat-button\r\n        (click)=\"showSettingsOptions = true\"\r\n        fxLayout=\"row\"\r\n        fxLayoutalign=\"center center\"\r\n      >\r\n        <mat-icon class=\"homedecorator-material-icons\">settings</mat-icon>\r\n        {{'SHOW_SETTINGS_OPTIONS' | localize}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-divider></mat-divider>\r\n\r\n  <div class=\"panel-item\" fxLayout=\"column\">\r\n    <b class=\"mat-body-2\">{{'APP_VERSION' | localize}}:</b>\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        #versionField\r\n        type=\"text\"\r\n        readonly=\"true\"\r\n        [value]=\"version\"\r\n        (click)=\"selectVersionFieldContent()\"\r\n      />\r\n      <mat-icon matSuffix (click)=\"copyToClipboard()\">file_copy</mat-icon>\r\n    </mat-form-field>\r\n  </div>\r\n  <h3 class=\"mat-subheading-2\">{{'CONNECTION' | localize}}</h3>\r\n  <div class=\"panel-item\" fxLayout=\"column\">\r\n    <b class=\"mat-body-2\">{{'iONE backend url' | localize}}:</b>\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        #ioneBackendUrl\r\n        type=\"text\"\r\n        [value]=\"settingsService.settings?.url\"\r\n        (keydown)=\"handleBackendUrlChange($event)\"\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n</ng-container>\r\n<div class=\"powered-by-wrapper\">\r\n  <span>MyRoomPlans is powered by</span>\r\n  <span class=\"powered-logo-wrapper\">\r\n    <a href=\"https://www.colijn-it.nl\" target=\"_blank\" alt=\"Colijn IT\" class=\"colijn-it-logo\"><img src=\"assets/images/colijn-logo.webp\"/></a>\r\n    <a href=\"https://ione360.com\" target=\"_blank\" alt=\"iONE360\" class=\"ione-360-logo\"><img src=\"assets/images/ione360-logo.webp\"/></a>\r\n  </span>\r\n  <span>Copyright Colijn IT 2021</span>\r\n</div>\r\n<settings-options *ngIf=\"showSettingsOptions\" (onclose)=\"showSettingsOptions = false\"></settings-options>\r\n", styles: [":host{overflow-y:auto;overflow-x:hidden}:host .powered-by-wrapper{margin-top:20px;font-size:12px}:host .powered-by-wrapper .powered-logo-wrapper{display:flex;align-items:center;justify-content:space-between}:host .powered-by-wrapper .colijn-it-logo{margin:0 5px}:host .powered-by-wrapper .colijn-it-logo img{width:100px}:host .powered-by-wrapper .ione-360-logo{margin:5px}:host .powered-by-wrapper .ione-360-logo img{width:134px}.panel-item{min-height:40px}.panel-item+h3{margin-top:16px}mat-form-field{width:100%}::ng-deep .mat-drawer-content{overflow-y:auto;overflow-x:hidden}\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: DimensionInputComponent, selector: "rp-dimension-input", inputs: ["minValue", "maxValue", "sourceValue", "title"], outputs: ["dimensionChanged", "focus", "blur"] }, { 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$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: i6__namespace.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i7__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: SettingsOptionsComponent, selector: "settings-options", outputs: ["onclose"] }], 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: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MatSuffix, selector: "[matSuffix]" }], pipes: { "localize": LocalizePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SettingsComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -35719,7 +35864,7 @@
                       styleUrls: ['./settings.component.scss'],
                       changeDetection: i0.ChangeDetectionStrategy.OnPush
                   }]
-          }], ctorParameters: function () { return [{ type: HomedecoratorSettingsService }, { type: i2__namespace$4.MatSnackBar }, { type: MessageBusService }, { type: ConfigurationService }, { type: SceneService }, { type: ItemService }, { type: HomedecoratorAppService }, { type: FontService }]; }, propDecorators: { versionFieldRef: [{
+          }], ctorParameters: function () { return [{ type: HomedecoratorSettingsService }, { type: i2__namespace$4.MatSnackBar }, { type: MessageBusService }, { type: ConfigurationService }, { type: SceneService }, { type: ItemService }, { type: HomedecoratorAppService }, { type: FontService }, { type: HomedecoratorSettingsService }]; }, propDecorators: { versionFieldRef: [{
                   type: i0.ViewChild,
                   args: ['versionField', { static: true }]
               }], minWallHeight: [{
@@ -35940,9 +36085,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 +36130,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 +36152,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 +36178,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 +36394,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 +36757,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 +36766,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 +37630,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: 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 } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomShapeCreatorComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -37726,6 +37883,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:
@@ -39141,7 +39300,7 @@
           this.showContextMenu = false;
       };
       RoomPlannerComponent.prototype.startGroupSelection = function () {
-          this.showContextMenu = false;
+          this.closeContextMenu();
           this.userIsGrouping = true;
           this._messageService.emit(MessageType.StartGroupObject);
       };
@@ -39248,12 +39407,12 @@
       return RoomPlannerComponent;
   }());
   RoomPlannerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RoomPlannerComponent, deps: [{ token: HomedecoratorIconCacheService }, { token: ViewModeService }, { token: ModelsService }, { token: PresetsService }, { token: HomedecoratorAppService }, { token: ScreenSizeAnalysisService }, { token: i0__namespace.ChangeDetectorRef }, { token: UtilsService }, { token: MessageBusService }, { token: i1__namespace$1.MatDialog }, { token: ConfigurationService }, { token: FloorplanService }, { token: SceneService }, { token: HudService }, { token: RoomService }, { token: CameraService }, { token: ItemService }, { token: ItemSerializationService }, { token: LightsService }, { token: ArService }, { token: ItemService }, { token: HomedecoratorSettingsService }, { token: GoogleTagManagerService }, { token: PermanentStoreService }, { token: HomedecoratorAppEventService }, { token: HomedecoratorConnectorService }, { token: HomedecoratorConnectorAdapterService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  RoomPlannerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RoomPlannerComponent, selector: "rp-room-planner", inputs: { isLoading: "isLoading" }, outputs: { done: "done", showPlugin: "showPlugin", focusControls: "focusControls" }, host: { listeners: { "document:keydown": "handleDocKeyDown($event)" }, properties: { "class": "this.layerClass" } }, viewQueries: [{ propertyName: "floorplanner", first: true, predicate: FloorplannerComponent, descendants: true, static: true }, { propertyName: "toolbarIconLibrary", first: true, predicate: ["toolbarIconLibrary"], descendants: true, static: true }, { propertyName: "toolbarIconAccessoires", first: true, predicate: ["toolbarIconAccessoires"], descendants: true, static: true }, { propertyName: "toolbarIconSettings", first: true, predicate: ["toolbarIconSettings"], descendants: true, static: true }, { propertyName: "toolbarIcon2dView", first: true, predicate: ["toolbarIcon2dView"], descendants: true, static: true }, { propertyName: "toolbarIcon3dView", first: true, predicate: ["toolbarIcon3dView"], descendants: true, static: true }, { propertyName: "categoriesSidebar", first: true, predicate: ["categoriesSidebar"], descendants: true, static: true }, { propertyName: "accessoiresCategoriesSidebar", first: true, predicate: ["accessoiresCategoriesSidebar"], descendants: true, static: true }, { propertyName: "customShapeCreatorSideBar", first: true, predicate: ["customShapeCreatorSideBar"], descendants: true, static: true }, { propertyName: "customCylinderCreatorSideBar", first: true, predicate: ["customCylinderCreatorSideBar"], descendants: true, static: true }, { propertyName: "settingsSidebar", first: true, predicate: ["settingsSidebar"], descendants: true, static: true }, { propertyName: "librarySidebar", first: true, predicate: ["librarySidebar"], descendants: true, static: true }, { propertyName: "selectedObjectSidebar", first: true, predicate: ["selectedObjectSidebar"], descendants: true, static: true }, { propertyName: "selectedWallSidebar", first: true, predicate: ["selectedWallSidebar"], descendants: true, static: true }, { propertyName: "selectedThreedObjectSidebar", first: true, predicate: ["selectedThreedObjectSidebar"], descendants: true, static: true }, { propertyName: "selectedFloorSidebar", first: true, predicate: ["selectedFloorSidebar"], descendants: true, static: true }, { propertyName: "toolbarIconFaq", first: true, predicate: ["toolbarIconFaq"], descendants: true, static: true }, { propertyName: "toolbarIconFeedback", first: true, predicate: ["toolbarIconFeedback"], descendants: true, static: true }, { propertyName: "toolbarIconCart", first: true, predicate: ["toolbarIconCart"], descendants: true, static: true }], ngImport: i0__namespace, template: "\n      <div class=\"RoomPlanner\">\n          <floor-planner\n                  [class.hidden]=\"!viewModeService.is2dViewActive()\"\n                  (selectedWallChange)=\"selectWall($event)\"></floor-planner>\n      </div>\n\n      <rp-context-menu\n              *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && selectedWall\"\n              [openMouseEvent]=\"contextMenuMouseEvent\">\n          <div class=\"rp-item-context-menu-wrap \">\n              <div (click)=\"showSelectedWallSidebar()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" svgIcon=\"magic-wand\"></mat-icon></span>\n                  <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n              </div>\n          </div>\n      </rp-context-menu>\n\n      <rp-context-menu\n              *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && selectedFloor\"\n              [openMouseEvent]=\"contextMenuMouseEvent\">\n          <div class=\"rp-item-context-menu-wrap\">\n              <div (click)=\"showSelectedFloorSidebar()\" class=\"rp-item-context-menu-item \">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" svgIcon=\"magic-wand\"></mat-icon></span>\n                  <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n              </div>\n          </div>\n      </rp-context-menu>\n\n      <rp-item-context-menu\n              *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && !showGroupMenu\"\n              [item]=\"selectedObject\"\n              (deletePressed)=\"handleDeleteObject()\">\n          <div class=\"rp-item-context-menu-wrap\">\n              <div class=\"rp-item-context-menu-close\" (click)=\"closeContextMenu()\">\n                  <span class=\"close-icon\"><mat-icon class=\"homedecorator-material-icons\">close</mat-icon></span>\n              </div>\n              <div *ngIf=\"this.selectedObject\" class=\"rp-item-context-menu-header\">\n                  <p>{{ this.selectedObject.name }}</p>\n              </div>\n              <div *ngIf=\"showSettingsButton\" (click)=\"showSelectedObjectSidebar()\"\n                   class=\"rp-item-context-menu-item \">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" svgIcon=\"magic-wand\"></mat-icon></span>\n                  <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n              </div>\n              <ng-container *ngIf=\"showConfigurationButton\">\n                  <div *ngFor=\"let customButton of modelsService.customButtons\" (click)=\"handleConfigurationButtonClick(customButton)\"\n                       class=\"rp-item-context-menu-item \">\n                      <span class=\"icon\"><co-icon [iconData]=\"iconService.getIcon(icon.MagicWand)\"></co-icon></span>\n                      <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n                  </div>\n              </ng-container>\n              <div *ngIf=\"showCopyButton\" (click)=\"copySelectedObject()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">file_copy</mat-icon></span>\n                  <span class=\"label\">{{ 'COPY' | localize }}</span>\n              </div>\n              <div *ngIf=\"showDeleteButton\" (click)=\"removeSelectedObject()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">delete</mat-icon></span>\n                  <span class=\"label\">{{ 'REMOVE' | localize }}</span>\n              </div>\n              <div *ngIf=\"showConfigurationButton\" (click)=\"showSelectedThreedObjectSidebar()\"\n                   class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">settings</mat-icon></span>\n                  <span class=\"label\">{{ 'SETTINGS' | localize }}</span>\n              </div>\n              <div *ngIf=\"showLockButton && selectedObject\" (click)=\"toggleLockSelectedObject()\"\n                   class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" [textContent]=\"selectedObject.locked ? 'lock' : 'lock_open'\"></mat-icon></span>\n                  <span class=\"label\">{{ (selectedObject.locked ? 'UNLOCK' : 'LOCK') | localize }}</span>\n              </div>\n              <div *ngIf=\"!showGroupEditMenuButtons\" (click)=\"startGroupSelection()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">link</mat-icon></span>\n                  <span class=\"label\">{{ 'GROUP' | localize }}</span>\n              </div>\n\n              <div *ngIf=\"showConversionButton && settingsService.settings.showConversionButtons\"\n                      (click)=\"sendConversionToTagManager()\"\n                      class=\"rp-item-context-menu-item\"\n                      [ngClass]=\"addSelectedClass ? 'conversion-button-selected' : ''\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">add_shopping_cart</mat-icon></span>\n                  <span class=\"label\">{{ 'CONVERSION' | localize }}</span>\n                  <span class=\"icon icon-selected\"><mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon></span>\n              </div>\n\n\n              <div *ngIf=\"showARButton\" (click)=\"startARSession()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">weekend</mat-icon></span>\n                  <span class=\"label\">{{ 'AR' | localize }}</span>\n              </div>\n              <button-elevation\n                      *ngIf=\"selectedObject && selectedObject.elevationAdjustable\"\n                      [item]=\"selectedObject\">\n              </button-elevation>\n              <ng-container *ngIf=\"salableObject\">\n                <div class=\"toolbar__divider context-menu\"></div>\n                <div (click)=\"addToCart(selectedObject)\" class=\"rp-item-context-menu-item add-to-cart-button\">\n                    <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" [svgIcon]=\"'cart-shopping-regular'\"></mat-icon></span>\n                    <span class=\"label\">{{ 'ADD_TO_CART' | localize }}</span>\n                </div>\n              </ng-container>\n          </div>\n      </rp-item-context-menu>\n\n      <rp-item-context-menu *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && showGroupMenu && !userIsGrouping\"\n                            [item]=\"selectedObject\"\n                            (deletePressed)=\"handleDeleteObject()\">\n          <div class=\"rp-item-context-menu-wrap\">\n              <div *ngIf=\"!showGroupEditMenuButtons\" (click)=\"onGroupClick()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">link</mat-icon></span>\n                  <span class=\"label\">{{ 'GROUP' | localize }}</span>\n              </div>\n              <div *ngIf=\"showGroupEditMenuButtons\" (click)=\"onUnGroupClick()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">link_off</mat-icon></span>\n                  <span class=\"label\">{{ 'UNGROUP' | localize }}</span>\n              </div>\n              <div *ngIf=\"showGroupEditMenuButtons\" (click)=\"removeSelectedObject()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">delete</mat-icon></span>\n                  <span class=\"label\">{{ 'REMOVE' | localize }}</span>\n              </div>\n              <div *ngIf=\"showLockButton && selectedObject && showGroupEditMenuButtons\" (click)=\"toggleLockSelectedObject()\"\n                   class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" [textContent]=\"selectedObject.locked ? 'lock' : 'lock_open'\"></mat-icon></span>\n                  <span class=\"label\">{{ (selectedObject.locked ? 'UNLOCK' : 'LOCK') | localize }}</span>\n              </div>\n          </div>\n      </rp-item-context-menu>\n\n      <ng-template #toolbarIconLibrary>\n          <rp-toolbar-icon\n                  *ngIf=\"!phoneSizeScreen\"\n                  [disabled]=\"viewModeService.is2dViewActive() || viewModeService.isWalkThroughViewActive()\"\n                  matIcon=\"home\"\n                  tooltip=\"{{iconName.Architecture | localize}}\"\n                  (onClick)=\"showLibraryCategories()\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n      </ng-template>\n\n      <ng-template #toolbarIconAccessoires>\n          <rp-toolbar-icon\n                  [disabled]=\"viewModeService.is2dViewActive() || viewModeService.isWalkThroughViewActive()\"\n                  matIcon=\"local_florist\"\n                  tooltip=\"{{iconName.Accessories | localize}}\"\n                  (onClick)=\"showAccessoireCategories()\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n      </ng-template>\n\n      <ng-template #toolbarIcon2dView>\n          <span class=\"toolbar__divider\"></span>\n          <rp-toolbar-icon\n                  *ngIf=\"!phoneSizeScreen\"\n                  svgIcon=\"cube-unfolded\"\n                  tooltip=\"{{iconName.TwodFloorplan | localize}}\"\n                  [disabled]=\"viewModeService.is2dViewActive() || !desktopSizeScreen\"\n                  (onClick)=\"updateMode(viewModes.FloorPlan2D, true)\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n      </ng-template>\n\n      <ng-template #toolbarIcon3dView>\n          <rp-toolbar-icon\n                  svgIcon=\"cube-outline\"\n                  tooltip=\"{{iconName.ThreedRoomplan | localize}}\"\n                  [disabled]=\"viewModeService.is3dViewActive()\"\n                  (onClick)=\"updateMode(viewModes.RoomPlan3D, true)\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n      </ng-template>\n\n      <rp-zoom-controls\n              [visible]=\"viewModeService.is2dViewActive()\"\n              (onZoomIn)=\"zoomIn()\"\n              (onZoomReset)=\"zoomReset()\"\n              (onZoomOut)=\"zoomOut()\"\n      ></rp-zoom-controls>\n\n      <ng-template #toolbarIconSettings>\n          <span class=\"toolbar__divider\"></span>\n          <rp-toolbar-icon\n                  matIcon=\"settings\"\n                  tooltip=\"{{iconName.Settings | localize}}\"\n                  (onClick)=\"showSettings()\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n      </ng-template>\n\n      <ng-template #toolbarIconFaq>\n          <rp-toolbar-icon\n                  *ngIf=\"showFaq()\"\n                  matIcon=\"help\"\n                  tooltip=\"{{iconName.Faq | localize}}\"\n                  (onClick)=\"openFaq(this.settingsService.settings.faqUrl)\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n      </ng-template>\n\n      <ng-template #toolbarIconFeedback>\n          <rp-toolbar-icon\n                  *ngIf=\"showFeedback()\"\n                  matIcon=\"chat_bubble\"\n                  tooltip=\"{{iconName.Feedback | localize}}\"\n                  (onClick)=\"openFeedback(this.settingsService.settings.feedbackUrl)\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n      </ng-template>\n      <ng-template #toolbarIconCart>\n          <span class=\"toolbar__divider\"></span>\n          <rp-toolbar-icon class=\"add-to-cart-button\"\n                  svgIcon=\"cart-shopping-regular\"\n                  tooltip=\"{{'ADD_TO_CART' | localize}}\"\n                  (onClick)=\"addAllToCart()\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n          <span class=\"toolbar__divider\"></span>\n      </ng-template>\n\n      <ng-template #settingsSidebar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\">{{ 'SETTINGS' | localize }}</h2>\n          </header>\n          <rp-settings\n                  [placeCameraDisabled]=\"viewModeService.is2dViewActive() || itemService.getWalkthroughCamera()\"\n                  [minWallHeight]=\"getMinGlobalWallHeight()\"\n                  (onWallsHeightUpdate)=\"wallsHeightUpdated($event)\"\n          >\n          </rp-settings>\n      </ng-template>\n\n      <ng-template #categoriesSidebar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\">{{ 'ARCHITECTURE' | localize }}</h2>\n          </header>\n          <rp-category-library\n                  [categories]=\"categories\"\n                  (categoryClick)=\"showLibraryCategory($event)\"\n          >\n          </rp-category-library>\n      </ng-template>\n\n      <ng-template #accessoiresCategoriesSidebar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\">{{ 'ACCESSOIRES' | localize }}</h2>\n          </header>\n          <rp-category-library\n                  [categories]=\"accessoireCategories\"\n                  (categoryClick)=\"showLibraryCategory($event)\"\n          >\n          </rp-category-library>\n      </ng-template>\n\n      <ng-template #customShapeCreatorSideBar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\">{{ 'CUSTOM_SHAPE_CREATOR' | localize }}</h2>\n          </header>\n          <rp-custom-shape-creator [shape]=\"selectedObject\"></rp-custom-shape-creator>\n      </ng-template>\n\n      <ng-template #customCylinderCreatorSideBar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\">{{ 'CUSTOM_SHAPE_CREATOR' | localize }}</h2>\n          </header>\n          <custom-cylinder-creator [shape]=\"selectedObject\"></custom-cylinder-creator>\n      </ng-template>\n\n      <ng-template #librarySidebar>\n          <div fxLayout=\"column\" class=\"with-scrollable-section\">\n              <header class=\"drawer__header\">\n                  <button mat-icon-button (click)=\"showActiveCategorySidebar()\">\n                      <mat-icon class=\"homedecorator-material-icons\">arrow_back_ios</mat-icon>\n                  </button>\n                  <h2 class=\"mat-title\">{{ selectedCategory.name | localize }}</h2>\n              </header>\n              <p class=\"mat-body\" *ngIf=\"selectedCategory.description\">{{ selectedCategory.description | localize }}</p>\n              <section fxFlex=\"grow\" *ngIf=\"libraryObjects?.length > 0 || hasCustomObjects()\">\n                  <ng-container *ngIf=\"hasCustomObjects()\">\n                      <h3 class=\"mat-subheading-2\">{{ 'CUSTOM' | localize }}</h3>\n                      <rp-object-library\n                              [objects]=\"customObjects\"\n                              (setDragged)=\"setDragged($event)\"\n                              (releaseDragged)=\"releaseDragged()\"\n                              (onObjectClick)=\"onObjectLibraryClick($event)\"\n                      >\n                      </rp-object-library>\n                      <mat-divider></mat-divider>\n                  </ng-container>\n                  <ng-container *ngIf=\"libraryObjects?.length > 0\">\n                      <h3 class=\"mat-subheading-2\">{{ 'LIBRARY' | localize }}</h3>\n                      <rp-object-library\n                              [objects]=\"libraryObjects\"\n                              (setDragged)=\"setDragged($event)\"\n                              (releaseDragged)=\"releaseDragged()\"\n                              (onObjectClick)=\"onObjectLibraryClick($event)\"\n                      >\n                      </rp-object-library>\n                  </ng-container>\n              </section>\n          </div>\n      </ng-template>\n\n      <ng-template #selectedObjectSidebar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\">{{ 'OBJECT' | localize }}</h2>\n          </header>\n          <rp-selected-object\n                  [object]=\"selectedObject\"\n                  (onSelectedObjectChange)=\"updateSelectedObjectHud()\"\n          >\n          </rp-selected-object>\n      </ng-template>\n\n      <ng-template #selectedWallSidebar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\">{{ 'WALL'| localize }}</h2>\n          </header>\n          <rp-selected-wall\n                  [wall]=\"selectedWall\"\n                  [texturePlane]=\"selectedEdges[0]\"\n                  [minWallHeight]=\"getMinWallHeight(selectedWall)\"\n                  [maxWallHeight]=\"maxWallHeight\"\n                  [maxWallThickness]=\"maxWallThickness\"\n                  [maxWallLength]=\"maxWallLength\"\n                  [minWallLength]=\"minWallLength\"\n                  (remove)=\"removeWall($event)\"\n                  (setLength)=\"setWallLength($event)\"\n                  (setHeight)=\"setWallHeight($event)\"\n                  (setThickness)=\"setWallThickness($event)\"\n                  (selectCorner)=\"selectCorner($event)\"\n                  (setTexture)=\"setWallTexture($event)\"\n                  (setColor)=\"setWallColor($event)\"\n          >\n          </rp-selected-wall>\n      </ng-template>\n\n      <ng-template #selectedThreedObjectSidebar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\" [textContent]=\"'SETTINGS' | localize\"></h2>\n          </header>\n          <rp-selected-threed-object\n                  [object]=\"selectedObject\"\n                  [showCopy]=\"showCopyButton\"\n                  [showDelete]=\"showDeleteButton\"\n                  [showLock]=\"showLockButton\"\n                  (onSelectedObjectChange)=\"updateSelectedObjectHud()\"\n          >\n          </rp-selected-threed-object>\n      </ng-template>\n\n      <ng-template #selectedFloorSidebar>\n          <h2 class=\"mat-title\">{{ 'FLOOR' | localize }}</h2>\n          <rp-selected-floor\n                  [floor]=\"selectedFloor\"\n                  [texturePlane]=\"selectedFloor\"\n                  (setTexture)=\"setFloorTexture($event)\"\n                  (setColor)=\"setFloorColor($event)\"\n                  (selectedFloorClosed)=\"selectedFloor = undefined\"\n          >\n          </rp-selected-floor>\n      </ng-template>\n\n\n      <div class=\"rp-item-context-menu-wrap mrp-save-grouping\" *ngIf=\"userIsGrouping\">\n          <div class=\"rp-item-context-menu-item\" (click)=\"onGroupClick()\">\n              <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">check</mat-icon></span>\n              <span class=\"label\">{{ 'GROUPING' | localize }}</span>\n          </div>\n          <div class=\"rp-item-context-menu-item\" (click)=\"cancelGroupSelection()\">\n              <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">cancel</mat-icon></span>\n              <span class=\"label\">{{ 'CANCEL' | localize }}</span>\n          </div>\n      </div>\n  ", isInline: true, styles: [".with-scrollable-section{overflow:hidden;height:100%}.with-scrollable-section section{overflow-y:auto}.RoomPlanner{width:inherit;height:inherit;pointer-events:none}.RoomPlanner>*{pointer-events:all}.sidebar-toggles .mat-raised-button{width:110px;text-align:left}.logo-menu{position:absolute;top:20px;left:20px;z-index:2}.logo-menu-2nd{position:absolute;top:140px;left:84px}.logo-menu-4th{position:absolute;top:180px;left:84px}.sidebar{position:absolute;left:0;top:0;height:100vh;max-width:30%;width:400px;background:#fff;padding:0 20px;box-shadow:0 0 20px #00000040}.flex-wrap{display:flex;flex-flow:column nowrap;height:100%}.solid-background>canvas{fill:#fff;background:white}.toolbar__divider{border-bottom:1px solid black;width:100%;margin:5px 0}.toolbar__divider.context-menu{border-color:gray}.on-top{z-index:3}.rp-item-context-menu-wrap{color:#fff;background:rgba(0,0,0,.6);border-radius:5px;box-sizing:border-box;padding:5px;position:relative}.rp-item-context-menu-wrap .rp-item-context-menu-item{cursor:pointer;flex-direction:row;display:flex;padding:5px;border-radius:5px}.rp-item-context-menu-wrap .rp-item-context-menu-item span,.rp-item-context-menu-wrap .rp-item-context-menu-item label{display:flex;flex-direction:column;line-height:20px;font-size:12px;font-weight:lighter;vertical-align:middle}.rp-item-context-menu-wrap .rp-item-context-menu-item .label{width:200px}.rp-item-context-menu-wrap .rp-item-context-menu-item .icon{width:20px;margin-right:10px}.rp-item-context-menu-wrap .rp-item-context-menu-item .icon svg,.rp-item-context-menu-wrap .rp-item-context-menu-item .icon co-icon,.rp-item-context-menu-wrap .rp-item-context-menu-item .icon .mat-icon{height:15px;width:15px;font-size:18px}.rp-item-context-menu-wrap .rp-item-context-menu-item:hover{background:rgba(220,220,220,.5)}.rp-item-context-menu-wrap .rp-item-context-menu-item-highlight{color:#da9803}.rp-item-context-menu-wrap .rp-item-context-menu-item-highlight svg{fill:#da9803}.rp-item-context-menu-wrap .conversion-button-selected .icon-selected{color:#009a6d}.rp-item-context-menu-wrap .rp-item-context-menu-header{border-bottom:1px solid #808080;margin-bottom:10px;padding-left:5px;padding-right:25px;max-width:200px;overflow:hidden}.rp-item-context-menu-wrap .rp-item-context-menu-header p{color:#dda73f;font-size:13px}.rp-item-context-menu-wrap .rp-item-context-menu-close{position:absolute;right:15px;top:15px;z-index:2;cursor:pointer;width:10px;height:10px}.rp-item-context-menu-wrap .rp-item-context-menu-close .close-icon .mat-icon{height:15px;width:15px;font-size:18px}.mrp-save-grouping{position:absolute;bottom:10%;left:50%}\n"], components: [{ type: FloorplannerComponent, selector: "floor-planner", outputs: ["selectedWallChange"] }, { type: ContextMenuComponent, selector: "rp-context-menu", inputs: ["openMouseEvent"] }, { type: i5__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ItemContextMenuComponent, selector: "rp-item-context-menu", inputs: ["item"], outputs: ["deletePressed"] }, { type: i4__namespace.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: ButtonElevationComponent, selector: "button-elevation", inputs: ["item"] }, { type: ToolbarIconComponent, selector: "rp-toolbar-icon", inputs: ["matIcon", "svgIcon", "tooltip", "disabled", "showLabel"], outputs: ["onClick"] }, { type: ZoomControlsComponent, selector: "rp-zoom-controls", inputs: ["visible"], outputs: ["onZoomIn", "onZoomReset", "onZoomOut"] }, { type: SettingsComponent, selector: "rp-settings", inputs: ["minWallHeight", "placeCameraDisabled"], outputs: ["onWallsHeightUpdate"] }, { type: CategoryLibraryComponent, selector: "rp-category-library", inputs: ["categories"], outputs: ["categoryClick"] }, { type: CustomShapeCreatorComponent, selector: "rp-custom-shape-creator", inputs: ["shape"] }, { type: CustomCylinderCreatorComponent, selector: "custom-cylinder-creator", inputs: ["shape"] }, { 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: ObjectLibraryComponent, selector: "rp-object-library", inputs: ["objects"], outputs: ["setDragged", "releaseDragged", "onObjectClick"] }, { type: i6__namespace.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: SelectedObjectComponent, selector: "rp-selected-object", inputs: ["object"], outputs: ["onSelectedObjectChange"] }, { type: SelectedWallComponent, selector: "rp-selected-wall", inputs: ["wall", "texturePlane", "color", "minWallHeight", "maxWallHeight", "maxWallThickness", "maxWallLength", "minWallLength"], outputs: ["remove", "setLength", "setHeight", "setThickness", "selectCorner", "setTexture", "setColor"] }, { type: SelectedThreedObjectComponent, selector: "rp-selected-threed-object", inputs: ["object", "showCopy", "showDelete", "showLock"], outputs: ["onSelectedObjectChange"] }, { type: SelectedFloorComponent, selector: "rp-selected-floor", inputs: ["floor", "texturePlane", "color"], outputs: ["setTexture", "setColor"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { 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.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"] }], pipes: { "localize": LocalizePipe } });
+  RoomPlannerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RoomPlannerComponent, selector: "rp-room-planner", inputs: { isLoading: "isLoading" }, outputs: { done: "done", showPlugin: "showPlugin", focusControls: "focusControls" }, host: { listeners: { "document:keydown": "handleDocKeyDown($event)" }, properties: { "class": "this.layerClass" } }, viewQueries: [{ propertyName: "floorplanner", first: true, predicate: FloorplannerComponent, descendants: true, static: true }, { propertyName: "toolbarIconLibrary", first: true, predicate: ["toolbarIconLibrary"], descendants: true, static: true }, { propertyName: "toolbarIconAccessoires", first: true, predicate: ["toolbarIconAccessoires"], descendants: true, static: true }, { propertyName: "toolbarIconSettings", first: true, predicate: ["toolbarIconSettings"], descendants: true, static: true }, { propertyName: "toolbarIcon2dView", first: true, predicate: ["toolbarIcon2dView"], descendants: true, static: true }, { propertyName: "toolbarIcon3dView", first: true, predicate: ["toolbarIcon3dView"], descendants: true, static: true }, { propertyName: "categoriesSidebar", first: true, predicate: ["categoriesSidebar"], descendants: true, static: true }, { propertyName: "accessoiresCategoriesSidebar", first: true, predicate: ["accessoiresCategoriesSidebar"], descendants: true, static: true }, { propertyName: "customShapeCreatorSideBar", first: true, predicate: ["customShapeCreatorSideBar"], descendants: true, static: true }, { propertyName: "customCylinderCreatorSideBar", first: true, predicate: ["customCylinderCreatorSideBar"], descendants: true, static: true }, { propertyName: "settingsSidebar", first: true, predicate: ["settingsSidebar"], descendants: true, static: true }, { propertyName: "librarySidebar", first: true, predicate: ["librarySidebar"], descendants: true, static: true }, { propertyName: "selectedObjectSidebar", first: true, predicate: ["selectedObjectSidebar"], descendants: true, static: true }, { propertyName: "selectedWallSidebar", first: true, predicate: ["selectedWallSidebar"], descendants: true, static: true }, { propertyName: "selectedThreedObjectSidebar", first: true, predicate: ["selectedThreedObjectSidebar"], descendants: true, static: true }, { propertyName: "selectedFloorSidebar", first: true, predicate: ["selectedFloorSidebar"], descendants: true, static: true }, { propertyName: "toolbarIconFaq", first: true, predicate: ["toolbarIconFaq"], descendants: true, static: true }, { propertyName: "toolbarIconFeedback", first: true, predicate: ["toolbarIconFeedback"], descendants: true, static: true }, { propertyName: "toolbarIconCart", first: true, predicate: ["toolbarIconCart"], descendants: true, static: true }], ngImport: i0__namespace, template: "\n    <div class=\"RoomPlanner\">\n      <floor-planner\n        [class.hidden]=\"!viewModeService.is2dViewActive()\"\n        (selectedWallChange)=\"selectWall($event)\"></floor-planner>\n    </div>\n\n    <rp-context-menu\n      *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && selectedWall\"\n      [openMouseEvent]=\"contextMenuMouseEvent\">\n      <div class=\"rp-item-context-menu-wrap \">\n        <div (click)=\"showSelectedWallSidebar()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" svgIcon=\"magic-wand\"></mat-icon></span>\n          <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n        </div>\n      </div>\n    </rp-context-menu>\n\n    <rp-context-menu\n      *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && selectedFloor\"\n      [openMouseEvent]=\"contextMenuMouseEvent\">\n      <div class=\"rp-item-context-menu-wrap\">\n        <div (click)=\"showSelectedFloorSidebar()\" class=\"rp-item-context-menu-item \">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" svgIcon=\"magic-wand\"></mat-icon></span>\n          <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n        </div>\n      </div>\n    </rp-context-menu>\n\n    <rp-item-context-menu\n      *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && !showGroupMenu\"\n      [item]=\"selectedObject\"\n      (deletePressed)=\"handleDeleteObject()\">\n      <div class=\"rp-item-context-menu-wrap\">\n        <div class=\"rp-item-context-menu-close\" (click)=\"closeContextMenu()\">\n          <span class=\"close-icon\"><mat-icon class=\"homedecorator-material-icons\">close</mat-icon></span>\n        </div>\n        <div *ngIf=\"this.selectedObject\" class=\"rp-item-context-menu-header\">\n          <p>{{ this.selectedObject.name }}</p>\n        </div>\n        <div *ngIf=\"showSettingsButton\" (click)=\"showSelectedObjectSidebar()\"\n             class=\"rp-item-context-menu-item \">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" svgIcon=\"magic-wand\"></mat-icon></span>\n          <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n        </div>\n        <ng-container *ngIf=\"showConfigurationButton\">\n          <div *ngFor=\"let customButton of modelsService.customButtons\" (click)=\"handleConfigurationButtonClick(customButton)\"\n               class=\"rp-item-context-menu-item \">\n            <span class=\"icon\"><co-icon [iconData]=\"iconService.getIcon(icon.MagicWand)\"></co-icon></span>\n            <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n          </div>\n        </ng-container>\n        <div *ngIf=\"showCopyButton\" (click)=\"copySelectedObject()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">file_copy</mat-icon></span>\n          <span class=\"label\">{{ 'COPY' | localize }}</span>\n        </div>\n        <div *ngIf=\"showDeleteButton\" (click)=\"removeSelectedObject()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">delete</mat-icon></span>\n          <span class=\"label\">{{ 'REMOVE' | localize }}</span>\n        </div>\n        <div *ngIf=\"showConfigurationButton\" (click)=\"showSelectedThreedObjectSidebar()\"\n             class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">settings</mat-icon></span>\n          <span class=\"label\">{{ 'SETTINGS' | localize }}</span>\n        </div>\n        <div *ngIf=\"showLockButton && selectedObject\" (click)=\"toggleLockSelectedObject()\"\n             class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\"\n                                       [textContent]=\"selectedObject.locked ? 'lock' : 'lock_open'\"></mat-icon></span>\n          <span class=\"label\">{{ (selectedObject.locked ? 'UNLOCK' : 'LOCK') | localize }}</span>\n        </div>\n        <div *ngIf=\"!showGroupEditMenuButtons\" (click)=\"startGroupSelection()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">link</mat-icon></span>\n          <span class=\"label\">{{ 'GROUP' | localize }}</span>\n        </div>\n\n        <div *ngIf=\"showConversionButton && settingsService.settings.showConversionButtons\"\n             (click)=\"sendConversionToTagManager()\"\n             class=\"rp-item-context-menu-item\"\n             [ngClass]=\"addSelectedClass ? 'conversion-button-selected' : ''\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">add_shopping_cart</mat-icon></span>\n          <span class=\"label\">{{ 'CONVERSION' | localize }}</span>\n          <span class=\"icon icon-selected\"><mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon></span>\n        </div>\n\n\n        <div *ngIf=\"showARButton\" (click)=\"startARSession()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">weekend</mat-icon></span>\n          <span class=\"label\">{{ 'AR' | localize }}</span>\n        </div>\n        <button-elevation\n          *ngIf=\"selectedObject && selectedObject.elevationAdjustable\"\n          [item]=\"selectedObject\">\n        </button-elevation>\n        <ng-container *ngIf=\"salableObject\">\n          <div class=\"toolbar__divider context-menu\"></div>\n          <div (click)=\"addToCart(selectedObject)\" class=\"rp-item-context-menu-item add-to-cart-button\">\n            <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" [svgIcon]=\"'cart-shopping-regular'\"></mat-icon></span>\n            <span class=\"label\">{{ 'ADD_TO_CART' | localize }}</span>\n          </div>\n        </ng-container>\n      </div>\n    </rp-item-context-menu>\n\n    <rp-item-context-menu *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && showGroupMenu && !userIsGrouping\"\n                          [item]=\"selectedObject\"\n                          (deletePressed)=\"handleDeleteObject()\">\n      <div class=\"rp-item-context-menu-wrap\">\n        <div *ngIf=\"!showGroupEditMenuButtons\" (click)=\"onGroupClick()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">link</mat-icon></span>\n          <span class=\"label\">{{ 'GROUP' | localize }}</span>\n        </div>\n        <div *ngIf=\"showGroupEditMenuButtons\" (click)=\"onUnGroupClick()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">link_off</mat-icon></span>\n          <span class=\"label\">{{ 'UNGROUP' | localize }}</span>\n        </div>\n        <div *ngIf=\"showGroupEditMenuButtons\" (click)=\"removeSelectedObject()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">delete</mat-icon></span>\n          <span class=\"label\">{{ 'REMOVE' | localize }}</span>\n        </div>\n        <div *ngIf=\"showLockButton && selectedObject && showGroupEditMenuButtons\" (click)=\"toggleLockSelectedObject()\"\n             class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\"\n                                       [textContent]=\"selectedObject.locked ? 'lock' : 'lock_open'\"></mat-icon></span>\n          <span class=\"label\">{{ (selectedObject.locked ? 'UNLOCK' : 'LOCK') | localize }}</span>\n        </div>\n      </div>\n    </rp-item-context-menu>\n\n    <ng-template #toolbarIconLibrary>\n      <rp-toolbar-icon\n        *ngIf=\"!phoneSizeScreen\"\n        [disabled]=\"viewModeService.is2dViewActive() || viewModeService.isWalkThroughViewActive()\"\n        matIcon=\"home\"\n        tooltip=\"{{iconName.Architecture | localize}}\"\n        (onClick)=\"showLibraryCategories()\"\n        [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n    </ng-template>\n\n    <ng-template #toolbarIconAccessoires>\n      <rp-toolbar-icon\n        [disabled]=\"viewModeService.is2dViewActive() || viewModeService.isWalkThroughViewActive()\"\n        matIcon=\"local_florist\"\n        tooltip=\"{{iconName.Accessories | localize}}\"\n        (onClick)=\"showAccessoireCategories()\"\n        [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n    </ng-template>\n\n    <ng-template #toolbarIcon2dView>\n      <span class=\"toolbar__divider\"></span>\n      <rp-toolbar-icon\n        *ngIf=\"!phoneSizeScreen\"\n        svgIcon=\"cube-unfolded\"\n        tooltip=\"{{iconName.TwodFloorplan | localize}}\"\n        [disabled]=\"viewModeService.is2dViewActive() || !desktopSizeScreen\"\n        (onClick)=\"updateMode(viewModes.FloorPlan2D, true)\"\n        [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n    </ng-template>\n\n    <ng-template #toolbarIcon3dView>\n      <rp-toolbar-icon\n        svgIcon=\"cube-outline\"\n        tooltip=\"{{iconName.ThreedRoomplan | localize}}\"\n        [disabled]=\"viewModeService.is3dViewActive()\"\n        (onClick)=\"updateMode(viewModes.RoomPlan3D, true)\"\n        [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n    </ng-template>\n\n    <rp-zoom-controls\n      [visible]=\"viewModeService.is2dViewActive()\"\n      (onZoomIn)=\"zoomIn()\"\n      (onZoomReset)=\"zoomReset()\"\n      (onZoomOut)=\"zoomOut()\"\n    ></rp-zoom-controls>\n\n    <ng-template #toolbarIconSettings>\n      <span class=\"toolbar__divider\"></span>\n      <rp-toolbar-icon\n        matIcon=\"settings\"\n        tooltip=\"{{iconName.Settings | localize}}\"\n        (onClick)=\"showSettings()\"\n        [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n    </ng-template>\n\n    <ng-template #toolbarIconFaq>\n      <rp-toolbar-icon\n        *ngIf=\"showFaq()\"\n        matIcon=\"help\"\n        tooltip=\"{{iconName.Faq | localize}}\"\n        (onClick)=\"openFaq(this.settingsService.settings.faqUrl)\"\n        [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n    </ng-template>\n\n    <ng-template #toolbarIconFeedback>\n      <rp-toolbar-icon\n        *ngIf=\"showFeedback()\"\n        matIcon=\"chat_bubble\"\n        tooltip=\"{{iconName.Feedback | localize}}\"\n        (onClick)=\"openFeedback(this.settingsService.settings.feedbackUrl)\"\n        [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n    </ng-template>\n    <ng-template #toolbarIconCart>\n      <span class=\"toolbar__divider\"></span>\n      <rp-toolbar-icon class=\"add-to-cart-button\"\n                       svgIcon=\"cart-shopping-regular\"\n                       tooltip=\"{{'ADD_TO_CART' | localize}}\"\n                       (onClick)=\"addAllToCart()\"\n                       [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n      <span class=\"toolbar__divider\"></span>\n    </ng-template>\n\n    <ng-template #settingsSidebar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\">{{ 'SETTINGS' | localize }}</h2>\n      </header>\n      <rp-settings\n        [placeCameraDisabled]=\"viewModeService.is2dViewActive() || itemService.getWalkthroughCamera()\"\n        [minWallHeight]=\"getMinGlobalWallHeight()\"\n        (onWallsHeightUpdate)=\"wallsHeightUpdated($event)\"\n      >\n      </rp-settings>\n    </ng-template>\n\n    <ng-template #categoriesSidebar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\">{{ 'ARCHITECTURE' | localize }}</h2>\n      </header>\n      <rp-category-library\n        [categories]=\"categories\"\n        (categoryClick)=\"showLibraryCategory($event)\"\n      >\n      </rp-category-library>\n    </ng-template>\n\n    <ng-template #accessoiresCategoriesSidebar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\">{{ 'ACCESSOIRES' | localize }}</h2>\n      </header>\n      <rp-category-library\n        [categories]=\"accessoireCategories\"\n        (categoryClick)=\"showLibraryCategory($event)\"\n      >\n      </rp-category-library>\n    </ng-template>\n\n    <ng-template #customShapeCreatorSideBar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\">{{ 'CUSTOM_SHAPE_CREATOR' | localize }}</h2>\n      </header>\n      <rp-custom-shape-creator [shape]=\"selectedObject\"></rp-custom-shape-creator>\n    </ng-template>\n\n    <ng-template #customCylinderCreatorSideBar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\">{{ 'CUSTOM_SHAPE_CREATOR' | localize }}</h2>\n      </header>\n      <custom-cylinder-creator [shape]=\"selectedObject\"></custom-cylinder-creator>\n    </ng-template>\n\n    <ng-template #librarySidebar>\n      <div fxLayout=\"column\" class=\"with-scrollable-section\">\n        <header class=\"drawer__header\">\n          <button mat-icon-button (click)=\"showActiveCategorySidebar()\">\n            <mat-icon class=\"homedecorator-material-icons\">arrow_back_ios</mat-icon>\n          </button>\n          <h2 class=\"mat-title\">{{ selectedCategory.name | localize }}</h2>\n        </header>\n        <p class=\"mat-body\" *ngIf=\"selectedCategory.description\">{{ selectedCategory.description | localize }}</p>\n        <section fxFlex=\"grow\" *ngIf=\"libraryObjects?.length > 0 || hasCustomObjects()\">\n          <ng-container *ngIf=\"hasCustomObjects()\">\n            <h3 class=\"mat-subheading-2\">{{ 'CUSTOM' | localize }}</h3>\n            <rp-object-library\n              [objects]=\"customObjects\"\n              (setDragged)=\"setDragged($event)\"\n              (releaseDragged)=\"releaseDragged()\"\n              (onObjectClick)=\"onObjectLibraryClick($event)\"\n            >\n            </rp-object-library>\n            <mat-divider></mat-divider>\n          </ng-container>\n          <ng-container *ngIf=\"libraryObjects?.length > 0\">\n            <h3 class=\"mat-subheading-2\">{{ 'LIBRARY' | localize }}</h3>\n            <rp-object-library\n              [objects]=\"libraryObjects\"\n              (setDragged)=\"setDragged($event)\"\n              (releaseDragged)=\"releaseDragged()\"\n              (onObjectClick)=\"onObjectLibraryClick($event)\"\n            >\n            </rp-object-library>\n          </ng-container>\n        </section>\n      </div>\n    </ng-template>\n\n    <ng-template #selectedObjectSidebar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\">{{ 'OBJECT' | localize }}</h2>\n      </header>\n      <rp-selected-object\n        [object]=\"selectedObject\"\n        (onSelectedObjectChange)=\"updateSelectedObjectHud()\"\n      >\n      </rp-selected-object>\n    </ng-template>\n\n    <ng-template #selectedWallSidebar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\">{{ 'WALL'| localize }}</h2>\n      </header>\n      <rp-selected-wall\n        [wall]=\"selectedWall\"\n        [texturePlane]=\"selectedEdges[0]\"\n        [minWallHeight]=\"getMinWallHeight(selectedWall)\"\n        [maxWallHeight]=\"maxWallHeight\"\n        [maxWallThickness]=\"maxWallThickness\"\n        [maxWallLength]=\"maxWallLength\"\n        [minWallLength]=\"minWallLength\"\n        (remove)=\"removeWall($event)\"\n        (setLength)=\"setWallLength($event)\"\n        (setHeight)=\"setWallHeight($event)\"\n        (setThickness)=\"setWallThickness($event)\"\n        (selectCorner)=\"selectCorner($event)\"\n        (setTexture)=\"setWallTexture($event)\"\n        (setColor)=\"setWallColor($event)\"\n      >\n      </rp-selected-wall>\n    </ng-template>\n\n    <ng-template #selectedThreedObjectSidebar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\" [textContent]=\"'SETTINGS' | localize\"></h2>\n      </header>\n      <rp-selected-threed-object\n        [object]=\"selectedObject\"\n        [showCopy]=\"showCopyButton\"\n        [showDelete]=\"showDeleteButton\"\n        [showLock]=\"showLockButton\"\n        (onSelectedObjectChange)=\"updateSelectedObjectHud()\"\n      >\n      </rp-selected-threed-object>\n    </ng-template>\n\n    <ng-template #selectedFloorSidebar>\n      <h2 class=\"mat-title\">{{ 'FLOOR' | localize }}</h2>\n      <rp-selected-floor\n        [floor]=\"selectedFloor\"\n        [texturePlane]=\"selectedFloor\"\n        (setTexture)=\"setFloorTexture($event)\"\n        (setColor)=\"setFloorColor($event)\"\n        (selectedFloorClosed)=\"selectedFloor = undefined\"\n      >\n      </rp-selected-floor>\n    </ng-template>\n\n    <ng-container *ngIf=\"userIsGrouping\">\n      <div class=\"rp-item-context-menu-wrap mrp-save-grouping\" *ngIf=\"userIsGrouping\">\n        <div class=\"rp-item-context-menu-item\" (click)=\"onGroupClick()\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">check</mat-icon></span>\n          <span class=\"label\">{{ 'GROUPING' | localize }}</span>\n        </div>\n        <div class=\"rp-item-context-menu-item\" (click)=\"cancelGroupSelection()\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">cancel</mat-icon></span>\n          <span class=\"label\">{{ 'CANCEL' | localize }}</span>\n        </div>\n      </div>\n    </ng-container>\n\n  ", isInline: true, styles: [".with-scrollable-section{overflow:hidden;height:100%}.with-scrollable-section section{overflow-y:auto}.RoomPlanner{width:inherit;height:inherit;pointer-events:none}.RoomPlanner>*{pointer-events:all}.sidebar-toggles .mat-raised-button{width:110px;text-align:left}.logo-menu{position:absolute;top:20px;left:20px;z-index:2}.logo-menu-2nd{position:absolute;top:140px;left:84px}.logo-menu-4th{position:absolute;top:180px;left:84px}.sidebar{position:absolute;left:0;top:0;height:100vh;max-width:30%;width:400px;background:#fff;padding:0 20px;box-shadow:0 0 20px #00000040}.flex-wrap{display:flex;flex-flow:column nowrap;height:100%}.solid-background>canvas{fill:#fff;background:white}.toolbar__divider{border-bottom:1px solid black;width:100%;margin:5px 0}.toolbar__divider.context-menu{border-color:gray}.on-top{z-index:3}.rp-item-context-menu-wrap{color:#fff;background:rgba(0,0,0,.6);border-radius:5px;box-sizing:border-box;padding:5px;position:relative}.rp-item-context-menu-wrap .rp-item-context-menu-item{cursor:pointer;flex-direction:row;display:flex;padding:5px;border-radius:5px}.rp-item-context-menu-wrap .rp-item-context-menu-item span,.rp-item-context-menu-wrap .rp-item-context-menu-item label{display:flex;flex-direction:column;line-height:20px;font-size:12px;font-weight:lighter;vertical-align:middle}.rp-item-context-menu-wrap .rp-item-context-menu-item .label{width:200px}.rp-item-context-menu-wrap .rp-item-context-menu-item .icon{width:20px;margin-right:10px}.rp-item-context-menu-wrap .rp-item-context-menu-item .icon svg,.rp-item-context-menu-wrap .rp-item-context-menu-item .icon co-icon,.rp-item-context-menu-wrap .rp-item-context-menu-item .icon .mat-icon{height:15px;width:15px;font-size:18px}.rp-item-context-menu-wrap .rp-item-context-menu-item:hover{background:rgba(220,220,220,.5)}.rp-item-context-menu-wrap .rp-item-context-menu-item-highlight{color:#da9803}.rp-item-context-menu-wrap .rp-item-context-menu-item-highlight svg{fill:#da9803}.rp-item-context-menu-wrap .conversion-button-selected .icon-selected{color:#009a6d}.rp-item-context-menu-wrap .rp-item-context-menu-header{border-bottom:1px solid #808080;margin-bottom:10px;padding-left:5px;padding-right:25px;max-width:200px;overflow:hidden}.rp-item-context-menu-wrap .rp-item-context-menu-header p{color:#dda73f;font-size:13px}.rp-item-context-menu-wrap .rp-item-context-menu-close{position:absolute;right:15px;top:15px;z-index:2;cursor:pointer;width:10px;height:10px}.rp-item-context-menu-wrap .rp-item-context-menu-close .close-icon .mat-icon{height:15px;width:15px;font-size:18px}.mrp-save-grouping{pointer-events:all;position:absolute;bottom:10%;left:50%}\n"], components: [{ type: FloorplannerComponent, selector: "floor-planner", outputs: ["selectedWallChange"] }, { type: ContextMenuComponent, selector: "rp-context-menu", inputs: ["openMouseEvent"] }, { type: i5__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ItemContextMenuComponent, selector: "rp-item-context-menu", inputs: ["item"], outputs: ["deletePressed"] }, { type: i4__namespace.ɵb, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: ButtonElevationComponent, selector: "button-elevation", inputs: ["item"] }, { type: ToolbarIconComponent, selector: "rp-toolbar-icon", inputs: ["matIcon", "svgIcon", "tooltip", "disabled", "showLabel"], outputs: ["onClick"] }, { type: ZoomControlsComponent, selector: "rp-zoom-controls", inputs: ["visible"], outputs: ["onZoomIn", "onZoomReset", "onZoomOut"] }, { type: SettingsComponent, selector: "rp-settings", inputs: ["minWallHeight", "placeCameraDisabled"], outputs: ["onWallsHeightUpdate"] }, { type: CategoryLibraryComponent, selector: "rp-category-library", inputs: ["categories"], outputs: ["categoryClick"] }, { type: CustomShapeCreatorComponent, selector: "rp-custom-shape-creator", inputs: ["shape"] }, { type: CustomCylinderCreatorComponent, selector: "custom-cylinder-creator", inputs: ["shape"] }, { 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: ObjectLibraryComponent, selector: "rp-object-library", inputs: ["objects"], outputs: ["setDragged", "releaseDragged", "onObjectClick"] }, { type: i6__namespace.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: SelectedObjectComponent, selector: "rp-selected-object", inputs: ["object"], outputs: ["onSelectedObjectChange"] }, { type: SelectedWallComponent, selector: "rp-selected-wall", inputs: ["wall", "texturePlane", "color", "minWallHeight", "maxWallHeight", "maxWallThickness", "maxWallLength", "minWallLength"], outputs: ["remove", "setLength", "setHeight", "setThickness", "selectCorner", "setTexture", "setColor"] }, { type: SelectedThreedObjectComponent, selector: "rp-selected-threed-object", inputs: ["object", "showCopy", "showDelete", "showLock"], outputs: ["onSelectedObjectChange"] }, { type: SelectedFloorComponent, selector: "rp-selected-floor", inputs: ["floor", "texturePlane", "color"], outputs: ["setTexture", "setColor"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { 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.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"] }], pipes: { "localize": LocalizePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RoomPlannerComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: 'rp-room-planner',
-                      template: "\n      <div class=\"RoomPlanner\">\n          <floor-planner\n                  [class.hidden]=\"!viewModeService.is2dViewActive()\"\n                  (selectedWallChange)=\"selectWall($event)\"></floor-planner>\n      </div>\n\n      <rp-context-menu\n              *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && selectedWall\"\n              [openMouseEvent]=\"contextMenuMouseEvent\">\n          <div class=\"rp-item-context-menu-wrap \">\n              <div (click)=\"showSelectedWallSidebar()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" svgIcon=\"magic-wand\"></mat-icon></span>\n                  <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n              </div>\n          </div>\n      </rp-context-menu>\n\n      <rp-context-menu\n              *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && selectedFloor\"\n              [openMouseEvent]=\"contextMenuMouseEvent\">\n          <div class=\"rp-item-context-menu-wrap\">\n              <div (click)=\"showSelectedFloorSidebar()\" class=\"rp-item-context-menu-item \">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" svgIcon=\"magic-wand\"></mat-icon></span>\n                  <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n              </div>\n          </div>\n      </rp-context-menu>\n\n      <rp-item-context-menu\n              *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && !showGroupMenu\"\n              [item]=\"selectedObject\"\n              (deletePressed)=\"handleDeleteObject()\">\n          <div class=\"rp-item-context-menu-wrap\">\n              <div class=\"rp-item-context-menu-close\" (click)=\"closeContextMenu()\">\n                  <span class=\"close-icon\"><mat-icon class=\"homedecorator-material-icons\">close</mat-icon></span>\n              </div>\n              <div *ngIf=\"this.selectedObject\" class=\"rp-item-context-menu-header\">\n                  <p>{{ this.selectedObject.name }}</p>\n              </div>\n              <div *ngIf=\"showSettingsButton\" (click)=\"showSelectedObjectSidebar()\"\n                   class=\"rp-item-context-menu-item \">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" svgIcon=\"magic-wand\"></mat-icon></span>\n                  <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n              </div>\n              <ng-container *ngIf=\"showConfigurationButton\">\n                  <div *ngFor=\"let customButton of modelsService.customButtons\" (click)=\"handleConfigurationButtonClick(customButton)\"\n                       class=\"rp-item-context-menu-item \">\n                      <span class=\"icon\"><co-icon [iconData]=\"iconService.getIcon(icon.MagicWand)\"></co-icon></span>\n                      <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n                  </div>\n              </ng-container>\n              <div *ngIf=\"showCopyButton\" (click)=\"copySelectedObject()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">file_copy</mat-icon></span>\n                  <span class=\"label\">{{ 'COPY' | localize }}</span>\n              </div>\n              <div *ngIf=\"showDeleteButton\" (click)=\"removeSelectedObject()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">delete</mat-icon></span>\n                  <span class=\"label\">{{ 'REMOVE' | localize }}</span>\n              </div>\n              <div *ngIf=\"showConfigurationButton\" (click)=\"showSelectedThreedObjectSidebar()\"\n                   class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">settings</mat-icon></span>\n                  <span class=\"label\">{{ 'SETTINGS' | localize }}</span>\n              </div>\n              <div *ngIf=\"showLockButton && selectedObject\" (click)=\"toggleLockSelectedObject()\"\n                   class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" [textContent]=\"selectedObject.locked ? 'lock' : 'lock_open'\"></mat-icon></span>\n                  <span class=\"label\">{{ (selectedObject.locked ? 'UNLOCK' : 'LOCK') | localize }}</span>\n              </div>\n              <div *ngIf=\"!showGroupEditMenuButtons\" (click)=\"startGroupSelection()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">link</mat-icon></span>\n                  <span class=\"label\">{{ 'GROUP' | localize }}</span>\n              </div>\n\n              <div *ngIf=\"showConversionButton && settingsService.settings.showConversionButtons\"\n                      (click)=\"sendConversionToTagManager()\"\n                      class=\"rp-item-context-menu-item\"\n                      [ngClass]=\"addSelectedClass ? 'conversion-button-selected' : ''\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">add_shopping_cart</mat-icon></span>\n                  <span class=\"label\">{{ 'CONVERSION' | localize }}</span>\n                  <span class=\"icon icon-selected\"><mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon></span>\n              </div>\n\n\n              <div *ngIf=\"showARButton\" (click)=\"startARSession()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">weekend</mat-icon></span>\n                  <span class=\"label\">{{ 'AR' | localize }}</span>\n              </div>\n              <button-elevation\n                      *ngIf=\"selectedObject && selectedObject.elevationAdjustable\"\n                      [item]=\"selectedObject\">\n              </button-elevation>\n              <ng-container *ngIf=\"salableObject\">\n                <div class=\"toolbar__divider context-menu\"></div>\n                <div (click)=\"addToCart(selectedObject)\" class=\"rp-item-context-menu-item add-to-cart-button\">\n                    <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" [svgIcon]=\"'cart-shopping-regular'\"></mat-icon></span>\n                    <span class=\"label\">{{ 'ADD_TO_CART' | localize }}</span>\n                </div>\n              </ng-container>\n          </div>\n      </rp-item-context-menu>\n\n      <rp-item-context-menu *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && showGroupMenu && !userIsGrouping\"\n                            [item]=\"selectedObject\"\n                            (deletePressed)=\"handleDeleteObject()\">\n          <div class=\"rp-item-context-menu-wrap\">\n              <div *ngIf=\"!showGroupEditMenuButtons\" (click)=\"onGroupClick()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">link</mat-icon></span>\n                  <span class=\"label\">{{ 'GROUP' | localize }}</span>\n              </div>\n              <div *ngIf=\"showGroupEditMenuButtons\" (click)=\"onUnGroupClick()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">link_off</mat-icon></span>\n                  <span class=\"label\">{{ 'UNGROUP' | localize }}</span>\n              </div>\n              <div *ngIf=\"showGroupEditMenuButtons\" (click)=\"removeSelectedObject()\" class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">delete</mat-icon></span>\n                  <span class=\"label\">{{ 'REMOVE' | localize }}</span>\n              </div>\n              <div *ngIf=\"showLockButton && selectedObject && showGroupEditMenuButtons\" (click)=\"toggleLockSelectedObject()\"\n                   class=\"rp-item-context-menu-item\">\n                  <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" [textContent]=\"selectedObject.locked ? 'lock' : 'lock_open'\"></mat-icon></span>\n                  <span class=\"label\">{{ (selectedObject.locked ? 'UNLOCK' : 'LOCK') | localize }}</span>\n              </div>\n          </div>\n      </rp-item-context-menu>\n\n      <ng-template #toolbarIconLibrary>\n          <rp-toolbar-icon\n                  *ngIf=\"!phoneSizeScreen\"\n                  [disabled]=\"viewModeService.is2dViewActive() || viewModeService.isWalkThroughViewActive()\"\n                  matIcon=\"home\"\n                  tooltip=\"{{iconName.Architecture | localize}}\"\n                  (onClick)=\"showLibraryCategories()\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n      </ng-template>\n\n      <ng-template #toolbarIconAccessoires>\n          <rp-toolbar-icon\n                  [disabled]=\"viewModeService.is2dViewActive() || viewModeService.isWalkThroughViewActive()\"\n                  matIcon=\"local_florist\"\n                  tooltip=\"{{iconName.Accessories | localize}}\"\n                  (onClick)=\"showAccessoireCategories()\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n      </ng-template>\n\n      <ng-template #toolbarIcon2dView>\n          <span class=\"toolbar__divider\"></span>\n          <rp-toolbar-icon\n                  *ngIf=\"!phoneSizeScreen\"\n                  svgIcon=\"cube-unfolded\"\n                  tooltip=\"{{iconName.TwodFloorplan | localize}}\"\n                  [disabled]=\"viewModeService.is2dViewActive() || !desktopSizeScreen\"\n                  (onClick)=\"updateMode(viewModes.FloorPlan2D, true)\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n      </ng-template>\n\n      <ng-template #toolbarIcon3dView>\n          <rp-toolbar-icon\n                  svgIcon=\"cube-outline\"\n                  tooltip=\"{{iconName.ThreedRoomplan | localize}}\"\n                  [disabled]=\"viewModeService.is3dViewActive()\"\n                  (onClick)=\"updateMode(viewModes.RoomPlan3D, true)\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n      </ng-template>\n\n      <rp-zoom-controls\n              [visible]=\"viewModeService.is2dViewActive()\"\n              (onZoomIn)=\"zoomIn()\"\n              (onZoomReset)=\"zoomReset()\"\n              (onZoomOut)=\"zoomOut()\"\n      ></rp-zoom-controls>\n\n      <ng-template #toolbarIconSettings>\n          <span class=\"toolbar__divider\"></span>\n          <rp-toolbar-icon\n                  matIcon=\"settings\"\n                  tooltip=\"{{iconName.Settings | localize}}\"\n                  (onClick)=\"showSettings()\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n      </ng-template>\n\n      <ng-template #toolbarIconFaq>\n          <rp-toolbar-icon\n                  *ngIf=\"showFaq()\"\n                  matIcon=\"help\"\n                  tooltip=\"{{iconName.Faq | localize}}\"\n                  (onClick)=\"openFaq(this.settingsService.settings.faqUrl)\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n      </ng-template>\n\n      <ng-template #toolbarIconFeedback>\n          <rp-toolbar-icon\n                  *ngIf=\"showFeedback()\"\n                  matIcon=\"chat_bubble\"\n                  tooltip=\"{{iconName.Feedback | localize}}\"\n                  (onClick)=\"openFeedback(this.settingsService.settings.feedbackUrl)\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n      </ng-template>\n      <ng-template #toolbarIconCart>\n          <span class=\"toolbar__divider\"></span>\n          <rp-toolbar-icon class=\"add-to-cart-button\"\n                  svgIcon=\"cart-shopping-regular\"\n                  tooltip=\"{{'ADD_TO_CART' | localize}}\"\n                  (onClick)=\"addAllToCart()\"\n                  [showLabel]=\"phoneSizeScreen\"\n          ></rp-toolbar-icon>\n          <span class=\"toolbar__divider\"></span>\n      </ng-template>\n\n      <ng-template #settingsSidebar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\">{{ 'SETTINGS' | localize }}</h2>\n          </header>\n          <rp-settings\n                  [placeCameraDisabled]=\"viewModeService.is2dViewActive() || itemService.getWalkthroughCamera()\"\n                  [minWallHeight]=\"getMinGlobalWallHeight()\"\n                  (onWallsHeightUpdate)=\"wallsHeightUpdated($event)\"\n          >\n          </rp-settings>\n      </ng-template>\n\n      <ng-template #categoriesSidebar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\">{{ 'ARCHITECTURE' | localize }}</h2>\n          </header>\n          <rp-category-library\n                  [categories]=\"categories\"\n                  (categoryClick)=\"showLibraryCategory($event)\"\n          >\n          </rp-category-library>\n      </ng-template>\n\n      <ng-template #accessoiresCategoriesSidebar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\">{{ 'ACCESSOIRES' | localize }}</h2>\n          </header>\n          <rp-category-library\n                  [categories]=\"accessoireCategories\"\n                  (categoryClick)=\"showLibraryCategory($event)\"\n          >\n          </rp-category-library>\n      </ng-template>\n\n      <ng-template #customShapeCreatorSideBar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\">{{ 'CUSTOM_SHAPE_CREATOR' | localize }}</h2>\n          </header>\n          <rp-custom-shape-creator [shape]=\"selectedObject\"></rp-custom-shape-creator>\n      </ng-template>\n\n      <ng-template #customCylinderCreatorSideBar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\">{{ 'CUSTOM_SHAPE_CREATOR' | localize }}</h2>\n          </header>\n          <custom-cylinder-creator [shape]=\"selectedObject\"></custom-cylinder-creator>\n      </ng-template>\n\n      <ng-template #librarySidebar>\n          <div fxLayout=\"column\" class=\"with-scrollable-section\">\n              <header class=\"drawer__header\">\n                  <button mat-icon-button (click)=\"showActiveCategorySidebar()\">\n                      <mat-icon class=\"homedecorator-material-icons\">arrow_back_ios</mat-icon>\n                  </button>\n                  <h2 class=\"mat-title\">{{ selectedCategory.name | localize }}</h2>\n              </header>\n              <p class=\"mat-body\" *ngIf=\"selectedCategory.description\">{{ selectedCategory.description | localize }}</p>\n              <section fxFlex=\"grow\" *ngIf=\"libraryObjects?.length > 0 || hasCustomObjects()\">\n                  <ng-container *ngIf=\"hasCustomObjects()\">\n                      <h3 class=\"mat-subheading-2\">{{ 'CUSTOM' | localize }}</h3>\n                      <rp-object-library\n                              [objects]=\"customObjects\"\n                              (setDragged)=\"setDragged($event)\"\n                              (releaseDragged)=\"releaseDragged()\"\n                              (onObjectClick)=\"onObjectLibraryClick($event)\"\n                      >\n                      </rp-object-library>\n                      <mat-divider></mat-divider>\n                  </ng-container>\n                  <ng-container *ngIf=\"libraryObjects?.length > 0\">\n                      <h3 class=\"mat-subheading-2\">{{ 'LIBRARY' | localize }}</h3>\n                      <rp-object-library\n                              [objects]=\"libraryObjects\"\n                              (setDragged)=\"setDragged($event)\"\n                              (releaseDragged)=\"releaseDragged()\"\n                              (onObjectClick)=\"onObjectLibraryClick($event)\"\n                      >\n                      </rp-object-library>\n                  </ng-container>\n              </section>\n          </div>\n      </ng-template>\n\n      <ng-template #selectedObjectSidebar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\">{{ 'OBJECT' | localize }}</h2>\n          </header>\n          <rp-selected-object\n                  [object]=\"selectedObject\"\n                  (onSelectedObjectChange)=\"updateSelectedObjectHud()\"\n          >\n          </rp-selected-object>\n      </ng-template>\n\n      <ng-template #selectedWallSidebar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\">{{ 'WALL'| localize }}</h2>\n          </header>\n          <rp-selected-wall\n                  [wall]=\"selectedWall\"\n                  [texturePlane]=\"selectedEdges[0]\"\n                  [minWallHeight]=\"getMinWallHeight(selectedWall)\"\n                  [maxWallHeight]=\"maxWallHeight\"\n                  [maxWallThickness]=\"maxWallThickness\"\n                  [maxWallLength]=\"maxWallLength\"\n                  [minWallLength]=\"minWallLength\"\n                  (remove)=\"removeWall($event)\"\n                  (setLength)=\"setWallLength($event)\"\n                  (setHeight)=\"setWallHeight($event)\"\n                  (setThickness)=\"setWallThickness($event)\"\n                  (selectCorner)=\"selectCorner($event)\"\n                  (setTexture)=\"setWallTexture($event)\"\n                  (setColor)=\"setWallColor($event)\"\n          >\n          </rp-selected-wall>\n      </ng-template>\n\n      <ng-template #selectedThreedObjectSidebar>\n          <header class=\"drawer__header\">\n              <h2 class=\"mat-title\" [textContent]=\"'SETTINGS' | localize\"></h2>\n          </header>\n          <rp-selected-threed-object\n                  [object]=\"selectedObject\"\n                  [showCopy]=\"showCopyButton\"\n                  [showDelete]=\"showDeleteButton\"\n                  [showLock]=\"showLockButton\"\n                  (onSelectedObjectChange)=\"updateSelectedObjectHud()\"\n          >\n          </rp-selected-threed-object>\n      </ng-template>\n\n      <ng-template #selectedFloorSidebar>\n          <h2 class=\"mat-title\">{{ 'FLOOR' | localize }}</h2>\n          <rp-selected-floor\n                  [floor]=\"selectedFloor\"\n                  [texturePlane]=\"selectedFloor\"\n                  (setTexture)=\"setFloorTexture($event)\"\n                  (setColor)=\"setFloorColor($event)\"\n                  (selectedFloorClosed)=\"selectedFloor = undefined\"\n          >\n          </rp-selected-floor>\n      </ng-template>\n\n\n      <div class=\"rp-item-context-menu-wrap mrp-save-grouping\" *ngIf=\"userIsGrouping\">\n          <div class=\"rp-item-context-menu-item\" (click)=\"onGroupClick()\">\n              <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">check</mat-icon></span>\n              <span class=\"label\">{{ 'GROUPING' | localize }}</span>\n          </div>\n          <div class=\"rp-item-context-menu-item\" (click)=\"cancelGroupSelection()\">\n              <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">cancel</mat-icon></span>\n              <span class=\"label\">{{ 'CANCEL' | localize }}</span>\n          </div>\n      </div>\n  ",
+                      template: "\n    <div class=\"RoomPlanner\">\n      <floor-planner\n        [class.hidden]=\"!viewModeService.is2dViewActive()\"\n        (selectedWallChange)=\"selectWall($event)\"></floor-planner>\n    </div>\n\n    <rp-context-menu\n      *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && selectedWall\"\n      [openMouseEvent]=\"contextMenuMouseEvent\">\n      <div class=\"rp-item-context-menu-wrap \">\n        <div (click)=\"showSelectedWallSidebar()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" svgIcon=\"magic-wand\"></mat-icon></span>\n          <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n        </div>\n      </div>\n    </rp-context-menu>\n\n    <rp-context-menu\n      *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && selectedFloor\"\n      [openMouseEvent]=\"contextMenuMouseEvent\">\n      <div class=\"rp-item-context-menu-wrap\">\n        <div (click)=\"showSelectedFloorSidebar()\" class=\"rp-item-context-menu-item \">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" svgIcon=\"magic-wand\"></mat-icon></span>\n          <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n        </div>\n      </div>\n    </rp-context-menu>\n\n    <rp-item-context-menu\n      *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && !showGroupMenu\"\n      [item]=\"selectedObject\"\n      (deletePressed)=\"handleDeleteObject()\">\n      <div class=\"rp-item-context-menu-wrap\">\n        <div class=\"rp-item-context-menu-close\" (click)=\"closeContextMenu()\">\n          <span class=\"close-icon\"><mat-icon class=\"homedecorator-material-icons\">close</mat-icon></span>\n        </div>\n        <div *ngIf=\"this.selectedObject\" class=\"rp-item-context-menu-header\">\n          <p>{{ this.selectedObject.name }}</p>\n        </div>\n        <div *ngIf=\"showSettingsButton\" (click)=\"showSelectedObjectSidebar()\"\n             class=\"rp-item-context-menu-item \">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" svgIcon=\"magic-wand\"></mat-icon></span>\n          <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n        </div>\n        <ng-container *ngIf=\"showConfigurationButton\">\n          <div *ngFor=\"let customButton of modelsService.customButtons\" (click)=\"handleConfigurationButtonClick(customButton)\"\n               class=\"rp-item-context-menu-item \">\n            <span class=\"icon\"><co-icon [iconData]=\"iconService.getIcon(icon.MagicWand)\"></co-icon></span>\n            <span class=\"label\">{{ 'CONFIGURE' | localize }}</span>\n          </div>\n        </ng-container>\n        <div *ngIf=\"showCopyButton\" (click)=\"copySelectedObject()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">file_copy</mat-icon></span>\n          <span class=\"label\">{{ 'COPY' | localize }}</span>\n        </div>\n        <div *ngIf=\"showDeleteButton\" (click)=\"removeSelectedObject()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">delete</mat-icon></span>\n          <span class=\"label\">{{ 'REMOVE' | localize }}</span>\n        </div>\n        <div *ngIf=\"showConfigurationButton\" (click)=\"showSelectedThreedObjectSidebar()\"\n             class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">settings</mat-icon></span>\n          <span class=\"label\">{{ 'SETTINGS' | localize }}</span>\n        </div>\n        <div *ngIf=\"showLockButton && selectedObject\" (click)=\"toggleLockSelectedObject()\"\n             class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\"\n                                       [textContent]=\"selectedObject.locked ? 'lock' : 'lock_open'\"></mat-icon></span>\n          <span class=\"label\">{{ (selectedObject.locked ? 'UNLOCK' : 'LOCK') | localize }}</span>\n        </div>\n        <div *ngIf=\"!showGroupEditMenuButtons\" (click)=\"startGroupSelection()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">link</mat-icon></span>\n          <span class=\"label\">{{ 'GROUP' | localize }}</span>\n        </div>\n\n        <div *ngIf=\"showConversionButton && settingsService.settings.showConversionButtons\"\n             (click)=\"sendConversionToTagManager()\"\n             class=\"rp-item-context-menu-item\"\n             [ngClass]=\"addSelectedClass ? 'conversion-button-selected' : ''\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">add_shopping_cart</mat-icon></span>\n          <span class=\"label\">{{ 'CONVERSION' | localize }}</span>\n          <span class=\"icon icon-selected\"><mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon></span>\n        </div>\n\n\n        <div *ngIf=\"showARButton\" (click)=\"startARSession()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">weekend</mat-icon></span>\n          <span class=\"label\">{{ 'AR' | localize }}</span>\n        </div>\n        <button-elevation\n          *ngIf=\"selectedObject && selectedObject.elevationAdjustable\"\n          [item]=\"selectedObject\">\n        </button-elevation>\n        <ng-container *ngIf=\"salableObject\">\n          <div class=\"toolbar__divider context-menu\"></div>\n          <div (click)=\"addToCart(selectedObject)\" class=\"rp-item-context-menu-item add-to-cart-button\">\n            <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\" [svgIcon]=\"'cart-shopping-regular'\"></mat-icon></span>\n            <span class=\"label\">{{ 'ADD_TO_CART' | localize }}</span>\n          </div>\n        </ng-container>\n      </div>\n    </rp-item-context-menu>\n\n    <rp-item-context-menu *ngIf=\"!viewModeService.is2dViewActive() && showContextMenu && showGroupMenu && !userIsGrouping\"\n                          [item]=\"selectedObject\"\n                          (deletePressed)=\"handleDeleteObject()\">\n      <div class=\"rp-item-context-menu-wrap\">\n        <div *ngIf=\"!showGroupEditMenuButtons\" (click)=\"onGroupClick()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">link</mat-icon></span>\n          <span class=\"label\">{{ 'GROUP' | localize }}</span>\n        </div>\n        <div *ngIf=\"showGroupEditMenuButtons\" (click)=\"onUnGroupClick()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">link_off</mat-icon></span>\n          <span class=\"label\">{{ 'UNGROUP' | localize }}</span>\n        </div>\n        <div *ngIf=\"showGroupEditMenuButtons\" (click)=\"removeSelectedObject()\" class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">delete</mat-icon></span>\n          <span class=\"label\">{{ 'REMOVE' | localize }}</span>\n        </div>\n        <div *ngIf=\"showLockButton && selectedObject && showGroupEditMenuButtons\" (click)=\"toggleLockSelectedObject()\"\n             class=\"rp-item-context-menu-item\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\"\n                                       [textContent]=\"selectedObject.locked ? 'lock' : 'lock_open'\"></mat-icon></span>\n          <span class=\"label\">{{ (selectedObject.locked ? 'UNLOCK' : 'LOCK') | localize }}</span>\n        </div>\n      </div>\n    </rp-item-context-menu>\n\n    <ng-template #toolbarIconLibrary>\n      <rp-toolbar-icon\n        *ngIf=\"!phoneSizeScreen\"\n        [disabled]=\"viewModeService.is2dViewActive() || viewModeService.isWalkThroughViewActive()\"\n        matIcon=\"home\"\n        tooltip=\"{{iconName.Architecture | localize}}\"\n        (onClick)=\"showLibraryCategories()\"\n        [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n    </ng-template>\n\n    <ng-template #toolbarIconAccessoires>\n      <rp-toolbar-icon\n        [disabled]=\"viewModeService.is2dViewActive() || viewModeService.isWalkThroughViewActive()\"\n        matIcon=\"local_florist\"\n        tooltip=\"{{iconName.Accessories | localize}}\"\n        (onClick)=\"showAccessoireCategories()\"\n        [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n    </ng-template>\n\n    <ng-template #toolbarIcon2dView>\n      <span class=\"toolbar__divider\"></span>\n      <rp-toolbar-icon\n        *ngIf=\"!phoneSizeScreen\"\n        svgIcon=\"cube-unfolded\"\n        tooltip=\"{{iconName.TwodFloorplan | localize}}\"\n        [disabled]=\"viewModeService.is2dViewActive() || !desktopSizeScreen\"\n        (onClick)=\"updateMode(viewModes.FloorPlan2D, true)\"\n        [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n    </ng-template>\n\n    <ng-template #toolbarIcon3dView>\n      <rp-toolbar-icon\n        svgIcon=\"cube-outline\"\n        tooltip=\"{{iconName.ThreedRoomplan | localize}}\"\n        [disabled]=\"viewModeService.is3dViewActive()\"\n        (onClick)=\"updateMode(viewModes.RoomPlan3D, true)\"\n        [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n    </ng-template>\n\n    <rp-zoom-controls\n      [visible]=\"viewModeService.is2dViewActive()\"\n      (onZoomIn)=\"zoomIn()\"\n      (onZoomReset)=\"zoomReset()\"\n      (onZoomOut)=\"zoomOut()\"\n    ></rp-zoom-controls>\n\n    <ng-template #toolbarIconSettings>\n      <span class=\"toolbar__divider\"></span>\n      <rp-toolbar-icon\n        matIcon=\"settings\"\n        tooltip=\"{{iconName.Settings | localize}}\"\n        (onClick)=\"showSettings()\"\n        [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n    </ng-template>\n\n    <ng-template #toolbarIconFaq>\n      <rp-toolbar-icon\n        *ngIf=\"showFaq()\"\n        matIcon=\"help\"\n        tooltip=\"{{iconName.Faq | localize}}\"\n        (onClick)=\"openFaq(this.settingsService.settings.faqUrl)\"\n        [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n    </ng-template>\n\n    <ng-template #toolbarIconFeedback>\n      <rp-toolbar-icon\n        *ngIf=\"showFeedback()\"\n        matIcon=\"chat_bubble\"\n        tooltip=\"{{iconName.Feedback | localize}}\"\n        (onClick)=\"openFeedback(this.settingsService.settings.feedbackUrl)\"\n        [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n    </ng-template>\n    <ng-template #toolbarIconCart>\n      <span class=\"toolbar__divider\"></span>\n      <rp-toolbar-icon class=\"add-to-cart-button\"\n                       svgIcon=\"cart-shopping-regular\"\n                       tooltip=\"{{'ADD_TO_CART' | localize}}\"\n                       (onClick)=\"addAllToCart()\"\n                       [showLabel]=\"phoneSizeScreen\"\n      ></rp-toolbar-icon>\n      <span class=\"toolbar__divider\"></span>\n    </ng-template>\n\n    <ng-template #settingsSidebar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\">{{ 'SETTINGS' | localize }}</h2>\n      </header>\n      <rp-settings\n        [placeCameraDisabled]=\"viewModeService.is2dViewActive() || itemService.getWalkthroughCamera()\"\n        [minWallHeight]=\"getMinGlobalWallHeight()\"\n        (onWallsHeightUpdate)=\"wallsHeightUpdated($event)\"\n      >\n      </rp-settings>\n    </ng-template>\n\n    <ng-template #categoriesSidebar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\">{{ 'ARCHITECTURE' | localize }}</h2>\n      </header>\n      <rp-category-library\n        [categories]=\"categories\"\n        (categoryClick)=\"showLibraryCategory($event)\"\n      >\n      </rp-category-library>\n    </ng-template>\n\n    <ng-template #accessoiresCategoriesSidebar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\">{{ 'ACCESSOIRES' | localize }}</h2>\n      </header>\n      <rp-category-library\n        [categories]=\"accessoireCategories\"\n        (categoryClick)=\"showLibraryCategory($event)\"\n      >\n      </rp-category-library>\n    </ng-template>\n\n    <ng-template #customShapeCreatorSideBar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\">{{ 'CUSTOM_SHAPE_CREATOR' | localize }}</h2>\n      </header>\n      <rp-custom-shape-creator [shape]=\"selectedObject\"></rp-custom-shape-creator>\n    </ng-template>\n\n    <ng-template #customCylinderCreatorSideBar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\">{{ 'CUSTOM_SHAPE_CREATOR' | localize }}</h2>\n      </header>\n      <custom-cylinder-creator [shape]=\"selectedObject\"></custom-cylinder-creator>\n    </ng-template>\n\n    <ng-template #librarySidebar>\n      <div fxLayout=\"column\" class=\"with-scrollable-section\">\n        <header class=\"drawer__header\">\n          <button mat-icon-button (click)=\"showActiveCategorySidebar()\">\n            <mat-icon class=\"homedecorator-material-icons\">arrow_back_ios</mat-icon>\n          </button>\n          <h2 class=\"mat-title\">{{ selectedCategory.name | localize }}</h2>\n        </header>\n        <p class=\"mat-body\" *ngIf=\"selectedCategory.description\">{{ selectedCategory.description | localize }}</p>\n        <section fxFlex=\"grow\" *ngIf=\"libraryObjects?.length > 0 || hasCustomObjects()\">\n          <ng-container *ngIf=\"hasCustomObjects()\">\n            <h3 class=\"mat-subheading-2\">{{ 'CUSTOM' | localize }}</h3>\n            <rp-object-library\n              [objects]=\"customObjects\"\n              (setDragged)=\"setDragged($event)\"\n              (releaseDragged)=\"releaseDragged()\"\n              (onObjectClick)=\"onObjectLibraryClick($event)\"\n            >\n            </rp-object-library>\n            <mat-divider></mat-divider>\n          </ng-container>\n          <ng-container *ngIf=\"libraryObjects?.length > 0\">\n            <h3 class=\"mat-subheading-2\">{{ 'LIBRARY' | localize }}</h3>\n            <rp-object-library\n              [objects]=\"libraryObjects\"\n              (setDragged)=\"setDragged($event)\"\n              (releaseDragged)=\"releaseDragged()\"\n              (onObjectClick)=\"onObjectLibraryClick($event)\"\n            >\n            </rp-object-library>\n          </ng-container>\n        </section>\n      </div>\n    </ng-template>\n\n    <ng-template #selectedObjectSidebar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\">{{ 'OBJECT' | localize }}</h2>\n      </header>\n      <rp-selected-object\n        [object]=\"selectedObject\"\n        (onSelectedObjectChange)=\"updateSelectedObjectHud()\"\n      >\n      </rp-selected-object>\n    </ng-template>\n\n    <ng-template #selectedWallSidebar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\">{{ 'WALL'| localize }}</h2>\n      </header>\n      <rp-selected-wall\n        [wall]=\"selectedWall\"\n        [texturePlane]=\"selectedEdges[0]\"\n        [minWallHeight]=\"getMinWallHeight(selectedWall)\"\n        [maxWallHeight]=\"maxWallHeight\"\n        [maxWallThickness]=\"maxWallThickness\"\n        [maxWallLength]=\"maxWallLength\"\n        [minWallLength]=\"minWallLength\"\n        (remove)=\"removeWall($event)\"\n        (setLength)=\"setWallLength($event)\"\n        (setHeight)=\"setWallHeight($event)\"\n        (setThickness)=\"setWallThickness($event)\"\n        (selectCorner)=\"selectCorner($event)\"\n        (setTexture)=\"setWallTexture($event)\"\n        (setColor)=\"setWallColor($event)\"\n      >\n      </rp-selected-wall>\n    </ng-template>\n\n    <ng-template #selectedThreedObjectSidebar>\n      <header class=\"drawer__header\">\n        <h2 class=\"mat-title\" [textContent]=\"'SETTINGS' | localize\"></h2>\n      </header>\n      <rp-selected-threed-object\n        [object]=\"selectedObject\"\n        [showCopy]=\"showCopyButton\"\n        [showDelete]=\"showDeleteButton\"\n        [showLock]=\"showLockButton\"\n        (onSelectedObjectChange)=\"updateSelectedObjectHud()\"\n      >\n      </rp-selected-threed-object>\n    </ng-template>\n\n    <ng-template #selectedFloorSidebar>\n      <h2 class=\"mat-title\">{{ 'FLOOR' | localize }}</h2>\n      <rp-selected-floor\n        [floor]=\"selectedFloor\"\n        [texturePlane]=\"selectedFloor\"\n        (setTexture)=\"setFloorTexture($event)\"\n        (setColor)=\"setFloorColor($event)\"\n        (selectedFloorClosed)=\"selectedFloor = undefined\"\n      >\n      </rp-selected-floor>\n    </ng-template>\n\n    <ng-container *ngIf=\"userIsGrouping\">\n      <div class=\"rp-item-context-menu-wrap mrp-save-grouping\" *ngIf=\"userIsGrouping\">\n        <div class=\"rp-item-context-menu-item\" (click)=\"onGroupClick()\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">check</mat-icon></span>\n          <span class=\"label\">{{ 'GROUPING' | localize }}</span>\n        </div>\n        <div class=\"rp-item-context-menu-item\" (click)=\"cancelGroupSelection()\">\n          <span class=\"icon\"><mat-icon class=\"homedecorator-material-icons\">cancel</mat-icon></span>\n          <span class=\"label\">{{ 'CANCEL' | localize }}</span>\n        </div>\n      </div>\n    </ng-container>\n\n  ",
                       styleUrls: ['./room-planner.component.scss'] /*,
                       changeDetection: ChangeDetectionStrategy.OnPush*/
                   }]
@@ -40335,7 +40494,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 +40511,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 +43999,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 +44045,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 +44096,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 +44145,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 +44193,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 +44212,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 +44235,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 +44288,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 +44595,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 +44608,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 +44618,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 +44658,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 +44792,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 +44803,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 +44830,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;
@@ -44670,6 +44849,9 @@
       ModelPreviewComponent.prototype.setHeightAdjustable = function (event) {
           this.heightAdjustable = event.value;
       };
+      ModelPreviewComponent.prototype.closePreview = function () {
+          this._dialog.closeAll();
+      };
       ModelPreviewComponent.prototype._animate = function () {
           var _this = this;
           setTimeout(function () {
@@ -44723,6 +44905,8 @@
                                       });
                                   });
                               }
+                          }).catch(function (error) {
+                              _this._messageService.emit(MessageType.RenderError, { title: 'Upload error', message: error });
                           });
                           return [2 /*return*/];
                       });
@@ -44798,6 +44982,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 +45114,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-close-preview\" (click)=\"closePreview()\">\n      <mat-icon class=\"homedecorator-material-icons\">cancel</mat-icon>\n    </div>\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\n            <button (click)=\"closePreview()\" class=\"base-button exportButtonDark\">\n<!--              <mat-icon class=\"homedecorator-material-icons\">cancel</mat-icon>-->\n              <span>Cancel</span>\n            </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}.model-close-preview{text-align:right;cursor:pointer}: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: 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: 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.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-close-preview\" (click)=\"closePreview()\">\n      <mat-icon class=\"homedecorator-material-icons\">cancel</mat-icon>\n    </div>\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\n            <button (click)=\"closePreview()\" class=\"base-button exportButtonDark\">\n<!--              <mat-icon class=\"homedecorator-material-icons\">cancel</mat-icon>-->\n              <span>Cancel</span>\n            </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 +45212,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 +45443,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 +45507,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 +45524,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 +45618,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 +46050,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 +46059,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 +46200,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 +46210,7 @@
           this._domSanitizer = _domSanitizer;
           this._messageService = _messageService;
           this._homedecoratorService = _homedecoratorService;
+          this._eventService = _eventService;
           this.showClass = true;
           this.loaded = false;
           this.title = 'MyRoomPlans';
@@ -46114,26 +46307,32 @@
           return __awaiter(this, void 0, void 0, function () {
               var _this = this;
               return __generator(this, function (_a) {
-                  this.registerCustomIcons();
-                  this._subs.push(this.screenAnalysis.screenSizeChanged.subscribe(function (info) {
-                      _this.phoneSizeScreen = info.isPhoneSize;
-                      _this.isPortraitMode = info.isPortraitMode;
-                      _this.shouldShowLandscapeMessage = _this.screenAnalysis.isMobileDevice && _this.isPortraitMode;
-                  }), this._messageService.subscribe(MessageType.ShowIOneLoadingIndicator, function () {
-                      _this.showIOneLoader = true;
-                  }), this._messageService.subscribe(MessageType.HideIOneLoadingIndicator, function () {
-                      _this.showIOneLoader = false;
-                  }), this._messageService.subscribe(MessageType.StartWithEmptyRoom, function () {
-                      _this._startWithEmptyRoom(true);
-                  }), this._messageService.subscribe(MessageType.StartWithPreset, function (_a) {
-                      var preset = _a.preset, switchTo2D = _a.switchTo2D;
-                      _this._startWithPreset(preset, switchTo2D);
-                  }), this._homedecoratorService.loaded.subscribe(function (loaded) {
-                      if (loaded) {
-                          _this.loaded = true;
-                      }
-                  }));
-                  return [2 /*return*/];
+                  switch (_a.label) {
+                      case 0:
+                          this.registerCustomIcons();
+                          this._subs.push(this.screenAnalysis.screenSizeChanged.subscribe(function (info) {
+                              _this.phoneSizeScreen = info.isPhoneSize;
+                              _this.isPortraitMode = info.isPortraitMode;
+                              _this.shouldShowLandscapeMessage = _this.screenAnalysis.isMobileDevice && _this.isPortraitMode;
+                          }), this._messageService.subscribe(MessageType.ShowIOneLoadingIndicator, function () {
+                              _this.showIOneLoader = true;
+                          }), this._messageService.subscribe(MessageType.HideIOneLoadingIndicator, function () {
+                              _this.showIOneLoader = false;
+                          }), this._messageService.subscribe(MessageType.StartWithEmptyRoom, function () {
+                              _this._startWithEmptyRoom(true);
+                          }), this._messageService.subscribe(MessageType.StartWithPreset, function (_a) {
+                              var preset = _a.preset, switchTo2D = _a.switchTo2D;
+                              _this._startWithPreset(preset, switchTo2D);
+                          }), this._homedecoratorService.loaded.subscribe(function (loaded) {
+                              if (loaded) {
+                                  _this.loaded = true;
+                              }
+                          }));
+                          return [4 /*yield*/, this._startWithEmptyRoom(true)];
+                      case 1:
+                          _a.sent();
+                          return [2 /*return*/];
+                  }
               });
           });
       };
@@ -46159,7 +46358,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 +46392,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 +46409,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 +46418,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,
@@ -46660,7 +46863,7 @@
           i9.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: [
@@ -46676,7 +46879,7 @@
               i9.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: [{
@@ -46693,7 +46896,7 @@
                           i9.MatSelectModule,
                           i10$1.MatSlideToggleModule,
                           i3$2.MatGridListModule,
-                          i15.MatProgressSpinnerModule,
+                          i16.MatProgressSpinnerModule,
                           i8.FormsModule
                       ],
                       declarations: [
@@ -47108,7 +47311,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 +47594,7 @@
           i5.CommonModule,
           ContextMenuModule,
           i3$1.MatButtonModule,
-          i7$2.MatButtonToggleModule,
+          i8$1.MatButtonToggleModule,
           i23.MatCardModule,
           i1$2.MatCheckboxModule,
           i7.MatFormFieldModule,
@@ -47430,7 +47633,7 @@
               i5.CommonModule,
               ContextMenuModule,
               i3$1.MatButtonModule,
-              i7$2.MatButtonToggleModule,
+              i8$1.MatButtonToggleModule,
               i23.MatCardModule,
               i1$2.MatCheckboxModule,
               i7.MatFormFieldModule,
@@ -47467,7 +47670,7 @@
                           i5.CommonModule,
                           ContextMenuModule,
                           i3$1.MatButtonModule,
-                          i7$2.MatButtonToggleModule,
+                          i8$1.MatButtonToggleModule,
                           i23.MatCardModule,
                           i1$2.MatCheckboxModule,
                           i7.MatFormFieldModule,
@@ -47546,7 +47749,7 @@
           i5.CommonModule,
           ContextMenuModule,
           i3$1.MatButtonModule,
-          i7$2.MatButtonToggleModule,
+          i8$1.MatButtonToggleModule,
           i26.MatSidenavModule,
           i23.MatCardModule,
           i7$1.MatSliderModule,
@@ -47567,7 +47770,7 @@
               i5.CommonModule,
               ContextMenuModule,
               i3$1.MatButtonModule,
-              i7$2.MatButtonToggleModule,
+              i8$1.MatButtonToggleModule,
               i26.MatSidenavModule,
               i23.MatCardModule,
               i7$1.MatSliderModule,
@@ -47587,7 +47790,7 @@
                           i5.CommonModule,
                           ContextMenuModule,
                           i3$1.MatButtonModule,
-                          i7$2.MatButtonToggleModule,
+                          i8$1.MatButtonToggleModule,
                           i26.MatSidenavModule,
                           i23.MatCardModule,
                           i7$1.MatSliderModule,
@@ -47786,7 +47989,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 +48015,7 @@
               i5.CommonModule,
               i8.FormsModule,
               i3$1.MatButtonModule,
-              i7$2.MatButtonToggleModule,
+              i8$1.MatButtonToggleModule,
               i26.MatSidenavModule,
               i23.MatCardModule,
               i7$1.MatSliderModule,
@@ -47841,7 +48044,7 @@
                           i5.CommonModule,
                           i8.FormsModule,
                           i3$1.MatButtonModule,
-                          i7$2.MatButtonToggleModule,
+                          i8$1.MatButtonToggleModule,
                           i26.MatSidenavModule,
                           i23.MatCardModule,
                           i7$1.MatSliderModule,
@@ -48208,7 +48411,7 @@
           i26.MatSidenavModule,
           i2$2.MatListModule,
           i1$1.MatDialogModule,
-          i7$2.MatButtonToggleModule,
+          i8$1.MatButtonToggleModule,
           i2$4.MatSnackBarModule,
           i19.MatInputModule,
           i7.MatFormFieldModule,
@@ -48238,7 +48441,7 @@
               i26.MatSidenavModule,
               i2$2.MatListModule,
               i1$1.MatDialogModule,
-              i7$2.MatButtonToggleModule,
+              i8$1.MatButtonToggleModule,
               i2$4.MatSnackBarModule,
               i19.MatInputModule,
               i7.MatFormFieldModule,
@@ -48272,7 +48475,7 @@
                           i26.MatSidenavModule,
                           i2$2.MatListModule,
                           i1$1.MatDialogModule,
-                          i7$2.MatButtonToggleModule,
+                          i8$1.MatButtonToggleModule,
                           i2$4.MatSnackBarModule,
                           i19.MatInputModule,
                           i7.MatFormFieldModule,
@@ -48329,11 +48532,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 +48544,7 @@
                       imports: [
                           i5.CommonModule,
                           CoreModule,
-                          i7$3.CatalogSearchModule
+                          i7$2.CatalogSearchModule
                       ],
                       declarations: [
                           ProductOwnCollectionComponent
@@ -48365,9 +48568,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,
+          i9.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 +48583,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,
+              i9.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 +48602,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,
+                          i9.MatSelectModule,
+                          i4.IconModule,
                       ],
                       exports: [
                           ModelUploaderComponent
@@ -48415,9 +48633,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 +48644,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 +48659,9 @@
                           i3$1.MatButtonModule,
                           i4.ButtonModule,
                           i4$1.ImageModule,
-                          i7$3.CatalogExternalSourcesModule,
+                          i7$2.CatalogExternalSourcesModule,
                           ProductOwnCollectionModule,
-                          i7$3.CatalogExternalSourceModule,
+                          i7$2.CatalogExternalSourceModule,
                           ModelUploaderModule
                       ],
                       exports: [
@@ -48611,7 +48829,8 @@
           ExportDialogModule,
           InfoDialogModule,
           PluginsModule,
-          DialogModule], exports: [HomedecoratorComponent] });
+          DialogModule,
+          i1$5.LightboxModule], exports: [HomedecoratorComponent] });
   HomedecoratorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HomedecoratorModule, imports: [[
               i5.CommonModule,
               ProgressBarModule,
@@ -48620,7 +48839,8 @@
               ExportDialogModule,
               InfoDialogModule,
               PluginsModule,
-              DialogModule
+              DialogModule,
+              i1$5.LightboxModule
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HomedecoratorModule, decorators: [{
               type: i0.NgModule,
@@ -48633,7 +48853,8 @@
                           ExportDialogModule,
                           InfoDialogModule,
                           PluginsModule,
-                          DialogModule
+                          DialogModule,
+                          i1$5.LightboxModule
                       ],
                       declarations: [
                           HomedecoratorComponent