@colijnit/product 258.1.4 → 258.1.6

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('@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';
+    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';
 
     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.4";
-            this.publishDate = "23-6-2025 16:38:29";
+            this.symVer = "258.1.6";
+            this.publishDate = "22-8-2025 14:23:38";
         }
         return Version;
     }());
@@ -514,6 +514,51 @@
         __disposeResources: __disposeResources,
     };
 
+    var SettingsOptions = /** @class */ (function () {
+        function SettingsOptions() {
+            this.showStockStatus = false;
+            this.showZoomButton = false;
+            this.showTagFilter = false;
+            this.showAsConfigured = false;
+            this.inlineAnswers = false;
+            this.showArButton = false;
+            this.arEnabled = false;
+            this.vrEnabled = false;
+        }
+        return SettingsOptions;
+    }());
+
+    var RenderModes;
+    (function (RenderModes) {
+        RenderModes["RenderRoom"] = "render_room";
+        RenderModes["RenderShop"] = "render_shop";
+        RenderModes["RenderIone"] = "render_ione";
+    })(RenderModes || (RenderModes = {}));
+
+    var RenderParameters$1 = /** @class */ (function () {
+        function RenderParameters() {
+            this.host = "";
+            this.port = 0;
+            this.secure = false;
+            this.renderMode = RenderModes.RenderShop;
+        }
+        return RenderParameters;
+    }());
+
+    var ProductSettings = /** @class */ (function (_super) {
+        __extends(ProductSettings, _super);
+        function ProductSettings() {
+            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();
@@ -540,474 +585,192 @@
         { type: i0.Injectable }
     ];
 
-    var JsonUtilsService = /** @class */ (function () {
-        function JsonUtilsService() {
+    // 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.
+    var ProductConnectorAdapterService = /** @class */ (function () {
+        function ProductConnectorAdapterService(_eventService) {
+            this._eventService = _eventService;
+            this.showLoader = new rxjs.Subject();
+            this._boFactory = new businessObjectFactory.BusinessObjectFactory();
+            this._subs = [];
         }
-        JsonUtilsService.prototype.readJsonFile = function (filePath) {
+        ProductConnectorAdapterService.prototype.ngOnDestroy = function () {
+            this._subs.forEach(function (s) { return s.unsubscribe(); });
+        };
+        ProductConnectorAdapterService.prototype.initConnector = function (options) {
             return __awaiter(this, void 0, void 0, function () {
-                var response, e_1;
+                var _this = this;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            _a.trys.push([0, 2, , 3]);
-                            return [4 /*yield*/, fetch(filePath)];
+                            this.articleConnector = new articles.Articles(options);
+                            return [4 /*yield*/, this.articleConnector.connect()];
+                        case 1:
+                            _a.sent();
+                            this.transactionConnector = new transaction.Transaction(options);
+                            this._subs.push(
+                            // @ts-ignore
+                            this.articleConnector.showLoader.subscribe(function (value) { return _this.showLoader.next(value); }));
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ProductConnectorAdapterService.prototype.setInstance = function (instanceId) {
+            // this.articleConnector.setInstanceToConfigure(instanceId, false);
+        };
+        ProductConnectorAdapterService.prototype.getProductBundleSettings = function (url, upId) {
+            return __awaiter(this, void 0, void 0, function () {
+                var tempSettings, tempMainConnector, response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            tempSettings = new ProductSettings();
+                            tempSettings.url = url;
+                            tempSettings.schema = upId.toString();
+                            tempMainConnector = new mainapi.MainApi(tempSettings);
+                            return [4 /*yield*/, tempMainConnector.getPublicParams(upId)];
                         case 1:
                             response = _a.sent();
-                            if (!response.ok) {
+                            if (response) {
+                                return [2 /*return*/, response.productSettings];
+                            }
+                            return [2 /*return*/, ""];
+                    }
+                });
+            });
+        };
+        ProductConnectorAdapterService.prototype.convertArticleFullObjectToArticleExtended = function (article) {
+            if (article) {
+                return this._boFactory.makeWithRawBackendData(articleListObjectExtended_bo.ArticleListObjectExtended, article);
+            }
+        };
+        ProductConnectorAdapterService.prototype.getDeliveryPrognosis = function (goodId, branchNr) {
+            return __awaiter(this, void 0, void 0, function () {
+                var deliveryPrognosis;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.getSelectorDeliveryDate()];
+                        case 1:
+                            deliveryPrognosis = _a.sent();
+                            if (!deliveryPrognosis || !deliveryPrognosis.returnValue) {
+                                return [2 /*return*/, this.getDeliveryDate2(goodId)];
+                            }
+                            return [2 /*return*/, deliveryPrognosis];
+                    }
+                });
+            });
+        };
+        ProductConnectorAdapterService.prototype.getSelectorDeliveryDate = function () {
+            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.getSelectorDeliveryDate()];
+                        case 1:
+                            response = _a.sent();
+                            if (response && response.validationResult && response.validationResult.success) {
+                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(deliveryPrognosis.DeliveryPrognosis, response.resultObject)];
+                            }
+                            else {
                                 return [2 /*return*/, null];
                             }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ProductConnectorAdapterService.prototype.getArtStockStatus = function (goodId) {
+            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.getArtStockStatus(goodId)];
+                        case 1:
+                            response = _a.sent();
+                            if (response && response.validationResult && response.validationResult.success) {
+                                return [2 /*return*/, response.resultObject];
+                            }
                             else {
-                                return [2 /*return*/, response.json()];
+                                return [2 /*return*/, null];
                             }
-                            return [3 /*break*/, 3];
-                        case 2:
-                            e_1 = _a.sent();
-                            console.error('Error getting file:', e_1.message);
-                            return [2 /*return*/, ''];
-                        case 3: return [2 /*return*/];
+                            return [2 /*return*/];
                     }
                 });
             });
         };
-        return JsonUtilsService;
-    }());
-    JsonUtilsService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function JsonUtilsService_Factory() { return new JsonUtilsService(); }, token: JsonUtilsService, providedIn: "root" });
-    JsonUtilsService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-
-    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;
-            this.showZoomButton = false;
-            this.showTagFilter = false;
-            this.showAsConfigured = false;
-            this.inlineAnswers = false;
-            this.showArButton = false;
-            this.arEnabled = false;
-            this.vrEnabled = false;
-        }
-        return SettingsOptions;
-    }());
-
-    var RenderModes;
-    (function (RenderModes) {
-        RenderModes["RenderRoom"] = "render_room";
-        RenderModes["RenderShop"] = "render_shop";
-        RenderModes["RenderIone"] = "render_ione";
-    })(RenderModes || (RenderModes = {}));
-
-    var RenderParameters$1 = /** @class */ (function () {
-        function RenderParameters() {
-            this.host = "";
-            this.port = 0;
-            this.secure = false;
-            this.renderMode = RenderModes.RenderShop;
-        }
-        return RenderParameters;
-    }());
-
-    var ProductSettings = /** @class */ (function (_super) {
-        __extends(ProductSettings, _super);
-        function ProductSettings() {
-            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 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.getDeliveryDate2 = function (goodId) {
             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.getDeliveryDate2(goodId)];
                         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(deliveryPrognosis.DeliveryPrognosis, 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*/];
-                    }
-                });
-            });
-        };
-        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;
-    }());
-    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.
-    var ProductConnectorAdapterService = /** @class */ (function () {
-        function ProductConnectorAdapterService(_eventService) {
-            this._eventService = _eventService;
-            this.showLoader = new rxjs.Subject();
-            this._boFactory = new businessObjectFactory.BusinessObjectFactory();
-            this._subs = [];
-        }
-        ProductConnectorAdapterService.prototype.ngOnDestroy = function () {
-            this._subs.forEach(function (s) { return s.unsubscribe(); });
-        };
-        ProductConnectorAdapterService.prototype.initConnector = function (options) {
+        ProductConnectorAdapterService.prototype.getJsonConfiguredArticles = function (configuratorStatistics) {
             return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
+                var response;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0:
-                            this.articleConnector = new articles.Articles(options);
-                            return [4 /*yield*/, this.articleConnector.connect()];
+                        case 0: return [4 /*yield*/, this.articleConnector.getJsonConfiguredArticles(configuratorStatistics)];
                         case 1:
-                            _a.sent();
-                            this.transactionConnector = new transaction.Transaction(options);
-                            this._subs.push(
-                            // @ts-ignore
-                            this.articleConnector.showLoader.subscribe(function (value) { return _this.showLoader.next(value); }));
+                            response = _a.sent();
+                            if (response && response.validationResult && response.validationResult.success) {
+                                return [2 /*return*/, response.resultObject];
+                            }
+                            else {
+                                return [2 /*return*/, ''];
+                            }
                             return [2 /*return*/];
                     }
                 });
             });
         };
-        ProductConnectorAdapterService.prototype.setInstance = function (instanceId) {
-            // this.articleConnector.setInstanceToConfigure(instanceId, false);
-        };
-        ProductConnectorAdapterService.prototype.getProductBundleSettings = function (url, upId) {
+        ProductConnectorAdapterService.prototype.getJsonArticleFlatTree = function (goodId, goodType, quantity, externalSource, showLoader, instanceId, configuratorStatistics) {
+            if (externalSource === void 0) { externalSource = false; }
+            if (showLoader === void 0) { showLoader = true; }
             return __awaiter(this, void 0, void 0, function () {
-                var tempSettings, tempMainConnector, response;
+                var _this = this;
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            tempSettings = new ProductSettings();
-                            tempSettings.url = url;
-                            tempSettings.schema = upId.toString();
-                            tempMainConnector = new mainapi.MainApi(tempSettings);
-                            return [4 /*yield*/, tempMainConnector.getPublicParams(upId)];
-                        case 1:
-                            response = _a.sent();
-                            if (response) {
-                                return [2 /*return*/, response.productSettings];
-                            }
-                            return [2 /*return*/, ""];
-                    }
+                    return [2 /*return*/, this.articleConnector.getJsonArticleFlatTree(goodId, goodType, quantity, externalSource, showLoader, instanceId, configuratorStatistics).catch(function (messages) {
+                            _this._eventService.errorMessage.next(messages);
+                            return null;
+                        })];
                 });
             });
         };
-        ProductConnectorAdapterService.prototype.convertArticleFullObjectToArticleExtended = function (article) {
-            if (article) {
-                return this._boFactory.makeWithRawBackendData(articleListObjectExtended_bo.ArticleListObjectExtended, article);
-            }
-        };
-        ProductConnectorAdapterService.prototype.getDeliveryPrognosis = function (goodId, branchNr) {
+        ProductConnectorAdapterService.prototype.getGeneratedArtDirectly = function (goodId, showLoader) {
             return __awaiter(this, void 0, void 0, function () {
-                var deliveryPrognosis;
+                var _this = this;
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.getSelectorDeliveryDate()];
-                        case 1:
-                            deliveryPrognosis = _a.sent();
-                            if (!deliveryPrognosis || !deliveryPrognosis.returnValue) {
-                                return [2 /*return*/, this.getDeliveryDate2(goodId)];
-                            }
-                            return [2 /*return*/, deliveryPrognosis];
-                    }
+                    return [2 /*return*/, this.articleConnector.getGeneratedArtDirectly(goodId, showLoader).catch(function (messages) {
+                            _this._eventService.errorMessage.next(messages);
+                            return null;
+                        })];
                 });
             });
         };
-        ProductConnectorAdapterService.prototype.getSelectorDeliveryDate = function () {
+        ProductConnectorAdapterService.prototype.getGoodIdFromArticleNr = function (sku) {
             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.getSelectorDeliveryDate()];
+                        case 0: return [4 /*yield*/, this.articleConnector.getGoodIdFromArticleNr(sku)];
                         case 1:
                             response = _a.sent();
                             if (response && response.validationResult && response.validationResult.success) {
-                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(deliveryPrognosis.DeliveryPrognosis, response.resultObject)];
+                                return [2 /*return*/, response.resultObject];
                             }
                             else {
                                 return [2 /*return*/, null];
@@ -1017,16 +780,17 @@
                 });
             });
         };
-        ProductConnectorAdapterService.prototype.getArtStockStatus = function (goodId) {
+        ProductConnectorAdapterService.prototype.getArticleFullObject = function (goodId, showLoader) {
+            if (showLoader === void 0) { showLoader = 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.getArtStockStatus(goodId)];
+                        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*/, response.resultObject];
+                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(articleFullObject.ArticleFullObject, response.resultObject)];
                             }
                             else {
                                 return [2 /*return*/, null];
@@ -1036,16 +800,16 @@
                 });
             });
         };
-        ProductConnectorAdapterService.prototype.getDeliveryDate2 = function (goodId) {
+        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.getDeliveryDate2(goodId)];
+                        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(deliveryPrognosis.DeliveryPrognosis, response.resultObject)];
+                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(superArticle.SuperArticle, response.resultObject)];
                             }
                             else {
                                 return [2 /*return*/, null];
@@ -1055,151 +819,387 @@
                 });
             });
         };
-        ProductConnectorAdapterService.prototype.getJsonConfiguredArticles = function (configuratorStatistics) {
+        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.getJsonConfiguredArticles(configuratorStatistics)];
+                        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*/, response.resultObject];
+                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(documentContent.DocumentContent, response.resultObject)];
                             }
                             else {
-                                return [2 /*return*/, ''];
+                                return [2 /*return*/, null];
                             }
                             return [2 /*return*/];
                     }
                 });
             });
         };
-        ProductConnectorAdapterService.prototype.getJsonArticleFlatTree = function (goodId, goodType, quantity, externalSource, showLoader, instanceId, configuratorStatistics) {
-            if (externalSource === void 0) { externalSource = false; }
-            if (showLoader === void 0) { showLoader = true; }
-            return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
-                return __generator(this, function (_a) {
-                    return [2 /*return*/, this.articleConnector.getJsonArticleFlatTree(goodId, goodType, quantity, externalSource, showLoader, instanceId, configuratorStatistics).catch(function (messages) {
-                            _this._eventService.errorMessage.next(messages);
-                            return null;
-                        })];
-                });
-            });
-        };
-        ProductConnectorAdapterService.prototype.getGeneratedArtDirectly = function (goodId, showLoader) {
+        ProductConnectorAdapterService.prototype.addWebSessionTransactionLine = function (transactionUuid, sku, quantity) {
             return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
+                var response, infoResponse;
                 return __generator(this, function (_a) {
-                    return [2 /*return*/, this.articleConnector.getGeneratedArtDirectly(goodId, showLoader).catch(function (messages) {
-                            _this._eventService.errorMessage.next(messages);
-                            return null;
-                        })];
+                    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*/, ""];
+                    }
                 });
             });
         };
-        ProductConnectorAdapterService.prototype.getGoodIdFromArticleNr = function (sku) {
+        return ProductConnectorAdapterService;
+    }());
+    ProductConnectorAdapterService.decorators = [
+        { type: i0.Injectable }
+    ];
+    ProductConnectorAdapterService.ctorParameters = function () { return [
+        { type: ProductEventService }
+    ]; };
+
+    var JsonUtilsService = /** @class */ (function () {
+        function JsonUtilsService() {
+        }
+        JsonUtilsService.prototype.readJsonFile = function (filePath) {
             return __awaiter(this, void 0, void 0, function () {
-                var response;
+                var response, e_1;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.articleConnector.getGoodIdFromArticleNr(sku)];
+                        case 0:
+                            _a.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, fetch(filePath)];
                         case 1:
                             response = _a.sent();
-                            if (response && response.validationResult && response.validationResult.success) {
-                                return [2 /*return*/, response.resultObject];
+                            if (!response.ok) {
+                                return [2 /*return*/, null];
                             }
                             else {
-                                return [2 /*return*/, null];
+                                return [2 /*return*/, response.json()];
                             }
-                            return [2 /*return*/];
+                            return [3 /*break*/, 3];
+                        case 2:
+                            e_1 = _a.sent();
+                            console.error('Error getting file:', e_1.message);
+                            return [2 /*return*/, ''];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return JsonUtilsService;
+    }());
+    JsonUtilsService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function JsonUtilsService_Factory() { return new JsonUtilsService(); }, token: JsonUtilsService, providedIn: "root" });
+    JsonUtilsService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+
+    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*/];
                 });
             });
         };
-        ProductConnectorAdapterService.prototype.getArticleFullObject = function (goodId, showLoader) {
-            if (showLoader === void 0) { showLoader = true; }
+        /**
+         * 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; }
             return __awaiter(this, void 0, void 0, function () {
-                var response;
+                var jsonSettings;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.articleConnector.getArticleFullObject(goodId, showLoader)];
+                        case 0:
+                            if (!(typeof settings === 'undefined')) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._jsonUtilsService.readJsonFile('product-settings.json')];
                         case 1:
-                            response = _a.sent();
-                            if (response && response.validationResult && response.validationResult.success) {
-                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(articleFullObject.ArticleFullObject, response.resultObject)];
+                            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();
+                                }
                             }
-                            else {
-                                return [2 /*return*/, null];
+                            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();
                             }
-                            return [2 /*return*/];
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
                     }
                 });
             });
         };
-        ProductConnectorAdapterService.prototype.getSuperArticle = function (id, branch) {
+        ProductSettingsService.prototype.createSettingsFromObject = function (obj) {
             return __awaiter(this, void 0, void 0, function () {
-                var response;
+                var ownOptions, ownRenderParameters;
                 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*/];
+                    if (!this.settings) {
+                        this.settings = new ProductSettings();
                     }
-                });
-            });
-        };
-        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*/];
+                    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*/];
                 });
             });
         };
-        ProductConnectorAdapterService.prototype.addWebSessionTransactionLine = function (transactionUuid, sku, quantity) {
+        ProductSettingsService.prototype.settingsFinished = function () {
             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 0: return [4 /*yield*/, this._dictionaryService.setDictionary(this.settings.languageCode)];
                         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*/, ""];
+                            _a.sent();
+                            this.settingsLoaded.next(true);
+                            return [2 /*return*/];
                     }
                 });
             });
         };
-        return ProductConnectorAdapterService;
+        return ProductSettingsService;
     }());
-    ProductConnectorAdapterService.decorators = [
+    ProductSettingsService.decorators = [
         { type: i0.Injectable }
     ];
-    ProductConnectorAdapterService.ctorParameters = function () { return [
-        { type: ProductEventService }
+    ProductSettingsService.ctorParameters = function () { return [
+        { type: JsonUtilsService },
+        { type: DictionaryService }
     ]; };
 
     // Holds all iONE backend related state and methods for a running HomeDecorator. To be used anywhere internally.
@@ -1208,6 +1208,7 @@
             this._adapterService = _adapterService;
             this._settingsService = _settingsService;
             this.controllerInitialized = new rxjs.BehaviorSubject(false);
+            this.articleLoaded = new rxjs.BehaviorSubject(false);
             this._initializing = false;
             this._initialized = false;
             this.connectorOptions = new options.Options();
@@ -1342,8 +1343,51 @@
         { type: ProductSettingsService }
     ]; };
 
+    var RootStorageObject = /** @class */ (function () {
+        function RootStorageObject() {
+        }
+        return RootStorageObject;
+    }());
+    var LocalStorageService = /** @class */ (function () {
+        function LocalStorageService() {
+            this.storage = localStorage;
+            this._appRoot = "web-order";
+            this._storageObj = new RootStorageObject();
+            this._initLocalStorageObj();
+        }
+        LocalStorageService.prototype.save = function () {
+            this.storage.setItem(this._appRoot, JSON.stringify(this._storageObj));
+        };
+        LocalStorageService.prototype.clear = function () {
+            this.storage.clear();
+        };
+        Object.defineProperty(LocalStorageService.prototype, "id", {
+            get: function () {
+                return this._storageObj ? this._storageObj.id : "";
+            },
+            set: function (id) {
+                this._storageObj.id = id;
+                this.save();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        LocalStorageService.prototype._initLocalStorageObj = function () {
+            this._storageObj = JSON.parse(this.storage.getItem(this._appRoot)) || this._storageObj;
+            this.save();
+        };
+        return LocalStorageService;
+    }());
+    LocalStorageService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function LocalStorageService_Factory() { return new LocalStorageService(); }, token: LocalStorageService, providedIn: "root" });
+    LocalStorageService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    LocalStorageService.ctorParameters = function () { return []; };
+
     var IoneProductComponent = /** @class */ (function () {
-        function IoneProductComponent(_appEventService, _settingsService) {
+        function IoneProductComponent(_appEventService, _settingsService, _productConnectorService, _localStorageService) {
             var _this = this;
             // this.sku = 'CF-HILL';
             // this.sku = 'CF-ALMADA';
@@ -1362,8 +1406,11 @@
             // this.sku = "1000612725";
             this._appEventService = _appEventService;
             this._settingsService = _settingsService;
+            this._productConnectorService = _productConnectorService;
+            this._localStorageService = _localStorageService;
             this.enableRenderCarousel = false;
             this.handleAddArticleInternally = true;
+            this.handleAddToCartInternally = false;
             this.onAddToCart = new i0.EventEmitter();
             this.forceRenderImage = new i0.EventEmitter();
             this.getRenderForRenderCarousel = new i0.EventEmitter();
@@ -1426,9 +1473,41 @@
         };
         IoneProductComponent.prototype._handleAddToCart = function (data) {
             return __awaiter(this, void 0, void 0, function () {
+                var article, transactionId, transactionId;
                 return __generator(this, function (_a) {
-                    this.onAddToCart.emit(data);
-                    return [2 /*return*/];
+                    switch (_a.label) {
+                        case 0:
+                            if (!this.handleAddToCartInternally) return [3 /*break*/, 7];
+                            if (!(data && data.article)) return [3 /*break*/, 6];
+                            if (!(typeof data.article === 'string')) return [3 /*break*/, 3];
+                            article = JSON.parse(data.article);
+                            if (!(article.selectorData && article.selectorData.compositions)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._productConnectorService.addWebSessionTransactionLine(this._localStorageService.id, article.selectorData.compositions[0].compositionArticleNo, data.quantity)];
+                        case 1:
+                            transactionId = _a.sent();
+                            if (transactionId) {
+                                this._localStorageService.id = transactionId;
+                            }
+                            _a.label = 2;
+                        case 2: return [3 /*break*/, 5];
+                        case 3:
+                            if (!data.article.hasOwnProperty('articleNr')) return [3 /*break*/, 5];
+                            return [4 /*yield*/, this._productConnectorService.addWebSessionTransactionLine(this._localStorageService.id, data.article['articleNr'], data.quantity)];
+                        case 4:
+                            transactionId = _a.sent();
+                            if (transactionId) {
+                                this._localStorageService.id = transactionId;
+                            }
+                            _a.label = 5;
+                        case 5:
+                            this.onAddToCart.next(data);
+                            _a.label = 6;
+                        case 6: return [3 /*break*/, 8];
+                        case 7:
+                            this.onAddToCart.emit(data);
+                            _a.label = 8;
+                        case 8: return [2 /*return*/];
+                    }
                 });
             });
         };
@@ -1453,7 +1532,9 @@
     ];
     IoneProductComponent.ctorParameters = function () { return [
         { type: ProductEventService },
-        { type: ProductSettingsService }
+        { type: ProductSettingsService },
+        { type: ProductConnectorService },
+        { type: LocalStorageService }
     ]; };
     IoneProductComponent.propDecorators = {
         sku: [{ type: i0.Input }],
@@ -1462,6 +1543,7 @@
         enableRenderCarousel: [{ type: i0.Input }],
         settings: [{ type: i0.Input }],
         handleAddArticleInternally: [{ type: i0.Input }],
+        handleAddToCartInternally: [{ type: i0.Input }],
         onAddToCart: [{ type: i0.Output }],
         forceRenderImage: [{ type: i0.Output }],
         getRenderForRenderCarousel: [{ type: i0.Output }],
@@ -1605,9 +1687,19 @@
                 if (_this.selections.nativeElement) {
                     _this.selections.nativeElement.forceRenderImage();
                 }
-            }), this.settingsService.settingsLoaded.subscribe(function (loaded) { return _this._handleSettingsLoaded(loaded); }), this._ione.controllerInitialized.subscribe(function (initialized) {
-                _this.settingsLoaded = initialized;
-            }), this.appEventService.onAnswersAvailable.subscribe(function (answers) {
+            }), this.settingsService.settingsLoaded.subscribe(function (loaded) { return _this._handleSettingsLoaded(loaded); }), this._pageLoadedSubscription = rxjs.combineLatest([
+                this._ione.controllerInitialized,
+                this._ione.articleLoaded
+            ]).subscribe(function (_a) {
+                var _b = __read(_a, 2), initialized = _b[0], articleLoaded = _b[1];
+                if (initialized && articleLoaded) {
+                    _this.settingsLoaded = initialized;
+                }
+            }), 
+            // this._ione.controllerInitialized.subscribe((initialized: boolean) => {
+            //   this.settingsLoaded = initialized;
+            // }),
+            this.appEventService.onAnswersAvailable.subscribe(function (answers) {
                 if (answers && _this.configurable) {
                     _this.showAddToCart = false;
                 }
@@ -1707,6 +1799,7 @@
             if (this._initializedSub) {
                 this._initializedSub.unsubscribe();
             }
+            this._pageLoadedSubscription.unsubscribe();
             this.configurator = undefined;
             this.selections = undefined;
             this.fullscreenbutton = undefined;
@@ -1760,6 +1853,7 @@
                                         });
                                         _this._changeDetector.detectChanges();
                                     }
+                                    _this._ione.articleLoaded.next(true);
                                 });
                             }
                             return [2 /*return*/];
@@ -1781,7 +1875,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\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 && this.configurable\">\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",
+                    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 && this.configurable\">\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\" *ngIf=\"article\">\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%' })),
@@ -1964,6 +2058,7 @@
             this._appEventService = _appEventService;
             this._changeDetector = _changeDetector;
             this._domSanitizer = _domSanitizer;
+            this.isPopupOpen = false;
             this.showRefresh = false;
             this.resizing = false;
             this.imageViewModels = [];
@@ -1993,6 +2088,12 @@
                 _this._changeDetector.detectChanges();
             }));
         }
+        // Close on ESC
+        ImageCarouselComponent.prototype.onEsc = function () {
+            if (this.isPopupOpen) {
+                this.closePopup();
+            }
+        };
         Object.defineProperty(ImageCarouselComponent.prototype, "images", {
             get: function () {
                 return this._images;
@@ -2048,15 +2149,16 @@
         };
         ImageCarouselComponent.prototype.handleShowImage = function (imageViewModel) {
             if (imageViewModel && imageViewModel.originalSource) {
-                var popupWindow = window.open('', 'Image zoom', 'width=600,height=400');
-                // Set the content of the popup window
-                popupWindow.document.write('<html><head><title>Image zoom</title></head><body>');
-                popupWindow.document.write("<img src=" + imageViewModel.originalSource + " alt=\"Image\" style=\"width:100%; height:auto;\">");
-                popupWindow.document.write('</body></html>');
-                // Close the document to render the popup window
-                popupWindow.document.close();
+                this.selectedImage = imageViewModel;
+                this.isPopupOpen = true;
+                this._changeDetector.markForCheck();
             }
         };
+        ImageCarouselComponent.prototype.closePopup = function () {
+            this.isPopupOpen = false;
+            this.selectedImage = undefined;
+            this._changeDetector.markForCheck();
+        };
         ImageCarouselComponent.prototype._filterValidImages = function (value) {
             if (!value) {
                 return [];
@@ -2101,39 +2203,54 @@
         ImageCarouselComponent.prototype._resizeAndSanitizeSource = function (source, imageViewModel) {
             var _this = this;
             var resizeCanvas = document.createElement('canvas');
-            var resizeCanvasContext = resizeCanvas.getContext('2d');
-            var resizeImage = document.createElement('img');
-            resizeImage.crossOrigin = 'anonymous';
-            resizeImage.onload = function () { return __awaiter(_this, void 0, void 0, function () {
-                var originalWidth, originalHeight, aspectRatio, newWidth, newHeight, imageWidth, resizedSource;
-                return __generator(this, function (_a) {
-                    resizeCanvasContext.imageSmoothingEnabled = true;
-                    resizeCanvasContext.imageSmoothingQuality = 'high';
-                    originalWidth = resizeImage.width;
-                    originalHeight = resizeImage.height;
-                    aspectRatio = originalWidth / originalHeight;
-                    newWidth = this._resizeCanvasHeight;
-                    newHeight = this._resizeCanvasHeight;
-                    if (originalWidth > originalHeight) {
-                        newHeight = this._resizeCanvasHeight / aspectRatio;
-                    }
-                    else {
-                        newWidth = this._resizeCanvasHeight * aspectRatio;
-                    }
-                    // Set the canvas size to the new width and height
-                    resizeCanvas.width = newWidth;
-                    resizeCanvas.height = newHeight;
-                    imageWidth = this._resizeCanvasHeight * (resizeImage.height / resizeImage.width);
-                    resizeCanvasContext.drawImage(resizeImage, 0, 0, newWidth, newHeight);
-                    resizedSource = resizeCanvas.toDataURL('image/jpeg');
-                    imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
-                    imageViewModel.originalSource = source;
-                    this._changeDetector.detectChanges();
-                    return [2 /*return*/];
-                });
-            }); };
-            // @ts-ignore
-            resizeImage.src = source;
+            var ctx = resizeCanvas.getContext('2d');
+            var img = document.createElement('img');
+            img.crossOrigin = 'anonymous';
+            img.onload = function () {
+                ctx.imageSmoothingEnabled = true;
+                ctx.imageSmoothingQuality = 'high';
+                var ow = img.width;
+                var oh = img.height;
+                var aspect = ow / oh;
+                var newW = _this._resizeCanvasHeight;
+                var newH = _this._resizeCanvasHeight;
+                if (ow > oh) {
+                    newH = _this._resizeCanvasHeight / aspect;
+                }
+                else {
+                    newW = _this._resizeCanvasHeight * aspect;
+                }
+                resizeCanvas.width = Math.round(newW);
+                resizeCanvas.height = Math.round(newH);
+                // Ensure transparent background before drawing
+                ctx.clearRect(0, 0, resizeCanvas.width, resizeCanvas.height);
+                ctx.drawImage(img, 0, 0, resizeCanvas.width, resizeCanvas.height);
+                var mime = _this._detectPreferredMime(source);
+                var resizedSource = mime === 'image/jpeg'
+                    ? resizeCanvas.toDataURL('image/jpeg', 0.92) // only if original was JPEG
+                    : resizeCanvas.toDataURL(mime); // PNG/WebP keep alpha
+                imageViewModel.source = _this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
+                imageViewModel.originalSource = source;
+                _this._changeDetector.detectChanges();
+            };
+            img.src = source;
+        };
+        ImageCarouselComponent.prototype._detectPreferredMime = function (source) {
+            // Data URI check
+            var m = source.match(/^data:(image\/[a-zA-Z+.-]+);base64,/);
+            if (m) {
+                var t = m[1].toLowerCase();
+                if (t === 'image/png' || t === 'image/webp' || t === 'image/jpeg')
+                    return t;
+            }
+            var lower = source.toLowerCase();
+            if (lower.endsWith('.png'))
+                return 'image/png';
+            if (lower.endsWith('.webp'))
+                return 'image/webp';
+            if (lower.endsWith('.jpg') || lower.endsWith('.jpeg'))
+                return 'image/jpeg';
+            return 'image/png';
         };
         ImageCarouselComponent.prototype._scrollCarouselToIndex = function () {
             if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
@@ -2152,9 +2269,9 @@
     ImageCarouselComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-image-carousel',
-                    template: "\n      <div id=\"product_page_carousel\">\n          <div id=\"product_page_carousel_items\">\n              <co-loader [isShown]=\"true\" *ngIf=\"showLoader\"></co-loader>\n              <div #carousel class=\"inner-carousel\">\n                  <!-- This has been taken out of the for loop to prevent flashing images when updating. -->\n                  <div *ngIf=\"imageViewModels[0]\" class=\"carousel-item\" [id]=\"'slide-0'\" [class.active]=\"isCurrentIndex(0)\" (click)=\"handleShowImage(imageViewModels[0])\">\n                      <img [src]=\"imageViewModels[0].source\">\n                  </div>\n                  <div *ngFor=\"let imageViewModel of imageViewModels.slice(1); let index = index\" class=\"carousel-item\"\n                       [id]=\"'slide-' + (index + 1)\" [class.active]=\"isCurrentIndex((index + 1))\" (click)=\"handleShowImage(imageViewModel)\">\n                      <img [src]=\"imageViewModel.source\">\n                  </div>\n                  <div class=\"carousel-scroller-layer\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n                      <div class=\"carousel-item-scroller prev\" (click)=\"gotoPrevSlide()\" *ngIf=\"currentIndex > 0\"></div>\n                      <div class=\"carousel-item-scroller next\" (click)=\"gotoNextSlide()\" *ngIf=\"currentIndex < images.length - 1\"></div>\n                  </div>\n              </div>\n              <!--\n                      <co-icon class=\"selector-type-icon refresh-button\" [iconData]=\"iconCache.getIcon(icons.Refresh)\" (click)=\"onForceRenderImage()\" [class.loading]=\"showLoader\" *ngIf=\"showRefresh\"></co-icon>\n              -->\n          </div>\n\n          <div id=\"product_page_carousel_thumbs\">\n              <co-scroll-container class=\"scroll-container\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n                  <div *ngFor=\"let imageViewModel of imageViewModels; let index = index\" class=\"carousel-thumb\"\n                       [class.active]=\"index === currentIndex\">\n                      <img [src]=\"imageViewModel.source\" (click)=\"handleThumbClick(index)\"/>\n                  </div>\n              </co-scroll-container>\n          </div>\n      </div>\n  ",
+                    template: "\n      <div id=\"product_page_carousel\">\n          <div id=\"product_page_carousel_items\">\n              <co-loader [isShown]=\"true\" *ngIf=\"showLoader\"></co-loader>\n              <div #carousel class=\"inner-carousel\">\n                  <!-- This has been taken out of the for loop to prevent flashing images when updating. -->\n                  <div *ngIf=\"imageViewModels[0]\" class=\"carousel-item\" [id]=\"'slide-0'\" [class.active]=\"isCurrentIndex(0)\" (click)=\"handleShowImage(imageViewModels[0])\">\n                      <img [src]=\"imageViewModels[0].source\">\n                  </div>\n                  <div *ngFor=\"let imageViewModel of imageViewModels.slice(1); let index = index\" class=\"carousel-item\"\n                       [id]=\"'slide-' + (index + 1)\" [class.active]=\"isCurrentIndex((index + 1))\" (click)=\"handleShowImage(imageViewModel)\">\n                      <img [src]=\"imageViewModel.source\">\n                  </div>\n                  <div class=\"carousel-scroller-layer\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n                      <div class=\"carousel-item-scroller prev\" (click)=\"gotoPrevSlide()\" *ngIf=\"currentIndex > 0\"></div>\n                      <div class=\"carousel-item-scroller next\" (click)=\"gotoNextSlide()\" *ngIf=\"currentIndex < images.length - 1\"></div>\n                  </div>\n              </div>\n              <!--\n                      <co-icon class=\"selector-type-icon refresh-button\" [iconData]=\"iconCache.getIcon(icons.Refresh)\" (click)=\"onForceRenderImage()\" [class.loading]=\"showLoader\" *ngIf=\"showRefresh\"></co-icon>\n              -->\n          </div>\n\n          <div id=\"product_page_carousel_thumbs\">\n              <co-scroll-container class=\"scroll-container\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n                  <div *ngFor=\"let imageViewModel of imageViewModels; let index = index\" class=\"carousel-thumb\"\n                       [class.active]=\"index === currentIndex\">\n                      <img [src]=\"imageViewModel.source\" (click)=\"handleThumbClick(index)\"/>\n                  </div>\n              </co-scroll-container>\n          </div>\n      </div>\n      <!-- Modal (real popup) -->\n      <div\n        class=\"image-modal\"\n        *ngIf=\"isPopupOpen\"\n        (click)=\"closePopup()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=\"Image preview\"\n      >\n        <div class=\"image-modal__content\" (click)=\"$event.stopPropagation()\">\n          <button\n            class=\"image-modal__close\"\n            type=\"button\"\n            aria-label=\"Close\"\n            (click)=\"closePopup()\"\n          >\n            \u00D7\n          </button>\n\n          <img [src]=\"selectedImage?.originalSource\" alt=\"Image preview\" />\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_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
+                    styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{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_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}.image-modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000}.image-modal__content{position:relative;max-width:90vw;max-height:90vh}.image-modal__content img{max-width:90vw;max-height:90vh;-o-object-fit:contain;object-fit:contain;display:block}.image-modal__close{position:fixed;top:15px;right:30px;background:transparent;border:none;color:#fff;font-size:60px;line-height:1;cursor:pointer}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
                 },] }
     ];
     ImageCarouselComponent.ctorParameters = function () { return [
@@ -2165,6 +2282,7 @@
     ]; };
     ImageCarouselComponent.propDecorators = {
         carousel: [{ type: i0.ViewChild, args: ['carousel', { read: i0.ElementRef },] }],
+        onEsc: [{ type: i0.HostListener, args: ['document:keydown.escape',] }],
         showRefresh: [{ type: i0.Input }],
         images: [{ type: i0.Input }],
         handleWindowResize: [{ type: i0.HostListener, args: ['window:resize',] }],
@@ -2469,12 +2587,12 @@
         };
         ProductAddtocartComponent.prototype.handleAddToCartClick = function (quantity) {
             return __awaiter(this, void 0, void 0, function () {
-                var article, generatedGoodId, articleFull, article, article, article;
+                var article, article, article;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (!this.createFrozenArticle) return [3 /*break*/, 11];
-                            if (!(this.article.goodType === 'B')) return [3 /*break*/, 6];
+                            if (!this.createFrozenArticle) return [3 /*break*/, 10];
+                            if (!(this.article.goodType === 'B')) return [3 /*break*/, 5];
                             if (!this.article.isConfigurable) return [3 /*break*/, 2];
                             return [4 /*yield*/, this._getJSONFromArticleObject({ article: this.article, quantity: quantity })];
                         case 1:
@@ -2482,39 +2600,41 @@
                             if (article) {
                                 this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
                             }
-                            return [3 /*break*/, 5];
-                        case 2: return [4 /*yield*/, this._getGeneratedArtDirectly(this.article.goodId)];
+                            return [3 /*break*/, 4];
+                        case 2: return [4 /*yield*/, this._handleGeneratedArticleDirectly(quantity)];
                         case 3:
-                            generatedGoodId = _a.sent();
-                            if (!generatedGoodId) return [3 /*break*/, 5];
-                            return [4 /*yield*/, this._productConnectorAdapterService.getArticleFullObject(generatedGoodId, true)];
-                        case 4:
-                            articleFull = _a.sent();
-                            article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(articleFull);
-                            this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
-                            _a.label = 5;
-                        case 5: return [3 /*break*/, 10];
-                        case 6:
+                            _a.sent();
+                            _a.label = 4;
+                        case 4: return [3 /*break*/, 9];
+                        case 5:
                             article = void 0;
-                            if (!!!this.externalSource) return [3 /*break*/, 8];
+                            if (!!!this.externalSource) return [3 /*break*/, 7];
                             return [4 /*yield*/, this._getJSONFromArticleObject({ article: this.article, quantity: quantity })];
-                        case 7:
+                        case 6:
                             article = _a.sent();
-                            return [3 /*break*/, 9];
-                        case 8:
+                            return [3 /*break*/, 8];
+                        case 7:
                             article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(this.article);
-                            _a.label = 9;
-                        case 9:
+                            _a.label = 8;
+                        case 8:
                             if (article) {
                                 this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
                             }
-                            _a.label = 10;
-                        case 10: return [3 /*break*/, 12];
+                            _a.label = 9;
+                        case 9: return [3 /*break*/, 14];
+                        case 10:
+                            if (!(this.article.goodType === 'B')) return [3 /*break*/, 13];
+                            if (!!this.article.isConfigurable) return [3 /*break*/, 12];
+                            return [4 /*yield*/, this._handleGeneratedArticleDirectly(quantity)];
                         case 11:
+                            _a.sent();
+                            _a.label = 12;
+                        case 12: return [3 /*break*/, 14];
+                        case 13:
                             article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(this.article);
                             this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
-                            _a.label = 12;
-                        case 12: return [2 /*return*/];
+                            _a.label = 14;
+                        case 14: return [2 /*return*/];
                     }
                 });
             });
@@ -2534,6 +2654,36 @@
                 });
             });
         };
+        ProductAddtocartComponent.prototype._handleGeneratedArticleDirectly = function (quantity) {
+            return __awaiter(this, void 0, void 0, function () {
+                var generatedGoodId, articleFull, article;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._getGeneratedArtDirectly(this.article.goodId)];
+                        case 1:
+                            generatedGoodId = _a.sent();
+                            if (!generatedGoodId) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this._productConnectorAdapterService.getArticleFullObject(generatedGoodId, true)];
+                        case 2:
+                            articleFull = _a.sent();
+                            article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(articleFull);
+                            this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ProductAddtocartComponent.prototype._getGeneratedArtDirectly = function (goodId) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._ioneControllerService.getGeneratedArtDirectly(goodId, true)];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
         ProductAddtocartComponent.prototype._getJSONFromArticleObject = function (article) {
             return __awaiter(this, void 0, void 0, function () {
                 var configuratorStatistics;
@@ -2553,16 +2703,6 @@
                 });
             });
         };
-        ProductAddtocartComponent.prototype._getGeneratedArtDirectly = function (goodId) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._ioneControllerService.getGeneratedArtDirectly(goodId, true)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
-                });
-            });
-        };
         return ProductAddtocartComponent;
     }());
     ProductAddtocartComponent.decorators = [
@@ -2978,7 +3118,7 @@
             this.updateHeight(tabIndex);
         };
         ProductInfoTabsComponent.prototype.updateHeight = function (tabIndex) {
-            if (this.tabContent.nativeElement.children.length > 0) {
+            if (this.tabContent && this.tabContent.nativeElement.children.length > 0) {
                 if (this.tabContent.nativeElement.children[tabIndex] !== undefined) {
                     this.activeTabHeight = this.tabContent.nativeElement.children[tabIndex].offsetHeight;
                 }
@@ -4106,6 +4246,7 @@
     exports["ɵbp"] = ProductHdModule;
     exports["ɵbq"] = ProductHdComponent;
     exports["ɵbr"] = ProductScriptLoaderService;
+    exports["ɵbs"] = LocalStorageService;
     exports["ɵc"] = PipeModule;
     exports["ɵd"] = LocalizePipe;
     exports["ɵe"] = DictionaryService;