@colijnit/homedecorator 262.1.5 → 262.1.6

package/fesm2022/colijnit-homedecorator.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, Component, Inject, Input, HostBinding, Optional, ViewChild, EventEmitter, ElementRef, Output, Directive, ChangeDetectionStrategy, HostListener, ViewEncapsulation, SkipSelf, Self, NgModule, NO_ERRORS_SCHEMA, forwardRef } from '@angular/core';
+import { Injectable, Pipe, Component, Inject, Input, HostBinding, Optional, ViewChild, EventEmitter, ElementRef, Output, Directive, ChangeDetectionStrategy, ViewEncapsulation, HostListener, SkipSelf, Self, NgModule, NO_ERRORS_SCHEMA, forwardRef } from '@angular/core';
 import * as THREE from 'three';
 import { Vector2, Mesh, Object3D, PointLight, Matrix4, Box3, Vector3, Euler, BoxGeometry, MeshBasicMaterial, Scene, AxesHelper, Group, BufferGeometry, Float32BufferAttribute, Line, LineBasicMaterial, CylinderGeometry, EquirectangularReflectionMapping, Material as Material$1, Texture as Texture$1, Source, EventDispatcher, Color, PerspectiveCamera, Quaternion, PlaneGeometry, DoubleSide, MeshStandardMaterial, RingGeometry, MathUtils, Raycaster, DataTexture, UnsignedByteType, LinearFilter, Shape, LinearSRGBColorSpace, SRGBColorSpace, SphereGeometry, PCFSoftShadowMap, ShadowMaterial, LightProbe, DirectionalLight, MeshPhongMaterial, BackSide, FrontSide, NoToneMapping, ReinhardToneMapping, CineonToneMapping, ACESFilmicToneMapping, CustomToneMapping, NeutralToneMapping, BasicShadowMap, PCFShadowMap, VSMShadowMap, OrthographicCamera, WebGLRenderer, TextureLoader, EllipseCurve, ArcCurve, NearestFilter, MeshPhysicalMaterial, Path, ShapeGeometry, ConeGeometry, ObjectLoader, Light, Camera as Camera$1, RepeatWrapping, SpotLight, AmbientLight, HemisphereLight, AdditiveBlending, LineSegments, EdgesGeometry, CircleGeometry, ExtrudeGeometry, InstancedMesh, Clock, AnimationMixer, AnimationClip, BufferAttribute, NoColorSpace, ArrowHelper as ArrowHelper$1, UVMapping, CubeReflectionMapping, CubeRefractionMapping, EquirectangularRefractionMapping, CubeUVReflectionMapping, NearestMipmapNearestFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipMapLinearFilter, LinearMipmapNearestFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipMapLinearFilter, AlphaFormat, RGBAFormat, DepthFormat, DepthStencilFormat, RedFormat, RedIntegerFormat, RGFormat, RGIntegerFormat, RGBAIntegerFormat, ByteType, ShortType, UnsignedShortType, IntType, UnsignedIntType, FloatType, HalfFloatType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedInt248Type, ClampToEdgeWrapping, MirroredRepeatWrapping, ZeroFactor, OneFactor, SrcColorFactor, OneMinusSrcColorFactor, SrcAlphaFactor, OneMinusSrcAlphaFactor, DstAlphaFactor, OneMinusDstAlphaFactor, DstColorFactor, OneMinusDstColorFactor, AddEquation, SubtractEquation, ReverseSubtractEquation, MinEquation, MaxEquation, NoBlending, NormalBlending, SubtractiveBlending, MultiplyBlending, CustomBlending, TangentSpaceNormalMap, ObjectSpaceNormalMap, ZeroStencilOp, KeepStencilOp, ReplaceStencilOp, IncrementStencilOp, DecrementStencilOp, IncrementWrapStencilOp, DecrementWrapStencilOp, InvertStencilOp, NeverStencilFunc, LessStencilFunc, EqualStencilFunc, LessEqualStencilFunc, GreaterStencilFunc, NotEqualStencilFunc, GreaterEqualStencilFunc, AlwaysStencilFunc, SpotLightHelper, DirectionalLightHelper, HemisphereLightHelper, PointLightHelper, GridHelper, PMREMGenerator, BoxHelper } from 'three';
 import { BehaviorSubject, Subject, Observable, throwError, ReplaySubject, combineLatest, filter as filter$1, take as take$1, from } from 'rxjs';
@@ -105,7 +105,7 @@ import { trigger, state, style, transition, animate, query, animateChild } from
 import * as i2$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i5$1 from '@colijnit/corecomponents_v12';
-import { LoaderModule as LoaderModule$1, IconModule, TooltipDirectiveModule, ListOfValuesModule, ButtonModule, InputTextModule, ImageModule, CoreComponentsTranslationModule } from '@colijnit/corecomponents_v12';
+import { LoaderModule as LoaderModule$1, IconModule, InputTextModule, InputNumberPickerModule, TooltipDirectiveModule, ListOfValuesModule, ButtonModule, ImageModule, CoreComponentsTranslationModule } from '@colijnit/corecomponents_v12';
 import * as i2$3 from '@angular/material/input';
 import { MatInputModule, MatFormField } from '@angular/material/input';
 import * as i12 from '@angular/material/select';
@@ -114,9 +114,9 @@ import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$4 from 'ngx-color/sketch';
 import { ColorSketchModule } from 'ngx-color/sketch';
+import * as dat from 'dat.gui';
 import * as i3$2 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
-import * as dat from 'dat.gui';
 import * as i14 from '@angular/flex-layout/flex';
 import * as i2$4 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -3665,7 +3665,7 @@ class HomedecoratorAppEventService {
         this.externalOpen = new Subject();
         this.searchClick = new Subject();
         this.shareProject = new Subject();
-        this.configurationFromPresetLoaded = new BehaviorSubject(false);
+        this.configurationFromPresetLoaded = new Subject();
     }
     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' }); }
@@ -24838,8 +24838,8 @@ class FloorTileIntersectionService {
             floorHits: new Array(),
             edgeHits: new Array()
         };
-        const bvhLeft = new MeshBVH(geometryLeft);
-        const bvhRight = (geometryRight !== null) ? new MeshBVH(geometryRight) : null;
+        const bvhLeft = new MeshBVH(geometryLeft, { maxLeafSize: 10 });
+        const bvhRight = (geometryRight !== null) ? new MeshBVH(geometryRight, { maxLeafSize: 10 }) : null;
         const positionReference = new Object3D();
         for (const floorItem of floorPattern) {
             const bvh = (floorItem.isLeft) ? bvhLeft : bvhRight;
@@ -29191,7 +29191,15 @@ class RenderService {
             };
         }
     }
-    _getSceneRenderSettings(assetId) {
+    _getSceneRenderSettings(assetId, settings) {
+        let hdriIntensityOverwrite;
+        if (settings && settings.hdriIntensity) {
+            hdriIntensityOverwrite = settings.hdriIntensity;
+        }
+        let hdriRotationOverwrite;
+        if (settings && settings.hdriRotation) {
+            hdriRotationOverwrite = settings.hdriRotation;
+        }
         // Get the asset information from the BlenderRenderSettings
         let renderScenes = [];
         if (this._settingsService.settings.blenderSceneSettings && this._settingsService.settings.blenderSceneSettings.scenes) {
@@ -29221,16 +29229,18 @@ class RenderService {
         compositeScene.sceneAssetId = renderScene.primarySceneName;
         compositeScene.activeCameraId = 1;
         compositeScene.default = true;
-        compositeScene.hdriRotation = this._apiServiceModule.degreesToVector3(renderScene.hdriRotation);
-        compositeScene.hdriIntensity = renderScene.hdriIntensity;
+        compositeScene.hdriRotation =
+            hdriRotationOverwrite ? this._apiServiceModule.degreesToVector3(hdriRotationOverwrite) : this._apiServiceModule.degreesToVector3(renderScene.hdriRotation);
+        compositeScene.hdriIntensity = hdriIntensityOverwrite ? hdriIntensityOverwrite : renderScene.hdriIntensity;
         compositeScene.id = 600;
         if (renderScene.multiSceneRender) {
             const additionalScene = new SceneSettings();
             additionalScene.sceneAssetId = renderScene.secondarySceneName;
             additionalScene.activeCameraId = 1;
             additionalScene.default = false;
-            additionalScene.hdriRotation = this._apiServiceModule.degreesToVector3(renderScene.hdriRotation);
-            additionalScene.hdriIntensity = renderScene.hdriIntensity;
+            additionalScene.hdriRotation =
+                hdriRotationOverwrite ? this._apiServiceModule.degreesToVector3(hdriRotationOverwrite) : this._apiServiceModule.degreesToVector3(renderScene.hdriRotation);
+            additionalScene.hdriIntensity = hdriIntensityOverwrite ? hdriIntensityOverwrite : renderScene.hdriIntensity;
             additionalScene.id = 601;
             scenes = [compositeScene, additionalScene];
         }
@@ -29245,7 +29255,7 @@ class RenderService {
     }
     _getDataForRoomRender(settings) {
         this._cameraService.camera.updateMatrixWorld(true);
-        const sceneSettings = this._getSceneRenderSettings(settings.sceneAsset.name);
+        const sceneSettings = this._getSceneRenderSettings(settings.sceneAsset.name, settings);
         const options = {
             width: settings.width,
             height: settings.height,
@@ -31321,7 +31331,7 @@ class ConfigurationPresetLoadService {
             if (initResponse && initResponse.validationResult && initResponse.validationResult.success) {
                 this._messageService.emit(MessageType.LoadConfigurationFromPreset, {
                     sku: this.sku,
-                    instanceId: this.instanceId,
+                    instanceId: initResponse.resultObject,
                     settings: this._externalSourceOptions
                 });
                 this.reset();
@@ -33677,6 +33687,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class BlenderRenderSettings {
 }
 
+class InputSliderComponent {
+    constructor(iconService) {
+        this.iconService = iconService;
+        // TODO we might need to change the inputs to core components ones, but then we need to change the way homedeco looks.
+        // For now just html inputs are fine.
+        this.icons = IconEnum;
+        this.label = '';
+        this.min = 0;
+        this.max = 1000;
+        this.step = 1;
+        this.value = 0;
+        this.valueChange = new EventEmitter();
+    }
+    onValueChange(newValue) {
+        const numeric = +newValue;
+        this.value = numeric;
+        this.valueChange.emit(numeric);
+    }
+    increment() {
+        this.onValueChange(this.value + this.step);
+    }
+    decrement() {
+        this.onValueChange(this.value - this.step);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputSliderComponent, deps: [{ token: HomedecoratorIconCacheService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InputSliderComponent, isStandalone: false, selector: "co-input-slider", inputs: { label: "label", min: "min", max: "max", step: "step", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <div class="setting-part-container">
+      <div class="form-field third-width">
+        @if (label) {
+          <label [for]="label" class="form-field-label" [textContent]="label"></label>
+        }
+        
+        <input
+          [id]="label"
+          type="number"
+          class="form-field-input"
+          [min]="min"
+          [max]="max"
+          [step]="step"
+          [ngModel]="value"
+          (ngModelChange)="onValueChange($event)">
+      </div>
+
+      <div class="setting-part-buttons">
+        <button class="amount-button" (click)="decrement()">
+          <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
+        </button>
+        <button class="amount-button" (click)="increment()">
+          <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
+        </button>
+      </div>
+
+      <div class="setting-part-slider">
+        <input
+          type="range"
+          class="value-slider"
+          [min]="min"
+          [max]="max"
+          [step]="step"
+          [ngModel]="value"
+          (ngModelChange)="onValueChange($event)">
+      </div>
+    </div>
+  `, isInline: true, styles: [".setting-part-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.setting-part-container .form-field{position:relative;display:flex;flex-direction:column}.setting-part-container .form-field-label{font-size:10px;color:#171721;margin-bottom:5px}.setting-part-container .form-field-input{border:none;border-bottom:1px solid rgba(0,0,0,.42);background:transparent;font-size:16px;padding:4px 0;outline:none;width:100%;box-sizing:border-box;transition:border-color .2s ease}.setting-part-container .form-field-input:focus{border-bottom:2px solid #da9803;margin-bottom:-1px}.setting-part-container .form-field-input::-webkit-outer-spin-button,.setting-part-container .form-field-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.setting-part-container .form-field-input[type=number]{-moz-appearance:textfield}.setting-part-container .third-width{width:32%}.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}.setting-part-container .setting-part-buttons .amount-button co-icon{display:block;width:25px;height:25px}.setting-part-container .setting-part-buttons .amount-button co-icon svg{fill:#171721}.setting-part-container .setting-part-slider .value-slider{width:100%;appearance:none;height:2px;background:#da98034d;outline:none;cursor:pointer}.setting-part-container .setting-part-slider .value-slider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#da9803;cursor:pointer}.setting-part-container .setting-part-slider .value-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#da9803;border:none;cursor:pointer}.setting-part-container .setting-part-slider .value-slider::-moz-range-track{height:2px;background:#da98034d}\n"], dependencies: [{ kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'co-input-slider', template: `
+    <div class="setting-part-container">
+      <div class="form-field third-width">
+        @if (label) {
+          <label [for]="label" class="form-field-label" [textContent]="label"></label>
+        }
+        
+        <input
+          [id]="label"
+          type="number"
+          class="form-field-input"
+          [min]="min"
+          [max]="max"
+          [step]="step"
+          [ngModel]="value"
+          (ngModelChange)="onValueChange($event)">
+      </div>
+
+      <div class="setting-part-buttons">
+        <button class="amount-button" (click)="decrement()">
+          <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
+        </button>
+        <button class="amount-button" (click)="increment()">
+          <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
+        </button>
+      </div>
+
+      <div class="setting-part-slider">
+        <input
+          type="range"
+          class="value-slider"
+          [min]="min"
+          [max]="max"
+          [step]="step"
+          [ngModel]="value"
+          (ngModelChange)="onValueChange($event)">
+      </div>
+    </div>
+  `, standalone: false, encapsulation: ViewEncapsulation.None, styles: [".setting-part-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.setting-part-container .form-field{position:relative;display:flex;flex-direction:column}.setting-part-container .form-field-label{font-size:10px;color:#171721;margin-bottom:5px}.setting-part-container .form-field-input{border:none;border-bottom:1px solid rgba(0,0,0,.42);background:transparent;font-size:16px;padding:4px 0;outline:none;width:100%;box-sizing:border-box;transition:border-color .2s ease}.setting-part-container .form-field-input:focus{border-bottom:2px solid #da9803;margin-bottom:-1px}.setting-part-container .form-field-input::-webkit-outer-spin-button,.setting-part-container .form-field-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.setting-part-container .form-field-input[type=number]{-moz-appearance:textfield}.setting-part-container .third-width{width:32%}.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}.setting-part-container .setting-part-buttons .amount-button co-icon{display:block;width:25px;height:25px}.setting-part-container .setting-part-buttons .amount-button co-icon svg{fill:#171721}.setting-part-container .setting-part-slider .value-slider{width:100%;appearance:none;height:2px;background:#da98034d;outline:none;cursor:pointer}.setting-part-container .setting-part-slider .value-slider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#da9803;cursor:pointer}.setting-part-container .setting-part-slider .value-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#da9803;border:none;cursor:pointer}.setting-part-container .setting-part-slider .value-slider::-moz-range-track{height:2px;background:#da98034d}\n"] }]
+        }], ctorParameters: () => [{ type: HomedecoratorIconCacheService }], propDecorators: { label: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 // A pipe for appending strings to other strings in view templates.
 class AppendPipe {
     transform(value, append) {
@@ -33991,410 +34121,326 @@ class RenderControlsComponent {
     }
     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: `
-        <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 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="">
+              }
+              @if (!blenderPreviewRender) {
+                <div class="render-popup-preview-placeholder">
+                  <span>{{ 'PREVIEW' | localize }}</span>
                 </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="">
-                        }
-                        @if (!blenderPreviewRender) {
-                            <div class="render-popup-preview-placeholder">
-                                <span>{{ 'PREVIEW' | localize }}</span>
-                            </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>
+              }
+              <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>
                     }
-                    <div class="render-popup-dropdown">
-                        <mat-form-field class="face-select-form">
-                            <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 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>
-                    </div>
+                    @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 (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>
-                    </div>
-                    <div class="render-warning-body">
-                        <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>
+                @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>
+                    
+                    <co-input-slider
+                      [label]="'ENVIRONMENT_LIGHT' | localize"
+                      [min]="1"
+                      [max]="20"
+                      [(value)]="hdriIntensity">
+                    </co-input-slider>
+
+                    <co-input-slider
+                      [label]="'ROTATION' | localize"
+                      [min]="1"
+                      [max]="360"
+                      [(value)]="hdriRotation">
+                    </co-input-slider>
+
+                    <co-input-slider
+                      [label]="'LIGHTS' | localize"
+                      [min]="1"
+                      [max]="10"
+                      [(value)]="lightingExposure">
+                    </co-input-slider>
+                  </div>
+                }
+              </div>
             }
-            <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: i5.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$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i3$2.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" }] }); }
+            <div class="render-popup-dropdown">
+              <mat-form-field class="face-select-form">
+                <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 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>
+            </div>
+          </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>
+            </div>
+            <div class="render-warning-body">
+              <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>
+            </div>
+          </div>
+        }
+        <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;min-width:375px}.render-container .render-popup-container{box-sizing:border-box;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 auto;position:relative;width:340px;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-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: "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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: InputSliderComponent, selector: "co-input-slider", inputs: ["label", "min", "max", "step", "value"], outputs: ["valueChange"] }, { 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: `
-        <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 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="">
+              }
+              @if (!blenderPreviewRender) {
+                <div class="render-popup-preview-placeholder">
+                  <span>{{ 'PREVIEW' | localize }}</span>
                 </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="">
-                        }
-                        @if (!blenderPreviewRender) {
-                            <div class="render-popup-preview-placeholder">
-                                <span>{{ 'PREVIEW' | localize }}</span>
-                            </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>
+              }
+              <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>
                     }
-                    <div class="render-popup-dropdown">
-                        <mat-form-field class="face-select-form">
-                            <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 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>
-                    </div>
+                    @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 (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>
-                    </div>
-                    <div class="render-warning-body">
-                        <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>
+                @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>
+                    
+                    <co-input-slider
+                      [label]="'ENVIRONMENT_LIGHT' | localize"
+                      [min]="1"
+                      [max]="20"
+                      [(value)]="hdriIntensity">
+                    </co-input-slider>
+
+                    <co-input-slider
+                      [label]="'ROTATION' | localize"
+                      [min]="1"
+                      [max]="360"
+                      [(value)]="hdriRotation">
+                    </co-input-slider>
+
+                    <co-input-slider
+                      [label]="'LIGHTS' | localize"
+                      [min]="1"
+                      [max]="10"
+                      [(value)]="lightingExposure">
+                    </co-input-slider>
+                  </div>
+                }
+              </div>
             }
-            <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"] }]
+            <div class="render-popup-dropdown">
+              <mat-form-field class="face-select-form">
+                <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 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>
+            </div>
+          </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>
+            </div>
+            <div class="render-warning-body">
+              <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>
+            </div>
+          </div>
+        }
+        <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;min-width:375px}.render-container .render-popup-container{box-sizing:border-box;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 auto;position:relative;width:340px;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-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']
@@ -42586,30 +42632,18 @@ class ConfigurationPresetLoaderComponent {
     showClass() {
         return true;
     }
-    constructor(configurationPresetService, iconService, _homedecoratorConnectorService, _messageService) {
+    constructor(configurationPresetService, iconService) {
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigurationPresetLoaderComponent, deps: [{ token: ConfigurationPresetLoadService }, { token: HomedecoratorIconCacheService }], 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) {
@@ -42659,7 +42693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     }
 
   `, 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: [{
+        }], ctorParameters: () => [{ type: ConfigurationPresetLoadService }, { type: HomedecoratorIconCacheService }], propDecorators: { showClass: [{
                 type: HostBinding,
                 args: ['class.co-configurator-preset-loader']
             }] } });
@@ -50588,6 +50622,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+class InputSliderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: InputSliderModule, declarations: [InputSliderComponent], imports: [FormsModule,
+            IconModule,
+            InputTextModule,
+            InputNumberPickerModule], exports: [InputSliderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputSliderModule, imports: [FormsModule,
+            IconModule,
+            InputTextModule,
+            InputNumberPickerModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputSliderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FormsModule,
+                        IconModule,
+                        InputTextModule,
+                        InputNumberPickerModule
+                    ],
+                    exports: [
+                        InputSliderComponent
+                    ],
+                    declarations: [
+                        InputSliderComponent
+                    ]
+                }]
+        }] });
+
 class RenderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: RenderModule, declarations: [RenderControlsComponent,
@@ -50606,7 +50669,8 @@ class RenderModule {
             IconModule,
             MatSliderModule,
             TooltipDirectiveModule,
-            ProgressBarModule], exports: [RenderControlsComponent,
+            ProgressBarModule,
+            InputSliderModule], exports: [RenderControlsComponent,
             RenderProgressComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderModule, providers: [
             HomedecoratorIconCacheService
@@ -50625,7 +50689,8 @@ class RenderModule {
             IconModule,
             MatSliderModule,
             TooltipDirectiveModule,
-            ProgressBarModule] }); }
+            ProgressBarModule,
+            InputSliderModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderModule, decorators: [{
             type: NgModule,
@@ -50646,7 +50711,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         IconModule,
                         MatSliderModule,
                         TooltipDirectiveModule,
-                        ProgressBarModule
+                        ProgressBarModule,
+                        InputSliderModule
                     ],
                     declarations: [
                         RenderControlsComponent,