@colijnit/configurator 1.0.13 → 1.0.17

package/bundles/colijnit-configurator.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three'), require('@colijnit/configuratorapi/build/model/deco-node'), require('@colijnit/configuratorapi/build/service/business-object-factory'), require('@colijnit/configuratorapi/build/model/selection'), require('@colijnit/configuratorapi/build/enum/deco-node-type.enum'), require('axios'), require('@colijnit/configuratorapi/build/enum/deco-node-kind.enum'), require('jszip'), require('@colijnit/configuratorapi/build/model/article'), require('@angular/core'), require('@colijnit/configuratorapi/build/configurator'), require('rxjs'), require('@angular/common'), require('@angular/animations')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/configurator', ['exports', 'three', '@colijnit/configuratorapi/build/model/deco-node', '@colijnit/configuratorapi/build/service/business-object-factory', '@colijnit/configuratorapi/build/model/selection', '@colijnit/configuratorapi/build/enum/deco-node-type.enum', 'axios', '@colijnit/configuratorapi/build/enum/deco-node-kind.enum', 'jszip', '@colijnit/configuratorapi/build/model/article', '@angular/core', '@colijnit/configuratorapi/build/configurator', 'rxjs', '@angular/common', '@angular/animations'], factory) :
-    (global = global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.configurator = {}), global.three, global.decoNode, global.businessObjectFactory, global.selection, global.decoNodeType_enum, global.axios, global.decoNodeKind_enum, global.JSZip, global.article, global.ng.core, global.configurator, global.rxjs, global.ng.common, global.ng.animations));
-}(this, (function (exports, three, decoNode, businessObjectFactory, selection, decoNodeType_enum, axios, decoNodeKind_enum, JSZip, article, core, configurator, rxjs, common, animations) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three'), require('@colijnit/configuratorapi/build/model/options'), require('@colijnit/configuratorapi/build/model/deco-node'), require('@colijnit/configuratorapi/build/service/business-object-factory'), require('@colijnit/configuratorapi/build/model/selection'), require('@colijnit/configuratorapi/build/enum/deco-node-type.enum'), require('axios'), require('@colijnit/configuratorapi/build/enum/deco-node-kind.enum'), require('jszip'), require('@colijnit/configuratorapi/build/model/article'), require('@angular/core'), require('@colijnit/configuratorapi/build/configurator'), require('@colijnit/configuratorapi/build/utils/function/not-nill.function'), require('@colijnit/configuratorapi/build/enum/node-type.enum'), require('@colijnit/configuratorapi/build/utils/function/is-nill.function'), require('rxjs'), require('@angular/common'), require('@angular/animations')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/configurator', ['exports', 'three', '@colijnit/configuratorapi/build/model/options', '@colijnit/configuratorapi/build/model/deco-node', '@colijnit/configuratorapi/build/service/business-object-factory', '@colijnit/configuratorapi/build/model/selection', '@colijnit/configuratorapi/build/enum/deco-node-type.enum', 'axios', '@colijnit/configuratorapi/build/enum/deco-node-kind.enum', 'jszip', '@colijnit/configuratorapi/build/model/article', '@angular/core', '@colijnit/configuratorapi/build/configurator', '@colijnit/configuratorapi/build/utils/function/not-nill.function', '@colijnit/configuratorapi/build/enum/node-type.enum', '@colijnit/configuratorapi/build/utils/function/is-nill.function', 'rxjs', '@angular/common', '@angular/animations'], factory) :
+    (global = global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.configurator = {}), global.three, global.options, global.decoNode, global.businessObjectFactory, global.selection, global.decoNodeType_enum, global.axios, global.decoNodeKind_enum, global.JSZip, global.article, global.ng.core, global.configurator, global.notNill_function, global.nodeType_enum, global.isNill_function, global.rxjs, global.ng.common, global.ng.animations));
+}(this, (function (exports, three, options, decoNode, businessObjectFactory, selection, decoNodeType_enum, axios, decoNodeKind_enum, JSZip, article, core, configurator, notNill_function, nodeType_enum, isNill_function, rxjs, common, animations) { 'use strict';
 
     axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
 
@@ -1558,22 +1558,25 @@
         return VariationHelper;
     }());
 
+    var ServiceLocator = /** @class */ (function () {
+        function ServiceLocator() {
+        }
+        ServiceLocator.injector = undefined;
+        ServiceLocator = __decorate([
+            core.Injectable()
+        ], ServiceLocator);
+        return ServiceLocator;
+    }());
+
     var ConfiguratorService = /** @class */ (function () {
-        function ConfiguratorService() {
-            this.selectionsReceived = new rxjs.BehaviorSubject([]);
-            this.answersReceived = new rxjs.BehaviorSubject([]);
-            this.questionReceived = new rxjs.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.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 () {
@@ -1618,13 +1621,21 @@
                 });
             });
         };
-        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_function.isNill(s.hierarchicalPublicationCode) || ((s.hierarchicalPublicationCode & publicationCode) > 0)) && ((s.nodeType === nodeType_enum.NodeType.Question && (((s.questionPublicationCode & publicationCode) > 0) || isNill_function.isNill(s.questionPublicationCode))) ||
+                                    (s.nodeType === nodeType_enum.NodeType.Answer && (((s.answerPublicationCode & publicationCode) > 0) || isNill_function.isNill(s.answerPublicationCode))));
+                            });
+                            return [2 /*return*/, selections];
                     }
                 });
             });
@@ -1640,11 +1651,23 @@
                 });
             });
         };
-        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_function.notNill(answer.hierarchicalPublicationCode) && (answer.hierarchicalPublicationCode & publicationCode) === 0) ||
+                                    (answer.type === nodeType_enum.NodeType.Question && (answer.questionPublicationCode & publicationCode) === 0 && notNill_function.notNill(answer.questionPublicationCode)) ||
+                                    (answer.type === nodeType_enum.NodeType.Answer && (answer.publicationCode & publicationCode) === 0 && notNill_function.notNill(answer.publicationCode));
+                            });
+                            return [2 /*return*/, questionAndAnswers];
+                    }
                 });
             });
         };
@@ -1664,13 +1687,30 @@
         };
         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 = core.ɵɵdefineInjectable({ factory: function ConfiguratorService_Factory() { return new ConfiguratorService(); }, token: ConfiguratorService, providedIn: "root" });
+        ConfiguratorService.ctorParameters = function () { return [
+            { type: core.Injector }
+        ]; };
+        ConfiguratorService.ɵprov = core.ɵɵdefineInjectable({ factory: function ConfiguratorService_Factory() { return new ConfiguratorService(core.ɵɵinject(core.INJECTOR)); }, token: ConfiguratorService, providedIn: "root" });
         ConfiguratorService = __decorate([
             core.Injectable({
                 providedIn: 'root'
@@ -1680,71 +1720,76 @@
     }());
 
     var Builder = /** @class */ (function () {
-        function Builder(_configuratorService) {
-            var _this = this;
-            this._configuratorService = _configuratorService;
+        function Builder(scene, options, useInAngular) {
             this.selectionsReceived = new rxjs.BehaviorSubject([]);
             this.answersReceived = new rxjs.BehaviorSubject([]);
-            this.questionReceived = new rxjs.BehaviorSubject(undefined);
+            this.modelLoaded = new rxjs.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.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*/];
                     }
                 });
             });
@@ -1757,17 +1802,87 @@
             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 () {
@@ -2052,19 +2167,21 @@
                 });
             });
         };
-        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.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!';
@@ -2080,7 +2197,7 @@
                 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();
@@ -2165,7 +2282,9 @@
             this._prepareTheSelections();
         };
         Builder.ctorParameters = function () { return [
-            { type: ConfiguratorService }
+            { type: three.Scene },
+            { type: options.Options },
+            { type: Boolean }
         ]; };
         Builder = __decorate([
             core.Injectable()
@@ -2190,8 +2309,8 @@
         AnswersComponent = __decorate([
             core.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;
@@ -2233,6 +2352,8 @@
                             var base64 = ImageCacheService_1._handleResponseData(includeMimeType, thumb, responseData);
                             _this._imageCache.set(object.nodeId, base64);
                             resolve(base64);
+                        }).catch(function () {
+                            reject();
                         });
                     }
                     else {
@@ -2260,13 +2381,16 @@
     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
@@ -2274,10 +2398,17 @@
         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 [
@@ -2292,7 +2423,7 @@
         AnswerComponent = __decorate([
             core.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: [
                     animations.trigger('answerAppear', [
                         animations.state('void', animations.style({ 'background': '#dbdbdb' })),
@@ -2300,7 +2431,7 @@
                         animations.transition('void <=> *', animations.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;
@@ -2519,7 +2650,7 @@
                             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();
@@ -2561,7 +2692,7 @@
         SelectionsComponent = __decorate([
             core.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: [
                     animations.trigger('showHideChildren', [
                         animations.state('void', animations.style({ 'height': '0' })),
@@ -2569,7 +2700,7 @@
                         animations.transition('void <=> *', animations.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;
@@ -2598,15 +2729,15 @@
     exports.AnswersComponent = AnswersComponent;
     exports.AnswersModule = AnswersModule;
     exports.Builder = Builder;
+    exports.ConfiguratorService = ConfiguratorService;
     exports.SelectionsComponent = SelectionsComponent;
     exports.SelectionsModule = SelectionsModule;
-    exports.ɵa = ConfiguratorService;
-    exports.ɵb = SharedModule;
-    exports.ɵc = LoaderComponent;
-    exports.ɵd = AnswerComponent;
-    exports.ɵe = ImageCacheService;
-    exports.ɵf = VisibilityObserverDirective;
-    exports.ɵg = VisibilityObserverMasterDirective;
+    exports.ɵa = SharedModule;
+    exports.ɵb = LoaderComponent;
+    exports.ɵc = AnswerComponent;
+    exports.ɵd = ImageCacheService;
+    exports.ɵe = VisibilityObserverDirective;
+    exports.ɵf = VisibilityObserverMasterDirective;
 
     Object.defineProperty(exports, '__esModule', { value: true });