@colijnit/product 260.1.1 → 260.1.3

package/fesm2015/colijnit-product.js

@@ -23,16 +23,17 @@ import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { IconModule, LoaderModule, ScrollContainerModule, PriceDisplayPipeModule, NumberPickerModule, ButtonModule, FilesUploadModule, TileModule } from '@colijnit/corecomponents';
 import { CoDocument } from '@colijnit/mainapi/build/model/co-document.bo';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { IconModule as IconModule$1, LoaderModule as LoaderModule$1, ArticleTileModule, IconCollapseHandleModule, ButtonModule as ButtonModule$1 } from '@colijnit/corecomponents_v12';
 import { ConfiguratorStatisticsEnvironment } from '@colijnit/articleapi/build/model/configurator-statistics-environment';
-import { LoaderModule as LoaderModule$1, ArticleTileModule, IconCollapseHandleModule, ButtonModule as ButtonModule$1 } from '@colijnit/corecomponents_v12';
 
 // this file is dynamically created, do not change this
 class Version {
     constructor() {
         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";
     }
 }
 
@@ -1349,11 +1350,13 @@ ProductSelectorTypeModule.decorators = [
 class ImageViewModel {
 }
 class ImageCarouselComponent {
-    constructor(_ione, _appEventService, _changeDetector, _domSanitizer) {
+    constructor(iconCacheService, _ione, _appEventService, _changeDetector, _domSanitizer) {
+        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;
@@ -1491,51 +1494,63 @@ class ImageCarouselComponent {
         const ctx = resizeCanvas.getContext('2d');
         const img = document.createElement('img');
         img.crossOrigin = 'anonymous';
-        img.onload = () => {
-            ctx.imageSmoothingEnabled = true;
-            ctx.imageSmoothingQuality = 'high';
-            const ow = img.width;
-            const oh = img.height;
-            const aspect = ow / oh;
-            let newW = this._resizeCanvasHeight;
-            let 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);
-            const mime = this._detectPreferredMime(source);
-            const 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);
+        const handleFallback = () => {
+            // 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 = () => {
+            handleFallback();
+        };
+        img.onload = () => {
+            try {
+                ctx.imageSmoothingEnabled = true;
+                ctx.imageSmoothingQuality = 'high';
+                const aspect = img.width / img.height;
+                let newW = this._resizeCanvasHeight;
+                let 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);
+                const mime = this._handleMimeTypes(source);
+                const resizedSource = resizeCanvas.toDataURL(mime);
+                imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
+                imageViewModel.originalSource = source;
+                this._changeDetector.detectChanges();
+            }
+            catch (error) {
+                handleFallback();
+            }
+        };
         img.src = source;
     }
-    _detectPreferredMime(source) {
-        // Data URI check
-        const m = source.match(/^data:(image\/[a-zA-Z+.-]+);base64,/);
-        if (m) {
-            const t = m[1].toLowerCase();
-            if (t === 'image/png' || t === 'image/webp' || t === 'image/jpeg')
-                return t;
+    _handleMimeTypes(imageSource) {
+        // When we got base64 data
+        if (imageSource.startsWith('data:')) {
+            const match = imageSource.match(/^data:(image\/(png|webp|jpeg|jpg))/i);
+            return match ? match[1].toLowerCase() : 'image/png';
+        }
+        // when we got an URL.
+        const 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';
         }
-        const 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';
     }
     _scrollCarouselToIndex() {
         if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
@@ -1554,65 +1569,63 @@ ImageCarouselComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-image-carousel',
                 template: `
-      <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 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 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 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>
-      <!-- Modal (real popup) -->
-      <div
-        class="image-modal"
-        *ngIf="isPopupOpen"
-        (click)="closePopup()"
-        role="dialog"
-        aria-modal="true"
-        aria-label="Image preview"
-      >
-        <div class="image-modal__content" (click)="$event.stopPropagation()">
-          <button
-            class="image-modal__close"
-            type="button"
-            aria-label="Close"
-            (click)="closePopup()"
-          >
-            ×
-          </button>
+    </div>
 
-          <img [src]="selectedImage?.originalSource" alt="Image preview" />
+    <div cdkOverlayOrigin #trigger="cdkOverlayOrigin"></div>
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="isPopupOpen"
+      [cdkConnectedOverlayHasBackdrop]="true"
+      (backdropClick)="closePopup()">
+      <div class="image-modal" role="dialog" aria-modal="true" aria-label="Image preview">
+        <div class="image-modal__content">
+          <button class="image-modal__close" type="button" aria-label="Close" (click)="closePopup()">
+            <co-icon [iconData]="iconCacheService.getIcon(icons.CrossSkinny)"></co-icon>
+          </button>
+          <img [src]="selectedImage?.originalSource" alt="Image preview"/>
         </div>
       </div>
+    </ng-template>
+
   `,
                 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}.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 = () => [
+    { type: IconCacheService },
     { type: ProductConnectorService },
     { type: ProductEventService },
     { type: ChangeDetectorRef },
@@ -1637,7 +1650,9 @@ ImageCarouselModule.decorators = [
                     CommonModule,
                     LoaderModule,
                     // IconModule,
-                    ScrollContainerModule
+                    ScrollContainerModule,
+                    OverlayModule,
+                    IconModule$1
                 ],
                 declarations: [
                     ImageCarouselComponent
@@ -2064,6 +2079,14 @@ ProductAddtocartModule.decorators = [
             },] }
 ];
 
+class ArticleViewModel {
+    constructor(article, imageData) {
+        this.article = article;
+        if (imageData) {
+            this.imageData = imageData;
+        }
+    }
+}
 class ProductRelatedComponent {
     constructor(_iOne, _appEventService, _productConnectorAdapterService, _settingsService) {
         this._iOne = _iOne;
@@ -2072,7 +2095,7 @@ class ProductRelatedComponent {
         this._settingsService = _settingsService;
         this.isSmallModus = true;
         this.createFrozenArticle = true;
-        this.imageDataMap = new Map();
+        this.articleViewModels = [];
         this._articles = [];
     }
     set articles(value) {
@@ -2089,6 +2112,8 @@ class ProductRelatedComponent {
             else {
                 this._articles = value;
             }
+            this.articleViewModels.length = 0;
+            this._articles.forEach(a => this.articleViewModels.push(new ArticleViewModel(a)));
             this._loadImages();
         }
     }
@@ -2133,14 +2158,18 @@ class ProductRelatedComponent {
     }
     _loadImages() {
         return __awaiter(this, void 0, void 0, function* () {
-            for (const a of this._articles) {
-                if (a.image) {
-                    const imageContent = yield this._iOne.getImageForCoDocument(a.image, false);
-                    this.imageDataMap.set(a.goodId, imageContent.image);
+            this.articleViewModels.forEach(avm => {
+                if (avm.article.image) {
+                    this._iOne.getImageForCoDocument(avm.article.image, false).then(imageContent => this._handleImageData(avm, imageContent));
                 }
-            }
+            });
         });
     }
+    _handleImageData(avm, imageContent) {
+        if (imageContent && imageContent.image) {
+            avm.imageData = imageContent.image;
+        }
+    }
 }
 ProductRelatedComponent.decorators = [
     { type: Component, args: [{
@@ -2149,19 +2178,19 @@ ProductRelatedComponent.decorators = [
         <div *ngIf="articles && articles.length > 0">
             <app-header [label]="label" [amount]="articles?.length" *ngIf="label"></app-header>
             <co-scroll-container>
-                <div class="article-wrapper" *ngFor="let article of articles">
+                <div class="article-wrapper" *ngFor="let articleViewModel of articleViewModels">
                     <co-article-tile 
-                        [imageData]="imageDataMap.get(article.goodId)"
-                        [description]="article.description"
-                        [price]="article.price"
-                        [level]="article.stockStatus"
+                        [imageData]="articleViewModel.imageData"
+                        [description]="articleViewModel.article.description"
+                        [price]="articleViewModel.article.price"
+                        [level]="articleViewModel.article.stockStatus"
                         [hasCartButton]="true"
                         [isSmallModus]="isSmallModus"
-                        [hasConfigureButton]="article.goodType === 'B'"
-                        (contentClick)="handleContentClick(article)"
-                        (cartButtonClick)="handleAddToCartClick(article)"
-                        (configureButtonClick)="handleContentClick(article)"
-                        (threeDButtonClick)="handleThreeDButtonClick(article)"
+                        [hasConfigureButton]="articleViewModel.article.goodType === 'B'"
+                        (contentClick)="handleContentClick(articleViewModel.article)"
+                        (cartButtonClick)="handleAddToCartClick(articleViewModel.article)"
+                        (configureButtonClick)="handleContentClick(articleViewModel.article)"
+                        (threeDButtonClick)="handleThreeDButtonClick(articleViewModel.article)"
                     ></co-article-tile>
                 </div>
             </co-scroll-container>