@colijnit/product 1.9.4 → 2.9.0

package/bundles/colijnit-product.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@colijnit/corecomponents'), require('@colijnit/mainapi/build/model/co-document'), require('rxjs'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/articleapi/build/model/article-full-object'), require('@colijnit/articleapi/build/model/super-article'), require('@colijnit/articleapi/build/articles'), require('@colijnit/ioneconnector/build/factory/business-object-factory'), require('@colijnit/articleapi/build/model/delivery-prognosis'), require('@colijnit/articleapi/build/model/document-content'), require('@angular/common/http'), require('@colijnit/ioneconnector/build/utils/string-utils'), require('@angular/platform-browser'), require('@angular/animations'), require('@colijnit/articleapi/build/model/configurator-statistics-environment'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/product', ['exports', '@angular/core', '@colijnit/corecomponents', '@colijnit/mainapi/build/model/co-document', 'rxjs', '@colijnit/ioneconnector/build/model/options', '@colijnit/articleapi/build/model/article-full-object', '@colijnit/articleapi/build/model/super-article', '@colijnit/articleapi/build/articles', '@colijnit/ioneconnector/build/factory/business-object-factory', '@colijnit/articleapi/build/model/delivery-prognosis', '@colijnit/articleapi/build/model/document-content', '@angular/common/http', '@colijnit/ioneconnector/build/utils/string-utils', '@angular/platform-browser', '@angular/animations', '@colijnit/articleapi/build/model/configurator-statistics-environment', '@angular/common'], factory) :
-    (global = global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.product = {}), global.ng.core, global.corecomponents, global.coDocument, global.rxjs, global.options, global.articleFullObject, global.superArticle, global.articles, global.businessObjectFactory, global.deliveryPrognosis, global.documentContent, global.ng.common.http, global.stringUtils, global.ng.platformBrowser, global.ng.animations, global.configuratorStatisticsEnvironment, global.ng.common));
-}(this, (function (exports, core, corecomponents, coDocument, rxjs, options, articleFullObject, superArticle, articles, businessObjectFactory, deliveryPrognosis, documentContent, http, stringUtils, platformBrowser, animations, configuratorStatisticsEnvironment, common) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/articleapi/build/model/article-full-object'), require('@colijnit/articleapi/build/model/super-article'), require('@colijnit/articleapi/build/articles'), require('@colijnit/articleapi/build/model/delivery-prognosis'), require('@colijnit/articleapi/build/model/document-content'), require('@colijnit/ioneconnector/build/service/business-object-factory'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/mainapi'), require('@angular/common/http'), require('@colijnit/ioneconnector/build/utils/string-utils'), require('@angular/common'), require('@angular/platform-browser'), require('@angular/animations'), require('@colijnit/mainapi/build/model/co-document'), require('@colijnit/corecomponents'), require('@colijnit/articleapi/build/model/configurator-statistics-environment')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/product', ['exports', '@angular/core', 'rxjs', '@colijnit/ioneconnector/build/model/options', '@colijnit/articleapi/build/model/article-full-object', '@colijnit/articleapi/build/model/super-article', '@colijnit/articleapi/build/articles', '@colijnit/articleapi/build/model/delivery-prognosis', '@colijnit/articleapi/build/model/document-content', '@colijnit/ioneconnector/build/service/business-object-factory', '@colijnit/transactionapi/build/transaction', '@colijnit/mainapi', '@angular/common/http', '@colijnit/ioneconnector/build/utils/string-utils', '@angular/common', '@angular/platform-browser', '@angular/animations', '@colijnit/mainapi/build/model/co-document', '@colijnit/corecomponents', '@colijnit/articleapi/build/model/configurator-statistics-environment'], factory) :
+    (global = global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.product = {}), global.ng.core, global.rxjs, global.options, global.articleFullObject, global.superArticle, global.articles, global.deliveryPrognosis, global.documentContent, global.businessObjectFactory, global.transaction, global.mainapi, global.ng.common.http, global.stringUtils, global.ng.common, global.ng.platformBrowser, global.ng.animations, global.coDocument, global.corecomponents, global.configuratorStatisticsEnvironment));
+}(this, (function (exports, core, rxjs, options, articleFullObject, superArticle, articles, deliveryPrognosis, documentContent, businessObjectFactory, transaction, mainapi, http, stringUtils, common, platformBrowser, animations, coDocument, corecomponents, configuratorStatisticsEnvironment) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -228,28 +228,94 @@
         function Version() {
             this.name = "@colijnit/product";
             this.description = "Product detail page project for iOne";
-            this.symVer = "1.9.4";
-            this.publishDate = "20-4-2023 15:19:25";
+            this.symVer = "2.9.0";
+            this.publishDate = "7-9-2023 15:18:44";
         }
         return Version;
     }());
 
-    var ProductDescriptionComponent = /** @class */ (function () {
-        function ProductDescriptionComponent() {
+    var JsonUtilsService = /** @class */ (function () {
+        function JsonUtilsService() {
         }
-        ProductDescriptionComponent.prototype.ngOnInit = function () {
+        JsonUtilsService.prototype.readJsonFile = function (filePath) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response, e_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, fetch(filePath)];
+                        case 1:
+                            response = _a.sent();
+                            if (!response.ok) {
+                                return [2 /*return*/, null];
+                            }
+                            else {
+                                return [2 /*return*/, response.json()];
+                            }
+                            return [3 /*break*/, 3];
+                        case 2:
+                            e_1 = _a.sent();
+                            console.error('Error getting file:', e_1.message);
+                            return [2 /*return*/, ''];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
         };
-        __decorate([
-            core.Input()
-        ], ProductDescriptionComponent.prototype, "article", void 0);
-        ProductDescriptionComponent = __decorate([
-            core.Component({
-                selector: 'app-product-description',
-                template: "<div class=\"pd-title-wrapper\">\n  <span class=\"pd-description\" [textContent]=\"article?.descriptionRetail\" *ngIf=\"article?.descriptionRetail\"></span>\n  <span class=\"pd-sku\" [textContent]=\"article?.articleNr\" *ngIf=\"article?.articleNr\"></span>\n</div>\n",
-                styles: [":host{display:block}.pd-title-wrapper{margin:20px 0 0}.pd-description{color:#22313c;font-size:25px;font-weight:700;width:100%;display:block}.pd-sku{color:#5b6875;font-size:16px}@media screen and (max-width:650px){.pd-description{font-size:21px}.pd-sku{font-size:13px}}"]
+        JsonUtilsService.ɵprov = core.ɵɵdefineInjectable({ factory: function JsonUtilsService_Factory() { return new JsonUtilsService(); }, token: JsonUtilsService, providedIn: "root" });
+        JsonUtilsService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
             })
-        ], ProductDescriptionComponent);
-        return ProductDescriptionComponent;
+        ], JsonUtilsService);
+        return JsonUtilsService;
+    }());
+
+    var SettingsOptions = /** @class */ (function () {
+        function SettingsOptions() {
+            this.showStockStatus = false;
+            this.showZoomButton = false;
+            this.showTagFilter = false;
+            this.showAsConfigured = false;
+            this.inlineAnswers = false;
+            this.showArButton = false;
+            this.arEnabled = false;
+            this.vrEnabled = false;
+        }
+        return SettingsOptions;
+    }());
+
+    var RenderModes;
+    (function (RenderModes) {
+        RenderModes["RenderRoom"] = "render_room";
+        RenderModes["RenderShop"] = "render_shop";
+        RenderModes["RenderIone"] = "render_ione";
+    })(RenderModes || (RenderModes = {}));
+
+    var RenderParameters = /** @class */ (function () {
+        function RenderParameters() {
+            this.host = "";
+            this.port = 0;
+            this.secure = false;
+            this.renderMode = RenderModes.RenderShop;
+        }
+        return RenderParameters;
+    }());
+
+    var ProductSettings = /** @class */ (function () {
+        function ProductSettings() {
+            this.session = undefined;
+            this.useGroups = true;
+            this.useRenders = false;
+            this.useLoginEncryption = true;
+            this.createWebOrder = true;
+            this.useMatch = false;
+            this.currencySymbol = '€';
+            this.options = new SettingsOptions();
+            this.renderParameters = new RenderParameters();
+        }
+        return ProductSettings;
     }());
 
     // Sole responsibility is simply to wrap around a colijn.Connector to create a stable inner interface to the library in a 1:1 method way.
@@ -263,14 +329,46 @@
             this.articleConnector.showLoader.unsubscribe();
         };
         ProductConnectorAdapterService.prototype.initConnector = function (options) {
-            var _this = this;
-            this.articleConnector = new articles.Articles(options);
-            options.session = this.articleConnector.session;
-            this.articleConnector.showLoader.subscribe(function (value) { return _this.showLoader.next(value); });
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this.articleConnector = new articles.Articles(options);
+                            return [4 /*yield*/, this.articleConnector.connect()];
+                        case 1:
+                            _a.sent();
+                            this.transactionConnector = new transaction.Transaction(options);
+                            this.articleConnector.showLoader.subscribe(function (value) { return _this.showLoader.next(value); });
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         ProductConnectorAdapterService.prototype.setInstance = function (instanceId) {
             // this.articleConnector.setInstanceToConfigure(instanceId, false);
         };
+        ProductConnectorAdapterService.prototype.getProductBundleSettings = function (url, upId) {
+            return __awaiter(this, void 0, void 0, function () {
+                var tempSettings, tempMainConnector, response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            tempSettings = new ProductSettings();
+                            tempSettings.url = url;
+                            tempSettings.schema = upId.toString();
+                            tempMainConnector = new mainapi.MainApi(tempSettings);
+                            return [4 /*yield*/, tempMainConnector.getPublicParams(upId)];
+                        case 1:
+                            response = _a.sent();
+                            if (response) {
+                                return [2 /*return*/, response.productSettings];
+                            }
+                            return [2 /*return*/, ""];
+                    }
+                });
+            });
+        };
         ProductConnectorAdapterService.prototype.getDeliveryPrognosis = function (goodId, branchNr) {
             return __awaiter(this, void 0, void 0, function () {
                 var deliveryPrognosis;
@@ -429,51 +527,30 @@
                 });
             });
         };
-        ProductConnectorAdapterService.ɵprov = core.ɵɵdefineInjectable({ factory: function ProductConnectorAdapterService_Factory() { return new ProductConnectorAdapterService(); }, token: ProductConnectorAdapterService, providedIn: "root" });
-        ProductConnectorAdapterService = __decorate([
-            core.Injectable({
-                providedIn: 'root'
-            })
-        ], ProductConnectorAdapterService);
-        return ProductConnectorAdapterService;
-    }());
-
-    var JsonUtilsService = /** @class */ (function () {
-        function JsonUtilsService() {
-        }
-        JsonUtilsService.prototype.readJsonFile = function (filePath) {
+        ProductConnectorAdapterService.prototype.addWebSessionTransactionLine = function (sku, quantity) {
             return __awaiter(this, void 0, void 0, function () {
-                var response, e_1;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0:
-                            _a.trys.push([0, 2, , 3]);
-                            return [4 /*yield*/, fetch(filePath)];
-                        case 1:
-                            response = _a.sent();
-                            if (!response.ok) {
-                                return [2 /*return*/, null];
-                            }
-                            else {
-                                return [2 /*return*/, response.json()];
-                            }
-                            return [3 /*break*/, 3];
-                        case 2:
-                            e_1 = _a.sent();
-                            console.error('Error getting file:', e_1.message);
-                            return [2 /*return*/, ''];
-                        case 3: return [2 /*return*/];
+                        case 0: return [4 /*yield*/, this.transactionConnector.addWebSessionTransactionLine(sku, quantity)];
+                        case 1: return [2 /*return*/, _a.sent()];
                     }
                 });
             });
         };
-        JsonUtilsService.ɵprov = core.ɵɵdefineInjectable({ factory: function JsonUtilsService_Factory() { return new JsonUtilsService(); }, token: JsonUtilsService, providedIn: "root" });
-        JsonUtilsService = __decorate([
-            core.Injectable({
-                providedIn: 'root'
-            })
-        ], JsonUtilsService);
-        return JsonUtilsService;
+        ProductConnectorAdapterService.prototype.getWebTransaction = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.transactionConnector.getWebSessionSalesOrder()];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
+        ProductConnectorAdapterService = __decorate([
+            core.Injectable()
+        ], ProductConnectorAdapterService);
+        return ProductConnectorAdapterService;
     }());
 
     var LanguageCode;
@@ -634,51 +711,6 @@
         return DictionaryService;
     }());
 
-    var SettingsOptions = /** @class */ (function () {
-        function SettingsOptions() {
-            this.showStockStatus = false;
-            this.showZoomButton = false;
-            this.showTagFilter = false;
-            this.showAsConfigured = false;
-            this.inlineAnswers = false;
-            this.showArButton = false;
-            this.arEnabled = false;
-            this.vrEnabled = false;
-        }
-        return SettingsOptions;
-    }());
-
-    var RenderModes;
-    (function (RenderModes) {
-        RenderModes["RenderRoom"] = "render_room";
-        RenderModes["RenderShop"] = "render_shop";
-        RenderModes["RenderIone"] = "render_ione";
-    })(RenderModes || (RenderModes = {}));
-
-    var RenderParameters = /** @class */ (function () {
-        function RenderParameters() {
-            this.host = "";
-            this.port = 0;
-            this.secure = false;
-            this.renderMode = RenderModes.RenderShop;
-        }
-        return RenderParameters;
-    }());
-
-    var Settings = /** @class */ (function () {
-        function Settings() {
-            this.session = undefined;
-            this.useGroups = true;
-            this.useRenders = false;
-            this.useEncryption = true;
-            this.useMatch = false;
-            this.currencySymbol = '€';
-            this.options = new SettingsOptions();
-            this.renderParameters = new RenderParameters();
-        }
-        return Settings;
-    }());
-
     var ProductSettingsService = /** @class */ (function () {
         function ProductSettingsService(_jsonUtilsService, _dictionaryService) {
             this._jsonUtilsService = _jsonUtilsService;
@@ -705,12 +737,14 @@
                             return [4 /*yield*/, this._jsonUtilsService.readJsonFile('product-settings.json')];
                         case 1:
                             jsonSettings = _a.sent();
-                            this.settings = Object.assign(new Settings(), jsonSettings);
-                            this.settings.options = Object.assign(new SettingsOptions(), this.settings.options);
-                            this.settingsFinished();
+                            if (jsonSettings) {
+                                this.settings = Object.assign(new ProductSettings(), jsonSettings);
+                                this.settings.options = Object.assign(new SettingsOptions(), this.settings.options);
+                                this.settingsFinished();
+                            }
                             return [3 /*break*/, 3];
                         case 2:
-                            this.settings = Object.assign(new Settings(), settings);
+                            this.settings = Object.assign(new ProductSettings(), settings);
                             this.settings.options = Object.assign(new SettingsOptions(), this.settings.options);
                             this.settingsFinished();
                             _a.label = 3;
@@ -721,52 +755,19 @@
         };
         ProductSettingsService.prototype.createSettingsFromObject = function (obj) {
             return __awaiter(this, void 0, void 0, function () {
+                var ownOptions, ownRenderParameters;
                 return __generator(this, function (_a) {
                     if (!this.settings) {
-                        this.settings = new Settings();
-                    }
-                    if (obj.hasOwnProperty('url')) {
-                        this.settings.url = obj['url'];
-                        this._dictionaryService.rootUrl = this.settings.url.replace('/ajaxservice', '');
-                    }
-                    if (obj.hasOwnProperty('schema')) {
-                        this.settings.schema = obj['schema'];
-                    }
-                    if (obj.hasOwnProperty('version')) {
-                        this.settings.version = obj['version'];
-                    }
-                    if (obj.hasOwnProperty('branch')) {
-                        this.settings.branch = obj['branch'];
-                    }
-                    if (obj.hasOwnProperty('currency')) {
-                        this.settings.currency = obj['currency'];
+                        this.settings = new ProductSettings();
                     }
-                    if (obj.hasOwnProperty('client')) {
-                        this.settings.client = obj['client'];
+                    ownOptions = Object.assign({}, this.settings.options);
+                    ownRenderParameters = Object.assign({}, this.settings.renderParameters);
+                    this.settings = Object.assign({}, this.settings, obj);
+                    if (obj.renderParameters) {
+                        this.settings.renderParameters = Object.assign({}, ownRenderParameters, obj.renderParameters);
                     }
-                    if (obj.hasOwnProperty('languageCode')) {
-                        this.settings.languageCode = obj['languageCode'];
-                    }
-                    if (obj.hasOwnProperty('username')) {
-                        this.settings.username = obj['username'];
-                    }
-                    if (obj.hasOwnProperty('password')) {
-                        this.settings.password = obj['password'];
-                    }
-                    if (obj.hasOwnProperty('timeoutInMs')) {
-                        this.settings.timeoutInMs = obj['timeoutInMs'];
-                    }
-                    if (obj.hasOwnProperty('session')) {
-                        this.settings.session = obj['session'];
-                    }
-                    if (obj.hasOwnProperty('useGroups')) {
-                        this.settings.useGroups = obj['useGroups'];
-                    }
-                    if (obj.hasOwnProperty('useEncryption')) {
-                        this.settings.useEncryption = obj['useEncryption'];
-                    }
-                    if (obj.hasOwnProperty('useMatch')) {
-                        this.settings.useMatch = obj['useMatch'];
+                    if (obj.options) {
+                        this.settings.options = Object.assign({}, ownOptions, obj.options);
                     }
                     if (obj.hasOwnProperty('assetPath')) {
                         this.settings.assetPath = obj['assetPath'];
@@ -781,27 +782,6 @@
                             this.settings.threeDAssetPath += '/';
                         }
                     }
-                    if (obj.hasOwnProperty('currencySymbol')) {
-                        this.settings.currencySymbol = obj['currencySymbol'];
-                    }
-                    if (obj.hasOwnProperty('gtm')) {
-                        this.settings.gtm = obj['gtm'];
-                    }
-                    if (obj.hasOwnProperty('assetIndex')) {
-                        this.settings.assetIndex = obj['assetIndex'];
-                    }
-                    if (obj.hasOwnProperty('lightPresetsIndex')) {
-                        this.settings.lightPresetsIndex = obj['lightPresetsIndex'];
-                    }
-                    if (obj.hasOwnProperty('additionalTranslationFile')) {
-                        this.settings.additionalTranslationFile = obj['additionalTranslationFile'];
-                    }
-                    if (obj.hasOwnProperty('options')) {
-                        this.settings.options = obj['options'];
-                    }
-                    if (obj.hasOwnProperty('renderParameters')) {
-                        this.settings.renderParameters = obj['renderParameters'];
-                    }
                     this.settingsFinished();
                     return [2 /*return*/];
                 });
@@ -824,19 +804,16 @@
             { type: JsonUtilsService },
             { type: DictionaryService }
         ]; };
-        ProductSettingsService.ɵprov = core.ɵɵdefineInjectable({ factory: function ProductSettingsService_Factory() { return new ProductSettingsService(core.ɵɵinject(JsonUtilsService), core.ɵɵinject(DictionaryService)); }, token: ProductSettingsService, providedIn: "root" });
         ProductSettingsService = __decorate([
-            core.Injectable({
-                providedIn: 'root'
-            })
+            core.Injectable()
         ], ProductSettingsService);
         return ProductSettingsService;
     }());
 
     // Holds all iONE backend related state and methods for a running HomeDecorator. To be used anywhere internally.
     var ProductConnectorService = /** @class */ (function () {
-        function ProductConnectorService(connector, _settingsService) {
-            this.connector = connector;
+        function ProductConnectorService(_adapterService, _settingsService) {
+            this._adapterService = _adapterService;
             this._settingsService = _settingsService;
             this.controllerInitialized = new rxjs.BehaviorSubject(false);
             this._initializing = false;
@@ -854,57 +831,61 @@
         ProductConnectorService.prototype.ngOnDestroy = function () {
             this.subs.forEach(function (sub) { return sub.unsubscribe(); });
         };
-        ProductConnectorService.prototype.initDefaultDevelopTestConnection = function () {
+        ProductConnectorService.prototype.initConnection = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var settings;
+                var settings, e_1;
                 return __generator(this, function (_a) {
-                    if (this._initialized || this._initializing) {
-                        return [2 /*return*/];
-                    }
-                    this._initializing = true;
-                    try {
-                        settings = this._settingsService.settings;
-                        if (!settings) {
-                            throw Error('Settings are not defined!');
-                        }
-                        this.connectorOptions.url = settings.url;
-                        this.connectorOptions.schema = settings.schema;
-                        this.connectorOptions.version = settings.version;
-                        this.connectorOptions.branch = settings.branch;
-                        this.connectorOptions.username = settings.username;
-                        this.connectorOptions.password = settings.password;
-                        this.connectorOptions.session = settings.session;
-                        this.connectorOptions.currencyId = settings.currency;
-                        this.connectorOptions.useGroups = settings.useGroups;
-                        this.connectorOptions.useRenders = settings.useRenders;
-                        this.connectorOptions.useLoginEncryption = settings.useEncryption;
-                        this.connectorOptions.languageCode = settings.languageCode;
-                        this.connector.initConnector(this.connectorOptions);
-                        this._settingsService.settings.session = this.connectorOptions.session;
-                        this.controllerInitialized.next(true);
-                        this._initialized = true;
-                        this._initializing = false;
-                    }
-                    catch (e) {
-                        this._initializing = false;
+                    switch (_a.label) {
+                        case 0:
+                            if (this._initialized || this._initializing) {
+                                return [2 /*return*/];
+                            }
+                            this._initializing = true;
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            settings = this._settingsService.settings;
+                            if (!settings) {
+                                throw Error('Settings are not defined!');
+                            }
+                            this.connectorOptions = Object.assign(new options.Options(), settings);
+                            return [4 /*yield*/, this._adapterService.initConnector(this.connectorOptions)];
+                        case 2:
+                            _a.sent();
+                            this.controllerInitialized.next(true);
+                            this._initialized = true;
+                            this._initializing = false;
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_1 = _a.sent();
+                            this._initializing = false;
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
                     }
-                    return [2 /*return*/];
+                });
+            });
+        };
+        ProductConnectorService.prototype.getProductBundleSettings = function (url, upId) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, this._adapterService.getProductBundleSettings(url, upId)];
                 });
             });
         };
         ProductConnectorService.prototype.setInstance = function (instanceId) {
-            this.connector.setInstance(instanceId);
+            this._instanceId = instanceId;
+            this._adapterService.setInstance(instanceId);
         };
         ProductConnectorService.prototype.getFullArticle = function (sku) {
             return __awaiter(this, void 0, void 0, function () {
                 var goodId;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.connector.getGoodIdFromArticleNr(sku)];
+                        case 0: return [4 /*yield*/, this._adapterService.getGoodIdFromArticleNr(sku)];
                         case 1:
                             goodId = _a.sent();
                             if (goodId) {
-                                return [2 /*return*/, this.connector.getArticleFullObject(goodId)];
+                                return [2 /*return*/, this._adapterService.getArticleFullObject(goodId)];
                             }
                             return [2 /*return*/, null];
                     }
@@ -913,27 +894,42 @@
         };
         ProductConnectorService.prototype.getDocumentContent = function (docId, thumbnail) {
             if (thumbnail === void 0) { thumbnail = true; }
-            return this.connector.getDocumentContent(docId, thumbnail);
+            return this._adapterService.getDocumentContent(docId, thumbnail);
         };
         ProductConnectorService.prototype.getDeliveryPrognosis = function (goodId) {
-            return this.connector.getDeliveryPrognosis(goodId);
+            return this._adapterService.getDeliveryPrognosis(goodId);
         };
         ProductConnectorService.prototype.getSelectorDeliveryDate = function () {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
-                    return [2 /*return*/, this.connector.getSelectorDeliveryDate()];
+                    return [2 /*return*/, this._adapterService.getSelectorDeliveryDate()];
                 });
             });
         };
         ProductConnectorService.prototype.getDeliveryDate2 = function (goodId) {
-            return this.connector.getDeliveryDate2(goodId);
+            return this._adapterService.getDeliveryDate2(goodId);
         };
         ProductConnectorService.prototype.getSuperArticle = function (id) {
-            return this.connector.getSuperArticle(id);
+            return this._adapterService.getSuperArticle(id);
         };
-        ProductConnectorService.prototype.getJsonArticleFlatTree = function (goodId, goodType, quantity, showLoader, instanceId, configuratorStatistics) {
+        ProductConnectorService.prototype.getJsonArticleFlatTree = function (goodId, goodType, quantity, showLoader, configuratorStatistics) {
             if (showLoader === void 0) { showLoader = true; }
-            return this.connector.getJsonArticleFlatTree(goodId, goodType, quantity, showLoader, instanceId, configuratorStatistics);
+            return this._adapterService.getJsonArticleFlatTree(goodId, goodType, quantity, showLoader, this._instanceId, configuratorStatistics);
+        };
+        ProductConnectorService.prototype.addWebSessionTransactionLine = function (sku, quantity) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._adapterService.addWebSessionTransactionLine(sku, quantity)];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
+        ProductConnectorService.prototype.getWebTransaction = function () {
+            this._adapterService.getWebTransaction().then(function (response) {
+                console.log(response);
+            });
         };
         ProductConnectorService.prototype.onShowLoaderChange = function (showLoader) {
             this._shouldShowLoader = showLoader;
@@ -942,11 +938,8 @@
             { type: ProductConnectorAdapterService },
             { type: ProductSettingsService }
         ]; };
-        ProductConnectorService.ɵprov = core.ɵɵdefineInjectable({ factory: function ProductConnectorService_Factory() { return new ProductConnectorService(core.ɵɵinject(ProductConnectorAdapterService), core.ɵɵinject(ProductSettingsService)); }, token: ProductConnectorService, providedIn: "root" });
         ProductConnectorService = __decorate([
-            core.Injectable({
-                providedIn: 'root'
-            })
+            core.Injectable()
         ], ProductConnectorService);
         return ProductConnectorService;
     }());
@@ -966,7 +959,6 @@
             this.onArticleInfoReceived = new rxjs.Subject();
             this.onUpdateProductInfoTab = new rxjs.Subject();
         }
-        ProductEventService.ɵprov = core.ɵɵdefineInjectable({ factory: function ProductEventService_Factory() { return new ProductEventService(); }, token: ProductEventService, providedIn: "root" });
         __decorate([
             core.Output()
         ], ProductEventService.prototype, "onAddToCart", void 0);
@@ -981,13 +973,320 @@
         ], ProductEventService.prototype, "onForceRenderImage", void 0);
         ProductEventService = __decorate([
             core.Directive(),
-            core.Injectable({
-                providedIn: 'root'
-            })
+            core.Injectable()
         ], ProductEventService);
         return ProductEventService;
     }());
 
+    var IoneProductComponent = /** @class */ (function () {
+        function IoneProductComponent(_dictionary, _jsonUtils, _ione, _changeDetector, _appEventService, _settingsService) {
+            // this.sku = 'CF-HILL';
+            // this.sku = 'CF-ALMADA';
+            // this.sku = 'CF-39904ANT';
+            // this.sku = 'CF-22346001';
+            // this.sku = '104';
+            // this.sku = '1000561986';
+            // this.sku = '1000567768';
+            // this.sku = '1000234793';
+            // this.sku = '1066';
+            // this.sku = '104';
+            var _this = this;
+            this._dictionary = _dictionary;
+            this._jsonUtils = _jsonUtils;
+            this._ione = _ione;
+            this._changeDetector = _changeDetector;
+            this._appEventService = _appEventService;
+            this._settingsService = _settingsService;
+            this.onAddToCart = new core.EventEmitter();
+            this.forceRenderImage = new core.EventEmitter();
+            this.onAlternativeClick = new core.EventEmitter();
+            this.onArticleInfoReceived = new core.EventEmitter();
+            this.onArticleReceived = new core.EventEmitter();
+            this.onSelectionsReceived = new core.EventEmitter();
+            this.onAddToQuote = new core.EventEmitter();
+            this._subs = [];
+            // this.sku = "70000107";
+            this._subs.push(
+            // this._dictionary.dictionaryLoaded.subscribe(d => this.upAndLoaded = true),
+            this._appEventService.onAddToCart.subscribe(function (json) {
+                _this._handleAddToCart(json);
+            }), this._appEventService.onAddToQuote.subscribe(function (json) { return _this.onAddToQuote.emit(json); }), this._appEventService.onAlternativeClick.subscribe(function (article) { return _this.onAlternativeClick.emit(article); }), this._appEventService.onArticleInfoReceived.subscribe(function (info) { return _this._handleAnswerInfoReceived(info); }), this._appEventService.onArticleReceived.subscribe(function (article) { return _this.onArticleReceived.emit(article); }), this._appEventService.onSelectionsReceived.subscribe(function (selections) { return _this.onSelectionsReceived.emit(selections); }));
+        }
+        Object.defineProperty(IoneProductComponent.prototype, "settings", {
+            get: function () {
+                return this._settings;
+            },
+            set: function (value) {
+                if (value) {
+                    var settings = void 0;
+                    if (typeof value === 'string') {
+                        settings = JSON.parse(value);
+                    }
+                    else {
+                        settings = value;
+                    }
+                    this._settingsService.createSettingsFromObject(settings);
+                    // this._initConnection(settings);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IoneProductComponent.prototype.ngOnChanges = function (changes) {
+            this._changeDetector.detectChanges();
+        };
+        IoneProductComponent.prototype.ngOnDestroy = function () {
+            this._subs.forEach(function (s) { return s.unsubscribe(); });
+        };
+        IoneProductComponent.prototype._handleAnswerInfoReceived = function (info) {
+            this.onArticleInfoReceived.next(info);
+        };
+        IoneProductComponent.prototype._handleAddToCart = function (json) {
+            return __awaiter(this, void 0, void 0, function () {
+                var articleTreeData, i, good, subArticle;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this._settingsService.settings.createWebOrder) return [3 /*break*/, 7];
+                            if (!json) return [3 /*break*/, 7];
+                            articleTreeData = JSON.parse(json);
+                            if (!(articleTreeData.articleTree && articleTreeData.articleTree.article)) return [3 /*break*/, 7];
+                            if (!(articleTreeData.articleTree.compositeGoods && Array.isArray(articleTreeData.articleTree.compositeGoods) &&
+                                articleTreeData.articleTree.compositeGoods.length > 0 && articleTreeData.articleTree.subArticles && Array.isArray(articleTreeData.articleTree.subArticles))) return [3 /*break*/, 5];
+                            i = 0;
+                            _a.label = 1;
+                        case 1:
+                            if (!(i < articleTreeData.articleTree.compositeGoods.length - 1)) return [3 /*break*/, 4];
+                            good = articleTreeData.articleTree.compositeGoods[i];
+                            subArticle = articleTreeData.articleTree.subArticles[i];
+                            return [4 /*yield*/, this._ione.addWebSessionTransactionLine(subArticle.articleNumber, good.quantity)];
+                        case 2:
+                            _a.sent();
+                            _a.label = 3;
+                        case 3:
+                            i++;
+                            return [3 /*break*/, 1];
+                        case 4: return [3 /*break*/, 7];
+                        case 5: return [4 /*yield*/, this._ione.addWebSessionTransactionLine(articleTreeData.articleTree.article.articleNumber, 1)];
+                        case 6:
+                            _a.sent();
+                            _a.label = 7;
+                        case 7:
+                            this.onAddToCart.emit(json);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        IoneProductComponent.ctorParameters = function () { return [
+            { type: DictionaryService },
+            { type: JsonUtilsService },
+            { type: ProductConnectorService },
+            { type: core.ChangeDetectorRef },
+            { type: ProductEventService },
+            { type: ProductSettingsService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], IoneProductComponent.prototype, "sku", void 0);
+        __decorate([
+            core.Input()
+        ], IoneProductComponent.prototype, "settings", null);
+        __decorate([
+            core.Output()
+        ], IoneProductComponent.prototype, "onAddToCart", void 0);
+        __decorate([
+            core.Output()
+        ], IoneProductComponent.prototype, "forceRenderImage", void 0);
+        __decorate([
+            core.Output()
+        ], IoneProductComponent.prototype, "onAlternativeClick", void 0);
+        __decorate([
+            core.Output()
+        ], IoneProductComponent.prototype, "onArticleInfoReceived", void 0);
+        __decorate([
+            core.Output()
+        ], IoneProductComponent.prototype, "onArticleReceived", void 0);
+        __decorate([
+            core.Output()
+        ], IoneProductComponent.prototype, "onSelectionsReceived", void 0);
+        __decorate([
+            core.Output()
+        ], IoneProductComponent.prototype, "onAddToQuote", void 0);
+        IoneProductComponent = __decorate([
+            core.Component({
+                selector: 'app-ione-product',
+                template: "\n    <app-product-page [sku]=\"sku\"\n    ></app-product-page>\n  ",
+                providers: [
+                    ProductEventService,
+                    ProductSettingsService,
+                    ProductConnectorAdapterService,
+                    ProductConnectorService
+                ],
+                encapsulation: core.ViewEncapsulation.Emulated,
+                styles: [""]
+            })
+        ], IoneProductComponent);
+        return IoneProductComponent;
+    }());
+
+    var ProductInitializerService = /** @class */ (function () {
+        function ProductInitializerService(_settingsService) {
+            this._settingsService = _settingsService;
+        }
+        ProductInitializerService.prototype.initializeApp = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, this._settingsService.initializeSettings()];
+                });
+            });
+        };
+        ProductInitializerService.ctorParameters = function () { return [
+            { type: ProductSettingsService }
+        ]; };
+        ProductInitializerService.ɵprov = core.ɵɵdefineInjectable({ factory: function ProductInitializerService_Factory() { return new ProductInitializerService(core.ɵɵinject(ProductSettingsService)); }, token: ProductInitializerService, providedIn: "root" });
+        ProductInitializerService = __decorate([
+            core.Injectable({
+                providedIn: 'root',
+            })
+        ], ProductInitializerService);
+        return ProductInitializerService;
+    }());
+
+    var ProductExternalSourceComponent = /** @class */ (function () {
+        function ProductExternalSourceComponent(_sanitizer, _productConnectorService, _appEventService) {
+            this._sanitizer = _sanitizer;
+            this._productConnectorService = _productConnectorService;
+            this._appEventService = _appEventService;
+            this.addToCart = new core.EventEmitter();
+            this.addToQuote = new core.EventEmitter();
+            this.alternativeClick = new core.EventEmitter();
+            this.showProduct = false;
+            this.loaded = false;
+            this.externalSettings = {};
+            this._subs = [];
+        }
+        Object.defineProperty(ProductExternalSourceComponent.prototype, "externalSource", {
+            get: function () {
+                return this._externalSource;
+            },
+            set: function (value) {
+                this._externalSource = value;
+                this.loaded = false;
+                this._prepareExternalSource();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ProductExternalSourceComponent.prototype.showClass = function () {
+            return true;
+        };
+        ProductExternalSourceComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this._subs.push(this._appEventService.onAddToCart.subscribe(function (json) { return _this.addToCart.next(json); }), this._appEventService.onAddToQuote.subscribe(function (json) { return _this.addToQuote.next(json); }), this._appEventService.onAlternativeClick.subscribe(function (article) { return _this.alternativeClick.next(article); }));
+        };
+        ProductExternalSourceComponent.prototype.ngOnDestroy = function () {
+            this._subs.forEach(function (s) { return s.unsubscribe(); });
+        };
+        ProductExternalSourceComponent.prototype._prepareExternalSource = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var bundleSettings;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this._externalSource) {
+                                return [2 /*return*/];
+                            }
+                            this.externalUrl = undefined;
+                            this.externalSettings = {};
+                            if (!(this.externalSource.type === 'CATF')) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._productConnectorService.getProductBundleSettings(this.externalSource.url, parseInt(this.externalSource.schema, 0))];
+                        case 1:
+                            bundleSettings = _a.sent();
+                            this.externalSettings = JSON.parse(bundleSettings);
+                            if (this.options) {
+                                this.externalSettings.options = this.options;
+                            }
+                            // this.externalSettings.assetPath = "https://cdn1.colijn-it.nl/content43";
+                            // this.externalSettings.threeDAssetPath = "https://cdn1.colijn-it.nl/content43";
+                            if (this.externalSource.username && this.externalSource.password) {
+                                this.externalSettings.useLoginEncryption = true;
+                                this.externalSettings.username = this.externalSource.username;
+                                this.externalSettings.password = this.externalSource.password;
+                            }
+                            // finally show the catalog
+                            this.showProduct = true;
+                            return [3 /*break*/, 3];
+                        case 2:
+                            this.externalUrl = this.externalSource.url;
+                            this.safeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(this.externalUrl);
+                            this.showProduct = false;
+                            _a.label = 3;
+                        case 3:
+                            this.loaded = true;
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ProductExternalSourceComponent.ctorParameters = function () { return [
+            { type: platformBrowser.DomSanitizer },
+            { type: ProductConnectorService },
+            { type: ProductEventService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], ProductExternalSourceComponent.prototype, "sku", void 0);
+        __decorate([
+            core.Input()
+        ], ProductExternalSourceComponent.prototype, "externalSource", null);
+        __decorate([
+            core.Input()
+        ], ProductExternalSourceComponent.prototype, "options", void 0);
+        __decorate([
+            core.Output()
+        ], ProductExternalSourceComponent.prototype, "addToCart", void 0);
+        __decorate([
+            core.Output()
+        ], ProductExternalSourceComponent.prototype, "addToQuote", void 0);
+        __decorate([
+            core.Output()
+        ], ProductExternalSourceComponent.prototype, "alternativeClick", void 0);
+        __decorate([
+            core.HostBinding('class.co-product-external-source')
+        ], ProductExternalSourceComponent.prototype, "showClass", null);
+        ProductExternalSourceComponent = __decorate([
+            core.Component({
+                selector: 'co-product-external-source',
+                template: "\n        <ng-container *ngIf=\"loaded\">\n            <ng-container *ngIf=\"showProduct\">\n                <app-product-page\n                        [sku]=\"sku\"\n                        [settings]=\"externalSettings\"\n                ></app-product-page>\n            </ng-container>\n            <ng-container *ngIf=\"!showProduct\">\n                <iframe width=\"100%\" height=\"100%\" [src]=\"safeUrl\" frameborder=\"0\" allowfullscreen></iframe>\n            </ng-container>\n        </ng-container>\n    ",
+                providers: [
+                    ProductEventService,
+                    ProductSettingsService,
+                    ProductConnectorAdapterService,
+                    ProductConnectorService
+                ],
+                encapsulation: core.ViewEncapsulation.None
+            })
+        ], ProductExternalSourceComponent);
+        return ProductExternalSourceComponent;
+    }());
+
+    var StockAndDelivery = /** @class */ (function () {
+        function StockAndDelivery(stock, deliveryDescription) {
+            this.stock = 0;
+            this.stock = stock;
+            this.deliveryDescription = deliveryDescription;
+        }
+        return StockAndDelivery;
+    }());
+
+    var SelectorType;
+    (function (SelectorType) {
+        SelectorType["TwoD"] = "2D";
+        SelectorType["ThreeD"] = "3D";
+        SelectorType["Omni"] = "Omni";
+    })(SelectorType || (SelectorType = {}));
+
     /** AUTO GENERATED FILE. DO NOT CHANGE.. **/
     var IconEnum;
     (function (IconEnum) {
@@ -1065,224 +1364,64 @@
         return IconCacheService;
     }());
 
-    var ImageCarouselComponent = /** @class */ (function () {
-        function ImageCarouselComponent(_ione, _appEventService, _changeDetector, _domSanitizer, iconCache) {
+    var ProductPageComponent = /** @class */ (function () {
+        function ProductPageComponent(_ione, _renderer, _changeDetector, iconCache, settingsService, appEventService) {
             var _this = this;
             this._ione = _ione;
-            this._appEventService = _appEventService;
+            this._renderer = _renderer;
             this._changeDetector = _changeDetector;
-            this._domSanitizer = _domSanitizer;
             this.iconCache = iconCache;
-            this.icons = IconEnum;
-            this.showLoader = false;
-            this.showRefresh = false;
-            this.resizing = false;
-            this._currentIndex = 0;
-            this._images = [];
+            this.settingsService = settingsService;
+            this.appEventService = appEventService;
+            this.icon = IconEnum;
+            this.configurable = false;
+            this.threeD = false;
+            this.show2D = true;
+            this.show3D = false;
+            this.configuring = false;
+            this.fullscreenAnimationEnd = false;
+            this.settingsLoaded = false;
+            this._fullScreen = false;
             this._subs = [];
-            this._subs.push(this._appEventService.onRenderStarted.subscribe(function () {
-                _this.showLoader = true;
-            }), this._appEventService.onDraftRenderImageReceived.subscribe(function (url) {
-                if (_this._images[0] instanceof coDocument.CoDocument) {
-                    _this._images.unshift(url);
-                }
-                else {
-                    _this._images[0] = url;
+            this._subs.push(this.appEventService.onForceRenderImage.subscribe(function (x) {
+                if (_this.selections.nativeElement) {
+                    _this.selections.nativeElement.forceRenderImage();
                 }
-                _this.showLoader = false;
+            }), this.settingsService.settingsLoaded.subscribe(function (loaded) { return _this._handleSettingsLoaded(loaded); }), this._ione.controllerInitialized.subscribe(function (initialized) {
+                _this.settingsLoaded = initialized;
             }));
         }
-        Object.defineProperty(ImageCarouselComponent.prototype, "images", {
+        Object.defineProperty(ProductPageComponent.prototype, "sku", {
             get: function () {
-                return this._images;
+                return this._sku;
             },
             set: function (value) {
-                if (value && value.length > 0) {
-                    this._images = value;
-                    this._loadImages();
-                    this._changeDetector.detectChanges();
+                if (value) {
+                    if (this.configuring) {
+                        this.show3D = false;
+                        this.fullScreen = false;
+                        this.configuring = false;
+                        this._changeDetector.detectChanges();
+                    }
+                    this._sku = value;
+                    this._getArticle();
                 }
             },
             enumerable: true,
             configurable: true
         });
-        ImageCarouselComponent.prototype.handleWindowResize = function () {
-            var _this = this;
-            this.resizing = true;
-            this._scrollCarouselToIndex();
-            clearTimeout(this._resizeTimer);
-            this._resizeTimer = setTimeout(function () {
-                _this.resizing = false;
-            }, 200);
-        };
-        ImageCarouselComponent.prototype.gotoNextSlide = function () {
-            this.currentIndex++;
-        };
-        ImageCarouselComponent.prototype.gotoPrevSlide = function () {
-            this.currentIndex--;
-        };
-        ImageCarouselComponent.prototype.isCurrentIndex = function (index) {
-            return this.currentIndex === index;
-        };
-        Object.defineProperty(ImageCarouselComponent.prototype, "currentIndex", {
-            get: function () {
-                return this._currentIndex;
-            },
-            set: function (value) {
-                this._currentIndex = value;
-                this._scrollCarouselToIndex();
-            },
-            enumerable: true,
-            configurable: true
-        });
-        ImageCarouselComponent.prototype.ngOnInit = function () {
-        };
-        ImageCarouselComponent.prototype.ngOnDestroy = function () {
-            this.carousel = undefined;
-            this._subs.forEach(function (s) { return s.unsubscribe(); });
-        };
-        ImageCarouselComponent.prototype.handleThumbClick = function (index) {
-            this.currentIndex = index;
-        };
-        ImageCarouselComponent.prototype.onForceRenderImage = function () {
-            this._appEventService.onForceRenderImage.next();
-        };
-        ImageCarouselComponent.prototype.getImageSrc = function (image) {
-            var source = '';
-            if (image instanceof coDocument.CoDocument) {
-                if (image.filePath) {
-                    source = image.filePath;
-                }
-                else {
-                    source = image.documentBodyAsDataUri;
-                }
-            }
-            else if (image.detail !== undefined) {
-                source = image.detail;
-            }
-            return this._domSanitizer.bypassSecurityTrustUrl(source);
-        };
-        ImageCarouselComponent.prototype._loadImages = function () {
-            var _this = this;
-            if (this._images) {
-                this._images.forEach(function (i) {
-                    if (!i.documentBody && !i.filePath) {
-                        _this._ione.getDocumentContent(i.documentId, false).then(function (content) {
-                            if (content) {
-                                i.documentBody = content.documentContent;
-                            }
-                        });
-                    }
-                });
-            }
-        };
-        ImageCarouselComponent.prototype._scrollCarouselToIndex = function () {
-            if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
-                var movePx = this.currentIndex * this.carousel.nativeElement.clientWidth;
-                if (this.carousel && this.carousel.nativeElement) {
-                    this.carousel.nativeElement.scrollLeft = movePx;
-                    // this.carousel.nativeElement.scrollTo({
-                    //   left: movePx,
-                    //   behavior: 'smooth'
-                    // });
-                }
-            }
-        };
-        ImageCarouselComponent.ctorParameters = function () { return [
-            { type: ProductConnectorService },
-            { type: ProductEventService },
-            { type: core.ChangeDetectorRef },
-            { type: platformBrowser.DomSanitizer },
-            { type: IconCacheService }
-        ]; };
-        __decorate([
-            core.ViewChild('carousel', { read: core.ElementRef })
-        ], ImageCarouselComponent.prototype, "carousel", void 0);
-        __decorate([
-            core.Input()
-        ], ImageCarouselComponent.prototype, "showRefresh", void 0);
-        __decorate([
-            core.Input()
-        ], ImageCarouselComponent.prototype, "images", null);
-        __decorate([
-            core.HostListener('window:resize')
-        ], ImageCarouselComponent.prototype, "handleWindowResize", null);
-        __decorate([
-            core.HostListener('swipeleft')
-        ], ImageCarouselComponent.prototype, "gotoNextSlide", null);
-        __decorate([
-            core.HostListener('swiperight')
-        ], ImageCarouselComponent.prototype, "gotoPrevSlide", null);
-        __decorate([
-            core.HostBinding('class.resizing')
-        ], ImageCarouselComponent.prototype, "resizing", void 0);
-        ImageCarouselComponent = __decorate([
-            core.Component({
-                selector: 'app-image-carousel',
-                template: "<div id=\"product_page_carousel\">\n  <div id=\"product_page_carousel_items\">\n    <co-loader [isShown]=\"showLoader\"></co-loader>\n    <div #carousel class=\"inner-carousel\">\n      <!-- This has been taken out of the for loop to prevent flashing images when updating. -->\n      <div *ngIf=\"images[0]\" class=\"carousel-item\" [id]=\"'slide-0'\" [class.active]=\"isCurrentIndex(0)\">\n        <img [src]=\"getImageSrc(images[0])\">\n      </div>\n      <div *ngFor=\"let image of images.slice(1); let index = index\" class=\"carousel-item\" [id]=\"'slide-' + (index + 1)\" [class.active]=\"isCurrentIndex((index + 1))\">\n        <img [src]=\"getImageSrc(image)\">\n      </div>\n      <div class=\"carousel-scroller-layer\" *ngIf=\"images && images.length > 1\">\n        <div class=\"carousel-item-scroller prev\" (click)=\"gotoPrevSlide()\" *ngIf=\"currentIndex > 0\"></div>\n        <div class=\"carousel-item-scroller next\" (click)=\"gotoNextSlide()\" *ngIf=\"currentIndex < images.length - 1\"></div>\n      </div>\n    </div>\n    <co-icon class=\"selector-type-icon refresh-button\" [iconData]=\"iconCache.getIcon(icons.Refresh)\" (click)=\"onForceRenderImage()\" [class.loading]=\"showLoader\" *ngIf=\"showRefresh\"></co-icon>\n  </div>\n\n  <div id=\"product_page_carousel_thumbs\">\n    <co-scroll-container class=\"scroll-container\" *ngIf=\"images && images.length > 1\">\n      <div *ngFor=\"let image of images; let index = index\" class=\"carousel-thumb\" [class.active]=\"index === currentIndex\">\n        <img [src]=\"getImageSrc(image)\" (click)=\"handleThumbClick(index)\"/>\n      </div>\n    </co-scroll-container>\n  </div>\n</div>\n",
-                styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74b77f;transition:.2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:.2s;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}@media screen and (max-width:650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}"]
-            })
-        ], ImageCarouselComponent);
-        return ImageCarouselComponent;
-    }());
-
-    var StockAndDelivery = /** @class */ (function () {
-        function StockAndDelivery(stock, deliveryDescription) {
-            this.stock = 0;
-            this.stock = stock;
-            this.deliveryDescription = deliveryDescription;
-        }
-        return StockAndDelivery;
-    }());
-
-    var SelectorType;
-    (function (SelectorType) {
-        SelectorType["TwoD"] = "2D";
-        SelectorType["ThreeD"] = "3D";
-        SelectorType["Omni"] = "Omni";
-    })(SelectorType || (SelectorType = {}));
-
-    var ProductPageComponent = /** @class */ (function () {
-        function ProductPageComponent(_ione, _renderer, _changeDetector, iconCache, settingsService, appEventService) {
-            var _this = this;
-            this._ione = _ione;
-            this._renderer = _renderer;
-            this._changeDetector = _changeDetector;
-            this.iconCache = iconCache;
-            this.settingsService = settingsService;
-            this.appEventService = appEventService;
-            this.icon = IconEnum;
-            this.configurable = false;
-            this.threeD = false;
-            this.show2D = true;
-            this.show3D = false;
-            this.configuring = false;
-            this.fullscreenAnimationEnd = false;
-            this.settingsLoaded = false;
-            this._fullScreen = false;
-            this._subs = [];
-            this._subs.push(this.appEventService.onForceRenderImage.subscribe(function (x) {
-                if (_this.selections.nativeElement) {
-                    _this.selections.nativeElement.forceRenderImage();
-                }
-            }), this.settingsService.settingsLoaded.subscribe(function (loaded) {
-                _this.settingsLoaded = loaded;
-            }));
-        }
-        Object.defineProperty(ProductPageComponent.prototype, "sku", {
+        Object.defineProperty(ProductPageComponent.prototype, "settings", {
             get: function () {
-                return this._sku;
+                return this._settings;
             },
             set: function (value) {
                 if (value) {
-                    if (this.configuring) {
-                        this.show3D = false;
-                        this.fullScreen = false;
-                        this.configuring = false;
-                        this._changeDetector.detectChanges();
+                    if (typeof value === 'string') {
+                        this._settings = JSON.parse(value);
+                    }
+                    else {
+                        this._settings = value;
                     }
-                    this._sku = value;
-                    this._getArticle();
                 }
             },
             enumerable: true,
@@ -1324,6 +1463,13 @@
             configurable: true
         });
         ProductPageComponent.prototype.ngOnInit = function () {
+            if (this._settings) {
+                this.settingsService.settings = undefined;
+                this.settingsService.createSettingsFromObject(this._settings);
+            }
+            else {
+                this._settings = this.settingsService.settings;
+            }
         };
         ProductPageComponent.prototype.ngAfterViewInit = function () {
         };
@@ -1348,6 +1494,11 @@
         ProductPageComponent.prototype.showFullScreen = function () {
             this.fullScreen = !this.fullScreen;
         };
+        ProductPageComponent.prototype._handleSettingsLoaded = function (loaded) {
+            if (loaded) {
+                this._ione.initConnection();
+            }
+        };
         ProductPageComponent.prototype._getArticle = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
@@ -1361,18 +1512,20 @@
                             if (init) {
                                 this._ione.getFullArticle(this._sku).then(function (article) {
                                     _this.article = article;
-                                    _this.configurable = _this.article.goodType === 'B';
-                                    if (_this.configurable) {
-                                        _this.currentView = SelectorType.TwoD;
-                                    }
-                                    _this.threeD = _this.article.is3D;
-                                    _this.selectorType = _this.article.selectorTypeCustomer;
-                                    _this._ione.getDeliveryPrognosis(_this.article.goodId).then(function (stockInfo) {
-                                        var stockAndDelivery = stockInfo;
-                                        _this.stockAndDelivery = new StockAndDelivery(0, stockAndDelivery.returnValue ? stockAndDelivery.returnValue : ' ');
+                                    if (_this.article) {
+                                        _this.configurable = _this.article.goodType === 'B';
+                                        if (_this.configurable) {
+                                            _this.currentView = SelectorType.TwoD;
+                                        }
+                                        _this.threeD = _this.article.is3D;
+                                        _this.selectorType = _this.article.selectorTypeCustomer;
+                                        _this._ione.getDeliveryPrognosis(_this.article.goodId).then(function (stockInfo) {
+                                            var stockAndDelivery = stockInfo;
+                                            _this.stockAndDelivery = new StockAndDelivery(0, stockAndDelivery.returnValue ? stockAndDelivery.returnValue : ' ');
+                                            _this._changeDetector.detectChanges();
+                                        });
                                         _this._changeDetector.detectChanges();
-                                    });
-                                    _this._changeDetector.detectChanges();
+                                    }
                                 });
                             }
                             return [2 /*return*/];
@@ -1402,10 +1555,13 @@
         __decorate([
             core.Input()
         ], ProductPageComponent.prototype, "sku", null);
+        __decorate([
+            core.Input()
+        ], ProductPageComponent.prototype, "settings", null);
         ProductPageComponent = __decorate([
             core.Component({
                 selector: 'app-product-page',
-                template: "<div class=\"page-wrapper\">\r\n  <div class=\"page-wrapper-content\">\r\n    <div class=\"page-wrapper-left\">\r\n      <div class=\"product-image-container\">\r\n        <div class=\"product-page-block-selector-type\">\r\n          <app-product-selector-type class=\"default-padding\"\r\n            [(currentType)]=\"currentView\"\r\n            [show2D]=\"configurable\"\r\n            [show3D]=\"threeD\"\r\n          ></app-product-selector-type>\r\n        </div>\r\n        <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n          <app-image-carousel [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\" [images]=\"article?.images\" [showRefresh]=\"configurable && threeD\"></app-image-carousel>\r\n          <ng-container *ngIf=\"settingsLoaded\">\r\n            <threed-configurator #configurator class=\"threed-configurator\"\r\n                                 [class.configurator-full-screen]=\"fullScreen\"\r\n                                 [@toggleVisibilityByState]=\"show3D ? 'show' : 'hide'\"\r\n                                 [@toggleFullScreen]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n            ></threed-configurator>\r\n          </ng-container>\r\n          <co-icon #fullscreenbutton class=\"fullscreen-button\" *ngIf=\"show3D\"\r\n                   [@toggleTopLeft]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                   [iconData]=\"iconCache.getIcon(fullScreenIcon)\"\r\n                   (click)=\"showFullScreen()\"></co-icon>\r\n          <co-icon class=\"threed-watermark\" *ngIf=\"show3D && fullScreen\"\r\n                   [iconData]=\"iconCache.getIcon(icon.Logo)\"></co-icon>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-right\">\r\n      <div class=\"product-page-block-description\">\r\n        <app-product-description class=\"default-padding\" [article]=\"article\"></app-product-description>\r\n      </div>\r\n      <div class=\"product-page-block-additional\">\r\n        <div class=\"product-page-block-additional-description\">\r\n          <app-product-additional-description class=\"default-padding\" [article]=\"article\"></app-product-additional-description>\r\n        </div>\r\n        <div class=\"product-page-block-price\" [class.full]=\"configuring\">\r\n          <app-product-price class=\"s-padding\" *ngIf=\"!configuring\"\r\n                             [pricing]=\"article?.pricing\"\r\n                             [configurable]=\"configurable\"\r\n          ></app-product-price>\r\n          <ng-container *ngIf=\"settingsLoaded\">\r\n            <threed-selections #selections class=\"threed-selections\" [class.show-selections]=\"configuring\" [@toggleFullScreenRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                               [class.default-padding]=\"!fullScreen\"\r\n                               [class.show-full-screen]=\"fullScreen\"\r\n                               [class.mini-scrollbar]=\"fullScreen\"\r\n                               [sku]=\"sku\"\r\n                               [settings]=\"settingsService.settings\"\r\n                               (onUserActionFromThreeD)=\"configuring = true\"\r\n                               (instanceSet)=\"setInstance($event)\"\r\n                               (onImageReceived)=\"appEventService.onImageReceived.next($event)\"\r\n                               (onRenderStarted)=\"appEventService.onRenderStarted.next()\"\r\n                               (onDraftRenderImageReceived)=\"appEventService.onDraftRenderImageReceived.next($event)\"\r\n                               (onArticleReceived)=\"appEventService.onArticleReceived.next($event.detail)\"\r\n                               (onSelectionsReceived)=\"appEventService.onSelectionsReceived.next($event.detail)\"\r\n                               (onArticleInfoReceived)=\"appEventService.onArticleInfoReceived.next($event.detail)\"\r\n            ></threed-selections>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"product-page-block-addtocart no-padding product-action-buttons\" *ngIf=\"!configuring\" [@toggleTopRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n          <app-product-addtocart\r\n                                 [configurable]=\"configurable\"\r\n                                 [configuring]=\"configuring\"\r\n                                 [article]=\"article\"\r\n                                 (startConfiguration)=\"handleStartConfiguration()\"\r\n          ></app-product-addtocart>\r\n        </div>\r\n        <div class=\"addtocart-reserved product-action-buttons\" *ngIf=\"configuring\" [class.full-screen]=\"fullScreen\">\r\n          <app-product-addtocart class=\"default-padding\"\r\n                                 [configurable]=\"false\"\r\n                                 [fullscreen]=\"fullScreen\"\r\n                                 [configuring]=\"configuring\"\r\n                                 [article]=\"article\"\r\n                                 (startConfiguration)=\"handleStartConfiguration()\"\r\n          ></app-product-addtocart>\r\n        </div>\r\n        <div class=\"product-page-block-variants\">\r\n          <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                               [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>\r\n        </div>\r\n        <div class=\"product-page-block-stock\">\r\n          <app-product-stock class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-stock>\r\n        </div>\r\n        <div class=\"product-page-block-delivery\">\r\n          <app-product-delivery class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-delivery>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"page-wrapper-content\">\r\n    <div class=\"page-wrapper-left\">\r\n      <app-product-info-tabs class=\"no-padding\" [article]=\"article\"></app-product-info-tabs>\r\n    </div>\r\n    <div class=\"page-wrapper-right\">\r\n      <div class=\"product-page-block-related s-padding\">\r\n          <app-product-related *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                               [articles]=\"article?.relatedArticles\" [refType]=\"1\" [label]=\"'RELATED_PRODUCTS' | localize\"></app-product-related>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"page-wrapper-content no-top-margin\">\r\n    <div class=\"page-wrapper-full\">\r\n      <div class=\"product-page-block-alternatives s-padding\">\r\n        <app-product-related *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                             [articles]=\"article?.relatedArticles\" [refType]=\"4\" [isSmallModus]=\"false\" [label]=\"'ALTERNATIVE_PRODUCTS' | localize\"></app-product-related>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<ng-container *ngIf=\"settingsLoaded\">\r\n  <div class=\"page-wrapper\">\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <div class=\"product-image-container\">\r\n          <div class=\"product-page-block-selector-type\">\r\n            <app-product-selector-type class=\"default-padding\"\r\n              [(currentType)]=\"currentView\"\r\n              [show2D]=\"configurable\"\r\n              [show3D]=\"threeD\"\r\n            ></app-product-selector-type>\r\n          </div>\r\n          <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n            <app-image-carousel [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\" [images]=\"article?.images\" [showRefresh]=\"configurable && threeD\"></app-image-carousel>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-configurator #configurator class=\"threed-configurator\"\r\n                                   [class.configurator-full-screen]=\"fullScreen\"\r\n                                   [@toggleVisibilityByState]=\"show3D ? 'show' : 'hide'\"\r\n                                   [@toggleFullScreen]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n              ></threed-configurator>\r\n            </ng-container>\r\n            <co-icon #fullscreenbutton class=\"fullscreen-button\" *ngIf=\"show3D\"\r\n                     [@toggleTopLeft]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                     [iconData]=\"iconCache.getIcon(fullScreenIcon)\"\r\n                     (click)=\"showFullScreen()\"></co-icon>\r\n            <co-icon class=\"threed-watermark\" *ngIf=\"show3D && fullScreen\"\r\n                     [iconData]=\"iconCache.getIcon(icon.Logo)\"></co-icon>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-description\">\r\n          <app-product-description class=\"default-padding\" [article]=\"article\"></app-product-description>\r\n        </div>\r\n        <div class=\"product-page-block-additional\">\r\n          <div class=\"product-page-block-additional-description\">\r\n            <app-product-additional-description class=\"default-padding\" [article]=\"article\"></app-product-additional-description>\r\n          </div>\r\n          <div class=\"product-page-block-price\" [class.full]=\"configuring\">\r\n            <app-product-price class=\"s-padding\" *ngIf=\"!configuring\"\r\n                               [pricing]=\"article?.pricing\"\r\n                               [configurable]=\"configurable\"\r\n            ></app-product-price>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-selections #selections class=\"threed-selections\" [class.show-selections]=\"configuring\" [@toggleFullScreenRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                                 [class.default-padding]=\"!fullScreen\"\r\n                                 [class.show-full-screen]=\"fullScreen\"\r\n                                 [class.mini-scrollbar]=\"fullScreen\"\r\n                                 [sku]=\"sku\"\r\n                                 [settings]=\"settings\"\r\n                                 (onUserActionFromThreeD)=\"configuring = true\"\r\n                                 (instanceSet)=\"setInstance($event)\"\r\n                                 (onImageReceived)=\"appEventService.onImageReceived.next($event)\"\r\n                                 (onRenderStarted)=\"appEventService.onRenderStarted.next()\"\r\n                                 (onDraftRenderImageReceived)=\"appEventService.onDraftRenderImageReceived.next($event)\"\r\n                                 (onArticleReceived)=\"appEventService.onArticleReceived.next($event.detail)\"\r\n                                 (onSelectionsReceived)=\"appEventService.onSelectionsReceived.next($event.detail)\"\r\n                                 (onArticleInfoReceived)=\"appEventService.onArticleInfoReceived.next($event.detail)\"\r\n              ></threed-selections>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"product-page-block-addtocart no-padding product-action-buttons\" *ngIf=\"!configuring\" [@toggleTopRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n            <app-product-addtocart\r\n                                   [configurable]=\"configurable\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"addtocart-reserved product-action-buttons\" *ngIf=\"configuring\" [class.full-screen]=\"fullScreen\">\r\n            <app-product-addtocart class=\"default-padding\"\r\n                                   [configurable]=\"false\"\r\n                                   [fullscreen]=\"fullScreen\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"product-page-block-variants\">\r\n            <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>\r\n          </div>\r\n          <div class=\"product-page-block-stock\">\r\n            <app-product-stock class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-stock>\r\n          </div>\r\n          <div class=\"product-page-block-delivery\">\r\n            <app-product-delivery class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-delivery>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <app-product-info-tabs class=\"no-padding\" [article]=\"article\"></app-product-info-tabs>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-related s-padding\">\r\n            <app-product-related *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"1\" [label]=\"'RELATED_PRODUCTS' | localize\"></app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content no-top-margin\">\r\n      <div class=\"page-wrapper-full\">\r\n        <div class=\"product-page-block-alternatives s-padding\">\r\n          <app-product-related *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                               [articles]=\"article?.relatedArticles\" [refType]=\"4\" [isSmallModus]=\"false\" [label]=\"'ALTERNATIVE_PRODUCTS' | localize\"></app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n",
                 animations: [
                     animations.trigger('toggleFullScreen', [
                         animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
@@ -1444,203 +1600,231 @@
         return ProductPageComponent;
     }());
 
-    var ProductDocumentsComponent = /** @class */ (function () {
-        function ProductDocumentsComponent(iconCache) {
-            this.iconCache = iconCache;
-            this.icon = IconEnum;
-            this.showLabel = false;
-            this.documents = [];
+    var ProductSelectorTypeComponent = /** @class */ (function () {
+        function ProductSelectorTypeComponent(_iconCache, _changeDetector) {
+            this._iconCache = _iconCache;
+            this._changeDetector = _changeDetector;
+            this.type = SelectorType;
+            this.icons = IconEnum;
+            this.onIconClick = new core.EventEmitter();
+            this.currentTypeChange = new core.EventEmitter();
+            this.twoDIcon = this._iconCache.getIcon(this.icons.TwoD);
+            this.threeDIcon = this._iconCache.getIcon(this.icons.ThreeD);
         }
-        ProductDocumentsComponent.ctorParameters = function () { return [
-            { type: IconCacheService }
+        ProductSelectorTypeComponent.prototype.ngOnInit = function () {
+        };
+        ProductSelectorTypeComponent.prototype.handleIconClick = function (type) {
+            this.currentType = type;
+            this.currentTypeChange.next(this.currentType);
+            this.onIconClick.next(this.currentType);
+            this._changeDetector.detectChanges();
+        };
+        ProductSelectorTypeComponent.ctorParameters = function () { return [
+            { type: IconCacheService },
+            { type: core.ChangeDetectorRef }
         ]; };
         __decorate([
             core.Input()
-        ], ProductDocumentsComponent.prototype, "showLabel", void 0);
+        ], ProductSelectorTypeComponent.prototype, "show2D", void 0);
         __decorate([
             core.Input()
-        ], ProductDocumentsComponent.prototype, "documents", void 0);
-        ProductDocumentsComponent = __decorate([
+        ], ProductSelectorTypeComponent.prototype, "show3D", void 0);
+        __decorate([
+            core.Input()
+        ], ProductSelectorTypeComponent.prototype, "currentType", void 0);
+        __decorate([
+            core.Output()
+        ], ProductSelectorTypeComponent.prototype, "onIconClick", void 0);
+        __decorate([
+            core.Output()
+        ], ProductSelectorTypeComponent.prototype, "currentTypeChange", void 0);
+        ProductSelectorTypeComponent = __decorate([
             core.Component({
-                selector: 'app-product-documents',
-                template: "<app-header *ngIf=\"showLabel\" [label]=\"'DOCUMENTS' | localize\" [amount]=\"documents?.length\"></app-header>\n<div *ngIf=\"documents && documents.length > 0\">\n  <co-files-upload [documents]=\"documents\" [canAdd]=\"false\" readonly></co-files-upload>\n</div>\n",
-                styles: [":host{display:block}::ng-deep co-files-upload{flex-direction:column!important;width:100%}::ng-deep co-file-upload{margin:0!important;border-bottom:1px solid #f6f5f4}::ng-deep co-file-upload:first-child{border-top:1px solid #f6f5f4}::ng-deep co-files-upload .files-upload-wrapper{flex-direction:column!important;width:100%}::ng-deep co-file-upload co-tile{max-width:100%!important;width:100%;position:relative}::ng-deep co-file-upload co-tile:hover{box-shadow:none!important}::ng-deep co-file-upload co-tile:hover .tile-extra-bottom{background-color:#f6f5f4!important}::ng-deep co-file-upload co-tile .tile-wrapper{position:absolute!important;left:0;top:0;width:100%;height:100%;z-index:2;opacity:0;box-sizing:border-box}::ng-deep co-file-upload co-tile .tile-wrapper .image{position:absolute!important;left:0;top:0;width:100%!important;height:100%!important;cursor:pointer}::ng-deep co-file-upload co-tile .tile-extra-bottom{outline:0!important;border:none!important;background:url(../../../assets/icons/download.svg) left 6px center/36px auto no-repeat!important;line-height:20px;padding:20px 20px 20px 60px!important;margin:0!important}::ng-deep co-file-upload co-tile .tile-extra-bottom .main{padding:0!important}"]
+                selector: 'app-product-selector-type',
+                template: "<div *ngIf=\"show2D || show3D\" class=\"show-in\" [textContent]=\"'SHOW_IN' | localize\"></div>\n<co-icon *ngIf=\"show2D\" class=\"selector-type-icon\"\n         [class.active]=\"currentType === type.TwoD\"\n         [iconData]=\"twoDIcon\"\n         (click)=\"handleIconClick(type.TwoD)\"\n></co-icon>\n<co-icon *ngIf=\"show3D\" class=\"selector-type-icon\"\n         [class.active]=\"currentType === type.ThreeD\"\n         [iconData]=\"threeDIcon\"\n         (click)=\"handleIconClick(type.ThreeD)\"\n></co-icon>\n",
+                styles: [":host{display:flex;flex-direction:row;align-items:center}:host .show-in{display:none}:host>:not(:last-child){margin-right:10px}::ng-deep co-icon.selector-type-icon{box-shadow:inset 0 0 0 1px #22313c;border-radius:50%;background:0 0;height:34px;width:34px;cursor:pointer}::ng-deep co-icon.selector-type-icon.active{box-shadow:none;background:#74b77f;transition:.2s ease-in-out}::ng-deep co-icon.selector-type-icon.active [fill]{fill:#fff}"]
             })
-        ], ProductDocumentsComponent);
-        return ProductDocumentsComponent;
+        ], ProductSelectorTypeComponent);
+        return ProductSelectorTypeComponent;
     }());
 
-    var ProductRelatedComponent = /** @class */ (function () {
-        function ProductRelatedComponent(_iOne, _appEventService) {
-            this._iOne = _iOne;
-            this._appEventService = _appEventService;
-            this.isSmallModus = true;
-            this._articles = [];
+    var ImageCarouselComponent = /** @class */ (function () {
+        function ImageCarouselComponent(_ione, _appEventService, _changeDetector, _domSanitizer, iconCache) {
+            var _this = this;
+            this._ione = _ione;
+            this._appEventService = _appEventService;
+            this._changeDetector = _changeDetector;
+            this._domSanitizer = _domSanitizer;
+            this.iconCache = iconCache;
+            this.icons = IconEnum;
+            this.showLoader = false;
+            this.showRefresh = false;
+            this.resizing = false;
+            this._currentIndex = 0;
+            this._images = [];
+            this._subs = [];
+            this._subs.push(this._appEventService.onRenderStarted.subscribe(function () {
+                _this.showLoader = true;
+            }), this._appEventService.onDraftRenderImageReceived.subscribe(function (url) {
+                if (_this._images[0] instanceof coDocument.CoDocument) {
+                    _this._images.unshift(url);
+                }
+                else {
+                    _this._images[0] = url;
+                }
+                _this.showLoader = false;
+            }));
         }
-        Object.defineProperty(ProductRelatedComponent.prototype, "articles", {
+        Object.defineProperty(ImageCarouselComponent.prototype, "images", {
             get: function () {
-                return this._articles;
+                return this._images;
             },
             set: function (value) {
-                var _this = this;
-                if (value) {
-                    if (this.refType && this.refType !== undefined) {
-                        if (value.length > 0) {
-                            value.forEach(function (x) {
-                                if (x.refType === _this.refType) {
-                                    _this._articles.push(x);
-                                }
-                            });
-                        }
-                    }
-                    else {
-                        this._articles = value;
-                    }
+                if (value && value.length > 0) {
+                    this._images = value;
                     this._loadImages();
+                    this._changeDetector.detectChanges();
                 }
             },
             enumerable: true,
             configurable: true
         });
-        ProductRelatedComponent.prototype.handleContentClick = function (article) {
-            this._appEventService.onAlternativeClick.next(article);
+        ImageCarouselComponent.prototype.handleWindowResize = function () {
+            var _this = this;
+            this.resizing = true;
+            this._scrollCarouselToIndex();
+            clearTimeout(this._resizeTimer);
+            this._resizeTimer = setTimeout(function () {
+                _this.resizing = false;
+            }, 200);
         };
-        ProductRelatedComponent.prototype._loadImages = function () {
+        ImageCarouselComponent.prototype.gotoNextSlide = function () {
+            this.currentIndex++;
+        };
+        ImageCarouselComponent.prototype.gotoPrevSlide = function () {
+            this.currentIndex--;
+        };
+        ImageCarouselComponent.prototype.isCurrentIndex = function (index) {
+            return this.currentIndex === index;
+        };
+        Object.defineProperty(ImageCarouselComponent.prototype, "currentIndex", {
+            get: function () {
+                return this._currentIndex;
+            },
+            set: function (value) {
+                this._currentIndex = value;
+                this._scrollCarouselToIndex();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ImageCarouselComponent.prototype.ngOnInit = function () {
+        };
+        ImageCarouselComponent.prototype.ngOnDestroy = function () {
+            this.carousel = undefined;
+            this._subs.forEach(function (s) { return s.unsubscribe(); });
+        };
+        ImageCarouselComponent.prototype.handleThumbClick = function (index) {
+            this.currentIndex = index;
+        };
+        ImageCarouselComponent.prototype.onForceRenderImage = function () {
+            this._appEventService.onForceRenderImage.next();
+        };
+        ImageCarouselComponent.prototype.getImageSrc = function (image) {
+            var source = '';
+            if (image instanceof coDocument.CoDocument) {
+                if (image.filePath) {
+                    source = image.filePath;
+                }
+                else {
+                    source = image.documentBodyAsDataUri;
+                }
+            }
+            else if (image.detail !== undefined) {
+                source = image.detail;
+            }
+            return this._domSanitizer.bypassSecurityTrustUrl(source);
+        };
+        ImageCarouselComponent.prototype._loadImages = function () {
             var _this = this;
-            this._articles.forEach(function (a) {
-                if (!a.image.documentBody) {
-                    _this._iOne.getDocumentContent(a.image.documentId).then(function (content) {
-                        if (content) {
-                            a.image.documentBody = content.documentContent;
-                        }
-                    });
+            if (this._images) {
+                this._images.forEach(function (i) {
+                    if (!i.documentBody && !i.filePath) {
+                        _this._ione.getDocumentContent(i.documentId, false).then(function (content) {
+                            if (content) {
+                                i.documentBody = content.documentContent;
+                            }
+                        });
+                    }
+                });
+            }
+        };
+        ImageCarouselComponent.prototype._scrollCarouselToIndex = function () {
+            if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
+                var movePx = this.currentIndex * this.carousel.nativeElement.clientWidth;
+                if (this.carousel && this.carousel.nativeElement) {
+                    this.carousel.nativeElement.scrollLeft = movePx;
+                    // this.carousel.nativeElement.scrollTo({
+                    //   left: movePx,
+                    //   behavior: 'smooth'
+                    // });
                 }
-            });
+            }
         };
-        ProductRelatedComponent.ctorParameters = function () { return [
+        ImageCarouselComponent.ctorParameters = function () { return [
             { type: ProductConnectorService },
-            { type: ProductEventService }
+            { type: ProductEventService },
+            { type: core.ChangeDetectorRef },
+            { type: platformBrowser.DomSanitizer },
+            { type: IconCacheService }
         ]; };
         __decorate([
-            core.Input()
-        ], ProductRelatedComponent.prototype, "refType", void 0);
+            core.ViewChild('carousel', { read: core.ElementRef })
+        ], ImageCarouselComponent.prototype, "carousel", void 0);
         __decorate([
             core.Input()
-        ], ProductRelatedComponent.prototype, "label", void 0);
+        ], ImageCarouselComponent.prototype, "showRefresh", void 0);
         __decorate([
             core.Input()
-        ], ProductRelatedComponent.prototype, "isSmallModus", void 0);
+        ], ImageCarouselComponent.prototype, "images", null);
         __decorate([
-            core.Input()
-        ], ProductRelatedComponent.prototype, "articles", null);
-        ProductRelatedComponent = __decorate([
-            core.Component({
-                selector: 'app-product-related',
-                template: "<div *ngIf=\"articles && articles.length > 0\">\n  <app-header [label]=\"label\" [amount]=\"articles?.length\" *ngIf=\"label\"></app-header>\n  <co-scroll-container>\n    <div class=\"article-wrapper\" *ngFor=\"let article of articles\">\n      <co-article-tile\n               [imageData]=\"article.image.documentBodyAsDataUri\"\n               [description]=\"article.description\"\n               [price]=\"article.price\"\n               [level]=\"article.stockStatus\"\n               [isSmallModus]=\"isSmallModus\"\n               [hasConfigureButton]=\"article.goodType === 'B'\"\n               (contentClick)=\"handleContentClick(article)\"\n      ></co-article-tile>\n    </div>\n  </co-scroll-container>\n</div>\n",
-                styles: [":host{display:block}.article-wrapper{display:flex;flex-direction:row}.article-wrapper ::ng-deep co-tile.small{min-width:189px;max-width:189px;height:100%}.article-wrapper ::ng-deep co-tile.small:hover{box-shadow:none;cursor:pointer}.article-wrapper ::ng-deep co-tile.small:hover .tile-bottom .left-buttons{margin:0!important}.article-wrapper ::ng-deep co-tile.small .tile-wrapper{outline:0!important;padding-bottom:0;overflow:hidden}.article-wrapper ::ng-deep co-tile.small .tile-wrapper div.image{height:100px}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-bottom .left-buttons{position:absolute;top:0;right:0;margin:0 -32px 0 0;align-items:flex-end;transition:.2s ease-in-out}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-bottom .left-buttons ::ng-deep co-button.card-button.mini{width:30px;height:30px;transform:none;border-radius:4px;margin:0 0 5px}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-bottom .left-buttons ::ng-deep co-button.card-button.mini ::ng-deep co-icon{width:30px;height:30px}.article-wrapper ::ng-deep co-tile.small .tile-extra-bottom{outline:0!important;background:0 0!important}.article-wrapper ::ng-deep co-tile.small .tile-extra-bottom .price{color:#74b77f;margin:5px 0 0;font-weight:400;font-size:12px}"]
-            })
-        ], ProductRelatedComponent);
-        return ProductRelatedComponent;
-    }());
-
-    var HeaderComponent = /** @class */ (function () {
-        function HeaderComponent() {
-        }
-        HeaderComponent.prototype.ngOnInit = function () {
-        };
+            core.HostListener('window:resize')
+        ], ImageCarouselComponent.prototype, "handleWindowResize", null);
         __decorate([
-            core.Input()
-        ], HeaderComponent.prototype, "label", void 0);
+            core.HostListener('swipeleft')
+        ], ImageCarouselComponent.prototype, "gotoNextSlide", null);
         __decorate([
-            core.Input()
-        ], HeaderComponent.prototype, "amount", void 0);
-        HeaderComponent = __decorate([
+            core.HostListener('swiperight')
+        ], ImageCarouselComponent.prototype, "gotoPrevSlide", null);
+        __decorate([
+            core.HostBinding('class.resizing')
+        ], ImageCarouselComponent.prototype, "resizing", void 0);
+        ImageCarouselComponent = __decorate([
             core.Component({
-                selector: 'app-header',
-                template: "<ng-container *ngIf=\"label\">\n  <div class=\"header-wrapper\">\n    <h3 [textContent]=\"label\"></h3>\n    <span *ngIf=\"amount\" class=\"amount\" [textContent]=\"'(' + amount + ')'\"></span>\n  </div>\n</ng-container>\n",
-                styles: [".header-wrapper{display:flex;flex-direction:row;align-items:center}.header-wrapper .amount{margin-left:5px}"]
+                selector: 'app-image-carousel',
+                template: "<div id=\"product_page_carousel\">\n  <div id=\"product_page_carousel_items\">\n    <co-loader [isShown]=\"showLoader\"></co-loader>\n    <div #carousel class=\"inner-carousel\">\n      <!-- This has been taken out of the for loop to prevent flashing images when updating. -->\n      <div *ngIf=\"images[0]\" class=\"carousel-item\" [id]=\"'slide-0'\" [class.active]=\"isCurrentIndex(0)\">\n        <img [src]=\"getImageSrc(images[0])\">\n      </div>\n      <div *ngFor=\"let image of images.slice(1); let index = index\" class=\"carousel-item\" [id]=\"'slide-' + (index + 1)\" [class.active]=\"isCurrentIndex((index + 1))\">\n        <img [src]=\"getImageSrc(image)\">\n      </div>\n      <div class=\"carousel-scroller-layer\" *ngIf=\"images && images.length > 1\">\n        <div class=\"carousel-item-scroller prev\" (click)=\"gotoPrevSlide()\" *ngIf=\"currentIndex > 0\"></div>\n        <div class=\"carousel-item-scroller next\" (click)=\"gotoNextSlide()\" *ngIf=\"currentIndex < images.length - 1\"></div>\n      </div>\n    </div>\n    <co-icon class=\"selector-type-icon refresh-button\" [iconData]=\"iconCache.getIcon(icons.Refresh)\" (click)=\"onForceRenderImage()\" [class.loading]=\"showLoader\" *ngIf=\"showRefresh\"></co-icon>\n  </div>\n\n  <div id=\"product_page_carousel_thumbs\">\n    <co-scroll-container class=\"scroll-container\" *ngIf=\"images && images.length > 1\">\n      <div *ngFor=\"let image of images; let index = index\" class=\"carousel-thumb\" [class.active]=\"index === currentIndex\">\n        <img [src]=\"getImageSrc(image)\" (click)=\"handleThumbClick(index)\"/>\n      </div>\n    </co-scroll-container>\n  </div>\n</div>\n",
+                styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74b77f;transition:.2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:.2s;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}@media screen and (max-width:650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}"]
             })
-        ], HeaderComponent);
-        return HeaderComponent;
+        ], ImageCarouselComponent);
+        return ImageCarouselComponent;
     }());
 
-    var TabType;
-    (function (TabType) {
-        TabType["Additional"] = "additional";
-        TabType["Properties"] = "properties";
-    })(TabType || (TabType = {}));
-    var ProductInfoComponent = /** @class */ (function () {
-        function ProductInfoComponent() {
-            this.tabType = TabType;
-            this.currentTab = TabType.Additional;
+    var ProductDescriptionComponent = /** @class */ (function () {
+        function ProductDescriptionComponent() {
         }
-        ProductInfoComponent.prototype.ngOnInit = function () {
-        };
-        ProductInfoComponent.prototype.switchTab = function (tab) {
-            this.currentTab = tab;
+        ProductDescriptionComponent.prototype.ngOnInit = function () {
         };
         __decorate([
             core.Input()
-        ], ProductInfoComponent.prototype, "article", void 0);
-        ProductInfoComponent = __decorate([
+        ], ProductDescriptionComponent.prototype, "article", void 0);
+        ProductDescriptionComponent = __decorate([
             core.Component({
-                selector: 'app-product-info',
-                template: "<div>\n  <div class=\"info-wrapper\">\n    <div class=\"info-navigation\">\n      <span [textContent]=\"'ADDITIONAL_DATA' | localize\" class=\"navigator\" [class.selected]=\"currentTab === tabType.Additional\" (mouseup)=\"switchTab(tabType.Additional)\"></span>\n      <span [textContent]=\"'PROPERTIES' | localize\" class=\"navigator\" [class.selected]=\"currentTab === tabType.Properties\" (mouseup)=\"switchTab(tabType.Properties)\"></span>\n    </div>\n    <ng-container [ngSwitch]=\"currentTab\" class=\"content\">\n      <div *ngSwitchCase=\"tabType.Additional\" @showContent>\n        <app-product-additional-info\n          [article]=\"article\"\n        ></app-product-additional-info>\n      </div>\n      <div *ngSwitchCase=\"tabType.Properties\" @showContent>\n        <app-product-properties [article]=\"article\"></app-product-properties>\n      </div>\n    </ng-container>\n  </div>\n</div>\n",
-                animations: [
-                    animations.trigger('showContent', [
-                        animations.state('void', animations.style({ 'opacity': '0' })),
-                        animations.state('*', animations.style({ 'opacity': '1' })),
-                        animations.transition('void => *', animations.animate('200ms 100ms ease-in-out')),
-                    ])
-                ],
-                styles: [".info-navigation{margin:30px 0}.info-navigation .navigator:not(:last-child){margin-right:30px}.navigator{font-size:15px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.navigator.selected{color:#2b60a7}"]
-            })
-        ], ProductInfoComponent);
-        return ProductInfoComponent;
-    }());
-
-    var ProductModuleService = /** @class */ (function () {
-        function ProductModuleService(_iOneConnectorService) {
-            this._iOneConnectorService = _iOneConnectorService;
-            this._superArticles = new Map();
-        }
-        ProductModuleService.prototype.getArticle = function (id) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._getArticle(id)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
-                });
-            });
-        };
-        ProductModuleService.prototype._getArticle = function (id) {
-            return __awaiter(this, void 0, void 0, function () {
-                var mainArticle;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!this._superArticles.has(id)) return [3 /*break*/, 1];
-                            return [2 /*return*/, this._superArticles.get(id)];
-                        case 1: return [4 /*yield*/, this._iOneConnectorService.getSuperArticle(id)];
-                        case 2:
-                            mainArticle = _a.sent();
-                            this._superArticles.set(id, mainArticle);
-                            return [2 /*return*/, mainArticle];
-                    }
-                });
-            });
-        };
-        ProductModuleService.ctorParameters = function () { return [
-            { type: ProductConnectorService }
-        ]; };
-        ProductModuleService.ɵprov = core.ɵɵdefineInjectable({ factory: function ProductModuleService_Factory() { return new ProductModuleService(core.ɵɵinject(ProductConnectorService)); }, token: ProductModuleService, providedIn: "root" });
-        ProductModuleService = __decorate([
-            core.Injectable({
-                providedIn: 'root'
+                selector: 'app-product-description',
+                template: "<div class=\"pd-title-wrapper\">\n  <span class=\"pd-description\" [textContent]=\"article?.descriptionRetail\" *ngIf=\"article?.descriptionRetail\"></span>\n  <span class=\"pd-sku\" [textContent]=\"article?.articleNr\" *ngIf=\"article?.articleNr\"></span>\n</div>\n",
+                styles: [":host{display:block}.pd-title-wrapper{margin:20px 0 0}.pd-description{color:#22313c;font-size:25px;font-weight:700;width:100%;display:block}.pd-sku{color:#5b6875;font-size:16px}@media screen and (max-width:650px){.pd-description{font-size:21px}.pd-sku{font-size:13px}}"]
             })
-        ], ProductModuleService);
-        return ProductModuleService;
+        ], ProductDescriptionComponent);
+        return ProductDescriptionComponent;
     }());
 
     var BitUtils = /** @class */ (function () {
@@ -1664,416 +1848,151 @@
         return BitUtils;
     }());
 
-    var ProductAdditionalInfoComponent = /** @class */ (function () {
-        function ProductAdditionalInfoComponent(_sanitizer, _moduleService, _changeDetector) {
-            this._sanitizer = _sanitizer;
-            this._moduleService = _moduleService;
-            this._changeDetector = _changeDetector;
-            this.showLabel = false;
-            this.textParts = [];
+    var ProductAdditionalDescriptionComponent = /** @class */ (function () {
+        function ProductAdditionalDescriptionComponent(_appEventService) {
+            this._appEventService = _appEventService;
         }
-        Object.defineProperty(ProductAdditionalInfoComponent.prototype, "article", {
+        Object.defineProperty(ProductAdditionalDescriptionComponent.prototype, "article", {
             get: function () {
                 return this._article;
             },
             set: function (value) {
-                var _this = this;
-                if (value) {
-                    this._article = value;
-                    this._buildInfo().then(function () {
-                        _this._changeDetector.detectChanges();
-                    });
+                this._article = value;
+                if (this._article) {
+                    this.description = this.article.additionalDescription;
+                    this._prepareDescription();
                 }
             },
             enumerable: true,
             configurable: true
         });
-        ProductAdditionalInfoComponent.prototype.ngOnInit = function () {
-        };
-        ProductAdditionalInfoComponent.prototype._getTextsSuperArticle = function () {
-            var _this = this;
-            return new Promise(function (resolve, reject) {
-                var texts = [];
-                if (_this.article.superArticleNr) {
-                    _this._moduleService.getArticle(_this.article.superArticleNr).then(function (mainArticle) {
-                        mainArticle.texts.forEach(function (txt) {
-                            if (BitUtils.IsFullDescription(txt.publication)) {
-                                var safeTxt = _this._sanitizer.sanitize(core.SecurityContext.HTML, txt.text);
-                                texts.push(safeTxt);
-                            }
-                        });
-                        resolve(texts);
-                    }).catch(function () {
-                        resolve([]);
-                    });
-                }
-                else {
-                    resolve(texts);
-                }
-            });
+        ProductAdditionalDescriptionComponent.prototype.ngOnInit = function () {
         };
-        ProductAdditionalInfoComponent.prototype._prepareArticleTexts = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var texts;
-                var _a;
-                var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this._getTextsSuperArticle()];
-                        case 1:
-                            texts = _b.sent();
-                            if (texts.length > 0) {
-                                (_a = this.textParts).push.apply(_a, __spread(texts));
-                            }
-                            if (this.article.texts) {
-                                this.article.texts.forEach(function (txt) {
-                                    if (BitUtils.IsFullDescription(txt.publication)) {
-                                        var safeTxt = _this._sanitizer.sanitize(core.SecurityContext.HTML, txt.text);
-                                        _this.textParts.push(safeTxt);
-                                    }
-                                });
-                            }
-                            return [2 /*return*/];
-                    }
-                });
-            });
+        ProductAdditionalDescriptionComponent.prototype.onReadMore = function () {
+            this._appEventService.onUpdateProductInfoTab.next(0);
         };
-        ProductAdditionalInfoComponent.prototype._buildInfo = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            this.textParts.length = 0;
-                            return [4 /*yield*/, this._prepareArticleTexts()];
-                        case 1:
-                            _a.sent();
-                            if (this.textParts.length === 0) {
-                                if (this.article.additionalDescription) {
-                                    this.textParts.push(this.article.additionalDescription);
-                                }
-                                else if (this.article.description) {
-                                    this.textParts.push(this.article.description);
-                                }
-                            }
-                            return [2 /*return*/];
+        ProductAdditionalDescriptionComponent.prototype._prepareDescription = function () {
+            var _this = this;
+            this.description = '';
+            if (this.article.texts && this.article.texts.length > 0) {
+                this.article.texts.forEach(function (txt) {
+                    if (BitUtils.IsShortDescription(txt.publication)) {
+                        _this.description += txt.text;
                     }
                 });
-            });
+                this.description = this.description.replace(/<[^>]*>?/gm, '');
+                if (this.description.length > 250) {
+                    this.description = this.description.substr(0, 250) + ' [..]';
+                }
+            }
         };
-        ProductAdditionalInfoComponent.ctorParameters = function () { return [
-            { type: platformBrowser.DomSanitizer },
-            { type: ProductModuleService },
-            { type: core.ChangeDetectorRef }
+        ProductAdditionalDescriptionComponent.ctorParameters = function () { return [
+            { type: ProductEventService }
         ]; };
         __decorate([
             core.Input()
-        ], ProductAdditionalInfoComponent.prototype, "article", null);
-        __decorate([
-            core.Input()
-        ], ProductAdditionalInfoComponent.prototype, "showLabel", void 0);
-        ProductAdditionalInfoComponent = __decorate([
+        ], ProductAdditionalDescriptionComponent.prototype, "article", null);
+        ProductAdditionalDescriptionComponent = __decorate([
             core.Component({
-                selector: 'app-product-additional-info',
-                template: "<h3 *ngIf=\"showLabel\" [textContent]=\"'ADDITIONAL_DATA' | localize\"></h3>\n<ng-container *ngIf=\"textParts && textParts.length > 0\">\n  <div class=\"additional-info-parts\" *ngFor=\"let text of textParts\" [innerHTML]=\"text\"></div>\n</ng-container>\n",
-                styles: [":host{display:block}:host .additional-info-parts{margin-bottom:20px;line-height:190%;color:#22313c;font-size:13px}:host ::ng-deep p{line-height:190%;margin:15px 0}:host ::ng-deep font{font-family:iOneMontserrat}:host .additional-info-parts>:first-child{margin-top:0}:host .additional-info-parts>:last-child{margin-bottom:0}"]
+                selector: 'app-product-additional-description',
+                template: "<ng-container *ngIf=\"description !== ''\">\n  <div class=\"pd-additional-description\">\n    <p [innerHTML]=\"description\"></p>\n    <button class=\"pd-read-more-btn\" [textContent]=\"'READ_MORE' | localize\" (click)=\"onReadMore()\"></button>\n  </div>\n</ng-container>\n",
+                styles: [":host{display:block;padding-top:0!important}:host :focus{outline:0!important}:host .pd-additional-description{line-height:190%;color:#22313c;font-size:13px}:host .pd-read-more-btn{color:#2b60a7;border:none;background:0 0;cursor:pointer;text-decoration:underline;font-family:iOneMontserrat}:host .pd-read-more-btn:hover{color:#74b77f}@media screen and (max-width:650px){:host .pd-additional-description{font-size:12px}}"]
             })
-        ], ProductAdditionalInfoComponent);
-        return ProductAdditionalInfoComponent;
+        ], ProductAdditionalDescriptionComponent);
+        return ProductAdditionalDescriptionComponent;
     }());
 
-    var propertyMap = new Map([
-        ['articleNr', 'ARTICLE_NUMBER'],
-        ['catExtra', 'CATEGORY'],
-        ['catType', 'CATEGORY_TYPE'],
-        ['description', 'DESCRIPTION'],
-        ['material', 'MATERIAL'],
-        ['title', 'TITLE'],
-        ['turnOverGroup', 'TURNOVERGROUP'],
-        ['height', 'HEIGHT'],
-        ['width', 'WIDTH']
-    ]);
-    var ProductPropertiesComponent = /** @class */ (function () {
-        function ProductPropertiesComponent() {
-            this.showLabel = false;
-            this.properties = [];
+    var ProductPriceComponent = /** @class */ (function () {
+        function ProductPriceComponent(_changeDetector) {
+            this._changeDetector = _changeDetector;
+            this.showFromPrice = false;
+            this._configurable = false;
         }
-        Object.defineProperty(ProductPropertiesComponent.prototype, "article", {
+        Object.defineProperty(ProductPriceComponent.prototype, "pricing", {
             get: function () {
-                return this._article;
+                return this._pricing;
             },
             set: function (value) {
-                this._article = value;
-                this._prepareProperties();
+                this._pricing = value;
+                this._setPrices();
             },
             enumerable: true,
             configurable: true
         });
-        ProductPropertiesComponent.prototype.ngOnInit = function () {
+        Object.defineProperty(ProductPriceComponent.prototype, "configurable", {
+            set: function (value) {
+                this._configurable = value;
+                this._setPrices();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ProductPriceComponent.prototype.ngOnInit = function () {
         };
-        ProductPropertiesComponent.prototype._prepareProperties = function () {
-            var _this = this;
-            this.properties.length = 0;
-            if (!this._article) {
-                return;
-            }
-            propertyMap.forEach(function (value, key) {
-                if (_this.article.hasOwnProperty(key)) {
-                    _this.properties.push({ key: value, value: _this.article[key] });
+        ProductPriceComponent.prototype._setPrices = function () {
+            if (this._pricing) {
+                this.valutaSign = this._getSign(this._pricing.retailCurrency);
+                if (this._configurable) {
+                    this.fromPrice = this._pricing.retailBasePrice ? this._pricing.retailBasePrice : this._pricing.priceBaseline;
+                    this.fromLabel = this._pricing.retailBasePrice ? 'PRICE' : 'FROM';
+                    this.toPrice = undefined;
                 }
-            });
+                else {
+                    this.fromPrice = this._pricing.retailSuggestedPrice ? this._pricing.retailSuggestedPrice : this._pricing.retailBasePrice;
+                    this.fromLabel = this._pricing.retailSuggestedPrice ? 'Was' : 'PRICE';
+                    this.toPrice = this._pricing.retailSuggestedPrice ? this._pricing.retailBasePrice : undefined;
+                    this.toLabel = this._pricing.retailSuggestedPrice ? 'IS_NOW' : '';
+                }
+                this._changeDetector.detectChanges();
+            }
+        };
+        ProductPriceComponent.prototype._getSign = function (currency) {
+            switch (currency) {
+                case 'EUR':
+                    return '€';
+                default:
+                    return '€';
+            }
         };
+        ProductPriceComponent.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef }
+        ]; };
         __decorate([
             core.Input()
-        ], ProductPropertiesComponent.prototype, "article", null);
+        ], ProductPriceComponent.prototype, "pricing", null);
         __decorate([
             core.Input()
-        ], ProductPropertiesComponent.prototype, "showLabel", void 0);
-        ProductPropertiesComponent = __decorate([
+        ], ProductPriceComponent.prototype, "configurable", null);
+        ProductPriceComponent = __decorate([
             core.Component({
-                selector: 'app-product-properties',
-                template: "<div class=\"article-properties-wrapper\">\n  <h3 *ngIf=\"showLabel\" [textContent]=\"'PROPERTIES' | localize\"></h3>\n  <ng-container *ngFor=\"let property of properties\">\n    <div class=\"article-property\">\n      <div class=\"article-property-key\" [textContent]=\"property.key | localize\"></div>\n      <div class=\"article-property-value\" [textContent]=\"property.value\"></div>\n    </div>\n  </ng-container>\n</div>\n",
-                styles: [":host{display:block}.article-properties-wrapper{display:flex;flex-direction:column}.article-property{display:flex;flex-direction:row;border-bottom:1px solid #f6f5f4;padding:11px 0;font-size:13px}.article-property:first-child{border-top:1px solid #f6f5f4}.article-property-key{flex-basis:200px;flex-shrink:0;color:#5b6875}@media screen and (max-width:450px){.article-property-key{flex-basis:130px}}"]
-            })
-        ], ProductPropertiesComponent);
-        return ProductPropertiesComponent;
-    }());
-
-    var LocalizePipe = /** @class */ (function () {
-        function LocalizePipe(_dictionaryService) {
-            this._dictionaryService = _dictionaryService;
-        }
-        LocalizePipe.prototype.transform = function (value, upperCaseFirst, replace) {
-            var _a;
-            if (upperCaseFirst === void 0) { upperCaseFirst = true; }
-            if (replace === void 0) { replace = []; }
-            if (!value) {
-                return '';
-            }
-            replace = replace ? replace : [];
-            if (!Array.isArray(replace)) {
-                replace = [replace];
-            }
-            return (_a = this._dictionaryService).get.apply(_a, __spread([value, upperCaseFirst], replace));
-        };
-        LocalizePipe.ctorParameters = function () { return [
-            { type: DictionaryService }
-        ]; };
-        LocalizePipe = __decorate([
-            core.Pipe({
-                name: 'localize'
+                selector: 'app-product-price',
+                template: "<div *ngIf=\"toPrice\">\n  <div class=\"price-wrapper\" *ngIf=\"fromPrice > toPrice\">\n    <div class=\"from-price-label\" [textContent]=\"fromLabel | localize\"></div>\n    <div class=\"from-price\" [textContent]=\"fromPrice | priceDisplay\"></div>\n  </div>\n  <div class=\"price-wrapper\">\n    <div class=\"to-price-label\" [textContent]=\"toLabel | localize\"></div>\n    <div class=\"to-price\" [textContent]=\"toPrice | priceDisplay\"></div>\n  </div>\n</div>\n",
+                styles: [":host{display:flex;flex-direction:column}.price-wrapper{width:100%;font-size:15px;margin:0 0 5px;display:inline-block}.price-wrapper:last-child{margin:0}.from-price-label,.to-price-label{color:#5b6875;display:none}.from-price{font-size:16px;font-weight:700;text-decoration:line-through;color:#5b6875}.to-price{font-size:25px;font-weight:700;color:#74b77f}@media screen and (max-width:650px){.from-price{font-size:13px}.to-price{font-size:21px}}"]
             })
-            // A pipe for localizing string values in view templates.
-        ], LocalizePipe);
-        return LocalizePipe;
+        ], ProductPriceComponent);
+        return ProductPriceComponent;
     }());
 
-    var ProductDeliveryComponent = /** @class */ (function () {
-        function ProductDeliveryComponent(_localizePipe, _iOne, _iconCache) {
-            this._localizePipe = _localizePipe;
-            this._iOne = _iOne;
-            this._iconCache = _iconCache;
+    var ProductAddtocartComponent = /** @class */ (function () {
+        function ProductAddtocartComponent(iconCache, _ioneControllerService, _appEventService, _settingsService) {
+            this.iconCache = iconCache;
+            this._ioneControllerService = _ioneControllerService;
+            this._appEventService = _appEventService;
+            this._settingsService = _settingsService;
             this.icon = IconEnum;
-            this.iconData = this._iconCache.getIcon(this.icon.Truck);
+            this.configurable = false;
+            this.configuring = false;
+            this.fullscreen = false;
+            this.startConfiguration = new core.EventEmitter();
+            this.addToCartClick = new core.EventEmitter();
+            this.addToQuoteClick = new core.EventEmitter();
+            this.showQuoteButton = false;
+            this._quantity = 1;
         }
-        Object.defineProperty(ProductDeliveryComponent.prototype, "stockAndDelivery", {
-            set: function (value) {
-                if (value) {
-                    this.deliveryDescription = value.deliveryDescription;
-                    if (this.deliveryDescription.length > 0 && this.deliveryDescription[0] === ' ') {
-                        this.deliveryDescription = this._localizePipe.transform('ASK_FOR_INFORMATION');
-                    }
-                }
-            },
-            enumerable: true,
-            configurable: true
-        });
-        ProductDeliveryComponent.prototype.ngOnInit = function () {
-        };
-        ProductDeliveryComponent.ctorParameters = function () { return [
-            { type: LocalizePipe },
-            { type: ProductConnectorService },
-            { type: IconCacheService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], ProductDeliveryComponent.prototype, "stockAndDelivery", null);
-        ProductDeliveryComponent = __decorate([
-            core.Component({
-                selector: 'app-product-delivery',
-                template: "<!--<app-header [label]=\"'DELIVERY_TIME_PERIOD' | localize\"></app-header>-->\n<div class=\"product-delivery-wrapper\">\n  <co-icon class=\"delivery-icon\" [iconData]=\"iconData\"></co-icon>\n  <div class=\"product-delivery-fields\">\n    <div class=\"pp-default-label\" [textContent]=\"'DELIVERY_TIME_PERIOD' | localize\"></div>\n    <div class=\"pp-default-description\" [textContent]=\"deliveryDescription | date:'dd MMMM yyyy'\"></div>\n  </div>\n</div>\n",
-                providers: [LocalizePipe],
-                styles: [":host{display:block}.product-delivery-wrapper{display:flex;flex-direction:row;align-items:center;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:40px;height:37px}.product-delivery-wrapper .product-delivery-fields{display:flex;flex-direction:column}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:14px;margin:0}@media screen and (max-width:400px){.product-delivery-wrapper{padding:15px 0 15px 10px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:32px;height:28px}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:13px}}"]
-            })
-        ], ProductDeliveryComponent);
-        return ProductDeliveryComponent;
-    }());
-
-    var ProductStockComponent = /** @class */ (function () {
-        function ProductStockComponent(_iOne, _iconCache) {
-            this._iOne = _iOne;
-            this._iconCache = _iconCache;
-            this.icon = IconEnum;
-            this.iconData = this._iconCache.getIcon(this.icon.Warehouse);
-        }
-        Object.defineProperty(ProductStockComponent.prototype, "stockAndDelivery", {
-            set: function (value) {
-                if (value) {
-                    this.numberInStock = value.stock;
-                }
-            },
-            enumerable: true,
-            configurable: true
-        });
-        ProductStockComponent.prototype.ngOnInit = function () {
-        };
-        ProductStockComponent.ctorParameters = function () { return [
-            { type: ProductConnectorService },
-            { type: IconCacheService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], ProductStockComponent.prototype, "stockAndDelivery", null);
-        ProductStockComponent = __decorate([
-            core.Component({
-                selector: 'app-product-stock',
-                template: "<!--<app-header [label]=\"'STOCK' | localize\"></app-header>-->\n<!--<co-level-indicator [model]=\"'medium'\"></co-level-indicator>-->\n<div class=\"product-stock-wrapper\">\n  <co-icon class=\"stock-icon\" [iconData]=\"iconData\"></co-icon>\n  <div class=\"product-stock-fields\">\n    <div class=\"pp-default-label in-stock\" [textContent]=\"'PRODUCT_IN_STOCK' | localize\" *ngIf=\"numberInStock > 0\"></div>\n    <div class=\"pp-default-label not-in-stock\" [textContent]=\"'PRODUCT_NOT_IN_STOCK' | localize\" *ngIf=\"!(numberInStock > 0)\"></div>\n  </div>\n</div>\n",
-                styles: [":host{display:block}.product-stock-wrapper{display:flex;flex-direction:row;align-items:center;border-top:1px solid #f6f5f4;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:40px;height:37px}.product-stock-wrapper .product-stock-fields{display:flex;flex-direction:row}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:14px;margin:0}.product-stock-wrapper .product-stock-fields .pp-default-label:after{content:\"\";width:10px;height:10px;border-radius:10px;background:#74b77f;display:inline-block;margin:0 0 0 15px}.product-stock-wrapper .product-stock-fields .pp-default-label.not-in-stock:after{background:#f15152}@media screen and (max-width:400px){.product-stock-wrapper{padding:15px 0 15px 10px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:32px;height:28px}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:13px}}"]
-            })
-        ], ProductStockComponent);
-        return ProductStockComponent;
-    }());
-
-    var ProductSymbolsComponent = /** @class */ (function () {
-        function ProductSymbolsComponent() {
-            this.symbolStrings = [];
-        }
-        Object.defineProperty(ProductSymbolsComponent.prototype, "symbols", {
-            get: function () {
-                return this._symbols;
-            },
-            set: function (value) {
-                this._symbols = value;
-                if (this._symbols && this._symbols.hasOwnProperty('fontCode')) {
-                    this._className = this._symbols['fontCode'] === 'VLOER' ? 'floor' : (this._className === 'WAS' ? 'ginetex' : '');
-                }
-                if (this._symbols && this._symbols.hasOwnProperty('symbolString')) {
-                    for (var i = 0; i < this._symbols['symbolString'].length; i++) {
-                        this.symbolStrings.push(this._symbols['symbolString'][i]);
-                    }
-                }
-            },
-            enumerable: true,
-            configurable: true
-        });
-        ProductSymbolsComponent.prototype.ngOnInit = function () {
-        };
-        __decorate([
-            core.Input()
-        ], ProductSymbolsComponent.prototype, "symbols", null);
-        __decorate([
-            core.HostBinding('class')
-        ], ProductSymbolsComponent.prototype, "_className", void 0);
-        ProductSymbolsComponent = __decorate([
-            core.Component({
-                selector: 'app-product-symbols',
-                template: "<div *ngIf=\"symbols && symbols.length > 0\">\n  <app-header [label]=\"'SYMBOLS' | localize\" [amount]=\"symbols?.length\"></app-header>\n  <co-scroll-container>\n    <co-tile small noImagePlaceholder *ngFor=\"let symbol of symbolStrings\">\n      <ng-container tile-over-image>\n        <div class=\"symbol\" [textContent]=\"symbol\"></div>\n      </ng-container>\n      <ng-container tile-extra-bottom-content>\n        <div class=\"symbol-name\" [textContent]=\"'Wat moet hier?'\"></div>\n      </ng-container>\n    </co-tile>\n  </co-scroll-container>\n</div>\n",
-                styles: [":host{display:block}:host.floor .symbol{font-family:iOneFloorsymbols}:host.ginetex .symbol{font-family:iOneGinetexsymbols}.symbol{font-size:100px}"]
-            })
-        ], ProductSymbolsComponent);
-        return ProductSymbolsComponent;
-    }());
-
-    var ProductPriceComponent = /** @class */ (function () {
-        function ProductPriceComponent(_changeDetector) {
-            this._changeDetector = _changeDetector;
-            this.showFromPrice = false;
-            this._configurable = false;
-        }
-        Object.defineProperty(ProductPriceComponent.prototype, "pricing", {
-            get: function () {
-                return this._pricing;
-            },
-            set: function (value) {
-                this._pricing = value;
-                this._setPrices();
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(ProductPriceComponent.prototype, "configurable", {
-            set: function (value) {
-                this._configurable = value;
-                this._setPrices();
-            },
-            enumerable: true,
-            configurable: true
-        });
-        ProductPriceComponent.prototype.ngOnInit = function () {
-        };
-        ProductPriceComponent.prototype._setPrices = function () {
-            if (this._pricing) {
-                this.valutaSign = this._getSign(this._pricing.retailCurrency);
-                if (this._configurable) {
-                    this.fromPrice = this._pricing.retailBasePrice ? this._pricing.retailBasePrice : this._pricing.priceBaseline;
-                    this.fromLabel = this._pricing.retailBasePrice ? 'PRICE' : 'FROM';
-                    this.toPrice = undefined;
-                }
-                else {
-                    this.fromPrice = this._pricing.retailSuggestedPrice ? this._pricing.retailSuggestedPrice : this._pricing.retailBasePrice;
-                    this.fromLabel = this._pricing.retailSuggestedPrice ? 'Was' : 'PRICE';
-                    this.toPrice = this._pricing.retailSuggestedPrice ? this._pricing.retailBasePrice : undefined;
-                    this.toLabel = this._pricing.retailSuggestedPrice ? 'IS_NOW' : '';
-                }
-                this._changeDetector.detectChanges();
-            }
-        };
-        ProductPriceComponent.prototype._getSign = function (currency) {
-            switch (currency) {
-                case 'EUR':
-                    return '€';
-                default:
-                    return '€';
-            }
-        };
-        ProductPriceComponent.ctorParameters = function () { return [
-            { type: core.ChangeDetectorRef }
-        ]; };
-        __decorate([
-            core.Input()
-        ], ProductPriceComponent.prototype, "pricing", null);
-        __decorate([
-            core.Input()
-        ], ProductPriceComponent.prototype, "configurable", null);
-        ProductPriceComponent = __decorate([
-            core.Component({
-                selector: 'app-product-price',
-                template: "<div *ngIf=\"toPrice\">\n  <div class=\"price-wrapper\" *ngIf=\"fromPrice > toPrice\">\n    <div class=\"from-price-label\" [textContent]=\"fromLabel | localize\"></div>\n    <div class=\"from-price\" [textContent]=\"fromPrice | priceDisplay\"></div>\n  </div>\n  <div class=\"price-wrapper\">\n    <div class=\"to-price-label\" [textContent]=\"toLabel | localize\"></div>\n    <div class=\"to-price\" [textContent]=\"toPrice | priceDisplay\"></div>\n  </div>\n</div>\n",
-                styles: [":host{display:flex;flex-direction:column}.price-wrapper{width:100%;font-size:15px;margin:0 0 5px;display:inline-block}.price-wrapper:last-child{margin:0}.from-price-label,.to-price-label{color:#5b6875;display:none}.from-price{font-size:16px;font-weight:700;text-decoration:line-through;color:#5b6875}.to-price{font-size:25px;font-weight:700;color:#74b77f}@media screen and (max-width:650px){.from-price{font-size:13px}.to-price{font-size:21px}}"]
-            })
-        ], ProductPriceComponent);
-        return ProductPriceComponent;
-    }());
-
-    var ProductAddtocartComponent = /** @class */ (function () {
-        function ProductAddtocartComponent(iconCache, _ioneControllerService, _appEventService, _settingsService) {
-            this.iconCache = iconCache;
-            this._ioneControllerService = _ioneControllerService;
-            this._appEventService = _appEventService;
-            this._settingsService = _settingsService;
-            this.icon = IconEnum;
-            this.configurable = false;
-            this.configuring = false;
-            this.fullscreen = false;
-            this.startConfiguration = new core.EventEmitter();
-            this.addToCartClick = new core.EventEmitter();
-            this.addToQuoteClick = new core.EventEmitter();
-            this.showQuoteButton = false;
-            this._quantity = 1;
-        }
-        Object.defineProperty(ProductAddtocartComponent.prototype, "quantity", {
-            get: function () {
-                return this._quantity;
-            },
+        Object.defineProperty(ProductAddtocartComponent.prototype, "quantity", {
+            get: function () {
+                return this._quantity;
+            },
             set: function (value) {
                 this._quantity = Math.max(1, value);
             },
@@ -2128,7 +2047,7 @@
                             configuratorStatistics.sessionId = this._settingsService.settings.session ? this._settingsService.settings.session.sessionId : 'unknown';
                             configuratorStatistics.webHost = window.location.host;
                             configuratorStatistics.bundleHost = window.location.host;
-                            return [4 /*yield*/, this._ioneControllerService.getJsonArticleFlatTree(article.article.goodId, article.article.goodType, article.quantity, true, undefined, configuratorStatistics)];
+                            return [4 /*yield*/, this._ioneControllerService.getJsonArticleFlatTree(article.article.goodId, article.article.goodType, article.quantity, true, configuratorStatistics)];
                         case 1: return [2 /*return*/, _a.sent()];
                     }
                 });
@@ -2178,374 +2097,671 @@
         return ProductAddtocartComponent;
     }());
 
-    var ProductSelectorTypeComponent = /** @class */ (function () {
-        function ProductSelectorTypeComponent(_iconCache, _changeDetector) {
-            this._iconCache = _iconCache;
-            this._changeDetector = _changeDetector;
-            this.type = SelectorType;
-            this.icons = IconEnum;
-            this.onIconClick = new core.EventEmitter();
-            this.currentTypeChange = new core.EventEmitter();
-            this.twoDIcon = this._iconCache.getIcon(this.icons.TwoD);
-            this.threeDIcon = this._iconCache.getIcon(this.icons.ThreeD);
+    var ProductRelatedComponent = /** @class */ (function () {
+        function ProductRelatedComponent(_iOne, _appEventService) {
+            this._iOne = _iOne;
+            this._appEventService = _appEventService;
+            this.isSmallModus = true;
+            this._articles = [];
         }
-        ProductSelectorTypeComponent.prototype.ngOnInit = function () {
-        };
-        ProductSelectorTypeComponent.prototype.handleIconClick = function (type) {
-            this.currentType = type;
-            this.currentTypeChange.next(this.currentType);
-            this.onIconClick.next(this.currentType);
-            this._changeDetector.detectChanges();
+        Object.defineProperty(ProductRelatedComponent.prototype, "articles", {
+            get: function () {
+                return this._articles;
+            },
+            set: function (value) {
+                var _this = this;
+                if (value) {
+                    if (this.refType && this.refType !== undefined) {
+                        if (value.length > 0) {
+                            value.forEach(function (x) {
+                                if (x.refType === _this.refType) {
+                                    _this._articles.push(x);
+                                }
+                            });
+                        }
+                    }
+                    else {
+                        this._articles = value;
+                    }
+                    this._loadImages();
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ProductRelatedComponent.prototype.handleContentClick = function (article) {
+            this._appEventService.onAlternativeClick.next(article);
         };
-        ProductSelectorTypeComponent.ctorParameters = function () { return [
-            { type: IconCacheService },
-            { type: core.ChangeDetectorRef }
-        ]; };
-        __decorate([
-            core.Input()
-        ], ProductSelectorTypeComponent.prototype, "show2D", void 0);
-        __decorate([
-            core.Input()
-        ], ProductSelectorTypeComponent.prototype, "show3D", void 0);
+        ProductRelatedComponent.prototype._loadImages = function () {
+            var _this = this;
+            this._articles.forEach(function (a) {
+                if (!a.image.documentBody) {
+                    _this._iOne.getDocumentContent(a.image.documentId).then(function (content) {
+                        if (content) {
+                            a.image.documentBody = content.documentContent;
+                        }
+                    });
+                }
+            });
+        };
+        ProductRelatedComponent.ctorParameters = function () { return [
+            { type: ProductConnectorService },
+            { type: ProductEventService }
+        ]; };
         __decorate([
             core.Input()
-        ], ProductSelectorTypeComponent.prototype, "currentType", void 0);
+        ], ProductRelatedComponent.prototype, "refType", void 0);
         __decorate([
-            core.Output()
-        ], ProductSelectorTypeComponent.prototype, "onIconClick", void 0);
+            core.Input()
+        ], ProductRelatedComponent.prototype, "label", void 0);
         __decorate([
-            core.Output()
-        ], ProductSelectorTypeComponent.prototype, "currentTypeChange", void 0);
-        ProductSelectorTypeComponent = __decorate([
+            core.Input()
+        ], ProductRelatedComponent.prototype, "isSmallModus", void 0);
+        __decorate([
+            core.Input()
+        ], ProductRelatedComponent.prototype, "articles", null);
+        ProductRelatedComponent = __decorate([
             core.Component({
-                selector: 'app-product-selector-type',
-                template: "<div *ngIf=\"show2D || show3D\" class=\"show-in\" [textContent]=\"'SHOW_IN' | localize\"></div>\n<co-icon *ngIf=\"show2D\" class=\"selector-type-icon\"\n         [class.active]=\"currentType === type.TwoD\"\n         [iconData]=\"twoDIcon\"\n         (click)=\"handleIconClick(type.TwoD)\"\n></co-icon>\n<co-icon *ngIf=\"show3D\" class=\"selector-type-icon\"\n         [class.active]=\"currentType === type.ThreeD\"\n         [iconData]=\"threeDIcon\"\n         (click)=\"handleIconClick(type.ThreeD)\"\n></co-icon>\n",
-                styles: [":host{display:flex;flex-direction:row;align-items:center}:host .show-in{display:none}:host>:not(:last-child){margin-right:10px}::ng-deep co-icon.selector-type-icon{box-shadow:inset 0 0 0 1px #22313c;border-radius:50%;background:0 0;height:34px;width:34px;cursor:pointer}::ng-deep co-icon.selector-type-icon.active{box-shadow:none;background:#74b77f;transition:.2s ease-in-out}::ng-deep co-icon.selector-type-icon.active [fill]{fill:#fff}"]
+                selector: 'app-product-related',
+                template: "<div *ngIf=\"articles && articles.length > 0\">\n  <app-header [label]=\"label\" [amount]=\"articles?.length\" *ngIf=\"label\"></app-header>\n  <co-scroll-container>\n    <div class=\"article-wrapper\" *ngFor=\"let article of articles\">\n      <co-article-tile\n               [imageData]=\"article.image.documentBodyAsDataUri\"\n               [description]=\"article.description\"\n               [price]=\"article.price\"\n               [level]=\"article.stockStatus\"\n               [isSmallModus]=\"isSmallModus\"\n               [hasConfigureButton]=\"article.goodType === 'B'\"\n               (contentClick)=\"handleContentClick(article)\"\n      ></co-article-tile>\n    </div>\n  </co-scroll-container>\n</div>\n",
+                styles: [":host{display:block}.article-wrapper{display:flex;flex-direction:row}.article-wrapper ::ng-deep co-tile.small{min-width:189px;max-width:189px;height:100%}.article-wrapper ::ng-deep co-tile.small:hover{box-shadow:none;cursor:pointer}.article-wrapper ::ng-deep co-tile.small:hover .tile-bottom .left-buttons{margin:0!important}.article-wrapper ::ng-deep co-tile.small .tile-wrapper{outline:0!important;padding-bottom:0;overflow:hidden}.article-wrapper ::ng-deep co-tile.small .tile-wrapper div.image{height:100px}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-bottom .left-buttons{position:absolute;top:0;right:0;margin:0 -32px 0 0;align-items:flex-end;transition:.2s ease-in-out}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-bottom .left-buttons ::ng-deep co-button.card-button.mini{width:30px;height:30px;transform:none;border-radius:4px;margin:0 0 5px}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-bottom .left-buttons ::ng-deep co-button.card-button.mini ::ng-deep co-icon{width:30px;height:30px}.article-wrapper ::ng-deep co-tile.small .tile-extra-bottom{outline:0!important;background:0 0!important}.article-wrapper ::ng-deep co-tile.small .tile-extra-bottom .price{color:#74b77f;margin:5px 0 0;font-weight:400;font-size:12px}"]
             })
-        ], ProductSelectorTypeComponent);
-        return ProductSelectorTypeComponent;
+        ], ProductRelatedComponent);
+        return ProductRelatedComponent;
     }());
 
-    var IoneProductComponent = /** @class */ (function () {
-        function IoneProductComponent(_dictionary, _jsonUtils, _ione, _changeDetector, _appEventService, _settingsService) {
-            // this.sku = 'CF-HILL';
-            // this.sku = 'CF-ALMADA';
-            // this.sku = 'CF-39904ANT';
-            // this.sku = 'CF-22346001';
-            // this.sku = '104';
-            // this.sku = '1000561986';
-            var _this = this;
-            this._dictionary = _dictionary;
-            this._jsonUtils = _jsonUtils;
-            this._ione = _ione;
-            this._changeDetector = _changeDetector;
-            this._appEventService = _appEventService;
-            this._settingsService = _settingsService;
-            this.onAddToCart = new core.EventEmitter();
-            this.forceRenderImage = new core.EventEmitter();
-            this.onAlternativeClick = new core.EventEmitter();
-            this.onArticleInfoReceived = new core.EventEmitter();
-            this.onArticleReceived = new core.EventEmitter();
-            this.onSelectionsReceived = new core.EventEmitter();
-            this.onAddToQuote = new core.EventEmitter();
-            this.upAndLoaded = false;
-            this._subs = [];
-            this._subs.push(this._settingsService.settingsLoaded.subscribe(function (loaded) { return _this._handleSettingsLoaded(loaded); }), 
-            // this._dictionary.dictionaryLoaded.subscribe(d => this.upAndLoaded = true),
-            this._appEventService.onAddToCart.subscribe(function (json) { return _this.onAddToCart.emit(json); }), this._appEventService.onAddToQuote.subscribe(function (json) { return _this.onAddToQuote.emit(json); }), this._appEventService.onAlternativeClick.subscribe(function (article) { return _this.onAlternativeClick.emit(article); }), this._appEventService.onArticleInfoReceived.subscribe(function (info) { return _this._handleAnswerInfoReceived(info); }), this._appEventService.onArticleReceived.subscribe(function (article) { return _this.onArticleReceived.emit(article); }), this._appEventService.onSelectionsReceived.subscribe(function (selections) { return _this.onSelectionsReceived.emit(selections); }));
+    var ProductStockComponent = /** @class */ (function () {
+        function ProductStockComponent(_iOne, _iconCache) {
+            this._iOne = _iOne;
+            this._iconCache = _iconCache;
+            this.icon = IconEnum;
+            this.iconData = this._iconCache.getIcon(this.icon.Warehouse);
         }
-        Object.defineProperty(IoneProductComponent.prototype, "settings", {
-            get: function () {
-                return this._settings;
+        Object.defineProperty(ProductStockComponent.prototype, "stockAndDelivery", {
+            set: function (value) {
+                if (value) {
+                    this.numberInStock = value.stock;
+                }
             },
+            enumerable: true,
+            configurable: true
+        });
+        ProductStockComponent.prototype.ngOnInit = function () {
+        };
+        ProductStockComponent.ctorParameters = function () { return [
+            { type: ProductConnectorService },
+            { type: IconCacheService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], ProductStockComponent.prototype, "stockAndDelivery", null);
+        ProductStockComponent = __decorate([
+            core.Component({
+                selector: 'app-product-stock',
+                template: "<!--<app-header [label]=\"'STOCK' | localize\"></app-header>-->\n<!--<co-level-indicator [model]=\"'medium'\"></co-level-indicator>-->\n<div class=\"product-stock-wrapper\">\n  <co-icon class=\"stock-icon\" [iconData]=\"iconData\"></co-icon>\n  <div class=\"product-stock-fields\">\n    <div class=\"pp-default-label in-stock\" [textContent]=\"'PRODUCT_IN_STOCK' | localize\" *ngIf=\"numberInStock > 0\"></div>\n    <div class=\"pp-default-label not-in-stock\" [textContent]=\"'PRODUCT_NOT_IN_STOCK' | localize\" *ngIf=\"!(numberInStock > 0)\"></div>\n  </div>\n</div>\n",
+                styles: [":host{display:block}.product-stock-wrapper{display:flex;flex-direction:row;align-items:center;border-top:1px solid #f6f5f4;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:40px;height:37px}.product-stock-wrapper .product-stock-fields{display:flex;flex-direction:row}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:14px;margin:0}.product-stock-wrapper .product-stock-fields .pp-default-label:after{content:\"\";width:10px;height:10px;border-radius:10px;background:#74b77f;display:inline-block;margin:0 0 0 15px}.product-stock-wrapper .product-stock-fields .pp-default-label.not-in-stock:after{background:#f15152}@media screen and (max-width:400px){.product-stock-wrapper{padding:15px 0 15px 10px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:32px;height:28px}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:13px}}"]
+            })
+        ], ProductStockComponent);
+        return ProductStockComponent;
+    }());
+
+    var LocalizePipe = /** @class */ (function () {
+        function LocalizePipe(_dictionaryService) {
+            this._dictionaryService = _dictionaryService;
+        }
+        LocalizePipe.prototype.transform = function (value, upperCaseFirst, replace) {
+            var _a;
+            if (upperCaseFirst === void 0) { upperCaseFirst = true; }
+            if (replace === void 0) { replace = []; }
+            if (!value) {
+                return '';
+            }
+            replace = replace ? replace : [];
+            if (!Array.isArray(replace)) {
+                replace = [replace];
+            }
+            return (_a = this._dictionaryService).get.apply(_a, __spread([value, upperCaseFirst], replace));
+        };
+        LocalizePipe.ctorParameters = function () { return [
+            { type: DictionaryService }
+        ]; };
+        LocalizePipe = __decorate([
+            core.Pipe({
+                name: 'localize'
+            })
+            // A pipe for localizing string values in view templates.
+        ], LocalizePipe);
+        return LocalizePipe;
+    }());
+
+    var ProductDeliveryComponent = /** @class */ (function () {
+        function ProductDeliveryComponent(_localizePipe, _iOne, _iconCache) {
+            this._localizePipe = _localizePipe;
+            this._iOne = _iOne;
+            this._iconCache = _iconCache;
+            this.icon = IconEnum;
+            this.iconData = this._iconCache.getIcon(this.icon.Truck);
+        }
+        Object.defineProperty(ProductDeliveryComponent.prototype, "stockAndDelivery", {
             set: function (value) {
                 if (value) {
-                    var settings = void 0;
-                    if (typeof value === 'string') {
-                        settings = JSON.parse(value);
-                    }
-                    else {
-                        settings = value;
+                    this.deliveryDescription = value.deliveryDescription;
+                    if (this.deliveryDescription.length > 0 && this.deliveryDescription[0] === ' ') {
+                        this.deliveryDescription = this._localizePipe.transform('ASK_FOR_INFORMATION');
                     }
-                    this._settingsService.createSettingsFromObject(settings);
-                    // this._initConnection(settings);
                 }
             },
             enumerable: true,
             configurable: true
         });
-        IoneProductComponent.prototype.ngOnChanges = function (changes) {
-            this._changeDetector.detectChanges();
+        ProductDeliveryComponent.prototype.ngOnInit = function () {
         };
-        IoneProductComponent.prototype.ngOnDestroy = function () {
+        ProductDeliveryComponent.ctorParameters = function () { return [
+            { type: LocalizePipe },
+            { type: ProductConnectorService },
+            { type: IconCacheService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], ProductDeliveryComponent.prototype, "stockAndDelivery", null);
+        ProductDeliveryComponent = __decorate([
+            core.Component({
+                selector: 'app-product-delivery',
+                template: "<!--<app-header [label]=\"'DELIVERY_TIME_PERIOD' | localize\"></app-header>-->\n<div class=\"product-delivery-wrapper\">\n  <co-icon class=\"delivery-icon\" [iconData]=\"iconData\"></co-icon>\n  <div class=\"product-delivery-fields\">\n    <div class=\"pp-default-label\" [textContent]=\"'DELIVERY_TIME_PERIOD' | localize\"></div>\n    <div class=\"pp-default-description\" [textContent]=\"deliveryDescription | date:'dd MMMM yyyy'\"></div>\n  </div>\n</div>\n",
+                styles: [":host{display:block}.product-delivery-wrapper{display:flex;flex-direction:row;align-items:center;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:40px;height:37px}.product-delivery-wrapper .product-delivery-fields{display:flex;flex-direction:column}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:14px;margin:0}@media screen and (max-width:400px){.product-delivery-wrapper{padding:15px 0 15px 10px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:32px;height:28px}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:13px}}"]
+            })
+        ], ProductDeliveryComponent);
+        return ProductDeliveryComponent;
+    }());
+
+    var ProductInfoTabsComponent = /** @class */ (function () {
+        function ProductInfoTabsComponent(_appEventService) {
+            var _this = this;
+            this._appEventService = _appEventService;
+            this.activeTabHeight = 0;
+            this.tabs = [];
+            this._subs = [];
+            this._subs.push(this._appEventService.onUpdateProductInfoTab.subscribe(function (index) {
+                _this.updateTab(index);
+                _this.tabContent.nativeElement.scrollIntoView({ behavior: 'smooth' });
+            }));
+        }
+        Object.defineProperty(ProductInfoTabsComponent.prototype, "article", {
+            set: function (value) {
+                if (value) {
+                    this.articleObject = value;
+                    this._setupTabs();
+                    this.updateTab(0);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ProductInfoTabsComponent.prototype.ngOnDestroy = function () {
             this._subs.forEach(function (s) { return s.unsubscribe(); });
         };
-        IoneProductComponent.prototype._handleSettingsLoaded = function (loaded) {
-            if (loaded) {
-                this.upAndLoaded = true;
-                this._initConnection();
-            }
+        ProductInfoTabsComponent.prototype.updateTab = function (tabIndex) {
+            this.activeTab = tabIndex;
+            this.updateHeight(tabIndex);
         };
-        IoneProductComponent.prototype._handleAnswerInfoReceived = function (info) {
-            this.onArticleInfoReceived.next(info);
+        ProductInfoTabsComponent.prototype.updateHeight = function (tabIndex) {
+            if (this.tabContent.nativeElement.children.length > 0) {
+                if (this.tabContent.nativeElement.children[tabIndex] !== undefined) {
+                    this.activeTabHeight = this.tabContent.nativeElement.children[tabIndex].offsetHeight;
+                }
+            }
         };
-        // we need to prepare the settings before we can use it for the 3d configurator bundle
-        IoneProductComponent.prototype._initConnection = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
-                return __generator(this, function (_a) {
-                    this._ione.initDefaultDevelopTestConnection();
-                    // settingsToUse.session = this._ione.connector.connector.session;
-                    setTimeout(function () {
-                        _this._changeDetector.detectChanges();
-                    });
-                    return [2 /*return*/];
-                });
-            });
+        ProductInfoTabsComponent.prototype._setupTabs = function () {
+            this.tabs.push({ title: 'DESCRIPTION' });
+            this.tabs.push({ title: 'FEATURES' });
+            if (this.articleObject.documents !== undefined && this.articleObject.documents.length > 0) {
+                this.tabs.push({ title: 'DOWNLOADS' });
+            }
+            if (this.articleObject.symbols !== undefined && this.articleObject.symbols.length > 0) {
+                this.tabs.push({ title: 'SYMBOLS' });
+            }
         };
-        IoneProductComponent.ctorParameters = function () { return [
-            { type: DictionaryService },
-            { type: JsonUtilsService },
-            { type: ProductConnectorService },
-            { type: core.ChangeDetectorRef },
-            { type: ProductEventService },
-            { type: ProductSettingsService }
+        ProductInfoTabsComponent.ctorParameters = function () { return [
+            { type: ProductEventService }
         ]; };
         __decorate([
-            core.Input()
-        ], IoneProductComponent.prototype, "sku", void 0);
+            core.ViewChild('tabContent')
+        ], ProductInfoTabsComponent.prototype, "tabContent", void 0);
         __decorate([
             core.Input()
-        ], IoneProductComponent.prototype, "settings", null);
+        ], ProductInfoTabsComponent.prototype, "article", null);
+        ProductInfoTabsComponent = __decorate([
+            core.Component({
+                selector: 'app-product-info-tabs',
+                template: "<div class=\"tab-container\">\r\n  <div class=\"tab-header\">\r\n    <button *ngFor=\"let tab of tabs; let i = index\" class=\"tab-header-button\" [class.active]=\"activeTab === i\" [textContent]=\"tab.title | localize\" (click)=\"updateTab(i)\"></button>\r\n  </div>\r\n  <div class=\"tab-content\" #tabContent [style.height.px]=\"(activeTabHeight > 0 ? activeTabHeight : '')\">\r\n    <div class=\"tab-content-item\" *ngFor=\"let tab of tabs; let i = index\" [class.active]=\"activeTab === i\">\r\n      <ng-container *ngIf=\"i === 0\">\r\n        <app-product-additional-info class=\"\" [article]=\"articleObject\" [showLabel]=\"false\"></app-product-additional-info>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"i === 1\">\r\n        <app-product-properties class=\"\" [article]=\"articleObject\" [showLabel]=\"false\"></app-product-properties>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"i === 2\">\r\n        <app-product-documents [showLabel]=\"false\" class=\"\" *ngIf=\"articleObject?.documents && articleObject?.documents.length > 0\" [documents]=\"articleObject?.documents\"></app-product-documents>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"i === 3\">\r\n        <app-product-symbols class=\"\" *ngIf=\"articleObject?.symbols && articleObject?.symbols.length > 0\" [symbols]=\"articleObject?.symbols\"></app-product-symbols>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                styles: [":focus{outline:0}:host .tab-header{border-bottom:3px solid #f6f5f4;margin:0 0 30px}:host .tab-header .tab-header-button{background:0 0;border:none;border-bottom:3px solid transparent;line-height:20px;padding:15px 20px;cursor:pointer;font-family:iOneMontserrat;color:#22313c;font-weight:700;margin:0 0 -3px;opacity:.5}:host .tab-header .tab-header-button:hover{opacity:1}:host .tab-header .tab-header-button.active{opacity:1;border-color:#74b77f}:host .tab-content{padding:0 20px 30px;margin:0 0 20px;border-bottom:2px solid #f6f5f4;transition:.2s ease-in-out;position:relative}:host .tab-content .tab-content-item{opacity:0;position:absolute;left:0;top:0;visibility:hidden;width:100%}:host .tab-content .tab-content-item.active{opacity:1;visibility:visible;position:static}@media screen and (max-width:650px){:host .tab-content{padding:0 10px 15px}}@media screen and (max-width:450px){:host .tab-header{display:flex}:host .tab-header .tab-header-button{width:100%;padding:10px;font-size:11px}}"]
+            })
+        ], ProductInfoTabsComponent);
+        return ProductInfoTabsComponent;
+    }());
+
+    var PipeModule = /** @class */ (function () {
+        function PipeModule() {
+        }
+        PipeModule = __decorate([
+            core.NgModule({
+                exports: [
+                    LocalizePipe
+                ],
+                declarations: [
+                    LocalizePipe
+                ],
+                providers: [
+                    LocalizePipe
+                ]
+            })
+        ], PipeModule);
+        return PipeModule;
+    }());
+
+    var ProductDocumentsComponent = /** @class */ (function () {
+        function ProductDocumentsComponent(iconCache) {
+            this.iconCache = iconCache;
+            this.icon = IconEnum;
+            this.showLabel = false;
+            this.documents = [];
+        }
+        ProductDocumentsComponent.ctorParameters = function () { return [
+            { type: IconCacheService }
+        ]; };
         __decorate([
-            core.Output()
-        ], IoneProductComponent.prototype, "onAddToCart", void 0);
+            core.Input()
+        ], ProductDocumentsComponent.prototype, "showLabel", void 0);
         __decorate([
-            core.Output()
-        ], IoneProductComponent.prototype, "forceRenderImage", void 0);
+            core.Input()
+        ], ProductDocumentsComponent.prototype, "documents", void 0);
+        ProductDocumentsComponent = __decorate([
+            core.Component({
+                selector: 'app-product-documents',
+                template: "<app-header *ngIf=\"showLabel\" [label]=\"'DOCUMENTS' | localize\" [amount]=\"documents?.length\"></app-header>\n<div *ngIf=\"documents && documents.length > 0\">\n  <co-files-upload [documents]=\"documents\" [canAdd]=\"false\" readonly></co-files-upload>\n</div>\n",
+                styles: [":host{display:block}::ng-deep co-files-upload{flex-direction:column!important;width:100%}::ng-deep co-file-upload{margin:0!important;border-bottom:1px solid #f6f5f4}::ng-deep co-file-upload:first-child{border-top:1px solid #f6f5f4}::ng-deep co-files-upload .files-upload-wrapper{flex-direction:column!important;width:100%}::ng-deep co-file-upload co-tile{max-width:100%!important;width:100%;position:relative}::ng-deep co-file-upload co-tile:hover{box-shadow:none!important}::ng-deep co-file-upload co-tile:hover .tile-extra-bottom{background-color:#f6f5f4!important}::ng-deep co-file-upload co-tile .tile-wrapper{position:absolute!important;left:0;top:0;width:100%;height:100%;z-index:2;opacity:0;box-sizing:border-box}::ng-deep co-file-upload co-tile .tile-wrapper .image{position:absolute!important;left:0;top:0;width:100%!important;height:100%!important;cursor:pointer}::ng-deep co-file-upload co-tile .tile-extra-bottom{outline:0!important;border:none!important;background:url(../../../assets/icons/download.svg) left 6px center/36px auto no-repeat!important;line-height:20px;padding:20px 20px 20px 60px!important;margin:0!important}::ng-deep co-file-upload co-tile .tile-extra-bottom .main{padding:0!important}"]
+            })
+        ], ProductDocumentsComponent);
+        return ProductDocumentsComponent;
+    }());
+
+    var HeaderComponent = /** @class */ (function () {
+        function HeaderComponent() {
+        }
+        HeaderComponent.prototype.ngOnInit = function () {
+        };
         __decorate([
-            core.Output()
-        ], IoneProductComponent.prototype, "onAlternativeClick", void 0);
+            core.Input()
+        ], HeaderComponent.prototype, "label", void 0);
         __decorate([
-            core.Output()
-        ], IoneProductComponent.prototype, "onArticleInfoReceived", void 0);
+            core.Input()
+        ], HeaderComponent.prototype, "amount", void 0);
+        HeaderComponent = __decorate([
+            core.Component({
+                selector: 'app-header',
+                template: "<ng-container *ngIf=\"label\">\n  <div class=\"header-wrapper\">\n    <h3 [textContent]=\"label\"></h3>\n    <span *ngIf=\"amount\" class=\"amount\" [textContent]=\"'(' + amount + ')'\"></span>\n  </div>\n</ng-container>\n",
+                styles: [".header-wrapper{display:flex;flex-direction:row;align-items:center}.header-wrapper .amount{margin-left:5px}"]
+            })
+        ], HeaderComponent);
+        return HeaderComponent;
+    }());
+
+    var TabType;
+    (function (TabType) {
+        TabType["Additional"] = "additional";
+        TabType["Properties"] = "properties";
+    })(TabType || (TabType = {}));
+    var ProductInfoComponent = /** @class */ (function () {
+        function ProductInfoComponent() {
+            this.tabType = TabType;
+            this.currentTab = TabType.Additional;
+        }
+        ProductInfoComponent.prototype.ngOnInit = function () {
+        };
+        ProductInfoComponent.prototype.switchTab = function (tab) {
+            this.currentTab = tab;
+        };
         __decorate([
-            core.Output()
-        ], IoneProductComponent.prototype, "onArticleReceived", void 0);
+            core.Input()
+        ], ProductInfoComponent.prototype, "article", void 0);
+        ProductInfoComponent = __decorate([
+            core.Component({
+                selector: 'app-product-info',
+                template: "<div>\n  <div class=\"info-wrapper\">\n    <div class=\"info-navigation\">\n      <span [textContent]=\"'ADDITIONAL_DATA' | localize\" class=\"navigator\" [class.selected]=\"currentTab === tabType.Additional\" (mouseup)=\"switchTab(tabType.Additional)\"></span>\n      <span [textContent]=\"'PROPERTIES' | localize\" class=\"navigator\" [class.selected]=\"currentTab === tabType.Properties\" (mouseup)=\"switchTab(tabType.Properties)\"></span>\n    </div>\n    <ng-container [ngSwitch]=\"currentTab\" class=\"content\">\n      <div *ngSwitchCase=\"tabType.Additional\" @showContent>\n        <app-product-additional-info\n          [article]=\"article\"\n        ></app-product-additional-info>\n      </div>\n      <div *ngSwitchCase=\"tabType.Properties\" @showContent>\n        <app-product-properties [article]=\"article\"></app-product-properties>\n      </div>\n    </ng-container>\n  </div>\n</div>\n",
+                animations: [
+                    animations.trigger('showContent', [
+                        animations.state('void', animations.style({ 'opacity': '0' })),
+                        animations.state('*', animations.style({ 'opacity': '1' })),
+                        animations.transition('void => *', animations.animate('200ms 100ms ease-in-out')),
+                    ])
+                ],
+                styles: [".info-navigation{margin:30px 0}.info-navigation .navigator:not(:last-child){margin-right:30px}.navigator{font-size:15px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.navigator.selected{color:#2b60a7}"]
+            })
+        ], ProductInfoComponent);
+        return ProductInfoComponent;
+    }());
+
+    var ProductAdditionalInfoComponent = /** @class */ (function () {
+        function ProductAdditionalInfoComponent(_sanitizer, _connectorService, _changeDetector) {
+            this._sanitizer = _sanitizer;
+            this._connectorService = _connectorService;
+            this._changeDetector = _changeDetector;
+            this.showLabel = false;
+            this.textParts = [];
+            this._superArticles = new Map();
+        }
+        Object.defineProperty(ProductAdditionalInfoComponent.prototype, "article", {
+            get: function () {
+                return this._article;
+            },
+            set: function (value) {
+                var _this = this;
+                if (value) {
+                    this._article = value;
+                    this._buildInfo().then(function () {
+                        _this._changeDetector.detectChanges();
+                    });
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ProductAdditionalInfoComponent.prototype.ngOnInit = function () {
+        };
+        ProductAdditionalInfoComponent.prototype._getTextsSuperArticle = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
+                            var texts, mainArticle;
+                            var _this = this;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        texts = [];
+                                        if (!this.article.superArticleNr) return [3 /*break*/, 4];
+                                        mainArticle = void 0;
+                                        if (!this._superArticles.has(this.article.superArticleNr)) return [3 /*break*/, 1];
+                                        mainArticle = this._superArticles.get(this.article.superArticleNr);
+                                        return [3 /*break*/, 3];
+                                    case 1: return [4 /*yield*/, this._connectorService.getSuperArticle(this.article.superArticleNr)];
+                                    case 2:
+                                        mainArticle = _a.sent();
+                                        this._superArticles.set(this.article.superArticleNr, mainArticle);
+                                        _a.label = 3;
+                                    case 3:
+                                        mainArticle.texts.forEach(function (txt) {
+                                            if (BitUtils.IsFullDescription(txt.publication)) {
+                                                var safeTxt = _this._sanitizer.sanitize(core.SecurityContext.HTML, txt.text);
+                                                texts.push(safeTxt);
+                                            }
+                                        });
+                                        resolve(texts);
+                                        return [3 /*break*/, 5];
+                                    case 4:
+                                        resolve(texts);
+                                        _a.label = 5;
+                                    case 5: return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                });
+            });
+        };
+        ProductAdditionalInfoComponent.prototype._prepareArticleTexts = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var texts;
+                var _a;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this._getTextsSuperArticle()];
+                        case 1:
+                            texts = _b.sent();
+                            if (texts.length > 0) {
+                                (_a = this.textParts).push.apply(_a, __spread(texts));
+                            }
+                            if (this.article.texts) {
+                                this.article.texts.forEach(function (txt) {
+                                    if (BitUtils.IsFullDescription(txt.publication)) {
+                                        var safeTxt = _this._sanitizer.sanitize(core.SecurityContext.HTML, txt.text);
+                                        _this.textParts.push(safeTxt);
+                                    }
+                                });
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ProductAdditionalInfoComponent.prototype._buildInfo = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this.textParts.length = 0;
+                            return [4 /*yield*/, this._prepareArticleTexts()];
+                        case 1:
+                            _a.sent();
+                            if (this.textParts.length === 0) {
+                                if (this.article.additionalDescription) {
+                                    this.textParts.push(this.article.additionalDescription);
+                                }
+                                else if (this.article.description) {
+                                    this.textParts.push(this.article.description);
+                                }
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ProductAdditionalInfoComponent.ctorParameters = function () { return [
+            { type: platformBrowser.DomSanitizer },
+            { type: ProductConnectorService },
+            { type: core.ChangeDetectorRef }
+        ]; };
         __decorate([
-            core.Output()
-        ], IoneProductComponent.prototype, "onSelectionsReceived", void 0);
+            core.Input()
+        ], ProductAdditionalInfoComponent.prototype, "article", null);
         __decorate([
-            core.Output()
-        ], IoneProductComponent.prototype, "onAddToQuote", void 0);
-        IoneProductComponent = __decorate([
+            core.Input()
+        ], ProductAdditionalInfoComponent.prototype, "showLabel", void 0);
+        ProductAdditionalInfoComponent = __decorate([
             core.Component({
-                selector: 'app-ione-product',
-                template: "<app-product-page *ngIf=\"upAndLoaded\" [sku]=\"sku\"\n></app-product-page>\n",
-                encapsulation: core.ViewEncapsulation.Emulated,
-                styles: [""]
+                selector: 'app-product-additional-info',
+                template: "<h3 *ngIf=\"showLabel\" [textContent]=\"'ADDITIONAL_DATA' | localize\"></h3>\n<ng-container *ngIf=\"textParts && textParts.length > 0\">\n  <div class=\"additional-info-parts\" *ngFor=\"let text of textParts\" [innerHTML]=\"text\"></div>\n</ng-container>\n",
+                styles: [":host{display:block}:host .additional-info-parts{margin-bottom:20px;line-height:190%;color:#22313c;font-size:13px}:host ::ng-deep p{line-height:190%;margin:15px 0}:host ::ng-deep font{font-family:iOneMontserrat}:host .additional-info-parts>:first-child{margin-top:0}:host .additional-info-parts>:last-child{margin-bottom:0}"]
             })
-        ], IoneProductComponent);
-        return IoneProductComponent;
+        ], ProductAdditionalInfoComponent);
+        return ProductAdditionalInfoComponent;
     }());
 
-    var ProductAdditionalDescriptionComponent = /** @class */ (function () {
-        function ProductAdditionalDescriptionComponent(_appEventService) {
-            this._appEventService = _appEventService;
+    var propertyMap = new Map([
+        ['articleNr', 'ARTICLE_NUMBER'],
+        ['catExtra', 'CATEGORY'],
+        ['catType', 'CATEGORY_TYPE'],
+        ['description', 'DESCRIPTION'],
+        ['material', 'MATERIAL'],
+        ['title', 'TITLE'],
+        ['turnOverGroup', 'TURNOVERGROUP'],
+        ['height', 'HEIGHT'],
+        ['width', 'WIDTH']
+    ]);
+    var ProductPropertiesComponent = /** @class */ (function () {
+        function ProductPropertiesComponent() {
+            this.showLabel = false;
+            this.properties = [];
         }
-        Object.defineProperty(ProductAdditionalDescriptionComponent.prototype, "article", {
+        Object.defineProperty(ProductPropertiesComponent.prototype, "article", {
             get: function () {
                 return this._article;
             },
             set: function (value) {
                 this._article = value;
-                if (this._article) {
-                    this.description = this.article.additionalDescription;
-                    this._prepareDescription();
-                }
+                this._prepareProperties();
             },
             enumerable: true,
             configurable: true
         });
-        ProductAdditionalDescriptionComponent.prototype.ngOnInit = function () {
-        };
-        ProductAdditionalDescriptionComponent.prototype.onReadMore = function () {
-            this._appEventService.onUpdateProductInfoTab.next(0);
+        ProductPropertiesComponent.prototype.ngOnInit = function () {
         };
-        ProductAdditionalDescriptionComponent.prototype._prepareDescription = function () {
+        ProductPropertiesComponent.prototype._prepareProperties = function () {
             var _this = this;
-            this.description = '';
-            if (this.article.texts && this.article.texts.length > 0) {
-                this.article.texts.forEach(function (txt) {
-                    if (BitUtils.IsShortDescription(txt.publication)) {
-                        _this.description += txt.text;
-                    }
-                });
-                this.description = this.description.replace(/<[^>]*>?/gm, '');
-                if (this.description.length > 250) {
-                    this.description = this.description.substr(0, 250) + ' [..]';
-                }
+            this.properties.length = 0;
+            if (!this._article) {
+                return;
             }
+            propertyMap.forEach(function (value, key) {
+                if (_this.article.hasOwnProperty(key)) {
+                    _this.properties.push({ key: value, value: _this.article[key] });
+                }
+            });
         };
-        ProductAdditionalDescriptionComponent.ctorParameters = function () { return [
-            { type: ProductEventService }
-        ]; };
         __decorate([
             core.Input()
-        ], ProductAdditionalDescriptionComponent.prototype, "article", null);
-        ProductAdditionalDescriptionComponent = __decorate([
+        ], ProductPropertiesComponent.prototype, "article", null);
+        __decorate([
+            core.Input()
+        ], ProductPropertiesComponent.prototype, "showLabel", void 0);
+        ProductPropertiesComponent = __decorate([
             core.Component({
-                selector: 'app-product-additional-description',
-                template: "<ng-container *ngIf=\"description !== ''\">\n  <div class=\"pd-additional-description\">\n    <p [innerHTML]=\"description\"></p>\n    <button class=\"pd-read-more-btn\" [textContent]=\"'READ_MORE' | localize\" (click)=\"onReadMore()\"></button>\n  </div>\n</ng-container>\n",
-                styles: [":host{display:block;padding-top:0!important}:host :focus{outline:0!important}:host .pd-additional-description{line-height:190%;color:#22313c;font-size:13px}:host .pd-read-more-btn{color:#2b60a7;border:none;background:0 0;cursor:pointer;text-decoration:underline;font-family:iOneMontserrat}:host .pd-read-more-btn:hover{color:#74b77f}@media screen and (max-width:650px){:host .pd-additional-description{font-size:12px}}"]
+                selector: 'app-product-properties',
+                template: "<div class=\"article-properties-wrapper\">\n  <h3 *ngIf=\"showLabel\" [textContent]=\"'PROPERTIES' | localize\"></h3>\n  <ng-container *ngFor=\"let property of properties\">\n    <div class=\"article-property\">\n      <div class=\"article-property-key\" [textContent]=\"property.key | localize\"></div>\n      <div class=\"article-property-value\" [textContent]=\"property.value\"></div>\n    </div>\n  </ng-container>\n</div>\n",
+                styles: [":host{display:block}.article-properties-wrapper{display:flex;flex-direction:column}.article-property{display:flex;flex-direction:row;border-bottom:1px solid #f6f5f4;padding:11px 0;font-size:13px}.article-property:first-child{border-top:1px solid #f6f5f4}.article-property-key{flex-basis:200px;flex-shrink:0;color:#5b6875}@media screen and (max-width:450px){.article-property-key{flex-basis:130px}}"]
             })
-        ], ProductAdditionalDescriptionComponent);
-        return ProductAdditionalDescriptionComponent;
+        ], ProductPropertiesComponent);
+        return ProductPropertiesComponent;
     }());
 
-    var ProductInfoTabsComponent = /** @class */ (function () {
-        function ProductInfoTabsComponent(_appEventService) {
-            var _this = this;
-            this._appEventService = _appEventService;
-            this.activeTabHeight = 0;
-            this.tabs = [];
-            this._subs = [];
-            this._subs.push(this._appEventService.onUpdateProductInfoTab.subscribe(function (index) {
-                _this.updateTab(index);
-                _this.tabContent.nativeElement.scrollIntoView({ behavior: 'smooth' });
-            }));
+    var ProductSymbolsComponent = /** @class */ (function () {
+        function ProductSymbolsComponent() {
+            this.symbolStrings = [];
         }
-        Object.defineProperty(ProductInfoTabsComponent.prototype, "article", {
+        Object.defineProperty(ProductSymbolsComponent.prototype, "symbols", {
+            get: function () {
+                return this._symbols;
+            },
             set: function (value) {
-                if (value) {
-                    this.articleObject = value;
-                    this._setupTabs();
-                    this.updateTab(0);
+                this._symbols = value;
+                if (this._symbols && this._symbols.hasOwnProperty('fontCode')) {
+                    this._className = this._symbols['fontCode'] === 'VLOER' ? 'floor' : (this._className === 'WAS' ? 'ginetex' : '');
+                }
+                if (this._symbols && this._symbols.hasOwnProperty('symbolString')) {
+                    for (var i = 0; i < this._symbols['symbolString'].length; i++) {
+                        this.symbolStrings.push(this._symbols['symbolString'][i]);
+                    }
                 }
             },
             enumerable: true,
             configurable: true
         });
-        ProductInfoTabsComponent.prototype.ngOnDestroy = function () {
-            this._subs.forEach(function (s) { return s.unsubscribe(); });
-        };
-        ProductInfoTabsComponent.prototype.updateTab = function (tabIndex) {
-            this.activeTab = tabIndex;
-            this.updateHeight(tabIndex);
-        };
-        ProductInfoTabsComponent.prototype.updateHeight = function (tabIndex) {
-            if (this.tabContent.nativeElement.children.length > 0) {
-                if (this.tabContent.nativeElement.children[tabIndex] !== undefined) {
-                    this.activeTabHeight = this.tabContent.nativeElement.children[tabIndex].offsetHeight;
-                }
-            }
-        };
-        ProductInfoTabsComponent.prototype._setupTabs = function () {
-            this.tabs.push({ title: 'DESCRIPTION' });
-            this.tabs.push({ title: 'FEATURES' });
-            if (this.articleObject.documents !== undefined && this.articleObject.documents.length > 0) {
-                this.tabs.push({ title: 'DOWNLOADS' });
-            }
-            if (this.articleObject.symbols !== undefined && this.articleObject.symbols.length > 0) {
-                this.tabs.push({ title: 'SYMBOLS' });
-            }
+        ProductSymbolsComponent.prototype.ngOnInit = function () {
         };
-        ProductInfoTabsComponent.ctorParameters = function () { return [
-            { type: ProductEventService }
-        ]; };
-        __decorate([
-            core.ViewChild('tabContent')
-        ], ProductInfoTabsComponent.prototype, "tabContent", void 0);
         __decorate([
             core.Input()
-        ], ProductInfoTabsComponent.prototype, "article", null);
-        ProductInfoTabsComponent = __decorate([
+        ], ProductSymbolsComponent.prototype, "symbols", null);
+        __decorate([
+            core.HostBinding('class')
+        ], ProductSymbolsComponent.prototype, "_className", void 0);
+        ProductSymbolsComponent = __decorate([
             core.Component({
-                selector: 'app-product-info-tabs',
-                template: "<div class=\"tab-container\">\r\n  <div class=\"tab-header\">\r\n    <button *ngFor=\"let tab of tabs; let i = index\" class=\"tab-header-button\" [class.active]=\"activeTab === i\" [textContent]=\"tab.title | localize\" (click)=\"updateTab(i)\"></button>\r\n  </div>\r\n  <div class=\"tab-content\" #tabContent [style.height.px]=\"(activeTabHeight > 0 ? activeTabHeight : '')\">\r\n    <div class=\"tab-content-item\" *ngFor=\"let tab of tabs; let i = index\" [class.active]=\"activeTab === i\">\r\n      <ng-container *ngIf=\"i === 0\">\r\n        <app-product-additional-info class=\"\" [article]=\"articleObject\" [showLabel]=\"false\"></app-product-additional-info>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"i === 1\">\r\n        <app-product-properties class=\"\" [article]=\"articleObject\" [showLabel]=\"false\"></app-product-properties>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"i === 2\">\r\n        <app-product-documents [showLabel]=\"false\" class=\"\" *ngIf=\"articleObject?.documents && articleObject?.documents.length > 0\" [documents]=\"articleObject?.documents\"></app-product-documents>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"i === 3\">\r\n        <app-product-symbols class=\"\" *ngIf=\"articleObject?.symbols && articleObject?.symbols.length > 0\" [symbols]=\"articleObject?.symbols\"></app-product-symbols>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [":focus{outline:0}:host .tab-header{border-bottom:3px solid #f6f5f4;margin:0 0 30px}:host .tab-header .tab-header-button{background:0 0;border:none;border-bottom:3px solid transparent;line-height:20px;padding:15px 20px;cursor:pointer;font-family:iOneMontserrat;color:#22313c;font-weight:700;margin:0 0 -3px;opacity:.5}:host .tab-header .tab-header-button:hover{opacity:1}:host .tab-header .tab-header-button.active{opacity:1;border-color:#74b77f}:host .tab-content{padding:0 20px 30px;margin:0 0 20px;border-bottom:2px solid #f6f5f4;transition:.2s ease-in-out;position:relative}:host .tab-content .tab-content-item{opacity:0;position:absolute;left:0;top:0;visibility:hidden;width:100%}:host .tab-content .tab-content-item.active{opacity:1;visibility:visible;position:static}@media screen and (max-width:650px){:host .tab-content{padding:0 10px 15px}}@media screen and (max-width:450px){:host .tab-header{display:flex}:host .tab-header .tab-header-button{width:100%;padding:10px;font-size:11px}}"]
-            })
-        ], ProductInfoTabsComponent);
-        return ProductInfoTabsComponent;
-    }());
-
-    var ProductInitializerService = /** @class */ (function () {
-        function ProductInitializerService(_settingsService) {
-            this._settingsService = _settingsService;
-        }
-        ProductInitializerService.prototype.initializeApp = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    return [2 /*return*/, this._settingsService.initializeSettings()];
-                });
-            });
-        };
-        ProductInitializerService.ctorParameters = function () { return [
-            { type: ProductSettingsService }
-        ]; };
-        ProductInitializerService.ɵprov = core.ɵɵdefineInjectable({ factory: function ProductInitializerService_Factory() { return new ProductInitializerService(core.ɵɵinject(ProductSettingsService)); }, token: ProductInitializerService, providedIn: "root" });
-        ProductInitializerService = __decorate([
-            core.Injectable({
-                providedIn: 'root',
+                selector: 'app-product-symbols',
+                template: "<div *ngIf=\"symbols && symbols.length > 0\">\n  <app-header [label]=\"'SYMBOLS' | localize\" [amount]=\"symbols?.length\"></app-header>\n  <co-scroll-container>\n    <co-tile small noImagePlaceholder *ngFor=\"let symbol of symbolStrings\">\n      <ng-container tile-over-image>\n        <div class=\"symbol\" [textContent]=\"symbol\"></div>\n      </ng-container>\n      <ng-container tile-extra-bottom-content>\n        <div class=\"symbol-name\" [textContent]=\"'Wat moet hier?'\"></div>\n      </ng-container>\n    </co-tile>\n  </co-scroll-container>\n</div>\n",
+                styles: [":host{display:block}:host.floor .symbol{font-family:iOneFloorsymbols}:host.ginetex .symbol{font-family:iOneGinetexsymbols}.symbol{font-size:100px}"]
             })
-        ], ProductInitializerService);
-        return ProductInitializerService;
+        ], ProductSymbolsComponent);
+        return ProductSymbolsComponent;
     }());
 
-    function initializeApp(context) {
-        var x = function () { return context.initializeApp(); };
-        return x;
-    }
-    var IoneProductModule = /** @class */ (function () {
-        function IoneProductModule() {
+    var ProductPageModule = /** @class */ (function () {
+        function ProductPageModule() {
         }
-        IoneProductModule = __decorate([
+        ProductPageModule = __decorate([
             core.NgModule({
                 imports: [
-                    // BrowserAnimationsModule,
                     common.CommonModule,
-                    corecomponents.ButtonModule,
                     corecomponents.IconModule,
+                    corecomponents.LoaderModule,
+                    PipeModule,
                     corecomponents.NumberPickerModule,
+                    corecomponents.ButtonModule,
+                    corecomponents.PriceDisplayPipeModule,
                     corecomponents.InputTextModule,
                     corecomponents.FilesUploadModule,
-                    corecomponents.LoaderModule,
                     corecomponents.ScrollContainerModule,
                     corecomponents.TileModule,
                     corecomponents.LevelIndicatorModule,
-                    corecomponents.PriceDisplayPipeModule,
-                    corecomponents.ArticleTileModule
+                    corecomponents.ArticleTileModule,
                 ],
                 schemas: [core.CUSTOM_ELEMENTS_SCHEMA],
                 declarations: [
-                    IoneProductComponent,
                     ProductPageComponent,
+                    ProductSelectorTypeComponent,
                     ImageCarouselComponent,
                     ProductDescriptionComponent,
-                    ProductDocumentsComponent,
+                    ProductAdditionalDescriptionComponent,
+                    ProductPriceComponent,
+                    ProductAddtocartComponent,
                     ProductRelatedComponent,
+                    ProductStockComponent,
+                    ProductDeliveryComponent,
+                    ProductInfoTabsComponent,
+                    ProductDocumentsComponent,
                     HeaderComponent,
                     ProductInfoComponent,
                     ProductAdditionalInfoComponent,
                     ProductPropertiesComponent,
-                    ProductDeliveryComponent,
-                    ProductStockComponent,
-                    ProductSymbolsComponent,
-                    ProductPriceComponent,
-                    ProductAddtocartComponent,
-                    ProductInfoTabsComponent,
-                    LocalizePipe,
-                    ProductSelectorTypeComponent,
-                    ProductAdditionalDescriptionComponent
+                    ProductSymbolsComponent
+                ],
+                exports: [ProductPageComponent]
+            })
+        ], ProductPageModule);
+        return ProductPageModule;
+    }());
+
+    var ProductExternalSourceModule = /** @class */ (function () {
+        function ProductExternalSourceModule() {
+        }
+        ProductExternalSourceModule = __decorate([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    ProductPageModule
+                ],
+                declarations: [
+                    ProductExternalSourceComponent
+                ],
+                exports: [
+                    ProductExternalSourceComponent
+                ]
+            })
+        ], ProductExternalSourceModule);
+        return ProductExternalSourceModule;
+    }());
+
+    function initializeApp(context) {
+        var x = function () { return context.initializeApp(); };
+        return x;
+    }
+    var IoneProductModule = /** @class */ (function () {
+        function IoneProductModule() {
+        }
+        IoneProductModule = __decorate([
+            core.NgModule({
+                imports: [
+                    // BrowserAnimationsModule,
+                    common.CommonModule,
+                    ProductExternalSourceModule,
+                    ProductPageModule
+                ],
+                declarations: [
+                    IoneProductComponent
                 ],
                 entryComponents: [
                     IoneProductComponent
                 ],
                 providers: [
-                    ProductSettingsService,
-                    ProductConnectorService,
-                    ProductConnectorAdapterService,
-                    IconCacheService,
                     {
                         provide: core.APP_INITIALIZER,
                         useFactory: initializeApp,
@@ -2563,36 +2779,39 @@
     }());
 
     exports.IoneProductModule = IoneProductModule;
+    exports.ProductExternalSourceComponent = ProductExternalSourceComponent;
+    exports.ProductExternalSourceModule = ProductExternalSourceModule;
     exports.Version = Version;
     exports.initializeApp = initializeApp;
-    exports.ɵa = IoneProductComponent;
-    exports.ɵb = DictionaryService;
-    exports.ɵba = ProductAdditionalDescriptionComponent;
-    exports.ɵbb = ProductInitializerService;
-    exports.ɵc = JsonUtilsService;
-    exports.ɵd = ProductConnectorService;
-    exports.ɵe = ProductConnectorAdapterService;
-    exports.ɵf = ProductSettingsService;
-    exports.ɵg = ProductEventService;
-    exports.ɵh = ProductPageComponent;
-    exports.ɵi = IconCacheService;
-    exports.ɵj = ImageCarouselComponent;
-    exports.ɵk = ProductDescriptionComponent;
-    exports.ɵl = ProductDocumentsComponent;
-    exports.ɵm = ProductRelatedComponent;
-    exports.ɵn = HeaderComponent;
-    exports.ɵo = ProductInfoComponent;
-    exports.ɵp = ProductAdditionalInfoComponent;
-    exports.ɵq = ProductModuleService;
-    exports.ɵr = ProductPropertiesComponent;
-    exports.ɵs = ProductDeliveryComponent;
-    exports.ɵt = LocalizePipe;
-    exports.ɵu = ProductStockComponent;
-    exports.ɵv = ProductSymbolsComponent;
-    exports.ɵw = ProductPriceComponent;
-    exports.ɵx = ProductAddtocartComponent;
-    exports.ɵy = ProductInfoTabsComponent;
-    exports.ɵz = ProductSelectorTypeComponent;
+    exports.ɵa = ProductPageModule;
+    exports.ɵb = PipeModule;
+    exports.ɵba = ProductSymbolsComponent;
+    exports.ɵbb = IoneProductComponent;
+    exports.ɵbc = ProductInitializerService;
+    exports.ɵc = LocalizePipe;
+    exports.ɵd = DictionaryService;
+    exports.ɵe = JsonUtilsService;
+    exports.ɵf = ProductPageComponent;
+    exports.ɵg = ProductConnectorService;
+    exports.ɵh = ProductConnectorAdapterService;
+    exports.ɵi = ProductSettingsService;
+    exports.ɵj = IconCacheService;
+    exports.ɵk = ProductEventService;
+    exports.ɵl = ProductSelectorTypeComponent;
+    exports.ɵm = ImageCarouselComponent;
+    exports.ɵn = ProductDescriptionComponent;
+    exports.ɵo = ProductAdditionalDescriptionComponent;
+    exports.ɵp = ProductPriceComponent;
+    exports.ɵq = ProductAddtocartComponent;
+    exports.ɵr = ProductRelatedComponent;
+    exports.ɵs = ProductStockComponent;
+    exports.ɵt = ProductDeliveryComponent;
+    exports.ɵu = ProductInfoTabsComponent;
+    exports.ɵv = ProductDocumentsComponent;
+    exports.ɵw = HeaderComponent;
+    exports.ɵx = ProductInfoComponent;
+    exports.ɵy = ProductAdditionalInfoComponent;
+    exports.ɵz = ProductPropertiesComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });