@colijnit/product 259.1.1 → 259.1.3

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

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
-import { CoDocument } from '@colijnit/mainapi/build/model/co-document';
+import { CoDocument } from '@colijnit/mainapi/build/model/co-document.bo';
 import { ProductConnectorService } from '../../service/product-connector.service';
 import { ProductEventService } from '../../service/product-event.service';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@@ -14,6 +14,9 @@ export declare class ImageCarouselComponent implements OnDestroy {
     private _changeDetector;
     private _domSanitizer;
     carousel: ElementRef;
+    isPopupOpen: boolean;
+    selectedImage?: ImageViewModel;
+    onEsc(): void;
     showRefresh: boolean;
     set images(value: (CoDocument | string)[]);
     get images(): (CoDocument | string)[];
@@ -36,8 +39,10 @@ export declare class ImageCarouselComponent implements OnDestroy {
     handleThumbClick(index: number): void;
     onForceRenderImage(): void;
     handleShowImage(imageViewModel: ImageViewModel): void;
+    closePopup(): void;
     private _filterValidImages;
     private _loadAndRescaleImages;
     private _resizeAndSanitizeSource;
+    private _detectPreferredMime;
     private _scrollCarouselToIndex;
 }

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

@@ -1,4 +1,4 @@
-import { CoDocument } from '@colijnit/mainapi/build/model/co-document';
+import { CoDocument } from '@colijnit/mainapi/build/model/co-document.bo';
 import { IconEnum } from '../../enum/icon.enum';
 import { IconCacheService } from '../../service/icon-cache.service';
 export declare class ProductDocumentsComponent {

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

@@ -16,6 +16,7 @@ export declare class ProductRelatedComponent {
     createFrozenArticle: boolean;
     set articles(value: ArticleListObject[]);
     get articles(): ArticleListObject[];
+    imageData: string;
     private _articles;
     constructor(_iOne: ProductConnectorService, _appEventService: ProductEventService, _productConnectorAdapterService: ProductConnectorAdapterService, _settingsService: ProductSettingsService);
     handleContentClick(article: ArticleListObject): void;

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

@@ -8,13 +8,17 @@ import { Options } from '@colijnit/ioneconnector/build/model/options';
 import { DeliveryPrognosis } from '@colijnit/articleapi/build/model/delivery-prognosis';
 import { DocumentContent } from '@colijnit/articleapi/build/model/document-content';
 import { Transaction } from '@colijnit/transactionapi/build/transaction';
+import { MainApi } from '@colijnit/mainapi';
 import { ArticleListObjectExtended } from '@colijnit/articleapi/build/model/article-list-object-extended.bo';
 import { ProductEventService } from './product-event.service';
+import { CoDocument } from '@colijnit/mainapi/build/model/co-document.bo';
+import { ImageContent } from '@colijnit/mainapi/build/model/image-content.bo';
 export declare class ProductConnectorAdapterService implements OnDestroy {
     private _eventService;
     readonly showLoader: Subject<boolean>;
     articleConnector?: Articles;
     transactionConnector: Transaction;
+    mainConnector: MainApi;
     private _boFactory;
     private _subs;
     constructor(_eventService: ProductEventService);
@@ -35,4 +39,5 @@ export declare class ProductConnectorAdapterService implements OnDestroy {
     getSuperArticle(id: string, branch?: string): Promise<SuperArticle>;
     getDocumentContent(docId: number, thumbnail?: boolean): Promise<DocumentContent>;
     addWebSessionTransactionLine(transactionUuid: string, sku: string, quantity: number): Promise<string>;
+    getImageForCoDocument(document: CoDocument, thumb: boolean): Promise<ImageContent>;
 }

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

@@ -8,6 +8,8 @@ import { ConfiguratorStatisticsEnvironment } from '@colijnit/articleapi/build/mo
 import { DeliveryPrognosis } from '@colijnit/articleapi/build/model/delivery-prognosis';
 import { DocumentContent } from '@colijnit/articleapi/build/model/document-content';
 import { ArticleListObjectExtended } from '@colijnit/articleapi/build/model/article-list-object-extended.bo';
+import { CoDocument } from '@colijnit/mainapi/build/model/co-document.bo';
+import { ImageContent } from '@colijnit/mainapi/build/model/image-content.bo';
 export declare class ProductConnectorService implements OnDestroy {
     private _adapterService;
     private _settingsService;
@@ -36,5 +38,6 @@ export declare class ProductConnectorService implements OnDestroy {
     getJsonArticleFlatTree(goodId: number, goodType: string, quantity: number, externalSource?: boolean, showLoader?: boolean, configuratorStatistics?: ConfiguratorStatisticsEnvironment): Promise<string>;
     getGeneratedArtDirectly(goodId: number, showLoader?: boolean): Promise<number>;
     addWebSessionTransactionLine(transactionUuid: string, sku: string, quantity: number): Promise<string>;
+    getImageForCoDocument(document: CoDocument, thumb?: boolean): Promise<ImageContent>;
     onShowLoaderChange(showLoader: boolean): void;
 }

package/bundles/colijnit-product.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/articleapi/build/model/article-full-object'), require('@colijnit/articleapi/build/model/super-article'), require('@colijnit/articleapi/build/articles'), require('@colijnit/articleapi/build/model/delivery-prognosis'), require('@colijnit/articleapi/build/model/document-content'), require('@colijnit/ioneconnector/build/service/business-object-factory'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/mainapi'), require('@colijnit/transactionapi/build/model/transaction-info-response.bo'), require('@colijnit/articleapi/build/model/article-list-object-extended.bo'), require('@angular/common/http'), require('@colijnit/ioneconnector/build/utils/string-utils'), require('@angular/common'), require('@angular/animations'), require('@angular/platform-browser'), require('@colijnit/corecomponents'), require('@colijnit/mainapi/build/model/co-document'), require('@colijnit/articleapi/build/model/configurator-statistics-environment'), require('@colijnit/corecomponents_v12')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/product', ['exports', '@angular/core', 'rxjs', '@colijnit/ioneconnector/build/model/options', '@colijnit/articleapi/build/model/article-full-object', '@colijnit/articleapi/build/model/super-article', '@colijnit/articleapi/build/articles', '@colijnit/articleapi/build/model/delivery-prognosis', '@colijnit/articleapi/build/model/document-content', '@colijnit/ioneconnector/build/service/business-object-factory', '@colijnit/transactionapi/build/transaction', '@colijnit/mainapi', '@colijnit/transactionapi/build/model/transaction-info-response.bo', '@colijnit/articleapi/build/model/article-list-object-extended.bo', '@angular/common/http', '@colijnit/ioneconnector/build/utils/string-utils', '@angular/common', '@angular/animations', '@angular/platform-browser', '@colijnit/corecomponents', '@colijnit/mainapi/build/model/co-document', '@colijnit/articleapi/build/model/configurator-statistics-environment', '@colijnit/corecomponents_v12'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.product = {}), global.ng.core, global.rxjs, global.options, global.articleFullObject, global.superArticle, global.articles, global.deliveryPrognosis, global.documentContent, global.businessObjectFactory, global.transaction, global.mainapi, global.transactionInfoResponse_bo, global.articleListObjectExtended_bo, global.ng.common.http, global.stringUtils, global.ng.common, global.ng.animations, global.ng.platformBrowser, global.corecomponents, global.coDocument, global.configuratorStatisticsEnvironment, global.corecomponents_v12));
-})(this, (function (exports, i0, rxjs, options, articleFullObject, superArticle, articles, deliveryPrognosis, documentContent, businessObjectFactory, transaction, mainapi, transactionInfoResponse_bo, articleListObjectExtended_bo, i1, stringUtils, common, animations, i1$1, corecomponents, coDocument, configuratorStatisticsEnvironment, corecomponents_v12) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/articleapi/build/model/article-full-object'), require('@colijnit/articleapi/build/model/super-article'), require('@colijnit/articleapi/build/articles'), require('@colijnit/articleapi/build/model/delivery-prognosis'), require('@colijnit/articleapi/build/model/document-content'), require('@colijnit/ioneconnector/build/service/business-object-factory'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/mainapi'), require('@colijnit/transactionapi/build/model/transaction-info-response.bo'), require('@colijnit/articleapi/build/model/article-list-object-extended.bo'), require('@colijnit/mainapi/build/model/image-content.bo'), require('@angular/common/http'), require('@colijnit/ioneconnector/build/utils/string-utils'), require('@angular/common'), require('@angular/animations'), require('@angular/platform-browser'), require('@colijnit/corecomponents'), require('@colijnit/mainapi/build/model/co-document.bo'), require('@colijnit/articleapi/build/model/configurator-statistics-environment'), require('@colijnit/corecomponents_v12')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/product', ['exports', '@angular/core', 'rxjs', '@colijnit/ioneconnector/build/model/options', '@colijnit/articleapi/build/model/article-full-object', '@colijnit/articleapi/build/model/super-article', '@colijnit/articleapi/build/articles', '@colijnit/articleapi/build/model/delivery-prognosis', '@colijnit/articleapi/build/model/document-content', '@colijnit/ioneconnector/build/service/business-object-factory', '@colijnit/transactionapi/build/transaction', '@colijnit/mainapi', '@colijnit/transactionapi/build/model/transaction-info-response.bo', '@colijnit/articleapi/build/model/article-list-object-extended.bo', '@colijnit/mainapi/build/model/image-content.bo', '@angular/common/http', '@colijnit/ioneconnector/build/utils/string-utils', '@angular/common', '@angular/animations', '@angular/platform-browser', '@colijnit/corecomponents', '@colijnit/mainapi/build/model/co-document.bo', '@colijnit/articleapi/build/model/configurator-statistics-environment', '@colijnit/corecomponents_v12'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.product = {}), global.ng.core, global.rxjs, global.options, global.articleFullObject, global.superArticle, global.articles, global.deliveryPrognosis, global.documentContent, global.businessObjectFactory, global.transaction, global.mainapi, global.transactionInfoResponse_bo, global.articleListObjectExtended_bo, global.imageContent_bo, global.ng.common.http, global.stringUtils, global.ng.common, global.ng.animations, global.ng.platformBrowser, global.corecomponents, global.coDocument_bo, global.configuratorStatisticsEnvironment, global.corecomponents_v12));
+})(this, (function (exports, i0, rxjs, options, articleFullObject, superArticle, articles, deliveryPrognosis, documentContent, businessObjectFactory, transaction, mainapi, transactionInfoResponse_bo, articleListObjectExtended_bo, imageContent_bo, i1, stringUtils, common, animations, i1$1, corecomponents, coDocument_bo, configuratorStatisticsEnvironment, corecomponents_v12) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -31,8 +31,8 @@
         function Version() {
             this.name = "@colijnit/product";
             this.description = "Product detail page project for iOne";
-            this.symVer = "259.1.1";
-            this.publishDate = "9-7-2025 11:53:26";
+            this.symVer = "259.1.3";
+            this.publishDate = "29-9-2025 15:45:45";
         }
         return Version;
     }());
@@ -608,6 +608,7 @@
                         case 1:
                             _a.sent();
                             this.transactionConnector = new transaction.Transaction(options);
+                            this.mainConnector = new mainapi.MainApi(options);
                             this._subs.push(
                             // @ts-ignore
                             this.articleConnector.showLoader.subscribe(function (value) { return _this.showLoader.next(value); }));
@@ -856,6 +857,22 @@
                 });
             });
         };
+        ProductConnectorAdapterService.prototype.getImageForCoDocument = function (document, thumb) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.mainConnector.getImageForCoDocument(document, thumb)];
+                        case 1:
+                            response = _a.sent();
+                            if (response && response.validationResult && response.validationResult.success) {
+                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(imageContent_bo.ImageContent, response.resultObject)];
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         return ProductConnectorAdapterService;
     }());
     ProductConnectorAdapterService.decorators = [
@@ -1330,6 +1347,14 @@
                 });
             });
         };
+        ProductConnectorService.prototype.getImageForCoDocument = function (document, thumb) {
+            if (thumb === void 0) { thumb = false; }
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, this._adapterService.getImageForCoDocument(document, thumb)];
+                });
+            });
+        };
         ProductConnectorService.prototype.onShowLoaderChange = function (showLoader) {
             this._shouldShowLoader = showLoader;
         };
@@ -2059,6 +2084,7 @@
             this._appEventService = _appEventService;
             this._changeDetector = _changeDetector;
             this._domSanitizer = _domSanitizer;
+            this.isPopupOpen = false;
             this.showRefresh = false;
             this.resizing = false;
             this.imageViewModels = [];
@@ -2076,7 +2102,7 @@
                 }, 10000);
             }), this._appEventService.onDraftRenderImageReceived.subscribe(function (event) {
                 if (event && event.detail) {
-                    if (_this._images[0] instanceof coDocument.CoDocument) {
+                    if (_this._images[0] instanceof coDocument_bo.CoDocument) {
                         _this._images.unshift(event.detail);
                     }
                     else {
@@ -2088,6 +2114,12 @@
                 _this._changeDetector.detectChanges();
             }));
         }
+        // Close on ESC
+        ImageCarouselComponent.prototype.onEsc = function () {
+            if (this.isPopupOpen) {
+                this.closePopup();
+            }
+        };
         Object.defineProperty(ImageCarouselComponent.prototype, "images", {
             get: function () {
                 return this._images;
@@ -2143,15 +2175,16 @@
         };
         ImageCarouselComponent.prototype.handleShowImage = function (imageViewModel) {
             if (imageViewModel && imageViewModel.originalSource) {
-                var popupWindow = window.open('', 'Image zoom', 'width=600,height=400');
-                // Set the content of the popup window
-                popupWindow.document.write('<html><head><title>Image zoom</title></head><body>');
-                popupWindow.document.write("<img src=" + imageViewModel.originalSource + " alt=\"Image\" style=\"width:100%; height:auto;\">");
-                popupWindow.document.write('</body></html>');
-                // Close the document to render the popup window
-                popupWindow.document.close();
+                this.selectedImage = imageViewModel;
+                this.isPopupOpen = true;
+                this._changeDetector.markForCheck();
             }
         };
+        ImageCarouselComponent.prototype.closePopup = function () {
+            this.isPopupOpen = false;
+            this.selectedImage = undefined;
+            this._changeDetector.markForCheck();
+        };
         ImageCarouselComponent.prototype._filterValidImages = function (value) {
             if (!value) {
                 return [];
@@ -2196,39 +2229,54 @@
         ImageCarouselComponent.prototype._resizeAndSanitizeSource = function (source, imageViewModel) {
             var _this = this;
             var resizeCanvas = document.createElement('canvas');
-            var resizeCanvasContext = resizeCanvas.getContext('2d');
-            var resizeImage = document.createElement('img');
-            resizeImage.crossOrigin = 'anonymous';
-            resizeImage.onload = function () { return __awaiter(_this, void 0, void 0, function () {
-                var originalWidth, originalHeight, aspectRatio, newWidth, newHeight, imageWidth, resizedSource;
-                return __generator(this, function (_a) {
-                    resizeCanvasContext.imageSmoothingEnabled = true;
-                    resizeCanvasContext.imageSmoothingQuality = 'high';
-                    originalWidth = resizeImage.width;
-                    originalHeight = resizeImage.height;
-                    aspectRatio = originalWidth / originalHeight;
-                    newWidth = this._resizeCanvasHeight;
-                    newHeight = this._resizeCanvasHeight;
-                    if (originalWidth > originalHeight) {
-                        newHeight = this._resizeCanvasHeight / aspectRatio;
-                    }
-                    else {
-                        newWidth = this._resizeCanvasHeight * aspectRatio;
-                    }
-                    // Set the canvas size to the new width and height
-                    resizeCanvas.width = newWidth;
-                    resizeCanvas.height = newHeight;
-                    imageWidth = this._resizeCanvasHeight * (resizeImage.height / resizeImage.width);
-                    resizeCanvasContext.drawImage(resizeImage, 0, 0, newWidth, newHeight);
-                    resizedSource = resizeCanvas.toDataURL('image/jpeg');
-                    imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
-                    imageViewModel.originalSource = source;
-                    this._changeDetector.detectChanges();
-                    return [2 /*return*/];
-                });
-            }); };
-            // @ts-ignore
-            resizeImage.src = source;
+            var ctx = resizeCanvas.getContext('2d');
+            var img = document.createElement('img');
+            img.crossOrigin = 'anonymous';
+            img.onload = function () {
+                ctx.imageSmoothingEnabled = true;
+                ctx.imageSmoothingQuality = 'high';
+                var ow = img.width;
+                var oh = img.height;
+                var aspect = ow / oh;
+                var newW = _this._resizeCanvasHeight;
+                var newH = _this._resizeCanvasHeight;
+                if (ow > oh) {
+                    newH = _this._resizeCanvasHeight / aspect;
+                }
+                else {
+                    newW = _this._resizeCanvasHeight * aspect;
+                }
+                resizeCanvas.width = Math.round(newW);
+                resizeCanvas.height = Math.round(newH);
+                // Ensure transparent background before drawing
+                ctx.clearRect(0, 0, resizeCanvas.width, resizeCanvas.height);
+                ctx.drawImage(img, 0, 0, resizeCanvas.width, resizeCanvas.height);
+                var mime = _this._detectPreferredMime(source);
+                var resizedSource = mime === 'image/jpeg'
+                    ? resizeCanvas.toDataURL('image/jpeg', 0.92) // only if original was JPEG
+                    : resizeCanvas.toDataURL(mime); // PNG/WebP keep alpha
+                imageViewModel.source = _this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
+                imageViewModel.originalSource = source;
+                _this._changeDetector.detectChanges();
+            };
+            img.src = source;
+        };
+        ImageCarouselComponent.prototype._detectPreferredMime = function (source) {
+            // Data URI check
+            var m = source.match(/^data:(image\/[a-zA-Z+.-]+);base64,/);
+            if (m) {
+                var t = m[1].toLowerCase();
+                if (t === 'image/png' || t === 'image/webp' || t === 'image/jpeg')
+                    return t;
+            }
+            var lower = source.toLowerCase();
+            if (lower.endsWith('.png'))
+                return 'image/png';
+            if (lower.endsWith('.webp'))
+                return 'image/webp';
+            if (lower.endsWith('.jpg') || lower.endsWith('.jpeg'))
+                return 'image/jpeg';
+            return 'image/png';
         };
         ImageCarouselComponent.prototype._scrollCarouselToIndex = function () {
             if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
@@ -2247,9 +2295,9 @@
     ImageCarouselComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-image-carousel',
-                    template: "\n      <div id=\"product_page_carousel\">\n          <div id=\"product_page_carousel_items\">\n              <co-loader [isShown]=\"true\" *ngIf=\"showLoader\"></co-loader>\n              <div #carousel class=\"inner-carousel\">\n                  <!-- This has been taken out of the for loop to prevent flashing images when updating. -->\n                  <div *ngIf=\"imageViewModels[0]\" class=\"carousel-item\" [id]=\"'slide-0'\" [class.active]=\"isCurrentIndex(0)\" (click)=\"handleShowImage(imageViewModels[0])\">\n                      <img [src]=\"imageViewModels[0].source\">\n                  </div>\n                  <div *ngFor=\"let imageViewModel of imageViewModels.slice(1); let index = index\" class=\"carousel-item\"\n                       [id]=\"'slide-' + (index + 1)\" [class.active]=\"isCurrentIndex((index + 1))\" (click)=\"handleShowImage(imageViewModel)\">\n                      <img [src]=\"imageViewModel.source\">\n                  </div>\n                  <div class=\"carousel-scroller-layer\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n                      <div class=\"carousel-item-scroller prev\" (click)=\"gotoPrevSlide()\" *ngIf=\"currentIndex > 0\"></div>\n                      <div class=\"carousel-item-scroller next\" (click)=\"gotoNextSlide()\" *ngIf=\"currentIndex < images.length - 1\"></div>\n                  </div>\n              </div>\n              <!--\n                      <co-icon class=\"selector-type-icon refresh-button\" [iconData]=\"iconCache.getIcon(icons.Refresh)\" (click)=\"onForceRenderImage()\" [class.loading]=\"showLoader\" *ngIf=\"showRefresh\"></co-icon>\n              -->\n          </div>\n\n          <div id=\"product_page_carousel_thumbs\">\n              <co-scroll-container class=\"scroll-container\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n                  <div *ngFor=\"let imageViewModel of imageViewModels; let index = index\" class=\"carousel-thumb\"\n                       [class.active]=\"index === currentIndex\">\n                      <img [src]=\"imageViewModel.source\" (click)=\"handleThumbClick(index)\"/>\n                  </div>\n              </co-scroll-container>\n          </div>\n      </div>\n  ",
+                    template: "\n      <div id=\"product_page_carousel\">\n          <div id=\"product_page_carousel_items\">\n              <co-loader [isShown]=\"true\" *ngIf=\"showLoader\"></co-loader>\n              <div #carousel class=\"inner-carousel\">\n                  <!-- This has been taken out of the for loop to prevent flashing images when updating. -->\n                  <div *ngIf=\"imageViewModels[0]\" class=\"carousel-item\" [id]=\"'slide-0'\" [class.active]=\"isCurrentIndex(0)\" (click)=\"handleShowImage(imageViewModels[0])\">\n                      <img [src]=\"imageViewModels[0].source\">\n                  </div>\n                  <div *ngFor=\"let imageViewModel of imageViewModels.slice(1); let index = index\" class=\"carousel-item\"\n                       [id]=\"'slide-' + (index + 1)\" [class.active]=\"isCurrentIndex((index + 1))\" (click)=\"handleShowImage(imageViewModel)\">\n                      <img [src]=\"imageViewModel.source\">\n                  </div>\n                  <div class=\"carousel-scroller-layer\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n                      <div class=\"carousel-item-scroller prev\" (click)=\"gotoPrevSlide()\" *ngIf=\"currentIndex > 0\"></div>\n                      <div class=\"carousel-item-scroller next\" (click)=\"gotoNextSlide()\" *ngIf=\"currentIndex < images.length - 1\"></div>\n                  </div>\n              </div>\n              <!--\n                      <co-icon class=\"selector-type-icon refresh-button\" [iconData]=\"iconCache.getIcon(icons.Refresh)\" (click)=\"onForceRenderImage()\" [class.loading]=\"showLoader\" *ngIf=\"showRefresh\"></co-icon>\n              -->\n          </div>\n\n          <div id=\"product_page_carousel_thumbs\">\n              <co-scroll-container class=\"scroll-container\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n                  <div *ngFor=\"let imageViewModel of imageViewModels; let index = index\" class=\"carousel-thumb\"\n                       [class.active]=\"index === currentIndex\">\n                      <img [src]=\"imageViewModel.source\" (click)=\"handleThumbClick(index)\"/>\n                  </div>\n              </co-scroll-container>\n          </div>\n      </div>\n      <!-- Modal (real popup) -->\n      <div\n        class=\"image-modal\"\n        *ngIf=\"isPopupOpen\"\n        (click)=\"closePopup()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=\"Image preview\"\n      >\n        <div class=\"image-modal__content\" (click)=\"$event.stopPropagation()\">\n          <button\n            class=\"image-modal__close\"\n            type=\"button\"\n            aria-label=\"Close\"\n            (click)=\"closePopup()\"\n          >\n            \u00D7\n          </button>\n\n          <img [src]=\"selectedImage?.originalSource\" alt=\"Image preview\" />\n        </div>\n      </div>\n  ",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
+                    styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}.image-modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000}.image-modal__content{position:relative;max-width:90vw;max-height:90vh}.image-modal__content img{max-width:90vw;max-height:90vh;-o-object-fit:contain;object-fit:contain;display:block}.image-modal__close{position:fixed;top:15px;right:30px;background:transparent;border:none;color:#fff;font-size:60px;line-height:1;cursor:pointer}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
                 },] }
     ];
     ImageCarouselComponent.ctorParameters = function () { return [
@@ -2260,6 +2308,7 @@
     ]; };
     ImageCarouselComponent.propDecorators = {
         carousel: [{ type: i0.ViewChild, args: ['carousel', { read: i0.ElementRef },] }],
+        onEsc: [{ type: i0.HostListener, args: ['document:keydown.escape',] }],
         showRefresh: [{ type: i0.Input }],
         images: [{ type: i0.Input }],
         handleWindowResize: [{ type: i0.HostListener, args: ['window:resize',] }],
@@ -2744,6 +2793,7 @@
             this._settingsService = _settingsService;
             this.isSmallModus = true;
             this.createFrozenArticle = true;
+            this.imageData = '';
             this._articles = [];
         }
         Object.defineProperty(ProductRelatedComponent.prototype, "articles", {
@@ -2825,22 +2875,28 @@
         };
         ProductRelatedComponent.prototype._loadImages = function () {
             var _this = this;
-            this._articles.forEach(function (a) {
-                if (!a.image.documentBody) {
-                    _this._iOne.getDocumentContent(a.image.documentId).then(function (content) {
-                        if (content) {
-                            a.image.documentBody = content.documentContent;
-                        }
-                    });
-                }
-            });
+            this._articles.forEach(function (a) { return __awaiter(_this, void 0, void 0, function () {
+                var imageContent;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!a.image) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._iOne.getImageForCoDocument(a.image, false)];
+                        case 1:
+                            imageContent = _a.sent();
+                            this.imageData = imageContent.image;
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); });
         };
         return ProductRelatedComponent;
     }());
     ProductRelatedComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-product-related',
-                    template: "\n        <div *ngIf=\"articles && articles.length > 0\">\n            <app-header [label]=\"label\" [amount]=\"articles?.length\" *ngIf=\"label\"></app-header>\n            <co-scroll-container>\n                <div class=\"article-wrapper\" *ngFor=\"let article of articles\">\n                    <co-article-tile\n                        [imageData]=\"article.image.documentBodyAsDataUri\"\n                        [description]=\"article.description\"\n                        [price]=\"article.price\"\n                        [level]=\"article.stockStatus\"\n                        [hasCartButton]=\"true\"\n                        [isSmallModus]=\"isSmallModus\"\n                        [hasConfigureButton]=\"article.goodType === 'B'\"\n                        (contentClick)=\"handleContentClick(article)\"\n                        (cartButtonClick)=\"handleAddToCartClick(article)\"\n                        (configureButtonClick)=\"handleContentClick(article)\"\n                        (threeDButtonClick)=\"handleThreeDButtonClick(article)\"\n                    ></co-article-tile>\n                </div>\n            </co-scroll-container>\n        </div>\n    ",
+                    template: "\n        <div *ngIf=\"articles && articles.length > 0\">\n            <app-header [label]=\"label\" [amount]=\"articles?.length\" *ngIf=\"label\"></app-header>\n            <co-scroll-container>\n                <div class=\"article-wrapper\" *ngFor=\"let article of articles\">\n                    <co-article-tile\n                        [imageData]=\"imageData\"\n                        [description]=\"article.description\"\n                        [price]=\"article.price\"\n                        [level]=\"article.stockStatus\"\n                        [hasCartButton]=\"true\"\n                        [isSmallModus]=\"isSmallModus\"\n                        [hasConfigureButton]=\"article.goodType === 'B'\"\n                        (contentClick)=\"handleContentClick(article)\"\n                        (cartButtonClick)=\"handleAddToCartClick(article)\"\n                        (configureButtonClick)=\"handleContentClick(article)\"\n                        (threeDButtonClick)=\"handleThreeDButtonClick(article)\"\n                    ></co-article-tile>\n                </div>\n            </co-scroll-container>\n        </div>\n    ",
                     styles: [":host{display:block}.article-wrapper{display:flex;flex-direction:row;flex:1;min-width:25%}.article-wrapper ::ng-deep co-tile{transition:all .14s ease-out;border:1px solid transparent;padding:10px 20px;display:flex;flex-direction:column;color:#171721;justify-content:space-between}.article-wrapper ::ng-deep co-tile .price{display:block}.article-wrapper ::ng-deep co-tile .description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;height:30px}.article-wrapper ::ng-deep co-tile .tile-bottom{display:flex;flex-direction:column;grid-gap:5px;gap:5px}.article-wrapper ::ng-deep co-tile:hover{border:1px solid #DCE4EA}.article-wrapper ::ng-deep co-tile .tile-extra-bottom co-button co-icon{width:24px;height:24px}.article-wrapper ::ng-deep co-tile .tile-extra-bottom co-button co-icon svg [fill]{fill:#fff}.article-wrapper ::ng-deep co-tile.small{max-width:189px;width:100%;height:100%;cursor:pointer}.article-wrapper ::ng-deep co-tile.small:hover .tile-bottom .left-buttons{margin:0!important}.article-wrapper ::ng-deep co-tile.small .tile-wrapper{outline:none!important;padding-bottom:0;overflow:hidden;grid-gap:10px;gap:10px;display:flex;flex-direction:column}.article-wrapper ::ng-deep co-tile.small .tile-wrapper div.image{height:100px}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-extra-bottom ::ng-deep co-button.card-button.mini{pointer-events:all;padding:0!important;font-size:0;width:42px;height:42px;text-align:center;margin:0;border-radius:100%;background:#3E7EFF;cursor:pointer;place-content:center;color:#fff}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-extra-bottom ::ng-deep co-button.card-button.mini ::ng-deep co-icon{width:30px;height:30px}.article-wrapper ::ng-deep co-tile.small .tile-extra-bottom{outline:none!important;background:transparent!important}.article-wrapper ::ng-deep co-tile.small .tile-extra-bottom .price{color:#74b77f;margin:5px 0 0;font-weight:400;font-size:12px}\n"]
                 },] }
     ];