@colijnit/product 260.1.1 → 260.1.3

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

@@ -2,17 +2,21 @@ import { ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
 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 { IconEnum } from '../../enum/icon.enum';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { IconCacheService } from '../../service/icon-cache.service';
 export declare class ImageViewModel {
     image: CoDocument | string;
     source: SafeUrl;
     originalSource: string;
 }
 export declare class ImageCarouselComponent implements OnDestroy {
+    iconCacheService: IconCacheService;
     private _ione;
     private _appEventService;
     private _changeDetector;
     private _domSanitizer;
+    readonly icons: typeof IconEnum;
     carousel: ElementRef;
     isPopupOpen: boolean;
     selectedImage?: ImageViewModel;
@@ -34,7 +38,7 @@ export declare class ImageCarouselComponent implements OnDestroy {
     private _images;
     private _subs;
     private _resizeCanvasHeight;
-    constructor(_ione: ProductConnectorService, _appEventService: ProductEventService, _changeDetector: ChangeDetectorRef, _domSanitizer: DomSanitizer);
+    constructor(iconCacheService: IconCacheService, _ione: ProductConnectorService, _appEventService: ProductEventService, _changeDetector: ChangeDetectorRef, _domSanitizer: DomSanitizer);
     ngOnDestroy(): void;
     handleThumbClick(index: number): void;
     onForceRenderImage(): void;
@@ -43,6 +47,6 @@ export declare class ImageCarouselComponent implements OnDestroy {
     private _filterValidImages;
     private _loadAndRescaleImages;
     private _resizeAndSanitizeSource;
-    private _detectPreferredMime;
+    private _handleMimeTypes;
     private _scrollCarouselToIndex;
 }

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

@@ -1,11 +1,16 @@
 import { ArticleListObject } from '@colijnit/articleapi/build/model/article-list-object';
 import { ProductConnectorService } from '../../service/product-connector.service';
 import { ProductEventService } from '../../service/product-event.service';
-import { ProductConnectorAdapterService } from "../../service/product-connector-adapter.service";
-import { ProductSettingsService } from "../../service/product-settings.service";
+import { ProductConnectorAdapterService } from '../../service/product-connector-adapter.service';
+import { ProductSettingsService } from '../../service/product-settings.service';
 import { ExternalSource } from '@colijnit/articleapi/build/model/external-source.bo';
+export declare class ArticleViewModel {
+    article: ArticleListObject;
+    imageData: string;
+    constructor(article: ArticleListObject, imageData?: string);
+}
 export declare class ProductRelatedComponent {
-    _iOne: ProductConnectorService;
+    private _iOne;
     private _appEventService;
     private _productConnectorAdapterService;
     private _settingsService;
@@ -16,7 +21,7 @@ export declare class ProductRelatedComponent {
     createFrozenArticle: boolean;
     set articles(value: ArticleListObject[]);
     get articles(): ArticleListObject[];
-    imageDataMap: Map<number, string>;
+    articleViewModels: ArticleViewModel[];
     private _articles;
     constructor(_iOne: ProductConnectorService, _appEventService: ProductEventService, _productConnectorAdapterService: ProductConnectorAdapterService, _settingsService: ProductSettingsService);
     handleContentClick(article: ArticleListObject): void;
@@ -25,4 +30,5 @@ export declare class ProductRelatedComponent {
     handleThreeDButtonClick(article: ArticleListObject): void;
     private _getJSONFromArticleObject;
     private _loadImages;
+    private _handleImageData;
 }

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('@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';
+    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('@angular/cdk/overlay'), require('@colijnit/corecomponents_v12'), require('@colijnit/articleapi/build/model/configurator-statistics-environment')) :
+    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', '@angular/cdk/overlay', '@colijnit/corecomponents_v12', '@colijnit/articleapi/build/model/configurator-statistics-environment'], 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.ng.cdk.overlay, global.corecomponents_v12, global.configuratorStatisticsEnvironment));
+})(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, overlay, corecomponents_v12, configuratorStatisticsEnvironment) { '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 = "260.1.1";
-            this.publishDate = "15-12-2025 17:02:25";
+            this.symVer = "260.1.3";
+            this.publishDate = "24-3-2026 16:21:40";
         }
         return Version;
     }());
@@ -2078,12 +2078,14 @@
         return ImageViewModel;
     }());
     var ImageCarouselComponent = /** @class */ (function () {
-        function ImageCarouselComponent(_ione, _appEventService, _changeDetector, _domSanitizer) {
+        function ImageCarouselComponent(iconCacheService, _ione, _appEventService, _changeDetector, _domSanitizer) {
             var _this = this;
+            this.iconCacheService = iconCacheService;
             this._ione = _ione;
             this._appEventService = _appEventService;
             this._changeDetector = _changeDetector;
             this._domSanitizer = _domSanitizer;
+            this.icons = IconEnum;
             this.isPopupOpen = false;
             this.showRefresh = false;
             this.resizing = false;
@@ -2232,51 +2234,63 @@
             var ctx = resizeCanvas.getContext('2d');
             var img = document.createElement('img');
             img.crossOrigin = 'anonymous';
+            var handleFallback = function () {
+                // When a CDN does not accept our tainted canvas, we fallback to the original source.
+                imageViewModel.source = _this._domSanitizer.bypassSecurityTrustUrl(source);
+                imageViewModel.originalSource = source;
+                _this._changeDetector.detectChanges();
+            };
+            img.onerror = function () {
+                handleFallback();
+            };
             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;
+                try {
+                    ctx.imageSmoothingEnabled = true;
+                    ctx.imageSmoothingQuality = 'high';
+                    var aspect = img.width / img.height;
+                    var newW = _this._resizeCanvasHeight;
+                    var newH = _this._resizeCanvasHeight;
+                    if (img.width > img.height) {
+                        newH = _this._resizeCanvasHeight / aspect;
+                    }
+                    else {
+                        newW = _this._resizeCanvasHeight * aspect;
+                    }
+                    resizeCanvas.width = Math.round(newW);
+                    resizeCanvas.height = Math.round(newH);
+                    ctx.clearRect(0, 0, resizeCanvas.width, resizeCanvas.height);
+                    ctx.drawImage(img, 0, 0, resizeCanvas.width, resizeCanvas.height);
+                    var mime = _this._handleMimeTypes(source);
+                    var resizedSource = resizeCanvas.toDataURL(mime);
+                    imageViewModel.source = _this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
+                    imageViewModel.originalSource = source;
+                    _this._changeDetector.detectChanges();
                 }
-                else {
-                    newW = _this._resizeCanvasHeight * aspect;
+                catch (error) {
+                    handleFallback();
                 }
-                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;
+        ImageCarouselComponent.prototype._handleMimeTypes = function (imageSource) {
+            // When we got base64 data
+            if (imageSource.startsWith('data:')) {
+                var match = imageSource.match(/^data:(image\/(png|webp|jpeg|jpg))/i);
+                return match ? match[1].toLowerCase() : 'image/png';
+            }
+            // when we got an URL.
+            var extension = imageSource.substring(imageSource.lastIndexOf('.') + 1).toLowerCase();
+            switch (extension) {
+                case 'png':
+                    return 'image/png';
+                case 'webp':
+                    return 'image/webp';
+                case 'jpg':
+                case 'jpeg':
+                    return 'image/jpeg';
+                default:
+                    return 'image/png';
             }
-            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) {
@@ -2295,12 +2309,13 @@
     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      <!-- 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  ",
+                    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)\"\n               (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\n    <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"></div>\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"isPopupOpen\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      (backdropClick)=\"closePopup()\">\n      <div class=\"image-modal\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Image preview\">\n        <div class=\"image-modal__content\">\n          <button class=\"image-modal__close\" type=\"button\" aria-label=\"Close\" (click)=\"closePopup()\">\n            <co-icon [iconData]=\"iconCacheService.getIcon(icons.CrossSkinny)\"></co-icon>\n          </button>\n          <img [src]=\"selectedImage?.originalSource\" alt=\"Image preview\"/>\n        </div>\n      </div>\n    </ng-template>\n\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}.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 [
+        { type: IconCacheService },
         { type: ProductConnectorService },
         { type: ProductEventService },
         { type: i0.ChangeDetectorRef },
@@ -2328,7 +2343,9 @@
                         common.CommonModule,
                         corecomponents.LoaderModule,
                         // IconModule,
-                        corecomponents.ScrollContainerModule
+                        corecomponents.ScrollContainerModule,
+                        overlay.OverlayModule,
+                        corecomponents_v12.IconModule
                     ],
                     declarations: [
                         ImageCarouselComponent
@@ -2785,6 +2802,15 @@
                 },] }
     ];
 
+    var ArticleViewModel = /** @class */ (function () {
+        function ArticleViewModel(article, imageData) {
+            this.article = article;
+            if (imageData) {
+                this.imageData = imageData;
+            }
+        }
+        return ArticleViewModel;
+    }());
     var ProductRelatedComponent = /** @class */ (function () {
         function ProductRelatedComponent(_iOne, _appEventService, _productConnectorAdapterService, _settingsService) {
             this._iOne = _iOne;
@@ -2793,7 +2819,7 @@
             this._settingsService = _settingsService;
             this.isSmallModus = true;
             this.createFrozenArticle = true;
-            this.imageDataMap = new Map();
+            this.articleViewModels = [];
             this._articles = [];
         }
         Object.defineProperty(ProductRelatedComponent.prototype, "articles", {
@@ -2815,6 +2841,8 @@
                     else {
                         this._articles = value;
                     }
+                    this.articleViewModels.length = 0;
+                    this._articles.forEach(function (a) { return _this.articleViewModels.push(new ArticleViewModel(a)); });
                     this._loadImages();
                 }
             },
@@ -2875,48 +2903,28 @@
         };
         ProductRelatedComponent.prototype._loadImages = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var _a, _b, a, imageContent, e_1_1;
-                var e_1, _c;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0:
-                            _d.trys.push([0, 5, 6, 7]);
-                            _a = __values(this._articles), _b = _a.next();
-                            _d.label = 1;
-                        case 1:
-                            if (!!_b.done) return [3 /*break*/, 4];
-                            a = _b.value;
-                            if (!a.image) return [3 /*break*/, 3];
-                            return [4 /*yield*/, this._iOne.getImageForCoDocument(a.image, false)];
-                        case 2:
-                            imageContent = _d.sent();
-                            this.imageDataMap.set(a.goodId, imageContent.image);
-                            _d.label = 3;
-                        case 3:
-                            _b = _a.next();
-                            return [3 /*break*/, 1];
-                        case 4: return [3 /*break*/, 7];
-                        case 5:
-                            e_1_1 = _d.sent();
-                            e_1 = { error: e_1_1 };
-                            return [3 /*break*/, 7];
-                        case 6:
-                            try {
-                                if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
-                            }
-                            finally { if (e_1) throw e_1.error; }
-                            return [7 /*endfinally*/];
-                        case 7: return [2 /*return*/];
-                    }
+                var _this = this;
+                return __generator(this, function (_a) {
+                    this.articleViewModels.forEach(function (avm) {
+                        if (avm.article.image) {
+                            _this._iOne.getImageForCoDocument(avm.article.image, false).then(function (imageContent) { return _this._handleImageData(avm, imageContent); });
+                        }
+                    });
+                    return [2 /*return*/];
                 });
             });
         };
+        ProductRelatedComponent.prototype._handleImageData = function (avm, imageContent) {
+            if (imageContent && imageContent.image) {
+                avm.imageData = imageContent.image;
+            }
+        };
         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]=\"imageDataMap.get(article.goodId)\"\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 articleViewModel of articleViewModels\">\n                    <co-article-tile \n                        [imageData]=\"articleViewModel.imageData\"\n                        [description]=\"articleViewModel.article.description\"\n                        [price]=\"articleViewModel.article.price\"\n                        [level]=\"articleViewModel.article.stockStatus\"\n                        [hasCartButton]=\"true\"\n                        [isSmallModus]=\"isSmallModus\"\n                        [hasConfigureButton]=\"articleViewModel.article.goodType === 'B'\"\n                        (contentClick)=\"handleContentClick(articleViewModel.article)\"\n                        (cartButtonClick)=\"handleAddToCartClick(articleViewModel.article)\"\n                        (configureButtonClick)=\"handleContentClick(articleViewModel.article)\"\n                        (threeDButtonClick)=\"handleThreeDButtonClick(articleViewModel.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"]
                 },] }
     ];