@colijnit/configurator 1.0.17 → 12.0.2

package/bundles/colijnit-configurator.umd.js

@@ -1,12 +1,35 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three'), require('@colijnit/configuratorapi/build/model/options'), require('@colijnit/configuratorapi/build/model/deco-node'), require('@colijnit/configuratorapi/build/service/business-object-factory'), require('@colijnit/configuratorapi/build/model/selection'), require('@colijnit/configuratorapi/build/enum/deco-node-type.enum'), require('axios'), require('@colijnit/configuratorapi/build/enum/deco-node-kind.enum'), require('jszip'), require('@colijnit/configuratorapi/build/model/article'), require('@angular/core'), require('@colijnit/configuratorapi/build/configurator'), require('@colijnit/configuratorapi/build/utils/function/not-nill.function'), require('@colijnit/configuratorapi/build/enum/node-type.enum'), require('@colijnit/configuratorapi/build/utils/function/is-nill.function'), require('rxjs'), require('@angular/common'), require('@angular/animations')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/configurator', ['exports', 'three', '@colijnit/configuratorapi/build/model/options', '@colijnit/configuratorapi/build/model/deco-node', '@colijnit/configuratorapi/build/service/business-object-factory', '@colijnit/configuratorapi/build/model/selection', '@colijnit/configuratorapi/build/enum/deco-node-type.enum', 'axios', '@colijnit/configuratorapi/build/enum/deco-node-kind.enum', 'jszip', '@colijnit/configuratorapi/build/model/article', '@angular/core', '@colijnit/configuratorapi/build/configurator', '@colijnit/configuratorapi/build/utils/function/not-nill.function', '@colijnit/configuratorapi/build/enum/node-type.enum', '@colijnit/configuratorapi/build/utils/function/is-nill.function', 'rxjs', '@angular/common', '@angular/animations'], factory) :
-    (global = global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.configurator = {}), global.three, global.options, global.decoNode, global.businessObjectFactory, global.selection, global.decoNodeType_enum, global.axios, global.decoNodeKind_enum, global.JSZip, global.article, global.ng.core, global.configurator, global.notNill_function, global.nodeType_enum, global.isNill_function, global.rxjs, global.ng.common, global.ng.animations));
-}(this, (function (exports, three, options, decoNode, businessObjectFactory, selection, decoNodeType_enum, axios, decoNodeKind_enum, JSZip, article, core, configurator, notNill_function, nodeType_enum, isNill_function, rxjs, common, animations) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three'), require('@colijnit/configuratorapi/build/model/deco-node'), require('@colijnit/configuratorapi/build/service/business-object-factory'), require('@colijnit/configuratorapi/build/model/selection'), require('@colijnit/configuratorapi/build/enum/deco-node-type.enum'), require('axios'), require('@colijnit/configuratorapi/build/enum/deco-node-kind.enum'), require('rxjs'), require('jszip'), require('@colijnit/configuratorapi/build/model/article'), require('@colijnit/configuratorapi/build/configurator'), require('@colijnit/configuratorapi/build/utils/function/not-nill.function'), require('@colijnit/configuratorapi/build/enum/node-type.enum'), require('@colijnit/configuratorapi/build/utils/function/is-nill.function'), require('@angular/core'), require('@angular/common'), require('@angular/animations')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/configurator', ['exports', 'three', '@colijnit/configuratorapi/build/model/deco-node', '@colijnit/configuratorapi/build/service/business-object-factory', '@colijnit/configuratorapi/build/model/selection', '@colijnit/configuratorapi/build/enum/deco-node-type.enum', 'axios', '@colijnit/configuratorapi/build/enum/deco-node-kind.enum', 'rxjs', 'jszip', '@colijnit/configuratorapi/build/model/article', '@colijnit/configuratorapi/build/configurator', '@colijnit/configuratorapi/build/utils/function/not-nill.function', '@colijnit/configuratorapi/build/enum/node-type.enum', '@colijnit/configuratorapi/build/utils/function/is-nill.function', '@angular/core', '@angular/common', '@angular/animations'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.configurator = {}), global.THREE, global.decoNode, global.businessObjectFactory, global.selection, global.decoNodeType_enum, global.axios, global.decoNodeKind_enum, global.rxjs, global.JSZip, global.article, global.configurator, global.notNill_function, global.nodeType_enum, global.isNill_function, global.ng.core, global.ng.common, global.ng.animations));
+})(this, (function (exports, THREE, decoNode, businessObjectFactory, selection, decoNodeType_enum, axios, decoNodeKind_enum, rxjs, JSZip, article, configurator, notNill_function, nodeType_enum, isNill_function, i0, common, animations) { 'use strict';
 
-    axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    /*! *****************************************************************************
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+    var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+    var JSZip__default = /*#__PURE__*/_interopDefaultLegacy(JSZip);
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -21,35 +44,38 @@
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
     /* global Reflect, Promise */
-
-    var extendStatics = function(d, b) {
+    var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
         return extendStatics(d, b);
     };
-
     function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     }
-
-    var __assign = function() {
+    var __assign = function () {
         __assign = Object.assign || function __assign(t) {
             for (var s, i = 1, n = arguments.length; i < n; i++) {
                 s = arguments[i];
-                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
             }
             return t;
         };
         return __assign.apply(this, arguments);
     };
-
     function __rest(s, e) {
         var t = {};
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
         if (s != null && typeof Object.getOwnPropertySymbols === "function")
             for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
                 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
@@ -57,175 +83,280 @@
             }
         return t;
     }
-
     function __decorate(decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
-
     function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); }
+        return function (target, key) { decorator(target, key, paramIndex); };
     }
-
     function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
     }
-
     function __awaiter(thisArg, _arguments, P, generator) {
         function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
         return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
             function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
             step((generator = generator.apply(thisArg, _arguments || [])).next());
         });
     }
-
     function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
         function verb(n) { return function (v) { return step([n, v]); }; }
         function step(op) {
-            if (f) throw new TypeError("Generator is already executing.");
-            while (_) try {
-                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-                if (y = 0, t) op = [op[0] & 2, t.value];
-                switch (op[0]) {
-                    case 0: case 1: t = op; break;
-                    case 4: _.label++; return { value: op[1], done: false };
-                    case 5: _.label++; y = op[1]; op = [0]; continue;
-                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                    default:
-                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                        if (t[2]) _.ops.pop();
-                        _.trys.pop(); continue;
-                }
-                op = body.call(thisArg, _);
-            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
         }
     }
-
-    function __createBinding(o, m, k, k2) {
-        if (k2 === undefined) k2 = k;
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+            desc = { enumerable: true, get: function () { return m[k]; } };
+        }
+        Object.defineProperty(o, k2, desc);
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
         o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
     }
-
-    function __exportStar(m, exports) {
-        for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-
     function __values(o) {
         var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m) return m.call(o);
-        if (o && typeof o.length === "number") return {
-            next: function () {
-                if (o && i >= o.length) o = void 0;
-                return { value: o && o[i++], done: !o };
-            }
-        };
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
         throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
     }
-
     function __read(o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m) return o;
+        if (!m)
+            return o;
         var i = m.call(o), r, ar = [], e;
         try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
         }
-        catch (error) { e = { error: error }; }
         finally {
             try {
-                if (r && !r.done && (m = i["return"])) m.call(i);
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
             }
-            finally { if (e) throw e.error; }
         }
         return ar;
     }
-
+    /** @deprecated */
     function __spread() {
         for (var ar = [], i = 0; i < arguments.length; i++)
             ar = ar.concat(__read(arguments[i]));
         return ar;
     }
-
+    /** @deprecated */
     function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
         for (var r = Array(s), k = 0, i = 0; i < il; i++)
             for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
                 r[k] = a[j];
         return r;
-    };
-
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
     }
-
     function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
         var g = generator.apply(thisArg, _arguments || []), i, q = [];
         return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
         function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
         function fulfill(value) { resume("next", value); }
         function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
     }
-
     function __asyncDelegator(o) {
         var i, p;
         return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
         function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
     }
-
     function __asyncValues(o) {
-        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
         var m = o[Symbol.asyncIterator], i;
         return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
         function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
     }
-
     function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
         return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
     };
-
     function __importStar(mod) {
-        if (mod && mod.__esModule) return mod;
+        if (mod && mod.__esModule)
+            return mod;
         var result = {};
-        if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-        result.default = mod;
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
         return result;
     }
-
     function __importDefault(mod) {
         return (mod && mod.__esModule) ? mod : { default: mod };
     }
-
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
     }
-
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return value;
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+    function __classPrivateFieldIn(state, receiver) {
+        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
+            throw new TypeError("Cannot use 'in' operator on non-object");
+        return typeof state === "function" ? receiver === state : state.has(receiver);
     }
 
-    var ObjectUtils = /** @class */ (function () {
+    var ObjectUtils$1 = /** @class */ (function () {
         function ObjectUtils() {
         }
         ObjectUtils.DisposeMaterial = function (material) {
@@ -263,7 +394,7 @@
         ObjectUtils.DisposeNode = function (node) {
             var _this = this;
             node.traverse(function (obj) {
-                if (obj instanceof three.Mesh) {
+                if (obj instanceof THREE.Mesh) {
                     if (obj.geometry) {
                         obj.geometry.dispose();
                     }
@@ -275,9 +406,9 @@
                 }
             });
         };
-        ObjectUtils.materialProps = ['map', 'lightMap', 'bumpMap', 'normalMap', 'specularMap', 'envMap', 'aoMap', 'roughnessMap', 'metalnessMap'];
         return ObjectUtils;
-    }());
+    }());
+    ObjectUtils$1.materialProps = ['map', 'lightMap', 'bumpMap', 'normalMap', 'specularMap', 'envMap', 'aoMap', 'roughnessMap', 'metalnessMap'];
 
     // Static utility functions holder related to files.
     // @dynamic
@@ -303,11 +434,15 @@
                 var result;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, axios({
-                                method: 'get',
-                                url: assetPath + "getFiles.php?assetUrl=" + url,
-                                responseType: "json"
-                            })];
+                        case 0:
+                            if (!assetPath.endsWith('/')) {
+                                assetPath = assetPath + '/';
+                            }
+                            return [4 /*yield*/, axios__default["default"]({
+                                    method: 'get',
+                                    url: assetPath + "getFiles.php?assetUrl=" + url,
+                                    responseType: "json"
+                                })];
                         case 1:
                             result = _a.sent();
                             return [2 /*return*/, !!result.data];
@@ -423,9 +558,9 @@
             }
             return url.replace('.unity3d', '');
         };
-        FileUtils._cachedTextureUploads = new Map();
         return FileUtils;
-    }());
+    }());
+    FileUtils._cachedTextureUploads = new Map();
 
     var ThreedUtils = /** @class */ (function () {
         function ThreedUtils() {
@@ -433,10 +568,10 @@
         }
         ThreedUtils.prototype.clearCache = function () {
             var objs = Array.from(this._objectCache.values());
-            objs.forEach(function (o) { return ObjectUtils.DisposeObject(o); });
+            objs.forEach(function (o) { return ObjectUtils$1.DisposeObject(o); });
             this._objectCache.clear();
         };
-        ThreedUtils.prototype.download3DSource = function (fileName) {
+        ThreedUtils.prototype.download3DSource = function (fileName, assetPath) {
             var _this = this;
             return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
                 var lookupFileName;
@@ -450,7 +585,7 @@
                                 resolve(this._objectCache.get(lookupFileName));
                                 return [2 /*return*/];
                             }
-                            return [4 /*yield*/, FileUtils.FileExists(lookupFileName, 'https://cdn1.colijn-it.nl/content43/')];
+                            return [4 /*yield*/, FileUtils.FileExists(lookupFileName, assetPath)];
                         case 1:
                             if (_a.sent()) {
                                 this.loadGlbSource(lookupFileName).then(function (obj) {
@@ -487,7 +622,7 @@
                             return [4 /*yield*/, this._readJsonFile(filePath)];
                         case 1:
                             json = _a.sent();
-                            loader = new three.ObjectLoader();
+                            loader = new THREE__namespace.ObjectLoader();
                             loader.crossOrigin = 'Anonymous';
                             return [2 /*return*/, new Promise(function (resolve, reject) {
                                     try {
@@ -511,7 +646,7 @@
                     if (this._objectCache.has(filePath)) {
                         return [2 /*return*/, Promise.resolve(this._objectCache.get(filePath))];
                     }
-                    loader = new three.ObjectLoader();
+                    loader = new THREE__namespace.ObjectLoader();
                     loader.setCrossOrigin('Anonymous');
                     loader.setResourcePath('');
                     return [2 /*return*/, new Promise(function (resolve, reject) {
@@ -563,7 +698,7 @@
                         case 1:
                             obj = _a.sent();
                             if (obj) {
-                                obj.children = obj.children.filter(function (c) { return !(c instanceof three.Camera); });
+                                obj.children = obj.children.filter(function (c) { return !(c instanceof THREE__namespace.Camera); });
                                 obj.children.sort(function (a, b) { return a['name'] < b['name'] ? 1 : -1; });
                                 obj.children.forEach(function (c) {
                                     c.traverse(function (t) {
@@ -571,7 +706,7 @@
                                     });
                                     c.visible = false;
                                 });
-                                if (obj.children.length === 1 && obj.children[0] instanceof three.Group) { // flatten children
+                                if (obj.children.length === 1 && obj.children[0] instanceof THREE__namespace.Group) { // flatten children
                                     children = obj.children[0].children.slice();
                                     obj.children.length = 0;
                                     obj.children = children;
@@ -587,11 +722,11 @@
                 return __generator(this, function (_a) {
                     // url = this._includeBaseUrl(url);
                     return [2 /*return*/, new Promise(function (resolve, reject) {
-                            var textureLoader = new three.TextureLoader();
+                            var textureLoader = new THREE__namespace.TextureLoader();
                             // textureLoader.setBaseU(this._settingsService.settings.assetPath);
                             textureLoader.load(url, function (texture) {
-                                texture.wrapT = three.RepeatWrapping;
-                                texture.wrapS = three.RepeatWrapping;
+                                texture.wrapT = THREE__namespace.RepeatWrapping;
+                                texture.wrapS = THREE__namespace.RepeatWrapping;
                                 texture.repeat.set(1, 1);
                                 texture.needsUpdate = true;
                                 return resolve(texture);
@@ -603,13 +738,13 @@
         ThreedUtils.prototype._cleanedUpObjects = function (object, cleanUp) {
             var _this = this;
             if (cleanUp === void 0) { cleanUp = true; }
-            var obj = new three.Object3D();
+            var obj = new THREE__namespace.Object3D();
             object.children.forEach(function (c) {
-                if (!(c instanceof three.Camera)) {
-                    if (cleanUp && c instanceof three.Group || (c.children.length === 1 && c.children[0] instanceof three.Group)) {
+                if (!(c instanceof THREE__namespace.Camera)) {
+                    if (cleanUp && c instanceof THREE__namespace.Group || (c.children.length === 1 && c.children[0] instanceof THREE__namespace.Group)) {
                         _this._addGroupChildrenToObject(c, obj);
                     }
-                    else if ((cleanUp && !(c instanceof three.Mesh)) || (!(c instanceof three.Mesh) && !c.name && c.children.length > 0)) {
+                    else if ((cleanUp && !(c instanceof THREE__namespace.Mesh)) || (!(c instanceof THREE__namespace.Mesh) && !c.name && c.children.length > 0)) {
                         c.children.forEach(function (child) {
                             child.translateY(c.position.y);
                         });
@@ -632,10 +767,10 @@
                     }
                 }
             });
-            var boundingBox = new three.Box3().setFromObject(obj);
-            var bbCenterPivot = new three.Vector3();
+            var boundingBox = new THREE__namespace.Box3().setFromObject(obj);
+            var bbCenterPivot = new THREE__namespace.Vector3();
             boundingBox.getCenter(bbCenterPivot);
-            var delta = new three.Vector3().add(bbCenterPivot).negate();
+            var delta = new THREE__namespace.Vector3().add(bbCenterPivot).negate();
             obj.children.forEach(function (cc) {
                 cc.position.add(delta);
             });
@@ -645,7 +780,7 @@
             var _this = this;
             if (cleanUp === void 0) { cleanUp = true; }
             group.children.forEach(function (gc) {
-                if (cleanUp && gc instanceof three.Group) {
+                if (cleanUp && gc instanceof THREE__namespace.Group) {
                     _this._addGroupChildrenToObject(gc, obj);
                 }
                 else {
@@ -659,7 +794,7 @@
         ThreedUtils.prototype._iterateChildren = function (children, callback) {
             for (var i = 0; i < children.length; i++) {
                 var child = children[i];
-                if (child instanceof three.Mesh) {
+                if (child instanceof THREE__namespace.Mesh) {
                     callback(child);
                 }
                 else {
@@ -732,17 +867,17 @@
         };
         SceneUtils.Convert3DPointToScreenPoint = function (point, camera, width, height) {
             if (!point) {
-                return new three.Vector2();
+                return new THREE__namespace.Vector2();
             }
             var vector = point.clone().project(camera);
             vector.x = (vector.x + 1) / 2 * width;
             vector.y = -(vector.y - 1) / 2 * height;
-            return new three.Vector2(vector.x, vector.y);
+            return new THREE__namespace.Vector2(vector.x, vector.y);
         };
         SceneUtils.CanSelectorConnect = function (con1, con2) {
-            var con1Name = con1 instanceof three.Object3D ? con1.name : con1.connector;
-            var con2Name = con2 instanceof three.Object3D ? con2.name : con2.connector;
-            var sameParent = con1 instanceof three.Object3D && con2 instanceof three.Object3D ? con1.parent === con2.parent : false;
+            var con1Name = con1 instanceof THREE__namespace.Object3D ? con1.name : con1.connector;
+            var con2Name = con2 instanceof THREE__namespace.Object3D ? con2.name : con2.connector;
+            var sameParent = con1 instanceof THREE__namespace.Object3D && con2 instanceof THREE__namespace.Object3D ? con1.parent === con2.parent : false;
             var parts1 = con1Name.toUpperCase().split('_'), parts2 = con2Name.toUpperCase().split('_');
             if (parts1.length >= 3 && parts2.length >= 3 && !sameParent) {
                 var connectable = parts1[0] === 'C' && parts2[0] === 'C' &&
@@ -757,29 +892,29 @@
             }
             con1['connectedTo'] = con2.parent.name;
             con2['connectedTo'] = con1.parent.name;
-            var motherRotation = new three.Euler(0, 0, 0);
-            var motherPosition = new three.Vector3(0, 0, 0);
+            var motherRotation = new THREE__namespace.Euler(0, 0, 0);
+            var motherPosition = new THREE__namespace.Vector3(0, 0, 0);
             scene.updateMatrixWorld(true);
             motherRotation.copy(parent.rotation);
             parent.getWorldPosition(motherPosition);
             parent.rotation.set(0, 0, 0);
             parent.position.set(0, 0, 0);
-            var con1Quat = new three.Quaternion();
+            var con1Quat = new THREE__namespace.Quaternion();
             con1.getWorldQuaternion(con1Quat);
-            var con2Quat = new three.Quaternion();
+            var con2Quat = new THREE__namespace.Quaternion();
             con2.getWorldQuaternion(con2Quat);
-            var con1QuatParent = new three.Quaternion();
+            var con1QuatParent = new THREE__namespace.Quaternion();
             con1.parent.getWorldQuaternion(con1QuatParent);
-            var con2QuatParent = new three.Quaternion();
+            var con2QuatParent = new THREE__namespace.Quaternion();
             con2.parent.getWorldQuaternion(con2QuatParent);
-            var rotation = new three.Quaternion().multiplyQuaternions(con1Quat.invert(), con2Quat).multiply(new three.Quaternion().multiplyQuaternions(con1QuatParent, con1QuatParent));
+            var rotation = new THREE__namespace.Quaternion().multiplyQuaternions(con1Quat.invert(), con2Quat).multiply(new THREE__namespace.Quaternion().multiplyQuaternions(con1QuatParent, con1QuatParent));
             con2.parent.quaternion.copy(rotation);
             // Update because the matrix has been tempered with
             scene.updateMatrixWorld(true);
             // Move the connectors towards eachother
-            var con1Pos = new three.Vector3();
+            var con1Pos = new THREE__namespace.Vector3();
             con1.getWorldPosition(con1Pos);
-            var con2Pos = new three.Vector3();
+            var con2Pos = new THREE__namespace.Vector3();
             con2.getWorldPosition(con2Pos);
             var move = con1Pos.sub(con2Pos);
             con2.parent.position.x += move.x;
@@ -799,7 +934,7 @@
 
     var Material = /** @class */ (function () {
         function Material() {
-            this.specular = new three.Color(0.3, 0.3, 0.3);
+            this.specular = new THREE__namespace.Color(0.3, 0.3, 0.3);
             this.shininess = 0;
             this.repeatX = 4;
             this.repeatY = 4;
@@ -819,15 +954,15 @@
                 }
                 else {
                     if (!base64) {
-                        resolve(new three.Texture());
+                        resolve(new THREE__namespace.Texture());
                     }
                     else {
-                        var loader = new three.TextureLoader();
+                        var loader = new THREE__namespace.TextureLoader();
                         loader.load(base64, function (texture) {
                             texture.anisotropy = 16;
-                            texture.wrapS = three.RepeatWrapping;
-                            texture.wrapT = three.RepeatWrapping;
-                            texture.repeat = new three.Vector2(material ? material.repeatX : 1, material ? material.repeatY : 1);
+                            texture.wrapS = THREE__namespace.RepeatWrapping;
+                            texture.wrapT = THREE__namespace.RepeatWrapping;
+                            texture.repeat = new THREE__namespace.Vector2(material ? material.repeatX : 1, material ? material.repeatY : 1);
                             texture.needsUpdate = true;
                             ImageUtils.textures.set(id, texture);
                             resolve(texture);
@@ -858,9 +993,9 @@
         ImageUtils.getFixedImageFilepathUrl = function (imageFilepathUrl) {
             return imageFilepathUrl.replace("/content/", "/content43/");
         };
-        ImageUtils.textures = new Map();
         return ImageUtils;
-    }());
+    }());
+    ImageUtils.textures = new Map();
 
     var FurnitureMaterial = /** @class */ (function (_super) {
         __extends(FurnitureMaterial, _super);
@@ -874,9 +1009,9 @@
         }
         AssetUtils.CreateMaterialFromAsset = function (asset) {
             return __awaiter(this, void 0, void 0, function () {
-                var material, _a, _b, _c, _d, _e;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                var material, _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                return __generator(this, function (_k) {
+                    switch (_k.label) {
                         case 0:
                             material = new Material();
                             if (!asset) {
@@ -889,43 +1024,79 @@
                             _a = material;
                             return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_texture', asset.texture, material)];
                         case 1:
-                            _a.texture = _f.sent();
-                            material.texture.encoding = three.sRGBEncoding;
+                            _a.texture = _k.sent();
+                            material.texture.encoding = THREE.sRGBEncoding;
                             material.textureFilename = asset.textureFilename;
-                            _f.label = 2;
+                            _k.label = 2;
                         case 2:
                             if (!asset.normal) return [3 /*break*/, 4];
                             _b = material;
                             return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_normal', asset.normal, material)];
                         case 3:
-                            _b.normal = _f.sent();
+                            _b.normal = _k.sent();
                             material.normalFilename = asset.normalFilename;
-                            _f.label = 4;
+                            _k.label = 4;
                         case 4:
-                            if (!asset.ao) return [3 /*break*/, 6];
+                            if (!asset.orm) return [3 /*break*/, 6];
                             _c = material;
-                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_ao', asset.ao, material)];
+                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_orm', asset.orm, material)];
                         case 5:
-                            _c.ao = _f.sent();
-                            material.aoFilename = asset.aoFilename;
-                            _f.label = 6;
+                            _c.ao = _k.sent();
+                            material.roughness = material.ao;
+                            material.metalness = material.ao;
+                            material.aoFilename = asset.ormFilename;
+                            material.roughnessFilename = asset.ormFilename;
+                            material.metalnessFilename = asset.ormFilename;
+                            return [3 /*break*/, 12];
                         case 6:
-                            if (!asset.metalness) return [3 /*break*/, 8];
+                            if (!asset.ao) return [3 /*break*/, 8];
                             _d = material;
-                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_metalness', asset.metalness, material)];
+                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_ao', asset.ao, material)];
                         case 7:
-                            _d.metalness = _f.sent();
-                            material.metalnessFilename = asset.metalnessFilename;
-                            _f.label = 8;
+                            _d.ao = _k.sent();
+                            material.aoFilename = asset.aoFilename;
+                            _k.label = 8;
                         case 8:
-                            if (!asset.roughness) return [3 /*break*/, 10];
+                            if (!asset.metalness) return [3 /*break*/, 10];
                             _e = material;
-                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_roughness', asset.roughness, material)];
+                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_metalness', asset.metalness, material)];
                         case 9:
-                            _e.roughness = _f.sent();
+                            _e.metalness = _k.sent();
+                            material.metalnessFilename = asset.metalnessFilename;
+                            _k.label = 10;
+                        case 10:
+                            if (!asset.roughness) return [3 /*break*/, 12];
+                            _f = material;
+                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_roughness', asset.roughness, material)];
+                        case 11:
+                            _f.roughness = _k.sent();
                             material.roughnessFilename = asset.roughnessFilename;
-                            _f.label = 10;
-                        case 10: return [2 /*return*/, material];
+                            _k.label = 12;
+                        case 12:
+                            if (!asset.displacement) return [3 /*break*/, 14];
+                            _g = material;
+                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_displacement', asset.displacement, material)];
+                        case 13:
+                            _g.displacement = _k.sent();
+                            material.displacementFilename = asset.displacementFilename;
+                            _k.label = 14;
+                        case 14:
+                            if (!asset.envMap) return [3 /*break*/, 16];
+                            _h = material;
+                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_env', asset.envMap, material)];
+                        case 15:
+                            _h.envMap = _k.sent();
+                            material.envMapFilename = asset.envMapFilename;
+                            _k.label = 16;
+                        case 16:
+                            if (!asset.emissive) return [3 /*break*/, 18];
+                            _j = material;
+                            return [4 /*yield*/, ImageUtils.CreateTextureFromBase64(asset.id + '_emissive', asset.emissive, material)];
+                        case 17:
+                            _j.emissive = _k.sent();
+                            material.emissiveFileName = asset.emissiveFilename;
+                            _k.label = 18;
+                        case 18: return [2 /*return*/, material];
                     }
                 });
             });
@@ -938,16 +1109,16 @@
             }
             var level = parseFloat(settings['level']);
             if (!isNaN(level)) {
-                material.specular = new three.Color(level, level, level);
+                material.specular = new THREE__namespace.Color(level, level, level);
             }
             var repeatObjectUsed = settings.hasOwnProperty('repeat');
             var repeatx = repeatObjectUsed ? parseFloat(settings['repeat']['repeatx']) : parseFloat(settings['repeatx']);
             if (!isNaN(repeatx)) {
-                material.repeatX = Math.max(1, repeatx);
+                material.repeatX = repeatx;
             }
             var repeaty = repeatObjectUsed ? parseFloat(settings['repeat']['repeaty']) : parseFloat(settings['repeaty']);
             if (!isNaN(repeaty)) {
-                material.repeatY = Math.max(1, repeaty);
+                material.repeatY = repeaty;
             }
             var metalness = parseFloat(settings['metalness']);
             if (!isNaN(metalness)) {
@@ -957,6 +1128,36 @@
             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;
+            }
         };
         return AssetUtils;
     }());
@@ -970,6 +1171,8 @@
     var VariationSettings = /** @class */ (function () {
         function VariationSettings() {
             this.settings = {};
+            this.loading = false;
+            this.loaded = new rxjs.Subject();
         }
         return VariationSettings;
     }());
@@ -978,6 +1181,9 @@
     var VariationUtils = /** @class */ (function () {
         function VariationUtils() {
         }
+        VariationUtils.ClearCache = function () {
+            this.MaterialCache.clear();
+        };
         VariationUtils.LoadVariation = function (assetPath, fileName) {
             return __awaiter(this, void 0, void 0, function () {
                 var id, file, err_1, mute;
@@ -993,7 +1199,7 @@
                             id = fileName.substr(0, fileName.lastIndexOf('.ione3d'));
                             _a.label = 1;
                         case 1:
-                            _a.trys.push([1, 4, , 5]);
+                            _a.trys.push([1, 6, , 7]);
                             if (!assetPath.endsWith('/')) {
                                 assetPath += '/';
                             }
@@ -1001,16 +1207,22 @@
                                 console.error('downloadVariation not defined in window global');
                                 return [2 /*return*/, null];
                             }
-                            return [4 /*yield*/, window.downloadVariation(assetPath.replace('https://cdn1.colijn-it.nl/', '') + "variation/" + fileName)];
-                        case 2:
+                            file = void 0;
+                            if (!this.MaterialCache.has(id)) return [3 /*break*/, 2];
+                            file = this.MaterialCache.get(id);
+                            return [3 /*break*/, 4];
+                        case 2: return [4 /*yield*/, window.downloadVariation(assetPath.replace('https://cdn1.colijn-it.nl/', '') + "variation/" + fileName)];
+                        case 3:
                             file = _a.sent();
-                            return [4 /*yield*/, VariationUtils.GetVariationSettingsFromFile(id, file)];
-                        case 3: return [2 /*return*/, _a.sent()];
-                        case 4:
+                            this.MaterialCache.set(id, file);
+                            _a.label = 4;
+                        case 4: return [4 /*yield*/, VariationUtils.GetVariationSettingsFromFile(id, file)];
+                        case 5: return [2 /*return*/, _a.sent()];
+                        case 6:
                             err_1 = _a.sent();
                             mute = err_1;
                             return [2 /*return*/, null];
-                        case 5: return [2 /*return*/];
+                        case 7: return [2 /*return*/];
                     }
                 });
             });
@@ -1060,6 +1272,7 @@
                             zipContent = _a.sent();
                             variationSettings = new VariationSettings();
                             variationSettings.id = id;
+                            if (!zipContent) return [3 /*break*/, 7];
                             if (!zipContent.files['index.json']) return [3 /*break*/, 3];
                             return [4 /*yield*/, zipContent.files['index.json'].async('string')];
                         case 2:
@@ -1083,58 +1296,106 @@
         };
         VariationUtils.CreateSettingsBasedOnIndex = function (index, variationSettings, zipContent) {
             return __awaiter(this, void 0, void 0, function () {
-                var _a, _b, _c, _d, _e, _f;
-                return __generator(this, function (_g) {
-                    switch (_g.label) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                return __generator(this, function (_l) {
+                    switch (_l.label) {
                         case 0:
                             if (!index.normalFile) return [3 /*break*/, 2];
                             _a = variationSettings;
                             return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.normalFile], index.normalFile)];
                         case 1:
-                            _a.normal = _g.sent();
+                            _a.normal = _l.sent();
                             variationSettings.normalFilename = index.normalFile;
-                            _g.label = 2;
+                            _l.label = 2;
                         case 2:
-                            if (!index.aoFile) return [3 /*break*/, 4];
+                            if (!index.diffuseFile) return [3 /*break*/, 4];
                             _b = variationSettings;
-                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.aoFile], index.aoFile)];
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.diffuseFile], index.diffuseFile)];
                         case 3:
-                            _b.ao = _g.sent();
-                            variationSettings.aoFilename = index.aoFile;
-                            _g.label = 4;
+                            _b.texture = _l.sent();
+                            variationSettings.textureFilename = index.diffuseFile;
+                            _l.label = 4;
                         case 4:
-                            if (!index.metalnessFile) return [3 /*break*/, 6];
+                            if (!index.ormFile) return [3 /*break*/, 6];
                             _c = variationSettings;
-                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.metalnessFile], index.metalnessFile)];
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.ormFile], index.ormFile)];
                         case 5:
-                            _c.metalness = _g.sent();
-                            variationSettings.metalnessFilename = index.metalnessFile;
-                            _g.label = 6;
+                            _c.orm = _l.sent();
+                            variationSettings.ormFilename = index.ormFile;
+                            return [3 /*break*/, 12];
                         case 6:
-                            if (!index.roughnessFile) return [3 /*break*/, 8];
+                            if (!index.aoFile) return [3 /*break*/, 8];
                             _d = variationSettings;
-                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.roughnessFile], index.roughnessFile)];
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.aoFile], index.aoFile)];
                         case 7:
-                            _d.roughness = _g.sent();
-                            variationSettings.roughnessFilename = index.roughnessFile;
-                            _g.label = 8;
+                            _d.ao = _l.sent();
+                            variationSettings.aoFilename = index.aoFile;
+                            _l.label = 8;
                         case 8:
-                            if (!index.diffuseFile) return [3 /*break*/, 10];
+                            if (!index.metalnessFile) return [3 /*break*/, 10];
                             _e = variationSettings;
-                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.diffuseFile], index.diffuseFile)];
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.metalnessFile], index.metalnessFile)];
                         case 9:
-                            _e.texture = _g.sent();
-                            variationSettings.textureFilename = index.diffuseFile;
-                            _g.label = 10;
+                            _e.metalness = _l.sent();
+                            variationSettings.metalnessFilename = index.metalnessFile;
+                            _l.label = 10;
                         case 10:
+                            if (!index.roughnessFile) return [3 /*break*/, 12];
                             _f = variationSettings;
-                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files['repeat.json'], 'repeat.json', false)];
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.roughnessFile], index.roughnessFile)];
                         case 11:
-                            _f.settings =
-                                (_g.sent()) || {};
+                            _f.roughness = _l.sent();
+                            variationSettings.roughnessFilename = index.roughnessFile;
+                            _l.label = 12;
+                        case 12:
+                            if (!index.displacementFile) return [3 /*break*/, 14];
+                            _g = variationSettings;
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.displacementFile], index.displacementFile)];
+                        case 13:
+                            _g.displacement = _l.sent();
+                            variationSettings.displacementFilename = index.displacementFile;
+                            _l.label = 14;
+                        case 14:
+                            if (!index.emissiveFile) return [3 /*break*/, 16];
+                            _h = variationSettings;
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.emissiveFile], index.emissiveFile)];
+                        case 15:
+                            _h.emissive = _l.sent();
+                            variationSettings.emissiveFilename = index.emissiveFile;
+                            _l.label = 16;
+                        case 16:
+                            if (!index.envMapFile) return [3 /*break*/, 18];
+                            _j = variationSettings;
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files[index.envMapFile], index.envMapFile)];
+                        case 17:
+                            _j.envMap = _l.sent();
+                            variationSettings.envMapFilename = index.envMapFile;
+                            _l.label = 18;
+                        case 18:
+                            _k = variationSettings;
+                            return [4 /*yield*/, VariationUtils.LoadFileContentFromZip(zipContent.files['repeat.json'], 'repeat.json', false)];
+                        case 19:
+                            _k.settings =
+                                (_l.sent()) || {};
                             Object.assign(variationSettings.settings, index.repeat);
                             variationSettings.settings.metalness = index.metalness;
                             variationSettings.settings.roughness = index.roughness;
+                            if (index.sheenColor) {
+                                variationSettings.settings.sheenColor = new THREE__namespace.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__namespace.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;
                             return [2 /*return*/];
                     }
                 });
@@ -1150,13 +1411,13 @@
                             allLoaded = [];
                             _loop_1 = function (fileName) {
                                 var file_1;
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
+                                return __generator(this, function (_d) {
+                                    switch (_d.label) {
                                         case 0:
-                                            if (!zipContent.files[fileName]) return [3 /*break*/, 2];
+                                            if (!zipContent.files.hasOwnProperty(fileName)) return [3 /*break*/, 2];
                                             return [4 /*yield*/, zipContent.files[fileName]];
                                         case 1:
-                                            file_1 = _a.sent();
+                                            file_1 = _d.sent();
                                             if (file_1.name.toLowerCase().indexOf('normal') > -1 && this_1.FileIsImage(file_1.name)) {
                                                 allLoaded.push(zipContent.files[fileName].async('base64').then(function (normalFile) {
                                                     variationSettings.normal = "data:image/" + _this.GetBase64FileType(file_1.name) + ";base64," + normalFile;
@@ -1187,6 +1448,24 @@
                                                     variationSettings.textureFilename = fileName;
                                                 }));
                                             }
+                                            else if (file_1.name.toLowerCase().indexOf('displacement') > -1 && this_1.FileIsImage(file_1.name)) {
+                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (displacementFile) {
+                                                    variationSettings.displacement = "data:image/" + _this.GetBase64FileType(file_1.name) + ";base64," + displacementFile;
+                                                    variationSettings.displacementFilename = fileName;
+                                                }));
+                                            }
+                                            else if (file_1.name.toLowerCase().indexOf('emissive') > -1 && this_1.FileIsImage(file_1.name)) {
+                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (emissiveFile) {
+                                                    variationSettings.emissive = "data:image/" + _this.GetBase64FileType(file_1.name) + ";base64," + emissiveFile;
+                                                    variationSettings.emissiveFilename = fileName;
+                                                }));
+                                            }
+                                            else if (file_1.name.toLowerCase().indexOf('envMap') > -1 && this_1.FileIsImage(file_1.name)) {
+                                                allLoaded.push(zipContent.files[fileName].async('base64').then(function (envMapFile) {
+                                                    variationSettings.envMap = "data:image/" + _this.GetBase64FileType(file_1.name) + ";base64," + envMapFile;
+                                                    variationSettings.envMapFilename = fileName;
+                                                }));
+                                            }
                                             else if (file_1.name.indexOf('.jp') > -1) {
                                                 allLoaded.push(zipContent.files[fileName].async('base64').then(function (textureFile) {
                                                     variationSettings.texture = 'data:image/jpeg;base64,' + textureFile;
@@ -1197,13 +1476,13 @@
                                                 allLoaded.push(zipContent.files[fileName].async('string').then(function (settingsFile) {
                                                     var settingsFileObj = JSON.parse(settingsFile);
                                                     for (var key in settingsFileObj) {
-                                                        if (settingsFileObj[key]) {
+                                                        if (settingsFileObj.hasOwnProperty(key)) {
                                                             variationSettings.settings[key] = settingsFileObj[key];
                                                         }
                                                     }
                                                 }));
                                             }
-                                            _a.label = 2;
+                                            _d.label = 2;
                                         case 2: return [2 /*return*/];
                                     }
                                 });
@@ -1280,41 +1559,58 @@
         // Get the content
         VariationUtils.GetZipContent = function (file) {
             return __awaiter(this, void 0, void 0, function () {
-                var jszip, content;
+                var jszip, e_1;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            jszip = new JSZip();
+                            _a.trys.push([0, 2, , 3]);
+                            jszip = new JSZip__default["default"]();
                             return [4 /*yield*/, jszip.loadAsync(file)];
-                        case 1:
-                            content = _a.sent();
-                            return [2 /*return*/, content];
+                        case 1: return [2 /*return*/, _a.sent()];
+                        case 2:
+                            e_1 = _a.sent();
+                            return [2 /*return*/, null];
+                        case 3: return [2 /*return*/];
                     }
                 });
             });
         };
-        VariationUtils.MaterialCache = new Map();
         return VariationUtils;
-    }());
+    }());
+    VariationUtils.MaterialCache = new Map();
 
     var VariationHelper = /** @class */ (function () {
         function VariationHelper() {
             this._lastKnownVariations = new Map();
         }
         VariationHelper.prototype.clearCache = function () {
-            var valueMap = Array.from(this._lastKnownVariations.values());
-            for (var i = 0; i < valueMap.length; i++) {
-                var values = Array.from(valueMap[i].values());
-                values.forEach(function (variations) {
-                    variations.forEach(function (variation) {
-                        variation.material.texture.dispose();
-                        variation.material.normal.dispose();
-                        variation.material.metalness.dispose();
-                        variation.material.roughness.dispose();
-                        variation.material.ao.dispose();
-                    });
+            var variationMap = Array.from(this._lastKnownVariations.values());
+            variationMap.forEach(function (variations) {
+                variations.forEach(function (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();
         };
         VariationHelper.prototype.loadPart = function (obj, parts, usePbr) {
             if (usePbr === void 0) { usePbr = false; }
@@ -1358,7 +1654,7 @@
                 });
             });
         };
-        VariationHelper.prototype.loadVariation = function (instanceId, obj, parts, usePbr) {
+        VariationHelper.prototype.loadVariation = function (obj, parts, usePbr) {
             if (usePbr === void 0) { usePbr = false; }
             return __awaiter(this, void 0, void 0, function () {
                 var len, i, variations, lastKnownVariations, j, variationSettings, newVariation, _a, e_2;
@@ -1373,8 +1669,8 @@
                             if (!(i < len)) return [3 /*break*/, 8];
                             variations = parts[i].variations;
                             if (!variations || variations.length === 0) {
-                                if (this._getLastKnownVariations(instanceId, parts[i].nodeId)) {
-                                    parts[i].variations = this._getLastKnownVariations(instanceId, parts[i].nodeId);
+                                if (this._getLastKnownVariations(parts[i].nodeId)) {
+                                    parts[i].variations = this._getLastKnownVariations(parts[i].nodeId);
                                     this._applyVariations(obj, parts[i], usePbr);
                                     return [3 /*break*/, 7];
                                 }
@@ -1406,7 +1702,7 @@
                             j++;
                             return [3 /*break*/, 2];
                         case 6:
-                            this._setLastKnownVariations(instanceId, parts[i].nodeId, lastKnownVariations);
+                            this._setLastKnownVariations(parts[i].nodeId, lastKnownVariations);
                             parts[i].variations = lastKnownVariations;
                             this._applyVariations(obj, parts[i], usePbr);
                             _b.label = 7;
@@ -1440,7 +1736,7 @@
                 var child = children[i];
                 if (child !== null && child !== undefined) {
                     child.traverse(function (mesh) {
-                        if (mesh instanceof three.Mesh && partMaterial) {
+                        if (mesh instanceof THREE__namespace.Mesh && partMaterial) {
                             if (Array.isArray(mesh.material)) { // multimaterial support
                                 for (var j = 0, jlen = mesh.material.length; j < jlen; j++) {
                                     if (mesh.material[j].name.toLowerCase().indexOf('fixed_frame') !== -1) {
@@ -1467,7 +1763,7 @@
                 var child = children[i];
                 if (child !== null && child !== undefined) {
                     child.traverse(function (mesh) {
-                        if (mesh instanceof three.Mesh && part.variations && part.variations.length > 0 && mesh.name.toLowerCase().indexOf('c_')) {
+                        if (mesh instanceof THREE__namespace.Mesh && part.variations && part.variations.length > 0 && mesh.name.toLowerCase().indexOf('c_')) {
                             for (var j = 0; j < part.variations.length; j++) {
                                 var variation = part.variations[j];
                                 if (variation.material) {
@@ -1495,85 +1791,190 @@
             if (usePbr === void 0) { usePbr = false; }
             if (variation.material.texture) {
                 variation.material.texture.needsUpdate = true;
+                // variation.material.texture.mapping = THREE.EquirectangularReflectionMapping;
             }
             if (!usePbr) {
-                var material = new three.MeshPhongMaterial({
+                var newMaterial = new THREE__namespace.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) {
                 var 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;
                 }
-                var material = new three.MeshStandardMaterial(params);
-                material.color.setRGB(1, 1, 1);
-                material.needsUpdate = true;
-                return material;
-            }
-        };
-        VariationHelper.prototype._setLastKnownVariations = function (instanceId, id, variation) {
-            if (this._lastKnownVariations.has(instanceId)) {
-                var variations = this._lastKnownVariations.get(instanceId);
-                variations.set(id, variation);
+                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__namespace.EquirectangularReflectionMapping;
+                        variation.material.envMap.minFilter = THREE__namespace.NearestFilter;
+                        variation.material.envMap.magFilter = THREE__namespace.NearestFilter;
+                    }
+                }
+                if (variation.material.reflectivity) {
+                    params.reflectivity = variation.material.reflectivity;
+                }
+                if (variation.material.side) {
+                    params.side = variation.material.side;
+                }
+                var newMaterial = new THREE__namespace.MeshPhysicalMaterial(params);
+                newMaterial.color.setRGB(1, 1, 1);
+                newMaterial.needsUpdate = true;
+                if (variation.material.transmission) {
+                    newMaterial.transmission = variation.material.transmission;
+                }
+                return newMaterial;
             }
             else {
-                var variations = new Map();
-                this._lastKnownVariations.set(instanceId, variations.set(id, variation));
+                var 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__namespace.EquirectangularReflectionMapping;
+                        variation.material.envMap.minFilter = THREE__namespace.NearestFilter;
+                        variation.material.envMap.magFilter = THREE__namespace.NearestFilter;
+                    }
+                }
+                if (variation.material.side) {
+                    params.side = variation.material.side;
+                }
+                var newMaterial = new THREE__namespace.MeshStandardMaterial(params);
+                newMaterial.color.setRGB(1, 1, 1);
+                newMaterial.needsUpdate = true;
+                return newMaterial;
             }
         };
-        VariationHelper.prototype._getLastKnownVariations = function (instanceId, id) {
-            if (this._lastKnownVariations.has(instanceId)) {
-                var variations = this._lastKnownVariations.get(instanceId);
-                if (variations.has(id)) {
-                    return variations.get(id);
-                }
+        VariationHelper.prototype._setLastKnownVariations = function (id, variation) {
+            this._lastKnownVariations.set(id, variation);
+        };
+        VariationHelper.prototype._getLastKnownVariations = function (id) {
+            if (this._lastKnownVariations.has(id)) {
+                return this._lastKnownVariations.get(id);
             }
             return null;
         };
         return VariationHelper;
     }());
 
-    var ServiceLocator = /** @class */ (function () {
-        function ServiceLocator() {
-        }
-        ServiceLocator.injector = undefined;
-        ServiceLocator = __decorate([
-            core.Injectable()
-        ], ServiceLocator);
-        return ServiceLocator;
-    }());
-
     var ConfiguratorService = /** @class */ (function () {
-        function ConfiguratorService(_injector) {
-            this._injector = _injector;
-            if (!ServiceLocator.injector) {
-                ServiceLocator.injector = _injector;
-            }
+        function ConfiguratorService() {
         }
         ConfiguratorService.prototype.initApi = function (options) {
             this._configuratorApi = new configurator.Configurator(options);
@@ -1707,21 +2108,67 @@
                 });
             });
         };
-        ConfiguratorService.ctorParameters = function () { return [
-            { type: core.Injector }
-        ]; };
-        ConfiguratorService.ɵprov = core.ɵɵdefineInjectable({ factory: function ConfiguratorService_Factory() { return new ConfiguratorService(core.ɵɵinject(core.INJECTOR)); }, token: ConfiguratorService, providedIn: "root" });
-        ConfiguratorService = __decorate([
-            core.Injectable({
-                providedIn: 'root'
-            })
-        ], ConfiguratorService);
         return ConfiguratorService;
     }());
 
+    var ObjectUtils = /** @class */ (function () {
+        function ObjectUtils() {
+        }
+        ObjectUtils.DisposeNode = function (node) {
+            node.traverse(function (obj) {
+                if (obj instanceof THREE.Mesh) {
+                    if (obj.geometry) {
+                        obj.geometry.dispose();
+                    }
+                    ObjectUtils.DisposeMaterial(obj.material);
+                }
+                if (typeof obj.dispose === 'function') {
+                    // @ts-ignore
+                    obj.dispose();
+                }
+            });
+        };
+        ObjectUtils.DisposeMaterial = function (material) {
+            var _this = this;
+            if (!material) {
+                return;
+            }
+            if (Array.isArray(material)) {
+                material.forEach(function (mtrl) {
+                    _this.materialProps
+                        .filter(function (mapType) { return mtrl[mapType]; })
+                        .forEach(function (mapType) { return mtrl[mapType].dispose(); });
+                    mtrl.dispose(); // disposes any programs associated with the material
+                });
+            }
+            else {
+                this.materialProps
+                    .filter(function (mapType) { return material[mapType] && material[mapType].dispose; })
+                    .forEach(function (mapType) { return material[mapType].dispose(); });
+                if (material.dispose) {
+                    material.dispose(); // disposes any programs associated with the material
+                }
+            }
+        };
+        ObjectUtils.DisposeObject = function (object) {
+            var _this = this;
+            if (!object) {
+                return;
+            }
+            if (object.children.length) {
+                object.children.forEach(function (child) { return _this.DisposeObject(child); });
+            }
+            this.DisposeNode(object);
+        };
+        return ObjectUtils;
+    }());
+    ObjectUtils.materialProps = ['map', 'lightMap', 'bumpMap', 'normalMap', 'specularMap', 'envMap', 'aoMap', 'roughnessMap', 'metalnessMap'];
+
     var Builder = /** @class */ (function () {
-        function Builder(scene, options, useInAngular) {
+        function Builder() {
             this.selectionsReceived = new rxjs.BehaviorSubject([]);
+            this.articleLoaded = new rxjs.BehaviorSubject(undefined);
+            this.decosReceived = new rxjs.BehaviorSubject([]);
             this.answersReceived = new rxjs.BehaviorSubject([]);
             this.modelLoaded = new rxjs.BehaviorSubject(null);
             this._selections = [];
@@ -1731,28 +2178,26 @@
             this._placedAddables = [];
             this._adjustables = [];
             this._addables = [];
+            this._imageCache = new Map();
             this._articleCache = new Map();
+        }
+        Builder.prototype.init = function (scene, options) {
             this._boFactory = new businessObjectFactory.BusinessObjectFactory();
             this._threedUtils = new ThreedUtils();
             this._variationHelper = new VariationHelper();
             if (!scene) {
                 throw 'No scene object provided!';
             }
-            if (!options) {
-                throw 'No connection options provided!';
-            }
-            if (useInAngular) {
-                this._configuratorService = ServiceLocator.injector.get(ConfiguratorService);
-            }
-            else {
-                this._configuratorService = new ConfiguratorService(undefined);
+            this._configuratorService = new ConfiguratorService();
+            // this._imageCacheService = new ImageCacheService();
+            if (options) {
+                this._configuratorService.initApi(options);
             }
-            this._configuratorService.initApi(options);
             this._scene = scene;
-        }
+        };
         Builder.prototype.buildModel = function (sku, instanceId, goodId) {
             return __awaiter(this, void 0, void 0, function () {
-                var promises, e_1;
+                var promises, build, e_1;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -1761,14 +2206,14 @@
                             }
                             _a.label = 1;
                         case 1:
-                            _a.trys.push([1, 8, , 9]);
+                            _a.trys.push([1, 9, , 10]);
                             return [4 /*yield*/, this._setInstanceId(sku, instanceId, goodId)];
                         case 2:
                             _a.sent();
                             return [4 /*yield*/, this._prepareConfiguration(this._sku, this._goodId)];
                         case 3:
                             _a.sent();
-                            if (!this._source) return [3 /*break*/, 6];
+                            if (!this._source) return [3 /*break*/, 7];
                             return [4 /*yield*/, this._configuratorService.setInstanceToConfigure(this._instanceId)];
                         case 4:
                             _a.sent();
@@ -1783,13 +2228,51 @@
                                 return [2 /*return*/];
                             }
                             this._linkSelectionsAndDecos();
-                            return [2 /*return*/, this._build(this._instanceId)];
-                        case 6: throw 'GLB source not found!';
-                        case 7: return [3 /*break*/, 9];
-                        case 8:
+                            return [4 /*yield*/, this._build()];
+                        case 6:
+                            build = _a.sent();
+                            this._cleanUp();
+                            return [2 /*return*/, build];
+                        case 7: throw 'GLB source not found!';
+                        case 8: return [3 /*break*/, 10];
+                        case 9:
                             e_1 = _a.sent();
                             throw e_1;
-                        case 9: return [2 /*return*/];
+                        case 10: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        Builder.prototype.buildModelFromData = function (selections, decos, assetUrl, cdnUrl, schema) {
+            return __awaiter(this, void 0, void 0, function () {
+                var build, e_2;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this._scene) {
+                                return [2 /*return*/];
+                            }
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 6, , 7]);
+                            return [4 /*yield*/, this._downloadAsset(assetUrl, cdnUrl, schema)];
+                        case 2:
+                            _a.sent();
+                            if (!(selections && selections.length > 1 && decos && decos.length > 0 && this._source)) return [3 /*break*/, 4];
+                            this._selections = selections;
+                            this._decos = decos;
+                            this._linkSelectionsAndDecos();
+                            return [4 /*yield*/, this._build()];
+                        case 3:
+                            build = _a.sent();
+                            this._cleanUp();
+                            return [2 /*return*/, build];
+                        case 4: throw 'Unsufficient data provided!';
+                        case 5: return [3 /*break*/, 7];
+                        case 6:
+                            e_2 = _a.sent();
+                            throw e_2;
+                        case 7: return [2 /*return*/];
                     }
                 });
             });
@@ -1846,6 +2329,54 @@
                 });
             });
         };
+        Builder.prototype.getImageForSelectionOrAnswer = function (object) {
+            var _this = this;
+            var includeMimeType = true, thumb = true;
+            return new Promise(function (resolve, reject) {
+                if (object && object.nodeId) {
+                    if (!_this._imageCache.has(object.nodeId)) {
+                        return _this._configuratorService.getSingleImage(object.nodeId, 4, includeMimeType, thumb, true)
+                            .then(function (responseData) {
+                            var base64 = _this._handleResponseData(includeMimeType, thumb, responseData);
+                            _this._imageCache.set(object.nodeId, base64);
+                            resolve(base64);
+                        }).catch(function () {
+                            reject();
+                        });
+                    }
+                    else {
+                        resolve(_this._imageCache.get(object.nodeId));
+                    }
+                }
+                else {
+                    reject();
+                }
+            });
+        };
+        Builder.prototype._cleanUp = function () {
+            this._sku = undefined;
+            this._goodId = undefined;
+            this._instanceId = undefined;
+            this._variationHelper.clearCache();
+        };
+        Builder.prototype._handleResponseData = function (includeMimetype, thumb, responseData) {
+            if (responseData && responseData.resultObject) {
+                if (responseData.resultObject.filePath !== null && responseData.resultObject.filePath !== "") {
+                    return ImageUtils.getFixedImageFilepathUrl(responseData.resultObject.filePath);
+                }
+                else {
+                    if (includeMimetype) {
+                        return ImageUtils.getDocBodyWithMimeTypeDefinition(responseData.resultObject.fileName, thumb ? responseData.resultObject.thumbnailBody : responseData.resultObject.documentBody);
+                    }
+                    else {
+                        return thumb ? responseData.resultObject.thumbnailBody : responseData.resultObject.documentBody;
+                    }
+                }
+            }
+            else {
+                return '';
+            }
+        };
         Builder.prototype._setInstanceId = function (sku, instanceId, goodId) {
             return __awaiter(this, void 0, void 0, function () {
                 var result;
@@ -1886,33 +2417,47 @@
         };
         Builder.prototype._prepareConfiguration = function (sku, goodId) {
             return __awaiter(this, void 0, void 0, function () {
-                var article, _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var article;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0: return [4 /*yield*/, this._getArticle(sku, goodId)];
                         case 1:
-                            article = _b.sent();
+                            article = _a.sent();
                             if (!(article && article.assetUrl)) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this._downloadAsset(article.assetUrl, article.contentDeliveryUrl, article.distSchema)];
+                        case 2:
+                            _a.sent();
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        Builder.prototype._downloadAsset = function (assetUrl, cdnUrl, schema) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
                             _a = this;
-                            return [4 /*yield*/, this._threedUtils.download3DSource(article.assetUrl)
+                            return [4 /*yield*/, this._threedUtils.download3DSource(assetUrl, cdnUrl)
                                     .catch(function (error) {
                                     throw error;
                                 })];
-                        case 2:
+                        case 1:
                             _a._source = _b.sent();
-                            if (article.contentDeliveryUrl) {
+                            if (cdnUrl) {
                                 this._variationHelper.assetPath =
-                                    article.contentDeliveryUrl +
-                                        (article.contentDeliveryUrl.endsWith('/') ? '' : '/') +
-                                        (article.distSchema ? article.distSchema : 'UP_DBA');
+                                    cdnUrl +
+                                        (cdnUrl.endsWith('/') ? '' : '/') +
+                                        (schema ? schema : 'UP_DBA');
                             }
-                            _b.label = 3;
-                        case 3: return [2 /*return*/];
+                            return [2 /*return*/];
                     }
                 });
             });
         };
-        Builder.prototype._build = function (instanceId) {
+        Builder.prototype._build = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var adjustables, obj, connected, i, len, adjustable, ii, lenii;
                 return __generator(this, function (_a) {
@@ -1921,7 +2466,7 @@
                             this._reset();
                             adjustables = this._getAdjustables();
                             if (!(adjustables && adjustables.length > 0)) return [3 /*break*/, 2];
-                            obj = new three.Object3D();
+                            obj = new THREE__namespace.Object3D();
                             obj.visible = false; // no need to render visualy
                             this._scene.add(obj);
                             connected = false;
@@ -1944,10 +2489,12 @@
                             }
                             this._placeAddables(obj);
                             this._updatePivot(obj);
-                            return [4 /*yield*/, this._loadVariations(obj, instanceId)];
+                            return [4 /*yield*/, this._loadVariations(obj)];
                         case 1:
                             _a.sent();
+                            // this._variationHelper.clearCache();
                             this._scene.remove(obj);
+                            ObjectUtils.DisposeObject(this._source);
                             return [2 /*return*/, obj];
                         case 2: throw 'No adjustables found!';
                     }
@@ -2048,8 +2595,8 @@
             var obj = this._source ? this._source.getObjectByName(adj.decoNode.gameObjectName) : null;
             if (!obj) {
                 // in case of glb files, the importer removes dots from names
-                var name_1 = adj.decoNode.gameObjectName.replace(/[.]/g, '');
-                obj = this._source ? this._source.getObjectByName(name_1) : null;
+                var name = adj.decoNode.gameObjectName.replace(/[.]/g, '');
+                obj = this._source ? this._source.getObjectByName(name) : null;
                 if (!obj) {
                     // console.warn(`No object with name ${adj.decoNode.gameObjectName} found!`);
                     return null;
@@ -2139,6 +2686,7 @@
                     switch (_a.label) {
                         case 0:
                             if (this._articleCache.has(sku)) {
+                                this.articleLoaded.next(this._articleCache.get(sku));
                                 return [2 /*return*/, this._articleCache.get(sku)];
                             }
                             if (!!goodId) return [3 /*break*/, 2];
@@ -2162,6 +2710,7 @@
                                 }
                             }
                             this._articleCache.set(sku, article$1);
+                            this.articleLoaded.next(article$1);
                             return [2 /*return*/, article$1];
                     }
                 });
@@ -2203,6 +2752,7 @@
                             decosResponse = _a.sent();
                             if (decosResponse.resultObjects && decosResponse.resultObjects.length > 0) {
                                 this._decos = this._boFactory.makeBOArrayFromRawBackendDataArray(decoNode.DecoNode, decosResponse.resultObjects);
+                                this.decosReceived.next(this._decos);
                             }
                             else {
                                 throw 'No deconodes found!';
@@ -2240,19 +2790,20 @@
                 return deco.type === decoNodeType_enum.DecoNodeType.Variation;
             });
         };
-        Builder.prototype._loadVariations = function (obj, instanceId) {
+        Builder.prototype._loadVariations = function (obj) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0: return [4 /*yield*/, this._variationHelper.loadPart(obj, this._adjustables, true)];
                         case 1:
                             _a.sent();
-                            return [4 /*yield*/, this._variationHelper.loadVariation(instanceId, obj, this._adjustables, true)];
+                            return [4 /*yield*/, this._variationHelper.loadVariation(obj, this._adjustables, true)];
                         case 2:
                             _a.sent();
-                            return [4 /*yield*/, this._variationHelper.loadVariation(instanceId, obj, this._addables, true)];
+                            return [4 /*yield*/, this._variationHelper.loadVariation(obj, this._addables, true)];
                         case 3:
                             _a.sent();
+                            this._variationHelper.clearCache();
                             return [2 /*return*/];
                     }
                 });
@@ -2265,10 +2816,10 @@
             });
         };
         Builder.prototype._updatePivot = function (obj) {
-            var boundingBox = new three.Box3().setFromObject(obj);
-            var bbCenterPivot = new three.Vector3();
+            var boundingBox = new THREE__namespace.Box3().setFromObject(obj);
+            var bbCenterPivot = new THREE__namespace.Vector3();
             boundingBox.getCenter(bbCenterPivot);
-            var delta = new three.Vector3().sub(bbCenterPivot).setY(Math.abs(Math.min(boundingBox.min.y, 0)));
+            var delta = new THREE__namespace.Vector3().sub(bbCenterPivot).setY(Math.abs(Math.min(boundingBox.min.y, 0)));
             obj.children.forEach(function (child) {
                 child.position.add(delta);
             });
@@ -2281,106 +2832,40 @@
             this._addables.length = 0;
             this._prepareTheSelections();
         };
-        Builder.ctorParameters = function () { return [
-            { type: three.Scene },
-            { type: options.Options },
-            { type: Boolean }
-        ]; };
-        Builder = __decorate([
-            core.Injectable()
-        ], Builder);
         return Builder;
-    }());
+    }());
+    Builder.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function Builder_Factory() { return new Builder(); }, token: Builder, providedIn: "root" });
+    Builder.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: "root"
+                },] }
+    ];
+    Builder.ctorParameters = function () { return []; };
 
     var AnswersComponent = /** @class */ (function () {
         function AnswersComponent() {
             this.answers = [];
-            this.answerClick = new core.EventEmitter();
+            this.answerClick = new i0.EventEmitter();
         }
-        __decorate([
-            core.Input()
-        ], AnswersComponent.prototype, "answers", void 0);
-        __decorate([
-            core.Input()
-        ], AnswersComponent.prototype, "selectionTitle", void 0);
-        __decorate([
-            core.Output()
-        ], AnswersComponent.prototype, "answerClick", void 0);
-        AnswersComponent = __decorate([
-            core.Component({
-                selector: "answers",
-                template: "\n        <div class=\"ione-configurator\">\n            <div class=\"rp-answers-slideout\">\n                <h2 class=\"answers-title\" [textContent]=\"selectionTitle\"></h2>\n                <div class=\"answers-container\" visibilityObserverMaster>\n                    <answer *ngFor=\"let answer of answers\"\n                            (click)=\"answerClick.emit(answer)\"\n                            [answer]=\"answer\"\n                            visibilityObserver\n                            #intersection=\"intersection\"\n                            [observerEnabled]=\"true\"\n                            [showing]=\"intersection.isIntersecting\"\n                    ></answer>\n                </div>\n                \n            </div>\n        </div>\n    ",
-                styles: [".ione-configurator .rp-answers-slideout{position:absolute;top:0;right:0;width:400px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.ione-configurator .answers-title{margin-left:10px;color:#1a1a1a}.ione-configurator .answers-container{height:100vh;overflow-y:scroll}.ione-configurator .answer-content{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.ione-configurator .thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .img-size{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .answer-wrapper{display:block}.ione-configurator .answer-title{font-size:12px;position:relative;overflow:hidden;cursor:pointer}.ione-configurator .question{font-weight:700;color:#1a1a1a}.ione-configurator .answer{font-size:12px;font-style:italic;margin-top:3px}.ione-configurator .collapse-content,.ione-configurator .collapse-wrapper{display:block}.ione-configurator .collapse-handle{position:absolute;top:10px;right:12px;border:solid #000;border-width:0 3px 3px 0;display:inline-block;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.ione-configurator .collapse-handle.expanded{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}.ione-configurator .child-selection{margin-left:10px;display:flex;flex-direction:column;margin-top:5px}.ione-configurator .mat-title{margin-left:10px;color:#1a1a1a}.ione-configurator .drawer__header{height:48px}.ione-configurator .rp-selections-summary{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background:0 0;overflow:auto;position:absolute;top:0;right:0;width:400px}.ione-configurator .selections-content{overflow-y:auto}.ione-configurator .co-summary-line{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.ione-configurator .selection-thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .selection-img{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .answer-thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .answer-img{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .unloaded{background-color:#d3d3d3}.ione-configurator .titles{margin-left:14px;-ms-grid-row-align:center;align-self:center}.ione-configurator .title-wrapper{display:flex;flex-direction:column}.ione-configurator .answer-title-wrapper{text-align:center;-ms-grid-row-align:center;align-self:center;margin-left:14px}"]
-            })
-        ], AnswersComponent);
         return AnswersComponent;
-    }());
-
-    var ImageCacheService = /** @class */ (function () {
-        function ImageCacheService(_configuratorService) {
-            this._configuratorService = _configuratorService;
-            // Map containing the retrieved images, @number = nodeId, @string = base64 string
-            this._imageCache = new Map();
-        }
-        ImageCacheService_1 = ImageCacheService;
-        ImageCacheService._handleResponseData = function (includeMimetype, thumb, responseData) {
-            if (responseData && responseData.resultObject) {
-                if (responseData.resultObject.filePath !== null && responseData.resultObject.filePath !== "") {
-                    return ImageUtils.getFixedImageFilepathUrl(responseData.resultObject.filePath);
-                }
-                else {
-                    if (includeMimetype) {
-                        return ImageUtils.getDocBodyWithMimeTypeDefinition(responseData.resultObject.fileName, thumb ? responseData.resultObject.thumbnailBody : responseData.resultObject.documentBody);
-                    }
-                    else {
-                        return thumb ? responseData.resultObject.thumbnailBody : responseData.resultObject.documentBody;
-                    }
-                }
-            }
-            else {
-                return '';
-            }
-        };
-        ImageCacheService.prototype.getImageForSelectionOrAnswer = function (object) {
-            var _this = this;
-            var includeMimeType = true, thumb = true;
-            return new Promise(function (resolve, reject) {
-                if (object && object.nodeId) {
-                    if (!_this._imageCache.has(object.nodeId)) {
-                        return _this._configuratorService.getSingleImage(object.nodeId, 4, includeMimeType, thumb, true)
-                            .then(function (responseData) {
-                            var base64 = ImageCacheService_1._handleResponseData(includeMimeType, thumb, responseData);
-                            _this._imageCache.set(object.nodeId, base64);
-                            resolve(base64);
-                        }).catch(function () {
-                            reject();
-                        });
-                    }
-                    else {
-                        resolve(_this._imageCache.get(object.nodeId));
-                    }
-                }
-                else {
-                    reject();
-                }
-            });
-        };
-        var ImageCacheService_1;
-        ImageCacheService.ctorParameters = function () { return [
-            { type: ConfiguratorService }
-        ]; };
-        ImageCacheService.ɵprov = core.ɵɵdefineInjectable({ factory: function ImageCacheService_Factory() { return new ImageCacheService(core.ɵɵinject(ConfiguratorService)); }, token: ImageCacheService, providedIn: "root" });
-        ImageCacheService = ImageCacheService_1 = __decorate([
-            core.Injectable({
-                providedIn: 'root'
-            })
-        ], ImageCacheService);
-        return ImageCacheService;
-    }());
+    }());
+    AnswersComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "answers",
+                    template: "\n        <div class=\"ione-configurator\">\n            <div class=\"rp-answers-slideout\">\n                <h2 class=\"answers-title\" [textContent]=\"selectionTitle\"></h2>\n                <div class=\"answers-container\" visibilityObserverMaster>\n                    <answer *ngFor=\"let answer of answers\"\n                            (click)=\"answerClick.emit(answer)\"\n                            [answer]=\"answer\"\n                            visibilityObserver\n                            #intersection=\"intersection\"\n                            [observerEnabled]=\"true\"\n                            [showing]=\"intersection.isIntersecting\"\n                    ></answer>\n                </div>\n                \n            </div>\n        </div>\n    ",
+                    styles: [".ione-configurator .rp-answers-slideout{position:absolute;top:0;right:0;width:400px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.ione-configurator .answers-title{margin-left:10px;color:#1a1a1a}.ione-configurator .answers-container{height:100vh;overflow-y:scroll}.ione-configurator .answer-content{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid 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"]
+                },] }
+    ];
+    AnswersComponent.ctorParameters = function () { return []; };
+    AnswersComponent.propDecorators = {
+        answers: [{ type: i0.Input }],
+        selectionTitle: [{ type: i0.Input }],
+        answerClick: [{ type: i0.Output }]
+    };
 
     var AnswerComponent = /** @class */ (function () {
-        function AnswerComponent(_imageCacheService) {
-            this._imageCacheService = _imageCacheService;
+        function AnswerComponent(_builder) {
+            this._builder = _builder;
         }
         Object.defineProperty(AnswerComponent.prototype, "showing", {
             set: function (value) {
@@ -2392,7 +2877,7 @@
                     this.answer.imageData = null;
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         AnswerComponent.prototype.ngOnInit = function () {
@@ -2401,7 +2886,7 @@
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._imageCacheService.getImageForSelectionOrAnswer(answer).then(function (imageSrc) {
+                        case 0: return [4 /*yield*/, this._builder.getImageForSelectionOrAnswer(answer).then(function (imageSrc) {
                                 answer.imageData = imageSrc === "" ? null : imageSrc;
                             })];
                         case 1:
@@ -2411,31 +2896,29 @@
                 });
             });
         };
-        AnswerComponent.ctorParameters = function () { return [
-            { type: ImageCacheService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], AnswerComponent.prototype, "answer", void 0);
-        __decorate([
-            core.Input()
-        ], AnswerComponent.prototype, "showing", null);
-        AnswerComponent = __decorate([
-            core.Component({
-                selector: 'answer',
-                template: "\n    <div class=\"ione-configurator\">\n      <div class=\"answer-wrapper\">\n        <div class=\"answer-content\" @answerAppear>\n          <div class=\"answer-thumbnail\">\n            <rp-loader *ngIf=\"answer.imageData === ''\"></rp-loader>\n            <img *ngIf=\"answer.imageData !== '' && answer.imageData !== null\" class=\"answer-img\" [src]=\"answer.imageData\">\n          </div>\n          <div class=\"answer-title-wrapper\">\n            <span class=\"answer-title\" [textContent]=\"answer.commercialAnswer\"></span>\n          </div>\n          <div class=\"price\">\n            <span class=\"price-value\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
-                animations: [
-                    animations.trigger('answerAppear', [
-                        animations.state('void', animations.style({ 'background': '#dbdbdb' })),
-                        animations.state('white', animations.style({ 'background': 'white' })),
-                        animations.transition('void <=> *', animations.animate(500))
-                    ])
-                ],
-                styles: [".ione-configurator .rp-answers-slideout{position:absolute;top:0;right:0;width:400px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.ione-configurator .answers-title{margin-left:10px;color:#1a1a1a}.ione-configurator .answers-container{height:100vh;overflow-y:scroll}.ione-configurator .answer-content{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.ione-configurator .thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .img-size{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .answer-wrapper{display:block}.ione-configurator .answer-title{font-size:12px;position:relative;overflow:hidden;cursor:pointer}.ione-configurator .question{font-weight:700;color:#1a1a1a}.ione-configurator .answer{font-size:12px;font-style:italic;margin-top:3px}.ione-configurator .collapse-content,.ione-configurator .collapse-wrapper{display:block}.ione-configurator .collapse-handle{position:absolute;top:10px;right:12px;border:solid #000;border-width:0 3px 3px 0;display:inline-block;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.ione-configurator .collapse-handle.expanded{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}.ione-configurator .child-selection{margin-left:10px;display:flex;flex-direction:column;margin-top:5px}.ione-configurator .mat-title{margin-left:10px;color:#1a1a1a}.ione-configurator .drawer__header{height:48px}.ione-configurator .rp-selections-summary{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background:0 0;overflow:auto;position:absolute;top:0;right:0;width:400px}.ione-configurator .selections-content{overflow-y:auto}.ione-configurator .co-summary-line{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.ione-configurator .selection-thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .selection-img{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .answer-thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .answer-img{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .unloaded{background-color:#d3d3d3}.ione-configurator .titles{margin-left:14px;-ms-grid-row-align:center;align-self:center}.ione-configurator .title-wrapper{display:flex;flex-direction:column}.ione-configurator .answer-title-wrapper{text-align:center;-ms-grid-row-align:center;align-self:center;margin-left:14px}"]
-            })
-        ], AnswerComponent);
         return AnswerComponent;
-    }());
+    }());
+    AnswerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'answer',
+                    template: "\n    <div class=\"ione-configurator\">\n      <div class=\"answer-wrapper\">\n        <div class=\"answer-content\" @answerAppear>\n          <div class=\"answer-thumbnail\">\n            <rp-loader *ngIf=\"answer.imageData === ''\"></rp-loader>\n            <img *ngIf=\"answer.imageData !== '' && answer.imageData !== null\" class=\"answer-img\" [src]=\"answer.imageData\">\n          </div>\n          <div class=\"answer-title-wrapper\">\n            <span class=\"answer-title\" [textContent]=\"answer.commercialAnswer\"></span>\n          </div>\n          <div class=\"price\">\n            <span class=\"price-value\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
+                    animations: [
+                        animations.trigger('answerAppear', [
+                            animations.state('void', animations.style({ 'background': '#dbdbdb' })),
+                            animations.state('white', animations.style({ 'background': 'white' })),
+                            animations.transition('void <=> *', animations.animate(500))
+                        ])
+                    ],
+                    styles: [".ione-configurator .rp-answers-slideout{position:absolute;top:0;right:0;width:400px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.ione-configurator .answers-title{margin-left:10px;color:#1a1a1a}.ione-configurator .answers-container{height:100vh;overflow-y:scroll}.ione-configurator .answer-content{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid 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 = function () { return [
+        { type: Builder }
+    ]; };
+    AnswerComponent.propDecorators = {
+        answer: [{ type: i0.Input }],
+        showing: [{ type: i0.Input }]
+    };
 
     var VisibilityObserverMasterDirective = /** @class */ (function () {
         // I initialize the intersection observer parent directive.
@@ -2489,13 +2972,14 @@
             this._mapping.delete(element);
             this._observer.unobserve(element);
         };
-        VisibilityObserverMasterDirective = __decorate([
-            core.Directive({
-                selector: '[visibilityObserverMaster]'
-            })
-        ], VisibilityObserverMasterDirective);
         return VisibilityObserverMasterDirective;
-    }());
+    }());
+    VisibilityObserverMasterDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[visibilityObserverMaster]'
+                },] }
+    ];
+    VisibilityObserverMasterDirective.ctorParameters = function () { return []; };
 
     var VisibilityObserverDirective = /** @class */ (function () {
         // I initialize the intersection observer directive.
@@ -2536,76 +3020,76 @@
                 });
             }
         };
-        VisibilityObserverDirective.ctorParameters = function () { return [
-            { type: VisibilityObserverMasterDirective },
-            { type: core.ElementRef }
-        ]; };
-        __decorate([
-            core.Input()
-        ], VisibilityObserverDirective.prototype, "observerEnabled", void 0);
-        VisibilityObserverDirective = __decorate([
-            core.Directive({
-                selector: '[visibilityObserver]',
-                exportAs: 'intersection'
-            })
-        ], VisibilityObserverDirective);
         return VisibilityObserverDirective;
-    }());
+    }());
+    VisibilityObserverDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[visibilityObserver]',
+                    exportAs: 'intersection'
+                },] }
+    ];
+    VisibilityObserverDirective.ctorParameters = function () { return [
+        { type: VisibilityObserverMasterDirective },
+        { type: i0.ElementRef }
+    ]; };
+    VisibilityObserverDirective.propDecorators = {
+        observerEnabled: [{ type: i0.Input }]
+    };
 
     var LoaderComponent = /** @class */ (function () {
         function LoaderComponent() {
         }
-        LoaderComponent = __decorate([
-            core.Component({
-                selector: 'rp-loader',
-                template: "\n    <div class=\"loader-wrapper\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" stroke=\"#3760a1\">\n        <g fill=\"none\" fill-rule=\"evenodd\" stroke-width=\"3\">\n          <circle class=\"ripple1\" cx=\"22\" cy=\"22\" r=\"19\">\n          </circle>\n          <circle class=\"ripple2\" cx=\"22\" cy=\"22\" r=\"19\">\n          </circle>\n        </g>\n      </svg>\n    </div>\n  ",
-                styles: [":host{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}:host .loader-wrapper{z-index:1100;position:absolute;width:54px;height:54px}:host .loader-wrapper svg{width:100%;height:100%}:host .loader-wrapper svg .ripple1{transform-origin:center;-webkit-animation:1.5s infinite ripple;animation:1.5s infinite ripple}:host .loader-wrapper svg .ripple2{transform-origin:center;-webkit-animation:1.5s .4s infinite ripple;animation:1.5s .4s infinite ripple}@-webkit-keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}"]
-            })
-        ], LoaderComponent);
         return LoaderComponent;
-    }());
+    }());
+    LoaderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'rp-loader',
+                    template: "\n    <div class=\"loader-wrapper\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" stroke=\"#3760a1\">\n        <g fill=\"none\" fill-rule=\"evenodd\" stroke-width=\"3\">\n          <circle class=\"ripple1\" cx=\"22\" cy=\"22\" r=\"19\">\n          </circle>\n          <circle class=\"ripple2\" cx=\"22\" cy=\"22\" r=\"19\">\n          </circle>\n        </g>\n      </svg>\n    </div>\n  ",
+                    styles: [":host{-webkit-user-select:none;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"]
+                },] }
+    ];
 
     var SharedModule = /** @class */ (function () {
         function SharedModule() {
         }
-        SharedModule = __decorate([
-            core.NgModule({
-                imports: [
-                    common.CommonModule
-                ],
-                declarations: [
-                    LoaderComponent
-                ],
-                exports: [
-                    LoaderComponent
-                ]
-            })
-        ], SharedModule);
         return SharedModule;
-    }());
+    }());
+    SharedModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    declarations: [
+                        LoaderComponent
+                    ],
+                    exports: [
+                        LoaderComponent
+                    ]
+                },] }
+    ];
 
     var AnswersModule = /** @class */ (function () {
         function AnswersModule() {
         }
-        AnswersModule = __decorate([
-            core.NgModule({
-                imports: [
-                    common.CommonModule,
-                    SharedModule
-                ],
-                declarations: [
-                    AnswersComponent,
-                    AnswerComponent,
-                    VisibilityObserverDirective,
-                    VisibilityObserverMasterDirective
-                ],
-                exports: [
-                    AnswersComponent
-                ]
-            })
-        ], AnswersModule);
         return AnswersModule;
-    }());
+    }());
+    AnswersModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        SharedModule
+                    ],
+                    declarations: [
+                        AnswersComponent,
+                        AnswerComponent,
+                        VisibilityObserverDirective,
+                        VisibilityObserverMasterDirective
+                    ],
+                    exports: [
+                        AnswersComponent
+                    ]
+                },] }
+    ];
 
     var SelectionViewModel = /** @class */ (function () {
         function SelectionViewModel() {
@@ -2616,21 +3100,19 @@
         return SelectionViewModel;
     }());
     var SelectionsComponent = /** @class */ (function () {
-        function SelectionsComponent(_imageCacheService) {
-            this._imageCacheService = _imageCacheService;
+        function SelectionsComponent(_builder) {
+            this._builder = _builder;
             this.selectionViewModels = [];
-            this.selectionClick = new core.EventEmitter();
+            this.selectionClick = new i0.EventEmitter();
         }
         Object.defineProperty(SelectionsComponent.prototype, "selections", {
             set: function (value) {
                 this._prepareSelections(value);
                 this._loadThumbnails();
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
-        SelectionsComponent.prototype.ngOnInit = function () {
-        };
         SelectionsComponent.prototype.expandClicked = function (selectionViewModel, mouseEvent) {
             mouseEvent.preventDefault();
             mouseEvent.stopImmediatePropagation();
@@ -2649,7 +3131,7 @@
                         this.selectionViewModels.forEach(function (viewModel) { return __awaiter(_this, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
-                                    case 0: return [4 /*yield*/, this._imageCacheService.getImageForSelectionOrAnswer(viewModel.selection).then(function (imageSrc) {
+                                    case 0: return [4 /*yield*/, this._builder.getImageForSelectionOrAnswer(viewModel.selection).then(function (imageSrc) {
                                             viewModel.thumbnail = imageSrc === "" ? null : imageSrc;
                                         })];
                                     case 1:
@@ -2680,51 +3162,53 @@
                 }
             });
         };
-        SelectionsComponent.ctorParameters = function () { return [
-            { type: ImageCacheService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], SelectionsComponent.prototype, "selections", null);
-        __decorate([
-            core.Output()
-        ], SelectionsComponent.prototype, "selectionClick", void 0);
-        SelectionsComponent = __decorate([
-            core.Component({
-                selector: "selections",
-                template: "\n        <div class=\"ione-configurator\">\n            <div class=\"rp-selections-summary\">\n                <header class=\"drawer__header\">\n                    <h2 class=\"mat-title\" [textContent]=\"'Configuratie'\"></h2>\n                    <!--<button>-->\n                    <!---->\n                    <!--</button>-->\n                </header>\n                <div class=\"selections-content\">\n                    <ng-container *ngFor=\"let selectionViewModel of selectionViewModels\">\n\n                        <div class=\"co-summary-line\" (click)=\"selectSelection(selectionViewModel.selection, $event)\">\n                            <div class=\"selection-thumbnail\">\n                                <rp-loader *ngIf=\"selectionViewModel.thumbnail === ''\"></rp-loader>\n                                <img visibilityObserver *ngIf=\"selectionViewModel.thumbnail !== '' && selectionViewModel.thumbnail !== null\" class=\"selection-img\" [src]=\"selectionViewModel.thumbnail\">\n                            </div>\n                            <div class=\"titles\">\n                                <div class=\"title-wrapper\">\n                                    <label class=\"question\" [textContent]=\"selectionViewModel.selection.question\"></label>\n                                    <span class=\"answer\" [textContent]=\"selectionViewModel.selection.answer\"></span>\n                                    <div *ngIf=\"selectionViewModel.children.length > 0 && selectionViewModel.expanded\" @showHideChildren>\n                                        <div class=\"child-selection\" *ngFor=\"let selection of selectionViewModel.children\"\n                                             (click)=\"selectSelection(selection, $event)\"\n                                        >\n                                            <label class=\"question\" [textContent]=\"selection.commercialQuestion\"></label>\n                                            <span class=\"answer\" [textContent]=\"selection.answer\"></span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            \n                            <div class=\"price-wrapper\">\n                                <span class=\"price-value\"></span>\n                            </div>\n\n                            <div class=\"collapse-wrapper\">\n                                <div class=\"collapse-content\">\n                                    <div class=\"collapse-handle\" [class.expanded]=\"selectionViewModel.expanded\"\n                                         *ngIf=\"selectionViewModel.children.length > 0\" (click)=\"expandClicked(selectionViewModel, $event)\"></div>\n                                </div>\n                            </div>\n                        </div>\n\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    ",
-                animations: [
-                    animations.trigger('showHideChildren', [
-                        animations.state('void', animations.style({ 'height': '0' })),
-                        animations.state('*', animations.style({ 'height': '*' })),
-                        animations.transition('void <=> *', animations.animate(200))
-                    ])
-                ],
-                styles: [".ione-configurator .rp-answers-slideout{position:absolute;top:0;right:0;width:400px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.ione-configurator .answers-title{margin-left:10px;color:#1a1a1a}.ione-configurator .answers-container{height:100vh;overflow-y:scroll}.ione-configurator .answer-content{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.ione-configurator .thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .img-size{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .answer-wrapper{display:block}.ione-configurator .answer-title{font-size:12px;position:relative;overflow:hidden;cursor:pointer}.ione-configurator .question{font-weight:700;color:#1a1a1a}.ione-configurator .answer{font-size:12px;font-style:italic;margin-top:3px}.ione-configurator .collapse-content,.ione-configurator .collapse-wrapper{display:block}.ione-configurator .collapse-handle{position:absolute;top:10px;right:12px;border:solid #000;border-width:0 3px 3px 0;display:inline-block;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.ione-configurator .collapse-handle.expanded{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}.ione-configurator .child-selection{margin-left:10px;display:flex;flex-direction:column;margin-top:5px}.ione-configurator .mat-title{margin-left:10px;color:#1a1a1a}.ione-configurator .drawer__header{height:48px}.ione-configurator .rp-selections-summary{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background:0 0;overflow:auto;position:absolute;top:0;right:0;width:400px}.ione-configurator .selections-content{overflow-y:auto}.ione-configurator .co-summary-line{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid #d3d3d3;padding:10px;display:flex;flex-direction:row;border-radius:3px;margin-bottom:3px;box-shadow:2px 1px rgba(211,211,211,.5);background:#fff}.ione-configurator .selection-thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .selection-img{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .answer-thumbnail{width:54px;min-width:54px;height:54px;min-height:54px;border:1px solid #d3d3d3;border-radius:5px}.ione-configurator .answer-img{width:54px;min-width:54px;height:54px;min-height:54px;border-radius:5px}.ione-configurator .unloaded{background-color:#d3d3d3}.ione-configurator .titles{margin-left:14px;-ms-grid-row-align:center;align-self:center}.ione-configurator .title-wrapper{display:flex;flex-direction:column}.ione-configurator .answer-title-wrapper{text-align:center;-ms-grid-row-align:center;align-self:center;margin-left:14px}"]
-            })
-        ], SelectionsComponent);
         return SelectionsComponent;
-    }());
+    }());
+    SelectionsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "selections",
+                    template: "\n        <div class=\"ione-configurator\">\n            <div class=\"rp-selections-summary\">\n                <header class=\"drawer__header\">\n                    <h2 class=\"mat-title\" [textContent]=\"'Configuratie'\"></h2>\n                    <!--<button>-->\n                    <!---->\n                    <!--</button>-->\n                </header>\n                <div class=\"selections-content\">\n                    <ng-container *ngFor=\"let selectionViewModel of selectionViewModels\">\n\n                        <div class=\"co-summary-line\" (click)=\"selectSelection(selectionViewModel.selection, $event)\">\n                            <div class=\"selection-thumbnail\">\n                                <rp-loader *ngIf=\"selectionViewModel.thumbnail === ''\"></rp-loader>\n                                <img visibilityObserver *ngIf=\"selectionViewModel.thumbnail !== '' && selectionViewModel.thumbnail !== null\" class=\"selection-img\" [src]=\"selectionViewModel.thumbnail\">\n                            </div>\n                            <div class=\"titles\">\n                                <div class=\"title-wrapper\">\n                                    <label class=\"question\" [textContent]=\"selectionViewModel.selection.question\"></label>\n                                    <span class=\"answer\" [textContent]=\"selectionViewModel.selection.answer\"></span>\n                                    <div *ngIf=\"selectionViewModel.children.length > 0 && selectionViewModel.expanded\" @showHideChildren>\n                                        <div class=\"child-selection\" *ngFor=\"let selection of selectionViewModel.children\"\n                                             (click)=\"selectSelection(selection, $event)\"\n                                        >\n                                            <label class=\"question\" [textContent]=\"selection.commercialQuestion\"></label>\n                                            <span class=\"answer\" [textContent]=\"selection.answer\"></span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            \n                            <div class=\"price-wrapper\">\n                                <span class=\"price-value\"></span>\n                            </div>\n\n                            <div class=\"collapse-wrapper\">\n                                <div class=\"collapse-content\">\n                                    <div class=\"collapse-handle\" [class.expanded]=\"selectionViewModel.expanded\"\n                                         *ngIf=\"selectionViewModel.children.length > 0\" (click)=\"expandClicked(selectionViewModel, $event)\"></div>\n                                </div>\n                            </div>\n                        </div>\n\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    ",
+                    animations: [
+                        animations.trigger('showHideChildren', [
+                            animations.state('void', animations.style({ 'height': '0' })),
+                            animations.state('*', animations.style({ 'height': '*' })),
+                            animations.transition('void <=> *', animations.animate(200))
+                        ])
+                    ],
+                    styles: [".ione-configurator .rp-answers-slideout{position:absolute;top:0;right:0;width:400px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.ione-configurator .answers-title{margin-left:10px;color:#1a1a1a}.ione-configurator .answers-container{height:100vh;overflow-y:scroll}.ione-configurator .answer-content{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid 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 = function () { return [
+        { type: Builder }
+    ]; };
+    SelectionsComponent.propDecorators = {
+        selections: [{ type: i0.Input }],
+        selectionClick: [{ type: i0.Output }]
+    };
 
     var SelectionsModule = /** @class */ (function () {
         function SelectionsModule() {
         }
-        SelectionsModule = __decorate([
-            core.NgModule({
-                imports: [
-                    common.CommonModule,
-                    SharedModule
-                ],
-                declarations: [
-                    SelectionsComponent
-                ],
-                exports: [
-                    SelectionsComponent
-                ]
-            })
-        ], SelectionsModule);
         return SelectionsModule;
-    }());
+    }());
+    SelectionsModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        SharedModule
+                    ],
+                    declarations: [
+                        SelectionsComponent
+                    ],
+                    exports: [
+                        SelectionsComponent
+                    ]
+                },] }
+    ];
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
 
     exports.AnswersComponent = AnswersComponent;
     exports.AnswersModule = AnswersModule;
@@ -2732,14 +3216,13 @@
     exports.ConfiguratorService = ConfiguratorService;
     exports.SelectionsComponent = SelectionsComponent;
     exports.SelectionsModule = SelectionsModule;
-    exports.ɵa = SharedModule;
-    exports.ɵb = LoaderComponent;
-    exports.ɵc = AnswerComponent;
-    exports.ɵd = ImageCacheService;
-    exports.ɵe = VisibilityObserverDirective;
-    exports.ɵf = VisibilityObserverMasterDirective;
+    exports["ɵa"] = SharedModule;
+    exports["ɵb"] = LoaderComponent;
+    exports["ɵc"] = AnswerComponent;
+    exports["ɵd"] = VisibilityObserverDirective;
+    exports["ɵe"] = VisibilityObserverMasterDirective;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=colijnit-configurator.umd.js.map