@colijnit/homedecorator 261.20.5 → 261.20.7

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, from } from 'rxjs';
@@ -43,9 +43,7 @@ import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerM
 import { RGBFormat, LinearToneMapping, AgXToneMapping, LinearFilter as LinearFilter$1, LinearSRGBColorSpace as LinearSRGBColorSpace$1, SrcAlphaSaturateFactor, FloatType as FloatType$1 } from 'three/src/constants.js';
 import md5 from 'md5';
 import { NodeType } from '@colijnit/configuratorapi/build/enum/node-type.enum';
-import { ConfiguratorStatisticsEnvironment } from '@colijnit/configuratorapi/build/model/configurator-statistics-environment';
 import { Options } from '@colijnit/ioneconnector/build/model/options';
-import { FrozenArticle } from '@colijnit/configuratorapi/build/model/frozen-article';
 import { SelectorWithOptions } from '@colijnit/configuratorapi/build/model/selector-with-options';
 import { ImageUtils } from '@colijnit/configuratorapi/build/utils/image-utils';
 import * as i1 from '@angular/common/http';
@@ -106,7 +104,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 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/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i13 from '@angular/material/select';
@@ -115,11 +113,11 @@ import * as i4$1 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/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i4$2 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
-import * as dat from 'dat.gui';
 import * as i6 from '@angular/flex-layout/flex';
 import * as i2$4 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -3986,6 +3984,18 @@ class HomedecoratorConnectorAdapterService {
     // public getJsonMatchTableArticles(): Promise<void> {
     //   return this.connector.getJsonMatchTableArticles();
     // }
+    async prepareArticleForCart(goodId, quantity = 1, shouldGetArticleTree = false, showLoader = true, instanceId = undefined) {
+        const response = await this.articleApi.prepareArticleForCart('Homedecorator', 'Sales', 'Homedecorator', goodId, shouldGetArticleTree, quantity, instanceId, showLoader);
+        if (response && response.validationResult && response.validationResult.success) {
+            if (typeof response.resultObject !== 'string') {
+                return this._boFactory.makeWithRawBackendData(ArticleFullObject, response.resultObject);
+            }
+            return response.resultObject;
+        }
+        else {
+            return null;
+        }
+    }
     async setInstanceToConfigure(id) {
         try {
             if (id !== null) {
@@ -6843,8 +6853,8 @@ class HomedecoratorConnectorService {
     googleTranslateEnabled() {
         return this._connector.googleTranslateEnabled();
     }
-    getJsonConfiguredArticles(goodId, goodType, quantity, externalSource = false, showLoader = true, instanceId, configuratorStatistics) {
-        return this._connector.getJsonConfiguredArticles(goodId, goodType, quantity, externalSource, showLoader, instanceId, configuratorStatistics);
+    prepareArticleForCart(goodId, quantity, externalSource = false, showLoader = true, instanceId) {
+        return this._connector.prepareArticleForCart(goodId, quantity, !!externalSource, showLoader, instanceId);
     }
     // public getJsonMatchTableArticles(): Promise<any> {
     //   return this._connector.getJsonMatchTableArticles();
@@ -7163,23 +7173,21 @@ class HomedecoratorConnectorService {
         });
     }
     async addToCart(goodId, goodType, quantity, instanceId, externalSource) {
-        let json;
-        const statistics = new ConfiguratorStatisticsEnvironment();
-        statistics.userType = 'Homedecorator';
-        statistics.transactionType = 'Sales';
-        statistics.actionDomain = 'Homedecorator';
-        statistics.sessionId = this._settingsService.settings.session ? this._settingsService.settings.session.sessionId : 'unknown';
-        statistics.webHost = window.location.host;
-        statistics.bundleHost = window.location.host;
-        json = await this.getJsonConfiguredArticles(goodId, goodType, quantity, externalSource, true, instanceId, statistics);
-        const frozenArticle = JSON.parse(json);
+        const response = await this.prepareArticleForCart(goodId, quantity, externalSource, true, instanceId);
+        let article;
+        if (typeof response === 'string') {
+            article = JSON.parse(response);
+        }
+        else {
+            article = response;
+        }
         this._googleTagManager.sendEvent(GoogleTagManagerEvent.AddToCart, {
-            'articleNr': frozenArticle.articleNr,
-            'product': frozenArticle.articleName,
-            'composition': frozenArticle instanceof FrozenArticle ? frozenArticle.compositions : frozenArticle.configurationText
+            'articleNr': article.selectorData ? article.selectorData.articleNr : article.articleNr,
+            'product': article.selectorData ? article.selectorData.articleName : article.name,
+            'composition': article.selectorData ? article.selectorData.configurationText : article.configuration
         });
-        this._messageService.emit(MessageType.ArticleCreated, json);
-        return json;
+        this._messageService.emit(MessageType.ArticleCreated, article);
+        return article;
     }
     handleAnswersReceived() {
         this._preloadCachedImages(this.activeAnswers);
@@ -24734,8 +24742,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;
@@ -29087,7 +29095,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) {
@@ -29117,16 +29133,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];
         }
@@ -29141,7 +29159,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,
@@ -33448,6 +33466,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.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) {
@@ -33762,410 +33900,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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$2.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.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: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i4$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$1.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.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: i13.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.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']
@@ -41693,10 +41747,10 @@ class RoomPlannerComponent {
         if (object.metadata) {
             this.showContextMenu = false;
             await this._connectorAdapterService.initConnector(object.metadata.externalSettings ? object.metadata.externalSettings.settings : this.settingsService.settings, object.metadata.externalSettings ? object.metadata.externalSettings.name : undefined, false, object.metadata.externalSettings && object.metadata.externalSettings.externalSourceId ? object.metadata.externalSettings.externalSourceId : null);
-            const json = await this._connectorService.addToCart(+object.metadata.goodId, object.metadata.goodType, 1, object.metadata.itemId, !!(object.metadata.externalSettings && object.metadata.externalSettings.externalSourceId));
+            const article = await this._connectorService.addToCart(+object.metadata.goodId, object.metadata.goodType, 1, object.metadata.itemId, !!(object.metadata.externalSettings && object.metadata.externalSettings.externalSourceId));
             if (object.metadata.externalSettings) {
                 const externalSource = {
-                    article: json,
+                    article: article,
                     quantity: 1,
                     catalogDefinition: object.metadata.externalSettings.catalogDefinition,
                     externalSource: this._connectorAdapterService.getExternalSourceFromId(object.metadata.externalSettings.externalSourceId)
@@ -41704,7 +41758,7 @@ class RoomPlannerComponent {
                 this._appEventService.addExternalSourceToCart.next(externalSource);
             }
             else {
-                this._appEventService.addToCart.next({ article: json, quantity: 1 });
+                this._appEventService.addToCart.next({ article: article, quantity: 1 });
             }
         }
     }
@@ -50017,6 +50071,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,
@@ -50035,7 +50118,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
@@ -50054,7 +50138,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,
@@ -50075,7 +50160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         IconModule,
                         MatSliderModule,
                         TooltipDirectiveModule,
-                        ProgressBarModule
+                        ProgressBarModule,
+                        InputSliderModule
                     ],
                     declarations: [
                         RenderControlsComponent,