@colijnit/configurator 261.20.8 → 261.20.9

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;
@@ -419,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();
@@ -1037,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);
         }
     }
@@ -7080,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;
@@ -8598,6 +8592,7 @@ class AnswersSlideoutComponent {
     // TODO change to input
     valutaSymbol = '€';
     hasInfoOpen = false;
+    showTagFilter = false;
     _openCount = 0;
     _answers;
     _subs = [];
@@ -8620,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;
             }
         }));
     }
@@ -8826,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
@@ -8838,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">
@@ -8974,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
@@ -8986,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">
@@ -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"
@@ -10676,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>
@@ -10702,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>
@@ -10858,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
@@ -10907,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"
@@ -10963,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
@@ -11012,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"
@@ -11574,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());
@@ -11729,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;
         }
@@ -11740,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;
         }
@@ -11775,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;
@@ -11787,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;
@@ -11794,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) {
@@ -11806,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() {
@@ -11854,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) {
@@ -11871,20 +11884,24 @@ 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.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>
         }
@@ -11897,7 +11914,7 @@ class ConfiguratorComponent {
                     (closeErrorDialoag)="handleCloseErrorDialog()"
             ></co-configurator-error-dialog>
         }
-        @if (!showFullConfiguration) {
+        @if (showFullConfiguration === false) {
             <co-lite-selector
                     class="floating"
                     [animateSlideout]="animateSlideout"
@@ -11924,7 +11941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{
                     selector: 'co-configurator',
                     template: `
-      @if (loaded) {  
+      @if (loaded && (show || forceShow)) {  
         @if (showProgressBar) {
             <co-progress-bar></co-progress-bar>
         }
@@ -11937,7 +11954,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"
@@ -11964,6 +11981,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: [{