@colijnit/product 258.1.0 → 258.1.1

package/bundles/colijnit-product.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/articleapi/build/model/article-full-object'), require('@colijnit/articleapi/build/model/super-article'), require('@colijnit/articleapi/build/articles'), require('@colijnit/articleapi/build/model/delivery-prognosis'), require('@colijnit/articleapi/build/model/document-content'), require('@colijnit/ioneconnector/build/service/business-object-factory'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/mainapi'), require('@colijnit/transactionapi/build/model/transaction-info-response.bo'), require('@colijnit/articleapi/build/model/article-list-object-extended.bo'), require('@angular/common/http'), require('@colijnit/ioneconnector/build/utils/string-utils'), require('@angular/common'), require('@angular/animations'), require('@angular/platform-browser'), require('@colijnit/corecomponents'), require('@colijnit/mainapi/build/model/co-document'), require('@colijnit/articleapi/build/model/configurator-statistics-environment'), require('@colijnit/corecomponents_v12')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/product', ['exports', '@angular/core', 'rxjs', '@colijnit/ioneconnector/build/model/options', '@colijnit/articleapi/build/model/article-full-object', '@colijnit/articleapi/build/model/super-article', '@colijnit/articleapi/build/articles', '@colijnit/articleapi/build/model/delivery-prognosis', '@colijnit/articleapi/build/model/document-content', '@colijnit/ioneconnector/build/service/business-object-factory', '@colijnit/transactionapi/build/transaction', '@colijnit/mainapi', '@colijnit/transactionapi/build/model/transaction-info-response.bo', '@colijnit/articleapi/build/model/article-list-object-extended.bo', '@angular/common/http', '@colijnit/ioneconnector/build/utils/string-utils', '@angular/common', '@angular/animations', '@angular/platform-browser', '@colijnit/corecomponents', '@colijnit/mainapi/build/model/co-document', '@colijnit/articleapi/build/model/configurator-statistics-environment', '@colijnit/corecomponents_v12'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.product = {}), global.ng.core, global.rxjs, global.options, global.articleFullObject, global.superArticle, global.articles, global.deliveryPrognosis, global.documentContent, global.businessObjectFactory, global.transaction, global.mainapi, global.transactionInfoResponse_bo, global.articleListObjectExtended_bo, global.ng.common.http, global.stringUtils, global.ng.common, global.ng.animations, global.ng.platformBrowser, global.corecomponents, global.coDocument, global.configuratorStatisticsEnvironment, global.corecomponents_v12));
-})(this, (function (exports, i0, rxjs, options, articleFullObject, superArticle, articles, deliveryPrognosis, documentContent, businessObjectFactory, transaction, mainapi, transactionInfoResponse_bo, articleListObjectExtended_bo, i1, stringUtils, common, animations, i1$1, corecomponents, coDocument, configuratorStatisticsEnvironment, corecomponents_v12) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common/http'), require('@colijnit/ioneconnector/build/utils/string-utils'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/articleapi/build/model/article-full-object'), require('@colijnit/articleapi/build/model/super-article'), require('@colijnit/articleapi/build/articles'), require('@colijnit/articleapi/build/model/delivery-prognosis'), require('@colijnit/articleapi/build/model/document-content'), require('@colijnit/ioneconnector/build/service/business-object-factory'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/mainapi'), require('@colijnit/transactionapi/build/model/transaction-info-response.bo'), require('@colijnit/articleapi/build/model/article-list-object-extended.bo'), require('@angular/common'), require('@angular/animations'), require('@angular/platform-browser'), require('@colijnit/corecomponents'), require('@colijnit/mainapi/build/model/co-document'), require('@colijnit/articleapi/build/model/configurator-statistics-environment'), require('@colijnit/corecomponents_v12')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/product', ['exports', '@angular/core', 'rxjs', '@angular/common/http', '@colijnit/ioneconnector/build/utils/string-utils', '@colijnit/ioneconnector/build/model/options', '@colijnit/articleapi/build/model/article-full-object', '@colijnit/articleapi/build/model/super-article', '@colijnit/articleapi/build/articles', '@colijnit/articleapi/build/model/delivery-prognosis', '@colijnit/articleapi/build/model/document-content', '@colijnit/ioneconnector/build/service/business-object-factory', '@colijnit/transactionapi/build/transaction', '@colijnit/mainapi', '@colijnit/transactionapi/build/model/transaction-info-response.bo', '@colijnit/articleapi/build/model/article-list-object-extended.bo', '@angular/common', '@angular/animations', '@angular/platform-browser', '@colijnit/corecomponents', '@colijnit/mainapi/build/model/co-document', '@colijnit/articleapi/build/model/configurator-statistics-environment', '@colijnit/corecomponents_v12'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.product = {}), global.ng.core, global.rxjs, global.ng.common.http, global.stringUtils, global.options, global.articleFullObject, global.superArticle, global.articles, global.deliveryPrognosis, global.documentContent, global.businessObjectFactory, global.transaction, global.mainapi, global.transactionInfoResponse_bo, global.articleListObjectExtended_bo, global.ng.common, global.ng.animations, global.ng.platformBrowser, global.corecomponents, global.coDocument, global.configuratorStatisticsEnvironment, global.corecomponents_v12));
+})(this, (function (exports, i0, rxjs, i1, stringUtils, options, articleFullObject, superArticle, articles, deliveryPrognosis, documentContent, businessObjectFactory, transaction, mainapi, transactionInfoResponse_bo, articleListObjectExtended_bo, common, animations, i1$1, corecomponents, coDocument, configuratorStatisticsEnvironment, corecomponents_v12) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -31,8 +31,8 @@
         function Version() {
             this.name = "@colijnit/product";
             this.description = "Product detail page project for iOne";
-            this.symVer = "258.1.0";
-            this.publishDate = "4/10/2025, 1:56:55 PM";
+            this.symVer = "258.1.1";
+            this.publishDate = "27-5-2025 09:44:32";
         }
         return Version;
     }());
@@ -514,6 +514,32 @@
         __disposeResources: __disposeResources,
     };
 
+    var ProductEventService = /** @class */ (function () {
+        function ProductEventService() {
+            this.onAddToCart = new rxjs.Subject();
+            this.onAlternativeClick = new rxjs.Subject();
+            this.onAddToQuote = new rxjs.Subject();
+            this.onForceRenderImage = new rxjs.Subject();
+            this.onArticleReceived = new rxjs.Subject();
+            this.onSelectionsReceived = new rxjs.Subject();
+            this.onImageReceived = new rxjs.Subject();
+            this.onRenderStarted = new rxjs.Subject();
+            this.onRenderImageReceived = new rxjs.Subject();
+            this.onDraftRenderImageReceived = new rxjs.Subject();
+            this.onArticleInfoReceived = new rxjs.Subject();
+            this.onAnswersAvailable = new rxjs.Subject();
+            this.onReadyToRender = new rxjs.Subject();
+            this.onUpdateProductInfoTab = new rxjs.Subject();
+            this.errorMessage = new rxjs.Subject();
+            this.onGetRenderForRenderCarousel = new rxjs.Subject();
+        }
+        return ProductEventService;
+    }());
+    ProductEventService.decorators = [
+        { type: i0.Directive },
+        { type: i0.Injectable }
+    ];
+
     var JsonUtilsService = /** @class */ (function () {
         function JsonUtilsService() {
         }
@@ -552,6 +578,201 @@
                 },] }
     ];
 
+    var LanguageCode;
+    (function (LanguageCode) {
+        LanguageCode["Dutch"] = "nl-NL";
+        LanguageCode["English"] = "en-GB";
+        LanguageCode["German"] = "de-DE";
+        LanguageCode["French"] = "fr-FR";
+    })(LanguageCode || (LanguageCode = {}));
+
+    var Dictionary = /** @class */ (function () {
+        function Dictionary() {
+            this.strings = {
+                "en": {
+                    "ADDITIONAL_DATA": "Additional information",
+                    "ALTERNATIVE_PRODUCTS": "Alternative products",
+                    "ARTICLE_NUMBER": "Productnumber",
+                    "AS_CONFIGURED": "As configured",
+                    "CATEGORY": "Category",
+                    "CATEGORY_TYPE": "Category type",
+                    "CONFIGURE": "Configure",
+                    "DELIVERY_TIME_PERIOD": "Delivery time",
+                    "DESCRIPTION": "Description",
+                    "DOCUMENTS": "Documents",
+                    "DOWNLOADS": "Downloads",
+                    "FEATURES": "Features",
+                    "HEIGHT": "Height",
+                    "MATERIAL": "Material",
+                    "PRODUCT_IN_STOCK": "In stock",
+                    "PRODUCT_LIMITED_STOCK": "Limited stock",
+                    "PRODUCT_NOT_IN_STOCK": "Not in stock",
+                    "PROPERTIES": "Characteristics",
+                    "QUOTATION": "Quotation",
+                    "READ_MORE": "Read more",
+                    "RELATED_PRODUCTS": "Related products",
+                    "SHOPPING_CART_IN": "In Shopping Cart",
+                    "SHOW_IN": "Show in",
+                    "STOCK": "Stock",
+                    "SYMBOLS": "Symbols",
+                    "TITLE": "Title",
+                    "TURNOVERGROUP": "Turnover group",
+                    "VARIANTS": "Variations",
+                    "WIDTH": "Width",
+                    "SUGGESTION": "Suggestion",
+                },
+                "nl": {
+                    "ADDITIONAL_DATA": "Extra informatie",
+                    "ALTERNATIVE_PRODUCTS": "Alternatieve producten",
+                    "ARTICLE_NUMBER": "Artikel nummer",
+                    "AS_CONFIGURED": "Zoals samengesteld",
+                    "CATEGORY": "Categorie",
+                    "CATEGORY_TYPE": "Categorie type",
+                    "CONFIGURE": "Configureren",
+                    "DELIVERY_TIME_PERIOD": "Levertijd",
+                    "DESCRIPTION": "Omschrijving",
+                    "DOCUMENTS": "Documenten",
+                    "DOWNLOADS": "Downloads",
+                    "FEATURES": "Kenmerken",
+                    "HEIGHT": "Hoogte",
+                    "MATERIAL": "Materiaal",
+                    "PRODUCT_IN_STOCK": "Op voorraad",
+                    "PRODUCT_LIMITED_STOCK": "Beperkt op voorraad",
+                    "PRODUCT_NOT_IN_STOCK": "Niet op voorraad",
+                    "PROPERTIES": "Eigenschappen",
+                    "QUOTATION": "Quotatie",
+                    "READ_MORE": "Lees meer",
+                    "RELATED_PRODUCTS": "Gerelateerde producten",
+                    "SHOPPING_CART_IN": "In winkelwagen",
+                    "SHOW_IN": "Laat zien",
+                    "STOCK": "Voorraad",
+                    "SYMBOLS": "Symbolen",
+                    "TITLE": "Titel",
+                    "TURNOVERGROUP": "Omzetgroep",
+                    "VARIANTS": "Varianten",
+                    "WIDTH": "Breedte",
+                    "SUGGESTION": "Suggesties bij",
+                },
+                "de": {
+                    "ADDITIONAL_DATA": "Extra informatie",
+                    "ALTERNATIVE_PRODUCTS": "Alternative Produkte",
+                    "ARTICLE_NUMBER": "Artikelnummer",
+                    "CATEGORY": "Kategorie",
+                    "CATEGORY_TYPE": "Kategorietype",
+                    "CONFIGURE": "Konfigurieren",
+                    "DELIVERY_TIME_PERIOD": "Lieferzeit",
+                    "DESCRIPTION": "Beschreibung",
+                    "DOCUMENTS": "Dateien",
+                    "DOWNLOADS": "Downloads",
+                    "FEATURES": "Eigenschaften",
+                    "HEIGHT": "Höhe",
+                    "MATERIAL": "Material",
+                    "PRODUCT_IN_STOCK": "Auf lager",
+                    "PRODUCT_LIMITED_STOCK": "Begrentzt auf lager",
+                    "PRODUCT_NOT_IN_STOCK": "Nicht auf lager",
+                    "PROPERTIES": "Eigenschaften",
+                    "QUOTATION": "Angebot",
+                    "READ_MORE": "Lesen Sie mehr",
+                    "RELATED_PRODUCTS": "Verwandte Produkte",
+                    "SHOPPING_CART_IN": "Im Einkaufswagen",
+                    "SHOW_IN": "Zeigen",
+                    "STOCK": "Vorrat",
+                    "SYMBOLS": "Symbole",
+                    "TITLE": "Titulatur",
+                    "TURNOVERGROUP": "Umsatzgruppe",
+                    "VARIANTS": "Varianten",
+                    "WIDTH": "Breite",
+                    "SUGGESTION": "Suggesties bij",
+                }
+            };
+        }
+        return Dictionary;
+    }());
+
+    // The localization service, providing peers with text translation functionality.
+    var DictionaryService = /** @class */ (function () {
+        function DictionaryService(_http, _jsonUtils) {
+            this._http = _http;
+            this._jsonUtils = _jsonUtils;
+            this.dictionaryUrl = 'js/browser/res/dictionary/';
+            // private _dictionaryPromise: Map<LanguageCode, Promise<{ [key: string]: string }>> = new Map<LanguageCode, Promise<{ [key: string]: string }>>();
+            this._dictionaries = new Map();
+            // Some dictionary values have one or more '|~' texts in them, meant to be replaced with client-side given texts.
+            this._placeholder = '|~';
+        }
+        Object.defineProperty(DictionaryService.prototype, "language", {
+            get: function () {
+                return this._language;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DictionaryService.prototype, "rootUrl", {
+            set: function (value) {
+                this._rootUrl = value;
+                this._dictBasePath = this._rootUrl + '/' + this.dictionaryUrl;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        // Loads the dictionary for given language in memory.
+        DictionaryService.prototype.setDictionary = function (language) {
+            return __awaiter(this, void 0, void 0, function () {
+                var dictionary;
+                return __generator(this, function (_a) {
+                    this._language = language || LanguageCode.Dutch;
+                    if (!this._dictionaries.has(this._language)) {
+                        dictionary = new Dictionary();
+                        if (dictionary.strings[this._language.substr(0, 2).toLowerCase()] !== undefined) {
+                            this._dictionaries.set(this._language, dictionary.strings[this._language.substr(0, 2).toLowerCase()]);
+                        }
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
+        /**
+         * Returns the localized text for the given dictionary key.
+         * @param {string} key
+         * @param {boolean} [upperCaseFirst = true] False for first letter lowercase, true for first letter uppercase for returned dict val
+         * @param {string[]} replacementTexts Rest params for replacement of '|~' in returned dict value
+         * @returns {string} The translated text for given dictionary key
+         */
+        DictionaryService.prototype.get = function (key, upperCaseFirst) {
+            if (upperCaseFirst === void 0) { upperCaseFirst = true; }
+            var replacementTexts = [];
+            for (var _i = 2; _i < arguments.length; _i++) {
+                replacementTexts[_i - 2] = arguments[_i];
+            }
+            if (!stringUtils.StringUtils.IsStringWithLength(key)) {
+                return key || '';
+            }
+            var text = this._dictionaries.get(this.language)[key];
+            text = stringUtils.StringUtils.IsStringWithLength(text) ? text : key;
+            if (upperCaseFirst) {
+                text = text.charAt(0).toUpperCase() + text.slice(1);
+            }
+            else {
+                text = text.charAt(0).toLowerCase() + text.slice(1);
+            }
+            if (replacementTexts.length > 0) {
+                text = stringUtils.StringUtils.ReplaceOccurrencesIn.apply(stringUtils.StringUtils, __spreadArray([text, this._placeholder], __read(replacementTexts)));
+            }
+            return text;
+        };
+        return DictionaryService;
+    }());
+    DictionaryService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DictionaryService_Factory() { return new DictionaryService(i0__namespace.ɵɵinject(i1__namespace.HttpClient), i0__namespace.ɵɵinject(JsonUtilsService)); }, token: DictionaryService, providedIn: "root" });
+    DictionaryService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    DictionaryService.ctorParameters = function () { return [
+        { type: i1.HttpClient },
+        { type: JsonUtilsService }
+    ]; };
+
     var SettingsOptions = /** @class */ (function () {
         function SettingsOptions() {
             this.showStockStatus = false;
@@ -573,7 +794,7 @@
         RenderModes["RenderIone"] = "render_ione";
     })(RenderModes || (RenderModes = {}));
 
-    var RenderParameters = /** @class */ (function () {
+    var RenderParameters$1 = /** @class */ (function () {
         function RenderParameters() {
             this.host = "";
             this.port = 0;
@@ -583,44 +804,123 @@
         return RenderParameters;
     }());
 
-    var ProductSettings = /** @class */ (function () {
+    var ProductSettings = /** @class */ (function (_super) {
+        __extends(ProductSettings, _super);
         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();
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.session = undefined;
+            _this.createWebOrder = true;
+            _this.currencySymbol = '€';
+            _this.options = new SettingsOptions();
+            _this.renderParameters = new RenderParameters$1();
+            return _this;
         }
         return ProductSettings;
-    }());
+    }(options.Options));
 
-    var ProductEventService = /** @class */ (function () {
-        function ProductEventService() {
-            this.onAddToCart = new rxjs.Subject();
-            this.onAlternativeClick = new rxjs.Subject();
-            this.onAddToQuote = new rxjs.Subject();
-            this.onForceRenderImage = new rxjs.Subject();
-            this.onArticleReceived = new rxjs.Subject();
-            this.onSelectionsReceived = new rxjs.Subject();
-            this.onImageReceived = new rxjs.Subject();
-            this.onRenderStarted = new rxjs.Subject();
-            this.onRenderImageReceived = new rxjs.Subject();
-            this.onDraftRenderImageReceived = new rxjs.Subject();
-            this.onArticleInfoReceived = new rxjs.Subject();
-            this.onAnswersAvailable = new rxjs.Subject();
-            this.onUpdateProductInfoTab = new rxjs.Subject();
-            this.errorMessage = new rxjs.Subject();
+    var ProductSettingsService = /** @class */ (function () {
+        function ProductSettingsService(_jsonUtilsService, _dictionaryService) {
+            this._jsonUtilsService = _jsonUtilsService;
+            this._dictionaryService = _dictionaryService;
+            this.settingsLoaded = new rxjs.BehaviorSubject(false);
         }
-        return ProductEventService;
+        Object.defineProperty(ProductSettingsService.prototype, "settings", {
+            get: function () {
+                return this._settings;
+            },
+            set: function (value) {
+                this._settings = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ProductSettingsService.prototype.initializeSettings = function (finish) {
+            if (finish === void 0) { finish = true; }
+            return __awaiter(this, void 0, void 0, function () {
+                var jsonSettings;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(typeof settings === 'undefined')) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._jsonUtilsService.readJsonFile('product-settings.json')];
+                        case 1:
+                            jsonSettings = _a.sent();
+                            if (jsonSettings) {
+                                this.settings = Object.assign(new ProductSettings(), jsonSettings);
+                                this.settings.options = Object.assign(new SettingsOptions(), this.settings.options);
+                                if (finish) {
+                                    this.settingsFinished();
+                                }
+                            }
+                            return [3 /*break*/, 3];
+                        case 2:
+                            this.settings = Object.assign(new ProductSettings(), settings);
+                            this.settings.options = Object.assign(new SettingsOptions(), this.settings.options);
+                            if (finish) {
+                                this.settingsFinished();
+                            }
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        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 ProductSettings();
+                    }
+                    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.options) {
+                        this.settings.options = Object.assign({}, ownOptions, obj.options);
+                    }
+                    if (obj.hasOwnProperty('assetPath')) {
+                        this.settings.assetPath = obj['assetPath'];
+                        if (this.settings.assetPath[this.settings.assetPath.length - 1] !== '/') {
+                            this.settings.assetPath += '/';
+                        }
+                        this.settings.threeDAssetPath = this.settings.assetPath;
+                    }
+                    if (obj.hasOwnProperty('threeDAssetPath')) {
+                        this.settings.threeDAssetPath = obj['threeDAssetPath'];
+                        if (this.settings.threeDAssetPath[this.settings.threeDAssetPath.length - 1] !== '/') {
+                            this.settings.threeDAssetPath += '/';
+                        }
+                    }
+                    this.settingsFinished();
+                    return [2 /*return*/];
+                });
+            });
+        };
+        ProductSettingsService.prototype.settingsFinished = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._dictionaryService.setDictionary(this.settings.languageCode)];
+                        case 1:
+                            _a.sent();
+                            this.settingsLoaded.next(true);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return ProductSettingsService;
     }());
-    ProductEventService.decorators = [
-        { type: i0.Directive },
+    ProductSettingsService.decorators = [
         { type: i0.Injectable }
-    ];
+    ];
+    ProductSettingsService.ctorParameters = function () { return [
+        { type: JsonUtilsService },
+        { type: DictionaryService }
+    ]; };
 
     // 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.
     // Only to be used by the IOneControllerService.
@@ -812,382 +1112,83 @@
                 var response;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.articleConnector.getArticleFullObject(goodId, showLoader)];
-                        case 1:
-                            response = _a.sent();
-                            if (response && response.validationResult && response.validationResult.success) {
-                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(articleFullObject.ArticleFullObject, response.resultObject)];
-                            }
-                            else {
-                                return [2 /*return*/, null];
-                            }
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        ProductConnectorAdapterService.prototype.getSuperArticle = function (id, branch) {
-            return __awaiter(this, void 0, void 0, function () {
-                var response;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.articleConnector.getSuperArticleQuickSel(id, branch)];
-                        case 1:
-                            response = _a.sent();
-                            if (response && response.validationResult && response.validationResult.success) {
-                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(superArticle.SuperArticle, response.resultObject)];
-                            }
-                            else {
-                                return [2 /*return*/, null];
-                            }
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        ProductConnectorAdapterService.prototype.getDocumentContent = function (docId, thumbnail) {
-            if (thumbnail === void 0) { thumbnail = true; }
-            return __awaiter(this, void 0, void 0, function () {
-                var response;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.articleConnector.getDocumentContent(docId, thumbnail)];
-                        case 1:
-                            response = _a.sent();
-                            if (response && response.validationResult && response.validationResult.success) {
-                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(documentContent.DocumentContent, response.resultObject)];
-                            }
-                            else {
-                                return [2 /*return*/, null];
-                            }
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        ProductConnectorAdapterService.prototype.addWebSessionTransactionLine = function (transactionUuid, sku, quantity) {
-            return __awaiter(this, void 0, void 0, function () {
-                var response, infoResponse;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.transactionConnector.addWebSessionTransactionLine(transactionUuid, sku, quantity)];
-                        case 1:
-                            response = _a.sent();
-                            if (response && response.validationResult && response.validationResult.success) {
-                                infoResponse = this._boFactory.makeWithRawBackendData(transactionInfoResponse_bo.TransactionInfoResponse, response.resultObject);
-                                return [2 /*return*/, infoResponse.transactionInfo.uuid];
-                            }
-                            return [2 /*return*/, ""];
-                    }
-                });
-            });
-        };
-        return ProductConnectorAdapterService;
-    }());
-    ProductConnectorAdapterService.decorators = [
-        { type: i0.Injectable }
-    ];
-    ProductConnectorAdapterService.ctorParameters = function () { return [
-        { type: ProductEventService }
-    ]; };
-
-    var LanguageCode;
-    (function (LanguageCode) {
-        LanguageCode["Dutch"] = "nl-NL";
-        LanguageCode["English"] = "en-GB";
-        LanguageCode["German"] = "de-DE";
-        LanguageCode["French"] = "fr-FR";
-    })(LanguageCode || (LanguageCode = {}));
-
-    var Dictionary = /** @class */ (function () {
-        function Dictionary() {
-            this.strings = {
-                "en": {
-                    "ADDITIONAL_DATA": "Additional information",
-                    "ALTERNATIVE_PRODUCTS": "Alternative products",
-                    "ARTICLE_NUMBER": "Productnumber",
-                    "AS_CONFIGURED": "As configured",
-                    "CATEGORY": "Category",
-                    "CATEGORY_TYPE": "Category type",
-                    "CONFIGURE": "Configure",
-                    "DELIVERY_TIME_PERIOD": "Delivery time",
-                    "DESCRIPTION": "Description",
-                    "DOCUMENTS": "Documents",
-                    "DOWNLOADS": "Downloads",
-                    "FEATURES": "Features",
-                    "HEIGHT": "Height",
-                    "MATERIAL": "Material",
-                    "PRODUCT_IN_STOCK": "In stock",
-                    "PRODUCT_LIMITED_STOCK": "Limited stock",
-                    "PRODUCT_NOT_IN_STOCK": "Not in stock",
-                    "PROPERTIES": "Characteristics",
-                    "QUOTATION": "Quotation",
-                    "READ_MORE": "Read more",
-                    "RELATED_PRODUCTS": "Related products",
-                    "SHOPPING_CART_IN": "In Shopping Cart",
-                    "SHOW_IN": "Show in",
-                    "STOCK": "Stock",
-                    "SYMBOLS": "Symbols",
-                    "TITLE": "Title",
-                    "TURNOVERGROUP": "Turnover group",
-                    "VARIANTS": "Variations",
-                    "WIDTH": "Width",
-                    "SUGGESTION": "Suggestion",
-                },
-                "nl": {
-                    "ADDITIONAL_DATA": "Extra informatie",
-                    "ALTERNATIVE_PRODUCTS": "Alternatieve producten",
-                    "ARTICLE_NUMBER": "Artikel nummer",
-                    "AS_CONFIGURED": "Zoals samengesteld",
-                    "CATEGORY": "Categorie",
-                    "CATEGORY_TYPE": "Categorie type",
-                    "CONFIGURE": "Configureren",
-                    "DELIVERY_TIME_PERIOD": "Levertijd",
-                    "DESCRIPTION": "Omschrijving",
-                    "DOCUMENTS": "Documenten",
-                    "DOWNLOADS": "Downloads",
-                    "FEATURES": "Kenmerken",
-                    "HEIGHT": "Hoogte",
-                    "MATERIAL": "Materiaal",
-                    "PRODUCT_IN_STOCK": "Op voorraad",
-                    "PRODUCT_LIMITED_STOCK": "Beperkt op voorraad",
-                    "PRODUCT_NOT_IN_STOCK": "Niet op voorraad",
-                    "PROPERTIES": "Eigenschappen",
-                    "QUOTATION": "Quotatie",
-                    "READ_MORE": "Lees meer",
-                    "RELATED_PRODUCTS": "Gerelateerde producten",
-                    "SHOPPING_CART_IN": "In winkelwagen",
-                    "SHOW_IN": "Laat zien",
-                    "STOCK": "Voorraad",
-                    "SYMBOLS": "Symbolen",
-                    "TITLE": "Titel",
-                    "TURNOVERGROUP": "Omzetgroep",
-                    "VARIANTS": "Varianten",
-                    "WIDTH": "Breedte",
-                    "SUGGESTION": "Suggesties bij",
-                },
-                "de": {
-                    "ADDITIONAL_DATA": "Extra informatie",
-                    "ALTERNATIVE_PRODUCTS": "Alternative Produkte",
-                    "ARTICLE_NUMBER": "Artikelnummer",
-                    "CATEGORY": "Kategorie",
-                    "CATEGORY_TYPE": "Kategorietype",
-                    "CONFIGURE": "Konfigurieren",
-                    "DELIVERY_TIME_PERIOD": "Lieferzeit",
-                    "DESCRIPTION": "Beschreibung",
-                    "DOCUMENTS": "Dateien",
-                    "DOWNLOADS": "Downloads",
-                    "FEATURES": "Eigenschaften",
-                    "HEIGHT": "Höhe",
-                    "MATERIAL": "Material",
-                    "PRODUCT_IN_STOCK": "Auf lager",
-                    "PRODUCT_LIMITED_STOCK": "Begrentzt auf lager",
-                    "PRODUCT_NOT_IN_STOCK": "Nicht auf lager",
-                    "PROPERTIES": "Eigenschaften",
-                    "QUOTATION": "Angebot",
-                    "READ_MORE": "Lesen Sie mehr",
-                    "RELATED_PRODUCTS": "Verwandte Produkte",
-                    "SHOPPING_CART_IN": "Im Einkaufswagen",
-                    "SHOW_IN": "Zeigen",
-                    "STOCK": "Vorrat",
-                    "SYMBOLS": "Symbole",
-                    "TITLE": "Titulatur",
-                    "TURNOVERGROUP": "Umsatzgruppe",
-                    "VARIANTS": "Varianten",
-                    "WIDTH": "Breite",
-                    "SUGGESTION": "Suggesties bij",
-                }
-            };
-        }
-        return Dictionary;
-    }());
-
-    // The localization service, providing peers with text translation functionality.
-    var DictionaryService = /** @class */ (function () {
-        function DictionaryService(_http, _jsonUtils) {
-            this._http = _http;
-            this._jsonUtils = _jsonUtils;
-            this.dictionaryUrl = 'js/browser/res/dictionary/';
-            // private _dictionaryPromise: Map<LanguageCode, Promise<{ [key: string]: string }>> = new Map<LanguageCode, Promise<{ [key: string]: string }>>();
-            this._dictionaries = new Map();
-            // Some dictionary values have one or more '|~' texts in them, meant to be replaced with client-side given texts.
-            this._placeholder = '|~';
-        }
-        Object.defineProperty(DictionaryService.prototype, "language", {
-            get: function () {
-                return this._language;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DictionaryService.prototype, "rootUrl", {
-            set: function (value) {
-                this._rootUrl = value;
-                this._dictBasePath = this._rootUrl + '/' + this.dictionaryUrl;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        // Loads the dictionary for given language in memory.
-        DictionaryService.prototype.setDictionary = function (language) {
-            return __awaiter(this, void 0, void 0, function () {
-                var dictionary;
-                return __generator(this, function (_a) {
-                    this._language = language || LanguageCode.Dutch;
-                    if (!this._dictionaries.has(this._language)) {
-                        dictionary = new Dictionary();
-                        if (dictionary.strings[this._language.substr(0, 2).toLowerCase()] !== undefined) {
-                            this._dictionaries.set(this._language, dictionary.strings[this._language.substr(0, 2).toLowerCase()]);
-                        }
+                        case 0: return [4 /*yield*/, this.articleConnector.getArticleFullObject(goodId, showLoader)];
+                        case 1:
+                            response = _a.sent();
+                            if (response && response.validationResult && response.validationResult.success) {
+                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(articleFullObject.ArticleFullObject, response.resultObject)];
+                            }
+                            else {
+                                return [2 /*return*/, null];
+                            }
+                            return [2 /*return*/];
                     }
-                    return [2 /*return*/];
                 });
             });
         };
-        /**
-         * Returns the localized text for the given dictionary key.
-         * @param {string} key
-         * @param {boolean} [upperCaseFirst = true] False for first letter lowercase, true for first letter uppercase for returned dict val
-         * @param {string[]} replacementTexts Rest params for replacement of '|~' in returned dict value
-         * @returns {string} The translated text for given dictionary key
-         */
-        DictionaryService.prototype.get = function (key, upperCaseFirst) {
-            if (upperCaseFirst === void 0) { upperCaseFirst = true; }
-            var replacementTexts = [];
-            for (var _i = 2; _i < arguments.length; _i++) {
-                replacementTexts[_i - 2] = arguments[_i];
-            }
-            if (!stringUtils.StringUtils.IsStringWithLength(key)) {
-                return key || '';
-            }
-            var text = this._dictionaries.get(this.language)[key];
-            text = stringUtils.StringUtils.IsStringWithLength(text) ? text : key;
-            if (upperCaseFirst) {
-                text = text.charAt(0).toUpperCase() + text.slice(1);
-            }
-            else {
-                text = text.charAt(0).toLowerCase() + text.slice(1);
-            }
-            if (replacementTexts.length > 0) {
-                text = stringUtils.StringUtils.ReplaceOccurrencesIn.apply(stringUtils.StringUtils, __spreadArray([text, this._placeholder], __read(replacementTexts)));
-            }
-            return text;
-        };
-        return DictionaryService;
-    }());
-    DictionaryService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DictionaryService_Factory() { return new DictionaryService(i0__namespace.ɵɵinject(i1__namespace.HttpClient), i0__namespace.ɵɵinject(JsonUtilsService)); }, token: DictionaryService, providedIn: "root" });
-    DictionaryService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    DictionaryService.ctorParameters = function () { return [
-        { type: i1.HttpClient },
-        { type: JsonUtilsService }
-    ]; };
-
-    var ProductSettingsService = /** @class */ (function () {
-        function ProductSettingsService(_jsonUtilsService, _dictionaryService) {
-            this._jsonUtilsService = _jsonUtilsService;
-            this._dictionaryService = _dictionaryService;
-            this.settingsLoaded = new rxjs.BehaviorSubject(false);
-        }
-        Object.defineProperty(ProductSettingsService.prototype, "settings", {
-            get: function () {
-                return this._settings;
-            },
-            set: function (value) {
-                this._settings = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ProductSettingsService.prototype.initializeSettings = function (finish) {
-            if (finish === void 0) { finish = true; }
+        ProductConnectorAdapterService.prototype.getSuperArticle = function (id, branch) {
             return __awaiter(this, void 0, void 0, function () {
-                var jsonSettings;
+                var response;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0:
-                            if (!(typeof settings === 'undefined')) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this._jsonUtilsService.readJsonFile('product-settings.json')];
+                        case 0: return [4 /*yield*/, this.articleConnector.getSuperArticleQuickSel(id, branch)];
                         case 1:
-                            jsonSettings = _a.sent();
-                            if (jsonSettings) {
-                                this.settings = Object.assign(new ProductSettings(), jsonSettings);
-                                this.settings.options = Object.assign(new SettingsOptions(), this.settings.options);
-                                if (finish) {
-                                    this.settingsFinished();
-                                }
+                            response = _a.sent();
+                            if (response && response.validationResult && response.validationResult.success) {
+                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(superArticle.SuperArticle, response.resultObject)];
                             }
-                            return [3 /*break*/, 3];
-                        case 2:
-                            this.settings = Object.assign(new ProductSettings(), settings);
-                            this.settings.options = Object.assign(new SettingsOptions(), this.settings.options);
-                            if (finish) {
-                                this.settingsFinished();
+                            else {
+                                return [2 /*return*/, null];
                             }
-                            _a.label = 3;
-                        case 3: return [2 /*return*/];
+                            return [2 /*return*/];
                     }
                 });
             });
         };
-        ProductSettingsService.prototype.createSettingsFromObject = function (obj) {
+        ProductConnectorAdapterService.prototype.getDocumentContent = function (docId, thumbnail) {
+            if (thumbnail === void 0) { thumbnail = true; }
             return __awaiter(this, void 0, void 0, function () {
-                var ownOptions, ownRenderParameters;
+                var response;
                 return __generator(this, function (_a) {
-                    if (!this.settings) {
-                        this.settings = new ProductSettings();
-                    }
-                    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.options) {
-                        this.settings.options = Object.assign({}, ownOptions, obj.options);
-                    }
-                    if (obj.hasOwnProperty('assetPath')) {
-                        this.settings.assetPath = obj['assetPath'];
-                        if (this.settings.assetPath[this.settings.assetPath.length - 1] !== '/') {
-                            this.settings.assetPath += '/';
-                        }
-                        this.settings.threeDAssetPath = this.settings.assetPath;
-                    }
-                    if (obj.hasOwnProperty('threeDAssetPath')) {
-                        this.settings.threeDAssetPath = obj['threeDAssetPath'];
-                        if (this.settings.threeDAssetPath[this.settings.threeDAssetPath.length - 1] !== '/') {
-                            this.settings.threeDAssetPath += '/';
-                        }
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.articleConnector.getDocumentContent(docId, thumbnail)];
+                        case 1:
+                            response = _a.sent();
+                            if (response && response.validationResult && response.validationResult.success) {
+                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(documentContent.DocumentContent, response.resultObject)];
+                            }
+                            else {
+                                return [2 /*return*/, null];
+                            }
+                            return [2 /*return*/];
                     }
-                    this.settingsFinished();
-                    return [2 /*return*/];
                 });
             });
         };
-        ProductSettingsService.prototype.settingsFinished = function () {
+        ProductConnectorAdapterService.prototype.addWebSessionTransactionLine = function (transactionUuid, sku, quantity) {
             return __awaiter(this, void 0, void 0, function () {
+                var response, infoResponse;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._dictionaryService.setDictionary(this.settings.languageCode)];
+                        case 0: return [4 /*yield*/, this.transactionConnector.addWebSessionTransactionLine(transactionUuid, sku, quantity)];
                         case 1:
-                            _a.sent();
-                            this.settingsLoaded.next(true);
-                            return [2 /*return*/];
+                            response = _a.sent();
+                            if (response && response.validationResult && response.validationResult.success) {
+                                infoResponse = this._boFactory.makeWithRawBackendData(transactionInfoResponse_bo.TransactionInfoResponse, response.resultObject);
+                                return [2 /*return*/, infoResponse.transactionInfo.uuid];
+                            }
+                            return [2 /*return*/, ""];
                     }
                 });
             });
         };
-        return ProductSettingsService;
+        return ProductConnectorAdapterService;
     }());
-    ProductSettingsService.decorators = [
+    ProductConnectorAdapterService.decorators = [
         { type: i0.Injectable }
     ];
-    ProductSettingsService.ctorParameters = function () { return [
-        { type: JsonUtilsService },
-        { type: DictionaryService }
+    ProductConnectorAdapterService.ctorParameters = function () { return [
+        { type: ProductEventService }
     ]; };
 
     // Holds all iONE backend related state and methods for a running HomeDecorator. To be used anywhere internally.
@@ -1327,7 +1328,7 @@
     ]; };
 
     var IoneProductComponent = /** @class */ (function () {
-        function IoneProductComponent(_dictionary, _jsonUtils, _ione, _changeDetector, _appEventService, _settingsService) {
+        function IoneProductComponent(_appEventService, _settingsService) {
             var _this = this;
             // this.sku = 'CF-HILL';
             // this.sku = 'CF-ALMADA';
@@ -1341,15 +1342,15 @@
             // this.sku = '104';
             // this.sku = "70000107";
             // this.sku = "grover";
-            this._dictionary = _dictionary;
-            this._jsonUtils = _jsonUtils;
-            this._ione = _ione;
-            this._changeDetector = _changeDetector;
+            // this.sku = "1000610952";
+            // this.sku = "4387";
             this._appEventService = _appEventService;
             this._settingsService = _settingsService;
+            this.enableRenderCarousel = true;
             this.handleAddArticleInternally = true;
             this.onAddToCart = new i0.EventEmitter();
             this.forceRenderImage = new i0.EventEmitter();
+            this.getRenderForRenderCarousel = new i0.EventEmitter();
             this.onAlternativeClick = new i0.EventEmitter();
             this.onArticleInfoReceived = new i0.EventEmitter();
             this.onArticleReceived = new i0.EventEmitter();
@@ -1360,9 +1361,7 @@
             this.settingsLoaded = false;
             this.showHD = false;
             this._subs = [];
-            this._subs.push(
-            // this._dictionary.dictionaryLoaded.subscribe(d => this.upAndLoaded = true),
-            this._appEventService.onAddToCart.subscribe(function (data) {
+            this._subs.push(this._appEventService.onAddToCart.subscribe(function (data) {
                 _this._handleAddToCart(data);
             }), 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._appEventService.onAnswersAvailable.subscribe(function (answers) { return _this._handleAnswersAvailable(answers); }), this._settingsService.settingsLoaded.subscribe(function (loaded) {
                 _this.settingsLoaded = loaded;
@@ -1400,9 +1399,6 @@
                 });
             });
         };
-        IoneProductComponent.prototype.ngOnChanges = function (changes) {
-            this._changeDetector.detectChanges();
-        };
         IoneProductComponent.prototype.ngOnDestroy = function () {
             this._subs.forEach(function (s) { return s.unsubscribe(); });
         };
@@ -1428,16 +1424,18 @@
     IoneProductComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-ione-product',
-                    template: "\n     <app-product-page *ngIf=\"settingsLoaded\"\n                        [createFrozenArticle]=\"handleAddArticleInternally\"\n                        [isReturn]=\"isReturn\"\n                        (openStockEvent)=\"openStock()\"\n                        [sku]=\"sku\"\n                        [showRelatedProductsPopup]=\"showRelatedProductsPopup\"\n      ></app-product-page>\n    <!--  <co-button [label]=\"'click'\" (click)=\"showHD = !showHD\"></co-button>\n      <co-product-hd [sku]=\"'657946ca-e1e1-41fd-7ae0-08dbf7df0cef'\" *ngIf=\"showHD\"></co-product-hd>-->\n  ",
+                    template: "\n    <app-product-page *ngIf=\"settingsLoaded\"\n                      [createFrozenArticle]=\"handleAddArticleInternally\"\n                      [isReturn]=\"isReturn\"\n                      [sku]=\"sku\"\n                      [showRelatedProductsPopup]=\"showRelatedProductsPopup\"\n                      [enableRenderCarousel]=\"enableRenderCarousel\"\n                      (openStockEvent)=\"openStock()\"\n    ></app-product-page>\n    <!--  <co-button [label]=\"'click'\" (click)=\"showHD = !showHD\"></co-button>\n      <co-product-hd [sku]=\"'657946ca-e1e1-41fd-7ae0-08dbf7df0cef'\" *ngIf=\"showHD\"></co-product-hd>-->\n  ",
+                    providers: [
+                        ProductSettingsService,
+                        ProductConnectorService,
+                        ProductEventService,
+                        ProductConnectorAdapterService
+                    ],
                     encapsulation: i0.ViewEncapsulation.Emulated,
                     styles: [""]
                 },] }
     ];
     IoneProductComponent.ctorParameters = function () { return [
-        { type: DictionaryService },
-        { type: JsonUtilsService },
-        { type: ProductConnectorService },
-        { type: i0.ChangeDetectorRef },
         { type: ProductEventService },
         { type: ProductSettingsService }
     ]; };
@@ -1445,10 +1443,12 @@
         sku: [{ type: i0.Input }],
         isReturn: [{ type: i0.Input }],
         showRelatedProductsPopup: [{ type: i0.Input }],
+        enableRenderCarousel: [{ type: i0.Input }],
         settings: [{ type: i0.Input }],
         handleAddArticleInternally: [{ type: i0.Input }],
         onAddToCart: [{ type: i0.Output }],
         forceRenderImage: [{ type: i0.Output }],
+        getRenderForRenderCarousel: [{ type: i0.Output }],
         onAlternativeClick: [{ type: i0.Output }],
         onArticleInfoReceived: [{ type: i0.Output }],
         onArticleReceived: [{ type: i0.Output }],
@@ -1478,6 +1478,8 @@
     var IconEnum;
     (function (IconEnum) {
         IconEnum["AddToCartDrop"] = "add_to_cart_drop";
+        IconEnum["ArrowPointLeft"] = "arrow_point_left";
+        IconEnum["ArrowPointRight"] = "arrow_point_right";
         IconEnum["CrossSkinny"] = "cross_skinny";
         IconEnum["DeliveryTruck"] = "delivery_truck";
         IconEnum["Download"] = "download";
@@ -1499,6 +1501,8 @@
     /** AUTO GENERATED FILE. DO NOT CHANGE.. **/
     var IconSvg = {
         "add_to_cart_drop": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M16.58,34.84a1.8,1.8,0,1,0,1.8,1.8A1.79,1.79,0,0,0,16.58,34.84Z\" fill=\"#484f60\"/><path d=\"M31.49,34.84a1.8,1.8,0,1,0,1.8,1.8A1.79,1.79,0,0,0,31.49,34.84Z\" fill=\"#484f60\"/><path d=\"M35.6,17.9l-1.51.18L31.88,20.3l1.31-.17a.88.88,0,0,1,1,1.08L32.35,29.5a1.52,1.52,0,0,1-1.44,1.2H16.51a1.75,1.75,0,0,1-1.57-1.17l-2.31-5.6a1,1,0,0,1,.85-1.29l4.43-.56-1.86-1.86-5.13.61a1,1,0,0,0-.87,1.28l3.34,9.44A1.73,1.73,0,0,0,15,32.72H32.64a1.51,1.51,0,0,0,1.43-1.2L36.6,19A.89.89,0,0,0,35.6,17.9Z\" fill=\"#484f60\"/><path d=\"M39,17a1.87,1.87,0,0,0-1.36,1.46l-.42,2.89c-.1.67.31,1,.9.7a2.75,2.75,0,0,0,1.33-1.7L40,18A.73.73,0,0,0,39,17Z\" fill=\"#484f60\"/><polygon points=\"24 25.35 32.04 17.3 27.04 17.3 27.04 10 20.95 10 20.95 17.3 15.96 17.3 24 25.35\" fill=\"#484f60\"/></svg>",
+        "arrow_point_left": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51 51\" enable-background=\"new 0 0 51 51\" ><path fill=\"#484F5F\" d=\"M31.9,36.7l-14.7-9.6C17.1,27,17,26.9,17,26.7v-2.4c0-0.2,0.1-0.3,0.2-0.4l14.7-9.6c0.2-0.2,0.5-0.1,0.7,0.1l1.4,2.1c0.2,0.2,0.1,0.5-0.1,0.7l-12,7.8c-0.3,0.2-0.3,0.6,0,0.8l12,7.8c0.2,0.2,0.3,0.5,0.1,0.7l-1.4,2.1C32.4,36.8,32.1,36.8,31.9,36.7z\"/></svg>",
+        "arrow_point_right": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51 51\" enable-background=\"new 0 0 51 51\" ><path fill=\"#484F5F\" d=\"M19.1,14.3l14.7,9.6c0.1,0.1,0.2,0.2,0.2,0.4v2.4c0,0.2-0.1,0.3-0.2,0.4l-14.7,9.6c-0.2,0.2-0.5,0.1-0.7-0.1l-1.4-2.1c-0.2-0.2-0.1-0.5,0.1-0.7l12-7.8c0.3-0.2,0.3-0.6,0-0.8l-12-7.8c-0.2-0.2-0.3-0.5-0.1-0.7l1.4-2.1C18.6,14.2,18.9,14.2,19.1,14.3z\"/></svg>",
         "cross_skinny": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\"><g ><polygon points=\"25.35 5.52 24.65 4.81 15 14.46 5.35 4.81 4.65 5.52 14.29 15.17 4.65 24.81 5.35 25.52 15 15.87 24.65 25.52 25.35 24.81 15.71 15.17 25.35 5.52\" fill=\"#484f60\"/></g></svg>",
         "delivery_truck": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M25,45A20,20,0,1,1,45,25,20,20,0,0,1,25,45ZM25,6.29A18.71,18.71,0,1,0,43.71,25,18.73,18.73,0,0,0,25,6.29Z\" fill=\"#484f60\"/><path d=\"M21.86,24.09a7.14,7.14,0,0,1,.72-3.24,6.94,6.94,0,0,1,1.18-1.66H13v10.1h8.51a3.25,3.25,0,0,1,3.27-3.07A3.33,3.33,0,0,1,27,27V25.75H21.9Z\" fill=\"#484f60\" opacity=\"0.5\"/><path d=\"M21.65,30.47h-.48a3.51,3.51,0,0,1,1.13,2.19h1.57a3.22,3.22,0,0,1-1.41-.83A3.13,3.13,0,0,1,21.65,30.47Z\" fill=\"#484f60\" opacity=\"0.5\"/><path d=\"M34.63,21.89H28.87c-.3.25-.5.43-.63.56v8H28a3.19,3.19,0,0,1-.82,1.37,3.3,3.3,0,0,1-1.41.82H29a3.53,3.53,0,0,1,7,0h1V27.1Zm-.2,5.38H30.8a.47.47,0,0,1-.46-.46V23.36a.46.46,0,0,1,.46-.46h2.1a.45.45,0,0,1,.42.27l1.53,3.45A.46.46,0,0,1,34.43,27.27Z\" fill=\"#484f60\" opacity=\"0.5\"/><path d=\"M16.42,30.47a3.51,3.51,0,0,0-1.13,2.19H14.6l-1.6-1V30.47Z\" fill=\"#484f60\" opacity=\"0.5\"/><path d=\"M30,33.08a2.53,2.53,0,1,0,2.53-2.53A2.52,2.52,0,0,0,30,33.08Z\" fill=\"#484f60\" opacity=\"0.5\"/><path d=\"M16.27,33.08a2.53,2.53,0,1,0,2.53-2.53A2.52,2.52,0,0,0,16.27,33.08Z\" fill=\"#484f60\" opacity=\"0.5\"/><path d=\"M22.45,17.27h-3.2a4.29,4.29,0,0,1,1.61-3.49,6.45,6.45,0,0,1,4.31-1.38,6.79,6.79,0,0,1,2.92.57A4.72,4.72,0,0,1,30,14.62a4,4,0,0,1,.72,2.26,3.74,3.74,0,0,1-.23,1.27,5.31,5.31,0,0,1-.73,1.29,12,12,0,0,1-1.4,1.29A8.74,8.74,0,0,0,27.06,22a3.17,3.17,0,0,0-.46.94,7.56,7.56,0,0,0-.23,1.65h-3.3v-.49a6,6,0,0,1,.59-2.68,6.8,6.8,0,0,1,1.94-2.25,9.44,9.44,0,0,0,1.56-1.41,1.5,1.5,0,0,0,.27-.9,1.47,1.47,0,0,0-.65-1.19A2.9,2.9,0,0,0,25,15.14a2.77,2.77,0,0,0-1.84.6A1.91,1.91,0,0,0,22.45,17.27Z\" fill=\"#484f60\"/><path d=\"M24.78,27.42a2.06,2.06,0,0,1,1.51.61,2,2,0,0,1,.63,1.47A2,2,0,0,1,26.3,31a2.08,2.08,0,0,1-1.5.62A2,2,0,0,1,23.31,31a2.08,2.08,0,0,1,0-2.95A2,2,0,0,1,24.78,27.42Z\" fill=\"#484f60\"/></svg>",
         "download": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\" version=\"1.1\" sodipodi:docname=\"download.svg\" inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\"><metadata ><rdf:RDF><cc:Work rdf:about=\"\"><dc:format>image/svg+xml</dc:format><dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs /><sodipodi:namedview pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1\" objecttolerance=\"10\" gridtolerance=\"10\" guidetolerance=\"10\" inkscape:pageopacity=\"0\" inkscape:pageshadow=\"2\" inkscape:window-width=\"1920\" inkscape:window-height=\"1017\" showgr inkscape:zoom=\"6.675088\" inkscape:cx=\"-14.056273\" inkscape:cy=\"29.806579\" inkscape:window-x=\"-8\" inkscape:window-y=\"-8\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"svg8\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"m 498.966,339.946 c -7.197,0 -13.034,5.837 -13.034,13.034 v 49.804 c 0,28.747 -23.388,52.135 -52.135,52.135 H 78.203 c -28.747,0 -52.135,-23.388 -52.135,-52.135 V 352.98 c 0,-7.197 -5.835,-13.034 -13.034,-13.034 C 5.835,339.946 0,345.782 0,352.98 v 49.804 c 0,43.121 35.082,78.203 78.203,78.203 h 355.594 c 43.121,0 78.203,-35.082 78.203,-78.203 V 352.98 c 0,-7.198 -5.835,-13.034 -13.034,-13.034 z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"M 419.833,391.3 H 92.167 c -7.197,0 -13.034,5.837 -13.034,13.034 0,7.197 5.835,13.034 13.034,13.034 h 327.665 c 7.199,0 13.034,-5.835 13.034,-13.034 0,-7.197 -5.835,-13.034 -13.033,-13.034 z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"m 387.919,207.93 c -4.795,-5.367 -13.034,-5.834 -18.404,-1.038 L 269.033,296.657 V 44.048 c 0,-7.197 -5.835,-13.034 -13.034,-13.034 -7.197,0 -13.034,5.835 -13.034,13.034 V 296.657 L 142.483,206.893 c -5.367,-4.796 -13.607,-4.328 -18.404,1.038 -4.794,5.369 -4.331,13.609 1.037,18.404 l 109.174,97.527 c 6.187,5.529 13.946,8.292 21.708,8.292 7.759,0 15.519,-2.763 21.708,-8.289 l 109.174,-97.53 c 5.37,-4.798 5.834,-13.038 1.039,-18.405 z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\" style=\"fill:#484f60;fill-opacity:1\" /></svg>",
@@ -1594,6 +1598,10 @@
                 else {
                     _this.showAddToCart = true;
                 }
+            }), this.appEventService.onGetRenderForRenderCarousel.subscribe(function (renderParameters) {
+                if (_this.selections.nativeElement) {
+                    _this.selections.nativeElement.getRenderForRenderCarousel(renderParameters);
+                }
             }));
         }
         Object.defineProperty(ProductPageComponent.prototype, "sku", {
@@ -1756,7 +1764,7 @@
     ProductPageComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-product-page',
-                    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                                 (onAnswersAvailable)=\"appEventService.onAnswersAvailable.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                                   [createFrozenArticle]=\"createFrozenArticle\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [showAddToCart]=\"showAddToCart\"\r\n                                   [article]=\"article\"\r\n                                   [externalSource]=\"externalSource\"\r\n                                   [isReturn]=\"isReturn\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n                                   (showRelatedPopup)=\"handlePopUpChange($event)\"\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                                   [showAddToCart]=\"showAddToCart\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   [externalSource]=\"externalSource\"\r\n                                   [isReturn]=\"isReturn\"\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                                 [externalSource]=\"externalSource\"\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\" [goodId]=\"article?.goodId\" (openStockEvent)=\"openStock()\"></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\r\n              *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n              [externalSource]=\"externalSource\"\r\n              [articles]=\"article?.relatedArticles\"\r\n              [refType]=\"1\"\r\n              [label]=\"'RELATED_PRODUCTS' | localize\">\r\n            </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\r\n            *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n            [externalSource]=\"externalSource\"\r\n            [articles]=\"article?.relatedArticles\"\r\n            [refType]=\"4\"\r\n            [isSmallModus]=\"false\"\r\n            [label]=\"'ALTERNATIVE_PRODUCTS' | localize\">\r\n          </app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"showRelatedProductsPopup\">\r\n      <co-product-dialog\r\n        [mainArticle]=\"article\"\r\n        [articles]=\"article?.relatedArticles\"\r\n        [refType]=\"1\"\r\n        (closeRelatedPopup)=\"handlePopUpChange($event)\"\r\n      >\r\n      </co-product-dialog>\r\n\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\r\n\r\n  </div>\r\n</ng-container>\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\r\n            <app-image-carousel\r\n              *ngIf=\"!enableRenderCarousel\"\r\n              [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\"\r\n              [images]=\"article?.images\"\r\n              [showRefresh]=\"configurable && threeD\">\r\n            </app-image-carousel>\r\n\r\n            <app-render-carousel\r\n              *ngIf=\"enableRenderCarousel\"\r\n              [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\"\r\n              [article]=\"article\">\r\n            </app-render-carousel>\r\n\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-configurator\r\n                #configurator\r\n                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\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\"\r\n                                 [class.show-selections]=\"configuring\"\r\n                                 [@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                                 (onAnswersAvailable)=\"appEventService.onAnswersAvailable.next($event.detail)\"\r\n                                 (onReadyToRender)=\"appEventService.onReadyToRender.next($event.detail)\"\r\n                                 (onRenderImageReceived)=\"appEventService.onRenderImageReceived.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              [createFrozenArticle]=\"createFrozenArticle\"\r\n              [configuring]=\"configuring\"\r\n              [showAddToCart]=\"showAddToCart\"\r\n              [article]=\"article\"\r\n              [externalSource]=\"externalSource\"\r\n              [isReturn]=\"isReturn\"\r\n              (startConfiguration)=\"handleStartConfiguration()\"\r\n              (showRelatedPopup)=\"handlePopUpChange($event)\"\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                                   [showAddToCart]=\"showAddToCart\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   [externalSource]=\"externalSource\"\r\n                                   [isReturn]=\"isReturn\"\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                                 [externalSource]=\"externalSource\"\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\" [goodId]=\"article?.goodId\" (openStockEvent)=\"openStock()\"></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\r\n            *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n            [externalSource]=\"externalSource\"\r\n            [articles]=\"article?.relatedArticles\"\r\n            [refType]=\"1\"\r\n            [label]=\"'RELATED_PRODUCTS' | localize\">\r\n          </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\r\n            *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n            [externalSource]=\"externalSource\"\r\n            [articles]=\"article?.relatedArticles\"\r\n            [refType]=\"4\"\r\n            [isSmallModus]=\"false\"\r\n            [label]=\"'ALTERNATIVE_PRODUCTS' | localize\">\r\n          </app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"showRelatedProductsPopup\">\r\n      <co-product-dialog\r\n        [mainArticle]=\"article\"\r\n        [articles]=\"article?.relatedArticles\"\r\n        [refType]=\"1\"\r\n        (closeRelatedPopup)=\"handlePopUpChange($event)\"\r\n      >\r\n      </co-product-dialog>\r\n\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\r\n\r\n  </div>\r\n</ng-container>\r\n",
                     animations: [
                         animations.trigger('toggleFullScreen', [
                             animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
@@ -1789,7 +1797,7 @@
                             animations.transition('void => *', animations.animate('200ms ease-in-out')),
                         ])
                     ],
-                    styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:1400px;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child{margin-top:0}.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:55%;flex-direction:column}.page-wrapper-right{display:flex;width:45%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.threed-selections ::ng-deep .co-summary-line{cursor:pointer}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:1px solid #efefef}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional{width:100%}.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74B77F}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;grid-gap:15px;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:all .2s ease}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:bold;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:bold;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left{width:100%}.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"]
+                    styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child{margin-top:0}.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:65%;flex-direction:column}.page-wrapper-right{display:flex;width:35%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.threed-selections ::ng-deep .co-summary-line{cursor:pointer}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:none}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional{width:100%}.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74B77F}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;grid-gap:15px;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:all .2s ease}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:bold;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:bold;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left{width:100%}.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"]
                 },] }
     ];
     ProductPageComponent.ctorParameters = function () { return [
@@ -1810,6 +1818,7 @@
         createFrozenArticle: [{ type: i0.Input }],
         isReturn: [{ type: i0.Input }],
         showRelatedProductsPopup: [{ type: i0.Input }],
+        enableRenderCarousel: [{ type: i0.Input }],
         openStockEvent: [{ type: i0.Output }]
     };
 
@@ -1837,7 +1846,7 @@
     ProductSelectorTypeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-product-selector-type',
-                    template: "\n        <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  ",
+                    template: "\n        <div *ngIf=\"show2D || show3D\" class=\"show-in\" [textContent]=\"'SHOW_IN' | localize\"></div>\n        <co-icon *ngIf=\"show2D && !showRenderCarousel\" class=\"selector-type-icon\"\n                 [class.active]=\"currentType === type.TwoD\"\n                 [iconData]=\"twoDIcon\"\n                 (click)=\"handleIconClick(type.TwoD)\"\n        ></co-icon>\n\n        <co-icon *ngIf=\"show2D && showRenderCarousel\" class=\"selector-type-icon\"\n                 [class.active]=\"currentType === type.TwoD\"\n                 [iconData]=\"twoDIcon\"\n                 (click)=\"handleIconClick(type.TwoD)\"\n        ></co-icon>\n\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:none;height:34px;width:34px;cursor:pointer}::ng-deep co-icon.selector-type-icon.active{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}::ng-deep co-icon.selector-type-icon.active [fill]{fill:#fff}\n"]
                 },] }
     ];
@@ -1848,6 +1857,7 @@
     ProductSelectorTypeComponent.propDecorators = {
         show2D: [{ type: i0.Input }],
         show3D: [{ type: i0.Input }],
+        showRenderCarousel: [{ type: i0.Input }],
         currentType: [{ type: i0.Input }],
         onIconClick: [{ type: i0.Output }],
         currentTypeChange: [{ type: i0.Output }]
@@ -3384,6 +3394,137 @@
                 },] }
     ];
 
+    var VectorObject = /** @class */ (function () {
+        function VectorObject() {
+        }
+        return VectorObject;
+    }());
+    var RenderParameters = /** @class */ (function () {
+        function RenderParameters() {
+        }
+        return RenderParameters;
+    }());
+    var RenderCarouselComponent = /** @class */ (function () {
+        function RenderCarouselComponent(iconCache, _appEventService, _changeDetector) {
+            var _this = this;
+            this.iconCache = iconCache;
+            this._appEventService = _appEventService;
+            this._changeDetector = _changeDetector;
+            this.showRefresh = false;
+            this.resizing = false;
+            this.showLoader = true;
+            this.renderedImageLoaded = false;
+            // For now we will just use mock data
+            this.renderAngles = [0, -45, -90, -135, -180, -225, -270, -315];
+            this.currentRenderAngleIndex = 0;
+            this.icon = IconEnum;
+            this._subs = [];
+            this._subs.push(this._appEventService.onReadyToRender.subscribe(function (readyToRender) {
+                if (readyToRender) {
+                    _this.showLoader = true;
+                    _this._createNewRender();
+                }
+            }), this._appEventService.onRenderStarted.subscribe(function () {
+                _this.showLoader = true;
+                _this._changeDetector.detectChanges();
+            }), this._appEventService.onRenderImageReceived.subscribe(function (image) {
+                _this.renderedImage = image;
+                _this.showLoader = false;
+                _this._changeDetector.detectChanges();
+            }));
+        }
+        RenderCarouselComponent.prototype.handleWindowResize = function () {
+            var _this = this;
+            this.resizing = true;
+            clearTimeout(this._resizeTimer);
+            this._resizeTimer = setTimeout(function () {
+                _this.resizing = false;
+            }, 200);
+        };
+        RenderCarouselComponent.prototype.gotoNextSlide = function () {
+            this.showLoader = true;
+            this.currentRenderAngleIndex = (this.currentRenderAngleIndex + 1) % this.renderAngles.length;
+            this._createNewRender();
+        };
+        RenderCarouselComponent.prototype.gotoPrevSlide = function () {
+            this.showLoader = true;
+            this.currentRenderAngleIndex = (this.currentRenderAngleIndex - 1 + this.renderAngles.length) % this.renderAngles.length;
+            this._createNewRender();
+        };
+        RenderCarouselComponent.prototype.ngOnDestroy = function () {
+            this.carousel = undefined;
+            this._subs.forEach(function (s) { return s.unsubscribe(); });
+        };
+        RenderCarouselComponent.prototype.ngOnChanges = function () {
+            this.renderedImageLoaded = false;
+        };
+        RenderCarouselComponent.prototype.onRenderLoaded = function () {
+            this.renderedImageLoaded = true;
+        };
+        RenderCarouselComponent.prototype._getRenderSettings = function () {
+            var settings = new RenderParameters();
+            var rotation = new VectorObject();
+            rotation.x = 0;
+            rotation.y = this.renderAngles[this.currentRenderAngleIndex];
+            rotation.z = 0;
+            settings.objectRotation = rotation;
+            settings.margin = 15;
+            return settings;
+        };
+        RenderCarouselComponent.prototype._createNewRender = function () {
+            this.showLoader = true;
+            this.renderedImageLoaded = false;
+            var renderParams = this._getRenderSettings();
+            this._appEventService.onGetRenderForRenderCarousel.next(renderParams);
+        };
+        return RenderCarouselComponent;
+    }());
+    RenderCarouselComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-render-carousel',
+                    template: "\n    <div id=\"product_page_carousel\">\n      <div id=\"product_page_carousel_render_items\">\n        <co-loader [isShown]=\"showLoader\"></co-loader>\n        <div #carousel class=\"inner-carousel\">\n          <div class=\"inner-carousel-render\">\n            <img\n              [src]=\"renderedImage\"\n              [class.loaded]=\"renderedImageLoaded\"\n              (load)=\"onRenderLoaded()\"\n              class=\"fade-image\"\n              alt=\"\">\n          </div>\n          <div class=\"carousel-scroller-layer\">\n            <div class=\"carousel-item-scroller prev\" (click)=\"gotoPrevSlide()\">\n              <co-icon [iconData]=\"iconCache.getIcon(icon.ArrowPointLeft)\"></co-icon>\n            </div>\n            <div class=\"carousel-item-scroller next\" (click)=\"gotoNextSlide()\">\n              <co-icon [iconData]=\"iconCache.getIcon(icon.ArrowPointRight)\"></co-icon>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    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{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_render_items{position:relative;margin-bottom:10px;min-height:400px}#product_page_carousel #product_page_carousel_render_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:700px}#product_page_carousel .inner-carousel .inner-carousel-render img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;top:0;left:0;z-index:100}#product_page_carousel .carousel-scroller-layer .carousel-item-scroller{opacity:0;position:absolute;border-radius:50%;z-index:100;background:rgba(255,255,255,.4);color:#fff;width:30px;height:30px;top:calc(50% - 15px);cursor:pointer;transition:opacity .3s}#product_page_carousel .carousel-scroller-layer .carousel-item-scroller co-icon{color:#fff}#product_page_carousel .carousel-scroller-layer .prev{left:15px}#product_page_carousel .carousel-scroller-layer .next{right:15px}#product_page_carousel .carousel-scroller-layer:hover .carousel-item-scroller{opacity:1}#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}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fade-image{opacity:0;transition:opacity 1.5s ease-in-out}.fade-image.loaded{opacity:1}\n"]
+                },] }
+    ];
+    RenderCarouselComponent.ctorParameters = function () { return [
+        { type: IconCacheService },
+        { type: ProductEventService },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    RenderCarouselComponent.propDecorators = {
+        carousel: [{ type: i0.ViewChild, args: ['carousel', { read: i0.ElementRef },] }],
+        showRefresh: [{ type: i0.Input }],
+        article: [{ type: i0.Input }],
+        handleWindowResize: [{ type: i0.HostListener, args: ['window:resize',] }],
+        gotoNextSlide: [{ type: i0.HostListener, args: ['swipeleft',] }],
+        gotoPrevSlide: [{ type: i0.HostListener, args: ['swiperight',] }],
+        resizing: [{ type: i0.HostBinding, args: ['class.resizing',] }]
+    };
+
+    var RenderCarouselModule = /** @class */ (function () {
+        function RenderCarouselModule() {
+        }
+        return RenderCarouselModule;
+    }());
+    RenderCarouselModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        corecomponents.LoaderModule,
+                        corecomponents.ScrollContainerModule,
+                        corecomponents.IconModule,
+                        corecomponents_v12.IconCollapseHandleModule
+                    ],
+                    declarations: [
+                        RenderCarouselComponent
+                    ],
+                    exports: [
+                        RenderCarouselComponent
+                    ]
+                },] }
+    ];
+
     var ProductPageModule = /** @class */ (function () {
         function ProductPageModule() {
         }
@@ -3406,7 +3547,8 @@
                         ProductInfoTabsModule,
                         PipeModule,
                         ProductDialogModule,
-                        corecomponents_v12.LoaderModule
+                        corecomponents_v12.LoaderModule,
+                        RenderCarouselModule
                     ],
                     schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
                     declarations: [
@@ -3863,7 +4005,7 @@
     IoneProductModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
-                        //BrowserAnimationsModule,
+                        // BrowserAnimationsModule,
                         common.CommonModule,
                         ProductPageModule,
                         ProductHdModule,
@@ -3882,12 +4024,6 @@
                     ],
                     bootstrap: [
                         IoneProductComponent
-                    ],
-                    providers: [
-                        ProductSettingsService,
-                        ProductConnectorService,
-                        ProductEventService,
-                        ProductConnectorAdapterService
                     ]
                 },] }
     ];
@@ -3919,10 +4055,12 @@
     exports["ɵbj"] = ProductInfoTabsComponent;
     exports["ɵbk"] = ProductDialogModule;
     exports["ɵbl"] = ProductDialogComponent;
-    exports["ɵbm"] = ProductPageComponent;
-    exports["ɵbn"] = ProductHdModule;
-    exports["ɵbo"] = ProductHdComponent;
-    exports["ɵbp"] = ProductScriptLoaderService;
+    exports["ɵbm"] = RenderCarouselModule;
+    exports["ɵbn"] = RenderCarouselComponent;
+    exports["ɵbo"] = ProductPageComponent;
+    exports["ɵbp"] = ProductHdModule;
+    exports["ɵbq"] = ProductHdComponent;
+    exports["ɵbr"] = ProductScriptLoaderService;
     exports["ɵc"] = PipeModule;
     exports["ɵd"] = LocalizePipe;
     exports["ɵe"] = DictionaryService;