@colijnit/product 261.20.1 → 261.20.3

package/fesm2022/colijnit-product.mjs

@@ -14,24 +14,28 @@ import { TransactionInfoResponse } from '@colijnit/transactionapi/build/model/tr
 import { ArticleListObjectExtended } from '@colijnit/articleapi/build/model/article-list-object-extended.bo';
 import { ImageContent } from '@colijnit/mainapi/build/model/image-content.bo';
 import { StringUtils } from '@colijnit/ioneconnector/build/utils/string-utils';
-import { trigger, state, transition, style, animate } from '@angular/animations';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i5 from '@colijnit/configurator';
+import { ConfigurationResultObject, ConfiguratorModule, ConfiguratorSceneModule } from '@colijnit/configurator';
 import * as i1 from '@angular/platform-browser';
-import * as i5 from '@angular/common';
-import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i6 from '@colijnit/corecomponents_v12';
 import { IconModule, LoaderModule, ScrollContainerModule, InputNumberPickerModule, ButtonModule, ArticleTileModule, TileModule, IconCollapseHandleModule } from '@colijnit/corecomponents_v12';
 import { CoDocument } from '@colijnit/mainapi/build/model/co-document.bo';
+import * as i6$1 from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { ConfiguratorStatisticsEnvironment } from '@colijnit/articleapi/build/model/configurator-statistics-environment';
 import * as i3 from '@colijnit/sharedcomponents';
 import { FilesUploadModule } from '@colijnit/sharedcomponents';
+import * as i5$1 from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 
 // 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 = "261.20.1";
-        this.publishDate = "11-3-2026, 11:34:54";
+        this.symVer = "261.20.3";
+        this.publishDate = "2-4-2026, 17:07:12";
     }
 }
 
@@ -957,11 +961,13 @@ class ImageCarouselComponent {
         this._currentIndex = value;
         this._scrollCarouselToIndex();
     }
-    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;
@@ -1059,51 +1065,63 @@ class ImageCarouselComponent {
         const ctx = resizeCanvas.getContext('2d');
         const img = document.createElement('img');
         img.crossOrigin = 'anonymous';
+        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 = () => {
-            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;
+            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();
             }
-            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);
-            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);
-            imageViewModel.originalSource = source;
-            this._changeDetector.detectChanges();
         };
         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) {
@@ -1117,147 +1135,137 @@ class ImageCarouselComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselComponent, deps: [{ token: ProductConnectorService }, { token: ProductEventService }, { token: i0.ChangeDetectorRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselComponent, deps: [{ token: IconCacheService }, { token: ProductConnectorService }, { token: ProductEventService }, { token: i0.ChangeDetectorRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ImageCarouselComponent, isStandalone: false, selector: "app-image-carousel", inputs: { showRefresh: "showRefresh", images: "images" }, host: { listeners: { "document:keydown.escape": "onEsc()", "window:resize": "handleWindowResize()", "swipeleft": "gotoNextSlide()", "swiperight": "gotoPrevSlide()" }, properties: { "class.resizing": "this.resizing" } }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: ElementRef }], ngImport: i0, template: `
-      <div id="product_page_carousel">
-        <div id="product_page_carousel_items">
-          @if (showLoader) {
-            <co-loader></co-loader>
+    <div id="product_page_carousel">
+      <div id="product_page_carousel_items">
+        @if (showLoader) {
+          <co-loader></co-loader>
+        }
+        <div #carousel class="inner-carousel">
+          <!-- This has been taken out of the for loop to prevent flashing images when updating. -->
+          @if (imageViewModels[0]) {
+            <div class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)" (click)="handleShowImage(imageViewModels[0])">
+              <img [src]="imageViewModels[0].source">
+            </div>
+          }
+          @for (imageViewModel of imageViewModels.slice(1); track imageViewModel; let index = $index) {
+            <div class="carousel-item"
+                 [id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))" (click)="handleShowImage(imageViewModel)">
+              <img [src]="imageViewModel.source">
+            </div>
           }
-          <div #carousel class="inner-carousel">
-            <!-- This has been taken out of the for loop to prevent flashing images when updating. -->
-            @if (imageViewModels[0]) {
-              <div class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)" (click)="handleShowImage(imageViewModels[0])">
-                <img [src]="imageViewModels[0].source">
-              </div>
-            }
-            @for (imageViewModel of imageViewModels.slice(1); track imageViewModel; let index = $index) {
-              <div class="carousel-item"
-                [id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))" (click)="handleShowImage(imageViewModel)">
-                <img [src]="imageViewModel.source">
-              </div>
-            }
-            @if (imageViewModels && imageViewModels.length > 1) {
-              <div class="carousel-scroller-layer">
-                @if (currentIndex > 0) {
-                  <div class="carousel-item-scroller prev" (click)="gotoPrevSlide()"></div>
-                }
-                @if (currentIndex < images.length - 1) {
-                  <div class="carousel-item-scroller next" (click)="gotoNextSlide()"></div>
-                }
-              </div>
-            }
-          </div>
-        </div>
-      
-        <div id="product_page_carousel_thumbs">
           @if (imageViewModels && imageViewModels.length > 1) {
-            <co-scroll-container class="scroll-container">
-              @for (imageViewModel of imageViewModels; track imageViewModel; let index = $index) {
-                <div class="carousel-thumb"
-                  [class.active]="index === currentIndex">
-                  <img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
-                </div>
+            <div class="carousel-scroller-layer">
+              @if (currentIndex > 0) {
+                <div class="carousel-item-scroller prev" (click)="gotoPrevSlide()"></div>
               }
-            </co-scroll-container>
+              @if (currentIndex < images.length - 1) {
+                <div class="carousel-item-scroller next" (click)="gotoNextSlide()"></div>
+              }
+            </div>
           }
         </div>
       </div>
-      <!-- Modal (real popup) -->
-      @if (isPopupOpen) {
-        <div
-          class="image-modal"
-          (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>
-            <img [src]="selectedImage?.originalSource" alt="Image preview" />
-          </div>
+
+      <div id="product_page_carousel_thumbs">
+        @if (imageViewModels && imageViewModels.length > 1) {
+          <co-scroll-container class="scroll-container">
+            @for (imageViewModel of imageViewModels; track imageViewModel; let index = $index) {
+              <div class="carousel-thumb"
+                   [class.active]="index === currentIndex">
+                <img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
+              </div>
+            }
+          </co-scroll-container>
+        }
+      </div>
+    </div>
+    
+    <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>
-      }
-      `, isInline: true, 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;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:#000c;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;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"], dependencies: [{ kind: "component", type: i6.LoaderComponent, selector: "co-loader" }, { kind: "component", type: i6.ScrollContainerComponent, selector: "co-scroll-container", inputs: ["vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+      </div>
+    </ng-template>
+  `, isInline: true, 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;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:#000c;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;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"], dependencies: [{ kind: "component", type: i6.LoaderComponent, selector: "co-loader" }, { kind: "component", type: i6.ScrollContainerComponent, selector: "co-scroll-container", inputs: ["vertical"] }, { kind: "directive", type: i6$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-image-carousel', template: `
-      <div id="product_page_carousel">
-        <div id="product_page_carousel_items">
-          @if (showLoader) {
-            <co-loader></co-loader>
+    <div id="product_page_carousel">
+      <div id="product_page_carousel_items">
+        @if (showLoader) {
+          <co-loader></co-loader>
+        }
+        <div #carousel class="inner-carousel">
+          <!-- This has been taken out of the for loop to prevent flashing images when updating. -->
+          @if (imageViewModels[0]) {
+            <div class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)" (click)="handleShowImage(imageViewModels[0])">
+              <img [src]="imageViewModels[0].source">
+            </div>
+          }
+          @for (imageViewModel of imageViewModels.slice(1); track imageViewModel; let index = $index) {
+            <div class="carousel-item"
+                 [id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))" (click)="handleShowImage(imageViewModel)">
+              <img [src]="imageViewModel.source">
+            </div>
           }
-          <div #carousel class="inner-carousel">
-            <!-- This has been taken out of the for loop to prevent flashing images when updating. -->
-            @if (imageViewModels[0]) {
-              <div class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)" (click)="handleShowImage(imageViewModels[0])">
-                <img [src]="imageViewModels[0].source">
-              </div>
-            }
-            @for (imageViewModel of imageViewModels.slice(1); track imageViewModel; let index = $index) {
-              <div class="carousel-item"
-                [id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))" (click)="handleShowImage(imageViewModel)">
-                <img [src]="imageViewModel.source">
-              </div>
-            }
-            @if (imageViewModels && imageViewModels.length > 1) {
-              <div class="carousel-scroller-layer">
-                @if (currentIndex > 0) {
-                  <div class="carousel-item-scroller prev" (click)="gotoPrevSlide()"></div>
-                }
-                @if (currentIndex < images.length - 1) {
-                  <div class="carousel-item-scroller next" (click)="gotoNextSlide()"></div>
-                }
-              </div>
-            }
-          </div>
-        </div>
-      
-        <div id="product_page_carousel_thumbs">
           @if (imageViewModels && imageViewModels.length > 1) {
-            <co-scroll-container class="scroll-container">
-              @for (imageViewModel of imageViewModels; track imageViewModel; let index = $index) {
-                <div class="carousel-thumb"
-                  [class.active]="index === currentIndex">
-                  <img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
-                </div>
+            <div class="carousel-scroller-layer">
+              @if (currentIndex > 0) {
+                <div class="carousel-item-scroller prev" (click)="gotoPrevSlide()"></div>
               }
-            </co-scroll-container>
+              @if (currentIndex < images.length - 1) {
+                <div class="carousel-item-scroller next" (click)="gotoNextSlide()"></div>
+              }
+            </div>
           }
         </div>
       </div>
-      <!-- Modal (real popup) -->
-      @if (isPopupOpen) {
-        <div
-          class="image-modal"
-          (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>
-            <img [src]="selectedImage?.originalSource" alt="Image preview" />
-          </div>
+
+      <div id="product_page_carousel_thumbs">
+        @if (imageViewModels && imageViewModels.length > 1) {
+          <co-scroll-container class="scroll-container">
+            @for (imageViewModel of imageViewModels; track imageViewModel; let index = $index) {
+              <div class="carousel-thumb"
+                   [class.active]="index === currentIndex">
+                <img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
+              </div>
+            }
+          </co-scroll-container>
+        }
+      </div>
+    </div>
+    
+    <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>
-      }
-      `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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;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:#000c;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;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"] }]
-        }], ctorParameters: () => [{ type: ProductConnectorService }, { type: ProductEventService }, { type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }], propDecorators: { carousel: [{
+      </div>
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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;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:#000c;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;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"] }]
+        }], ctorParameters: () => [{ type: IconCacheService }, { type: ProductConnectorService }, { type: ProductEventService }, { type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }], propDecorators: { carousel: [{
                 type: ViewChild,
                 args: ['carousel', { read: ElementRef }]
             }], onEsc: [{
@@ -1836,10 +1844,15 @@ class ProductRelatedComponent {
     async _loadImages() {
         this.articleViewModels.forEach(avm => {
             if (avm.article.image) {
-                this._iOne.getImageForCoDocument(avm.article.image, false).then(imageContent => avm.imageData = imageContent.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;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductRelatedComponent, deps: [{ token: ProductConnectorService }, { token: ProductEventService }, { token: ProductConnectorAdapterService }, { token: ProductSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ProductRelatedComponent, isStandalone: false, selector: "app-product-related", inputs: { refType: "refType", label: "label", externalSource: "externalSource", isSmallModus: "isSmallModus", createFrozenArticle: "createFrozenArticle", articles: "articles" }, ngImport: i0, template: `
         @if (articles && articles.length > 0) {
@@ -1868,7 +1881,7 @@ class ProductRelatedComponent {
             </co-scroll-container>
           </div>
         }
-        `, isInline: true, 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;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;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"], dependencies: [{ kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["label", "amount"] }, { kind: "component", type: i6.ScrollContainerComponent, selector: "co-scroll-container", inputs: ["vertical"] }, { kind: "component", type: i6.ArticleTileComponent, selector: "co-article-tile", inputs: ["imageData", "description", "price", "level", "isSelected", "isSmallModus", "hasConfigureButton", "hasThreeDButton", "hasCartButton"], outputs: ["contentClick", "configureButtonClick", "threeDButtonClick", "cartButtonClick"] }] }); }
+        `, isInline: true, styles: [":host{display:block}.article-wrapper{display:flex;flex-direction:row;flex:1;justify-content:flex-start}.article-wrapper ::ng-deep co-tile{transition:all .14s ease-out;border:1px solid transparent;padding:10px;display:flex;flex-direction:column;color:#171721;box-sizing:border-box;justify-content:space-between}.article-wrapper ::ng-deep co-tile .price{display:block;padding:10px 0}.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;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{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;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 .no-image-wrapper{min-height:100px;display:flex;align-items:center}.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"], dependencies: [{ kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["label", "amount"] }, { kind: "component", type: i6.ScrollContainerComponent, selector: "co-scroll-container", inputs: ["vertical"] }, { kind: "component", type: i6.ArticleTileComponent, selector: "co-article-tile", inputs: ["imageData", "description", "price", "level", "isSelected", "isSmallModus", "hasConfigureButton", "hasThreeDButton", "hasCartButton"], outputs: ["contentClick", "configureButtonClick", "threeDButtonClick", "cartButtonClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductRelatedComponent, decorators: [{
             type: Component,
@@ -1899,7 +1912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             </co-scroll-container>
           </div>
         }
-        `, standalone: false, 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;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;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"] }]
+        `, standalone: false, styles: [":host{display:block}.article-wrapper{display:flex;flex-direction:row;flex:1;justify-content:flex-start}.article-wrapper ::ng-deep co-tile{transition:all .14s ease-out;border:1px solid transparent;padding:10px;display:flex;flex-direction:column;color:#171721;box-sizing:border-box;justify-content:space-between}.article-wrapper ::ng-deep co-tile .price{display:block;padding:10px 0}.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;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{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;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 .no-image-wrapper{min-height:100px;display:flex;align-items:center}.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"] }]
         }], ctorParameters: () => [{ type: ProductConnectorService }, { type: ProductEventService }, { type: ProductConnectorAdapterService }, { type: ProductSettingsService }], propDecorators: { refType: [{
                 type: Input
             }], label: [{
@@ -1963,7 +1976,7 @@ class ProductStockComponent {
         <div class="pp-default-label" [class.in-stock]="inStock" [textContent]="stockLabel | localize"></div>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block}.product-stock-wrapper{display:flex;flex-direction:row;align-items:center;border-top:1px solid #f6f5f4;border-bottom:1px solid #f6f5f4;padding:20px 15px;cursor:pointer}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:40px;height:37px}.product-stock-wrapper .product-stock-fields{display:flex;flex-direction:row}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:14px;margin:0;color:#2b60a7;text-decoration:underline}.product-stock-wrapper .product-stock-fields .pp-default-label:after{content:\"\";width:10px;height:10px;border-radius:10px;background:#f15152;display:inline-block;margin:0 0 0 15px}.product-stock-wrapper .product-stock-fields .pp-default-label.in-stock:after{background:#74b77f}@media screen and (max-width: 400px){.product-stock-wrapper{padding:15px 0 15px 10px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:32px;height:28px}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:13px}}\n"], dependencies: [{ kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+  `, isInline: true, styles: [":host{display:block}.product-stock-wrapper{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 15px;cursor:pointer}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:40px;height:37px}.product-stock-wrapper .product-stock-fields{display:flex;flex-direction:row}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:14px;margin:0;color:#2b60a7;text-decoration:underline}.product-stock-wrapper .product-stock-fields .pp-default-label:after{content:\"\";width:10px;height:10px;border-radius:10px;background:#f15152;display:inline-block;margin:0 0 0 15px}.product-stock-wrapper .product-stock-fields .pp-default-label.in-stock:after{background:#74b77f}@media screen and (max-width: 400px){.product-stock-wrapper{padding:15px 0 15px 10px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:32px;height:28px}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:13px}}\n"], dependencies: [{ kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductStockComponent, decorators: [{
             type: Component,
@@ -1976,59 +1989,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         <div class="pp-default-label" [class.in-stock]="inStock" [textContent]="stockLabel | localize"></div>
       </div>
     </div>
-  `, standalone: false, styles: [":host{display:block}.product-stock-wrapper{display:flex;flex-direction:row;align-items:center;border-top:1px solid #f6f5f4;border-bottom:1px solid #f6f5f4;padding:20px 15px;cursor:pointer}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:40px;height:37px}.product-stock-wrapper .product-stock-fields{display:flex;flex-direction:row}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:14px;margin:0;color:#2b60a7;text-decoration:underline}.product-stock-wrapper .product-stock-fields .pp-default-label:after{content:\"\";width:10px;height:10px;border-radius:10px;background:#f15152;display:inline-block;margin:0 0 0 15px}.product-stock-wrapper .product-stock-fields .pp-default-label.in-stock:after{background:#74b77f}@media screen and (max-width: 400px){.product-stock-wrapper{padding:15px 0 15px 10px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:32px;height:28px}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:13px}}\n"] }]
+  `, standalone: false, styles: [":host{display:block}.product-stock-wrapper{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 15px;cursor:pointer}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:40px;height:37px}.product-stock-wrapper .product-stock-fields{display:flex;flex-direction:row}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:14px;margin:0;color:#2b60a7;text-decoration:underline}.product-stock-wrapper .product-stock-fields .pp-default-label:after{content:\"\";width:10px;height:10px;border-radius:10px;background:#f15152;display:inline-block;margin:0 0 0 15px}.product-stock-wrapper .product-stock-fields .pp-default-label.in-stock:after{background:#74b77f}@media screen and (max-width: 400px){.product-stock-wrapper{padding:15px 0 15px 10px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:32px;height:28px}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:13px}}\n"] }]
         }], ctorParameters: () => [{ type: ProductConnectorService }, { type: IconCacheService }], propDecorators: { goodId: [{
                 type: Input
             }], openStockEvent: [{
                 type: Output
             }] } });
 
-class ProductDeliveryComponent {
-    set stockAndDelivery(value) {
-        if (value) {
-            this.deliveryDescription = value.deliveryDescription;
-            if (this.deliveryDescription.length > 0 && this.deliveryDescription[0] === ' ') {
-                this.deliveryDescription = this._localizePipe.transform('ASK_FOR_INFORMATION');
-            }
-        }
-    }
-    constructor(_localizePipe, _iOne, _iconCache) {
-        this._localizePipe = _localizePipe;
-        this._iOne = _iOne;
-        this._iconCache = _iconCache;
-        this.icon = IconEnum;
-        this.iconData = this._iconCache.getIcon(this.icon.Truck);
-    }
-    ngOnInit() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDeliveryComponent, deps: [{ token: LocalizePipe }, { token: ProductConnectorService }, { token: IconCacheService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ProductDeliveryComponent, isStandalone: false, selector: "app-product-delivery", inputs: { stockAndDelivery: "stockAndDelivery" }, ngImport: i0, template: `
-    <!--<app-header [label]="'DELIVERY_TIME_PERIOD' | localize"></app-header>-->
-    <div class="product-delivery-wrapper">
-      <co-icon class="delivery-icon" [iconData]="iconData"></co-icon>
-      <div class="product-delivery-fields">
-        <div class="pp-default-label" [textContent]="'DELIVERY_TIME_PERIOD' | localize"></div>
-        <div class="pp-default-description" [textContent]="deliveryDescription | date:'dd MMMM yyyy'"></div>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:block}.product-delivery-wrapper{display:flex;flex-direction:row;align-items:center;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:40px;height:37px}.product-delivery-wrapper .product-delivery-fields{display:flex;flex-direction:column}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:14px;margin:0}@media screen and (max-width: 400px){.product-delivery-wrapper{padding:15px 0 15px 10px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:32px;height:28px}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:13px}}\n"], dependencies: [{ kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDeliveryComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-product-delivery', template: `
-    <!--<app-header [label]="'DELIVERY_TIME_PERIOD' | localize"></app-header>-->
-    <div class="product-delivery-wrapper">
-      <co-icon class="delivery-icon" [iconData]="iconData"></co-icon>
-      <div class="product-delivery-fields">
-        <div class="pp-default-label" [textContent]="'DELIVERY_TIME_PERIOD' | localize"></div>
-        <div class="pp-default-description" [textContent]="deliveryDescription | date:'dd MMMM yyyy'"></div>
-      </div>
-    </div>
-  `, standalone: false, styles: [":host{display:block}.product-delivery-wrapper{display:flex;flex-direction:row;align-items:center;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:40px;height:37px}.product-delivery-wrapper .product-delivery-fields{display:flex;flex-direction:column}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:14px;margin:0}@media screen and (max-width: 400px){.product-delivery-wrapper{padding:15px 0 15px 10px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:32px;height:28px}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:13px}}\n"] }]
-        }], ctorParameters: () => [{ type: LocalizePipe }, { type: ProductConnectorService }, { type: IconCacheService }], propDecorators: { stockAndDelivery: [{
-                type: Input
-            }] } });
-
 class ProductAdditionalInfoComponent {
     set article(value) {
         if (value) {
@@ -2063,12 +2030,14 @@ class ProductAdditionalInfoComponent {
                     mainArticle = await this._connectorService.getSuperArticle(this.article.superArticleNr);
                     this._superArticles.set(this.article.superArticleNr, mainArticle);
                 }
-                mainArticle.texts.forEach((txt) => {
-                    if (BitUtils.IsFullDescription(txt.publication)) {
-                        const safeTxt = this._sanitizer.sanitize(SecurityContext.HTML, txt.text);
-                        texts.push(safeTxt);
-                    }
-                });
+                if (mainArticle) {
+                    mainArticle.texts.forEach((txt) => {
+                        if (BitUtils.IsFullDescription(txt.publication)) {
+                            const safeTxt = this._sanitizer.sanitize(SecurityContext.HTML, txt.text);
+                            texts.push(safeTxt);
+                        }
+                    });
+                }
                 resolve(texts);
             }
             else {
@@ -2567,6 +2536,7 @@ class RenderCarouselComponent {
         this.resizing = false;
         this.showLoader = true;
         this.renderedImageLoaded = false;
+        this.listOfRenders = [];
         // For now we will just use mock data
         this.renderAngles = [0, -45, -90, -135, -180, -225, -270, -315];
         this.currentRenderAngleIndex = 0;
@@ -2582,12 +2552,14 @@ class RenderCarouselComponent {
             this._changeDetector.detectChanges();
         }), this._appEventService.onRenderImageReceived.subscribe((image) => {
             this.renderedImage = image;
+            this.listOfRenders.push(image);
             this.showLoader = false;
             this._changeDetector.detectChanges();
         }));
     }
     ngOnDestroy() {
         this.carousel = undefined;
+        this.listOfRenders = [];
         this._subs.forEach(s => s.unsubscribe());
     }
     ngOnChanges() {
@@ -2613,7 +2585,7 @@ class RenderCarouselComponent {
         this._appEventService.onGetRenderForRenderCarousel.next(renderParams);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderCarouselComponent, deps: [{ token: IconCacheService }, { token: ProductEventService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RenderCarouselComponent, isStandalone: false, selector: "app-render-carousel", inputs: { showRefresh: "showRefresh", article: "article" }, host: { listeners: { "window:resize": "handleWindowResize()", "swipeleft": "gotoNextSlide()", "swiperight": "gotoPrevSlide()" }, properties: { "class.resizing": "this.resizing" } }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RenderCarouselComponent, isStandalone: false, selector: "app-render-carousel", inputs: { showRefresh: "showRefresh", article: "article" }, host: { listeners: { "window:resize": "handleWindowResize()", "swipeleft": "gotoNextSlide()", "swiperight": "gotoPrevSlide()" }, properties: { "class.resizing": "this.resizing" } }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
     <div id="product_page_carousel">
       <div id="product_page_carousel_render_items">
         <co-loader></co-loader>
@@ -2636,8 +2608,19 @@ class RenderCarouselComponent {
           </div>
         </div>
       </div>
+
+      @if (listOfRenders && listOfRenders.length > 0) {
+        <!--        <div class="renderThumbs">-->
+          <!--          @for (render of listOfRenders; track render) {-->
+          <!--            <div class="renderThumbnail">-->
+          <!--              <img [src]="render" alt="">-->
+          <!--            </div>-->
+          <!--          }-->
+          <!--        </div>-->
+      }
+
     </div>
-  `, isInline: true, 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_render_items{position:relative;margin-bottom:10px;min-height:400px}#product_page_carousel #product_page_carousel_render_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:700px}#product_page_carousel .inner-carousel .inner-carousel-render img{width:100%;height:auto;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;top:0;left:0;z-index:100}#product_page_carousel .carousel-scroller-layer .carousel-item-scroller{opacity:0;position:absolute;border-radius:50%;z-index:100;background:#fff6;color:#fff;width:30px;height:30px;top:calc(50% - 15px);cursor:pointer;transition:opacity .3s}#product_page_carousel .carousel-scroller-layer .carousel-item-scroller co-icon{color:#fff}#product_page_carousel .carousel-scroller-layer .prev{left:15px}#product_page_carousel .carousel-scroller-layer .next{right:15px}#product_page_carousel .carousel-scroller-layer:hover .carousel-item-scroller{opacity:1}#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}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fade-image{opacity:0;transition:opacity 1.5s ease-in-out}.fade-image.loaded{opacity:1}\n"], dependencies: [{ kind: "component", type: i6.LoaderComponent, selector: "co-loader" }, { kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{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_render_items{position:relative;margin-bottom:10px;min-height:400px}#product_page_carousel #product_page_carousel_render_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:700px}#product_page_carousel .inner-carousel .inner-carousel-render img{width:100%;height:auto;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;top:0;left:0;z-index:100}#product_page_carousel .carousel-scroller-layer .carousel-item-scroller{opacity:0;position:absolute;border-radius:50%;z-index:100;background:#fff6;color:#fff;width:30px;height:30px;top:calc(50% - 15px);cursor:pointer;transition:opacity .3s}#product_page_carousel .carousel-scroller-layer .carousel-item-scroller co-icon{color:#fff}#product_page_carousel .carousel-scroller-layer .prev{left:15px}#product_page_carousel .carousel-scroller-layer .next{right:15px}#product_page_carousel .carousel-scroller-layer:hover .carousel-item-scroller{opacity:1}#product_page_carousel .renderThumbs{display:flex;justify-content:start;gap:10px;margin-top:10px}#product_page_carousel .renderThumbs img{width:100px;height:100px;object-fit:contain}#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}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fade-image{opacity:0;transition:opacity 1.5s ease-in-out}.fade-image.loaded{opacity:1}\n"], dependencies: [{ kind: "component", type: i6.LoaderComponent, selector: "co-loader" }, { kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderCarouselComponent, decorators: [{
             type: Component,
@@ -2664,8 +2647,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           </div>
         </div>
       </div>
+
+      @if (listOfRenders && listOfRenders.length > 0) {
+        <!--        <div class="renderThumbs">-->
+          <!--          @for (render of listOfRenders; track render) {-->
+          <!--            <div class="renderThumbnail">-->
+          <!--              <img [src]="render" alt="">-->
+          <!--            </div>-->
+          <!--          }-->
+          <!--        </div>-->
+      }
+
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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_render_items{position:relative;margin-bottom:10px;min-height:400px}#product_page_carousel #product_page_carousel_render_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:700px}#product_page_carousel .inner-carousel .inner-carousel-render img{width:100%;height:auto;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;top:0;left:0;z-index:100}#product_page_carousel .carousel-scroller-layer .carousel-item-scroller{opacity:0;position:absolute;border-radius:50%;z-index:100;background:#fff6;color:#fff;width:30px;height:30px;top:calc(50% - 15px);cursor:pointer;transition:opacity .3s}#product_page_carousel .carousel-scroller-layer .carousel-item-scroller co-icon{color:#fff}#product_page_carousel .carousel-scroller-layer .prev{left:15px}#product_page_carousel .carousel-scroller-layer .next{right:15px}#product_page_carousel .carousel-scroller-layer:hover .carousel-item-scroller{opacity:1}#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}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fade-image{opacity:0;transition:opacity 1.5s ease-in-out}.fade-image.loaded{opacity:1}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{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_render_items{position:relative;margin-bottom:10px;min-height:400px}#product_page_carousel #product_page_carousel_render_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:700px}#product_page_carousel .inner-carousel .inner-carousel-render img{width:100%;height:auto;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;top:0;left:0;z-index:100}#product_page_carousel .carousel-scroller-layer .carousel-item-scroller{opacity:0;position:absolute;border-radius:50%;z-index:100;background:#fff6;color:#fff;width:30px;height:30px;top:calc(50% - 15px);cursor:pointer;transition:opacity .3s}#product_page_carousel .carousel-scroller-layer .carousel-item-scroller co-icon{color:#fff}#product_page_carousel .carousel-scroller-layer .prev{left:15px}#product_page_carousel .carousel-scroller-layer .next{right:15px}#product_page_carousel .carousel-scroller-layer:hover .carousel-item-scroller{opacity:1}#product_page_carousel .renderThumbs{display:flex;justify-content:start;gap:10px;margin-top:10px}#product_page_carousel .renderThumbs img{width:100px;height:100px;object-fit:contain}#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}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fade-image{opacity:0;transition:opacity 1.5s ease-in-out}.fade-image.loaded{opacity:1}\n"] }]
         }], ctorParameters: () => [{ type: IconCacheService }, { type: ProductEventService }, { type: i0.ChangeDetectorRef }], propDecorators: { carousel: [{
                 type: ViewChild,
                 args: ['carousel', { read: ElementRef }]
@@ -2795,6 +2789,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 class ProductPageComponent {
+    showClass() {
+        return true;
+    }
     set sku(value) {
         if (value) {
             if (this.configuring) {
@@ -2846,12 +2843,14 @@ class ProductPageComponent {
     get currentView() {
         return this._currentView;
     }
-    constructor(_ione, iconCache, settingsService, appEventService, _changeDetector) {
-        this._ione = _ione;
+    constructor(iconCache, settingsService, appEventService, _changeDetector, _ione, _configuringService, _configuratorSceneService) {
         this.iconCache = iconCache;
         this.settingsService = settingsService;
         this.appEventService = appEventService;
         this._changeDetector = _changeDetector;
+        this._ione = _ione;
+        this._configuringService = _configuringService;
+        this._configuratorSceneService = _configuratorSceneService;
         this.icon = IconEnum;
         this.createFrozenArticle = true;
         this.isReturn = false;
@@ -2871,21 +2870,16 @@ class ProductPageComponent {
         this._fullScreen = false;
         this._subs = [];
         this._subs.push(this.appEventService.onForceRenderImage.subscribe((x) => {
-            if (this.selections.nativeElement) {
-                this.selections.nativeElement.forceRenderImage();
-            }
+            // TODO
         }), this.settingsService.settingsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)), this._pageLoadedSubscription = combineLatest([
             this._ione.controllerInitialized,
             this._ione.articleLoaded
         ]).subscribe(([initialized, articleLoaded]) => {
             if (initialized && articleLoaded) {
                 this.settingsLoaded = initialized;
+                this._initConfigurator();
             }
-        }), 
-        // this._ione.controllerInitialized.subscribe((initialized: boolean) => {
-        //   this.settingsLoaded = initialized;
-        // }),
-        this.appEventService.onAnswersAvailable.subscribe((answers) => {
+        }), this.appEventService.onAnswersAvailable.subscribe((answers) => {
             if (answers && this.configurable) {
                 this.showAddToCart = false;
             }
@@ -2893,10 +2887,17 @@ class ProductPageComponent {
                 this.showAddToCart = true;
             }
         }), this.appEventService.onGetRenderForRenderCarousel.subscribe((renderParameters) => {
-            if (this.selections.nativeElement) {
-                this.selections.nativeElement.getRenderForRenderCarousel(renderParameters);
+            this._createRenderForCarousel(renderParameters);
+        }), this.appEventService.onArticleReceived.subscribe(article => this.setConfigPresetId(article.configPresetId)), this._configuringService.floorReady.subscribe((ready) => {
+            if (ready) {
+                this._startSceneInit();
+                this._startConfigurator();
             }
-        }), this.appEventService.onArticleReceived.subscribe(article => this.setConfigPresetId(article.configPresetId)));
+        }), this._configuringService.onRenderImageReceived.subscribe((image) => {
+            appEventService.onRenderImageReceived.next(image);
+        }), this._configuringService.onAnswersAvailable.subscribe((hasAnswers) => {
+            appEventService.onAnswersAvailable.next(hasAnswers);
+        }));
     }
     ngOnInit() {
         if (this._settings) {
@@ -2908,14 +2909,15 @@ class ProductPageComponent {
         }
     }
     ngOnDestroy() {
+        this.settingsService.settings = undefined;
+        this.settingsLoaded = false;
         this._subs.forEach(s => s.unsubscribe());
         if (this._initializedSub) {
             this._initializedSub.unsubscribe();
         }
         this._pageLoadedSubscription.unsubscribe();
-        this.configurator = undefined;
-        this.selections = undefined;
         this.fullscreenbutton = undefined;
+        this._configuringService.isConfiguring = false;
     }
     setInstance(event) {
         if (event.detail) {
@@ -2944,7 +2946,6 @@ class ProductPageComponent {
                     this.article = article;
                     if (this.article) {
                         this.configurable = this.article.goodType === 'B' && (this.article.isConfigurable || this.article.isConfigurable === undefined);
-                        // this.configurable = this.article.goodType === 'B';
                         if (this.configurable) {
                             this.showAddToCart = false;
                             this.currentView = SelectorType.TwoD;
@@ -2997,6 +2998,24 @@ class ProductPageComponent {
         this.showPresetDialog = false;
         this._savePreset();
     }
+    handleBuildFinished(build) {
+        if (this.threeD) {
+            this._buildResult = build;
+            this._configuringService.addBuildToScene(build);
+            if (this.settingsService.settings && this.settingsService.settings.renderParameters) {
+                // Start a render
+                const options = {
+                    objectRotation: { x: 0, y: 43, z: 0 },
+                    margin: 5,
+                    cameraRotationX: 75,
+                    objectHeight: 500,
+                    objectWidth: 500,
+                    renderType: 0
+                };
+                this._configuringService.renderImage(build, options, true);
+            }
+        }
+    }
     _savePreset() {
         this._ione.savePreset().then((success) => {
             if (success) {
@@ -3005,20 +3024,47 @@ class ProductPageComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductPageComponent, deps: [{ token: ProductConnectorService }, { token: IconCacheService }, { token: ProductSettingsService }, { token: ProductEventService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ProductPageComponent, isStandalone: false, selector: "app-product-page", inputs: { sku: "sku", settings: "settings", externalSource: "externalSource", createFrozenArticle: "createFrozenArticle", isReturn: "isReturn", showRelatedProductsPopup: "showRelatedProductsPopup", enableRenderCarousel: "enableRenderCarousel" }, outputs: { openStockEvent: "openStockEvent" }, viewQueries: [{ propertyName: "configurator", first: true, predicate: ["configurator"], descendants: true, read: ElementRef }, { propertyName: "selections", first: true, predicate: ["selections"], descendants: true, read: ElementRef }, { propertyName: "fullscreenbutton", first: true, predicate: ["fullscreenbutton"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    _initConfigurator() {
+        // this should be async
+        if (this.settingsLoaded) {
+            this._configuringService.init(this.settings).then(done => {
+                this._configuringService.isConfiguring = true;
+            });
+        }
+    }
+    _startConfigurator() {
+        if (this.settingsLoaded) {
+            const furnitureData = new ConfigurationResultObject();
+            furnitureData.sku = this.sku;
+            this._configuringService.configure(furnitureData).then(loaded => {
+            });
+        }
+    }
+    _startSceneInit() {
+        if (this.settingsLoaded) {
+            this._configuringService.handleLoadSceneContent();
+            this._configuringService.scene = this._configuratorSceneService.scene;
+        }
+    }
+    _createRenderForCarousel(renderOptions) {
+        this._configuringService.renderImage(this._buildResult, renderOptions, false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductPageComponent, deps: [{ token: IconCacheService }, { token: ProductSettingsService }, { token: ProductEventService }, { token: i0.ChangeDetectorRef }, { token: ProductConnectorService }, { token: i5.ConfiguringService }, { token: i5.SceneService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ProductPageComponent, isStandalone: false, selector: "app-product-page", inputs: { sku: "sku", settings: "settings", externalSource: "externalSource", createFrozenArticle: "createFrozenArticle", isReturn: "isReturn", showRelatedProductsPopup: "showRelatedProductsPopup", enableRenderCarousel: "enableRenderCarousel" }, outputs: { openStockEvent: "openStockEvent" }, host: { properties: { "class.co-product-page": "this.showClass" } }, viewQueries: [{ propertyName: "fullscreenbutton", first: true, predicate: ["fullscreenbutton"], descendants: true, read: ElementRef }], ngImport: i0, template: `
     @if (settingsLoaded) {
       <div class="page-wrapper">
         <div class="page-wrapper-content">
           <div class="page-wrapper-left">
             <div class="product-image-container">
               <div class="product-page-block-selector-type">
-                <app-product-selector-type class="default-padding"
-                                           [(currentType)]="currentView"
-                                           [show2D]="configurable"
-                                           [show3D]="threeD"
-                ></app-product-selector-type>
+                <app-product-selector-type
+                  class="default-padding"
+                  [(currentType)]="currentView"
+                  [show2D]="configurable"
+                  [show3D]="threeD">
+                </app-product-selector-type>
               </div>
+
               <div class="product-page-block-image default-padding" [class.full]="fullScreen">
                 @if (!enableRenderCarousel) {
                   <app-image-carousel
@@ -3033,120 +3079,125 @@ class ProductPageComponent {
                     [article]="article">
                   </app-render-carousel>
                 }
-                @if (settingsLoaded && this.configurable) {
-                  <threed-configurator
-                    #configurator
-                    class="threed-configurator"
-                    [class.configurator-full-screen]="fullScreen"
-                    [@toggleVisibilityByState]="show3D ? 'show' : 'hide'"
-                    [@toggleFullScreen]="fullScreen ? 'fullscreen' : 'halfscreen'">
-                  </threed-configurator>
+                @if (settingsLoaded) {
+                  <co-configurator-scene
+                    [class.show-full-screen]="fullScreen"
+                    [class.hide-3d-scene]="!show3D"
+                    [class.show-3d-scene]="show3D">
+                  </co-configurator-scene>
                 }
                 @if (show3D) {
-                  <co-icon #fullscreenbutton class="fullscreen-button"
-                           [@toggleTopLeft]="fullScreen ? 'fullscreen' : 'halfscreen'"
-                           [iconData]="iconCache.getIcon(fullScreenIcon)"
-                           (click)="showFullScreen()"></co-icon>
+                  <co-icon
+                    #fullscreenbutton
+                    class="fullscreen-button"
+                    [@toggleTopLeft]="fullScreen ? 'fullscreen' : 'halfscreen'"
+                    [iconData]="iconCache.getIcon(fullScreenIcon)"
+                    (click)="showFullScreen()">
+                  </co-icon>
                 }
                 @if (show3D && fullScreen) {
-                  <co-icon class="threed-watermark"
-                           [iconData]="iconCache.getIcon(icon.Logo)"></co-icon>
+                  <co-icon
+                    class="threed-watermark"
+                    [iconData]="iconCache.getIcon(icon.Logo)">
+                  </co-icon>
                 }
               </div>
             </div>
           </div>
           <div class="page-wrapper-right">
-            <div class="product-page-block-description">
-              <app-product-description class="default-padding" [article]="article"></app-product-description>
-            </div>
-            <div class="product-page-block-additional">
-              <div class="product-page-block-additional-description">
-                <app-product-additional-description class="default-padding" [article]="article"></app-product-additional-description>
+            <div class="product-page-scroll-container">
+              <div class="product-page-block-description">
+                <app-product-description
+                  class="default-padding"
+                  [article]="article">
+                </app-product-description>
               </div>
-              <div class="product-page-block-price" [class.full]="configuring">
-                @if (configuring && this.settingsService.settings.options.showSaveAsPresetButton) {
-                  <div class="preset-container">
-                    <co-button
-                      class="save-preset-button"
-                      [iconData]="iconCache.getIcon(icon.SaveDisk)"
-                      [label]="'PRESET_SAVE_AS' | localize"
-                      (onClick)="handleSavePreset()"
-                    ></co-button>
-                  </div>
-                }
+              <div class="product-page-block-additional">
+                <div class="product-page-block-additional-description">
+                  <app-product-additional-description
+                    class="default-padding"
+                    [article]="article">
+                  </app-product-additional-description>
+                </div>
+                <div class="product-page-block-price" [class.full]="configuring">
+                  @if (configuring && this.settingsService.settings.options.showSaveAsPresetButton) {
+                    <div class="preset-container">
+                      <co-button
+                        class="save-preset-button"
+                        [iconData]="iconCache.getIcon(icon.SaveDisk)"
+                        [label]="'PRESET_SAVE_AS' | localize"
+                        (onClick)="handleSavePreset()">
+                      </co-button>
+                    </div>
+                  }
+                  @if (!configuring) {
+                    <app-product-price
+                      class="s-padding"
+                      [pricing]="article?.pricing"
+                      [configurable]="configurable">
+                    </app-product-price>
+                  }
+
+                  @if (settingsLoaded) {
+                    <co-configurator
+                      [class.hide-configurator]="!configuring"
+                      [class.show-configurator]="configuring"
+                      [showLoader]="true"
+                      [animateSlideout]="false"
+                      [showHeaderInformation]="false"
+                      [canCloseConfigurator]="false"
+                      (buildResult)="handleBuildFinished($event)">
+                    </co-configurator>
+                  }
+                </div>
                 @if (!configuring) {
-                  <app-product-price class="s-padding"
-                                     [pricing]="article?.pricing"
-                                     [configurable]="configurable"
-                  ></app-product-price>
+                  <div class="product-page-block-addtocart no-padding product-action-buttons"
+                       [@toggleTopRight]="fullScreen ? 'fullscreen' : 'halfscreen'">
+                    <app-product-addtocart
+                      [configurable]="configurable"
+                      [createFrozenArticle]="createFrozenArticle"
+                      [configuring]="configuring"
+                      [showAddToCart]="showAddToCart"
+                      [article]="article"
+                      [externalSource]="externalSource"
+                      [isReturn]="isReturn"
+                      (startConfiguration)="handleStartConfiguration()"
+                      (showRelatedPopup)="handlePopUpChange($event)">
+                    </app-product-addtocart>
+                  </div>
                 }
-
-                @if (settingsLoaded) {
-                  <threed-selections #selections class="threed-selections"
-                                     [class.show-selections]="configuring"
-                                     [@toggleFullScreenRight]="fullScreen ? 'fullscreen' : 'halfscreen'"
-                                     [class.default-padding]="!fullScreen"
-                                     [class.show-full-screen]="fullScreen"
-                                     [class.mini-scrollbar]="fullScreen"
-                                     [sku]="sku"
-                                     [settings]="settings"
-                                     (onUserActionFromThreeD)="configuring = true"
-                                     (instanceSet)="setInstance($event)"
-                                     (onImageReceived)="appEventService.onImageReceived.next($event)"
-                                     (onRenderStarted)="appEventService.onRenderStarted.next()"
-                                     (onDraftRenderImageReceived)="appEventService.onDraftRenderImageReceived.next($event)"
-                                     (onArticleReceived)="appEventService.onArticleReceived.next($event.detail)"
-                                     (onSelectionsReceived)="appEventService.onSelectionsReceived.next($event.detail)"
-                                     (onArticleInfoReceived)="appEventService.onArticleInfoReceived.next($event.detail)"
-                                     (onAnswersAvailable)="appEventService.onAnswersAvailable.next($event.detail)"
-                                     (onReadyToRender)="appEventService.onReadyToRender.next($event.detail)"
-                                     (onRenderImageReceived)="appEventService.onRenderImageReceived.next($event.detail)"
-                  ></threed-selections>
+                @if (configuring) {
+                  <div class="addtocart-reserved product-action-buttons" [class.full-screen]="fullScreen">
+                    <app-product-addtocart
+                      class="default-padding"
+                      [configurable]="false"
+                      [fullscreen]="fullScreen"
+                      [showAddToCart]="showAddToCart"
+                      [configuring]="configuring"
+                      [article]="article"
+                      [externalSource]="externalSource"
+                      [isReturn]="isReturn"
+                      (startConfiguration)="handleStartConfiguration()">
+                    </app-product-addtocart>
+                  </div>
                 }
-              </div>
-              @if (!configuring) {
-                <div class="product-page-block-addtocart no-padding product-action-buttons"
-                     [@toggleTopRight]="fullScreen ? 'fullscreen' : 'halfscreen'">
-                  <app-product-addtocart
-                    [configurable]="configurable"
-                    [createFrozenArticle]="createFrozenArticle"
-                    [configuring]="configuring"
-                    [showAddToCart]="showAddToCart"
-                    [article]="article"
-                    [externalSource]="externalSource"
-                    [isReturn]="isReturn"
-                    (startConfiguration)="handleStartConfiguration()"
-                    (showRelatedPopup)="handlePopUpChange($event)"
-                  ></app-product-addtocart>
+                <div class="product-page-block-variants">
+                  @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
+                    <app-product-related
+                      class="no-padding"
+                      [externalSource]="externalSource"
+                      [articles]="article?.relatedArticles" [refType]="64"
+                      [label]="'VARIANTS' | localize">
+                    </app-product-related>
+                  }
                 </div>
-              }
-              @if (configuring) {
-                <div class="addtocart-reserved product-action-buttons" [class.full-screen]="fullScreen">
-                  <app-product-addtocart class="default-padding"
-                                         [configurable]="false"
-                                         [fullscreen]="fullScreen"
-                                         [showAddToCart]="showAddToCart"
-                                         [configuring]="configuring"
-                                         [article]="article"
-                                         [externalSource]="externalSource"
-                                         [isReturn]="isReturn"
-                                         (startConfiguration)="handleStartConfiguration()"
-                  ></app-product-addtocart>
+                <div class="product-page-block-stock">
+                  <app-product-stock
+                    class="no-padding"
+                    [goodId]="article?.goodId"
+                    (openStockEvent)="openStock()">
+                  </app-product-stock>
                 </div>
-              }
-              <div class="product-page-block-variants">
-                @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
-                  <app-product-related class="no-padding"
-                                       [externalSource]="externalSource"
-                                       [articles]="article?.relatedArticles" [refType]="64"
-                                       [label]="'VARIANTS' | localize"></app-product-related>
-                }
-              </div>
-              <div class="product-page-block-stock">
-                <app-product-stock class="no-padding" [goodId]="article?.goodId" (openStockEvent)="openStock()"></app-product-stock>
-              </div>
-              <div class="product-page-block-delivery">
-                <app-product-delivery class="no-padding" [stockAndDelivery]="stockAndDelivery"></app-product-delivery>
               </div>
             </div>
           </div>
@@ -3154,7 +3205,10 @@ class ProductPageComponent {
         <div class="page-wrapper-content">
           @if (article) {
             <div class="page-wrapper-left">
-              <app-product-info-tabs class="no-padding" [article]="article"></app-product-info-tabs>
+              <app-product-info-tabs
+                class="no-padding"
+                [article]="article">
+              </app-product-info-tabs>
             </div>
           }
           <div class="page-wrapper-right">
@@ -3191,23 +3245,22 @@ class ProductPageComponent {
               [mainArticle]="article"
               [articles]="article?.relatedArticles"
               [refType]="1"
-              (closeRelatedPopup)="handlePopUpChange($event)"
-            >
+              (closeRelatedPopup)="handlePopUpChange($event)">
             </co-product-dialog>
           </div>
         }
       </div>
 
-      <co-preset-dialog
-        *ngIf="showPresetDialog"
-        [type]="presetDialogType"
-        [presetId]="configPresetId"
-        (cancelSavePreset)="handleCancelSavePreset($event)"
-        (overwritePreset)="handleOverwritePreset($event)"
-      >
-      </co-preset-dialog>
+      @if (presetDialogType) {
+        <co-preset-dialog
+          [type]="presetDialogType"
+          [presetId]="configPresetId"
+          (cancelSavePreset)="handleCancelSavePreset($event)"
+          (overwritePreset)="handleOverwritePreset($event)">
+        </co-preset-dialog>
+      }
     }
-  `, isInline: true, styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child,.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:65%;flex-direction:column}.page-wrapper-right{display:flex;width:35%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.threed-selections ::ng-deep .co-summary-line{cursor:pointer}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:none}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional,.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.preset-container{display:flex;justify-content:right}.preset-container .save-preset-button{cursor:pointer;width:100%;max-width:205px;box-sizing:border-box}.preset-container .save-preset-button:hover{background:#74b77f}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74b77f}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:all .2s ease}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:700;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:700;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left,.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProductSelectorTypeComponent, selector: "app-product-selector-type", inputs: ["show2D", "show3D", "showRenderCarousel", "currentType"], outputs: ["onIconClick", "currentTypeChange"] }, { kind: "component", type: ImageCarouselComponent, selector: "app-image-carousel", inputs: ["showRefresh", "images"] }, { kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ProductDescriptionComponent, selector: "app-product-description", inputs: ["article"] }, { kind: "component", type: ProductAdditionalDescriptionComponent, selector: "app-product-additional-description", inputs: ["article"] }, { kind: "component", type: ProductPriceComponent, selector: "app-product-price", inputs: ["pricing", "configurable"] }, { kind: "component", type: ProductAddtocartComponent, selector: "app-product-addtocart", inputs: ["article", "externalSource", "createFrozenArticle", "configurable", "configuring", "showAddToCart", "isReturn", "fullscreen", "quantity"], outputs: ["startConfiguration", "addToCartClick", "addToQuoteClick", "showRelatedPopup"] }, { kind: "component", type: ProductRelatedComponent, selector: "app-product-related", inputs: ["refType", "label", "externalSource", "isSmallModus", "createFrozenArticle", "articles"] }, { kind: "component", type: ProductStockComponent, selector: "app-product-stock", inputs: ["goodId"], outputs: ["openStockEvent"] }, { kind: "component", type: ProductDeliveryComponent, selector: "app-product-delivery", inputs: ["stockAndDelivery"] }, { kind: "component", type: ProductInfoTabsComponent, selector: "app-product-info-tabs", inputs: ["article"] }, { kind: "component", type: ProductDialogComponent, selector: "co-product-dialog", inputs: ["refType", "mainArticle", "articles"], outputs: ["closeRelatedPopup"] }, { kind: "component", type: RenderCarouselComponent, selector: "app-render-carousel", inputs: ["showRefresh", "article"] }, { kind: "component", type: i6.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "component", type: PresetDialogComponent, selector: "co-preset-dialog", inputs: ["type", "presetId"], outputs: ["cancelSavePreset", "overwritePreset"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+  `, isInline: true, styles: [".co-product-page .page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 15px;margin:0 auto}.co-product-page .page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.co-product-page .page-wrapper-content:first-child,.co-product-page .page-wrapper-content.no-top-margin{margin-top:0}.co-product-page .page-wrapper-left{display:flex;width:65%;flex-direction:column}.co-product-page .page-wrapper-right{display:flex;width:35%;flex-direction:column}.co-product-page .page-wrapper-right .product-page-scroll-container{max-height:100vh;overflow-y:scroll}.co-product-page .page-wrapper-full{display:flex;width:100%;flex-direction:column}.co-product-page .page-wrapper-66{display:flex;width:60%;flex-direction:column}.co-product-page .page-wrapper-33{display:flex;width:40%;flex-direction:column}.co-product-page .product-action-buttons{position:relative}.co-product-page .product-action-buttons.full-screen{z-index:10}.co-product-page .product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.co-product-page .product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.co-product-page .product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.co-product-page .product-page-block-image .co-configurator-scene{width:100%;height:300px;display:block;position:relative}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container{position:relative;height:650px;width:100%}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container .threedviewer{min-height:0;min-width:0;width:auto;height:auto}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container .threedviewer canvas{width:100%;height:100%}.co-product-page .product-page-block-image .co-configurator-scene.hide-3d-scene{visibility:hidden;overflow:hidden;height:0}.co-product-page .product-page-block-image .co-configurator-scene.show-3d-scene{min-height:650px;position:relative}.co-product-page .product-page-block-image .co-configurator-scene.show-full-screen{position:fixed;inset:0;width:100%;height:100%}.co-product-page .product-page-block-image .co-configurator-scene.show-full-screen .configurator-bundle-container{height:100%}.co-product-page .product-page-block-image .co-configurator-scene canvas{height:100%}.co-product-page .product-page-block-image app-image-carousel.show-animated,.co-product-page .product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.co-product-page .product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.co-product-page .product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.co-product-page .product-page-block-description{grid-column:7/12;grid-row:1/1}.co-product-page .product-page-block-additional,.co-product-page .product-page-block-additional-description{width:100%}.co-product-page .product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.co-product-page .product-page-block-price.full{grid-column:1/5}.co-product-page .product-page-block-price .hide-configurator{display:none}.co-product-page .product-page-block-price .show-configurator{display:block}.co-product-page .product-page-block-price .show-configurator .co-threedselector{position:relative}.co-product-page .product-page-block-price .show-configurator .co-threedselector .co-lite-selector.floating co-selections-summary{position:relative}.co-product-page .product-page-block-price .show-configurator .co-threedselector .co-lite-selector:not(.custom-dimensions).floating co-selections-summary{top:auto;background:none}.co-product-page .product-page-block-price .show-configurator .co-threedselector .co-selections-summary .selections-content{gap:10px;box-sizing:border-box;padding:10px}.co-product-page .product-page-block-price .show-configurator .co-threedselector .co-product-configurator .product-configurator-container{position:relative;width:auto;top:auto;right:auto;padding-left:30px;padding-right:0;height:auto;max-height:100%}.co-product-page .product-page-block-price .show-configurator .co-threedselector .co-product-configurator .product-configurator-container .product-configurator-details{max-height:100%}.co-product-page .preset-container{display:flex;justify-content:right}.co-product-page .preset-container .save-preset-button{cursor:pointer;width:100%;max-width:205px;box-sizing:border-box}.co-product-page .preset-container .save-preset-button:hover{background:#74b77f}.co-product-page .product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74b77f}.co-product-page .addtocart-reserved{grid-column:1/3;grid-row:3/3}.co-product-page .product-page-block-stock{grid-column:1/3;grid-row:4/4}.co-product-page .product-page-block-delivery{grid-column:3/5;grid-row:4/4}.co-product-page ::ng-deep co-scroll-container{overflow:hidden;position:relative}.co-product-page ::ng-deep co-scroll-container .content-wrapper{padding:0}.co-product-page ::ng-deep co-scroll-container .scroll-layer{left:0;top:0}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.co-product-page .product-page-block-variants{margin:20px 0 0}.co-product-page .product-page-block-variants app-product-related>div{display:flex;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.co-product-page .product-page-block-variants app-product-related>div app-header h3{font-size:14px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container{width:320px;max-width:100%;padding:0 16px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller{width:26px;height:26px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.left-scroll{left:5px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.right-scroll{right:5px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.co-product-page .product-page-block-variants co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.co-product-page .product-page-block-variants co-tile.small:hover{border-color:#22313c}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper{padding:0}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .tile-top{display:none}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .tile-bottom{display:none}.co-product-page .product-page-block-variants co-tile.small .tile-extra-bottom{display:none}.co-product-page .product-page-block-alternatives .co-scroll-container,.co-product-page .product-page-block-alternatives .co-scroll-container .content-wrapper{width:auto}.co-product-page .product-page-block-alternatives .article-wrapper{margin:0 20px 0 0}.co-product-page .product-page-block-alternatives .article-wrapper:last-child{margin:0}.co-product-page .product-page-block-alternatives .co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.co-product-page .product-page-block-alternatives .co-tile:hover{box-shadow:none;border-color:#f6f5f4}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-wrapper .tile-bottom{margin:0}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image .co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;object-fit:contain;z-index:-1;transition:all .2s ease}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-bottom .co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;background:#2b60a7;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-bottom .co-button .co-icon{width:32px;height:32px;margin:0 2px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main{padding:0 10px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:700;margin:0 0 2px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:700;color:#2b60a7}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;background:#2b60a7;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .co-button .co-icon{width:32px;height:32px;margin:0 2px}.co-product-page .product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.co-product-page .product-page-block-properties{grid-column:7/10;grid-row:3/3}.co-product-page .product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.co-product-page .product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.co-product-page .product-page-block-documents{grid-column:2/6;grid-row:5/5}.co-product-page .product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.co-product-page .default-padding{padding-top:20px;padding-bottom:20px}.co-product-page .m-padding{padding-top:15px;padding-bottom:15px}.co-product-page .s-padding{padding-top:5px;padding-bottom:5px}.co-product-page .page-wrapper{max-width:650px}.co-product-page .page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.co-product-page .page-wrapper .page-wrapper-content .page-wrapper-left,.co-product-page .page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.co-product-page .product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){.co-product-page [class*=-padding]{padding-left:0!important;padding-right:0!important}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"], dependencies: [{ kind: "component", type: ProductSelectorTypeComponent, selector: "app-product-selector-type", inputs: ["show2D", "show3D", "showRenderCarousel", "currentType"], outputs: ["onIconClick", "currentTypeChange"] }, { kind: "component", type: ImageCarouselComponent, selector: "app-image-carousel", inputs: ["showRefresh", "images"] }, { kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ProductDescriptionComponent, selector: "app-product-description", inputs: ["article"] }, { kind: "component", type: ProductAdditionalDescriptionComponent, selector: "app-product-additional-description", inputs: ["article"] }, { kind: "component", type: ProductPriceComponent, selector: "app-product-price", inputs: ["pricing", "configurable"] }, { kind: "component", type: ProductAddtocartComponent, selector: "app-product-addtocart", inputs: ["article", "externalSource", "createFrozenArticle", "configurable", "configuring", "showAddToCart", "isReturn", "fullscreen", "quantity"], outputs: ["startConfiguration", "addToCartClick", "addToQuoteClick", "showRelatedPopup"] }, { kind: "component", type: ProductRelatedComponent, selector: "app-product-related", inputs: ["refType", "label", "externalSource", "isSmallModus", "createFrozenArticle", "articles"] }, { kind: "component", type: ProductStockComponent, selector: "app-product-stock", inputs: ["goodId"], outputs: ["openStockEvent"] }, { kind: "component", type: ProductInfoTabsComponent, selector: "app-product-info-tabs", inputs: ["article"] }, { kind: "component", type: ProductDialogComponent, selector: "co-product-dialog", inputs: ["refType", "mainArticle", "articles"], outputs: ["closeRelatedPopup"] }, { kind: "component", type: RenderCarouselComponent, selector: "app-render-carousel", inputs: ["showRefresh", "article"] }, { kind: "component", type: i6.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "component", type: PresetDialogComponent, selector: "co-preset-dialog", inputs: ["type", "presetId"], outputs: ["cancelSavePreset", "overwritePreset"] }, { kind: "component", type: i5.ConfiguratorComponent, selector: "co-configurator", inputs: ["showLoader", "showProgressBar", "showErrorMessages", "outputErrorMessages", "canCloseConfigurator", "animateSlideout", "showHeaderInformation"], outputs: ["buildResult", "isLoading", "updateProgressBar", "errorMessages", "showChange"] }, { kind: "component", type: i5.ConfiguratorSceneComponent, selector: "co-configurator-scene" }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('toggleFullScreen', [
                 state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
                 state('halfscreen', style({ 'position': '*', 'top': '*', 'left': '*', 'width': '*', 'height': '*' })),
@@ -3238,7 +3291,7 @@ class ProductPageComponent {
                 state('*', style({ 'opacity': '1' })),
                 transition('void => *', animate('200ms ease-in-out'))
             ])
-        ] }); }
+        ], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductPageComponent, decorators: [{
             type: Component,
@@ -3249,12 +3302,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           <div class="page-wrapper-left">
             <div class="product-image-container">
               <div class="product-page-block-selector-type">
-                <app-product-selector-type class="default-padding"
-                                           [(currentType)]="currentView"
-                                           [show2D]="configurable"
-                                           [show3D]="threeD"
-                ></app-product-selector-type>
+                <app-product-selector-type
+                  class="default-padding"
+                  [(currentType)]="currentView"
+                  [show2D]="configurable"
+                  [show3D]="threeD">
+                </app-product-selector-type>
               </div>
+
               <div class="product-page-block-image default-padding" [class.full]="fullScreen">
                 @if (!enableRenderCarousel) {
                   <app-image-carousel
@@ -3269,120 +3324,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     [article]="article">
                   </app-render-carousel>
                 }
-                @if (settingsLoaded && this.configurable) {
-                  <threed-configurator
-                    #configurator
-                    class="threed-configurator"
-                    [class.configurator-full-screen]="fullScreen"
-                    [@toggleVisibilityByState]="show3D ? 'show' : 'hide'"
-                    [@toggleFullScreen]="fullScreen ? 'fullscreen' : 'halfscreen'">
-                  </threed-configurator>
+                @if (settingsLoaded) {
+                  <co-configurator-scene
+                    [class.show-full-screen]="fullScreen"
+                    [class.hide-3d-scene]="!show3D"
+                    [class.show-3d-scene]="show3D">
+                  </co-configurator-scene>
                 }
                 @if (show3D) {
-                  <co-icon #fullscreenbutton class="fullscreen-button"
-                           [@toggleTopLeft]="fullScreen ? 'fullscreen' : 'halfscreen'"
-                           [iconData]="iconCache.getIcon(fullScreenIcon)"
-                           (click)="showFullScreen()"></co-icon>
+                  <co-icon
+                    #fullscreenbutton
+                    class="fullscreen-button"
+                    [@toggleTopLeft]="fullScreen ? 'fullscreen' : 'halfscreen'"
+                    [iconData]="iconCache.getIcon(fullScreenIcon)"
+                    (click)="showFullScreen()">
+                  </co-icon>
                 }
                 @if (show3D && fullScreen) {
-                  <co-icon class="threed-watermark"
-                           [iconData]="iconCache.getIcon(icon.Logo)"></co-icon>
+                  <co-icon
+                    class="threed-watermark"
+                    [iconData]="iconCache.getIcon(icon.Logo)">
+                  </co-icon>
                 }
               </div>
             </div>
           </div>
           <div class="page-wrapper-right">
-            <div class="product-page-block-description">
-              <app-product-description class="default-padding" [article]="article"></app-product-description>
-            </div>
-            <div class="product-page-block-additional">
-              <div class="product-page-block-additional-description">
-                <app-product-additional-description class="default-padding" [article]="article"></app-product-additional-description>
+            <div class="product-page-scroll-container">
+              <div class="product-page-block-description">
+                <app-product-description
+                  class="default-padding"
+                  [article]="article">
+                </app-product-description>
               </div>
-              <div class="product-page-block-price" [class.full]="configuring">
-                @if (configuring && this.settingsService.settings.options.showSaveAsPresetButton) {
-                  <div class="preset-container">
-                    <co-button
-                      class="save-preset-button"
-                      [iconData]="iconCache.getIcon(icon.SaveDisk)"
-                      [label]="'PRESET_SAVE_AS' | localize"
-                      (onClick)="handleSavePreset()"
-                    ></co-button>
-                  </div>
-                }
+              <div class="product-page-block-additional">
+                <div class="product-page-block-additional-description">
+                  <app-product-additional-description
+                    class="default-padding"
+                    [article]="article">
+                  </app-product-additional-description>
+                </div>
+                <div class="product-page-block-price" [class.full]="configuring">
+                  @if (configuring && this.settingsService.settings.options.showSaveAsPresetButton) {
+                    <div class="preset-container">
+                      <co-button
+                        class="save-preset-button"
+                        [iconData]="iconCache.getIcon(icon.SaveDisk)"
+                        [label]="'PRESET_SAVE_AS' | localize"
+                        (onClick)="handleSavePreset()">
+                      </co-button>
+                    </div>
+                  }
+                  @if (!configuring) {
+                    <app-product-price
+                      class="s-padding"
+                      [pricing]="article?.pricing"
+                      [configurable]="configurable">
+                    </app-product-price>
+                  }
+
+                  @if (settingsLoaded) {
+                    <co-configurator
+                      [class.hide-configurator]="!configuring"
+                      [class.show-configurator]="configuring"
+                      [showLoader]="true"
+                      [animateSlideout]="false"
+                      [showHeaderInformation]="false"
+                      [canCloseConfigurator]="false"
+                      (buildResult)="handleBuildFinished($event)">
+                    </co-configurator>
+                  }
+                </div>
                 @if (!configuring) {
-                  <app-product-price class="s-padding"
-                                     [pricing]="article?.pricing"
-                                     [configurable]="configurable"
-                  ></app-product-price>
+                  <div class="product-page-block-addtocart no-padding product-action-buttons"
+                       [@toggleTopRight]="fullScreen ? 'fullscreen' : 'halfscreen'">
+                    <app-product-addtocart
+                      [configurable]="configurable"
+                      [createFrozenArticle]="createFrozenArticle"
+                      [configuring]="configuring"
+                      [showAddToCart]="showAddToCart"
+                      [article]="article"
+                      [externalSource]="externalSource"
+                      [isReturn]="isReturn"
+                      (startConfiguration)="handleStartConfiguration()"
+                      (showRelatedPopup)="handlePopUpChange($event)">
+                    </app-product-addtocart>
+                  </div>
                 }
-
-                @if (settingsLoaded) {
-                  <threed-selections #selections class="threed-selections"
-                                     [class.show-selections]="configuring"
-                                     [@toggleFullScreenRight]="fullScreen ? 'fullscreen' : 'halfscreen'"
-                                     [class.default-padding]="!fullScreen"
-                                     [class.show-full-screen]="fullScreen"
-                                     [class.mini-scrollbar]="fullScreen"
-                                     [sku]="sku"
-                                     [settings]="settings"
-                                     (onUserActionFromThreeD)="configuring = true"
-                                     (instanceSet)="setInstance($event)"
-                                     (onImageReceived)="appEventService.onImageReceived.next($event)"
-                                     (onRenderStarted)="appEventService.onRenderStarted.next()"
-                                     (onDraftRenderImageReceived)="appEventService.onDraftRenderImageReceived.next($event)"
-                                     (onArticleReceived)="appEventService.onArticleReceived.next($event.detail)"
-                                     (onSelectionsReceived)="appEventService.onSelectionsReceived.next($event.detail)"
-                                     (onArticleInfoReceived)="appEventService.onArticleInfoReceived.next($event.detail)"
-                                     (onAnswersAvailable)="appEventService.onAnswersAvailable.next($event.detail)"
-                                     (onReadyToRender)="appEventService.onReadyToRender.next($event.detail)"
-                                     (onRenderImageReceived)="appEventService.onRenderImageReceived.next($event.detail)"
-                  ></threed-selections>
+                @if (configuring) {
+                  <div class="addtocart-reserved product-action-buttons" [class.full-screen]="fullScreen">
+                    <app-product-addtocart
+                      class="default-padding"
+                      [configurable]="false"
+                      [fullscreen]="fullScreen"
+                      [showAddToCart]="showAddToCart"
+                      [configuring]="configuring"
+                      [article]="article"
+                      [externalSource]="externalSource"
+                      [isReturn]="isReturn"
+                      (startConfiguration)="handleStartConfiguration()">
+                    </app-product-addtocart>
+                  </div>
                 }
-              </div>
-              @if (!configuring) {
-                <div class="product-page-block-addtocart no-padding product-action-buttons"
-                     [@toggleTopRight]="fullScreen ? 'fullscreen' : 'halfscreen'">
-                  <app-product-addtocart
-                    [configurable]="configurable"
-                    [createFrozenArticle]="createFrozenArticle"
-                    [configuring]="configuring"
-                    [showAddToCart]="showAddToCart"
-                    [article]="article"
-                    [externalSource]="externalSource"
-                    [isReturn]="isReturn"
-                    (startConfiguration)="handleStartConfiguration()"
-                    (showRelatedPopup)="handlePopUpChange($event)"
-                  ></app-product-addtocart>
+                <div class="product-page-block-variants">
+                  @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
+                    <app-product-related
+                      class="no-padding"
+                      [externalSource]="externalSource"
+                      [articles]="article?.relatedArticles" [refType]="64"
+                      [label]="'VARIANTS' | localize">
+                    </app-product-related>
+                  }
                 </div>
-              }
-              @if (configuring) {
-                <div class="addtocart-reserved product-action-buttons" [class.full-screen]="fullScreen">
-                  <app-product-addtocart class="default-padding"
-                                         [configurable]="false"
-                                         [fullscreen]="fullScreen"
-                                         [showAddToCart]="showAddToCart"
-                                         [configuring]="configuring"
-                                         [article]="article"
-                                         [externalSource]="externalSource"
-                                         [isReturn]="isReturn"
-                                         (startConfiguration)="handleStartConfiguration()"
-                  ></app-product-addtocart>
+                <div class="product-page-block-stock">
+                  <app-product-stock
+                    class="no-padding"
+                    [goodId]="article?.goodId"
+                    (openStockEvent)="openStock()">
+                  </app-product-stock>
                 </div>
-              }
-              <div class="product-page-block-variants">
-                @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
-                  <app-product-related class="no-padding"
-                                       [externalSource]="externalSource"
-                                       [articles]="article?.relatedArticles" [refType]="64"
-                                       [label]="'VARIANTS' | localize"></app-product-related>
-                }
-              </div>
-              <div class="product-page-block-stock">
-                <app-product-stock class="no-padding" [goodId]="article?.goodId" (openStockEvent)="openStock()"></app-product-stock>
-              </div>
-              <div class="product-page-block-delivery">
-                <app-product-delivery class="no-padding" [stockAndDelivery]="stockAndDelivery"></app-product-delivery>
               </div>
             </div>
           </div>
@@ -3390,7 +3450,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         <div class="page-wrapper-content">
           @if (article) {
             <div class="page-wrapper-left">
-              <app-product-info-tabs class="no-padding" [article]="article"></app-product-info-tabs>
+              <app-product-info-tabs
+                class="no-padding"
+                [article]="article">
+              </app-product-info-tabs>
             </div>
           }
           <div class="page-wrapper-right">
@@ -3427,23 +3490,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               [mainArticle]="article"
               [articles]="article?.relatedArticles"
               [refType]="1"
-              (closeRelatedPopup)="handlePopUpChange($event)"
-            >
+              (closeRelatedPopup)="handlePopUpChange($event)">
             </co-product-dialog>
           </div>
         }
       </div>
 
-      <co-preset-dialog
-        *ngIf="showPresetDialog"
-        [type]="presetDialogType"
-        [presetId]="configPresetId"
-        (cancelSavePreset)="handleCancelSavePreset($event)"
-        (overwritePreset)="handleOverwritePreset($event)"
-      >
-      </co-preset-dialog>
+      @if (presetDialogType) {
+        <co-preset-dialog
+          [type]="presetDialogType"
+          [presetId]="configPresetId"
+          (cancelSavePreset)="handleCancelSavePreset($event)"
+          (overwritePreset)="handleOverwritePreset($event)">
+        </co-preset-dialog>
+      }
     }
-  `, animations: [
+  `, encapsulation: ViewEncapsulation.None, animations: [
                         trigger('toggleFullScreen', [
                             state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
                             state('halfscreen', style({ 'position': '*', 'top': '*', 'left': '*', 'width': '*', 'height': '*' })),
@@ -3474,13 +3536,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             state('*', style({ 'opacity': '1' })),
                             transition('void => *', animate('200ms ease-in-out'))
                         ])
-                    ], standalone: false, styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child,.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:65%;flex-direction:column}.page-wrapper-right{display:flex;width:35%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.threed-selections ::ng-deep .co-summary-line{cursor:pointer}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:none}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional,.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.preset-container{display:flex;justify-content:right}.preset-container .save-preset-button{cursor:pointer;width:100%;max-width:205px;box-sizing:border-box}.preset-container .save-preset-button:hover{background:#74b77f}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74b77f}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:all .2s ease}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:700;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:700;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left,.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"] }]
-        }], ctorParameters: () => [{ type: ProductConnectorService }, { type: IconCacheService }, { type: ProductSettingsService }, { type: ProductEventService }, { type: i0.ChangeDetectorRef }], propDecorators: { configurator: [{
-                type: ViewChild,
-                args: ['configurator', { read: ElementRef }]
-            }], selections: [{
-                type: ViewChild,
-                args: ['selections', { read: ElementRef }]
+                    ], standalone: false, styles: [".co-product-page .page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 15px;margin:0 auto}.co-product-page .page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.co-product-page .page-wrapper-content:first-child,.co-product-page .page-wrapper-content.no-top-margin{margin-top:0}.co-product-page .page-wrapper-left{display:flex;width:65%;flex-direction:column}.co-product-page .page-wrapper-right{display:flex;width:35%;flex-direction:column}.co-product-page .page-wrapper-right .product-page-scroll-container{max-height:100vh;overflow-y:scroll}.co-product-page .page-wrapper-full{display:flex;width:100%;flex-direction:column}.co-product-page .page-wrapper-66{display:flex;width:60%;flex-direction:column}.co-product-page .page-wrapper-33{display:flex;width:40%;flex-direction:column}.co-product-page .product-action-buttons{position:relative}.co-product-page .product-action-buttons.full-screen{z-index:10}.co-product-page .product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.co-product-page .product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.co-product-page .product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.co-product-page .product-page-block-image .co-configurator-scene{width:100%;height:300px;display:block;position:relative}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container{position:relative;height:650px;width:100%}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container .threedviewer{min-height:0;min-width:0;width:auto;height:auto}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container .threedviewer canvas{width:100%;height:100%}.co-product-page .product-page-block-image .co-configurator-scene.hide-3d-scene{visibility:hidden;overflow:hidden;height:0}.co-product-page .product-page-block-image .co-configurator-scene.show-3d-scene{min-height:650px;position:relative}.co-product-page .product-page-block-image .co-configurator-scene.show-full-screen{position:fixed;inset:0;width:100%;height:100%}.co-product-page .product-page-block-image .co-configurator-scene.show-full-screen .configurator-bundle-container{height:100%}.co-product-page .product-page-block-image .co-configurator-scene canvas{height:100%}.co-product-page .product-page-block-image app-image-carousel.show-animated,.co-product-page .product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.co-product-page .product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.co-product-page .product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.co-product-page .product-page-block-description{grid-column:7/12;grid-row:1/1}.co-product-page .product-page-block-additional,.co-product-page .product-page-block-additional-description{width:100%}.co-product-page .product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.co-product-page .product-page-block-price.full{grid-column:1/5}.co-product-page .product-page-block-price .hide-configurator{display:none}.co-product-page .product-page-block-price .show-configurator{display:block}.co-product-page .product-page-block-price .show-configurator .co-threedselector{position:relative}.co-product-page .product-page-block-price .show-configurator .co-threedselector .co-lite-selector.floating co-selections-summary{position:relative}.co-product-page .product-page-block-price .show-configurator .co-threedselector .co-lite-selector:not(.custom-dimensions).floating co-selections-summary{top:auto;background:none}.co-product-page .product-page-block-price .show-configurator .co-threedselector .co-selections-summary .selections-content{gap:10px;box-sizing:border-box;padding:10px}.co-product-page .product-page-block-price .show-configurator .co-threedselector .co-product-configurator .product-configurator-container{position:relative;width:auto;top:auto;right:auto;padding-left:30px;padding-right:0;height:auto;max-height:100%}.co-product-page .product-page-block-price .show-configurator .co-threedselector .co-product-configurator .product-configurator-container .product-configurator-details{max-height:100%}.co-product-page .preset-container{display:flex;justify-content:right}.co-product-page .preset-container .save-preset-button{cursor:pointer;width:100%;max-width:205px;box-sizing:border-box}.co-product-page .preset-container .save-preset-button:hover{background:#74b77f}.co-product-page .product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74b77f}.co-product-page .addtocart-reserved{grid-column:1/3;grid-row:3/3}.co-product-page .product-page-block-stock{grid-column:1/3;grid-row:4/4}.co-product-page .product-page-block-delivery{grid-column:3/5;grid-row:4/4}.co-product-page ::ng-deep co-scroll-container{overflow:hidden;position:relative}.co-product-page ::ng-deep co-scroll-container .content-wrapper{padding:0}.co-product-page ::ng-deep co-scroll-container .scroll-layer{left:0;top:0}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.co-product-page .product-page-block-variants{margin:20px 0 0}.co-product-page .product-page-block-variants app-product-related>div{display:flex;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.co-product-page .product-page-block-variants app-product-related>div app-header h3{font-size:14px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container{width:320px;max-width:100%;padding:0 16px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller{width:26px;height:26px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.left-scroll{left:5px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.right-scroll{right:5px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.co-product-page .product-page-block-variants co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.co-product-page .product-page-block-variants co-tile.small:hover{border-color:#22313c}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper{padding:0}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .tile-top{display:none}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .tile-bottom{display:none}.co-product-page .product-page-block-variants co-tile.small .tile-extra-bottom{display:none}.co-product-page .product-page-block-alternatives .co-scroll-container,.co-product-page .product-page-block-alternatives .co-scroll-container .content-wrapper{width:auto}.co-product-page .product-page-block-alternatives .article-wrapper{margin:0 20px 0 0}.co-product-page .product-page-block-alternatives .article-wrapper:last-child{margin:0}.co-product-page .product-page-block-alternatives .co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.co-product-page .product-page-block-alternatives .co-tile:hover{box-shadow:none;border-color:#f6f5f4}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-wrapper .tile-bottom{margin:0}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image .co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;object-fit:contain;z-index:-1;transition:all .2s ease}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-bottom .co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;background:#2b60a7;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-bottom .co-button .co-icon{width:32px;height:32px;margin:0 2px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main{padding:0 10px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:700;margin:0 0 2px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:700;color:#2b60a7}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;background:#2b60a7;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .co-button .co-icon{width:32px;height:32px;margin:0 2px}.co-product-page .product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.co-product-page .product-page-block-properties{grid-column:7/10;grid-row:3/3}.co-product-page .product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.co-product-page .product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.co-product-page .product-page-block-documents{grid-column:2/6;grid-row:5/5}.co-product-page .product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.co-product-page .default-padding{padding-top:20px;padding-bottom:20px}.co-product-page .m-padding{padding-top:15px;padding-bottom:15px}.co-product-page .s-padding{padding-top:5px;padding-bottom:5px}.co-product-page .page-wrapper{max-width:650px}.co-product-page .page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.co-product-page .page-wrapper .page-wrapper-content .page-wrapper-left,.co-product-page .page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.co-product-page .product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){.co-product-page [class*=-padding]{padding-left:0!important;padding-right:0!important}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"] }]
+        }], ctorParameters: () => [{ type: IconCacheService }, { type: ProductSettingsService }, { type: ProductEventService }, { type: i0.ChangeDetectorRef }, { type: ProductConnectorService }, { type: i5.ConfiguringService }, { type: i5.SceneService }], propDecorators: { showClass: [{
+                type: HostBinding,
+                args: ['class.co-product-page']
             }], fullscreenbutton: [{
                 type: ViewChild,
                 args: ['fullscreenbutton', { read: ElementRef }]
@@ -3549,11 +3608,13 @@ class IoneProductComponent {
         // this.sku = '104';
         // this.sku = "70000107";
         // this.sku = "grover";
-        // this.sku = "1000610952";
+        this.sku = "1000610952"; // bank istanbul jillis
         // this.sku = "4387";
         // this.sku = "1000612725";
-        // this.sku = '1000610952'; // elix = 1000234793
-        this.sku = '1000234793';
+        // this.sku = '22000';
+        // elix = 1000234793
+        // this.sku = 'A30';
+        // this.sku = '22000';
     }
     async ngOnInit() {
         this._subs.push(this._appEventService.onAddToCart.subscribe((data) => {
@@ -3735,10 +3796,14 @@ class ImageCarouselModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselModule, declarations: [ImageCarouselComponent], imports: [CommonModule,
             LoaderModule,
-            ScrollContainerModule], exports: [ImageCarouselComponent] }); }
+            ScrollContainerModule,
+            CdkConnectedOverlay,
+            CdkOverlayOrigin,
+            IconModule], exports: [ImageCarouselComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselModule, imports: [CommonModule,
             LoaderModule,
-            ScrollContainerModule] }); }
+            ScrollContainerModule,
+            IconModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselModule, decorators: [{
             type: NgModule,
@@ -3746,7 +3811,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     imports: [
                         CommonModule,
                         LoaderModule,
-                        ScrollContainerModule
+                        ScrollContainerModule,
+                        CdkConnectedOverlay,
+                        CdkOverlayOrigin,
+                        IconModule
                     ],
                     declarations: [
                         ImageCarouselComponent
@@ -3930,6 +3998,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+class ProductDeliveryComponent {
+    set stockAndDelivery(value) {
+        if (value) {
+            this.deliveryDescription = value.deliveryDescription;
+            if (this.deliveryDescription.length > 0 && this.deliveryDescription[0] === ' ') {
+                this.deliveryDescription = this._localizePipe.transform('ASK_FOR_INFORMATION');
+            }
+        }
+    }
+    constructor(_localizePipe, _iOne, _iconCache) {
+        this._localizePipe = _localizePipe;
+        this._iOne = _iOne;
+        this._iconCache = _iconCache;
+        this.icon = IconEnum;
+        this.iconData = this._iconCache.getIcon(this.icon.Truck);
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDeliveryComponent, deps: [{ token: LocalizePipe }, { token: ProductConnectorService }, { token: IconCacheService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ProductDeliveryComponent, isStandalone: false, selector: "app-product-delivery", inputs: { stockAndDelivery: "stockAndDelivery" }, ngImport: i0, template: `
+    <!--<app-header [label]="'DELIVERY_TIME_PERIOD' | localize"></app-header>-->
+    <div class="product-delivery-wrapper">
+      <co-icon class="delivery-icon" [iconData]="iconData"></co-icon>
+      <div class="product-delivery-fields">
+        <div class="pp-default-label" [textContent]="'DELIVERY_TIME_PERIOD' | localize"></div>
+        <div class="pp-default-description" [textContent]="deliveryDescription | date:'dd MMMM yyyy'"></div>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.product-delivery-wrapper{display:flex;flex-direction:row;align-items:center;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:40px;height:37px}.product-delivery-wrapper .product-delivery-fields{display:flex;flex-direction:column}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:14px;margin:0}@media screen and (max-width: 400px){.product-delivery-wrapper{padding:15px 0 15px 10px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:32px;height:28px}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:13px}}\n"], dependencies: [{ kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i5$1.DatePipe, name: "date" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDeliveryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-product-delivery', template: `
+    <!--<app-header [label]="'DELIVERY_TIME_PERIOD' | localize"></app-header>-->
+    <div class="product-delivery-wrapper">
+      <co-icon class="delivery-icon" [iconData]="iconData"></co-icon>
+      <div class="product-delivery-fields">
+        <div class="pp-default-label" [textContent]="'DELIVERY_TIME_PERIOD' | localize"></div>
+        <div class="pp-default-description" [textContent]="deliveryDescription | date:'dd MMMM yyyy'"></div>
+      </div>
+    </div>
+  `, standalone: false, styles: [":host{display:block}.product-delivery-wrapper{display:flex;flex-direction:row;align-items:center;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:40px;height:37px}.product-delivery-wrapper .product-delivery-fields{display:flex;flex-direction:column}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:14px;margin:0}@media screen and (max-width: 400px){.product-delivery-wrapper{padding:15px 0 15px 10px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:32px;height:28px}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:13px}}\n"] }]
+        }], ctorParameters: () => [{ type: LocalizePipe }, { type: ProductConnectorService }, { type: IconCacheService }], propDecorators: { stockAndDelivery: [{
+                type: Input
+            }] } });
+
 class ProductDeliveryModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDeliveryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ProductDeliveryModule, declarations: [ProductDeliveryComponent], imports: [CommonModule,
@@ -4204,7 +4318,9 @@ class ProductPageModule {
             LoaderModule,
             RenderCarouselModule,
             ButtonModule,
-            PresetDialogModule], exports: [ProductPageComponent] }); }
+            PresetDialogModule,
+            ConfiguratorModule,
+            ConfiguratorSceneModule], exports: [ProductPageComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductPageModule, imports: [CommonModule,
             ProductSelectorTypeModule,
             ImageCarouselModule,
@@ -4222,7 +4338,9 @@ class ProductPageModule {
             LoaderModule,
             RenderCarouselModule,
             ButtonModule,
-            PresetDialogModule] }); }
+            PresetDialogModule,
+            ConfiguratorModule,
+            ConfiguratorSceneModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductPageModule, decorators: [{
             type: NgModule,
@@ -4245,7 +4363,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         LoaderModule,
                         RenderCarouselModule,
                         ButtonModule,
-                        PresetDialogModule
+                        PresetDialogModule,
+                        ConfiguratorModule,
+                        ConfiguratorSceneModule
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     declarations: [