@colijnit/configurator 1.0.13 → 1.0.17

package/fesm5/colijnit-configurator.js

@@ -1,5 +1,6 @@
 import { __awaiter, __generator, __extends, __decorate, __values } 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';
@@ -1347,22 +1351,25 @@ var VariationHelper = /** @class */ (function () {
     return VariationHelper;
 }());
 
+var ServiceLocator = /** @class */ (function () {
+    function ServiceLocator() {
+    }
+    ServiceLocator.injector = undefined;
+    ServiceLocator = __decorate([
+        Injectable()
+    ], ServiceLocator);
+    return ServiceLocator;
+}());
+
 var ConfiguratorService = /** @class */ (function () {
-    function ConfiguratorService() {
-        this.selectionsReceived = new BehaviorSubject([]);
-        this.answersReceived = new BehaviorSubject([]);
-        this.questionReceived = new BehaviorSubject(undefined);
-        this._subs = [];
+    function ConfiguratorService(_injector) {
+        this._injector = _injector;
+        if (!ServiceLocator.injector) {
+            ServiceLocator.injector = _injector;
+        }
     }
-    ConfiguratorService.prototype.ngOnDestroy = function () {
-        this._subs.forEach(function (subscription) {
-            subscription.unsubscribe();
-        });
-    };
     ConfiguratorService.prototype.initApi = function (options) {
-        var _this = this;
         this._configuratorApi = new Configurator(options);
-        this._subs.push(this._configuratorApi.selectionsReceived.subscribe(function (selections) { return _this.selectionsReceived.next(selections); }), this._configuratorApi.answersReceived.subscribe(function (answers) { return _this.answersReceived.next(answers); }), this._configuratorApi.questionReceived.subscribe(function (question) { return _this.questionReceived.next(question); }));
     };
     ConfiguratorService.prototype.initNodeInstance = function (goodId) {
         return __awaiter(this, void 0, void 0, function () {
@@ -1407,13 +1414,21 @@ var ConfiguratorService = /** @class */ (function () {
             });
         });
     };
-    ConfiguratorService.prototype.getSelections = function (showLoader) {
+    ConfiguratorService.prototype.getSelections = function (showLoader, publicationCode) {
         if (showLoader === void 0) { showLoader = false; }
+        if (publicationCode === void 0) { publicationCode = 2; }
         return __awaiter(this, void 0, void 0, function () {
+            var selections;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0: return [4 /*yield*/, this._configuratorApi.getSelections(showLoader)];
-                    case 1: return [2 /*return*/, _a.sent()];
+                    case 1:
+                        selections = _a.sent();
+                        selections.resultObjects.filter(function (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 [2 /*return*/, selections];
                 }
             });
         });
@@ -1429,11 +1444,23 @@ var ConfiguratorService = /** @class */ (function () {
             });
         });
     };
-    ConfiguratorService.prototype.getQuestionAndAnswers = function (showLoader) {
+    ConfiguratorService.prototype.getQuestionAndAnswers = function (showLoader, publicationCode) {
         if (showLoader === void 0) { showLoader = false; }
+        if (publicationCode === void 0) { publicationCode = 2; }
         return __awaiter(this, void 0, void 0, function () {
+            var questionAndAnswers;
             return __generator(this, function (_a) {
-                return [2 /*return*/, this._configuratorApi.getQuestionAndAnswers(showLoader)];
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this._configuratorApi.getQuestionAndAnswers(showLoader)];
+                    case 1:
+                        questionAndAnswers = _a.sent();
+                        questionAndAnswers.answers.filter(function (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 [2 /*return*/, questionAndAnswers];
+                }
             });
         });
     };
@@ -1453,13 +1480,30 @@ var ConfiguratorService = /** @class */ (function () {
     };
     ConfiguratorService.prototype.selectSelection = function (selection, showLoader) {
         if (showLoader === void 0) { showLoader = false; }
-        this._configuratorApi.selectSelection(selection, showLoader);
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this._configuratorApi.selectSelection(selection, showLoader)];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
     };
     ConfiguratorService.prototype.selectAnswer = function (answer, showLoader) {
         if (showLoader === void 0) { showLoader = false; }
-        this._configuratorApi.selectAnswer(answer, showLoader);
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this._configuratorApi.selectAnswer(answer, showLoader)];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
     };
-    ConfiguratorService.ɵprov = ɵɵdefineInjectable({ factory: function ConfiguratorService_Factory() { return new ConfiguratorService(); }, token: ConfiguratorService, providedIn: "root" });
+    ConfiguratorService.ctorParameters = function () { return [
+        { type: Injector }
+    ]; };
+    ConfiguratorService.ɵprov = ɵɵdefineInjectable({ factory: function ConfiguratorService_Factory() { return new ConfiguratorService(ɵɵinject(INJECTOR)); }, token: ConfiguratorService, providedIn: "root" });
     ConfiguratorService = __decorate([
         Injectable({
             providedIn: 'root'
@@ -1469,71 +1513,76 @@ var ConfiguratorService = /** @class */ (function () {
 }());
 
 var Builder = /** @class */ (function () {
-    function Builder(_configuratorService) {
-        var _this = this;
-        this._configuratorService = _configuratorService;
+    function Builder(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(function (selections) { return _this.selectionsReceived.next(selections); }), this._configuratorService.answersReceived.subscribe(function (answers) { return _this.answersReceived.next(answers); }), this._configuratorService.questionReceived.subscribe(function (question) { return _this.questionReceived.next(question); }));
-    }
-    Builder.prototype.init = function (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;
-    };
-    Builder.prototype.buildModel = function (instanceId, sku, goodId) {
+    }
+    Builder.prototype.buildModel = function (sku, instanceId, goodId) {
         return __awaiter(this, void 0, void 0, function () {
             var promises, e_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (!this._scene && !instanceId) {
+                        if (!this._scene) {
                             return [2 /*return*/];
                         }
                         _a.label = 1;
                     case 1:
-                        _a.trys.push([1, 7, , 8]);
-                        return [4 /*yield*/, this._prepareConfiguration(sku, goodId)];
+                        _a.trys.push([1, 8, , 9]);
+                        return [4 /*yield*/, this._setInstanceId(sku, instanceId, goodId)];
                     case 2:
                         _a.sent();
-                        if (!this._source) return [3 /*break*/, 5];
-                        return [4 /*yield*/, this._configuratorService.setInstanceToConfigure(instanceId)];
+                        return [4 /*yield*/, this._prepareConfiguration(this._sku, this._goodId)];
                     case 3:
+                        _a.sent();
+                        if (!this._source) return [3 /*break*/, 6];
+                        return [4 /*yield*/, this._configuratorService.setInstanceToConfigure(this._instanceId)];
+                    case 4:
                         _a.sent();
                         promises = [];
-                        promises.push(this._getSelections(instanceId));
+                        promises.push(this.getQuestionAndAnswers());
+                        promises.push(this._getSelections(this._instanceId));
                         promises.push(this._getDecos());
                         return [4 /*yield*/, Promise.all(promises)];
-                    case 4:
+                    case 5:
                         _a.sent();
+                        if (this._answers.length > 0) {
+                            return [2 /*return*/];
+                        }
                         this._linkSelectionsAndDecos();
-                        return [2 /*return*/, this._build(instanceId)];
-                    case 5: throw 'GLB source not found!';
-                    case 6: return [3 /*break*/, 8];
-                    case 7:
+                        return [2 /*return*/, this._build(this._instanceId)];
+                    case 6: throw 'GLB source not found!';
+                    case 7: return [3 /*break*/, 9];
+                    case 8:
                         e_1 = _a.sent();
                         throw e_1;
-                    case 8: return [2 /*return*/];
+                    case 9: return [2 /*return*/];
                 }
             });
         });
@@ -1546,17 +1595,87 @@ var Builder = /** @class */ (function () {
         this._variationHelper.clearCache();
     };
     Builder.prototype.selectSelection = function (selection) {
-        this._configuratorService.selectSelection(selection, false);
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this._configuratorService.selectSelection(selection, false)];
+                    case 1:
+                        _a.sent();
+                        this.getQuestionAndAnswers();
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
-    Builder.prototype.getQuestionAndAnswers = function () {
+    Builder.prototype.getQuestionAndAnswers = function (publicationCode) {
         return __awaiter(this, void 0, void 0, function () {
+            var questionsAndAnswers;
             return __generator(this, function (_a) {
-                return [2 /*return*/, this._configuratorService.getQuestionAndAnswers(false)];
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this._configuratorService.getQuestionAndAnswers(false, publicationCode)];
+                    case 1:
+                        questionsAndAnswers = _a.sent();
+                        this._answers = questionsAndAnswers.answers;
+                        this.answersReceived.next(questionsAndAnswers.answers);
+                        return [2 /*return*/];
+                }
             });
         });
     };
     Builder.prototype.selectAnswer = function (answer) {
-        this._configuratorService.selectAnswer(answer, false);
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0: return [4 /*yield*/, this._configuratorService.selectAnswer(answer, false)];
+                    case 1:
+                        _c.sent();
+                        _b = (_a = this.modelLoaded).next;
+                        return [4 /*yield*/, this.buildModel()];
+                    case 2:
+                        _b.apply(_a, [_c.sent()]);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    Builder.prototype._setInstanceId = function (sku, instanceId, goodId) {
+        return __awaiter(this, void 0, void 0, function () {
+            var result;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(!instanceId && !this._instanceId)) return [3 /*break*/, 4];
+                        if (!!goodId) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this._getGoodIdFromSku(sku)];
+                    case 1:
+                        goodId = _a.sent();
+                        _a.label = 2;
+                    case 2:
+                        this._goodId = goodId;
+                        return [4 /*yield*/, this.initNodeInstance(this._goodId)];
+                    case 3:
+                        result = _a.sent();
+                        if (result && result.resultObject) {
+                            this._instanceId = result.resultObject;
+                        }
+                        else {
+                            throw 'Failed to initialize node instance';
+                        }
+                        return [3 /*break*/, 5];
+                    case 4:
+                        if (!this._instanceId) {
+                            this._instanceId = instanceId;
+                        }
+                        _a.label = 5;
+                    case 5:
+                        if (!this._sku) {
+                            this._sku = sku;
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     Builder.prototype._prepareConfiguration = function (sku, goodId) {
         return __awaiter(this, void 0, void 0, function () {
@@ -1841,19 +1960,21 @@ var Builder = /** @class */ (function () {
             });
         });
     };
-    Builder.prototype._getSelections = function (instanceId) {
+    Builder.prototype._getSelections = function (instanceId, publicationCode) {
         return __awaiter(this, void 0, void 0, function () {
             var selectionResponse;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        this._selections.length = 0;
-                        return [4 /*yield*/, this._configuratorService.getSelections(false)];
+                        this._selections = [];
+                        return [4 /*yield*/, this._configuratorService.getSelections(false, publicationCode)];
                     case 1:
                         selectionResponse = _a.sent();
                         if (selectionResponse.resultObjects && selectionResponse.resultObjects.length > 0) {
                             this._selections = this._boFactory.makeBOArrayFromRawBackendDataArray(Selection, selectionResponse.resultObjects);
                             this._selections.forEach(function (s) { return 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!';
@@ -1869,7 +1990,7 @@ var Builder = /** @class */ (function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        this._decos.length = 0;
+                        this._decos = [];
                         return [4 /*yield*/, this._configuratorService.getDecos(false)];
                     case 1:
                         decosResponse = _a.sent();
@@ -1954,7 +2075,9 @@ var Builder = /** @class */ (function () {
         this._prepareTheSelections();
     };
     Builder.ctorParameters = function () { return [
-        { type: ConfiguratorService }
+        { type: Scene },
+        { type: Options },
+        { type: Boolean }
     ]; };
     Builder = __decorate([
         Injectable()
@@ -1979,8 +2102,8 @@ var AnswersComponent = /** @class */ (function () {
     AnswersComponent = __decorate([
         Component({
             selector: "answers",
-            template: "\n        <ng-container>\n            <div class=\"answers-container\" visibilityObserverMaster>\n                <h2 class=\"answers-title\" [textContent]=\"selectionTitle\"></h2>\n                <answer *ngFor=\"let answer of answers\"\n                        (click)=\"answerClick.emit(answer)\"\n                        [answer]=\"answer\"\n                        visibilityObserver\n                        #intersection=\"intersection\"\n                        [observerEnabled]=\"true\"\n                        [showing]=\"intersection.isIntersecting\"\n                ></answer>\n            </div>\n        </ng-container>\n    ",
-            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}"]
+            template: "\n        <div class=\"ione-configurator\">\n            <div class=\"rp-answers-slideout\">\n                <h2 class=\"answers-title\" [textContent]=\"selectionTitle\"></h2>\n                <div class=\"answers-container\" visibilityObserverMaster>\n                    <answer *ngFor=\"let answer of answers\"\n                            (click)=\"answerClick.emit(answer)\"\n                            [answer]=\"answer\"\n                            visibilityObserver\n                            #intersection=\"intersection\"\n                            [observerEnabled]=\"true\"\n                            [showing]=\"intersection.isIntersecting\"\n                    ></answer>\n                </div>\n                \n            </div>\n        </div>\n    ",
+            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);
     return AnswersComponent;
@@ -2022,6 +2145,8 @@ var ImageCacheService = /** @class */ (function () {
                         var base64 = ImageCacheService_1._handleResponseData(includeMimeType, thumb, responseData);
                         _this._imageCache.set(object.nodeId, base64);
                         resolve(base64);
+                    }).catch(function () {
+                        reject();
                     });
                 }
                 else {
@@ -2049,13 +2174,16 @@ var ImageCacheService = /** @class */ (function () {
 var AnswerComponent = /** @class */ (function () {
     function AnswerComponent(_imageCacheService) {
         this._imageCacheService = _imageCacheService;
-        this.thumbnailLoaded = false;
     }
     Object.defineProperty(AnswerComponent.prototype, "showing", {
         set: function (value) {
-            if (value) {
+            this.answer.imageData = '';
+            if (value && this.answer.answer !== 'Skip / Cancel') {
                 this._loadThumbnail(this.answer);
             }
+            else {
+                this.answer.imageData = null;
+            }
         },
         enumerable: true,
         configurable: true
@@ -2063,10 +2191,17 @@ var AnswerComponent = /** @class */ (function () {
     AnswerComponent.prototype.ngOnInit = function () {
     };
     AnswerComponent.prototype._loadThumbnail = function (answer) {
-        var _this = this;
-        this._imageCacheService.getImageForSelectionOrAnswer(answer).then(function (imageSrc) {
-            answer.imageData = imageSrc;
-            _this.thumbnailLoaded = true;
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this._imageCacheService.getImageForSelectionOrAnswer(answer).then(function (imageSrc) {
+                            answer.imageData = imageSrc === "" ? null : imageSrc;
+                        })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
         });
     };
     AnswerComponent.ctorParameters = function () { return [
@@ -2081,7 +2216,7 @@ var AnswerComponent = /** @class */ (function () {
     AnswerComponent = __decorate([
         Component({
             selector: 'answer',
-            template: "\n    <ng-container>\n      <div class=\"selection\" @answerAppear>\n        <div class=\"thumbnail\">\n          <rp-loader *ngIf=\"!thumbnailLoaded\"></rp-loader>\n          <img *ngIf=\"answer.imageData\" class=\"img-size\" [src]=\"answer.imageData\">\n        </div>\n        <div class=\"titles\">\n          <div class=\"answer\" [textContent]=\"answer.commercialAnswer\"></div>\n        </div>\n      </div>\n    </ng-container>\n  ",
+            template: "\n    <div class=\"ione-configurator\">\n      <div class=\"answer-wrapper\">\n        <div class=\"answer-content\" @answerAppear>\n          <div class=\"answer-thumbnail\">\n            <rp-loader *ngIf=\"answer.imageData === ''\"></rp-loader>\n            <img *ngIf=\"answer.imageData !== '' && answer.imageData !== null\" class=\"answer-img\" [src]=\"answer.imageData\">\n          </div>\n          <div class=\"answer-title-wrapper\">\n            <span class=\"answer-title\" [textContent]=\"answer.commercialAnswer\"></span>\n          </div>\n          <div class=\"price\">\n            <span class=\"price-value\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
             animations: [
                 trigger('answerAppear', [
                     state('void', style({ 'background': '#dbdbdb' })),
@@ -2089,7 +2224,7 @@ var AnswerComponent = /** @class */ (function () {
                     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);
     return AnswerComponent;
@@ -2308,7 +2443,7 @@ var SelectionsComponent = /** @class */ (function () {
                         return __generator(this, function (_a) {
                             switch (_a.label) {
                                 case 0: return [4 /*yield*/, this._imageCacheService.getImageForSelectionOrAnswer(viewModel.selection).then(function (imageSrc) {
-                                        viewModel.thumbnail = imageSrc;
+                                        viewModel.thumbnail = imageSrc === "" ? null : imageSrc;
                                     })];
                                 case 1:
                                     _a.sent();
@@ -2350,7 +2485,7 @@ var SelectionsComponent = /** @class */ (function () {
     SelectionsComponent = __decorate([
         Component({
             selector: "selections",
-            template: "\n        <ng-container>\n            <div class=\"selections-container\">\n                <h2 class=\"selections-title\">Configuratie</h2>\n                <div *ngFor=\"let selectionViewModel of selectionViewModels\">\n                    <div class=\"selection\" (click)=\"selectSelection(selectionViewModel.selection, $event)\">\n                        <div class=\"thumbnail\">\n                            <rp-loader *ngIf=\"selectionViewModel.thumbnail === ''\"></rp-loader>\n                            <img visibilityObserver *ngIf=\"selectionViewModel.thumbnail !== ''\" class=\"img-size\" [src]=\"selectionViewModel.thumbnail\">\n                        </div>\n                        <div class=\"titles\">\n                            <div class=\"question\" [textContent]=\"selectionViewModel.selection.commercialQuestion\"></div>\n                            <div class=\"answer\" [textContent]=\"selectionViewModel.selection.answer\"></div>\n                            <div class=\"collapse-handle\" [class.expanded]=\"selectionViewModel.expanded\"\n                                 *ngIf=\"selectionViewModel.children.length > 0\" (click)=\"expandClicked(selectionViewModel, $event)\"></div>\n                            <div *ngIf=\"selectionViewModel.children.length > 0 && selectionViewModel.expanded\" @showHideChildren>\n                                <div class=\"child-selection\" *ngFor=\"let selection of selectionViewModel.children\"\n                                     (click)=\"selectSelection(selection, $event)\"\n                                >\n                                    <div class=\"question\" [textContent]=\"selection.commercialQuestion\"></div>\n                                    <div class=\"answer\" [textContent]=\"selection.answer\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n    ",
+            template: "\n        <div class=\"ione-configurator\">\n            <div class=\"rp-selections-summary\">\n                <header class=\"drawer__header\">\n                    <h2 class=\"mat-title\" [textContent]=\"'Configuratie'\"></h2>\n                    <!--<button>-->\n                    <!---->\n                    <!--</button>-->\n                </header>\n                <div class=\"selections-content\">\n                    <ng-container *ngFor=\"let selectionViewModel of selectionViewModels\">\n\n                        <div class=\"co-summary-line\" (click)=\"selectSelection(selectionViewModel.selection, $event)\">\n                            <div class=\"selection-thumbnail\">\n                                <rp-loader *ngIf=\"selectionViewModel.thumbnail === ''\"></rp-loader>\n                                <img visibilityObserver *ngIf=\"selectionViewModel.thumbnail !== '' && selectionViewModel.thumbnail !== null\" class=\"selection-img\" [src]=\"selectionViewModel.thumbnail\">\n                            </div>\n                            <div class=\"titles\">\n                                <div class=\"title-wrapper\">\n                                    <label class=\"question\" [textContent]=\"selectionViewModel.selection.question\"></label>\n                                    <span class=\"answer\" [textContent]=\"selectionViewModel.selection.answer\"></span>\n                                    <div *ngIf=\"selectionViewModel.children.length > 0 && selectionViewModel.expanded\" @showHideChildren>\n                                        <div class=\"child-selection\" *ngFor=\"let selection of selectionViewModel.children\"\n                                             (click)=\"selectSelection(selection, $event)\"\n                                        >\n                                            <label class=\"question\" [textContent]=\"selection.commercialQuestion\"></label>\n                                            <span class=\"answer\" [textContent]=\"selection.answer\"></span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            \n                            <div class=\"price-wrapper\">\n                                <span class=\"price-value\"></span>\n                            </div>\n\n                            <div class=\"collapse-wrapper\">\n                                <div class=\"collapse-content\">\n                                    <div class=\"collapse-handle\" [class.expanded]=\"selectionViewModel.expanded\"\n                                         *ngIf=\"selectionViewModel.children.length > 0\" (click)=\"expandClicked(selectionViewModel, $event)\"></div>\n                                </div>\n                            </div>\n                        </div>\n\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    ",
             animations: [
                 trigger('showHideChildren', [
                     state('void', style({ 'height': '0' })),
@@ -2358,7 +2493,7 @@ var SelectionsComponent = /** @class */ (function () {
                     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);
     return SelectionsComponent;
@@ -2388,5 +2523,5 @@ var SelectionsModule = /** @class */ (function () {
  * 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