@colijnit/product 2.9.1 → 12.0.0

package/fesm2015/colijnit-product.js

@@ -1,5 +1,6 @@
-import { __awaiter, __decorate } from 'tslib';
-import { ɵɵdefineInjectable, Injectable, ɵɵinject, Output, Directive, EventEmitter, ChangeDetectorRef, Input, Component, ViewEncapsulation, HostBinding, Renderer2, ViewChild, ElementRef, HostListener, Pipe, NgModule, SecurityContext, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i0 from '@angular/core';
+import { Injectable, Directive, Output, EventEmitter, Component, ViewEncapsulation, ChangeDetectorRef, Input, Renderer2, ViewChild, ElementRef, Pipe, NgModule, HostListener, HostBinding, SecurityContext, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { __awaiter } from 'tslib';
 import { Subject, BehaviorSubject } from 'rxjs';
 import { Options } from '@colijnit/ioneconnector/build/model/options';
 import { ArticleFullObject } from '@colijnit/articleapi/build/model/article-full-object';
@@ -10,13 +11,15 @@ import { DocumentContent } from '@colijnit/articleapi/build/model/document-conte
 import { BusinessObjectFactory } from '@colijnit/ioneconnector/build/service/business-object-factory';
 import { Transaction } from '@colijnit/transactionapi/build/transaction';
 import { MainApi } from '@colijnit/mainapi';
+import * as i1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import { StringUtils } from '@colijnit/ioneconnector/build/utils/string-utils';
 import { CommonModule } from '@angular/common';
-import { DomSanitizer } from '@angular/platform-browser';
 import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i1$1 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
 import { CoDocument } from '@colijnit/mainapi/build/model/co-document';
-import { IconModule, LoaderModule, NumberPickerModule, ButtonModule, PriceDisplayPipeModule, InputTextModule, FilesUploadModule, ScrollContainerModule, TileModule, LevelIndicatorModule, ArticleTileModule } from '@colijnit/corecomponents';
+import { LoaderModule, ScrollContainerModule, PriceDisplayPipeModule, NumberPickerModule, ButtonModule, ArticleTileModule, IconModule, FilesUploadModule, TileModule } from '@colijnit/corecomponents';
 import { ConfiguratorStatisticsEnvironment } from '@colijnit/articleapi/build/model/configurator-statistics-environment';
 
 // this file is dynamically created, do not change this
@@ -24,12 +27,12 @@ class Version {
     constructor() {
         this.name = "@colijnit/product";
         this.description = "Product detail page project for iOne";
-        this.symVer = "2.9.1";
-        this.publishDate = "14-9-2023 16:32:35";
+        this.symVer = "12.0.0";
+        this.publishDate = "23-9-2023 11:50:39";
     }
 }
 
-let JsonUtilsService = class JsonUtilsService {
+class JsonUtilsService {
     readJsonFile(filePath) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
@@ -47,13 +50,13 @@ let JsonUtilsService = class JsonUtilsService {
             }
         });
     }
-};
-JsonUtilsService.ɵprov = ɵɵdefineInjectable({ factory: function JsonUtilsService_Factory() { return new JsonUtilsService(); }, token: JsonUtilsService, providedIn: "root" });
-JsonUtilsService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], JsonUtilsService);
+}
+JsonUtilsService.ɵprov = i0.ɵɵdefineInjectable({ factory: function JsonUtilsService_Factory() { return new JsonUtilsService(); }, token: JsonUtilsService, providedIn: "root" });
+JsonUtilsService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
 
 class SettingsOptions {
     constructor() {
@@ -100,7 +103,7 @@ class ProductSettings {
 
 // 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.
 // Only to be used by the IOneControllerService.
-let ProductConnectorAdapterService = class ProductConnectorAdapterService {
+class ProductConnectorAdapterService {
     constructor() {
         this.showLoader = new Subject();
         this._boFactory = new BusinessObjectFactory();
@@ -233,10 +236,11 @@ let ProductConnectorAdapterService = class ProductConnectorAdapterService {
             return yield this.transactionConnector.getWebSessionSalesOrder();
         });
     }
-};
-ProductConnectorAdapterService = __decorate([
-    Injectable()
-], ProductConnectorAdapterService);
+}
+ProductConnectorAdapterService.decorators = [
+    { type: Injectable }
+];
+ProductConnectorAdapterService.ctorParameters = () => [];
 
 var LanguageCode;
 (function (LanguageCode) {
@@ -312,7 +316,7 @@ class Dictionary {
 }
 
 // The localization service, providing peers with text translation functionality.
-let DictionaryService = class DictionaryService {
+class DictionaryService {
     constructor(_http, _jsonUtils) {
         this._http = _http;
         this._jsonUtils = _jsonUtils;
@@ -383,19 +387,19 @@ let DictionaryService = class DictionaryService {
         }
         return text;
     }
-};
+}
+DictionaryService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DictionaryService_Factory() { return new DictionaryService(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(JsonUtilsService)); }, token: DictionaryService, providedIn: "root" });
+DictionaryService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
 DictionaryService.ctorParameters = () => [
     { type: HttpClient },
     { type: JsonUtilsService }
-];
-DictionaryService.ɵprov = ɵɵdefineInjectable({ factory: function DictionaryService_Factory() { return new DictionaryService(ɵɵinject(HttpClient), ɵɵinject(JsonUtilsService)); }, token: DictionaryService, providedIn: "root" });
-DictionaryService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], DictionaryService);
+];
 
-let ProductSettingsService = class ProductSettingsService {
+class ProductSettingsService {
     constructor(_jsonUtilsService, _dictionaryService) {
         this._jsonUtilsService = _jsonUtilsService;
         this._dictionaryService = _dictionaryService;
@@ -461,17 +465,17 @@ let ProductSettingsService = class ProductSettingsService {
             this.settingsLoaded.next(true);
         });
     }
-};
+}
+ProductSettingsService.decorators = [
+    { type: Injectable }
+];
 ProductSettingsService.ctorParameters = () => [
     { type: JsonUtilsService },
     { type: DictionaryService }
-];
-ProductSettingsService = __decorate([
-    Injectable()
-], ProductSettingsService);
+];
 
 // Holds all iONE backend related state and methods for a running HomeDecorator. To be used anywhere internally.
-let ProductConnectorService = class ProductConnectorService {
+class ProductConnectorService {
     constructor(_adapterService, _settingsService) {
         this._adapterService = _adapterService;
         this._settingsService = _settingsService;
@@ -560,16 +564,16 @@ let ProductConnectorService = class ProductConnectorService {
     onShowLoaderChange(showLoader) {
         this._shouldShowLoader = showLoader;
     }
-};
+}
+ProductConnectorService.decorators = [
+    { type: Injectable }
+];
 ProductConnectorService.ctorParameters = () => [
     { type: ProductConnectorAdapterService },
     { type: ProductSettingsService }
-];
-ProductConnectorService = __decorate([
-    Injectable()
-], ProductConnectorService);
+];
 
-let ProductEventService = class ProductEventService {
+class ProductEventService {
     constructor() {
         this.onAddToCart = new Subject();
         this.onAlternativeClick = new Subject();
@@ -584,25 +588,19 @@ let ProductEventService = class ProductEventService {
         this.onArticleInfoReceived = new Subject();
         this.onUpdateProductInfoTab = new Subject();
     }
-};
-__decorate([
-    Output()
-], ProductEventService.prototype, "onAddToCart", void 0);
-__decorate([
-    Output()
-], ProductEventService.prototype, "onAlternativeClick", void 0);
-__decorate([
-    Output()
-], ProductEventService.prototype, "onAddToQuote", void 0);
-__decorate([
-    Output()
-], ProductEventService.prototype, "onForceRenderImage", void 0);
-ProductEventService = __decorate([
-    Directive(),
-    Injectable()
-], ProductEventService);
+}
+ProductEventService.decorators = [
+    { type: Directive },
+    { type: Injectable }
+];
+ProductEventService.propDecorators = {
+    onAddToCart: [{ type: Output }],
+    onAlternativeClick: [{ type: Output }],
+    onAddToQuote: [{ type: Output }],
+    onForceRenderImage: [{ type: Output }]
+};
 
-let IoneProductComponent = class IoneProductComponent {
+class IoneProductComponent {
     constructor(_dictionary, _jsonUtils, _ione, _changeDetector, _appEventService, _settingsService) {
         // this.sku = 'CF-HILL';
         // this.sku = 'CF-ALMADA';
@@ -627,6 +625,7 @@ let IoneProductComponent = class IoneProductComponent {
         this.onArticleReceived = new EventEmitter();
         this.onSelectionsReceived = new EventEmitter();
         this.onAddToQuote = new EventEmitter();
+        this.openStockEvent = new EventEmitter();
         this.settingsLoaded = false;
         this._subs = [];
         // this.sku = "70000107";
@@ -696,7 +695,28 @@ let IoneProductComponent = class IoneProductComponent {
             this.onAddToCart.emit(json);
         });
     }
-};
+    openStock() {
+        this.openStockEvent.emit();
+    }
+}
+IoneProductComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-ione-product',
+                template: `
+      <app-product-page *ngIf="settingsLoaded"
+                        (openStockEvent)="openStock()" [sku]="sku"
+      ></app-product-page>
+  `,
+                providers: [
+                    ProductEventService,
+                    ProductSettingsService,
+                    ProductConnectorAdapterService,
+                    ProductConnectorService
+                ],
+                encapsulation: ViewEncapsulation.Emulated,
+                styles: [""]
+            },] }
+];
 IoneProductComponent.ctorParameters = () => [
     { type: DictionaryService },
     { type: JsonUtilsService },
@@ -705,166 +725,18 @@ IoneProductComponent.ctorParameters = () => [
     { type: ProductEventService },
     { type: ProductSettingsService }
 ];
-__decorate([
-    Input()
-], IoneProductComponent.prototype, "sku", void 0);
-__decorate([
-    Input()
-], IoneProductComponent.prototype, "settings", null);
-__decorate([
-    Output()
-], IoneProductComponent.prototype, "onAddToCart", void 0);
-__decorate([
-    Output()
-], IoneProductComponent.prototype, "forceRenderImage", void 0);
-__decorate([
-    Output()
-], IoneProductComponent.prototype, "onAlternativeClick", void 0);
-__decorate([
-    Output()
-], IoneProductComponent.prototype, "onArticleInfoReceived", void 0);
-__decorate([
-    Output()
-], IoneProductComponent.prototype, "onArticleReceived", void 0);
-__decorate([
-    Output()
-], IoneProductComponent.prototype, "onSelectionsReceived", void 0);
-__decorate([
-    Output()
-], IoneProductComponent.prototype, "onAddToQuote", void 0);
-IoneProductComponent = __decorate([
-    Component({
-        selector: 'app-ione-product',
-        template: `
-    <app-product-page *ngIf="settingsLoaded"
-        [sku]="sku"
-    ></app-product-page>
-  `,
-        providers: [
-            ProductEventService,
-            ProductSettingsService,
-            ProductConnectorAdapterService,
-            ProductConnectorService
-        ],
-        encapsulation: ViewEncapsulation.Emulated,
-        styles: [""]
-    })
-], IoneProductComponent);
-
-let ProductExternalSourceComponent = class ProductExternalSourceComponent {
-    constructor(_sanitizer, _productConnectorService, _appEventService) {
-        this._sanitizer = _sanitizer;
-        this._productConnectorService = _productConnectorService;
-        this._appEventService = _appEventService;
-        this.addToCart = new EventEmitter();
-        this.addToQuote = new EventEmitter();
-        this.alternativeClick = new EventEmitter();
-        this.showProduct = false;
-        this.loaded = false;
-        this.externalSettings = {};
-        this._subs = [];
-    }
-    set externalSource(value) {
-        this._externalSource = value;
-        this.loaded = false;
-        this._prepareExternalSource();
-    }
-    get externalSource() {
-        return this._externalSource;
-    }
-    showClass() {
-        return true;
-    }
-    ngOnInit() {
-        this._subs.push(this._appEventService.onAddToCart.subscribe(json => this.addToCart.next(json)), this._appEventService.onAddToQuote.subscribe(json => this.addToQuote.next(json)), this._appEventService.onAlternativeClick.subscribe(article => this.alternativeClick.next(article)));
-    }
-    ngOnDestroy() {
-        this._subs.forEach(s => s.unsubscribe());
-    }
-    _prepareExternalSource() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this._externalSource) {
-                return;
-            }
-            this.externalUrl = undefined;
-            this.externalSettings = {};
-            if (this.externalSource.type === 'CATF') {
-                // get bundle settings from external source
-                const bundleSettings = yield this._productConnectorService.getProductBundleSettings(this.externalSource.url, parseInt(this.externalSource.schema, 0));
-                this.externalSettings = JSON.parse(bundleSettings);
-                if (this.options) {
-                    this.externalSettings.options = this.options;
-                }
-                // this.externalSettings.assetPath = "https://cdn1.colijn-it.nl/content43";
-                // this.externalSettings.threeDAssetPath = "https://cdn1.colijn-it.nl/content43";
-                if (this.externalSource.username && this.externalSource.password) {
-                    this.externalSettings.useLoginEncryption = true;
-                    this.externalSettings.username = this.externalSource.username;
-                    this.externalSettings.password = this.externalSource.password;
-                }
-                // finally show the catalog
-                this.showProduct = true;
-            }
-            else {
-                this.externalUrl = this.externalSource.url;
-                this.safeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(this.externalUrl);
-                this.showProduct = false;
-            }
-            this.loaded = true;
-        });
-    }
-};
-ProductExternalSourceComponent.ctorParameters = () => [
-    { type: DomSanitizer },
-    { type: ProductConnectorService },
-    { type: ProductEventService }
-];
-__decorate([
-    Input()
-], ProductExternalSourceComponent.prototype, "sku", void 0);
-__decorate([
-    Input()
-], ProductExternalSourceComponent.prototype, "externalSource", null);
-__decorate([
-    Input()
-], ProductExternalSourceComponent.prototype, "options", void 0);
-__decorate([
-    Output()
-], ProductExternalSourceComponent.prototype, "addToCart", void 0);
-__decorate([
-    Output()
-], ProductExternalSourceComponent.prototype, "addToQuote", void 0);
-__decorate([
-    Output()
-], ProductExternalSourceComponent.prototype, "alternativeClick", void 0);
-__decorate([
-    HostBinding('class.co-product-external-source')
-], ProductExternalSourceComponent.prototype, "showClass", null);
-ProductExternalSourceComponent = __decorate([
-    Component({
-        selector: 'co-product-external-source',
-        template: `
-        <ng-container *ngIf="loaded">
-            <ng-container *ngIf="showProduct">
-                <app-product-page
-                        [sku]="sku"
-                        [settings]="externalSettings"
-                ></app-product-page>
-            </ng-container>
-            <ng-container *ngIf="!showProduct">
-                <iframe width="100%" height="100%" [src]="safeUrl" frameborder="0" allowfullscreen></iframe>
-            </ng-container>
-        </ng-container>
-    `,
-        providers: [
-            ProductEventService,
-            ProductSettingsService,
-            ProductConnectorAdapterService,
-            ProductConnectorService
-        ],
-        encapsulation: ViewEncapsulation.None
-    })
-], ProductExternalSourceComponent);
+IoneProductComponent.propDecorators = {
+    sku: [{ type: Input }],
+    settings: [{ type: Input }],
+    onAddToCart: [{ type: Output }],
+    forceRenderImage: [{ type: Output }],
+    onAlternativeClick: [{ type: Output }],
+    onArticleInfoReceived: [{ type: Output }],
+    onArticleReceived: [{ type: Output }],
+    onSelectionsReceived: [{ type: Output }],
+    onAddToQuote: [{ type: Output }],
+    openStockEvent: [{ type: Output }]
+};
 
 class StockAndDelivery {
     constructor(stock, deliveryDescription) {
@@ -918,7 +790,7 @@ const IconSvg = {
     "warehouse": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\" version=\"1.1\" sodipodi:docname=\"warehouse.svg\" inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\"><metadata ><rdf:RDF><cc:Work rdf:about=\"\"><dc:format>image/svg+xml</dc:format><dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs /><sodipodi:namedview pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1\" objecttolerance=\"10\" gridtolerance=\"10\" guidetolerance=\"10\" inkscape:pageopacity=\"0\" inkscape:pageshadow=\"2\" inkscape:window-width=\"1920\" inkscape:window-height=\"1017\" showgr inkscape:zoom=\"6.675088\" inkscape:cx=\"9.6569985\" inkscape:cy=\"12.384637\" inkscape:window-x=\"-8\" inkscape:window-y=\"-8\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"svg8\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"M 507.785,146.242 260.318,1.175 c -2.603,-1.519 -5.803,-1.57 -8.439,-0.111 L 4.412,137.598 C 1.69,139.091 0,141.958 0,145.064 v 358.4 c 0,4.719 3.823,8.533 8.533,8.533 H 51.2 c 4.71,0 8.533,-3.814 8.533,-8.533 V 204.798 h 392.533 v 298.667 c 0,4.719 3.814,8.533 8.533,8.533 h 42.667 c 4.719,0 8.533,-3.814 8.533,-8.533 V 153.598 c 10e-4,-3.03 -1.603,-5.829 -4.214,-7.356 z m -12.852,348.689 h -25.6 V 196.264 c 0,-4.71 -3.814,-8.533 -8.533,-8.533 H 51.2 c -4.71,0 -8.533,3.823 -8.533,8.533 v 298.667 h -25.6 V 150.099 L 255.872,18.344 494.933,158.487 Z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"m 426.667,392.531 h -102.4 c -4.719,0 -8.533,3.814 -8.533,8.533 v 102.4 c 0,4.719 3.814,8.533 8.533,8.533 h 102.4 c 4.719,0 8.533,-3.814 8.533,-8.533 v -102.4 c 0,-4.719 -3.814,-8.533 -8.533,-8.533 z m -8.534,102.4 H 332.8 v -85.333 h 85.333 z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"m 384,401.064 v 25.6 h -17.067 v -25.6 h -17.067 v 34.133 c 0,4.719 3.814,8.533 8.533,8.533 h 34.133 c 4.719,0 8.533,-3.814 8.533,-8.533 v -34.133 z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"m 324.267,392.531 h -102.4 c -4.71,0 -8.533,3.814 -8.533,8.533 v 102.4 c 0,4.719 3.823,8.533 8.533,8.533 h 102.4 c 4.719,0 8.533,-3.814 8.533,-8.533 v -102.4 c 0,-4.719 -3.814,-8.533 -8.533,-8.533 z m -8.534,102.4 H 230.4 v -85.333 h 85.333 z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"m 281.6,401.064 v 25.6 h -17.067 v -25.6 h -17.067 v 34.133 c 0,4.719 3.823,8.533 8.533,8.533 h 34.133 c 4.719,0 8.533,-3.814 8.533,-8.533 v -34.133 z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"m 426.667,290.131 h -102.4 c -4.719,0 -8.533,3.814 -8.533,8.533 v 102.4 c 0,4.719 3.814,8.533 8.533,8.533 h 102.4 c 4.719,0 8.533,-3.814 8.533,-8.533 v -102.4 c 0,-4.719 -3.814,-8.533 -8.533,-8.533 z m -8.534,102.4 H 332.8 v -85.333 h 85.333 z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"m 384,298.664 v 25.6 h -17.067 v -25.6 h -17.067 v 34.133 c 0,4.719 3.814,8.533 8.533,8.533 h 34.133 c 4.719,0 8.533,-3.814 8.533,-8.533 v -34.133 z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><rect x=\"51.200001\" y=\"255.998\" width=\"409.60001\" height=\"17.066999\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><rect x=\"51.200001\" y=\"221.864\" width=\"409.60001\" height=\"17.066999\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"m 298.667,119.464 h -85.333 c -4.71,0 -8.533,3.823 -8.533,8.533 v 34.133 c 0,4.71 3.823,8.533 8.533,8.533 h 85.333 c 4.719,0 8.533,-3.823 8.533,-8.533 v -34.133 c 0,-4.71 -3.814,-8.533 -8.533,-8.533 z m -8.534,34.134 h -68.267 v -17.067 h 68.267 z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.05570714,0,0,0.05570648,10.763,10.859394)\" style=\"fill:#484f60;fill-opacity:1\" /></svg>"
 };
 
-let IconCacheService = class IconCacheService {
+class IconCacheService {
     constructor(_sanitizer) {
         this._sanitizer = _sanitizer;
         this._iconCache = {};
@@ -942,18 +814,18 @@ let IconCacheService = class IconCacheService {
             }
         }
     }
-};
+}
+IconCacheService.ɵprov = i0.ɵɵdefineInjectable({ factory: function IconCacheService_Factory() { return new IconCacheService(i0.ɵɵinject(i1$1.DomSanitizer)); }, token: IconCacheService, providedIn: "root" });
+IconCacheService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
 IconCacheService.ctorParameters = () => [
     { type: DomSanitizer }
-];
-IconCacheService.ɵprov = ɵɵdefineInjectable({ factory: function IconCacheService_Factory() { return new IconCacheService(ɵɵinject(DomSanitizer)); }, token: IconCacheService, providedIn: "root" });
-IconCacheService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], IconCacheService);
+];
 
-let ProductPageComponent = class ProductPageComponent {
+class ProductPageComponent {
     constructor(_ione, _renderer, _changeDetector, iconCache, settingsService, appEventService) {
         this._ione = _ione;
         this._renderer = _renderer;
@@ -962,6 +834,7 @@ let ProductPageComponent = class ProductPageComponent {
         this.settingsService = settingsService;
         this.appEventService = appEventService;
         this.icon = IconEnum;
+        this.openStockEvent = new EventEmitter();
         this.configurable = false;
         this.threeD = false;
         this.show2D = true;
@@ -1095,7 +968,49 @@ let ProductPageComponent = class ProductPageComponent {
             }));
         });
     }
-};
+    openStock() {
+        this.openStockEvent.emit();
+    }
+}
+ProductPageComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-product-page',
+                template: "<ng-container *ngIf=\"settingsLoaded\">\r\n  <div class=\"page-wrapper\">\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <div class=\"product-image-container\">\r\n          <div class=\"product-page-block-selector-type\">\r\n            <app-product-selector-type class=\"default-padding\"\r\n              [(currentType)]=\"currentView\"\r\n              [show2D]=\"configurable\"\r\n              [show3D]=\"threeD\"\r\n            ></app-product-selector-type>\r\n          </div>\r\n          <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n            <app-image-carousel [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\" [images]=\"article?.images\" [showRefresh]=\"configurable && threeD\"></app-image-carousel>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-configurator #configurator class=\"threed-configurator\"\r\n                                   [class.configurator-full-screen]=\"fullScreen\"\r\n                                   [@toggleVisibilityByState]=\"show3D ? 'show' : 'hide'\"\r\n                                   [@toggleFullScreen]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n              ></threed-configurator>\r\n            </ng-container>\r\n            <co-icon #fullscreenbutton class=\"fullscreen-button\" *ngIf=\"show3D\"\r\n                     [@toggleTopLeft]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                     [iconData]=\"iconCache.getIcon(fullScreenIcon)\"\r\n                     (click)=\"showFullScreen()\"></co-icon>\r\n            <co-icon class=\"threed-watermark\" *ngIf=\"show3D && fullScreen\"\r\n                     [iconData]=\"iconCache.getIcon(icon.Logo)\"></co-icon>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-description\">\r\n          <app-product-description class=\"default-padding\" [article]=\"article\"></app-product-description>\r\n        </div>\r\n        <div class=\"product-page-block-additional\">\r\n          <div class=\"product-page-block-additional-description\">\r\n            <app-product-additional-description class=\"default-padding\" [article]=\"article\"></app-product-additional-description>\r\n          </div>\r\n          <div class=\"product-page-block-price\" [class.full]=\"configuring\">\r\n            <app-product-price class=\"s-padding\" *ngIf=\"!configuring\"\r\n                               [pricing]=\"article?.pricing\"\r\n                               [configurable]=\"configurable\"\r\n            ></app-product-price>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-selections #selections class=\"threed-selections\" [class.show-selections]=\"configuring\" [@toggleFullScreenRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                                 [class.default-padding]=\"!fullScreen\"\r\n                                 [class.show-full-screen]=\"fullScreen\"\r\n                                 [class.mini-scrollbar]=\"fullScreen\"\r\n                                 [sku]=\"sku\"\r\n                                 [settings]=\"settings\"\r\n                                 (onUserActionFromThreeD)=\"configuring = true\"\r\n                                 (instanceSet)=\"setInstance($event)\"\r\n                                 (onImageReceived)=\"appEventService.onImageReceived.next($event)\"\r\n                                 (onRenderStarted)=\"appEventService.onRenderStarted.next()\"\r\n                                 (onDraftRenderImageReceived)=\"appEventService.onDraftRenderImageReceived.next($event)\"\r\n                                 (onArticleReceived)=\"appEventService.onArticleReceived.next($event.detail)\"\r\n                                 (onSelectionsReceived)=\"appEventService.onSelectionsReceived.next($event.detail)\"\r\n                                 (onArticleInfoReceived)=\"appEventService.onArticleInfoReceived.next($event.detail)\"\r\n              ></threed-selections>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"product-page-block-addtocart no-padding product-action-buttons\" *ngIf=\"!configuring\" [@toggleTopRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n            <app-product-addtocart\r\n                                   [configurable]=\"configurable\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"addtocart-reserved product-action-buttons\" *ngIf=\"configuring\" [class.full-screen]=\"fullScreen\">\r\n            <app-product-addtocart class=\"default-padding\"\r\n                                   [configurable]=\"false\"\r\n                                   [fullscreen]=\"fullScreen\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"product-page-block-variants\">\r\n            <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>\r\n          </div>\r\n          <div class=\"product-page-block-stock\">\r\n            <app-product-stock class=\"no-padding\" (openStockEvent)=\"openStock()\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-stock>\r\n          </div>\r\n          <div class=\"product-page-block-delivery\">\r\n            <app-product-delivery class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-delivery>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <app-product-info-tabs class=\"no-padding\" [article]=\"article\"></app-product-info-tabs>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-related s-padding\">\r\n            <app-product-related *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"1\" [label]=\"'RELATED_PRODUCTS' | localize\"></app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content no-top-margin\">\r\n      <div class=\"page-wrapper-full\">\r\n        <div class=\"product-page-block-alternatives s-padding\">\r\n          <app-product-related *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                               [articles]=\"article?.relatedArticles\" [refType]=\"4\" [isSmallModus]=\"false\" [label]=\"'ALTERNATIVE_PRODUCTS' | localize\"></app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n",
+                animations: [
+                    trigger('toggleFullScreen', [
+                        state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
+                        state('halfscreen', style({ 'position': '*', 'top': '*', 'left': '*', 'width': '*', 'height': '*' })),
+                        transition('halfscreen <=> fullscreen', animate('200ms ease-in-out')),
+                    ]),
+                    trigger('toggleTopLeft', [
+                        state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0' })),
+                        state('halfscreen', style({ 'position': 'absolute', 'top': '*', 'left': '*' })),
+                        transition('halfscreen <=> fullscreen', animate('200ms ease-in-out')),
+                    ]),
+                    trigger('toggleTopRight', [
+                        state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'right': '0' })),
+                        state('halfscreen', style({ 'position': '*', 'top': '*', 'right': '*' })),
+                        transition('halfscreen <=> fullscreen', animate('200ms ease-in-out')),
+                    ]),
+                    trigger('toggleFullScreenRight', [
+                        state('fullscreen', style({ 'position': 'fixed', 'width': '400px', 'top': '0', 'right': '0' })),
+                        state('halfscreen', style({ 'position': '*', 'width': '*', 'top': '*', 'right': '*' })),
+                        transition('halfscreen <=> fullscreen', animate('200ms ease-in-out')),
+                    ]),
+                    trigger('toggleVisibilityByState', [
+                        state('hide', style({ 'opacity': '0', 'display': 'none' })),
+                        state('show', style({ 'display': 'block', 'opacity': '1' })),
+                        transition('hide <=> show', animate('200ms 100ms ease-in-out')),
+                    ]),
+                    trigger('toggleVisibility', [
+                        state('void', style({ 'opacity': '0' })),
+                        state('*', style({ 'opacity': '1' })),
+                        transition('void => *', animate('200ms ease-in-out')),
+                    ])
+                ],
+                styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:1400px;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child{margin-top:0}.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:55%;flex-direction:column}.page-wrapper-right{display:flex;width:45%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:1px solid #efefef}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional{width:100%}.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74B77F}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;grid-gap:15px;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:all .2s ease}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{position:absolute;right:0;bottom:0;margin:0 -40px 0 0;transition:all .2s ease;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:bold;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:bold;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left{width:100%}.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"]
+            },] }
+];
 ProductPageComponent.ctorParameters = () => [
     { type: ProductConnectorService },
     { type: Renderer2 },
@@ -1104,62 +1019,16 @@ ProductPageComponent.ctorParameters = () => [
     { type: ProductSettingsService },
     { type: ProductEventService }
 ];
-__decorate([
-    ViewChild('configurator', { read: ElementRef })
-], ProductPageComponent.prototype, "configurator", void 0);
-__decorate([
-    ViewChild('selections', { read: ElementRef })
-], ProductPageComponent.prototype, "selections", void 0);
-__decorate([
-    ViewChild('fullscreenbutton', { read: ElementRef })
-], ProductPageComponent.prototype, "fullscreenbutton", void 0);
-__decorate([
-    Input()
-], ProductPageComponent.prototype, "sku", null);
-__decorate([
-    Input()
-], ProductPageComponent.prototype, "settings", null);
-ProductPageComponent = __decorate([
-    Component({
-        selector: 'app-product-page',
-        template: "<ng-container *ngIf=\"settingsLoaded\">\r\n  <div class=\"page-wrapper\">\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <div class=\"product-image-container\">\r\n          <div class=\"product-page-block-selector-type\">\r\n            <app-product-selector-type class=\"default-padding\"\r\n              [(currentType)]=\"currentView\"\r\n              [show2D]=\"configurable\"\r\n              [show3D]=\"threeD\"\r\n            ></app-product-selector-type>\r\n          </div>\r\n          <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n            <app-image-carousel [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\" [images]=\"article?.images\" [showRefresh]=\"configurable && threeD\"></app-image-carousel>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-configurator #configurator class=\"threed-configurator\"\r\n                                   [class.configurator-full-screen]=\"fullScreen\"\r\n                                   [@toggleVisibilityByState]=\"show3D ? 'show' : 'hide'\"\r\n                                   [@toggleFullScreen]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n              ></threed-configurator>\r\n            </ng-container>\r\n            <co-icon #fullscreenbutton class=\"fullscreen-button\" *ngIf=\"show3D\"\r\n                     [@toggleTopLeft]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                     [iconData]=\"iconCache.getIcon(fullScreenIcon)\"\r\n                     (click)=\"showFullScreen()\"></co-icon>\r\n            <co-icon class=\"threed-watermark\" *ngIf=\"show3D && fullScreen\"\r\n                     [iconData]=\"iconCache.getIcon(icon.Logo)\"></co-icon>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-description\">\r\n          <app-product-description class=\"default-padding\" [article]=\"article\"></app-product-description>\r\n        </div>\r\n        <div class=\"product-page-block-additional\">\r\n          <div class=\"product-page-block-additional-description\">\r\n            <app-product-additional-description class=\"default-padding\" [article]=\"article\"></app-product-additional-description>\r\n          </div>\r\n          <div class=\"product-page-block-price\" [class.full]=\"configuring\">\r\n            <app-product-price class=\"s-padding\" *ngIf=\"!configuring\"\r\n                               [pricing]=\"article?.pricing\"\r\n                               [configurable]=\"configurable\"\r\n            ></app-product-price>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-selections #selections class=\"threed-selections\" [class.show-selections]=\"configuring\" [@toggleFullScreenRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                                 [class.default-padding]=\"!fullScreen\"\r\n                                 [class.show-full-screen]=\"fullScreen\"\r\n                                 [class.mini-scrollbar]=\"fullScreen\"\r\n                                 [sku]=\"sku\"\r\n                                 [settings]=\"settings\"\r\n                                 (onUserActionFromThreeD)=\"configuring = true\"\r\n                                 (instanceSet)=\"setInstance($event)\"\r\n                                 (onImageReceived)=\"appEventService.onImageReceived.next($event)\"\r\n                                 (onRenderStarted)=\"appEventService.onRenderStarted.next()\"\r\n                                 (onDraftRenderImageReceived)=\"appEventService.onDraftRenderImageReceived.next($event)\"\r\n                                 (onArticleReceived)=\"appEventService.onArticleReceived.next($event.detail)\"\r\n                                 (onSelectionsReceived)=\"appEventService.onSelectionsReceived.next($event.detail)\"\r\n                                 (onArticleInfoReceived)=\"appEventService.onArticleInfoReceived.next($event.detail)\"\r\n              ></threed-selections>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"product-page-block-addtocart no-padding product-action-buttons\" *ngIf=\"!configuring\" [@toggleTopRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n            <app-product-addtocart\r\n                                   [configurable]=\"configurable\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"addtocart-reserved product-action-buttons\" *ngIf=\"configuring\" [class.full-screen]=\"fullScreen\">\r\n            <app-product-addtocart class=\"default-padding\"\r\n                                   [configurable]=\"false\"\r\n                                   [fullscreen]=\"fullScreen\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"product-page-block-variants\">\r\n            <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>\r\n          </div>\r\n          <div class=\"product-page-block-stock\">\r\n            <app-product-stock class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-stock>\r\n          </div>\r\n          <div class=\"product-page-block-delivery\">\r\n            <app-product-delivery class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-delivery>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <app-product-info-tabs class=\"no-padding\" [article]=\"article\"></app-product-info-tabs>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-related s-padding\">\r\n            <app-product-related *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"1\" [label]=\"'RELATED_PRODUCTS' | localize\"></app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content no-top-margin\">\r\n      <div class=\"page-wrapper-full\">\r\n        <div class=\"product-page-block-alternatives s-padding\">\r\n          <app-product-related *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                               [articles]=\"article?.relatedArticles\" [refType]=\"4\" [isSmallModus]=\"false\" [label]=\"'ALTERNATIVE_PRODUCTS' | localize\"></app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n",
-        animations: [
-            trigger('toggleFullScreen', [
-                state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
-                state('halfscreen', style({ 'position': '*', 'top': '*', 'left': '*', 'width': '*', 'height': '*' })),
-                transition('halfscreen <=> fullscreen', animate('200ms ease-in-out')),
-            ]),
-            trigger('toggleTopLeft', [
-                state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0' })),
-                state('halfscreen', style({ 'position': 'absolute', 'top': '*', 'left': '*' })),
-                transition('halfscreen <=> fullscreen', animate('200ms ease-in-out')),
-            ]),
-            trigger('toggleTopRight', [
-                state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'right': '0' })),
-                state('halfscreen', style({ 'position': '*', 'top': '*', 'right': '*' })),
-                transition('halfscreen <=> fullscreen', animate('200ms ease-in-out')),
-            ]),
-            trigger('toggleFullScreenRight', [
-                state('fullscreen', style({ 'position': 'fixed', 'width': '400px', 'top': '0', 'right': '0' })),
-                state('halfscreen', style({ 'position': '*', 'width': '*', 'top': '*', 'right': '*' })),
-                transition('halfscreen <=> fullscreen', animate('200ms ease-in-out')),
-            ]),
-            trigger('toggleVisibilityByState', [
-                state('hide', style({ 'opacity': '0', 'display': 'none' })),
-                state('show', style({ 'display': 'block', 'opacity': '1' })),
-                transition('hide <=> show', animate('200ms 100ms ease-in-out')),
-            ]),
-            trigger('toggleVisibility', [
-                state('void', style({ 'opacity': '0' })),
-                state('*', style({ 'opacity': '1' })),
-                transition('void => *', animate('200ms ease-in-out')),
-            ])
-        ],
-        styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:1400px;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content.no-top-margin,.page-wrapper-content:first-child{margin-top:0}.page-wrapper-left{display:flex;width:55%;flex-direction:column}.page-wrapper-right{display:flex;width:45%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:1px solid #efefef}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:.2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional,.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74b77f}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px 0 rgba(0,0,0,.2)}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:.14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:0;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:.2s}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{position:absolute;right:0;bottom:0;margin:0 -40px 0 0;transition:.2s;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313c;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:0;padding:15px 0;background:0 0!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:700;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:700;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width:950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left,.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width:650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}"]
-    })
-], ProductPageComponent);
+ProductPageComponent.propDecorators = {
+    configurator: [{ type: ViewChild, args: ['configurator', { read: ElementRef },] }],
+    selections: [{ type: ViewChild, args: ['selections', { read: ElementRef },] }],
+    fullscreenbutton: [{ type: ViewChild, args: ['fullscreenbutton', { read: ElementRef },] }],
+    sku: [{ type: Input }],
+    settings: [{ type: Input }],
+    openStockEvent: [{ type: Output }]
+};
 
-let ProductSelectorTypeComponent = class ProductSelectorTypeComponent {
+class ProductSelectorTypeComponent {
     constructor(_iconCache, _changeDetector) {
         this._iconCache = _iconCache;
         this._changeDetector = _changeDetector;
@@ -1178,35 +1047,101 @@ let ProductSelectorTypeComponent = class ProductSelectorTypeComponent {
         this.onIconClick.next(this.currentType);
         this._changeDetector.detectChanges();
     }
-};
+}
+ProductSelectorTypeComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-product-selector-type',
+                template: `
+        <div *ngIf="show2D || show3D" class="show-in" [textContent]="'SHOW_IN' | localize"></div>
+<!--
+        <co-icon *ngIf="show2D" class="selector-type-icon"
+                 [class.active]="currentType === type.TwoD"
+                 [iconData]="twoDIcon"
+                 (click)="handleIconClick(type.TwoD)"
+        ></co-icon>
+        <co-icon *ngIf="show3D" class="selector-type-icon"
+                 [class.active]="currentType === type.ThreeD"
+                 [iconData]="threeDIcon"
+                 (click)="handleIconClick(type.ThreeD)"
+        ></co-icon>
+-->
+  `,
+                styles: [":host{display:flex;flex-direction:row;align-items:center}:host .show-in{display:none}:host>*:not(:last-child){margin-right:10px}::ng-deep co-icon.selector-type-icon{box-shadow:inset 0 0 0 1px #22313c;border-radius:50%;background:none;height:34px;width:34px;cursor:pointer}::ng-deep co-icon.selector-type-icon.active{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}::ng-deep co-icon.selector-type-icon.active [fill]{fill:#fff}\n"]
+            },] }
+];
 ProductSelectorTypeComponent.ctorParameters = () => [
     { type: IconCacheService },
     { type: ChangeDetectorRef }
 ];
-__decorate([
-    Input()
-], ProductSelectorTypeComponent.prototype, "show2D", void 0);
-__decorate([
-    Input()
-], ProductSelectorTypeComponent.prototype, "show3D", void 0);
-__decorate([
-    Input()
-], ProductSelectorTypeComponent.prototype, "currentType", void 0);
-__decorate([
-    Output()
-], ProductSelectorTypeComponent.prototype, "onIconClick", void 0);
-__decorate([
-    Output()
-], ProductSelectorTypeComponent.prototype, "currentTypeChange", void 0);
-ProductSelectorTypeComponent = __decorate([
-    Component({
-        selector: 'app-product-selector-type',
-        template: "<div *ngIf=\"show2D || show3D\" class=\"show-in\" [textContent]=\"'SHOW_IN' | localize\"></div>\n<co-icon *ngIf=\"show2D\" class=\"selector-type-icon\"\n         [class.active]=\"currentType === type.TwoD\"\n         [iconData]=\"twoDIcon\"\n         (click)=\"handleIconClick(type.TwoD)\"\n></co-icon>\n<co-icon *ngIf=\"show3D\" class=\"selector-type-icon\"\n         [class.active]=\"currentType === type.ThreeD\"\n         [iconData]=\"threeDIcon\"\n         (click)=\"handleIconClick(type.ThreeD)\"\n></co-icon>\n",
-        styles: [":host{display:flex;flex-direction:row;align-items:center}:host .show-in{display:none}:host>:not(:last-child){margin-right:10px}::ng-deep co-icon.selector-type-icon{box-shadow:inset 0 0 0 1px #22313c;border-radius:50%;background:0 0;height:34px;width:34px;cursor:pointer}::ng-deep co-icon.selector-type-icon.active{box-shadow:none;background:#74b77f;transition:.2s ease-in-out}::ng-deep co-icon.selector-type-icon.active [fill]{fill:#fff}"]
-    })
-], ProductSelectorTypeComponent);
+ProductSelectorTypeComponent.propDecorators = {
+    show2D: [{ type: Input }],
+    show3D: [{ type: Input }],
+    currentType: [{ type: Input }],
+    onIconClick: [{ type: Output }],
+    currentTypeChange: [{ type: Output }]
+};
+
+// A pipe for localizing string values in view templates.
+class LocalizePipe {
+    constructor(_dictionaryService) {
+        this._dictionaryService = _dictionaryService;
+    }
+    transform(value, upperCaseFirst = true, replace = []) {
+        if (!value) {
+            return '';
+        }
+        replace = replace ? replace : [];
+        if (!Array.isArray(replace)) {
+            replace = [replace];
+        }
+        return this._dictionaryService.get(value, upperCaseFirst, ...replace);
+    }
+}
+LocalizePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'localize'
+            },] }
+];
+LocalizePipe.ctorParameters = () => [
+    { type: DictionaryService }
+];
+
+class PipeModule {
+}
+PipeModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    LocalizePipe
+                ],
+                providers: [
+                    LocalizePipe
+                ],
+                exports: [
+                    LocalizePipe
+                ]
+            },] }
+];
+
+// import {IconModule} from '@colijnit/corecomponents';
+class ProductSelectorTypeModule {
+}
+ProductSelectorTypeModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    PipeModule /*,
+                    IconModule*/
+                ],
+                declarations: [
+                    ProductSelectorTypeComponent
+                ],
+                exports: [
+                    ProductSelectorTypeComponent
+                ]
+            },] }
+];
 
-let ImageCarouselComponent = class ImageCarouselComponent {
+class ImageCarouselComponent {
     constructor(_ione, _appEventService, _changeDetector, _domSanitizer, iconCache) {
         this._ione = _ione;
         this._appEventService = _appEventService;
@@ -1318,7 +1253,44 @@ let ImageCarouselComponent = class ImageCarouselComponent {
             }
         }
     }
-};
+}
+ImageCarouselComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-image-carousel',
+                template: `
+    <div id="product_page_carousel">
+      <div id="product_page_carousel_items">
+        <co-loader [isShown]="showLoader"></co-loader>
+        <div #carousel class="inner-carousel">
+          <!-- This has been taken out of the for loop to prevent flashing images when updating. -->
+          <div *ngIf="images[0]" class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)">
+            <img [src]="getImageSrc(images[0])">
+          </div>
+          <div *ngFor="let image of images.slice(1); let index = index" class="carousel-item" [id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))">
+            <img [src]="getImageSrc(image)">
+          </div>
+          <div class="carousel-scroller-layer" *ngIf="images && images.length > 1">
+            <div class="carousel-item-scroller prev" (click)="gotoPrevSlide()" *ngIf="currentIndex > 0"></div>
+            <div class="carousel-item-scroller next" (click)="gotoNextSlide()" *ngIf="currentIndex < images.length - 1"></div>
+          </div>
+        </div>
+<!--
+        <co-icon class="selector-type-icon refresh-button" [iconData]="iconCache.getIcon(icons.Refresh)" (click)="onForceRenderImage()" [class.loading]="showLoader" *ngIf="showRefresh"></co-icon>
+-->
+      </div>
+
+      <div id="product_page_carousel_thumbs">
+        <co-scroll-container class="scroll-container" *ngIf="images && images.length > 1">
+          <div *ngFor="let image of images; let index = index" class="carousel-thumb" [class.active]="index === currentIndex">
+            <img [src]="getImageSrc(image)" (click)="handleThumbClick(index)"/>
+          </div>
+        </co-scroll-container>
+      </div>
+    </div>
+  `,
+                styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
+            },] }
+];
 ImageCarouselComponent.ctorParameters = () => [
     { type: ProductConnectorService },
     { type: ProductEventService },
@@ -1326,50 +1298,72 @@ ImageCarouselComponent.ctorParameters = () => [
     { type: DomSanitizer },
     { type: IconCacheService }
 ];
-__decorate([
-    ViewChild('carousel', { read: ElementRef })
-], ImageCarouselComponent.prototype, "carousel", void 0);
-__decorate([
-    Input()
-], ImageCarouselComponent.prototype, "showRefresh", void 0);
-__decorate([
-    Input()
-], ImageCarouselComponent.prototype, "images", null);
-__decorate([
-    HostListener('window:resize')
-], ImageCarouselComponent.prototype, "handleWindowResize", null);
-__decorate([
-    HostListener('swipeleft')
-], ImageCarouselComponent.prototype, "gotoNextSlide", null);
-__decorate([
-    HostListener('swiperight')
-], ImageCarouselComponent.prototype, "gotoPrevSlide", null);
-__decorate([
-    HostBinding('class.resizing')
-], ImageCarouselComponent.prototype, "resizing", void 0);
-ImageCarouselComponent = __decorate([
-    Component({
-        selector: 'app-image-carousel',
-        template: "<div id=\"product_page_carousel\">\n  <div id=\"product_page_carousel_items\">\n    <co-loader [isShown]=\"showLoader\"></co-loader>\n    <div #carousel class=\"inner-carousel\">\n      <!-- This has been taken out of the for loop to prevent flashing images when updating. -->\n      <div *ngIf=\"images[0]\" class=\"carousel-item\" [id]=\"'slide-0'\" [class.active]=\"isCurrentIndex(0)\">\n        <img [src]=\"getImageSrc(images[0])\">\n      </div>\n      <div *ngFor=\"let image of images.slice(1); let index = index\" class=\"carousel-item\" [id]=\"'slide-' + (index + 1)\" [class.active]=\"isCurrentIndex((index + 1))\">\n        <img [src]=\"getImageSrc(image)\">\n      </div>\n      <div class=\"carousel-scroller-layer\" *ngIf=\"images && images.length > 1\">\n        <div class=\"carousel-item-scroller prev\" (click)=\"gotoPrevSlide()\" *ngIf=\"currentIndex > 0\"></div>\n        <div class=\"carousel-item-scroller next\" (click)=\"gotoNextSlide()\" *ngIf=\"currentIndex < images.length - 1\"></div>\n      </div>\n    </div>\n    <co-icon class=\"selector-type-icon refresh-button\" [iconData]=\"iconCache.getIcon(icons.Refresh)\" (click)=\"onForceRenderImage()\" [class.loading]=\"showLoader\" *ngIf=\"showRefresh\"></co-icon>\n  </div>\n\n  <div id=\"product_page_carousel_thumbs\">\n    <co-scroll-container class=\"scroll-container\" *ngIf=\"images && images.length > 1\">\n      <div *ngFor=\"let image of images; let index = index\" class=\"carousel-thumb\" [class.active]=\"index === currentIndex\">\n        <img [src]=\"getImageSrc(image)\" (click)=\"handleThumbClick(index)\"/>\n      </div>\n    </co-scroll-container>\n  </div>\n</div>\n",
-        styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74b77f;transition:.2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:.2s;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}@media screen and (max-width:650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}"]
-    })
-], ImageCarouselComponent);
+ImageCarouselComponent.propDecorators = {
+    carousel: [{ type: ViewChild, args: ['carousel', { read: ElementRef },] }],
+    showRefresh: [{ type: Input }],
+    images: [{ type: Input }],
+    handleWindowResize: [{ type: HostListener, args: ['window:resize',] }],
+    gotoNextSlide: [{ type: HostListener, args: ['swipeleft',] }],
+    gotoPrevSlide: [{ type: HostListener, args: ['swiperight',] }],
+    resizing: [{ type: HostBinding, args: ['class.resizing',] }]
+};
+
+class ImageCarouselModule {
+}
+ImageCarouselModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    LoaderModule,
+                    // IconModule,
+                    ScrollContainerModule
+                ],
+                declarations: [
+                    ImageCarouselComponent
+                ],
+                exports: [
+                    ImageCarouselComponent
+                ]
+            },] }
+];
 
-let ProductDescriptionComponent = class ProductDescriptionComponent {
+class ProductDescriptionComponent {
     constructor() { }
     ngOnInit() {
     }
-};
-__decorate([
-    Input()
-], ProductDescriptionComponent.prototype, "article", void 0);
-ProductDescriptionComponent = __decorate([
-    Component({
-        selector: 'app-product-description',
-        template: "<div class=\"pd-title-wrapper\">\n  <span class=\"pd-description\" [textContent]=\"article?.descriptionRetail\" *ngIf=\"article?.descriptionRetail\"></span>\n  <span class=\"pd-sku\" [textContent]=\"article?.articleNr\" *ngIf=\"article?.articleNr\"></span>\n</div>\n",
-        styles: [":host{display:block}.pd-title-wrapper{margin:20px 0 0}.pd-description{color:#22313c;font-size:25px;font-weight:700;width:100%;display:block}.pd-sku{color:#5b6875;font-size:16px}@media screen and (max-width:650px){.pd-description{font-size:21px}.pd-sku{font-size:13px}}"]
-    })
-], ProductDescriptionComponent);
+}
+ProductDescriptionComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-product-description',
+                template: `
+    <div class="pd-title-wrapper">
+      <span class="pd-description" [textContent]="article?.descriptionRetail" *ngIf="article?.descriptionRetail"></span>
+      <span class="pd-sku" [textContent]="article?.articleNr" *ngIf="article?.articleNr"></span>
+    </div>
+  `,
+                styles: [":host{display:block}.pd-title-wrapper{margin:20px 0 0}.pd-description{color:#22313c;font-size:25px;font-weight:bold;width:100%;display:block}.pd-sku{color:#5b6875;font-size:16px}@media screen and (max-width: 650px){.pd-description{font-size:21px}.pd-sku{font-size:13px}}\n"]
+            },] }
+];
+ProductDescriptionComponent.ctorParameters = () => [];
+ProductDescriptionComponent.propDecorators = {
+    article: [{ type: Input }]
+};
+
+class ProductDescriptionModule {
+}
+ProductDescriptionModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule
+                ],
+                declarations: [
+                    ProductDescriptionComponent
+                ],
+                exports: [
+                    ProductDescriptionComponent
+                ]
+            },] }
+];
 
 class BitUtils {
     static IsShortDescription(bit) {
@@ -1389,7 +1383,7 @@ class BitUtils {
     }
 }
 
-let ProductAdditionalDescriptionComponent = class ProductAdditionalDescriptionComponent {
+class ProductAdditionalDescriptionComponent {
     constructor(_appEventService) {
         this._appEventService = _appEventService;
     }
@@ -1422,22 +1416,46 @@ let ProductAdditionalDescriptionComponent = class ProductAdditionalDescriptionCo
             }
         }
     }
-};
+}
+ProductAdditionalDescriptionComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-product-additional-description',
+                template: `
+    <ng-container *ngIf="description !== ''">
+      <div class="pd-additional-description">
+        <p [innerHTML]="description"></p>
+        <button class="pd-read-more-btn" [textContent]="'READ_MORE' | localize" (click)="onReadMore()"></button>
+      </div>
+    </ng-container>
+  `,
+                styles: [":host{display:block;padding-top:0!important}:host *:focus{outline:0!important}:host .pd-additional-description{line-height:190%;color:#22313c;font-size:13px}:host .pd-read-more-btn{color:#2b60a7;border:none;background:transparent;cursor:pointer;text-decoration:underline;font-family:iOneMontserrat}:host .pd-read-more-btn:hover{color:#74b77f}@media screen and (max-width: 650px){:host .pd-additional-description{font-size:12px}}\n"]
+            },] }
+];
 ProductAdditionalDescriptionComponent.ctorParameters = () => [
     { type: ProductEventService }
 ];
-__decorate([
-    Input()
-], ProductAdditionalDescriptionComponent.prototype, "article", null);
-ProductAdditionalDescriptionComponent = __decorate([
-    Component({
-        selector: 'app-product-additional-description',
-        template: "<ng-container *ngIf=\"description !== ''\">\n  <div class=\"pd-additional-description\">\n    <p [innerHTML]=\"description\"></p>\n    <button class=\"pd-read-more-btn\" [textContent]=\"'READ_MORE' | localize\" (click)=\"onReadMore()\"></button>\n  </div>\n</ng-container>\n",
-        styles: [":host{display:block;padding-top:0!important}:host :focus{outline:0!important}:host .pd-additional-description{line-height:190%;color:#22313c;font-size:13px}:host .pd-read-more-btn{color:#2b60a7;border:none;background:0 0;cursor:pointer;text-decoration:underline;font-family:iOneMontserrat}:host .pd-read-more-btn:hover{color:#74b77f}@media screen and (max-width:650px){:host .pd-additional-description{font-size:12px}}"]
-    })
-], ProductAdditionalDescriptionComponent);
+ProductAdditionalDescriptionComponent.propDecorators = {
+    article: [{ type: Input }]
+};
+
+class ProductAdditionalDescriptionModule {
+}
+ProductAdditionalDescriptionModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    PipeModule
+                ],
+                declarations: [
+                    ProductAdditionalDescriptionComponent
+                ],
+                exports: [
+                    ProductAdditionalDescriptionComponent
+                ]
+            },] }
+];
 
-let ProductPriceComponent = class ProductPriceComponent {
+class ProductPriceComponent {
     constructor(_changeDetector) {
         this._changeDetector = _changeDetector;
         this.showFromPrice = false;
@@ -1481,25 +1499,52 @@ let ProductPriceComponent = class ProductPriceComponent {
                 return '€';
         }
     }
-};
+}
+ProductPriceComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-product-price',
+                template: `
+    <div *ngIf="toPrice">
+      <div class="price-wrapper" *ngIf="fromPrice > toPrice">
+        <div class="from-price-label" [textContent]="fromLabel | localize"></div>
+        <div class="from-price" [textContent]="fromPrice | priceDisplay: valutaSign"></div>
+      </div>
+      <div class="price-wrapper">
+        <div class="to-price-label" [textContent]="toLabel | localize"></div>
+        <div class="to-price" [textContent]="toPrice | priceDisplay: valutaSign"></div>
+      </div>
+    </div>
+  `,
+                styles: [":host{display:flex;flex-direction:column}.price-wrapper{width:100%;font-size:15px;margin:0 0 5px;display:inline-block}.price-wrapper:last-child{margin:0}.from-price-label,.to-price-label{color:#5b6875;display:none}.from-price{font-size:16px;font-weight:bold;text-decoration:line-through;color:#5b6875}.to-price{font-size:25px;font-weight:bold;color:#74b77f}@media screen and (max-width: 650px){.from-price{font-size:13px}.to-price{font-size:21px}}\n"]
+            },] }
+];
 ProductPriceComponent.ctorParameters = () => [
     { type: ChangeDetectorRef }
 ];
-__decorate([
-    Input()
-], ProductPriceComponent.prototype, "pricing", null);
-__decorate([
-    Input()
-], ProductPriceComponent.prototype, "configurable", null);
-ProductPriceComponent = __decorate([
-    Component({
-        selector: 'app-product-price',
-        template: "<div *ngIf=\"toPrice\">\n  <div class=\"price-wrapper\" *ngIf=\"fromPrice > toPrice\">\n    <div class=\"from-price-label\" [textContent]=\"fromLabel | localize\"></div>\n    <div class=\"from-price\" [textContent]=\"fromPrice | priceDisplay\"></div>\n  </div>\n  <div class=\"price-wrapper\">\n    <div class=\"to-price-label\" [textContent]=\"toLabel | localize\"></div>\n    <div class=\"to-price\" [textContent]=\"toPrice | priceDisplay\"></div>\n  </div>\n</div>\n",
-        styles: [":host{display:flex;flex-direction:column}.price-wrapper{width:100%;font-size:15px;margin:0 0 5px;display:inline-block}.price-wrapper:last-child{margin:0}.from-price-label,.to-price-label{color:#5b6875;display:none}.from-price{font-size:16px;font-weight:700;text-decoration:line-through;color:#5b6875}.to-price{font-size:25px;font-weight:700;color:#74b77f}@media screen and (max-width:650px){.from-price{font-size:13px}.to-price{font-size:21px}}"]
-    })
-], ProductPriceComponent);
+ProductPriceComponent.propDecorators = {
+    pricing: [{ type: Input }],
+    configurable: [{ type: Input }]
+};
+
+class ProductPriceModule {
+}
+ProductPriceModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    PipeModule,
+                    PriceDisplayPipeModule
+                ],
+                declarations: [
+                    ProductPriceComponent
+                ],
+                exports: [
+                    ProductPriceComponent
+                ]
+            },] }
+];
 
-let ProductAddtocartComponent = class ProductAddtocartComponent {
+class ProductAddtocartComponent {
     constructor(iconCache, _ioneControllerService, _appEventService, _settingsService) {
         this.iconCache = iconCache;
         this._ioneControllerService = _ioneControllerService;
@@ -1548,50 +1593,73 @@ let ProductAddtocartComponent = class ProductAddtocartComponent {
             return yield this._ioneControllerService.getJsonArticleFlatTree(article.article.goodId, article.article.goodType, article.quantity, true, configuratorStatistics);
         });
     }
-};
+}
+ProductAddtocartComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-product-addtocart',
+                template: `
+    <div class="atc-wrapper">
+      <co-number-picker *ngIf="!configurable && !configuring" class="quantity-select" [(model)]="quantity" [min]="1" horizontal></co-number-picker>
+      <div class="button-wrapper">
+        <co-button class="configure-button" *ngIf="configurable"
+                   [iconData]="iconCache.getIcon(icon.MagicWand)"
+                   [label]="'CONFIGURE' | localize"
+                   (onClick)="startConfiguration.emit()"
+        ></co-button>
+        <co-button #addtocartbutton class="cart-button" *ngIf="!configurable"
+                   [iconData]="iconCache.getIcon(icon.AddToCartDrop)"
+                   [label]="'SHOPPING_CART_IN' | localize"
+                   (onClick)="handleAddToCartClick(quantity)"
+        ></co-button>
+        <co-button class="cart-button quote" *ngIf="!configurable && showQuoteButton"
+                   [iconData]="iconCache.getIcon(icon.Quote)"
+                   [label]="'QUOTATION' | localize"
+                   (onClick)="handleAddToQuoteClick(quantity)"
+        ></co-button>
+      </div>
+    </div>
+  `,
+                styles: [":host{display:flex;flex-direction:column}:host *:not(:last-child){margin-bottom:5px}:host .atc-wrapper{display:flex;flex-direction:row;align-items:baseline}:host .atc-wrapper .quantity-select{margin-right:5px}:host.full-screen .cart-button{position:fixed;right:20px;bottom:20px;z-index:3}::ng-deep co-number-picker{max-width:100px;border:2px solid #f6f5f4;border-radius:5px}::ng-deep co-number-picker ::ng-deep co-input-text{height:50px!important;border:none!important;width:50px!important}::ng-deep co-number-picker ::ng-deep co-input-text:after{display:none}::ng-deep co-number-picker ::ng-deep co-input-text.focused{box-shadow:none!important;border:none!important;background:none!important}::ng-deep co-number-picker ::ng-deep co-input-text .clear-icon{display:none}::ng-deep co-number-picker ::ng-deep co-input-text input{width:100%;text-align:center}::ng-deep co-number-picker ::ng-deep co-button{justify-content:center;padding:0!important;margin:0!important;height:50px!important;background-color:transparent!important}::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon [fill]{fill:#22313c!important}.button-wrapper ::ng-deep co-button{height:50px;max-width:300px;justify-content:center;font-size:15px;border-radius:5px!important;cursor:pointer;padding:0 20px!important}.button-wrapper ::ng-deep co-button:hover{background:#74B77F}::ng-deep co-button.cart-button{border-radius:5px}::ng-deep co-button.cart-button.quote{background:#7292b6}\n"]
+            },] }
+];
 ProductAddtocartComponent.ctorParameters = () => [
     { type: IconCacheService },
     { type: ProductConnectorService },
     { type: ProductEventService },
     { type: ProductSettingsService }
 ];
-__decorate([
-    ViewChild('addtocartbutton', { read: ElementRef })
-], ProductAddtocartComponent.prototype, "addToCartButton", void 0);
-__decorate([
-    Input()
-], ProductAddtocartComponent.prototype, "article", void 0);
-__decorate([
-    Input()
-], ProductAddtocartComponent.prototype, "configurable", void 0);
-__decorate([
-    Input()
-], ProductAddtocartComponent.prototype, "configuring", void 0);
-__decorate([
-    HostBinding('class.full-screen'),
-    Input()
-], ProductAddtocartComponent.prototype, "fullscreen", void 0);
-__decorate([
-    Input()
-], ProductAddtocartComponent.prototype, "quantity", null);
-__decorate([
-    Output()
-], ProductAddtocartComponent.prototype, "startConfiguration", void 0);
-__decorate([
-    Output()
-], ProductAddtocartComponent.prototype, "addToCartClick", void 0);
-__decorate([
-    Output()
-], ProductAddtocartComponent.prototype, "addToQuoteClick", void 0);
-ProductAddtocartComponent = __decorate([
-    Component({
-        selector: 'app-product-addtocart',
-        template: "<div class=\"atc-wrapper\">\n  <co-number-picker *ngIf=\"!configurable && !configuring\" class=\"quantity-select\" [(model)]=\"quantity\" [min]=\"1\" horizontal></co-number-picker>\n  <div class=\"button-wrapper\">\n    <co-button class=\"configure-button\" *ngIf=\"configurable\"\n               [iconData]=\"iconCache.getIcon(icon.MagicWand)\"\n               [label]=\"'CONFIGURE' | localize\"\n               (onClick)=\"startConfiguration.emit()\"\n    ></co-button>\n    <co-button #addtocartbutton class=\"cart-button\" *ngIf=\"!configurable\"\n               [iconData]=\"iconCache.getIcon(icon.AddToCartDrop)\"\n               [label]=\"'SHOPPING_CART_IN' | localize\"\n               (onClick)=\"handleAddToCartClick(quantity)\"\n    ></co-button>\n    <co-button class=\"cart-button quote\" *ngIf=\"!configurable && showQuoteButton\"\n               [iconData]=\"iconCache.getIcon(icon.Quote)\"\n               [label]=\"'QUOTATION' | localize\"\n               (onClick)=\"handleAddToQuoteClick(quantity)\"\n    ></co-button>\n  </div>\n</div>\n",
-        styles: [":host{display:flex;flex-direction:column}:host :not(:last-child){margin-bottom:5px}:host .atc-wrapper{display:flex;flex-direction:row;align-items:baseline}:host .atc-wrapper .quantity-select{margin-right:5px}:host.full-screen .cart-button{position:fixed;right:20px;bottom:20px;z-index:3}::ng-deep co-number-picker{max-width:100px;border:2px solid #f6f5f4;border-radius:5px}::ng-deep co-number-picker ::ng-deep co-input-text{height:50px!important;border:none!important;width:50px!important}::ng-deep co-number-picker ::ng-deep co-input-text:after{display:none}::ng-deep co-number-picker ::ng-deep co-input-text.focused{box-shadow:none!important;border:none!important;background:0 0!important}::ng-deep co-number-picker ::ng-deep co-input-text .clear-icon{display:none}::ng-deep co-number-picker ::ng-deep co-input-text input{width:100%;text-align:center}::ng-deep co-number-picker ::ng-deep co-button{justify-content:center;padding:0!important;margin:0!important;height:50px!important;background-color:transparent!important}::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon [fill]{fill:#22313c!important}.button-wrapper ::ng-deep co-button{height:50px;max-width:300px;justify-content:center;font-size:15px;border-radius:5px!important;cursor:pointer;padding:0 20px!important}.button-wrapper ::ng-deep co-button:hover{background:#74b77f}::ng-deep co-button.cart-button{border-radius:5px}::ng-deep co-button.cart-button.quote{background:#7292b6}"]
-    })
-], ProductAddtocartComponent);
+ProductAddtocartComponent.propDecorators = {
+    addToCartButton: [{ type: ViewChild, args: ['addtocartbutton', { read: ElementRef },] }],
+    article: [{ type: Input }],
+    configurable: [{ type: Input }],
+    configuring: [{ type: Input }],
+    fullscreen: [{ type: HostBinding, args: ['class.full-screen',] }, { type: Input }],
+    quantity: [{ type: Input }],
+    startConfiguration: [{ type: Output }],
+    addToCartClick: [{ type: Output }],
+    addToQuoteClick: [{ type: Output }]
+};
 
-let ProductRelatedComponent = class ProductRelatedComponent {
+class ProductAddtocartModule {
+}
+ProductAddtocartModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    NumberPickerModule,
+                    ButtonModule,
+                    PipeModule
+                ],
+                declarations: [
+                    ProductAddtocartComponent
+                ],
+                exports: [
+                    ProductAddtocartComponent
+                ]
+            },] }
+];
+
+class ProductRelatedComponent {
     constructor(_iOne, _appEventService) {
         this._iOne = _iOne;
         this._appEventService = _appEventService;
@@ -1632,36 +1700,108 @@ let ProductRelatedComponent = class ProductRelatedComponent {
             }
         });
     }
-};
+}
+ProductRelatedComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-product-related',
+                template: `
+    <div *ngIf="articles && articles.length > 0">
+      <app-header [label]="label" [amount]="articles?.length" *ngIf="label"></app-header>
+      <co-scroll-container>
+        <div class="article-wrapper" *ngFor="let article of articles">
+          <co-article-tile
+              [imageData]="article.image.documentBodyAsDataUri"
+              [description]="article.description"
+              [price]="article.price"
+              [level]="article.stockStatus"
+              [isSmallModus]="isSmallModus"
+              [hasConfigureButton]="article.goodType === 'B'"
+              (contentClick)="handleContentClick(article)"
+          ></co-article-tile>
+        </div>
+      </co-scroll-container>
+    </div>
+  `,
+                styles: [":host{display:block}.article-wrapper{display:flex;flex-direction:row}.article-wrapper ::ng-deep co-tile.small{min-width:189px;max-width:189px;height:100%}.article-wrapper ::ng-deep co-tile.small:hover{box-shadow:none;cursor:pointer}.article-wrapper ::ng-deep co-tile.small:hover .tile-bottom .left-buttons{margin:0!important}.article-wrapper ::ng-deep co-tile.small .tile-wrapper{outline:none!important;padding-bottom:0;overflow:hidden}.article-wrapper ::ng-deep co-tile.small .tile-wrapper div.image{height:100px}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-bottom .left-buttons{position:absolute;top:0;right:0;margin:0 -32px 0 0;align-items:flex-end;transition:.2s ease-in-out}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-bottom .left-buttons ::ng-deep co-button.card-button.mini{width:30px;height:30px;transform:none;border-radius:4px;margin:0 0 5px}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-bottom .left-buttons ::ng-deep co-button.card-button.mini ::ng-deep co-icon{width:30px;height:30px}.article-wrapper ::ng-deep co-tile.small .tile-extra-bottom{outline:none!important;background:transparent!important}.article-wrapper ::ng-deep co-tile.small .tile-extra-bottom .price{color:#74b77f;margin:5px 0 0;font-weight:400;font-size:12px}\n"]
+            },] }
+];
 ProductRelatedComponent.ctorParameters = () => [
     { type: ProductConnectorService },
     { type: ProductEventService }
 ];
-__decorate([
-    Input()
-], ProductRelatedComponent.prototype, "refType", void 0);
-__decorate([
-    Input()
-], ProductRelatedComponent.prototype, "label", void 0);
-__decorate([
-    Input()
-], ProductRelatedComponent.prototype, "isSmallModus", void 0);
-__decorate([
-    Input()
-], ProductRelatedComponent.prototype, "articles", null);
-ProductRelatedComponent = __decorate([
-    Component({
-        selector: 'app-product-related',
-        template: "<div *ngIf=\"articles && articles.length > 0\">\n  <app-header [label]=\"label\" [amount]=\"articles?.length\" *ngIf=\"label\"></app-header>\n  <co-scroll-container>\n    <div class=\"article-wrapper\" *ngFor=\"let article of articles\">\n      <co-article-tile\n               [imageData]=\"article.image.documentBodyAsDataUri\"\n               [description]=\"article.description\"\n               [price]=\"article.price\"\n               [level]=\"article.stockStatus\"\n               [isSmallModus]=\"isSmallModus\"\n               [hasConfigureButton]=\"article.goodType === 'B'\"\n               (contentClick)=\"handleContentClick(article)\"\n      ></co-article-tile>\n    </div>\n  </co-scroll-container>\n</div>\n",
-        styles: [":host{display:block}.article-wrapper{display:flex;flex-direction:row}.article-wrapper ::ng-deep co-tile.small{min-width:189px;max-width:189px;height:100%}.article-wrapper ::ng-deep co-tile.small:hover{box-shadow:none;cursor:pointer}.article-wrapper ::ng-deep co-tile.small:hover .tile-bottom .left-buttons{margin:0!important}.article-wrapper ::ng-deep co-tile.small .tile-wrapper{outline:0!important;padding-bottom:0;overflow:hidden}.article-wrapper ::ng-deep co-tile.small .tile-wrapper div.image{height:100px}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-bottom .left-buttons{position:absolute;top:0;right:0;margin:0 -32px 0 0;align-items:flex-end;transition:.2s ease-in-out}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-bottom .left-buttons ::ng-deep co-button.card-button.mini{width:30px;height:30px;transform:none;border-radius:4px;margin:0 0 5px}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-bottom .left-buttons ::ng-deep co-button.card-button.mini ::ng-deep co-icon{width:30px;height:30px}.article-wrapper ::ng-deep co-tile.small .tile-extra-bottom{outline:0!important;background:0 0!important}.article-wrapper ::ng-deep co-tile.small .tile-extra-bottom .price{color:#74b77f;margin:5px 0 0;font-weight:400;font-size:12px}"]
-    })
-], ProductRelatedComponent);
+ProductRelatedComponent.propDecorators = {
+    refType: [{ type: Input }],
+    label: [{ type: Input }],
+    isSmallModus: [{ type: Input }],
+    articles: [{ type: Input }]
+};
 
-let ProductStockComponent = class ProductStockComponent {
+class HeaderComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+HeaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-header',
+                template: `
+    <ng-container *ngIf="label">
+      <div class="header-wrapper">
+        <h3 [textContent]="label"></h3>
+        <span *ngIf="amount" class="amount" [textContent]="'(' + amount + ')'"></span>
+      </div>
+    </ng-container>
+  `,
+                styles: [".header-wrapper{display:flex;flex-direction:row;align-items:center}.header-wrapper .amount{margin-left:5px}\n"]
+            },] }
+];
+HeaderComponent.ctorParameters = () => [];
+HeaderComponent.propDecorators = {
+    label: [{ type: Input }],
+    amount: [{ type: Input }]
+};
+
+class HeaderModule {
+}
+HeaderModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule
+                ],
+                declarations: [
+                    HeaderComponent
+                ],
+                exports: [
+                    HeaderComponent
+                ]
+            },] }
+];
+
+class ProductRelatedModule {
+}
+ProductRelatedModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    HeaderModule,
+                    ScrollContainerModule,
+                    ArticleTileModule
+                ],
+                declarations: [
+                    ProductRelatedComponent
+                ],
+                exports: [
+                    ProductRelatedComponent
+                ]
+            },] }
+];
+
+class ProductStockComponent {
     constructor(_iOne, _iconCache) {
         this._iOne = _iOne;
         this._iconCache = _iconCache;
         this.icon = IconEnum;
+        this.openStockEvent = new EventEmitter();
         this.iconData = this._iconCache.getIcon(this.icon.Warehouse);
     }
     set stockAndDelivery(value) {
@@ -1671,50 +1811,55 @@ let ProductStockComponent = class ProductStockComponent {
     }
     ngOnInit() {
     }
-};
+    openStock() {
+        this.openStockEvent.emit();
+    }
+}
+ProductStockComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-product-stock',
+                template: `
+    <!--<app-header [label]="'STOCK' | localize"></app-header>-->
+    <!--<co-level-indicator [model]="'medium'"></co-level-indicator>-->
+    <div class="product-stock-wrapper">
+      <co-icon class="stock-icon" [iconData]="iconData"></co-icon>
+      <div class="product-stock-fields" (click)="openStock()">
+        <div class="pp-default-label in-stock" [textContent]="'PRODUCT_IN_STOCK' | localize" *ngIf="numberInStock > 0"></div>
+        <div class="pp-default-label not-in-stock" [textContent]="'PRODUCT_NOT_IN_STOCK' | localize" *ngIf="!(numberInStock > 0)"></div>
+      </div>
+    </div>
+  `,
+                styles: [":host{display:block}.product-stock-wrapper{display:flex;flex-direction:row;align-items:center;border-top:1px solid #f6f5f4;border-bottom:1px solid #f6f5f4;padding:20px 15px;cursor:pointer}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:40px;height:37px}.product-stock-wrapper .product-stock-fields{display:flex;flex-direction:row}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:14px;margin:0;color:#2b60a7;text-decoration:underline}.product-stock-wrapper .product-stock-fields .pp-default-label:after{content:\"\";width:10px;height:10px;border-radius:10px;background:#74B77F;display:inline-block;margin:0 0 0 15px}.product-stock-wrapper .product-stock-fields .pp-default-label.not-in-stock:after{background:#f15152}@media screen and (max-width: 400px){.product-stock-wrapper{padding:15px 0 15px 10px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:32px;height:28px}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:13px}}\n"]
+            },] }
+];
 ProductStockComponent.ctorParameters = () => [
     { type: ProductConnectorService },
     { type: IconCacheService }
 ];
-__decorate([
-    Input()
-], ProductStockComponent.prototype, "stockAndDelivery", null);
-ProductStockComponent = __decorate([
-    Component({
-        selector: 'app-product-stock',
-        template: "<!--<app-header [label]=\"'STOCK' | localize\"></app-header>-->\n<!--<co-level-indicator [model]=\"'medium'\"></co-level-indicator>-->\n<div class=\"product-stock-wrapper\">\n  <co-icon class=\"stock-icon\" [iconData]=\"iconData\"></co-icon>\n  <div class=\"product-stock-fields\">\n    <div class=\"pp-default-label in-stock\" [textContent]=\"'PRODUCT_IN_STOCK' | localize\" *ngIf=\"numberInStock > 0\"></div>\n    <div class=\"pp-default-label not-in-stock\" [textContent]=\"'PRODUCT_NOT_IN_STOCK' | localize\" *ngIf=\"!(numberInStock > 0)\"></div>\n  </div>\n</div>\n",
-        styles: [":host{display:block}.product-stock-wrapper{display:flex;flex-direction:row;align-items:center;border-top:1px solid #f6f5f4;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:40px;height:37px}.product-stock-wrapper .product-stock-fields{display:flex;flex-direction:row}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:14px;margin:0}.product-stock-wrapper .product-stock-fields .pp-default-label:after{content:\"\";width:10px;height:10px;border-radius:10px;background:#74b77f;display:inline-block;margin:0 0 0 15px}.product-stock-wrapper .product-stock-fields .pp-default-label.not-in-stock:after{background:#f15152}@media screen and (max-width:400px){.product-stock-wrapper{padding:15px 0 15px 10px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:32px;height:28px}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:13px}}"]
-    })
-], ProductStockComponent);
+ProductStockComponent.propDecorators = {
+    stockAndDelivery: [{ type: Input }],
+    openStockEvent: [{ type: Output }]
+};
 
-let LocalizePipe = 
-// A pipe for localizing string values in view templates.
-class LocalizePipe {
-    constructor(_dictionaryService) {
-        this._dictionaryService = _dictionaryService;
-    }
-    transform(value, upperCaseFirst = true, replace = []) {
-        if (!value) {
-            return '';
-        }
-        replace = replace ? replace : [];
-        if (!Array.isArray(replace)) {
-            replace = [replace];
-        }
-        return this._dictionaryService.get(value, upperCaseFirst, ...replace);
-    }
-};
-LocalizePipe.ctorParameters = () => [
-    { type: DictionaryService }
-];
-LocalizePipe = __decorate([
-    Pipe({
-        name: 'localize'
-    })
-    // A pipe for localizing string values in view templates.
-], LocalizePipe);
+class ProductStockModule {
+}
+ProductStockModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    IconModule,
+                    PipeModule
+                ],
+                declarations: [
+                    ProductStockComponent
+                ],
+                exports: [
+                    ProductStockComponent
+                ]
+            },] }
+];
 
-let ProductDeliveryComponent = class ProductDeliveryComponent {
+class ProductDeliveryComponent {
     constructor(_localizePipe, _iOne, _iconCache) {
         this._localizePipe = _localizePipe;
         this._iOne = _iOne;
@@ -1732,24 +1877,51 @@ let ProductDeliveryComponent = class ProductDeliveryComponent {
     }
     ngOnInit() {
     }
-};
+}
+ProductDeliveryComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-product-delivery',
+                template: `
+    <!--<app-header [label]="'DELIVERY_TIME_PERIOD' | localize"></app-header>-->
+    <div class="product-delivery-wrapper">
+      <co-icon class="delivery-icon" [iconData]="iconData"></co-icon>
+      <div class="product-delivery-fields">
+        <div class="pp-default-label" [textContent]="'DELIVERY_TIME_PERIOD' | localize"></div>
+        <div class="pp-default-description" [textContent]="deliveryDescription | date:'dd MMMM yyyy'"></div>
+      </div>
+    </div>
+  `,
+                styles: [":host{display:block}.product-delivery-wrapper{display:flex;flex-direction:row;align-items:center;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:40px;height:37px}.product-delivery-wrapper .product-delivery-fields{display:flex;flex-direction:column}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:14px;margin:0}@media screen and (max-width: 400px){.product-delivery-wrapper{padding:15px 0 15px 10px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:32px;height:28px}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:13px}}\n"]
+            },] }
+];
 ProductDeliveryComponent.ctorParameters = () => [
     { type: LocalizePipe },
     { type: ProductConnectorService },
     { type: IconCacheService }
 ];
-__decorate([
-    Input()
-], ProductDeliveryComponent.prototype, "stockAndDelivery", null);
-ProductDeliveryComponent = __decorate([
-    Component({
-        selector: 'app-product-delivery',
-        template: "<!--<app-header [label]=\"'DELIVERY_TIME_PERIOD' | localize\"></app-header>-->\n<div class=\"product-delivery-wrapper\">\n  <co-icon class=\"delivery-icon\" [iconData]=\"iconData\"></co-icon>\n  <div class=\"product-delivery-fields\">\n    <div class=\"pp-default-label\" [textContent]=\"'DELIVERY_TIME_PERIOD' | localize\"></div>\n    <div class=\"pp-default-description\" [textContent]=\"deliveryDescription | date:'dd MMMM yyyy'\"></div>\n  </div>\n</div>\n",
-        styles: [":host{display:block}.product-delivery-wrapper{display:flex;flex-direction:row;align-items:center;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:40px;height:37px}.product-delivery-wrapper .product-delivery-fields{display:flex;flex-direction:column}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:14px;margin:0}@media screen and (max-width:400px){.product-delivery-wrapper{padding:15px 0 15px 10px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:32px;height:28px}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:13px}}"]
-    })
-], ProductDeliveryComponent);
+ProductDeliveryComponent.propDecorators = {
+    stockAndDelivery: [{ type: Input }]
+};
 
-let ProductInfoTabsComponent = class ProductInfoTabsComponent {
+class ProductDeliveryModule {
+}
+ProductDeliveryModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    IconModule,
+                    PipeModule
+                ],
+                declarations: [
+                    ProductDeliveryComponent
+                ],
+                exports: [
+                    ProductDeliveryComponent
+                ]
+            },] }
+];
+
+class ProductInfoTabsComponent {
     constructor(_appEventService) {
         this._appEventService = _appEventService;
         this.activeTabHeight = 0;
@@ -1791,119 +1963,45 @@ let ProductInfoTabsComponent = class ProductInfoTabsComponent {
             this.tabs.push({ title: 'SYMBOLS' });
         }
     }
-};
+}
+ProductInfoTabsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-product-info-tabs',
+                template: `
+    <div class="tab-container">
+      <div class="tab-header">
+        <button *ngFor="let tab of tabs; let i = index" class="tab-header-button" [class.active]="activeTab === i" [textContent]="tab.title | localize" (click)="updateTab(i)"></button>
+      </div>
+      <div class="tab-content" #tabContent [style.height.px]="(activeTabHeight > 0 ? activeTabHeight : '')">
+        <div class="tab-content-item" *ngFor="let tab of tabs; let i = index" [class.active]="activeTab === i">
+          <ng-container *ngIf="i === 0">
+            <app-product-additional-info class="" [article]="articleObject" [showLabel]="false"></app-product-additional-info>
+          </ng-container>
+          <ng-container *ngIf="i === 1">
+            <app-product-properties class="" [article]="articleObject" [showLabel]="false"></app-product-properties>
+          </ng-container>
+          <ng-container *ngIf="i === 2">
+            <app-product-documents [showLabel]="false" class="" *ngIf="articleObject?.documents && articleObject?.documents.length > 0" [documents]="articleObject?.documents"></app-product-documents>
+          </ng-container>
+          <ng-container *ngIf="i === 3">
+            <app-product-symbols class="" *ngIf="articleObject?.symbols && articleObject?.symbols.length > 0" [symbols]="articleObject?.symbols"></app-product-symbols>
+          </ng-container>
+        </div>
+      </div>
+    </div>
+  `,
+                styles: ["*:focus{outline:none}:host .tab-header{border-bottom:3px solid #f6f5f4;margin:0 0 30px}:host .tab-header .tab-header-button{background:transparent;border:none;border-bottom:3px solid transparent;line-height:20px;padding:15px 20px;cursor:pointer;font-family:iOneMontserrat;color:#22313c;font-weight:bold;margin:0 0 -3px;opacity:.5}:host .tab-header .tab-header-button:hover{opacity:1}:host .tab-header .tab-header-button.active{opacity:1;border-color:#74b77f}:host .tab-content{padding:0 20px 30px;margin:0 0 20px;border-bottom:2px solid #f6f5f4;transition:all .2s ease-in-out;position:relative}:host .tab-content .tab-content-item{opacity:0;position:absolute;left:0;top:0;visibility:hidden;width:100%}:host .tab-content .tab-content-item.active{opacity:1;visibility:visible;position:static}@media screen and (max-width: 650px){:host .tab-content{padding:0 10px 15px}}@media screen and (max-width: 450px){:host .tab-header{display:flex}:host .tab-header .tab-header-button{width:100%;padding:10px;font-size:11px}}\n"]
+            },] }
+];
 ProductInfoTabsComponent.ctorParameters = () => [
     { type: ProductEventService }
 ];
-__decorate([
-    ViewChild('tabContent')
-], ProductInfoTabsComponent.prototype, "tabContent", void 0);
-__decorate([
-    Input()
-], ProductInfoTabsComponent.prototype, "article", null);
-ProductInfoTabsComponent = __decorate([
-    Component({
-        selector: 'app-product-info-tabs',
-        template: "<div class=\"tab-container\">\r\n  <div class=\"tab-header\">\r\n    <button *ngFor=\"let tab of tabs; let i = index\" class=\"tab-header-button\" [class.active]=\"activeTab === i\" [textContent]=\"tab.title | localize\" (click)=\"updateTab(i)\"></button>\r\n  </div>\r\n  <div class=\"tab-content\" #tabContent [style.height.px]=\"(activeTabHeight > 0 ? activeTabHeight : '')\">\r\n    <div class=\"tab-content-item\" *ngFor=\"let tab of tabs; let i = index\" [class.active]=\"activeTab === i\">\r\n      <ng-container *ngIf=\"i === 0\">\r\n        <app-product-additional-info class=\"\" [article]=\"articleObject\" [showLabel]=\"false\"></app-product-additional-info>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"i === 1\">\r\n        <app-product-properties class=\"\" [article]=\"articleObject\" [showLabel]=\"false\"></app-product-properties>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"i === 2\">\r\n        <app-product-documents [showLabel]=\"false\" class=\"\" *ngIf=\"articleObject?.documents && articleObject?.documents.length > 0\" [documents]=\"articleObject?.documents\"></app-product-documents>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"i === 3\">\r\n        <app-product-symbols class=\"\" *ngIf=\"articleObject?.symbols && articleObject?.symbols.length > 0\" [symbols]=\"articleObject?.symbols\"></app-product-symbols>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-        styles: [":focus{outline:0}:host .tab-header{border-bottom:3px solid #f6f5f4;margin:0 0 30px}:host .tab-header .tab-header-button{background:0 0;border:none;border-bottom:3px solid transparent;line-height:20px;padding:15px 20px;cursor:pointer;font-family:iOneMontserrat;color:#22313c;font-weight:700;margin:0 0 -3px;opacity:.5}:host .tab-header .tab-header-button:hover{opacity:1}:host .tab-header .tab-header-button.active{opacity:1;border-color:#74b77f}:host .tab-content{padding:0 20px 30px;margin:0 0 20px;border-bottom:2px solid #f6f5f4;transition:.2s ease-in-out;position:relative}:host .tab-content .tab-content-item{opacity:0;position:absolute;left:0;top:0;visibility:hidden;width:100%}:host .tab-content .tab-content-item.active{opacity:1;visibility:visible;position:static}@media screen and (max-width:650px){:host .tab-content{padding:0 10px 15px}}@media screen and (max-width:450px){:host .tab-header{display:flex}:host .tab-header .tab-header-button{width:100%;padding:10px;font-size:11px}}"]
-    })
-], ProductInfoTabsComponent);
-
-let PipeModule = class PipeModule {
-};
-PipeModule = __decorate([
-    NgModule({
-        exports: [
-            LocalizePipe
-        ],
-        declarations: [
-            LocalizePipe
-        ],
-        providers: [
-            LocalizePipe
-        ]
-    })
-], PipeModule);
-
-let ProductDocumentsComponent = class ProductDocumentsComponent {
-    constructor(iconCache) {
-        this.iconCache = iconCache;
-        this.icon = IconEnum;
-        this.showLabel = false;
-        this.documents = [];
-    }
-};
-ProductDocumentsComponent.ctorParameters = () => [
-    { type: IconCacheService }
-];
-__decorate([
-    Input()
-], ProductDocumentsComponent.prototype, "showLabel", void 0);
-__decorate([
-    Input()
-], ProductDocumentsComponent.prototype, "documents", void 0);
-ProductDocumentsComponent = __decorate([
-    Component({
-        selector: 'app-product-documents',
-        template: "<app-header *ngIf=\"showLabel\" [label]=\"'DOCUMENTS' | localize\" [amount]=\"documents?.length\"></app-header>\n<div *ngIf=\"documents && documents.length > 0\">\n  <co-files-upload [documents]=\"documents\" [canAdd]=\"false\" readonly></co-files-upload>\n</div>\n",
-        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:0!important;border:none!important;background:url(../../../assets/icons/download.svg) left 6px center/36px auto no-repeat!important;line-height:20px;padding:20px 20px 20px 60px!important;margin:0!important}::ng-deep co-file-upload co-tile .tile-extra-bottom .main{padding:0!important}"]
-    })
-], ProductDocumentsComponent);
-
-let HeaderComponent = class HeaderComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-};
-__decorate([
-    Input()
-], HeaderComponent.prototype, "label", void 0);
-__decorate([
-    Input()
-], HeaderComponent.prototype, "amount", void 0);
-HeaderComponent = __decorate([
-    Component({
-        selector: 'app-header',
-        template: "<ng-container *ngIf=\"label\">\n  <div class=\"header-wrapper\">\n    <h3 [textContent]=\"label\"></h3>\n    <span *ngIf=\"amount\" class=\"amount\" [textContent]=\"'(' + amount + ')'\"></span>\n  </div>\n</ng-container>\n",
-        styles: [".header-wrapper{display:flex;flex-direction:row;align-items:center}.header-wrapper .amount{margin-left:5px}"]
-    })
-], HeaderComponent);
-
-var TabType;
-(function (TabType) {
-    TabType["Additional"] = "additional";
-    TabType["Properties"] = "properties";
-})(TabType || (TabType = {}));
-let ProductInfoComponent = class ProductInfoComponent {
-    constructor() {
-        this.tabType = TabType;
-        this.currentTab = TabType.Additional;
-    }
-    ngOnInit() {
-    }
-    switchTab(tab) {
-        this.currentTab = tab;
-    }
-};
-__decorate([
-    Input()
-], ProductInfoComponent.prototype, "article", void 0);
-ProductInfoComponent = __decorate([
-    Component({
-        selector: 'app-product-info',
-        template: "<div>\n  <div class=\"info-wrapper\">\n    <div class=\"info-navigation\">\n      <span [textContent]=\"'ADDITIONAL_DATA' | localize\" class=\"navigator\" [class.selected]=\"currentTab === tabType.Additional\" (mouseup)=\"switchTab(tabType.Additional)\"></span>\n      <span [textContent]=\"'PROPERTIES' | localize\" class=\"navigator\" [class.selected]=\"currentTab === tabType.Properties\" (mouseup)=\"switchTab(tabType.Properties)\"></span>\n    </div>\n    <ng-container [ngSwitch]=\"currentTab\" class=\"content\">\n      <div *ngSwitchCase=\"tabType.Additional\" @showContent>\n        <app-product-additional-info\n          [article]=\"article\"\n        ></app-product-additional-info>\n      </div>\n      <div *ngSwitchCase=\"tabType.Properties\" @showContent>\n        <app-product-properties [article]=\"article\"></app-product-properties>\n      </div>\n    </ng-container>\n  </div>\n</div>\n",
-        animations: [
-            trigger('showContent', [
-                state('void', style({ 'opacity': '0' })),
-                state('*', style({ 'opacity': '1' })),
-                transition('void => *', animate('200ms 100ms ease-in-out')),
-            ])
-        ],
-        styles: [".info-navigation{margin:30px 0}.info-navigation .navigator:not(:last-child){margin-right:30px}.navigator{font-size:15px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.navigator.selected{color:#2b60a7}"]
-    })
-], ProductInfoComponent);
+ProductInfoTabsComponent.propDecorators = {
+    tabContent: [{ type: ViewChild, args: ['tabContent',] }],
+    article: [{ type: Input }]
+};
 
-let ProductAdditionalInfoComponent = class ProductAdditionalInfoComponent {
+class ProductAdditionalInfoComponent {
     constructor(_sanitizer, _connectorService, _changeDetector) {
         this._sanitizer = _sanitizer;
         this._connectorService = _connectorService;
@@ -1983,25 +2081,45 @@ let ProductAdditionalInfoComponent = class ProductAdditionalInfoComponent {
             return;
         });
     }
-};
+}
+ProductAdditionalInfoComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-product-additional-info',
+                template: `
+    <h3 *ngIf="showLabel" [textContent]="'ADDITIONAL_DATA' | localize"></h3>
+    <ng-container *ngIf="textParts && textParts.length > 0">
+      <div class="additional-info-parts" *ngFor="let text of textParts" [innerHTML]="text"></div>
+    </ng-container>
+  `,
+                styles: [":host{display:block}:host .additional-info-parts{margin-bottom:20px;line-height:190%;color:#22313c;font-size:13px}:host ::ng-deep p{line-height:190%;margin:15px 0}:host ::ng-deep font{font-family:\"iOneMontserrat\"}:host .additional-info-parts>*:first-child{margin-top:0}:host .additional-info-parts>*:last-child{margin-bottom:0}\n"]
+            },] }
+];
 ProductAdditionalInfoComponent.ctorParameters = () => [
     { type: DomSanitizer },
     { type: ProductConnectorService },
     { type: ChangeDetectorRef }
 ];
-__decorate([
-    Input()
-], ProductAdditionalInfoComponent.prototype, "article", null);
-__decorate([
-    Input()
-], ProductAdditionalInfoComponent.prototype, "showLabel", void 0);
-ProductAdditionalInfoComponent = __decorate([
-    Component({
-        selector: 'app-product-additional-info',
-        template: "<h3 *ngIf=\"showLabel\" [textContent]=\"'ADDITIONAL_DATA' | localize\"></h3>\n<ng-container *ngIf=\"textParts && textParts.length > 0\">\n  <div class=\"additional-info-parts\" *ngFor=\"let text of textParts\" [innerHTML]=\"text\"></div>\n</ng-container>\n",
-        styles: [":host{display:block}:host .additional-info-parts{margin-bottom:20px;line-height:190%;color:#22313c;font-size:13px}:host ::ng-deep p{line-height:190%;margin:15px 0}:host ::ng-deep font{font-family:iOneMontserrat}:host .additional-info-parts>:first-child{margin-top:0}:host .additional-info-parts>:last-child{margin-bottom:0}"]
-    })
-], ProductAdditionalInfoComponent);
+ProductAdditionalInfoComponent.propDecorators = {
+    article: [{ type: Input }],
+    showLabel: [{ type: Input }]
+};
+
+class ProductAdditionalInfoModule {
+}
+ProductAdditionalInfoModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    PipeModule
+                ],
+                declarations: [
+                    ProductAdditionalInfoComponent
+                ],
+                exports: [
+                    ProductAdditionalInfoComponent
+                ]
+            },] }
+];
 
 const propertyMap = new Map([
     ['articleNr', 'ARTICLE_NUMBER'],
@@ -2014,7 +2132,7 @@ const propertyMap = new Map([
     ['height', 'HEIGHT'],
     ['width', 'WIDTH']
 ]);
-let ProductPropertiesComponent = class ProductPropertiesComponent {
+class ProductPropertiesComponent {
     constructor() {
         this.showLabel = false;
         this.properties = [];
@@ -2039,22 +2157,95 @@ let ProductPropertiesComponent = class ProductPropertiesComponent {
             }
         });
     }
-};
-__decorate([
-    Input()
-], ProductPropertiesComponent.prototype, "article", null);
-__decorate([
-    Input()
-], ProductPropertiesComponent.prototype, "showLabel", void 0);
-ProductPropertiesComponent = __decorate([
-    Component({
-        selector: 'app-product-properties',
-        template: "<div class=\"article-properties-wrapper\">\n  <h3 *ngIf=\"showLabel\" [textContent]=\"'PROPERTIES' | localize\"></h3>\n  <ng-container *ngFor=\"let property of properties\">\n    <div class=\"article-property\">\n      <div class=\"article-property-key\" [textContent]=\"property.key | localize\"></div>\n      <div class=\"article-property-value\" [textContent]=\"property.value\"></div>\n    </div>\n  </ng-container>\n</div>\n",
-        styles: [":host{display:block}.article-properties-wrapper{display:flex;flex-direction:column}.article-property{display:flex;flex-direction:row;border-bottom:1px solid #f6f5f4;padding:11px 0;font-size:13px}.article-property:first-child{border-top:1px solid #f6f5f4}.article-property-key{flex-basis:200px;flex-shrink:0;color:#5b6875}@media screen and (max-width:450px){.article-property-key{flex-basis:130px}}"]
-    })
-], ProductPropertiesComponent);
+}
+ProductPropertiesComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-product-properties',
+                template: `
+    <div class="article-properties-wrapper">
+      <h3 *ngIf="showLabel" [textContent]="'PROPERTIES' | localize"></h3>
+      <ng-container *ngFor="let property of properties">
+        <div class="article-property">
+          <div class="article-property-key" [textContent]="property.key | localize"></div>
+          <div class="article-property-value" [textContent]="property.value"></div>
+        </div>
+      </ng-container>
+    </div>
+  `,
+                styles: [":host{display:block}.article-properties-wrapper{display:flex;flex-direction:column}.article-property{display:flex;flex-direction:row;border-bottom:1px solid #f6f5f4;padding:11px 0;font-size:13px}.article-property:first-child{border-top:1px solid #f6f5f4}.article-property-key{flex-basis:200px;flex-shrink:0;color:#5b6875}@media screen and (max-width: 450px){.article-property-key{flex-basis:130px}}\n"]
+            },] }
+];
+ProductPropertiesComponent.ctorParameters = () => [];
+ProductPropertiesComponent.propDecorators = {
+    article: [{ type: Input }],
+    showLabel: [{ type: Input }]
+};
 
-let ProductSymbolsComponent = class ProductSymbolsComponent {
+class ProductPropertiesModule {
+}
+ProductPropertiesModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    PipeModule
+                ],
+                declarations: [
+                    ProductPropertiesComponent
+                ],
+                exports: [
+                    ProductPropertiesComponent
+                ]
+            },] }
+];
+
+class ProductDocumentsComponent {
+    constructor(iconCache) {
+        this.iconCache = iconCache;
+        this.icon = IconEnum;
+        this.showLabel = false;
+        this.documents = [];
+    }
+}
+ProductDocumentsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-product-documents',
+                template: `
+    <app-header *ngIf="showLabel" [label]="'DOCUMENTS' | localize" [amount]="documents?.length"></app-header>
+    <div *ngIf="documents && documents.length > 0">
+      <co-files-upload [documents]="documents" [canAdd]="false" readonly></co-files-upload>
+    </div>
+  `,
+                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,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22 standalone%3D%22no%22%3F%3E%3Csvg   xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22   xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22   xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22   xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22   xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22   xmlns%3Asodipodi%3D%22http%3A%2F%2Fsodipodi.sourceforge.net%2FDTD%2Fsodipodi-0.dtd%22   xmlns%3Ainkscape%3D%22http%3A%2F%2Fwww.inkscape.org%2Fnamespaces%2Finkscape%22   viewBox%3D%220 0 50 50%22   version%3D%221.1%22   id%3D%22svg8%22   sodipodi%3Adocname%3D%22download.svg%22   inkscape%3Aversion%3D%220.92.4 (5da689c313%2C 2019-01-14)%22%3E  %3Cmetadata     id%3D%22metadata14%22%3E    %3Crdf%3ARDF%3E      %3Ccc%3AWork         rdf%3Aabout%3D%22%22%3E        %3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E        %3Cdc%3Atype           rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22 %2F%3E        %3Cdc%3Atitle%3E%3C%2Fdc%3Atitle%3E      %3C%2Fcc%3AWork%3E    %3C%2Frdf%3ARDF%3E  %3C%2Fmetadata%3E  %3Cdefs     id%3D%22defs12%22 %2F%3E  %3Csodipodi%3Anamedview     pagecolor%3D%22%23ffffff%22     bordercolor%3D%22%23666666%22     borderopacity%3D%221%22     objecttolerance%3D%2210%22     gridtolerance%3D%2210%22     guidetolerance%3D%2210%22     inkscape%3Apageopacity%3D%220%22     inkscape%3Apageshadow%3D%222%22     inkscape%3Awindow-width%3D%221920%22     inkscape%3Awindow-height%3D%221017%22     id%3D%22namedview10%22     showgrid%3D%22false%22     inkscape%3Azoom%3D%226.675088%22     inkscape%3Acx%3D%22-14.056273%22     inkscape%3Acy%3D%2229.806579%22     inkscape%3Awindow-x%3D%22-8%22     inkscape%3Awindow-y%3D%22-8%22     inkscape%3Awindow-maximized%3D%221%22     inkscape%3Acurrent-layer%3D%22svg8%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g62%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g64%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g66%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g68%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g70%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g72%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g74%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g76%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g78%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g80%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g82%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g84%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g86%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g88%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g90%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g6-0%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E    %3Cg       id%3D%22g4-9%22       style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E      %3Cpath         inkscape%3Aconnector-curvature%3D%220%22         d%3D%22m 498.966%2C339.946 c -7.197%2C0 -13.034%2C5.837 -13.034%2C13.034 v 49.804 c 0%2C28.747 -23.388%2C52.135 -52.135%2C52.135 H 78.203 c -28.747%2C0 -52.135%2C-23.388 -52.135%2C-52.135 V 352.98 c 0%2C-7.197 -5.835%2C-13.034 -13.034%2C-13.034 C 5.835%2C339.946 0%2C345.782 0%2C352.98 v 49.804 c 0%2C43.121 35.082%2C78.203 78.203%2C78.203 h 355.594 c 43.121%2C0 78.203%2C-35.082 78.203%2C-78.203 V 352.98 c 0%2C-7.198 -5.835%2C-13.034 -13.034%2C-13.034 z%22         id%3D%22path2%22         style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E    %3C%2Fg%3E  %3C%2Fg%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g12-0%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E    %3Cg       id%3D%22g10-8%22       style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E      %3Cpath         inkscape%3Aconnector-curvature%3D%220%22         d%3D%22M 419.833%2C391.3 H 92.167 c -7.197%2C0 -13.034%2C5.837 -13.034%2C13.034 0%2C7.197 5.835%2C13.034 13.034%2C13.034 h 327.665 c 7.199%2C0 13.034%2C-5.835 13.034%2C-13.034 0%2C-7.197 -5.835%2C-13.034 -13.033%2C-13.034 z%22         id%3D%22path8-3%22         style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E    %3C%2Fg%3E  %3C%2Fg%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g18-4%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E    %3Cg       id%3D%22g16-7%22       style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E      %3Cpath         inkscape%3Aconnector-curvature%3D%220%22         d%3D%22m 387.919%2C207.93 c -4.795%2C-5.367 -13.034%2C-5.834 -18.404%2C-1.038 L 269.033%2C296.657 V 44.048 c 0%2C-7.197 -5.835%2C-13.034 -13.034%2C-13.034 -7.197%2C0 -13.034%2C5.835 -13.034%2C13.034 V 296.657 L 142.483%2C206.893 c -5.367%2C-4.796 -13.607%2C-4.328 -18.404%2C1.038 -4.794%2C5.369 -4.331%2C13.609 1.037%2C18.404 l 109.174%2C97.527 c 6.187%2C5.529 13.946%2C8.292 21.708%2C8.292 7.759%2C0 15.519%2C-2.763 21.708%2C-8.289 l 109.174%2C-97.53 c 5.37%2C-4.798 5.834%2C-13.038 1.039%2C-18.405 z%22         id%3D%22path14-9%22         style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E    %3C%2Fg%3E  %3C%2Fg%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g20%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g22-9%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g24-3%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g26%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g28-4%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g30-2%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g32%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g34-2%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g36-1%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g38%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g40-6%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g42-4%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g44%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g46-7%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g48-3%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%3C%2Fsvg%3E\") no-repeat left 6px center / 36px auto!important}::ng-deep co-file-upload co-tile .tile-extra-bottom .main{padding:0!important}\n"]
+            },] }
+];
+ProductDocumentsComponent.ctorParameters = () => [
+    { type: IconCacheService }
+];
+ProductDocumentsComponent.propDecorators = {
+    showLabel: [{ type: Input }],
+    documents: [{ type: Input }]
+};
+
+class ProductDocumentModule {
+}
+ProductDocumentModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    HeaderModule,
+                    PipeModule,
+                    FilesUploadModule
+                ],
+                declarations: [
+                    ProductDocumentsComponent
+                ],
+                exports: [
+                    ProductDocumentsComponent
+                ]
+            },] }
+];
+
+class ProductSymbolsComponent {
     constructor() {
         this.symbolStrings = [];
     }
@@ -2074,108 +2265,248 @@ let ProductSymbolsComponent = class ProductSymbolsComponent {
     }
     ngOnInit() {
     }
-};
-__decorate([
-    Input()
-], ProductSymbolsComponent.prototype, "symbols", null);
-__decorate([
-    HostBinding('class')
-], ProductSymbolsComponent.prototype, "_className", void 0);
-ProductSymbolsComponent = __decorate([
-    Component({
-        selector: 'app-product-symbols',
-        template: "<div *ngIf=\"symbols && symbols.length > 0\">\n  <app-header [label]=\"'SYMBOLS' | localize\" [amount]=\"symbols?.length\"></app-header>\n  <co-scroll-container>\n    <co-tile small noImagePlaceholder *ngFor=\"let symbol of symbolStrings\">\n      <ng-container tile-over-image>\n        <div class=\"symbol\" [textContent]=\"symbol\"></div>\n      </ng-container>\n      <ng-container tile-extra-bottom-content>\n        <div class=\"symbol-name\" [textContent]=\"'Wat moet hier?'\"></div>\n      </ng-container>\n    </co-tile>\n  </co-scroll-container>\n</div>\n",
-        styles: [":host{display:block}:host.floor .symbol{font-family:iOneFloorsymbols}:host.ginetex .symbol{font-family:iOneGinetexsymbols}.symbol{font-size:100px}"]
-    })
-], ProductSymbolsComponent);
+}
+ProductSymbolsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-product-symbols',
+                template: `
+    <div *ngIf="symbols && symbols.length > 0">
+      <app-header [label]="'SYMBOLS' | localize" [amount]="symbols?.length"></app-header>
+      <co-scroll-container>
+        <co-tile small noImagePlaceholder *ngFor="let symbol of symbolStrings">
+          <ng-container tile-over-image>
+            <div class="symbol" [textContent]="symbol"></div>
+          </ng-container>
+          <ng-container tile-extra-bottom-content>
+            <div class="symbol-name" [textContent]="'Wat moet hier?'"></div>
+          </ng-container>
+        </co-tile>
+      </co-scroll-container>
+    </div>
+  `,
+                styles: [":host{display:block}:host.floor .symbol{font-family:iOneFloorsymbols}:host.ginetex .symbol{font-family:iOneGinetexsymbols}.symbol{font-size:100px}\n"]
+            },] }
+];
+ProductSymbolsComponent.ctorParameters = () => [];
+ProductSymbolsComponent.propDecorators = {
+    symbols: [{ type: Input }],
+    _className: [{ type: HostBinding, args: ['class',] }]
+};
+
+class ProductSymbolsModule {
+}
+ProductSymbolsModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    HeaderModule,
+                    PipeModule,
+                    ScrollContainerModule,
+                    TileModule
+                ],
+                declarations: [
+                    ProductSymbolsComponent
+                ],
+                exports: [
+                    ProductSymbolsComponent
+                ]
+            },] }
+];
+
+class ProductInfoTabsModule {
+}
+ProductInfoTabsModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    PipeModule,
+                    ProductAdditionalInfoModule,
+                    ProductPropertiesModule,
+                    ProductDocumentModule,
+                    ProductSymbolsModule
+                ],
+                declarations: [
+                    ProductInfoTabsComponent
+                ],
+                exports: [
+                    ProductInfoTabsComponent
+                ]
+            },] }
+];
 
-let ProductPageModule = class ProductPageModule {
-};
-ProductPageModule = __decorate([
-    NgModule({
-        imports: [
-            CommonModule,
-            IconModule,
-            LoaderModule,
-            PipeModule,
-            NumberPickerModule,
-            ButtonModule,
-            PriceDisplayPipeModule,
-            InputTextModule,
-            FilesUploadModule,
-            ScrollContainerModule,
-            TileModule,
-            LevelIndicatorModule,
-            ArticleTileModule,
-        ],
-        schemas: [CUSTOM_ELEMENTS_SCHEMA],
-        declarations: [
-            ProductPageComponent,
-            ProductSelectorTypeComponent,
-            ImageCarouselComponent,
-            ProductDescriptionComponent,
-            ProductAdditionalDescriptionComponent,
-            ProductPriceComponent,
-            ProductAddtocartComponent,
-            ProductRelatedComponent,
-            ProductStockComponent,
-            ProductDeliveryComponent,
-            ProductInfoTabsComponent,
-            ProductDocumentsComponent,
-            HeaderComponent,
-            ProductInfoComponent,
-            ProductAdditionalInfoComponent,
-            ProductPropertiesComponent,
-            ProductSymbolsComponent
-        ],
-        exports: [ProductPageComponent]
-    })
-], ProductPageModule);
+class ProductPageModule {
+}
+ProductPageModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    ProductSelectorTypeModule,
+                    ImageCarouselModule,
+                    IconModule,
+                    ProductDescriptionModule,
+                    ProductAdditionalDescriptionModule,
+                    ProductPriceModule,
+                    ProductAddtocartModule,
+                    ProductRelatedModule,
+                    ProductStockModule,
+                    ProductDeliveryModule,
+                    ProductInfoTabsModule,
+                    PipeModule
+                ],
+                schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                declarations: [
+                    ProductPageComponent
+                ],
+                exports: [
+                    ProductPageComponent
+                ]
+            },] }
+];
 
-let ProductExternalSourceModule = class ProductExternalSourceModule {
-};
-ProductExternalSourceModule = __decorate([
-    NgModule({
-        imports: [
-            CommonModule,
-            ProductPageModule
-        ],
-        declarations: [
-            ProductExternalSourceComponent
-        ],
-        exports: [
-            ProductExternalSourceComponent
-        ]
-    })
-], ProductExternalSourceModule);
+class IoneProductModule {
+}
+IoneProductModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    // BrowserAnimationsModule,
+                    CommonModule,
+                    ProductPageModule
+                ],
+                declarations: [
+                    IoneProductComponent
+                ],
+                exports: [
+                    IoneProductComponent
+                ],
+                bootstrap: [
+                    IoneProductComponent
+                ]
+            },] }
+];
+
+class ProductExternalSourceComponent {
+    constructor(_sanitizer, _productConnectorService, _appEventService) {
+        this._sanitizer = _sanitizer;
+        this._productConnectorService = _productConnectorService;
+        this._appEventService = _appEventService;
+        this.addToCart = new EventEmitter();
+        this.addToQuote = new EventEmitter();
+        this.alternativeClick = new EventEmitter();
+        this.showProduct = false;
+        this.loaded = false;
+        this.externalSettings = {};
+        this._subs = [];
+    }
+    set externalSource(value) {
+        this._externalSource = value;
+        this.loaded = false;
+        this._prepareExternalSource();
+    }
+    get externalSource() {
+        return this._externalSource;
+    }
+    showClass() {
+        return true;
+    }
+    ngOnInit() {
+        this._subs.push(this._appEventService.onAddToCart.subscribe(json => this.addToCart.next(json)), this._appEventService.onAddToQuote.subscribe(json => this.addToQuote.next(json)), this._appEventService.onAlternativeClick.subscribe(article => this.alternativeClick.next(article)));
+    }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+    _prepareExternalSource() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this._externalSource) {
+                return;
+            }
+            this.externalUrl = undefined;
+            this.externalSettings = {};
+            if (this.externalSource.type === 'CATF') {
+                // get bundle settings from external source
+                const bundleSettings = yield this._productConnectorService.getProductBundleSettings(this.externalSource.url, parseInt(this.externalSource.schema, 0));
+                this.externalSettings = JSON.parse(bundleSettings);
+                if (this.options) {
+                    this.externalSettings.options = this.options;
+                }
+                // this.externalSettings.assetPath = "https://cdn1.colijn-it.nl/content43";
+                // this.externalSettings.threeDAssetPath = "https://cdn1.colijn-it.nl/content43";
+                if (this.externalSource.username && this.externalSource.password) {
+                    this.externalSettings.useLoginEncryption = true;
+                    this.externalSettings.username = this.externalSource.username;
+                    this.externalSettings.password = this.externalSource.password;
+                }
+                // finally show the catalog
+                this.showProduct = true;
+            }
+            else {
+                this.externalUrl = this.externalSource.url;
+                this.safeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(this.externalUrl);
+                this.showProduct = false;
+            }
+            this.loaded = true;
+        });
+    }
+}
+ProductExternalSourceComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'co-product-external-source',
+                template: `
+        <ng-container *ngIf="loaded">
+            <ng-container *ngIf="showProduct">
+                <app-product-page
+                        [sku]="sku"
+                        [settings]="externalSettings"
+                ></app-product-page>
+            </ng-container>
+            <ng-container *ngIf="!showProduct">
+                <iframe width="100%" height="100%" [src]="safeUrl" frameborder="0" allowfullscreen></iframe>
+            </ng-container>
+        </ng-container>
+    `,
+                providers: [
+                    ProductEventService,
+                    ProductSettingsService,
+                    ProductConnectorAdapterService,
+                    ProductConnectorService
+                ],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+ProductExternalSourceComponent.ctorParameters = () => [
+    { type: DomSanitizer },
+    { type: ProductConnectorService },
+    { type: ProductEventService }
+];
+ProductExternalSourceComponent.propDecorators = {
+    sku: [{ type: Input }],
+    externalSource: [{ type: Input }],
+    options: [{ type: Input }],
+    addToCart: [{ type: Output }],
+    addToQuote: [{ type: Output }],
+    alternativeClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ['class.co-product-external-source',] }]
+};
 
-let IoneProductModule = class IoneProductModule {
-};
-IoneProductModule = __decorate([
-    NgModule({
-        imports: [
-            // BrowserAnimationsModule,
-            CommonModule,
-            ProductExternalSourceModule,
-            ProductPageModule
-        ],
-        declarations: [
-            IoneProductComponent
-        ],
-        entryComponents: [
-            IoneProductComponent
-        ],
-        providers: [],
-        exports: [IoneProductComponent],
-        bootstrap: [
-            IoneProductComponent
-        ]
-    })
-], IoneProductModule);
+class ProductExternalSourceModule {
+}
+ProductExternalSourceModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    ProductPageModule
+                ],
+                declarations: [
+                    ProductExternalSourceComponent
+                ],
+                exports: [
+                    ProductExternalSourceComponent
+                ]
+            },] }
+];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IoneProductModule, ProductExternalSourceComponent, ProductExternalSourceModule, Version, ProductPageModule as ɵa, PipeModule as ɵb, ProductSymbolsComponent as ɵba, IoneProductComponent as ɵbb, LocalizePipe as ɵc, DictionaryService as ɵd, JsonUtilsService as ɵe, ProductPageComponent as ɵf, ProductConnectorService as ɵg, ProductConnectorAdapterService as ɵh, ProductSettingsService as ɵi, IconCacheService as ɵj, ProductEventService as ɵk, ProductSelectorTypeComponent as ɵl, ImageCarouselComponent as ɵm, ProductDescriptionComponent as ɵn, ProductAdditionalDescriptionComponent as ɵo, ProductPriceComponent as ɵp, ProductAddtocartComponent as ɵq, ProductRelatedComponent as ɵr, ProductStockComponent as ɵs, ProductDeliveryComponent as ɵt, ProductInfoTabsComponent as ɵu, ProductDocumentsComponent as ɵv, HeaderComponent as ɵw, ProductInfoComponent as ɵx, ProductAdditionalInfoComponent as ɵy, ProductPropertiesComponent as ɵz };
+export { IoneProductComponent, IoneProductModule, ProductExternalSourceComponent, ProductExternalSourceModule, Version, ProductPageModule as ɵa, ProductSelectorTypeModule as ɵb, ProductStockModule as ɵba, ProductStockComponent as ɵbb, ProductDeliveryModule as ɵbc, ProductDeliveryComponent as ɵbd, ProductInfoTabsModule as ɵbe, ProductAdditionalInfoModule as ɵbf, ProductAdditionalInfoComponent as ɵbg, ProductPropertiesModule as ɵbh, ProductPropertiesComponent as ɵbi, ProductDocumentModule as ɵbj, ProductDocumentsComponent as ɵbk, ProductSymbolsModule as ɵbl, ProductSymbolsComponent as ɵbm, ProductInfoTabsComponent as ɵbn, ProductPageComponent as ɵbo, PipeModule as ɵc, LocalizePipe as ɵd, DictionaryService as ɵe, JsonUtilsService as ɵf, ProductSelectorTypeComponent as ɵg, IconCacheService as ɵh, ImageCarouselModule as ɵi, ImageCarouselComponent as ɵj, ProductConnectorService as ɵk, ProductConnectorAdapterService as ɵl, ProductSettingsService as ɵm, ProductEventService as ɵn, ProductDescriptionModule as ɵo, ProductDescriptionComponent as ɵp, ProductAdditionalDescriptionModule as ɵq, ProductAdditionalDescriptionComponent as ɵr, ProductPriceModule as ɵs, ProductPriceComponent as ɵt, ProductAddtocartModule as ɵu, ProductAddtocartComponent as ɵv, ProductRelatedModule as ɵw, HeaderModule as ɵx, HeaderComponent as ɵy, ProductRelatedComponent as ɵz };
 //# sourceMappingURL=colijnit-product.js.map