@colijnit/configurator 1.0.17 → 1.0.19

package/bundles/colijnit-configurator.umd.js

@@ -1,6 +1,6 @@
 (function (global, factory) {
-    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) :
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/configuratorapi/build/model/deco-node'), require('@colijnit/ioneconnector/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/ioneconnector/build/model/options', '@colijnit/configuratorapi/build/model/deco-node', '@colijnit/ioneconnector/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';
 
@@ -225,2505 +225,2505 @@
         return value;
     }
 
-    var ObjectUtils = /** @class */ (function () {
-        function ObjectUtils() {
-        }
-        ObjectUtils.DisposeMaterial = function (material) {
-            var _this = this;
-            if (!material) {
-                return;
-            }
-            if (Array.isArray(material)) {
-                material.forEach(function (mtrl) {
-                    _this.materialProps
-                        .filter(function (mapType) { return mtrl[mapType]; })
-                        .forEach(function (mapType) { return mtrl[mapType].dispose(); });
-                    mtrl.dispose();
-                });
-            }
-            else {
-                this.materialProps
-                    .filter(function (mapType) { return material[mapType] && material[mapType].dispose; })
-                    .forEach(function (mapType) { return material[mapType].dispose(); });
-                if (material.dispose) {
-                    material.dispose();
-                }
-            }
-        };
-        ObjectUtils.DisposeObject = function (object) {
-            var _this = this;
-            if (!object) {
-                return;
-            }
-            if (object.children.length) {
-                object.children.forEach(function (child) { return _this.DisposeObject(child); });
-            }
-            this.DisposeNode(object);
-        };
-        ObjectUtils.DisposeNode = function (node) {
-            var _this = this;
-            node.traverse(function (obj) {
-                if (obj instanceof three.Mesh) {
-                    if (obj.geometry) {
-                        obj.geometry.dispose();
-                    }
-                    _this.DisposeMaterial(obj.material);
-                }
-                if (typeof obj.dispose === 'function') {
-                    // @ts-ignore
-                    obj.dispose();
-                }
-            });
-        };
-        ObjectUtils.materialProps = ['map', 'lightMap', 'bumpMap', 'normalMap', 'specularMap', 'envMap', 'aoMap', 'roughnessMap', 'metalnessMap'];
-        return ObjectUtils;
+    var ObjectUtils = /** @class */ (function () {
+        function ObjectUtils() {
+        }
+        ObjectUtils.DisposeMaterial = function (material) {
+            var _this = this;
+            if (!material) {
+                return;
+            }
+            if (Array.isArray(material)) {
+                material.forEach(function (mtrl) {
+                    _this.materialProps
+                        .filter(function (mapType) { return mtrl[mapType]; })
+                        .forEach(function (mapType) { return mtrl[mapType].dispose(); });
+                    mtrl.dispose();
+                });
+            }
+            else {
+                this.materialProps
+                    .filter(function (mapType) { return material[mapType] && material[mapType].dispose; })
+                    .forEach(function (mapType) { return material[mapType].dispose(); });
+                if (material.dispose) {
+                    material.dispose();
+                }
+            }
+        };
+        ObjectUtils.DisposeObject = function (object) {
+            var _this = this;
+            if (!object) {
+                return;
+            }
+            if (object.children.length) {
+                object.children.forEach(function (child) { return _this.DisposeObject(child); });
+            }
+            this.DisposeNode(object);
+        };
+        ObjectUtils.DisposeNode = function (node) {
+            var _this = this;
+            node.traverse(function (obj) {
+                if (obj instanceof three.Mesh) {
+                    if (obj.geometry) {
+                        obj.geometry.dispose();
+                    }
+                    _this.DisposeMaterial(obj.material);
+                }
+                if (typeof obj.dispose === 'function') {
+                    // @ts-ignore
+                    obj.dispose();
+                }
+            });
+        };
+        ObjectUtils.materialProps = ['map', 'lightMap', 'bumpMap', 'normalMap', 'specularMap', 'envMap', 'aoMap', 'roughnessMap', 'metalnessMap'];
+        return ObjectUtils;
     }());
 
-    // Static utility functions holder related to files.
-    // @dynamic
-    var FileUtils = /** @class */ (function () {
-        function FileUtils() {
-        }
-        // Returns the given dataUri string stripped of the mimetype part.
-        FileUtils.StripMimeStringFromDataUri = function (dataUri) {
-            if (!dataUri) {
-                return '';
-            }
-            var mimeString = this.GetMimeStringFromDataUri(dataUri);
-            return dataUri.substr(mimeString.length + 1);
-        };
-        FileUtils.GetMimeStringFromDataUri = function (dataUri) {
-            if (!dataUri) {
-                return '';
-            }
-            return dataUri.split(',')[0];
-        };
-        FileUtils.FileExists = function (url, assetPath) {
-            return __awaiter(this, void 0, void 0, function () {
-                var result;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, axios({
-                                method: 'get',
-                                url: assetPath + "getFiles.php?assetUrl=" + url,
-                                responseType: "json"
-                            })];
-                        case 1:
-                            result = _a.sent();
-                            return [2 /*return*/, !!result.data];
-                    }
-                });
-            });
-        };
-        /**
-         * There is some discrepancy regarding locations of h3d objects
-         * Therefor we need to (temporarily?!) fix the content url
-         * Also we need to change some additionals
-         */
-        FileUtils.FixUrl = function (assetUrl) {
-            if (!assetUrl) {
-                return '';
-            }
-            var fixedUrl = assetUrl;
-            if (!fixedUrl.endsWith('glb') && !fixedUrl.endsWith('obj') && !fixedUrl.endsWith('glb.gz') && !fixedUrl.endsWith('obj.gz')) {
-                fixedUrl = FileUtils.FixUnityUrl(fixedUrl);
-            }
-            fixedUrl = fixedUrl.replace('/content/', '/content43/');
-            return fixedUrl;
-        };
-        FileUtils.FixGlbUrl = function (assetUrl) {
-            if (!assetUrl) {
-                return '';
-            }
-            var fixedUrl = assetUrl;
-            if (assetUrl.indexOf('_webplayer') === -1) {
-                fixedUrl = assetUrl.concat('_webplayer');
-            }
-            fixedUrl = fixedUrl.replace('/content/', '/content43/');
-            if (!fixedUrl.endsWith('.glb')) {
-                fixedUrl = fixedUrl.concat('.glb');
-            }
-            return fixedUrl;
-        };
-        // Return the mimetype of the given filename.
-        FileUtils.MimeTypeFromFilename = function (fileName) {
-            var regEx = /(?:\.([^.]+))?$/; // regex to find extension
-            var extension = regEx.exec(fileName)[1];
-            switch (extension) {
-                case 'jpg':
-                case 'jpeg':
-                    return 'image/jpeg';
-                case 'png':
-                    return 'image/png';
-                case 'bmp':
-                    return 'image/bmp';
-            }
-        };
-        /**
-         * Downloads the given file to the users default download location.
-         * @param fileName With or without extension
-         * @param content File content as a string
-         * @param [mimeType = 'text/plain']
-         */
-        FileUtils.DownloadFile = function (fileName, content, mimeType) {
-            if (mimeType === void 0) { mimeType = 'text/plain'; }
-            var element = document.createElement('a');
-            element.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(content));
-            element.setAttribute('download', fileName);
-            element.style.display = 'none';
-            document.body.appendChild(element);
-            element.click();
-            document.body.removeChild(element);
-        };
-        // Returns the contents of given file as a text string.
-        FileUtils.ReadAsText = function (file) {
-            return new Promise(function (resolve) {
-                var reader = new FileReader();
-                reader.readAsText(file);
-                reader.onloadend = function (event) {
-                    if (event.target.readyState === 2) {
-                        resolve(event.target.result);
-                    }
-                };
-            });
-        };
-        FileUtils.GetExtensionFromDataUri = function (dataUri) {
-            return dataUri.replace(/(data:image\/)(.*?)(;base64.*)/gi, '$2');
-        };
-        FileUtils.CreateDownloadFileNameFromBase64 = function (dataUri) {
-            var ext = this.GetExtensionFromDataUri(dataUri);
-            return 'preview.' + ext;
-        };
-        FileUtils.DownloadFromDataUri = function (dataUri, fileName) {
-            var link = document.createElement('a');
-            link.download = fileName;
-            link.href = dataUri;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        };
-        // todo remove once Connector deals with mimetypes and this method isn't used anymore
-        FileUtils.DocumentBodyToDataUri = function (documentBody, mimeType) {
-            if (!!documentBody) {
-                return 'data:' + mimeType + ';base64,' + documentBody;
-            }
-            else {
-                return '';
-            }
-        };
-        FileUtils.FixUnityUrl = function (url) {
-            if (url.indexOf('_webplayer') === -1) {
-                url = url.concat('_webplayer.ione3d');
-            }
-            else {
-                url = url.replace('_webplayer', '_webplayer.ione3d');
-            }
-            if (!url.endsWith('.gz')) {
-                url = url.concat('.gz');
-            }
-            return url.replace('.unity3d', '');
-        };
-        FileUtils._cachedTextureUploads = new Map();
-        return FileUtils;
+    // Static utility functions holder related to files.
+    // @dynamic
+    var FileUtils = /** @class */ (function () {
+        function FileUtils() {
+        }
+        // Returns the given dataUri string stripped of the mimetype part.
+        FileUtils.StripMimeStringFromDataUri = function (dataUri) {
+            if (!dataUri) {
+                return '';
+            }
+            var mimeString = this.GetMimeStringFromDataUri(dataUri);
+            return dataUri.substr(mimeString.length + 1);
+        };
+        FileUtils.GetMimeStringFromDataUri = function (dataUri) {
+            if (!dataUri) {
+                return '';
+            }
+            return dataUri.split(',')[0];
+        };
+        FileUtils.FileExists = function (url, assetPath) {
+            return __awaiter(this, void 0, void 0, function () {
+                var result;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, axios({
+                                method: 'get',
+                                url: assetPath + "getFiles.php?assetUrl=" + url,
+                                responseType: "json"
+                            })];
+                        case 1:
+                            result = _a.sent();
+                            return [2 /*return*/, !!result.data];
+                    }
+                });
+            });
+        };
+        /**
+         * There is some discrepancy regarding locations of h3d objects
+         * Therefor we need to (temporarily?!) fix the content url
+         * Also we need to change some additionals
+         */
+        FileUtils.FixUrl = function (assetUrl) {
+            if (!assetUrl) {
+                return '';
+            }
+            var fixedUrl = assetUrl;
+            if (!fixedUrl.endsWith('glb') && !fixedUrl.endsWith('obj') && !fixedUrl.endsWith('glb.gz') && !fixedUrl.endsWith('obj.gz')) {
+                fixedUrl = FileUtils.FixUnityUrl(fixedUrl);
+            }
+            fixedUrl = fixedUrl.replace('/content/', '/content43/');
+            return fixedUrl;
+        };
+        FileUtils.FixGlbUrl = function (assetUrl) {
+            if (!assetUrl) {
+                return '';
+            }
+            var fixedUrl = assetUrl;
+            if (assetUrl.indexOf('_webplayer') === -1) {
+                fixedUrl = assetUrl.concat('_webplayer');
+            }
+            fixedUrl = fixedUrl.replace('/content/', '/content43/');
+            if (!fixedUrl.endsWith('.glb')) {
+                fixedUrl = fixedUrl.concat('.glb');
+            }
+            return fixedUrl;
+        };
+        // Return the mimetype of the given filename.
+        FileUtils.MimeTypeFromFilename = function (fileName) {
+            var regEx = /(?:\.([^.]+))?$/; // regex to find extension
+            var extension = regEx.exec(fileName)[1];
+            switch (extension) {
+                case 'jpg':
+                case 'jpeg':
+                    return 'image/jpeg';
+                case 'png':
+                    return 'image/png';
+                case 'bmp':
+                    return 'image/bmp';
+            }
+        };
+        /**
+         * Downloads the given file to the users default download location.
+         * @param fileName With or without extension
+         * @param content File content as a string
+         * @param [mimeType = 'text/plain']
+         */
+        FileUtils.DownloadFile = function (fileName, content, mimeType) {
+            if (mimeType === void 0) { mimeType = 'text/plain'; }
+            var element = document.createElement('a');
+            element.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(content));
+            element.setAttribute('download', fileName);
+            element.style.display = 'none';
+            document.body.appendChild(element);
+            element.click();
+            document.body.removeChild(element);
+        };
+        // Returns the contents of given file as a text string.
+        FileUtils.ReadAsText = function (file) {
+            return new Promise(function (resolve) {
+                var reader = new FileReader();
+                reader.readAsText(file);
+                reader.onloadend = function (event) {
+                    if (event.target.readyState === 2) {
+                        resolve(event.target.result);
+                    }
+                };
+            });
+        };
+        FileUtils.GetExtensionFromDataUri = function (dataUri) {
+            return dataUri.replace(/(data:image\/)(.*?)(;base64.*)/gi, '$2');
+        };
+        FileUtils.CreateDownloadFileNameFromBase64 = function (dataUri) {
+            var ext = this.GetExtensionFromDataUri(dataUri);
+            return 'preview.' + ext;
+        };
+        FileUtils.DownloadFromDataUri = function (dataUri, fileName) {
+            var link = document.createElement('a');
+            link.download = fileName;
+            link.href = dataUri;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        };
+        // todo remove once Connector deals with mimetypes and this method isn't used anymore
+        FileUtils.DocumentBodyToDataUri = function (documentBody, mimeType) {
+            if (!!documentBody) {
+                return 'data:' + mimeType + ';base64,' + documentBody;
+            }
+            else {
+                return '';
+            }
+        };
+        FileUtils.FixUnityUrl = function (url) {
+            if (url.indexOf('_webplayer') === -1) {
+                url = url.concat('_webplayer.ione3d');
+            }
+            else {
+                url = url.replace('_webplayer', '_webplayer.ione3d');
+            }
+            if (!url.endsWith('.gz')) {
+                url = url.concat('.gz');
+            }
+            return url.replace('.unity3d', '');
+        };
+        FileUtils._cachedTextureUploads = new Map();
+        return FileUtils;
     }());
 
-    var ThreedUtils = /** @class */ (function () {
-        function ThreedUtils() {
-            this._objectCache = new Map();
-        }
-        ThreedUtils.prototype.clearCache = function () {
-            var objs = Array.from(this._objectCache.values());
-            objs.forEach(function (o) { return ObjectUtils.DisposeObject(o); });
-            this._objectCache.clear();
-        };
-        ThreedUtils.prototype.download3DSource = function (fileName) {
-            var _this = this;
-            return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                var lookupFileName;
-                var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            fileName = fileName.replace('.unity3d', '');
-                            lookupFileName = fileName + (fileName.indexOf('.glb') < 0 ? '.glb' : '');
-                            if (this._objectCache.has(lookupFileName)) {
-                                resolve(this._objectCache.get(lookupFileName));
-                                return [2 /*return*/];
-                            }
-                            return [4 /*yield*/, FileUtils.FileExists(lookupFileName, 'https://cdn1.colijn-it.nl/content43/')];
-                        case 1:
-                            if (_a.sent()) {
-                                this.loadGlbSource(lookupFileName).then(function (obj) {
-                                    _this._objectCache.set(lookupFileName, obj);
-                                    resolve(obj);
-                                });
-                            }
-                            else {
-                                reject("GLB source not found! (" + lookupFileName + ")");
-                            }
-                            return [2 /*return*/];
-                    }
-                });
-            }); });
-        };
-        ThreedUtils.prototype.readFileAsText = function (file) {
-            var fileReader = new FileReader();
-            return new Promise(function (resolve, reject) {
-                fileReader.onload = function (e) { return resolve(e.target.result); };
-                fileReader.onerror = function (error) { return reject(error); };
-                fileReader.readAsText(file);
-            });
-        };
-        ThreedUtils.prototype.loadJsonModel = function (filePath) {
-            return __awaiter(this, void 0, void 0, function () {
-                var json, loader;
-                var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (this._objectCache.has(filePath)) {
-                                return [2 /*return*/, Promise.resolve(this._objectCache.get(filePath))];
-                            }
-                            return [4 /*yield*/, this._readJsonFile(filePath)];
-                        case 1:
-                            json = _a.sent();
-                            loader = new three.ObjectLoader();
-                            loader.crossOrigin = 'Anonymous';
-                            return [2 /*return*/, new Promise(function (resolve, reject) {
-                                    try {
-                                        var obj = loader.parse(json);
-                                        _this._objectCache.set(filePath, obj);
-                                        resolve(obj);
-                                    }
-                                    catch (e) {
-                                        reject(null);
-                                    }
-                                })];
-                    }
-                });
-            });
-        };
-        ThreedUtils.prototype.loadJsonObjectModel = function (filePath) {
-            return __awaiter(this, void 0, void 0, function () {
-                var loader;
-                var _this = this;
-                return __generator(this, function (_a) {
-                    if (this._objectCache.has(filePath)) {
-                        return [2 /*return*/, Promise.resolve(this._objectCache.get(filePath))];
-                    }
-                    loader = new three.ObjectLoader();
-                    loader.setCrossOrigin('Anonymous');
-                    loader.setResourcePath('');
-                    return [2 /*return*/, new Promise(function (resolve, reject) {
-                            loader.load(filePath, function (object) {
-                                var obj = (object.type === 'Scene' && object.children[0].type === 'Object3D') ? object.children[0] : object;
-                                _this._objectCache.set(filePath, obj);
-                                resolve(obj);
-                            }, function (xhr) { return null; }, function (error) { return reject(error); });
-                        })];
-                });
-            });
-        };
-        ThreedUtils.prototype.loadGlbModel = function (file, cleanUp) {
-            if (cleanUp === void 0) { cleanUp = true; }
-            return __awaiter(this, void 0, void 0, function () {
-                var obj;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (this._objectCache.has(file)) {
-                                return [2 /*return*/, Promise.resolve(this._objectCache.get(file))];
-                            }
-                            if (!window.hasOwnProperty('loadGLTF')) {
-                                console.error('loadGLTF not defined in window global');
-                                return [2 /*return*/, null];
-                            }
-                            return [4 /*yield*/, window.loadGLTF(file)];
-                        case 1:
-                            obj = _a.sent();
-                            if (obj) {
-                                this._cleanedUpObjects(obj, cleanUp);
-                                this._objectCache.set(file, obj);
-                                return [2 /*return*/, obj];
-                            }
-                            else {
-                                return [2 /*return*/, null];
-                            }
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        ThreedUtils.prototype.loadGlbSource = function (file) {
-            return __awaiter(this, void 0, void 0, function () {
-                var obj, children;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.loadGlbModel(file, false)];
-                        case 1:
-                            obj = _a.sent();
-                            if (obj) {
-                                obj.children = obj.children.filter(function (c) { return !(c instanceof three.Camera); });
-                                obj.children.sort(function (a, b) { return a['name'] < b['name'] ? 1 : -1; });
-                                obj.children.forEach(function (c) {
-                                    c.traverse(function (t) {
-                                        t.visible = !t.name.toLowerCase().startsWith('c_');
-                                    });
-                                    c.visible = false;
-                                });
-                                if (obj.children.length === 1 && obj.children[0] instanceof three.Group) { // flatten children
-                                    children = obj.children[0].children.slice();
-                                    obj.children.length = 0;
-                                    obj.children = children;
-                                }
-                            }
-                            return [2 /*return*/, obj];
-                    }
-                });
-            });
-        };
-        ThreedUtils.prototype.textureFromUrl = function (url) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    // url = this._includeBaseUrl(url);
-                    return [2 /*return*/, new Promise(function (resolve, reject) {
-                            var textureLoader = new three.TextureLoader();
-                            // textureLoader.setBaseU(this._settingsService.settings.assetPath);
-                            textureLoader.load(url, function (texture) {
-                                texture.wrapT = three.RepeatWrapping;
-                                texture.wrapS = three.RepeatWrapping;
-                                texture.repeat.set(1, 1);
-                                texture.needsUpdate = true;
-                                return resolve(texture);
-                            }, null, reject);
-                        })];
-                });
-            });
-        };
-        ThreedUtils.prototype._cleanedUpObjects = function (object, cleanUp) {
-            var _this = this;
-            if (cleanUp === void 0) { cleanUp = true; }
-            var obj = new three.Object3D();
-            object.children.forEach(function (c) {
-                if (!(c instanceof three.Camera)) {
-                    if (cleanUp && c instanceof three.Group || (c.children.length === 1 && c.children[0] instanceof three.Group)) {
-                        _this._addGroupChildrenToObject(c, obj);
-                    }
-                    else if ((cleanUp && !(c instanceof three.Mesh)) || (!(c instanceof three.Mesh) && !c.name && c.children.length > 0)) {
-                        c.children.forEach(function (child) {
-                            child.translateY(c.position.y);
-                        });
-                        c.translateY(-c.position.y);
-                        if (obj.children.length > 0) {
-                            obj.add(c.clone());
-                        }
-                        else {
-                            obj = c.clone();
-                        }
-                    }
-                    else {
-                        // if (c.position.y > 0 || c.position.y < 0) {
-                        //   c.children.forEach((child) => {
-                        //     child.translateY(c.position.y);
-                        //   });
-                        //   c.translateY(-c.position.y);
-                        // }
-                        obj.add(c.clone());
-                    }
-                }
-            });
-            var boundingBox = new three.Box3().setFromObject(obj);
-            var bbCenterPivot = new three.Vector3();
-            boundingBox.getCenter(bbCenterPivot);
-            var delta = new three.Vector3().add(bbCenterPivot).negate();
-            obj.children.forEach(function (cc) {
-                cc.position.add(delta);
-            });
-            return obj;
-        };
-        ThreedUtils.prototype._addGroupChildrenToObject = function (group, obj, cleanUp) {
-            var _this = this;
-            if (cleanUp === void 0) { cleanUp = true; }
-            group.children.forEach(function (gc) {
-                if (cleanUp && gc instanceof three.Group) {
-                    _this._addGroupChildrenToObject(gc, obj);
-                }
-                else {
-                    // gc.translateX(-group.position.x);
-                    gc.translateY(group.position.y);
-                    // gc.translateZ(-group.position.z);
-                    obj.add(gc.clone());
-                }
-            });
-        };
-        ThreedUtils.prototype._iterateChildren = function (children, callback) {
-            for (var i = 0; i < children.length; i++) {
-                var child = children[i];
-                if (child instanceof three.Mesh) {
-                    callback(child);
-                }
-                else {
-                    this._iterateChildren(child.children, callback);
-                }
-            }
-        };
-        ThreedUtils.prototype._readJsonFile = function (filePath) {
-            return __awaiter(this, void 0, void 0, function () {
-                var response, empty_1, e_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            _a.trys.push([0, 5, , 6]);
-                            return [4 /*yield*/, fetch(filePath)];
-                        case 1:
-                            response = _a.sent();
-                            if (!!response.ok) return [3 /*break*/, 2];
-                            return [2 /*return*/, ''];
-                        case 2:
-                            empty_1 = false;
-                            return [4 /*yield*/, response.clone().text().then(function (value) {
-                                    if (value === '') {
-                                        empty_1 = true;
-                                    }
-                                })];
-                        case 3:
-                            _a.sent();
-                            return [2 /*return*/, empty_1 ? {} : response.json()];
-                        case 4: return [3 /*break*/, 6];
-                        case 5:
-                            e_1 = _a.sent();
-                            return [2 /*return*/, ''];
-                        case 6: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        return ThreedUtils;
+    var ThreedUtils = /** @class */ (function () {
+        function ThreedUtils() {
+            this._objectCache = new Map();
+        }
+        ThreedUtils.prototype.clearCache = function () {
+            var objs = Array.from(this._objectCache.values());
+            objs.forEach(function (o) { return ObjectUtils.DisposeObject(o); });
+            this._objectCache.clear();
+        };
+        ThreedUtils.prototype.download3DSource = function (fileName) {
+            var _this = this;
+            return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
+                var lookupFileName;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            fileName = fileName.replace('.unity3d', '');
+                            lookupFileName = fileName + (fileName.indexOf('.glb') < 0 ? '.glb' : '');
+                            if (this._objectCache.has(lookupFileName)) {
+                                resolve(this._objectCache.get(lookupFileName));
+                                return [2 /*return*/];
+                            }
+                            return [4 /*yield*/, FileUtils.FileExists(lookupFileName, 'https://cdn1.colijn-it.nl/content43/')];
+                        case 1:
+                            if (_a.sent()) {
+                                this.loadGlbSource(lookupFileName).then(function (obj) {
+                                    _this._objectCache.set(lookupFileName, obj);
+                                    resolve(obj);
+                                });
+                            }
+                            else {
+                                reject("GLB source not found! (" + lookupFileName + ")");
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        };
+        ThreedUtils.prototype.readFileAsText = function (file) {
+            var fileReader = new FileReader();
+            return new Promise(function (resolve, reject) {
+                fileReader.onload = function (e) { return resolve(e.target.result); };
+                fileReader.onerror = function (error) { return reject(error); };
+                fileReader.readAsText(file);
+            });
+        };
+        ThreedUtils.prototype.loadJsonModel = function (filePath) {
+            return __awaiter(this, void 0, void 0, function () {
+                var json, loader;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (this._objectCache.has(filePath)) {
+                                return [2 /*return*/, Promise.resolve(this._objectCache.get(filePath))];
+                            }
+                            return [4 /*yield*/, this._readJsonFile(filePath)];
+                        case 1:
+                            json = _a.sent();
+                            loader = new three.ObjectLoader();
+                            loader.crossOrigin = 'Anonymous';
+                            return [2 /*return*/, new Promise(function (resolve, reject) {
+                                    try {
+                                        var obj = loader.parse(json);
+                                        _this._objectCache.set(filePath, obj);
+                                        resolve(obj);
+                                    }
+                                    catch (e) {
+                                        reject(null);
+                                    }
+                                })];
+                    }
+                });
+            });
+        };
+        ThreedUtils.prototype.loadJsonObjectModel = function (filePath) {
+            return __awaiter(this, void 0, void 0, function () {
+                var loader;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    if (this._objectCache.has(filePath)) {
+                        return [2 /*return*/, Promise.resolve(this._objectCache.get(filePath))];
+                    }
+                    loader = new three.ObjectLoader();
+                    loader.setCrossOrigin('Anonymous');
+                    loader.setResourcePath('');
+                    return [2 /*return*/, new Promise(function (resolve, reject) {
+                            loader.load(filePath, function (object) {
+                                var obj = (object.type === 'Scene' && object.children[0].type === 'Object3D') ? object.children[0] : object;
+                                _this._objectCache.set(filePath, obj);
+                                resolve(obj);
+                            }, function (xhr) { return null; }, function (error) { return reject(error); });
+                        })];
+                });
+            });
+        };
+        ThreedUtils.prototype.loadGlbModel = function (file, cleanUp) {
+            if (cleanUp === void 0) { cleanUp = true; }
+            return __awaiter(this, void 0, void 0, function () {
+                var obj;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (this._objectCache.has(file)) {
+                                return [2 /*return*/, Promise.resolve(this._objectCache.get(file))];
+                            }
+                            if (!window.hasOwnProperty('loadGLTF')) {
+                                console.error('loadGLTF not defined in window global');
+                                return [2 /*return*/, null];
+                            }
+                            return [4 /*yield*/, window.loadGLTF(file)];
+                        case 1:
+                            obj = _a.sent();
+                            if (obj) {
+                                this._cleanedUpObjects(obj, cleanUp);
+                                this._objectCache.set(file, obj);
+                                return [2 /*return*/, obj];
+                            }
+                            else {
+                                return [2 /*return*/, null];
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ThreedUtils.prototype.loadGlbSource = function (file) {
+            return __awaiter(this, void 0, void 0, function () {
+                var obj, children;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.loadGlbModel(file, false)];
+                        case 1:
+                            obj = _a.sent();
+                            if (obj) {
+                                obj.children = obj.children.filter(function (c) { return !(c instanceof three.Camera); });
+                                obj.children.sort(function (a, b) { return a['name'] < b['name'] ? 1 : -1; });
+                                obj.children.forEach(function (c) {
+                                    c.traverse(function (t) {
+                                        t.visible = !t.name.toLowerCase().startsWith('c_');
+                                    });
+                                    c.visible = false;
+                                });
+                                if (obj.children.length === 1 && obj.children[0] instanceof three.Group) { // flatten children
+                                    children = obj.children[0].children.slice();
+                                    obj.children.length = 0;
+                                    obj.children = children;
+                                }
+                            }
+                            return [2 /*return*/, obj];
+                    }
+                });
+            });
+        };
+        ThreedUtils.prototype.textureFromUrl = function (url) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    // url = this._includeBaseUrl(url);
+                    return [2 /*return*/, new Promise(function (resolve, reject) {
+                            var textureLoader = new three.TextureLoader();
+                            // textureLoader.setBaseU(this._settingsService.settings.assetPath);
+                            textureLoader.load(url, function (texture) {
+                                texture.wrapT = three.RepeatWrapping;
+                                texture.wrapS = three.RepeatWrapping;
+                                texture.repeat.set(1, 1);
+                                texture.needsUpdate = true;
+                                return resolve(texture);
+                            }, null, reject);
+                        })];
+                });
+            });
+        };
+        ThreedUtils.prototype._cleanedUpObjects = function (object, cleanUp) {
+            var _this = this;
+            if (cleanUp === void 0) { cleanUp = true; }
+            var obj = new three.Object3D();
+            object.children.forEach(function (c) {
+                if (!(c instanceof three.Camera)) {
+                    if (cleanUp && c instanceof three.Group || (c.children.length === 1 && c.children[0] instanceof three.Group)) {
+                        _this._addGroupChildrenToObject(c, obj);
+                    }
+                    else if ((cleanUp && !(c instanceof three.Mesh)) || (!(c instanceof three.Mesh) && !c.name && c.children.length > 0)) {
+                        c.children.forEach(function (child) {
+                            child.translateY(c.position.y);
+                        });
+                        c.translateY(-c.position.y);
+                        if (obj.children.length > 0) {
+                            obj.add(c.clone());
+                        }
+                        else {
+                            obj = c.clone();
+                        }
+                    }
+                    else {
+                        // if (c.position.y > 0 || c.position.y < 0) {
+                        //   c.children.forEach((child) => {
+                        //     child.translateY(c.position.y);
+                        //   });
+                        //   c.translateY(-c.position.y);
+                        // }
+                        obj.add(c.clone());
+                    }
+                }
+            });
+            var boundingBox = new three.Box3().setFromObject(obj);
+            var bbCenterPivot = new three.Vector3();
+            boundingBox.getCenter(bbCenterPivot);
+            var delta = new three.Vector3().add(bbCenterPivot).negate();
+            obj.children.forEach(function (cc) {
+                cc.position.add(delta);
+            });
+            return obj;
+        };
+        ThreedUtils.prototype._addGroupChildrenToObject = function (group, obj, cleanUp) {
+            var _this = this;
+            if (cleanUp === void 0) { cleanUp = true; }
+            group.children.forEach(function (gc) {
+                if (cleanUp && gc instanceof three.Group) {
+                    _this._addGroupChildrenToObject(gc, obj);
+                }
+                else {
+                    // gc.translateX(-group.position.x);
+                    gc.translateY(group.position.y);
+                    // gc.translateZ(-group.position.z);
+                    obj.add(gc.clone());
+                }
+            });
+        };
+        ThreedUtils.prototype._iterateChildren = function (children, callback) {
+            for (var i = 0; i < children.length; i++) {
+                var child = children[i];
+                if (child instanceof three.Mesh) {
+                    callback(child);
+                }
+                else {
+                    this._iterateChildren(child.children, callback);
+                }
+            }
+        };
+        ThreedUtils.prototype._readJsonFile = function (filePath) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response, empty_1, e_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 5, , 6]);
+                            return [4 /*yield*/, fetch(filePath)];
+                        case 1:
+                            response = _a.sent();
+                            if (!!response.ok) return [3 /*break*/, 2];
+                            return [2 /*return*/, ''];
+                        case 2:
+                            empty_1 = false;
+                            return [4 /*yield*/, response.clone().text().then(function (value) {
+                                    if (value === '') {
+                                        empty_1 = true;
+                                    }
+                                })];
+                        case 3:
+                            _a.sent();
+                            return [2 /*return*/, empty_1 ? {} : response.json()];
+                        case 4: return [3 /*break*/, 6];
+                        case 5:
+                            e_1 = _a.sent();
+                            return [2 /*return*/, ''];
+                        case 6: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return ThreedUtils;
     }());
 
-    var SceneUtils = /** @class */ (function () {
-        function SceneUtils() {
-        }
-        SceneUtils.TrySelectorConnection = function (scene, parent, part1, part2, createAddableFn) {
-            var addable;
-            if (createAddableFn) {
-                addable = part2;
-                part2 = createAddableFn(addable);
-            }
-            for (var i = 0; i < part1.children.length; i++) {
-                for (var ii = 0; ii < part2.children.length; ii++) {
-                    var con1 = part1.children[i];
-                    var con2 = part2.children[ii];
-                    // if these connectors can connect connect them
-                    if (!con1['connected'] && !con2['connected'] && this.CanSelectorConnect(con1, con2)) {
-                        // if addable, continue this loop with a new addable
-                        if (addable) {
-                            var newPart2 = createAddableFn(addable, part2, part1);
-                            // reference of part2 changed, so refresh con2
-                            this.SelectorConnect(scene, parent, con1, newPart2.children[ii]);
-                        }
-                        else {
-                            return this.SelectorConnect(scene, parent, con1, con2);
-                        }
-                    }
-                }
-            }
-            return false;
-        };
-        SceneUtils.Convert3DPointToScreenPoint = function (point, camera, width, height) {
-            if (!point) {
-                return new three.Vector2();
-            }
-            var vector = point.clone().project(camera);
-            vector.x = (vector.x + 1) / 2 * width;
-            vector.y = -(vector.y - 1) / 2 * height;
-            return new three.Vector2(vector.x, vector.y);
-        };
-        SceneUtils.CanSelectorConnect = function (con1, con2) {
-            var con1Name = con1 instanceof three.Object3D ? con1.name : con1.connector;
-            var con2Name = con2 instanceof three.Object3D ? con2.name : con2.connector;
-            var sameParent = con1 instanceof three.Object3D && con2 instanceof three.Object3D ? con1.parent === con2.parent : false;
-            var parts1 = con1Name.toUpperCase().split('_'), parts2 = con2Name.toUpperCase().split('_');
-            if (parts1.length >= 3 && parts2.length >= 3 && !sameParent) {
-                var connectable = parts1[0] === 'C' && parts2[0] === 'C' &&
-                    parts1[1] === parts2[1] && parts1[2] !== parts2[2];
-                return connectable;
-            }
-            return false;
-        };
-        SceneUtils.SelectorConnect = function (scene, parent, con1, con2) {
-            if (!scene || !parent) {
-                return false;
-            }
-            con1['connectedTo'] = con2.parent.name;
-            con2['connectedTo'] = con1.parent.name;
-            var motherRotation = new three.Euler(0, 0, 0);
-            var motherPosition = new three.Vector3(0, 0, 0);
-            scene.updateMatrixWorld(true);
-            motherRotation.copy(parent.rotation);
-            parent.getWorldPosition(motherPosition);
-            parent.rotation.set(0, 0, 0);
-            parent.position.set(0, 0, 0);
-            var con1Quat = new three.Quaternion();
-            con1.getWorldQuaternion(con1Quat);
-            var con2Quat = new three.Quaternion();
-            con2.getWorldQuaternion(con2Quat);
-            var con1QuatParent = new three.Quaternion();
-            con1.parent.getWorldQuaternion(con1QuatParent);
-            var con2QuatParent = new three.Quaternion();
-            con2.parent.getWorldQuaternion(con2QuatParent);
-            var rotation = new three.Quaternion().multiplyQuaternions(con1Quat.invert(), con2Quat).multiply(new three.Quaternion().multiplyQuaternions(con1QuatParent, con1QuatParent));
-            con2.parent.quaternion.copy(rotation);
-            // Update because the matrix has been tempered with
-            scene.updateMatrixWorld(true);
-            // Move the connectors towards eachother
-            var con1Pos = new three.Vector3();
-            con1.getWorldPosition(con1Pos);
-            var con2Pos = new three.Vector3();
-            con2.getWorldPosition(con2Pos);
-            var move = con1Pos.sub(con2Pos);
-            con2.parent.position.x += move.x;
-            con2.parent.position.y += move.y;
-            con2.parent.position.z += move.z;
-            // reset parent's objects rotation and position
-            parent.rotation.copy(motherRotation);
-            parent.position.copy(motherPosition);
-            scene.updateMatrixWorld(true);
-            // Set the connected flag
-            con1['connected'] = true;
-            con2['connected'] = true;
-            return true;
-        };
-        return SceneUtils;
+    var SceneUtils = /** @class */ (function () {
+        function SceneUtils() {
+        }
+        SceneUtils.TrySelectorConnection = function (scene, parent, part1, part2, createAddableFn) {
+            var addable;
+            if (createAddableFn) {
+                addable = part2;
+                part2 = createAddableFn(addable);
+            }
+            for (var i = 0; i < part1.children.length; i++) {
+                for (var ii = 0; ii < part2.children.length; ii++) {
+                    var con1 = part1.children[i];
+                    var con2 = part2.children[ii];
+                    // if these connectors can connect connect them
+                    if (!con1['connected'] && !con2['connected'] && this.CanSelectorConnect(con1, con2)) {
+                        // if addable, continue this loop with a new addable
+                        if (addable) {
+                            var newPart2 = createAddableFn(addable, part2, part1);
+                            // reference of part2 changed, so refresh con2
+                            this.SelectorConnect(scene, parent, con1, newPart2.children[ii]);
+                        }
+                        else {
+                            return this.SelectorConnect(scene, parent, con1, con2);
+                        }
+                    }
+                }
+            }
+            return false;
+        };
+        SceneUtils.Convert3DPointToScreenPoint = function (point, camera, width, height) {
+            if (!point) {
+                return new three.Vector2();
+            }
+            var vector = point.clone().project(camera);
+            vector.x = (vector.x + 1) / 2 * width;
+            vector.y = -(vector.y - 1) / 2 * height;
+            return new three.Vector2(vector.x, vector.y);
+        };
+        SceneUtils.CanSelectorConnect = function (con1, con2) {
+            var con1Name = con1 instanceof three.Object3D ? con1.name : con1.connector;
+            var con2Name = con2 instanceof three.Object3D ? con2.name : con2.connector;
+            var sameParent = con1 instanceof three.Object3D && con2 instanceof three.Object3D ? con1.parent === con2.parent : false;
+            var parts1 = con1Name.toUpperCase().split('_'), parts2 = con2Name.toUpperCase().split('_');
+            if (parts1.length >= 3 && parts2.length >= 3 && !sameParent) {
+                var connectable = parts1[0] === 'C' && parts2[0] === 'C' &&
+                    parts1[1] === parts2[1] && parts1[2] !== parts2[2];
+                return connectable;
+            }
+            return false;
+        };
+        SceneUtils.SelectorConnect = function (scene, parent, con1, con2) {
+            if (!scene || !parent) {
+                return false;
+            }
+            con1['connectedTo'] = con2.parent.name;
+            con2['connectedTo'] = con1.parent.name;
+            var motherRotation = new three.Euler(0, 0, 0);
+            var motherPosition = new three.Vector3(0, 0, 0);
+            scene.updateMatrixWorld(true);
+            motherRotation.copy(parent.rotation);
+            parent.getWorldPosition(motherPosition);
+            parent.rotation.set(0, 0, 0);
+            parent.position.set(0, 0, 0);
+            var con1Quat = new three.Quaternion();
+            con1.getWorldQuaternion(con1Quat);
+            var con2Quat = new three.Quaternion();
+            con2.getWorldQuaternion(con2Quat);
+            var con1QuatParent = new three.Quaternion();
+            con1.parent.getWorldQuaternion(con1QuatParent);
+            var con2QuatParent = new three.Quaternion();
+            con2.parent.getWorldQuaternion(con2QuatParent);
+            var rotation = new three.Quaternion().multiplyQuaternions(con1Quat.invert(), con2Quat).multiply(new three.Quaternion().multiplyQuaternions(con1QuatParent, con1QuatParent));
+            con2.parent.quaternion.copy(rotation);
+            // Update because the matrix has been tempered with
+            scene.updateMatrixWorld(true);
+            // Move the connectors towards eachother
+            var con1Pos = new three.Vector3();
+            con1.getWorldPosition(con1Pos);
+            var con2Pos = new three.Vector3();
+            con2.getWorldPosition(con2Pos);
+            var move = con1Pos.sub(con2Pos);
+            con2.parent.position.x += move.x;
+            con2.parent.position.y += move.y;
+            con2.parent.position.z += move.z;
+            // reset parent's objects rotation and position
+            parent.rotation.copy(motherRotation);
+            parent.position.copy(motherPosition);
+            scene.updateMatrixWorld(true);
+            // Set the connected flag
+            con1['connected'] = true;
+            con2['connected'] = true;
+            return true;
+        };
+        return SceneUtils;
     }());
 
-    var Material = /** @class */ (function () {
-        function Material() {
-            this.specular = new three.Color(0.3, 0.3, 0.3);
-            this.shininess = 0;
-            this.repeatX = 4;
-            this.repeatY = 4;
-            this.loaded = false;
-        }
-        return Material;
+    var Material = /** @class */ (function () {
+        function Material() {
+            this.specular = new three.Color(0.3, 0.3, 0.3);
+            this.shininess = 0;
+            this.repeatX = 4;
+            this.repeatY = 4;
+            this.loaded = false;
+        }
+        return Material;
     }());
 
-    // @dynamic
-    var ImageUtils = /** @class */ (function () {
-        function ImageUtils() {
-        }
-        ImageUtils.CreateTextureFromBase64 = function (id, base64, material) {
-            return new Promise(function (resolve) {
-                if (ImageUtils.textures.has(id)) {
-                    resolve(ImageUtils.textures.get(id));
-                }
-                else {
-                    if (!base64) {
-                        resolve(new three.Texture());
-                    }
-                    else {
-                        var loader = new three.TextureLoader();
-                        loader.load(base64, function (texture) {
-                            texture.anisotropy = 16;
-                            texture.wrapS = three.RepeatWrapping;
-                            texture.wrapT = three.RepeatWrapping;
-                            texture.repeat = new three.Vector2(material ? material.repeatX : 1, material ? material.repeatY : 1);
-                            texture.needsUpdate = true;
-                            ImageUtils.textures.set(id, texture);
-                            resolve(texture);
-                        });
-                    }
-                }
-            });
-        };
-        ImageUtils.getDocBodyWithMimeTypeDefinition = function (fileName, documentBody) {
-            if (documentBody === null) {
-                return documentBody;
-            }
-            var fileExtension = fileName.substr(fileName.lastIndexOf('.') + 1);
-            switch (fileExtension.toLowerCase()) {
-                case "jpg":
-                case "jpeg":
-                    return "data:image/jpg;base64," + documentBody;
-                case "png":
-                    return "data:image/png;base64," + documentBody;
-                case "gif":
-                    return "data:image/gif;base64," + documentBody;
-                case "bmp":
-                    return "data:image/bmp;base64," + documentBody;
-                default:
-                    return "data:image/png;base64," + documentBody;
-            }
-        };
-        ImageUtils.getFixedImageFilepathUrl = function (imageFilepathUrl) {
-            return imageFilepathUrl.replace("/content/", "/content43/");
-        };
-        ImageUtils.textures = new Map();
-        return ImageUtils;
+    // @dynamic
+    var ImageUtils = /** @class */ (function () {
+        function ImageUtils() {
+        }
+        ImageUtils.CreateTextureFromBase64 = function (id, base64, material) {
+            return new Promise(function (resolve) {
+                if (ImageUtils.textures.has(id)) {
+                    resolve(ImageUtils.textures.get(id));
+                }
+                else {
+                    if (!base64) {
+                        resolve(new three.Texture());
+                    }
+                    else {
+                        var loader = new three.TextureLoader();
+                        loader.load(base64, function (texture) {
+                            texture.anisotropy = 16;
+                            texture.wrapS = three.RepeatWrapping;
+                            texture.wrapT = three.RepeatWrapping;
+                            texture.repeat = new three.Vector2(material ? material.repeatX : 1, material ? material.repeatY : 1);
+                            texture.needsUpdate = true;
+                            ImageUtils.textures.set(id, texture);
+                            resolve(texture);
+                        });
+                    }
+                }
+            });
+        };
+        ImageUtils.getDocBodyWithMimeTypeDefinition = function (fileName, documentBody) {
+            if (documentBody === null) {
+                return documentBody;
+            }
+            var fileExtension = fileName.substr(fileName.lastIndexOf('.') + 1);
+            switch (fileExtension.toLowerCase()) {
+                case "jpg":
+                case "jpeg":
+                    return "data:image/jpg;base64," + documentBody;
+                case "png":
+                    return "data:image/png;base64," + documentBody;
+                case "gif":
+                    return "data:image/gif;base64," + documentBody;
+                case "bmp":
+                    return "data:image/bmp;base64," + documentBody;
+                default:
+                    return "data:image/png;base64," + documentBody;
+            }
+        };
+        ImageUtils.getFixedImageFilepathUrl = function (imageFilepathUrl) {
+            return imageFilepathUrl.replace("/content/", "/content43/");
+        };
+        ImageUtils.textures = new Map();
+        return ImageUtils;
     }());
 
-    var FurnitureMaterial = /** @class */ (function (_super) {
-        __extends(FurnitureMaterial, _super);
-        function FurnitureMaterial() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return FurnitureMaterial;
-    }(Material));
-    var AssetUtils = /** @class */ (function () {
-        function AssetUtils() {
-        }
-        AssetUtils.CreateMaterialFromAsset = function (asset) {
-            return __awaiter(this, void 0, void 0, function () {
-                var material, _a, _b, _c, _d, _e;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
-                        case 0:
-                            material = new Material();
-                            if (!asset) {
-                                return [2 /*return*/, material];
-                            }
-                            if (asset.settings) {
-                                AssetUtils.setSettingsOfMaterial(material, asset.settings);
-                            }
-                            if (!asset.texture) return [3 /*break*/, 2];
-                            _a = material;
-                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_texture', asset.texture, material)];
-                        case 1:
-                            _a.texture = _f.sent();
-                            material.texture.encoding = three.sRGBEncoding;
-                            material.textureFilename = asset.textureFilename;
-                            _f.label = 2;
-                        case 2:
-                            if (!asset.normal) return [3 /*break*/, 4];
-                            _b = material;
-                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_normal', asset.normal, material)];
-                        case 3:
-                            _b.normal = _f.sent();
-                            material.normalFilename = asset.normalFilename;
-                            _f.label = 4;
-                        case 4:
-                            if (!asset.ao) return [3 /*break*/, 6];
-                            _c = material;
-                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_ao', asset.ao, material)];
-                        case 5:
-                            _c.ao = _f.sent();
-                            material.aoFilename = asset.aoFilename;
-                            _f.label = 6;
-                        case 6:
-                            if (!asset.metalness) return [3 /*break*/, 8];
-                            _d = material;
-                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_metalness', asset.metalness, material)];
-                        case 7:
-                            _d.metalness = _f.sent();
-                            material.metalnessFilename = asset.metalnessFilename;
-                            _f.label = 8;
-                        case 8:
-                            if (!asset.roughness) return [3 /*break*/, 10];
-                            _e = material;
-                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_roughness', asset.roughness, material)];
-                        case 9:
-                            _e.roughness = _f.sent();
-                            material.roughnessFilename = asset.roughnessFilename;
-                            _f.label = 10;
-                        case 10: return [2 /*return*/, material];
-                    }
-                });
-            });
-        };
-        AssetUtils.setSettingsOfMaterial = function (material, settings) {
-            var shininess = parseFloat(settings['power']);
-            if (!isNaN(shininess)) {
-                material.shininess = shininess;
-                // material.roughness = 1 - (shininess / 100);
-            }
-            var level = parseFloat(settings['level']);
-            if (!isNaN(level)) {
-                material.specular = new three.Color(level, level, level);
-            }
-            var repeatObjectUsed = settings.hasOwnProperty('repeat');
-            var repeatx = repeatObjectUsed ? parseFloat(settings['repeat']['repeatx']) : parseFloat(settings['repeatx']);
-            if (!isNaN(repeatx)) {
-                material.repeatX = Math.max(1, repeatx);
-            }
-            var repeaty = repeatObjectUsed ? parseFloat(settings['repeat']['repeaty']) : parseFloat(settings['repeaty']);
-            if (!isNaN(repeaty)) {
-                material.repeatY = Math.max(1, repeaty);
-            }
-            var metalness = parseFloat(settings['metalness']);
-            if (!isNaN(metalness)) {
-                material.metalnessValue = Math.min(1, metalness);
-            }
-            var roughness = parseFloat(settings['roughness']);
-            if (!isNaN(roughness)) {
-                material.roughnessValue = Math.min(1, roughness);
-            }
-        };
-        return AssetUtils;
+    var FurnitureMaterial = /** @class */ (function (_super) {
+        __extends(FurnitureMaterial, _super);
+        function FurnitureMaterial() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return FurnitureMaterial;
+    }(Material));
+    var AssetUtils = /** @class */ (function () {
+        function AssetUtils() {
+        }
+        AssetUtils.CreateMaterialFromAsset = function (asset) {
+            return __awaiter(this, void 0, void 0, function () {
+                var material, _a, _b, _c, _d, _e;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
+                            material = new Material();
+                            if (!asset) {
+                                return [2 /*return*/, material];
+                            }
+                            if (asset.settings) {
+                                AssetUtils.setSettingsOfMaterial(material, asset.settings);
+                            }
+                            if (!asset.texture) return [3 /*break*/, 2];
+                            _a = material;
+                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_texture', asset.texture, material)];
+                        case 1:
+                            _a.texture = _f.sent();
+                            material.texture.encoding = three.sRGBEncoding;
+                            material.textureFilename = asset.textureFilename;
+                            _f.label = 2;
+                        case 2:
+                            if (!asset.normal) return [3 /*break*/, 4];
+                            _b = material;
+                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_normal', asset.normal, material)];
+                        case 3:
+                            _b.normal = _f.sent();
+                            material.normalFilename = asset.normalFilename;
+                            _f.label = 4;
+                        case 4:
+                            if (!asset.ao) return [3 /*break*/, 6];
+                            _c = material;
+                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_ao', asset.ao, material)];
+                        case 5:
+                            _c.ao = _f.sent();
+                            material.aoFilename = asset.aoFilename;
+                            _f.label = 6;
+                        case 6:
+                            if (!asset.metalness) return [3 /*break*/, 8];
+                            _d = material;
+                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_metalness', asset.metalness, material)];
+                        case 7:
+                            _d.metalness = _f.sent();
+                            material.metalnessFilename = asset.metalnessFilename;
+                            _f.label = 8;
+                        case 8:
+                            if (!asset.roughness) return [3 /*break*/, 10];
+                            _e = material;
+                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_roughness', asset.roughness, material)];
+                        case 9:
+                            _e.roughness = _f.sent();
+                            material.roughnessFilename = asset.roughnessFilename;
+                            _f.label = 10;
+                        case 10: return [2 /*return*/, material];
+                    }
+                });
+            });
+        };
+        AssetUtils.setSettingsOfMaterial = function (material, settings) {
+            var shininess = parseFloat(settings['power']);
+            if (!isNaN(shininess)) {
+                material.shininess = shininess;
+                // material.roughness = 1 - (shininess / 100);
+            }
+            var level = parseFloat(settings['level']);
+            if (!isNaN(level)) {
+                material.specular = new three.Color(level, level, level);
+            }
+            var repeatObjectUsed = settings.hasOwnProperty('repeat');
+            var repeatx = repeatObjectUsed ? parseFloat(settings['repeat']['repeatx']) : parseFloat(settings['repeatx']);
+            if (!isNaN(repeatx)) {
+                material.repeatX = Math.max(1, repeatx);
+            }
+            var repeaty = repeatObjectUsed ? parseFloat(settings['repeat']['repeaty']) : parseFloat(settings['repeaty']);
+            if (!isNaN(repeaty)) {
+                material.repeatY = Math.max(1, repeaty);
+            }
+            var metalness = parseFloat(settings['metalness']);
+            if (!isNaN(metalness)) {
+                material.metalnessValue = Math.min(1, metalness);
+            }
+            var roughness = parseFloat(settings['roughness']);
+            if (!isNaN(roughness)) {
+                material.roughnessValue = Math.min(1, roughness);
+            }
+        };
+        return AssetUtils;
     }());
 
-    var Variation = /** @class */ (function () {
-        function Variation() {
-        }
-        return Variation;
+    var Variation = /** @class */ (function () {
+        function Variation() {
+        }
+        return Variation;
     }());
 
-    var VariationSettings = /** @class */ (function () {
-        function VariationSettings() {
-            this.settings = {};
-        }
-        return VariationSettings;
+    var VariationSettings = /** @class */ (function () {
+        function VariationSettings() {
+            this.settings = {};
+        }
+        return VariationSettings;
     }());
 
-    // @dynamic
-    var VariationUtils = /** @class */ (function () {
-        function VariationUtils() {
-        }
-        VariationUtils.LoadVariation = function (assetPath, fileName) {
-            return __awaiter(this, void 0, void 0, function () {
-                var id, file, err_1, mute;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!fileName) {
-                                return [2 /*return*/, null];
-                            }
-                            if (fileName.indexOf('ione3d') < 0) {
-                                fileName = fileName.concat('.ione3d');
-                            }
-                            id = fileName.substr(0, fileName.lastIndexOf('.ione3d'));
-                            _a.label = 1;
-                        case 1:
-                            _a.trys.push([1, 4, , 5]);
-                            if (!assetPath.endsWith('/')) {
-                                assetPath += '/';
-                            }
-                            if (!window.hasOwnProperty('downloadVariation')) {
-                                console.error('downloadVariation not defined in window global');
-                                return [2 /*return*/, null];
-                            }
-                            return [4 /*yield*/, window.downloadVariation(assetPath.replace('https://cdn1.colijn-it.nl/', '') + "variation/" + fileName)];
-                        case 2:
-                            file = _a.sent();
-                            return [4 /*yield*/, VariationUtils.GetVariationSettingsFromFile(id, file)];
-                        case 3: return [2 /*return*/, _a.sent()];
-                        case 4:
-                            err_1 = _a.sent();
-                            mute = err_1;
-                            return [2 /*return*/, null];
-                        case 5: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        // public static GetMaterialFromName(variationFolder: string, material: any): Promise<MeshStandardMaterial> {
-        //   return new Promise((resolve: Function) => {
-        //     if (!material) {
-        //       resolve(null);
-        //     }
-        //     if (this.MaterialCache.has(material.name)) {
-        //       resolve(this.MaterialCache.get(material.name).clone());
-        //     } else {
-        //       VariationUtils.LoadVariation(variationFolder, material.name, false).then((settings: VariationSettings) => {
-        //         if (settings) {
-        //           AssetUtils.CreateMaterialFromAsset(settings).then((materialObj: Material) => {
-        //             const materialParams: MeshStandardMaterialParameters = {};
-        //             materialParams.name = material.name;
-        //             materialParams.map = materialObj.texture;
-        //             materialParams.normalMap = materialObj.normal;
-        //             materialParams.aoMap = materialObj.ao;
-        //             materialParams.roughnessMap = materialObj.roughness;
-        //             materialParams.metalnessMap = materialObj.metalness;
-        //             materialParams.roughness = 1;
-        //             materialParams.metalness = 1;
-        //             const pbrMat: MeshStandardMaterial = new MeshStandardMaterial(materialParams);
-        //             this.MaterialCache.set(material.name, pbrMat);
-        //             resolve(pbrMat.clone());
-        //           });
-        //         } else {
-        //           resolve(material);
-        //         }
-        //       });
-        //     }
-        //   });
-        // }
-        VariationUtils.GetVariationSettingsFromFile = function (id, compressedFile) {
-            return __awaiter(this, void 0, void 0, function () {
-                var zipContent, variationSettings, index, indexFile;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!compressedFile) {
-                                return [2 /*return*/, null];
-                            }
-                            return [4 /*yield*/, VariationUtils.GetZipContent(compressedFile)];
-                        case 1:
-                            zipContent = _a.sent();
-                            variationSettings = new VariationSettings();
-                            variationSettings.id = id;
-                            if (!zipContent.files['index.json']) return [3 /*break*/, 3];
-                            return [4 /*yield*/, zipContent.files['index.json'].async('string')];
-                        case 2:
-                            indexFile = _a.sent();
-                            index = JSON.parse(indexFile);
-                            _a.label = 3;
-                        case 3:
-                            if (!index) return [3 /*break*/, 5];
-                            return [4 /*yield*/, VariationUtils.CreateSettingsBasedOnIndex(index, variationSettings, zipContent)];
-                        case 4:
-                            _a.sent();
-                            return [3 /*break*/, 7];
-                        case 5: return [4 /*yield*/, VariationUtils.CreateSettingsBasedOnFileName(variationSettings, zipContent)];
-                        case 6:
-                            _a.sent();
-                            _a.label = 7;
-                        case 7: return [2 /*return*/, variationSettings];
-                    }
-                });
-            });
-        };
-        VariationUtils.CreateSettingsBasedOnIndex = function (index, variationSettings, zipContent) {
-            return __awaiter(this, void 0, void 0, function () {
-                var _a, _b, _c, _d, _e, _f;
-                return __generator(this, function (_g) {
-                    switch (_g.label) {
-                        case 0:
-                            if (!index.normalFile) return [3 /*break*/, 2];
-                            _a = variationSettings;
-                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.normalFile], index.normalFile)];
-                        case 1:
-                            _a.normal = _g.sent();
-                            variationSettings.normalFilename = index.normalFile;
-                            _g.label = 2;
-                        case 2:
-                            if (!index.aoFile) return [3 /*break*/, 4];
-                            _b = variationSettings;
-                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.aoFile], index.aoFile)];
-                        case 3:
-                            _b.ao = _g.sent();
-                            variationSettings.aoFilename = index.aoFile;
-                            _g.label = 4;
-                        case 4:
-                            if (!index.metalnessFile) return [3 /*break*/, 6];
-                            _c = variationSettings;
-                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.metalnessFile], index.metalnessFile)];
-                        case 5:
-                            _c.metalness = _g.sent();
-                            variationSettings.metalnessFilename = index.metalnessFile;
-                            _g.label = 6;
-                        case 6:
-                            if (!index.roughnessFile) return [3 /*break*/, 8];
-                            _d = variationSettings;
-                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.roughnessFile], index.roughnessFile)];
-                        case 7:
-                            _d.roughness = _g.sent();
-                            variationSettings.roughnessFilename = index.roughnessFile;
-                            _g.label = 8;
-                        case 8:
-                            if (!index.diffuseFile) return [3 /*break*/, 10];
-                            _e = variationSettings;
-                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.diffuseFile], index.diffuseFile)];
-                        case 9:
-                            _e.texture = _g.sent();
-                            variationSettings.textureFilename = index.diffuseFile;
-                            _g.label = 10;
-                        case 10:
-                            _f = variationSettings;
-                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files['repeat.json'], 'repeat.json', false)];
-                        case 11:
-                            _f.settings =
-                                (_g.sent()) || {};
-                            Object.assign(variationSettings.settings, index.repeat);
-                            variationSettings.settings.metalness = index.metalness;
-                            variationSettings.settings.roughness = index.roughness;
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        VariationUtils.CreateSettingsBasedOnFileName = function (variationSettings, zipContent) {
-            return __awaiter(this, void 0, void 0, function () {
-                var allLoaded, _loop_1, this_1, _a, _b, _i, fileName;
-                var _this = this;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0:
-                            allLoaded = [];
-                            _loop_1 = function (fileName) {
-                                var file_1;
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
-                                        case 0:
-                                            if (!zipContent.files[fileName]) return [3 /*break*/, 2];
-                                            return [4 /*yield*/, zipContent.files[fileName]];
-                                        case 1:
-                                            file_1 = _a.sent();
-                                            if (file_1.name.toLowerCase().indexOf('normal') > -1 && this_1.FileIsImage(file_1.name)) {
-                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (normalFile) {
-                                                    variationSettings.normal = "data:image/" + _this.GetBase64FileType(file_1.name) + ";base64," + normalFile;
-                                                    variationSettings.normalFilename = fileName;
-                                                }));
-                                            }
-                                            else if (file_1.name.toLowerCase().indexOf('ao') > -1 && this_1.FileIsImage(file_1.name)) {
-                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (aoFile) {
-                                                    variationSettings.ao = "data:image/" + _this.GetBase64FileType(file_1.name) + ";base64," + aoFile;
-                                                    variationSettings.aoFilename = fileName;
-                                                }));
-                                            }
-                                            else if (file_1.name.toLowerCase().indexOf('metalness') > -1 && this_1.FileIsImage(file_1.name)) {
-                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (metalnessFile) {
-                                                    variationSettings.metalness = "data:image/" + _this.GetBase64FileType(file_1.name) + ";base64," + metalnessFile;
-                                                    variationSettings.metalnessFilename = fileName;
-                                                }));
-                                            }
-                                            else if (file_1.name.toLowerCase().indexOf('roughness') > -1 && this_1.FileIsImage(file_1.name)) {
-                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (roughnessFile) {
-                                                    variationSettings.roughness = "data:image/" + _this.GetBase64FileType(file_1.name) + ";base64," + roughnessFile;
-                                                    variationSettings.roughnessFilename = fileName;
-                                                }));
-                                            }
-                                            else if (file_1.name.toLowerCase().indexOf('diffuse') > -1 && this_1.FileIsImage(file_1.name)) {
-                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (diffuseFile) {
-                                                    variationSettings.texture = "data:image/" + _this.GetBase64FileType(file_1.name) + ";base64," + diffuseFile;
-                                                    variationSettings.textureFilename = fileName;
-                                                }));
-                                            }
-                                            else if (file_1.name.indexOf('.jp') > -1) {
-                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (textureFile) {
-                                                    variationSettings.texture = 'data:image/jpeg;base64,' + textureFile;
-                                                    variationSettings.textureFilename = fileName;
-                                                }));
-                                            }
-                                            else if (file_1.name.indexOf('.json') > -1) {
-                                                allLoaded.push(zipContent.files[fileName].async('string').then(function (settingsFile) {
-                                                    var settingsFileObj = JSON.parse(settingsFile);
-                                                    for (var key in settingsFileObj) {
-                                                        if (settingsFileObj[key]) {
-                                                            variationSettings.settings[key] = settingsFileObj[key];
-                                                        }
-                                                    }
-                                                }));
-                                            }
-                                            _a.label = 2;
-                                        case 2: return [2 /*return*/];
-                                    }
-                                });
-                            };
-                            this_1 = this;
-                            _a = [];
-                            for (_b in zipContent.files)
-                                _a.push(_b);
-                            _i = 0;
-                            _c.label = 1;
-                        case 1:
-                            if (!(_i < _a.length)) return [3 /*break*/, 4];
-                            fileName = _a[_i];
-                            return [5 /*yield**/, _loop_1(fileName)];
-                        case 2:
-                            _c.sent();
-                            _c.label = 3;
-                        case 3:
-                            _i++;
-                            return [3 /*break*/, 1];
-                        case 4: return [4 /*yield*/, Promise.all(allLoaded)];
-                        case 5:
-                            _c.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        VariationUtils.LoadFileContentFromZip = function (zip, fileName, base64) {
-            var _this = this;
-            if (base64 === void 0) { base64 = true; }
-            return new Promise(function (resolve) {
-                if (zip && fileName) {
-                    zip.async(base64 ? 'base64' : 'string').then(function (fileContent) {
-                        if (base64) {
-                            resolve("data:image/" + _this.GetBase64FileType(fileName) + ";base64," + fileContent);
-                        }
-                        else {
-                            resolve(fileContent);
-                        }
-                    });
-                }
-                else {
-                    resolve(undefined);
-                }
-            });
-        };
-        VariationUtils.FileIsImage = function (fileName) {
-            var ext = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase();
-            switch (ext) {
-                case 'jpg':
-                case 'jpeg':
-                case 'png':
-                case 'bmp':
-                    return true;
-                default:
-                    return false;
-            }
-        };
-        VariationUtils.GetBase64FileType = function (fileName) {
-            var ext = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase();
-            switch (ext) {
-                case 'jpg':
-                case 'jpeg':
-                    return 'jpeg';
-                case 'png':
-                    return 'png';
-                case 'bmp':
-                    return 'bmp';
-                default:
-                    return 'jpeg';
-            }
-        };
-        // Get the content
-        VariationUtils.GetZipContent = function (file) {
-            return __awaiter(this, void 0, void 0, function () {
-                var jszip, content;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            jszip = new JSZip();
-                            return [4 /*yield*/, jszip.loadAsync(file)];
-                        case 1:
-                            content = _a.sent();
-                            return [2 /*return*/, content];
-                    }
-                });
-            });
-        };
-        VariationUtils.MaterialCache = new Map();
-        return VariationUtils;
+    // @dynamic
+    var VariationUtils = /** @class */ (function () {
+        function VariationUtils() {
+        }
+        VariationUtils.LoadVariation = function (assetPath, fileName) {
+            return __awaiter(this, void 0, void 0, function () {
+                var id, file, err_1, mute;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!fileName) {
+                                return [2 /*return*/, null];
+                            }
+                            if (fileName.indexOf('ione3d') < 0) {
+                                fileName = fileName.concat('.ione3d');
+                            }
+                            id = fileName.substr(0, fileName.lastIndexOf('.ione3d'));
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 4, , 5]);
+                            if (!assetPath.endsWith('/')) {
+                                assetPath += '/';
+                            }
+                            if (!window.hasOwnProperty('downloadVariation')) {
+                                console.error('downloadVariation not defined in window global');
+                                return [2 /*return*/, null];
+                            }
+                            return [4 /*yield*/, window.downloadVariation(assetPath.replace('https://cdn1.colijn-it.nl/', '') + "variation/" + fileName)];
+                        case 2:
+                            file = _a.sent();
+                            return [4 /*yield*/, VariationUtils.GetVariationSettingsFromFile(id, file)];
+                        case 3: return [2 /*return*/, _a.sent()];
+                        case 4:
+                            err_1 = _a.sent();
+                            mute = err_1;
+                            return [2 /*return*/, null];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        // public static GetMaterialFromName(variationFolder: string, material: any): Promise<MeshStandardMaterial> {
+        //   return new Promise((resolve: Function) => {
+        //     if (!material) {
+        //       resolve(null);
+        //     }
+        //     if (this.MaterialCache.has(material.name)) {
+        //       resolve(this.MaterialCache.get(material.name).clone());
+        //     } else {
+        //       VariationUtils.LoadVariation(variationFolder, material.name, false).then((settings: VariationSettings) => {
+        //         if (settings) {
+        //           AssetUtils.CreateMaterialFromAsset(settings).then((materialObj: Material) => {
+        //             const materialParams: MeshStandardMaterialParameters = {};
+        //             materialParams.name = material.name;
+        //             materialParams.map = materialObj.texture;
+        //             materialParams.normalMap = materialObj.normal;
+        //             materialParams.aoMap = materialObj.ao;
+        //             materialParams.roughnessMap = materialObj.roughness;
+        //             materialParams.metalnessMap = materialObj.metalness;
+        //             materialParams.roughness = 1;
+        //             materialParams.metalness = 1;
+        //             const pbrMat: MeshStandardMaterial = new MeshStandardMaterial(materialParams);
+        //             this.MaterialCache.set(material.name, pbrMat);
+        //             resolve(pbrMat.clone());
+        //           });
+        //         } else {
+        //           resolve(material);
+        //         }
+        //       });
+        //     }
+        //   });
+        // }
+        VariationUtils.GetVariationSettingsFromFile = function (id, compressedFile) {
+            return __awaiter(this, void 0, void 0, function () {
+                var zipContent, variationSettings, index, indexFile;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!compressedFile) {
+                                return [2 /*return*/, null];
+                            }
+                            return [4 /*yield*/, VariationUtils.GetZipContent(compressedFile)];
+                        case 1:
+                            zipContent = _a.sent();
+                            variationSettings = new VariationSettings();
+                            variationSettings.id = id;
+                            if (!zipContent.files['index.json']) return [3 /*break*/, 3];
+                            return [4 /*yield*/, zipContent.files['index.json'].async('string')];
+                        case 2:
+                            indexFile = _a.sent();
+                            index = JSON.parse(indexFile);
+                            _a.label = 3;
+                        case 3:
+                            if (!index) return [3 /*break*/, 5];
+                            return [4 /*yield*/, VariationUtils.CreateSettingsBasedOnIndex(index, variationSettings, zipContent)];
+                        case 4:
+                            _a.sent();
+                            return [3 /*break*/, 7];
+                        case 5: return [4 /*yield*/, VariationUtils.CreateSettingsBasedOnFileName(variationSettings, zipContent)];
+                        case 6:
+                            _a.sent();
+                            _a.label = 7;
+                        case 7: return [2 /*return*/, variationSettings];
+                    }
+                });
+            });
+        };
+        VariationUtils.CreateSettingsBasedOnIndex = function (index, variationSettings, zipContent) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a, _b, _c, _d, _e, _f;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
+                        case 0:
+                            if (!index.normalFile) return [3 /*break*/, 2];
+                            _a = variationSettings;
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.normalFile], index.normalFile)];
+                        case 1:
+                            _a.normal = _g.sent();
+                            variationSettings.normalFilename = index.normalFile;
+                            _g.label = 2;
+                        case 2:
+                            if (!index.aoFile) return [3 /*break*/, 4];
+                            _b = variationSettings;
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.aoFile], index.aoFile)];
+                        case 3:
+                            _b.ao = _g.sent();
+                            variationSettings.aoFilename = index.aoFile;
+                            _g.label = 4;
+                        case 4:
+                            if (!index.metalnessFile) return [3 /*break*/, 6];
+                            _c = variationSettings;
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.metalnessFile], index.metalnessFile)];
+                        case 5:
+                            _c.metalness = _g.sent();
+                            variationSettings.metalnessFilename = index.metalnessFile;
+                            _g.label = 6;
+                        case 6:
+                            if (!index.roughnessFile) return [3 /*break*/, 8];
+                            _d = variationSettings;
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.roughnessFile], index.roughnessFile)];
+                        case 7:
+                            _d.roughness = _g.sent();
+                            variationSettings.roughnessFilename = index.roughnessFile;
+                            _g.label = 8;
+                        case 8:
+                            if (!index.diffuseFile) return [3 /*break*/, 10];
+                            _e = variationSettings;
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.diffuseFile], index.diffuseFile)];
+                        case 9:
+                            _e.texture = _g.sent();
+                            variationSettings.textureFilename = index.diffuseFile;
+                            _g.label = 10;
+                        case 10:
+                            _f = variationSettings;
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files['repeat.json'], 'repeat.json', false)];
+                        case 11:
+                            _f.settings =
+                                (_g.sent()) || {};
+                            Object.assign(variationSettings.settings, index.repeat);
+                            variationSettings.settings.metalness = index.metalness;
+                            variationSettings.settings.roughness = index.roughness;
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        VariationUtils.CreateSettingsBasedOnFileName = function (variationSettings, zipContent) {
+            return __awaiter(this, void 0, void 0, function () {
+                var allLoaded, _loop_1, this_1, _a, _b, _i, fileName;
+                var _this = this;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            allLoaded = [];
+                            _loop_1 = function (fileName) {
+                                var file_1;
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            if (!zipContent.files[fileName]) return [3 /*break*/, 2];
+                                            return [4 /*yield*/, zipContent.files[fileName]];
+                                        case 1:
+                                            file_1 = _a.sent();
+                                            if (file_1.name.toLowerCase().indexOf('normal') > -1 && this_1.FileIsImage(file_1.name)) {
+                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (normalFile) {
+                                                    variationSettings.normal = "data:image/" + _this.GetBase64FileType(file_1.name) + ";base64," + normalFile;
+                                                    variationSettings.normalFilename = fileName;
+                                                }));
+                                            }
+                                            else if (file_1.name.toLowerCase().indexOf('ao') > -1 && this_1.FileIsImage(file_1.name)) {
+                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (aoFile) {
+                                                    variationSettings.ao = "data:image/" + _this.GetBase64FileType(file_1.name) + ";base64," + aoFile;
+                                                    variationSettings.aoFilename = fileName;
+                                                }));
+                                            }
+                                            else if (file_1.name.toLowerCase().indexOf('metalness') > -1 && this_1.FileIsImage(file_1.name)) {
+                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (metalnessFile) {
+                                                    variationSettings.metalness = "data:image/" + _this.GetBase64FileType(file_1.name) + ";base64," + metalnessFile;
+                                                    variationSettings.metalnessFilename = fileName;
+                                                }));
+                                            }
+                                            else if (file_1.name.toLowerCase().indexOf('roughness') > -1 && this_1.FileIsImage(file_1.name)) {
+                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (roughnessFile) {
+                                                    variationSettings.roughness = "data:image/" + _this.GetBase64FileType(file_1.name) + ";base64," + roughnessFile;
+                                                    variationSettings.roughnessFilename = fileName;
+                                                }));
+                                            }
+                                            else if (file_1.name.toLowerCase().indexOf('diffuse') > -1 && this_1.FileIsImage(file_1.name)) {
+                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (diffuseFile) {
+                                                    variationSettings.texture = "data:image/" + _this.GetBase64FileType(file_1.name) + ";base64," + diffuseFile;
+                                                    variationSettings.textureFilename = fileName;
+                                                }));
+                                            }
+                                            else if (file_1.name.indexOf('.jp') > -1) {
+                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (textureFile) {
+                                                    variationSettings.texture = 'data:image/jpeg;base64,' + textureFile;
+                                                    variationSettings.textureFilename = fileName;
+                                                }));
+                                            }
+                                            else if (file_1.name.indexOf('.json') > -1) {
+                                                allLoaded.push(zipContent.files[fileName].async('string').then(function (settingsFile) {
+                                                    var settingsFileObj = JSON.parse(settingsFile);
+                                                    for (var key in settingsFileObj) {
+                                                        if (settingsFileObj[key]) {
+                                                            variationSettings.settings[key] = settingsFileObj[key];
+                                                        }
+                                                    }
+                                                }));
+                                            }
+                                            _a.label = 2;
+                                        case 2: return [2 /*return*/];
+                                    }
+                                });
+                            };
+                            this_1 = this;
+                            _a = [];
+                            for (_b in zipContent.files)
+                                _a.push(_b);
+                            _i = 0;
+                            _c.label = 1;
+                        case 1:
+                            if (!(_i < _a.length)) return [3 /*break*/, 4];
+                            fileName = _a[_i];
+                            return [5 /*yield**/, _loop_1(fileName)];
+                        case 2:
+                            _c.sent();
+                            _c.label = 3;
+                        case 3:
+                            _i++;
+                            return [3 /*break*/, 1];
+                        case 4: return [4 /*yield*/, Promise.all(allLoaded)];
+                        case 5:
+                            _c.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        VariationUtils.LoadFileContentFromZip = function (zip, fileName, base64) {
+            var _this = this;
+            if (base64 === void 0) { base64 = true; }
+            return new Promise(function (resolve) {
+                if (zip && fileName) {
+                    zip.async(base64 ? 'base64' : 'string').then(function (fileContent) {
+                        if (base64) {
+                            resolve("data:image/" + _this.GetBase64FileType(fileName) + ";base64," + fileContent);
+                        }
+                        else {
+                            resolve(fileContent);
+                        }
+                    });
+                }
+                else {
+                    resolve(undefined);
+                }
+            });
+        };
+        VariationUtils.FileIsImage = function (fileName) {
+            var ext = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase();
+            switch (ext) {
+                case 'jpg':
+                case 'jpeg':
+                case 'png':
+                case 'bmp':
+                    return true;
+                default:
+                    return false;
+            }
+        };
+        VariationUtils.GetBase64FileType = function (fileName) {
+            var ext = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase();
+            switch (ext) {
+                case 'jpg':
+                case 'jpeg':
+                    return 'jpeg';
+                case 'png':
+                    return 'png';
+                case 'bmp':
+                    return 'bmp';
+                default:
+                    return 'jpeg';
+            }
+        };
+        // Get the content
+        VariationUtils.GetZipContent = function (file) {
+            return __awaiter(this, void 0, void 0, function () {
+                var jszip, content;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            jszip = new JSZip();
+                            return [4 /*yield*/, jszip.loadAsync(file)];
+                        case 1:
+                            content = _a.sent();
+                            return [2 /*return*/, content];
+                    }
+                });
+            });
+        };
+        VariationUtils.MaterialCache = new Map();
+        return VariationUtils;
     }());
 
-    var VariationHelper = /** @class */ (function () {
-        function VariationHelper() {
-            this._lastKnownVariations = new Map();
-        }
-        VariationHelper.prototype.clearCache = function () {
-            var valueMap = Array.from(this._lastKnownVariations.values());
-            for (var i = 0; i < valueMap.length; i++) {
-                var values = Array.from(valueMap[i].values());
-                values.forEach(function (variations) {
-                    variations.forEach(function (variation) {
-                        variation.material.texture.dispose();
-                        variation.material.normal.dispose();
-                        variation.material.metalness.dispose();
-                        variation.material.roughness.dispose();
-                        variation.material.ao.dispose();
-                    });
-                });
-            }
-        };
-        VariationHelper.prototype.loadPart = function (obj, parts, usePbr) {
-            if (usePbr === void 0) { usePbr = false; }
-            return __awaiter(this, void 0, void 0, function () {
-                var len, i, partSettings, partVariation, _a, e_1;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            _b.trys.push([0, 6, , 7]);
-                            len = parts.length;
-                            i = 0;
-                            _b.label = 1;
-                        case 1:
-                            if (!(i < len)) return [3 /*break*/, 5];
-                            if (!(parts[i].decoNode && parts[i].decoNode.gameObjectName && parts[i].decoNode.type === decoNodeType_enum.DecoNodeType.Part)) return [3 /*break*/, 4];
-                            return [4 /*yield*/, VariationUtils.LoadVariation(this.assetPath, parts[i].decoNode.gameObjectName || parts[i].decoId)];
-                        case 2:
-                            partSettings = _b.sent();
-                            if (!partSettings) return [3 /*break*/, 4];
-                            partVariation = new Variation();
-                            partVariation.decoId = parseFloat(parts[i].decoNode.id);
-                            partVariation.brandId = parts[i].decoNode.brandId;
-                            partVariation.gameObjectName = parts[i].decoNode.gameObjectName;
-                            _a = partVariation;
-                            return [4 /*yield*/, AssetUtils.CreateMaterialFromAsset(partSettings)];
-                        case 3:
-                            _a.material = _b.sent();
-                            // parts[i].variation = partVariation;
-                            this._applyMaterialPart(obj, partVariation, parts[i].node, usePbr);
-                            _b.label = 4;
-                        case 4:
-                            i++;
-                            return [3 /*break*/, 1];
-                        case 5: return [3 /*break*/, 7];
-                        case 6:
-                            e_1 = _b.sent();
-                            console.error(e_1);
-                            return [3 /*break*/, 7];
-                        case 7: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        VariationHelper.prototype.loadVariation = function (instanceId, obj, parts, usePbr) {
-            if (usePbr === void 0) { usePbr = false; }
-            return __awaiter(this, void 0, void 0, function () {
-                var len, i, variations, lastKnownVariations, j, variationSettings, newVariation, _a, e_2;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            _b.trys.push([0, 9, , 10]);
-                            len = parts.length;
-                            i = 0;
-                            _b.label = 1;
-                        case 1:
-                            if (!(i < len)) return [3 /*break*/, 8];
-                            variations = parts[i].variations;
-                            if (!variations || variations.length === 0) {
-                                if (this._getLastKnownVariations(instanceId, parts[i].nodeId)) {
-                                    parts[i].variations = this._getLastKnownVariations(instanceId, parts[i].nodeId);
-                                    this._applyVariations(obj, parts[i], usePbr);
-                                    return [3 /*break*/, 7];
-                                }
-                                else {
-                                    return [3 /*break*/, 7];
-                                }
-                            }
-                            lastKnownVariations = [];
-                            j = 0;
-                            _b.label = 2;
-                        case 2:
-                            if (!(j < variations.length)) return [3 /*break*/, 6];
-                            return [4 /*yield*/, VariationUtils.LoadVariation(this.assetPath, variations[j].gameObjectName || parts[i].decoId)];
-                        case 3:
-                            variationSettings = _b.sent();
-                            newVariation = new Variation();
-                            newVariation.decoId = parseFloat(variations[j].id);
-                            newVariation.brandId = variations[j].brandId;
-                            newVariation.gameObjectName = variations[j].gameObjectName;
-                            newVariation.supplierArticleNr = variations[j].supplierArticleNr;
-                            newVariation.materialId = variations[j].materialId;
-                            _a = newVariation;
-                            return [4 /*yield*/, AssetUtils.CreateMaterialFromAsset(variationSettings)];
-                        case 4:
-                            _a.material = _b.sent();
-                            lastKnownVariations.push(newVariation);
-                            _b.label = 5;
-                        case 5:
-                            j++;
-                            return [3 /*break*/, 2];
-                        case 6:
-                            this._setLastKnownVariations(instanceId, parts[i].nodeId, lastKnownVariations);
-                            parts[i].variations = lastKnownVariations;
-                            this._applyVariations(obj, parts[i], usePbr);
-                            _b.label = 7;
-                        case 7:
-                            i++;
-                            return [3 /*break*/, 1];
-                        case 8: return [3 /*break*/, 10];
-                        case 9:
-                            e_2 = _b.sent();
-                            console.error(e_2);
-                            return [3 /*break*/, 10];
-                        case 10: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        VariationHelper.prototype._getChildrenFilterByProp = function (obj, userDataObjectProp, prop, value) {
-            return obj.children.filter(function (child) {
-                return child.userData &&
-                    child.userData.hasOwnProperty(userDataObjectProp) &&
-                    child.userData[userDataObjectProp].hasOwnProperty(prop) &&
-                    child.userData[userDataObjectProp][prop] === value;
-            });
-        };
-        VariationHelper.prototype._applyMaterialPart = function (obj, partMaterial, nodeId, usePbr) {
-            var _this = this;
-            if (usePbr === void 0) { usePbr = false; }
-            var children = this._getChildrenFilterByProp(obj, 'selection', 'node', nodeId);
-            var len = children.length;
-            for (var i = 0; i < len; i++) {
-                var child = children[i];
-                if (child !== null && child !== undefined) {
-                    child.traverse(function (mesh) {
-                        if (mesh instanceof three.Mesh && partMaterial) {
-                            if (Array.isArray(mesh.material)) { // multimaterial support
-                                for (var j = 0, jlen = mesh.material.length; j < jlen; j++) {
-                                    if (mesh.material[j].name.toLowerCase().indexOf('fixed_frame') !== -1) {
-                                        mesh.material[j] = _this._setMeshMaterialFromVariation(mesh.material[j].name, partMaterial, usePbr);
-                                    }
-                                }
-                            }
-                            else {
-                                if (mesh.material.name.toLowerCase().indexOf('fixed_frame') !== -1) {
-                                    mesh.material = _this._setMeshMaterialFromVariation(mesh.material.name, partMaterial, usePbr);
-                                }
-                            }
-                        }
-                    });
-                }
-            }
-        };
-        VariationHelper.prototype._applyVariations = function (obj, part, usePbr) {
-            var _this = this;
-            if (usePbr === void 0) { usePbr = false; }
-            var children = this._getChildrenFilterByProp(obj, 'selection', 'node', part.node);
-            var len = children.length;
-            for (var i = 0; i < len; i++) {
-                var child = children[i];
-                if (child !== null && child !== undefined) {
-                    child.traverse(function (mesh) {
-                        if (mesh instanceof three.Mesh && part.variations && part.variations.length > 0 && mesh.name.toLowerCase().indexOf('c_')) {
-                            for (var j = 0; j < part.variations.length; j++) {
-                                var variation = part.variations[j];
-                                if (variation.material) {
-                                    var materialToSearch = !!variation.materialId ? variation.materialId.toLowerCase() : 'default';
-                                    if (Array.isArray(mesh.material)) { // multimaterial support
-                                        for (var m = 0, mlen = mesh.material.length; m < mlen; m++) {
-                                            if (mesh.material[m].name.toLowerCase().indexOf(materialToSearch) !== -1) {
-                                                mesh.material[m] = _this._setMeshMaterialFromVariation(mesh.material[m].name, variation, usePbr);
-                                            }
-                                        }
-                                    }
-                                    else {
-                                        if (mesh.material.name.toLowerCase().indexOf(materialToSearch) !== -1) {
-                                            mesh.material = _this._setMeshMaterialFromVariation(mesh.material.name, variation, usePbr);
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    });
-                }
-            }
-        };
-        VariationHelper.prototype._setMeshMaterialFromVariation = function (name, variation, usePbr) {
-            if (usePbr === void 0) { usePbr = false; }
-            if (variation.material.texture) {
-                variation.material.texture.needsUpdate = true;
-            }
-            if (!usePbr) {
-                var material = new three.MeshPhongMaterial({
-                    name: name,
-                    shininess: variation.material.shininess,
-                    specular: variation.material.specular,
-                    map: variation.material.texture,
-                    normalMap: variation.material.normal
-                });
-                // material.color.setRGB(0.8, 0.8, 0.8);
-                material.needsUpdate = true;
-                return material;
-            }
-            else {
-                var params = {
-                    // side: DoubleSide,
-                    name: name,
-                    roughness: variation.material.roughnessValue ? variation.material.roughnessValue : 1,
-                    metalness: variation.material.metalnessValue ? variation.material.metalnessValue : 0,
-                };
-                if (variation.material.texture) {
-                    params.map = variation.material.texture;
-                }
-                if (variation.material.ao) {
-                    params.aoMap = variation.material.ao;
-                }
-                if (variation.material.roughness) {
-                    params.roughnessMap = variation.material.roughness;
-                }
-                if (variation.material.metalness) {
-                    params.metalnessMap = variation.material.metalness;
-                }
-                if (variation.material.normal) {
-                    params.normalMap = variation.material.normal;
-                }
-                var material = new three.MeshStandardMaterial(params);
-                material.color.setRGB(1, 1, 1);
-                material.needsUpdate = true;
-                return material;
-            }
-        };
-        VariationHelper.prototype._setLastKnownVariations = function (instanceId, id, variation) {
-            if (this._lastKnownVariations.has(instanceId)) {
-                var variations = this._lastKnownVariations.get(instanceId);
-                variations.set(id, variation);
-            }
-            else {
-                var variations = new Map();
-                this._lastKnownVariations.set(instanceId, variations.set(id, variation));
-            }
-        };
-        VariationHelper.prototype._getLastKnownVariations = function (instanceId, id) {
-            if (this._lastKnownVariations.has(instanceId)) {
-                var variations = this._lastKnownVariations.get(instanceId);
-                if (variations.has(id)) {
-                    return variations.get(id);
-                }
-            }
-            return null;
-        };
-        return VariationHelper;
+    var VariationHelper = /** @class */ (function () {
+        function VariationHelper() {
+            this._lastKnownVariations = new Map();
+        }
+        VariationHelper.prototype.clearCache = function () {
+            var valueMap = Array.from(this._lastKnownVariations.values());
+            for (var i = 0; i < valueMap.length; i++) {
+                var values = Array.from(valueMap[i].values());
+                values.forEach(function (variations) {
+                    variations.forEach(function (variation) {
+                        variation.material.texture.dispose();
+                        variation.material.normal.dispose();
+                        variation.material.metalness.dispose();
+                        variation.material.roughness.dispose();
+                        variation.material.ao.dispose();
+                    });
+                });
+            }
+        };
+        VariationHelper.prototype.loadPart = function (obj, parts, usePbr) {
+            if (usePbr === void 0) { usePbr = false; }
+            return __awaiter(this, void 0, void 0, function () {
+                var len, i, partSettings, partVariation, _a, e_1;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _b.trys.push([0, 6, , 7]);
+                            len = parts.length;
+                            i = 0;
+                            _b.label = 1;
+                        case 1:
+                            if (!(i < len)) return [3 /*break*/, 5];
+                            if (!(parts[i].decoNode && parts[i].decoNode.gameObjectName && parts[i].decoNode.type === decoNodeType_enum.DecoNodeType.Part)) return [3 /*break*/, 4];
+                            return [4 /*yield*/, VariationUtils.LoadVariation(this.assetPath, parts[i].decoNode.gameObjectName || parts[i].decoId)];
+                        case 2:
+                            partSettings = _b.sent();
+                            if (!partSettings) return [3 /*break*/, 4];
+                            partVariation = new Variation();
+                            partVariation.decoId = parseFloat(parts[i].decoNode.id);
+                            partVariation.brandId = parts[i].decoNode.brandId;
+                            partVariation.gameObjectName = parts[i].decoNode.gameObjectName;
+                            _a = partVariation;
+                            return [4 /*yield*/, AssetUtils.CreateMaterialFromAsset(partSettings)];
+                        case 3:
+                            _a.material = _b.sent();
+                            // parts[i].variation = partVariation;
+                            this._applyMaterialPart(obj, partVariation, parts[i].node, usePbr);
+                            _b.label = 4;
+                        case 4:
+                            i++;
+                            return [3 /*break*/, 1];
+                        case 5: return [3 /*break*/, 7];
+                        case 6:
+                            e_1 = _b.sent();
+                            console.error(e_1);
+                            return [3 /*break*/, 7];
+                        case 7: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        VariationHelper.prototype.loadVariation = function (instanceId, obj, parts, usePbr) {
+            if (usePbr === void 0) { usePbr = false; }
+            return __awaiter(this, void 0, void 0, function () {
+                var len, i, variations, lastKnownVariations, j, variationSettings, newVariation, _a, e_2;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _b.trys.push([0, 9, , 10]);
+                            len = parts.length;
+                            i = 0;
+                            _b.label = 1;
+                        case 1:
+                            if (!(i < len)) return [3 /*break*/, 8];
+                            variations = parts[i].variations;
+                            if (!variations || variations.length === 0) {
+                                if (this._getLastKnownVariations(instanceId, parts[i].nodeId)) {
+                                    parts[i].variations = this._getLastKnownVariations(instanceId, parts[i].nodeId);
+                                    this._applyVariations(obj, parts[i], usePbr);
+                                    return [3 /*break*/, 7];
+                                }
+                                else {
+                                    return [3 /*break*/, 7];
+                                }
+                            }
+                            lastKnownVariations = [];
+                            j = 0;
+                            _b.label = 2;
+                        case 2:
+                            if (!(j < variations.length)) return [3 /*break*/, 6];
+                            return [4 /*yield*/, VariationUtils.LoadVariation(this.assetPath, variations[j].gameObjectName || parts[i].decoId)];
+                        case 3:
+                            variationSettings = _b.sent();
+                            newVariation = new Variation();
+                            newVariation.decoId = parseFloat(variations[j].id);
+                            newVariation.brandId = variations[j].brandId;
+                            newVariation.gameObjectName = variations[j].gameObjectName;
+                            newVariation.supplierArticleNr = variations[j].supplierArticleNr;
+                            newVariation.materialId = variations[j].materialId;
+                            _a = newVariation;
+                            return [4 /*yield*/, AssetUtils.CreateMaterialFromAsset(variationSettings)];
+                        case 4:
+                            _a.material = _b.sent();
+                            lastKnownVariations.push(newVariation);
+                            _b.label = 5;
+                        case 5:
+                            j++;
+                            return [3 /*break*/, 2];
+                        case 6:
+                            this._setLastKnownVariations(instanceId, parts[i].nodeId, lastKnownVariations);
+                            parts[i].variations = lastKnownVariations;
+                            this._applyVariations(obj, parts[i], usePbr);
+                            _b.label = 7;
+                        case 7:
+                            i++;
+                            return [3 /*break*/, 1];
+                        case 8: return [3 /*break*/, 10];
+                        case 9:
+                            e_2 = _b.sent();
+                            console.error(e_2);
+                            return [3 /*break*/, 10];
+                        case 10: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        VariationHelper.prototype._getChildrenFilterByProp = function (obj, userDataObjectProp, prop, value) {
+            return obj.children.filter(function (child) {
+                return child.userData &&
+                    child.userData.hasOwnProperty(userDataObjectProp) &&
+                    child.userData[userDataObjectProp].hasOwnProperty(prop) &&
+                    child.userData[userDataObjectProp][prop] === value;
+            });
+        };
+        VariationHelper.prototype._applyMaterialPart = function (obj, partMaterial, nodeId, usePbr) {
+            var _this = this;
+            if (usePbr === void 0) { usePbr = false; }
+            var children = this._getChildrenFilterByProp(obj, 'selection', 'node', nodeId);
+            var len = children.length;
+            for (var i = 0; i < len; i++) {
+                var child = children[i];
+                if (child !== null && child !== undefined) {
+                    child.traverse(function (mesh) {
+                        if (mesh instanceof three.Mesh && partMaterial) {
+                            if (Array.isArray(mesh.material)) { // multimaterial support
+                                for (var j = 0, jlen = mesh.material.length; j < jlen; j++) {
+                                    if (mesh.material[j].name.toLowerCase().indexOf('fixed_frame') !== -1) {
+                                        mesh.material[j] = _this._setMeshMaterialFromVariation(mesh.material[j].name, partMaterial, usePbr);
+                                    }
+                                }
+                            }
+                            else {
+                                if (mesh.material.name.toLowerCase().indexOf('fixed_frame') !== -1) {
+                                    mesh.material = _this._setMeshMaterialFromVariation(mesh.material.name, partMaterial, usePbr);
+                                }
+                            }
+                        }
+                    });
+                }
+            }
+        };
+        VariationHelper.prototype._applyVariations = function (obj, part, usePbr) {
+            var _this = this;
+            if (usePbr === void 0) { usePbr = false; }
+            var children = this._getChildrenFilterByProp(obj, 'selection', 'node', part.node);
+            var len = children.length;
+            for (var i = 0; i < len; i++) {
+                var child = children[i];
+                if (child !== null && child !== undefined) {
+                    child.traverse(function (mesh) {
+                        if (mesh instanceof three.Mesh && part.variations && part.variations.length > 0 && mesh.name.toLowerCase().indexOf('c_')) {
+                            for (var j = 0; j < part.variations.length; j++) {
+                                var variation = part.variations[j];
+                                if (variation.material) {
+                                    var materialToSearch = !!variation.materialId ? variation.materialId.toLowerCase() : 'default';
+                                    if (Array.isArray(mesh.material)) { // multimaterial support
+                                        for (var m = 0, mlen = mesh.material.length; m < mlen; m++) {
+                                            if (mesh.material[m].name.toLowerCase().indexOf(materialToSearch) !== -1) {
+                                                mesh.material[m] = _this._setMeshMaterialFromVariation(mesh.material[m].name, variation, usePbr);
+                                            }
+                                        }
+                                    }
+                                    else {
+                                        if (mesh.material.name.toLowerCase().indexOf(materialToSearch) !== -1) {
+                                            mesh.material = _this._setMeshMaterialFromVariation(mesh.material.name, variation, usePbr);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    });
+                }
+            }
+        };
+        VariationHelper.prototype._setMeshMaterialFromVariation = function (name, variation, usePbr) {
+            if (usePbr === void 0) { usePbr = false; }
+            if (variation.material.texture) {
+                variation.material.texture.needsUpdate = true;
+            }
+            if (!usePbr) {
+                var material = new three.MeshPhongMaterial({
+                    name: name,
+                    shininess: variation.material.shininess,
+                    specular: variation.material.specular,
+                    map: variation.material.texture,
+                    normalMap: variation.material.normal
+                });
+                // material.color.setRGB(0.8, 0.8, 0.8);
+                material.needsUpdate = true;
+                return material;
+            }
+            else {
+                var params = {
+                    // side: DoubleSide,
+                    name: name,
+                    roughness: variation.material.roughnessValue ? variation.material.roughnessValue : 1,
+                    metalness: variation.material.metalnessValue ? variation.material.metalnessValue : 0,
+                };
+                if (variation.material.texture) {
+                    params.map = variation.material.texture;
+                }
+                if (variation.material.ao) {
+                    params.aoMap = variation.material.ao;
+                }
+                if (variation.material.roughness) {
+                    params.roughnessMap = variation.material.roughness;
+                }
+                if (variation.material.metalness) {
+                    params.metalnessMap = variation.material.metalness;
+                }
+                if (variation.material.normal) {
+                    params.normalMap = variation.material.normal;
+                }
+                var material = new three.MeshStandardMaterial(params);
+                material.color.setRGB(1, 1, 1);
+                material.needsUpdate = true;
+                return material;
+            }
+        };
+        VariationHelper.prototype._setLastKnownVariations = function (instanceId, id, variation) {
+            if (this._lastKnownVariations.has(instanceId)) {
+                var variations = this._lastKnownVariations.get(instanceId);
+                variations.set(id, variation);
+            }
+            else {
+                var variations = new Map();
+                this._lastKnownVariations.set(instanceId, variations.set(id, variation));
+            }
+        };
+        VariationHelper.prototype._getLastKnownVariations = function (instanceId, id) {
+            if (this._lastKnownVariations.has(instanceId)) {
+                var variations = this._lastKnownVariations.get(instanceId);
+                if (variations.has(id)) {
+                    return variations.get(id);
+                }
+            }
+            return null;
+        };
+        return VariationHelper;
     }());
 
-    var ServiceLocator = /** @class */ (function () {
-        function ServiceLocator() {
-        }
-        ServiceLocator.injector = undefined;
-        ServiceLocator = __decorate([
-            core.Injectable()
-        ], ServiceLocator);
-        return ServiceLocator;
+    var ServiceLocator = /** @class */ (function () {
+        function ServiceLocator() {
+        }
+        ServiceLocator.injector = undefined;
+        ServiceLocator = __decorate([
+            core.Injectable()
+        ], ServiceLocator);
+        return ServiceLocator;
     }());
 
-    var ConfiguratorService = /** @class */ (function () {
-        function ConfiguratorService(_injector) {
-            this._injector = _injector;
-            if (!ServiceLocator.injector) {
-                ServiceLocator.injector = _injector;
-            }
-        }
-        ConfiguratorService.prototype.initApi = function (options) {
-            this._configuratorApi = new configurator.Configurator(options);
-        };
-        ConfiguratorService.prototype.initNodeInstance = function (goodId) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._configuratorApi.initNodeInstance(goodId)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
-                });
-            });
-        };
-        ConfiguratorService.prototype.setInstanceToConfigure = function (id, showLoader) {
-            if (showLoader === void 0) { showLoader = false; }
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._configuratorApi.setInstanceToConfigure(id, showLoader)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
-                });
-            });
-        };
-        ConfiguratorService.prototype.getGoodIdFromSku = function (sku, showLoader) {
-            if (showLoader === void 0) { showLoader = false; }
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._configuratorApi.getGoodIdFromSku(sku, showLoader)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
-                });
-            });
-        };
-        ConfiguratorService.prototype.getArticleQuickSel = function (goodId, showLoader) {
-            if (showLoader === void 0) { showLoader = false; }
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._configuratorApi.getArticleQuickSel(goodId, showLoader)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
-                });
-            });
-        };
-        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:
-                            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];
-                    }
-                });
-            });
-        };
-        ConfiguratorService.prototype.getDecos = function (showLoader) {
-            if (showLoader === void 0) { showLoader = false; }
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._configuratorApi.getDecos(showLoader)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
-                });
-            });
-        };
-        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) {
-                    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];
-                    }
-                });
-            });
-        };
-        ConfiguratorService.prototype.getSingleImage = function (nodeId, publication, includeMimetype, thumb, showLoader) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!nodeId) {
-                                return [2 /*return*/, null];
-                            }
-                            return [4 /*yield*/, this._configuratorApi.getSingleImage(nodeId, publication, includeMimetype, thumb, showLoader)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
-                });
-            });
-        };
-        ConfiguratorService.prototype.selectSelection = function (selection, showLoader) {
-            if (showLoader === void 0) { showLoader = false; }
-            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; }
-            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.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'
-            })
-        ], ConfiguratorService);
-        return ConfiguratorService;
+    var ConfiguratorService = /** @class */ (function () {
+        function ConfiguratorService(_injector) {
+            this._injector = _injector;
+            if (!ServiceLocator.injector) {
+                ServiceLocator.injector = _injector;
+            }
+        }
+        ConfiguratorService.prototype.initApi = function (options) {
+            this._configuratorApi = new configurator.Configurator(options);
+        };
+        ConfiguratorService.prototype.initNodeInstance = function (goodId) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._configuratorApi.initNodeInstance(goodId)];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
+        ConfiguratorService.prototype.setInstanceToConfigure = function (id, showLoader) {
+            if (showLoader === void 0) { showLoader = false; }
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._configuratorApi.setInstanceToConfigure(id, showLoader)];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
+        ConfiguratorService.prototype.getGoodIdFromSku = function (sku, showLoader) {
+            if (showLoader === void 0) { showLoader = false; }
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._configuratorApi.getGoodIdFromSku(sku, showLoader)];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
+        ConfiguratorService.prototype.getArticleQuickSel = function (goodId, showLoader) {
+            if (showLoader === void 0) { showLoader = false; }
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._configuratorApi.getArticleQuickSel(goodId, showLoader)];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
+        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:
+                            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];
+                    }
+                });
+            });
+        };
+        ConfiguratorService.prototype.getDecos = function (showLoader) {
+            if (showLoader === void 0) { showLoader = false; }
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._configuratorApi.getDecos(showLoader)];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
+        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) {
+                    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];
+                    }
+                });
+            });
+        };
+        ConfiguratorService.prototype.getSingleImage = function (nodeId, publication, includeMimetype, thumb, showLoader) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!nodeId) {
+                                return [2 /*return*/, null];
+                            }
+                            return [4 /*yield*/, this._configuratorApi.getSingleImage(nodeId, publication, includeMimetype, thumb, showLoader)];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
+        ConfiguratorService.prototype.selectSelection = function (selection, showLoader) {
+            if (showLoader === void 0) { showLoader = false; }
+            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; }
+            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.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'
+            })
+        ], ConfiguratorService);
+        return ConfiguratorService;
     }());
 
-    var Builder = /** @class */ (function () {
-        function Builder(scene, options, useInAngular) {
-            this.selectionsReceived = new rxjs.BehaviorSubject([]);
-            this.answersReceived = new rxjs.BehaviorSubject([]);
-            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._boFactory = new businessObjectFactory.BusinessObjectFactory();
-            this._threedUtils = new ThreedUtils();
-            this._variationHelper = new VariationHelper();
-            if (!scene) {
-                throw 'No scene object provided!';
-            }
-            if (!options) {
-                throw 'No connection options provided!';
-            }
-            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 (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) {
-                                return [2 /*return*/];
-                            }
-                            _a.label = 1;
-                        case 1:
-                            _a.trys.push([1, 8, , 9]);
-                            return [4 /*yield*/, this._setInstanceId(sku, instanceId, goodId)];
-                        case 2:
-                            _a.sent();
-                            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.getQuestionAndAnswers());
-                            promises.push(this._getSelections(this._instanceId));
-                            promises.push(this._getDecos());
-                            return [4 /*yield*/, Promise.all(promises)];
-                        case 5:
-                            _a.sent();
-                            if (this._answers.length > 0) {
-                                return [2 /*return*/];
-                            }
-                            this._linkSelectionsAndDecos();
-                            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 9: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        Builder.prototype.initNodeInstance = function (goodId) {
-            return this._configuratorService.initNodeInstance(goodId);
-        };
-        Builder.prototype.destroy = function () {
-            this._threedUtils.clearCache();
-            this._variationHelper.clearCache();
-        };
-        Builder.prototype.selectSelection = function (selection) {
-            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 (publicationCode) {
-            return __awaiter(this, void 0, void 0, function () {
-                var questionsAndAnswers;
-                return __generator(this, function (_a) {
-                    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) {
-            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 () {
-                var article, _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this._getArticle(sku, goodId)];
-                        case 1:
-                            article = _b.sent();
-                            if (!(article && article.assetUrl)) return [3 /*break*/, 3];
-                            _a = this;
-                            return [4 /*yield*/, this._threedUtils.download3DSource(article.assetUrl)
-                                    .catch(function (error) {
-                                    throw error;
-                                })];
-                        case 2:
-                            _a._source = _b.sent();
-                            if (article.contentDeliveryUrl) {
-                                this._variationHelper.assetPath =
-                                    article.contentDeliveryUrl +
-                                        (article.contentDeliveryUrl.endsWith('/') ? '' : '/') +
-                                        (article.distSchema ? article.distSchema : 'UP_DBA');
-                            }
-                            _b.label = 3;
-                        case 3: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        Builder.prototype._build = function (instanceId) {
-            return __awaiter(this, void 0, void 0, function () {
-                var adjustables, obj, connected, i, len, adjustable, ii, lenii;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            this._reset();
-                            adjustables = this._getAdjustables();
-                            if (!(adjustables && adjustables.length > 0)) return [3 /*break*/, 2];
-                            obj = new three.Object3D();
-                            obj.visible = false; // no need to render visualy
-                            this._scene.add(obj);
-                            connected = false;
-                            for (i = 0, len = adjustables.length; i < len; i++) {
-                                adjustable = this._createAdjustable(obj, adjustables[i]);
-                                if (adjustable) {
-                                    for (ii = 0, lenii = this._placedAdjustables.length; ii < lenii; ii++) {
-                                        if (SceneUtils.TrySelectorConnection(this._scene, obj, this._placedAdjustables[ii], adjustable)) {
-                                            this._placedAdjustables[ii].visible = true;
-                                            adjustable.visible = true;
-                                            connected = true;
-                                            break;
-                                        }
-                                        connected = false;
-                                    }
-                                }
-                                if (!connected && this._placedAdjustables.length > 1) {
-                                    console.warn('No connection found for: ', adjustable.name);
-                                }
-                            }
-                            this._placeAddables(obj);
-                            this._updatePivot(obj);
-                            return [4 /*yield*/, this._loadVariations(obj, instanceId)];
-                        case 1:
-                            _a.sent();
-                            this._scene.remove(obj);
-                            return [2 /*return*/, obj];
-                        case 2: throw 'No adjustables found!';
-                    }
-                });
-            });
-        };
-        Builder.prototype._prepareTheSelections = function () {
-            var _this = this;
-            // get generic variations
-            var globalVariations = this._selections
-                .filter(function (s) { return s.generic && s.decoNode.variation && !s.decoNode.type; })
-                .map(function (value, index, array) {
-                // find selection of variation
-                var sel = _this._selections.find(function (s) { return s.artNodeIdDeco === value.decoNode.variation.id; });
-                if (sel) {
-                    value.decoNode.variation.supplierArticleNr = sel.supplierArticleNr;
-                }
-                value.decoNode.variation.materialId = value.hdecoGameObject;
-                return value.decoNode.variation;
-            });
-            // const usedVariations: FurniturePartVariation[] = [];
-            var globalVariationsRewrite = true;
-            var len = this._selections.length;
-            var lastAdded;
-            var lastAdjustable;
-            var newPart = false;
-            var previousPresLevel = -1;
-            var positioning;
-            for (var i = 0; i < len; i++) {
-                var selection = this._selections[i];
-                if (selection.presentationLevel === 1) {
-                    positioning = selection.hdecoPositioning;
-                }
-                if (selection.presentationLevel > previousPresLevel) {
-                    selection.hdecoPositioning = selection.hdecoPositioning || positioning;
-                }
-                if (selection.decoNode) {
-                    if (selection.decoNode.type === decoNodeType_enum.DecoNodeType.Variation) {
-                        if (lastAdded) {
-                            if (newPart) {
-                                lastAdded.variations = [selection.decoNode];
-                            }
-                            else {
-                                lastAdded.variations.push(selection.decoNode);
-                            }
-                            newPart = false;
-                        }
-                        else {
-                            if (globalVariationsRewrite) {
-                                globalVariations.length = 0;
-                                globalVariationsRewrite = false;
-                            }
-                            globalVariations.push(selection.decoNode);
-                        }
-                        // const variation: FurniturePartVariation = new FurniturePartVariation();
-                        // variation.BrandId = selection.decoNode.brandId;
-                        // variation.Description = selection.decoNode.gameObjectName;
-                        // variation.MaterialId = (selection.decoNode as any).materialId;
-                        // variation.SupplierArticleNr = (selection.decoNode as any).supplierArticleNr;
-                        // usedVariations.push(variation);
-                        // this._upsertFurniture(this.activeInstance, {
-                        //     Variation: selection.decoNode.brandId,
-                        //     VariationDescription: selection.decoNode.gameObjectName,
-                        //     SupplierArticleNr: (selection.decoNode as any).supplierArticleNr
-                        // });
-                    }
-                    else if (selection.decoNode.type === decoNodeType_enum.DecoNodeType.Part &&
-                        typeof selection.decoNode.gameObjectName === 'string' &&
-                        selection.decoNode.gameObjectName.length) {
-                        if (selection.decoNode.kind === decoNodeKind_enum.DecoNodeKind.Adjustable) {
-                            selection.variations = globalVariations;
-                            this._adjustables.push(selection);
-                            if (!lastAdded || lastAdded.nodeId !== selection.nodeId) {
-                                newPart = true;
-                            }
-                            lastAdded = selection;
-                            lastAdjustable = selection;
-                        }
-                        else if (selection.decoNode.kind === decoNodeKind_enum.DecoNodeKind.Addable) {
-                            selection.variations = lastAdjustable ? lastAdjustable.variations : globalVariations;
-                            if (lastAdjustable) {
-                                lastAdjustable.addables.push(selection);
-                            }
-                            this._addables.push(selection);
-                            if (!lastAdded || lastAdded.nodeId !== selection.nodeId) {
-                                newPart = true;
-                            }
-                            lastAdded = selection;
-                        }
-                    }
-                }
-                previousPresLevel = selection.presentationLevel;
-            }
-            // this._upsertFurniture(this.activeInstance,
-            //   {Variations: usedVariations});
-        };
-        Builder.prototype._createAdjustable = function (parent, adj) {
-            var obj = this._source ? this._source.getObjectByName(adj.decoNode.gameObjectName) : null;
-            if (!obj) {
-                // in case of glb files, the importer removes dots from names
-                var name_1 = adj.decoNode.gameObjectName.replace(/[.]/g, '');
-                obj = this._source ? this._source.getObjectByName(name_1) : null;
-                if (!obj) {
-                    // console.warn(`No object with name ${adj.decoNode.gameObjectName} found!`);
-                    return null;
-                }
-            }
-            var adjustable = obj.clone();
-            adjustable.name = this._createUniqueName(parent, obj);
-            adjustable.userData.selection = adj;
-            adjustable.position.set(0, 0, 0);
-            adjustable.visible = true;
-            parent.add(adjustable);
-            // the object being added to the customFloorGroup is being recreated so we loose the reference
-            // therefor we need to retrieve the created object again
-            // adjustable = parent.getObjectByName(adjustable.name);
-            this._placedAdjustables.push(adjustable);
-            return adjustable;
-        };
-        Builder.prototype._createAddable = function (parent, add, part2, part1) {
-            var obj = this._source.getObjectByName(add.decoNode.gameObjectName);
-            if (!obj) {
-                return null;
-            }
-            // const selection: Selection = this._getSelectionFromId(adj.artNodeIdDeco);
-            var addable = obj.clone();
-            addable.name = this._createUniqueName(parent, obj);
-            addable.userData.selection = add;
-            addable.position.set(0, 0, 0);
-            addable.visible = true;
-            if (part1 && part2) {
-                parent.add(addable);
-                this._placedAddables.push(addable);
-                return addable;
-            }
-            return addable;
-        };
-        Builder.prototype._placeAddables = function (parent) {
-            var _this = this;
-            var len = this._placedAdjustables.length;
-            for (var i = 0; i < len; i++) {
-                if (this._placedAdjustables[i].userData.hasOwnProperty('selection') && this._placedAdjustables[i].userData.selection) {
-                    var adjustableSelection = this._placedAdjustables[i].userData.selection;
-                    if (adjustableSelection) {
-                        var lena = adjustableSelection.addables.length;
-                        var conAddable = void 0;
-                        for (var ia = 0; ia < lena; ia++) {
-                            SceneUtils.TrySelectorConnection(this._scene, parent, this._placedAdjustables[i], adjustableSelection.addables[ia], function (add, part2, part1) { return _this._createAddable(parent, add, part2, part1); });
-                            if (conAddable) {
-                                SceneUtils.TrySelectorConnection(this._scene, parent, conAddable, adjustableSelection.addables[ia], function (add, part2, part1) { return _this._createAddable(parent, add, part2, part1); });
-                            }
-                            conAddable = this._placedAddables[this._placedAddables.length - 1];
-                        }
-                    }
-                }
-            }
-        };
-        Builder.prototype._createUniqueName = function (parent, obj) {
-            var iteration = 0;
-            var name = obj.name;
-            var existingObj = parent.getObjectByName(name);
-            while (existingObj) {
-                iteration++;
-                name = obj.name + (iteration !== 0 ? ('_' + iteration) : '');
-                existingObj = parent.getObjectByName(name);
-            }
-            return name;
-        };
-        Builder.prototype._getGoodIdFromSku = function (sku) {
-            return __awaiter(this, void 0, void 0, function () {
-                var response;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._configuratorService.getGoodIdFromSku(sku, false)];
-                        case 1:
-                            response = _a.sent();
-                            if (response.validationResult.success && response.resultObject) {
-                                return [2 /*return*/, response.resultObject];
-                            }
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        Builder.prototype._getArticle = function (sku, goodId) {
-            return __awaiter(this, void 0, void 0, function () {
-                var article$1, articleResponse, obj;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (this._articleCache.has(sku)) {
-                                return [2 /*return*/, this._articleCache.get(sku)];
-                            }
-                            if (!!goodId) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this._getGoodIdFromSku(sku)
-                                    .catch(function (error) {
-                                    throw "Article with sku " + sku + " not found!";
-                                })];
-                        case 1:
-                            goodId = _a.sent();
-                            _a.label = 2;
-                        case 2: return [4 /*yield*/, this._configuratorService.getArticleQuickSel(goodId, false)];
-                        case 3:
-                            articleResponse = _a.sent();
-                            if (articleResponse.validationResult.success && articleResponse.resultObject) {
-                                if (articleResponse.resultObject.hasOwnProperty('oArticle')) {
-                                    obj = Array.isArray(articleResponse.resultObject['oArticle']) ? articleResponse.resultObject['oArticle'][0] : articleResponse.resultObject['oArticle'];
-                                    article$1 = this._boFactory.makeWithRawBackendData(article.Article, obj);
-                                }
-                                else {
-                                    article$1 = this._boFactory.makeWithRawBackendData(article.Article, articleResponse.resultObject);
-                                }
-                            }
-                            this._articleCache.set(sku, article$1);
-                            return [2 /*return*/, article$1];
-                    }
-                });
-            });
-        };
-        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 = [];
-                            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!';
-                            }
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        Builder.prototype._getDecos = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var decosResponse;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            this._decos = [];
-                            return [4 /*yield*/, this._configuratorService.getDecos(false)];
-                        case 1:
-                            decosResponse = _a.sent();
-                            if (decosResponse.resultObjects && decosResponse.resultObjects.length > 0) {
-                                this._decos = this._boFactory.makeBOArrayFromRawBackendDataArray(decoNode.DecoNode, decosResponse.resultObjects);
-                            }
-                            else {
-                                throw 'No deconodes found!';
-                            }
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        Builder.prototype._linkSelectionsAndDecos = function () {
-            var _this = this;
-            var len = this._selections.length;
-            var _loop_1 = function (i) {
-                var id = this_1._selections[i].artNodeIdDeco;
-                // if (this._useNodeIdToLink) {
-                //     id = `${this._selections[i].node}_${this._selections[i].artNodeIdDeco}`;
-                // }
-                var deco = this_1._decos.find(function (d) { return d.id === id; });
-                if (!deco) {
-                    deco = new decoNode.DecoNode();
-                }
-                var variation = this_1._getVariations().find(function (v) { return v.parentId === _this._selections[i].artNodeIdDeco; });
-                if (variation) {
-                    deco.variation = variation;
-                }
-                this_1._selections[i].decoNode = deco;
-            };
-            var this_1 = this;
-            for (var i = 0; i < len; i++) {
-                _loop_1(i);
-            }
-        };
-        Builder.prototype._getVariations = function () {
-            return this._decos.filter(function (deco) {
-                return deco.type === decoNodeType_enum.DecoNodeType.Variation;
-            });
-        };
-        Builder.prototype._loadVariations = function (obj, instanceId) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._variationHelper.loadPart(obj, this._adjustables, true)];
-                        case 1:
-                            _a.sent();
-                            return [4 /*yield*/, this._variationHelper.loadVariation(instanceId, obj, this._adjustables, true)];
-                        case 2:
-                            _a.sent();
-                            return [4 /*yield*/, this._variationHelper.loadVariation(instanceId, obj, this._addables, true)];
-                        case 3:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        Builder.prototype._getAdjustables = function () {
-            return this._selections.filter(function (s) {
-                var node = s.decoNode;
-                return node && node.gameObjectName && node.type === decoNodeType_enum.DecoNodeType.Part && node.kind === decoNodeKind_enum.DecoNodeKind.Adjustable;
-            });
-        };
-        Builder.prototype._updatePivot = function (obj) {
-            var boundingBox = new three.Box3().setFromObject(obj);
-            var bbCenterPivot = new three.Vector3();
-            boundingBox.getCenter(bbCenterPivot);
-            var delta = new three.Vector3().sub(bbCenterPivot).setY(Math.abs(Math.min(boundingBox.min.y, 0)));
-            obj.children.forEach(function (child) {
-                child.position.add(delta);
-            });
-            obj.updateWorldMatrix(false, true);
-        };
-        Builder.prototype._reset = function () {
-            this._placedAddables.length = 0;
-            this._placedAdjustables.length = 0;
-            this._adjustables.length = 0;
-            this._addables.length = 0;
-            this._prepareTheSelections();
-        };
-        Builder.ctorParameters = function () { return [
-            { type: three.Scene },
-            { type: options.Options },
-            { type: Boolean }
-        ]; };
-        Builder = __decorate([
-            core.Injectable()
-        ], Builder);
-        return Builder;
+    var Builder = /** @class */ (function () {
+        function Builder(scene, options, useInAngular) {
+            this.selectionsReceived = new rxjs.BehaviorSubject([]);
+            this.answersReceived = new rxjs.BehaviorSubject([]);
+            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._boFactory = new businessObjectFactory.BusinessObjectFactory();
+            this._threedUtils = new ThreedUtils();
+            this._variationHelper = new VariationHelper();
+            if (!scene) {
+                throw 'No scene object provided!';
+            }
+            if (!options) {
+                throw 'No connection options provided!';
+            }
+            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 (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) {
+                                return [2 /*return*/];
+                            }
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 8, , 9]);
+                            return [4 /*yield*/, this._setInstanceId(sku, instanceId, goodId)];
+                        case 2:
+                            _a.sent();
+                            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.getQuestionAndAnswers());
+                            promises.push(this._getSelections(this._instanceId));
+                            promises.push(this._getDecos());
+                            return [4 /*yield*/, Promise.all(promises)];
+                        case 5:
+                            _a.sent();
+                            if (this._answers.length > 0) {
+                                return [2 /*return*/];
+                            }
+                            this._linkSelectionsAndDecos();
+                            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 9: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        Builder.prototype.initNodeInstance = function (goodId) {
+            return this._configuratorService.initNodeInstance(goodId);
+        };
+        Builder.prototype.destroy = function () {
+            this._threedUtils.clearCache();
+            this._variationHelper.clearCache();
+        };
+        Builder.prototype.selectSelection = function (selection) {
+            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 (publicationCode) {
+            return __awaiter(this, void 0, void 0, function () {
+                var questionsAndAnswers;
+                return __generator(this, function (_a) {
+                    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) {
+            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 () {
+                var article, _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this._getArticle(sku, goodId)];
+                        case 1:
+                            article = _b.sent();
+                            if (!(article && article.assetUrl)) return [3 /*break*/, 3];
+                            _a = this;
+                            return [4 /*yield*/, this._threedUtils.download3DSource(article.assetUrl)
+                                    .catch(function (error) {
+                                    throw error;
+                                })];
+                        case 2:
+                            _a._source = _b.sent();
+                            if (article.contentDeliveryUrl) {
+                                this._variationHelper.assetPath =
+                                    article.contentDeliveryUrl +
+                                        (article.contentDeliveryUrl.endsWith('/') ? '' : '/') +
+                                        (article.distSchema ? article.distSchema : 'UP_DBA');
+                            }
+                            _b.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        Builder.prototype._build = function (instanceId) {
+            return __awaiter(this, void 0, void 0, function () {
+                var adjustables, obj, connected, i, len, adjustable, ii, lenii;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this._reset();
+                            adjustables = this._getAdjustables();
+                            if (!(adjustables && adjustables.length > 0)) return [3 /*break*/, 2];
+                            obj = new three.Object3D();
+                            obj.visible = false; // no need to render visualy
+                            this._scene.add(obj);
+                            connected = false;
+                            for (i = 0, len = adjustables.length; i < len; i++) {
+                                adjustable = this._createAdjustable(obj, adjustables[i]);
+                                if (adjustable) {
+                                    for (ii = 0, lenii = this._placedAdjustables.length; ii < lenii; ii++) {
+                                        if (SceneUtils.TrySelectorConnection(this._scene, obj, this._placedAdjustables[ii], adjustable)) {
+                                            this._placedAdjustables[ii].visible = true;
+                                            adjustable.visible = true;
+                                            connected = true;
+                                            break;
+                                        }
+                                        connected = false;
+                                    }
+                                }
+                                if (!connected && this._placedAdjustables.length > 1) {
+                                    console.warn('No connection found for: ', adjustable.name);
+                                }
+                            }
+                            this._placeAddables(obj);
+                            this._updatePivot(obj);
+                            return [4 /*yield*/, this._loadVariations(obj, instanceId)];
+                        case 1:
+                            _a.sent();
+                            this._scene.remove(obj);
+                            return [2 /*return*/, obj];
+                        case 2: throw 'No adjustables found!';
+                    }
+                });
+            });
+        };
+        Builder.prototype._prepareTheSelections = function () {
+            var _this = this;
+            // get generic variations
+            var globalVariations = this._selections
+                .filter(function (s) { return s.generic && s.decoNode.variation && !s.decoNode.type; })
+                .map(function (value, index, array) {
+                // find selection of variation
+                var sel = _this._selections.find(function (s) { return s.artNodeIdDeco === value.decoNode.variation.id; });
+                if (sel) {
+                    value.decoNode.variation.supplierArticleNr = sel.supplierArticleNr;
+                }
+                value.decoNode.variation.materialId = value.hdecoGameObject;
+                return value.decoNode.variation;
+            });
+            // const usedVariations: FurniturePartVariation[] = [];
+            var globalVariationsRewrite = true;
+            var len = this._selections.length;
+            var lastAdded;
+            var lastAdjustable;
+            var newPart = false;
+            var previousPresLevel = -1;
+            var positioning;
+            for (var i = 0; i < len; i++) {
+                var selection = this._selections[i];
+                if (selection.presentationLevel === 1) {
+                    positioning = selection.hdecoPositioning;
+                }
+                if (selection.presentationLevel > previousPresLevel) {
+                    selection.hdecoPositioning = selection.hdecoPositioning || positioning;
+                }
+                if (selection.decoNode) {
+                    if (selection.decoNode.type === decoNodeType_enum.DecoNodeType.Variation) {
+                        if (lastAdded) {
+                            if (newPart) {
+                                lastAdded.variations = [selection.decoNode];
+                            }
+                            else {
+                                lastAdded.variations.push(selection.decoNode);
+                            }
+                            newPart = false;
+                        }
+                        else {
+                            if (globalVariationsRewrite) {
+                                globalVariations.length = 0;
+                                globalVariationsRewrite = false;
+                            }
+                            globalVariations.push(selection.decoNode);
+                        }
+                        // const variation: FurniturePartVariation = new FurniturePartVariation();
+                        // variation.BrandId = selection.decoNode.brandId;
+                        // variation.Description = selection.decoNode.gameObjectName;
+                        // variation.MaterialId = (selection.decoNode as any).materialId;
+                        // variation.SupplierArticleNr = (selection.decoNode as any).supplierArticleNr;
+                        // usedVariations.push(variation);
+                        // this._upsertFurniture(this.activeInstance, {
+                        //     Variation: selection.decoNode.brandId,
+                        //     VariationDescription: selection.decoNode.gameObjectName,
+                        //     SupplierArticleNr: (selection.decoNode as any).supplierArticleNr
+                        // });
+                    }
+                    else if (selection.decoNode.type === decoNodeType_enum.DecoNodeType.Part &&
+                        typeof selection.decoNode.gameObjectName === 'string' &&
+                        selection.decoNode.gameObjectName.length) {
+                        if (selection.decoNode.kind === decoNodeKind_enum.DecoNodeKind.Adjustable) {
+                            selection.variations = globalVariations;
+                            this._adjustables.push(selection);
+                            if (!lastAdded || lastAdded.nodeId !== selection.nodeId) {
+                                newPart = true;
+                            }
+                            lastAdded = selection;
+                            lastAdjustable = selection;
+                        }
+                        else if (selection.decoNode.kind === decoNodeKind_enum.DecoNodeKind.Addable) {
+                            selection.variations = lastAdjustable ? lastAdjustable.variations : globalVariations;
+                            if (lastAdjustable) {
+                                lastAdjustable.addables.push(selection);
+                            }
+                            this._addables.push(selection);
+                            if (!lastAdded || lastAdded.nodeId !== selection.nodeId) {
+                                newPart = true;
+                            }
+                            lastAdded = selection;
+                        }
+                    }
+                }
+                previousPresLevel = selection.presentationLevel;
+            }
+            // this._upsertFurniture(this.activeInstance,
+            //   {Variations: usedVariations});
+        };
+        Builder.prototype._createAdjustable = function (parent, adj) {
+            var obj = this._source ? this._source.getObjectByName(adj.decoNode.gameObjectName) : null;
+            if (!obj) {
+                // in case of glb files, the importer removes dots from names
+                var name_1 = adj.decoNode.gameObjectName.replace(/[.]/g, '');
+                obj = this._source ? this._source.getObjectByName(name_1) : null;
+                if (!obj) {
+                    // console.warn(`No object with name ${adj.decoNode.gameObjectName} found!`);
+                    return null;
+                }
+            }
+            var adjustable = obj.clone();
+            adjustable.name = this._createUniqueName(parent, obj);
+            adjustable.userData.selection = adj;
+            adjustable.position.set(0, 0, 0);
+            adjustable.visible = true;
+            parent.add(adjustable);
+            // the object being added to the customFloorGroup is being recreated so we loose the reference
+            // therefor we need to retrieve the created object again
+            // adjustable = parent.getObjectByName(adjustable.name);
+            this._placedAdjustables.push(adjustable);
+            return adjustable;
+        };
+        Builder.prototype._createAddable = function (parent, add, part2, part1) {
+            var obj = this._source.getObjectByName(add.decoNode.gameObjectName);
+            if (!obj) {
+                return null;
+            }
+            // const selection: Selection = this._getSelectionFromId(adj.artNodeIdDeco);
+            var addable = obj.clone();
+            addable.name = this._createUniqueName(parent, obj);
+            addable.userData.selection = add;
+            addable.position.set(0, 0, 0);
+            addable.visible = true;
+            if (part1 && part2) {
+                parent.add(addable);
+                this._placedAddables.push(addable);
+                return addable;
+            }
+            return addable;
+        };
+        Builder.prototype._placeAddables = function (parent) {
+            var _this = this;
+            var len = this._placedAdjustables.length;
+            for (var i = 0; i < len; i++) {
+                if (this._placedAdjustables[i].userData.hasOwnProperty('selection') && this._placedAdjustables[i].userData.selection) {
+                    var adjustableSelection = this._placedAdjustables[i].userData.selection;
+                    if (adjustableSelection) {
+                        var lena = adjustableSelection.addables.length;
+                        var conAddable = void 0;
+                        for (var ia = 0; ia < lena; ia++) {
+                            SceneUtils.TrySelectorConnection(this._scene, parent, this._placedAdjustables[i], adjustableSelection.addables[ia], function (add, part2, part1) { return _this._createAddable(parent, add, part2, part1); });
+                            if (conAddable) {
+                                SceneUtils.TrySelectorConnection(this._scene, parent, conAddable, adjustableSelection.addables[ia], function (add, part2, part1) { return _this._createAddable(parent, add, part2, part1); });
+                            }
+                            conAddable = this._placedAddables[this._placedAddables.length - 1];
+                        }
+                    }
+                }
+            }
+        };
+        Builder.prototype._createUniqueName = function (parent, obj) {
+            var iteration = 0;
+            var name = obj.name;
+            var existingObj = parent.getObjectByName(name);
+            while (existingObj) {
+                iteration++;
+                name = obj.name + (iteration !== 0 ? ('_' + iteration) : '');
+                existingObj = parent.getObjectByName(name);
+            }
+            return name;
+        };
+        Builder.prototype._getGoodIdFromSku = function (sku) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._configuratorService.getGoodIdFromSku(sku, false)];
+                        case 1:
+                            response = _a.sent();
+                            if (response.validationResult.success && response.resultObject) {
+                                return [2 /*return*/, response.resultObject];
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        Builder.prototype._getArticle = function (sku, goodId) {
+            return __awaiter(this, void 0, void 0, function () {
+                var article$1, articleResponse, obj;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (this._articleCache.has(sku)) {
+                                return [2 /*return*/, this._articleCache.get(sku)];
+                            }
+                            if (!!goodId) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._getGoodIdFromSku(sku)
+                                    .catch(function (error) {
+                                    throw "Article with sku " + sku + " not found!";
+                                })];
+                        case 1:
+                            goodId = _a.sent();
+                            _a.label = 2;
+                        case 2: return [4 /*yield*/, this._configuratorService.getArticleQuickSel(goodId, false)];
+                        case 3:
+                            articleResponse = _a.sent();
+                            if (articleResponse.validationResult.success && articleResponse.resultObject) {
+                                if (articleResponse.resultObject.hasOwnProperty('oArticle')) {
+                                    obj = Array.isArray(articleResponse.resultObject['oArticle']) ? articleResponse.resultObject['oArticle'][0] : articleResponse.resultObject['oArticle'];
+                                    article$1 = this._boFactory.makeWithRawBackendData(article.Article, obj);
+                                }
+                                else {
+                                    article$1 = this._boFactory.makeWithRawBackendData(article.Article, articleResponse.resultObject);
+                                }
+                            }
+                            this._articleCache.set(sku, article$1);
+                            return [2 /*return*/, article$1];
+                    }
+                });
+            });
+        };
+        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 = [];
+                            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!';
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        Builder.prototype._getDecos = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var decosResponse;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this._decos = [];
+                            return [4 /*yield*/, this._configuratorService.getDecos(false)];
+                        case 1:
+                            decosResponse = _a.sent();
+                            if (decosResponse.resultObjects && decosResponse.resultObjects.length > 0) {
+                                this._decos = this._boFactory.makeBOArrayFromRawBackendDataArray(decoNode.DecoNode, decosResponse.resultObjects);
+                            }
+                            else {
+                                throw 'No deconodes found!';
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        Builder.prototype._linkSelectionsAndDecos = function () {
+            var _this = this;
+            var len = this._selections.length;
+            var _loop_1 = function (i) {
+                var id = this_1._selections[i].artNodeIdDeco;
+                // if (this._useNodeIdToLink) {
+                //     id = `${this._selections[i].node}_${this._selections[i].artNodeIdDeco}`;
+                // }
+                var deco = this_1._decos.find(function (d) { return d.id === id; });
+                if (!deco) {
+                    deco = new decoNode.DecoNode();
+                }
+                var variation = this_1._getVariations().find(function (v) { return v.parentId === _this._selections[i].artNodeIdDeco; });
+                if (variation) {
+                    deco.variation = variation;
+                }
+                this_1._selections[i].decoNode = deco;
+            };
+            var this_1 = this;
+            for (var i = 0; i < len; i++) {
+                _loop_1(i);
+            }
+        };
+        Builder.prototype._getVariations = function () {
+            return this._decos.filter(function (deco) {
+                return deco.type === decoNodeType_enum.DecoNodeType.Variation;
+            });
+        };
+        Builder.prototype._loadVariations = function (obj, instanceId) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._variationHelper.loadPart(obj, this._adjustables, true)];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, this._variationHelper.loadVariation(instanceId, obj, this._adjustables, true)];
+                        case 2:
+                            _a.sent();
+                            return [4 /*yield*/, this._variationHelper.loadVariation(instanceId, obj, this._addables, true)];
+                        case 3:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        Builder.prototype._getAdjustables = function () {
+            return this._selections.filter(function (s) {
+                var node = s.decoNode;
+                return node && node.gameObjectName && node.type === decoNodeType_enum.DecoNodeType.Part && node.kind === decoNodeKind_enum.DecoNodeKind.Adjustable;
+            });
+        };
+        Builder.prototype._updatePivot = function (obj) {
+            var boundingBox = new three.Box3().setFromObject(obj);
+            var bbCenterPivot = new three.Vector3();
+            boundingBox.getCenter(bbCenterPivot);
+            var delta = new three.Vector3().sub(bbCenterPivot).setY(Math.abs(Math.min(boundingBox.min.y, 0)));
+            obj.children.forEach(function (child) {
+                child.position.add(delta);
+            });
+            obj.updateWorldMatrix(false, true);
+        };
+        Builder.prototype._reset = function () {
+            this._placedAddables.length = 0;
+            this._placedAdjustables.length = 0;
+            this._adjustables.length = 0;
+            this._addables.length = 0;
+            this._prepareTheSelections();
+        };
+        Builder.ctorParameters = function () { return [
+            { type: three.Scene },
+            { type: options.Options },
+            { type: Boolean }
+        ]; };
+        Builder = __decorate([
+            core.Injectable()
+        ], Builder);
+        return Builder;
     }());
 
-    var AnswersComponent = /** @class */ (function () {
-        function AnswersComponent() {
-            this.answers = [];
-            this.answerClick = new core.EventEmitter();
-        }
-        __decorate([
-            core.Input()
-        ], AnswersComponent.prototype, "answers", void 0);
-        __decorate([
-            core.Input()
-        ], AnswersComponent.prototype, "selectionTitle", void 0);
-        __decorate([
-            core.Output()
-        ], AnswersComponent.prototype, "answerClick", void 0);
-        AnswersComponent = __decorate([
-            core.Component({
-                selector: "answers",
-                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;
+    var AnswersComponent = /** @class */ (function () {
+        function AnswersComponent() {
+            this.answers = [];
+            this.answerClick = new core.EventEmitter();
+        }
+        __decorate([
+            core.Input()
+        ], AnswersComponent.prototype, "answers", void 0);
+        __decorate([
+            core.Input()
+        ], AnswersComponent.prototype, "selectionTitle", void 0);
+        __decorate([
+            core.Output()
+        ], AnswersComponent.prototype, "answerClick", void 0);
+        AnswersComponent = __decorate([
+            core.Component({
+                selector: "answers",
+                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;
     }());
 
-    var ImageCacheService = /** @class */ (function () {
-        function ImageCacheService(_configuratorService) {
-            this._configuratorService = _configuratorService;
-            // Map containing the retrieved images, @number = nodeId, @string = base64 string
-            this._imageCache = new Map();
-        }
-        ImageCacheService_1 = ImageCacheService;
-        ImageCacheService._handleResponseData = function (includeMimetype, thumb, responseData) {
-            if (responseData && responseData.resultObject) {
-                if (responseData.resultObject.filePath !== null && responseData.resultObject.filePath !== "") {
-                    return ImageUtils.getFixedImageFilepathUrl(responseData.resultObject.filePath);
-                }
-                else {
-                    if (includeMimetype) {
-                        return ImageUtils.getDocBodyWithMimeTypeDefinition(responseData.resultObject.fileName, thumb ? responseData.resultObject.thumbnailBody : responseData.resultObject.documentBody);
-                    }
-                    else {
-                        return thumb ? responseData.resultObject.thumbnailBody : responseData.resultObject.documentBody;
-                    }
-                }
-            }
-            else {
-                return '';
-            }
-        };
-        ImageCacheService.prototype.getImageForSelectionOrAnswer = function (object) {
-            var _this = this;
-            var includeMimeType = true, thumb = true;
-            return new Promise(function (resolve, reject) {
-                if (object && object.nodeId) {
-                    if (!_this._imageCache.has(object.nodeId)) {
-                        return _this._configuratorService.getSingleImage(object.nodeId, 4, includeMimeType, thumb, true)
-                            .then(function (responseData) {
-                            var base64 = ImageCacheService_1._handleResponseData(includeMimeType, thumb, responseData);
-                            _this._imageCache.set(object.nodeId, base64);
-                            resolve(base64);
-                        }).catch(function () {
-                            reject();
-                        });
-                    }
-                    else {
-                        resolve(_this._imageCache.get(object.nodeId));
-                    }
-                }
-                else {
-                    reject();
-                }
-            });
-        };
-        var ImageCacheService_1;
-        ImageCacheService.ctorParameters = function () { return [
-            { type: ConfiguratorService }
-        ]; };
-        ImageCacheService.ɵprov = core.ɵɵdefineInjectable({ factory: function ImageCacheService_Factory() { return new ImageCacheService(core.ɵɵinject(ConfiguratorService)); }, token: ImageCacheService, providedIn: "root" });
-        ImageCacheService = ImageCacheService_1 = __decorate([
-            core.Injectable({
-                providedIn: 'root'
-            })
-        ], ImageCacheService);
-        return ImageCacheService;
+    var ImageCacheService = /** @class */ (function () {
+        function ImageCacheService(_configuratorService) {
+            this._configuratorService = _configuratorService;
+            // Map containing the retrieved images, @number = nodeId, @string = base64 string
+            this._imageCache = new Map();
+        }
+        ImageCacheService_1 = ImageCacheService;
+        ImageCacheService._handleResponseData = function (includeMimetype, thumb, responseData) {
+            if (responseData && responseData.resultObject) {
+                if (responseData.resultObject.filePath !== null && responseData.resultObject.filePath !== "") {
+                    return ImageUtils.getFixedImageFilepathUrl(responseData.resultObject.filePath);
+                }
+                else {
+                    if (includeMimetype) {
+                        return ImageUtils.getDocBodyWithMimeTypeDefinition(responseData.resultObject.fileName, thumb ? responseData.resultObject.thumbnailBody : responseData.resultObject.documentBody);
+                    }
+                    else {
+                        return thumb ? responseData.resultObject.thumbnailBody : responseData.resultObject.documentBody;
+                    }
+                }
+            }
+            else {
+                return '';
+            }
+        };
+        ImageCacheService.prototype.getImageForSelectionOrAnswer = function (object) {
+            var _this = this;
+            var includeMimeType = true, thumb = true;
+            return new Promise(function (resolve, reject) {
+                if (object && object.nodeId) {
+                    if (!_this._imageCache.has(object.nodeId)) {
+                        return _this._configuratorService.getSingleImage(object.nodeId, 4, includeMimeType, thumb, true)
+                            .then(function (responseData) {
+                            var base64 = ImageCacheService_1._handleResponseData(includeMimeType, thumb, responseData);
+                            _this._imageCache.set(object.nodeId, base64);
+                            resolve(base64);
+                        }).catch(function () {
+                            reject();
+                        });
+                    }
+                    else {
+                        resolve(_this._imageCache.get(object.nodeId));
+                    }
+                }
+                else {
+                    reject();
+                }
+            });
+        };
+        var ImageCacheService_1;
+        ImageCacheService.ctorParameters = function () { return [
+            { type: ConfiguratorService }
+        ]; };
+        ImageCacheService.ɵprov = core.ɵɵdefineInjectable({ factory: function ImageCacheService_Factory() { return new ImageCacheService(core.ɵɵinject(ConfiguratorService)); }, token: ImageCacheService, providedIn: "root" });
+        ImageCacheService = ImageCacheService_1 = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            })
+        ], ImageCacheService);
+        return ImageCacheService;
     }());
 
-    var AnswerComponent = /** @class */ (function () {
-        function AnswerComponent(_imageCacheService) {
-            this._imageCacheService = _imageCacheService;
-        }
-        Object.defineProperty(AnswerComponent.prototype, "showing", {
-            set: function (value) {
-                this.answer.imageData = '';
-                if (value && this.answer.answer !== 'Skip / Cancel') {
-                    this._loadThumbnail(this.answer);
-                }
-                else {
-                    this.answer.imageData = null;
-                }
-            },
-            enumerable: true,
-            configurable: true
-        });
-        AnswerComponent.prototype.ngOnInit = function () {
-        };
-        AnswerComponent.prototype._loadThumbnail = function (answer) {
-            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 [
-            { type: ImageCacheService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], AnswerComponent.prototype, "answer", void 0);
-        __decorate([
-            core.Input()
-        ], AnswerComponent.prototype, "showing", null);
-        AnswerComponent = __decorate([
-            core.Component({
-                selector: 'answer',
-                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' })),
-                        animations.state('white', animations.style({ 'background': 'white' })),
-                        animations.transition('void <=> *', animations.animate(500))
-                    ])
-                ],
-                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;
+    var AnswerComponent = /** @class */ (function () {
+        function AnswerComponent(_imageCacheService) {
+            this._imageCacheService = _imageCacheService;
+        }
+        Object.defineProperty(AnswerComponent.prototype, "showing", {
+            set: function (value) {
+                this.answer.imageData = '';
+                if (value && this.answer.answer !== 'Skip / Cancel') {
+                    this._loadThumbnail(this.answer);
+                }
+                else {
+                    this.answer.imageData = null;
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        AnswerComponent.prototype.ngOnInit = function () {
+        };
+        AnswerComponent.prototype._loadThumbnail = function (answer) {
+            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 [
+            { type: ImageCacheService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], AnswerComponent.prototype, "answer", void 0);
+        __decorate([
+            core.Input()
+        ], AnswerComponent.prototype, "showing", null);
+        AnswerComponent = __decorate([
+            core.Component({
+                selector: 'answer',
+                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' })),
+                        animations.state('white', animations.style({ 'background': 'white' })),
+                        animations.transition('void <=> *', animations.animate(500))
+                    ])
+                ],
+                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;
     }());
 
-    var VisibilityObserverMasterDirective = /** @class */ (function () {
-        // I initialize the intersection observer parent directive.
-        function VisibilityObserverMasterDirective() {
-            var _this = this;
-            // As each observable child attaches itself to the parent observer, we need to
-            // map Elements to Callbacks so that when an Element's intersection changes,
-            // we'll know which callback to invoke. For this, we'll use an ES6 Map.
-            this._mapping = new Map();
-            this._observer = new IntersectionObserver(function (entries) {
-                var e_1, _a;
-                try {
-                    for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
-                        var entry = entries_1_1.value;
-                        var callback = _this._mapping.get(entry.target);
-                        if (callback) {
-                            callback(entry.isIntersecting);
-                        }
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-            }, {
-                // This classifies the "intersection" as being a bit outside the
-                // viewport. The intent here is give the elements a little time to react
-                // to the change before the element is actually visible to the user.
-                rootMargin: '300px 0px 300px 0px'
-            });
-        }
-        // I get called once when the host element is being destroyed.
-        VisibilityObserverMasterDirective.prototype.ngOnDestroy = function () {
-            this._mapping.clear();
-            this._observer.disconnect();
-        };
-        // ---
-        // PUBLIC METHODS.
-        // ---
-        // I add the given Element for intersection observation. When the intersection status
-        // changes, the given callback is invoked with the new status.
-        VisibilityObserverMasterDirective.prototype.add = function (element, callback) {
-            this._mapping.set(element, callback);
-            this._observer.observe(element);
-        };
-        // I remove the given Element from intersection observation.
-        VisibilityObserverMasterDirective.prototype.remove = function (element) {
-            this._mapping.delete(element);
-            this._observer.unobserve(element);
-        };
-        VisibilityObserverMasterDirective = __decorate([
-            core.Directive({
-                selector: '[visibilityObserverMaster]'
-            })
-        ], VisibilityObserverMasterDirective);
-        return VisibilityObserverMasterDirective;
+    var VisibilityObserverMasterDirective = /** @class */ (function () {
+        // I initialize the intersection observer parent directive.
+        function VisibilityObserverMasterDirective() {
+            var _this = this;
+            // As each observable child attaches itself to the parent observer, we need to
+            // map Elements to Callbacks so that when an Element's intersection changes,
+            // we'll know which callback to invoke. For this, we'll use an ES6 Map.
+            this._mapping = new Map();
+            this._observer = new IntersectionObserver(function (entries) {
+                var e_1, _a;
+                try {
+                    for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
+                        var entry = entries_1_1.value;
+                        var callback = _this._mapping.get(entry.target);
+                        if (callback) {
+                            callback(entry.isIntersecting);
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }, {
+                // This classifies the "intersection" as being a bit outside the
+                // viewport. The intent here is give the elements a little time to react
+                // to the change before the element is actually visible to the user.
+                rootMargin: '300px 0px 300px 0px'
+            });
+        }
+        // I get called once when the host element is being destroyed.
+        VisibilityObserverMasterDirective.prototype.ngOnDestroy = function () {
+            this._mapping.clear();
+            this._observer.disconnect();
+        };
+        // ---
+        // PUBLIC METHODS.
+        // ---
+        // I add the given Element for intersection observation. When the intersection status
+        // changes, the given callback is invoked with the new status.
+        VisibilityObserverMasterDirective.prototype.add = function (element, callback) {
+            this._mapping.set(element, callback);
+            this._observer.observe(element);
+        };
+        // I remove the given Element from intersection observation.
+        VisibilityObserverMasterDirective.prototype.remove = function (element) {
+            this._mapping.delete(element);
+            this._observer.unobserve(element);
+        };
+        VisibilityObserverMasterDirective = __decorate([
+            core.Directive({
+                selector: '[visibilityObserverMaster]'
+            })
+        ], VisibilityObserverMasterDirective);
+        return VisibilityObserverMasterDirective;
     }());
 
-    var VisibilityObserverDirective = /** @class */ (function () {
-        // I initialize the intersection observer directive.
-        function VisibilityObserverDirective(parent, elementRef) {
-            this.observerEnabled = false;
-            // These are just some human-friendly constants to make the HTML template a bit more
-            // readable when being consumed as part of SWTCH/CASE statements.
-            this.IS_INTERSECTING = true;
-            this.IS_NOT_INTERSECTING = false;
-            this._parent = parent;
-            this._elementRef = elementRef;
-            // By default, we're going to assume that the host element is NOT intersecting.
-            // Then, we'll use the IntersectionObserver to asynchronously check for changes
-            // in viewport visibility.
-            this.isIntersecting = false;
-        }
-        // ---
-        // PUBLIC METHODS.
-        // ---
-        // I get called once when the host element is being destroyed.
-        VisibilityObserverDirective.prototype.ngOnDestroy = function () {
-            this._parent.remove(this._elementRef.nativeElement);
-            this._elementRef = undefined;
-        };
-        // I get called once after the inputs have been bound for the first time.
-        VisibilityObserverDirective.prototype.ngOnInit = function () {
-            var _this = this;
-            // In this demo, instead of using an IntersectionObserver per Element, we're
-            // going to use a shared observer in the parent element. However, we're still
-            // going to use a CALLBACK style approach so that we're only reducing the number
-            // of IntersectionObserver instances, not the number of Function calls.
-            if (this.observerEnabled) {
-                this._parent.add(this._elementRef.nativeElement, function (isIntersecting) {
-                    _this.isIntersecting = isIntersecting;
-                    if (_this.isIntersecting) {
-                        _this._parent.remove(_this._elementRef.nativeElement);
-                    }
-                });
-            }
-        };
-        VisibilityObserverDirective.ctorParameters = function () { return [
-            { type: VisibilityObserverMasterDirective },
-            { type: core.ElementRef }
-        ]; };
-        __decorate([
-            core.Input()
-        ], VisibilityObserverDirective.prototype, "observerEnabled", void 0);
-        VisibilityObserverDirective = __decorate([
-            core.Directive({
-                selector: '[visibilityObserver]',
-                exportAs: 'intersection'
-            })
-        ], VisibilityObserverDirective);
-        return VisibilityObserverDirective;
+    var VisibilityObserverDirective = /** @class */ (function () {
+        // I initialize the intersection observer directive.
+        function VisibilityObserverDirective(parent, elementRef) {
+            this.observerEnabled = false;
+            // These are just some human-friendly constants to make the HTML template a bit more
+            // readable when being consumed as part of SWTCH/CASE statements.
+            this.IS_INTERSECTING = true;
+            this.IS_NOT_INTERSECTING = false;
+            this._parent = parent;
+            this._elementRef = elementRef;
+            // By default, we're going to assume that the host element is NOT intersecting.
+            // Then, we'll use the IntersectionObserver to asynchronously check for changes
+            // in viewport visibility.
+            this.isIntersecting = false;
+        }
+        // ---
+        // PUBLIC METHODS.
+        // ---
+        // I get called once when the host element is being destroyed.
+        VisibilityObserverDirective.prototype.ngOnDestroy = function () {
+            this._parent.remove(this._elementRef.nativeElement);
+            this._elementRef = undefined;
+        };
+        // I get called once after the inputs have been bound for the first time.
+        VisibilityObserverDirective.prototype.ngOnInit = function () {
+            var _this = this;
+            // In this demo, instead of using an IntersectionObserver per Element, we're
+            // going to use a shared observer in the parent element. However, we're still
+            // going to use a CALLBACK style approach so that we're only reducing the number
+            // of IntersectionObserver instances, not the number of Function calls.
+            if (this.observerEnabled) {
+                this._parent.add(this._elementRef.nativeElement, function (isIntersecting) {
+                    _this.isIntersecting = isIntersecting;
+                    if (_this.isIntersecting) {
+                        _this._parent.remove(_this._elementRef.nativeElement);
+                    }
+                });
+            }
+        };
+        VisibilityObserverDirective.ctorParameters = function () { return [
+            { type: VisibilityObserverMasterDirective },
+            { type: core.ElementRef }
+        ]; };
+        __decorate([
+            core.Input()
+        ], VisibilityObserverDirective.prototype, "observerEnabled", void 0);
+        VisibilityObserverDirective = __decorate([
+            core.Directive({
+                selector: '[visibilityObserver]',
+                exportAs: 'intersection'
+            })
+        ], VisibilityObserverDirective);
+        return VisibilityObserverDirective;
     }());
 
-    var LoaderComponent = /** @class */ (function () {
-        function LoaderComponent() {
-        }
-        LoaderComponent = __decorate([
-            core.Component({
-                selector: 'rp-loader',
-                template: "\n    <div class=\"loader-wrapper\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" stroke=\"#3760a1\">\n        <g fill=\"none\" fill-rule=\"evenodd\" stroke-width=\"3\">\n          <circle class=\"ripple1\" cx=\"22\" cy=\"22\" r=\"19\">\n          </circle>\n          <circle class=\"ripple2\" cx=\"22\" cy=\"22\" r=\"19\">\n          </circle>\n        </g>\n      </svg>\n    </div>\n  ",
-                styles: [":host{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}:host .loader-wrapper{z-index:1100;position:absolute;width:54px;height:54px}:host .loader-wrapper svg{width:100%;height:100%}:host .loader-wrapper svg .ripple1{transform-origin:center;-webkit-animation:1.5s infinite ripple;animation:1.5s infinite ripple}:host .loader-wrapper svg .ripple2{transform-origin:center;-webkit-animation:1.5s .4s infinite ripple;animation:1.5s .4s infinite ripple}@-webkit-keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}"]
-            })
-        ], LoaderComponent);
-        return LoaderComponent;
+    var LoaderComponent = /** @class */ (function () {
+        function LoaderComponent() {
+        }
+        LoaderComponent = __decorate([
+            core.Component({
+                selector: 'rp-loader',
+                template: "\n    <div class=\"loader-wrapper\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" stroke=\"#3760a1\">\n        <g fill=\"none\" fill-rule=\"evenodd\" stroke-width=\"3\">\n          <circle class=\"ripple1\" cx=\"22\" cy=\"22\" r=\"19\">\n          </circle>\n          <circle class=\"ripple2\" cx=\"22\" cy=\"22\" r=\"19\">\n          </circle>\n        </g>\n      </svg>\n    </div>\n  ",
+                styles: [":host{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}:host .loader-wrapper{z-index:1100;position:absolute;width:54px;height:54px}:host .loader-wrapper svg{width:100%;height:100%}:host .loader-wrapper svg .ripple1{transform-origin:center;-webkit-animation:1.5s infinite ripple;animation:1.5s infinite ripple}:host .loader-wrapper svg .ripple2{transform-origin:center;-webkit-animation:1.5s .4s infinite ripple;animation:1.5s .4s infinite ripple}@-webkit-keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}"]
+            })
+        ], LoaderComponent);
+        return LoaderComponent;
     }());
 
-    var SharedModule = /** @class */ (function () {
-        function SharedModule() {
-        }
-        SharedModule = __decorate([
-            core.NgModule({
-                imports: [
-                    common.CommonModule
-                ],
-                declarations: [
-                    LoaderComponent
-                ],
-                exports: [
-                    LoaderComponent
-                ]
-            })
-        ], SharedModule);
-        return SharedModule;
+    var SharedModule = /** @class */ (function () {
+        function SharedModule() {
+        }
+        SharedModule = __decorate([
+            core.NgModule({
+                imports: [
+                    common.CommonModule
+                ],
+                declarations: [
+                    LoaderComponent
+                ],
+                exports: [
+                    LoaderComponent
+                ]
+            })
+        ], SharedModule);
+        return SharedModule;
     }());
 
-    var AnswersModule = /** @class */ (function () {
-        function AnswersModule() {
-        }
-        AnswersModule = __decorate([
-            core.NgModule({
-                imports: [
-                    common.CommonModule,
-                    SharedModule
-                ],
-                declarations: [
-                    AnswersComponent,
-                    AnswerComponent,
-                    VisibilityObserverDirective,
-                    VisibilityObserverMasterDirective
-                ],
-                exports: [
-                    AnswersComponent
-                ]
-            })
-        ], AnswersModule);
-        return AnswersModule;
+    var AnswersModule = /** @class */ (function () {
+        function AnswersModule() {
+        }
+        AnswersModule = __decorate([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    SharedModule
+                ],
+                declarations: [
+                    AnswersComponent,
+                    AnswerComponent,
+                    VisibilityObserverDirective,
+                    VisibilityObserverMasterDirective
+                ],
+                exports: [
+                    AnswersComponent
+                ]
+            })
+        ], AnswersModule);
+        return AnswersModule;
     }());
 
-    var SelectionViewModel = /** @class */ (function () {
-        function SelectionViewModel() {
-            this.children = [];
-            this.expanded = false;
-            this.thumbnail = '';
-        }
-        return SelectionViewModel;
-    }());
-    var SelectionsComponent = /** @class */ (function () {
-        function SelectionsComponent(_imageCacheService) {
-            this._imageCacheService = _imageCacheService;
-            this.selectionViewModels = [];
-            this.selectionClick = new core.EventEmitter();
-        }
-        Object.defineProperty(SelectionsComponent.prototype, "selections", {
-            set: function (value) {
-                this._prepareSelections(value);
-                this._loadThumbnails();
-            },
-            enumerable: true,
-            configurable: true
-        });
-        SelectionsComponent.prototype.ngOnInit = function () {
-        };
-        SelectionsComponent.prototype.expandClicked = function (selectionViewModel, mouseEvent) {
-            mouseEvent.preventDefault();
-            mouseEvent.stopImmediatePropagation();
-            selectionViewModel.expanded = !selectionViewModel.expanded;
-        };
-        SelectionsComponent.prototype.selectSelection = function (selection, mouseEvent) {
-            mouseEvent.preventDefault();
-            mouseEvent.stopImmediatePropagation();
-            this.selectionClick.next(selection);
-        };
-        SelectionsComponent.prototype._loadThumbnails = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
-                return __generator(this, function (_a) {
-                    if (this.selectionViewModels.length > 0) {
-                        this.selectionViewModels.forEach(function (viewModel) { return __awaiter(_this, void 0, void 0, 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 === "" ? null : imageSrc;
-                                        })];
-                                    case 1:
-                                        _a.sent();
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); });
-                    }
-                    return [2 /*return*/];
-                });
-            });
-        };
-        SelectionsComponent.prototype._prepareSelections = function (value) {
-            var _this = this;
-            this.selectionViewModels.length = 0;
-            var selectionViewModel;
-            value.forEach(function (s) {
-                if (s.presentationLevel === 1) {
-                    selectionViewModel = new SelectionViewModel();
-                    selectionViewModel.selection = s;
-                    _this.selectionViewModels.push(selectionViewModel);
-                }
-                else if (s.presentationLevel > 1) {
-                    if (selectionViewModel) {
-                        selectionViewModel.children.push(s);
-                    }
-                }
-            });
-        };
-        SelectionsComponent.ctorParameters = function () { return [
-            { type: ImageCacheService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], SelectionsComponent.prototype, "selections", null);
-        __decorate([
-            core.Output()
-        ], SelectionsComponent.prototype, "selectionClick", void 0);
-        SelectionsComponent = __decorate([
-            core.Component({
-                selector: "selections",
-                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' })),
-                        animations.state('*', animations.style({ 'height': '*' })),
-                        animations.transition('void <=> *', animations.animate(200))
-                    ])
-                ],
-                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;
+    var SelectionViewModel = /** @class */ (function () {
+        function SelectionViewModel() {
+            this.children = [];
+            this.expanded = false;
+            this.thumbnail = '';
+        }
+        return SelectionViewModel;
+    }());
+    var SelectionsComponent = /** @class */ (function () {
+        function SelectionsComponent(_imageCacheService) {
+            this._imageCacheService = _imageCacheService;
+            this.selectionViewModels = [];
+            this.selectionClick = new core.EventEmitter();
+        }
+        Object.defineProperty(SelectionsComponent.prototype, "selections", {
+            set: function (value) {
+                this._prepareSelections(value);
+                this._loadThumbnails();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        SelectionsComponent.prototype.ngOnInit = function () {
+        };
+        SelectionsComponent.prototype.expandClicked = function (selectionViewModel, mouseEvent) {
+            mouseEvent.preventDefault();
+            mouseEvent.stopImmediatePropagation();
+            selectionViewModel.expanded = !selectionViewModel.expanded;
+        };
+        SelectionsComponent.prototype.selectSelection = function (selection, mouseEvent) {
+            mouseEvent.preventDefault();
+            mouseEvent.stopImmediatePropagation();
+            this.selectionClick.next(selection);
+        };
+        SelectionsComponent.prototype._loadThumbnails = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    if (this.selectionViewModels.length > 0) {
+                        this.selectionViewModels.forEach(function (viewModel) { return __awaiter(_this, void 0, void 0, 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 === "" ? null : imageSrc;
+                                        })];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); });
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
+        SelectionsComponent.prototype._prepareSelections = function (value) {
+            var _this = this;
+            this.selectionViewModels.length = 0;
+            var selectionViewModel;
+            value.forEach(function (s) {
+                if (s.presentationLevel === 1) {
+                    selectionViewModel = new SelectionViewModel();
+                    selectionViewModel.selection = s;
+                    _this.selectionViewModels.push(selectionViewModel);
+                }
+                else if (s.presentationLevel > 1) {
+                    if (selectionViewModel) {
+                        selectionViewModel.children.push(s);
+                    }
+                }
+            });
+        };
+        SelectionsComponent.ctorParameters = function () { return [
+            { type: ImageCacheService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], SelectionsComponent.prototype, "selections", null);
+        __decorate([
+            core.Output()
+        ], SelectionsComponent.prototype, "selectionClick", void 0);
+        SelectionsComponent = __decorate([
+            core.Component({
+                selector: "selections",
+                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' })),
+                        animations.state('*', animations.style({ 'height': '*' })),
+                        animations.transition('void <=> *', animations.animate(200))
+                    ])
+                ],
+                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;
     }());
 
-    var SelectionsModule = /** @class */ (function () {
-        function SelectionsModule() {
-        }
-        SelectionsModule = __decorate([
-            core.NgModule({
-                imports: [
-                    common.CommonModule,
-                    SharedModule
-                ],
-                declarations: [
-                    SelectionsComponent
-                ],
-                exports: [
-                    SelectionsComponent
-                ]
-            })
-        ], SelectionsModule);
-        return SelectionsModule;
+    var SelectionsModule = /** @class */ (function () {
+        function SelectionsModule() {
+        }
+        SelectionsModule = __decorate([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    SharedModule
+                ],
+                declarations: [
+                    SelectionsComponent
+                ],
+                exports: [
+                    SelectionsComponent
+                ]
+            })
+        ], SelectionsModule);
+        return SelectionsModule;
     }());
 
     exports.AnswersComponent = AnswersComponent;