@colijnit/product 257.1.4 → 257.1.6

package/fesm2015/colijnit-product.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, EventEmitter, Component, ViewEncapsulation, ChangeDetectorRef, Input, Output, Renderer2, ViewChild, ElementRef, Pipe, NgModule, HostListener, HostBinding, SecurityContext, CUSTOM_ELEMENTS_SCHEMA, Inject, PLATFORM_ID, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Injectable, Directive, EventEmitter, Component, ViewEncapsulation, ChangeDetectorRef, Input, Output, Renderer2, ViewChild, ElementRef, Pipe, NgModule, ChangeDetectionStrategy, HostListener, HostBinding, SecurityContext, CUSTOM_ELEMENTS_SCHEMA, Inject, PLATFORM_ID, NO_ERRORS_SCHEMA } from '@angular/core';
 import { __awaiter } from 'tslib';
 import { Subject, BehaviorSubject } from 'rxjs';
 import { Options } from '@colijnit/ioneconnector/build/model/options';
@@ -30,8 +30,8 @@ class Version {
     constructor() {
         this.name = "@colijnit/product";
         this.description = "Product detail page project for iOne";
-        this.symVer = "257.1.4";
-        this.publishDate = "8-2-2025 19:30:37";
+        this.symVer = "257.1.6";
+        this.publishDate = "17-3-2025 08:31:39";
     }
 }
 
@@ -117,6 +117,7 @@ class ProductEventService {
         this.onRenderImageReceived = new Subject();
         this.onDraftRenderImageReceived = new Subject();
         this.onArticleInfoReceived = new Subject();
+        this.onAnswersAvailable = new Subject();
         this.onUpdateProductInfoTab = new Subject();
         this.errorMessage = new Subject();
     }
@@ -307,6 +308,7 @@ class Dictionary {
                 "ADDITIONAL_DATA": "Additional information",
                 "ALTERNATIVE_PRODUCTS": "Alternative products",
                 "ARTICLE_NUMBER": "Productnumber",
+                "AS_CONFIGURED": "As configured",
                 "CATEGORY": "Category",
                 "CATEGORY_TYPE": "Category type",
                 "CONFIGURE": "Configure",
@@ -338,6 +340,7 @@ class Dictionary {
                 "ADDITIONAL_DATA": "Extra informatie",
                 "ALTERNATIVE_PRODUCTS": "Alternatieve producten",
                 "ARTICLE_NUMBER": "Artikel nummer",
+                "AS_CONFIGURED": "Zoals samengesteld",
                 "CATEGORY": "Categorie",
                 "CATEGORY_TYPE": "Categorie type",
                 "CONFIGURE": "Configureren",
@@ -692,6 +695,7 @@ class IoneProductComponent {
         this.onSelectionsReceived = new EventEmitter();
         this.onAddToQuote = new EventEmitter();
         this.openStockEvent = new EventEmitter();
+        this.onAnswersAvailable = new EventEmitter();
         this.settingsLoaded = false;
         this.showHD = false;
         this._subs = [];
@@ -699,7 +703,7 @@ class IoneProductComponent {
         // this._dictionary.dictionaryLoaded.subscribe(d => this.upAndLoaded = true),
         this._appEventService.onAddToCart.subscribe((data) => {
             this._handleAddToCart(data);
-        }), this._appEventService.onAddToQuote.subscribe(json => this.onAddToQuote.emit(json)), this._appEventService.onAlternativeClick.subscribe(article => this.onAlternativeClick.emit(article)), this._appEventService.onArticleInfoReceived.subscribe(info => this._handleAnswerInfoReceived(info)), this._appEventService.onArticleReceived.subscribe(article => this.onArticleReceived.emit(article)), this._appEventService.onSelectionsReceived.subscribe(selections => this.onSelectionsReceived.emit(selections)), this._settingsService.settingsLoaded.subscribe(loaded => {
+        }), this._appEventService.onAddToQuote.subscribe(json => this.onAddToQuote.emit(json)), this._appEventService.onAlternativeClick.subscribe(article => this.onAlternativeClick.emit(article)), this._appEventService.onArticleInfoReceived.subscribe(info => this._handleAnswerInfoReceived(info)), this._appEventService.onArticleReceived.subscribe(article => this.onArticleReceived.emit(article)), this._appEventService.onSelectionsReceived.subscribe(selections => this.onSelectionsReceived.emit(selections)), this._appEventService.onAnswersAvailable.subscribe(answers => this._handleAnswersAvailable(answers)), this._settingsService.settingsLoaded.subscribe(loaded => {
             this.settingsLoaded = loaded;
         }));
     }
@@ -733,6 +737,9 @@ class IoneProductComponent {
     _handleAnswerInfoReceived(info) {
         this.onArticleInfoReceived.next(info);
     }
+    _handleAnswersAvailable(answers) {
+        this.onAnswersAvailable.next(answers);
+    }
     _handleAddToCart(data) {
         return __awaiter(this, void 0, void 0, function* () {
             this.onAddToCart.emit(data);
@@ -781,7 +788,8 @@ IoneProductComponent.propDecorators = {
     onArticleReceived: [{ type: Output }],
     onSelectionsReceived: [{ type: Output }],
     onAddToQuote: [{ type: Output }],
-    openStockEvent: [{ type: Output }]
+    openStockEvent: [{ type: Output }],
+    onAnswersAvailable: [{ type: Output }]
 };
 
 class StockAndDelivery {
@@ -895,6 +903,7 @@ class ProductPageComponent {
         this.show2D = true;
         this.show3D = false;
         this.configuring = false;
+        this.showAddToCart = false;
         this.fullscreenAnimationEnd = false;
         this.settingsLoaded = false;
         this._fullScreen = false;
@@ -905,6 +914,13 @@ class ProductPageComponent {
             }
         }), this.settingsService.settingsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)), this._ione.controllerInitialized.subscribe((initialized) => {
             this.settingsLoaded = initialized;
+        }), this.appEventService.onAnswersAvailable.subscribe((answers) => {
+            if (answers && this.configurable) {
+                this.showAddToCart = false;
+            }
+            else {
+                this.showAddToCart = true;
+            }
         }));
     }
     set sku(value) {
@@ -1007,8 +1023,12 @@ class ProductPageComponent {
                         if (this.article) {
                             this.configurable = this.article.goodType === 'B';
                             if (this.configurable) {
+                                this.showAddToCart = false;
                                 this.currentView = SelectorType.TwoD;
                             }
+                            else {
+                                this.showAddToCart = true;
+                            }
                             this.threeD = this.article.is3D;
                             this.selectorType = this.article.selectorTypeCustomer;
                             this._ione.getDeliveryPrognosis(this.article.goodId).then((stockInfo) => {
@@ -1034,7 +1054,7 @@ class ProductPageComponent {
 ProductPageComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-product-page',
-                template: "<ng-container *ngIf=\"settingsLoaded\">\r\n  <div class=\"page-wrapper\">\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <div class=\"product-image-container\">\r\n          <div class=\"product-page-block-selector-type\">\r\n            <app-product-selector-type class=\"default-padding\"\r\n              [(currentType)]=\"currentView\"\r\n              [show2D]=\"configurable\"\r\n              [show3D]=\"threeD\"\r\n            ></app-product-selector-type>\r\n          </div>\r\n          <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n            <app-image-carousel [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\" [images]=\"article?.images\" [showRefresh]=\"configurable && threeD\"></app-image-carousel>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-configurator #configurator 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            <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\" [class.show-selections]=\"configuring\" [@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              ></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                                   [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                                   [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            <app-image-carousel [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\" [images]=\"article?.images\" [showRefresh]=\"configurable && threeD\"></app-image-carousel>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-configurator #configurator 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            <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\" [class.show-selections]=\"configuring\" [@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              ></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",
                 animations: [
                     trigger('toggleFullScreen', [
                         state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
@@ -1067,7 +1087,7 @@ ProductPageComponent.decorators = [
                         transition('void => *', animate('200ms ease-in-out')),
                     ])
                 ],
-                styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:1400px;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:55%;flex-direction:column}.page-wrapper-right{display:flex;width:45%;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}.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:1px solid #efefef}.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"]
+                styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:1400px;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:55%;flex-direction:column}.page-wrapper-right{display:flex;width:45%;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:1px solid #efefef}.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"]
             },] }
 ];
 ProductPageComponent.ctorParameters = () => [
@@ -1204,39 +1224,53 @@ ProductSelectorTypeModule.decorators = [
             },] }
 ];
 
+class ImageViewModel {
+}
 class ImageCarouselComponent {
-    constructor(_ione, _appEventService, _changeDetector, _domSanitizer, iconCache) {
+    constructor(_ione, _appEventService, _changeDetector, _domSanitizer) {
         this._ione = _ione;
         this._appEventService = _appEventService;
         this._changeDetector = _changeDetector;
         this._domSanitizer = _domSanitizer;
-        this.iconCache = iconCache;
-        this.icons = IconEnum;
-        this.showLoader = false;
         this.showRefresh = false;
         this.resizing = false;
+        this.imageViewModels = [];
+        this.showLoader = false;
         this._currentIndex = 0;
         this._images = [];
         this._subs = [];
+        this._resizeCanvasHeight = 500;
         this._subs.push(this._appEventService.onRenderStarted.subscribe(() => {
             this.showLoader = true;
-        }), this._appEventService.onDraftRenderImageReceived.subscribe((url) => {
-            if (this._images[0] instanceof CoDocument) {
-                this._images.unshift(url);
-            }
-            else {
-                this._images[0] = url;
+            this._changeDetector.detectChanges();
+            setTimeout(() => {
+                this.showLoader = false;
+                this._changeDetector.detectChanges();
+            }, 10000);
+        }), this._appEventService.onDraftRenderImageReceived.subscribe((event) => {
+            if (event && event.detail) {
+                if (this._images[0] instanceof CoDocument) {
+                    this._images.unshift(event.detail);
+                }
+                else {
+                    this._images[0] = event.detail;
+                }
+                this._loadAndRescaleImages();
             }
             this.showLoader = false;
+            this._changeDetector.detectChanges();
         }));
     }
     set images(value) {
         if (value && value.length > 0) {
             this._images = this._filterValidImages(value);
-            this._loadImages();
+            this._loadAndRescaleImages();
             this._changeDetector.detectChanges();
         }
     }
+    get images() {
+        return this._images;
+    }
     handleWindowResize() {
         this.resizing = true;
         this._scrollCarouselToIndex();
@@ -1261,11 +1295,6 @@ class ImageCarouselComponent {
         this._currentIndex = value;
         this._scrollCarouselToIndex();
     }
-    get images() {
-        return this._images;
-    }
-    ngOnInit() {
-    }
     ngOnDestroy() {
         this.carousel = undefined;
         this._subs.forEach(s => s.unsubscribe());
@@ -1276,43 +1305,90 @@ class ImageCarouselComponent {
     onForceRenderImage() {
         this._appEventService.onForceRenderImage.next();
     }
-    getImageSrc(image) {
-        let source = '';
-        if (image instanceof CoDocument) {
-            if (image.filePath) {
-                source = image.filePath;
-            }
-            else {
-                source = image.documentBodyAsDataUri;
-            }
+    handleShowImage(imageViewModel) {
+        if (imageViewModel && imageViewModel.originalSource) {
+            let popupWindow = window.open('', 'Image zoom', 'width=600,height=400');
+            // Set the content of the popup window
+            popupWindow.document.write('<html><head><title>Image zoom</title></head><body>');
+            popupWindow.document.write(`<img src=${imageViewModel.originalSource} alt="Image" style="width:100%; height:auto;">`);
+            popupWindow.document.write('</body></html>');
+            // Close the document to render the popup window
+            popupWindow.document.close();
         }
-        else if (image.detail !== undefined) {
-            source = image.detail;
-        }
-        return this._domSanitizer.bypassSecurityTrustUrl(source);
     }
     _filterValidImages(value) {
         if (!value) {
             return [];
         }
-        return value.filter(doc => {
+        return value.filter((doc) => {
             const pattern = /\.(jpg|jpeg|png|gif|bmp|tiff|webp)$/i;
-            return pattern.test(doc.fileName) || !!doc.filePath;
+            return typeof doc === 'string' || (pattern.test(doc.fileName) || !!doc.filePath);
         });
     }
-    _loadImages() {
+    _loadAndRescaleImages() {
+        this.imageViewModels.length = 0;
         if (this._images) {
             this._images.forEach((i) => {
-                if (!i.documentBody && !i.filePath) {
-                    this._ione.getDocumentContent(i.documentId, false).then((content) => {
-                        if (content) {
-                            i.documentBody = content.documentContent;
-                        }
-                    });
+                let imageViewModel = new ImageViewModel();
+                imageViewModel.image = i;
+                if (typeof i === 'string') { // is a rendered image coming from configurator
+                    this._resizeAndSanitizeSource(i, imageViewModel);
+                }
+                else {
+                    if (i.filePath) {
+                        this._resizeAndSanitizeSource(i.filePath, imageViewModel);
+                    }
+                    else if (i.documentBody) {
+                        this._resizeAndSanitizeSource(i.documentBodyAsDataUri, imageViewModel);
+                    }
+                    else {
+                        this._ione.getDocumentContent(i.documentId, false).then((content) => {
+                            if (content) {
+                                i.documentBody = content.documentContent;
+                                this._resizeAndSanitizeSource(i.documentBodyAsDataUri, imageViewModel);
+                                this._changeDetector.detectChanges();
+                            }
+                        });
+                    }
                 }
+                this.imageViewModels.push(imageViewModel);
+                this._changeDetector.detectChanges();
             });
         }
     }
+    _resizeAndSanitizeSource(source, imageViewModel) {
+        const resizeCanvas = document.createElement('canvas');
+        const resizeCanvasContext = resizeCanvas.getContext('2d');
+        const resizeImage = document.createElement('img');
+        resizeImage.onload = () => __awaiter(this, void 0, void 0, function* () {
+            resizeCanvasContext.imageSmoothingEnabled = true;
+            resizeCanvasContext.imageSmoothingQuality = 'high';
+            // Get the original image dimensions
+            const originalWidth = resizeImage.width;
+            const originalHeight = resizeImage.height;
+            // Calculate the aspect ratio
+            const aspectRatio = originalWidth / originalHeight;
+            // Calculate the new width and height while maintaining the aspect ratio
+            let newWidth = this._resizeCanvasHeight;
+            let newHeight = this._resizeCanvasHeight;
+            if (originalWidth > originalHeight) {
+                newHeight = this._resizeCanvasHeight / aspectRatio;
+            }
+            else {
+                newWidth = this._resizeCanvasHeight * aspectRatio;
+            }
+            // Set the canvas size to the new width and height
+            resizeCanvas.width = newWidth;
+            resizeCanvas.height = newHeight;
+            const imageWidth = this._resizeCanvasHeight * (resizeImage.height / resizeImage.width);
+            resizeCanvasContext.drawImage(resizeImage, 0, 0, newWidth, newHeight);
+            const resizedSource = resizeCanvas.toDataURL('image/jpeg');
+            imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
+            imageViewModel.originalSource = source;
+        });
+        // @ts-ignore
+        resizeImage.src = source;
+    }
     _scrollCarouselToIndex() {
         if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
             const movePx = this.currentIndex * this.carousel.nativeElement.clientWidth;
@@ -1330,45 +1406,47 @@ ImageCarouselComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-image-carousel',
                 template: `
-    <div id="product_page_carousel">
-      <div id="product_page_carousel_items">
-        <co-loader [isShown]="showLoader"></co-loader>
-        <div #carousel class="inner-carousel">
-          <!-- This has been taken out of the for loop to prevent flashing images when updating. -->
-          <div *ngIf="images[0]" class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)">
-            <img [src]="getImageSrc(images[0])">
-          </div>
-          <div *ngFor="let image of images.slice(1); let index = index" class="carousel-item" [id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))">
-            <img [src]="getImageSrc(image)">
-          </div>
-          <div class="carousel-scroller-layer" *ngIf="images && images.length > 1">
-            <div class="carousel-item-scroller prev" (click)="gotoPrevSlide()" *ngIf="currentIndex > 0"></div>
-            <div class="carousel-item-scroller next" (click)="gotoNextSlide()" *ngIf="currentIndex < images.length - 1"></div>
+      <div id="product_page_carousel">
+          <div id="product_page_carousel_items">
+              <co-loader [isShown]="true" *ngIf="showLoader"></co-loader>
+              <div #carousel class="inner-carousel">
+                  <!-- This has been taken out of the for loop to prevent flashing images when updating. -->
+                  <div *ngIf="imageViewModels[0]" class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)" (click)="handleShowImage(imageViewModels[0])">
+                      <img [src]="imageViewModels[0].source">
+                  </div>
+                  <div *ngFor="let imageViewModel of imageViewModels.slice(1); let index = index" class="carousel-item"
+                       [id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))" (click)="handleShowImage(imageViewModel)">
+                      <img [src]="imageViewModel.source">
+                  </div>
+                  <div class="carousel-scroller-layer" *ngIf="imageViewModels && imageViewModels.length > 1">
+                      <div class="carousel-item-scroller prev" (click)="gotoPrevSlide()" *ngIf="currentIndex > 0"></div>
+                      <div class="carousel-item-scroller next" (click)="gotoNextSlide()" *ngIf="currentIndex < images.length - 1"></div>
+                  </div>
+              </div>
+              <!--
+                      <co-icon class="selector-type-icon refresh-button" [iconData]="iconCache.getIcon(icons.Refresh)" (click)="onForceRenderImage()" [class.loading]="showLoader" *ngIf="showRefresh"></co-icon>
+              -->
           </div>
-        </div>
-<!--
-        <co-icon class="selector-type-icon refresh-button" [iconData]="iconCache.getIcon(icons.Refresh)" (click)="onForceRenderImage()" [class.loading]="showLoader" *ngIf="showRefresh"></co-icon>
--->
-      </div>
 
-      <div id="product_page_carousel_thumbs">
-        <co-scroll-container class="scroll-container" *ngIf="images && images.length > 1">
-          <div *ngFor="let image of images; let index = index" class="carousel-thumb" [class.active]="index === currentIndex">
-            <img [src]="getImageSrc(image)" (click)="handleThumbClick(index)"/>
+          <div id="product_page_carousel_thumbs">
+              <co-scroll-container class="scroll-container" *ngIf="imageViewModels && imageViewModels.length > 1">
+                  <div *ngFor="let imageViewModel of imageViewModels; let index = index" class="carousel-thumb"
+                       [class.active]="index === currentIndex">
+                      <img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
+                  </div>
+              </co-scroll-container>
           </div>
-        </co-scroll-container>
       </div>
-    </div>
   `,
-                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;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"]
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
             },] }
 ];
 ImageCarouselComponent.ctorParameters = () => [
     { type: ProductConnectorService },
     { type: ProductEventService },
     { type: ChangeDetectorRef },
-    { type: DomSanitizer },
-    { type: IconCacheService }
+    { type: DomSanitizer }
 ];
 ImageCarouselComponent.propDecorators = {
     carousel: [{ type: ViewChild, args: ['carousel', { read: ElementRef },] }],
@@ -1626,6 +1704,7 @@ class ProductAddtocartComponent {
         this.createFrozenArticle = true;
         this.configurable = false;
         this.configuring = false;
+        this.showAddToCart = false;
         this.isReturn = false;
         this.fullscreen = false;
         this.startConfiguration = new EventEmitter();
@@ -1715,18 +1794,20 @@ ProductAddtocartComponent.decorators = [
         <co-number-picker *ngIf="!configurable && !configuring" class="quantity-select" [(model)]="quantity" [min]="1" horizontal></co-number-picker>
       </ng-container>
 
-      <div class="button-wrapper">
-        <co-button class="configure-button" *ngIf="configurable"
+      <div class="button-wrapper" *ngIf="configurable">
+        <co-button class="configure-button"
                    [iconData]="iconCache.getIcon(icon.MagicWand)"
                    [label]="'CONFIGURE' | localize"
                    (onClick)="startConfiguration.emit()"
         ></co-button>
-        <co-button #addtocartbutton class="cart-button" *ngIf="!configurable"
+      </div>
+      <div class="button-wrapper" *ngIf="showAddToCart && !configurable">
+        <co-button #addtocartbutton class="cart-button"
                    [iconData]="iconCache.getIcon(icon.AddToCartDrop)"
                    [label]="'SHOPPING_CART_IN' | localize"
                    (onClick)="handleAddToCartClick(quantity)"
         ></co-button>
-        <co-button class="cart-button quote" *ngIf="!configurable && showQuoteButton"
+        <co-button class="cart-button quote" *ngIf="showQuoteButton"
                    [iconData]="iconCache.getIcon(icon.Quote)"
                    [label]="'QUOTATION' | localize"
                    (onClick)="handleAddToQuoteClick(quantity)"
@@ -1750,6 +1831,7 @@ ProductAddtocartComponent.propDecorators = {
     createFrozenArticle: [{ type: Input }],
     configurable: [{ type: Input }],
     configuring: [{ type: Input }],
+    showAddToCart: [{ type: Input }],
     isReturn: [{ type: Input }],
     fullscreen: [{ type: HostBinding, args: ['class.full-screen',] }, { type: Input }],
     quantity: [{ type: Input }],