@colijnit/product 258.1.5 → 258.1.6

package/app/components/image-carousel/image-carousel.component.d.ts

@@ -14,6 +14,9 @@ export declare class ImageCarouselComponent implements OnDestroy {
     private _changeDetector;
     private _domSanitizer;
     carousel: ElementRef;
+    isPopupOpen: boolean;
+    selectedImage?: ImageViewModel;
+    onEsc(): void;
     showRefresh: boolean;
     set images(value: (CoDocument | string)[]);
     get images(): (CoDocument | string)[];
@@ -36,8 +39,10 @@ export declare class ImageCarouselComponent implements OnDestroy {
     handleThumbClick(index: number): void;
     onForceRenderImage(): void;
     handleShowImage(imageViewModel: ImageViewModel): void;
+    closePopup(): void;
     private _filterValidImages;
     private _loadAndRescaleImages;
     private _resizeAndSanitizeSource;
+    private _detectPreferredMime;
     private _scrollCarouselToIndex;
 }

package/app/components/product-addtocart/product-addtocart.component.d.ts

@@ -6,11 +6,13 @@ import { ProductEventService } from '../../service/product-event.service';
 import { ArticleFullObject } from '@colijnit/articleapi/build/model/article-full-object';
 import { ProductSettingsService } from '../../service/product-settings.service';
 import { ExternalSource } from '@colijnit/articleapi/build/model/external-source.bo';
+import { ProductConnectorAdapterService } from '../../service/product-connector-adapter.service';
 export declare class ProductAddtocartComponent implements OnInit, OnDestroy {
     iconCache: IconCacheService;
     private _ioneControllerService;
     private _appEventService;
     private _settingsService;
+    private _productConnectorAdapterService;
     readonly icon: typeof IconEnum;
     addToCartButton: ElementRef;
     article: ArticleFullObject;
@@ -29,10 +31,12 @@ export declare class ProductAddtocartComponent implements OnInit, OnDestroy {
     showRelatedPopup: EventEmitter<boolean>;
     showQuoteButton: boolean;
     private _quantity;
-    constructor(iconCache: IconCacheService, _ioneControllerService: ProductConnectorService, _appEventService: ProductEventService, _settingsService: ProductSettingsService);
+    constructor(iconCache: IconCacheService, _ioneControllerService: ProductConnectorService, _appEventService: ProductEventService, _settingsService: ProductSettingsService, _productConnectorAdapterService: ProductConnectorAdapterService);
     ngOnInit(): void;
     ngOnDestroy(): void;
     handleAddToCartClick(quantity: number): Promise<void>;
     handleAddToQuoteClick(quantity: number): Promise<void>;
+    private _handleGeneratedArticleDirectly;
+    private _getGeneratedArtDirectly;
     private _getJSONFromArticleObject;
 }

package/app/components/product-page/product-page.component.d.ts

@@ -51,6 +51,7 @@ export declare class ProductPageComponent implements OnInit, OnDestroy, AfterVie
     private _currentView;
     private _subs;
     private _settings;
+    private _pageLoadedSubscription;
     constructor(_ione: ProductConnectorService, _renderer: Renderer2, _changeDetector: ChangeDetectorRef, iconCache: IconCacheService, settingsService: ProductSettingsService, appEventService: ProductEventService);
     ngOnInit(): void;
     ngAfterViewInit(): void;

package/app/service/product-connector-adapter.service.d.ts

@@ -29,6 +29,7 @@ export declare class ProductConnectorAdapterService implements OnDestroy {
     getDeliveryDate2(goodId: number): Promise<DeliveryPrognosis>;
     getJsonConfiguredArticles(configuratorStatistics?: ConfiguratorStatisticsEnvironment): Promise<string>;
     getJsonArticleFlatTree(goodId: number, goodType: string, quantity: number, externalSource?: boolean, showLoader?: boolean, instanceId?: any, configuratorStatistics?: ConfiguratorStatisticsEnvironment): Promise<string>;
+    getGeneratedArtDirectly(goodId: number, showLoader: boolean): Promise<number>;
     getGoodIdFromArticleNr(sku: string): Promise<number>;
     getArticleFullObject(goodId: number, showLoader?: boolean): Promise<ArticleFullObject>;
     getSuperArticle(id: string, branch?: string): Promise<SuperArticle>;

package/app/service/product-connector.service.d.ts

@@ -13,6 +13,7 @@ export declare class ProductConnectorService implements OnDestroy {
     private _settingsService;
     get shouldShowLoader(): boolean;
     controllerInitialized: BehaviorSubject<boolean>;
+    articleLoaded: BehaviorSubject<boolean>;
     private _shouldShowLoader;
     private _initializing;
     private _initialized;
@@ -33,6 +34,7 @@ export declare class ProductConnectorService implements OnDestroy {
     getDeliveryDate2(goodId: number): Promise<DeliveryPrognosis>;
     getSuperArticle(id: string): Promise<SuperArticle>;
     getJsonArticleFlatTree(goodId: number, goodType: string, quantity: number, externalSource?: boolean, showLoader?: boolean, configuratorStatistics?: ConfiguratorStatisticsEnvironment): Promise<string>;
+    getGeneratedArtDirectly(goodId: number, showLoader?: boolean): Promise<number>;
     addWebSessionTransactionLine(transactionUuid: string, sku: string, quantity: number): Promise<string>;
     onShowLoaderChange(showLoader: boolean): void;
 }

package/bundles/colijnit-product.umd.js

@@ -31,8 +31,8 @@
         function Version() {
             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";
         }
         return Version;
     }());
@@ -750,6 +750,17 @@
                 });
             });
         };
+        ProductConnectorAdapterService.prototype.getGeneratedArtDirectly = function (goodId, showLoader) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, this.articleConnector.getGeneratedArtDirectly(goodId, showLoader).catch(function (messages) {
+                            _this._eventService.errorMessage.next(messages);
+                            return null;
+                        })];
+                });
+            });
+        };
         ProductConnectorAdapterService.prototype.getGoodIdFromArticleNr = function (sku) {
             return __awaiter(this, void 0, void 0, function () {
                 var response;
@@ -1197,6 +1208,7 @@
             this._adapterService = _adapterService;
             this._settingsService = _settingsService;
             this.controllerInitialized = new rxjs.BehaviorSubject(false);
+            this.articleLoaded = new rxjs.BehaviorSubject(false);
             this._initializing = false;
             this._initialized = false;
             this.connectorOptions = new options.Options();
@@ -1304,6 +1316,10 @@
             if (showLoader === void 0) { showLoader = true; }
             return this._adapterService.getJsonArticleFlatTree(goodId, goodType, quantity, externalSource, showLoader, this._instanceId, configuratorStatistics);
         };
+        ProductConnectorService.prototype.getGeneratedArtDirectly = function (goodId, showLoader) {
+            if (showLoader === void 0) { showLoader = true; }
+            return this._adapterService.getGeneratedArtDirectly(goodId, showLoader);
+        };
         ProductConnectorService.prototype.addWebSessionTransactionLine = function (transactionUuid, sku, quantity) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
@@ -1671,9 +1687,19 @@
                 if (_this.selections.nativeElement) {
                     _this.selections.nativeElement.forceRenderImage();
                 }
-            }), this.settingsService.settingsLoaded.subscribe(function (loaded) { return _this._handleSettingsLoaded(loaded); }), this._ione.controllerInitialized.subscribe(function (initialized) {
-                _this.settingsLoaded = initialized;
-            }), this.appEventService.onAnswersAvailable.subscribe(function (answers) {
+            }), this.settingsService.settingsLoaded.subscribe(function (loaded) { return _this._handleSettingsLoaded(loaded); }), this._pageLoadedSubscription = rxjs.combineLatest([
+                this._ione.controllerInitialized,
+                this._ione.articleLoaded
+            ]).subscribe(function (_a) {
+                var _b = __read(_a, 2), initialized = _b[0], articleLoaded = _b[1];
+                if (initialized && articleLoaded) {
+                    _this.settingsLoaded = initialized;
+                }
+            }), 
+            // this._ione.controllerInitialized.subscribe((initialized: boolean) => {
+            //   this.settingsLoaded = initialized;
+            // }),
+            this.appEventService.onAnswersAvailable.subscribe(function (answers) {
                 if (answers && _this.configurable) {
                     _this.showAddToCart = false;
                 }
@@ -1773,6 +1799,7 @@
             if (this._initializedSub) {
                 this._initializedSub.unsubscribe();
             }
+            this._pageLoadedSubscription.unsubscribe();
             this.configurator = undefined;
             this.selections = undefined;
             this.fullscreenbutton = undefined;
@@ -1808,7 +1835,8 @@
                                 this._ione.getFullArticle(this._sku).then(function (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;
@@ -1825,6 +1853,7 @@
                                         });
                                         _this._changeDetector.detectChanges();
                                     }
+                                    _this._ione.articleLoaded.next(true);
                                 });
                             }
                             return [2 /*return*/];
@@ -1846,7 +1875,7 @@
     ProductPageComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-product-page',
-                    template: "<ng-container *ngIf=\"settingsLoaded\">\r\n  <div class=\"page-wrapper\">\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <div class=\"product-image-container\">\r\n          <div class=\"product-page-block-selector-type\">\r\n            <app-product-selector-type class=\"default-padding\"\r\n                                       [(currentType)]=\"currentView\"\r\n                                       [show2D]=\"configurable\"\r\n                                       [show3D]=\"threeD\"\r\n            ></app-product-selector-type>\r\n          </div>\r\n          <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n\r\n            <app-image-carousel\r\n              *ngIf=\"!enableRenderCarousel\"\r\n              [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\"\r\n              [images]=\"article?.images\"\r\n              [showRefresh]=\"configurable && threeD\">\r\n            </app-image-carousel>\r\n\r\n            <app-render-carousel\r\n              *ngIf=\"enableRenderCarousel\"\r\n              [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\"\r\n              [article]=\"article\">\r\n            </app-render-carousel>\r\n\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-configurator\r\n                #configurator\r\n                class=\"threed-configurator\"\r\n                [class.configurator-full-screen]=\"fullScreen\"\r\n                [@toggleVisibilityByState]=\"show3D ? 'show' : 'hide'\"\r\n                [@toggleFullScreen]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n              </threed-configurator>\r\n            </ng-container>\r\n\r\n            <co-icon #fullscreenbutton class=\"fullscreen-button\" *ngIf=\"show3D\"\r\n                     [@toggleTopLeft]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                     [iconData]=\"iconCache.getIcon(fullScreenIcon)\"\r\n                     (click)=\"showFullScreen()\"></co-icon>\r\n            <co-icon class=\"threed-watermark\" *ngIf=\"show3D && fullScreen\"\r\n                     [iconData]=\"iconCache.getIcon(icon.Logo)\"></co-icon>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-description\">\r\n          <app-product-description class=\"default-padding\" [article]=\"article\"></app-product-description>\r\n        </div>\r\n        <div class=\"product-page-block-additional\">\r\n          <div class=\"product-page-block-additional-description\">\r\n            <app-product-additional-description class=\"default-padding\" [article]=\"article\"></app-product-additional-description>\r\n          </div>\r\n          <div class=\"product-page-block-price\" [class.full]=\"configuring\">\r\n            <app-product-price class=\"s-padding\" *ngIf=\"!configuring\"\r\n                               [pricing]=\"article?.pricing\"\r\n                               [configurable]=\"configurable\"\r\n            ></app-product-price>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-selections #selections class=\"threed-selections\"\r\n                                 [class.show-selections]=\"configuring\"\r\n                                 [@toggleFullScreenRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                                 [class.default-padding]=\"!fullScreen\"\r\n                                 [class.show-full-screen]=\"fullScreen\"\r\n                                 [class.mini-scrollbar]=\"fullScreen\"\r\n                                 [sku]=\"sku\"\r\n                                 [settings]=\"settings\"\r\n                                 (onUserActionFromThreeD)=\"configuring = true\"\r\n                                 (instanceSet)=\"setInstance($event)\"\r\n                                 (onImageReceived)=\"appEventService.onImageReceived.next($event)\"\r\n                                 (onRenderStarted)=\"appEventService.onRenderStarted.next()\"\r\n                                 (onDraftRenderImageReceived)=\"appEventService.onDraftRenderImageReceived.next($event)\"\r\n                                 (onArticleReceived)=\"appEventService.onArticleReceived.next($event.detail)\"\r\n                                 (onSelectionsReceived)=\"appEventService.onSelectionsReceived.next($event.detail)\"\r\n                                 (onArticleInfoReceived)=\"appEventService.onArticleInfoReceived.next($event.detail)\"\r\n                                 (onAnswersAvailable)=\"appEventService.onAnswersAvailable.next($event.detail)\"\r\n                                 (onReadyToRender)=\"appEventService.onReadyToRender.next($event.detail)\"\r\n                                 (onRenderImageReceived)=\"appEventService.onRenderImageReceived.next($event.detail)\"\r\n              ></threed-selections>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"product-page-block-addtocart no-padding product-action-buttons\" *ngIf=\"!configuring\" [@toggleTopRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n            <app-product-addtocart\r\n              [configurable]=\"configurable\"\r\n              [createFrozenArticle]=\"createFrozenArticle\"\r\n              [configuring]=\"configuring\"\r\n              [showAddToCart]=\"showAddToCart\"\r\n              [article]=\"article\"\r\n              [externalSource]=\"externalSource\"\r\n              [isReturn]=\"isReturn\"\r\n              (startConfiguration)=\"handleStartConfiguration()\"\r\n              (showRelatedPopup)=\"handlePopUpChange($event)\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"addtocart-reserved product-action-buttons\" *ngIf=\"configuring\" [class.full-screen]=\"fullScreen\">\r\n            <app-product-addtocart class=\"default-padding\"\r\n                                   [configurable]=\"false\"\r\n                                   [fullscreen]=\"fullScreen\"\r\n                                   [showAddToCart]=\"showAddToCart\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   [externalSource]=\"externalSource\"\r\n                                   [isReturn]=\"isReturn\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"product-page-block-variants\">\r\n            <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [externalSource]=\"externalSource\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>\r\n          </div>\r\n          <div class=\"product-page-block-stock\">\r\n            <app-product-stock class=\"no-padding\" [goodId]=\"article?.goodId\" (openStockEvent)=\"openStock()\"></app-product-stock>\r\n          </div>\r\n          <div class=\"product-page-block-delivery\">\r\n            <app-product-delivery class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-delivery>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <app-product-info-tabs class=\"no-padding\" [article]=\"article\"></app-product-info-tabs>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-related s-padding\">\r\n          <app-product-related\r\n            *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n            [externalSource]=\"externalSource\"\r\n            [articles]=\"article?.relatedArticles\"\r\n            [refType]=\"1\"\r\n            [label]=\"'RELATED_PRODUCTS' | localize\">\r\n          </app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content no-top-margin\">\r\n      <div class=\"page-wrapper-full\">\r\n        <div class=\"product-page-block-alternatives s-padding\">\r\n          <app-product-related\r\n            *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n            [externalSource]=\"externalSource\"\r\n            [articles]=\"article?.relatedArticles\"\r\n            [refType]=\"4\"\r\n            [isSmallModus]=\"false\"\r\n            [label]=\"'ALTERNATIVE_PRODUCTS' | localize\">\r\n          </app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"showRelatedProductsPopup\">\r\n      <co-product-dialog\r\n        [mainArticle]=\"article\"\r\n        [articles]=\"article?.relatedArticles\"\r\n        [refType]=\"1\"\r\n        (closeRelatedPopup)=\"handlePopUpChange($event)\"\r\n      >\r\n      </co-product-dialog>\r\n\r\n      <!--      <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"-->\r\n      <!--                           [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>-->\r\n    </div>\r\n\r\n\r\n  </div>\r\n</ng-container>\r\n",
+                    template: "<ng-container *ngIf=\"settingsLoaded\">\r\n  <div class=\"page-wrapper\">\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <div class=\"product-image-container\">\r\n          <div class=\"product-page-block-selector-type\">\r\n            <app-product-selector-type class=\"default-padding\"\r\n                                       [(currentType)]=\"currentView\"\r\n                                       [show2D]=\"configurable\"\r\n                                       [show3D]=\"threeD\"\r\n            ></app-product-selector-type>\r\n          </div>\r\n          <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n\r\n            <app-image-carousel\r\n              *ngIf=\"!enableRenderCarousel\"\r\n              [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\"\r\n              [images]=\"article?.images\"\r\n              [showRefresh]=\"configurable && threeD\">\r\n            </app-image-carousel>\r\n\r\n            <app-render-carousel\r\n              *ngIf=\"enableRenderCarousel\"\r\n              [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\"\r\n              [article]=\"article\">\r\n            </app-render-carousel>\r\n\r\n            <ng-container *ngIf=\"settingsLoaded && this.configurable\">\r\n              <threed-configurator\r\n                #configurator\r\n                class=\"threed-configurator\"\r\n                [class.configurator-full-screen]=\"fullScreen\"\r\n                [@toggleVisibilityByState]=\"show3D ? 'show' : 'hide'\"\r\n                [@toggleFullScreen]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n              </threed-configurator>\r\n            </ng-container>\r\n\r\n            <co-icon #fullscreenbutton class=\"fullscreen-button\" *ngIf=\"show3D\"\r\n                     [@toggleTopLeft]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                     [iconData]=\"iconCache.getIcon(fullScreenIcon)\"\r\n                     (click)=\"showFullScreen()\"></co-icon>\r\n            <co-icon class=\"threed-watermark\" *ngIf=\"show3D && fullScreen\"\r\n                     [iconData]=\"iconCache.getIcon(icon.Logo)\"></co-icon>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-description\">\r\n          <app-product-description class=\"default-padding\" [article]=\"article\"></app-product-description>\r\n        </div>\r\n        <div class=\"product-page-block-additional\">\r\n          <div class=\"product-page-block-additional-description\">\r\n            <app-product-additional-description class=\"default-padding\" [article]=\"article\"></app-product-additional-description>\r\n          </div>\r\n          <div class=\"product-page-block-price\" [class.full]=\"configuring\">\r\n            <app-product-price class=\"s-padding\" *ngIf=\"!configuring\"\r\n                               [pricing]=\"article?.pricing\"\r\n                               [configurable]=\"configurable\"\r\n            ></app-product-price>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-selections #selections class=\"threed-selections\"\r\n                                 [class.show-selections]=\"configuring\"\r\n                                 [@toggleFullScreenRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                                 [class.default-padding]=\"!fullScreen\"\r\n                                 [class.show-full-screen]=\"fullScreen\"\r\n                                 [class.mini-scrollbar]=\"fullScreen\"\r\n                                 [sku]=\"sku\"\r\n                                 [settings]=\"settings\"\r\n                                 (onUserActionFromThreeD)=\"configuring = true\"\r\n                                 (instanceSet)=\"setInstance($event)\"\r\n                                 (onImageReceived)=\"appEventService.onImageReceived.next($event)\"\r\n                                 (onRenderStarted)=\"appEventService.onRenderStarted.next()\"\r\n                                 (onDraftRenderImageReceived)=\"appEventService.onDraftRenderImageReceived.next($event)\"\r\n                                 (onArticleReceived)=\"appEventService.onArticleReceived.next($event.detail)\"\r\n                                 (onSelectionsReceived)=\"appEventService.onSelectionsReceived.next($event.detail)\"\r\n                                 (onArticleInfoReceived)=\"appEventService.onArticleInfoReceived.next($event.detail)\"\r\n                                 (onAnswersAvailable)=\"appEventService.onAnswersAvailable.next($event.detail)\"\r\n                                 (onReadyToRender)=\"appEventService.onReadyToRender.next($event.detail)\"\r\n                                 (onRenderImageReceived)=\"appEventService.onRenderImageReceived.next($event.detail)\"\r\n              ></threed-selections>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"product-page-block-addtocart no-padding product-action-buttons\" *ngIf=\"!configuring\" [@toggleTopRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n            <app-product-addtocart\r\n              [configurable]=\"configurable\"\r\n              [createFrozenArticle]=\"createFrozenArticle\"\r\n              [configuring]=\"configuring\"\r\n              [showAddToCart]=\"showAddToCart\"\r\n              [article]=\"article\"\r\n              [externalSource]=\"externalSource\"\r\n              [isReturn]=\"isReturn\"\r\n              (startConfiguration)=\"handleStartConfiguration()\"\r\n              (showRelatedPopup)=\"handlePopUpChange($event)\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"addtocart-reserved product-action-buttons\" *ngIf=\"configuring\" [class.full-screen]=\"fullScreen\">\r\n            <app-product-addtocart class=\"default-padding\"\r\n                                   [configurable]=\"false\"\r\n                                   [fullscreen]=\"fullScreen\"\r\n                                   [showAddToCart]=\"showAddToCart\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   [externalSource]=\"externalSource\"\r\n                                   [isReturn]=\"isReturn\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"product-page-block-variants\">\r\n            <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [externalSource]=\"externalSource\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>\r\n          </div>\r\n          <div class=\"product-page-block-stock\">\r\n            <app-product-stock class=\"no-padding\" [goodId]=\"article?.goodId\" (openStockEvent)=\"openStock()\"></app-product-stock>\r\n          </div>\r\n          <div class=\"product-page-block-delivery\">\r\n            <app-product-delivery class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-delivery>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\" *ngIf=\"article\">\r\n        <app-product-info-tabs class=\"no-padding\" [article]=\"article\"></app-product-info-tabs>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-related s-padding\">\r\n          <app-product-related\r\n            *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n            [externalSource]=\"externalSource\"\r\n            [articles]=\"article?.relatedArticles\"\r\n            [refType]=\"1\"\r\n            [label]=\"'RELATED_PRODUCTS' | localize\">\r\n          </app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content no-top-margin\">\r\n      <div class=\"page-wrapper-full\">\r\n        <div class=\"product-page-block-alternatives s-padding\">\r\n          <app-product-related\r\n            *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n            [externalSource]=\"externalSource\"\r\n            [articles]=\"article?.relatedArticles\"\r\n            [refType]=\"4\"\r\n            [isSmallModus]=\"false\"\r\n            [label]=\"'ALTERNATIVE_PRODUCTS' | localize\">\r\n          </app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"showRelatedProductsPopup\">\r\n      <co-product-dialog\r\n        [mainArticle]=\"article\"\r\n        [articles]=\"article?.relatedArticles\"\r\n        [refType]=\"1\"\r\n        (closeRelatedPopup)=\"handlePopUpChange($event)\"\r\n      >\r\n      </co-product-dialog>\r\n\r\n      <!--      <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"-->\r\n      <!--                           [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>-->\r\n    </div>\r\n\r\n\r\n  </div>\r\n</ng-container>\r\n",
                     animations: [
                         animations.trigger('toggleFullScreen', [
                             animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
@@ -2029,6 +2058,7 @@
             this._appEventService = _appEventService;
             this._changeDetector = _changeDetector;
             this._domSanitizer = _domSanitizer;
+            this.isPopupOpen = false;
             this.showRefresh = false;
             this.resizing = false;
             this.imageViewModels = [];
@@ -2058,6 +2088,12 @@
                 _this._changeDetector.detectChanges();
             }));
         }
+        // Close on ESC
+        ImageCarouselComponent.prototype.onEsc = function () {
+            if (this.isPopupOpen) {
+                this.closePopup();
+            }
+        };
         Object.defineProperty(ImageCarouselComponent.prototype, "images", {
             get: function () {
                 return this._images;
@@ -2113,15 +2149,16 @@
         };
         ImageCarouselComponent.prototype.handleShowImage = function (imageViewModel) {
             if (imageViewModel && imageViewModel.originalSource) {
-                var popupWindow = window.open('', 'Image zoom', 'width=600,height=400');
-                // Set the content of the popup window
-                popupWindow.document.write('<html><head><title>Image zoom</title></head><body>');
-                popupWindow.document.write("<img src=" + imageViewModel.originalSource + " alt=\"Image\" style=\"width:100%; height:auto;\">");
-                popupWindow.document.write('</body></html>');
-                // Close the document to render the popup window
-                popupWindow.document.close();
+                this.selectedImage = imageViewModel;
+                this.isPopupOpen = true;
+                this._changeDetector.markForCheck();
             }
         };
+        ImageCarouselComponent.prototype.closePopup = function () {
+            this.isPopupOpen = false;
+            this.selectedImage = undefined;
+            this._changeDetector.markForCheck();
+        };
         ImageCarouselComponent.prototype._filterValidImages = function (value) {
             if (!value) {
                 return [];
@@ -2166,39 +2203,54 @@
         ImageCarouselComponent.prototype._resizeAndSanitizeSource = function (source, imageViewModel) {
             var _this = this;
             var resizeCanvas = document.createElement('canvas');
-            var resizeCanvasContext = resizeCanvas.getContext('2d');
-            var resizeImage = document.createElement('img');
-            resizeImage.crossOrigin = 'anonymous';
-            resizeImage.onload = function () { return __awaiter(_this, void 0, void 0, function () {
-                var originalWidth, originalHeight, aspectRatio, newWidth, newHeight, imageWidth, resizedSource;
-                return __generator(this, function (_a) {
-                    resizeCanvasContext.imageSmoothingEnabled = true;
-                    resizeCanvasContext.imageSmoothingQuality = 'high';
-                    originalWidth = resizeImage.width;
-                    originalHeight = resizeImage.height;
-                    aspectRatio = originalWidth / originalHeight;
-                    newWidth = this._resizeCanvasHeight;
-                    newHeight = this._resizeCanvasHeight;
-                    if (originalWidth > originalHeight) {
-                        newHeight = this._resizeCanvasHeight / aspectRatio;
-                    }
-                    else {
-                        newWidth = this._resizeCanvasHeight * aspectRatio;
-                    }
-                    // Set the canvas size to the new width and height
-                    resizeCanvas.width = newWidth;
-                    resizeCanvas.height = newHeight;
-                    imageWidth = this._resizeCanvasHeight * (resizeImage.height / resizeImage.width);
-                    resizeCanvasContext.drawImage(resizeImage, 0, 0, newWidth, newHeight);
-                    resizedSource = resizeCanvas.toDataURL('image/jpeg');
-                    imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
-                    imageViewModel.originalSource = source;
-                    this._changeDetector.detectChanges();
-                    return [2 /*return*/];
-                });
-            }); };
-            // @ts-ignore
-            resizeImage.src = source;
+            var ctx = resizeCanvas.getContext('2d');
+            var img = document.createElement('img');
+            img.crossOrigin = 'anonymous';
+            img.onload = function () {
+                ctx.imageSmoothingEnabled = true;
+                ctx.imageSmoothingQuality = 'high';
+                var ow = img.width;
+                var oh = img.height;
+                var aspect = ow / oh;
+                var newW = _this._resizeCanvasHeight;
+                var newH = _this._resizeCanvasHeight;
+                if (ow > oh) {
+                    newH = _this._resizeCanvasHeight / aspect;
+                }
+                else {
+                    newW = _this._resizeCanvasHeight * aspect;
+                }
+                resizeCanvas.width = Math.round(newW);
+                resizeCanvas.height = Math.round(newH);
+                // Ensure transparent background before drawing
+                ctx.clearRect(0, 0, resizeCanvas.width, resizeCanvas.height);
+                ctx.drawImage(img, 0, 0, resizeCanvas.width, resizeCanvas.height);
+                var mime = _this._detectPreferredMime(source);
+                var resizedSource = mime === 'image/jpeg'
+                    ? resizeCanvas.toDataURL('image/jpeg', 0.92) // only if original was JPEG
+                    : resizeCanvas.toDataURL(mime); // PNG/WebP keep alpha
+                imageViewModel.source = _this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
+                imageViewModel.originalSource = source;
+                _this._changeDetector.detectChanges();
+            };
+            img.src = source;
+        };
+        ImageCarouselComponent.prototype._detectPreferredMime = function (source) {
+            // Data URI check
+            var m = source.match(/^data:(image\/[a-zA-Z+.-]+);base64,/);
+            if (m) {
+                var t = m[1].toLowerCase();
+                if (t === 'image/png' || t === 'image/webp' || t === 'image/jpeg')
+                    return t;
+            }
+            var lower = source.toLowerCase();
+            if (lower.endsWith('.png'))
+                return 'image/png';
+            if (lower.endsWith('.webp'))
+                return 'image/webp';
+            if (lower.endsWith('.jpg') || lower.endsWith('.jpeg'))
+                return 'image/jpeg';
+            return 'image/png';
         };
         ImageCarouselComponent.prototype._scrollCarouselToIndex = function () {
             if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
@@ -2217,9 +2269,9 @@
     ImageCarouselComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-image-carousel',
-                    template: "\n      <div id=\"product_page_carousel\">\n          <div id=\"product_page_carousel_items\">\n              <co-loader [isShown]=\"true\" *ngIf=\"showLoader\"></co-loader>\n              <div #carousel class=\"inner-carousel\">\n                  <!-- This has been taken out of the for loop to prevent flashing images when updating. -->\n                  <div *ngIf=\"imageViewModels[0]\" class=\"carousel-item\" [id]=\"'slide-0'\" [class.active]=\"isCurrentIndex(0)\" (click)=\"handleShowImage(imageViewModels[0])\">\n                      <img [src]=\"imageViewModels[0].source\">\n                  </div>\n                  <div *ngFor=\"let imageViewModel of imageViewModels.slice(1); let index = index\" class=\"carousel-item\"\n                       [id]=\"'slide-' + (index + 1)\" [class.active]=\"isCurrentIndex((index + 1))\" (click)=\"handleShowImage(imageViewModel)\">\n                      <img [src]=\"imageViewModel.source\">\n                  </div>\n                  <div class=\"carousel-scroller-layer\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n                      <div class=\"carousel-item-scroller prev\" (click)=\"gotoPrevSlide()\" *ngIf=\"currentIndex > 0\"></div>\n                      <div class=\"carousel-item-scroller next\" (click)=\"gotoNextSlide()\" *ngIf=\"currentIndex < images.length - 1\"></div>\n                  </div>\n              </div>\n              <!--\n                      <co-icon class=\"selector-type-icon refresh-button\" [iconData]=\"iconCache.getIcon(icons.Refresh)\" (click)=\"onForceRenderImage()\" [class.loading]=\"showLoader\" *ngIf=\"showRefresh\"></co-icon>\n              -->\n          </div>\n\n          <div id=\"product_page_carousel_thumbs\">\n              <co-scroll-container class=\"scroll-container\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n                  <div *ngFor=\"let imageViewModel of imageViewModels; let index = index\" class=\"carousel-thumb\"\n                       [class.active]=\"index === currentIndex\">\n                      <img [src]=\"imageViewModel.source\" (click)=\"handleThumbClick(index)\"/>\n                  </div>\n              </co-scroll-container>\n          </div>\n      </div>\n  ",
+                    template: "\n      <div id=\"product_page_carousel\">\n          <div id=\"product_page_carousel_items\">\n              <co-loader [isShown]=\"true\" *ngIf=\"showLoader\"></co-loader>\n              <div #carousel class=\"inner-carousel\">\n                  <!-- This has been taken out of the for loop to prevent flashing images when updating. -->\n                  <div *ngIf=\"imageViewModels[0]\" class=\"carousel-item\" [id]=\"'slide-0'\" [class.active]=\"isCurrentIndex(0)\" (click)=\"handleShowImage(imageViewModels[0])\">\n                      <img [src]=\"imageViewModels[0].source\">\n                  </div>\n                  <div *ngFor=\"let imageViewModel of imageViewModels.slice(1); let index = index\" class=\"carousel-item\"\n                       [id]=\"'slide-' + (index + 1)\" [class.active]=\"isCurrentIndex((index + 1))\" (click)=\"handleShowImage(imageViewModel)\">\n                      <img [src]=\"imageViewModel.source\">\n                  </div>\n                  <div class=\"carousel-scroller-layer\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n                      <div class=\"carousel-item-scroller prev\" (click)=\"gotoPrevSlide()\" *ngIf=\"currentIndex > 0\"></div>\n                      <div class=\"carousel-item-scroller next\" (click)=\"gotoNextSlide()\" *ngIf=\"currentIndex < images.length - 1\"></div>\n                  </div>\n              </div>\n              <!--\n                      <co-icon class=\"selector-type-icon refresh-button\" [iconData]=\"iconCache.getIcon(icons.Refresh)\" (click)=\"onForceRenderImage()\" [class.loading]=\"showLoader\" *ngIf=\"showRefresh\"></co-icon>\n              -->\n          </div>\n\n          <div id=\"product_page_carousel_thumbs\">\n              <co-scroll-container class=\"scroll-container\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n                  <div *ngFor=\"let imageViewModel of imageViewModels; let index = index\" class=\"carousel-thumb\"\n                       [class.active]=\"index === currentIndex\">\n                      <img [src]=\"imageViewModel.source\" (click)=\"handleThumbClick(index)\"/>\n                  </div>\n              </co-scroll-container>\n          </div>\n      </div>\n      <!-- Modal (real popup) -->\n      <div\n        class=\"image-modal\"\n        *ngIf=\"isPopupOpen\"\n        (click)=\"closePopup()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=\"Image preview\"\n      >\n        <div class=\"image-modal__content\" (click)=\"$event.stopPropagation()\">\n          <button\n            class=\"image-modal__close\"\n            type=\"button\"\n            aria-label=\"Close\"\n            (click)=\"closePopup()\"\n          >\n            \u00D7\n          </button>\n\n          <img [src]=\"selectedImage?.originalSource\" alt=\"Image preview\" />\n        </div>\n      </div>\n  ",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
+                    styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}.image-modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000}.image-modal__content{position:relative;max-width:90vw;max-height:90vh}.image-modal__content img{max-width:90vw;max-height:90vh;-o-object-fit:contain;object-fit:contain;display:block}.image-modal__close{position:fixed;top:15px;right:30px;background:transparent;border:none;color:#fff;font-size:60px;line-height:1;cursor:pointer}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
                 },] }
     ];
     ImageCarouselComponent.ctorParameters = function () { return [
@@ -2230,6 +2282,7 @@
     ]; };
     ImageCarouselComponent.propDecorators = {
         carousel: [{ type: i0.ViewChild, args: ['carousel', { read: i0.ElementRef },] }],
+        onEsc: [{ type: i0.HostListener, args: ['document:keydown.escape',] }],
         showRefresh: [{ type: i0.Input }],
         images: [{ type: i0.Input }],
         handleWindowResize: [{ type: i0.HostListener, args: ['window:resize',] }],
@@ -2487,11 +2540,12 @@
     ];
 
     var ProductAddtocartComponent = /** @class */ (function () {
-        function ProductAddtocartComponent(iconCache, _ioneControllerService, _appEventService, _settingsService) {
+        function ProductAddtocartComponent(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;
@@ -2537,36 +2591,50 @@
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (!this.createFrozenArticle) return [3 /*break*/, 7];
-                            if (!(this.article.goodType === 'B')) return [3 /*break*/, 2];
+                            if (!this.createFrozenArticle) return [3 /*break*/, 10];
+                            if (!(this.article.goodType === 'B')) return [3 /*break*/, 5];
+                            if (!this.article.isConfigurable) return [3 /*break*/, 2];
                             return [4 /*yield*/, this._getJSONFromArticleObject({ article: this.article, quantity: quantity })];
                         case 1:
                             article = _a.sent();
                             if (article) {
                                 this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
                             }
-                            return [3 /*break*/, 6];
-                        case 2:
+                            return [3 /*break*/, 4];
+                        case 2: return [4 /*yield*/, this._handleGeneratedArticleDirectly(quantity)];
+                        case 3:
+                            _a.sent();
+                            _a.label = 4;
+                        case 4: return [3 /*break*/, 9];
+                        case 5:
                             article = void 0;
-                            if (!!!this.externalSource) return [3 /*break*/, 4];
+                            if (!!!this.externalSource) return [3 /*break*/, 7];
                             return [4 /*yield*/, this._getJSONFromArticleObject({ article: this.article, quantity: quantity })];
-                        case 3:
+                        case 6:
                             article = _a.sent();
-                            return [3 /*break*/, 5];
-                        case 4:
+                            return [3 /*break*/, 8];
+                        case 7:
                             article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(this.article);
-                            _a.label = 5;
-                        case 5:
+                            _a.label = 8;
+                        case 8:
                             if (article) {
                                 this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
                             }
-                            _a.label = 6;
-                        case 6: return [3 /*break*/, 8];
-                        case 7:
+                            _a.label = 9;
+                        case 9: return [3 /*break*/, 14];
+                        case 10:
+                            if (!(this.article.goodType === 'B')) return [3 /*break*/, 13];
+                            if (!!this.article.isConfigurable) return [3 /*break*/, 12];
+                            return [4 /*yield*/, this._handleGeneratedArticleDirectly(quantity)];
+                        case 11:
+                            _a.sent();
+                            _a.label = 12;
+                        case 12: return [3 /*break*/, 14];
+                        case 13:
                             article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(this.article);
                             this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
-                            _a.label = 8;
-                        case 8: return [2 /*return*/];
+                            _a.label = 14;
+                        case 14: return [2 /*return*/];
                     }
                 });
             });
@@ -2586,6 +2654,36 @@
                 });
             });
         };
+        ProductAddtocartComponent.prototype._handleGeneratedArticleDirectly = function (quantity) {
+            return __awaiter(this, void 0, void 0, function () {
+                var generatedGoodId, articleFull, article;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._getGeneratedArtDirectly(this.article.goodId)];
+                        case 1:
+                            generatedGoodId = _a.sent();
+                            if (!generatedGoodId) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this._productConnectorAdapterService.getArticleFullObject(generatedGoodId, true)];
+                        case 2:
+                            articleFull = _a.sent();
+                            article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(articleFull);
+                            this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ProductAddtocartComponent.prototype._getGeneratedArtDirectly = function (goodId) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._ioneControllerService.getGeneratedArtDirectly(goodId, true)];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
         ProductAddtocartComponent.prototype._getJSONFromArticleObject = function (article) {
             return __awaiter(this, void 0, void 0, function () {
                 var configuratorStatistics;
@@ -2618,7 +2716,8 @@
         { type: IconCacheService },
         { type: ProductConnectorService },
         { type: ProductEventService },
-        { type: ProductSettingsService }
+        { type: ProductSettingsService },
+        { type: ProductConnectorAdapterService }
     ]; };
     ProductAddtocartComponent.propDecorators = {
         addToCartButton: [{ type: i0.ViewChild, args: ['addtocartbutton', { read: i0.ElementRef },] }],
@@ -3019,7 +3118,7 @@
             this.updateHeight(tabIndex);
         };
         ProductInfoTabsComponent.prototype.updateHeight = function (tabIndex) {
-            if (this.tabContent.nativeElement.children.length > 0) {
+            if (this.tabContent && this.tabContent.nativeElement.children.length > 0) {
                 if (this.tabContent.nativeElement.children[tabIndex] !== undefined) {
                     this.activeTabHeight = this.tabContent.nativeElement.children[tabIndex].offsetHeight;
                 }