@colijnit/product 1.9.5 → 2.9.0

package/fesm5/colijnit-product.js

@@ -1,7 +1,5 @@
-import { __decorate, __awaiter, __generator, __spread } from 'tslib';
-import { Input, Component, ɵɵdefineInjectable, Injectable, ɵɵinject, Output, Directive, ChangeDetectorRef, ViewChild, ElementRef, HostListener, HostBinding, Renderer2, SecurityContext, Pipe, EventEmitter, ViewEncapsulation, NgModule, CUSTOM_ELEMENTS_SCHEMA, APP_INITIALIZER } from '@angular/core';
-import { ButtonModule, IconModule, NumberPickerModule, InputTextModule, FilesUploadModule, LoaderModule, ScrollContainerModule, TileModule, LevelIndicatorModule, PriceDisplayPipeModule, ArticleTileModule } from '@colijnit/corecomponents';
-import { CoDocument } from '@colijnit/mainapi/build/model/co-document';
+import { __awaiter, __generator, __decorate, __spread } from 'tslib';
+import { ɵɵdefineInjectable, Injectable, ɵɵinject, Output, Directive, EventEmitter, ChangeDetectorRef, Input, Component, ViewEncapsulation, HostBinding, Renderer2, ViewChild, ElementRef, HostListener, Pipe, NgModule, SecurityContext, CUSTOM_ELEMENTS_SCHEMA, APP_INITIALIZER } from '@angular/core';
 import { Subject, BehaviorSubject } from 'rxjs';
 import { Options } from '@colijnit/ioneconnector/build/model/options';
 import { ArticleFullObject } from '@colijnit/articleapi/build/model/article-full-object';
@@ -10,40 +8,110 @@ import { Articles } from '@colijnit/articleapi/build/articles';
 import { DeliveryPrognosis } from '@colijnit/articleapi/build/model/delivery-prognosis';
 import { DocumentContent } from '@colijnit/articleapi/build/model/document-content';
 import { BusinessObjectFactory } from '@colijnit/ioneconnector/build/service/business-object-factory';
+import { Transaction } from '@colijnit/transactionapi/build/transaction';
+import { MainApi } from '@colijnit/mainapi';
 import { HttpClient } from '@angular/common/http';
 import { StringUtils } from '@colijnit/ioneconnector/build/utils/string-utils';
+import { CommonModule } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import { trigger, state, style, transition, animate } from '@angular/animations';
+import { CoDocument } from '@colijnit/mainapi/build/model/co-document';
+import { IconModule, LoaderModule, NumberPickerModule, ButtonModule, PriceDisplayPipeModule, InputTextModule, FilesUploadModule, ScrollContainerModule, TileModule, LevelIndicatorModule, ArticleTileModule } from '@colijnit/corecomponents';
 import { ConfiguratorStatisticsEnvironment } from '@colijnit/articleapi/build/model/configurator-statistics-environment';
-import { CommonModule } from '@angular/common';
 
 // this file is dynamically created, do not change this
 var Version = /** @class */ (function () {
     function Version() {
         this.name = "@colijnit/product";
         this.description = "Product detail page project for iOne";
-        this.symVer = "1.9.5";
-        this.publishDate = "21-6-2023 11:47:53";
+        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([
-        Input()
-    ], ProductDescriptionComponent.prototype, "article", void 0);
-    ProductDescriptionComponent = __decorate([
-        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 = ɵɵdefineInjectable({ factory: function JsonUtilsService_Factory() { return new JsonUtilsService(); }, token: JsonUtilsService, providedIn: "root" });
+    JsonUtilsService = __decorate([
+        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.
@@ -57,14 +125,46 @@ var ProductConnectorAdapterService = /** @class */ (function () {
         this.articleConnector.showLoader.unsubscribe();
     };
     ProductConnectorAdapterService.prototype.initConnector = function (options) {
-        var _this = this;
-        this.articleConnector = new 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(options);
+                        return [4 /*yield*/, this.articleConnector.connect()];
+                    case 1:
+                        _a.sent();
+                        this.transactionConnector = new 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(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;
@@ -223,51 +323,30 @@ var ProductConnectorAdapterService = /** @class */ (function () {
             });
         });
     };
-    ProductConnectorAdapterService.ɵprov = ɵɵdefineInjectable({ factory: function ProductConnectorAdapterService_Factory() { return new ProductConnectorAdapterService(); }, token: ProductConnectorAdapterService, providedIn: "root" });
-    ProductConnectorAdapterService = __decorate([
-        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 = ɵɵdefineInjectable({ factory: function JsonUtilsService_Factory() { return new JsonUtilsService(); }, token: JsonUtilsService, providedIn: "root" });
-    JsonUtilsService = __decorate([
-        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([
+        Injectable()
+    ], ProductConnectorAdapterService);
+    return ProductConnectorAdapterService;
 }());
 
 var LanguageCode;
@@ -428,51 +507,6 @@ var DictionaryService = /** @class */ (function () {
     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;
@@ -500,13 +534,13 @@ var ProductSettingsService = /** @class */ (function () {
                     case 1:
                         jsonSettings = _a.sent();
                         if (jsonSettings) {
-                            this.settings = Object.assign(new Settings(), 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;
@@ -517,52 +551,19 @@ var ProductSettingsService = /** @class */ (function () {
     };
     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'];
+                    this.settings = new ProductSettings();
                 }
-                if (obj.hasOwnProperty('currency')) {
-                    this.settings.currency = obj['currency'];
+                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('client')) {
-                    this.settings.client = obj['client'];
-                }
-                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'];
@@ -577,27 +578,6 @@ var ProductSettingsService = /** @class */ (function () {
                         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*/];
             });
@@ -620,19 +600,16 @@ var ProductSettingsService = /** @class */ (function () {
         { type: JsonUtilsService },
         { type: DictionaryService }
     ]; };
-    ProductSettingsService.ɵprov = ɵɵdefineInjectable({ factory: function ProductSettingsService_Factory() { return new ProductSettingsService(ɵɵinject(JsonUtilsService), ɵɵinject(DictionaryService)); }, token: ProductSettingsService, providedIn: "root" });
     ProductSettingsService = __decorate([
-        Injectable({
-            providedIn: 'root'
-        })
+        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 BehaviorSubject(false);
         this._initializing = false;
@@ -650,57 +627,61 @@ var ProductConnectorService = /** @class */ (function () {
     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(), 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];
                 }
@@ -709,27 +690,42 @@ var ProductConnectorService = /** @class */ (function () {
     };
     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;
@@ -738,11 +734,8 @@ var ProductConnectorService = /** @class */ (function () {
         { type: ProductConnectorAdapterService },
         { type: ProductSettingsService }
     ]; };
-    ProductConnectorService.ɵprov = ɵɵdefineInjectable({ factory: function ProductConnectorService_Factory() { return new ProductConnectorService(ɵɵinject(ProductConnectorAdapterService), ɵɵinject(ProductSettingsService)); }, token: ProductConnectorService, providedIn: "root" });
     ProductConnectorService = __decorate([
-        Injectable({
-            providedIn: 'root'
-        })
+        Injectable()
     ], ProductConnectorService);
     return ProductConnectorService;
 }());
@@ -762,7 +755,6 @@ var ProductEventService = /** @class */ (function () {
         this.onArticleInfoReceived = new Subject();
         this.onUpdateProductInfoTab = new Subject();
     }
-    ProductEventService.ɵprov = ɵɵdefineInjectable({ factory: function ProductEventService_Factory() { return new ProductEventService(); }, token: ProductEventService, providedIn: "root" });
     __decorate([
         Output()
     ], ProductEventService.prototype, "onAddToCart", void 0);
@@ -777,13 +769,320 @@ var ProductEventService = /** @class */ (function () {
     ], ProductEventService.prototype, "onForceRenderImage", void 0);
     ProductEventService = __decorate([
         Directive(),
-        Injectable({
-            providedIn: 'root'
-        })
+        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 EventEmitter();
+        this.forceRenderImage = new EventEmitter();
+        this.onAlternativeClick = new EventEmitter();
+        this.onArticleInfoReceived = new EventEmitter();
+        this.onArticleReceived = new EventEmitter();
+        this.onSelectionsReceived = new EventEmitter();
+        this.onAddToQuote = new 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: ChangeDetectorRef },
+        { type: ProductEventService },
+        { type: ProductSettingsService }
+    ]; };
+    __decorate([
+        Input()
+    ], IoneProductComponent.prototype, "sku", void 0);
+    __decorate([
+        Input()
+    ], IoneProductComponent.prototype, "settings", null);
+    __decorate([
+        Output()
+    ], IoneProductComponent.prototype, "onAddToCart", void 0);
+    __decorate([
+        Output()
+    ], IoneProductComponent.prototype, "forceRenderImage", void 0);
+    __decorate([
+        Output()
+    ], IoneProductComponent.prototype, "onAlternativeClick", void 0);
+    __decorate([
+        Output()
+    ], IoneProductComponent.prototype, "onArticleInfoReceived", void 0);
+    __decorate([
+        Output()
+    ], IoneProductComponent.prototype, "onArticleReceived", void 0);
+    __decorate([
+        Output()
+    ], IoneProductComponent.prototype, "onSelectionsReceived", void 0);
+    __decorate([
+        Output()
+    ], IoneProductComponent.prototype, "onAddToQuote", void 0);
+    IoneProductComponent = __decorate([
+        Component({
+            selector: 'app-ione-product',
+            template: "\n    <app-product-page [sku]=\"sku\"\n    ></app-product-page>\n  ",
+            providers: [
+                ProductEventService,
+                ProductSettingsService,
+                ProductConnectorAdapterService,
+                ProductConnectorService
+            ],
+            encapsulation: 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 = ɵɵdefineInjectable({ factory: function ProductInitializerService_Factory() { return new ProductInitializerService(ɵɵinject(ProductSettingsService)); }, token: ProductInitializerService, providedIn: "root" });
+    ProductInitializerService = __decorate([
+        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 EventEmitter();
+        this.addToQuote = new EventEmitter();
+        this.alternativeClick = new 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: DomSanitizer },
+        { type: ProductConnectorService },
+        { type: ProductEventService }
+    ]; };
+    __decorate([
+        Input()
+    ], ProductExternalSourceComponent.prototype, "sku", void 0);
+    __decorate([
+        Input()
+    ], ProductExternalSourceComponent.prototype, "externalSource", null);
+    __decorate([
+        Input()
+    ], ProductExternalSourceComponent.prototype, "options", void 0);
+    __decorate([
+        Output()
+    ], ProductExternalSourceComponent.prototype, "addToCart", void 0);
+    __decorate([
+        Output()
+    ], ProductExternalSourceComponent.prototype, "addToQuote", void 0);
+    __decorate([
+        Output()
+    ], ProductExternalSourceComponent.prototype, "alternativeClick", void 0);
+    __decorate([
+        HostBinding('class.co-product-external-source')
+    ], ProductExternalSourceComponent.prototype, "showClass", null);
+    ProductExternalSourceComponent = __decorate([
+        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: 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) {
@@ -861,208 +1160,31 @@ var IconCacheService = /** @class */ (function () {
     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) {
-                _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;
-        }));
-    }
-    Object.defineProperty(ImageCarouselComponent.prototype, "images", {
-        get: function () {
-            return this._images;
-        },
-        set: function (value) {
-            if (value && value.length > 0) {
-                this._images = value;
-                this._loadImages();
-                this._changeDetector.detectChanges();
-            }
-        },
-        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) {
-            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: ChangeDetectorRef },
-        { type: DomSanitizer },
-        { type: IconCacheService }
-    ]; };
-    __decorate([
-        ViewChild('carousel', { read: ElementRef })
-    ], ImageCarouselComponent.prototype, "carousel", void 0);
-    __decorate([
-        Input()
-    ], ImageCarouselComponent.prototype, "showRefresh", void 0);
-    __decorate([
-        Input()
-    ], ImageCarouselComponent.prototype, "images", null);
-    __decorate([
-        HostListener('window:resize')
-    ], ImageCarouselComponent.prototype, "handleWindowResize", null);
-    __decorate([
-        HostListener('swipeleft')
-    ], ImageCarouselComponent.prototype, "gotoNextSlide", null);
-    __decorate([
-        HostListener('swiperight')
-    ], ImageCarouselComponent.prototype, "gotoPrevSlide", null);
-    __decorate([
-        HostBinding('class.resizing')
-    ], ImageCarouselComponent.prototype, "resizing", void 0);
-    ImageCarouselComponent = __decorate([
-        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;
+        }), this.settingsService.settingsLoaded.subscribe(function (loaded) { return _this._handleSettingsLoaded(loaded); }), this._ione.controllerInitialized.subscribe(function (initialized) {
+            _this.settingsLoaded = initialized;
         }));
     }
     Object.defineProperty(ProductPageComponent.prototype, "sku", {
@@ -1084,6 +1206,23 @@ var ProductPageComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ProductPageComponent.prototype, "settings", {
+        get: function () {
+            return this._settings;
+        },
+        set: function (value) {
+            if (value) {
+                if (typeof value === 'string') {
+                    this._settings = JSON.parse(value);
+                }
+                else {
+                    this._settings = value;
+                }
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ProductPageComponent.prototype, "fullScreen", {
         get: function () {
             return this._fullScreen;
@@ -1120,6 +1259,13 @@ var ProductPageComponent = /** @class */ (function () {
         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 () {
     };
@@ -1144,6 +1290,11 @@ var ProductPageComponent = /** @class */ (function () {
     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;
@@ -1157,18 +1308,20 @@ var ProductPageComponent = /** @class */ (function () {
                         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*/];
@@ -1198,10 +1351,13 @@ var ProductPageComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], ProductPageComponent.prototype, "sku", null);
+    __decorate([
+        Input()
+    ], ProductPageComponent.prototype, "settings", null);
     ProductPageComponent = __decorate([
         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: [
                 trigger('toggleFullScreen', [
                     state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
@@ -1240,203 +1396,231 @@ var ProductPageComponent = /** @class */ (function () {
     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 EventEmitter();
+        this.currentTypeChange = new 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: ChangeDetectorRef }
     ]; };
     __decorate([
         Input()
-    ], ProductDocumentsComponent.prototype, "showLabel", void 0);
+    ], ProductSelectorTypeComponent.prototype, "show2D", void 0);
     __decorate([
         Input()
-    ], ProductDocumentsComponent.prototype, "documents", void 0);
-    ProductDocumentsComponent = __decorate([
+    ], ProductSelectorTypeComponent.prototype, "show3D", void 0);
+    __decorate([
+        Input()
+    ], ProductSelectorTypeComponent.prototype, "currentType", void 0);
+    __decorate([
+        Output()
+    ], ProductSelectorTypeComponent.prototype, "onIconClick", void 0);
+    __decorate([
+        Output()
+    ], ProductSelectorTypeComponent.prototype, "currentTypeChange", void 0);
+    ProductSelectorTypeComponent = __decorate([
         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) {
+                _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) {
+            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: ChangeDetectorRef },
+        { type: DomSanitizer },
+        { type: IconCacheService }
     ]; };
     __decorate([
-        Input()
-    ], ProductRelatedComponent.prototype, "refType", void 0);
+        ViewChild('carousel', { read: ElementRef })
+    ], ImageCarouselComponent.prototype, "carousel", void 0);
     __decorate([
         Input()
-    ], ProductRelatedComponent.prototype, "label", void 0);
+    ], ImageCarouselComponent.prototype, "showRefresh", void 0);
     __decorate([
         Input()
-    ], ProductRelatedComponent.prototype, "isSmallModus", void 0);
+    ], ImageCarouselComponent.prototype, "images", null);
     __decorate([
-        Input()
-    ], ProductRelatedComponent.prototype, "articles", null);
-    ProductRelatedComponent = __decorate([
-        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 () {
-    };
+        HostListener('window:resize')
+    ], ImageCarouselComponent.prototype, "handleWindowResize", null);
     __decorate([
-        Input()
-    ], HeaderComponent.prototype, "label", void 0);
+        HostListener('swipeleft')
+    ], ImageCarouselComponent.prototype, "gotoNextSlide", null);
     __decorate([
-        Input()
-    ], HeaderComponent.prototype, "amount", void 0);
-    HeaderComponent = __decorate([
+        HostListener('swiperight')
+    ], ImageCarouselComponent.prototype, "gotoPrevSlide", null);
+    __decorate([
+        HostBinding('class.resizing')
+    ], ImageCarouselComponent.prototype, "resizing", void 0);
+    ImageCarouselComponent = __decorate([
         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([
         Input()
-    ], ProductInfoComponent.prototype, "article", void 0);
-    ProductInfoComponent = __decorate([
+    ], ProductDescriptionComponent.prototype, "article", void 0);
+    ProductDescriptionComponent = __decorate([
         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: [
-                trigger('showContent', [
-                    state('void', style({ 'opacity': '0' })),
-                    state('*', style({ 'opacity': '1' })),
-                    transition('void => *', 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 = ɵɵdefineInjectable({ factory: function ProductModuleService_Factory() { return new ProductModuleService(ɵɵinject(ProductConnectorService)); }, token: ProductModuleService, providedIn: "root" });
-    ProductModuleService = __decorate([
-        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 () {
@@ -1460,248 +1644,326 @@ var BitUtils = /** @class */ (function () {
     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 () {
+    ProductAdditionalDescriptionComponent.prototype.ngOnInit = function () {
     };
-    ProductAdditionalInfoComponent.prototype._getTextsSuperArticle = function () {
+    ProductAdditionalDescriptionComponent.prototype.onReadMore = function () {
+        this._appEventService.onUpdateProductInfoTab.next(0);
+    };
+    ProductAdditionalDescriptionComponent.prototype._prepareDescription = 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(SecurityContext.HTML, txt.text);
-                            texts.push(safeTxt);
-                        }
-                    });
-                    resolve(texts);
-                }).catch(function () {
-                    resolve([]);
-                });
+        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) + ' [..]';
+            }
+        }
+    };
+    ProductAdditionalDescriptionComponent.ctorParameters = function () { return [
+        { type: ProductEventService }
+    ]; };
+    __decorate([
+        Input()
+    ], ProductAdditionalDescriptionComponent.prototype, "article", null);
+    ProductAdditionalDescriptionComponent = __decorate([
+        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}}"]
+        })
+    ], ProductAdditionalDescriptionComponent);
+    return ProductAdditionalDescriptionComponent;
+}());
+
+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 {
-                resolve(texts);
+                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();
+        }
     };
-    ProductAdditionalInfoComponent.prototype._prepareArticleTexts = function () {
+    ProductPriceComponent.prototype._getSign = function (currency) {
+        switch (currency) {
+            case 'EUR':
+                return '€';
+            default:
+                return '€';
+        }
+    };
+    ProductPriceComponent.ctorParameters = function () { return [
+        { type: ChangeDetectorRef }
+    ]; };
+    __decorate([
+        Input()
+    ], ProductPriceComponent.prototype, "pricing", null);
+    __decorate([
+        Input()
+    ], ProductPriceComponent.prototype, "configurable", null);
+    ProductPriceComponent = __decorate([
+        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 EventEmitter();
+        this.addToCartClick = new EventEmitter();
+        this.addToQuoteClick = new EventEmitter();
+        this.showQuoteButton = false;
+        this._quantity = 1;
+    }
+    Object.defineProperty(ProductAddtocartComponent.prototype, "quantity", {
+        get: function () {
+            return this._quantity;
+        },
+        set: function (value) {
+            this._quantity = Math.max(1, value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ProductAddtocartComponent.prototype.ngOnInit = function () {
+    };
+    ProductAddtocartComponent.prototype.ngOnDestroy = function () {
+        this.addToCartButton = undefined;
+    };
+    ProductAddtocartComponent.prototype.handleAddToCartClick = function (quantity) {
         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()];
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _b = (_a = this._appEventService.onAddToCart).next;
+                        return [4 /*yield*/, this._getJSONFromArticleObject({ article: this.article, quantity: quantity })];
                     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(SecurityContext.HTML, txt.text);
-                                    _this.textParts.push(safeTxt);
-                                }
-                            });
-                        }
+                        _b.apply(_a, [_c.sent()]);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    ProductAddtocartComponent.prototype.handleAddToQuoteClick = function (quantity) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _b = (_a = this._appEventService.onAddToQuote).next;
+                        return [4 /*yield*/, this._getJSONFromArticleObject({ article: this.article, quantity: quantity })];
+                    case 1:
+                        _b.apply(_a, [_c.sent()]);
                         return [2 /*return*/];
                 }
             });
         });
     };
-    ProductAdditionalInfoComponent.prototype._buildInfo = function () {
+    ProductAddtocartComponent.prototype._getJSONFromArticleObject = function (article) {
         return __awaiter(this, void 0, void 0, function () {
+            var configuratorStatistics;
             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*/];
+                        configuratorStatistics = new ConfiguratorStatisticsEnvironment();
+                        configuratorStatistics.userType = 'iOneProductPage';
+                        configuratorStatistics.transactionType = 'Sales';
+                        configuratorStatistics.actionDomain = 'bundle';
+                        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, configuratorStatistics)];
+                    case 1: return [2 /*return*/, _a.sent()];
                 }
             });
         });
     };
-    ProductAdditionalInfoComponent.ctorParameters = function () { return [
-        { type: DomSanitizer },
-        { type: ProductModuleService },
-        { type: ChangeDetectorRef }
+    ProductAddtocartComponent.ctorParameters = function () { return [
+        { type: IconCacheService },
+        { type: ProductConnectorService },
+        { type: ProductEventService },
+        { type: ProductSettingsService }
     ]; };
+    __decorate([
+        ViewChild('addtocartbutton', { read: ElementRef })
+    ], ProductAddtocartComponent.prototype, "addToCartButton", void 0);
     __decorate([
         Input()
-    ], ProductAdditionalInfoComponent.prototype, "article", null);
+    ], ProductAddtocartComponent.prototype, "article", void 0);
     __decorate([
         Input()
-    ], ProductAdditionalInfoComponent.prototype, "showLabel", void 0);
-    ProductAdditionalInfoComponent = __decorate([
-        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}"]
-        })
-    ], ProductAdditionalInfoComponent);
-    return ProductAdditionalInfoComponent;
-}());
-
-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(ProductPropertiesComponent.prototype, "article", {
-        get: function () {
-            return this._article;
-        },
-        set: function (value) {
-            this._article = value;
-            this._prepareProperties();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ProductPropertiesComponent.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] });
-            }
-        });
-    };
+    ], ProductAddtocartComponent.prototype, "configurable", void 0);
     __decorate([
         Input()
-    ], ProductPropertiesComponent.prototype, "article", null);
+    ], ProductAddtocartComponent.prototype, "configuring", void 0);
     __decorate([
+        HostBinding('class.full-screen'),
         Input()
-    ], ProductPropertiesComponent.prototype, "showLabel", void 0);
-    ProductPropertiesComponent = __decorate([
+    ], ProductAddtocartComponent.prototype, "fullscreen", void 0);
+    __decorate([
+        Input()
+    ], ProductAddtocartComponent.prototype, "quantity", null);
+    __decorate([
+        Output()
+    ], ProductAddtocartComponent.prototype, "startConfiguration", void 0);
+    __decorate([
+        Output()
+    ], ProductAddtocartComponent.prototype, "addToCartClick", void 0);
+    __decorate([
+        Output()
+    ], ProductAddtocartComponent.prototype, "addToQuoteClick", void 0);
+    ProductAddtocartComponent = __decorate([
         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([
-        Pipe({
-            name: 'localize'
+            selector: 'app-product-addtocart',
+            template: "<div class=\"atc-wrapper\">\n  <co-number-picker *ngIf=\"!configurable && !configuring\" class=\"quantity-select\" [(model)]=\"quantity\" [min]=\"1\" horizontal></co-number-picker>\n  <div class=\"button-wrapper\">\n    <co-button class=\"configure-button\" *ngIf=\"configurable\"\n               [iconData]=\"iconCache.getIcon(icon.MagicWand)\"\n               [label]=\"'CONFIGURE' | localize\"\n               (onClick)=\"startConfiguration.emit()\"\n    ></co-button>\n    <co-button #addtocartbutton class=\"cart-button\" *ngIf=\"!configurable\"\n               [iconData]=\"iconCache.getIcon(icon.AddToCartDrop)\"\n               [label]=\"'SHOPPING_CART_IN' | localize\"\n               (onClick)=\"handleAddToCartClick(quantity)\"\n    ></co-button>\n    <co-button class=\"cart-button quote\" *ngIf=\"!configurable && showQuoteButton\"\n               [iconData]=\"iconCache.getIcon(icon.Quote)\"\n               [label]=\"'QUOTATION' | localize\"\n               (onClick)=\"handleAddToQuoteClick(quantity)\"\n    ></co-button>\n  </div>\n</div>\n",
+            styles: [":host{display:flex;flex-direction:column}:host :not(:last-child){margin-bottom:5px}:host .atc-wrapper{display:flex;flex-direction:row;align-items:baseline}:host .atc-wrapper .quantity-select{margin-right:5px}:host.full-screen .cart-button{position:fixed;right:20px;bottom:20px;z-index:3}::ng-deep co-number-picker{max-width:100px;border:2px solid #f6f5f4;border-radius:5px}::ng-deep co-number-picker ::ng-deep co-input-text{height:50px!important;border:none!important;width:50px!important}::ng-deep co-number-picker ::ng-deep co-input-text:after{display:none}::ng-deep co-number-picker ::ng-deep co-input-text.focused{box-shadow:none!important;border:none!important;background:0 0!important}::ng-deep co-number-picker ::ng-deep co-input-text .clear-icon{display:none}::ng-deep co-number-picker ::ng-deep co-input-text input{width:100%;text-align:center}::ng-deep co-number-picker ::ng-deep co-button{justify-content:center;padding:0!important;margin:0!important;height:50px!important;background-color:transparent!important}::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon [fill]{fill:#22313c!important}.button-wrapper ::ng-deep co-button{height:50px;max-width:300px;justify-content:center;font-size:15px;border-radius:5px!important;cursor:pointer;padding:0 20px!important}.button-wrapper ::ng-deep co-button:hover{background:#74b77f}::ng-deep co-button.cart-button{border-radius:5px}::ng-deep co-button.cart-button.quote{background:#7292b6}"]
         })
-        // A pipe for localizing string values in view templates.
-    ], LocalizePipe);
-    return LocalizePipe;
+    ], ProductAddtocartComponent);
+    return ProductAddtocartComponent;
 }());
 
-var ProductDeliveryComponent = /** @class */ (function () {
-    function ProductDeliveryComponent(_localizePipe, _iOne, _iconCache) {
-        this._localizePipe = _localizePipe;
+var ProductRelatedComponent = /** @class */ (function () {
+    function ProductRelatedComponent(_iOne, _appEventService) {
         this._iOne = _iOne;
-        this._iconCache = _iconCache;
-        this.icon = IconEnum;
-        this.iconData = this._iconCache.getIcon(this.icon.Truck);
+        this._appEventService = _appEventService;
+        this.isSmallModus = true;
+        this._articles = [];
     }
-    Object.defineProperty(ProductDeliveryComponent.prototype, "stockAndDelivery", {
+    Object.defineProperty(ProductRelatedComponent.prototype, "articles", {
+        get: function () {
+            return this._articles;
+        },
         set: function (value) {
+            var _this = this;
             if (value) {
-                this.deliveryDescription = value.deliveryDescription;
-                if (this.deliveryDescription.length > 0 && this.deliveryDescription[0] === ' ') {
-                    this.deliveryDescription = this._localizePipe.transform('ASK_FOR_INFORMATION');
+                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
     });
-    ProductDeliveryComponent.prototype.ngOnInit = function () {
+    ProductRelatedComponent.prototype.handleContentClick = function (article) {
+        this._appEventService.onAlternativeClick.next(article);
     };
-    ProductDeliveryComponent.ctorParameters = function () { return [
-        { type: LocalizePipe },
+    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: IconCacheService }
+        { type: ProductEventService }
     ]; };
     __decorate([
         Input()
-    ], ProductDeliveryComponent.prototype, "stockAndDelivery", null);
-    ProductDeliveryComponent = __decorate([
+    ], ProductRelatedComponent.prototype, "refType", void 0);
+    __decorate([
+        Input()
+    ], ProductRelatedComponent.prototype, "label", void 0);
+    __decorate([
+        Input()
+    ], ProductRelatedComponent.prototype, "isSmallModus", void 0);
+    __decorate([
+        Input()
+    ], ProductRelatedComponent.prototype, "articles", null);
+    ProductRelatedComponent = __decorate([
         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}}"]
+            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}"]
         })
-    ], ProductDeliveryComponent);
-    return ProductDeliveryComponent;
+    ], ProductRelatedComponent);
+    return ProductRelatedComponent;
 }());
 
 var ProductStockComponent = /** @class */ (function () {
@@ -1735,616 +1997,567 @@ var ProductStockComponent = /** @class */ (function () {
             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;
+    ], 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([
+        Pipe({
+            name: 'localize'
+        })
+        // A pipe for localizing string values in view templates.
+    ], LocalizePipe);
+    return LocalizePipe;
 }());
 
-var ProductSymbolsComponent = /** @class */ (function () {
-    function ProductSymbolsComponent() {
-        this.symbolStrings = [];
+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(ProductSymbolsComponent.prototype, "symbols", {
-        get: function () {
-            return this._symbols;
-        },
+    Object.defineProperty(ProductDeliveryComponent.prototype, "stockAndDelivery", {
         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]);
+            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
     });
-    ProductSymbolsComponent.prototype.ngOnInit = function () {
+    ProductDeliveryComponent.prototype.ngOnInit = function () {
     };
+    ProductDeliveryComponent.ctorParameters = function () { return [
+        { type: LocalizePipe },
+        { type: ProductConnectorService },
+        { type: IconCacheService }
+    ]; };
     __decorate([
         Input()
-    ], ProductSymbolsComponent.prototype, "symbols", null);
-    __decorate([
-        HostBinding('class')
-    ], ProductSymbolsComponent.prototype, "_className", void 0);
-    ProductSymbolsComponent = __decorate([
+    ], ProductDeliveryComponent.prototype, "stockAndDelivery", null);
+    ProductDeliveryComponent = __decorate([
         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}"]
+            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}}"]
         })
-    ], ProductSymbolsComponent);
-    return ProductSymbolsComponent;
+    ], ProductDeliveryComponent);
+    return ProductDeliveryComponent;
 }());
 
-var ProductPriceComponent = /** @class */ (function () {
-    function ProductPriceComponent(_changeDetector) {
-        this._changeDetector = _changeDetector;
-        this.showFromPrice = false;
-        this._configurable = false;
+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(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", {
+    Object.defineProperty(ProductInfoTabsComponent.prototype, "article", {
         set: function (value) {
-            this._configurable = value;
-            this._setPrices();
+            if (value) {
+                this.articleObject = value;
+                this._setupTabs();
+                this.updateTab(0);
+            }
         },
         enumerable: true,
         configurable: true
     });
-    ProductPriceComponent.prototype.ngOnInit = function () {
+    ProductInfoTabsComponent.prototype.ngOnDestroy = function () {
+        this._subs.forEach(function (s) { return s.unsubscribe(); });
     };
-    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' : '';
+    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;
             }
-            this._changeDetector.detectChanges();
         }
     };
-    ProductPriceComponent.prototype._getSign = function (currency) {
-        switch (currency) {
-            case 'EUR':
-                return '€';
-            default:
-                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' });
         }
     };
-    ProductPriceComponent.ctorParameters = function () { return [
-        { type: ChangeDetectorRef }
+    ProductInfoTabsComponent.ctorParameters = function () { return [
+        { type: ProductEventService }
     ]; };
     __decorate([
-        Input()
-    ], ProductPriceComponent.prototype, "pricing", null);
+        ViewChild('tabContent')
+    ], ProductInfoTabsComponent.prototype, "tabContent", void 0);
     __decorate([
         Input()
-    ], ProductPriceComponent.prototype, "configurable", null);
-    ProductPriceComponent = __decorate([
+    ], ProductInfoTabsComponent.prototype, "article", null);
+    ProductInfoTabsComponent = __decorate([
         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}}"]
+            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}}"]
         })
-    ], ProductPriceComponent);
-    return ProductPriceComponent;
+    ], ProductInfoTabsComponent);
+    return ProductInfoTabsComponent;
 }());
 
-var ProductAddtocartComponent = /** @class */ (function () {
-    function ProductAddtocartComponent(iconCache, _ioneControllerService, _appEventService, _settingsService) {
+var PipeModule = /** @class */ (function () {
+    function PipeModule() {
+    }
+    PipeModule = __decorate([
+        NgModule({
+            exports: [
+                LocalizePipe
+            ],
+            declarations: [
+                LocalizePipe
+            ],
+            providers: [
+                LocalizePipe
+            ]
+        })
+    ], PipeModule);
+    return PipeModule;
+}());
+
+var ProductDocumentsComponent = /** @class */ (function () {
+    function ProductDocumentsComponent(iconCache) {
         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 EventEmitter();
-        this.addToCartClick = new EventEmitter();
-        this.addToQuoteClick = new EventEmitter();
-        this.showQuoteButton = false;
-        this._quantity = 1;
+        this.showLabel = false;
+        this.documents = [];
     }
-    Object.defineProperty(ProductAddtocartComponent.prototype, "quantity", {
-        get: function () {
-            return this._quantity;
-        },
-        set: function (value) {
-            this._quantity = Math.max(1, value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ProductAddtocartComponent.prototype.ngOnInit = function () {
-    };
-    ProductAddtocartComponent.prototype.ngOnDestroy = function () {
-        this.addToCartButton = undefined;
-    };
-    ProductAddtocartComponent.prototype.handleAddToCartClick = function (quantity) {
-        return __awaiter(this, void 0, void 0, function () {
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        _b = (_a = this._appEventService.onAddToCart).next;
-                        return [4 /*yield*/, this._getJSONFromArticleObject({ article: this.article, quantity: quantity })];
-                    case 1:
-                        _b.apply(_a, [_c.sent()]);
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    ProductAddtocartComponent.prototype.handleAddToQuoteClick = function (quantity) {
-        return __awaiter(this, void 0, void 0, function () {
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        _b = (_a = this._appEventService.onAddToQuote).next;
-                        return [4 /*yield*/, this._getJSONFromArticleObject({ article: this.article, quantity: quantity })];
-                    case 1:
-                        _b.apply(_a, [_c.sent()]);
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    ProductAddtocartComponent.prototype._getJSONFromArticleObject = function (article) {
-        return __awaiter(this, void 0, void 0, function () {
-            var configuratorStatistics;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        configuratorStatistics = new ConfiguratorStatisticsEnvironment();
-                        configuratorStatistics.userType = 'iOneProductPage';
-                        configuratorStatistics.transactionType = 'Sales';
-                        configuratorStatistics.actionDomain = 'bundle';
-                        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)];
-                    case 1: return [2 /*return*/, _a.sent()];
-                }
-            });
-        });
-    };
-    ProductAddtocartComponent.ctorParameters = function () { return [
-        { type: IconCacheService },
-        { type: ProductConnectorService },
-        { type: ProductEventService },
-        { type: ProductSettingsService }
-    ]; };
-    __decorate([
-        ViewChild('addtocartbutton', { read: ElementRef })
-    ], ProductAddtocartComponent.prototype, "addToCartButton", void 0);
-    __decorate([
-        Input()
-    ], ProductAddtocartComponent.prototype, "article", void 0);
+    ProductDocumentsComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
+    ]; };
     __decorate([
         Input()
-    ], ProductAddtocartComponent.prototype, "configurable", void 0);
+    ], ProductDocumentsComponent.prototype, "showLabel", void 0);
     __decorate([
         Input()
-    ], ProductAddtocartComponent.prototype, "configuring", void 0);
+    ], ProductDocumentsComponent.prototype, "documents", void 0);
+    ProductDocumentsComponent = __decorate([
+        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([
-        HostBinding('class.full-screen'),
         Input()
-    ], ProductAddtocartComponent.prototype, "fullscreen", void 0);
+    ], HeaderComponent.prototype, "label", void 0);
     __decorate([
         Input()
-    ], ProductAddtocartComponent.prototype, "quantity", null);
-    __decorate([
-        Output()
-    ], ProductAddtocartComponent.prototype, "startConfiguration", void 0);
-    __decorate([
-        Output()
-    ], ProductAddtocartComponent.prototype, "addToCartClick", void 0);
-    __decorate([
-        Output()
-    ], ProductAddtocartComponent.prototype, "addToQuoteClick", void 0);
-    ProductAddtocartComponent = __decorate([
+    ], HeaderComponent.prototype, "amount", void 0);
+    HeaderComponent = __decorate([
         Component({
-            selector: 'app-product-addtocart',
-            template: "<div class=\"atc-wrapper\">\n  <co-number-picker *ngIf=\"!configurable && !configuring\" class=\"quantity-select\" [(model)]=\"quantity\" [min]=\"1\" horizontal></co-number-picker>\n  <div class=\"button-wrapper\">\n    <co-button class=\"configure-button\" *ngIf=\"configurable\"\n               [iconData]=\"iconCache.getIcon(icon.MagicWand)\"\n               [label]=\"'CONFIGURE' | localize\"\n               (onClick)=\"startConfiguration.emit()\"\n    ></co-button>\n    <co-button #addtocartbutton class=\"cart-button\" *ngIf=\"!configurable\"\n               [iconData]=\"iconCache.getIcon(icon.AddToCartDrop)\"\n               [label]=\"'SHOPPING_CART_IN' | localize\"\n               (onClick)=\"handleAddToCartClick(quantity)\"\n    ></co-button>\n    <co-button class=\"cart-button quote\" *ngIf=\"!configurable && showQuoteButton\"\n               [iconData]=\"iconCache.getIcon(icon.Quote)\"\n               [label]=\"'QUOTATION' | localize\"\n               (onClick)=\"handleAddToQuoteClick(quantity)\"\n    ></co-button>\n  </div>\n</div>\n",
-            styles: [":host{display:flex;flex-direction:column}:host :not(:last-child){margin-bottom:5px}:host .atc-wrapper{display:flex;flex-direction:row;align-items:baseline}:host .atc-wrapper .quantity-select{margin-right:5px}:host.full-screen .cart-button{position:fixed;right:20px;bottom:20px;z-index:3}::ng-deep co-number-picker{max-width:100px;border:2px solid #f6f5f4;border-radius:5px}::ng-deep co-number-picker ::ng-deep co-input-text{height:50px!important;border:none!important;width:50px!important}::ng-deep co-number-picker ::ng-deep co-input-text:after{display:none}::ng-deep co-number-picker ::ng-deep co-input-text.focused{box-shadow:none!important;border:none!important;background:0 0!important}::ng-deep co-number-picker ::ng-deep co-input-text .clear-icon{display:none}::ng-deep co-number-picker ::ng-deep co-input-text input{width:100%;text-align:center}::ng-deep co-number-picker ::ng-deep co-button{justify-content:center;padding:0!important;margin:0!important;height:50px!important;background-color:transparent!important}::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon [fill]{fill:#22313c!important}.button-wrapper ::ng-deep co-button{height:50px;max-width:300px;justify-content:center;font-size:15px;border-radius:5px!important;cursor:pointer;padding:0 20px!important}.button-wrapper ::ng-deep co-button:hover{background:#74b77f}::ng-deep co-button.cart-button{border-radius:5px}::ng-deep co-button.cart-button.quote{background:#7292b6}"]
+            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}"]
         })
-    ], ProductAddtocartComponent);
-    return ProductAddtocartComponent;
+    ], HeaderComponent);
+    return HeaderComponent;
 }());
 
-var ProductSelectorTypeComponent = /** @class */ (function () {
-    function ProductSelectorTypeComponent(_iconCache, _changeDetector) {
-        this._iconCache = _iconCache;
-        this._changeDetector = _changeDetector;
-        this.type = SelectorType;
-        this.icons = IconEnum;
-        this.onIconClick = new EventEmitter();
-        this.currentTypeChange = new EventEmitter();
-        this.twoDIcon = this._iconCache.getIcon(this.icons.TwoD);
-        this.threeDIcon = this._iconCache.getIcon(this.icons.ThreeD);
+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;
     }
-    ProductSelectorTypeComponent.prototype.ngOnInit = function () {
+    ProductInfoComponent.prototype.ngOnInit = function () {
     };
-    ProductSelectorTypeComponent.prototype.handleIconClick = function (type) {
-        this.currentType = type;
-        this.currentTypeChange.next(this.currentType);
-        this.onIconClick.next(this.currentType);
-        this._changeDetector.detectChanges();
+    ProductInfoComponent.prototype.switchTab = function (tab) {
+        this.currentTab = tab;
     };
-    ProductSelectorTypeComponent.ctorParameters = function () { return [
-        { type: IconCacheService },
-        { type: ChangeDetectorRef }
-    ]; };
     __decorate([
         Input()
-    ], ProductSelectorTypeComponent.prototype, "show2D", void 0);
-    __decorate([
-        Input()
-    ], ProductSelectorTypeComponent.prototype, "show3D", void 0);
-    __decorate([
-        Input()
-    ], ProductSelectorTypeComponent.prototype, "currentType", void 0);
-    __decorate([
-        Output()
-    ], ProductSelectorTypeComponent.prototype, "onIconClick", void 0);
-    __decorate([
-        Output()
-    ], ProductSelectorTypeComponent.prototype, "currentTypeChange", void 0);
-    ProductSelectorTypeComponent = __decorate([
+    ], ProductInfoComponent.prototype, "article", void 0);
+    ProductInfoComponent = __decorate([
         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-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: [
+                trigger('showContent', [
+                    state('void', style({ 'opacity': '0' })),
+                    state('*', style({ 'opacity': '1' })),
+                    transition('void => *', 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}"]
         })
-    ], ProductSelectorTypeComponent);
-    return ProductSelectorTypeComponent;
+    ], ProductInfoComponent);
+    return ProductInfoComponent;
 }());
 
-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 = '1000234793';
-        // this.sku = '1066';
-        // this.sku = '104';
-        var _this = this;
-        this._dictionary = _dictionary;
-        this._jsonUtils = _jsonUtils;
-        this._ione = _ione;
+var ProductAdditionalInfoComponent = /** @class */ (function () {
+    function ProductAdditionalInfoComponent(_sanitizer, _connectorService, _changeDetector) {
+        this._sanitizer = _sanitizer;
+        this._connectorService = _connectorService;
         this._changeDetector = _changeDetector;
-        this._appEventService = _appEventService;
-        this._settingsService = _settingsService;
-        this.onAddToCart = new EventEmitter();
-        this.forceRenderImage = new EventEmitter();
-        this.onAlternativeClick = new EventEmitter();
-        this.onArticleInfoReceived = new EventEmitter();
-        this.onArticleReceived = new EventEmitter();
-        this.onSelectionsReceived = new EventEmitter();
-        this.onAddToQuote = new 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); }));
+        this.showLabel = false;
+        this.textParts = [];
+        this._superArticles = new Map();
     }
-    Object.defineProperty(IoneProductComponent.prototype, "settings", {
+    Object.defineProperty(ProductAdditionalInfoComponent.prototype, "article", {
         get: function () {
-            return this._settings;
+            return this._article;
         },
         set: function (value) {
+            var _this = this;
             if (value) {
-                var settings = void 0;
-                if (typeof value === 'string') {
-                    settings = JSON.parse(value);
-                }
-                else {
-                    settings = value;
-                }
-                this._settingsService.createSettingsFromObject(settings);
-                // this._initConnection(settings);
+                this._article = value;
+                this._buildInfo().then(function () {
+                    _this._changeDetector.detectChanges();
+                });
             }
         },
         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._handleSettingsLoaded = function (loaded) {
-        if (loaded) {
-            this.upAndLoaded = true;
-            this._initConnection();
-        }
+    ProductAdditionalInfoComponent.prototype.ngOnInit = function () {
     };
-    IoneProductComponent.prototype._handleAnswerInfoReceived = function (info) {
-        this.onArticleInfoReceived.next(info);
+    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(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*/];
+                            }
+                        });
+                    }); })];
+            });
+        });
     };
-    // we need to prepare the settings before we can use it for the 3d configurator bundle
-    IoneProductComponent.prototype._initConnection = 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(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) {
-                this._ione.initDefaultDevelopTestConnection();
-                // settingsToUse.session = this._ione.connector.connector.session;
-                setTimeout(function () {
-                    _this._changeDetector.detectChanges();
-                });
-                return [2 /*return*/];
+                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*/];
+                }
             });
         });
     };
-    IoneProductComponent.ctorParameters = function () { return [
-        { type: DictionaryService },
-        { type: JsonUtilsService },
-        { type: ProductConnectorService },
-        { type: ChangeDetectorRef },
-        { type: ProductEventService },
-        { type: ProductSettingsService }
-    ]; };
-    __decorate([
-        Input()
-    ], IoneProductComponent.prototype, "sku", void 0);
-    __decorate([
-        Input()
-    ], IoneProductComponent.prototype, "settings", null);
-    __decorate([
-        Output()
-    ], IoneProductComponent.prototype, "onAddToCart", void 0);
-    __decorate([
-        Output()
-    ], IoneProductComponent.prototype, "forceRenderImage", void 0);
-    __decorate([
-        Output()
-    ], IoneProductComponent.prototype, "onAlternativeClick", void 0);
-    __decorate([
-        Output()
-    ], IoneProductComponent.prototype, "onArticleInfoReceived", void 0);
-    __decorate([
-        Output()
-    ], IoneProductComponent.prototype, "onArticleReceived", void 0);
+    ProductAdditionalInfoComponent.ctorParameters = function () { return [
+        { type: DomSanitizer },
+        { type: ProductConnectorService },
+        { type: ChangeDetectorRef }
+    ]; };
     __decorate([
-        Output()
-    ], IoneProductComponent.prototype, "onSelectionsReceived", void 0);
+        Input()
+    ], ProductAdditionalInfoComponent.prototype, "article", null);
     __decorate([
-        Output()
-    ], IoneProductComponent.prototype, "onAddToQuote", void 0);
-    IoneProductComponent = __decorate([
+        Input()
+    ], ProductAdditionalInfoComponent.prototype, "showLabel", void 0);
+    ProductAdditionalInfoComponent = __decorate([
         Component({
-            selector: 'app-ione-product',
-            template: "<app-product-page *ngIf=\"upAndLoaded\" [sku]=\"sku\"\n></app-product-page>\n",
-            encapsulation: 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([
         Input()
-    ], ProductAdditionalDescriptionComponent.prototype, "article", null);
-    ProductAdditionalDescriptionComponent = __decorate([
+    ], ProductPropertiesComponent.prototype, "article", null);
+    __decorate([
+        Input()
+    ], ProductPropertiesComponent.prototype, "showLabel", void 0);
+    ProductPropertiesComponent = __decorate([
         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([
-        ViewChild('tabContent')
-    ], ProductInfoTabsComponent.prototype, "tabContent", void 0);
     __decorate([
         Input()
-    ], ProductInfoTabsComponent.prototype, "article", null);
-    ProductInfoTabsComponent = __decorate([
+    ], ProductSymbolsComponent.prototype, "symbols", null);
+    __decorate([
+        HostBinding('class')
+    ], ProductSymbolsComponent.prototype, "_className", void 0);
+    ProductSymbolsComponent = __decorate([
         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 = ɵɵdefineInjectable({ factory: function ProductInitializerService_Factory() { return new ProductInitializerService(ɵɵinject(ProductSettingsService)); }, token: ProductInitializerService, providedIn: "root" });
-    ProductInitializerService = __decorate([
-        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([
         NgModule({
             imports: [
-                // BrowserAnimationsModule,
                 CommonModule,
-                ButtonModule,
                 IconModule,
+                LoaderModule,
+                PipeModule,
                 NumberPickerModule,
+                ButtonModule,
+                PriceDisplayPipeModule,
                 InputTextModule,
                 FilesUploadModule,
-                LoaderModule,
                 ScrollContainerModule,
                 TileModule,
                 LevelIndicatorModule,
-                PriceDisplayPipeModule,
-                ArticleTileModule
+                ArticleTileModule,
             ],
             schemas: [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([
+        NgModule({
+            imports: [
+                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([
+        NgModule({
+            imports: [
+                // BrowserAnimationsModule,
+                CommonModule,
+                ProductExternalSourceModule,
+                ProductPageModule
+            ],
+            declarations: [
+                IoneProductComponent
             ],
             entryComponents: [
                 IoneProductComponent
             ],
             providers: [
-                ProductSettingsService,
-                ProductConnectorService,
-                ProductConnectorAdapterService,
-                IconCacheService,
                 {
                     provide: APP_INITIALIZER,
                     useFactory: initializeApp,
@@ -2365,5 +2578,5 @@ var IoneProductModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { IoneProductModule, Version, initializeApp, IoneProductComponent as ɵa, DictionaryService as ɵb, ProductAdditionalDescriptionComponent as ɵba, ProductInitializerService as ɵbb, JsonUtilsService as ɵc, ProductConnectorService as ɵd, ProductConnectorAdapterService as ɵe, ProductSettingsService as ɵf, ProductEventService as ɵg, ProductPageComponent as ɵh, IconCacheService as ɵi, ImageCarouselComponent as ɵj, ProductDescriptionComponent as ɵk, ProductDocumentsComponent as ɵl, ProductRelatedComponent as ɵm, HeaderComponent as ɵn, ProductInfoComponent as ɵo, ProductAdditionalInfoComponent as ɵp, ProductModuleService as ɵq, ProductPropertiesComponent as ɵr, ProductDeliveryComponent as ɵs, LocalizePipe as ɵt, ProductStockComponent as ɵu, ProductSymbolsComponent as ɵv, ProductPriceComponent as ɵw, ProductAddtocartComponent as ɵx, ProductInfoTabsComponent as ɵy, ProductSelectorTypeComponent as ɵz };
+export { IoneProductModule, ProductExternalSourceComponent, ProductExternalSourceModule, Version, initializeApp, ProductPageModule as ɵa, PipeModule as ɵb, ProductSymbolsComponent as ɵba, IoneProductComponent as ɵbb, ProductInitializerService as ɵbc, LocalizePipe as ɵc, DictionaryService as ɵd, JsonUtilsService as ɵe, ProductPageComponent as ɵf, ProductConnectorService as ɵg, ProductConnectorAdapterService as ɵh, ProductSettingsService as ɵi, IconCacheService as ɵj, ProductEventService as ɵk, ProductSelectorTypeComponent as ɵl, ImageCarouselComponent as ɵm, ProductDescriptionComponent as ɵn, ProductAdditionalDescriptionComponent as ɵo, ProductPriceComponent as ɵp, ProductAddtocartComponent as ɵq, ProductRelatedComponent as ɵr, ProductStockComponent as ɵs, ProductDeliveryComponent as ɵt, ProductInfoTabsComponent as ɵu, ProductDocumentsComponent as ɵv, HeaderComponent as ɵw, ProductInfoComponent as ɵx, ProductAdditionalInfoComponent as ɵy, ProductPropertiesComponent as ɵz };
 //# sourceMappingURL=colijnit-product.js.map