@colijnit/homedecorator 262.1.2 → 262.1.3

package/fesm2022/colijnit-homedecorator.mjs

@@ -82,7 +82,7 @@ import { DecoNodeType } from '@colijnit/configuratorapi/build/enum/deco-node-typ
 import JSZip from 'jszip';
 import { Answer } from '@colijnit/configuratorapi/build/model/answer';
 import { SelectorStructure } from '@colijnit/configuratorapi/build/model/selector-structure.bo';
-import { Evaluator, Brush, HOLLOW_SUBTRACTION } from 'three-bvh-csg';
+import { Evaluator, Brush, SUBTRACTION } from 'three-bvh-csg';
 import { Line2 } from 'three/examples/jsm/lines/Line2.js';
 import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';
 import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
@@ -253,8 +253,10 @@ var MessageType;
     MessageType["ChangeArticleConfigurationType"] = "ChangeArticleConfigurationType";
     MessageType["RenderUploadProgress"] = "RenderUploadProgress";
     MessageType["RenderUploadFinished"] = "RenderUploadFinished";
+    MessageType["RenderFinished"] = "RenderFinished";
     MessageType["RemoveSlowConnectionToast"] = "RemoveSlowConnectionToast";
     MessageType["OpenConfigurator"] = "OpenConfigurator";
+    MessageType["LoadConfigurationFromPreset"] = "LoadConfigurationFromPreset";
 })(MessageType || (MessageType = {}));
 
 class Preset {
@@ -3663,6 +3665,7 @@ class HomedecoratorAppEventService {
         this.externalOpen = new Subject();
         this.searchClick = new Subject();
         this.shareProject = new Subject();
+        this.configurationFromPresetLoaded = new BehaviorSubject(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorAppEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorAppEventService, providedIn: 'root' }); }
@@ -4372,6 +4375,9 @@ class HomedecoratorConnectorAdapterService {
             return result.resultObject;
         }
     }
+    async initForPreset(presetId, goodId, showLoader = true) {
+        return await this._connector.initForPreset(presetId, goodId, showLoader);
+    }
     // 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});
@@ -7209,6 +7215,18 @@ class HomedecoratorConnectorService {
     async getGoogleTranslation(sourceLang, targetLang, list) {
         return await this._connector.getGoogleTranslation(sourceLang, targetLang, list);
     }
+    getExternalSourceFromId(externalSourceId) {
+        return this._connector.getExternalSourceFromId(externalSourceId);
+    }
+    async getGoodIdFromArticleNr(sku) {
+        return await this._connector.getGoodIdFromArticleNr(sku);
+    }
+    async initForPreset(presetId, goodId) {
+        return await this._connector.initForPreset(presetId, goodId);
+    }
+    async getPublicParams(url, upId) {
+        return await this._connector.getPublicParams(url, upId);
+    }
     _prepareSelectionsToDisplayImages() {
         if (this.selectionsToDisplay && this.selectionsToDisplay.length > 0) {
             for (let i = 0; i < this.selectionsToDisplay.length; i++) {
@@ -9841,8 +9859,8 @@ class OutputSettings {
 }
 class SceneSettings {
 }
-let RenderSettings$1 = class RenderSettings {
-};
+class RenderSettings {
+}
 class Camera {
 }
 class CameraDOF {
@@ -10047,7 +10065,7 @@ class ApiServiceModule {
         };
     }
     _setRenderSettings(renderParameters) {
-        const settings = new RenderSettings$1();
+        const settings = new RenderSettings();
         settings.width = renderParameters.width;
         settings.height = renderParameters.height;
         settings.outputType = OutputType.Jpeg;
@@ -10057,7 +10075,7 @@ class ApiServiceModule {
         return settings;
     }
     _setProductRenderSettings(renderParameters) {
-        const settings = new RenderSettings$1();
+        const settings = new RenderSettings();
         settings.width = renderParameters.width;
         settings.height = renderParameters.height;
         settings.outputType = OutputType.Jpeg;
@@ -14822,7 +14840,7 @@ class BaseWall extends Mesh {
         this.remove(item);
         this.onItems = this.onItems.filter(i => i !== item);
         this.itemsChanged = true;
-        this._reCreateWallGeometry();
+        // this._reCreateWallGeometry();
     }
     resetRoom() {
         this.oppositeCache.clear();
@@ -15106,12 +15124,26 @@ class BaseWall extends Mesh {
         this.items
             .filter((item) => item.getMaskedGeometry())
             .forEach((item) => {
-            const geo = item.getMaskedGeometry();
+            // Subtract the opening as a single material group. A multi-group mask (a BoxGeometry has 6
+            // groups) makes SUBTRACTION emit triangles for only the groups that actually cut the wall,
+            // leaving empty groups that crash the evaluator (assignBufferData reads an absent group).
+            // Clone first so the item's own geometry is never mutated or disposed by the wall.
+            const geo = item.getMaskedGeometry().clone();
+            geo.clearGroups();
             const holesBrush = new Brush(geo);
+            holesBrush.material = this.material[this.frontMaterialIndex];
             holesBrush.position.copy(item.position);
             holesBrush.quaternion.copy(item.quaternion);
             holesBrush.updateMatrixWorld();
-            this.brush = this._evaluator.evaluate(this.brush, holesBrush, HOLLOW_SUBTRACTION);
+            try {
+                this.brush = this._evaluator.evaluate(this.brush, holesBrush, SUBTRACTION);
+            }
+            catch (e) {
+                // The mask produced no geometry - it doesn't intersect the wall (e.g. a transient placement
+                // position before the item is positioned on the wall). SUBTRACTION then leaves an empty
+                // material group that the evaluator chokes on. Skip this hole; the cut runs again once the
+                // item is positioned correctly (see InWallItem.placeOnWall). this.brush is left untouched.
+            }
             this._tempHoles.push(holesBrush);
         });
         const newGeometry = this.brush.geometry;
@@ -15149,6 +15181,22 @@ class Wall extends BaseWall {
         this.userData = new Object();
         const cloned = new this.constructor(new Corner(this.start.x, this.start.y), new Corner(this.end.x, this.end.y), this.height, this.thickness, this.frontColor, this.backColor, this.version, this.frontTexture, this.backTexture, false);
         Object3D.prototype.copy.call(cloned, this, recursive);
+        // Object3D.copy does not carry over geometry, so the constructor's plain box (built with an
+        // empty items list, i.e. without window/door openings) would survive. A recursive clone -
+        // such as the scene clone used for GLB export - must preserve the CSG-cut geometry. Use an
+        // owned copy so disposing the export scene cannot free the live wall's geometry. The
+        // non-recursive clone (the intersection wall) intentionally keeps its solid box for raycasting.
+        if (recursive && this.geometry) {
+            const cutGeometry = this.geometry.clone();
+            cloned.geometry = cutGeometry;
+            // The constructor built colour-only materials (createTextures = false), so the live wall's
+            // textures would be missing from the export. Copy the live materials, cloned together with
+            // their textures, so the export scene owns its own copies - disposing that scene must not
+            // free the textures still in use by the live wall.
+            ObjectUtils.DisposeMaterial(cloned.material);
+            const clonedMaterial = ObjectUtils.CloneMaterial(this.material, false);
+            cloned.material = clonedMaterial;
+        }
         cloned.userData = tempUserData;
         this.userData = tempUserData;
         return cloned;
@@ -16990,6 +17038,9 @@ class WallItem extends Item {
         else {
             DistanceUtils.UpdateSideDistances(this.distancesObject, this, this.currentWall, this.worldPosVec.clone(), this.getHalfSize(), this.worldRotation.y);
         }
+        // The arrows are built in the item's x/y plane at z ~= 0 (the item origin). For an in-wall item that
+        // origin is the wall centre, so push the whole group forward to the wall face like the labels.
+        this.distancesObject.position.z = this._measurementZOffset();
         this.add(this.distancesObject);
         return null;
     }
@@ -17031,12 +17082,20 @@ class WallItem extends Item {
         }
         return new Vector3();
     }
+    /**
+     * Local z at which measurement labels/distance arrows are drawn so they sit just in front of the wall.
+     * Surface-mounted items sit on the wall face, so a small offset suffices. In-wall items override this
+     * (they are centred inside the wall, so the offset must clear half the wall thickness).
+     */
+    _measurementZOffset() {
+        return 0.01;
+    }
     _createHeightMeasurement() {
         this.heightMesh = MeasurementUtils.makeHeightTextMesh(this.getHeight(), itemMeasurementsTextColor, itemMeasurementsTextSize, false, true);
         this.heightMesh.geometry.computeBoundingBox();
         const width = this.heightMesh.geometry.boundingBox.max.x - this.heightMesh.geometry.boundingBox.min.x;
         this.heightMesh.name = this.heightMeshName;
-        this.heightMesh.position.set(-this.halfSize.x - width, this.showDistances ? this._measurementYPositionOffset : 0, 0.01);
+        this.heightMesh.position.set(-this.halfSize.x - width, this.showDistances ? this._measurementYPositionOffset : 0, this._measurementZOffset());
         this.add(this.heightMesh);
     }
     _createWidthMeasurement() {
@@ -17044,7 +17103,7 @@ class WallItem extends Item {
         this.widthMesh.geometry.computeBoundingBox();
         const width = this.widthMesh.geometry.boundingBox.max.x - this.widthMesh.geometry.boundingBox.min.x;
         this.widthMesh.name = this.widthMeshName;
-        this.widthMesh.position.set(0 - (width / 2), this.halfSize.y, 0.01);
+        this.widthMesh.position.set(0 - (width / 2), this.halfSize.y, this._measurementZOffset());
         this.add(this.widthMesh);
     }
     _getMaskedGeometry() {
@@ -17233,6 +17292,8 @@ class InWallItem extends WallItem {
         this._openCloseIndicatorColor = '#606E8C';
         this._frameWidth = 0.07;
         this._frameDepth = 0.1;
+        /** Extra depth added on top of the wall thickness so the dynamically built mask always pierces the wall. */
+        this._maskDepthMargin = 0.1;
         this._isWindow = false;
         this._doorpost = false;
         this._setDefault();
@@ -17256,6 +17317,25 @@ class InWallItem extends WallItem {
         ObjectUtils.DisposeMaterial(this.frameMaterial);
         ObjectUtils.DisposeMaterial(this.doorMaterialFront);
         ObjectUtils.DisposeMaterial(this.windowMaterial);
+        if (this._customMaskGeometry) {
+            this._customMaskGeometry.dispose();
+            this._customMaskGeometry = undefined;
+        }
+    }
+    /**
+     * Custom doors/windows are built at runtime and have no GLB `_mask` mesh, so the base lookup finds
+     * nothing usable. Return the dynamically generated opening mask instead. Build it lazily here so any
+     * instance (incl. clones that never ran createCustomMesh) yields a mask as soon as the wall asks for
+     * one - otherwise the wall is left solid for that item.
+     */
+    getMaskedGeometry() {
+        if (this.isCustom) {
+            if (!this._customMaskGeometry && this.getWidth() > 0 && this.getHeight() > 0) {
+                this._updateCustomMaskGeometry(this.getWidth(), this.getHeight());
+            }
+            return this._customMaskGeometry ? this._customMaskGeometry : null;
+        }
+        return super.getMaskedGeometry();
     }
     updateOpeningObject() {
         if (this.openCloseIndicatorObject) {
@@ -17307,6 +17387,10 @@ class InWallItem extends WallItem {
             this.createCustomMesh(this.getWidth(), this.getHeight());
         }
         super.placeOnWall(wall);
+        // super.placeOnWall positions the item on the wall (_boundMove) only AFTER the initial addItem cut,
+        // and _boundMove itself does not redraw. Re-cut now so the opening is subtracted at the item's final
+        // position (the addItem cut ran at a transient position where the mask may not intersect the wall).
+        this.redrawWall();
     }
     /** */
     getWallOffset() {
@@ -17386,16 +17470,22 @@ class InWallItem extends WallItem {
             return meshes;
         }
         else {
-            const visibleMeshes = [];
-            if (!this.visible) {
-                return [];
-            }
-            this.traverse(c => {
-                if (c.visible && !this.excludedMeshes.includes(c.name) && c instanceof Mesh) {
-                    visibleMeshes.push(c);
-                }
-            });
-            return visibleMeshes;
+            return super.getVisibleMeshes();
+            // const visibleMeshes: (Mesh)[] = [];
+            // if (!this.visible) {
+            //   return [];
+            // }
+            // this.traverse(c => {
+            //   if (c.visible &&
+            //     !this.excludedMeshes.includes(c.name) &&
+            //     !ObjectUtils.ChildOf(c, this.heightMeshName)  &&
+            //     !ObjectUtils.ChildOf(c, this.widthMeshName)  &&
+            //     !ObjectUtils.ChildOf(c, this.distancesObjectName)  &&
+            //     c instanceof Mesh) {
+            //     visibleMeshes.push(c);
+            //   }
+            // });
+            // return visibleMeshes;
         }
     }
     async createTextureMaterial(options) {
@@ -17438,6 +17528,8 @@ class InWallItem extends WallItem {
     createCustomMesh(width, height) {
         const halfWidth = width / 2;
         const halfFrame = (this._frameWidth / 2);
+        // Rebuild the opening mask on every (re)build so it tracks the current size of the custom item.
+        this._updateCustomMaskGeometry(width, height);
         this.leftFrame = this._createFrameSide(this._frameWidth, this._getHeightFrame(height), this._frameDepth);
         this.leftFrame.rotation.set(this._isWindow ? 180 * (Math.PI / 180) : 0, 0, 0);
         this.leftFrame.position.x = -halfWidth + halfFrame;
@@ -17471,7 +17563,9 @@ class InWallItem extends WallItem {
         }
         this.customMesh = new THREE.Mesh(customGeo, this._isWindow ? this.windowMaterial : this.doorMaterialFront);
         this.customMesh.castShadow = this._isWindow ? false : !this.isGlass;
-        this.customMesh.renderOrder = -1;
+        // Windows are transparent glass: let them render in the normal (post-opaque) transparent pass so
+        // you see through the opening. renderOrder -1 (before opaque) is kept for the opaque door panel.
+        this.customMesh.renderOrder = this._isWindow ? 0 : -1;
         this.customMesh.name = 'customMesh';
         if (this._isWindow) {
             this.customMesh.name += 'Window';
@@ -17591,17 +17685,22 @@ class InWallItem extends WallItem {
         this.frameMaterial = new THREE.MeshPhongMaterial({ side: side, name: 'frameMaterial' });
         this.frameMaterial.color = new THREE.Color(this.frameColor);
         if (this._isWindow) {
-            this.windowMaterial = new THREE.MeshPhongMaterial({ side: side, color: this.windowColor, name: 'windowMaterial' });
+            // Name must contain 'glass' so MaterialUtils.ShowHideMaterials keeps it transparent when the wall
+            // is shown - otherwise it forces transparent=false/opacity=1 and the pane looks solid.
+            this.windowMaterial = new THREE.MeshPhongMaterial({ side: side, color: this.windowColor, name: 'windowGlassMaterial' });
             this.windowMaterial.transparent = true;
             this.windowMaterial.alphaTest = 0;
             this.windowMaterial.opacity = 0.2;
             this.windowMaterial.map = undefined;
+            // Glass must not write depth, otherwise it occludes the view through the wall opening and the
+            // pane looks solid instead of see-through.
+            this.windowMaterial.depthWrite = false;
             this.windowMaterial.needsUpdate = true;
-            this.windowMaterial.side = THREE.FrontSide;
+            // this.windowMaterial.side = THREE.FrontSide;
             this.object.material = [this.frameMaterial, this.windowMaterial];
         }
         else {
-            this.doorMaterialFront = new THREE.MeshPhongMaterial({ side: side, name: 'doorMaterialFront' });
+            this.doorMaterialFront = new THREE.MeshPhongMaterial({ side: side, name: 'doorGlassMaterialFront' });
             this.doorMaterialFront.color = new THREE.Color(this.doorColor);
             if (this._doorpost) {
                 this.doorMaterialFront.transparent = true;
@@ -17610,6 +17709,22 @@ class InWallItem extends WallItem {
             this.object.material = [this.frameMaterial, this.doorMaterialFront];
         }
     }
+    /**
+     * Builds the geometry used to subtract the opening from the wall. It spans the full width/height of
+     * the custom item and is made deeper than the wall (plus a margin) so the CSG subtraction always
+     * pierces the wall completely. base-wall positions it via the item's own position/quaternion, so the
+     * box is centred on the item origin (the opening centre on the wall plane).
+     */
+    _updateCustomMaskGeometry(width, height) {
+        const wallThickness = this.currentWall ? this.currentWall.thickness : 0.5;
+        const maskDepth = wallThickness + (2 * this._maskDepthMargin);
+        if (this._customMaskGeometry) {
+            this._customMaskGeometry.dispose();
+        }
+        // The wall (base-wall) subtracts this as a single group, so the BoxGeometry's material groups are
+        // irrelevant here - we only need a box of the right opening size and a depth that pierces the wall.
+        this._customMaskGeometry = new BoxGeometry(width, height, maskDepth);
+    }
     _getHeightFrame(height) {
         return height - (this._isWindow ? 2 * (this._frameWidth - 0.02) : this._frameWidth - 0.02);
     }
@@ -17740,6 +17855,13 @@ class InWallItem extends WallItem {
             this._createDepthMeasurement();
         }
     }
+    /**
+     * In-wall items sit centred inside the wall (getWallOffset() === 0), so the labels/arrows must clear
+     * half the wall thickness to end up in front of the wall face instead of buried inside it.
+     */
+    _measurementZOffset() {
+        return (this.currentWall ? this.currentWall.thickness / 2 : 0) + 0.02;
+    }
     _createDepthMeasurement() {
         const depth = this.opening && this.opening.double ? Math.round((this.getWidth() / 2) * 100) / 100 : this.getWidth();
         this.depthMesh = MeasurementUtils.makeDepthTextMesh(depth, 0xFF00FF, 0.08, false, true);
@@ -22951,7 +23073,7 @@ class SceneEventService {
             this._messageBusService.emit(MessageType.SaveState, { action: `3D ${action}` });
         }), this._debouncedSaveState.pipe(debounceTime(200)).subscribe(() => {
             this._hudService.updateLabelMeasurements();
-        }), this._viewModeService.viewModeChanged.subscribe(mode => this.setExploreMode(mode === ViewMode.WalkThrough)), this._itemGroupService.objectAdded.subscribe((object) => this.setSelectedObject(object)), this._itemGroupService.grouped.subscribe((object) => this.setSelectedObject(object)), this._itemGroupService.ungrouped.subscribe(() => this.setSelectedObject(null)), this._messageBusService.subscribe(MessageType.ItemRemoved, () => this.setSelectedObject(null)), this._messageBusService.subscribe(MessageType.StartGroupObject, () => this._setGroupingMode(true)));
+        }), this._viewModeService.viewModeChanged.subscribe(mode => this.setExploreMode(mode === ViewMode.WalkThrough)), this._itemGroupService.objectAdded.subscribe((object) => this.setSelectedObject(object)), this._itemGroupService.grouped.subscribe((object) => this.setSelectedObject(object)), this._itemGroupService.ungrouped.subscribe(() => this.setSelectedObject(null)), this._messageBusService.subscribe(MessageType.ItemRemoved, () => this.setSelectedObject(null)), this._messageBusService.subscribe(MessageType.StartGroupObject, () => this._setGroupingMode(true)), this._messageBusService.subscribe(MessageType.CancelGroupObject, () => this._setGroupingMode(false)));
     }
     setExploreMode(on = true) {
         if (on) {
@@ -22998,7 +23120,25 @@ class SceneEventService {
         }
         this._switchState(SceneEventState.DND);
         this._dragAndDropService.draggedStatus.dragEnter();
-        const vec3 = z ? new Vector3(x, y, z) : this.intersectingVec3(new Vector2(x, y));
+        let screenPoint = new Vector2(x, y);
+        const useViewportCentre = !z && x === 0 && y === 0 && !!this._element;
+        if (useViewportCentre) {
+            // The object library adds items with a (0,0) sentinel (there is no real cursor). Screen (0,0) is
+            // the top-left corner, so the floor raycast lands at an arbitrary, camera-dependent spot. Use the
+            // viewport centre instead.
+            screenPoint = new Vector2(this._element.clientWidth / 2, this._element.clientHeight / 2);
+        }
+        const vec3 = z ? new Vector3(x, y, z) : this.intersectingVec3(screenPoint);
+        if (useViewportCentre && isWallType(draggedData.type)) {
+            // No cursor was used (library add), so there is no hit wall and getClosestWall() on a floor point
+            // picks an arbitrary wall. Target the wall whose front the camera is looking at instead, and seed
+            // it so the existing _changeWall() flow attaches the item to that wall. getClosestWall() itself is
+            // left untouched (project loading via presets.service relies on it).
+            const facingWall = this._wallMostFacingCamera();
+            if (facingWall) {
+                this._dragAndDropService.intersectedWall = { object: facingWall, point: vec3 ? vec3.clone() : new Vector3() };
+            }
+        }
         if (this._dragAndDropService.draggedItem) {
             this._dragAndDropService.draggedStatus.objectLoaded();
             this._dragAndDropService.updateDraggedPosition(vec3);
@@ -23010,6 +23150,35 @@ class SceneEventService {
             this._dragAndDropService.dragFloorDecoration(this._floorIntersection(this._sceneService.positionInSceneToScreen(vec3)));
         }
     }
+    /**
+     * The wall whose front face the camera is looking at most directly. Used to pick a sensible target
+     * wall when an item is added without a cursor (object library). A wall's front normal is its +Z axis
+     * in world space; the wall most facing the camera maximises frontNormal · (cameraPos - wallPos), which
+     * naturally excludes the transparent near wall (its front points away from the camera).
+     */
+    _wallMostFacingCamera() {
+        const walls = this._wallService.walls;
+        if (!walls || !walls.length) {
+            return null;
+        }
+        const cameraPosition = this._cameraService.camera.position;
+        const wallPosition = new Vector3();
+        const frontNormal = new Vector3();
+        const toCamera = new Vector3();
+        let best = null;
+        let bestDot = -Infinity;
+        for (const wall of walls) {
+            wall.getWorldPosition(wallPosition);
+            wall.getWorldDirection(frontNormal).normalize();
+            toCamera.subVectors(cameraPosition, wallPosition).normalize();
+            const dot = frontNormal.dot(toCamera);
+            if (dot > bestDot) {
+                bestDot = dot;
+                best = wall;
+            }
+        }
+        return best;
+    }
     intersectingVec3(vec2, intersection) {
         if (!intersection) {
             const gIntersections = this._groundIntersections(vec2);
@@ -23443,7 +23612,9 @@ class SceneEventService {
     }
     _setGroupingMode(enableGrouping) {
         this._groupingMode = enableGrouping;
-        this._addToItemGroup(this._intersectedObject, this._prevSelectedObject);
+        if (this._groupingMode) {
+            this._addToItemGroup(this._intersectedObject, this._prevSelectedObject);
+        }
     }
     _getDraggedData() {
         return this._dragAndDropService.draggedData;
@@ -28236,64 +28407,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: ThreedInPhotoBuildService }, { type: ThreedInPhotoViewService }, { type: ThreedInPhotoConnectionService }, { type: ThreedInPhotoSceneService }, { type: ThreedInPhotoRenderService }, { type: i1$2.MatDialog }, { type: SceneEventService }, { type: CameraService }, { type: ViewModeService }] });
 
-var ConnectionStatus;
-(function (ConnectionStatus) {
-    ConnectionStatus[ConnectionStatus["IsUndefined"] = 0] = "IsUndefined";
-    ConnectionStatus[ConnectionStatus["IsConnected"] = 1] = "IsConnected";
-    ConnectionStatus[ConnectionStatus["TryingToConnect"] = 2] = "TryingToConnect";
-    ConnectionStatus[ConnectionStatus["IsDisConnected"] = 3] = "IsDisConnected";
-})(ConnectionStatus || (ConnectionStatus = {}));
-
-var RenderStatus;
-(function (RenderStatus) {
-    RenderStatus[RenderStatus["IsUndefined"] = 0] = "IsUndefined";
-    RenderStatus[RenderStatus["IsRunning"] = 1] = "IsRunning";
-    RenderStatus[RenderStatus["IsSuccess"] = 2] = "IsSuccess";
-    RenderStatus[RenderStatus["IsStopped"] = 3] = "IsStopped";
-    RenderStatus[RenderStatus["IsWaiting"] = 4] = "IsWaiting";
-})(RenderStatus || (RenderStatus = {}));
-
-class RenderQueueItem {
-    constructor() {
-        this.startDateTime = new Date();
-        this.rendered = false;
-        this.renderProgress = 0;
-        this.renderIterations = 0;
-        this.renderStatus = RenderStatus.IsUndefined;
-    }
-}
-
-var ToastType;
-(function (ToastType) {
-    ToastType[ToastType["Success"] = 0] = "Success";
-    ToastType[ToastType["Warning"] = 1] = "Warning";
-    ToastType[ToastType["Error"] = 2] = "Error";
-})(ToastType || (ToastType = {}));
-
-class Toast {
-    constructor() {
-        this.type = ToastType.Success;
-    }
-}
-
-class RenderData {
-    constructor() {
-        this.cameraFOV = 45;
-    }
-}
-
-class RenderSettings {
-    constructor() {
-        this.camRotationX = 0.24;
-        this.camRotationY = 0;
-        this.environmentName = '';
-        this.environmentHdr = '';
-        this.environmentRotation = 0;
-        this.environmentIntensity = null;
-        this.extraLights = [];
-    }
-}
-
 class ExportObject {
 }
 
@@ -28385,6 +28498,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: HomedecoratorSettingsService }, { type: HomedecoratorConnectorAdapterService }, { type: ThreedselectorService }] });
 
+var RenderStatus;
+(function (RenderStatus) {
+    RenderStatus[RenderStatus["IsUndefined"] = 0] = "IsUndefined";
+    RenderStatus[RenderStatus["IsRunning"] = 1] = "IsRunning";
+    RenderStatus[RenderStatus["IsSuccess"] = 2] = "IsSuccess";
+    RenderStatus[RenderStatus["IsStopped"] = 3] = "IsStopped";
+    RenderStatus[RenderStatus["IsWaiting"] = 4] = "IsWaiting";
+})(RenderStatus || (RenderStatus = {}));
+
+class RenderQueueItem {
+    constructor() {
+        this.startDateTime = new Date();
+        this.rendered = false;
+        this.renderProgress = 0;
+        this.renderIterations = 0;
+        this.renderStatus = RenderStatus.IsUndefined;
+    }
+}
+
 class ToastService {
     constructor(_dictionaryService) {
         this._dictionaryService = _dictionaryService;
@@ -28401,597 +28533,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: HomedecoratorDictionaryService }] });
 
-class RenderService {
-    static MakeWindowMaterialTransparent(material) {
-        // console.log(material);
-        material.transparent = true;
-        material.opacity = Math.min(material.opacity, 0.4);
-        return material;
-    }
-    constructor(_settingsService, _exportService, _cameraService, _sceneService, _toastService, _messageBusService, _googleTagManager, _roomService, _floorService) {
-        this._settingsService = _settingsService;
-        this._exportService = _exportService;
-        this._cameraService = _cameraService;
-        this._sceneService = _sceneService;
-        this._toastService = _toastService;
-        this._messageBusService = _messageBusService;
-        this._googleTagManager = _googleTagManager;
-        this._roomService = _roomService;
-        this._floorService = _floorService;
-        this.renderModes = RenderModes;
-        this.streaming = {};
-        this.renderedRoomImages = [];
-        this.connectionStatus = ConnectionStatus.IsUndefined;
-        this.renders = [];
-        this.cameraPositions = [];
-        this.imageSizes = [
-            { id: 1, name: ' 720p (HD)', width: 1280, height: 720 },
-            { id: 2, name: '1080P (HD)', width: 1920, height: 1080 },
-            { id: 3, name: '1440p (2K)', width: 2560, height: 1440 },
-            { id: 4, name: '2160p (4K)', width: 4096, height: 2160 }
-        ];
-        this.lightnings = [
-            { id: 1, name: 'Light', settings: [] },
-            { id: 2, name: 'Medium', settings: [] },
-            { id: 3, name: 'Heay', settings: [] }
-        ];
-        this.renderEnvironments = [
-            { id: 1, name: 'None', hdrFile: '', intensity: 1.0 },
-            { id: 2, name: 'Modern city', hdrFile: 'canary_wharf_2k.hdr', intensity: 2.5 },
-            { id: 3, name: 'City park', hdrFile: 'dresden_moat_2k.hdr', intensity: 2.5 },
-            { id: 4, name: 'Night in the city', hdrFile: 'hansaplatz_2k.hdr', intensity: 1.0 },
-            { id: 5, name: 'Night in the countryside', hdrFile: 'kloppenheim_02_2k.hdr', intensity: 1.0 },
-            { id: 6, name: 'Forest', hdrFile: 'nagoya_wall_path_2k.hdr', intensity: 1.0 },
-            { id: 7, name: 'Snow', hdrFile: 'snowy_forest_path_01_2k.hdr', intensity: 1.0 },
-            { id: 8, name: 'Pasture', hdrFile: 'spruit_sunrise_2k.hdr', intensity: 1.0 },
-            { id: 9, name: 'Field', hdrFile: 'sunflowers_2k.hdr', intensity: 1.0 },
-            { id: 10, name: 'Old city and canals', hdrFile: 'tears_of_steel_bridge_2k.hdr', intensity: 1.0 },
-            { id: 11, name: 'Estate', hdrFile: 'tiergarten_2k.hdr', intensity: 1.0 },
-            { id: 12, name: 'Beach', hdrFile: 'umhlanga_sunrise_2k.hdr', intensity: 2.5 },
-            { id: 13, name: 'Residential area with park', hdrFile: 'urban_street_01_2k.hdr', intensity: 1.0 },
-            { id: 14, name: 'Residential area', hdrFile: 'urban_street_03_2k.hdr', intensity: 1.0 },
-        ];
-        this.renderScenes = [
-            { id: 1, name: 'scene_grass_cycles_MRP', sceneAssetId: 'scene_grass_cycles_MRP' },
-            { id: 2, name: 'scene_lake_cycles_MRP', sceneAssetId: 'scene_lake_cycles_MRP' },
-            { id: 3, name: 'scene_sky_cycles_MRP', sceneAssetId: 'scene_sky_cycles_MRP' },
-            { id: 4, name: 'scene_garden_cycles_MRP', sceneAssetId: 'scene_garden_cycles_MRP' },
-            { id: 5, name: 'scene_nature_cycles_MRP', sceneAssetId: 'scene_nature_cycles_MRP' },
-            { id: 5, name: 'scene_01', sceneAssetId: 'scene_01' }
-        ];
-        this._ceilingLightMargin = 0.5;
-        this.selectedImageSize = 2;
-        this.selectedEnvironment = 1;
-        this.selectedRenderScene = this.renderScenes[0].sceneAssetId;
-        this.blendFilesRender = this._settingsService.settings.blendFilesRender;
-        this.positions = 1;
-        this.save = false;
-        this.renderRoomImageChanged = new BehaviorSubject('');
-        this.renderingStarted = new Subject();
-        this.renderImageChanged = new BehaviorSubject('');
-        this.renderQueue = [];
-        this.currentQueueRenderItem = new RenderQueueItem();
-        this.currentProductHash = '';
-        this._subs = [];
-        this.sceneData = {};
-        this._subs.push(this._settingsService.settingsLoaded.subscribe((loaded) => {
-            if (loaded) {
-                this.serverData = this._settingsService.settings.renderParameters;
-                if (this.serverData) {
-                    this.serverData.setup = false;
-                    this.checkConnection();
-                    this._renderServiceHeartBeat();
-                }
-            }
-        }));
-    }
-    ngOnDestroy() {
-        this._subs.forEach(s => s.unsubscribe());
-    }
-    async checkConnection() {
-        //
-        // if (this.service.validate() === false) {
-        //
-        //   try {
-        //
-        //     const url = `${(this.serverData.secure ? 'wss' : 'ws')}://${this.serverData.host}:${this.serverData.port}/service/`;
-        //     await this.service.connect(url).then(() => {
-        //       this.serverData.setup = true;
-        //     }).catch((rej) => {
-        //     });
-        //
-        //     this.service.on('error', async (object) => {
-        //       this.serverData.setup = false;
-        //       if (this.connectionStatus !== ConnectionStatus.TryingToConnect) {
-        //         this.connectionStatus = ConnectionStatus.IsDisConnected;
-        //       }
-        //       await this._onRenderError();
-        //     });
-        //     this.service.on('close', async (object) => {
-        //       this.serverData.setup = false;
-        //       if (this.connectionStatus !== ConnectionStatus.TryingToConnect) {
-        //         this.connectionStatus = ConnectionStatus.IsDisConnected;
-        //       }
-        //       await this._onRenderClose();
-        //     });
-        //
-        //   } catch (err) {
-        //
-        //     this.serverData.setup = false;
-        //   }
-        // }
-    }
-    _renderServiceHeartBeat() {
-        setInterval(() => {
-            if (this.connectionStatus === ConnectionStatus.IsDisConnected) {
-                if (this._settingsService.settings.options.showRenderConnectionInfo) {
-                    const toast = new Toast();
-                    toast.message = 'CONNECTION_WITH_RENDER_SERVICE_LOST';
-                    toast.type = ToastType.Error;
-                    this._toastService.showToast(toast);
-                }
-                this.connectionStatus = ConnectionStatus.TryingToConnect;
-                this.checkConnection();
-            }
-            else if (this.connectionStatus === ConnectionStatus.TryingToConnect) {
-                if (this.serverData.setup === false) {
-                    this._messageBusService.emit(MessageType.RenderServiceTryToConnect);
-                    this.checkConnection();
-                }
-                else {
-                    if (this._settingsService.settings.options.showRenderConnectionInfo) {
-                        const toast = new Toast();
-                        toast.message = 'RE_CONNECTED_WITH_RENDER_SERVICE';
-                        toast.type = ToastType.Success;
-                        this._toastService.showToast(toast);
-                    }
-                    this.connectionStatus = ConnectionStatus.IsConnected;
-                }
-            }
-            else if (this.connectionStatus === ConnectionStatus.IsConnected) {
-                this._messageBusService.emit(MessageType.RenderServiceConnected);
-            }
-        }, 2000);
-    }
-    getRenderParameters(type) {
-        const params = new RenderData();
-        if (type !== RenderModes.RenderIone) {
-            const currentImageSize = this.getImageSizeOnId(this.selectedImageSize);
-            params.imageWidth = Number(currentImageSize.width);
-            params.imageHeight = Number(currentImageSize.height);
-        }
-        params.configuredItem = this._getConfiguredFurnitureItem();
-        params.cameraFOV = this._cameraService.camera.fov;
-        params.type = type;
-        if (type === this.renderModes.RenderShop) {
-            params.cameraFOV = 30;
-            if (this._settingsService.settings.renderParameters.settings !== undefined) {
-                params.settings = this._settingsService.settings.renderParameters.settings;
-            }
-        }
-        else if (type === this.renderModes.RenderRoom) {
-            const renderEnvironment = this.getRenderEnvironmentOnId(this.selectedEnvironment);
-            params.settings = new RenderSettings();
-            params.settings.environmentHdr = renderEnvironment.hdrFile;
-            params.settings.environmentIntensity = renderEnvironment.intensity;
-            const floorPlanHasRooms = this._roomService.rooms[0];
-            const ceilingOrFloor = floorPlanHasRooms ? this._roomService.rooms[0].ceilingPlane : this._floorService.getFloorPlane();
-            const bb = new Box3().setFromObject(ceilingOrFloor);
-            const bbSize = new Vector3();
-            bb.getSize(bbSize);
-            params.settings.extraLights = [
-                {
-                    x1: bb.min.x + this._ceilingLightMargin,
-                    z1: bb.min.z + this._ceilingLightMargin,
-                    x2: bb.max.x - this._ceilingLightMargin,
-                    z2: bb.max.z - this._ceilingLightMargin,
-                    height: floorPlanHasRooms ? ceilingOrFloor.position.y : 2.6,
-                }
-            ];
-        }
-        return params;
-    }
-    // The GLTFExporter needs lights to be configured like this,
-    // otherwise they will all point in the same direction.
-    _fixLight(element) {
-        element.target.parent = element;
-        element.lookAt(element.target.position);
-        element.target.position.x = 0;
-        element.target.position.y = 0;
-        element.target.position.z = -1;
-    }
-    _elementMustBeRemoved(element) {
-        if (element.type === 'PerspectiveCamera') {
-            return true;
-        }
-        if (!element.name) {
-            return false;
-        }
-        const lcName = element.name.toLowerCase();
-        // elements with a name starting with c_ are connectors,
-        // which should not be visible.
-        if (lcName.startsWith('c_')) {
-            return true;
-        }
-        if (element.name.startsWith('snapping-preview-mesh')) {
-            return true;
-        }
-        return false;
-    }
-    async _exportToGlb() {
-        const assetPath = this._settingsService.settings.assetPath;
-        // The ground plane looks odd in renders.
-        // The hud-ring and hud-circle are the walkthrough mode marker,
-        // which is not supposed to be rendered.
-        const elementsToRemove = ['ground-plane', 'hud-ring', 'hud-circle'];
-        let scene;
-        try {
-            scene = this._sceneService.scene.clone();
-            elementsToRemove.forEach(elementName => {
-                const selectedObject = scene.getObjectByName(elementName);
-                scene.remove(selectedObject);
-            });
-            // Using the parents, because scene.remove does not seem to work correctly.
-            const parents = [];
-            scene.traverse(element => {
-                if (element instanceof DirectionalLight || element instanceof SpotLight) {
-                    this._fixLight(element);
-                }
-                if (element.visible === false) {
-                    // console.log("Element " + element.name + " was invisible, making it visible.");
-                    element.visible = true;
-                }
-                if (element instanceof Mesh && element.name && element.name.startsWith('customMeshWindow')) {
-                    let hasCustomTexture = false;
-                    if (element.material instanceof Material$1) {
-                        if (element.material instanceof MeshPhongMaterial && element.material.map) {
-                            hasCustomTexture = true;
-                        }
-                        element.material = RenderService.MakeWindowMaterialTransparent(element.material);
-                    }
-                    else if (Array.isArray(element.material)) {
-                        element.material.forEach(function (material, index) {
-                            if (material instanceof MeshPhongMaterial && material.map) {
-                                hasCustomTexture = true;
-                            }
-                            element.material[index] = RenderService.MakeWindowMaterialTransparent(material);
-                        });
-                    }
-                    if (!hasCustomTexture) {
-                        element.name = 'glass';
-                    }
-                }
-                if (this._elementMustBeRemoved(element)) {
-                    parents.push(element.parent);
-                }
-            });
-            parents.forEach(parent => {
-                for (let i = parent.children.length - 1; i >= 0; i--) {
-                    if (this._elementMustBeRemoved(parent.children[i])) {
-                        parent.remove(parent.children[i]);
-                    }
-                }
-            });
-            scene.add(this._cameraService.camera.clone());
-            const options = {
-                trs: false,
-                onlyVisible: false,
-                truncateDrawRange: true,
-                binary: true,
-                forceIndices: false,
-                forcePowerOfTwoTextures: false,
-                // maxTextureSize: 500,
-                embedImages: true,
-            };
-            const exporter = new GLTFExporter();
-            let filename = '';
-            return new Promise((resolve, reject) => {
-                exporter.parse(scene, async (exportedScene) => {
-                    const blob = new Blob([exportedScene], { type: 'application/octet-stream' });
-                    const result = await FileUtils.SaveGLBFile(blob, assetPath);
-                    if (result !== false) {
-                        filename = result.path;
-                    }
-                    resolve(filename);
-                }, () => {
-                }, options);
-            });
-        }
-        catch (e) {
-            throw (e);
-        }
-    }
-    async startRendering() {
-        if (this.renderQueue.length > 0) {
-            await this.checkConnection();
-            if (this.renderQueue[0].renderProgress === 0 || this.renderQueue[0].renderProgress === undefined) {
-                this.renderQueue[0].renderStatus = RenderStatus.IsRunning;
-                this.currentQueueRenderItem = this.renderQueue[0];
-                this.renderQueue.shift();
-                this.currentQueueRenderItem.params.glbPath = await this._exportToGlb()
-                    .catch((e) => {
-                    return Promise.reject(e);
-                });
-                await this._startRenderLoop();
-            }
-        }
-    }
-    async _colijnRenderScene(params) {
-        return new Promise((resolve, reject) => {
-            const requestParams = [{
-                    id: 1,
-                    jsonrpc: '2.0',
-                    method: 'colijn_render_scene_from_glb',
-                    params: params
-                }];
-            const xhr = new XMLHttpRequest();
-            xhr.open('POST', this._getRenderServiceUrl());
-            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-            xhr.onload = () => {
-                if (xhr.status >= 200 && xhr.status < 300) {
-                    resolve(JSON.parse(xhr.responseText));
-                }
-                else {
-                    reject(xhr.statusText);
-                }
-            };
-            xhr.onerror = () => reject(xhr.statusText);
-            xhr.send(JSON.stringify(requestParams));
-        });
-    }
-    async _startRenderLoop() {
-        // temporary solution because large request over websockets are not working because of an error in the software of migenius
-        let [info] = await this._colijnRenderScene(this.currentQueueRenderItem.params);
-        info = info.result;
-        /*
-        const [ info ] = await this.service.queue_commands()
-          .queue(new Command('colijn_render_scene', this.currentQueueRenderItem.params), true)
-          .execute();
-        */
-        this.currentQueueRenderItem.host = this._settingsService.settings.url;
-        this.currentQueueRenderItem.key = info.scene_name;
-        this.currentQueueRenderItem.type = this.currentQueueRenderItem.params.type;
-        this.currentQueueRenderItem.startDateTime = new Date();
-        this.currentQueueRenderItem.imageSize = this.currentQueueRenderItem.params.imageWidth + ' x ' + this.currentQueueRenderItem.params.imageHeight;
-        this._setRenderProgress(RenderStatus.IsRunning, 0, 0);
-        this.sceneData = info;
-        if (!this.sceneData || this.sceneData.error) {
-            return;
-        }
-        if (this.sceneData.image_info && this.sceneData.image_info.needs_render === true) {
-            this.currentQueueRenderItem.rendered = true;
-            await this._startRenderStream();
-        }
-        else {
-            this._afterRendering();
-        }
-    }
-    async _quitRenderLoop() {
-        // if (this.sceneData.loop_name !== undefined && this.service.validate() !== false) {
-        //   const [] = await this.service.queue_commands()
-        //     .queue(new Command('render_loop_quit', {
-        //       render_loop_name: this.sceneData.loop_name
-        //     }))
-        //     .execute();
-        //   this.service.remove_stream(this.sceneData.loop_name);
-        // }
-    }
-    async _startRenderStream() {
-        //
-        // try {
-        //
-        //   this.streaming.stream = this.service.create_stream();
-        //   await this.streaming.stream.start({render_loop_name: this.sceneData.loop_name, image_format: 'jpg', quality: '100'});
-        //
-        //   this.streaming.stream.on('image', async (object) => {
-        //     this._htmlImageDisplay(object, null);
-        //     const [progress] = await this.service.queue_commands()
-        //       .queue(new Command('render_loop_get_render_progress', {
-        //         render_loop_name: this.sceneData.loop_name
-        //       }), true)
-        //       .execute();
-        //
-        //     if (progress.progression !== undefined) {
-        //       this._setRenderProgress(RenderStatus.IsRunning, Math.ceil((progress.progression * 100)), progress.iteration);
-        //     }
-        //
-        //     if (object.result === 1) {
-        //
-        //       await this.service.queue_commands()
-        //         .queue(new Command('render_loop_save_to_disk', {
-        //           render_loop_name: this.sceneData.loop_name,
-        //           format: 'jpg',
-        //           quality: 90,
-        //           path: this.sceneData.image_info.url
-        //         }), true)
-        //         .execute();
-        //
-        //       if (this.streaming.stream !== undefined) {
-        //         this.streaming.stream.stop();
-        //       }
-        //       await this._quitRenderLoop();
-        //       this._afterRendering();
-        //       return;
-        //
-        //     } else if (object.result < 0) {
-        //
-        //       await this._onRenderError();
-        //       return;
-        //     }
-        //   });
-        //
-        // } catch (err) {
-        //
-        //   await this._onRenderError();
-        //   return;
-        // }
-    }
-    _setRenderProgress(status, progress, iterations) {
-        if (!this.serverData) {
-            return;
-        }
-        this.currentQueueRenderItem.endDateTime = new Date();
-        this.currentQueueRenderItem.renderStatus = status;
-        this.currentQueueRenderItem.renderProgress = progress;
-        if (iterations > 0) {
-            this.currentQueueRenderItem.renderIterations = iterations;
-        }
-        if (this.serverData.renderMode === RenderModes.RenderIone) {
-            const render = this.getRenderOnId(this.currentQueueRenderItem.params.render.id);
-            render.status = status;
-            render.progress = progress;
-        }
-    }
-    async _onRenderError() {
-        this._setRenderProgress(RenderStatus.IsStopped, 0, 0);
-        await this._quitRenderLoop();
-    }
-    async _onRenderClose() {
-        this._setRenderProgress(RenderStatus.IsStopped, 0, 0);
-    }
-    _afterRendering() {
-        if (!this.serverData) {
-            return;
-        }
-        this._setRenderProgress(RenderStatus.IsSuccess, 100, 0);
-        const imageUrl = this._settingsService.settings.assetPath.replace('content43/', '') + this.sceneData.image_info.url;
-        if (this.serverData.renderMode === RenderModes.RenderRoom) {
-            this.renderedRoomImages.unshift(imageUrl);
-        }
-        this.renderImageChanged.next(imageUrl);
-        if (this.serverData.renderMode === RenderModes.RenderIone) {
-            const render = this.getRenderOnId(this.currentQueueRenderItem.params.render.id);
-            render.url = imageUrl;
-        }
-        const configuredItem = this.currentQueueRenderItem.params.configuredItem;
-        const isSingleItem = this.serverData.renderMode !== RenderModes.RenderRoom;
-        this._googleTagManager.sendEvent(GoogleTagManagerEvent.Render, {
-            'articleNr': isSingleItem ? configuredItem.sku : 'renderRoom',
-            'product': isSingleItem ? configuredItem.name : 'renderRoom',
-            'dimensions': this.currentQueueRenderItem.imageSize
-        });
-        this.startRendering();
-    }
-    _getRenderServiceUrl() {
-        return `${(this.serverData.secure ? 'https' : 'http')}://${this.serverData.host}:${this.serverData.port}`;
-    }
-    forceRenderImage() {
-        const floorGroup = this._getFirstCustomFloorItemFromScene();
-        if (floorGroup !== null) {
-            this._checkVisibleUpdates(floorGroup, true);
-        }
-    }
-    async _checkVisibleUpdates(furniture, forceRender = false) {
-        if (!this.serverData) {
-            return;
-        }
-        if (!furniture) {
-            return;
-        }
-        if (this.serverData.renderMode === this.renderModes.RenderIone) {
-            const object = this._exportService.getExportObjectFromCustomFloorGroup(furniture);
-            this.currentProductHash = object.defaultRenderPath;
-        }
-        else if (this.serverData.renderMode === this.renderModes.RenderShop) {
-            const object = this._exportService.getExportObjectFromCustomFloorGroup(furniture);
-            if (!(JSON.stringify(this.prevItem) !== JSON.stringify(object) || forceRender)) {
-                return;
-            }
-            this.renderingStarted.next();
-            this.prevItem = object;
-            const queueItem = new RenderQueueItem();
-            queueItem.params = this.getRenderParameters(this.renderModes.RenderShop);
-            queueItem.params.cameraMatrix = this._cameraService.camera.matrixWorldInverse.elements;
-            queueItem.params.forceRender = forceRender;
-            this.renderQueue = [];
-            this.renderQueue.push(queueItem);
-            await this.startRendering();
-        }
-    }
-    _htmlImageDisplay(image, urlCreator) {
-        try {
-            urlCreator = urlCreator || (window ? (window.URL || window.webkitURL) : undefined);
-        }
-        catch (e) {
-        }
-        const blob = new Blob([image.image], { type: image.mime_type });
-        const url = urlCreator.createObjectURL(blob);
-        this.renderRoomImageChanged.next(url);
-    }
-    getRenderOnId(id) {
-        let returnRender = null;
-        this.renders.forEach((x) => {
-            if (x.id === id) {
-                returnRender = x;
-            }
-        });
-        return returnRender;
-    }
-    getImageSizeOnId(id) {
-        let returnSize = null;
-        this.imageSizes.forEach((x) => {
-            if (x.id === id) {
-                returnSize = x;
-            }
-        });
-        return returnSize;
-    }
-    getRenderEnvironmentOnId(id) {
-        let returnEnvironment = null;
-        this.renderEnvironments.forEach((renderEnvironment) => {
-            if (renderEnvironment.id === id) {
-                returnEnvironment = renderEnvironment;
-                return;
-            }
-        });
-        return returnEnvironment;
-    }
-    getLightningOnId(id) {
-        let returnLightning = null;
-        this.lightnings.forEach((x) => {
-            if (x.id === id) {
-                returnLightning = x;
-            }
-        });
-        return returnLightning;
-    }
-    /******************************************** Export functions ********************************************/
-    _getFirstCustomFloorItemFromScene() {
-        const children = this._sceneService.scene.children;
-        if (children.length <= 0) {
-            return null;
-        }
-        for (let a = 0; a < children.length; a++) {
-            if (children[a] instanceof CustomFloorItem) {
-                return children[a];
-            }
-            if (children[a] instanceof ItemGroup) {
-                const itemGroup = children[a];
-                if (itemGroup.items.length > 0) {
-                    itemGroup.items.forEach((item) => {
-                        if (item instanceof CustomFloorItem) {
-                            return item;
-                        }
-                    });
-                }
-            }
-        }
-        return null;
-    }
-    _getConfiguredFurnitureItem() {
-        const floorgroup = this._getFirstCustomFloorItemFromScene();
-        if (floorgroup === null) {
-            return null;
-        }
-        return this._exportService.getExportObjectFromCustomFloorGroup(floorgroup);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderService, deps: [{ token: HomedecoratorSettingsService }, { token: ExportService }, { token: CameraService }, { token: SceneService }, { token: ToastService }, { token: MessageBusService }, { token: GoogleTagManagerService }, { token: RoomService }, { token: FloorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: HomedecoratorSettingsService }, { type: ExportService }, { type: CameraService }, { type: SceneService }, { type: ToastService }, { type: MessageBusService }, { type: GoogleTagManagerService }, { type: RoomService }, { type: FloorService }] });
-
 class LoadFurnitureWithoutSceneService extends LoadFurnitureBaseService {
     loadFurniture(furnitureData, shouldCopyInstance, looseOriginalConfiguration, standAlone, fromScratch, fromPreset, loadFromProject) {
         throw new Error('Method not implemented.');
@@ -29034,7 +28575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: LoadFurnitureService }, { type: LoadFurnitureWithoutSceneService }, { type: HomedecoratorSettingsService }, { type: HomedecoratorConnectorService }] });
 
-class NewRenderService {
+class RenderService {
     constructor(messageService, _settingsService, _buildFurnitureService, _cameraService, _sceneService, _ione, _ioneConnectorAdapter, _threedSelectorService, _toastService, _messageBusService, _googleTagManager, _roomService, _floorService, _wallService, _ceilingService, _loadFurnitureService, _utilsService, _presetService, _apiServiceModule, _appEventService, _dictionaryService) {
         this.messageService = messageService;
         this._settingsService = _settingsService;
@@ -29064,9 +28605,14 @@ class NewRenderService {
         this.renderRoomImageChanged = new BehaviorSubject('');
         this.currentQueueRenderItem = new RenderQueueItem();
         this.renderedRoomImages = [];
+        this.blendFilesRender = false;
         this._overWriteTransparency = false;
         this._subs = [];
-        this._subs.push(this.messageService.subscribe(MessageType.BlenderRenderFileReady, (file) => this.procesRenderFile(file)));
+        this._subs.push(this.messageService.subscribe(MessageType.BlenderRenderFileReady, (file) => this.procesRenderFile(file)), this._settingsService.settingsLoaded.subscribe((loaded) => {
+            if (loaded) {
+                this.blendFilesRender = this._settingsService.settings.blendFilesRender;
+            }
+        }));
     }
     ngOnDestroy() {
         this._subs.forEach(s => s.unsubscribe());
@@ -29091,7 +28637,14 @@ class NewRenderService {
         }
     }
     async renderRoom(settings, preview = false) {
-        const sceneData = await this._exportToGlb();
+        let sceneData;
+        try {
+            sceneData = await this._exportToGlb();
+        }
+        catch (e) {
+            this.renderImageError.next(this._dictionaryService.get(e.message));
+            return;
+        }
         const data = this._getDataForRoomRender(settings);
         data.files = {
             glbData: this._arrayBufferToBase64(sceneData)
@@ -29115,6 +28668,21 @@ class NewRenderService {
         let scene;
         try {
             scene = this._sceneService.scene.clone(true);
+            const masksToRemove = new Map();
+            scene.traverse((child) => {
+                if (child.parent && child instanceof Mesh && child.name && child.name.toLowerCase().indexOf('_mask') > -1) {
+                    masksToRemove.set(child.parent.uuid, child.uuid);
+                }
+            });
+            masksToRemove.forEach((maskUuid, parentUuid) => {
+                const parent = scene.getObjectByProperty('uuid', parentUuid);
+                if (parent) {
+                    const mask = parent.getObjectByProperty('uuid', maskUuid);
+                    if (mask) {
+                        parent.remove(mask);
+                    }
+                }
+            });
             const lightsToRemove = scene.children.filter(c => c instanceof Light);
             lightsToRemove.forEach(light => {
                 if ((light instanceof SpotLight || light instanceof DirectionalLight) && light.target) {
@@ -29135,6 +28703,10 @@ class NewRenderService {
                 if (!this._cameraService.isCameraFacingFront(wall) && !wall.orphan && !wall.isInnerWall()) {
                     wall.name = 'CULLING_wall';
                 }
+                wall.userData = {};
+                // for (let i = wall.children.length; i >= 0; i--) {
+                //   wall.remove(wall.children[i]);
+                // }
             });
             const ceilings = scene.children.filter(c => c.name && c.name === this._ceilingService.ceilingName);
             ceilings.forEach(ceiling => {
@@ -29153,7 +28725,9 @@ class NewRenderService {
                 embedImages: true,
             };
             scene.name = 'mrp_room_' + scene.uuid;
-            const glb = await this._getGlbFromObject(scene, options);
+            const glb = await this._getGlbFromObject(scene, options).catch((error) => {
+                throw (error);
+            });
             // this._utilsService.downloadFile(scene.name + '.glb', new Blob([glb], {type: 'model/gltf-binary'}));
             ObjectUtils.DisposeObject(scene);
             scene = null;
@@ -29168,7 +28742,8 @@ class NewRenderService {
         return new Promise((resolve, reject) => {
             exporter.parse(object, async (exportedScene) => {
                 resolve(exportedScene);
-            }, () => {
+            }, (error) => {
+                reject(error);
             }, options);
         });
     }
@@ -29287,7 +28862,19 @@ class NewRenderService {
                 method: 'POST',
                 data: JSON.stringify(data),
                 url: `${host}getRenderFromGlb`,
-                responseType: 'json'
+                responseType: 'json',
+                onUploadProgress: (progressEvent) => {
+                    const total = progressEvent.total ?? 0;
+                    if (total > 0) {
+                        const percent = Math.round((progressEvent.loaded * 100) / total);
+                        this._messageBusService.emit(MessageType.RenderUploadProgress, percent);
+                        if (percent >= 100) {
+                            this._messageBusService.emit(MessageType.RenderUploadFinished, true);
+                        }
+                    }
+                }
+            }).catch((error) => {
+                return error;
             });
             if (result.status === 200) {
                 // const image = `data:${result.data.fileType};base64,${result.data.image}`;
@@ -29308,7 +28895,12 @@ class NewRenderService {
                     this.renderImageError.next(this._dictionaryService.get('BLENDER_PRODUCT_RENDER_ERROR'));
                 }
                 // Remove the loading indicator.
-                this._messageBusService.emit(MessageType.RenderUploadFinished, true);
+                this._messageBusService.emit(MessageType.RenderFinished, true);
+            }
+            else {
+                this.renderImageChanged.next('');
+                this.renderImageError.next(this._dictionaryService.get('BLENDER_PRODUCT_RENDER_ERROR'));
+                this._messageBusService.emit(MessageType.RenderFinished, true);
             }
         }
     }
@@ -29627,10 +29219,10 @@ class NewRenderService {
             this._overWriteTransparency = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NewRenderService, deps: [{ token: MessageBusService }, { token: HomedecoratorSettingsService }, { token: SwitchBuildFurnitureService }, { token: CameraService }, { token: SceneService }, { token: HomedecoratorConnectorService }, { token: HomedecoratorConnectorAdapterService }, { token: ThreedselectorService }, { token: ToastService }, { token: MessageBusService }, { token: GoogleTagManagerService }, { token: RoomService }, { token: FloorService }, { token: WallService }, { token: CeilingService }, { token: SwitchLoadFurnitureService }, { token: UtilsService }, { token: PresetsService }, { token: ApiServiceModule }, { token: HomedecoratorAppEventService }, { token: HomedecoratorDictionaryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NewRenderService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderService, deps: [{ token: MessageBusService }, { token: HomedecoratorSettingsService }, { token: SwitchBuildFurnitureService }, { token: CameraService }, { token: SceneService }, { token: HomedecoratorConnectorService }, { token: HomedecoratorConnectorAdapterService }, { token: ThreedselectorService }, { token: ToastService }, { token: MessageBusService }, { token: GoogleTagManagerService }, { token: RoomService }, { token: FloorService }, { token: WallService }, { token: CeilingService }, { token: SwitchLoadFurnitureService }, { token: UtilsService }, { token: PresetsService }, { token: ApiServiceModule }, { token: HomedecoratorAppEventService }, { token: HomedecoratorDictionaryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NewRenderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: MessageBusService }, { type: HomedecoratorSettingsService }, { type: SwitchBuildFurnitureService }, { type: CameraService }, { type: SceneService }, { type: HomedecoratorConnectorService }, { type: HomedecoratorConnectorAdapterService }, { type: ThreedselectorService }, { type: ToastService }, { type: MessageBusService }, { type: GoogleTagManagerService }, { type: RoomService }, { type: FloorService }, { type: WallService }, { type: CeilingService }, { type: SwitchLoadFurnitureService }, { type: UtilsService }, { type: PresetsService }, { type: ApiServiceModule }, { type: HomedecoratorAppEventService }, { type: HomedecoratorDictionaryService }] });
 
@@ -30521,6 +30113,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: HomedecoratorSettingsService }, { type: HomedecoratorConnectorService }] });
 
+var ToastType;
+(function (ToastType) {
+    ToastType[ToastType["Success"] = 0] = "Success";
+    ToastType[ToastType["Warning"] = 1] = "Warning";
+    ToastType[ToastType["Error"] = 2] = "Error";
+})(ToastType || (ToastType = {}));
+
+class Toast {
+    constructor() {
+        this.type = ToastType.Success;
+    }
+}
+
 class ConnectionHeathService {
     constructor(_http, _settingService, _toastService, _messageService) {
         this._http = _http;
@@ -31542,6 +31147,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Injectable
         }] });
 
+class ConfigurationPresetLoadService {
+    set sku(value) {
+        this._sku = value;
+    }
+    get sku() {
+        return this._sku;
+    }
+    set instanceId(value) {
+        this._instanceId = value;
+    }
+    get instanceId() {
+        return this._instanceId;
+    }
+    set externalSourceId(value) {
+        this._externalSourceId = value;
+    }
+    get externalSourceId() {
+        return this._externalSourceId;
+    }
+    set showConfigurationLoad(value) {
+        this._showConfigurationLoad = value;
+    }
+    get showConfigurationLoad() {
+        return this._showConfigurationLoad;
+    }
+    constructor(_homedecoratorConnectorService, _settingsService, _homedecoratorConnectorAdapterService, _messageService, _homedecoratorEventService) {
+        this._homedecoratorConnectorService = _homedecoratorConnectorService;
+        this._settingsService = _settingsService;
+        this._homedecoratorConnectorAdapterService = _homedecoratorConnectorAdapterService;
+        this._messageService = _messageService;
+        this._homedecoratorEventService = _homedecoratorEventService;
+        this._showConfigurationLoad = false;
+        this._subs = [];
+        this._subs.push(this._messageService.subscribe(MessageType.ViewModeChanged, (mode) => this._updateMode(mode)));
+    }
+    ngOnDestroy() {
+        this.reset();
+        this._subs.forEach(sub => sub.unsubscribe());
+    }
+    async LoadPreset() {
+        // Loading is a bitch
+        // Init it for the preset (just java prod conf things)
+        // Then tell it to load.
+        if (this.goodId) {
+            const initResponse = await this._homedecoratorConnectorService.initForPreset(this.instanceId, this.goodId);
+            if (initResponse && initResponse.validationResult && initResponse.validationResult.success) {
+                this._messageService.emit(MessageType.LoadConfigurationFromPreset, {
+                    sku: this.sku,
+                    instanceId: this.instanceId,
+                    settings: this._externalSourceOptions
+                });
+                this.reset();
+            }
+        }
+    }
+    async loadArticleDataForPreset() {
+        if (this.sku && this.instanceId) {
+            if (this.externalSourceId) {
+                // Even if we define externalSourceId as a number, we got a string.
+                const externalSource = this._homedecoratorConnectorService.getExternalSourceFromId(+this.externalSourceId);
+                if (externalSource) {
+                    const params = await this._homedecoratorConnectorService.getPublicParams(externalSource.url, parseInt(externalSource.schema));
+                    const homeDecoSettings = Object.assign(JSON.parse(params.homeDecoSettings ? params.homeDecoSettings : params.catalogSettings), new HomedecoratorSettings());
+                    this._externalSourceOptions = homeDecoSettings;
+                    this._externalSourceOptions.externalSourceId = this._externalSourceId;
+                    await this._homedecoratorConnectorAdapterService.initConnector(homeDecoSettings ? homeDecoSettings : this._settingsService.settings, undefined, false, this.externalSourceId ? this.externalSourceId : undefined);
+                }
+            }
+            this.goodId = await this._homedecoratorConnectorService.getGoodIdFromArticleNr(this.sku);
+            this.article = await this._homedecoratorConnectorService.getArticle(this.sku, this._settingsService.settings.branch);
+            this.showConfigurationLoad = true;
+        }
+    }
+    reset() {
+        this.article = undefined;
+        this.goodId = undefined;
+        this.sku = undefined;
+        this.instanceId = undefined;
+        this.externalSourceId = undefined;
+        this._showConfigurationLoad = false;
+        this._homedecoratorEventService.configurationFromPresetLoaded.next(true);
+    }
+    _updateMode(value) {
+        if (value === ViewMode.RoomPlan3D) {
+            this.loadArticleDataForPreset();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigurationPresetLoadService, deps: [{ token: HomedecoratorConnectorService }, { token: HomedecoratorSettingsService }, { token: HomedecoratorConnectorAdapterService }, { token: MessageBusService }, { token: HomedecoratorAppEventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigurationPresetLoadService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigurationPresetLoadService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: HomedecoratorConnectorService }, { type: HomedecoratorSettingsService }, { type: HomedecoratorConnectorAdapterService }, { type: MessageBusService }, { type: HomedecoratorAppEventService }] });
+
 const APPLICATION_SERVICES_PROVIDERS = [
     HomedecoratorService,
     HomedecoratorAppService,
@@ -31605,9 +31304,8 @@ const APPLICATION_SERVICES_PROVIDERS = [
     DynamicCameraService,
     ThreedInPhotoInitializerService,
     ThreedInPhotoBuildService,
-    RenderService,
     ExportService,
-    NewRenderService,
+    RenderService,
     AppInitializerService,
     JsonUtilsService,
     RalService,
@@ -31626,7 +31324,8 @@ const APPLICATION_SERVICES_PROVIDERS = [
     FloorplanCoordinatesService,
     FloorplanRenderService,
     CornerService,
-    FloorplanModeService
+    FloorplanModeService,
+    ConfigurationPresetLoadService
 ];
 
 class ProgressBarComponent {
@@ -33852,108 +33551,142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class BlenderRenderSettings {
 }
 
-class RenderProgressComponent {
-    set show(show) {
-        this._show = show;
-        if (show) {
-            this._progressService.progressBarType = ProgressType.Upload;
-            this._progressService.total = 100;
+// A pipe for appending strings to other strings in view templates.
+class AppendPipe {
+    transform(value, append) {
+        if (!value) {
+            return '';
         }
-        else {
-            this._progressService.progressBarType = ProgressType.Download;
-            this._progressService.total = 0;
+        if (!append) {
+            return value;
         }
+        return value + append;
     }
-    get show() {
-        return this._show;
-    }
-    get progressValue() {
-        return this.progress + '/ 100%';
-    }
-    constructor(_messageService, _progressService) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppendPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AppendPipe, isStandalone: false, name: "append" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppendPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'append',
+                    standalone: false
+                }]
+        }] });
+
+class RenderProgressComponent {
+    constructor(_messageService) {
         this._messageService = _messageService;
-        this._progressService = _progressService;
+        this.title = 'UPLOADING_ROOM';
         this.progress = 0;
+        this.rendering = false;
         this._subs = [];
-        this._show = false;
-        this._subs.push(this._messageService.subscribe(MessageType.RenderUploadProgress, (progress) => this.updateProgress(progress)));
+        this._subs.push(this._messageService.subscribe(MessageType.RenderUploadFinished, (ready) => {
+            if (ready) {
+                this.title = 'RENDERING_ROOM';
+                this.rendering = true;
+            }
+        }), this._messageService.subscribe(MessageType.RenderUploadProgress, (progress) => this.updateProgress(progress)));
     }
     ngOnDestroy() {
         this._subs.forEach(sub => sub.unsubscribe());
     }
     updateProgress(progress) {
-        this.progress = progress;
-        this._progressService.progress = progress;
+        this.progress = Math.max(0, Math.min(100, progress));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderProgressComponent, deps: [{ token: MessageBusService }, { token: ProgressService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RenderProgressComponent, isStandalone: false, selector: "rp-render-progress", inputs: { show: "show", title: "title" }, ngImport: i0, template: `
-    @if (show) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderProgressComponent, deps: [{ token: MessageBusService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RenderProgressComponent, isStandalone: false, selector: "rp-render-progress", ngImport: i0, template: `
       <div class="render-progress-model">
         <div class="model">
           <div class="model-header-container">
-            <h3 class="model-header" [textContent]="title"></h3>
-            <div class="close" (click)="show = false">
-              <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
-            </div>
+            <h3 class="model-header" [textContent]="title | localize"></h3>
+              <!--
+                          <div class="close" (click)="show = false">
+                            <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
+                          </div>
+              -->
           </div>
           <div class="model-content-container">
-            <span class="progress-text" [textContent]="progressValue"></span>
+              @if (!rendering) {
+                  <div class="progress-bar" role="progressbar" [attr.aria-valuenow]="progress" aria-valuemin="0" aria-valuemax="100">
+                      <div class="progress-bar-fill" [style.width.%]="progress"></div>
+                      <span class="progress-bar-text" [textContent]="progress.toString() | append:'%'"></span>
+                  </div>
+              } @else {
+                  <span class="loading-dots" aria-hidden="true">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                  </span>
+              }
           </div>
         </div>
       </div>
-    }
-    `, isInline: true, styles: [".render-progress-model{position:fixed;inset:0;z-index:100;background-color:#0003}.render-progress-model .model{width:400px;position:relative;top:20%;left:50%;margin-left:-200px;background:#fff;border-radius:10px;box-sizing:border-box;box-shadow:1px 0 20px #0000001f}.render-progress-model .model .model-header-container{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-progress-model .model .model-header-container .close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-progress-model .model .model-header-container .close:hover mat-icon{fill:#46494c;color:#46494c}.render-progress-model .model .model-content-container{padding:20px}.render-progress-model .model .model-content-container .progress-text{text-align:center;margin-top:10px;display:block}.render-progress-model .model .model-content-container .progress-container{width:100%;height:25px;background-color:#e0e0e0;border-radius:12px;overflow:hidden}.render-progress-model .model .model-content-container .progress-fill{height:100%;background-color:#da9803;transition:width .3s ease-in-out}\n"], dependencies: [{ kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    `, isInline: true, styles: [".render-progress-model{position:fixed;inset:0;z-index:100;background-color:#0003}.render-progress-model .model{width:400px;position:relative;top:20%;left:50%;margin-left:-200px;background:#fff;border-radius:10px;box-sizing:border-box;box-shadow:1px 0 20px #0000001f}.render-progress-model .model .model-header-container{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-progress-model .model .model-header-container .close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-progress-model .model .model-header-container .close:hover mat-icon{fill:#46494c;color:#46494c}.render-progress-model .model .model-content-container{display:flex;justify-content:center;padding:20px}.render-progress-model .model .model-content-container .progress-container{width:100%;height:25px;background-color:#e0e0e0;border-radius:12px;overflow:hidden}.render-progress-model .model .model-content-container .progress-bar{position:relative;width:100%;height:18px;overflow:hidden;border-radius:999px;background-color:#e5e7eb}.render-progress-model .model .model-content-container .progress-bar-text{position:absolute;inset:0;color:#171721;display:flex;align-items:center;justify-content:center}.render-progress-model .model .model-content-container .progress-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#da9803,#fff);transition:width .3s ease}.render-progress-model .model .model-content-container .loading-dots{display:inline-flex;gap:2px;margin-left:4px}.render-progress-model .model .model-content-container .loading-dots span{width:4px;height:4px;border-radius:50%;background-color:#171721;opacity:.25;animation:loading-dot 1.2s infinite ease-in-out}.render-progress-model .model .model-content-container .loading-dots span:nth-child(2){animation-delay:.2s}.render-progress-model .model .model-content-container .loading-dots span:nth-child(3){animation-delay:.4s}@keyframes loading-dot{0%,80%,to{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}\n"], dependencies: [{ kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: AppendPipe, name: "append" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderProgressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rp-render-progress', template: `
-    @if (show) {
       <div class="render-progress-model">
         <div class="model">
           <div class="model-header-container">
-            <h3 class="model-header" [textContent]="title"></h3>
-            <div class="close" (click)="show = false">
-              <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
-            </div>
+            <h3 class="model-header" [textContent]="title | localize"></h3>
+              <!--
+                          <div class="close" (click)="show = false">
+                            <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
+                          </div>
+              -->
           </div>
           <div class="model-content-container">
-            <span class="progress-text" [textContent]="progressValue"></span>
+              @if (!rendering) {
+                  <div class="progress-bar" role="progressbar" [attr.aria-valuenow]="progress" aria-valuemin="0" aria-valuemax="100">
+                      <div class="progress-bar-fill" [style.width.%]="progress"></div>
+                      <span class="progress-bar-text" [textContent]="progress.toString() | append:'%'"></span>
+                  </div>
+              } @else {
+                  <span class="loading-dots" aria-hidden="true">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                  </span>
+              }
           </div>
         </div>
       </div>
-    }
-    `, standalone: false, styles: [".render-progress-model{position:fixed;inset:0;z-index:100;background-color:#0003}.render-progress-model .model{width:400px;position:relative;top:20%;left:50%;margin-left:-200px;background:#fff;border-radius:10px;box-sizing:border-box;box-shadow:1px 0 20px #0000001f}.render-progress-model .model .model-header-container{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-progress-model .model .model-header-container .close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-progress-model .model .model-header-container .close:hover mat-icon{fill:#46494c;color:#46494c}.render-progress-model .model .model-content-container{padding:20px}.render-progress-model .model .model-content-container .progress-text{text-align:center;margin-top:10px;display:block}.render-progress-model .model .model-content-container .progress-container{width:100%;height:25px;background-color:#e0e0e0;border-radius:12px;overflow:hidden}.render-progress-model .model .model-content-container .progress-fill{height:100%;background-color:#da9803;transition:width .3s ease-in-out}\n"] }]
-        }], ctorParameters: () => [{ type: MessageBusService }, { type: ProgressService }], propDecorators: { show: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }] } });
+    `, standalone: false, styles: [".render-progress-model{position:fixed;inset:0;z-index:100;background-color:#0003}.render-progress-model .model{width:400px;position:relative;top:20%;left:50%;margin-left:-200px;background:#fff;border-radius:10px;box-sizing:border-box;box-shadow:1px 0 20px #0000001f}.render-progress-model .model .model-header-container{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-progress-model .model .model-header-container .close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-progress-model .model .model-header-container .close:hover mat-icon{fill:#46494c;color:#46494c}.render-progress-model .model .model-content-container{display:flex;justify-content:center;padding:20px}.render-progress-model .model .model-content-container .progress-container{width:100%;height:25px;background-color:#e0e0e0;border-radius:12px;overflow:hidden}.render-progress-model .model .model-content-container .progress-bar{position:relative;width:100%;height:18px;overflow:hidden;border-radius:999px;background-color:#e5e7eb}.render-progress-model .model .model-content-container .progress-bar-text{position:absolute;inset:0;color:#171721;display:flex;align-items:center;justify-content:center}.render-progress-model .model .model-content-container .progress-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#da9803,#fff);transition:width .3s ease}.render-progress-model .model .model-content-container .loading-dots{display:inline-flex;gap:2px;margin-left:4px}.render-progress-model .model .model-content-container .loading-dots span{width:4px;height:4px;border-radius:50%;background-color:#171721;opacity:.25;animation:loading-dot 1.2s infinite ease-in-out}.render-progress-model .model .model-content-container .loading-dots span:nth-child(2){animation-delay:.2s}.render-progress-model .model .model-content-container .loading-dots span:nth-child(3){animation-delay:.4s}@keyframes loading-dot{0%,80%,to{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}\n"] }]
+        }], ctorParameters: () => [{ type: MessageBusService }] });
 
 class RenderControlsComponent {
     get disablePictureButton() {
-        return this._newRenderService.currentQueueRenderItem.renderStatus === this.renderStatus.IsRunning;
+        return this.renderService.currentQueueRenderItem.renderStatus === this.renderStatus.IsRunning;
     }
-    constructor(renderService, messageService, viewModeService, settingsService, iconService, _dialog, _sceneService, _cameraService, _configurationService, _settingsService, _newRenderService, _utilsService, _roomService, _wallMeasurementsService, _connectionHealthService, _dictionaryService) {
-        this.renderService = renderService;
+    constructor(messageService, viewModeService, settingsService, iconService, renderService, _dialog, _sceneService, _cameraService, _configurationService, _settingsService, _utilsService, _roomService, _wallMeasurementsService, _connectionHealthService, _dictionaryService, _dialogService) {
         this.messageService = messageService;
         this.viewModeService = viewModeService;
         this.settingsService = settingsService;
         this.iconService = iconService;
+        this.renderService = renderService;
         this._dialog = _dialog;
         this._sceneService = _sceneService;
         this._cameraService = _cameraService;
         this._configurationService = _configurationService;
         this._settingsService = _settingsService;
-        this._newRenderService = _newRenderService;
         this._utilsService = _utilsService;
         this._roomService = _roomService;
         this._wallMeasurementsService = _wallMeasurementsService;
         this._connectionHealthService = _connectionHealthService;
         this._dictionaryService = _dictionaryService;
+        this._dialogService = _dialogService;
         this.viewModes = ViewMode;
         this.renderStatus = RenderStatus;
         this.icons = IconEnum;
         this.renderModes = RenderModes;
+        this.imageSizes = [
+            { id: 1, name: ' 720p (HD)', width: 1280, height: 720 },
+            { id: 2, name: '1080P (HD)', width: 1920, height: 1080 },
+            { id: 3, name: '1440p (2K)', width: 2560, height: 1440 },
+            { id: 4, name: '2160p (4K)', width: 4096, height: 2160 }
+        ];
+        this.selectedImageSize = this.imageSizes[1];
         this.hdriIntensity = 1;
         this.hdriRotation = 0;
         this.lightingExposure = 1;
@@ -33966,14 +33699,22 @@ class RenderControlsComponent {
         this.showCullingErrorDialog = false;
         this.startUploading = false;
         this._subs = [];
-        this._subs.push(this.messageService.subscribe(MessageType.BlenderRenderPreviewReady, (file) => this.showPreview(file)), this.messageService.subscribe(MessageType.RenderUploadFinished, (ready) => this.hideUploadDialog(ready)), this.messageService.subscribe(MessageType.RenderError, () => this.hideUploadDialog(true)), this._cameraService.cameraMovementChanged.subscribe(() => {
+        this._subs.push(this.messageService.subscribe(MessageType.BlenderRenderPreviewReady, (file) => this.showPreview(file)), this.messageService.subscribe(MessageType.RenderFinished, (ready) => this.hideUploadDialog(ready)), this.messageService.subscribe(MessageType.RenderError, () => this.hideUploadDialog(true)), this._cameraService.cameraMovementChanged.subscribe(() => {
             this._validateRenderPosition();
             // Make sure when the camera moves, we recheck the position and if we still need to show the render warning.
+        }), this.renderService.renderImageError.subscribe((error) => {
+            if (error) {
+                this.hideUploadDialog(true);
+                this._dialogService.showDialog({ data: { title: 'Error', messages: [{ message: error }], type: 'error' } });
+            }
         }));
     }
     ngOnInit() {
         this.getRenderScenesFromSettings();
     }
+    ngOnDestroy() {
+        this._subs.forEach((sub) => sub.unsubscribe());
+    }
     showRenderForm(event) {
         this.inPictureMode = !this.inPictureMode;
         this._validateRenderPosition();
@@ -33987,16 +33728,14 @@ class RenderControlsComponent {
             this.startUploading = false;
         }
     }
-    createBlenderRender() {
+    createBlenderRender(preview = false) {
         if (!this.showCullingErrorDialog) {
             if (this.viewModeService.isTopViewActive()) {
                 this._wallMeasurementsService.prepMeasurementsForRender();
             }
-            this.messageService.emit(MessageType.ShowLoadingIndicator, { title: this._dictionaryService.get('PREPARE_TO_RENDER') });
             this.startUploading = true;
             // only render when the showCullingErrorDialog is false
             // this.messageService.emit(MessageType.ShowLoadingIndicator, {title: 'Uploading...'});
-            const renderSize = this.renderService.getImageSizeOnId(this.renderService.selectedImageSize);
             const renderSceneAssetId = this.selectedRenderScene;
             if (this.lightingExposure < 1) {
                 this.lightingExposure = 1;
@@ -34004,15 +33743,15 @@ class RenderControlsComponent {
             this._validateRenderPosition(); // Check the camera position
             const allowCulling = this._allowCulling(this.hasError);
             const renderInput = new BlenderRenderSettings();
-            renderInput.height = renderSize.height;
-            renderInput.width = renderSize.width;
+            renderInput.height = preview ? 150 : this.selectedImageSize.height;
+            renderInput.width = preview ? 275 : this.selectedImageSize.width;
             renderInput.sceneAsset = renderSceneAssetId;
             renderInput.hdriIntensity = this.hdriIntensity;
             renderInput.hdriRotation = this.hdriRotation;
             renderInput.lightingExposure = this.lightingExposure;
             renderInput.allowCulling = allowCulling;
             // this._utilsService.prepRoomForRender(false, renderInput);
-            this._newRenderService.renderRoom(renderInput);
+            this.renderService.renderRoom(renderInput, preview);
             if (this.viewModeService.isTopViewActive()) {
                 this._wallMeasurementsService.restoreMeasurementsAfterRender();
             }
@@ -34040,35 +33779,6 @@ class RenderControlsComponent {
         this._cameraService.camera.position.set(movingPosition.x, movingPosition.y, movingPosition.z);
         this._cameraService.cameraMovementChanged.next();
     }
-    createPreviewRender() {
-        if (!this.showCullingErrorDialog) {
-            if (this.viewModeService.isTopViewActive()) {
-                this._wallMeasurementsService.prepMeasurementsForRender();
-            }
-            const renderSceneAssetId = this.selectedRenderScene;
-            // this.messageService.emit(MessageType.ShowLoadingIndicator, {title: 'Uploading...'});
-            // this.messageService.emit(MessageType.ShowLoadingIndicator, {title: this._dictionaryService.get('PREPARE_TO_RENDER')});
-            this.startUploading = true;
-            if (this.lightingExposure < 1) {
-                this.lightingExposure = 1;
-            }
-            this._validateRenderPosition(); // Check the camera position
-            const allowCulling = this._allowCulling(this.hasError);
-            const renderInput = new BlenderRenderSettings();
-            renderInput.height = 150;
-            renderInput.width = 275;
-            renderInput.sceneAsset = renderSceneAssetId;
-            renderInput.hdriIntensity = this.hdriIntensity;
-            renderInput.hdriRotation = this.hdriRotation;
-            renderInput.lightingExposure = this.lightingExposure;
-            renderInput.allowCulling = allowCulling;
-            // this._utilsService.prepRoomForRender(false, renderInput, true);
-            this._newRenderService.renderRoom(renderInput, true);
-            if (this.viewModeService.isTopViewActive()) {
-                this._wallMeasurementsService.restoreMeasurementsAfterRender();
-            }
-        }
-    }
     showPreview(image) {
         this.blenderPreviewRender = image;
     }
@@ -34153,465 +33863,413 @@ class RenderControlsComponent {
         // }
         // return allowCulling;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderControlsComponent, deps: [{ token: RenderService }, { token: MessageBusService }, { token: ViewModeService }, { token: HomedecoratorSettingsService }, { token: HomedecoratorIconCacheService }, { token: i1$2.MatDialog }, { token: SceneService }, { token: CameraService }, { token: ConfigurationService }, { token: HomedecoratorSettingsService }, { token: NewRenderService }, { token: UtilsService }, { token: RoomService }, { token: WallMeasurementsService }, { token: ConnectionHeathService }, { token: HomedecoratorDictionaryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderControlsComponent, deps: [{ token: MessageBusService }, { token: ViewModeService }, { token: HomedecoratorSettingsService }, { token: HomedecoratorIconCacheService }, { token: RenderService }, { token: i1$2.MatDialog }, { token: SceneService }, { token: CameraService }, { token: ConfigurationService }, { token: HomedecoratorSettingsService }, { token: UtilsService }, { token: RoomService }, { token: WallMeasurementsService }, { token: ConnectionHeathService }, { token: HomedecoratorDictionaryService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RenderControlsComponent, isStandalone: false, selector: "rp-render-controls", viewQueries: [{ propertyName: "renderButton", first: true, predicate: ["renderButton"], descendants: true }], ngImport: i0, template: `
-      @if (renderService.serverData &&  renderService.serverData.renderMode !== renderService.renderModes.RenderShop) {
-        <div class="render-container"
-          >
-          @if (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsRunning || renderService.currentQueueRenderItem.renderStatus === renderStatus.IsSuccess) {
-            <div class="render-progress"
-              >
-              {{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsSuccess && renderService.currentQueueRenderItem.renderProgress === 100 ? "RENDER_READY" : "") | localize }}
-              {{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsSuccess && renderService.currentQueueRenderItem.renderProgress !== 100 ? "RENDER_STOPPED" : "") | localize }}
-              {{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsRunning) ? renderService.currentQueueRenderItem.renderProgress + "%" : "" }}
-            </div>
-          }
-          <!-- the Yellow render indicators -->
-          @if (inPictureMode) {
-            <div class="render-indicators">
-              <div class="render-indicator-top-left"></div>
-              <div class="render-indicator-top-right"></div>
-              <div class="render-indicator-bottom-left"></div>
-              <div class="render-indicator-bottom-right"></div>
-            </div>
-          }
-          @if (inPictureMode) {
-            <div class="render-popup-container">
-              <div class="render-popup-header">
-                <h3>
-                  <span>{{ 'PICTURE_MODE' | localize }}</span>
-                  @if (hasError) {
-                    <co-icon class="renderErrorIcon" [iconData]="iconService.getIcon(icons.TriangleExclamation)"
-                    [matTooltip]="'BLENDER_RENDER_ERROR' | localize"></co-icon>
-                  }
-                </h3>
-                <button
-                  class="close-popup-container"
-                  (click)="resetBlenderRenderScene()">
-                  <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
-                </button>
-              </div>
-              <div class="render-popup-preview">
-                @if (blenderPreviewRender) {
-                  <img [src]="blenderPreviewRender" alt="">
-                }
-                @if (!blenderPreviewRender) {
-                  <div class="render-popup-preview-placeholder">
-                    <span>{{ 'PREVIEW' | localize }}</span>
-                  </div>
-                }
-                <button
-                  class="render-popup-refresh-preview"
-                  (click)="createPreviewRender()"
-                  >
-                  <co-icon [iconData]="iconService.getIcon(icons.RetryButton)"></co-icon>
-                </button>
-              </div>
-              @if (renderService.blendFilesRender) {
-                <div class="render-popup-dropdown">
-                  <div class="toggleable" (click)="toggleRenderSettings()">
-                    <p>
-                      @if (!showRenderSettings) {
-                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_SHOW' | localize"></span>
-                      }
-                      @if (showRenderSettings) {
-                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_HIDE' | localize"></span>
-                      }
-                    </p>
-                    <co-icon [ngClass]="{'icon-rotate': showRenderSettings}"
-                    [iconData]="iconService.getIcon(icons.ArrowPointDown)"></co-icon>
-                  </div>
-                  @if (showRenderSettings) {
-                    <div class="advanced-render-settings">
-                      <div class="setting-part-container">
-                        @if (renderService.serverData.renderMode === renderModes.RenderRoom) {
-                          <mat-form-field
-                            class="face-select-form"
-                            >
-                            <mat-label>{{ "ENVIRONMENT" | localize }}</mat-label>
-                            <mat-select [(ngModel)]="selectedRenderScene" (selectionChange)="updateBlenderSceneSettings($event)">
-                              @for (scene of sceneList; track scene) {
-                                <mat-option
-                                  [value]="scene">{{ scene.name }}
-                                </mat-option>
-                              }
-                            </mat-select>
-                          </mat-form-field>
+        <div class="render-container">
+            @if (startUploading) {
+                <rp-render-progress></rp-render-progress>
+            }
+            <!-- the Yellow render indicators -->
+            @if (inPictureMode) {
+                <div class="render-indicators">
+                    <div class="render-indicator-top-left"></div>
+                    <div class="render-indicator-top-right"></div>
+                    <div class="render-indicator-bottom-left"></div>
+                    <div class="render-indicator-bottom-right"></div>
+                </div>
+                <div class="render-popup-container">
+                    <div class="render-popup-header">
+                        <h3>
+                            <span>{{ 'PICTURE_MODE' | localize }}</span>
+                            @if (hasError) {
+                                <co-icon class="renderErrorIcon" [iconData]="iconService.getIcon(icons.TriangleExclamation)"
+                                         [matTooltip]="'BLENDER_RENDER_ERROR' | localize"></co-icon>
+                            }
+                        </h3>
+                        <button
+                                class="close-popup-container"
+                                (click)="resetBlenderRenderScene()">
+                            <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
+                        </button>
+                    </div>
+                    <div class="render-popup-preview">
+                        @if (blenderPreviewRender) {
+                            <img [src]="blenderPreviewRender" alt="">
                         }
-                      </div>
-                      <div class="setting-part-container">
-                        <mat-form-field class="third-width">
-                          <mat-label [textContent]="'ENVIRONMENT_LIGHT' | localize"></mat-label>
-                          <input
-                            [type]="'number'"
-                            matInput
-                            [(ngModel)]="hdriIntensity"
-                            (ngModelChange)="hdriIntensity = +$event">
-                          </mat-form-field>
-                          <div class="setting-part-buttons">
-                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity - 1">
-                              <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
-                            </button>
-                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity + 1">
-                              <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
-                            </button>
-                          </div>
-                          <div class="setting-part-slider">
-                            <mat-slider class="value" min="1" max="20" step="1" [(ngModel)]="hdriIntensity"></mat-slider>
-                          </div>
-                        </div>
-                        <div class="setting-part-container">
-                          <mat-form-field class="third-width">
-                            <mat-label [textContent]="'ROTATION' | localize"></mat-label>
-                            <input
-                              [type]="'number'"
-                              matInput
-                              [(ngModel)]="hdriRotation"
-                              (ngModelChange)="hdriRotation = +$event">
-                            </mat-form-field>
-                            <div class="setting-part-buttons">
-                              <button class="amount-button" (click)="hdriRotation = +hdriRotation - 1">
-                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
-                              </button>
-                              <button class="amount-button" (click)="hdriRotation = +hdriRotation + 1">
-                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
-                              </button>
-                            </div>
-                            <div class="setting-part-slider">
-                              <mat-slider class="value" min="0" max="360" step="1" [(ngModel)]="hdriRotation"></mat-slider>
+                        @if (!blenderPreviewRender) {
+                            <div class="render-popup-preview-placeholder">
+                                <span>{{ 'PREVIEW' | localize }}</span>
                             </div>
-                          </div>
-                          <div class="setting-part-container">
-                            <mat-form-field class="third-width">
-                              <mat-label [textContent]="'LIGHTS' | localize"></mat-label>
-                              <input
-                                [type]="'number'"
-                                matInput
-                                [(ngModel)]="lightingExposure"
-                                (ngModelChange)="lightingExposure = +$event">
-                              </mat-form-field>
-                              <div class="setting-part-buttons">
-                                <button class="amount-button" (click)="lightingExposure = +lightingExposure - 1">
-                                  <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
-                                </button>
-                                <button class="amount-button" (click)="lightingExposure = +lightingExposure + 1">
-                                  <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
-                                </button>
-                              </div>
-                              <div class="setting-part-slider">
-                                <mat-slider class="value" min="1" max="10" step="1" [(ngModel)]="lightingExposure"></mat-slider>
-                              </div>
-                            </div>
-                          </div>
                         }
-                      </div>
+                        <button class="render-popup-refresh-preview" (click)="createBlenderRender(true)">
+                            <co-icon [iconData]="iconService.getIcon(icons.RetryButton)"></co-icon>
+                        </button>
+                    </div>
+                    @if (renderService.blendFilesRender) {
+                        <div class="render-popup-dropdown">
+                            <div class="toggleable" (click)="toggleRenderSettings()">
+                                <p>
+                                    @if (!showRenderSettings) {
+                                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_SHOW' | localize"></span>
+                                    }
+                                    @if (showRenderSettings) {
+                                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_HIDE' | localize"></span>
+                                    }
+                                </p>
+                                <co-icon [ngClass]="{'icon-rotate': showRenderSettings}"
+                                         [iconData]="iconService.getIcon(icons.ArrowPointDown)"></co-icon>
+                            </div>
+                            @if (showRenderSettings) {
+                                <div class="advanced-render-settings">
+                                    <div class="setting-part-container">
+                                        <mat-form-field
+                                                class="face-select-form"
+                                        >
+                                            <mat-label>{{ "ENVIRONMENT" | localize }}</mat-label>
+                                            <mat-select [(ngModel)]="selectedRenderScene" (selectionChange)="updateBlenderSceneSettings($event)">
+                                                @for (scene of sceneList; track scene) {
+                                                    <mat-option
+                                                            [value]="scene">{{ scene.name }}
+                                                    </mat-option>
+                                                }
+                                            </mat-select>
+                                        </mat-form-field>
+                                    </div>
+                                    <div class="setting-part-container">
+                                        <mat-form-field class="third-width">
+                                            <mat-label [textContent]="'ENVIRONMENT_LIGHT' | localize"></mat-label>
+                                            <input
+                                                    [type]="'number'"
+                                                    matInput
+                                                    [(ngModel)]="hdriIntensity"
+                                                    (ngModelChange)="hdriIntensity = +$event">
+                                        </mat-form-field>
+                                        <div class="setting-part-buttons">
+                                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity - 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
+                                            </button>
+                                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity + 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
+                                            </button>
+                                        </div>
+                                        <div class="setting-part-slider">
+                                            <mat-slider class="value" min="1" max="20" step="1" [(ngModel)]="hdriIntensity"></mat-slider>
+                                        </div>
+                                    </div>
+                                    <div class="setting-part-container">
+                                        <mat-form-field class="third-width">
+                                            <mat-label [textContent]="'ROTATION' | localize"></mat-label>
+                                            <input
+                                                    [type]="'number'"
+                                                    matInput
+                                                    [(ngModel)]="hdriRotation"
+                                                    (ngModelChange)="hdriRotation = +$event">
+                                        </mat-form-field>
+                                        <div class="setting-part-buttons">
+                                            <button class="amount-button" (click)="hdriRotation = +hdriRotation - 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
+                                            </button>
+                                            <button class="amount-button" (click)="hdriRotation = +hdriRotation + 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
+                                            </button>
+                                        </div>
+                                        <div class="setting-part-slider">
+                                            <mat-slider class="value" min="0" max="360" step="1" [(ngModel)]="hdriRotation"></mat-slider>
+                                        </div>
+                                    </div>
+                                    <div class="setting-part-container">
+                                        <mat-form-field class="third-width">
+                                            <mat-label [textContent]="'LIGHTS' | localize"></mat-label>
+                                            <input
+                                                    [type]="'number'"
+                                                    matInput
+                                                    [(ngModel)]="lightingExposure"
+                                                    (ngModelChange)="lightingExposure = +$event">
+                                        </mat-form-field>
+                                        <div class="setting-part-buttons">
+                                            <button class="amount-button" (click)="lightingExposure = +lightingExposure - 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
+                                            </button>
+                                            <button class="amount-button" (click)="lightingExposure = +lightingExposure + 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
+                                            </button>
+                                        </div>
+                                        <div class="setting-part-slider">
+                                            <mat-slider class="value" min="1" max="10" step="1" [(ngModel)]="lightingExposure"></mat-slider>
+                                        </div>
+                                    </div>
+                                </div>
+                            }
+                        </div>
                     }
-                    @if (renderService.serverData.renderMode === renderModes.RenderRoom) {
-                      <div class="render-popup-dropdown">
+                    <div class="render-popup-dropdown">
                         <mat-form-field class="face-select-form">
-                          <mat-label>{{ "IMAGE_SIZE" | localize }}</mat-label>
-                          <mat-select [(ngModel)]="renderService.selectedImageSize">
-                            @for (size of renderService.imageSizes; track size) {
-                              <mat-option [value]="size.id">{{ size.name }} {{ size.width }}
-                                x{{ size.height }}
-                              </mat-option>
-                            }
-                          </mat-select>
+                            <mat-label>{{ "IMAGE_SIZE" | localize }}</mat-label>
+                            <mat-select [(value)]="selectedImageSize">
+                                @for (size of imageSizes; track size) {
+                                    <mat-option [value]="size">{{ size.name }} {{ size.width }}
+                                        x{{ size.height }}
+                                    </mat-option>
+                                }
+                            </mat-select>
                         </mat-form-field>
-                      </div>
-                    }
+                    </div>
                     <div class="render-popup-button-container">
-                      <button class="render-popup-button photo-button"
-                        (click)="createBlenderRender()"
-                        title="{{'MAKE_A_PICTURE' | localize}}"
-                        [disabled]="disablePictureButton">
-                        <co-icon [iconData]="iconService.getIcon(icons.CircleCheck)"></co-icon>
-                        {{ 'MAKE_A_PICTURE' | localize }}
-                      </button>
-                      <button
-                        class="render-popup-button cancel-button"
-                        (click)="resetBlenderRenderScene()">
-                        <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
-                        {{ 'CLOSE_PHOTO_MODE' | localize }}
-                      </button>
+                        <button class="render-popup-button photo-button"
+                                (click)="createBlenderRender()"
+                                title="{{'MAKE_A_PICTURE' | localize}}"
+                                [disabled]="disablePictureButton">
+                            <co-icon [iconData]="iconService.getIcon(icons.CircleCheck)"></co-icon>
+                            {{ 'MAKE_A_PICTURE' | localize }}
+                        </button>
+                        <button
+                                class="render-popup-button cancel-button"
+                                (click)="resetBlenderRenderScene()">
+                            <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
+                            {{ 'CLOSE_PHOTO_MODE' | localize }}
+                        </button>
                     </div>
-                  </div>
-                }
-                @if (showCullingErrorDialog) {
-                  <div class="render-warning">
+                </div>
+            }
+            @if (showCullingErrorDialog) {
+                <div class="render-warning">
                     <div class="render-warming-header">
-                      <h2>{{ 'BLENDER_RENDER_ERROR_TITLE' | localize }}</h2>
-                      <div class="render-warning-close" (click)="showCullingErrorDialog = false">
-                        <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
-                      </div>
+                        <h2>{{ 'BLENDER_RENDER_ERROR_TITLE' | localize }}</h2>
+                        <div class="render-warning-close" (click)="showCullingErrorDialog = false">
+                            <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
+                        </div>
                     </div>
                     <div class="render-warning-body">
-                      <p>{{ 'BLENDER_RENDER_WARNING_CULLING' | localize }}</p>
+                        <p>{{ 'BLENDER_RENDER_WARNING_CULLING' | localize }}</p>
                     </div>
                     <div class="render-warning-footer">
-                      <button
-                        class="render-popup-button cancel-button"
-                        (click)="showCullingErrorDialog = false">
-                        <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
-                        {{ 'CLOSE' | localize }}
-                      </button>
+                        <button
+                                class="render-popup-button cancel-button"
+                                (click)="showCullingErrorDialog = false">
+                            <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
+                            {{ 'CLOSE' | localize }}
+                        </button>
                     </div>
-                  </div>
-                }
-                <rp-render-progress
-                  [title]="'PREPARE_TO_RENDER' | localize"
-                  [show]="startUploading"
-                  >
-                </rp-render-progress>
-                <button
-                  #renderButton
-                  mat-raised-button
-                  matTooltip="{{'RENDER_TAKE_A_PICTURE' | localize}}"
-                  [id]="'standalone_render_picture'"
-                  [class.active]="(
-        (renderService.serverData.renderMode === renderService.renderModes.RenderRoom && viewModeService.viewMode === viewModes.WalkThrough) ||
-        (renderService.serverData.renderMode === renderService.renderModes.RenderIone))"
-                  (click)="showRenderForm($event)"
-                  >
-                  <mat-icon class="icon homedecorator-material-icons"
-                    aria-hidden="true">{{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsRunning ? 'open_in_browser' : 'photo_camera') }}
-                  </mat-icon>
-                </button>
-              </div>
+                </div>
             }
-      
-      `, isInline: true, styles: [".render-container{position:relative}.render-container .render-popup-container{background:#ffffffb3;padding:10px 25px 25px;border-radius:5px;box-shadow:0 1px 5px #0000001f}.render-container .render-popup-container .render-popup-header{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-header h3{display:flex;justify-content:space-between}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon{width:20px;height:20px;margin-left:20px}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg,.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg polygon{fill:#dc143c}.render-container .render-popup-container .render-popup-header .close-popup-container{cursor:pointer;border:none;background:none;float:none;height:auto;width:auto}.render-container .render-popup-container .render-popup-button-container{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-button-container .render-popup-button{float:none;width:100%;max-width:130px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-button-container .photo-button{color:#fff;background-color:#dda73f}.render-container .render-popup-container .render-popup-button-container .cancel-button{color:#fff;background-color:#5b6875}.render-container .render-popup-container .render-popup-preview{background-color:#fff;min-height:150px;min-width:275px;margin:5px 0;position:relative;width:275px;height:150px}.render-container .render-popup-container .render-popup-preview .render-popup-preview-placeholder{background-color:#fff;display:flex;justify-content:space-around;align-items:center;vertical-align:middle;min-height:150px;border:1px solid #ddd;color:#ddd;font-size:14px}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview{position:absolute;bottom:0;right:0;cursor:pointer;border-radius:0;border:none;height:30px;width:30px;background-color:#dda73f;color:#fff;margin:0}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-dropdown{margin:5px 0;width:100%}.render-container .render-popup-container .render-popup-dropdown .toggleable{cursor:pointer;display:flex;justify-content:right;align-content:center}.render-container .render-popup-container .render-popup-dropdown .toggleable p{padding:0;margin:0;font-size:12px;line-height:30px}.render-container .render-popup-container .render-popup-dropdown .toggleable .icon-rotate{transform:rotate(180deg)}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field{width:100%;font-size:14px}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-flex{background-color:#fff;color:#000;padding:3px 6px;border:1px solid #ddd}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-underline{display:none}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper{padding-bottom:0}.render-container .render-popup-container .render-popup-dropdown .setting-part-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .third-width{width:32%}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button{float:none;box-sizing:border-box;padding:2px;background:none;cursor:pointer;border:none;width:25px;height:25px;margin:0 5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon{display:block;width:25px;height:25px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon ::ng-deep svg{fill:#5b6875}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-slider .mat-slider-horizontal{min-width:110px;height:28px}.render-container .render-progress{float:left;min-width:50px;border-radius:25px;line-height:50px;text-align:center;padding:0 60px 0 20px;background:#fff;color:#74b77f;font-weight:700;margin:0 -50px 0 0}.render-container .render-input-container{float:right}.render-container .render-input-container input{width:100px;height:24px;margin:5px 0;padding:0 10px;font-size:14px}.render-container button{pointer-events:all;width:50px;height:50px;float:right;border-radius:100%;position:relative;z-index:2;margin-bottom:10px}.render-container button.active{background:#74b77f;color:#fff}.render-container button>*{pointer-events:none}.render-indicators div{position:fixed;width:100px;height:100px}.render-indicators .render-indicator-top-left{left:5vw;top:10vh;border-left:10px solid #dda73f;border-top:10px solid #dda73f;border-top-left-radius:20px}.render-indicators .render-indicator-top-right{right:5vw;top:10vh;border-right:10px solid #dda73f;border-top:10px solid #dda73f;border-top-right-radius:20px}.render-indicators .render-indicator-bottom-left{left:5vw;bottom:5vh;border-left:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-left-radius:20px}.render-indicators .render-indicator-bottom-right{right:5vw;bottom:5vh;border-right:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-right-radius:20px}.render-warning{width:500px;position:fixed;top:20%;left:calc(50% - 250px);border-radius:15px;box-sizing:border-box;background-color:#fff;box-shadow:1px 0 20px #0000001f}.render-warning .render-warming-header{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-warning .render-warming-header h2{padding:0;margin:0}.render-warning .render-warming-header .render-warning-close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-warning .render-warming-header .render-warning-close:hover mat-icon{fill:#46494c;color:#46494c}.render-warning .render-warning-body{padding:10px 20px}.render-warning .render-warning-footer{display:flex;justify-content:center;padding:0 20px 10px}.render-warning .render-warning-footer .render-popup-button{float:none;width:110px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly;color:#fff;background-color:#5b6875}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon svg path{fill:#fff}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i3$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "component", type: RenderProgressComponent, selector: "rp-render-progress", inputs: ["show", "title"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+            <button
+                    #renderButton
+                    mat-raised-button
+                    matTooltip="{{'RENDER_TAKE_A_PICTURE' | localize}}"
+                    [id]="'standalone_render_picture'"
+                    [class.active]="viewModeService.viewMode === viewModes.WalkThrough"
+                    (click)="showRenderForm($event)">
+                <mat-icon class="icon homedecorator-material-icons"
+                          aria-hidden="true">{{ 'photo_camera' }}
+                </mat-icon>
+            </button>
+        </div>
+    `, isInline: true, styles: [".render-container{position:relative}.render-container .render-popup-container{background:#ffffffb3;padding:10px 25px 25px;border-radius:5px;box-shadow:0 1px 5px #0000001f}.render-container .render-popup-container .render-popup-header{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-header h3{display:flex;justify-content:space-between}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon{width:20px;height:20px;margin-left:20px}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg,.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg polygon{fill:#dc143c}.render-container .render-popup-container .render-popup-header .close-popup-container{cursor:pointer;border:none;background:none;float:none;height:auto;width:auto}.render-container .render-popup-container .render-popup-button-container{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-button-container .render-popup-button{float:none;width:100%;max-width:130px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-button-container .photo-button{color:#fff;background-color:#dda73f}.render-container .render-popup-container .render-popup-button-container .cancel-button{color:#fff;background-color:#5b6875}.render-container .render-popup-container .render-popup-preview{background-color:#fff;min-height:150px;min-width:275px;margin:5px 0;position:relative;width:275px;height:150px}.render-container .render-popup-container .render-popup-preview .render-popup-preview-placeholder{background-color:#fff;display:flex;justify-content:space-around;align-items:center;vertical-align:middle;min-height:150px;border:1px solid #ddd;color:#ddd;font-size:14px}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview{position:absolute;bottom:0;right:0;cursor:pointer;border-radius:0;border:none;height:30px;width:30px;background-color:#dda73f;color:#fff;margin:0}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-dropdown{margin:5px 0;width:100%}.render-container .render-popup-container .render-popup-dropdown .toggleable{cursor:pointer;display:flex;justify-content:right;align-content:center}.render-container .render-popup-container .render-popup-dropdown .toggleable p{padding:0;margin:0;font-size:12px;line-height:30px}.render-container .render-popup-container .render-popup-dropdown .toggleable .icon-rotate{transform:rotate(180deg)}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field{width:100%;font-size:14px}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-flex{background-color:#fff;color:#000;padding:3px 6px;border:1px solid #ddd}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-underline{display:none}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper{padding-bottom:0}.render-container .render-popup-container .render-popup-dropdown .setting-part-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .third-width{width:32%}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button{float:none;box-sizing:border-box;padding:2px;background:none;cursor:pointer;border:none;width:25px;height:25px;margin:0 5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon{display:block;width:25px;height:25px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon ::ng-deep svg{fill:#5b6875}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-slider .mat-slider-horizontal{min-width:110px;height:28px}.render-container .render-progress{float:left;min-width:50px;border-radius:25px;line-height:50px;text-align:center;padding:0 60px 0 20px;background:#fff;color:#74b77f;font-weight:700;margin:0 -50px 0 0}.render-container .render-input-container{float:right}.render-container .render-input-container input{width:100px;height:24px;margin:5px 0;padding:0 10px;font-size:14px}.render-container button{pointer-events:all;width:50px;height:50px;float:right;border-radius:100%;position:relative;z-index:2;margin-bottom:10px}.render-container button.active{background:#74b77f;color:#fff}.render-container button>*{pointer-events:none}.render-indicators div{position:fixed;width:100px;height:100px}.render-indicators .render-indicator-top-left{left:5vw;top:10vh;border-left:10px solid #dda73f;border-top:10px solid #dda73f;border-top-left-radius:20px}.render-indicators .render-indicator-top-right{right:5vw;top:10vh;border-right:10px solid #dda73f;border-top:10px solid #dda73f;border-top-right-radius:20px}.render-indicators .render-indicator-bottom-left{left:5vw;bottom:5vh;border-left:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-left-radius:20px}.render-indicators .render-indicator-bottom-right{right:5vw;bottom:5vh;border-right:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-right-radius:20px}.render-warning{width:500px;position:fixed;top:20%;left:calc(50% - 250px);border-radius:15px;box-sizing:border-box;background-color:#fff;box-shadow:1px 0 20px #0000001f}.render-warning .render-warming-header{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-warning .render-warming-header h2{padding:0;margin:0}.render-warning .render-warming-header .render-warning-close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-warning .render-warming-header .render-warning-close:hover mat-icon{fill:#46494c;color:#46494c}.render-warning .render-warning-body{padding:10px 20px}.render-warning .render-warning-footer{display:flex;justify-content:center;padding:0 20px 10px}.render-warning .render-warning-footer .render-popup-button{float:none;width:110px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly;color:#fff;background-color:#5b6875}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon svg path{fill:#fff}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i3$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "component", type: RenderProgressComponent, selector: "rp-render-progress" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderControlsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rp-render-controls', template: `
-      @if (renderService.serverData &&  renderService.serverData.renderMode !== renderService.renderModes.RenderShop) {
-        <div class="render-container"
-          >
-          @if (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsRunning || renderService.currentQueueRenderItem.renderStatus === renderStatus.IsSuccess) {
-            <div class="render-progress"
-              >
-              {{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsSuccess && renderService.currentQueueRenderItem.renderProgress === 100 ? "RENDER_READY" : "") | localize }}
-              {{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsSuccess && renderService.currentQueueRenderItem.renderProgress !== 100 ? "RENDER_STOPPED" : "") | localize }}
-              {{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsRunning) ? renderService.currentQueueRenderItem.renderProgress + "%" : "" }}
-            </div>
-          }
-          <!-- the Yellow render indicators -->
-          @if (inPictureMode) {
-            <div class="render-indicators">
-              <div class="render-indicator-top-left"></div>
-              <div class="render-indicator-top-right"></div>
-              <div class="render-indicator-bottom-left"></div>
-              <div class="render-indicator-bottom-right"></div>
-            </div>
-          }
-          @if (inPictureMode) {
-            <div class="render-popup-container">
-              <div class="render-popup-header">
-                <h3>
-                  <span>{{ 'PICTURE_MODE' | localize }}</span>
-                  @if (hasError) {
-                    <co-icon class="renderErrorIcon" [iconData]="iconService.getIcon(icons.TriangleExclamation)"
-                    [matTooltip]="'BLENDER_RENDER_ERROR' | localize"></co-icon>
-                  }
-                </h3>
-                <button
-                  class="close-popup-container"
-                  (click)="resetBlenderRenderScene()">
-                  <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
-                </button>
-              </div>
-              <div class="render-popup-preview">
-                @if (blenderPreviewRender) {
-                  <img [src]="blenderPreviewRender" alt="">
-                }
-                @if (!blenderPreviewRender) {
-                  <div class="render-popup-preview-placeholder">
-                    <span>{{ 'PREVIEW' | localize }}</span>
-                  </div>
-                }
-                <button
-                  class="render-popup-refresh-preview"
-                  (click)="createPreviewRender()"
-                  >
-                  <co-icon [iconData]="iconService.getIcon(icons.RetryButton)"></co-icon>
-                </button>
-              </div>
-              @if (renderService.blendFilesRender) {
-                <div class="render-popup-dropdown">
-                  <div class="toggleable" (click)="toggleRenderSettings()">
-                    <p>
-                      @if (!showRenderSettings) {
-                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_SHOW' | localize"></span>
-                      }
-                      @if (showRenderSettings) {
-                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_HIDE' | localize"></span>
-                      }
-                    </p>
-                    <co-icon [ngClass]="{'icon-rotate': showRenderSettings}"
-                    [iconData]="iconService.getIcon(icons.ArrowPointDown)"></co-icon>
-                  </div>
-                  @if (showRenderSettings) {
-                    <div class="advanced-render-settings">
-                      <div class="setting-part-container">
-                        @if (renderService.serverData.renderMode === renderModes.RenderRoom) {
-                          <mat-form-field
-                            class="face-select-form"
-                            >
-                            <mat-label>{{ "ENVIRONMENT" | localize }}</mat-label>
-                            <mat-select [(ngModel)]="selectedRenderScene" (selectionChange)="updateBlenderSceneSettings($event)">
-                              @for (scene of sceneList; track scene) {
-                                <mat-option
-                                  [value]="scene">{{ scene.name }}
-                                </mat-option>
-                              }
-                            </mat-select>
-                          </mat-form-field>
+        <div class="render-container">
+            @if (startUploading) {
+                <rp-render-progress></rp-render-progress>
+            }
+            <!-- the Yellow render indicators -->
+            @if (inPictureMode) {
+                <div class="render-indicators">
+                    <div class="render-indicator-top-left"></div>
+                    <div class="render-indicator-top-right"></div>
+                    <div class="render-indicator-bottom-left"></div>
+                    <div class="render-indicator-bottom-right"></div>
+                </div>
+                <div class="render-popup-container">
+                    <div class="render-popup-header">
+                        <h3>
+                            <span>{{ 'PICTURE_MODE' | localize }}</span>
+                            @if (hasError) {
+                                <co-icon class="renderErrorIcon" [iconData]="iconService.getIcon(icons.TriangleExclamation)"
+                                         [matTooltip]="'BLENDER_RENDER_ERROR' | localize"></co-icon>
+                            }
+                        </h3>
+                        <button
+                                class="close-popup-container"
+                                (click)="resetBlenderRenderScene()">
+                            <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
+                        </button>
+                    </div>
+                    <div class="render-popup-preview">
+                        @if (blenderPreviewRender) {
+                            <img [src]="blenderPreviewRender" alt="">
                         }
-                      </div>
-                      <div class="setting-part-container">
-                        <mat-form-field class="third-width">
-                          <mat-label [textContent]="'ENVIRONMENT_LIGHT' | localize"></mat-label>
-                          <input
-                            [type]="'number'"
-                            matInput
-                            [(ngModel)]="hdriIntensity"
-                            (ngModelChange)="hdriIntensity = +$event">
-                          </mat-form-field>
-                          <div class="setting-part-buttons">
-                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity - 1">
-                              <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
-                            </button>
-                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity + 1">
-                              <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
-                            </button>
-                          </div>
-                          <div class="setting-part-slider">
-                            <mat-slider class="value" min="1" max="20" step="1" [(ngModel)]="hdriIntensity"></mat-slider>
-                          </div>
-                        </div>
-                        <div class="setting-part-container">
-                          <mat-form-field class="third-width">
-                            <mat-label [textContent]="'ROTATION' | localize"></mat-label>
-                            <input
-                              [type]="'number'"
-                              matInput
-                              [(ngModel)]="hdriRotation"
-                              (ngModelChange)="hdriRotation = +$event">
-                            </mat-form-field>
-                            <div class="setting-part-buttons">
-                              <button class="amount-button" (click)="hdriRotation = +hdriRotation - 1">
-                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
-                              </button>
-                              <button class="amount-button" (click)="hdriRotation = +hdriRotation + 1">
-                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
-                              </button>
-                            </div>
-                            <div class="setting-part-slider">
-                              <mat-slider class="value" min="0" max="360" step="1" [(ngModel)]="hdriRotation"></mat-slider>
-                            </div>
-                          </div>
-                          <div class="setting-part-container">
-                            <mat-form-field class="third-width">
-                              <mat-label [textContent]="'LIGHTS' | localize"></mat-label>
-                              <input
-                                [type]="'number'"
-                                matInput
-                                [(ngModel)]="lightingExposure"
-                                (ngModelChange)="lightingExposure = +$event">
-                              </mat-form-field>
-                              <div class="setting-part-buttons">
-                                <button class="amount-button" (click)="lightingExposure = +lightingExposure - 1">
-                                  <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
-                                </button>
-                                <button class="amount-button" (click)="lightingExposure = +lightingExposure + 1">
-                                  <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
-                                </button>
-                              </div>
-                              <div class="setting-part-slider">
-                                <mat-slider class="value" min="1" max="10" step="1" [(ngModel)]="lightingExposure"></mat-slider>
-                              </div>
+                        @if (!blenderPreviewRender) {
+                            <div class="render-popup-preview-placeholder">
+                                <span>{{ 'PREVIEW' | localize }}</span>
                             </div>
-                          </div>
                         }
-                      </div>
+                        <button class="render-popup-refresh-preview" (click)="createBlenderRender(true)">
+                            <co-icon [iconData]="iconService.getIcon(icons.RetryButton)"></co-icon>
+                        </button>
+                    </div>
+                    @if (renderService.blendFilesRender) {
+                        <div class="render-popup-dropdown">
+                            <div class="toggleable" (click)="toggleRenderSettings()">
+                                <p>
+                                    @if (!showRenderSettings) {
+                                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_SHOW' | localize"></span>
+                                    }
+                                    @if (showRenderSettings) {
+                                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_HIDE' | localize"></span>
+                                    }
+                                </p>
+                                <co-icon [ngClass]="{'icon-rotate': showRenderSettings}"
+                                         [iconData]="iconService.getIcon(icons.ArrowPointDown)"></co-icon>
+                            </div>
+                            @if (showRenderSettings) {
+                                <div class="advanced-render-settings">
+                                    <div class="setting-part-container">
+                                        <mat-form-field
+                                                class="face-select-form"
+                                        >
+                                            <mat-label>{{ "ENVIRONMENT" | localize }}</mat-label>
+                                            <mat-select [(ngModel)]="selectedRenderScene" (selectionChange)="updateBlenderSceneSettings($event)">
+                                                @for (scene of sceneList; track scene) {
+                                                    <mat-option
+                                                            [value]="scene">{{ scene.name }}
+                                                    </mat-option>
+                                                }
+                                            </mat-select>
+                                        </mat-form-field>
+                                    </div>
+                                    <div class="setting-part-container">
+                                        <mat-form-field class="third-width">
+                                            <mat-label [textContent]="'ENVIRONMENT_LIGHT' | localize"></mat-label>
+                                            <input
+                                                    [type]="'number'"
+                                                    matInput
+                                                    [(ngModel)]="hdriIntensity"
+                                                    (ngModelChange)="hdriIntensity = +$event">
+                                        </mat-form-field>
+                                        <div class="setting-part-buttons">
+                                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity - 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
+                                            </button>
+                                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity + 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
+                                            </button>
+                                        </div>
+                                        <div class="setting-part-slider">
+                                            <mat-slider class="value" min="1" max="20" step="1" [(ngModel)]="hdriIntensity"></mat-slider>
+                                        </div>
+                                    </div>
+                                    <div class="setting-part-container">
+                                        <mat-form-field class="third-width">
+                                            <mat-label [textContent]="'ROTATION' | localize"></mat-label>
+                                            <input
+                                                    [type]="'number'"
+                                                    matInput
+                                                    [(ngModel)]="hdriRotation"
+                                                    (ngModelChange)="hdriRotation = +$event">
+                                        </mat-form-field>
+                                        <div class="setting-part-buttons">
+                                            <button class="amount-button" (click)="hdriRotation = +hdriRotation - 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
+                                            </button>
+                                            <button class="amount-button" (click)="hdriRotation = +hdriRotation + 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
+                                            </button>
+                                        </div>
+                                        <div class="setting-part-slider">
+                                            <mat-slider class="value" min="0" max="360" step="1" [(ngModel)]="hdriRotation"></mat-slider>
+                                        </div>
+                                    </div>
+                                    <div class="setting-part-container">
+                                        <mat-form-field class="third-width">
+                                            <mat-label [textContent]="'LIGHTS' | localize"></mat-label>
+                                            <input
+                                                    [type]="'number'"
+                                                    matInput
+                                                    [(ngModel)]="lightingExposure"
+                                                    (ngModelChange)="lightingExposure = +$event">
+                                        </mat-form-field>
+                                        <div class="setting-part-buttons">
+                                            <button class="amount-button" (click)="lightingExposure = +lightingExposure - 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
+                                            </button>
+                                            <button class="amount-button" (click)="lightingExposure = +lightingExposure + 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
+                                            </button>
+                                        </div>
+                                        <div class="setting-part-slider">
+                                            <mat-slider class="value" min="1" max="10" step="1" [(ngModel)]="lightingExposure"></mat-slider>
+                                        </div>
+                                    </div>
+                                </div>
+                            }
+                        </div>
                     }
-                    @if (renderService.serverData.renderMode === renderModes.RenderRoom) {
-                      <div class="render-popup-dropdown">
+                    <div class="render-popup-dropdown">
                         <mat-form-field class="face-select-form">
-                          <mat-label>{{ "IMAGE_SIZE" | localize }}</mat-label>
-                          <mat-select [(ngModel)]="renderService.selectedImageSize">
-                            @for (size of renderService.imageSizes; track size) {
-                              <mat-option [value]="size.id">{{ size.name }} {{ size.width }}
-                                x{{ size.height }}
-                              </mat-option>
-                            }
-                          </mat-select>
+                            <mat-label>{{ "IMAGE_SIZE" | localize }}</mat-label>
+                            <mat-select [(value)]="selectedImageSize">
+                                @for (size of imageSizes; track size) {
+                                    <mat-option [value]="size">{{ size.name }} {{ size.width }}
+                                        x{{ size.height }}
+                                    </mat-option>
+                                }
+                            </mat-select>
                         </mat-form-field>
-                      </div>
-                    }
+                    </div>
                     <div class="render-popup-button-container">
-                      <button class="render-popup-button photo-button"
-                        (click)="createBlenderRender()"
-                        title="{{'MAKE_A_PICTURE' | localize}}"
-                        [disabled]="disablePictureButton">
-                        <co-icon [iconData]="iconService.getIcon(icons.CircleCheck)"></co-icon>
-                        {{ 'MAKE_A_PICTURE' | localize }}
-                      </button>
-                      <button
-                        class="render-popup-button cancel-button"
-                        (click)="resetBlenderRenderScene()">
-                        <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
-                        {{ 'CLOSE_PHOTO_MODE' | localize }}
-                      </button>
+                        <button class="render-popup-button photo-button"
+                                (click)="createBlenderRender()"
+                                title="{{'MAKE_A_PICTURE' | localize}}"
+                                [disabled]="disablePictureButton">
+                            <co-icon [iconData]="iconService.getIcon(icons.CircleCheck)"></co-icon>
+                            {{ 'MAKE_A_PICTURE' | localize }}
+                        </button>
+                        <button
+                                class="render-popup-button cancel-button"
+                                (click)="resetBlenderRenderScene()">
+                            <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
+                            {{ 'CLOSE_PHOTO_MODE' | localize }}
+                        </button>
                     </div>
-                  </div>
-                }
-                @if (showCullingErrorDialog) {
-                  <div class="render-warning">
+                </div>
+            }
+            @if (showCullingErrorDialog) {
+                <div class="render-warning">
                     <div class="render-warming-header">
-                      <h2>{{ 'BLENDER_RENDER_ERROR_TITLE' | localize }}</h2>
-                      <div class="render-warning-close" (click)="showCullingErrorDialog = false">
-                        <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
-                      </div>
+                        <h2>{{ 'BLENDER_RENDER_ERROR_TITLE' | localize }}</h2>
+                        <div class="render-warning-close" (click)="showCullingErrorDialog = false">
+                            <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
+                        </div>
                     </div>
                     <div class="render-warning-body">
-                      <p>{{ 'BLENDER_RENDER_WARNING_CULLING' | localize }}</p>
+                        <p>{{ 'BLENDER_RENDER_WARNING_CULLING' | localize }}</p>
                     </div>
                     <div class="render-warning-footer">
-                      <button
-                        class="render-popup-button cancel-button"
-                        (click)="showCullingErrorDialog = false">
-                        <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
-                        {{ 'CLOSE' | localize }}
-                      </button>
+                        <button
+                                class="render-popup-button cancel-button"
+                                (click)="showCullingErrorDialog = false">
+                            <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
+                            {{ 'CLOSE' | localize }}
+                        </button>
                     </div>
-                  </div>
-                }
-                <rp-render-progress
-                  [title]="'PREPARE_TO_RENDER' | localize"
-                  [show]="startUploading"
-                  >
-                </rp-render-progress>
-                <button
-                  #renderButton
-                  mat-raised-button
-                  matTooltip="{{'RENDER_TAKE_A_PICTURE' | localize}}"
-                  [id]="'standalone_render_picture'"
-                  [class.active]="(
-        (renderService.serverData.renderMode === renderService.renderModes.RenderRoom && viewModeService.viewMode === viewModes.WalkThrough) ||
-        (renderService.serverData.renderMode === renderService.renderModes.RenderIone))"
-                  (click)="showRenderForm($event)"
-                  >
-                  <mat-icon class="icon homedecorator-material-icons"
-                    aria-hidden="true">{{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsRunning ? 'open_in_browser' : 'photo_camera') }}
-                  </mat-icon>
-                </button>
-              </div>
+                </div>
             }
-      
-      `, standalone: false, styles: [".render-container{position:relative}.render-container .render-popup-container{background:#ffffffb3;padding:10px 25px 25px;border-radius:5px;box-shadow:0 1px 5px #0000001f}.render-container .render-popup-container .render-popup-header{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-header h3{display:flex;justify-content:space-between}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon{width:20px;height:20px;margin-left:20px}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg,.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg polygon{fill:#dc143c}.render-container .render-popup-container .render-popup-header .close-popup-container{cursor:pointer;border:none;background:none;float:none;height:auto;width:auto}.render-container .render-popup-container .render-popup-button-container{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-button-container .render-popup-button{float:none;width:100%;max-width:130px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-button-container .photo-button{color:#fff;background-color:#dda73f}.render-container .render-popup-container .render-popup-button-container .cancel-button{color:#fff;background-color:#5b6875}.render-container .render-popup-container .render-popup-preview{background-color:#fff;min-height:150px;min-width:275px;margin:5px 0;position:relative;width:275px;height:150px}.render-container .render-popup-container .render-popup-preview .render-popup-preview-placeholder{background-color:#fff;display:flex;justify-content:space-around;align-items:center;vertical-align:middle;min-height:150px;border:1px solid #ddd;color:#ddd;font-size:14px}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview{position:absolute;bottom:0;right:0;cursor:pointer;border-radius:0;border:none;height:30px;width:30px;background-color:#dda73f;color:#fff;margin:0}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-dropdown{margin:5px 0;width:100%}.render-container .render-popup-container .render-popup-dropdown .toggleable{cursor:pointer;display:flex;justify-content:right;align-content:center}.render-container .render-popup-container .render-popup-dropdown .toggleable p{padding:0;margin:0;font-size:12px;line-height:30px}.render-container .render-popup-container .render-popup-dropdown .toggleable .icon-rotate{transform:rotate(180deg)}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field{width:100%;font-size:14px}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-flex{background-color:#fff;color:#000;padding:3px 6px;border:1px solid #ddd}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-underline{display:none}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper{padding-bottom:0}.render-container .render-popup-container .render-popup-dropdown .setting-part-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .third-width{width:32%}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button{float:none;box-sizing:border-box;padding:2px;background:none;cursor:pointer;border:none;width:25px;height:25px;margin:0 5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon{display:block;width:25px;height:25px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon ::ng-deep svg{fill:#5b6875}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-slider .mat-slider-horizontal{min-width:110px;height:28px}.render-container .render-progress{float:left;min-width:50px;border-radius:25px;line-height:50px;text-align:center;padding:0 60px 0 20px;background:#fff;color:#74b77f;font-weight:700;margin:0 -50px 0 0}.render-container .render-input-container{float:right}.render-container .render-input-container input{width:100px;height:24px;margin:5px 0;padding:0 10px;font-size:14px}.render-container button{pointer-events:all;width:50px;height:50px;float:right;border-radius:100%;position:relative;z-index:2;margin-bottom:10px}.render-container button.active{background:#74b77f;color:#fff}.render-container button>*{pointer-events:none}.render-indicators div{position:fixed;width:100px;height:100px}.render-indicators .render-indicator-top-left{left:5vw;top:10vh;border-left:10px solid #dda73f;border-top:10px solid #dda73f;border-top-left-radius:20px}.render-indicators .render-indicator-top-right{right:5vw;top:10vh;border-right:10px solid #dda73f;border-top:10px solid #dda73f;border-top-right-radius:20px}.render-indicators .render-indicator-bottom-left{left:5vw;bottom:5vh;border-left:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-left-radius:20px}.render-indicators .render-indicator-bottom-right{right:5vw;bottom:5vh;border-right:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-right-radius:20px}.render-warning{width:500px;position:fixed;top:20%;left:calc(50% - 250px);border-radius:15px;box-sizing:border-box;background-color:#fff;box-shadow:1px 0 20px #0000001f}.render-warning .render-warming-header{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-warning .render-warming-header h2{padding:0;margin:0}.render-warning .render-warming-header .render-warning-close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-warning .render-warming-header .render-warning-close:hover mat-icon{fill:#46494c;color:#46494c}.render-warning .render-warning-body{padding:10px 20px}.render-warning .render-warning-footer{display:flex;justify-content:center;padding:0 20px 10px}.render-warning .render-warning-footer .render-popup-button{float:none;width:110px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly;color:#fff;background-color:#5b6875}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon svg path{fill:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: RenderService }, { type: MessageBusService }, { type: ViewModeService }, { type: HomedecoratorSettingsService }, { type: HomedecoratorIconCacheService }, { type: i1$2.MatDialog }, { type: SceneService }, { type: CameraService }, { type: ConfigurationService }, { type: HomedecoratorSettingsService }, { type: NewRenderService }, { type: UtilsService }, { type: RoomService }, { type: WallMeasurementsService }, { type: ConnectionHeathService }, { type: HomedecoratorDictionaryService }], propDecorators: { renderButton: [{
+            <button
+                    #renderButton
+                    mat-raised-button
+                    matTooltip="{{'RENDER_TAKE_A_PICTURE' | localize}}"
+                    [id]="'standalone_render_picture'"
+                    [class.active]="viewModeService.viewMode === viewModes.WalkThrough"
+                    (click)="showRenderForm($event)">
+                <mat-icon class="icon homedecorator-material-icons"
+                          aria-hidden="true">{{ 'photo_camera' }}
+                </mat-icon>
+            </button>
+        </div>
+    `, standalone: false, styles: [".render-container{position:relative}.render-container .render-popup-container{background:#ffffffb3;padding:10px 25px 25px;border-radius:5px;box-shadow:0 1px 5px #0000001f}.render-container .render-popup-container .render-popup-header{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-header h3{display:flex;justify-content:space-between}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon{width:20px;height:20px;margin-left:20px}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg,.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg polygon{fill:#dc143c}.render-container .render-popup-container .render-popup-header .close-popup-container{cursor:pointer;border:none;background:none;float:none;height:auto;width:auto}.render-container .render-popup-container .render-popup-button-container{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-button-container .render-popup-button{float:none;width:100%;max-width:130px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-button-container .photo-button{color:#fff;background-color:#dda73f}.render-container .render-popup-container .render-popup-button-container .cancel-button{color:#fff;background-color:#5b6875}.render-container .render-popup-container .render-popup-preview{background-color:#fff;min-height:150px;min-width:275px;margin:5px 0;position:relative;width:275px;height:150px}.render-container .render-popup-container .render-popup-preview .render-popup-preview-placeholder{background-color:#fff;display:flex;justify-content:space-around;align-items:center;vertical-align:middle;min-height:150px;border:1px solid #ddd;color:#ddd;font-size:14px}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview{position:absolute;bottom:0;right:0;cursor:pointer;border-radius:0;border:none;height:30px;width:30px;background-color:#dda73f;color:#fff;margin:0}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-dropdown{margin:5px 0;width:100%}.render-container .render-popup-container .render-popup-dropdown .toggleable{cursor:pointer;display:flex;justify-content:right;align-content:center}.render-container .render-popup-container .render-popup-dropdown .toggleable p{padding:0;margin:0;font-size:12px;line-height:30px}.render-container .render-popup-container .render-popup-dropdown .toggleable .icon-rotate{transform:rotate(180deg)}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field{width:100%;font-size:14px}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-flex{background-color:#fff;color:#000;padding:3px 6px;border:1px solid #ddd}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-underline{display:none}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper{padding-bottom:0}.render-container .render-popup-container .render-popup-dropdown .setting-part-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .third-width{width:32%}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button{float:none;box-sizing:border-box;padding:2px;background:none;cursor:pointer;border:none;width:25px;height:25px;margin:0 5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon{display:block;width:25px;height:25px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon ::ng-deep svg{fill:#5b6875}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-slider .mat-slider-horizontal{min-width:110px;height:28px}.render-container .render-progress{float:left;min-width:50px;border-radius:25px;line-height:50px;text-align:center;padding:0 60px 0 20px;background:#fff;color:#74b77f;font-weight:700;margin:0 -50px 0 0}.render-container .render-input-container{float:right}.render-container .render-input-container input{width:100px;height:24px;margin:5px 0;padding:0 10px;font-size:14px}.render-container button{pointer-events:all;width:50px;height:50px;float:right;border-radius:100%;position:relative;z-index:2;margin-bottom:10px}.render-container button.active{background:#74b77f;color:#fff}.render-container button>*{pointer-events:none}.render-indicators div{position:fixed;width:100px;height:100px}.render-indicators .render-indicator-top-left{left:5vw;top:10vh;border-left:10px solid #dda73f;border-top:10px solid #dda73f;border-top-left-radius:20px}.render-indicators .render-indicator-top-right{right:5vw;top:10vh;border-right:10px solid #dda73f;border-top:10px solid #dda73f;border-top-right-radius:20px}.render-indicators .render-indicator-bottom-left{left:5vw;bottom:5vh;border-left:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-left-radius:20px}.render-indicators .render-indicator-bottom-right{right:5vw;bottom:5vh;border-right:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-right-radius:20px}.render-warning{width:500px;position:fixed;top:20%;left:calc(50% - 250px);border-radius:15px;box-sizing:border-box;background-color:#fff;box-shadow:1px 0 20px #0000001f}.render-warning .render-warming-header{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-warning .render-warming-header h2{padding:0;margin:0}.render-warning .render-warming-header .render-warning-close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-warning .render-warming-header .render-warning-close:hover mat-icon{fill:#46494c;color:#46494c}.render-warning .render-warning-body{padding:10px 20px}.render-warning .render-warning-footer{display:flex;justify-content:center;padding:0 20px 10px}.render-warning .render-warning-footer .render-popup-button{float:none;width:110px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly;color:#fff;background-color:#5b6875}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon svg path{fill:#fff}\n"] }]
+        }], ctorParameters: () => [{ type: MessageBusService }, { type: ViewModeService }, { type: HomedecoratorSettingsService }, { type: HomedecoratorIconCacheService }, { type: RenderService }, { type: i1$2.MatDialog }, { type: SceneService }, { type: CameraService }, { type: ConfigurationService }, { type: HomedecoratorSettingsService }, { type: UtilsService }, { type: RoomService }, { type: WallMeasurementsService }, { type: ConnectionHeathService }, { type: HomedecoratorDictionaryService }, { type: DialogService }], propDecorators: { renderButton: [{
                 type: ViewChild,
                 args: ['renderButton']
             }] } });
@@ -42827,6 +42485,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+class ConfigurationPresetLoaderComponent {
+    showClass() {
+        return true;
+    }
+    constructor(configurationPresetService, iconService, _homedecoratorConnectorService, _messageService) {
+        this.configurationPresetService = configurationPresetService;
+        this.iconService = iconService;
+        this._homedecoratorConnectorService = _homedecoratorConnectorService;
+        this._messageService = _messageService;
+        this.icon = IconEnum;
+    }
+    ngOnInit() {
+        // TODO REMOVE MOCK
+        // Own source, good ol' instanbull
+        // this.configurationPresetService.sku = '1000610952';
+        // this.configurationPresetService.instanceId = '67483';
+        // IMG extern
+        // this.configurationPresetService.sku = '70000107';
+        // this.configurationPresetService.instanceId = '354490';
+        // this.configurationPresetService.externalSourceId = 171;
+    }
+    handleCloseClick() {
+        this.configurationPresetService.reset();
+    }
+    handleLoadPreset() {
+        this.configurationPresetService.LoadPreset();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigurationPresetLoaderComponent, deps: [{ token: ConfigurationPresetLoadService }, { token: HomedecoratorIconCacheService }, { token: HomedecoratorConnectorService }, { token: MessageBusService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ConfigurationPresetLoaderComponent, isStandalone: false, selector: "co-configurator-preset-loader", host: { properties: { "class.co-configurator-preset-loader": "this.showClass" } }, ngImport: i0, template: `
+
+    @if (configurationPresetService.showConfigurationLoad) {
+      <div class="configurator-preset-loader-container">
+        <div class="configurator-preset-icon">
+          <co-icon [iconData]="iconService.getIcon(icon.Check)"></co-icon>
+        </div>
+        <div class="configurator-preset-info">
+          <div class="preset-head" [textContent]="'LOAD_CONFIGURATION_PRESET' | localize"></div>
+          <div class="preset-sku" [textContent]="configurationPresetService.article.description"></div>
+          <div class="preset-text-link" [textContent]="'CLICK_LOAD_PRESET' | localize" (click)="handleLoadPreset()"></div>
+        </div>
+
+        <div class="configurator-preset-close">
+          <co-button
+            [iconData]="iconService.getIcon(icon.Cross)"
+            (onClick)="handleCloseClick()"
+          ></co-button>
+        </div>
+      </div>
+    }
+
+  `, isInline: true, styles: [".co-configurator-preset-loader .configurator-preset-loader-container{position:fixed;background:#fff;right:50px;bottom:50px;width:100%;max-width:400px;min-height:40px;box-sizing:border-box;padding:15px 5px;display:flex;justify-content:space-between;align-items:center;border-radius:15px;box-shadow:1px 1px 4px #0003;pointer-events:all;z-index:102}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-icon{background:#4e9b7e;border-radius:50%;width:30px;height:30px}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-icon .co-icon svg polygon{fill:#fff}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-head{text-transform:uppercase;font-size:12px}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-sku{font-size:18px;font-weight:700;margin:5px 0 15px}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-text-link{font-size:14px;cursor:pointer;color:#4e9b7e;text-align:center}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-text-link:hover{text-decoration:underline}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-close .co-button{background:none}\n"], dependencies: [{ kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i5.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigurationPresetLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'co-configurator-preset-loader', template: `
+
+    @if (configurationPresetService.showConfigurationLoad) {
+      <div class="configurator-preset-loader-container">
+        <div class="configurator-preset-icon">
+          <co-icon [iconData]="iconService.getIcon(icon.Check)"></co-icon>
+        </div>
+        <div class="configurator-preset-info">
+          <div class="preset-head" [textContent]="'LOAD_CONFIGURATION_PRESET' | localize"></div>
+          <div class="preset-sku" [textContent]="configurationPresetService.article.description"></div>
+          <div class="preset-text-link" [textContent]="'CLICK_LOAD_PRESET' | localize" (click)="handleLoadPreset()"></div>
+        </div>
+
+        <div class="configurator-preset-close">
+          <co-button
+            [iconData]="iconService.getIcon(icon.Cross)"
+            (onClick)="handleCloseClick()"
+          ></co-button>
+        </div>
+      </div>
+    }
+
+  `, standalone: false, encapsulation: ViewEncapsulation.None, styles: [".co-configurator-preset-loader .configurator-preset-loader-container{position:fixed;background:#fff;right:50px;bottom:50px;width:100%;max-width:400px;min-height:40px;box-sizing:border-box;padding:15px 5px;display:flex;justify-content:space-between;align-items:center;border-radius:15px;box-shadow:1px 1px 4px #0003;pointer-events:all;z-index:102}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-icon{background:#4e9b7e;border-radius:50%;width:30px;height:30px}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-icon .co-icon svg polygon{fill:#fff}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-head{text-transform:uppercase;font-size:12px}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-sku{font-size:18px;font-weight:700;margin:5px 0 15px}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-text-link{font-size:14px;cursor:pointer;color:#4e9b7e;text-align:center}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-info .preset-text-link:hover{text-decoration:underline}.co-configurator-preset-loader .configurator-preset-loader-container .configurator-preset-close .co-button{background:none}\n"] }]
+        }], ctorParameters: () => [{ type: ConfigurationPresetLoadService }, { type: HomedecoratorIconCacheService }, { type: HomedecoratorConnectorService }, { type: MessageBusService }], propDecorators: { showClass: [{
+                type: HostBinding,
+                args: ['class.co-configurator-preset-loader']
+            }] } });
+
 class RoomPlannerComponent {
     constructor(iconService, viewModeService, modelsService, itemService, settingsService, _presetsService, _appService, _screenAnalysis, _cd, _utilsService, _messageService, _dialog, _configurationService, _bluePrintService, _sceneService, _hudService, _roomService, _cameraService, _itemService, _itemSerializationService, _lightsService, _arService, _googleTagManager, _permanentStoreService, _appEventService, _connectorService, _wallService, _connectorAdapterService, _loadFurnitureService, _floorService, _sanitizer, _dictionary, _modelCreationService) {
         this.iconService = iconService;
@@ -43095,6 +42835,10 @@ class RoomPlannerComponent {
         this.unselectAll();
         this.showGroupMenu = false;
         this.showGroupEditMenuButtons = false;
+        if (this.userIsGrouping) {
+            // When the user was grouping, let everything know that we stopped with that aswell
+            this._messageService.emit(MessageType.CancelGroupObject);
+        }
     }
     updateSelectedObjectHud() {
         this._hudService.updateSelectedItemHud();
@@ -43957,6 +43701,9 @@ class RoomPlannerComponent {
                 (onZoomReset)="zoomReset()"
                 (onZoomOut)="zoomOut()"
         ></rp-zoom-controls>
+        
+        
+        <co-configurator-preset-loader></co-configurator-preset-loader>
 
         <ng-template #toolbarIconSettings>
             <span class="toolbar__divider"></span>
@@ -44179,7 +43926,7 @@ class RoomPlannerComponent {
             }
         }
 
-    `, isInline: true, styles: [".with-scrollable-section{overflow:hidden;height:100%}.with-scrollable-section section{overflow-y:auto}.RoomPlanner{width:inherit;height:inherit;pointer-events:none}.RoomPlanner>*{pointer-events:all}.sidebar-toggles .mat-mdc-raised-button{width:110px;text-align:left}.logo-menu{position:absolute;top:20px;left:20px;z-index:2}.logo-menu-2nd{position:absolute;top:140px;left:84px}.logo-menu-4th{position:absolute;top:180px;left:84px}.sidebar{position:absolute;left:0;top:0;height:100vh;max-width:30%;width:400px;background:#fff;padding:0 20px;box-shadow:0 0 20px #00000040}.flex-wrap{display:flex;flex-flow:column nowrap;height:100%}.solid-background>canvas{fill:#fff;background:#fff}.toolbar__divider{border-bottom:2px solid rgba(199,195,195,.5411764706);width:70%;margin:5px 0}.toolbar__divider.context-menu{border-color:#c7c3c38a;width:100%}.show-inner-wall-measurement-button ::ng-deep .co-icon{transform:rotate(180deg)}.on-top{z-index:3}.rp-item-context-menu-wrap{color:#fff;background:#17253391;border-radius:5px;box-sizing:border-box;padding:10px;position:relative}.rp-item-context-menu-wrap .rp-item-context-menu-item{cursor:pointer;flex-direction:row;display:flex;padding:5px;border-radius:5px}.rp-item-context-menu-wrap .rp-item-context-menu-item span,.rp-item-context-menu-wrap .rp-item-context-menu-item label{display:flex;flex-direction:column;line-height:20px;font-size:12px;font-weight:lighter;vertical-align:middle}.rp-item-context-menu-wrap .rp-item-context-menu-item .label{width:150px}.rp-item-context-menu-wrap .rp-item-context-menu-item .icon{width:20px;margin-right:10px}.rp-item-context-menu-wrap .rp-item-context-menu-item .icon svg,.rp-item-context-menu-wrap .rp-item-context-menu-item .icon co-icon,.rp-item-context-menu-wrap .rp-item-context-menu-item .icon .mat-icon{height:15px;width:15px;font-size:18px}.rp-item-context-menu-wrap .rp-item-context-menu-item:hover{background:#dcdcdc80}.rp-item-context-menu-wrap .rp-item-context-menu-item-highlight{color:#da9803}.rp-item-context-menu-wrap .rp-item-context-menu-item-highlight svg{fill:#da9803}.rp-item-context-menu-wrap .conversion-button-selected .icon-selected{color:#009a6d}.rp-item-context-menu-wrap .rp-item-context-menu-header{border-bottom:2px solid rgba(199,195,195,.5411764706);margin-bottom:10px;padding-left:5px;padding-right:25px;max-width:160px;overflow:hidden}.rp-item-context-menu-wrap .rp-item-context-menu-header p{color:#da9803;font-size:13px;margin:0;padding:5px 0 10px}.rp-item-context-menu-wrap .rp-item-context-menu-close{position:absolute;right:7px;top:5px;z-index:2;cursor:pointer;width:15px;height:15px}.rp-item-context-menu-wrap .rp-item-context-menu-close .close-icon co-icon{height:15px;width:15px;font-size:18px}.rp-right-context-menu-wrap{color:#fff;background:#17253391;border-radius:5px 0 0 5px;box-sizing:border-box;padding:5px;position:relative}.rp-right-context-menu-wrap .rp-right-context-menu-item{cursor:pointer;flex-direction:row;display:flex;padding:10px;justify-content:center;border-bottom:2px solid rgba(199,195,195,.5411764706)}.rp-right-context-menu-wrap .rp-right-context-menu-item:last-child{border-bottom:none}.rp-right-context-menu-wrap .rp-right-context-menu-item span,.rp-right-context-menu-wrap .rp-right-context-menu-item label{display:flex;flex-direction:column;font-weight:lighter;vertical-align:middle}.rp-right-context-menu-wrap .rp-right-context-menu-item .icon{width:auto;margin-right:0}.rp-right-context-menu-wrap .rp-right-context-menu-item .icon svg,.rp-right-context-menu-wrap .rp-right-context-menu-item .icon co-icon,.rp-right-context-menu-wrap .rp-right-context-menu-item .icon .mat-icon{height:20px;width:20px;font-size:20px}.rp-right-context-menu-wrap .rp-right-context-menu-item:hover{background:#dcdcdc80}.rp-right-context-menu-wrap .rp-right-context-menu-item-highlight{color:#da9803}.rp-right-context-menu-wrap .rp-right-context-menu-item-highlight svg{fill:#da9803}.rp-right-context-menu-wrap .conversion-button-selected .icon-selected{color:#009a6d}::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:#da9803}::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar .mat-slide-toggle-thumb-container .mat-slide-toggle-thumb{background-color:#fff}::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar:hover .mat-ripple-element{background-color:#da9803}::ng-deep .mat-mdc-slide-toggle .mat-slide-toggle-bar{width:40px;height:20px;border-radius:15px}::ng-deep .mat-mdc-slide-toggle .mat-slide-toggle-bar .mat-slide-toggle-thumb-container{width:17px;height:17px;top:2px;left:5px}::ng-deep .mat-mdc-slide-toggle .mat-slide-toggle-bar .mat-slide-toggle-thumb-container .mat-slide-toggle-thumb{height:16px;width:16px}::ng-deep mat-slider{height:24px}::ng-deep mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{overflow:visible}::ng-deep mat-slider .mat-slider-wrapper .mat-slider-track-fill{background-color:#da9803}::ng-deep mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,::ng-deep mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb-label{background-color:#da9803}::ng-deep mat-list .mat-mdc-list-item{border-bottom:1px solid #9bb0d0}.mrp-save-grouping{pointer-events:all;position:absolute;bottom:10%;left:50%}\n"], dependencies: [{ kind: "component", type: CategoryLibraryComponent, selector: "rp-category-library", inputs: ["categories"], outputs: ["categoryClick"] }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ContextMenuComponent, selector: "rp-context-menu", inputs: ["openMouseEvent"] }, { kind: "component", type: ItemContextMenuComponent, selector: "rp-item-context-menu", inputs: ["item"], outputs: ["deletePressed"] }, { kind: "component", type: RightContextMenuComponent, selector: "rp-right-context-menu", inputs: ["item"], outputs: ["deletePressed"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ToolbarIconComponent, selector: "rp-toolbar-icon", inputs: ["matIcon", "svgIcon", "tooltip", "disabled", "showLabel"], outputs: ["onClick"] }, { kind: "component", type: ZoomControlsComponent, selector: "rp-zoom-controls", inputs: ["visible"], outputs: ["onZoomIn", "onZoomReset", "onZoomOut"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ButtonElevationComponent, selector: "button-elevation", inputs: ["item"] }, { kind: "component", type: ObjectLibraryComponent, selector: "rp-object-library", inputs: ["objects"], outputs: ["setDragged", "releaseDragged", "onObjectClick"] }, { kind: "component", type: FloorplannerComponent, selector: "floor-planner", outputs: ["selectedWallChange"] }, { kind: "component", type: SelectedFloorComponent, selector: "rp-selected-floor", inputs: ["floor", "texturePlane", "color"], outputs: ["setTexture", "setColor"] }, { kind: "component", type: SelectedObjectComponent, selector: "rp-selected-object", inputs: ["object"], outputs: ["onSelectedObjectChange"] }, { kind: "component", type: SelectedThreedObjectComponent, selector: "rp-selected-threed-object", inputs: ["object", "showCopy", "showDelete", "showLock"], outputs: ["onSelectedObjectChange"] }, { kind: "component", type: SelectedWallComponent, selector: "rp-selected-wall", inputs: ["wall", "texturePlane", "color", "minWallHeight", "maxWallHeight", "maxWallThickness", "maxWallLength", "minWallLength"], outputs: ["remove", "setLength", "setHeight", "setThickness", "selectCorner", "setTexture", "setColor"] }, { kind: "component", type: SettingsComponent, selector: "rp-settings", inputs: ["minWallHeight", "placeCameraDisabled"], outputs: ["onWallsHeightUpdate"] }, { kind: "component", type: CustomShapeCreatorComponent, selector: "rp-custom-shape-creator", inputs: ["shape"] }, { kind: "component", type: CustomCylinderCreatorComponent, selector: "custom-cylinder-creator", inputs: ["shape"] }, { kind: "component", type: SelectedObjectScaleComponent, selector: "rp-selected-object-scale", inputs: ["object"], outputs: ["objectChange"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    `, isInline: true, styles: [".with-scrollable-section{overflow:hidden;height:100%}.with-scrollable-section section{overflow-y:auto}.RoomPlanner{width:inherit;height:inherit;pointer-events:none}.RoomPlanner>*{pointer-events:all}.sidebar-toggles .mat-mdc-raised-button{width:110px;text-align:left}.logo-menu{position:absolute;top:20px;left:20px;z-index:2}.logo-menu-2nd{position:absolute;top:140px;left:84px}.logo-menu-4th{position:absolute;top:180px;left:84px}.sidebar{position:absolute;left:0;top:0;height:100vh;max-width:30%;width:400px;background:#fff;padding:0 20px;box-shadow:0 0 20px #00000040}.flex-wrap{display:flex;flex-flow:column nowrap;height:100%}.solid-background>canvas{fill:#fff;background:#fff}.toolbar__divider{border-bottom:2px solid rgba(199,195,195,.5411764706);width:70%;margin:5px 0}.toolbar__divider.context-menu{border-color:#c7c3c38a;width:100%}.show-inner-wall-measurement-button ::ng-deep .co-icon{transform:rotate(180deg)}.on-top{z-index:3}.rp-item-context-menu-wrap{color:#fff;background:#17253391;border-radius:5px;box-sizing:border-box;padding:10px;position:relative}.rp-item-context-menu-wrap .rp-item-context-menu-item{cursor:pointer;flex-direction:row;display:flex;padding:5px;border-radius:5px}.rp-item-context-menu-wrap .rp-item-context-menu-item span,.rp-item-context-menu-wrap .rp-item-context-menu-item label{display:flex;flex-direction:column;line-height:20px;font-size:12px;font-weight:lighter;vertical-align:middle}.rp-item-context-menu-wrap .rp-item-context-menu-item .label{width:150px}.rp-item-context-menu-wrap .rp-item-context-menu-item .icon{width:20px;margin-right:10px}.rp-item-context-menu-wrap .rp-item-context-menu-item .icon svg,.rp-item-context-menu-wrap .rp-item-context-menu-item .icon co-icon,.rp-item-context-menu-wrap .rp-item-context-menu-item .icon .mat-icon{height:15px;width:15px;font-size:18px}.rp-item-context-menu-wrap .rp-item-context-menu-item:hover{background:#dcdcdc80}.rp-item-context-menu-wrap .rp-item-context-menu-item-highlight{color:#da9803}.rp-item-context-menu-wrap .rp-item-context-menu-item-highlight svg{fill:#da9803}.rp-item-context-menu-wrap .conversion-button-selected .icon-selected{color:#009a6d}.rp-item-context-menu-wrap .rp-item-context-menu-header{border-bottom:2px solid rgba(199,195,195,.5411764706);margin-bottom:10px;padding-left:5px;padding-right:25px;max-width:160px;overflow:hidden}.rp-item-context-menu-wrap .rp-item-context-menu-header p{color:#da9803;font-size:13px;margin:0;padding:5px 0 10px}.rp-item-context-menu-wrap .rp-item-context-menu-close{position:absolute;right:7px;top:5px;z-index:2;cursor:pointer;width:15px;height:15px}.rp-item-context-menu-wrap .rp-item-context-menu-close .close-icon co-icon{height:15px;width:15px;font-size:18px}.rp-right-context-menu-wrap{color:#fff;background:#17253391;border-radius:5px 0 0 5px;box-sizing:border-box;padding:5px;position:relative}.rp-right-context-menu-wrap .rp-right-context-menu-item{cursor:pointer;flex-direction:row;display:flex;padding:10px;justify-content:center;border-bottom:2px solid rgba(199,195,195,.5411764706)}.rp-right-context-menu-wrap .rp-right-context-menu-item:last-child{border-bottom:none}.rp-right-context-menu-wrap .rp-right-context-menu-item span,.rp-right-context-menu-wrap .rp-right-context-menu-item label{display:flex;flex-direction:column;font-weight:lighter;vertical-align:middle}.rp-right-context-menu-wrap .rp-right-context-menu-item .icon{width:auto;margin-right:0}.rp-right-context-menu-wrap .rp-right-context-menu-item .icon svg,.rp-right-context-menu-wrap .rp-right-context-menu-item .icon co-icon,.rp-right-context-menu-wrap .rp-right-context-menu-item .icon .mat-icon{height:20px;width:20px;font-size:20px}.rp-right-context-menu-wrap .rp-right-context-menu-item:hover{background:#dcdcdc80}.rp-right-context-menu-wrap .rp-right-context-menu-item-highlight{color:#da9803}.rp-right-context-menu-wrap .rp-right-context-menu-item-highlight svg{fill:#da9803}.rp-right-context-menu-wrap .conversion-button-selected .icon-selected{color:#009a6d}::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:#da9803}::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar .mat-slide-toggle-thumb-container .mat-slide-toggle-thumb{background-color:#fff}::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar:hover .mat-ripple-element{background-color:#da9803}::ng-deep .mat-mdc-slide-toggle .mat-slide-toggle-bar{width:40px;height:20px;border-radius:15px}::ng-deep .mat-mdc-slide-toggle .mat-slide-toggle-bar .mat-slide-toggle-thumb-container{width:17px;height:17px;top:2px;left:5px}::ng-deep .mat-mdc-slide-toggle .mat-slide-toggle-bar .mat-slide-toggle-thumb-container .mat-slide-toggle-thumb{height:16px;width:16px}::ng-deep mat-slider{height:24px}::ng-deep mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{overflow:visible}::ng-deep mat-slider .mat-slider-wrapper .mat-slider-track-fill{background-color:#da9803}::ng-deep mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,::ng-deep mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb-label{background-color:#da9803}::ng-deep mat-list .mat-mdc-list-item{border-bottom:1px solid #9bb0d0}.mrp-save-grouping{pointer-events:all;position:absolute;bottom:10%;left:50%}\n"], dependencies: [{ kind: "component", type: CategoryLibraryComponent, selector: "rp-category-library", inputs: ["categories"], outputs: ["categoryClick"] }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ContextMenuComponent, selector: "rp-context-menu", inputs: ["openMouseEvent"] }, { kind: "component", type: ItemContextMenuComponent, selector: "rp-item-context-menu", inputs: ["item"], outputs: ["deletePressed"] }, { kind: "component", type: RightContextMenuComponent, selector: "rp-right-context-menu", inputs: ["item"], outputs: ["deletePressed"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ToolbarIconComponent, selector: "rp-toolbar-icon", inputs: ["matIcon", "svgIcon", "tooltip", "disabled", "showLabel"], outputs: ["onClick"] }, { kind: "component", type: ZoomControlsComponent, selector: "rp-zoom-controls", inputs: ["visible"], outputs: ["onZoomIn", "onZoomReset", "onZoomOut"] }, { kind: "directive", type: i14.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i14.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ButtonElevationComponent, selector: "button-elevation", inputs: ["item"] }, { kind: "component", type: ObjectLibraryComponent, selector: "rp-object-library", inputs: ["objects"], outputs: ["setDragged", "releaseDragged", "onObjectClick"] }, { kind: "component", type: FloorplannerComponent, selector: "floor-planner", outputs: ["selectedWallChange"] }, { kind: "component", type: SelectedFloorComponent, selector: "rp-selected-floor", inputs: ["floor", "texturePlane", "color"], outputs: ["setTexture", "setColor"] }, { kind: "component", type: SelectedObjectComponent, selector: "rp-selected-object", inputs: ["object"], outputs: ["onSelectedObjectChange"] }, { kind: "component", type: SelectedThreedObjectComponent, selector: "rp-selected-threed-object", inputs: ["object", "showCopy", "showDelete", "showLock"], outputs: ["onSelectedObjectChange"] }, { kind: "component", type: SelectedWallComponent, selector: "rp-selected-wall", inputs: ["wall", "texturePlane", "color", "minWallHeight", "maxWallHeight", "maxWallThickness", "maxWallLength", "minWallLength"], outputs: ["remove", "setLength", "setHeight", "setThickness", "selectCorner", "setTexture", "setColor"] }, { kind: "component", type: SettingsComponent, selector: "rp-settings", inputs: ["minWallHeight", "placeCameraDisabled"], outputs: ["onWallsHeightUpdate"] }, { kind: "component", type: CustomShapeCreatorComponent, selector: "rp-custom-shape-creator", inputs: ["shape"] }, { kind: "component", type: CustomCylinderCreatorComponent, selector: "custom-cylinder-creator", inputs: ["shape"] }, { kind: "component", type: SelectedObjectScaleComponent, selector: "rp-selected-object-scale", inputs: ["object"], outputs: ["objectChange"] }, { kind: "component", type: ConfigurationPresetLoaderComponent, selector: "co-configurator-preset-loader" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoomPlannerComponent, decorators: [{
             type: Component,
@@ -44455,6 +44202,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 (onZoomReset)="zoomReset()"
                 (onZoomOut)="zoomOut()"
         ></rp-zoom-controls>
+        
+        
+        <co-configurator-preset-loader></co-configurator-preset-loader>
 
         <ng-template #toolbarIconSettings>
             <span class="toolbar__divider"></span>
@@ -45989,7 +45739,7 @@ class ThreedselectorComponent {
                 this.showProgressBar = this._settingsService.settings.options.showProgressBar;
                 this.showProgressText = this._settingsService.settings.options.showProgressText;
             }
-        }), this._messageService.subscribe(MessageType.OpenConfigurator, (item) => this.configureFurniture(item)));
+        }), this._messageService.subscribe(MessageType.OpenConfigurator, (item) => this.configureFurniture(item)), this._messageService.subscribe(MessageType.LoadConfigurationFromPreset, ({ sku, instanceId, settings }) => this.handleLoadIOneFurnitureIntoSceneByPreset(sku, instanceId, settings)));
         this._addModelDialogToolbar();
         if (this._iOne.article && this._iOne.article.showFullConfiguration) {
             this.showFullConfiguration = this._iOne.article.showFullConfiguration;
@@ -46120,7 +45870,7 @@ class ThreedselectorComponent {
     }
     // NEW CONFIGURATOR
     async handleBuildResult(result) {
-        if (!result || this.firstBuild) {
+        if (!result || this.firstBuild || !this._sceneService.scene) {
             return;
         }
         const customFloorGroupResult = new CustomFloorGroupResult();
@@ -46283,7 +46033,6 @@ class ThreedselectorComponent {
                 const settingsInterface = settings['settings'];
                 configuratorSettingsClone.externalSourceId = configuratorExternalSourceId;
                 configuratorSettingsClone.username = settingsInterface.username;
-                configuratorSettingsClone.password = settingsInterface.password;
                 configuratorSettingsClone.url = settingsInterface.url;
                 configuratorSettingsClone.version = settingsInterface.version;
                 configuratorSettingsClone.schema = settingsInterface.schema;
@@ -46295,7 +46044,7 @@ class ThreedselectorComponent {
             }
         }
         this._configuringService.scene = this._sceneService.scene;
-        this._initConfigurator(configuratorSettingsClone, sku);
+        this._initConfigurator(configuratorSettingsClone, sku, !!configuratorExternalSourceId);
         // await this._configuringService.init(configuratorSettingsClone);
         // const furnitureData: ConfigurationResultObject = new ConfigurationResultObject();
         // furnitureData.sku = sku;
@@ -46308,6 +46057,7 @@ class ThreedselectorComponent {
     }
     async configureFurniture(object) {
         if (object instanceof Item) {
+            this._resetConfigurator();
             const configuratorExternalSourceId = object.metadata.externalSettings && object.metadata.externalSettings.externalSourceId ?
                 object.metadata.externalSettings.externalSourceId : undefined;
             const configuratorSettingsClone = await this._setSourceSettings(configuratorExternalSourceId);
@@ -46316,7 +46066,7 @@ class ThreedselectorComponent {
             }
             // make sure that if the object contains metadata, we set from project true
             // await this._configuringService.init(configuratorSettingsClone);
-            this._initConfigurator(configuratorSettingsClone, object.metadata.itemIdentifier, object.metadata.itemId);
+            this._initConfigurator(configuratorSettingsClone, object.metadata.itemIdentifier, !!configuratorExternalSourceId, object.metadata.itemId);
             // const furnitureData: ConfigurationResultObject = new ConfigurationResultObject();
             // furnitureData.sku = object.metadata.itemIdentifier;
             // furnitureData.instanceId = object.metadata.itemId;
@@ -46326,11 +46076,63 @@ class ThreedselectorComponent {
             this.loadConfigurator = true;
         }
     }
-    _initConfigurator(settings, sku, instanceId) {
-        this.configuratorSettings = settings;
+    async handleLoadIOneFurnitureIntoSceneByPreset(sku, instanceId, settings) {
+        const toast = new Toast();
+        toast.message = 'MODEL_LOADING';
+        this._toastService.showToast(toast);
+        const article = await this._loadFurnitureService.currentActiveService.loadArticle(sku);
+        let position = this._bluePrintService.getCenter();
+        const draggedData = {
+            name: sku,
+            constructFn: async (pos) => this.configureFurnitureFromPreset(sku, instanceId, settings),
+            type: itemTypeFromPlacement(article.placement),
+            iOne: true
+        };
+        this._messageBus.emit(MessageType.SetDrag, draggedData);
+        this._messageBus.emit(MessageType.StartDrag, position);
+    }
+    async configureFurnitureFromPreset(sku, instanceId, settings) {
+        this._resetConfigurator();
+        this.firstBuild = true;
+        const configuratorSettings = this._settingsService.settings.projectSettings ?
+            this._settingsService.settings.projectSettings : this._settingsService.settings;
+        const configuratorSettingsClone = Object.assign({}, configuratorSettings);
+        const configuratorExternalSourceId = settings && settings.externalSourceId ? settings.externalSourceId : undefined;
+        if (configuratorExternalSourceId) {
+            configuratorSettingsClone.externalSourceId = configuratorExternalSourceId;
+            configuratorSettingsClone.username = settings.username;
+            configuratorSettingsClone.password = settings.password;
+            configuratorSettingsClone.url = settings.url;
+            configuratorSettingsClone.version = settings.version;
+            configuratorSettingsClone.schema = settings.schema;
+            configuratorSettingsClone.mainUrl = settings.url;
+            configuratorSettingsClone.mainSchema = settings.schema;
+            configuratorSettingsClone.mainVersion = settings.version;
+            // Set here to just save it, when it comes back from the configurator, we need to add it to the metadata.
+            this._externalSourceData = settings;
+        }
+        this._configuringService.scene = this._sceneService.scene;
+        this._initConfigurator(configuratorSettingsClone, sku, !!configuratorExternalSourceId, instanceId);
+        this._startPosition = this._bluePrintService.getCenter();
+        this.loadConfigurator = true;
+        this._changeDetector.detectChanges();
+        return this._waitForBuildToFinish();
+    }
+    _initConfigurator(settings, sku, external, instanceId) {
+        this.configuratorSettings = this._prepareSettings(settings, external);
         this.configuratorSku = sku;
         this.configuratorInstanceId = instanceId;
     }
+    _prepareSettings(settings, external = false) {
+        if (external) {
+            // no pre-defined stuff for external sources
+            settings.password = undefined;
+            settings.dataSessionId = undefined;
+            settings.sessionId = undefined;
+            settings.getAccessTokenFunction = undefined;
+        }
+        return settings;
+    }
     _resetConfigurator() {
         this.configuratorSettings = undefined;
         this.configuratorSku = undefined;
@@ -48796,7 +48598,7 @@ class ToolbarComponent {
             this.leftSidebar.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolbarComponent, deps: [{ token: AppStateService }, { token: PresetsService }, { token: MessageBusService }, { token: HomedecoratorSettingsService }, { token: LocalStorageService }, { token: HomedecoratorIconCacheService }, { token: ScreenSizeAnalysisService }, { token: i1$2.MatDialog }, { token: ToastService }, { token: HomedecoratorAppService }, { token: PermanentStoreService }, { token: UtilsService }, { token: ItemService }, { token: FloorService }, { token: AnimationService }, { token: DevelopmentService }, { token: NewRenderService }, { token: ThirdPartyModelService }, { token: LightPresetsService }, { token: HomedecoratorConnectorAdapterService }, { token: ConnectionHeathService }, { token: HomedecoratorAppEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolbarComponent, deps: [{ token: AppStateService }, { token: PresetsService }, { token: MessageBusService }, { token: HomedecoratorSettingsService }, { token: LocalStorageService }, { token: HomedecoratorIconCacheService }, { token: ScreenSizeAnalysisService }, { token: i1$2.MatDialog }, { token: ToastService }, { token: HomedecoratorAppService }, { token: PermanentStoreService }, { token: UtilsService }, { token: ItemService }, { token: FloorService }, { token: AnimationService }, { token: DevelopmentService }, { token: RenderService }, { token: ThirdPartyModelService }, { token: LightPresetsService }, { token: HomedecoratorConnectorAdapterService }, { token: ConnectionHeathService }, { token: HomedecoratorAppEventService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ToolbarComponent, isStandalone: false, selector: "rp-toolbar", inputs: { shareButton: "shareButton" }, outputs: { externalSave: "externalSave", externalOpen: "externalOpen" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" } }, viewQueries: [{ propertyName: "leftSidebar", first: true, predicate: ["leftSidebar"], descendants: true, static: true }], ngImport: i0, template: `
         <!--
         <div class="layer layer&#45;&#45;toolbar">
@@ -49334,7 +49136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         ])
                     ] /*,
                     changeDetection: ChangeDetectionStrategy.OnPush*/, standalone: false, styles: [":host{display:flex;flex-direction:column;position:absolute;top:0;z-index:100;height:100%;width:100%;pointer-events:none}:host h2{font-weight:600}:host h3{font-weight:600}:host .mat-toolbar.mat-primary{box-shadow:none;padding:0;background:transparent;height:40px;justify-content:space-between}:host .mat-toolbar .mat-icon{height:20px;width:20px;font-size:20px;line-height:20px}:host .hd-toolbar-spacer{display:flex;flex-basis:100%}:host .toast-wrapper{height:auto;position:absolute;top:0;left:50%;-webkit-user-select:none;user-select:none;pointer-events:none;background:#74b77f;padding:30px;border-radius:0 0 10px 10px;min-width:150px;max-width:90%;color:#fff;text-align:center;transform:translate(-50%,-100%)}:host .toast-wrapper.warning{background:#f17300}:host .toast-wrapper.error{background:#cc2936}:host ::ng-deep .drawer__header{display:flex;align-items:center;min-height:40px;margin-bottom:16px}:host ::ng-deep .drawer__header h2{margin:0 auto 0 0;font-weight:600}:host ::ng-deep .mat-headline-6{font-weight:600}:host ::ng-deep .mat-subtitle-1{font-weight:600}:host ::ng-deep mat-tab-header,:host ::ng-deep .FileDrop{margin-bottom:16px}:host ::ng-deep .tab--skin ::ng-deep .mat-tab-label{height:52px;min-width:auto}:host ::ng-deep .drawer p{white-space:pre-wrap}:host ::ng-deep .mat-divider{margin:16px 0 24px}:host ::ng-deep .mat-drawer-backdrop{display:none}.storage-error{min-width:30px;height:30px;display:flex;align-items:center;align-self:center;border-radius:50%;justify-content:center;background:#fff;color:#c00;font-size:25px;font-weight:700}.layer--toolbar{display:flex;flex-direction:column}.toolbar{display:flex;z-index:101;flex-wrap:nowrap}.toolbar .menu-icon{min-width:50px;display:flex;justify-content:center;margin-left:-16px}.toolbar .left-toolbar,.toolbar .right-toolbar{display:flex;align-items:center;background:#da9803;border-radius:0 0 10px;padding:0 20px 0 10px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;height:100%;gap:12px}.toolbar .right-toolbar{border-radius:0 0 0 10px;padding:0 5px 0 10px}.toolbar .right-toolbar.modified{padding:0 5px 0 0}.toolbar .share-button{height:100%;padding:0 15px;border-radius:0 0 0 10px;border:none;color:#fff;background-color:#2c67ff;cursor:pointer}.toolbar .toolbar-icon-list{display:flex;align-items:center;justify-content:center}.toolbar .toolbar-icon-sub{display:flex;align-items:center;justify-content:center;padding:0 10px;gap:5px;border-right:1px solid rgba(255,255,255,.3803921569)}.toolbar .toolbar-icon-sub:last-child{border-right:none}.toolbar .toolbar-icon-sub:first-child{border-left:1px solid rgba(255,255,255,.3803921569);margin-left:10px}.toolbar .toolbar-icon{height:30px;width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.toolbar .toolbar-icon co-icon ::ng-deep{width:20px;height:20px}.toolbar .toolbar-icon co-icon ::ng-deep svg,.toolbar .toolbar-icon co-icon ::ng-deep path{fill:#fff}.toolbar .toolbar-icon co-icon.loading-green ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-green ::ng-deep path{fill:#74b77f}.toolbar .toolbar-icon co-icon.loading-orange ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-orange ::ng-deep path{fill:#f17300}.toolbar .toolbar-icon co-icon.loading-yellow ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-yellow ::ng-deep path{fill:#cc2936}.toolbar .toolbar-icon co-icon.loading-red ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-red ::ng-deep path{fill:#cc2936}.toolbar .toolbar-icon.search co-icon{height:30px;width:30px}.toolbar .toolbar-icon.disabled{cursor:default}.toolbar .toolbar-icon.disabled co-icon ::ng-deep svg{fill:#00000042}.toolbar-logo{height:20px}.secondary-logo{margin-left:20px}.toolbar__nav{display:flex;flex-direction:row;padding-top:0}.toolbar__nav .mat-mdc-list-item{color:#fff;height:40px}.toolbar-row{flex:auto;display:flex;flex-direction:column;padding:0;pointer-events:none;position:relative;align-items:baseline;height:100%}::ng-deep mat-toolbar-row .toolbar--secondary{width:50px;padding:15px 0;flex-direction:column;background:#17253391;height:100%;gap:5px}::ng-deep mat-toolbar-row .toolbar--secondary button ::ng-deep{width:30px;height:30px;line-height:30px;color:#fff;display:flex;justify-content:center}::ng-deep mat-toolbar-row .toolbar--secondary .add-to-cart-button button ::ng-deep{color:#da9803}.toolbar--secondary .drawer{flex:auto;pointer-events:none;background:transparent}.wip-card{margin-left:5px;padding:0 10px;color:#fff;background-color:#7a828a}.wip-card .mat-mdc-card-content{font-size:12px}.drawer-container{position:static;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.drawer{width:420px;padding:16px;display:flex;flex-direction:column;left:50px}::ng-deep rp-category-library .mat-mdc-list-item ::ng-deep{border-color:#747c84}::ng-deep rp-category-library .mdc-list-item__primary-text{color:#000}::ng-deep rp-category-library .mdc-list-item:hover .mdc-list-item__primary-text{color:#000}.toolbar,.toolbar--secondary>*,.drawer-container>*,.drawer>*{pointer-events:all}.drawer__button{min-width:initial;padding:0;border:none;position:absolute;top:0;right:0;border-radius:50%}.blinker{animation:blinker 1s linear infinite}.badge-tooltip{position:relative}.badge-tooltip .mat-badge{position:absolute;margin:0;display:flex;align-items:center;justify-content:center;right:-2px;bottom:13px}.badge-tooltip .mat-badge .mat-badge-content{background-color:transparent;color:#b71c1c;border:1px solid #b71c1c;animation:bounce 2s ease-out;animation-iteration-count:infinite;right:initial;left:initial;position:relative;height:12px;width:12px;line-height:12px;font-size:10px;bottom:initial}::ng-deep .tooltip-red{background:#b71c1c}@keyframes bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-20px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes blinker{50%{opacity:0}}::ng-deep .mat-mdc-menu-panel{width:256px!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content{display:flex;flex-direction:column;padding-left:10px;padding-right:10px}::ng-deep mat-drawer-content.mat-drawer-content{display:flex;height:100%;flex-direction:column}\n"] }]
-        }], ctorParameters: () => [{ type: AppStateService }, { type: PresetsService }, { type: MessageBusService }, { type: HomedecoratorSettingsService }, { type: LocalStorageService }, { type: HomedecoratorIconCacheService }, { type: ScreenSizeAnalysisService }, { type: i1$2.MatDialog }, { type: ToastService }, { type: HomedecoratorAppService }, { type: PermanentStoreService }, { type: UtilsService }, { type: ItemService }, { type: FloorService }, { type: AnimationService }, { type: DevelopmentService }, { type: NewRenderService }, { type: ThirdPartyModelService }, { type: LightPresetsService }, { type: HomedecoratorConnectorAdapterService }, { type: ConnectionHeathService }, { type: HomedecoratorAppEventService }], propDecorators: { shareButton: [{
+        }], ctorParameters: () => [{ type: AppStateService }, { type: PresetsService }, { type: MessageBusService }, { type: HomedecoratorSettingsService }, { type: LocalStorageService }, { type: HomedecoratorIconCacheService }, { type: ScreenSizeAnalysisService }, { type: i1$2.MatDialog }, { type: ToastService }, { type: HomedecoratorAppService }, { type: PermanentStoreService }, { type: UtilsService }, { type: ItemService }, { type: FloorService }, { type: AnimationService }, { type: DevelopmentService }, { type: RenderService }, { type: ThirdPartyModelService }, { type: LightPresetsService }, { type: HomedecoratorConnectorAdapterService }, { type: ConnectionHeathService }, { type: HomedecoratorAppEventService }], propDecorators: { shareButton: [{
                 type: Input
             }], externalSave: [{
                 type: Output
@@ -49408,28 +49210,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
-// A pipe for appending strings to other strings in view templates.
-class AppendPipe {
-    transform(value, append) {
-        if (!value) {
-            return '';
-        }
-        if (!append) {
-            return value;
-        }
-        return value + append;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppendPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AppendPipe, isStandalone: false, name: "append" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppendPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'append',
-                    standalone: false
-                }]
-        }] });
-
 class ProductCatalogComponent {
     get shown() {
         return this._showCatalog;
@@ -49844,7 +49624,7 @@ class HomedecoratorComponent {
         return this._settings;
     }
     constructor(appService, // don't remove this, needs to be created on a high level
-    controllerService, appState, presetsService, screenAnalysis, _iconRegistry, _domSanitizer, _messageService, _homedecoratorService, _parentEventService, _ownEventService, _integrationService, _sceneService, _webWorkerService) {
+    controllerService, appState, presetsService, screenAnalysis, _iconRegistry, _domSanitizer, _messageService, _homedecoratorService, _parentEventService, _ownEventService, _integrationService, _sceneService, _webWorkerService, _configurationPresetLoadService) {
         this.appService = appService;
         this.controllerService = controllerService;
         this.appState = appState;
@@ -49859,6 +49639,7 @@ class HomedecoratorComponent {
         this._integrationService = _integrationService;
         this._sceneService = _sceneService;
         this._webWorkerService = _webWorkerService;
+        this._configurationPresetLoadService = _configurationPresetLoadService;
         this.generalFilterOrders = [
             { name: 'CATEGORY', order: 1 },
             { name: 'TURNOVER_GROUP', order: 2 },
@@ -49975,6 +49756,14 @@ class HomedecoratorComponent {
                 else {
                     this._startWithEmptyRoom(true);
                 }
+                if (this.loadWithConfigurationPreset && this.loadWithConfigurationPreset.instanceId && this.loadWithConfigurationPreset.sku) {
+                    if (this.loadWithConfigurationPreset.externalSourceId) {
+                        this._configurationPresetLoadService.externalSourceId = this.loadWithConfigurationPreset.externalSourceId;
+                    }
+                    // We need to load a preset AFTER we get in 3d space.
+                    this._configurationPresetLoadService.instanceId = this.loadWithConfigurationPreset.instanceId;
+                    this._configurationPresetLoadService.sku = this.loadWithConfigurationPreset.sku;
+                }
             }
         }));
     }
@@ -50067,8 +49856,8 @@ class HomedecoratorComponent {
     _initConnection() {
         this._homedecoratorService.init(this._settings);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorComponent, deps: [{ token: HomedecoratorAppService }, { token: HomedecoratorConnectorService }, { token: AppStateService }, { token: PresetsService }, { token: ScreenSizeAnalysisService }, { token: i3$2.MatIconRegistry }, { token: i1$1.DomSanitizer }, { token: MessageBusService }, { token: HomedecoratorService }, { token: HomedecoratorAppEventService, optional: true, skipSelf: true }, { token: HomedecoratorAppEventService, optional: true, self: true }, { token: IntegrationService }, { token: SceneService }, { token: WebWorkerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HomedecoratorComponent, isStandalone: false, selector: "co-homedecorator", inputs: { generalFilterOrders: "generalFilterOrders", purchaseFilterOrders: "purchaseFilterOrders", logisticsFilterOrders: "logisticsFilterOrders", initCommunication: "initCommunication", projectToLoad: "projectToLoad", shareButton: "shareButton", settings: "settings" }, host: { listeners: { "document:keyup": "keyup($event)" }, properties: { "class.co-homedecorator": "this.showClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorComponent, deps: [{ token: HomedecoratorAppService }, { token: HomedecoratorConnectorService }, { token: AppStateService }, { token: PresetsService }, { token: ScreenSizeAnalysisService }, { token: i3$2.MatIconRegistry }, { token: i1$1.DomSanitizer }, { token: MessageBusService }, { token: HomedecoratorService }, { token: HomedecoratorAppEventService, optional: true, skipSelf: true }, { token: HomedecoratorAppEventService, optional: true, self: true }, { token: IntegrationService }, { token: SceneService }, { token: WebWorkerService }, { token: ConfigurationPresetLoadService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HomedecoratorComponent, isStandalone: false, selector: "co-homedecorator", inputs: { generalFilterOrders: "generalFilterOrders", purchaseFilterOrders: "purchaseFilterOrders", logisticsFilterOrders: "logisticsFilterOrders", initCommunication: "initCommunication", projectToLoad: "projectToLoad", shareButton: "shareButton", loadWithConfigurationPreset: "loadWithConfigurationPreset", settings: "settings" }, host: { listeners: { "document:keyup": "keyup($event)" }, properties: { "class.co-homedecorator": "this.showClass" } }, providers: [
             APPLICATION_SERVICES_PROVIDERS
         ], ngImport: i0, template: `
       @if (loaded) {
@@ -50091,7 +49880,6 @@ class HomedecoratorComponent {
                 [purchaseFilterOrders]="purchaseFilterOrders"
                 [logisticsFilterOrders]="logisticsFilterOrders"
               ></rp-product-catalog>
-              <co-lite-selector></co-lite-selector>
               <rp-help></rp-help>
             </rp-loading-overlay>
           </div>
@@ -50110,7 +49898,7 @@ class HomedecoratorComponent {
           </div>
         }
       }
-      `, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "progress-bar" }, { kind: "component", type: LoadingOverlayComponent, selector: "rp-loading-overlay" }, { kind: "component", type: HdLoaderComponent, selector: "rp-loader", inputs: ["show"] }, { kind: "component", type: Core3dComponent, selector: "rp-core3d" }, { kind: "component", type: RoomPlannerComponent, selector: "rp-room-planner", inputs: ["isLoading"], outputs: ["done", "showPlugin", "focusControls"] }, { kind: "component", type: FurnitureManagerComponent, selector: "rp-furniture-manager" }, { kind: "component", type: PresetsComponent, selector: "rp-presets", inputs: ["openNewRoomDialog"] }, { kind: "component", type: ThreedselectorComponent, selector: "rp-threedselector", inputs: ["selections"], outputs: ["customizeButtonClicked"] }, { kind: "component", type: ToolbarComponent, selector: "rp-toolbar", inputs: ["shareButton"], outputs: ["externalSave", "externalOpen"] }, { kind: "component", type: ProductCatalogComponent, selector: "rp-product-catalog", inputs: ["generalFilterOrders", "purchaseFilterOrders", "logisticsFilterOrders"] }, { kind: "component", type: HelpComponent, selector: "rp-help" }, { kind: "component", type: i27.LiteSelectorComponent, selector: "co-lite-selector", inputs: ["show", "showLabel", "canClose", "animateSlideout", "customDimensions"], outputs: ["showChange", "answerChosen"] }], encapsulation: i0.ViewEncapsulation.None }); }
+      `, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "progress-bar" }, { kind: "component", type: LoadingOverlayComponent, selector: "rp-loading-overlay" }, { kind: "component", type: HdLoaderComponent, selector: "rp-loader", inputs: ["show"] }, { kind: "component", type: Core3dComponent, selector: "rp-core3d" }, { kind: "component", type: RoomPlannerComponent, selector: "rp-room-planner", inputs: ["isLoading"], outputs: ["done", "showPlugin", "focusControls"] }, { kind: "component", type: FurnitureManagerComponent, selector: "rp-furniture-manager" }, { kind: "component", type: PresetsComponent, selector: "rp-presets", inputs: ["openNewRoomDialog"] }, { kind: "component", type: ThreedselectorComponent, selector: "rp-threedselector", inputs: ["selections"], outputs: ["customizeButtonClicked"] }, { kind: "component", type: ToolbarComponent, selector: "rp-toolbar", inputs: ["shareButton"], outputs: ["externalSave", "externalOpen"] }, { kind: "component", type: ProductCatalogComponent, selector: "rp-product-catalog", inputs: ["generalFilterOrders", "purchaseFilterOrders", "logisticsFilterOrders"] }, { kind: "component", type: HelpComponent, selector: "rp-help" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorComponent, decorators: [{
             type: Component,
@@ -50137,7 +49925,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 [purchaseFilterOrders]="purchaseFilterOrders"
                 [logisticsFilterOrders]="logisticsFilterOrders"
               ></rp-product-catalog>
-              <co-lite-selector></co-lite-selector>
               <rp-help></rp-help>
             </rp-loading-overlay>
           </div>
@@ -50171,7 +49958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: IntegrationService }, { type: SceneService }, { type: WebWorkerService }], propDecorators: { generalFilterOrders: [{
+                }] }, { type: IntegrationService }, { type: SceneService }, { type: WebWorkerService }, { type: ConfigurationPresetLoadService }], propDecorators: { generalFilterOrders: [{
                 type: Input
             }], purchaseFilterOrders: [{
                 type: Input
@@ -50183,6 +49970,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], shareButton: [{
                 type: Input
+            }], loadWithConfigurationPreset: [{
+                type: Input
             }], settings: [{
                 type: Input
             }], showClass: [{
@@ -51507,7 +51296,8 @@ class RoomPlannerModule {
             CustomShapeCreatorComponent,
             WallLengthInputComponent,
             CustomCylinderCreatorComponent,
-            SelectedObjectScaleComponent], imports: [CoreModule,
+            SelectedObjectScaleComponent,
+            ConfigurationPresetLoaderComponent], imports: [CoreModule,
             CategoryLibraryModule,
             CommonModule,
             ContextMenuModule,
@@ -51647,7 +51437,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         CustomShapeCreatorComponent,
                         WallLengthInputComponent,
                         CustomCylinderCreatorComponent,
-                        SelectedObjectScaleComponent
+                        SelectedObjectScaleComponent,
+                        ConfigurationPresetLoaderComponent
                     ],
                     providers: [
                         CollisionManagerService,