@colijnit/product 256.1.4 → 256.1.6

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

@@ -1,21 +1,22 @@
-import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
 import { CoDocument } from '@colijnit/mainapi/build/model/co-document';
 import { ProductConnectorService } from '../../service/product-connector.service';
 import { ProductEventService } from '../../service/product-event.service';
-import { IconEnum } from '../../enum/icon.enum';
-import { IconCacheService } from '../../service/icon-cache.service';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
-export declare class ImageCarouselComponent implements OnInit, OnDestroy {
+export declare class ImageViewModel {
+    image: CoDocument | string;
+    source: SafeUrl;
+    originalSource: string;
+}
+export declare class ImageCarouselComponent implements OnDestroy {
     private _ione;
     private _appEventService;
     private _changeDetector;
     private _domSanitizer;
-    iconCache: IconCacheService;
-    readonly icons: typeof IconEnum;
-    showLoader: boolean;
     carousel: ElementRef;
     showRefresh: boolean;
-    set images(value: CoDocument[]);
+    set images(value: (CoDocument | string)[]);
+    get images(): (CoDocument | string)[];
     handleWindowResize(): void;
     gotoNextSlide(): void;
     gotoPrevSlide(): void;
@@ -23,18 +24,20 @@ export declare class ImageCarouselComponent implements OnInit, OnDestroy {
     get currentIndex(): number;
     set currentIndex(value: number);
     resizing: boolean;
-    get images(): CoDocument[];
+    imageViewModels: ImageViewModel[];
+    showLoader: boolean;
     private _resizeTimer;
     private _currentIndex;
     private _images;
     private _subs;
-    constructor(_ione: ProductConnectorService, _appEventService: ProductEventService, _changeDetector: ChangeDetectorRef, _domSanitizer: DomSanitizer, iconCache: IconCacheService);
-    ngOnInit(): void;
+    private _resizeCanvasHeight;
+    constructor(_ione: ProductConnectorService, _appEventService: ProductEventService, _changeDetector: ChangeDetectorRef, _domSanitizer: DomSanitizer);
     ngOnDestroy(): void;
     handleThumbClick(index: number): void;
     onForceRenderImage(): void;
-    getImageSrc(image: CoDocument | CustomEvent): SafeUrl;
+    handleShowImage(imageViewModel: ImageViewModel): void;
     private _filterValidImages;
-    private _loadImages;
+    private _loadAndRescaleImages;
+    private _resizeAndSanitizeSource;
     private _scrollCarouselToIndex;
 }

package/app/components/product-external-source/product-external-source.component.d.ts

@@ -7,6 +7,7 @@ import { ProductEventService } from '../../service/product-event.service';
 import { CatalogDefinition } from '@colijnit/articleapi/build/model/catalog-definition.bo';
 import { ExternalSourceArticleAddInterface } from '@colijnit/articleapi/build/interface/external-source-article-add.interface';
 import { ExternalCatalogStartupInfo } from '@colijnit/articleapi/build/model/external-catalog-startup-info';
+import { ExternalSourceParameter } from '@colijnit/articleapi/build/model/external-source-parameter.bo';
 export declare class ProductExternalSourceComponent implements OnInit, OnDestroy {
     private _sanitizer;
     private _productConnectorService;
@@ -32,6 +33,7 @@ export declare class ProductExternalSourceComponent implements OnInit, OnDestroy
     externalSettings: any;
     token: string;
     variant: string;
+    urlParams: ExternalSourceParameter[];
     private _externalSource;
     private _externalCatalogStartupInfo;
     private _subs;

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

@@ -1,5 +1,6 @@
 import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { ProductScriptLoaderService } from '../../service/product-script-loader.service';
+import { ExternalSourceParameter } from '@colijnit/articleapi/build/model/external-source-parameter.bo';
 export declare class ProductHdComponent implements OnDestroy {
     private _scriptLoader;
     private _renderer;
@@ -8,6 +9,7 @@ export declare class ProductHdComponent implements OnDestroy {
     get sku(): string;
     token: string;
     variant: string;
+    urlParams: ExternalSourceParameter[];
     configuratorFinished: EventEmitter<string>;
     configurationError: EventEmitter<any>;
     showClass: boolean;
@@ -18,5 +20,6 @@ export declare class ProductHdComponent implements OnDestroy {
     handleConfigurationFinished(event: CustomEvent): void;
     handleError(event: CustomEvent): void;
     private _prepareAttributes;
+    private _prepareConfiguratorUrls;
     private _loadTheScripts;
 }

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

@@ -17,7 +17,7 @@ export declare class ProductEventService {
     onImageReceived: Subject<string>;
     onRenderStarted: Subject<void>;
     onRenderImageReceived: Subject<string>;
-    onDraftRenderImageReceived: Subject<string>;
+    onDraftRenderImageReceived: Subject<CustomEvent>;
     onArticleInfoReceived: Subject<string>;
     onUpdateProductInfoTab: Subject<number>;
     errorMessage: Subject<ValidationMessage[]>;

package/bundles/colijnit-product.umd.js

@@ -31,8 +31,8 @@
         function Version() {
             this.name = "@colijnit/product";
             this.description = "Product detail page project for iOne";
-            this.symVer = "256.1.4";
-            this.publishDate = "22-1-2025 20:45:30";
+            this.symVer = "256.1.6";
+            this.publishDate = "14-3-2025 14:06:38";
         }
         return Version;
     }());
@@ -1738,7 +1738,7 @@
                             animations.transition('void => *', animations.animate('200ms ease-in-out')),
                         ])
                     ],
-                    styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:1400px;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child{margin-top:0}.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:55%;flex-direction:column}.page-wrapper-right{display:flex;width:45%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:1px solid #efefef}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional{width:100%}.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74B77F}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;grid-gap:15px;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:all .2s ease}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:bold;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:bold;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left{width:100%}.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"]
+                    styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:1400px;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child{margin-top:0}.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:55%;flex-direction:column}.page-wrapper-right{display:flex;width:45%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.threed-selections ::ng-deep .co-summary-line{cursor:pointer}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:1px solid #efefef}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional{width:100%}.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74B77F}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;grid-gap:15px;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:all .2s ease}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:bold;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:bold;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left{width:100%}.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"]
                 },] }
     ];
     ProductPageComponent.ctorParameters = function () { return [
@@ -1874,31 +1874,45 @@
                 },] }
     ];
 
+    var ImageViewModel = /** @class */ (function () {
+        function ImageViewModel() {
+        }
+        return ImageViewModel;
+    }());
     var ImageCarouselComponent = /** @class */ (function () {
-        function ImageCarouselComponent(_ione, _appEventService, _changeDetector, _domSanitizer, iconCache) {
+        function ImageCarouselComponent(_ione, _appEventService, _changeDetector, _domSanitizer) {
             var _this = this;
             this._ione = _ione;
             this._appEventService = _appEventService;
             this._changeDetector = _changeDetector;
             this._domSanitizer = _domSanitizer;
-            this.iconCache = iconCache;
-            this.icons = IconEnum;
-            this.showLoader = false;
             this.showRefresh = false;
             this.resizing = false;
+            this.imageViewModels = [];
+            this.showLoader = false;
             this._currentIndex = 0;
             this._images = [];
             this._subs = [];
+            this._resizeCanvasHeight = 500;
             this._subs.push(this._appEventService.onRenderStarted.subscribe(function () {
                 _this.showLoader = true;
-            }), this._appEventService.onDraftRenderImageReceived.subscribe(function (url) {
-                if (_this._images[0] instanceof coDocument.CoDocument) {
-                    _this._images.unshift(url);
-                }
-                else {
-                    _this._images[0] = url;
+                _this._changeDetector.detectChanges();
+                setTimeout(function () {
+                    _this.showLoader = false;
+                    _this._changeDetector.detectChanges();
+                }, 10000);
+            }), this._appEventService.onDraftRenderImageReceived.subscribe(function (event) {
+                if (event && event.detail) {
+                    if (_this._images[0] instanceof coDocument.CoDocument) {
+                        _this._images.unshift(event.detail);
+                    }
+                    else {
+                        _this._images[0] = event.detail;
+                    }
+                    _this._loadAndRescaleImages();
                 }
                 _this.showLoader = false;
+                _this._changeDetector.detectChanges();
             }));
         }
         Object.defineProperty(ImageCarouselComponent.prototype, "images", {
@@ -1908,7 +1922,7 @@
             set: function (value) {
                 if (value && value.length > 0) {
                     this._images = this._filterValidImages(value);
-                    this._loadImages();
+                    this._loadAndRescaleImages();
                     this._changeDetector.detectChanges();
                 }
             },
@@ -1944,8 +1958,6 @@
             enumerable: false,
             configurable: true
         });
-        ImageCarouselComponent.prototype.ngOnInit = function () {
-        };
         ImageCarouselComponent.prototype.ngOnDestroy = function () {
             this.carousel = undefined;
             this._subs.forEach(function (s) { return s.unsubscribe(); });
@@ -1956,20 +1968,16 @@
         ImageCarouselComponent.prototype.onForceRenderImage = function () {
             this._appEventService.onForceRenderImage.next();
         };
-        ImageCarouselComponent.prototype.getImageSrc = function (image) {
-            var source = '';
-            if (image instanceof coDocument.CoDocument) {
-                if (image.filePath) {
-                    source = image.filePath;
-                }
-                else {
-                    source = image.documentBodyAsDataUri;
-                }
-            }
-            else if (image.detail !== undefined) {
-                source = image.detail;
+        ImageCarouselComponent.prototype.handleShowImage = function (imageViewModel) {
+            if (imageViewModel && imageViewModel.originalSource) {
+                var popupWindow = window.open('', 'Image zoom', 'width=600,height=400');
+                // Set the content of the popup window
+                popupWindow.document.write('<html><head><title>Image zoom</title></head><body>');
+                popupWindow.document.write("<img src=" + imageViewModel.originalSource + " alt=\"Image\" style=\"width:100%; height:auto;\">");
+                popupWindow.document.write('</body></html>');
+                // Close the document to render the popup window
+                popupWindow.document.close();
             }
-            return this._domSanitizer.bypassSecurityTrustUrl(source);
         };
         ImageCarouselComponent.prototype._filterValidImages = function (value) {
             if (!value) {
@@ -1977,23 +1985,76 @@
             }
             return value.filter(function (doc) {
                 var pattern = /\.(jpg|jpeg|png|gif|bmp|tiff|webp)$/i;
-                return pattern.test(doc.fileName) || !!doc.filePath;
+                return typeof doc === 'string' || (pattern.test(doc.fileName) || !!doc.filePath);
             });
         };
-        ImageCarouselComponent.prototype._loadImages = function () {
+        ImageCarouselComponent.prototype._loadAndRescaleImages = function () {
             var _this = this;
+            this.imageViewModels.length = 0;
             if (this._images) {
                 this._images.forEach(function (i) {
-                    if (!i.documentBody && !i.filePath) {
-                        _this._ione.getDocumentContent(i.documentId, false).then(function (content) {
-                            if (content) {
-                                i.documentBody = content.documentContent;
-                            }
-                        });
+                    var imageViewModel = new ImageViewModel();
+                    imageViewModel.image = i;
+                    if (typeof i === 'string') { // is a rendered image coming from configurator
+                        _this._resizeAndSanitizeSource(i, imageViewModel);
                     }
+                    else {
+                        if (i.filePath) {
+                            _this._resizeAndSanitizeSource(i.filePath, imageViewModel);
+                        }
+                        else if (i.documentBody) {
+                            _this._resizeAndSanitizeSource(i.documentBodyAsDataUri, imageViewModel);
+                        }
+                        else {
+                            _this._ione.getDocumentContent(i.documentId, false).then(function (content) {
+                                if (content) {
+                                    i.documentBody = content.documentContent;
+                                    _this._resizeAndSanitizeSource(i.documentBodyAsDataUri, imageViewModel);
+                                    _this._changeDetector.detectChanges();
+                                }
+                            });
+                        }
+                    }
+                    _this.imageViewModels.push(imageViewModel);
+                    _this._changeDetector.detectChanges();
                 });
             }
         };
+        ImageCarouselComponent.prototype._resizeAndSanitizeSource = function (source, imageViewModel) {
+            var _this = this;
+            var resizeCanvas = document.createElement('canvas');
+            var resizeCanvasContext = resizeCanvas.getContext('2d');
+            var resizeImage = document.createElement('img');
+            resizeImage.onload = function () { return __awaiter(_this, void 0, void 0, function () {
+                var originalWidth, originalHeight, aspectRatio, newWidth, newHeight, imageWidth, resizedSource;
+                return __generator(this, function (_a) {
+                    resizeCanvasContext.imageSmoothingEnabled = true;
+                    resizeCanvasContext.imageSmoothingQuality = 'high';
+                    originalWidth = resizeImage.width;
+                    originalHeight = resizeImage.height;
+                    aspectRatio = originalWidth / originalHeight;
+                    newWidth = this._resizeCanvasHeight;
+                    newHeight = this._resizeCanvasHeight;
+                    if (originalWidth > originalHeight) {
+                        newHeight = this._resizeCanvasHeight / aspectRatio;
+                    }
+                    else {
+                        newWidth = this._resizeCanvasHeight * aspectRatio;
+                    }
+                    // Set the canvas size to the new width and height
+                    resizeCanvas.width = newWidth;
+                    resizeCanvas.height = newHeight;
+                    imageWidth = this._resizeCanvasHeight * (resizeImage.height / resizeImage.width);
+                    resizeCanvasContext.drawImage(resizeImage, 0, 0, newWidth, newHeight);
+                    resizedSource = resizeCanvas.toDataURL('image/jpeg');
+                    imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
+                    imageViewModel.originalSource = source;
+                    return [2 /*return*/];
+                });
+            }); };
+            // @ts-ignore
+            resizeImage.src = source;
+        };
         ImageCarouselComponent.prototype._scrollCarouselToIndex = function () {
             if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
                 var movePx = this.currentIndex * this.carousel.nativeElement.clientWidth;
@@ -2011,16 +2072,16 @@
     ImageCarouselComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-image-carousel',
-                    template: "\n    <div id=\"product_page_carousel\">\n      <div id=\"product_page_carousel_items\">\n        <co-loader [isShown]=\"showLoader\"></co-loader>\n        <div #carousel class=\"inner-carousel\">\n          <!-- This has been taken out of the for loop to prevent flashing images when updating. -->\n          <div *ngIf=\"images[0]\" class=\"carousel-item\" [id]=\"'slide-0'\" [class.active]=\"isCurrentIndex(0)\">\n            <img [src]=\"getImageSrc(images[0])\">\n          </div>\n          <div *ngFor=\"let image of images.slice(1); let index = index\" class=\"carousel-item\" [id]=\"'slide-' + (index + 1)\" [class.active]=\"isCurrentIndex((index + 1))\">\n            <img [src]=\"getImageSrc(image)\">\n          </div>\n          <div class=\"carousel-scroller-layer\" *ngIf=\"images && images.length > 1\">\n            <div class=\"carousel-item-scroller prev\" (click)=\"gotoPrevSlide()\" *ngIf=\"currentIndex > 0\"></div>\n            <div class=\"carousel-item-scroller next\" (click)=\"gotoNextSlide()\" *ngIf=\"currentIndex < images.length - 1\"></div>\n          </div>\n        </div>\n<!--\n        <co-icon class=\"selector-type-icon refresh-button\" [iconData]=\"iconCache.getIcon(icons.Refresh)\" (click)=\"onForceRenderImage()\" [class.loading]=\"showLoader\" *ngIf=\"showRefresh\"></co-icon>\n-->\n      </div>\n\n      <div id=\"product_page_carousel_thumbs\">\n        <co-scroll-container class=\"scroll-container\" *ngIf=\"images && images.length > 1\">\n          <div *ngFor=\"let image of images; let index = index\" class=\"carousel-thumb\" [class.active]=\"index === currentIndex\">\n            <img [src]=\"getImageSrc(image)\" (click)=\"handleThumbClick(index)\"/>\n          </div>\n        </co-scroll-container>\n      </div>\n    </div>\n  ",
-                    styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
+                    template: "\n      <div id=\"product_page_carousel\">\n          <div id=\"product_page_carousel_items\">\n              <co-loader [isShown]=\"true\" *ngIf=\"showLoader\"></co-loader>\n              <div #carousel class=\"inner-carousel\">\n                  <!-- This has been taken out of the for loop to prevent flashing images when updating. -->\n                  <div *ngIf=\"imageViewModels[0]\" class=\"carousel-item\" [id]=\"'slide-0'\" [class.active]=\"isCurrentIndex(0)\" (click)=\"handleShowImage(imageViewModels[0])\">\n                      <img [src]=\"imageViewModels[0].source\">\n                  </div>\n                  <div *ngFor=\"let imageViewModel of imageViewModels.slice(1); let index = index\" class=\"carousel-item\"\n                       [id]=\"'slide-' + (index + 1)\" [class.active]=\"isCurrentIndex((index + 1))\" (click)=\"handleShowImage(imageViewModel)\">\n                      <img [src]=\"imageViewModel.source\">\n                  </div>\n                  <div class=\"carousel-scroller-layer\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n                      <div class=\"carousel-item-scroller prev\" (click)=\"gotoPrevSlide()\" *ngIf=\"currentIndex > 0\"></div>\n                      <div class=\"carousel-item-scroller next\" (click)=\"gotoNextSlide()\" *ngIf=\"currentIndex < images.length - 1\"></div>\n                  </div>\n              </div>\n              <!--\n                      <co-icon class=\"selector-type-icon refresh-button\" [iconData]=\"iconCache.getIcon(icons.Refresh)\" (click)=\"onForceRenderImage()\" [class.loading]=\"showLoader\" *ngIf=\"showRefresh\"></co-icon>\n              -->\n          </div>\n\n          <div id=\"product_page_carousel_thumbs\">\n              <co-scroll-container class=\"scroll-container\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n                  <div *ngFor=\"let imageViewModel of imageViewModels; let index = index\" class=\"carousel-thumb\"\n                       [class.active]=\"index === currentIndex\">\n                      <img [src]=\"imageViewModel.source\" (click)=\"handleThumbClick(index)\"/>\n                  </div>\n              </co-scroll-container>\n          </div>\n      </div>\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
                 },] }
     ];
     ImageCarouselComponent.ctorParameters = function () { return [
         { type: ProductConnectorService },
         { type: ProductEventService },
         { type: i0.ChangeDetectorRef },
-        { type: i1$1.DomSanitizer },
-        { type: IconCacheService }
+        { type: i1$1.DomSanitizer }
     ]; };
     ImageCarouselComponent.propDecorators = {
         carousel: [{ type: i0.ViewChild, args: ['carousel', { read: i0.ElementRef },] }],
@@ -3376,6 +3437,7 @@
             this._scriptLoader = _scriptLoader;
             this._renderer = _renderer;
             this.variant = '';
+            this.urlParams = [];
             this.configuratorFinished = new i0.EventEmitter();
             this.configurationError = new i0.EventEmitter();
             this.showClass = true;
@@ -3414,7 +3476,10 @@
             this.configurationError.emit(event.detail.status);
         };
         ProductHdComponent.prototype._prepareAttributes = function () {
-            if (this.hdeConfigurator && this.hdeConfigurator.nativeElement && this.token && (this.sku || this.variant)) {
+            if (this.hdeConfigurator && this.hdeConfigurator.nativeElement && this.urlParams && this.token && (this.sku || this.variant)) {
+                //for local testing please turn off for packing and publishing!
+                //this.prepareTestingUrlparams();
+                this._prepareConfiguratorUrls();
                 this.hdeConfigurator.nativeElement.setAttribute('bearerToken', this.token);
                 if (this._sku) {
                     this.hdeConfigurator.nativeElement.setAttribute('data-productId', this._sku);
@@ -3425,34 +3490,54 @@
                 this._loadTheScripts();
             }
         };
-        // load external scripts
+        //set necessary references to configurator.
+        ProductHdComponent.prototype._prepareConfiguratorUrls = function () {
+            //fetch the setting from the external source
+            var apiurl = this.urlParams.find(function (item) { return item.key === 'apiurl'; }).value;
+            var productVariantCommandApiUrl = this.urlParams.find(function (item) { return item.key === 'productVariantCommandApiUrl'; }).value;
+            var productVariantQueryApiUrl = this.urlParams.find(function (item) { return item.key === 'productVariantQueryApiUrl'; }).value;
+            var localizationApiUrl = this.urlParams.find(function (item) { return item.key === 'localizationApiUrl'; }).value;
+            //apply to configurator
+            this.hdeConfigurator.nativeElement.setAttribute('apiurl', apiurl);
+            this.hdeConfigurator.nativeElement.setAttribute('productVariantCommandApiUrl', productVariantCommandApiUrl);
+            this.hdeConfigurator.nativeElement.setAttribute('productVariantQueryApiUrl', productVariantQueryApiUrl);
+            this.hdeConfigurator.nativeElement.setAttribute('localizationApiUrl', localizationApiUrl);
+        };
+        // load external scripts into client
         ProductHdComponent.prototype._loadTheScripts = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var scripts, i;
+                var headerUrls, headerArray, i, styles, stylesArray, j;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            scripts = [
-                                // hard-coded for now, should come from the external source
-                                'https://hde-cdn.azureedge.net/libs/components/Configurator/1.0.33/polyfills.js',
-                                'https://hde-cdn.azureedge.net/libs/components/Configurator/1.0.33/runtime.js',
-                                'https://hde-cdn.azureedge.net/libs/components/Configurator/1.0.33/main.js'
-                            ];
+                            headerUrls = this.urlParams.find(function (item) { return item.key === 'header'; }).value;
+                            headerArray = headerUrls.replace(/\s+/g, '').split(',');
                             i = 0;
                             _a.label = 1;
                         case 1:
-                            if (!(i < scripts.length)) return [3 /*break*/, 4];
-                            return [4 /*yield*/, this._scriptLoader.loadScript(scripts[i], this._renderer).catch(function (error) { return console.error(error); })];
+                            if (!(i < headerArray.length)) return [3 /*break*/, 4];
+                            return [4 /*yield*/, this._scriptLoader.loadScript(headerArray[i], this._renderer).catch(function (error) { return console.error(error); })];
                         case 2:
                             _a.sent();
                             _a.label = 3;
                         case 3:
                             i++;
                             return [3 /*break*/, 1];
-                        case 4: return [4 /*yield*/, this._scriptLoader.addStyleSheet('https://hde-cdn.azureedge.net/libs/components/Configurator/1.0.33/styles.css', this._renderer)];
+                        case 4:
+                            styles = this.urlParams.find(function (item) { return item.key === 'stylesheet'; }).value;
+                            stylesArray = styles.replace(/\s+/g, '').split(',');
+                            j = 0;
+                            _a.label = 5;
                         case 5:
+                            if (!(j < stylesArray.length)) return [3 /*break*/, 8];
+                            return [4 /*yield*/, this._scriptLoader.addStyleSheet(stylesArray[j], this._renderer)];
+                        case 6:
                             _a.sent();
-                            return [2 /*return*/];
+                            _a.label = 7;
+                        case 7:
+                            j++;
+                            return [3 /*break*/, 5];
+                        case 8: return [2 /*return*/];
                     }
                 });
             });
@@ -3462,7 +3547,7 @@
     ProductHdComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-product-hd',
-                    template: "\n    <hde-configurator #hdeConfigurator\n                      apiurl=\"https://bmsproductconfigurator-acceptance.azurewebsites.net/api/configurator/\"\n                      productVariantCommandApiUrl=\"https://bmsproductvariantcommand-acceptance.azurewebsites.net/\"\n                      productVariantQueryApiUrl=\"https://bmsproductvariantquery-acceptance.azurewebsites.net/\"\n                      language=\"nl\"\n                      localizationApiUrl=\"https://hde-cdn.azureedge.net/libs/BMS.DST.Localization/\"\n                      localizationFileExtension=\".json\"\n                      (configurationFinished)=\"handleConfigurationFinished($event)\"\n                      (configurationFailed)=\"handleError($event)\"\n    >\n      <hde-progress-bar></hde-progress-bar>\n    </hde-configurator>\n  ",
+                    template: "\n    <hde-configurator #hdeConfigurator\n                      language=\"nl\"\n                      localizationFileExtension=\".json\"\n                      (configurationFinished)=\"handleConfigurationFinished($event)\"\n                      (configurationFailed)=\"handleError($event)\"\n    >\n      <hde-progress-bar></hde-progress-bar>\n    </hde-configurator>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3475,6 +3560,7 @@
         sku: [{ type: i0.Input }],
         token: [{ type: i0.Input }],
         variant: [{ type: i0.Input }],
+        urlParams: [{ type: i0.Input }],
         configuratorFinished: [{ type: i0.Output }],
         configurationError: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ['class.co-product-hd',] }]
@@ -3519,6 +3605,7 @@
             this.externalSettings = {};
             this.token = ""; //= "eyJhbGciOiJSUzI1NiIsImtpZCI6IkYxOThERkVEOEUwQTQ1MzY3M0M1MUE2Rjk1QUVDQzU3RTM0NjM4RkRSUzI1NiIsInR5cCI6ImF0K2p3dCIsIng1dCI6IjhaamY3WTRLUlRaenhScHZsYTdNVi1OR09QMCJ9.eyJuYmYiOjE3MzIxOTkyOTUsImV4cCI6MTczMjIwMjg5NSwiaXNzIjoiaHR0cHM6Ly9ibXNpZGVudGl0eS1hY2NlcHRhbmNlLmF6dXJld2Vic2l0ZXMubmV0IiwiYXVkIjpbImNhdGFsb2dxdWVyeWFwaSIsImNvbmZpZ3VyYXRvcmFwaSIsInByb2R1Y3R2YXJpYW50Y29tbWFuZGFwaSIsInByb2R1Y3R2YXJpYW50cXVlcnlhcGkiXSwiY2xpZW50X2lkIjoiaW1wZXJzb25hdGlvbi5jbGllbnQiLCJzdWIiOiIwOTMwZDI4Mi05NGU4LTQ5MGEtOGI2NC1mYTk1YmIyYzE1ODIiLCJhdXRoX3RpbWUiOjE3MzIxOTkyOTUsImlkcCI6ImxvY2FsIiwiZW52aXJvbm1lbnQiOiJNU0wiLCJzZWxsZXIiOiJTRTAwMDA5NiIsInNlbGxlcmd1aWQiOiIxMDk1MWJjNS1hZmMzLTQ1MGEtNmVkMS0wOGQ4NDNlNmE5OTQiLCJwZXJtaXNzaW9uIjpbInNhbGVzLmV4cG9ydHRlbXBsYXRlcy5yZWFkIiwiZG9jdW1lbnRsaWJyYXJ5LnRhZy5yZWFkIiwiZG9jdW1lbnRsaWJyYXJ5LmRvY3VtZW50LnJlYWQiLCJkb2N1bWVudGxpYnJhcnkudGFnZ3JvdXAucmVhZCIsInNhbGVzLm9yZGVyLndyaXRlIiwic2FsZXMuY3VzdG9tZXIucmVhZCIsInNhbGVzLm9yZGVyLmRlbGl2ZXJ5YWRkcmVzcy53cml0ZSIsInNlcnZpY2UucmVxdWVzdC5yZWFkIiwiY2F0YWxvZy50YWcucmVhZCIsInNhbGVzLm9yZGVyLnJlYWQiLCJzYWxlcy5jdXN0b21lci53cml0ZSIsInJlcXVlc3Rmb3JxdW90ZS53cml0ZSIsInNhbGVzLm9yZGVyLmJvb2siLCJyZXF1ZXN0Zm9ycXVvdGUucmVhZCIsInNhbGVzLmxlYWQucmVhZCIsInB1cmNoYXNlLm9yZGVyLnJlYWQiLCJzYWxlcy5xdW90ZS5yZWFkIiwic2FsZXMucXVvdGUud3JpdGUiLCJjYXRhbG9nLml0ZW0ucmVhZCIsInNhbGVzLmxlYWQud3JpdGUiLCJzZXJ2aWNlLnJlcXVlc3Quc3VibWl0Iiwic2FsZXMub3JkZXIuZGVsaXZlcnlhZGRyZXNzLnJlYWQiLCJwdXJjaGFzZS5vcmRlci53cml0ZSIsInB1cmNoYXNlLm9yZGVyLnByaWNlcy53cml0ZSIsInB1cmNoYXNlLm9yZGVyLnByaWNlcy5yZWFkIiwic2VydmljZS5yZXF1ZXN0LndyaXRlIiwiY2F0YWxvZy5jYXRhbG9nLnJlYWQiLCJjYXRhbG9nLmNhdGFsb2cud3JpdGUiLCJjYXRhbG9nLmN1cnJlbmN5LnJlYWQiLCJjYXRhbG9nLmN1cnJlbmN5LndyaXRlIiwiY2F0YWxvZy5pdGVtLndyaXRlIiwiY2F0YWxvZy5sb2NhbGl6YXRpb24ucmVhZCIsImNhdGFsb2cubG9jYWxpemF0aW9uLndyaXRlIiwiY2F0YWxvZy5wcm9kdWN0LnJlYWQiLCJjYXRhbG9nLnByb2R1Y3Qud3JpdGUiLCJjYXRhbG9nLnByb2R1Y3RzZXR0aW5nLnJlYWQiLCJjYXRhbG9nLnByb2R1Y3RzZXR0aW5nLndyaXRlIiwiY2F0YWxvZy5zZWxsZXIucmVhZCIsImNhdGFsb2cuc2VsbGVyLndyaXRlIiwiY2F0YWxvZy50YWcud3JpdGUiLCJjYXRhbG9nLnVvbS5yZWFkIiwiY2F0YWxvZy51b20ud3JpdGUiLCJjYXRhbG9nLnZhdGNhdGVnb3J5LnJlYWQiLCJjYXRhbG9nLnZhdGNhdGVnb3J5LndyaXRlIiwiY2F0YWxvZy52ZW5kb3IucmVhZCIsImNhdGFsb2cudmVuZG9yLndyaXRlIiwicHVyY2hhc2Uuc2VsbGVyLnJlYWQiLCJwdXJjaGFzZS5zZWxsZXIud3JpdGUiLCJjYXRhbG9nLmFydGljbGUucmVhZCIsImNhdGFsb2cuYXJ0aWNsZS53cml0ZSIsInNhbGVzLnF1b3RlLmxpbmVzLnJlYWQiLCJzYWxlcy5xdW90ZS5saW5lcy53cml0ZSIsInNhbGVzLnNlbGxlci5yZWFkIiwic2FsZXMuc2VsbGVyLndyaXRlIiwiYWNjb3VudGluZy52ZW5kb3JpbnZvaWNlLnJlYWQiLCJpZGVudGl0eS51c2VyLnJlYWQiLCJpZGVudGl0eS51c2VyLndyaXRlIiwiaWRlbnRpdHkucm9sZS5yZWFkIiwic2VsbGVyLnByb2R1Y3RwcmljZS5zZXR0aW5ncy5yZWFkIiwic2VsbGVyLnByb2R1Y3RwcmljZS5zZXR0aW5ncy53cml0ZSIsImNvbmZpZ3VyYXRvci5wdXJjaGFzZXByaWNlLnJlYWQiLCJzdG9jay5mYWJyaWMucmVhZCJdLCJuYW1lIjoiUm9iaW4iLCJmYW1pbHlfbmFtZSI6ImRlIFdpbnRlciAoQ29saWpuLUlUKSIsInJvbGUiOlsic2VsbGVyIiwiZGVhbGVyX21hbmFnZXIiXSwiaWF0IjoxNzMyMTk5Mjk1LCJzY29wZSI6WyJjYXRhbG9ncXVlcnlhcGkiLCJjb25maWd1cmF0b3JhcGkiLCJwcm9kdWN0dmFyaWFudGNvbW1hbmRhcGkiLCJwcm9kdWN0dmFyaWFudHF1ZXJ5YXBpIl0sImFtciI6WyJpbXBlcnNvbmF0aW9uIl19.rbguVPnkXXDzsM6QKgXulhrF41jIjCuGDV13ig1GC8MewLCJ7wA038OSwT26sx2mCexjvuGYt45YScfPwfTkDy3ErPmHRods64X1dJWZnf-23NTP2iI32K_1vMZH5GOGbMzuFtbKAFQv4hgFAxoyWqFVWyJvuOtQcWyZStROyPHwjAnpnj-x1cVQpOhbO-kQUFvy_VUrPpF3aYVCcO2cFirQTXR6kxSGcYGGcsPY-_eiAd93UdG2EM6xLAocDLaFV72CQI6XEs0WQG1f4SqvH52v3OTkgWBLgYV35gpyIe0-2nazGL0R8pTNuDqrOb7OGmuTRMoTIiRi67-wTxx8cQ";
             this.variant = "";
+            this.urlParams = [];
             this._subs = [];
         }
         Object.defineProperty(ProductExternalSourceComponent.prototype, "externalSource", {
@@ -3538,10 +3625,12 @@
                 return this._externalCatalogStartupInfo;
             },
             set: function (value) {
-                this._externalCatalogStartupInfo = value;
-                this.externalSource = value.externalSource;
-                this.loaded = false;
-                this._prepareExternalSource();
+                if (value) {
+                    this._externalCatalogStartupInfo = value;
+                    this.externalSource = value.externalSource;
+                    this.loaded = false;
+                    this._prepareExternalSource();
+                }
             },
             enumerable: false,
             configurable: true
@@ -3633,6 +3722,7 @@
                 this.token = this.externalCatalogStartupInfo.token;
                 this.sku = this.externalCatalogStartupInfo.externalGoodId;
                 this.variant = this.externalCatalogStartupInfo.flattenedGoodId;
+                this.urlParams = this.externalCatalogStartupInfo.externalSource.parameters;
                 this.switchToConfigurator();
                 this.loaded = true;
             }
@@ -3663,7 +3753,7 @@
     ProductExternalSourceComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-product-external-source',
-                    template: "\n        <ng-container *ngIf=\"loaded\">\n            <ng-container *ngIf=\"showProduct\">\n                <app-product-page\n                        [sku]=\"sku\"\n                        [settings]=\"externalSettings\"\n                        [externalSource]=\"externalSource\"\n                ></app-product-page>\n            </ng-container>\n            <ng-container *ngIf=\"showSource\">\n                <iframe width=\"100%\" height=\"100%\" [src]=\"safeUrl\" frameborder=\"0\" allowfullscreen></iframe>\n            </ng-container>\n            <ng-container *ngIf=\"showConfigurator\">\n              <co-product-hd width=\"100%\" height=\"100%\"\n                             [sku]=\"sku\"\n                             [variant]=\"variant\"\n                             [token]=\"token\"\n                             (configuratorFinished)=\"handleConfigurationFinished($event)\"></co-product-hd>\n            </ng-container>\n        </ng-container>\n    ",
+                    template: "\n        <ng-container *ngIf=\"loaded\">\n            <ng-container *ngIf=\"showProduct\">\n                <app-product-page\n                        [sku]=\"sku\"\n                        [settings]=\"externalSettings\"\n                        [externalSource]=\"externalSource\"\n                ></app-product-page>\n            </ng-container>\n            <ng-container *ngIf=\"showSource\">\n                <iframe width=\"100%\" height=\"100%\" [src]=\"safeUrl\" frameborder=\"0\" allowfullscreen></iframe>\n            </ng-container>\n            <ng-container *ngIf=\"showConfigurator\">\n              <co-product-hd width=\"100%\" height=\"100%\"\n                             [sku]=\"sku\"\n                             [variant]=\"variant\"\n                             [token]=\"token\"\n                             [urlParams]=\"urlParams\"\n                             (configuratorFinished)=\"handleConfigurationFinished($event)\"></co-product-hd>\n            </ng-container>\n        </ng-container>\n    ",
                     providers: [
                         ProductSettingsService,
                         ProductConnectorAdapterService,