@colijnit/configurator 1.0.21 → 1.0.22

package/fesm2015/colijnit-configurator.js

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