@colijnit/configurator 1.0.13 → 1.0.17

package/fesm2015/colijnit-configurator.js

@@ -1,5 +1,6 @@
 import { __awaiter, __decorate } from 'tslib';
-import { Mesh, ObjectLoader, Camera, Group, TextureLoader, RepeatWrapping, Object3D, Box3, Vector3, Vector2, Euler, Quaternion, Color, Texture, sRGBEncoding, MeshPhongMaterial, MeshStandardMaterial } from 'three';
+import { Mesh, ObjectLoader, Camera, Group, TextureLoader, RepeatWrapping, Object3D, Box3, Vector3, Vector2, Euler, Quaternion, Color, Texture, sRGBEncoding, MeshPhongMaterial, MeshStandardMaterial, Scene } from 'three';
+import { Options } from '@colijnit/configuratorapi/build/model/options';
 import { DecoNode } from '@colijnit/configuratorapi/build/model/deco-node';
 import { BusinessObjectFactory } from '@colijnit/configuratorapi/build/service/business-object-factory';
 import { Selection } from '@colijnit/configuratorapi/build/model/selection';
@@ -8,8 +9,11 @@ import axios from 'axios';
 import { DecoNodeKind } from '@colijnit/configuratorapi/build/enum/deco-node-kind.enum';
 import * as JSZip from 'jszip';
 import { Article } from '@colijnit/configuratorapi/build/model/article';
-import { ɵɵdefineInjectable, Injectable, EventEmitter, Input, Output, Component, ɵɵinject, Directive, ElementRef, NgModule } from '@angular/core';
+import { Injectable, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, EventEmitter, Input, Output, Component, Directive, ElementRef, NgModule } from '@angular/core';
 import { Configurator } from '@colijnit/configuratorapi/build/configurator';
+import { notNill } from '@colijnit/configuratorapi/build/utils/function/not-nill.function';
+import { NodeType } from '@colijnit/configuratorapi/build/enum/node-type.enum';
+import { isNill } from '@colijnit/configuratorapi/build/utils/function/is-nill.function';
 import { BehaviorSubject } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { trigger, state, style, transition, animate } from '@angular/animations';
@@ -1080,21 +1084,22 @@ class VariationHelper {
     }
 }
 
+let ServiceLocator = class ServiceLocator {
+};
+ServiceLocator.injector = undefined;
+ServiceLocator = __decorate([
+    Injectable()
+], ServiceLocator);
+
 let ConfiguratorService = class ConfiguratorService {
-    constructor() {
-        this.selectionsReceived = new BehaviorSubject([]);
-        this.answersReceived = new BehaviorSubject([]);
-        this.questionReceived = new BehaviorSubject(undefined);
-        this._subs = [];
-    }
-    ngOnDestroy() {
-        this._subs.forEach((subscription) => {
-            subscription.unsubscribe();
-        });
+    constructor(_injector) {
+        this._injector = _injector;
+        if (!ServiceLocator.injector) {
+            ServiceLocator.injector = _injector;
+        }
     }
     initApi(options) {
         this._configuratorApi = new Configurator(options);
-        this._subs.push(this._configuratorApi.selectionsReceived.subscribe(selections => this.selectionsReceived.next(selections)), this._configuratorApi.answersReceived.subscribe(answers => this.answersReceived.next(answers)), this._configuratorApi.questionReceived.subscribe(question => this.questionReceived.next(question)));
     }
     initNodeInstance(goodId) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -1116,9 +1121,14 @@ let ConfiguratorService = class ConfiguratorService {
             return yield this._configuratorApi.getArticleQuickSel(goodId, showLoader);
         });
     }
-    getSelections(showLoader = false) {
+    getSelections(showLoader = false, publicationCode = 2) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this._configuratorApi.getSelections(showLoader);
+            const selections = yield this._configuratorApi.getSelections(showLoader);
+            selections.resultObjects.filter((s) => {
+                (isNill(s.hierarchicalPublicationCode) || ((s.hierarchicalPublicationCode & publicationCode) > 0)) && ((s.nodeType === NodeType.Question && (((s.questionPublicationCode & publicationCode) > 0) || isNill(s.questionPublicationCode))) ||
+                    (s.nodeType === NodeType.Answer && (((s.answerPublicationCode & publicationCode) > 0) || isNill(s.answerPublicationCode))));
+            });
+            return selections;
         });
     }
     getDecos(showLoader = false) {
@@ -1126,9 +1136,15 @@ let ConfiguratorService = class ConfiguratorService {
             return yield this._configuratorApi.getDecos(showLoader);
         });
     }
-    getQuestionAndAnswers(showLoader = false) {
+    getQuestionAndAnswers(showLoader = false, publicationCode = 2) {
         return __awaiter(this, void 0, void 0, function* () {
-            return this._configuratorApi.getQuestionAndAnswers(showLoader);
+            const questionAndAnswers = yield this._configuratorApi.getQuestionAndAnswers(showLoader);
+            questionAndAnswers.answers.filter((answer) => {
+                (notNill(answer.hierarchicalPublicationCode) && (answer.hierarchicalPublicationCode & publicationCode) === 0) ||
+                    (answer.type === NodeType.Question && (answer.questionPublicationCode & publicationCode) === 0 && notNill(answer.questionPublicationCode)) ||
+                    (answer.type === NodeType.Answer && (answer.publicationCode & publicationCode) === 0 && notNill(answer.publicationCode));
+            });
+            return questionAndAnswers;
         });
     }
     getSingleImage(nodeId, publication, includeMimetype, thumb, showLoader) {
@@ -1140,13 +1156,20 @@ let ConfiguratorService = class ConfiguratorService {
         });
     }
     selectSelection(selection, showLoader = false) {
-        this._configuratorApi.selectSelection(selection, showLoader);
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._configuratorApi.selectSelection(selection, showLoader);
+        });
     }
     selectAnswer(answer, showLoader = false) {
-        this._configuratorApi.selectAnswer(answer, showLoader);
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._configuratorApi.selectAnswer(answer, showLoader);
+        });
     }
 };
-ConfiguratorService.ɵprov = ɵɵdefineInjectable({ factory: function ConfiguratorService_Factory() { return new ConfiguratorService(); }, token: ConfiguratorService, providedIn: "root" });
+ConfiguratorService.ctorParameters = () => [
+    { type: Injector }
+];
+ConfiguratorService.ɵprov = ɵɵdefineInjectable({ factory: function ConfiguratorService_Factory() { return new ConfiguratorService(ɵɵinject(INJECTOR)); }, token: ConfiguratorService, providedIn: "root" });
 ConfiguratorService = __decorate([
     Injectable({
         providedIn: 'root'
@@ -1154,52 +1177,56 @@ ConfiguratorService = __decorate([
 ], ConfiguratorService);
 
 let Builder = class Builder {
-    constructor(_configuratorService) {
-        this._configuratorService = _configuratorService;
+    constructor(scene, options, useInAngular) {
         this.selectionsReceived = new BehaviorSubject([]);
         this.answersReceived = new BehaviorSubject([]);
-        this.questionReceived = new BehaviorSubject(undefined);
+        this.modelLoaded = new BehaviorSubject(null);
         this._selections = [];
+        this._answers = [];
         this._decos = [];
         this._placedAdjustables = [];
         this._placedAddables = [];
         this._adjustables = [];
         this._addables = [];
         this._articleCache = new Map();
-        this._subs = [];
         this._boFactory = new BusinessObjectFactory();
         this._threedUtils = new ThreedUtils();
         this._variationHelper = new VariationHelper();
-        this._subs.push(this._configuratorService.selectionsReceived.subscribe(selections => this.selectionsReceived.next(selections)), this._configuratorService.answersReceived.subscribe(answers => this.answersReceived.next(answers)), this._configuratorService.questionReceived.subscribe(question => this.questionReceived.next(question)));
-    }
-    init(scene, options) {
         if (!scene) {
             throw 'No scene object provided!';
         }
         if (!options) {
             throw 'No connection options provided!';
         }
-        if (!this._configuratorService) {
-            this._configuratorService = new ConfiguratorService();
+        if (useInAngular) {
+            this._configuratorService = ServiceLocator.injector.get(ConfiguratorService);
+        }
+        else {
+            this._configuratorService = new ConfiguratorService(undefined);
         }
         this._configuratorService.initApi(options);
         this._scene = scene;
     }
-    buildModel(instanceId, sku, goodId) {
+    buildModel(sku, instanceId, goodId) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this._scene && !instanceId) {
+            if (!this._scene) {
                 return;
             }
             try {
-                yield this._prepareConfiguration(sku, goodId);
+                yield this._setInstanceId(sku, instanceId, goodId);
+                yield this._prepareConfiguration(this._sku, this._goodId);
                 if (this._source) {
-                    yield this._configuratorService.setInstanceToConfigure(instanceId);
+                    yield this._configuratorService.setInstanceToConfigure(this._instanceId);
                     const promises = [];
-                    promises.push(this._getSelections(instanceId));
+                    promises.push(this.getQuestionAndAnswers());
+                    promises.push(this._getSelections(this._instanceId));
                     promises.push(this._getDecos());
                     yield Promise.all(promises);
+                    if (this._answers.length > 0) {
+                        return;
+                    }
                     this._linkSelectionsAndDecos();
-                    return this._build(instanceId);
+                    return this._build(this._instanceId);
                 }
                 else {
                     throw 'GLB source not found!';
@@ -1218,15 +1245,46 @@ let Builder = class Builder {
         this._variationHelper.clearCache();
     }
     selectSelection(selection) {
-        this._configuratorService.selectSelection(selection, false);
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._configuratorService.selectSelection(selection, false);
+            this.getQuestionAndAnswers();
+        });
     }
-    getQuestionAndAnswers() {
+    getQuestionAndAnswers(publicationCode) {
         return __awaiter(this, void 0, void 0, function* () {
-            return this._configuratorService.getQuestionAndAnswers(false);
+            const questionsAndAnswers = yield this._configuratorService.getQuestionAndAnswers(false, publicationCode);
+            this._answers = questionsAndAnswers.answers;
+            this.answersReceived.next(questionsAndAnswers.answers);
         });
     }
     selectAnswer(answer) {
-        this._configuratorService.selectAnswer(answer, false);
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._configuratorService.selectAnswer(answer, false);
+            this.modelLoaded.next(yield this.buildModel());
+        });
+    }
+    _setInstanceId(sku, instanceId, goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!instanceId && !this._instanceId) {
+                if (!goodId) {
+                    goodId = yield this._getGoodIdFromSku(sku);
+                }
+                this._goodId = goodId;
+                const result = yield this.initNodeInstance(this._goodId);
+                if (result && result.resultObject) {
+                    this._instanceId = result.resultObject;
+                }
+                else {
+                    throw 'Failed to initialize node instance';
+                }
+            }
+            else if (!this._instanceId) {
+                this._instanceId = instanceId;
+            }
+            if (!this._sku) {
+                this._sku = sku;
+            }
+        });
     }
     _prepareConfiguration(sku, goodId) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -1487,13 +1545,15 @@ let Builder = class Builder {
             return article;
         });
     }
-    _getSelections(instanceId) {
+    _getSelections(instanceId, publicationCode) {
         return __awaiter(this, void 0, void 0, function* () {
-            this._selections.length = 0;
-            const selectionResponse = yield this._configuratorService.getSelections(false);
+            this._selections = [];
+            const selectionResponse = yield this._configuratorService.getSelections(false, publicationCode);
             if (selectionResponse.resultObjects && selectionResponse.resultObjects.length > 0) {
                 this._selections = this._boFactory.makeBOArrayFromRawBackendDataArray(Selection, selectionResponse.resultObjects);
                 this._selections.forEach(s => s.instanceId = instanceId);
+                // const filtered: Selection[] = this._selections.filter(s => s.nodeType !== NodeType.Article && s.presentationLevel === 1);
+                this.selectionsReceived.next(this._selections);
             }
             else {
                 throw 'No selections found!';
@@ -1502,7 +1562,7 @@ let Builder = class Builder {
     }
     _getDecos() {
         return __awaiter(this, void 0, void 0, function* () {
-            this._decos.length = 0;
+            this._decos = [];
             const decosResponse = yield this._configuratorService.getDecos(false);
             if (decosResponse.resultObjects && decosResponse.resultObjects.length > 0) {
                 this._decos = this._boFactory.makeBOArrayFromRawBackendDataArray(DecoNode, decosResponse.resultObjects);
@@ -1567,7 +1627,9 @@ let Builder = class Builder {
     }
 };
 Builder.ctorParameters = () => [
-    { type: ConfiguratorService }
+    { type: Scene },
+    { type: Options },
+    { type: Boolean }
 ];
 Builder = __decorate([
     Injectable()
@@ -1592,21 +1654,24 @@ AnswersComponent = __decorate([
     Component({
         selector: "answers",
         template: `
-        <ng-container>
-            <div class="answers-container" visibilityObserverMaster>
+        <div class="ione-configurator">
+            <div class="rp-answers-slideout">
                 <h2 class="answers-title" [textContent]="selectionTitle"></h2>
-                <answer *ngFor="let answer of answers"
-                        (click)="answerClick.emit(answer)"
-                        [answer]="answer"
-                        visibilityObserver
-                        #intersection="intersection"
-                        [observerEnabled]="true"
-                        [showing]="intersection.isIntersecting"
-                ></answer>
+                <div class="answers-container" visibilityObserverMaster>
+                    <answer *ngFor="let answer of answers"
+                            (click)="answerClick.emit(answer)"
+                            [answer]="answer"
+                            visibilityObserver
+                            #intersection="intersection"
+                            [observerEnabled]="true"
+                            [showing]="intersection.isIntersecting"
+                    ></answer>
+                </div>
+                
             </div>
-        </ng-container>
+        </div>
     `,
-        styles: [":host{position:absolute;top:0;right:0;width:400px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host .answers-title{margin-left:10px;color:#1a1a1a}:host .answers-container{height:100vh;overflow-y:scroll}", ".selection{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.img-size{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.unloaded{background-color:#d3d3d3}.titles{margin-left:14px;-ms-grid-row-align:center;align-self:center}"]
+        styles: [".ione-configurator .rp-answers-slideout{position:absolute;top:0;right:0;width:400px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.ione-configurator .answers-title{margin-left:10px;color:#1a1a1a}.ione-configurator .answers-container{height:100vh;overflow-y:scroll}.ione-configurator .answer-content{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.ione-configurator .thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .img-size{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .answer-wrapper{display:block}.ione-configurator .answer-title{font-size:12px;position:relative;overflow:hidden;cursor:pointer}.ione-configurator .question{font-weight:700;color:#1a1a1a}.ione-configurator .answer{font-size:12px;font-style:italic;margin-top:3px}.ione-configurator .collapse-content,.ione-configurator .collapse-wrapper{display:block}.ione-configurator .collapse-handle{position:absolute;top:10px;right:12px;border:solid #000;border-width:0 3px 3px 0;display:inline-block;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.ione-configurator .collapse-handle.expanded{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}.ione-configurator .child-selection{margin-left:10px;display:flex;flex-direction:column;margin-top:5px}.ione-configurator .mat-title{margin-left:10px;color:#1a1a1a}.ione-configurator .drawer__header{height:48px}.ione-configurator .rp-selections-summary{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background:0 0;overflow:auto;position:absolute;top:0;right:0;width:400px}.ione-configurator .selections-content{overflow-y:auto}.ione-configurator .co-summary-line{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.ione-configurator .selection-thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .selection-img{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .answer-thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .answer-img{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .unloaded{background-color:#d3d3d3}.ione-configurator .titles{margin-left:14px;-ms-grid-row-align:center;align-self:center}.ione-configurator .title-wrapper{display:flex;flex-direction:column}.ione-configurator .answer-title-wrapper{text-align:center;-ms-grid-row-align:center;align-self:center;margin-left:14px}"]
     })
 ], AnswersComponent);
 
@@ -1645,6 +1710,8 @@ let ImageCacheService = ImageCacheService_1 = class ImageCacheService {
                         const base64 = ImageCacheService_1._handleResponseData(includeMimeType, thumb, responseData);
                         this._imageCache.set(object.nodeId, base64);
                         resolve(base64);
+                    }).catch(() => {
+                        reject();
                     });
                 }
                 else {
@@ -1670,19 +1737,23 @@ ImageCacheService = ImageCacheService_1 = __decorate([
 let AnswerComponent = class AnswerComponent {
     constructor(_imageCacheService) {
         this._imageCacheService = _imageCacheService;
-        this.thumbnailLoaded = false;
     }
     set showing(value) {
-        if (value) {
+        this.answer.imageData = '';
+        if (value && this.answer.answer !== 'Skip / Cancel') {
             this._loadThumbnail(this.answer);
         }
+        else {
+            this.answer.imageData = null;
+        }
     }
     ngOnInit() {
     }
     _loadThumbnail(answer) {
-        this._imageCacheService.getImageForSelectionOrAnswer(answer).then((imageSrc) => {
-            answer.imageData = imageSrc;
-            this.thumbnailLoaded = true;
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._imageCacheService.getImageForSelectionOrAnswer(answer).then((imageSrc) => {
+                answer.imageData = imageSrc === "" ? null : imageSrc;
+            });
         });
     }
 };
@@ -1699,17 +1770,22 @@ AnswerComponent = __decorate([
     Component({
         selector: 'answer',
         template: `
-    <ng-container>
-      <div class="selection" @answerAppear>
-        <div class="thumbnail">
-          <rp-loader *ngIf="!thumbnailLoaded"></rp-loader>
-          <img *ngIf="answer.imageData" class="img-size" [src]="answer.imageData">
-        </div>
-        <div class="titles">
-          <div class="answer" [textContent]="answer.commercialAnswer"></div>
+    <div class="ione-configurator">
+      <div class="answer-wrapper">
+        <div class="answer-content" @answerAppear>
+          <div class="answer-thumbnail">
+            <rp-loader *ngIf="answer.imageData === ''"></rp-loader>
+            <img *ngIf="answer.imageData !== '' && answer.imageData !== null" class="answer-img" [src]="answer.imageData">
+          </div>
+          <div class="answer-title-wrapper">
+            <span class="answer-title" [textContent]="answer.commercialAnswer"></span>
+          </div>
+          <div class="price">
+            <span class="price-value"></span>
+          </div>
         </div>
       </div>
-    </ng-container>
+    </div>
   `,
         animations: [
             trigger('answerAppear', [
@@ -1718,7 +1794,7 @@ AnswerComponent = __decorate([
                 transition('void <=> *', animate(500))
             ])
         ],
-        styles: [".answer{font-size:12px;position:relative;overflow:hidden;cursor:pointer}", ".selection{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.img-size{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.unloaded{background-color:#d3d3d3}.titles{margin-left:14px;-ms-grid-row-align:center;align-self:center}"]
+        styles: [".ione-configurator .rp-answers-slideout{position:absolute;top:0;right:0;width:400px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.ione-configurator .answers-title{margin-left:10px;color:#1a1a1a}.ione-configurator .answers-container{height:100vh;overflow-y:scroll}.ione-configurator .answer-content{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.ione-configurator .thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .img-size{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .answer-wrapper{display:block}.ione-configurator .answer-title{font-size:12px;position:relative;overflow:hidden;cursor:pointer}.ione-configurator .question{font-weight:700;color:#1a1a1a}.ione-configurator .answer{font-size:12px;font-style:italic;margin-top:3px}.ione-configurator .collapse-content,.ione-configurator .collapse-wrapper{display:block}.ione-configurator .collapse-handle{position:absolute;top:10px;right:12px;border:solid #000;border-width:0 3px 3px 0;display:inline-block;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.ione-configurator .collapse-handle.expanded{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}.ione-configurator .child-selection{margin-left:10px;display:flex;flex-direction:column;margin-top:5px}.ione-configurator .mat-title{margin-left:10px;color:#1a1a1a}.ione-configurator .drawer__header{height:48px}.ione-configurator .rp-selections-summary{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background:0 0;overflow:auto;position:absolute;top:0;right:0;width:400px}.ione-configurator .selections-content{overflow-y:auto}.ione-configurator .co-summary-line{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.ione-configurator .selection-thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .selection-img{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .answer-thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .answer-img{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .unloaded{background-color:#d3d3d3}.ione-configurator .titles{margin-left:14px;-ms-grid-row-align:center;align-self:center}.ione-configurator .title-wrapper{display:flex;flex-direction:column}.ione-configurator .answer-title-wrapper{text-align:center;-ms-grid-row-align:center;align-self:center;margin-left:14px}"]
     })
 ], AnswerComponent);
 
@@ -1913,7 +1989,7 @@ let SelectionsComponent = class SelectionsComponent {
             if (this.selectionViewModels.length > 0) {
                 this.selectionViewModels.forEach((viewModel) => __awaiter(this, void 0, void 0, function* () {
                     yield this._imageCacheService.getImageForSelectionOrAnswer(viewModel.selection).then((imageSrc) => {
-                        viewModel.thumbnail = imageSrc;
+                        viewModel.thumbnail = imageSrc === "" ? null : imageSrc;
                     });
                 }));
             }
@@ -1949,33 +2025,53 @@ SelectionsComponent = __decorate([
     Component({
         selector: "selections",
         template: `
-        <ng-container>
-            <div class="selections-container">
-                <h2 class="selections-title">Configuratie</h2>
-                <div *ngFor="let selectionViewModel of selectionViewModels">
-                    <div class="selection" (click)="selectSelection(selectionViewModel.selection, $event)">
-                        <div class="thumbnail">
-                            <rp-loader *ngIf="selectionViewModel.thumbnail === ''"></rp-loader>
-                            <img visibilityObserver *ngIf="selectionViewModel.thumbnail !== ''" class="img-size" [src]="selectionViewModel.thumbnail">
-                        </div>
-                        <div class="titles">
-                            <div class="question" [textContent]="selectionViewModel.selection.commercialQuestion"></div>
-                            <div class="answer" [textContent]="selectionViewModel.selection.answer"></div>
-                            <div class="collapse-handle" [class.expanded]="selectionViewModel.expanded"
-                                 *ngIf="selectionViewModel.children.length > 0" (click)="expandClicked(selectionViewModel, $event)"></div>
-                            <div *ngIf="selectionViewModel.children.length > 0 && selectionViewModel.expanded" @showHideChildren>
-                                <div class="child-selection" *ngFor="let selection of selectionViewModel.children"
-                                     (click)="selectSelection(selection, $event)"
-                                >
-                                    <div class="question" [textContent]="selection.commercialQuestion"></div>
-                                    <div class="answer" [textContent]="selection.answer"></div>
+        <div class="ione-configurator">
+            <div class="rp-selections-summary">
+                <header class="drawer__header">
+                    <h2 class="mat-title" [textContent]="'Configuratie'"></h2>
+                    <!--<button>-->
+                    <!---->
+                    <!--</button>-->
+                </header>
+                <div class="selections-content">
+                    <ng-container *ngFor="let selectionViewModel of selectionViewModels">
+
+                        <div class="co-summary-line" (click)="selectSelection(selectionViewModel.selection, $event)">
+                            <div class="selection-thumbnail">
+                                <rp-loader *ngIf="selectionViewModel.thumbnail === ''"></rp-loader>
+                                <img visibilityObserver *ngIf="selectionViewModel.thumbnail !== '' && selectionViewModel.thumbnail !== null" class="selection-img" [src]="selectionViewModel.thumbnail">
+                            </div>
+                            <div class="titles">
+                                <div class="title-wrapper">
+                                    <label class="question" [textContent]="selectionViewModel.selection.question"></label>
+                                    <span class="answer" [textContent]="selectionViewModel.selection.answer"></span>
+                                    <div *ngIf="selectionViewModel.children.length > 0 && selectionViewModel.expanded" @showHideChildren>
+                                        <div class="child-selection" *ngFor="let selection of selectionViewModel.children"
+                                             (click)="selectSelection(selection, $event)"
+                                        >
+                                            <label class="question" [textContent]="selection.commercialQuestion"></label>
+                                            <span class="answer" [textContent]="selection.answer"></span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="price-wrapper">
+                                <span class="price-value"></span>
+                            </div>
+
+                            <div class="collapse-wrapper">
+                                <div class="collapse-content">
+                                    <div class="collapse-handle" [class.expanded]="selectionViewModel.expanded"
+                                         *ngIf="selectionViewModel.children.length > 0" (click)="expandClicked(selectionViewModel, $event)"></div>
                                 </div>
                             </div>
                         </div>
-                    </div>
+
+                    </ng-container>
                 </div>
             </div>
-        </ng-container>
+        </div>
     `,
         animations: [
             trigger('showHideChildren', [
@@ -1984,7 +2080,7 @@ SelectionsComponent = __decorate([
                 transition('void <=> *', animate(200))
             ])
         ],
-        styles: [":host{position:absolute;top:0;right:0;width:400px}:host .question{font-weight:700;color:#1a1a1a}:host .answer{font-size:12px;font-style:italic;margin-top:3px}:host .collapse-handle{position:absolute;top:10px;right:12px;border:solid #000;border-width:0 3px 3px 0;display:inline-block;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}:host .collapse-handle.expanded{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}:host .child-selection{margin-left:10px;margin-top:5px}:host .selections-title{margin-left:10px;color:#1a1a1a}:host .selections-container{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background:0 0;overflow:auto}", ".selection{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.img-size{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.unloaded{background-color:#d3d3d3}.titles{margin-left:14px;-ms-grid-row-align:center;align-self:center}"]
+        styles: [".ione-configurator .rp-answers-slideout{position:absolute;top:0;right:0;width:400px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.ione-configurator .answers-title{margin-left:10px;color:#1a1a1a}.ione-configurator .answers-container{height:100vh;overflow-y:scroll}.ione-configurator .answer-content{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.ione-configurator .thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .img-size{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .answer-wrapper{display:block}.ione-configurator .answer-title{font-size:12px;position:relative;overflow:hidden;cursor:pointer}.ione-configurator .question{font-weight:700;color:#1a1a1a}.ione-configurator .answer{font-size:12px;font-style:italic;margin-top:3px}.ione-configurator .collapse-content,.ione-configurator .collapse-wrapper{display:block}.ione-configurator .collapse-handle{position:absolute;top:10px;right:12px;border:solid #000;border-width:0 3px 3px 0;display:inline-block;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.ione-configurator .collapse-handle.expanded{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}.ione-configurator .child-selection{margin-left:10px;display:flex;flex-direction:column;margin-top:5px}.ione-configurator .mat-title{margin-left:10px;color:#1a1a1a}.ione-configurator .drawer__header{height:48px}.ione-configurator .rp-selections-summary{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background:0 0;overflow:auto;position:absolute;top:0;right:0;width:400px}.ione-configurator .selections-content{overflow-y:auto}.ione-configurator .co-summary-line{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.ione-configurator .selection-thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .selection-img{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .answer-thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .answer-img{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .unloaded{background-color:#d3d3d3}.ione-configurator .titles{margin-left:14px;-ms-grid-row-align:center;align-self:center}.ione-configurator .title-wrapper{display:flex;flex-direction:column}.ione-configurator .answer-title-wrapper{text-align:center;-ms-grid-row-align:center;align-self:center;margin-left:14px}"]
     })
 ], SelectionsComponent);
 
@@ -2009,5 +2105,5 @@ SelectionsModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { AnswersComponent, AnswersModule, Builder, SelectionsComponent, SelectionsModule, ConfiguratorService as ɵa, SharedModule as ɵb, LoaderComponent as ɵc, AnswerComponent as ɵd, ImageCacheService as ɵe, VisibilityObserverDirective as ɵf, VisibilityObserverMasterDirective as ɵg };
+export { AnswersComponent, AnswersModule, Builder, ConfiguratorService, SelectionsComponent, SelectionsModule, SharedModule as ɵa, LoaderComponent as ɵb, AnswerComponent as ɵc, ImageCacheService as ɵd, VisibilityObserverDirective as ɵe, VisibilityObserverMasterDirective as ɵf };
 //# sourceMappingURL=colijnit-configurator.js.map