@colijnit/product 258.1.4 → 258.1.6

package/fesm2015/colijnit-product.js

@@ -1,10 +1,7 @@
 import * as i0 from '@angular/core';
 import { Directive, Injectable, EventEmitter, Component, ViewEncapsulation, Input, Output, Renderer2, ChangeDetectorRef, ViewChild, ElementRef, Pipe, NgModule, ChangeDetectionStrategy, HostListener, HostBinding, SecurityContext, CUSTOM_ELEMENTS_SCHEMA, Inject, PLATFORM_ID, NO_ERRORS_SCHEMA } from '@angular/core';
 import { __awaiter } from 'tslib';
-import { Subject, BehaviorSubject } from 'rxjs';
-import * as i1 from '@angular/common/http';
-import { HttpClient } from '@angular/common/http';
-import { StringUtils } from '@colijnit/ioneconnector/build/utils/string-utils';
+import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
 import { Options } from '@colijnit/ioneconnector/build/model/options';
 import { ArticleFullObject } from '@colijnit/articleapi/build/model/article-full-object';
 import { SuperArticle } from '@colijnit/articleapi/build/model/super-article';
@@ -16,6 +13,9 @@ import { Transaction } from '@colijnit/transactionapi/build/transaction';
 import { MainApi } from '@colijnit/mainapi';
 import { TransactionInfoResponse } from '@colijnit/transactionapi/build/model/transaction-info-response.bo';
 import { ArticleListObjectExtended } from '@colijnit/articleapi/build/model/article-list-object-extended.bo';
+import * as i1 from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
+import { StringUtils } from '@colijnit/ioneconnector/build/utils/string-utils';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1$1 from '@angular/platform-browser';
@@ -30,8 +30,48 @@ class Version {
     constructor() {
         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";
+    }
+}
+
+class SettingsOptions {
+    constructor() {
+        this.showStockStatus = false;
+        this.showZoomButton = false;
+        this.showTagFilter = false;
+        this.showAsConfigured = false;
+        this.inlineAnswers = false;
+        this.showArButton = false;
+        this.arEnabled = false;
+        this.vrEnabled = false;
+    }
+}
+
+var RenderModes;
+(function (RenderModes) {
+    RenderModes["RenderRoom"] = "render_room";
+    RenderModes["RenderShop"] = "render_shop";
+    RenderModes["RenderIone"] = "render_ione";
+})(RenderModes || (RenderModes = {}));
+
+class RenderParameters$1 {
+    constructor() {
+        this.host = "";
+        this.port = 0;
+        this.secure = false;
+        this.renderMode = RenderModes.RenderShop;
+    }
+}
+
+class ProductSettings extends Options {
+    constructor() {
+        super(...arguments);
+        this.session = undefined;
+        this.createWebOrder = true;
+        this.currencySymbol = '€';
+        this.options = new SettingsOptions();
+        this.renderParameters = new RenderParameters$1();
     }
 }
 
@@ -60,6 +100,180 @@ ProductEventService.decorators = [
     { type: Injectable }
 ];
 
+// 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.
+class ProductConnectorAdapterService {
+    constructor(_eventService) {
+        this._eventService = _eventService;
+        this.showLoader = new Subject();
+        this._boFactory = new BusinessObjectFactory();
+        this._subs = [];
+    }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+    initConnector(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.articleConnector = new Articles(options);
+            yield this.articleConnector.connect();
+            this.transactionConnector = new Transaction(options);
+            this._subs.push(
+            // @ts-ignore
+            this.articleConnector.showLoader.subscribe(value => this.showLoader.next(value)));
+        });
+    }
+    setInstance(instanceId) {
+        // this.articleConnector.setInstanceToConfigure(instanceId, false);
+    }
+    getProductBundleSettings(url, upId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const tempSettings = new ProductSettings();
+            tempSettings.url = url;
+            tempSettings.schema = upId.toString();
+            const tempMainConnector = new MainApi(tempSettings);
+            const response = yield tempMainConnector.getPublicParams(upId);
+            if (response) {
+                return response.productSettings;
+            }
+            return "";
+        });
+    }
+    convertArticleFullObjectToArticleExtended(article) {
+        if (article) {
+            return this._boFactory.makeWithRawBackendData(ArticleListObjectExtended, article);
+        }
+    }
+    getDeliveryPrognosis(goodId, branchNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const deliveryPrognosis = yield this.getSelectorDeliveryDate();
+            if (!deliveryPrognosis || !deliveryPrognosis.returnValue) {
+                return this.getDeliveryDate2(goodId);
+            }
+            return deliveryPrognosis;
+        });
+    }
+    getSelectorDeliveryDate() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.articleConnector.getSelectorDeliveryDate();
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(DeliveryPrognosis, response.resultObject);
+            }
+            else {
+                return null;
+            }
+        });
+    }
+    getArtStockStatus(goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.articleConnector.getArtStockStatus(goodId);
+            if (response && response.validationResult && response.validationResult.success) {
+                return response.resultObject;
+            }
+            else {
+                return null;
+            }
+        });
+    }
+    getDeliveryDate2(goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.articleConnector.getDeliveryDate2(goodId);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(DeliveryPrognosis, response.resultObject);
+            }
+            else {
+                return null;
+            }
+        });
+    }
+    getJsonConfiguredArticles(configuratorStatistics) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.articleConnector.getJsonConfiguredArticles(configuratorStatistics);
+            if (response && response.validationResult && response.validationResult.success) {
+                return response.resultObject;
+            }
+            else {
+                return '';
+            }
+        });
+    }
+    getJsonArticleFlatTree(goodId, goodType, quantity, externalSource = false, showLoader = true, instanceId, configuratorStatistics) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.articleConnector.getJsonArticleFlatTree(goodId, goodType, quantity, externalSource, showLoader, instanceId, configuratorStatistics).catch((messages) => {
+                this._eventService.errorMessage.next(messages);
+                return null;
+            });
+        });
+    }
+    getGeneratedArtDirectly(goodId, showLoader) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.articleConnector.getGeneratedArtDirectly(goodId, showLoader).catch((messages) => {
+                this._eventService.errorMessage.next(messages);
+                return null;
+            });
+        });
+    }
+    getGoodIdFromArticleNr(sku) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.articleConnector.getGoodIdFromArticleNr(sku);
+            if (response && response.validationResult && response.validationResult.success) {
+                return response.resultObject;
+            }
+            else {
+                return null;
+            }
+        });
+    }
+    getArticleFullObject(goodId, showLoader = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.articleConnector.getArticleFullObject(goodId, showLoader);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(ArticleFullObject, response.resultObject);
+            }
+            else {
+                return null;
+            }
+        });
+    }
+    getSuperArticle(id, branch) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.articleConnector.getSuperArticleQuickSel(id, branch);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(SuperArticle, response.resultObject);
+            }
+            else {
+                return null;
+            }
+        });
+    }
+    getDocumentContent(docId, thumbnail = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.articleConnector.getDocumentContent(docId, thumbnail);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(DocumentContent, response.resultObject);
+            }
+            else {
+                return null;
+            }
+        });
+    }
+    addWebSessionTransactionLine(transactionUuid, sku, quantity) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.transactionConnector.addWebSessionTransactionLine(transactionUuid, sku, quantity);
+            if (response && response.validationResult && response.validationResult.success) {
+                const infoResponse = this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+                return infoResponse.transactionInfo.uuid;
+            }
+            return "";
+        });
+    }
+}
+ProductConnectorAdapterService.decorators = [
+    { type: Injectable }
+];
+ProductConnectorAdapterService.ctorParameters = () => [
+    { type: ProductEventService }
+];
+
 class JsonUtilsService {
     readJsonFile(filePath) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -280,46 +494,6 @@ DictionaryService.ctorParameters = () => [
     { type: JsonUtilsService }
 ];
 
-class SettingsOptions {
-    constructor() {
-        this.showStockStatus = false;
-        this.showZoomButton = false;
-        this.showTagFilter = false;
-        this.showAsConfigured = false;
-        this.inlineAnswers = false;
-        this.showArButton = false;
-        this.arEnabled = false;
-        this.vrEnabled = false;
-    }
-}
-
-var RenderModes;
-(function (RenderModes) {
-    RenderModes["RenderRoom"] = "render_room";
-    RenderModes["RenderShop"] = "render_shop";
-    RenderModes["RenderIone"] = "render_ione";
-})(RenderModes || (RenderModes = {}));
-
-class RenderParameters$1 {
-    constructor() {
-        this.host = "";
-        this.port = 0;
-        this.secure = false;
-        this.renderMode = RenderModes.RenderShop;
-    }
-}
-
-class ProductSettings extends Options {
-    constructor() {
-        super(...arguments);
-        this.session = undefined;
-        this.createWebOrder = true;
-        this.currencySymbol = '€';
-        this.options = new SettingsOptions();
-        this.renderParameters = new RenderParameters$1();
-    }
-}
-
 class ProductSettingsService {
     constructor(_jsonUtilsService, _dictionaryService) {
         this._jsonUtilsService = _jsonUtilsService;
@@ -399,186 +573,13 @@ ProductSettingsService.ctorParameters = () => [
     { 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.
-class ProductConnectorAdapterService {
-    constructor(_eventService) {
-        this._eventService = _eventService;
-        this.showLoader = new Subject();
-        this._boFactory = new BusinessObjectFactory();
-        this._subs = [];
-    }
-    ngOnDestroy() {
-        this._subs.forEach(s => s.unsubscribe());
-    }
-    initConnector(options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.articleConnector = new Articles(options);
-            yield this.articleConnector.connect();
-            this.transactionConnector = new Transaction(options);
-            this._subs.push(
-            // @ts-ignore
-            this.articleConnector.showLoader.subscribe(value => this.showLoader.next(value)));
-        });
-    }
-    setInstance(instanceId) {
-        // this.articleConnector.setInstanceToConfigure(instanceId, false);
-    }
-    getProductBundleSettings(url, upId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const tempSettings = new ProductSettings();
-            tempSettings.url = url;
-            tempSettings.schema = upId.toString();
-            const tempMainConnector = new MainApi(tempSettings);
-            const response = yield tempMainConnector.getPublicParams(upId);
-            if (response) {
-                return response.productSettings;
-            }
-            return "";
-        });
-    }
-    convertArticleFullObjectToArticleExtended(article) {
-        if (article) {
-            return this._boFactory.makeWithRawBackendData(ArticleListObjectExtended, article);
-        }
-    }
-    getDeliveryPrognosis(goodId, branchNr) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const deliveryPrognosis = yield this.getSelectorDeliveryDate();
-            if (!deliveryPrognosis || !deliveryPrognosis.returnValue) {
-                return this.getDeliveryDate2(goodId);
-            }
-            return deliveryPrognosis;
-        });
-    }
-    getSelectorDeliveryDate() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const response = yield this.articleConnector.getSelectorDeliveryDate();
-            if (response && response.validationResult && response.validationResult.success) {
-                return this._boFactory.makeWithRawBackendData(DeliveryPrognosis, response.resultObject);
-            }
-            else {
-                return null;
-            }
-        });
-    }
-    getArtStockStatus(goodId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const response = yield this.articleConnector.getArtStockStatus(goodId);
-            if (response && response.validationResult && response.validationResult.success) {
-                return response.resultObject;
-            }
-            else {
-                return null;
-            }
-        });
-    }
-    getDeliveryDate2(goodId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const response = yield this.articleConnector.getDeliveryDate2(goodId);
-            if (response && response.validationResult && response.validationResult.success) {
-                return this._boFactory.makeWithRawBackendData(DeliveryPrognosis, response.resultObject);
-            }
-            else {
-                return null;
-            }
-        });
-    }
-    getJsonConfiguredArticles(configuratorStatistics) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const response = yield this.articleConnector.getJsonConfiguredArticles(configuratorStatistics);
-            if (response && response.validationResult && response.validationResult.success) {
-                return response.resultObject;
-            }
-            else {
-                return '';
-            }
-        });
-    }
-    getJsonArticleFlatTree(goodId, goodType, quantity, externalSource = false, showLoader = true, instanceId, configuratorStatistics) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.articleConnector.getJsonArticleFlatTree(goodId, goodType, quantity, externalSource, showLoader, instanceId, configuratorStatistics).catch((messages) => {
-                this._eventService.errorMessage.next(messages);
-                return null;
-            });
-        });
-    }
-    getGeneratedArtDirectly(goodId, showLoader) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.articleConnector.getGeneratedArtDirectly(goodId, showLoader).catch((messages) => {
-                this._eventService.errorMessage.next(messages);
-                return null;
-            });
-        });
-    }
-    getGoodIdFromArticleNr(sku) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const response = yield this.articleConnector.getGoodIdFromArticleNr(sku);
-            if (response && response.validationResult && response.validationResult.success) {
-                return response.resultObject;
-            }
-            else {
-                return null;
-            }
-        });
-    }
-    getArticleFullObject(goodId, showLoader = true) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const response = yield this.articleConnector.getArticleFullObject(goodId, showLoader);
-            if (response && response.validationResult && response.validationResult.success) {
-                return this._boFactory.makeWithRawBackendData(ArticleFullObject, response.resultObject);
-            }
-            else {
-                return null;
-            }
-        });
-    }
-    getSuperArticle(id, branch) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const response = yield this.articleConnector.getSuperArticleQuickSel(id, branch);
-            if (response && response.validationResult && response.validationResult.success) {
-                return this._boFactory.makeWithRawBackendData(SuperArticle, response.resultObject);
-            }
-            else {
-                return null;
-            }
-        });
-    }
-    getDocumentContent(docId, thumbnail = true) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const response = yield this.articleConnector.getDocumentContent(docId, thumbnail);
-            if (response && response.validationResult && response.validationResult.success) {
-                return this._boFactory.makeWithRawBackendData(DocumentContent, response.resultObject);
-            }
-            else {
-                return null;
-            }
-        });
-    }
-    addWebSessionTransactionLine(transactionUuid, sku, quantity) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const response = yield this.transactionConnector.addWebSessionTransactionLine(transactionUuid, sku, quantity);
-            if (response && response.validationResult && response.validationResult.success) {
-                const infoResponse = this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
-                return infoResponse.transactionInfo.uuid;
-            }
-            return "";
-        });
-    }
-}
-ProductConnectorAdapterService.decorators = [
-    { type: Injectable }
-];
-ProductConnectorAdapterService.ctorParameters = () => [
-    { type: ProductEventService }
-];
-
 // Holds all iONE backend related state and methods for a running HomeDecorator. To be used anywhere internally.
 class ProductConnectorService {
     constructor(_adapterService, _settingsService) {
         this._adapterService = _adapterService;
         this._settingsService = _settingsService;
         this.controllerInitialized = new BehaviorSubject(false);
+        this.articleLoaded = new BehaviorSubject(false);
         this._initializing = false;
         this._initialized = false;
         this.connectorOptions = new Options();
@@ -676,8 +677,43 @@ ProductConnectorService.ctorParameters = () => [
     { type: ProductSettingsService }
 ];
 
+class RootStorageObject {
+}
+class LocalStorageService {
+    constructor() {
+        this.storage = localStorage;
+        this._appRoot = "web-order";
+        this._storageObj = new RootStorageObject();
+        this._initLocalStorageObj();
+    }
+    save() {
+        this.storage.setItem(this._appRoot, JSON.stringify(this._storageObj));
+    }
+    clear() {
+        this.storage.clear();
+    }
+    set id(id) {
+        this._storageObj.id = id;
+        this.save();
+    }
+    get id() {
+        return this._storageObj ? this._storageObj.id : "";
+    }
+    _initLocalStorageObj() {
+        this._storageObj = JSON.parse(this.storage.getItem(this._appRoot)) || this._storageObj;
+        this.save();
+    }
+}
+LocalStorageService.ɵprov = i0.ɵɵdefineInjectable({ factory: function LocalStorageService_Factory() { return new LocalStorageService(); }, token: LocalStorageService, providedIn: "root" });
+LocalStorageService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+LocalStorageService.ctorParameters = () => [];
+
 class IoneProductComponent {
-    constructor(_appEventService, _settingsService) {
+    constructor(_appEventService, _settingsService, _productConnectorService, _localStorageService) {
         // this.sku = 'CF-HILL';
         // this.sku = 'CF-ALMADA';
         // this.sku = 'CF-39904ANT';
@@ -695,8 +731,11 @@ class IoneProductComponent {
         // 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 EventEmitter();
         this.forceRenderImage = new EventEmitter();
         this.getRenderForRenderCarousel = new EventEmitter();
@@ -748,7 +787,31 @@ class IoneProductComponent {
     }
     _handleAddToCart(data) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.onAddToCart.emit(data);
+            if (this.handleAddToCartInternally) {
+                if (data && data.article) {
+                    if (typeof data.article === 'string') {
+                        const article = JSON.parse(data.article);
+                        if (article.selectorData && article.selectorData.compositions) { // configured (frozen) article
+                            const transactionId = yield this._productConnectorService.addWebSessionTransactionLine(this._localStorageService.id, article.selectorData.compositions[0].compositionArticleNo, data.quantity);
+                            if (transactionId) {
+                                this._localStorageService.id = transactionId;
+                            }
+                        }
+                    }
+                    else { // flat (simple) article
+                        if (data.article.hasOwnProperty('articleNr')) {
+                            const transactionId = yield this._productConnectorService.addWebSessionTransactionLine(this._localStorageService.id, data.article['articleNr'], data.quantity);
+                            if (transactionId) {
+                                this._localStorageService.id = transactionId;
+                            }
+                        }
+                    }
+                    this.onAddToCart.next(data);
+                }
+            }
+            else {
+                this.onAddToCart.emit(data);
+            }
         });
     }
     openStock() {
@@ -782,7 +845,9 @@ IoneProductComponent.decorators = [
 ];
 IoneProductComponent.ctorParameters = () => [
     { type: ProductEventService },
-    { type: ProductSettingsService }
+    { type: ProductSettingsService },
+    { type: ProductConnectorService },
+    { type: LocalStorageService }
 ];
 IoneProductComponent.propDecorators = {
     sku: [{ type: Input }],
@@ -791,6 +856,7 @@ IoneProductComponent.propDecorators = {
     enableRenderCarousel: [{ type: Input }],
     settings: [{ type: Input }],
     handleAddArticleInternally: [{ type: Input }],
+    handleAddToCartInternally: [{ type: Input }],
     onAddToCart: [{ type: Output }],
     forceRenderImage: [{ type: Output }],
     getRenderForRenderCarousel: [{ type: Output }],
@@ -927,9 +993,18 @@ class ProductPageComponent {
             if (this.selections.nativeElement) {
                 this.selections.nativeElement.forceRenderImage();
             }
-        }), this.settingsService.settingsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)), this._ione.controllerInitialized.subscribe((initialized) => {
-            this.settingsLoaded = initialized;
-        }), this.appEventService.onAnswersAvailable.subscribe((answers) => {
+        }), this.settingsService.settingsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)), this._pageLoadedSubscription = combineLatest([
+            this._ione.controllerInitialized,
+            this._ione.articleLoaded
+        ]).subscribe(([initialized, articleLoaded]) => {
+            if (initialized && articleLoaded) {
+                this.settingsLoaded = initialized;
+            }
+        }), 
+        // this._ione.controllerInitialized.subscribe((initialized: boolean) => {
+        //   this.settingsLoaded = initialized;
+        // }),
+        this.appEventService.onAnswersAvailable.subscribe((answers) => {
             if (answers && this.configurable) {
                 this.showAddToCart = false;
             }
@@ -1009,6 +1084,7 @@ class ProductPageComponent {
         if (this._initializedSub) {
             this._initializedSub.unsubscribe();
         }
+        this._pageLoadedSubscription.unsubscribe();
         this.configurator = undefined;
         this.selections = undefined;
         this.fullscreenbutton = undefined;
@@ -1058,6 +1134,7 @@ class ProductPageComponent {
                             });
                             this._changeDetector.detectChanges();
                         }
+                        this._ione.articleLoaded.next(true);
                     });
                 }
             }));
@@ -1074,7 +1151,7 @@ class ProductPageComponent {
 ProductPageComponent.decorators = [
     { type: 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: [
                     trigger('toggleFullScreen', [
                         state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
@@ -1261,6 +1338,7 @@ class ImageCarouselComponent {
         this._appEventService = _appEventService;
         this._changeDetector = _changeDetector;
         this._domSanitizer = _domSanitizer;
+        this.isPopupOpen = false;
         this.showRefresh = false;
         this.resizing = false;
         this.imageViewModels = [];
@@ -1290,6 +1368,12 @@ class ImageCarouselComponent {
             this._changeDetector.detectChanges();
         }));
     }
+    // Close on ESC
+    onEsc() {
+        if (this.isPopupOpen) {
+            this.closePopup();
+        }
+    }
     set images(value) {
         if (value && value.length > 0) {
             this._images = this._filterValidImages(value);
@@ -1336,15 +1420,16 @@ class ImageCarouselComponent {
     }
     handleShowImage(imageViewModel) {
         if (imageViewModel && imageViewModel.originalSource) {
-            let 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();
         }
     }
+    closePopup() {
+        this.isPopupOpen = false;
+        this.selectedImage = undefined;
+        this._changeDetector.markForCheck();
+    }
     _filterValidImages(value) {
         if (!value) {
             return [];
@@ -1387,38 +1472,54 @@ class ImageCarouselComponent {
     }
     _resizeAndSanitizeSource(source, imageViewModel) {
         const resizeCanvas = document.createElement('canvas');
-        const resizeCanvasContext = resizeCanvas.getContext('2d');
-        const resizeImage = document.createElement('img');
-        resizeImage.crossOrigin = 'anonymous';
-        resizeImage.onload = () => __awaiter(this, void 0, void 0, function* () {
-            resizeCanvasContext.imageSmoothingEnabled = true;
-            resizeCanvasContext.imageSmoothingQuality = 'high';
-            // Get the original image dimensions
-            const originalWidth = resizeImage.width;
-            const originalHeight = resizeImage.height;
-            // Calculate the aspect ratio
-            const aspectRatio = originalWidth / originalHeight;
-            // Calculate the new width and height while maintaining the aspect ratio
-            let newWidth = this._resizeCanvasHeight;
-            let newHeight = this._resizeCanvasHeight;
-            if (originalWidth > originalHeight) {
-                newHeight = this._resizeCanvasHeight / aspectRatio;
+        const ctx = resizeCanvas.getContext('2d');
+        const img = document.createElement('img');
+        img.crossOrigin = 'anonymous';
+        img.onload = () => {
+            ctx.imageSmoothingEnabled = true;
+            ctx.imageSmoothingQuality = 'high';
+            const ow = img.width;
+            const oh = img.height;
+            const aspect = ow / oh;
+            let newW = this._resizeCanvasHeight;
+            let newH = this._resizeCanvasHeight;
+            if (ow > oh) {
+                newH = this._resizeCanvasHeight / aspect;
             }
             else {
-                newWidth = this._resizeCanvasHeight * aspectRatio;
-            }
-            // Set the canvas size to the new width and height
-            resizeCanvas.width = newWidth;
-            resizeCanvas.height = newHeight;
-            const imageWidth = this._resizeCanvasHeight * (resizeImage.height / resizeImage.width);
-            resizeCanvasContext.drawImage(resizeImage, 0, 0, newWidth, newHeight);
-            const resizedSource = resizeCanvas.toDataURL('image/jpeg');
+                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);
+            const mime = this._detectPreferredMime(source);
+            const 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();
-        });
-        // @ts-ignore
-        resizeImage.src = source;
+        };
+        img.src = source;
+    }
+    _detectPreferredMime(source) {
+        // Data URI check
+        const m = source.match(/^data:(image\/[a-zA-Z+.-]+);base64,/);
+        if (m) {
+            const t = m[1].toLowerCase();
+            if (t === 'image/png' || t === 'image/webp' || t === 'image/jpeg')
+                return t;
+        }
+        const 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';
     }
     _scrollCarouselToIndex() {
         if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
@@ -1468,9 +1569,31 @@ ImageCarouselComponent.decorators = [
               </co-scroll-container>
           </div>
       </div>
+      <!-- Modal (real popup) -->
+      <div
+        class="image-modal"
+        *ngIf="isPopupOpen"
+        (click)="closePopup()"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Image preview"
+      >
+        <div class="image-modal__content" (click)="$event.stopPropagation()">
+          <button
+            class="image-modal__close"
+            type="button"
+            aria-label="Close"
+            (click)="closePopup()"
+          >
+            ×
+          </button>
+
+          <img [src]="selectedImage?.originalSource" alt="Image preview" />
+        </div>
+      </div>
   `,
                 changeDetection: 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 = () => [
@@ -1481,6 +1604,7 @@ ImageCarouselComponent.ctorParameters = () => [
 ];
 ImageCarouselComponent.propDecorators = {
     carousel: [{ type: ViewChild, args: ['carousel', { read: ElementRef },] }],
+    onEsc: [{ type: HostListener, args: ['document:keydown.escape',] }],
     showRefresh: [{ type: Input }],
     images: [{ type: Input }],
     handleWindowResize: [{ type: HostListener, args: ['window:resize',] }],
@@ -1781,12 +1905,7 @@ class ProductAddtocartComponent {
                         }
                     }
                     else {
-                        const generatedGoodId = yield this._getGeneratedArtDirectly(this.article.goodId);
-                        if (generatedGoodId) {
-                            const articleFull = yield this._productConnectorAdapterService.getArticleFullObject(generatedGoodId, true);
-                            const article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(articleFull);
-                            this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
-                        }
+                        yield this._handleGeneratedArticleDirectly(quantity);
                     }
                 }
                 else {
@@ -1803,8 +1922,15 @@ class ProductAddtocartComponent {
                 }
             }
             else {
-                const article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(this.article);
-                this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
+                if (this.article.goodType === 'B') {
+                    if (!this.article.isConfigurable) {
+                        yield this._handleGeneratedArticleDirectly(quantity);
+                    }
+                }
+                else {
+                    const article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(this.article);
+                    this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
+                }
             }
         });
     }
@@ -1813,6 +1939,21 @@ class ProductAddtocartComponent {
             this._appEventService.onAddToQuote.next(yield this._getJSONFromArticleObject({ article: this.article, quantity: quantity }));
         });
     }
+    _handleGeneratedArticleDirectly(quantity) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const generatedGoodId = yield this._getGeneratedArtDirectly(this.article.goodId);
+            if (generatedGoodId) {
+                const articleFull = yield this._productConnectorAdapterService.getArticleFullObject(generatedGoodId, true);
+                const article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(articleFull);
+                this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
+            }
+        });
+    }
+    _getGeneratedArtDirectly(goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._ioneControllerService.getGeneratedArtDirectly(goodId, true);
+        });
+    }
     _getJSONFromArticleObject(article) {
         return __awaiter(this, void 0, void 0, function* () {
             const configuratorStatistics = new ConfiguratorStatisticsEnvironment();
@@ -1825,11 +1966,6 @@ class ProductAddtocartComponent {
             return yield this._ioneControllerService.getJsonArticleFlatTree(article.article.goodId, article.article.goodType, article.quantity, !!this.externalSource, true, configuratorStatistics);
         });
     }
-    _getGeneratedArtDirectly(goodId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this._ioneControllerService.getGeneratedArtDirectly(goodId, true);
-        });
-    }
 }
 ProductAddtocartComponent.decorators = [
     { type: Component, args: [{
@@ -2264,7 +2400,7 @@ class ProductInfoTabsComponent {
         this.updateHeight(tabIndex);
     }
     updateHeight(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;
             }
@@ -3364,5 +3500,5 @@ IoneProductModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { IoneProductComponent, IoneProductModule, ProductConnectorAdapterService, ProductConnectorService, ProductEventService, ProductExternalSourceComponent, ProductExternalSourceModule, ProductSettingsService, Version, ProductPageModule as ɵa, ProductSelectorTypeModule as ɵb, ProductInfoTabsModule as ɵba, ProductAdditionalInfoModule as ɵbb, ProductAdditionalInfoComponent as ɵbc, ProductPropertiesModule as ɵbd, ProductPropertiesComponent as ɵbe, ProductDocumentModule as ɵbf, ProductDocumentsComponent as ɵbg, ProductSymbolsModule as ɵbh, ProductSymbolsComponent as ɵbi, ProductInfoTabsComponent as ɵbj, ProductDialogModule as ɵbk, ProductDialogComponent as ɵbl, RenderCarouselModule as ɵbm, RenderCarouselComponent as ɵbn, ProductPageComponent as ɵbo, ProductHdModule as ɵbp, ProductHdComponent as ɵbq, ProductScriptLoaderService as ɵbr, PipeModule as ɵc, LocalizePipe as ɵd, DictionaryService as ɵe, JsonUtilsService as ɵf, ProductSelectorTypeComponent as ɵg, IconCacheService as ɵh, ImageCarouselModule as ɵi, ImageCarouselComponent as ɵj, ProductDescriptionModule as ɵk, ProductDescriptionComponent as ɵl, ProductAdditionalDescriptionModule as ɵm, ProductAdditionalDescriptionComponent as ɵn, ProductPriceModule as ɵo, ProductPriceComponent as ɵp, ProductAddtocartModule as ɵq, ProductAddtocartComponent as ɵr, ProductRelatedModule as ɵs, HeaderModule as ɵt, HeaderComponent as ɵu, ProductRelatedComponent as ɵv, ProductStockModule as ɵw, ProductStockComponent as ɵx, ProductDeliveryModule as ɵy, ProductDeliveryComponent as ɵz };
+export { IoneProductComponent, IoneProductModule, ProductConnectorAdapterService, ProductConnectorService, ProductEventService, ProductExternalSourceComponent, ProductExternalSourceModule, ProductSettingsService, Version, ProductPageModule as ɵa, ProductSelectorTypeModule as ɵb, ProductInfoTabsModule as ɵba, ProductAdditionalInfoModule as ɵbb, ProductAdditionalInfoComponent as ɵbc, ProductPropertiesModule as ɵbd, ProductPropertiesComponent as ɵbe, ProductDocumentModule as ɵbf, ProductDocumentsComponent as ɵbg, ProductSymbolsModule as ɵbh, ProductSymbolsComponent as ɵbi, ProductInfoTabsComponent as ɵbj, ProductDialogModule as ɵbk, ProductDialogComponent as ɵbl, RenderCarouselModule as ɵbm, RenderCarouselComponent as ɵbn, ProductPageComponent as ɵbo, ProductHdModule as ɵbp, ProductHdComponent as ɵbq, ProductScriptLoaderService as ɵbr, LocalStorageService as ɵbs, PipeModule as ɵc, LocalizePipe as ɵd, DictionaryService as ɵe, JsonUtilsService as ɵf, ProductSelectorTypeComponent as ɵg, IconCacheService as ɵh, ImageCarouselModule as ɵi, ImageCarouselComponent as ɵj, ProductDescriptionModule as ɵk, ProductDescriptionComponent as ɵl, ProductAdditionalDescriptionModule as ɵm, ProductAdditionalDescriptionComponent as ɵn, ProductPriceModule as ɵo, ProductPriceComponent as ɵp, ProductAddtocartModule as ɵq, ProductAddtocartComponent as ɵr, ProductRelatedModule as ɵs, HeaderModule as ɵt, HeaderComponent as ɵu, ProductRelatedComponent as ɵv, ProductStockModule as ɵw, ProductStockComponent as ɵx, ProductDeliveryModule as ɵy, ProductDeliveryComponent as ɵz };
 //# sourceMappingURL=colijnit-product.js.map