@colijnit/product 259.1.0 → 259.1.1

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

@@ -37,5 +37,6 @@ export declare class ProductAddtocartComponent implements OnInit, OnDestroy {
     handleAddToCartClick(quantity: number): Promise<void>;
     handleAddToQuoteClick(quantity: number): Promise<void>;
     private _getJSONFromArticleObject;
+    private _handleGeneratedArticleDirectly;
     private _getGeneratedArtDirectly;
 }

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.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;

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 = "259.1.0";
-            this.publishDate = "7/9/2025, 9:58:59 AM";
+            this.symVer = "259.1.1";
+            this.publishDate = "9-7-2025 11:53:26";
         }
         return Version;
     }());
@@ -1208,6 +1208,7 @@
             this._adapterService = _adapterService;
             this._settingsService = _settingsService;
             this.controllerInitialized = new rxjs.BehaviorSubject(false);
+            this.articleLoaded = new rxjs.BehaviorSubject(false);
             this._initializing = false;
             this._initialized = false;
             this.connectorOptions = new options.Options();
@@ -1403,6 +1404,7 @@
             // this.sku = "1000610952";
             // this.sku = "4387";
             // this.sku = "1000612725";
+            // this.sku = '1000610952'; // elix = 1000234793
             this._appEventService = _appEventService;
             this._settingsService = _settingsService;
             this._productConnectorService = _productConnectorService;
@@ -1672,7 +1674,7 @@
             this.isReturn = false;
             this.showRelatedProductsPopup = false;
             this.openStockEvent = new i0.EventEmitter();
-            this.configurable = false;
+            this.configurable = true;
             this.threeD = false;
             this.show2D = true;
             this.show3D = false;
@@ -1686,9 +1688,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;
                 }
@@ -1788,6 +1800,7 @@
             if (this._initializedSub) {
                 this._initializedSub.unsubscribe();
             }
+            this._pageLoadedSubscription.unsubscribe();
             this.configurator = undefined;
             this.selections = undefined;
             this.fullscreenbutton = undefined;
@@ -1841,6 +1854,7 @@
                                         });
                                         _this._changeDetector.detectChanges();
                                     }
+                                    _this._ione.articleLoaded.next(true);
                                 });
                             }
                             return [2 /*return*/];
@@ -1862,37 +1876,37 @@
     ProductPageComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-product-page',
-                    template: "<ng-container *ngIf=\"settingsLoaded\">\r\n  <div class=\"page-wrapper\">\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <div class=\"product-image-container\">\r\n          <div class=\"product-page-block-selector-type\">\r\n            <app-product-selector-type class=\"default-padding\"\r\n                                       [(currentType)]=\"currentView\"\r\n                                       [show2D]=\"configurable\"\r\n                                       [show3D]=\"threeD\"\r\n            ></app-product-selector-type>\r\n          </div>\r\n          <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n\r\n            <app-image-carousel\r\n              *ngIf=\"!enableRenderCarousel\"\r\n              [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\"\r\n              [images]=\"article?.images\"\r\n              [showRefresh]=\"configurable && threeD\">\r\n            </app-image-carousel>\r\n\r\n            <app-render-carousel\r\n              *ngIf=\"enableRenderCarousel\"\r\n              [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\"\r\n              [article]=\"article\">\r\n            </app-render-carousel>\r\n\r\n            <ng-container *ngIf=\"settingsLoaded && this.configurable\">\r\n              <threed-configurator\r\n                #configurator\r\n                class=\"threed-configurator\"\r\n                [class.configurator-full-screen]=\"fullScreen\"\r\n                [@toggleVisibilityByState]=\"show3D ? 'show' : 'hide'\"\r\n                [@toggleFullScreen]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n              </threed-configurator>\r\n            </ng-container>\r\n\r\n            <co-icon #fullscreenbutton class=\"fullscreen-button\" *ngIf=\"show3D\"\r\n                     [@toggleTopLeft]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                     [iconData]=\"iconCache.getIcon(fullScreenIcon)\"\r\n                     (click)=\"showFullScreen()\"></co-icon>\r\n            <co-icon class=\"threed-watermark\" *ngIf=\"show3D && fullScreen\"\r\n                     [iconData]=\"iconCache.getIcon(icon.Logo)\"></co-icon>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-description\">\r\n          <app-product-description class=\"default-padding\" [article]=\"article\"></app-product-description>\r\n        </div>\r\n        <div class=\"product-page-block-additional\">\r\n          <div class=\"product-page-block-additional-description\">\r\n            <app-product-additional-description class=\"default-padding\" [article]=\"article\"></app-product-additional-description>\r\n          </div>\r\n          <div class=\"product-page-block-price\" [class.full]=\"configuring\">\r\n            <app-product-price class=\"s-padding\" *ngIf=\"!configuring\"\r\n                               [pricing]=\"article?.pricing\"\r\n                               [configurable]=\"configurable\"\r\n            ></app-product-price>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-selections #selections class=\"threed-selections\"\r\n                                 [class.show-selections]=\"configuring\"\r\n                                 [@toggleFullScreenRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                                 [class.default-padding]=\"!fullScreen\"\r\n                                 [class.show-full-screen]=\"fullScreen\"\r\n                                 [class.mini-scrollbar]=\"fullScreen\"\r\n                                 [sku]=\"sku\"\r\n                                 [settings]=\"settings\"\r\n                                 (onUserActionFromThreeD)=\"configuring = true\"\r\n                                 (instanceSet)=\"setInstance($event)\"\r\n                                 (onImageReceived)=\"appEventService.onImageReceived.next($event)\"\r\n                                 (onRenderStarted)=\"appEventService.onRenderStarted.next()\"\r\n                                 (onDraftRenderImageReceived)=\"appEventService.onDraftRenderImageReceived.next($event)\"\r\n                                 (onArticleReceived)=\"appEventService.onArticleReceived.next($event.detail)\"\r\n                                 (onSelectionsReceived)=\"appEventService.onSelectionsReceived.next($event.detail)\"\r\n                                 (onArticleInfoReceived)=\"appEventService.onArticleInfoReceived.next($event.detail)\"\r\n                                 (onAnswersAvailable)=\"appEventService.onAnswersAvailable.next($event.detail)\"\r\n                                 (onReadyToRender)=\"appEventService.onReadyToRender.next($event.detail)\"\r\n                                 (onRenderImageReceived)=\"appEventService.onRenderImageReceived.next($event.detail)\"\r\n              ></threed-selections>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"product-page-block-addtocart no-padding product-action-buttons\" *ngIf=\"!configuring\" [@toggleTopRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n            <app-product-addtocart\r\n              [configurable]=\"configurable\"\r\n              [createFrozenArticle]=\"createFrozenArticle\"\r\n              [configuring]=\"configuring\"\r\n              [showAddToCart]=\"showAddToCart\"\r\n              [article]=\"article\"\r\n              [externalSource]=\"externalSource\"\r\n              [isReturn]=\"isReturn\"\r\n              (startConfiguration)=\"handleStartConfiguration()\"\r\n              (showRelatedPopup)=\"handlePopUpChange($event)\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"addtocart-reserved product-action-buttons\" *ngIf=\"configuring\" [class.full-screen]=\"fullScreen\">\r\n            <app-product-addtocart class=\"default-padding\"\r\n                                   [configurable]=\"false\"\r\n                                   [fullscreen]=\"fullScreen\"\r\n                                   [showAddToCart]=\"showAddToCart\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   [externalSource]=\"externalSource\"\r\n                                   [isReturn]=\"isReturn\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"product-page-block-variants\">\r\n            <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [externalSource]=\"externalSource\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>\r\n          </div>\r\n          <div class=\"product-page-block-stock\">\r\n            <app-product-stock class=\"no-padding\" [goodId]=\"article?.goodId\" (openStockEvent)=\"openStock()\"></app-product-stock>\r\n          </div>\r\n          <div class=\"product-page-block-delivery\">\r\n            <app-product-delivery class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-delivery>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <app-product-info-tabs class=\"no-padding\" [article]=\"article\"></app-product-info-tabs>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-related s-padding\">\r\n          <app-product-related\r\n            *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n            [externalSource]=\"externalSource\"\r\n            [articles]=\"article?.relatedArticles\"\r\n            [refType]=\"1\"\r\n            [label]=\"'RELATED_PRODUCTS' | localize\">\r\n          </app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content no-top-margin\">\r\n      <div class=\"page-wrapper-full\">\r\n        <div class=\"product-page-block-alternatives s-padding\">\r\n          <app-product-related\r\n            *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n            [externalSource]=\"externalSource\"\r\n            [articles]=\"article?.relatedArticles\"\r\n            [refType]=\"4\"\r\n            [isSmallModus]=\"false\"\r\n            [label]=\"'ALTERNATIVE_PRODUCTS' | localize\">\r\n          </app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"showRelatedProductsPopup\">\r\n      <co-product-dialog\r\n        [mainArticle]=\"article\"\r\n        [articles]=\"article?.relatedArticles\"\r\n        [refType]=\"1\"\r\n        (closeRelatedPopup)=\"handlePopUpChange($event)\"\r\n      >\r\n      </co-product-dialog>\r\n\r\n      <!--      <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"-->\r\n      <!--                           [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>-->\r\n    </div>\r\n\r\n\r\n  </div>\r\n</ng-container>\r\n",
+                    template: "<ng-container *ngIf=\"settingsLoaded\">\r\n  <div class=\"page-wrapper\">\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <div class=\"product-image-container\">\r\n          <div class=\"product-page-block-selector-type\">\r\n            <app-product-selector-type class=\"default-padding\"\r\n                                       [(currentType)]=\"currentView\"\r\n                                       [show2D]=\"configurable\"\r\n                                       [show3D]=\"threeD\"\r\n            ></app-product-selector-type>\r\n          </div>\r\n          <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n\r\n            <app-image-carousel\r\n              *ngIf=\"!enableRenderCarousel\"\r\n              [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\"\r\n              [images]=\"article?.images\"\r\n              [showRefresh]=\"configurable && threeD\">\r\n            </app-image-carousel>\r\n\r\n            <app-render-carousel\r\n              *ngIf=\"enableRenderCarousel\"\r\n              [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\"\r\n              [article]=\"article\">\r\n            </app-render-carousel>\r\n\r\n            <ng-container *ngIf=\"settingsLoaded && this.configurable\">\r\n              <threed-configurator\r\n                #configurator\r\n                class=\"threed-configurator\"\r\n                [class.configurator-full-screen]=\"fullScreen\"\r\n                [@toggleVisibilityByState]=\"show3D ? 'show' : 'hide'\"\r\n                [@toggleFullScreen]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n              </threed-configurator>\r\n            </ng-container>\r\n\r\n            <co-icon #fullscreenbutton class=\"fullscreen-button\" *ngIf=\"show3D\"\r\n                     [@toggleTopLeft]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                     [iconData]=\"iconCache.getIcon(fullScreenIcon)\"\r\n                     (click)=\"showFullScreen()\"></co-icon>\r\n            <co-icon class=\"threed-watermark\" *ngIf=\"show3D && fullScreen\"\r\n                     [iconData]=\"iconCache.getIcon(icon.Logo)\"></co-icon>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-description\">\r\n          <app-product-description class=\"default-padding\" [article]=\"article\"></app-product-description>\r\n        </div>\r\n        <div class=\"product-page-block-additional\">\r\n          <div class=\"product-page-block-additional-description\">\r\n            <app-product-additional-description class=\"default-padding\" [article]=\"article\"></app-product-additional-description>\r\n          </div>\r\n          <div class=\"product-page-block-price\" [class.full]=\"configuring\">\r\n            <app-product-price class=\"s-padding\" *ngIf=\"!configuring\"\r\n                               [pricing]=\"article?.pricing\"\r\n                               [configurable]=\"configurable\"\r\n            ></app-product-price>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-selections #selections class=\"threed-selections\"\r\n                                 [class.show-selections]=\"configuring\"\r\n                                 [@toggleFullScreenRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                                 [class.default-padding]=\"!fullScreen\"\r\n                                 [class.show-full-screen]=\"fullScreen\"\r\n                                 [class.mini-scrollbar]=\"fullScreen\"\r\n                                 [sku]=\"sku\"\r\n                                 [settings]=\"settings\"\r\n                                 (onUserActionFromThreeD)=\"configuring = true\"\r\n                                 (instanceSet)=\"setInstance($event)\"\r\n                                 (onImageReceived)=\"appEventService.onImageReceived.next($event)\"\r\n                                 (onRenderStarted)=\"appEventService.onRenderStarted.next()\"\r\n                                 (onDraftRenderImageReceived)=\"appEventService.onDraftRenderImageReceived.next($event)\"\r\n                                 (onArticleReceived)=\"appEventService.onArticleReceived.next($event.detail)\"\r\n                                 (onSelectionsReceived)=\"appEventService.onSelectionsReceived.next($event.detail)\"\r\n                                 (onArticleInfoReceived)=\"appEventService.onArticleInfoReceived.next($event.detail)\"\r\n                                 (onAnswersAvailable)=\"appEventService.onAnswersAvailable.next($event.detail)\"\r\n                                 (onReadyToRender)=\"appEventService.onReadyToRender.next($event.detail)\"\r\n                                 (onRenderImageReceived)=\"appEventService.onRenderImageReceived.next($event.detail)\"\r\n              ></threed-selections>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"product-page-block-addtocart no-padding product-action-buttons\" *ngIf=\"!configuring\" [@toggleTopRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n            <app-product-addtocart\r\n              [configurable]=\"configurable\"\r\n              [createFrozenArticle]=\"createFrozenArticle\"\r\n              [configuring]=\"configuring\"\r\n              [showAddToCart]=\"showAddToCart\"\r\n              [article]=\"article\"\r\n              [externalSource]=\"externalSource\"\r\n              [isReturn]=\"isReturn\"\r\n              (startConfiguration)=\"handleStartConfiguration()\"\r\n              (showRelatedPopup)=\"handlePopUpChange($event)\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"addtocart-reserved product-action-buttons\" *ngIf=\"configuring\" [class.full-screen]=\"fullScreen\">\r\n            <app-product-addtocart class=\"default-padding\"\r\n                                   [configurable]=\"false\"\r\n                                   [fullscreen]=\"fullScreen\"\r\n                                   [showAddToCart]=\"showAddToCart\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   [externalSource]=\"externalSource\"\r\n                                   [isReturn]=\"isReturn\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"product-page-block-variants\">\r\n            <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [externalSource]=\"externalSource\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>\r\n          </div>\r\n          <div class=\"product-page-block-stock\">\r\n            <app-product-stock class=\"no-padding\" [goodId]=\"article?.goodId\" (openStockEvent)=\"openStock()\"></app-product-stock>\r\n          </div>\r\n          <div class=\"product-page-block-delivery\">\r\n            <app-product-delivery class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-delivery>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\" *ngIf=\"article\">\r\n        <app-product-info-tabs class=\"no-padding\" [article]=\"article\"></app-product-info-tabs>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-related s-padding\">\r\n          <app-product-related\r\n            *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n            [externalSource]=\"externalSource\"\r\n            [articles]=\"article?.relatedArticles\"\r\n            [refType]=\"1\"\r\n            [label]=\"'RELATED_PRODUCTS' | localize\">\r\n          </app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content no-top-margin\">\r\n      <div class=\"page-wrapper-full\">\r\n        <div class=\"product-page-block-alternatives s-padding\">\r\n          <app-product-related\r\n            *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n            [externalSource]=\"externalSource\"\r\n            [articles]=\"article?.relatedArticles\"\r\n            [refType]=\"4\"\r\n            [isSmallModus]=\"false\"\r\n            [label]=\"'ALTERNATIVE_PRODUCTS' | localize\">\r\n          </app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"showRelatedProductsPopup\">\r\n      <co-product-dialog\r\n        [mainArticle]=\"article\"\r\n        [articles]=\"article?.relatedArticles\"\r\n        [refType]=\"1\"\r\n        (closeRelatedPopup)=\"handlePopUpChange($event)\"\r\n      >\r\n      </co-product-dialog>\r\n\r\n      <!--      <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"-->\r\n      <!--                           [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>-->\r\n    </div>\r\n\r\n\r\n  </div>\r\n</ng-container>\r\n",
                     animations: [
                         animations.trigger('toggleFullScreen', [
                             animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
                             animations.state('halfscreen', animations.style({ 'position': '*', 'top': '*', 'left': '*', 'width': '*', 'height': '*' })),
-                            animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out')),
+                            animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out'))
                         ]),
                         animations.trigger('toggleTopLeft', [
                             animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'left': '0' })),
                             animations.state('halfscreen', animations.style({ 'position': 'absolute', 'top': '*', 'left': '*' })),
-                            animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out')),
+                            animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out'))
                         ]),
                         animations.trigger('toggleTopRight', [
                             animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'right': '0' })),
                             animations.state('halfscreen', animations.style({ 'position': '*', 'top': '*', 'right': '*' })),
-                            animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out')),
+                            animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out'))
                         ]),
                         animations.trigger('toggleFullScreenRight', [
                             animations.state('fullscreen', animations.style({ 'position': 'fixed', 'width': '400px', 'top': '0', 'right': '0' })),
                             animations.state('halfscreen', animations.style({ 'position': '*', 'width': '*', 'top': '*', 'right': '*' })),
-                            animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out')),
+                            animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out'))
                         ]),
                         animations.trigger('toggleVisibilityByState', [
                             animations.state('hide', animations.style({ 'opacity': '0', 'display': 'none' })),
                             animations.state('show', animations.style({ 'display': 'block', 'opacity': '1' })),
-                            animations.transition('hide <=> show', animations.animate('200ms 100ms ease-in-out')),
+                            animations.transition('hide <=> show', animations.animate('200ms 100ms ease-in-out'))
                         ]),
                         animations.trigger('toggleVisibility', [
                             animations.state('void', animations.style({ 'opacity': '0' })),
                             animations.state('*', animations.style({ 'opacity': '1' })),
-                            animations.transition('void => *', animations.animate('200ms ease-in-out')),
+                            animations.transition('void => *', animations.animate('200ms ease-in-out'))
                         ])
                     ],
                     styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child{margin-top:0}.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:65%;flex-direction:column}.page-wrapper-right{display:flex;width:35%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.threed-selections ::ng-deep .co-summary-line{cursor:pointer}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:none}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional{width:100%}.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74B77F}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;grid-gap:15px;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:all .2s ease}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:bold;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:bold;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left{width:100%}.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"]
@@ -2550,12 +2564,12 @@
         };
         ProductAddtocartComponent.prototype.handleAddToCartClick = function (quantity) {
             return __awaiter(this, void 0, void 0, function () {
-                var article, generatedGoodId, articleFull, article, article, article;
+                var article, article, article;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (!this.createFrozenArticle) return [3 /*break*/, 11];
-                            if (!(this.article.goodType === 'B')) return [3 /*break*/, 6];
+                            if (!this.createFrozenArticle) return [3 /*break*/, 10];
+                            if (!(this.article.goodType === 'B')) return [3 /*break*/, 5];
                             if (!this.article.isConfigurable) return [3 /*break*/, 2];
                             return [4 /*yield*/, this._getJSONFromArticleObject({ article: this.article, quantity: quantity })];
                         case 1:
@@ -2563,39 +2577,41 @@
                             if (article) {
                                 this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
                             }
-                            return [3 /*break*/, 5];
-                        case 2: return [4 /*yield*/, this._getGeneratedArtDirectly(this.article.goodId)];
+                            return [3 /*break*/, 4];
+                        case 2: return [4 /*yield*/, this._handleGeneratedArticleDirectly(quantity)];
                         case 3:
-                            generatedGoodId = _a.sent();
-                            if (!generatedGoodId) return [3 /*break*/, 5];
-                            return [4 /*yield*/, this._productConnectorAdapterService.getArticleFullObject(generatedGoodId, true)];
-                        case 4:
-                            articleFull = _a.sent();
-                            article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(articleFull);
-                            this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
-                            _a.label = 5;
-                        case 5: return [3 /*break*/, 10];
-                        case 6:
+                            _a.sent();
+                            _a.label = 4;
+                        case 4: return [3 /*break*/, 9];
+                        case 5:
                             article = void 0;
-                            if (!!!this.externalSource) return [3 /*break*/, 8];
+                            if (!!!this.externalSource) return [3 /*break*/, 7];
                             return [4 /*yield*/, this._getJSONFromArticleObject({ article: this.article, quantity: quantity })];
-                        case 7:
+                        case 6:
                             article = _a.sent();
-                            return [3 /*break*/, 9];
-                        case 8:
+                            return [3 /*break*/, 8];
+                        case 7:
                             article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(this.article);
-                            _a.label = 9;
-                        case 9:
+                            _a.label = 8;
+                        case 8:
                             if (article) {
                                 this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
                             }
-                            _a.label = 10;
-                        case 10: return [3 /*break*/, 12];
+                            _a.label = 9;
+                        case 9: return [3 /*break*/, 14];
+                        case 10:
+                            if (!(this.article.goodType === 'B')) return [3 /*break*/, 13];
+                            if (!!this.article.isConfigurable) return [3 /*break*/, 12];
+                            return [4 /*yield*/, this._handleGeneratedArticleDirectly(quantity)];
                         case 11:
+                            _a.sent();
+                            _a.label = 12;
+                        case 12: return [3 /*break*/, 14];
+                        case 13:
                             article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(this.article);
                             this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
-                            _a.label = 12;
-                        case 12: return [2 /*return*/];
+                            _a.label = 14;
+                        case 14: return [2 /*return*/];
                     }
                 });
             });
@@ -2634,6 +2650,26 @@
                 });
             });
         };
+        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) {
@@ -3059,7 +3095,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;
                 }