@colijnit/product 256.1.3 → 256.1.4

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

@@ -6,6 +6,7 @@ import { ArticleListObject } from '@colijnit/articleapi/build/model/article-list
 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';
 export declare class ProductExternalSourceComponent implements OnInit, OnDestroy {
     private _sanitizer;
     private _productConnectorService;
@@ -14,20 +15,35 @@ export declare class ProductExternalSourceComponent implements OnInit, OnDestroy
     catalogDefinition: CatalogDefinition;
     set externalSource(value: ExternalSource);
     get externalSource(): ExternalSource;
+    set externalCatalogStartupInfo(value: ExternalCatalogStartupInfo);
+    get externalCatalogStartupInfo(): ExternalCatalogStartupInfo;
     options: {};
     addToCart: EventEmitter<ExternalSourceArticleAddInterface>;
     addToQuote: EventEmitter<ExternalSourceArticleAddInterface>;
     alternativeClick: EventEmitter<ArticleListObject>;
+    configuratorFinished: EventEmitter<string>;
     showClass(): boolean;
     showProduct: boolean;
+    showConfigurator: boolean;
+    showSource: boolean;
     safeUrl: SafeResourceUrl;
     loaded: boolean;
     externalUrl: string;
     externalSettings: any;
+    token: string;
+    variant: string;
     private _externalSource;
+    private _externalCatalogStartupInfo;
     private _subs;
     constructor(_sanitizer: DomSanitizer, _productConnectorService: ProductConnectorService, _appEventService: ProductEventService);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    handleConfigurationFinished(variantString: string): void;
     private _prepareExternalSource;
+    private _prepareCatFarm;
+    private _prepareConfigurator;
+    private _prepareSource;
+    private switchToProduct;
+    private switchToConfigurator;
+    private switchToSource;
 }

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

@@ -0,0 +1,22 @@
+import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
+import { ProductScriptLoaderService } from '../../service/product-script-loader.service';
+export declare class ProductHdComponent implements OnDestroy {
+    private _scriptLoader;
+    private _renderer;
+    set content(child: any);
+    set sku(value: string);
+    get sku(): string;
+    token: string;
+    variant: string;
+    configuratorFinished: EventEmitter<string>;
+    configurationError: EventEmitter<any>;
+    showClass: boolean;
+    hdeConfigurator: ElementRef;
+    private _sku;
+    constructor(_scriptLoader: ProductScriptLoaderService, _renderer: Renderer2);
+    ngOnDestroy(): void;
+    handleConfigurationFinished(event: CustomEvent): void;
+    handleError(event: CustomEvent): void;
+    private _prepareAttributes;
+    private _loadTheScripts;
+}

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

@@ -0,0 +1,2 @@
+export declare class ProductHdModule {
+}

package/app/ione-product.component.d.ts

@@ -33,6 +33,7 @@ export declare class IoneProductComponent implements OnInit, OnChanges, OnDestro
     onAddToQuote: EventEmitter<string>;
     openStockEvent: EventEmitter<void>;
     settingsLoaded: boolean;
+    showHD: boolean;
     private _settings;
     private _subs;
     constructor(_dictionary: DictionaryService, _jsonUtils: JsonUtilsService, _ione: ProductConnectorService, _changeDetector: ChangeDetectorRef, _appEventService: ProductEventService, _settingsService: ProductSettingsService);

package/app/service/product-script-loader.service.d.ts

@@ -0,0 +1,9 @@
+import { Renderer2 } from '@angular/core';
+export declare class ProductScriptLoaderService {
+    private platformId;
+    private _scriptsOrLinksElements;
+    constructor(platformId: any);
+    loadScript(url: string, renderer: Renderer2): Promise<void>;
+    unloadScripts(renderer: Renderer2): void;
+    addStyleSheet(url: string, renderer: Renderer2): Promise<void>;
+}

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.3";
-            this.publishDate = "20-11-2024 10:30:57";
+            this.symVer = "256.1.4";
+            this.publishDate = "22-1-2025 20:45:30";
         }
         return Version;
     }());
@@ -1323,6 +1323,7 @@
             this.onAddToQuote = new i0.EventEmitter();
             this.openStockEvent = new i0.EventEmitter();
             this.settingsLoaded = false;
+            this.showHD = false;
             this._subs = [];
             this._subs.push(
             // this._dictionary.dictionaryLoaded.subscribe(d => this.upAndLoaded = true),
@@ -1389,7 +1390,7 @@
     IoneProductComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-ione-product',
-                    template: "\n      <app-product-page *ngIf=\"settingsLoaded\"\n                        [createFrozenArticle]=\"handleAddArticleInternally\"\n                        [isReturn]=\"isReturn\"\n                        (openStockEvent)=\"openStock()\"\n                        [sku]=\"sku\"\n                        [showRelatedProductsPopup]=\"showRelatedProductsPopup\"\n      ></app-product-page>\n\n  ",
+                    template: "\n      <app-product-page *ngIf=\"settingsLoaded\"\n                        [createFrozenArticle]=\"handleAddArticleInternally\"\n                        [isReturn]=\"isReturn\"\n                        (openStockEvent)=\"openStock()\"\n                        [sku]=\"sku\"\n                        [showRelatedProductsPopup]=\"showRelatedProductsPopup\"\n      ></app-product-page>\n<!--    <co-button [label]=\"'click'\" (click)=\"showHD = !showHD\"></co-button>\n      <co-product-hd [sku]=\"'657946ca-e1e1-41fd-7ae0-08dbf7df0cef'\" *ngIf=\"showHD\"></co-product-hd>-->\n  ",
                     encapsulation: i0.ViewEncapsulation.Emulated,
                     styles: [""]
                 },] }
@@ -3302,33 +3303,202 @@
                 },] }
     ];
 
-    var IoneProductModule = /** @class */ (function () {
-        function IoneProductModule() {
+    var ProductScriptLoaderService = /** @class */ (function () {
+        function ProductScriptLoaderService(platformId) {
+            this.platformId = platformId;
+            this._scriptsOrLinksElements = [];
         }
-        return IoneProductModule;
+        ProductScriptLoaderService.prototype.loadScript = function (url, renderer) {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                if (!common.isPlatformBrowser(_this.platformId)) {
+                    reject('Not in browser environment');
+                    return;
+                }
+                var existingScript = document.getElementById(url);
+                if (existingScript) {
+                    resolve(); // Script already loaded
+                    return;
+                }
+                var script = renderer.createElement('script');
+                script.id = url;
+                script.src = url;
+                script.type = 'text/javascript';
+                script.async = true;
+                script.onload = function () { return resolve(); };
+                script.onerror = function (error) { return reject("Error loading script: " + url); };
+                renderer.appendChild(document.head, script);
+                _this._scriptsOrLinksElements.push(script);
+            });
+        };
+        ProductScriptLoaderService.prototype.unloadScripts = function (renderer) {
+            for (var i = this._scriptsOrLinksElements.length - 1; i >= 0; i--) {
+                renderer.removeChild(document.head, this._scriptsOrLinksElements[i]);
+                this._scriptsOrLinksElements.pop();
+            }
+        };
+        ProductScriptLoaderService.prototype.addStyleSheet = function (url, renderer) {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                if (!common.isPlatformBrowser(_this.platformId)) {
+                    reject('Not in browser environment');
+                    return;
+                }
+                var existingStyleSheet = document.getElementById(url);
+                if (existingStyleSheet) {
+                    resolve(); // Script already loaded
+                    return;
+                }
+                var link = renderer.createElement('link');
+                link.id = url;
+                link.href = url;
+                link.rel = 'stylesheet';
+                link.onload = function () { return resolve(); };
+                link.onerror = function (error) { return reject("Error loading styleSheet: " + url); };
+                renderer.appendChild(document.head, link);
+                _this._scriptsOrLinksElements.push(link);
+            });
+        };
+        return ProductScriptLoaderService;
     }());
-    IoneProductModule.decorators = [
+    ProductScriptLoaderService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ProductScriptLoaderService_Factory() { return new ProductScriptLoaderService(i0__namespace.ɵɵinject(i0__namespace.PLATFORM_ID)); }, token: ProductScriptLoaderService, providedIn: "root" });
+    ProductScriptLoaderService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    ProductScriptLoaderService.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] }
+    ]; };
+
+    var ProductHdComponent = /** @class */ (function () {
+        function ProductHdComponent(_scriptLoader, _renderer) {
+            this._scriptLoader = _scriptLoader;
+            this._renderer = _renderer;
+            this.variant = '';
+            this.configuratorFinished = new i0.EventEmitter();
+            this.configurationError = new i0.EventEmitter();
+            this.showClass = true;
+        }
+        Object.defineProperty(ProductHdComponent.prototype, "content", {
+            set: function (child) {
+                this.hdeConfigurator = child;
+                this._prepareAttributes();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ProductHdComponent.prototype, "sku", {
+            get: function () {
+                return this._sku;
+            },
+            set: function (value) {
+                this._sku = value;
+                this._prepareAttributes();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ProductHdComponent.prototype.ngOnDestroy = function () {
+            this._scriptLoader.unloadScripts(this._renderer);
+        };
+        ProductHdComponent.prototype.handleConfigurationFinished = function (event) {
+            if (event.detail.variant && typeof event.detail.variant === 'string') {
+                this.configuratorFinished.emit(event.detail.variant);
+            }
+            else {
+                this.configuratorFinished.emit(this.variant);
+            }
+        };
+        ProductHdComponent.prototype.handleError = function (event) {
+            this.configurationError.emit(event.detail.status);
+        };
+        ProductHdComponent.prototype._prepareAttributes = function () {
+            if (this.hdeConfigurator && this.hdeConfigurator.nativeElement && this.token && (this.sku || this.variant)) {
+                this.hdeConfigurator.nativeElement.setAttribute('bearerToken', this.token);
+                if (this._sku) {
+                    this.hdeConfigurator.nativeElement.setAttribute('data-productId', this._sku);
+                }
+                if (this.variant) {
+                    this.hdeConfigurator.nativeElement.setAttribute('data-productVariantId', this.variant);
+                }
+                this._loadTheScripts();
+            }
+        };
+        // load external scripts
+        ProductHdComponent.prototype._loadTheScripts = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var scripts, i;
+                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'
+                            ];
+                            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); })];
+                        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 5:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return ProductHdComponent;
+    }());
+    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  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    ProductHdComponent.ctorParameters = function () { return [
+        { type: ProductScriptLoaderService },
+        { type: i0.Renderer2 }
+    ]; };
+    ProductHdComponent.propDecorators = {
+        content: [{ type: i0.ViewChild, args: ['hdeConfigurator', { read: i0.ElementRef },] }],
+        sku: [{ type: i0.Input }],
+        token: [{ type: i0.Input }],
+        variant: [{ type: i0.Input }],
+        configuratorFinished: [{ type: i0.Output }],
+        configurationError: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-product-hd',] }]
+    };
+
+    var ProductHdModule = /** @class */ (function () {
+        function ProductHdModule() {
+        }
+        return ProductHdModule;
+    }());
+    ProductHdModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
-                        // BrowserAnimationsModule,
-                        common.CommonModule,
-                        ProductPageModule,
-                        corecomponents_v12.LoaderModule
+                        common.CommonModule
                     ],
                     declarations: [
-                        IoneProductComponent
-                    ],
-                    exports: [
-                        IoneProductComponent
+                        ProductHdComponent
                     ],
-                    bootstrap: [
-                        IoneProductComponent
+                    schemas: [
+                        i0.CUSTOM_ELEMENTS_SCHEMA,
+                        i0.NO_ERRORS_SCHEMA
                     ],
-                    providers: [
-                        ProductSettingsService,
-                        ProductConnectorService,
-                        ProductEventService,
-                        ProductConnectorAdapterService
+                    exports: [
+                        ProductHdComponent
                     ]
                 },] }
     ];
@@ -3341,9 +3511,14 @@
             this.addToCart = new i0.EventEmitter();
             this.addToQuote = new i0.EventEmitter();
             this.alternativeClick = new i0.EventEmitter();
+            this.configuratorFinished = new i0.EventEmitter();
             this.showProduct = false;
+            this.showConfigurator = false;
+            this.showSource = false;
             this.loaded = false;
             this.externalSettings = {};
+            this.token = ""; //= "eyJhbGciOiJSUzI1NiIsImtpZCI6IkYxOThERkVEOEUwQTQ1MzY3M0M1MUE2Rjk1QUVDQzU3RTM0NjM4RkRSUzI1NiIsInR5cCI6ImF0K2p3dCIsIng1dCI6IjhaamY3WTRLUlRaenhScHZsYTdNVi1OR09QMCJ9.eyJuYmYiOjE3MzIxOTkyOTUsImV4cCI6MTczMjIwMjg5NSwiaXNzIjoiaHR0cHM6Ly9ibXNpZGVudGl0eS1hY2NlcHRhbmNlLmF6dXJld2Vic2l0ZXMubmV0IiwiYXVkIjpbImNhdGFsb2dxdWVyeWFwaSIsImNvbmZpZ3VyYXRvcmFwaSIsInByb2R1Y3R2YXJpYW50Y29tbWFuZGFwaSIsInByb2R1Y3R2YXJpYW50cXVlcnlhcGkiXSwiY2xpZW50X2lkIjoiaW1wZXJzb25hdGlvbi5jbGllbnQiLCJzdWIiOiIwOTMwZDI4Mi05NGU4LTQ5MGEtOGI2NC1mYTk1YmIyYzE1ODIiLCJhdXRoX3RpbWUiOjE3MzIxOTkyOTUsImlkcCI6ImxvY2FsIiwiZW52aXJvbm1lbnQiOiJNU0wiLCJzZWxsZXIiOiJTRTAwMDA5NiIsInNlbGxlcmd1aWQiOiIxMDk1MWJjNS1hZmMzLTQ1MGEtNmVkMS0wOGQ4NDNlNmE5OTQiLCJwZXJtaXNzaW9uIjpbInNhbGVzLmV4cG9ydHRlbXBsYXRlcy5yZWFkIiwiZG9jdW1lbnRsaWJyYXJ5LnRhZy5yZWFkIiwiZG9jdW1lbnRsaWJyYXJ5LmRvY3VtZW50LnJlYWQiLCJkb2N1bWVudGxpYnJhcnkudGFnZ3JvdXAucmVhZCIsInNhbGVzLm9yZGVyLndyaXRlIiwic2FsZXMuY3VzdG9tZXIucmVhZCIsInNhbGVzLm9yZGVyLmRlbGl2ZXJ5YWRkcmVzcy53cml0ZSIsInNlcnZpY2UucmVxdWVzdC5yZWFkIiwiY2F0YWxvZy50YWcucmVhZCIsInNhbGVzLm9yZGVyLnJlYWQiLCJzYWxlcy5jdXN0b21lci53cml0ZSIsInJlcXVlc3Rmb3JxdW90ZS53cml0ZSIsInNhbGVzLm9yZGVyLmJvb2siLCJyZXF1ZXN0Zm9ycXVvdGUucmVhZCIsInNhbGVzLmxlYWQucmVhZCIsInB1cmNoYXNlLm9yZGVyLnJlYWQiLCJzYWxlcy5xdW90ZS5yZWFkIiwic2FsZXMucXVvdGUud3JpdGUiLCJjYXRhbG9nLml0ZW0ucmVhZCIsInNhbGVzLmxlYWQud3JpdGUiLCJzZXJ2aWNlLnJlcXVlc3Quc3VibWl0Iiwic2FsZXMub3JkZXIuZGVsaXZlcnlhZGRyZXNzLnJlYWQiLCJwdXJjaGFzZS5vcmRlci53cml0ZSIsInB1cmNoYXNlLm9yZGVyLnByaWNlcy53cml0ZSIsInB1cmNoYXNlLm9yZGVyLnByaWNlcy5yZWFkIiwic2VydmljZS5yZXF1ZXN0LndyaXRlIiwiY2F0YWxvZy5jYXRhbG9nLnJlYWQiLCJjYXRhbG9nLmNhdGFsb2cud3JpdGUiLCJjYXRhbG9nLmN1cnJlbmN5LnJlYWQiLCJjYXRhbG9nLmN1cnJlbmN5LndyaXRlIiwiY2F0YWxvZy5pdGVtLndyaXRlIiwiY2F0YWxvZy5sb2NhbGl6YXRpb24ucmVhZCIsImNhdGFsb2cubG9jYWxpemF0aW9uLndyaXRlIiwiY2F0YWxvZy5wcm9kdWN0LnJlYWQiLCJjYXRhbG9nLnByb2R1Y3Qud3JpdGUiLCJjYXRhbG9nLnByb2R1Y3RzZXR0aW5nLnJlYWQiLCJjYXRhbG9nLnByb2R1Y3RzZXR0aW5nLndyaXRlIiwiY2F0YWxvZy5zZWxsZXIucmVhZCIsImNhdGFsb2cuc2VsbGVyLndyaXRlIiwiY2F0YWxvZy50YWcud3JpdGUiLCJjYXRhbG9nLnVvbS5yZWFkIiwiY2F0YWxvZy51b20ud3JpdGUiLCJjYXRhbG9nLnZhdGNhdGVnb3J5LnJlYWQiLCJjYXRhbG9nLnZhdGNhdGVnb3J5LndyaXRlIiwiY2F0YWxvZy52ZW5kb3IucmVhZCIsImNhdGFsb2cudmVuZG9yLndyaXRlIiwicHVyY2hhc2Uuc2VsbGVyLnJlYWQiLCJwdXJjaGFzZS5zZWxsZXIud3JpdGUiLCJjYXRhbG9nLmFydGljbGUucmVhZCIsImNhdGFsb2cuYXJ0aWNsZS53cml0ZSIsInNhbGVzLnF1b3RlLmxpbmVzLnJlYWQiLCJzYWxlcy5xdW90ZS5saW5lcy53cml0ZSIsInNhbGVzLnNlbGxlci5yZWFkIiwic2FsZXMuc2VsbGVyLndyaXRlIiwiYWNjb3VudGluZy52ZW5kb3JpbnZvaWNlLnJlYWQiLCJpZGVudGl0eS51c2VyLnJlYWQiLCJpZGVudGl0eS51c2VyLndyaXRlIiwiaWRlbnRpdHkucm9sZS5yZWFkIiwic2VsbGVyLnByb2R1Y3RwcmljZS5zZXR0aW5ncy5yZWFkIiwic2VsbGVyLnByb2R1Y3RwcmljZS5zZXR0aW5ncy53cml0ZSIsImNvbmZpZ3VyYXRvci5wdXJjaGFzZXByaWNlLnJlYWQiLCJzdG9jay5mYWJyaWMucmVhZCJdLCJuYW1lIjoiUm9iaW4iLCJmYW1pbHlfbmFtZSI6ImRlIFdpbnRlciAoQ29saWpuLUlUKSIsInJvbGUiOlsic2VsbGVyIiwiZGVhbGVyX21hbmFnZXIiXSwiaWF0IjoxNzMyMTk5Mjk1LCJzY29wZSI6WyJjYXRhbG9ncXVlcnlhcGkiLCJjb25maWd1cmF0b3JhcGkiLCJwcm9kdWN0dmFyaWFudGNvbW1hbmRhcGkiLCJwcm9kdWN0dmFyaWFudHF1ZXJ5YXBpIl0sImFtciI6WyJpbXBlcnNvbmF0aW9uIl19.rbguVPnkXXDzsM6QKgXulhrF41jIjCuGDV13ig1GC8MewLCJ7wA038OSwT26sx2mCexjvuGYt45YScfPwfTkDy3ErPmHRods64X1dJWZnf-23NTP2iI32K_1vMZH5GOGbMzuFtbKAFQv4hgFAxoyWqFVWyJvuOtQcWyZStROyPHwjAnpnj-x1cVQpOhbO-kQUFvy_VUrPpF3aYVCcO2cFirQTXR6kxSGcYGGcsPY-_eiAd93UdG2EM6xLAocDLaFV72CQI6XEs0WQG1f4SqvH52v3OTkgWBLgYV35gpyIe0-2nazGL0R8pTNuDqrOb7OGmuTRMoTIiRi67-wTxx8cQ";
+            this.variant = "";
             this._subs = [];
         }
         Object.defineProperty(ProductExternalSourceComponent.prototype, "externalSource", {
@@ -3358,6 +3533,19 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(ProductExternalSourceComponent.prototype, "externalCatalogStartupInfo", {
+            get: function () {
+                return this._externalCatalogStartupInfo;
+            },
+            set: function (value) {
+                this._externalCatalogStartupInfo = value;
+                this.externalSource = value.externalSource;
+                this.loaded = false;
+                this._prepareExternalSource();
+            },
+            enumerable: false,
+            configurable: true
+        });
         ProductExternalSourceComponent.prototype.showClass = function () {
             return true;
         };
@@ -3382,9 +3570,11 @@
         ProductExternalSourceComponent.prototype.ngOnDestroy = function () {
             this._subs.forEach(function (s) { return s.unsubscribe(); });
         };
+        ProductExternalSourceComponent.prototype.handleConfigurationFinished = function (variantString) {
+            this.configuratorFinished.emit(variantString);
+        };
         ProductExternalSourceComponent.prototype._prepareExternalSource = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var bundleSettings;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -3394,7 +3584,29 @@
                             this.externalUrl = undefined;
                             this.externalSettings = {};
                             if (!(this.externalSource.type === 'CATF')) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this._productConnectorService.getProductBundleSettings(this.externalSource.url, parseInt(this.externalSource.schema, 0))];
+                            return [4 /*yield*/, this._prepareCatFarm()];
+                        case 1:
+                            _a.sent();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            if (this.externalSource.type === 'HTDL') {
+                                this._prepareConfigurator();
+                            }
+                            else {
+                                this._prepareSource();
+                            }
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ProductExternalSourceComponent.prototype._prepareCatFarm = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var bundleSettings;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._productConnectorService.getProductBundleSettings(this.externalSource.url, parseInt(this.externalSource.schema, 0))];
                         case 1:
                             bundleSettings = _a.sent();
                             this.externalSettings = JSON.parse(bundleSettings);
@@ -3409,26 +3621,49 @@
                                 this.externalSettings.password = this.externalSource.password;
                             }
                             // finally show the catalog
-                            this.showProduct = true;
-                            return [3 /*break*/, 3];
-                        case 2:
-                            this.externalUrl = this.externalSource.url;
-                            this.safeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(this.externalUrl);
-                            this.showProduct = false;
-                            _a.label = 3;
-                        case 3:
+                            this.switchToProduct();
                             this.loaded = true;
                             return [2 /*return*/];
                     }
                 });
             });
         };
+        ProductExternalSourceComponent.prototype._prepareConfigurator = function () {
+            if (this.externalCatalogStartupInfo) {
+                this.token = this.externalCatalogStartupInfo.token;
+                this.sku = this.externalCatalogStartupInfo.externalGoodId;
+                this.variant = this.externalCatalogStartupInfo.flattenedGoodId;
+                this.switchToConfigurator();
+                this.loaded = true;
+            }
+        };
+        ProductExternalSourceComponent.prototype._prepareSource = function () {
+            this.externalUrl = this.externalSource.url;
+            this.safeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(this.externalUrl);
+            this.switchToSource();
+            this.loaded = true;
+        };
+        ProductExternalSourceComponent.prototype.switchToProduct = function () {
+            this.showProduct = true;
+            this.showConfigurator = false;
+            this.showSource = false;
+        };
+        ProductExternalSourceComponent.prototype.switchToConfigurator = function () {
+            this.showProduct = false;
+            this.showConfigurator = true;
+            this.showSource = false;
+        };
+        ProductExternalSourceComponent.prototype.switchToSource = function () {
+            this.showProduct = false;
+            this.showConfigurator = false;
+            this.showSource = true;
+        };
         return ProductExternalSourceComponent;
     }());
     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=\"!showProduct\">\n                <iframe width=\"100%\" height=\"100%\" [src]=\"safeUrl\" frameborder=\"0\" allowfullscreen></iframe>\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                             (configuratorFinished)=\"handleConfigurationFinished($event)\"></co-product-hd>\n            </ng-container>\n        </ng-container>\n    ",
                     providers: [
                         ProductSettingsService,
                         ProductConnectorAdapterService,
@@ -3446,10 +3681,12 @@
         sku: [{ type: i0.Input }],
         catalogDefinition: [{ type: i0.Input }],
         externalSource: [{ type: i0.Input }],
+        externalCatalogStartupInfo: [{ type: i0.Input }],
         options: [{ type: i0.Input }],
         addToCart: [{ type: i0.Output }],
         addToQuote: [{ type: i0.Output }],
         alternativeClick: [{ type: i0.Output }],
+        configuratorFinished: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ['class.co-product-external-source',] }]
     };
 
@@ -3462,7 +3699,8 @@
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        ProductPageModule
+                        ProductPageModule,
+                        ProductHdModule
                     ],
                     declarations: [
                         ProductExternalSourceComponent
@@ -3473,6 +3711,43 @@
                 },] }
     ];
 
+    var IoneProductModule = /** @class */ (function () {
+        function IoneProductModule() {
+        }
+        return IoneProductModule;
+    }());
+    IoneProductModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        //BrowserAnimationsModule,
+                        common.CommonModule,
+                        ProductPageModule,
+                        ProductHdModule,
+                        ProductExternalSourceModule,
+                        corecomponents_v12.ButtonModule
+                    ],
+                    declarations: [
+                        IoneProductComponent
+                    ],
+                    exports: [
+                        IoneProductComponent
+                    ],
+                    schemas: [
+                        i0.CUSTOM_ELEMENTS_SCHEMA,
+                        i0.NO_ERRORS_SCHEMA
+                    ],
+                    bootstrap: [
+                        IoneProductComponent
+                    ],
+                    providers: [
+                        ProductSettingsService,
+                        ProductConnectorService,
+                        ProductEventService,
+                        ProductConnectorAdapterService
+                    ]
+                },] }
+    ];
+
     /**
      * Generated bundle index. Do not edit.
      */
@@ -3501,6 +3776,9 @@
     exports["ɵbk"] = ProductDialogModule;
     exports["ɵbl"] = ProductDialogComponent;
     exports["ɵbm"] = ProductPageComponent;
+    exports["ɵbn"] = ProductHdModule;
+    exports["ɵbo"] = ProductHdComponent;
+    exports["ɵbp"] = ProductScriptLoaderService;
     exports["ɵc"] = PipeModule;
     exports["ɵd"] = LocalizePipe;
     exports["ɵe"] = DictionaryService;