@colijnit/product 262.1.8 → 300.1.0

package/fesm2022/colijnit-product.mjs

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { Injectable, Pipe, EventEmitter, Output, Input, Component, ElementRef, HostBinding, HostListener, ViewChild, ChangeDetectionStrategy, SecurityContext, ViewEncapsulation, ContentChild, NgModule, CUSTOM_ELEMENTS_SCHEMA, PLATFORM_ID, Inject, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
 import { Options } from '@colijnit/ioneconnector/build/model/options';
+import { ConfiguratorStatisticsEnvironment } from '@colijnit/articleapi/build/model/configurator-statistics-environment';
 import { ArticleFullObject } from '@colijnit/articleapi/build/model/article-full-object';
 import { SuperArticle } from '@colijnit/articleapi/build/model/super-article';
 import { Articles } from '@colijnit/articleapi/build/articles';
@@ -25,7 +26,6 @@ import { IconModule, LoaderModule, ScrollContainerModule, InputNumberPickerModul
 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';
 
@@ -34,8 +34,8 @@ class Version {
     constructor() {
         this.name = "@colijnit/product";
         this.description = "Product detail page project for iOne";
-        this.symVer = "262.1.8";
-        this.publishDate = "30-6-2026, 16:40:54";
+        this.symVer = "300.1.0";
+        this.publishDate = "14-7-2026, 10:22:51";
     }
 }
 
@@ -104,7 +104,9 @@ class ProductEventService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductEventService, decorators: [{
             type: Injectable,
-            args: [{ providedIn: 'root' }]
+            args: [{
+                    providedIn: 'root'
+                }]
         }] });
 
 // Sole responsibility is simply to wrap around a colijn.Connector to create a stable inner interface to the library in a 1:1 method way.
@@ -253,15 +255,6 @@ class ProductConnectorAdapterService {
             return this._boFactory.makeWithRawBackendData(ImageContent, response.resultObject);
         }
     }
-    async savePreset() {
-        const response = await this.articleConnector.storePreset();
-        if (response && response.validationResult && response.validationResult.success) {
-            return Promise.resolve(true);
-        }
-        else {
-            return Promise.resolve(false);
-        }
-    }
     async getDefaultLanguage(upId) {
         // this should always be fetched from the mainapi from the client
         const response = await this.mainConnector.getPublicParams(upId);
@@ -651,6 +644,42 @@ class ProductConnectorService {
     getSuperArticle(id) {
         return this._adapterService.getSuperArticle(id);
     }
+    async prepareArticleForCart(article, quantity, externalSource, createFrozenArticle = true) {
+        if (!article) {
+            return null;
+        }
+        if (createFrozenArticle) {
+            if (article.goodType === 'B') {
+                if (article.isConfigurable) {
+                    const json = await this.getJSONFromArticleObject(article.goodId, article.goodType, quantity, externalSource);
+                    if (json) {
+                        return json;
+                    }
+                }
+                else {
+                    return await this._handleGeneratedArticleDirectly(article.goodId, quantity);
+                }
+            }
+            else {
+                if (externalSource) {
+                    return await this.getJSONFromArticleObject(article.goodId, article.goodType, quantity, externalSource);
+                }
+                else {
+                    return article;
+                }
+            }
+        }
+        else {
+            if (article.goodType === 'B') {
+                if (!article.isConfigurable) {
+                    return await this._handleGeneratedArticleDirectly(article.goodId, quantity);
+                }
+            }
+            else {
+                return article;
+            }
+        }
+    }
     getJsonArticleFlatTree(goodId, goodType, quantity, externalSource = false, showLoader = true, configuratorStatistics) {
         return this._adapterService.getJsonArticleFlatTree(goodId, goodType, quantity, externalSource, showLoader, this._instanceId, configuratorStatistics);
     }
@@ -663,15 +692,28 @@ class ProductConnectorService {
     async getImageForCoDocument(document, thumb = false) {
         return this._adapterService.getImageForCoDocument(document, thumb);
     }
-    async savePreset() {
-        return await this._adapterService.savePreset();
-    }
     async getDefaultLanguage(upId) {
         return await this._adapterService.getDefaultLanguage(upId);
     }
     onShowLoaderChange(showLoader) {
         this._shouldShowLoader = showLoader;
     }
+    async getJSONFromArticleObject(goodId, goodType, quantity, externalSource) {
+        const configuratorStatistics = new ConfiguratorStatisticsEnvironment();
+        configuratorStatistics.userType = 'iOneProductPage';
+        configuratorStatistics.transactionType = 'Sales';
+        configuratorStatistics.actionDomain = 'bundle';
+        configuratorStatistics.sessionId = this._settingsService.settings.session ? this._settingsService.settings.session.sessionId : 'unknown';
+        configuratorStatistics.webHost = window.location.host;
+        configuratorStatistics.bundleHost = window.location.host;
+        return await this.getJsonArticleFlatTree(goodId, goodType, quantity, externalSource, true, configuratorStatistics);
+    }
+    async _handleGeneratedArticleDirectly(goodId, quantity) {
+        const generatedGoodId = await this.getGeneratedArtDirectly(goodId, true);
+        if (generatedGoodId) {
+            return await this._adapterService.getArticleFullObject(generatedGoodId, true);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductConnectorService, deps: [{ token: ProductConnectorAdapterService }, { token: ProductSettingsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductConnectorService }); }
 }
@@ -1665,66 +1707,11 @@ class ProductAddtocartComponent {
         this.addToCartButton = undefined;
     }
     async handleAddToCartClick(quantity) {
-        if (this.createFrozenArticle) {
-            if (this.article.goodType === 'B') {
-                if (this.article.isConfigurable) {
-                    const article = await this._getJSONFromArticleObject({ article: this.article, quantity: quantity });
-                    if (article) {
-                        this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
-                    }
-                }
-                else {
-                    await this._handleGeneratedArticleDirectly(quantity);
-                }
-            }
-            else {
-                let article;
-                if (!!this.externalSource) {
-                    article = await this._getJSONFromArticleObject({ article: this.article, quantity: quantity });
-                }
-                else {
-                    article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(this.article);
-                }
-                if (article) {
-                    this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
-                }
-            }
-        }
-        else {
-            if (this.article.goodType === 'B') {
-                if (!this.article.isConfigurable) {
-                    await this._handleGeneratedArticleDirectly(quantity);
-                }
-            }
-            else {
-                const article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(this.article);
-                this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
-            }
-        }
+        const article = await this._ioneControllerService.prepareArticleForCart(this.article, quantity, !!this.externalSource, this.createFrozenArticle);
+        this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
     }
     async handleAddToQuoteClick(quantity) {
-        this._appEventService.onAddToQuote.next(await this._getJSONFromArticleObject({ article: this.article, quantity: quantity }));
-    }
-    async _getJSONFromArticleObject(article) {
-        const configuratorStatistics = new ConfiguratorStatisticsEnvironment();
-        configuratorStatistics.userType = 'iOneProductPage';
-        configuratorStatistics.transactionType = 'Sales';
-        configuratorStatistics.actionDomain = 'bundle';
-        configuratorStatistics.sessionId = this._settingsService.settings.session ? this._settingsService.settings.session.sessionId : 'unknown';
-        configuratorStatistics.webHost = window.location.host;
-        configuratorStatistics.bundleHost = window.location.host;
-        return await this._ioneControllerService.getJsonArticleFlatTree(article.article.goodId, article.article.goodType, article.quantity, !!this.externalSource, true, configuratorStatistics);
-    }
-    async _handleGeneratedArticleDirectly(quantity) {
-        const generatedGoodId = await this._getGeneratedArtDirectly(this.article.goodId);
-        if (generatedGoodId) {
-            const articleFull = await this._productConnectorAdapterService.getArticleFullObject(generatedGoodId, true);
-            const article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(articleFull);
-            this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
-        }
-    }
-    async _getGeneratedArtDirectly(goodId) {
-        return await this._ioneControllerService.getGeneratedArtDirectly(goodId, true);
+        this._appEventService.onAddToQuote.next(await this._ioneControllerService.getJSONFromArticleObject(this.article.goodId, this.article.goodType, quantity, !!this.externalSource));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductAddtocartComponent, deps: [{ token: IconCacheService }, { token: ProductConnectorService }, { token: ProductEventService }, { token: ProductSettingsService }, { token: ProductConnectorAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ProductAddtocartComponent, isStandalone: false, selector: "app-product-addtocart", inputs: { article: "article", externalSource: "externalSource", createFrozenArticle: "createFrozenArticle", configurable: "configurable", configuring: "configuring", showAddToCart: "showAddToCart", isReturn: "isReturn", fullscreen: "fullscreen", quantity: "quantity" }, outputs: { startConfiguration: "startConfiguration", addToCartClick: "addToCartClick", addToQuoteClick: "addToQuoteClick", showRelatedPopup: "showRelatedPopup" }, host: { properties: { "class.full-screen": "this.fullscreen" } }, viewQueries: [{ propertyName: "addToCartButton", first: true, predicate: ["addtocartbutton"], descendants: true, read: ElementRef }], ngImport: i0, template: `
@@ -1911,8 +1898,8 @@ class ProductRelatedComponent {
     get articles() {
         return this._articles;
     }
-    constructor(_iOne, _appEventService, _productConnectorAdapterService, _settingsService) {
-        this._iOne = _iOne;
+    constructor(_productConnectorService, _appEventService, _productConnectorAdapterService, _settingsService) {
+        this._productConnectorService = _productConnectorService;
         this._appEventService = _appEventService;
         this._productConnectorAdapterService = _productConnectorAdapterService;
         this._settingsService = _settingsService;
@@ -1924,20 +1911,11 @@ class ProductRelatedComponent {
     handleContentClick(article) {
         this._appEventService.onAlternativeClick.next(article);
     }
-    async handleAddToCartClick(article) {
+    async handleAddToCartClick(articleListObject) {
         const quantity = 1;
-        const articleFull = await this._productConnectorAdapterService.getArticleFullObject(article.goodId, true);
-        if (articleFull) {
-            if (this.createFrozenArticle) {
-                const article = this._iOne.convertArticleFullObjectToArticleExtended(articleFull);
-                this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
-                // this._appEventService.onAddToCart.next({ article: await this._getJSONFromArticleObject({article: articleFull, quantity: quantity}), quantity: quantity });
-            }
-            else {
-                const article = this._iOne.convertArticleFullObjectToArticleExtended(articleFull);
-                this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
-            }
-        }
+        const articleFull = await this._productConnectorAdapterService.getArticleFullObject(articleListObject.goodId, true);
+        const article = await this._productConnectorService.prepareArticleForCart(articleFull, quantity, !!this.externalSource, this.createFrozenArticle);
+        this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
     }
     handleConfigureButtonClick(article) {
     }
@@ -1951,12 +1929,12 @@ class ProductRelatedComponent {
         configuratorStatistics.sessionId = this._settingsService.settings.session ? this._settingsService.settings.session.sessionId : 'unknown';
         configuratorStatistics.webHost = window.location.host;
         configuratorStatistics.bundleHost = window.location.host;
-        return await this._iOne.getJsonArticleFlatTree(article.article.goodId, article.article.goodType, article.quantity, !!this.externalSource, true, configuratorStatistics);
+        return await this._productConnectorService.getJsonArticleFlatTree(article.article.goodId, article.article.goodType, article.quantity, !!this.externalSource, true, configuratorStatistics);
     }
     async _loadImages() {
         this.articleViewModels.forEach(avm => {
             if (avm.article.image) {
-                this._iOne.getImageForCoDocument(avm.article.image, false).then(imageContent => this._handleImageData(avm, imageContent));
+                this._productConnectorService.getImageForCoDocument(avm.article.image, false).then(imageContent => this._handleImageData(avm, imageContent));
             }
         });
     }
@@ -2303,7 +2281,7 @@ class ProductDocumentsComponent {
         <co-files-upload [documents]="documents" [canAdd]="false" [readonly]="true"></co-files-upload>
       </div>
     }
-    `, isInline: true, styles: [":host{display:block}::ng-deep co-files-upload{flex-direction:column!important;width:100%}::ng-deep co-file-upload{margin:0!important;border-bottom:1px solid #f6f5f4}::ng-deep co-file-upload:first-child{border-top:1px solid #f6f5f4}::ng-deep co-files-upload .files-upload-wrapper{flex-direction:column!important;width:100%}::ng-deep co-file-upload co-tile{max-width:100%!important;width:100%;position:relative}::ng-deep co-file-upload co-tile:hover{box-shadow:none!important}::ng-deep co-file-upload co-tile:hover .tile-extra-bottom{background-color:#f6f5f4!important}::ng-deep co-file-upload co-tile .tile-wrapper{position:absolute!important;left:0;top:0;width:100%;height:100%;z-index:2;opacity:0;box-sizing:border-box}::ng-deep co-file-upload co-tile .tile-wrapper .image{position:absolute!important;left:0;top:0;width:100%!important;height:100%!important;cursor:pointer}::ng-deep co-file-upload co-tile .tile-extra-bottom{outline:none!important;border:none!important;background:transparent!important;line-height:20px;padding:20px 20px 20px 60px!important;margin:0!important;background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0D%0A<svg%0D%0A   xmlns:dc=\"http://purl.org/dc/elements/1.1/\"%0D%0A   xmlns:cc=\"http://creativecommons.org/ns%23\"%0D%0A   xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns%23\"%0D%0A   xmlns:svg=\"http://www.w3.org/2000/svg\"%0D%0A   xmlns=\"http://www.w3.org/2000/svg\"%0D%0A   xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"%0D%0A   xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"%0D%0A   viewBox=\"0 0 50 50\"%0D%0A   version=\"1.1\"%0D%0A   id=\"svg8\"%0D%0A   sodipodi:docname=\"download.svg\"%0D%0A   inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\">%0D%0A  <metadata%0D%0A     id=\"metadata14\">%0D%0A    <rdf:RDF>%0D%0A      <cc:Work%0D%0A         rdf:about=\"\">%0D%0A        <dc:format>image/svg+xml</dc:format>%0D%0A        <dc:type%0D%0A           rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />%0D%0A        <dc:title></dc:title>%0D%0A      </cc:Work>%0D%0A    </rdf:RDF>%0D%0A  </metadata>%0D%0A  <defs%0D%0A     id=\"defs12\" />%0D%0A  <sodipodi:namedview%0D%0A     pagecolor=\"%23ffffff\"%0D%0A     bordercolor=\"%23666666\"%0D%0A     borderopacity=\"1\"%0D%0A     objecttolerance=\"10\"%0D%0A     gridtolerance=\"10\"%0D%0A     guidetolerance=\"10\"%0D%0A     inkscape:pageopacity=\"0\"%0D%0A     inkscape:pageshadow=\"2\"%0D%0A     inkscape:window-width=\"1920\"%0D%0A     inkscape:window-height=\"1017\"%0D%0A     id=\"namedview10\"%0D%0A     showgrid=\"false\"%0D%0A     inkscape:zoom=\"6.675088\"%0D%0A     inkscape:cx=\"-14.056273\"%0D%0A     inkscape:cy=\"29.806579\"%0D%0A     inkscape:window-x=\"-8\"%0D%0A     inkscape:window-y=\"-8\"%0D%0A     inkscape:window-maximized=\"1\"%0D%0A     inkscape:current-layer=\"svg8\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g62\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g64\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g66\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g68\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g70\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g72\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g74\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g76\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g78\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g80\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g82\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g84\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g86\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g88\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g90\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g6-0\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\">%0D%0A    <g%0D%0A       id=\"g4-9\"%0D%0A       style=\"fill:%23484f60;fill-opacity:1\">%0D%0A      <path%0D%0A         inkscape:connector-curvature=\"0\"%0D%0A         d=\"m 498.966,339.946 c -7.197,0 -13.034,5.837 -13.034,13.034 v 49.804 c 0,28.747 -23.388,52.135 -52.135,52.135 H 78.203 c -28.747,0 -52.135,-23.388 -52.135,-52.135 V 352.98 c 0,-7.197 -5.835,-13.034 -13.034,-13.034 C 5.835,339.946 0,345.782 0,352.98 v 49.804 c 0,43.121 35.082,78.203 78.203,78.203 h 355.594 c 43.121,0 78.203,-35.082 78.203,-78.203 V 352.98 c 0,-7.198 -5.835,-13.034 -13.034,-13.034 z\"%0D%0A         id=\"path2\"%0D%0A         style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A    </g>%0D%0A  </g>%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g12-0\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\">%0D%0A    <g%0D%0A       id=\"g10-8\"%0D%0A       style=\"fill:%23484f60;fill-opacity:1\">%0D%0A      <path%0D%0A         inkscape:connector-curvature=\"0\"%0D%0A         d=\"M 419.833,391.3 H 92.167 c -7.197,0 -13.034,5.837 -13.034,13.034 0,7.197 5.835,13.034 13.034,13.034 h 327.665 c 7.199,0 13.034,-5.835 13.034,-13.034 0,-7.197 -5.835,-13.034 -13.033,-13.034 z\"%0D%0A         id=\"path8-3\"%0D%0A         style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A    </g>%0D%0A  </g>%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g18-4\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\">%0D%0A    <g%0D%0A       id=\"g16-7\"%0D%0A       style=\"fill:%23484f60;fill-opacity:1\">%0D%0A      <path%0D%0A         inkscape:connector-curvature=\"0\"%0D%0A         d=\"m 387.919,207.93 c -4.795,-5.367 -13.034,-5.834 -18.404,-1.038 L 269.033,296.657 V 44.048 c 0,-7.197 -5.835,-13.034 -13.034,-13.034 -7.197,0 -13.034,5.835 -13.034,13.034 V 296.657 L 142.483,206.893 c -5.367,-4.796 -13.607,-4.328 -18.404,1.038 -4.794,5.369 -4.331,13.609 1.037,18.404 l 109.174,97.527 c 6.187,5.529 13.946,8.292 21.708,8.292 7.759,0 15.519,-2.763 21.708,-8.289 l 109.174,-97.53 c 5.37,-4.798 5.834,-13.038 1.039,-18.405 z\"%0D%0A         id=\"path14-9\"%0D%0A         style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A    </g>%0D%0A  </g>%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g20\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g22-9\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g24-3\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g26\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g28-4\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g30-2\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g32\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g34-2\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g36-1\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g38\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g40-6\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g42-4\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g44\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g46-7\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g48-3\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A</svg>%0D%0A') no-repeat left 6px center / 36px auto!important}::ng-deep co-file-upload co-tile .tile-extra-bottom .main{padding:0!important}\n"], dependencies: [{ kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["label", "amount"] }, { kind: "component", type: i3.FilesUploadComponent, selector: "co-files-upload", inputs: ["dropzone", "label", "cfgNames", "customImageClick", "isEditable", "hideAvatars", "fileSavesOnPopupOkClick", "selected"], outputs: ["editSlideoutSubmit", "tagsChangeEvent", "imageClick"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    `, isInline: true, styles: [":host{display:block}::ng-deep co-files-upload{flex-direction:column!important;width:100%}::ng-deep co-file-upload{margin:0!important;border-bottom:1px solid #f6f5f4}::ng-deep co-file-upload:first-child{border-top:1px solid #f6f5f4}::ng-deep co-files-upload .files-upload-wrapper{flex-direction:column!important;width:100%}::ng-deep co-file-upload co-tile{max-width:100%!important;width:100%;position:relative}::ng-deep co-file-upload co-tile:hover{box-shadow:none!important}::ng-deep co-file-upload co-tile:hover .tile-extra-bottom{background-color:#f6f5f4!important}::ng-deep co-file-upload co-tile .tile-wrapper{position:absolute!important;left:0;top:0;width:100%;height:100%;z-index:2;opacity:0;box-sizing:border-box}::ng-deep co-file-upload co-tile .tile-wrapper .image{position:absolute!important;left:0;top:0;width:100%!important;height:100%!important;cursor:pointer}::ng-deep co-file-upload co-tile .tile-extra-bottom{outline:none!important;border:none!important;background:transparent!important;line-height:20px;padding:20px 20px 20px 60px!important;margin:0!important;background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0D%0A<svg%0D%0A   xmlns:dc=\"http://purl.org/dc/elements/1.1/\"%0D%0A   xmlns:cc=\"http://creativecommons.org/ns%23\"%0D%0A   xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns%23\"%0D%0A   xmlns:svg=\"http://www.w3.org/2000/svg\"%0D%0A   xmlns=\"http://www.w3.org/2000/svg\"%0D%0A   xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"%0D%0A   xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"%0D%0A   viewBox=\"0 0 50 50\"%0D%0A   version=\"1.1\"%0D%0A   id=\"svg8\"%0D%0A   sodipodi:docname=\"download.svg\"%0D%0A   inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\">%0D%0A  <metadata%0D%0A     id=\"metadata14\">%0D%0A    <rdf:RDF>%0D%0A      <cc:Work%0D%0A         rdf:about=\"\">%0D%0A        <dc:format>image/svg+xml</dc:format>%0D%0A        <dc:type%0D%0A           rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />%0D%0A        <dc:title></dc:title>%0D%0A      </cc:Work>%0D%0A    </rdf:RDF>%0D%0A  </metadata>%0D%0A  <defs%0D%0A     id=\"defs12\" />%0D%0A  <sodipodi:namedview%0D%0A     pagecolor=\"%23ffffff\"%0D%0A     bordercolor=\"%23666666\"%0D%0A     borderopacity=\"1\"%0D%0A     objecttolerance=\"10\"%0D%0A     gridtolerance=\"10\"%0D%0A     guidetolerance=\"10\"%0D%0A     inkscape:pageopacity=\"0\"%0D%0A     inkscape:pageshadow=\"2\"%0D%0A     inkscape:window-width=\"1920\"%0D%0A     inkscape:window-height=\"1017\"%0D%0A     id=\"namedview10\"%0D%0A     showgrid=\"false\"%0D%0A     inkscape:zoom=\"6.675088\"%0D%0A     inkscape:cx=\"-14.056273\"%0D%0A     inkscape:cy=\"29.806579\"%0D%0A     inkscape:window-x=\"-8\"%0D%0A     inkscape:window-y=\"-8\"%0D%0A     inkscape:window-maximized=\"1\"%0D%0A     inkscape:current-layer=\"svg8\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g62\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g64\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g66\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g68\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g70\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g72\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g74\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g76\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g78\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g80\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g82\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g84\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g86\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g88\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\"%0D%0A     id=\"g90\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g6-0\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\">%0D%0A    <g%0D%0A       id=\"g4-9\"%0D%0A       style=\"fill:%23484f60;fill-opacity:1\">%0D%0A      <path%0D%0A         inkscape:connector-curvature=\"0\"%0D%0A         d=\"m 498.966,339.946 c -7.197,0 -13.034,5.837 -13.034,13.034 v 49.804 c 0,28.747 -23.388,52.135 -52.135,52.135 H 78.203 c -28.747,0 -52.135,-23.388 -52.135,-52.135 V 352.98 c 0,-7.197 -5.835,-13.034 -13.034,-13.034 C 5.835,339.946 0,345.782 0,352.98 v 49.804 c 0,43.121 35.082,78.203 78.203,78.203 h 355.594 c 43.121,0 78.203,-35.082 78.203,-78.203 V 352.98 c 0,-7.198 -5.835,-13.034 -13.034,-13.034 z\"%0D%0A         id=\"path2\"%0D%0A         style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A    </g>%0D%0A  </g>%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g12-0\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\">%0D%0A    <g%0D%0A       id=\"g10-8\"%0D%0A       style=\"fill:%23484f60;fill-opacity:1\">%0D%0A      <path%0D%0A         inkscape:connector-curvature=\"0\"%0D%0A         d=\"M 419.833,391.3 H 92.167 c -7.197,0 -13.034,5.837 -13.034,13.034 0,7.197 5.835,13.034 13.034,13.034 h 327.665 c 7.199,0 13.034,-5.835 13.034,-13.034 0,-7.197 -5.835,-13.034 -13.033,-13.034 z\"%0D%0A         id=\"path8-3\"%0D%0A         style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A    </g>%0D%0A  </g>%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g18-4\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\">%0D%0A    <g%0D%0A       id=\"g16-7\"%0D%0A       style=\"fill:%23484f60;fill-opacity:1\">%0D%0A      <path%0D%0A         inkscape:connector-curvature=\"0\"%0D%0A         d=\"m 387.919,207.93 c -4.795,-5.367 -13.034,-5.834 -18.404,-1.038 L 269.033,296.657 V 44.048 c 0,-7.197 -5.835,-13.034 -13.034,-13.034 -7.197,0 -13.034,5.835 -13.034,13.034 V 296.657 L 142.483,206.893 c -5.367,-4.796 -13.607,-4.328 -18.404,1.038 -4.794,5.369 -4.331,13.609 1.037,18.404 l 109.174,97.527 c 6.187,5.529 13.946,8.292 21.708,8.292 7.759,0 15.519,-2.763 21.708,-8.289 l 109.174,-97.53 c 5.37,-4.798 5.834,-13.038 1.039,-18.405 z\"%0D%0A         id=\"path14-9\"%0D%0A         style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A    </g>%0D%0A  </g>%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g20\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g22-9\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g24-3\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g26\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g28-4\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g30-2\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g32\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g34-2\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g36-1\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g38\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g40-6\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g42-4\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g44\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g46-7\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A  <g%0D%0A     transform=\"matrix(0.05555739,0,0,0.05555739,10.739964,11.357401)\"%0D%0A     id=\"g48-3\"%0D%0A     style=\"fill:%23484f60;fill-opacity:1\" />%0D%0A</svg>%0D%0A') no-repeat left 6px center / 36px auto!important}::ng-deep co-file-upload co-tile .tile-extra-bottom .main{padding:0!important}\n"], dependencies: [{ kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["label", "amount"] }, { kind: "component", type: i3.FilesUploadComponent, selector: "co-files-upload", inputs: ["dropzone", "label", "cfgNames", "customImageClick", "isEditable", "hideAvatars", "fileSavesOnPopupOkClick", "extendedDropzone", "selected"], outputs: ["editSlideoutSubmit", "tagsChangeEvent", "imageClick"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDocumentsComponent, decorators: [{
             type: Component,
@@ -2507,117 +2485,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
-class ProductDialogComponent {
-    showClass() {
-        return true;
-    }
-    constructor(iconCache, _sanitizer, _productConnectorService, _productConnectorAdapterService, _appEventService) {
-        this.iconCache = iconCache;
-        this._sanitizer = _sanitizer;
-        this._productConnectorService = _productConnectorService;
-        this._productConnectorAdapterService = _productConnectorAdapterService;
-        this._appEventService = _appEventService;
-        this.icon = IconEnum;
-        this.closeRelatedPopup = new EventEmitter();
-        this.type = SelectorType;
-    }
-    ngOnInit() {
-    }
-    closeCatalog() {
-        // need to emit close
-        this.closeRelatedPopup.emit(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDialogComponent, deps: [{ token: IconCacheService }, { token: i1.DomSanitizer }, { token: ProductConnectorService }, { token: ProductConnectorAdapterService }, { token: ProductEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ProductDialogComponent, isStandalone: false, selector: "co-product-dialog", inputs: { refType: "refType", mainArticle: "mainArticle", articles: "articles" }, outputs: { closeRelatedPopup: "closeRelatedPopup" }, host: { properties: { "class.co-product-dialog": "this.showClass" } }, ngImport: i0, template: `
-    <div class="product-dialog-wrap">
-      <div class="product-dialog-container">
-        <div class="container-header">
-          <div class="header-info">
-            <h3>
-              <co-icon [iconData]="iconCache.getIcon(icon.LinkSimpleRegular)"
-                (click)="closeCatalog()"></co-icon>{{ 'SUGGESTION' | localize }} <b>{{ mainArticle.name }}</b> ({{ mainArticle.articleNr }})
-              </h3>
-            </div>
-            <div class="close-icon" (click)="closeCatalog()">
-              <co-icon class="fullscreen-button"
-                [iconData]="iconCache.getIcon(icon.CrossSkinny)"
-              (click)="closeCatalog()"></co-icon>
-            </div>
-          </div>
-          <div class="related-product-container">
-            @if (articles) {
-              <app-product-related
-                class="no-padding"
-                [articles]="articles">
-              </app-product-related>
-            }
-          </div>
-          <div class="close-button-container">
-            <button class="ok-button" (click)="closeCatalog()">
-              <co-icon [iconData]="iconCache.getIcon(icon.SaveSkinny)"
-              (click)="closeCatalog()"></co-icon>
-            </button>
-            <button class="close-button" (click)="closeCatalog()">
-              <co-icon [iconData]="iconCache.getIcon(icon.CrossSkinny)"
-              (click)="closeCatalog()"></co-icon>
-            </button>
-          </div>
-        </div>
-      </div>
-    `, isInline: true, styles: [".product-dialog-wrap{display:flex;justify-content:center;position:absolute;z-index:800;top:0}.product-dialog-wrap .product-dialog-container{background:#fff;min-width:75vw;max-height:90vh;border:1px solid #F8F8F8}.product-dialog-wrap .product-dialog-container .container-header{display:flex;justify-content:space-between;border-bottom:1px solid #F8F8F8;padding:25px;box-sizing:border-box;align-items:center}.product-dialog-wrap .product-dialog-container .container-header .header-info h3{display:flex;align-items:center}.product-dialog-wrap .product-dialog-container .container-header .header-info h3 co-icon{margin-right:10px}.product-dialog-wrap .product-dialog-container .container-header .close-icon{cursor:pointer}.product-dialog-wrap .product-dialog-container .close-button-container{display:flex;justify-content:center;padding:10px}.product-dialog-wrap .product-dialog-container .close-button-container button{cursor:pointer;border:none;color:#fff;padding:8px;box-shadow:0 3px 3px #0000004d;height:auto;width:auto;margin:0 3px;border-radius:3px}.product-dialog-wrap .product-dialog-container .close-button-container button ::ng-deep co-icon{height:20px;width:20px}.product-dialog-wrap .product-dialog-container .close-button-container button ::ng-deep co-icon svg{fill:#fff}.product-dialog-wrap .product-dialog-container .close-button-container button ::ng-deep co-icon svg polygon{fill:#fff}.product-dialog-wrap .product-dialog-container .close-button-container .ok-button{background:#1a73e8}.product-dialog-wrap .product-dialog-container .close-button-container .close-button{background:#475060}::ng-deep .content-wrapper{width:auto!important}\n"], dependencies: [{ kind: "component", type: ProductRelatedComponent, selector: "app-product-related", inputs: ["refType", "label", "externalSource", "isSmallModus", "createFrozenArticle", "articles"] }, { 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: ProductDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'co-product-dialog', template: `
-    <div class="product-dialog-wrap">
-      <div class="product-dialog-container">
-        <div class="container-header">
-          <div class="header-info">
-            <h3>
-              <co-icon [iconData]="iconCache.getIcon(icon.LinkSimpleRegular)"
-                (click)="closeCatalog()"></co-icon>{{ 'SUGGESTION' | localize }} <b>{{ mainArticle.name }}</b> ({{ mainArticle.articleNr }})
-              </h3>
-            </div>
-            <div class="close-icon" (click)="closeCatalog()">
-              <co-icon class="fullscreen-button"
-                [iconData]="iconCache.getIcon(icon.CrossSkinny)"
-              (click)="closeCatalog()"></co-icon>
-            </div>
-          </div>
-          <div class="related-product-container">
-            @if (articles) {
-              <app-product-related
-                class="no-padding"
-                [articles]="articles">
-              </app-product-related>
-            }
-          </div>
-          <div class="close-button-container">
-            <button class="ok-button" (click)="closeCatalog()">
-              <co-icon [iconData]="iconCache.getIcon(icon.SaveSkinny)"
-              (click)="closeCatalog()"></co-icon>
-            </button>
-            <button class="close-button" (click)="closeCatalog()">
-              <co-icon [iconData]="iconCache.getIcon(icon.CrossSkinny)"
-              (click)="closeCatalog()"></co-icon>
-            </button>
-          </div>
-        </div>
-      </div>
-    `, standalone: false, styles: [".product-dialog-wrap{display:flex;justify-content:center;position:absolute;z-index:800;top:0}.product-dialog-wrap .product-dialog-container{background:#fff;min-width:75vw;max-height:90vh;border:1px solid #F8F8F8}.product-dialog-wrap .product-dialog-container .container-header{display:flex;justify-content:space-between;border-bottom:1px solid #F8F8F8;padding:25px;box-sizing:border-box;align-items:center}.product-dialog-wrap .product-dialog-container .container-header .header-info h3{display:flex;align-items:center}.product-dialog-wrap .product-dialog-container .container-header .header-info h3 co-icon{margin-right:10px}.product-dialog-wrap .product-dialog-container .container-header .close-icon{cursor:pointer}.product-dialog-wrap .product-dialog-container .close-button-container{display:flex;justify-content:center;padding:10px}.product-dialog-wrap .product-dialog-container .close-button-container button{cursor:pointer;border:none;color:#fff;padding:8px;box-shadow:0 3px 3px #0000004d;height:auto;width:auto;margin:0 3px;border-radius:3px}.product-dialog-wrap .product-dialog-container .close-button-container button ::ng-deep co-icon{height:20px;width:20px}.product-dialog-wrap .product-dialog-container .close-button-container button ::ng-deep co-icon svg{fill:#fff}.product-dialog-wrap .product-dialog-container .close-button-container button ::ng-deep co-icon svg polygon{fill:#fff}.product-dialog-wrap .product-dialog-container .close-button-container .ok-button{background:#1a73e8}.product-dialog-wrap .product-dialog-container .close-button-container .close-button{background:#475060}::ng-deep .content-wrapper{width:auto!important}\n"] }]
-        }], ctorParameters: () => [{ type: IconCacheService }, { type: i1.DomSanitizer }, { type: ProductConnectorService }, { type: ProductConnectorAdapterService }, { type: ProductEventService }], propDecorators: { refType: [{
-                type: Input
-            }], mainArticle: [{
-                type: Input
-            }], articles: [{
-                type: Input
-            }], closeRelatedPopup: [{
-                type: Output
-            }], showClass: [{
-                type: HostBinding,
-                args: ['class.co-product-dialog']
-            }] } });
-
 class VectorObject {
 }
 class RenderParameters {
@@ -2861,7 +2728,6 @@ class ProductPageComponent {
         this.icon = IconEnum;
         this.createFrozenArticle = true;
         this.isReturn = false;
-        this.showRelatedProductsPopup = false;
         this.openStockEvent = new EventEmitter();
         this.configurable = true;
         this.threeD = false;
@@ -2968,14 +2834,10 @@ class ProductPageComponent {
                 });
             }
         });
-        this.showRelatedProductsPopup = false;
     }
     openStock() {
         this.openStockEvent.emit();
     }
-    handlePopUpChange(event) {
-        this.showRelatedProductsPopup = event;
-    }
     handleObjectAddedToScene(build) {
         if (this.threeD && this.enableRenderCarousel) {
             this._buildResult = build;
@@ -3019,7 +2881,7 @@ class ProductPageComponent {
         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.ConfiguratorEventService }, { token: i5.ConfiguratorConnectorService }, { token: i5.ConfiguringService }], 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", externalButtonTemplate: "externalButtonTemplate" }, 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: `
+    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", enableRenderCarousel: "enableRenderCarousel", externalButtonTemplate: "externalButtonTemplate" }, 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">
@@ -3125,8 +2987,7 @@ class ProductPageComponent {
                       [article]="article"
                       [externalSource]="externalSource"
                       [isReturn]="isReturn"
-                      (startConfiguration)="handleStartConfiguration()"
-                      (showRelatedPopup)="handlePopUpChange($event)">
+                      (startConfiguration)="handleStartConfiguration()">
                     </app-product-addtocart>
                   </div>
                 }
@@ -3199,19 +3060,9 @@ class ProductPageComponent {
             </div>
           </div>
         </div>
-        @if (showRelatedProductsPopup) {
-          <div>
-            <co-product-dialog
-              [mainArticle]="article"
-              [articles]="article?.relatedArticles"
-              [refType]="1"
-              (closeRelatedPopup)="handlePopUpChange($event)">
-            </co-product-dialog>
-          </div>
-        }
       </div>
     }
-  `, isInline: true, styles: [".co-product-page .page-wrapper{font-family:Public Sans;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 10px;margin:0 auto}.co-product-page .page-wrapper-content{display:flex;flex-direction:row;margin:0 0 10px;gap:10px}.co-product-page .page-wrapper-content:first-child{margin-top:10px}.co-product-page .page-wrapper-content.no-top-margin{margin-top:0}.co-product-page .swimming-lane{display:flex;box-shadow:1px 1px 4px #0000001a;padding:30px;background:#fff}.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-image .external-button-container{width:100%;display:flex;justify-content:space-between}.co-product-page .product-page-block-image .external-button-container .co-homedecorator-button{margin-left:auto}.co-product-page .product-page-block-image .external-button-container .co-homedecorator-button .co-button{margin-left:auto;cursor:pointer;background:#ececec;border-radius:10px}.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-lite-selector.floating co-selections-summary{position:relative}.co-product-page .product-page-block-price .show-configurator .co-lite-selector:not(.custom-dimensions).floating co-selections-summary{top:auto;background:none}.co-product-page .product-page-block-price .show-configurator .co-selections-summary .selections-content{gap:10px;box-sizing:border-box;padding:10px}.co-product-page .product-page-block-price .show-configurator .co-product-configurator .product-configurator-container{position:relative;width:auto;top:auto;right:auto;padding-left:0;padding-right:0;height:auto;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:#4e9b7e}.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:#4e9b7e}.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;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-extra-bottom{outline:none;padding:5px 0;background:transparent!important;min-height:60px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .co-button{margin:0 0 5px!important;width:34px;height:34px;border:none;background:#1a73e8;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .co-button .co-icon{width:28px;height:28px;margin:0 2px}.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:#1a73e8}.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: "directive", type: i6$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "configuring"] }, { 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: i5.ConfiguratorComponent, selector: "co-configurator", inputs: ["show", "sku", "instanceId", "settings", "scene", "showLoader", "showProgressBar", "showErrorMessages", "outputErrorMessages", "canCloseConfigurator", "animateSlideout", "showHeaderInformation"], outputs: ["isLoading", "updateProgressBar", "errorMessages", "showChange"] }, { kind: "component", type: i5.ConfiguratorSceneComponent, selector: "co-configurator-scene" }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+  `, isInline: true, styles: [".co-product-page .page-wrapper{font-family:Public Sans;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 10px;margin:0 auto}.co-product-page .page-wrapper-content{display:flex;flex-direction:row;margin:0 0 10px;gap:10px}.co-product-page .page-wrapper-content:first-child{margin-top:10px}.co-product-page .page-wrapper-content.no-top-margin{margin-top:0}.co-product-page .swimming-lane{display:flex;box-shadow:1px 1px 4px #0000001a;padding:30px;background:#fff}.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-image .external-button-container{width:100%;display:flex;justify-content:space-between}.co-product-page .product-page-block-image .external-button-container .co-homedecorator-button{margin-left:auto}.co-product-page .product-page-block-image .external-button-container .co-homedecorator-button .co-button{margin-left:auto;cursor:pointer;background:#ececec;border-radius:10px}.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-lite-selector.floating co-selections-summary{position:relative}.co-product-page .product-page-block-price .show-configurator .co-lite-selector:not(.custom-dimensions).floating co-selections-summary{top:auto;background:none}.co-product-page .product-page-block-price .show-configurator .co-selections-summary .selections-content{gap:10px;box-sizing:border-box;padding:10px}.co-product-page .product-page-block-price .show-configurator .co-product-configurator .product-configurator-container{position:relative;width:auto;top:auto;right:auto;padding-left:0;padding-right:0;height:auto;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:#4e9b7e}.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:#4e9b7e}.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;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-extra-bottom{outline:none;padding:5px 0;background:transparent!important;min-height:60px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .co-button{margin:0 0 5px!important;width:34px;height:34px;border:none;background:#1a73e8;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .co-button .co-icon{width:28px;height:28px;margin:0 2px}.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:#1a73e8}.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: "directive", type: i6$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "configuring"] }, { 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: RenderCarouselComponent, selector: "app-render-carousel", inputs: ["showRefresh", "article"] }, { kind: "component", type: i5.ConfiguratorComponent, selector: "co-configurator", inputs: ["show", "sku", "instanceId", "settings", "scene", "showLoader", "showProgressBar", "showErrorMessages", "outputErrorMessages", "canCloseConfigurator", "animateSlideout", "showHeaderInformation"], outputs: ["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': '*' })),
@@ -3353,8 +3204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                       [article]="article"
                       [externalSource]="externalSource"
                       [isReturn]="isReturn"
-                      (startConfiguration)="handleStartConfiguration()"
-                      (showRelatedPopup)="handlePopUpChange($event)">
+                      (startConfiguration)="handleStartConfiguration()">
                     </app-product-addtocart>
                   </div>
                 }
@@ -3427,16 +3277,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             </div>
           </div>
         </div>
-        @if (showRelatedProductsPopup) {
-          <div>
-            <co-product-dialog
-              [mainArticle]="article"
-              [articles]="article?.relatedArticles"
-              [refType]="1"
-              (closeRelatedPopup)="handlePopUpChange($event)">
-            </co-product-dialog>
-          </div>
-        }
       </div>
     }
   `, encapsulation: ViewEncapsulation.None, animations: [
@@ -3488,8 +3328,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], isReturn: [{
                 type: Input
-            }], showRelatedProductsPopup: [{
-                type: Input
             }], enableRenderCarousel: [{
                 type: Input
             }], externalButtonTemplate: [{
@@ -3604,7 +3442,7 @@ class IoneProductComponent {
         this.openStockEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IoneProductComponent, deps: [{ token: ProductEventService }, { token: ProductSettingsService }, { token: ProductConnectorService }, { token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IoneProductComponent, isStandalone: false, selector: "app-ione-product", inputs: { sku: "sku", isReturn: "isReturn", showRelatedProductsPopup: "showRelatedProductsPopup", enableRenderCarousel: "enableRenderCarousel", settings: "settings", handleAddArticleInternally: "handleAddArticleInternally", handleAddToCartInternally: "handleAddToCartInternally", externalButtonTemplate: "externalButtonTemplate" }, outputs: { onAddToCart: "onAddToCart", forceRenderImage: "forceRenderImage", getRenderForRenderCarousel: "getRenderForRenderCarousel", onAlternativeClick: "onAlternativeClick", onArticleInfoReceived: "onArticleInfoReceived", onArticleReceived: "onArticleReceived", onSelectionsReceived: "onSelectionsReceived", onAddToQuote: "onAddToQuote", openStockEvent: "openStockEvent", onAnswersAvailable: "onAnswersAvailable" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IoneProductComponent, isStandalone: false, selector: "app-ione-product", inputs: { sku: "sku", isReturn: "isReturn", enableRenderCarousel: "enableRenderCarousel", settings: "settings", handleAddArticleInternally: "handleAddArticleInternally", handleAddToCartInternally: "handleAddToCartInternally", externalButtonTemplate: "externalButtonTemplate" }, outputs: { onAddToCart: "onAddToCart", forceRenderImage: "forceRenderImage", getRenderForRenderCarousel: "getRenderForRenderCarousel", onAlternativeClick: "onAlternativeClick", onArticleInfoReceived: "onArticleInfoReceived", onArticleReceived: "onArticleReceived", onSelectionsReceived: "onSelectionsReceived", onAddToQuote: "onAddToQuote", openStockEvent: "openStockEvent", onAnswersAvailable: "onAnswersAvailable" }, providers: [
             ProductSettingsService,
             ProductConnectorService,
             ProductEventService,
@@ -3616,7 +3454,6 @@ class IoneProductComponent {
           [isReturn]="isReturn"
           [sku]="sku"
           [externalButtonTemplate]="externalButtonsTpl" 
-          [showRelatedProductsPopup]="showRelatedProductsPopup"
           [enableRenderCarousel]="enableRenderCarousel"
           (openStockEvent)="openStock()">
         </app-product-page>
@@ -3626,7 +3463,7 @@ class IoneProductComponent {
         <ng-content select="[externalButtons]"></ng-content>
       </ng-template>  
       
-    `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ProductPageComponent, selector: "app-product-page", inputs: ["sku", "settings", "externalSource", "createFrozenArticle", "isReturn", "showRelatedProductsPopup", "enableRenderCarousel", "externalButtonTemplate"], outputs: ["openStockEvent"] }] }); }
+    `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ProductPageComponent, selector: "app-product-page", inputs: ["sku", "settings", "externalSource", "createFrozenArticle", "isReturn", "enableRenderCarousel", "externalButtonTemplate"], outputs: ["openStockEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IoneProductComponent, decorators: [{
             type: Component,
@@ -3637,7 +3474,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           [isReturn]="isReturn"
           [sku]="sku"
           [externalButtonTemplate]="externalButtonsTpl" 
-          [showRelatedProductsPopup]="showRelatedProductsPopup"
           [enableRenderCarousel]="enableRenderCarousel"
           (openStockEvent)="openStock()">
         </app-product-page>
@@ -3660,8 +3496,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], isReturn: [{
                 type: Input
-            }], showRelatedProductsPopup: [{
-                type: Input
             }], enableRenderCarousel: [{
                 type: Input
             }], settings: [{
@@ -4175,6 +4009,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+class ProductDialogComponent {
+    showClass() {
+        return true;
+    }
+    constructor(iconCache, _sanitizer, _productConnectorService, _productConnectorAdapterService, _appEventService) {
+        this.iconCache = iconCache;
+        this._sanitizer = _sanitizer;
+        this._productConnectorService = _productConnectorService;
+        this._productConnectorAdapterService = _productConnectorAdapterService;
+        this._appEventService = _appEventService;
+        this.icon = IconEnum;
+        this.closeRelatedPopup = new EventEmitter();
+        this.type = SelectorType;
+    }
+    ngOnInit() {
+    }
+    closeCatalog() {
+        // need to emit close
+        this.closeRelatedPopup.emit(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDialogComponent, deps: [{ token: IconCacheService }, { token: i1.DomSanitizer }, { token: ProductConnectorService }, { token: ProductConnectorAdapterService }, { token: ProductEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ProductDialogComponent, isStandalone: false, selector: "co-product-dialog", inputs: { refType: "refType", mainArticle: "mainArticle", articles: "articles" }, outputs: { closeRelatedPopup: "closeRelatedPopup" }, host: { properties: { "class.co-product-dialog": "this.showClass" } }, ngImport: i0, template: `
+    <div class="product-dialog-wrap">
+      <div class="product-dialog-container">
+        <div class="container-header">
+          <div class="header-info">
+            <h3>
+              <co-icon [iconData]="iconCache.getIcon(icon.LinkSimpleRegular)"
+                (click)="closeCatalog()"></co-icon>{{ 'SUGGESTION' | localize }} <b>{{ mainArticle.name }}</b> ({{ mainArticle.articleNr }})
+              </h3>
+            </div>
+            <div class="close-icon" (click)="closeCatalog()">
+              <co-icon class="fullscreen-button"
+                [iconData]="iconCache.getIcon(icon.CrossSkinny)"
+              (click)="closeCatalog()"></co-icon>
+            </div>
+          </div>
+          <div class="related-product-container">
+            @if (articles) {
+              <app-product-related
+                class="no-padding"
+                [articles]="articles">
+              </app-product-related>
+            }
+          </div>
+          <div class="close-button-container">
+            <button class="ok-button" (click)="closeCatalog()">
+              <co-icon [iconData]="iconCache.getIcon(icon.SaveSkinny)"
+              (click)="closeCatalog()"></co-icon>
+            </button>
+            <button class="close-button" (click)="closeCatalog()">
+              <co-icon [iconData]="iconCache.getIcon(icon.CrossSkinny)"
+              (click)="closeCatalog()"></co-icon>
+            </button>
+          </div>
+        </div>
+      </div>
+    `, isInline: true, styles: [".product-dialog-wrap{display:flex;justify-content:center;position:absolute;z-index:800;top:0}.product-dialog-wrap .product-dialog-container{background:#fff;min-width:75vw;max-height:90vh;border:1px solid #F8F8F8}.product-dialog-wrap .product-dialog-container .container-header{display:flex;justify-content:space-between;border-bottom:1px solid #F8F8F8;padding:25px;box-sizing:border-box;align-items:center}.product-dialog-wrap .product-dialog-container .container-header .header-info h3{display:flex;align-items:center}.product-dialog-wrap .product-dialog-container .container-header .header-info h3 co-icon{margin-right:10px}.product-dialog-wrap .product-dialog-container .container-header .close-icon{cursor:pointer}.product-dialog-wrap .product-dialog-container .close-button-container{display:flex;justify-content:center;padding:10px}.product-dialog-wrap .product-dialog-container .close-button-container button{cursor:pointer;border:none;color:#fff;padding:8px;box-shadow:0 3px 3px #0000004d;height:auto;width:auto;margin:0 3px;border-radius:3px}.product-dialog-wrap .product-dialog-container .close-button-container button ::ng-deep co-icon{height:20px;width:20px}.product-dialog-wrap .product-dialog-container .close-button-container button ::ng-deep co-icon svg{fill:#fff}.product-dialog-wrap .product-dialog-container .close-button-container button ::ng-deep co-icon svg polygon{fill:#fff}.product-dialog-wrap .product-dialog-container .close-button-container .ok-button{background:#1a73e8}.product-dialog-wrap .product-dialog-container .close-button-container .close-button{background:#475060}::ng-deep .content-wrapper{width:auto!important}\n"], dependencies: [{ kind: "component", type: ProductRelatedComponent, selector: "app-product-related", inputs: ["refType", "label", "externalSource", "isSmallModus", "createFrozenArticle", "articles"] }, { 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: ProductDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'co-product-dialog', template: `
+    <div class="product-dialog-wrap">
+      <div class="product-dialog-container">
+        <div class="container-header">
+          <div class="header-info">
+            <h3>
+              <co-icon [iconData]="iconCache.getIcon(icon.LinkSimpleRegular)"
+                (click)="closeCatalog()"></co-icon>{{ 'SUGGESTION' | localize }} <b>{{ mainArticle.name }}</b> ({{ mainArticle.articleNr }})
+              </h3>
+            </div>
+            <div class="close-icon" (click)="closeCatalog()">
+              <co-icon class="fullscreen-button"
+                [iconData]="iconCache.getIcon(icon.CrossSkinny)"
+              (click)="closeCatalog()"></co-icon>
+            </div>
+          </div>
+          <div class="related-product-container">
+            @if (articles) {
+              <app-product-related
+                class="no-padding"
+                [articles]="articles">
+              </app-product-related>
+            }
+          </div>
+          <div class="close-button-container">
+            <button class="ok-button" (click)="closeCatalog()">
+              <co-icon [iconData]="iconCache.getIcon(icon.SaveSkinny)"
+              (click)="closeCatalog()"></co-icon>
+            </button>
+            <button class="close-button" (click)="closeCatalog()">
+              <co-icon [iconData]="iconCache.getIcon(icon.CrossSkinny)"
+              (click)="closeCatalog()"></co-icon>
+            </button>
+          </div>
+        </div>
+      </div>
+    `, standalone: false, styles: [".product-dialog-wrap{display:flex;justify-content:center;position:absolute;z-index:800;top:0}.product-dialog-wrap .product-dialog-container{background:#fff;min-width:75vw;max-height:90vh;border:1px solid #F8F8F8}.product-dialog-wrap .product-dialog-container .container-header{display:flex;justify-content:space-between;border-bottom:1px solid #F8F8F8;padding:25px;box-sizing:border-box;align-items:center}.product-dialog-wrap .product-dialog-container .container-header .header-info h3{display:flex;align-items:center}.product-dialog-wrap .product-dialog-container .container-header .header-info h3 co-icon{margin-right:10px}.product-dialog-wrap .product-dialog-container .container-header .close-icon{cursor:pointer}.product-dialog-wrap .product-dialog-container .close-button-container{display:flex;justify-content:center;padding:10px}.product-dialog-wrap .product-dialog-container .close-button-container button{cursor:pointer;border:none;color:#fff;padding:8px;box-shadow:0 3px 3px #0000004d;height:auto;width:auto;margin:0 3px;border-radius:3px}.product-dialog-wrap .product-dialog-container .close-button-container button ::ng-deep co-icon{height:20px;width:20px}.product-dialog-wrap .product-dialog-container .close-button-container button ::ng-deep co-icon svg{fill:#fff}.product-dialog-wrap .product-dialog-container .close-button-container button ::ng-deep co-icon svg polygon{fill:#fff}.product-dialog-wrap .product-dialog-container .close-button-container .ok-button{background:#1a73e8}.product-dialog-wrap .product-dialog-container .close-button-container .close-button{background:#475060}::ng-deep .content-wrapper{width:auto!important}\n"] }]
+        }], ctorParameters: () => [{ type: IconCacheService }, { type: i1.DomSanitizer }, { type: ProductConnectorService }, { type: ProductConnectorAdapterService }, { type: ProductEventService }], propDecorators: { refType: [{
+                type: Input
+            }], mainArticle: [{
+                type: Input
+            }], articles: [{
+                type: Input
+            }], closeRelatedPopup: [{
+                type: Output
+            }], showClass: [{
+                type: HostBinding,
+                args: ['class.co-product-dialog']
+            }] } });
+
 class ProductDialogModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ProductDialogModule, declarations: [ProductDialogComponent], imports: [CommonModule,
@@ -4709,7 +4654,7 @@ class ProductExternalSourceComponent {
         <ng-template #externalButtonsTpl>
           <ng-content select="[externalButtons]"></ng-content>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ProductPageComponent, selector: "app-product-page", inputs: ["sku", "settings", "externalSource", "createFrozenArticle", "isReturn", "showRelatedProductsPopup", "enableRenderCarousel", "externalButtonTemplate"], outputs: ["openStockEvent"] }, { kind: "component", type: ProductHdComponent, selector: "co-product-hd", inputs: ["sku", "token", "variant", "urlParams"], outputs: ["configuratorFinished", "configurationError"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: ProductPageComponent, selector: "app-product-page", inputs: ["sku", "settings", "externalSource", "createFrozenArticle", "isReturn", "enableRenderCarousel", "externalButtonTemplate"], outputs: ["openStockEvent"] }, { kind: "component", type: ProductHdComponent, selector: "co-product-hd", inputs: ["sku", "token", "variant", "urlParams"], outputs: ["configuratorFinished", "configurationError"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductExternalSourceComponent, decorators: [{
             type: Component,