@colijnit/configurator 262.1.5 → 262.1.7

package/fesm2022/colijnit-configurator.mjs

@@ -2,9 +2,9 @@ import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, HostBinding, ViewEncapsulation, Component, Input, Output, HostListener, ViewChild, Directive, ElementRef, ViewChildren, TemplateRef, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
+import { BehaviorSubject, Subject, combineLatest, debounceTime } from 'rxjs';
 import * as THREE from 'three';
 import { Color, WebGLRenderer, Box3, Vector3, Scene, PerspectiveCamera, MathUtils, AmbientLight, DirectionalLight, Group, Euler, Object3D, EventDispatcher, MeshBasicMaterial, Mesh, PlaneGeometry, DoubleSide, MeshStandardMaterial, CylinderGeometry, RingGeometry, Matrix4, Raycaster, BufferGeometry, Line, DataTexture, RGFormat, UnsignedByteType, LinearFilter, Shape, Vector2, SphereGeometry, SRGBColorSpace, PCFSoftShadowMap, ShadowMaterial, LightProbe, Texture as Texture$1, MeshPhongMaterial, NoToneMapping, TextureLoader, RGBAFormat, Quaternion, PointLight, BoxGeometry, BackSide, FrontSide, ShapeGeometry } from 'three';
-import { BehaviorSubject, Subject, combineLatest } from 'rxjs';
 import { HdecoPlacement } from '@colijnit/configuratorapi/build/enum/hdeco-placement.enum';
 import * as i6 from '@colijnit/utilities';
 import { ObjectUtils, MaterialUtils, DeviceUtils as DeviceUtils$1, DeviceTier as DeviceTier$1, TranslationModule, UtilitiesPipesModule } from '@colijnit/utilities';
@@ -56,12 +56,6 @@ import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 
-var ConfigurationTemplate;
-(function (ConfigurationTemplate) {
-    ConfigurationTemplate["default"] = "default";
-    ConfigurationTemplate["showFullConfiguration"] = "showFullConfiguration";
-})(ConfigurationTemplate || (ConfigurationTemplate = {}));
-
 class ArParameters {
     depthOcclusion = false;
     depthHitTest = false;
@@ -144,6 +138,7 @@ class SettingOptions {
     groupedShowAllBtn = false;
     showSavePresetButton = false;
     showLoadPresetButton = false;
+    showSceneBuildLoader = false;
 }
 
 class RenderParameters {
@@ -418,14 +413,13 @@ class ConfiguratorEventService {
     buildStarted = new BehaviorSubject(false);
     buildFinished = new BehaviorSubject(undefined);
     addedToScene = new BehaviorSubject(undefined);
-    configurationTemplateChange = new BehaviorSubject(undefined);
     articleNotFound = new BehaviorSubject(undefined);
     selectionWithAnswersChanged = new BehaviorSubject(undefined);
     glbCreated = new Subject();
     showOutline = new Subject();
     showErrorOutline = new Subject();
     hideOutline = new Subject();
-    articleReceived = new Subject();
+    articleReceived = new BehaviorSubject(undefined);
     selectionsReceived = new Subject();
     answersReceived = new Subject();
     extraAnswerDataLoaded = new Subject();
@@ -1036,11 +1030,11 @@ class ConfiguratorConnectorService {
             selections = this._boFactory.makeBOArrayFromRawBackendDataArray(Selection, response.resultObjects);
         }
         if (this.article.showFullConfiguration) {
-            this._appEventService.configurationTemplateChange.next(ConfigurationTemplate.showFullConfiguration);
+            // this._appEventService.configurationTemplateChange.next(ConfigurationTemplate.showFullConfiguration);
             await this._createSelectorFullConfiguration(selections);
         }
         else {
-            this._appEventService.configurationTemplateChange.next(ConfigurationTemplate.default);
+            // this._appEventService.configurationTemplateChange.next(ConfigurationTemplate.default);
             this._prepareSelections(selections);
         }
     }
@@ -2202,6 +2196,17 @@ class BuildFurnitureBaseService {
         MaterialUtils.ClearCaches();
         VariationUtils.ClearCache();
     }
+    cleanup() {
+        ObjectUtils.DisposeObject(this.full3DObjectToUse);
+        this.full3DObjectToUse = undefined;
+        this._currentCustomFloorGroup = undefined;
+        ObjectUtils.DisposeObject(this._activeChildElement);
+        this._activeChildElement = undefined;
+        this.placedAdjustables.length = 0;
+        this.placedAddables.length = 0;
+        this._adjustables.length = 0;
+        this._addables.length = 0;
+    }
     async prepareInstanceForBuild(shouldCopyInstance, loadFromProject, looseOriginalConfiguration, result) {
         if (shouldCopyInstance && !loadFromProject) {
             const originalInstanceId = result.instanceId;
@@ -2651,17 +2656,6 @@ class BuildFurnitureBaseService {
         // clean
         this.cleanup();
     }
-    cleanup() {
-        ObjectUtils.DisposeObject(this.full3DObjectToUse);
-        this.full3DObjectToUse = undefined;
-        this._currentCustomFloorGroup = undefined;
-        ObjectUtils.DisposeObject(this._activeChildElement);
-        this._activeChildElement = undefined;
-        this.placedAdjustables.length = 0;
-        this.placedAddables.length = 0;
-        this._adjustables.length = 0;
-        this._addables.length = 0;
-    }
     canConnectSelections(sel1, sel2) {
         if (!sel1.decoNode || !sel2.decoNode) {
             return false;
@@ -7079,7 +7073,8 @@ class ConfiguringService {
         this._subs.push(combineLatest([
             this._appEventService.skuSet,
             this._appEventService.instanceIdSet
-        ]).subscribe(async ([sku, instanceId]) => {
+        ]).pipe(debounceTime(0) // wait for events to finish, because skuSet and instanceIdSet events are emitted simultaneously
+        ).subscribe(([sku, instanceId]) => {
             this.sku = sku;
             if (this.sku) {
                 this.instanceId = undefined;
@@ -8597,6 +8592,7 @@ class AnswersSlideoutComponent {
     // TODO change to input
     valutaSymbol = '€';
     hasInfoOpen = false;
+    showTagFilter = false;
     _openCount = 0;
     _answers;
     _subs = [];
@@ -8619,6 +8615,7 @@ class AnswersSlideoutComponent {
                     this.valutaSymbol = this.settingsService.settings.currencySymbol;
                 }
                 this.bottomAlign = this.settingsService.settings.options.bottomAnswers;
+                this.showTagFilter = this.settingsService.settings.options.showTagFilter;
             }
         }));
     }
@@ -8825,7 +8822,7 @@ class AnswersSlideoutComponent {
           ></co-color-filter>
         }
       </div>
-      @if (settingsService.settings.options.showTagFilter) {
+      @if (showTagFilter) {
         <div class="filter">
           @for (tag of tagArray; track tag) {
             <co-tag-filter
@@ -8837,7 +8834,7 @@ class AnswersSlideoutComponent {
       }
     }
     <div class="cards" visibilityObserverMaster>
-      @for (answer of filteredAnswers; track answer) {
+      @for (answer of filteredAnswers; track answer.id) {
         @if (answer.isGroupHeader) {
           <div class="group-header-wrapper">
             <div class="group-header-title">
@@ -8973,7 +8970,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           ></co-color-filter>
         }
       </div>
-      @if (settingsService.settings.options.showTagFilter) {
+      @if (showTagFilter) {
         <div class="filter">
           @for (tag of tagArray; track tag) {
             <co-tag-filter
@@ -8985,7 +8982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       }
     }
     <div class="cards" visibilityObserverMaster>
-      @for (answer of filteredAnswers; track answer) {
+      @for (answer of filteredAnswers; track answer.id) {
         @if (answer.isGroupHeader) {
           <div class="group-header-wrapper">
             <div class="group-header-title">
@@ -9974,7 +9971,6 @@ class SelectionsSummaryComponent {
     canClose = true;
     answersTemplate;
     answerToShowFromSelectionText;
-    showSaveAndLoadConfiguration;
     customDimensions = false;
     disableMouse = false;
     handledocumentMouseUp(event) {
@@ -10024,7 +10020,7 @@ class SelectionsSummaryComponent {
         this.selectionToCustomize = sel;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectionsSummaryComponent, deps: [{ token: ConfiguratorConnectorService }, { token: IconCacheService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SelectionsSummaryComponent, isStandalone: false, selector: "co-selections-summary", inputs: { selections: "selections", showLabel: "showLabel", canClose: "canClose", answersTemplate: "answersTemplate", answerToShowFromSelectionText: "answerToShowFromSelectionText", showSaveAndLoadConfiguration: "showSaveAndLoadConfiguration", customDimensions: "customDimensions" }, outputs: { closeClick: "closeClick", cancelAnswers: "cancelAnswers", selectSelection: "selectSelection", repeatSelection: "repeatSelection", deleteSelection: "deleteSelection" }, host: { listeners: { "document:mouseup": "handledocumentMouseUp($event)", "document:mousemove": "handleDocumentMouseDown($event)" }, properties: { "class.co-selections-summary": "this.showClass", "class.custom-dimensions": "this.customDimensions", "class.disable-mouse": "this.disableMouse" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SelectionsSummaryComponent, isStandalone: false, selector: "co-selections-summary", inputs: { selections: "selections", showLabel: "showLabel", canClose: "canClose", answersTemplate: "answersTemplate", answerToShowFromSelectionText: "answerToShowFromSelectionText", customDimensions: "customDimensions" }, outputs: { closeClick: "closeClick", cancelAnswers: "cancelAnswers", selectSelection: "selectSelection", repeatSelection: "repeatSelection", deleteSelection: "deleteSelection" }, host: { listeners: { "document:mouseup": "handledocumentMouseUp($event)", "document:mousemove": "handleDocumentMouseDown($event)" }, properties: { "class.co-selections-summary": "this.showClass", "class.custom-dimensions": "this.customDimensions", "class.disable-mouse": "this.disableMouse" } }, ngImport: i0, template: `
       @if (showLabel || canClose) {
         <header class="drawer__header">
           @if (showLabel) {
@@ -10039,7 +10035,7 @@ class SelectionsSummaryComponent {
       }
       @if (selections && selections.length > 0) {
         <div class="selections-content small-scrollbar">
-          @for (sel of selections; track sel; let index = $index) {
+          @for (sel of selections; track sel.id; let index = $index) {
             <co-selections-summary-line
               [selection]="sel"
               [answersTemplate]="answersTemplate ? answersTemplate : undefined"
@@ -10083,7 +10079,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       }
       @if (selections && selections.length > 0) {
         <div class="selections-content small-scrollbar">
-          @for (sel of selections; track sel; let index = $index) {
+          @for (sel of selections; track sel.id; let index = $index) {
             <co-selections-summary-line
               [selection]="sel"
               [answersTemplate]="answersTemplate ? answersTemplate : undefined"
@@ -10123,8 +10119,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], answerToShowFromSelectionText: [{
                 type: Input
-            }], showSaveAndLoadConfiguration: [{
-                type: Input
             }], customDimensions: [{
                 type: HostBinding,
                 args: ['class.custom-dimensions']
@@ -10187,7 +10181,6 @@ class LiteSelectorComponent {
     canClose = true;
     animateSlideout = true;
     customDimensions = false;
-    showSaveAndLoadConfiguration;
     showChange = new EventEmitter();
     answerChosen = new EventEmitter();
     answerToShowFromSelectionText;
@@ -10240,7 +10233,7 @@ class LiteSelectorComponent {
         // this.iOne.getMoodImageForAnswerSelection(answerSelected.answer, false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LiteSelectorComponent, deps: [{ token: SwitchBuildFurnitureService }, { token: ConfiguratorConnectorService }, { token: ConfiguringService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LiteSelectorComponent, isStandalone: false, selector: "co-lite-selector", inputs: { show: "show", showLabel: "showLabel", canClose: "canClose", animateSlideout: "animateSlideout", customDimensions: "customDimensions", showSaveAndLoadConfiguration: "showSaveAndLoadConfiguration" }, outputs: { showChange: "showChange", answerChosen: "answerChosen" }, host: { properties: { "class.co-lite-selector": "this.showClass", "class.custom-dimensions": "this.customDimensions" } }, viewQueries: [{ propertyName: "templateAnswers", first: true, predicate: ["templateAnswers"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LiteSelectorComponent, isStandalone: false, selector: "co-lite-selector", inputs: { show: "show", showLabel: "showLabel", canClose: "canClose", animateSlideout: "animateSlideout", customDimensions: "customDimensions" }, outputs: { showChange: "showChange", answerChosen: "answerChosen" }, host: { properties: { "class.co-lite-selector": "this.showClass", "class.custom-dimensions": "this.customDimensions" } }, viewQueries: [{ propertyName: "templateAnswers", first: true, predicate: ["templateAnswers"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
     <ng-container>
       @if (configuratorConnectorService.selectionsToDisplay.length > 0) {
         <co-selections-summary
@@ -10251,7 +10244,6 @@ class LiteSelectorComponent {
           [answersTemplate]="inlineAnswers ? templateAnswers : undefined"
           [answerToShowFromSelectionText]="answerToShowFromSelectionText"
           [selections]="configuratorConnectorService.selectionsToDisplay"
-          [showSaveAndLoadConfiguration]="showSaveAndLoadConfiguration"
           (selectSelection)="onSelectionsSummarySelectSelection($event)"
           (repeatSelection)="onSelectionsSummarySelectSelection($event, false, true)"
           (deleteSelection)="onSelectionsSummaryDeleteSelection($event)"
@@ -10262,21 +10254,27 @@ class LiteSelectorComponent {
         <ng-container [ngTemplateOutlet]="templateAnswers"></ng-container>
       }
     </ng-container>
-    
+
     <ng-template #templateAnswers>
-        @if (configuratorConnectorService.activeAnswers.length > 0) {
-      <co-answers-slideout
-        [showTitle]="!inlineAnswers"
-        [showFilter]="!inlineAnswers"
-        [useSlideout]="!inlineAnswers"
-        [customDimensions]="customDimensions"
-        [question]="configuratorConnectorService.activeQuestion"
-        [answers]="configuratorConnectorService.activeAnswers"
-        (answerChosen)="onAnswersSlideoutAnswerChosen($event)"
-      ></co-answers-slideout>
-        }
+      @if (configuratorConnectorService.activeAnswers.length > 0) {
+        <co-answers-slideout
+          [showTitle]="!inlineAnswers"
+          [showFilter]="!inlineAnswers"
+          [useSlideout]="!inlineAnswers"
+          [customDimensions]="customDimensions"
+          [question]="configuratorConnectorService.activeQuestion"
+          [answers]="configuratorConnectorService.activeAnswers"
+          (answerChosen)="onAnswersSlideoutAnswerChosen($event)"
+        ></co-answers-slideout>
+      }
     </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: AnswersSlideoutComponent, selector: "co-answers-slideout", inputs: ["question", "showTitle", "showFilter", "answers", "useSlideout", "customDimensions"], outputs: ["answerChosen"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SelectionsSummaryComponent, selector: "co-selections-summary", inputs: ["selections", "showLabel", "canClose", "answersTemplate", "answerToShowFromSelectionText", "showSaveAndLoadConfiguration", "customDimensions"], outputs: ["closeClick", "cancelAnswers", "selectSelection", "repeatSelection", "deleteSelection"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: AnswersSlideoutComponent, selector: "co-answers-slideout", inputs: ["question", "showTitle", "showFilter", "answers", "useSlideout", "customDimensions"], outputs: ["answerChosen"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SelectionsSummaryComponent, selector: "co-selections-summary", inputs: ["selections", "showLabel", "canClose", "answersTemplate", "answerToShowFromSelectionText", "customDimensions"], outputs: ["closeClick", "cancelAnswers", "selectSelection", "repeatSelection", "deleteSelection"] }], animations: [
+            trigger('showSelections', [
+                state('void', style({ 'transform': 'translateX(100%)', opacity: 0 })),
+                state('*', style({ 'transform': 'translateX(0%)', opacity: 1 })),
+                transition('void <=> *', animate(200))
+            ])
+        ], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LiteSelectorComponent, decorators: [{
             type: Component,
@@ -10293,7 +10291,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           [answersTemplate]="inlineAnswers ? templateAnswers : undefined"
           [answerToShowFromSelectionText]="answerToShowFromSelectionText"
           [selections]="configuratorConnectorService.selectionsToDisplay"
-          [showSaveAndLoadConfiguration]="showSaveAndLoadConfiguration"
           (selectSelection)="onSelectionsSummarySelectSelection($event)"
           (repeatSelection)="onSelectionsSummarySelectSelection($event, false, true)"
           (deleteSelection)="onSelectionsSummaryDeleteSelection($event)"
@@ -10304,22 +10301,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         <ng-container [ngTemplateOutlet]="templateAnswers"></ng-container>
       }
     </ng-container>
-    
+
     <ng-template #templateAnswers>
-        @if (configuratorConnectorService.activeAnswers.length > 0) {
-      <co-answers-slideout
-        [showTitle]="!inlineAnswers"
-        [showFilter]="!inlineAnswers"
-        [useSlideout]="!inlineAnswers"
-        [customDimensions]="customDimensions"
-        [question]="configuratorConnectorService.activeQuestion"
-        [answers]="configuratorConnectorService.activeAnswers"
-        (answerChosen)="onAnswersSlideoutAnswerChosen($event)"
-      ></co-answers-slideout>
-        }
+      @if (configuratorConnectorService.activeAnswers.length > 0) {
+        <co-answers-slideout
+          [showTitle]="!inlineAnswers"
+          [showFilter]="!inlineAnswers"
+          [useSlideout]="!inlineAnswers"
+          [customDimensions]="customDimensions"
+          [question]="configuratorConnectorService.activeQuestion"
+          [answers]="configuratorConnectorService.activeAnswers"
+          (answerChosen)="onAnswersSlideoutAnswerChosen($event)"
+        ></co-answers-slideout>
+      }
     </ng-template>
-    `,
+  `,
                     encapsulation: ViewEncapsulation.None,
+                    animations: [
+                        trigger('showSelections', [
+                            state('void', style({ 'transform': 'translateX(100%)', opacity: 0 })),
+                            state('*', style({ 'transform': 'translateX(0%)', opacity: 1 })),
+                            transition('void <=> *', animate(200))
+                        ])
+                    ],
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: SwitchBuildFurnitureService }, { type: ConfiguratorConnectorService }, { type: ConfiguringService }], propDecorators: { showClass: [{
@@ -10341,8 +10345,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['class.custom-dimensions']
             }, {
                 type: Input
-            }], showSaveAndLoadConfiguration: [{
-                type: Input
             }], showChange: [{
                 type: Output
             }], answerChosen: [{
@@ -10670,7 +10672,7 @@ class ProductConfiguratorSelectorOptionDropDownComponent {
       <div class="configurator-option-dropdown-container">
         <div class="custom-select-wrapper">
           <select class="option-dropdown-select" (change)="onChange($event)">
-            @for (option of options; track option; let i = $index) {
+            @for (option of options; track option.id; let i = $index) {
               <option [value]="option" [selected]="option.selected === 'F'">
                 @if (option.nodeText) {
                   <p [textContent]="option.nodeText | localize:true | async"></p>
@@ -10696,7 +10698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       <div class="configurator-option-dropdown-container">
         <div class="custom-select-wrapper">
           <select class="option-dropdown-select" (change)="onChange($event)">
-            @for (option of options; track option; let i = $index) {
+            @for (option of options; track option.id; let i = $index) {
               <option [value]="option" [selected]="option.selected === 'F'">
                 @if (option.nodeText) {
                   <p [textContent]="option.nodeText | localize:true | async"></p>
@@ -10852,7 +10854,7 @@ class ProductConfiguratorSelectorOptionComponent {
       @if (this.selection.displayOptionControl !== configurationDisplayOption.DropDown
         && !this.largeTileOptions.includes(this.selection.displayOptionControl)
         && !this.smallTileOptions.includes(this.selection.displayOptionControl)) {
-        @for (child of listOfChoices; track child) {
+        @for (child of listOfChoices; track child.id) {
           <div class="selector-option-wrapper" [class.active]="child.selected ==='F'">
             @if (this.selection.displayOptionControl === configurationDisplayOption.Button) {
               <co-product-configurator-selector-option-button
@@ -10901,7 +10903,7 @@ class ProductConfiguratorSelectorOptionComponent {
       @if (
           this.largeTileOptions.includes(this.selection.displayOptionControl)
           || this.smallTileOptions.includes(this.selection.displayOptionControl)) {
-        @for (child of visibleAnswers; track child) {
+        @for (child of visibleAnswers; track child.id) {
           <div class="selector-option-wrapper" [class.active]="child.selected ==='F'">
             <co-product-configurator-selector-option-tile
               [option]="child"
@@ -10957,7 +10959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       @if (this.selection.displayOptionControl !== configurationDisplayOption.DropDown
         && !this.largeTileOptions.includes(this.selection.displayOptionControl)
         && !this.smallTileOptions.includes(this.selection.displayOptionControl)) {
-        @for (child of listOfChoices; track child) {
+        @for (child of listOfChoices; track child.id) {
           <div class="selector-option-wrapper" [class.active]="child.selected ==='F'">
             @if (this.selection.displayOptionControl === configurationDisplayOption.Button) {
               <co-product-configurator-selector-option-button
@@ -11006,7 +11008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       @if (
           this.largeTileOptions.includes(this.selection.displayOptionControl)
           || this.smallTileOptions.includes(this.selection.displayOptionControl)) {
-        @for (child of visibleAnswers; track child) {
+        @for (child of visibleAnswers; track child.id) {
           <div class="selector-option-wrapper" [class.active]="child.selected ==='F'">
             <co-product-configurator-selector-option-tile
               [option]="child"
@@ -11541,7 +11543,6 @@ class ProductConfiguratorComponent {
     showLabel = true;
     canClose = true;
     customDimensions = false;
-    showSaveAndLoadConfiguration;
     showChange = new EventEmitter();
     answerChosen = new EventEmitter();
     valutaSymbol = '€'; // TODO this should be a setting
@@ -11569,7 +11570,11 @@ class ProductConfiguratorComponent {
             if (selection) {
                 this.onSelectionsSummarySelectSelection(selection);
             }
-        }), this._eventService.articleReceived.subscribe((article) => this._handleArticleReceived(article)), this._eventService.selectionWithAnswersChanged.subscribe((selections) => this._handleSelectionWithAnswersChanged(selections)));
+        }), this._eventService.articleReceived.subscribe((article) => {
+            if (article) {
+                this._handleArticleReceived(article);
+            }
+        }), this._eventService.selectionWithAnswersChanged.subscribe((selections) => this._handleSelectionWithAnswersChanged(selections)));
     }
     ngOnDestroy() {
         this._subs.forEach(s => s.unsubscribe());
@@ -11603,7 +11608,7 @@ class ProductConfiguratorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorComponent, deps: [{ token: ConfiguratorConnectorService }, { token: SwitchBuildFurnitureService }, { token: ConfiguratorSettingsService }, { token: ProductConfiguratorService }, { token: IconCacheService }, { token: i1.DomSanitizer }, { token: ConfiguringService }, { token: ConfiguratorEventService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ProductConfiguratorComponent, isStandalone: false, selector: "co-product-configurator", inputs: { showHeaderInformation: "showHeaderInformation", showSelections: "showSelections", showLabel: "showLabel", canClose: "canClose", customDimensions: "customDimensions", showSaveAndLoadConfiguration: "showSaveAndLoadConfiguration" }, outputs: { showChange: "showChange", answerChosen: "answerChosen" }, host: { properties: { "class.co-product-configurator": "this.showClass" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ProductConfiguratorComponent, isStandalone: false, selector: "co-product-configurator", inputs: { showHeaderInformation: "showHeaderInformation", showSelections: "showSelections", showLabel: "showLabel", canClose: "canClose", customDimensions: "customDimensions" }, outputs: { showChange: "showChange", answerChosen: "answerChosen" }, host: { properties: { "class.co-product-configurator": "this.showClass" } }, ngImport: i0, template: `
       <div class="product-configurator-container">
         @if (showHeaderInformation) {
           <div class="product-configurator-header">
@@ -11710,8 +11715,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], customDimensions: [{
                 type: Input
-            }], showSaveAndLoadConfiguration: [{
-                type: Input
             }], showChange: [{
                 type: Output
             }], answerChosen: [{
@@ -11726,9 +11729,11 @@ class ConfiguratorComponent {
     _buildFurnitureService;
     _configuratorConnectorService;
     showClass = true;
+    show = true;
     set sku(value) {
+        this._reset();
         this._sku = value;
-        if (this._sku && this.loaded) {
+        if (this.loaded) {
             this._configuratorEventService.skuSet.next(this._sku);
             this._skuSet = true;
         }
@@ -11737,8 +11742,9 @@ class ConfiguratorComponent {
         return this._sku;
     }
     set instanceId(value) {
+        this._reset();
         this._instanceId = value;
-        if (this._instanceId && this.loaded) {
+        if (this.loaded) {
             this._configuratorEventService.instanceIdSet.next(this._instanceId);
             this._instanceIdSet = true;
         }
@@ -11772,11 +11778,12 @@ class ConfiguratorComponent {
     resultHasErrors = false;
     showErrorDiagram = false;
     configurationResultObject;
-    showFullConfiguration = false;
+    showFullConfiguration = undefined;
     showLiteSelector = false;
     showSelections = false;
     showAnswers = false;
     loaded = false;
+    forceShow = false;
     _subs = [];
     _loadingFromPreset = false;
     _settings;
@@ -11784,6 +11791,7 @@ class ConfiguratorComponent {
     _instanceIdSet = false;
     _sku;
     _skuSet = false;
+    _alreadyReset = false;
     constructor(settingsService, loaderService, _configuratorEventService, _configuringService, _buildFurnitureService, _configuratorConnectorService) {
         this.settingsService = settingsService;
         this.loaderService = loaderService;
@@ -11791,7 +11799,11 @@ class ConfiguratorComponent {
         this._configuringService = _configuringService;
         this._buildFurnitureService = _buildFurnitureService;
         this._configuratorConnectorService = _configuratorConnectorService;
-        this._subs.push(this._configuratorEventService.articleNotFound.subscribe((buildResult) => this._handleArticleNotFound(buildResult)), this._configuratorEventService.answerCountReceived.subscribe((answerCount) => this._handleAnswerCountReceived(answerCount)), this._configuratorEventService.buildFinished.subscribe((resultObject) => this._handleBuildFinished(resultObject)), this._configuratorEventService.configurationTemplateChange.subscribe((template) => this._handleTemplateChange(template)), this._configuratorConnectorService.controllerInitialized.subscribe((initialized) => {
+        this._subs.push(this._configuratorEventService.articleNotFound.subscribe((buildResult) => this._handleArticleNotFound(buildResult)), this._configuratorEventService.answerCountReceived.subscribe((answerCount) => this._handleAnswerCountReceived(answerCount)), this._configuratorEventService.buildFinished.subscribe((resultObject) => this._handleBuildFinished(resultObject)), this._configuratorEventService.articleReceived.subscribe((article) => {
+            if (article) {
+                this.showFullConfiguration = !!article.showFullConfiguration;
+            }
+        }), this._configuratorConnectorService.controllerInitialized.subscribe((initialized) => {
             if (initialized) {
                 this.loaded = true;
                 if (this._sku && !this._skuSet) {
@@ -11803,6 +11815,12 @@ class ConfiguratorComponent {
                     this._instanceIdSet = true;
                 }
             }
+        }), combineLatest([
+            this._configuratorEventService.skuSet,
+            this._configuratorEventService.instanceIdSet
+        ]).pipe(debounceTime(0) // wait for events to finish, because skuSet and instanceIdSet events are emitted simultaneously
+        ).subscribe(([sku, instanceId]) => {
+            this._alreadyReset = false;
         }));
     }
     ngOnInit() {
@@ -11851,9 +11869,7 @@ class ConfiguratorComponent {
     }
     _handleAnswerCountReceived(answerCount) {
         this.showAnswers = answerCount > 0;
-        if (this.showAnswers) {
-            this.showLiteSelector = !this._loadingFromPreset;
-        }
+        this.forceShow = this.showAnswers;
     }
     _handleBuildFinished(result) {
         if (!result) {
@@ -11868,20 +11884,25 @@ class ConfiguratorComponent {
             this.showErrorDiagram = true;
         }
     }
-    _handleTemplateChange(template) {
-        if (template === ConfigurationTemplate.default) {
-            this.showFullConfiguration = false;
-        }
-        else if (template === ConfigurationTemplate.showFullConfiguration) {
-            this.showFullConfiguration = true;
-        }
-        else {
-            this.showFullConfiguration = false;
+    _reset() {
+        if (this._alreadyReset) {
+            return;
         }
+        this._configuratorConnectorService.cleanUp();
+        this._buildFurnitureService.currentActiveService.cleanup(); // Clean up the threeD stuff.
+        this.showFullConfiguration = undefined;
+        this._configuratorEventService.skuSet.next(undefined);
+        this._configuratorEventService.instanceIdSet.next(undefined);
+        this._configuratorEventService.instanceSet.next(undefined);
+        this._configuratorEventService.articleNotFound.next(undefined);
+        this._configuratorEventService.selectionWithAnswersChanged.next(undefined);
+        this._configuratorEventService.articleReceived.next(undefined);
+        this._configuratorEventService.buildFinished.next(undefined);
+        this._alreadyReset = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorComponent, deps: [{ token: ConfiguratorSettingsService }, { token: LoaderService }, { token: ConfiguratorEventService }, { token: ConfiguringService }, { token: SwitchBuildFurnitureService }, { token: ConfiguratorConnectorService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ConfiguratorComponent, isStandalone: false, selector: "co-configurator", inputs: { sku: "sku", instanceId: "instanceId", settings: "settings", scene: "scene", showLoader: "showLoader", showProgressBar: "showProgressBar", showErrorMessages: "showErrorMessages", outputErrorMessages: "outputErrorMessages", canCloseConfigurator: "canCloseConfigurator", animateSlideout: "animateSlideout", showHeaderInformation: "showHeaderInformation" }, outputs: { isLoading: "isLoading", updateProgressBar: "updateProgressBar", errorMessages: "errorMessages", showChange: "showChange" }, host: { properties: { "class.co-configurator": "this.showClass" } }, ngImport: i0, template: `
-      @if (loaded) {  
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ConfiguratorComponent, isStandalone: false, selector: "co-configurator", inputs: { show: "show", sku: "sku", instanceId: "instanceId", settings: "settings", scene: "scene", showLoader: "showLoader", showProgressBar: "showProgressBar", showErrorMessages: "showErrorMessages", outputErrorMessages: "outputErrorMessages", canCloseConfigurator: "canCloseConfigurator", animateSlideout: "animateSlideout", showHeaderInformation: "showHeaderInformation" }, outputs: { isLoading: "isLoading", updateProgressBar: "updateProgressBar", errorMessages: "errorMessages", showChange: "showChange" }, host: { properties: { "class.co-configurator": "this.showClass" } }, ngImport: i0, template: `
+      @if (loaded && (show || forceShow)) {  
         @if (showProgressBar) {
             <co-progress-bar></co-progress-bar>
         }
@@ -11894,7 +11915,7 @@ class ConfiguratorComponent {
                     (closeErrorDialoag)="handleCloseErrorDialog()"
             ></co-configurator-error-dialog>
         }
-        @if (!showFullConfiguration) {
+        @if (showFullConfiguration === false) {
             <co-lite-selector
                     class="floating"
                     [animateSlideout]="animateSlideout"
@@ -11914,14 +11935,14 @@ class ConfiguratorComponent {
         }
         
       }
-    `, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "co-progress-bar" }, { kind: "component", type: ConfiguratorLoaderComponent, selector: "co-configurator-loader", inputs: ["show"] }, { kind: "component", type: ConfiguratorErrorDialogComponent, selector: "co-configurator-error-dialog", inputs: ["errorMessages"], outputs: ["closeErrorDialoag"] }, { kind: "component", type: LiteSelectorComponent, selector: "co-lite-selector", inputs: ["show", "showLabel", "canClose", "animateSlideout", "customDimensions", "showSaveAndLoadConfiguration"], outputs: ["showChange", "answerChosen"] }, { kind: "component", type: ProductConfiguratorComponent, selector: "co-product-configurator", inputs: ["showHeaderInformation", "showSelections", "showLabel", "canClose", "customDimensions", "showSaveAndLoadConfiguration"], outputs: ["showChange", "answerChosen"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "co-progress-bar" }, { kind: "component", type: ConfiguratorLoaderComponent, selector: "co-configurator-loader", inputs: ["show"] }, { kind: "component", type: ConfiguratorErrorDialogComponent, selector: "co-configurator-error-dialog", inputs: ["errorMessages"], outputs: ["closeErrorDialoag"] }, { kind: "component", type: LiteSelectorComponent, selector: "co-lite-selector", inputs: ["show", "showLabel", "canClose", "animateSlideout", "customDimensions"], outputs: ["showChange", "answerChosen"] }, { kind: "component", type: ProductConfiguratorComponent, selector: "co-product-configurator", inputs: ["showHeaderInformation", "showSelections", "showLabel", "canClose", "customDimensions"], outputs: ["showChange", "answerChosen"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'co-configurator',
                     template: `
-      @if (loaded) {  
+      @if (loaded && (show || forceShow)) {  
         @if (showProgressBar) {
             <co-progress-bar></co-progress-bar>
         }
@@ -11934,7 +11955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     (closeErrorDialoag)="handleCloseErrorDialog()"
             ></co-configurator-error-dialog>
         }
-        @if (!showFullConfiguration) {
+        @if (showFullConfiguration === false) {
             <co-lite-selector
                     class="floating"
                     [animateSlideout]="animateSlideout"
@@ -11961,6 +11982,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         }], ctorParameters: () => [{ type: ConfiguratorSettingsService }, { type: LoaderService }, { type: ConfiguratorEventService }, { type: ConfiguringService }, { type: SwitchBuildFurnitureService }, { type: ConfiguratorConnectorService }], propDecorators: { showClass: [{
                 type: HostBinding,
                 args: ['class.co-configurator']
+            }], show: [{
+                type: Input
             }], sku: [{
                 type: Input
             }], instanceId: [{
@@ -14272,6 +14295,9 @@ class SceneButtonUtils {
                 if (selection.hdecoPositioning !== 'N') {
                     const len = selection.decoNode ? selection.decoNode.connectors.length : 0;
                     for (let i = 0; i < len; i++) {
+                        if (selection.decoNode.connectors[i] === null) {
+                            return;
+                        }
                         const conObject = this._getConnectorObject(child, selection.decoNode.connectors[i].connector);
                         const conObjectParent = ObjectUtils.GetParentItem(conObject, CustomObject3D);
                         const existingButton = result.find((eab) => {
@@ -15264,7 +15290,6 @@ class ConfiguratorSceneComponent {
     _floorService;
     canvasElement;
     elementToolbar;
-    showSceneBuildLoader = true;
     showClass = true;
     totalSteps = 8;
     currentStep = 0;
@@ -15276,6 +15301,7 @@ class ConfiguratorSceneComponent {
     loaderProgress = 0;
     showElementToolbar = false;
     animateEditAddButtons = false;
+    showSceneBuildLoader = false;
     enabledDownloadDialog = false;
     development = false;
     showDownloadDialog = false;
@@ -15315,6 +15341,12 @@ class ConfiguratorSceneComponent {
             if (started) {
                 this.setSceneBuildLoader = started;
             }
+        }), this._eventService.addedToScene.subscribe((result) => {
+            if (result) {
+                if (this.currentStep !== this.totalSteps) {
+                    this._loaderProcessUpdate(this.totalSteps);
+                }
+            }
         }), this._settingsService.settingsLoaded.subscribe((loaded) => {
             if (loaded && this._settingsService.settings && this._settingsService.settings.options) {
                 if (this._settingsService.settings.options.showDownloadButton) {
@@ -15328,6 +15360,7 @@ class ConfiguratorSceneComponent {
                     this._createCameraSettingsButton();
                 }
                 this.development = this._settingsService.settings.options.development;
+                this.showSceneBuildLoader = this._settingsService.settings.options.showSceneBuildLoader;
             }
         }));
     }
@@ -15542,7 +15575,7 @@ class ConfiguratorSceneComponent {
         this._dimensionsService.enabled = !this._dimensionsService.enabled;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorSceneComponent, deps: [{ token: ConfiguratorSettingsService }, { token: ConfiguratorRotationService }, { token: ConfiguratorDynamicCameraService }, { token: ConfiguratorSceneService }, { token: ConfiguratorEventService }, { token: ConfiguratorCameraService }, { token: ConfiguratorItemService }, { token: SwitchBuildFurnitureService }, { token: SceneOptionsService }, { token: DimensionsService }, { token: FloorPlaneService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ConfiguratorSceneComponent, isStandalone: false, selector: "co-configurator-scene", inputs: { showSceneBuildLoader: "showSceneBuildLoader" }, host: { properties: { "class.co-configurator-scene": "this.showClass" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }, { propertyName: "elementToolbar", first: true, predicate: ElementToolbarComponent, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ConfiguratorSceneComponent, isStandalone: false, selector: "co-configurator-scene", host: { properties: { "class.co-configurator-scene": "this.showClass" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }, { propertyName: "elementToolbar", first: true, predicate: ElementToolbarComponent, descendants: true }], ngImport: i0, template: `
     @if (showSceneBuildLoader && setSceneBuildLoader) {
       <co-configurator-scene-loader
         [loaderProgress]="loaderProgress">
@@ -15638,8 +15671,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }], elementToolbar: [{
                 type: ViewChild,
                 args: [ElementToolbarComponent]
-            }], showSceneBuildLoader: [{
-                type: Input
             }], showClass: [{
                 type: HostBinding,
                 args: ['class.co-configurator-scene']