@colijnit/configurator 1.0.17 → 12.0.4

package/fesm2015/colijnit-configurator.js

@@ -1,24 +1,25 @@
-import { __awaiter, __decorate } from 'tslib';
-import { Mesh, ObjectLoader, Camera, Group, TextureLoader, RepeatWrapping, Object3D, Box3, Vector3, Vector2, Euler, Quaternion, Color, Texture, sRGBEncoding, MeshPhongMaterial, MeshStandardMaterial, Scene } from 'three';
-import { Options } from '@colijnit/configuratorapi/build/model/options';
+import { __awaiter } from 'tslib';
+import * as THREE from 'three';
+import { Mesh, sRGBEncoding } from 'three';
 import { DecoNode } from '@colijnit/configuratorapi/build/model/deco-node';
 import { BusinessObjectFactory } from '@colijnit/configuratorapi/build/service/business-object-factory';
 import { Selection } from '@colijnit/configuratorapi/build/model/selection';
 import { DecoNodeType } from '@colijnit/configuratorapi/build/enum/deco-node-type.enum';
 import axios from 'axios';
 import { DecoNodeKind } from '@colijnit/configuratorapi/build/enum/deco-node-kind.enum';
-import * as JSZip from 'jszip';
+import { Subject, BehaviorSubject } from 'rxjs';
+import JSZip from 'jszip';
 import { Article } from '@colijnit/configuratorapi/build/model/article';
-import { Injectable, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, EventEmitter, Input, Output, Component, Directive, ElementRef, NgModule } from '@angular/core';
 import { Configurator } from '@colijnit/configuratorapi/build/configurator';
 import { notNill } from '@colijnit/configuratorapi/build/utils/function/not-nill.function';
 import { NodeType } from '@colijnit/configuratorapi/build/enum/node-type.enum';
 import { isNill } from '@colijnit/configuratorapi/build/utils/function/is-nill.function';
-import { BehaviorSubject } from 'rxjs';
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, Directive, ElementRef, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
-class ObjectUtils {
+class ObjectUtils$1 {
     static DisposeMaterial(material) {
         if (!material) {
             return;
@@ -64,7 +65,7 @@ class ObjectUtils {
         });
     }
 }
-ObjectUtils.materialProps = ['map', 'lightMap', 'bumpMap', 'normalMap', 'specularMap', 'envMap', 'aoMap', 'roughnessMap', 'metalnessMap'];
+ObjectUtils$1.materialProps = ['map', 'lightMap', 'bumpMap', 'normalMap', 'specularMap', 'envMap', 'aoMap', 'roughnessMap', 'metalnessMap'];
 
 // Static utility functions holder related to files.
 // @dynamic
@@ -85,6 +86,9 @@ class FileUtils {
     }
     static FileExists(url, assetPath) {
         return __awaiter(this, void 0, void 0, function* () {
+            if (!assetPath.endsWith('/')) {
+                assetPath = assetPath + '/';
+            }
             const result = yield axios({
                 method: 'get',
                 url: `${assetPath}getFiles.php?assetUrl=${url}`,
@@ -209,10 +213,10 @@ class ThreedUtils {
     }
     clearCache() {
         const objs = Array.from(this._objectCache.values());
-        objs.forEach(o => ObjectUtils.DisposeObject(o));
+        objs.forEach(o => ObjectUtils$1.DisposeObject(o));
         this._objectCache.clear();
     }
-    download3DSource(fileName) {
+    download3DSource(fileName, assetPath) {
         return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
             fileName = fileName.replace('.unity3d', '');
             let lookupFileName = fileName + (fileName.indexOf('.glb') < 0 ? '.glb' : '');
@@ -220,7 +224,7 @@ class ThreedUtils {
                 resolve(this._objectCache.get(lookupFileName));
                 return;
             }
-            if (yield FileUtils.FileExists(lookupFileName, 'https://cdn1.colijn-it.nl/content43/')) {
+            if (yield FileUtils.FileExists(lookupFileName, assetPath)) {
                 this.loadGlbSource(lookupFileName).then((obj) => {
                     this._objectCache.set(lookupFileName, obj);
                     resolve(obj);
@@ -245,7 +249,7 @@ class ThreedUtils {
                 return Promise.resolve(this._objectCache.get(filePath));
             }
             const json = yield this._readJsonFile(filePath);
-            const loader = new ObjectLoader();
+            const loader = new THREE.ObjectLoader();
             loader.crossOrigin = 'Anonymous';
             return new Promise((resolve, reject) => {
                 try {
@@ -264,7 +268,7 @@ class ThreedUtils {
             if (this._objectCache.has(filePath)) {
                 return Promise.resolve(this._objectCache.get(filePath));
             }
-            const loader = new ObjectLoader();
+            const loader = new THREE.ObjectLoader();
             loader.setCrossOrigin('Anonymous');
             loader.setResourcePath('');
             return new Promise((resolve, reject) => {
@@ -301,7 +305,7 @@ class ThreedUtils {
         return __awaiter(this, void 0, void 0, function* () {
             const obj = yield this.loadGlbModel(file, false);
             if (obj) {
-                obj.children = obj.children.filter(c => !(c instanceof Camera));
+                obj.children = obj.children.filter(c => !(c instanceof THREE.Camera));
                 obj.children.sort((a, b) => a['name'] < b['name'] ? 1 : -1);
                 obj.children.forEach((c) => {
                     c.traverse((t) => {
@@ -309,7 +313,7 @@ class ThreedUtils {
                     });
                     c.visible = false;
                 });
-                if (obj.children.length === 1 && obj.children[0] instanceof Group) { // flatten children
+                if (obj.children.length === 1 && obj.children[0] instanceof THREE.Group) { // flatten children
                     const children = obj.children[0].children.slice();
                     obj.children.length = 0;
                     obj.children = children;
@@ -322,11 +326,11 @@ class ThreedUtils {
         return __awaiter(this, void 0, void 0, function* () {
             // url = this._includeBaseUrl(url);
             return new Promise((resolve, reject) => {
-                const textureLoader = new TextureLoader();
+                const textureLoader = new THREE.TextureLoader();
                 // textureLoader.setBaseU(this._settingsService.settings.assetPath);
                 textureLoader.load(url, (texture) => {
-                    texture.wrapT = RepeatWrapping;
-                    texture.wrapS = RepeatWrapping;
+                    texture.wrapT = THREE.RepeatWrapping;
+                    texture.wrapS = THREE.RepeatWrapping;
                     texture.repeat.set(1, 1);
                     texture.needsUpdate = true;
                     return resolve(texture);
@@ -335,13 +339,13 @@ class ThreedUtils {
         });
     }
     _cleanedUpObjects(object, cleanUp = true) {
-        let obj = new Object3D();
+        let obj = new THREE.Object3D();
         object.children.forEach((c) => {
-            if (!(c instanceof Camera)) {
-                if (cleanUp && c instanceof Group || (c.children.length === 1 && c.children[0] instanceof Group)) {
+            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 Mesh)) || (!(c instanceof Mesh) && !c.name && c.children.length > 0)) {
+                else if ((cleanUp && !(c instanceof THREE.Mesh)) || (!(c instanceof THREE.Mesh) && !c.name && c.children.length > 0)) {
                     c.children.forEach((child) => {
                         child.translateY(c.position.y);
                     });
@@ -364,10 +368,10 @@ class ThreedUtils {
                 }
             }
         });
-        const boundingBox = new Box3().setFromObject(obj);
-        const bbCenterPivot = new Vector3();
+        const boundingBox = new THREE.Box3().setFromObject(obj);
+        const bbCenterPivot = new THREE.Vector3();
         boundingBox.getCenter(bbCenterPivot);
-        const delta = new Vector3().add(bbCenterPivot).negate();
+        const delta = new THREE.Vector3().add(bbCenterPivot).negate();
         obj.children.forEach((cc) => {
             cc.position.add(delta);
         });
@@ -375,7 +379,7 @@ class ThreedUtils {
     }
     _addGroupChildrenToObject(group, obj, cleanUp = true) {
         group.children.forEach((gc) => {
-            if (cleanUp && gc instanceof Group) {
+            if (cleanUp && gc instanceof THREE.Group) {
                 this._addGroupChildrenToObject(gc, obj);
             }
             else {
@@ -389,7 +393,7 @@ class ThreedUtils {
     _iterateChildren(children, callback) {
         for (let i = 0; i < children.length; i++) {
             const child = children[i];
-            if (child instanceof Mesh) {
+            if (child instanceof THREE.Mesh) {
                 callback(child);
             }
             else {
@@ -450,17 +454,17 @@ class SceneUtils {
     }
     static Convert3DPointToScreenPoint(point, camera, width, height) {
         if (!point) {
-            return new Vector2();
+            return new THREE.Vector2();
         }
         const vector = point.clone().project(camera);
         vector.x = (vector.x + 1) / 2 * width;
         vector.y = -(vector.y - 1) / 2 * height;
-        return new Vector2(vector.x, vector.y);
+        return new THREE.Vector2(vector.x, vector.y);
     }
     static CanSelectorConnect(con1, con2) {
-        const con1Name = con1 instanceof Object3D ? con1.name : con1.connector;
-        const con2Name = con2 instanceof Object3D ? con2.name : con2.connector;
-        const sameParent = con1 instanceof Object3D && con2 instanceof Object3D ? con1.parent === con2.parent : false;
+        const con1Name = con1 instanceof THREE.Object3D ? con1.name : con1.connector;
+        const con2Name = con2 instanceof THREE.Object3D ? con2.name : con2.connector;
+        const sameParent = con1 instanceof THREE.Object3D && con2 instanceof THREE.Object3D ? con1.parent === con2.parent : false;
         const parts1 = con1Name.toUpperCase().split('_'), parts2 = con2Name.toUpperCase().split('_');
         if (parts1.length >= 3 && parts2.length >= 3 && !sameParent) {
             const connectable = parts1[0] === 'C' && parts2[0] === 'C' &&
@@ -475,29 +479,29 @@ class SceneUtils {
         }
         con1['connectedTo'] = con2.parent.name;
         con2['connectedTo'] = con1.parent.name;
-        const motherRotation = new Euler(0, 0, 0);
-        const motherPosition = new Vector3(0, 0, 0);
+        const motherRotation = new THREE.Euler(0, 0, 0);
+        const 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);
-        const con1Quat = new Quaternion();
+        const con1Quat = new THREE.Quaternion();
         con1.getWorldQuaternion(con1Quat);
-        const con2Quat = new Quaternion();
+        const con2Quat = new THREE.Quaternion();
         con2.getWorldQuaternion(con2Quat);
-        const con1QuatParent = new Quaternion();
+        const con1QuatParent = new THREE.Quaternion();
         con1.parent.getWorldQuaternion(con1QuatParent);
-        const con2QuatParent = new Quaternion();
+        const con2QuatParent = new THREE.Quaternion();
         con2.parent.getWorldQuaternion(con2QuatParent);
-        const rotation = new Quaternion().multiplyQuaternions(con1Quat.invert(), con2Quat).multiply(new Quaternion().multiplyQuaternions(con1QuatParent, con1QuatParent));
+        const 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
-        const con1Pos = new Vector3();
+        const con1Pos = new THREE.Vector3();
         con1.getWorldPosition(con1Pos);
-        const con2Pos = new Vector3();
+        const con2Pos = new THREE.Vector3();
         con2.getWorldPosition(con2Pos);
         const move = con1Pos.sub(con2Pos);
         con2.parent.position.x += move.x;
@@ -516,7 +520,7 @@ class SceneUtils {
 
 class Material {
     constructor() {
-        this.specular = new Color(0.3, 0.3, 0.3);
+        this.specular = new THREE.Color(0.3, 0.3, 0.3);
         this.shininess = 0;
         this.repeatX = 4;
         this.repeatY = 4;
@@ -533,15 +537,15 @@ class ImageUtils {
             }
             else {
                 if (!base64) {
-                    resolve(new Texture());
+                    resolve(new THREE.Texture());
                 }
                 else {
-                    const loader = new TextureLoader();
+                    const loader = new THREE.TextureLoader();
                     loader.load(base64, (texture) => {
                         texture.anisotropy = 16;
-                        texture.wrapS = RepeatWrapping;
-                        texture.wrapT = RepeatWrapping;
-                        texture.repeat = new Vector2(material ? material.repeatX : 1, material ? material.repeatY : 1);
+                        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);
@@ -599,17 +603,39 @@ class AssetUtils {
                 // material.normal.repeat.set(1, 1);
                 // material.normal.flipY = false;
             }
-            if (asset.ao) {
-                material.ao = yield ImageUtils.CreateTextureFromBase64(asset.id + '_ao', asset.ao, material);
-                material.aoFilename = asset.aoFilename;
+            if (asset.orm) {
+                material.ao = yield ImageUtils.CreateTextureFromBase64(asset.id + '_orm', asset.orm, material);
+                material.roughness = material.ao;
+                material.metalness = material.ao;
+                material.aoFilename = asset.ormFilename;
+                material.roughnessFilename = asset.ormFilename;
+                material.metalnessFilename = asset.ormFilename;
+            }
+            else {
+                if (asset.ao) {
+                    material.ao = yield ImageUtils.CreateTextureFromBase64(asset.id + '_ao', asset.ao, material);
+                    material.aoFilename = asset.aoFilename;
+                }
+                if (asset.metalness) {
+                    material.metalness = yield ImageUtils.CreateTextureFromBase64(asset.id + '_metalness', asset.metalness, material);
+                    material.metalnessFilename = asset.metalnessFilename;
+                }
+                if (asset.roughness) {
+                    material.roughness = yield ImageUtils.CreateTextureFromBase64(asset.id + '_roughness', asset.roughness, material);
+                    material.roughnessFilename = asset.roughnessFilename;
+                }
+            }
+            if (asset.displacement) {
+                material.displacement = yield ImageUtils.CreateTextureFromBase64(asset.id + '_displacement', asset.displacement, material);
+                material.displacementFilename = asset.displacementFilename;
             }
-            if (asset.metalness) {
-                material.metalness = yield ImageUtils.CreateTextureFromBase64(asset.id + '_metalness', asset.metalness, material);
-                material.metalnessFilename = asset.metalnessFilename;
+            if (asset.envMap) {
+                material.envMap = yield ImageUtils.CreateTextureFromBase64(asset.id + '_env', asset.envMap, material);
+                material.envMapFilename = asset.envMapFilename;
             }
-            if (asset.roughness) {
-                material.roughness = yield ImageUtils.CreateTextureFromBase64(asset.id + '_roughness', asset.roughness, material);
-                material.roughnessFilename = asset.roughnessFilename;
+            if (asset.emissive) {
+                material.emissive = yield ImageUtils.CreateTextureFromBase64(asset.id + '_emissive', asset.emissive, material);
+                material.emissiveFileName = asset.emissiveFilename;
             }
             return material;
         });
@@ -622,16 +648,16 @@ class AssetUtils {
         }
         const level = parseFloat(settings['level']);
         if (!isNaN(level)) {
-            material.specular = new Color(level, level, level);
+            material.specular = new THREE.Color(level, level, level);
         }
         const repeatObjectUsed = settings.hasOwnProperty('repeat');
         const repeatx = repeatObjectUsed ? parseFloat(settings['repeat']['repeatx']) : parseFloat(settings['repeatx']);
         if (!isNaN(repeatx)) {
-            material.repeatX = Math.max(1, repeatx);
+            material.repeatX = repeatx;
         }
         const repeaty = repeatObjectUsed ? parseFloat(settings['repeat']['repeaty']) : parseFloat(settings['repeaty']);
         if (!isNaN(repeaty)) {
-            material.repeatY = Math.max(1, repeaty);
+            material.repeatY = repeaty;
         }
         const metalness = parseFloat(settings['metalness']);
         if (!isNaN(metalness)) {
@@ -641,6 +667,36 @@ class AssetUtils {
         if (!isNaN(roughness)) {
             material.roughnessValue = Math.min(1, roughness);
         }
+        if (settings.hasOwnProperty('side')) {
+            material.side = settings.side;
+        }
+        if (settings.hasOwnProperty('sheenColor')) {
+            material.sheenColor = settings.sheenColor;
+        }
+        if (settings.hasOwnProperty('opacity')) {
+            material.opacity = settings.opacity;
+        }
+        if (settings.hasOwnProperty('transparent')) {
+            material.transparent = settings.transparent;
+        }
+        if (settings.hasOwnProperty('envMap')) {
+            material.envMap = settings.envMap;
+        }
+        if (settings.hasOwnProperty('envMapIntensity')) {
+            material.envMapIntensity = settings.envMapIntensity;
+        }
+        if (settings.hasOwnProperty('reflectivity')) {
+            material.reflectivity = settings.reflectivity;
+        }
+        if (settings.hasOwnProperty('displacementValue')) {
+            material.displacementValue = settings.displacementValue;
+        }
+        if (settings.hasOwnProperty('transparency')) {
+            material.transparency = settings.transparency;
+        }
+        if (settings.hasOwnProperty('transmission')) {
+            material.transmission = settings.transmission;
+        }
     }
 }
 
@@ -650,11 +706,16 @@ class Variation {
 class VariationSettings {
     constructor() {
         this.settings = {};
+        this.loading = false;
+        this.loaded = new Subject();
     }
 }
 
 // @dynamic
 class VariationUtils {
+    static ClearCache() {
+        this.MaterialCache.clear();
+    }
     static LoadVariation(assetPath, fileName) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!fileName) {
@@ -672,7 +733,14 @@ class VariationUtils {
                     console.error('downloadVariation not defined in window global');
                     return null;
                 }
-                const file = yield window.downloadVariation(`${assetPath.replace('https://cdn1.colijn-it.nl/', '')}variation/${fileName}`);
+                let file;
+                if (this.MaterialCache.has(id)) {
+                    file = this.MaterialCache.get(id);
+                }
+                else {
+                    file = yield window.downloadVariation(`${assetPath.replace('https://cdn1.colijn-it.nl/', '')}variation/${fileName}`);
+                    this.MaterialCache.set(id, file);
+                }
                 return yield VariationUtils.GetVariationSettingsFromFile(id, file);
             }
             catch (err) {
@@ -721,15 +789,17 @@ class VariationUtils {
             const variationSettings = new VariationSettings();
             let index;
             variationSettings.id = id;
-            if (zipContent.files['index.json']) {
-                const indexFile = yield zipContent.files['index.json'].async('string');
-                index = JSON.parse(indexFile);
-            }
-            if (index) {
-                yield VariationUtils.CreateSettingsBasedOnIndex(index, variationSettings, zipContent);
-            }
-            else {
-                yield VariationUtils.CreateSettingsBasedOnFileName(variationSettings, zipContent);
+            if (zipContent) {
+                if (zipContent.files['index.json']) {
+                    const indexFile = yield zipContent.files['index.json'].async('string');
+                    index = JSON.parse(indexFile);
+                }
+                if (index) {
+                    yield VariationUtils.CreateSettingsBasedOnIndex(index, variationSettings, zipContent);
+                }
+                else {
+                    yield VariationUtils.CreateSettingsBasedOnFileName(variationSettings, zipContent);
+                }
             }
             return variationSettings;
         });
@@ -740,34 +810,68 @@ class VariationUtils {
                 variationSettings.normal = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.normalFile], index.normalFile);
                 variationSettings.normalFilename = index.normalFile;
             }
-            if (index.aoFile) {
-                variationSettings.ao = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.aoFile], index.aoFile);
-                variationSettings.aoFilename = index.aoFile;
-            }
-            if (index.metalnessFile) {
-                variationSettings.metalness = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.metalnessFile], index.metalnessFile);
-                variationSettings.metalnessFilename = index.metalnessFile;
-            }
-            if (index.roughnessFile) {
-                variationSettings.roughness = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.roughnessFile], index.roughnessFile);
-                variationSettings.roughnessFilename = index.roughnessFile;
-            }
             if (index.diffuseFile) {
                 variationSettings.texture = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.diffuseFile], index.diffuseFile);
                 variationSettings.textureFilename = index.diffuseFile;
             }
+            if (index.ormFile) {
+                variationSettings.orm = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.ormFile], index.ormFile);
+                variationSettings.ormFilename = index.ormFile;
+            }
+            else {
+                if (index.aoFile) {
+                    variationSettings.ao = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.aoFile], index.aoFile);
+                    variationSettings.aoFilename = index.aoFile;
+                }
+                if (index.metalnessFile) {
+                    variationSettings.metalness = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.metalnessFile], index.metalnessFile);
+                    variationSettings.metalnessFilename = index.metalnessFile;
+                }
+                if (index.roughnessFile) {
+                    variationSettings.roughness = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.roughnessFile], index.roughnessFile);
+                    variationSettings.roughnessFilename = index.roughnessFile;
+                }
+            }
+            if (index.displacementFile) {
+                variationSettings.displacement = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.displacementFile], index.displacementFile);
+                variationSettings.displacementFilename = index.displacementFile;
+            }
+            if (index.emissiveFile) {
+                variationSettings.emissive = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.emissiveFile], index.emissiveFile);
+                variationSettings.emissiveFilename = index.emissiveFile;
+            }
+            if (index.envMapFile) {
+                variationSettings.envMap = yield VariationUtils.LoadFileContentFromZip(zipContent.files[index.envMapFile], index.envMapFile);
+                variationSettings.envMapFilename = index.envMapFile;
+            }
             variationSettings.settings =
                 (yield VariationUtils.LoadFileContentFromZip(zipContent.files['repeat.json'], 'repeat.json', false)) || {};
             Object.assign(variationSettings.settings, index.repeat);
             variationSettings.settings.metalness = index.metalness;
             variationSettings.settings.roughness = index.roughness;
+            if (index.sheenColor) {
+                variationSettings.settings.sheenColor = new THREE.Color(index.sheenColor.r, index.sheenColor.g, index.sheenColor.b);
+            }
+            variationSettings.settings.envMap = index.envMap;
+            variationSettings.settings.envMapIntensity = index.envMapIntensity;
+            variationSettings.settings.transparent = index.transparent;
+            variationSettings.settings.opacity = index.opacity;
+            if (index.emissiveValue) {
+                variationSettings.settings.emissiveValue = new THREE.Color(index.emissiveValue.r, index.emissiveValue.g, index.emissiveValue.b);
+            }
+            variationSettings.settings.emissiveIntensity = index.emissiveIntensity;
+            variationSettings.settings.reflectivity = index.reflectivity;
+            variationSettings.settings.displacementValue = index.displacementValue;
+            variationSettings.settings.side = index.side;
+            variationSettings.settings.transparency = index.transparency;
+            variationSettings.settings.transmission = index.transmission;
         });
     }
     static CreateSettingsBasedOnFileName(variationSettings, zipContent) {
         return __awaiter(this, void 0, void 0, function* () {
             const allLoaded = [];
             for (const fileName in zipContent.files) {
-                if (zipContent.files[fileName]) {
+                if (zipContent.files.hasOwnProperty(fileName)) {
                     const file = yield zipContent.files[fileName];
                     if (file.name.toLowerCase().indexOf('normal') > -1 && this.FileIsImage(file.name)) {
                         allLoaded.push(zipContent.files[fileName].async('base64').then((normalFile) => {
@@ -799,6 +903,24 @@ class VariationUtils {
                             variationSettings.textureFilename = fileName;
                         }));
                     }
+                    else if (file.name.toLowerCase().indexOf('displacement') > -1 && this.FileIsImage(file.name)) {
+                        allLoaded.push(zipContent.files[fileName].async('base64').then((displacementFile) => {
+                            variationSettings.displacement = `data:image/${this.GetBase64FileType(file.name)};base64,${displacementFile}`;
+                            variationSettings.displacementFilename = fileName;
+                        }));
+                    }
+                    else if (file.name.toLowerCase().indexOf('emissive') > -1 && this.FileIsImage(file.name)) {
+                        allLoaded.push(zipContent.files[fileName].async('base64').then((emissiveFile) => {
+                            variationSettings.emissive = `data:image/${this.GetBase64FileType(file.name)};base64,${emissiveFile}`;
+                            variationSettings.emissiveFilename = fileName;
+                        }));
+                    }
+                    else if (file.name.toLowerCase().indexOf('envMap') > -1 && this.FileIsImage(file.name)) {
+                        allLoaded.push(zipContent.files[fileName].async('base64').then((envMapFile) => {
+                            variationSettings.envMap = `data:image/${this.GetBase64FileType(file.name)};base64,${envMapFile}`;
+                            variationSettings.envMapFilename = fileName;
+                        }));
+                    }
                     else if (file.name.indexOf('.jp') > -1) {
                         allLoaded.push(zipContent.files[fileName].async('base64').then((textureFile) => {
                             variationSettings.texture = 'data:image/jpeg;base64,' + textureFile;
@@ -809,7 +931,7 @@ class VariationUtils {
                         allLoaded.push(zipContent.files[fileName].async('string').then((settingsFile) => {
                             const settingsFileObj = JSON.parse(settingsFile);
                             for (const key in settingsFileObj) {
-                                if (settingsFileObj[key]) {
+                                if (settingsFileObj.hasOwnProperty(key)) {
                                     variationSettings.settings[key] = settingsFileObj[key];
                                 }
                             }
@@ -866,9 +988,13 @@ class VariationUtils {
     // Get the content
     static GetZipContent(file) {
         return __awaiter(this, void 0, void 0, function* () {
-            const jszip = new JSZip();
-            const content = yield jszip.loadAsync(file);
-            return content;
+            try {
+                const jszip = new JSZip();
+                return yield jszip.loadAsync(file);
+            }
+            catch (e) {
+                return null;
+            }
         });
     }
 }
@@ -879,19 +1005,33 @@ class VariationHelper {
         this._lastKnownVariations = new Map();
     }
     clearCache() {
-        const valueMap = Array.from(this._lastKnownVariations.values());
-        for (let i = 0; i < valueMap.length; i++) {
-            const values = Array.from(valueMap[i].values());
-            values.forEach((variations) => {
-                variations.forEach((variation) => {
-                    variation.material.texture.dispose();
-                    variation.material.normal.dispose();
-                    variation.material.metalness.dispose();
-                    variation.material.roughness.dispose();
-                    variation.material.ao.dispose();
-                });
+        const variationMap = Array.from(this._lastKnownVariations.values());
+        variationMap.forEach((variations) => {
+            variations.forEach((variation) => {
+                try {
+                    if (variation.material) {
+                        if (variation.material.texture) {
+                            variation.material.texture.dispose();
+                        }
+                        if (variation.material.normal) {
+                            variation.material.normal.dispose();
+                        }
+                        if (variation.material.metalness) {
+                            variation.material.metalness.dispose();
+                        }
+                        if (variation.material.roughness) {
+                            variation.material.roughness.dispose();
+                        }
+                        if (variation.material.ao) {
+                            variation.material.ao.dispose();
+                        }
+                    }
+                }
+                catch (e) {
+                }
             });
-        }
+        });
+        VariationUtils.ClearCache();
     }
     loadPart(obj, parts, usePbr = false) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -917,15 +1057,15 @@ class VariationHelper {
             }
         });
     }
-    loadVariation(instanceId, obj, parts, usePbr = false) {
+    loadVariation(obj, parts, usePbr = false) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
                 const len = parts.length;
                 for (let i = 0; i < len; i++) {
                     const 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);
+                        if (this._getLastKnownVariations(parts[i].nodeId)) {
+                            parts[i].variations = this._getLastKnownVariations(parts[i].nodeId);
                             this._applyVariations(obj, parts[i], usePbr);
                             continue;
                         }
@@ -945,7 +1085,7 @@ class VariationHelper {
                         newVariation.material = yield AssetUtils.CreateMaterialFromAsset(variationSettings);
                         lastKnownVariations.push(newVariation);
                     }
-                    this._setLastKnownVariations(instanceId, parts[i].nodeId, lastKnownVariations);
+                    this._setLastKnownVariations(parts[i].nodeId, lastKnownVariations);
                     parts[i].variations = lastKnownVariations;
                     this._applyVariations(obj, parts[i], usePbr);
                 }
@@ -970,7 +1110,7 @@ class VariationHelper {
             const child = children[i];
             if (child !== null && child !== undefined) {
                 child.traverse((mesh) => {
-                    if (mesh instanceof Mesh && partMaterial) {
+                    if (mesh instanceof THREE.Mesh && partMaterial) {
                         if (Array.isArray(mesh.material)) { // multimaterial support
                             for (let j = 0, jlen = mesh.material.length; j < jlen; j++) {
                                 if (mesh.material[j].name.toLowerCase().indexOf('fixed_frame') !== -1) {
@@ -995,7 +1135,7 @@ class VariationHelper {
             const child = children[i];
             if (child !== null && child !== undefined) {
                 child.traverse((mesh) => {
-                    if (mesh instanceof Mesh && part.variations && part.variations.length > 0 && mesh.name.toLowerCase().indexOf('c_')) {
+                    if (mesh instanceof THREE.Mesh && part.variations && part.variations.length > 0 && mesh.name.toLowerCase().indexOf('c_')) {
                         for (let j = 0; j < part.variations.length; j++) {
                             const variation = part.variations[j];
                             if (variation.material) {
@@ -1022,82 +1162,188 @@ class VariationHelper {
     _setMeshMaterialFromVariation(name, variation, usePbr = false) {
         if (variation.material.texture) {
             variation.material.texture.needsUpdate = true;
+            variation.material.texture.mapping = THREE.EquirectangularReflectionMapping;
         }
         if (!usePbr) {
-            const material = new MeshPhongMaterial({
+            const newMaterial = 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;
+            newMaterial.color.setRGB(0.8, 0.8, 0.8);
+            newMaterial.needsUpdate = true;
+            return newMaterial;
         }
-        else {
+        if (variation.material.sheenColor || variation.material.reflectivity) {
             const params = {
-                // side: DoubleSide,
+                // side: material.side ? material.side : FrontSide,
                 name: name,
                 roughness: variation.material.roughnessValue ? variation.material.roughnessValue : 1,
                 metalness: variation.material.metalnessValue ? variation.material.metalnessValue : 0,
+                envMapIntensity: variation.material.envMapIntensity ? variation.material.envMapIntensity : 0.01,
+                clearcoatMap: variation.material.clearcoatMap ? variation.material.clearcoatMap : null,
+                clearcoatRoughnessMap: variation.material.clearcoatRoughnessMap ? variation.material.clearcoatRoughnessMap : null,
+                // wireframe: true,
+                // opacity: 0.3,
+                // transparent: true,
             };
+            if (variation.material.displacementValue) {
+                params.displacementScale = variation.material.displacementValue;
+            }
+            if (variation.material.sheenColor) {
+                params.sheen = variation.material.sheenColor;
+            }
+            if (variation.material.opacity) {
+                params.opacity = variation.material.opacity;
+            }
+            if (variation.material.transparent) {
+                params.transparent = variation.material.transparent;
+            }
+            if (variation.material.emissiveValue) {
+                params.emissive = variation.material.emissiveValue;
+            }
+            if (variation.material.emissiveIntensityValue) {
+                params.emissiveIntensity = variation.material.emissiveIntensityValue;
+            }
             if (variation.material.texture) {
                 params.map = variation.material.texture;
+                params.map.needsUpdate = true;
             }
             if (variation.material.ao) {
                 params.aoMap = variation.material.ao;
+                params.aoMap.needsUpdate = true;
             }
             if (variation.material.roughness) {
                 params.roughnessMap = variation.material.roughness;
+                params.roughnessMap.needsUpdate = true;
+                // variation.material.roughness.magFilter = NearestFilter;
             }
             if (variation.material.metalness) {
                 params.metalnessMap = variation.material.metalness;
+                params.metalnessMap.needsUpdate = true;
             }
             if (variation.material.normal) {
                 params.normalMap = variation.material.normal;
+                params.normalMap.needsUpdate = true;
+            }
+            if (variation.material.displacement) {
+                params.displacementMap = variation.material.displacement;
+                params.displacementMap.needsUpdate = true;
+            }
+            if (variation.material.emissive) {
+                params.emissiveMap = variation.material.emissive;
+                params.emissiveMap.needsUpdate = true;
+            }
+            if (variation.material.envMap) {
+                if (variation.material.envMapIntensity != null || 0) {
+                    params.envMap = variation.material.envMap;
+                    params.envMap.needsUpdate = true;
+                    variation.material.envMap.mapping = THREE.EquirectangularReflectionMapping;
+                    variation.material.envMap.minFilter = THREE.NearestFilter;
+                    variation.material.envMap.magFilter = THREE.NearestFilter;
+                }
             }
-            const material = new MeshStandardMaterial(params);
-            material.color.setRGB(1, 1, 1);
-            material.needsUpdate = true;
-            return material;
-        }
-    }
-    _setLastKnownVariations(instanceId, id, variation) {
-        if (this._lastKnownVariations.has(instanceId)) {
-            const variations = this._lastKnownVariations.get(instanceId);
-            variations.set(id, variation);
+            if (variation.material.reflectivity) {
+                params.reflectivity = variation.material.reflectivity;
+            }
+            if (variation.material.side) {
+                params.side = variation.material.side;
+            }
+            const newMaterial = new THREE.MeshPhysicalMaterial(params);
+            newMaterial.color.setRGB(1, 1, 1);
+            newMaterial.needsUpdate = true;
+            if (variation.material.transmission) {
+                newMaterial.transmission = variation.material.transmission;
+            }
+            return newMaterial;
         }
         else {
-            const variations = new Map();
-            this._lastKnownVariations.set(instanceId, variations.set(id, variation));
+            const params = {
+                // side: material.side ? material.side : FrontSide,
+                name: name,
+                roughness: variation.material.roughnessValue ? variation.material.roughnessValue : 1,
+                metalness: variation.material.metalnessValue ? variation.material.metalnessValue : 0,
+                envMapIntensity: variation.material.envMapIntensity ? variation.material.envMapIntensity : 0.01
+                // wireframe: true,
+                // opacity: 0.3,
+                // transparent: true,
+            };
+            if (variation.material.displacementValue) {
+                params.displacementScale = variation.material.displacementValue;
+            }
+            if (variation.material.opacity) {
+                params.opacity = variation.material.opacity;
+            }
+            if (variation.material.transparent) {
+                params.transparent = variation.material.transparent;
+            }
+            if (variation.material.emissiveValue) {
+                params.emissive = variation.material.emissiveValue;
+            }
+            if (variation.material.emissiveIntensityValue) {
+                params.emissiveIntensity = variation.material.emissiveIntensityValue;
+            }
+            if (variation.material.texture) {
+                params.map = variation.material.texture;
+                params.map.needsUpdate = true;
+            }
+            if (variation.material.ao) {
+                params.aoMap = variation.material.ao;
+                params.aoMap.needsUpdate = true;
+            }
+            if (variation.material.roughness) {
+                params.roughnessMap = variation.material.roughness;
+                params.roughnessMap.needsUpdate = true;
+                // variation.material.roughness.magFilter = NearestFilter;
+            }
+            if (variation.material.metalness) {
+                params.metalnessMap = variation.material.metalness;
+                params.metalnessMap.needsUpdate = true;
+            }
+            if (variation.material.normal) {
+                params.normalMap = variation.material.normal;
+                params.normalMap.needsUpdate = true;
+            }
+            if (variation.material.displacement) {
+                params.displacementMap = variation.material.displacement;
+                params.displacementMap.needsUpdate = true;
+            }
+            if (variation.material.emissive) {
+                params.emissiveMap = variation.material.emissive;
+                params.emissiveMap.needsUpdate = true;
+            }
+            if (variation.material.envMap) {
+                if (variation.material.envMapIntensity != null || 0) {
+                    params.envMap = variation.material.envMap;
+                    params.envMap.needsUpdate = true;
+                    variation.material.envMap.mapping = THREE.EquirectangularReflectionMapping;
+                    variation.material.envMap.minFilter = THREE.NearestFilter;
+                    variation.material.envMap.magFilter = THREE.NearestFilter;
+                }
+            }
+            if (variation.material.side) {
+                params.side = variation.material.side;
+            }
+            const newMaterial = new THREE.MeshStandardMaterial(params);
+            newMaterial.color.setRGB(1, 1, 1);
+            newMaterial.needsUpdate = true;
+            return newMaterial;
         }
     }
-    _getLastKnownVariations(instanceId, id) {
-        if (this._lastKnownVariations.has(instanceId)) {
-            const variations = this._lastKnownVariations.get(instanceId);
-            if (variations.has(id)) {
-                return variations.get(id);
-            }
+    _setLastKnownVariations(id, variation) {
+        this._lastKnownVariations.set(id, variation);
+    }
+    _getLastKnownVariations(id) {
+        if (this._lastKnownVariations.has(id)) {
+            return this._lastKnownVariations.get(id);
         }
         return null;
     }
 }
 
-let ServiceLocator = class ServiceLocator {
-};
-ServiceLocator.injector = undefined;
-ServiceLocator = __decorate([
-    Injectable()
-], ServiceLocator);
-
-let ConfiguratorService = class ConfiguratorService {
-    constructor(_injector) {
-        this._injector = _injector;
-        if (!ServiceLocator.injector) {
-            ServiceLocator.injector = _injector;
-        }
-    }
+class ConfiguratorService {
     initApi(options) {
         this._configuratorApi = new Configurator(options);
     }
@@ -1165,20 +1411,61 @@ let ConfiguratorService = class ConfiguratorService {
             return yield this._configuratorApi.selectAnswer(answer, showLoader);
         });
     }
-};
-ConfiguratorService.ctorParameters = () => [
-    { type: Injector }
-];
-ConfiguratorService.ɵprov = ɵɵdefineInjectable({ factory: function ConfiguratorService_Factory() { return new ConfiguratorService(ɵɵinject(INJECTOR)); }, token: ConfiguratorService, providedIn: "root" });
-ConfiguratorService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], ConfiguratorService);
+}
+
+class ObjectUtils {
+    static DisposeNode(node) {
+        node.traverse((obj) => {
+            if (obj instanceof Mesh) {
+                if (obj.geometry) {
+                    obj.geometry.dispose();
+                }
+                ObjectUtils.DisposeMaterial(obj.material);
+            }
+            if (typeof obj.dispose === 'function') {
+                // @ts-ignore
+                obj.dispose();
+            }
+        });
+    }
+    static DisposeMaterial(material) {
+        if (!material) {
+            return;
+        }
+        if (Array.isArray(material)) {
+            material.forEach(mtrl => {
+                this.materialProps
+                    .filter(mapType => mtrl[mapType])
+                    .forEach(mapType => mtrl[mapType].dispose());
+                mtrl.dispose(); // disposes any programs associated with the material
+            });
+        }
+        else {
+            this.materialProps
+                .filter(mapType => material[mapType] && material[mapType].dispose)
+                .forEach(mapType => material[mapType].dispose());
+            if (material.dispose) {
+                material.dispose(); // disposes any programs associated with the material
+            }
+        }
+    }
+    static DisposeObject(object) {
+        if (!object) {
+            return;
+        }
+        if (object.children.length) {
+            object.children.forEach(child => this.DisposeObject(child));
+        }
+        this.DisposeNode(object);
+    }
+}
+ObjectUtils.materialProps = ['map', 'lightMap', 'bumpMap', 'normalMap', 'specularMap', 'envMap', 'aoMap', 'roughnessMap', 'metalnessMap'];
 
-let Builder = class Builder {
-    constructor(scene, options, useInAngular) {
+class Builder {
+    constructor() {
         this.selectionsReceived = new BehaviorSubject([]);
+        this.articleLoaded = new BehaviorSubject(undefined);
+        this.decosReceived = new BehaviorSubject([]);
         this.answersReceived = new BehaviorSubject([]);
         this.modelLoaded = new BehaviorSubject(null);
         this._selections = [];
@@ -1188,23 +1475,21 @@ let Builder = class Builder {
         this._placedAddables = [];
         this._adjustables = [];
         this._addables = [];
+        this._imageCache = new Map();
         this._articleCache = new Map();
+    }
+    init(scene, options) {
         this._boFactory = new BusinessObjectFactory();
         this._threedUtils = new ThreedUtils();
         this._variationHelper = new VariationHelper();
         if (!scene) {
             throw 'No scene object provided!';
         }
-        if (!options) {
-            throw 'No connection options provided!';
+        this._configuratorService = new ConfiguratorService();
+        // this._imageCacheService = new ImageCacheService();
+        if (options) {
+            this._configuratorService.initApi(options);
         }
-        if (useInAngular) {
-            this._configuratorService = ServiceLocator.injector.get(ConfiguratorService);
-        }
-        else {
-            this._configuratorService = new ConfiguratorService(undefined);
-        }
-        this._configuratorService.initApi(options);
         this._scene = scene;
     }
     buildModel(sku, instanceId, goodId) {
@@ -1226,7 +1511,9 @@ let Builder = class Builder {
                         return;
                     }
                     this._linkSelectionsAndDecos();
-                    return this._build(this._instanceId);
+                    const build = yield this._build();
+                    this._cleanUp();
+                    return build;
                 }
                 else {
                     throw 'GLB source not found!';
@@ -1237,6 +1524,30 @@ let Builder = class Builder {
             }
         });
     }
+    buildModelFromData(selections, decos, assetUrl, cdnUrl, schema) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this._scene) {
+                return;
+            }
+            try {
+                yield this._downloadAsset(assetUrl, cdnUrl, schema);
+                if (selections && selections.length > 1 && decos && decos.length > 0 && this._source) {
+                    this._selections = selections;
+                    this._decos = decos;
+                    this._linkSelectionsAndDecos();
+                    const build = yield this._build();
+                    this._cleanUp();
+                    return build;
+                }
+                else {
+                    throw 'Unsufficient data provided!';
+                }
+            }
+            catch (e) {
+                throw e;
+            }
+        });
+    }
     initNodeInstance(goodId) {
         return this._configuratorService.initNodeInstance(goodId);
     }
@@ -1263,6 +1574,53 @@ let Builder = class Builder {
             this.modelLoaded.next(yield this.buildModel());
         });
     }
+    getImageForSelectionOrAnswer(object) {
+        const includeMimeType = true, thumb = true;
+        return new Promise((resolve, reject) => {
+            if (object && object.nodeId) {
+                if (!this._imageCache.has(object.nodeId)) {
+                    return this._configuratorService.getSingleImage(object.nodeId, 4, includeMimeType, thumb, true)
+                        .then((responseData) => {
+                        const base64 = this._handleResponseData(includeMimeType, thumb, responseData);
+                        this._imageCache.set(object.nodeId, base64);
+                        resolve(base64);
+                    }).catch(() => {
+                        reject();
+                    });
+                }
+                else {
+                    resolve(this._imageCache.get(object.nodeId));
+                }
+            }
+            else {
+                reject();
+            }
+        });
+    }
+    _cleanUp() {
+        this._sku = undefined;
+        this._goodId = undefined;
+        this._instanceId = undefined;
+        this._variationHelper.clearCache();
+    }
+    _handleResponseData(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 '';
+        }
+    }
     _setInstanceId(sku, instanceId, goodId) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!instanceId && !this._instanceId) {
@@ -1290,25 +1648,30 @@ let Builder = class Builder {
         return __awaiter(this, void 0, void 0, function* () {
             const article = yield this._getArticle(sku, goodId);
             if (article && article.assetUrl) {
-                this._source = yield this._threedUtils.download3DSource(article.assetUrl)
-                    .catch((error) => {
-                    throw error;
-                });
-                if (article.contentDeliveryUrl) {
-                    this._variationHelper.assetPath =
-                        article.contentDeliveryUrl +
-                            (article.contentDeliveryUrl.endsWith('/') ? '' : '/') +
-                            (article.distSchema ? article.distSchema : 'UP_DBA');
-                }
+                yield this._downloadAsset(article.assetUrl, article.contentDeliveryUrl, article.distSchema);
+            }
+        });
+    }
+    _downloadAsset(assetUrl, cdnUrl, schema) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._source = yield this._threedUtils.download3DSource(assetUrl, cdnUrl)
+                .catch((error) => {
+                throw error;
+            });
+            if (cdnUrl) {
+                this._variationHelper.assetPath =
+                    cdnUrl +
+                        (cdnUrl.endsWith('/') ? '' : '/') +
+                        (schema ? schema : 'UP_DBA');
             }
         });
     }
-    _build(instanceId) {
+    _build() {
         return __awaiter(this, void 0, void 0, function* () {
             this._reset();
             const adjustables = this._getAdjustables();
             if (adjustables && adjustables.length > 0) {
-                const obj = new Object3D();
+                const obj = new THREE.Object3D();
                 obj.visible = false; // no need to render visualy
                 this._scene.add(obj);
                 let connected = false;
@@ -1331,8 +1694,10 @@ let Builder = class Builder {
                 }
                 this._placeAddables(obj);
                 this._updatePivot(obj);
-                yield this._loadVariations(obj, instanceId);
+                yield this._loadVariations(obj);
+                // this._variationHelper.clearCache();
                 this._scene.remove(obj);
+                ObjectUtils.DisposeObject(this._source);
                 return obj;
             }
             else {
@@ -1522,6 +1887,7 @@ let Builder = class Builder {
     _getArticle(sku, goodId) {
         return __awaiter(this, void 0, void 0, function* () {
             if (this._articleCache.has(sku)) {
+                this.articleLoaded.next(this._articleCache.get(sku));
                 return this._articleCache.get(sku);
             }
             if (!goodId) {
@@ -1542,6 +1908,7 @@ let Builder = class Builder {
                 }
             }
             this._articleCache.set(sku, article);
+            this.articleLoaded.next(article);
             return article;
         });
     }
@@ -1566,6 +1933,7 @@ let Builder = class Builder {
             const decosResponse = yield this._configuratorService.getDecos(false);
             if (decosResponse.resultObjects && decosResponse.resultObjects.length > 0) {
                 this._decos = this._boFactory.makeBOArrayFromRawBackendDataArray(DecoNode, decosResponse.resultObjects);
+                this.decosReceived.next(this._decos);
             }
             else {
                 throw 'No deconodes found!';
@@ -1595,11 +1963,12 @@ let Builder = class Builder {
             return deco.type === DecoNodeType.Variation;
         });
     }
-    _loadVariations(obj, instanceId) {
+    _loadVariations(obj) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this._variationHelper.loadPart(obj, this._adjustables, true);
-            yield this._variationHelper.loadVariation(instanceId, obj, this._adjustables, true);
-            yield this._variationHelper.loadVariation(instanceId, obj, this._addables, true);
+            yield this._variationHelper.loadVariation(obj, this._adjustables, true);
+            yield this._variationHelper.loadVariation(obj, this._addables, true);
+            this._variationHelper.clearCache();
         });
     }
     _getAdjustables() {
@@ -1609,10 +1978,10 @@ let Builder = class Builder {
         });
     }
     _updatePivot(obj) {
-        const boundingBox = new Box3().setFromObject(obj);
-        const bbCenterPivot = new Vector3();
+        const boundingBox = new THREE.Box3().setFromObject(obj);
+        const bbCenterPivot = new THREE.Vector3();
         boundingBox.getCenter(bbCenterPivot);
-        const delta = new Vector3().sub(bbCenterPivot).setY(Math.abs(Math.min(boundingBox.min.y, 0)));
+        const delta = new THREE.Vector3().sub(bbCenterPivot).setY(Math.abs(Math.min(boundingBox.min.y, 0)));
         obj.children.forEach((child) => {
             child.position.add(delta);
         });
@@ -1625,35 +1994,25 @@ let Builder = class Builder {
         this._addables.length = 0;
         this._prepareTheSelections();
     }
-};
-Builder.ctorParameters = () => [
-    { type: Scene },
-    { type: Options },
-    { type: Boolean }
+}
+Builder.ɵprov = i0.ɵɵdefineInjectable({ factory: function Builder_Factory() { return new Builder(); }, token: Builder, providedIn: "root" });
+Builder.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
 ];
-Builder = __decorate([
-    Injectable()
-], Builder);
+Builder.ctorParameters = () => [];
 
-let AnswersComponent = class AnswersComponent {
+class AnswersComponent {
     constructor() {
         this.answers = [];
         this.answerClick = new EventEmitter();
     }
-};
-__decorate([
-    Input()
-], AnswersComponent.prototype, "answers", void 0);
-__decorate([
-    Input()
-], AnswersComponent.prototype, "selectionTitle", void 0);
-__decorate([
-    Output()
-], AnswersComponent.prototype, "answerClick", void 0);
-AnswersComponent = __decorate([
-    Component({
-        selector: "answers",
-        template: `
+}
+AnswersComponent.decorators = [
+    { type: Component, args: [{
+                selector: "answers",
+                template: `
         <div class="ione-configurator">
             <div class="rp-answers-slideout">
                 <h2 class="answers-title" [textContent]="selectionTitle"></h2>
@@ -1671,72 +2030,19 @@ AnswersComponent = __decorate([
             </div>
         </div>
     `,
-        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);
-
-var ImageCacheService_1;
-let ImageCacheService = ImageCacheService_1 = class ImageCacheService {
-    constructor(_configuratorService) {
-        this._configuratorService = _configuratorService;
-        // Map containing the retrieved images, @number = nodeId, @string = base64 string
-        this._imageCache = new Map();
-    }
-    static _handleResponseData(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 '';
-        }
-    }
-    getImageForSelectionOrAnswer(object) {
-        const includeMimeType = true, thumb = true;
-        return new Promise((resolve, reject) => {
-            if (object && object.nodeId) {
-                if (!this._imageCache.has(object.nodeId)) {
-                    return this._configuratorService.getSingleImage(object.nodeId, 4, includeMimeType, thumb, true)
-                        .then((responseData) => {
-                        const base64 = ImageCacheService_1._handleResponseData(includeMimeType, thumb, responseData);
-                        this._imageCache.set(object.nodeId, base64);
-                        resolve(base64);
-                    }).catch(() => {
-                        reject();
-                    });
-                }
-                else {
-                    resolve(this._imageCache.get(object.nodeId));
-                }
-            }
-            else {
-                reject();
-            }
-        });
-    }
-};
-ImageCacheService.ctorParameters = () => [
-    { type: ConfiguratorService }
+                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 lightgray;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px #d3d3d380;background:white}.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:bold;color:#1a1a1a}.ione-configurator .answer{font-size:12px;font-style:italic;margin-top:3px}.ione-configurator .collapse-wrapper{display:block}.ione-configurator .collapse-content{display:block}.ione-configurator .collapse-handle{position:absolute;top:10px;right:12px;border:solid black;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:transparent;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 lightgray;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px #d3d3d380;background:white}.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;align-self:center}.ione-configurator .title-wrapper{display:flex;flex-direction:column}.ione-configurator .answer-title-wrapper{text-align:center;align-self:center;margin-left:14px}\n"]
+            },] }
 ];
-ImageCacheService.ɵprov = ɵɵdefineInjectable({ factory: function ImageCacheService_Factory() { return new ImageCacheService(ɵɵinject(ConfiguratorService)); }, token: ImageCacheService, providedIn: "root" });
-ImageCacheService = ImageCacheService_1 = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], ImageCacheService);
+AnswersComponent.ctorParameters = () => [];
+AnswersComponent.propDecorators = {
+    answers: [{ type: Input }],
+    selectionTitle: [{ type: Input }],
+    answerClick: [{ type: Output }]
+};
 
-let AnswerComponent = class AnswerComponent {
-    constructor(_imageCacheService) {
-        this._imageCacheService = _imageCacheService;
+class AnswerComponent {
+    constructor(_builder) {
+        this._builder = _builder;
     }
     set showing(value) {
         this.answer.imageData = '';
@@ -1751,25 +2057,16 @@ let AnswerComponent = class AnswerComponent {
     }
     _loadThumbnail(answer) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this._imageCacheService.getImageForSelectionOrAnswer(answer).then((imageSrc) => {
+            yield this._builder.getImageForSelectionOrAnswer(answer).then((imageSrc) => {
                 answer.imageData = imageSrc === "" ? null : imageSrc;
             });
         });
     }
-};
-AnswerComponent.ctorParameters = () => [
-    { type: ImageCacheService }
-];
-__decorate([
-    Input()
-], AnswerComponent.prototype, "answer", void 0);
-__decorate([
-    Input()
-], AnswerComponent.prototype, "showing", null);
-AnswerComponent = __decorate([
-    Component({
-        selector: 'answer',
-        template: `
+}
+AnswerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'answer',
+                template: `
     <div class="ione-configurator">
       <div class="answer-wrapper">
         <div class="answer-content" @answerAppear>
@@ -1787,18 +2084,26 @@ AnswerComponent = __decorate([
       </div>
     </div>
   `,
-        animations: [
-            trigger('answerAppear', [
-                state('void', style({ 'background': '#dbdbdb' })),
-                state('white', style({ 'background': 'white' })),
-                transition('void <=> *', 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);
+                animations: [
+                    trigger('answerAppear', [
+                        state('void', style({ 'background': '#dbdbdb' })),
+                        state('white', style({ 'background': 'white' })),
+                        transition('void <=> *', 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 lightgray;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px #d3d3d380;background:white}.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:bold;color:#1a1a1a}.ione-configurator .answer{font-size:12px;font-style:italic;margin-top:3px}.ione-configurator .collapse-wrapper{display:block}.ione-configurator .collapse-content{display:block}.ione-configurator .collapse-handle{position:absolute;top:10px;right:12px;border:solid black;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:transparent;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 lightgray;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px #d3d3d380;background:white}.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;align-self:center}.ione-configurator .title-wrapper{display:flex;flex-direction:column}.ione-configurator .answer-title-wrapper{text-align:center;align-self:center;margin-left:14px}\n"]
+            },] }
+];
+AnswerComponent.ctorParameters = () => [
+    { type: Builder }
+];
+AnswerComponent.propDecorators = {
+    answer: [{ type: Input }],
+    showing: [{ type: Input }]
+};
 
-let VisibilityObserverMasterDirective = class VisibilityObserverMasterDirective {
+// Import the core angular services.
+class VisibilityObserverMasterDirective {
     // I initialize the intersection observer parent directive.
     constructor() {
         // As each observable child attaches itself to the parent observer, we need to
@@ -1838,14 +2143,15 @@ let VisibilityObserverMasterDirective = class VisibilityObserverMasterDirective
         this._mapping.delete(element);
         this._observer.unobserve(element);
     }
-};
-VisibilityObserverMasterDirective = __decorate([
-    Directive({
-        selector: '[visibilityObserverMaster]'
-    })
-], VisibilityObserverMasterDirective);
+}
+VisibilityObserverMasterDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[visibilityObserverMaster]'
+            },] }
+];
+VisibilityObserverMasterDirective.ctorParameters = () => [];
 
-let VisibilityObserverDirective = class VisibilityObserverDirective {
+class VisibilityObserverDirective {
     // I initialize the intersection observer directive.
     constructor(parent, elementRef) {
         this.observerEnabled = false;
@@ -1883,27 +2189,27 @@ let VisibilityObserverDirective = class VisibilityObserverDirective {
             });
         }
     }
-};
+}
+VisibilityObserverDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[visibilityObserver]',
+                exportAs: 'intersection'
+            },] }
+];
 VisibilityObserverDirective.ctorParameters = () => [
     { type: VisibilityObserverMasterDirective },
     { type: ElementRef }
 ];
-__decorate([
-    Input()
-], VisibilityObserverDirective.prototype, "observerEnabled", void 0);
-VisibilityObserverDirective = __decorate([
-    Directive({
-        selector: '[visibilityObserver]',
-        exportAs: 'intersection'
-    })
-], VisibilityObserverDirective);
+VisibilityObserverDirective.propDecorators = {
+    observerEnabled: [{ type: Input }]
+};
 
-let LoaderComponent = class LoaderComponent {
-};
-LoaderComponent = __decorate([
-    Component({
-        selector: 'rp-loader',
-        template: `
+class LoaderComponent {
+}
+LoaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'rp-loader',
+                template: `
     <div class="loader-wrapper">
       <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" stroke="#3760a1">
         <g fill="none" fill-rule="evenodd" stroke-width="3">
@@ -1915,45 +2221,45 @@ LoaderComponent = __decorate([
       </svg>
     </div>
   `,
-        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);
+                styles: [":host{-webkit-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;animation:ripple 1.5s infinite}:host .loader-wrapper svg .ripple2{transform-origin:center;animation:ripple 1.5s infinite .4s}@keyframes ripple{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:0}}\n"]
+            },] }
+];
 
-let SharedModule = class SharedModule {
-};
-SharedModule = __decorate([
-    NgModule({
-        imports: [
-            CommonModule
-        ],
-        declarations: [
-            LoaderComponent
-        ],
-        exports: [
-            LoaderComponent
-        ]
-    })
-], SharedModule);
+class SharedModule {
+}
+SharedModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule
+                ],
+                declarations: [
+                    LoaderComponent
+                ],
+                exports: [
+                    LoaderComponent
+                ]
+            },] }
+];
 
-let AnswersModule = class AnswersModule {
-};
-AnswersModule = __decorate([
-    NgModule({
-        imports: [
-            CommonModule,
-            SharedModule
-        ],
-        declarations: [
-            AnswersComponent,
-            AnswerComponent,
-            VisibilityObserverDirective,
-            VisibilityObserverMasterDirective
-        ],
-        exports: [
-            AnswersComponent
-        ]
-    })
-], AnswersModule);
+class AnswersModule {
+}
+AnswersModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    SharedModule
+                ],
+                declarations: [
+                    AnswersComponent,
+                    AnswerComponent,
+                    VisibilityObserverDirective,
+                    VisibilityObserverMasterDirective
+                ],
+                exports: [
+                    AnswersComponent
+                ]
+            },] }
+];
 
 class SelectionViewModel {
     constructor() {
@@ -1962,9 +2268,9 @@ class SelectionViewModel {
         this.thumbnail = '';
     }
 }
-let SelectionsComponent = class SelectionsComponent {
-    constructor(_imageCacheService) {
-        this._imageCacheService = _imageCacheService;
+class SelectionsComponent {
+    constructor(_builder) {
+        this._builder = _builder;
         this.selectionViewModels = [];
         this.selectionClick = new EventEmitter();
     }
@@ -1972,8 +2278,6 @@ let SelectionsComponent = class SelectionsComponent {
         this._prepareSelections(value);
         this._loadThumbnails();
     }
-    ngOnInit() {
-    }
     expandClicked(selectionViewModel, mouseEvent) {
         mouseEvent.preventDefault();
         mouseEvent.stopImmediatePropagation();
@@ -1988,7 +2292,7 @@ let SelectionsComponent = class SelectionsComponent {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.selectionViewModels.length > 0) {
                 this.selectionViewModels.forEach((viewModel) => __awaiter(this, void 0, void 0, function* () {
-                    yield this._imageCacheService.getImageForSelectionOrAnswer(viewModel.selection).then((imageSrc) => {
+                    yield this._builder.getImageForSelectionOrAnswer(viewModel.selection).then((imageSrc) => {
                         viewModel.thumbnail = imageSrc === "" ? null : imageSrc;
                     });
                 }));
@@ -2011,20 +2315,11 @@ let SelectionsComponent = class SelectionsComponent {
             }
         });
     }
-};
-SelectionsComponent.ctorParameters = () => [
-    { type: ImageCacheService }
-];
-__decorate([
-    Input()
-], SelectionsComponent.prototype, "selections", null);
-__decorate([
-    Output()
-], SelectionsComponent.prototype, "selectionClick", void 0);
-SelectionsComponent = __decorate([
-    Component({
-        selector: "selections",
-        template: `
+}
+SelectionsComponent.decorators = [
+    { type: Component, args: [{
+                selector: "selections",
+                template: `
         <div class="ione-configurator">
             <div class="rp-selections-summary">
                 <header class="drawer__header">
@@ -2073,37 +2368,44 @@ SelectionsComponent = __decorate([
             </div>
         </div>
     `,
-        animations: [
-            trigger('showHideChildren', [
-                state('void', style({ 'height': '0' })),
-                state('*', style({ 'height': '*' })),
-                transition('void <=> *', 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);
+                animations: [
+                    trigger('showHideChildren', [
+                        state('void', style({ 'height': '0' })),
+                        state('*', style({ 'height': '*' })),
+                        transition('void <=> *', 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 lightgray;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px #d3d3d380;background:white}.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:bold;color:#1a1a1a}.ione-configurator .answer{font-size:12px;font-style:italic;margin-top:3px}.ione-configurator .collapse-wrapper{display:block}.ione-configurator .collapse-content{display:block}.ione-configurator .collapse-handle{position:absolute;top:10px;right:12px;border:solid black;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:transparent;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 lightgray;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px #d3d3d380;background:white}.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;align-self:center}.ione-configurator .title-wrapper{display:flex;flex-direction:column}.ione-configurator .answer-title-wrapper{text-align:center;align-self:center;margin-left:14px}\n"]
+            },] }
+];
+SelectionsComponent.ctorParameters = () => [
+    { type: Builder }
+];
+SelectionsComponent.propDecorators = {
+    selections: [{ type: Input }],
+    selectionClick: [{ type: Output }]
+};
 
-let SelectionsModule = class SelectionsModule {
-};
-SelectionsModule = __decorate([
-    NgModule({
-        imports: [
-            CommonModule,
-            SharedModule
-        ],
-        declarations: [
-            SelectionsComponent
-        ],
-        exports: [
-            SelectionsComponent
-        ]
-    })
-], SelectionsModule);
+class SelectionsModule {
+}
+SelectionsModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    SharedModule
+                ],
+                declarations: [
+                    SelectionsComponent
+                ],
+                exports: [
+                    SelectionsComponent
+                ]
+            },] }
+];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AnswersComponent, AnswersModule, Builder, ConfiguratorService, SelectionsComponent, SelectionsModule, SharedModule as ɵa, LoaderComponent as ɵb, AnswerComponent as ɵc, ImageCacheService as ɵd, VisibilityObserverDirective as ɵe, VisibilityObserverMasterDirective as ɵf };
+export { AnswersComponent, AnswersModule, Builder, ConfiguratorService, SelectionsComponent, SelectionsModule, SharedModule as ɵa, LoaderComponent as ɵb, AnswerComponent as ɵc, VisibilityObserverDirective as ɵd, VisibilityObserverMasterDirective as ɵe };
 //# sourceMappingURL=colijnit-configurator.js.map