@colijnit/product 258.1.5 → 258.1.6

package/fesm2015/colijnit-product.js

@@ -1,7 +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 { 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';
@@ -30,8 +30,8 @@ class Version {
     constructor() {
         this.name = "@colijnit/product";
         this.description = "Product detail page project for iOne";
-        this.symVer = "258.1.5";
-        this.publishDate = "9-7-2025 14:07:55";
+        this.symVer = "258.1.6";
+        this.publishDate = "22-8-2025 14:23:38";
     }
 }
 
@@ -204,6 +204,14 @@ class ProductConnectorAdapterService {
             });
         });
     }
+    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);
@@ -571,6 +579,7 @@ class ProductConnectorService {
         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();
@@ -648,6 +657,9 @@ class ProductConnectorService {
     getJsonArticleFlatTree(goodId, goodType, quantity, externalSource = false, showLoader = true, configuratorStatistics) {
         return this._adapterService.getJsonArticleFlatTree(goodId, goodType, quantity, externalSource, showLoader, this._instanceId, configuratorStatistics);
     }
+    getGeneratedArtDirectly(goodId, showLoader = true) {
+        return this._adapterService.getGeneratedArtDirectly(goodId, showLoader);
+    }
     addWebSessionTransactionLine(transactionUuid, sku, quantity) {
         return __awaiter(this, void 0, void 0, function* () {
             return yield this._adapterService.addWebSessionTransactionLine(transactionUuid, sku, quantity);
@@ -981,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;
             }
@@ -1063,6 +1084,7 @@ class ProductPageComponent {
         if (this._initializedSub) {
             this._initializedSub.unsubscribe();
         }
+        this._pageLoadedSubscription.unsubscribe();
         this.configurator = undefined;
         this.selections = undefined;
         this.fullscreenbutton = undefined;
@@ -1094,7 +1116,8 @@ class ProductPageComponent {
                     this._ione.getFullArticle(this._sku).then((article) => {
                         this.article = article;
                         if (this.article) {
-                            this.configurable = this.article.goodType === 'B';
+                            this.configurable = this.article.goodType === 'B' && (this.article.isConfigurable || this.article.isConfigurable === undefined);
+                            // this.configurable = this.article.goodType === 'B';
                             if (this.configurable) {
                                 this.showAddToCart = false;
                                 this.currentView = SelectorType.TwoD;
@@ -1111,6 +1134,7 @@ class ProductPageComponent {
                             });
                             this._changeDetector.detectChanges();
                         }
+                        this._ione.articleLoaded.next(true);
                     });
                 }
             }));
@@ -1127,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\">\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%' })),
@@ -1314,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 = [];
@@ -1343,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);
@@ -1389,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 [];
@@ -1440,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) {
@@ -1521,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 = () => [
@@ -1534,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',] }],
@@ -1782,11 +1853,12 @@ ProductPriceModule.decorators = [
 ];
 
 class ProductAddtocartComponent {
-    constructor(iconCache, _ioneControllerService, _appEventService, _settingsService) {
+    constructor(iconCache, _ioneControllerService, _appEventService, _settingsService, _productConnectorAdapterService) {
         this.iconCache = iconCache;
         this._ioneControllerService = _ioneControllerService;
         this._appEventService = _appEventService;
         this._settingsService = _settingsService;
+        this._productConnectorAdapterService = _productConnectorAdapterService;
         this.icon = IconEnum;
         this.createFrozenArticle = true;
         this.configurable = false;
@@ -1826,9 +1898,14 @@ class ProductAddtocartComponent {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.createFrozenArticle) {
                 if (this.article.goodType === 'B') {
-                    const article = yield this._getJSONFromArticleObject({ article: this.article, quantity: quantity });
-                    if (article) {
-                        this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
+                    if (this.article.isConfigurable) {
+                        const article = yield this._getJSONFromArticleObject({ article: this.article, quantity: quantity });
+                        if (article) {
+                            this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
+                        }
+                    }
+                    else {
+                        yield this._handleGeneratedArticleDirectly(quantity);
                     }
                 }
                 else {
@@ -1845,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 });
+                }
             }
         });
     }
@@ -1855,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();
@@ -1909,7 +2008,8 @@ ProductAddtocartComponent.ctorParameters = () => [
     { type: IconCacheService },
     { type: ProductConnectorService },
     { type: ProductEventService },
-    { type: ProductSettingsService }
+    { type: ProductSettingsService },
+    { type: ProductConnectorAdapterService }
 ];
 ProductAddtocartComponent.propDecorators = {
     addToCartButton: [{ type: ViewChild, args: ['addtocartbutton', { read: ElementRef },] }],
@@ -2300,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;
             }