@colijnit/product 2.9.1 → 12.0.0

package/bundles/colijnit-product.umd.js

@@ -1,10 +1,43 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/articleapi/build/model/article-full-object'), require('@colijnit/articleapi/build/model/super-article'), require('@colijnit/articleapi/build/articles'), require('@colijnit/articleapi/build/model/delivery-prognosis'), require('@colijnit/articleapi/build/model/document-content'), require('@colijnit/ioneconnector/build/service/business-object-factory'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/mainapi'), require('@angular/common/http'), require('@colijnit/ioneconnector/build/utils/string-utils'), require('@angular/common'), require('@angular/platform-browser'), require('@angular/animations'), require('@colijnit/mainapi/build/model/co-document'), require('@colijnit/corecomponents'), require('@colijnit/articleapi/build/model/configurator-statistics-environment')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/product', ['exports', '@angular/core', 'rxjs', '@colijnit/ioneconnector/build/model/options', '@colijnit/articleapi/build/model/article-full-object', '@colijnit/articleapi/build/model/super-article', '@colijnit/articleapi/build/articles', '@colijnit/articleapi/build/model/delivery-prognosis', '@colijnit/articleapi/build/model/document-content', '@colijnit/ioneconnector/build/service/business-object-factory', '@colijnit/transactionapi/build/transaction', '@colijnit/mainapi', '@angular/common/http', '@colijnit/ioneconnector/build/utils/string-utils', '@angular/common', '@angular/platform-browser', '@angular/animations', '@colijnit/mainapi/build/model/co-document', '@colijnit/corecomponents', '@colijnit/articleapi/build/model/configurator-statistics-environment'], factory) :
-    (global = global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.product = {}), global.ng.core, global.rxjs, global.options, global.articleFullObject, global.superArticle, global.articles, global.deliveryPrognosis, global.documentContent, global.businessObjectFactory, global.transaction, global.mainapi, global.ng.common.http, global.stringUtils, global.ng.common, global.ng.platformBrowser, global.ng.animations, global.coDocument, global.corecomponents, global.configuratorStatisticsEnvironment));
-}(this, (function (exports, core, rxjs, options, articleFullObject, superArticle, articles, deliveryPrognosis, documentContent, businessObjectFactory, transaction, mainapi, http, stringUtils, common, platformBrowser, animations, coDocument, corecomponents, configuratorStatisticsEnvironment) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/articleapi/build/model/article-full-object'), require('@colijnit/articleapi/build/model/super-article'), require('@colijnit/articleapi/build/articles'), require('@colijnit/articleapi/build/model/delivery-prognosis'), require('@colijnit/articleapi/build/model/document-content'), require('@colijnit/ioneconnector/build/service/business-object-factory'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/mainapi'), require('@angular/common/http'), require('@colijnit/ioneconnector/build/utils/string-utils'), require('@angular/common'), require('@angular/animations'), require('@angular/platform-browser'), require('@colijnit/mainapi/build/model/co-document'), require('@colijnit/corecomponents'), require('@colijnit/articleapi/build/model/configurator-statistics-environment')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/product', ['exports', '@angular/core', 'rxjs', '@colijnit/ioneconnector/build/model/options', '@colijnit/articleapi/build/model/article-full-object', '@colijnit/articleapi/build/model/super-article', '@colijnit/articleapi/build/articles', '@colijnit/articleapi/build/model/delivery-prognosis', '@colijnit/articleapi/build/model/document-content', '@colijnit/ioneconnector/build/service/business-object-factory', '@colijnit/transactionapi/build/transaction', '@colijnit/mainapi', '@angular/common/http', '@colijnit/ioneconnector/build/utils/string-utils', '@angular/common', '@angular/animations', '@angular/platform-browser', '@colijnit/mainapi/build/model/co-document', '@colijnit/corecomponents', '@colijnit/articleapi/build/model/configurator-statistics-environment'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.product = {}), global.ng.core, global.rxjs, global.options, global.articleFullObject, global.superArticle, global.articles, global.deliveryPrognosis, global.documentContent, global.businessObjectFactory, global.transaction, global.mainapi, global.ng.common.http, global.stringUtils, global.ng.common, global.ng.animations, global.ng.platformBrowser, global.coDocument, global.corecomponents, global.configuratorStatisticsEnvironment));
+})(this, (function (exports, i0, rxjs, options, articleFullObject, superArticle, articles, deliveryPrognosis, documentContent, businessObjectFactory, transaction, mainapi, i1, stringUtils, common, animations, i1$1, coDocument, corecomponents, configuratorStatisticsEnvironment) { 'use strict';
 
-    /*! *****************************************************************************
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+
+    // this file is dynamically created, do not change this
+    var Version = /** @class */ (function () {
+        function Version() {
+            this.name = "@colijnit/product";
+            this.description = "Product detail page project for iOne";
+            this.symVer = "12.0.0";
+            this.publishDate = "23-9-2023 11:50:39";
+        }
+        return Version;
+    }());
+
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -18,36 +51,39 @@
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
-    /* global Reflect, Promise */
-
-    var extendStatics = function(d, b) {
+    /* global Reflect, Promise, SuppressedError, Symbol */
+    var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
         return extendStatics(d, b);
     };
-
     function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     }
-
-    var __assign = function() {
+    var __assign = function () {
         __assign = Object.assign || function __assign(t) {
             for (var s, i = 1, n = arguments.length; i < n; i++) {
                 s = arguments[i];
-                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
             }
             return t;
         };
         return __assign.apply(this, arguments);
     };
-
     function __rest(s, e) {
         var t = {};
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
         if (s != null && typeof Object.getOwnPropertySymbols === "function")
             for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
                 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
@@ -55,184 +91,415 @@
             }
         return t;
     }
-
     function __decorate(decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
-
     function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); }
+        return function (target, key) { decorator(target, key, paramIndex); };
     }
-
+    function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+        function accept(f) { if (f !== void 0 && typeof f !== "function")
+            throw new TypeError("Function expected"); return f; }
+        var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+        var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+        var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+        var _, done = false;
+        for (var i = decorators.length - 1; i >= 0; i--) {
+            var context = {};
+            for (var p in contextIn)
+                context[p] = p === "access" ? {} : contextIn[p];
+            for (var p in contextIn.access)
+                context.access[p] = contextIn.access[p];
+            context.addInitializer = function (f) { if (done)
+                throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+            var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+            if (kind === "accessor") {
+                if (result === void 0)
+                    continue;
+                if (result === null || typeof result !== "object")
+                    throw new TypeError("Object expected");
+                if (_ = accept(result.get))
+                    descriptor.get = _;
+                if (_ = accept(result.set))
+                    descriptor.set = _;
+                if (_ = accept(result.init))
+                    initializers.unshift(_);
+            }
+            else if (_ = accept(result)) {
+                if (kind === "field")
+                    initializers.unshift(_);
+                else
+                    descriptor[key] = _;
+            }
+        }
+        if (target)
+            Object.defineProperty(target, contextIn.name, descriptor);
+        done = true;
+    }
+    ;
+    function __runInitializers(thisArg, initializers, value) {
+        var useValue = arguments.length > 2;
+        for (var i = 0; i < initializers.length; i++) {
+            value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+        }
+        return useValue ? value : void 0;
+    }
+    ;
+    function __propKey(x) {
+        return typeof x === "symbol" ? x : "".concat(x);
+    }
+    ;
+    function __setFunctionName(f, name, prefix) {
+        if (typeof name === "symbol")
+            name = name.description ? "[".concat(name.description, "]") : "";
+        return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+    }
+    ;
     function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
     }
-
     function __awaiter(thisArg, _arguments, P, generator) {
         function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
         return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
             function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
             step((generator = generator.apply(thisArg, _arguments || [])).next());
         });
     }
-
     function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
         function verb(n) { return function (v) { return step([n, v]); }; }
         function step(op) {
-            if (f) throw new TypeError("Generator is already executing.");
-            while (_) try {
-                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-                if (y = 0, t) op = [op[0] & 2, t.value];
-                switch (op[0]) {
-                    case 0: case 1: t = op; break;
-                    case 4: _.label++; return { value: op[1], done: false };
-                    case 5: _.label++; y = op[1]; op = [0]; continue;
-                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                    default:
-                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                        if (t[2]) _.ops.pop();
-                        _.trys.pop(); continue;
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (g && (g = 0, op[0] && (_ = 0)), _)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
                 }
-                op = body.call(thisArg, _);
-            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
         }
     }
-
-    function __createBinding(o, m, k, k2) {
-        if (k2 === undefined) k2 = k;
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+            desc = { enumerable: true, get: function () { return m[k]; } };
+        }
+        Object.defineProperty(o, k2, desc);
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
         o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
     }
-
-    function __exportStar(m, exports) {
-        for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-
     function __values(o) {
         var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m) return m.call(o);
-        if (o && typeof o.length === "number") return {
-            next: function () {
-                if (o && i >= o.length) o = void 0;
-                return { value: o && o[i++], done: !o };
-            }
-        };
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
         throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
     }
-
     function __read(o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m) return o;
+        if (!m)
+            return o;
         var i = m.call(o), r, ar = [], e;
         try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
         }
-        catch (error) { e = { error: error }; }
         finally {
             try {
-                if (r && !r.done && (m = i["return"])) m.call(i);
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
             }
-            finally { if (e) throw e.error; }
         }
         return ar;
     }
-
+    /** @deprecated */
     function __spread() {
         for (var ar = [], i = 0; i < arguments.length; i++)
             ar = ar.concat(__read(arguments[i]));
         return ar;
     }
-
+    /** @deprecated */
     function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
         for (var r = Array(s), k = 0, i = 0; i < il; i++)
             for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
                 r[k] = a[j];
         return r;
-    };
-
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
     }
-
     function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
         var g = generator.apply(thisArg, _arguments || []), i, q = [];
         return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
         function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
         function fulfill(value) { resume("next", value); }
         function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
     }
-
     function __asyncDelegator(o) {
         var i, p;
         return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }
     }
-
     function __asyncValues(o) {
-        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
         var m = o[Symbol.asyncIterator], i;
         return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
         function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
     }
-
     function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
         return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
     };
-
     function __importStar(mod) {
-        if (mod && mod.__esModule) return mod;
+        if (mod && mod.__esModule)
+            return mod;
         var result = {};
-        if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-        result.default = mod;
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
         return result;
     }
-
     function __importDefault(mod) {
         return (mod && mod.__esModule) ? mod : { default: mod };
     }
-
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
     }
-
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+    function __classPrivateFieldIn(state, receiver) {
+        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
+            throw new TypeError("Cannot use 'in' operator on non-object");
+        return typeof state === "function" ? receiver === state : state.has(receiver);
+    }
+    function __addDisposableResource(env, value, async) {
+        if (value !== null && value !== void 0) {
+            if (typeof value !== "object" && typeof value !== "function")
+                throw new TypeError("Object expected.");
+            var dispose;
+            if (async) {
+                if (!Symbol.asyncDispose)
+                    throw new TypeError("Symbol.asyncDispose is not defined.");
+                dispose = value[Symbol.asyncDispose];
+            }
+            if (dispose === void 0) {
+                if (!Symbol.dispose)
+                    throw new TypeError("Symbol.dispose is not defined.");
+                dispose = value[Symbol.dispose];
+            }
+            if (typeof dispose !== "function")
+                throw new TypeError("Object not disposable.");
+            env.stack.push({ value: value, dispose: dispose, async: async });
+        }
+        else if (async) {
+            env.stack.push({ async: true });
         }
-        privateMap.set(receiver, value);
         return value;
-    }
-
-    // this file is dynamically created, do not change this
-    var Version = /** @class */ (function () {
-        function Version() {
-            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";
+    }
+    var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+    function __disposeResources(env) {
+        function fail(e) {
+            env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
+            env.hasError = true;
         }
-        return Version;
-    }());
+        function next() {
+            while (env.stack.length) {
+                var rec = env.stack.pop();
+                try {
+                    var result = rec.dispose && rec.dispose.call(rec.value);
+                    if (rec.async)
+                        return Promise.resolve(result).then(next, function (e) { fail(e); return next(); });
+                }
+                catch (e) {
+                    fail(e);
+                }
+            }
+            if (env.hasError)
+                throw env.error;
+        }
+        return next();
+    }
+    var tslib_es6 = {
+        __extends: __extends,
+        __assign: __assign,
+        __rest: __rest,
+        __decorate: __decorate,
+        __param: __param,
+        __metadata: __metadata,
+        __awaiter: __awaiter,
+        __generator: __generator,
+        __createBinding: __createBinding,
+        __exportStar: __exportStar,
+        __values: __values,
+        __read: __read,
+        __spread: __spread,
+        __spreadArrays: __spreadArrays,
+        __spreadArray: __spreadArray,
+        __await: __await,
+        __asyncGenerator: __asyncGenerator,
+        __asyncDelegator: __asyncDelegator,
+        __asyncValues: __asyncValues,
+        __makeTemplateObject: __makeTemplateObject,
+        __importStar: __importStar,
+        __importDefault: __importDefault,
+        __classPrivateFieldGet: __classPrivateFieldGet,
+        __classPrivateFieldSet: __classPrivateFieldSet,
+        __classPrivateFieldIn: __classPrivateFieldIn,
+        __addDisposableResource: __addDisposableResource,
+        __disposeResources: __disposeResources,
+    };
 
     var JsonUtilsService = /** @class */ (function () {
         function JsonUtilsService() {
@@ -263,14 +530,14 @@
                 });
             });
         };
-        JsonUtilsService.ɵprov = core.ɵɵdefineInjectable({ factory: function JsonUtilsService_Factory() { return new JsonUtilsService(); }, token: JsonUtilsService, providedIn: "root" });
-        JsonUtilsService = __decorate([
-            core.Injectable({
-                providedIn: 'root'
-            })
-        ], JsonUtilsService);
         return JsonUtilsService;
-    }());
+    }());
+    JsonUtilsService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function JsonUtilsService_Factory() { return new JsonUtilsService(); }, token: JsonUtilsService, providedIn: "root" });
+    JsonUtilsService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
 
     var SettingsOptions = /** @class */ (function () {
         function SettingsOptions() {
@@ -547,11 +814,12 @@
                 });
             });
         };
-        ProductConnectorAdapterService = __decorate([
-            core.Injectable()
-        ], ProductConnectorAdapterService);
         return ProductConnectorAdapterService;
-    }());
+    }());
+    ProductConnectorAdapterService.decorators = [
+        { type: i0.Injectable }
+    ];
+    ProductConnectorAdapterService.ctorParameters = function () { return []; };
 
     var LanguageCode;
     (function (LanguageCode) {
@@ -642,7 +910,7 @@
             get: function () {
                 return this._language;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(DictionaryService.prototype, "rootUrl", {
@@ -650,7 +918,7 @@
                 this._rootUrl = value;
                 this._dictBasePath = this._rootUrl + '/' + this.dictionaryUrl;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         // Loads the dictionary for given language in memory.
@@ -694,22 +962,22 @@
                 text = text.charAt(0).toLowerCase() + text.slice(1);
             }
             if (replacementTexts.length > 0) {
-                text = stringUtils.StringUtils.ReplaceOccurrencesIn.apply(stringUtils.StringUtils, __spread([text, this._placeholder], replacementTexts));
+                text = stringUtils.StringUtils.ReplaceOccurrencesIn.apply(stringUtils.StringUtils, __spreadArray([text, this._placeholder], __read(replacementTexts)));
             }
             return text;
         };
-        DictionaryService.ctorParameters = function () { return [
-            { type: http.HttpClient },
-            { type: JsonUtilsService }
-        ]; };
-        DictionaryService.ɵprov = core.ɵɵdefineInjectable({ factory: function DictionaryService_Factory() { return new DictionaryService(core.ɵɵinject(http.HttpClient), core.ɵɵinject(JsonUtilsService)); }, token: DictionaryService, providedIn: "root" });
-        DictionaryService = __decorate([
-            core.Injectable({
-                providedIn: 'root'
-            })
-        ], DictionaryService);
         return DictionaryService;
-    }());
+    }());
+    DictionaryService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DictionaryService_Factory() { return new DictionaryService(i0__namespace.ɵɵinject(i1__namespace.HttpClient), i0__namespace.ɵɵinject(JsonUtilsService)); }, token: DictionaryService, providedIn: "root" });
+    DictionaryService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    DictionaryService.ctorParameters = function () { return [
+        { type: i1.HttpClient },
+        { type: JsonUtilsService }
+    ]; };
 
     var ProductSettingsService = /** @class */ (function () {
         function ProductSettingsService(_jsonUtilsService, _dictionaryService) {
@@ -724,7 +992,7 @@
             set: function (value) {
                 this._settings = value;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ProductSettingsService.prototype.initializeSettings = function () {
@@ -800,15 +1068,15 @@
                 });
             });
         };
-        ProductSettingsService.ctorParameters = function () { return [
-            { type: JsonUtilsService },
-            { type: DictionaryService }
-        ]; };
-        ProductSettingsService = __decorate([
-            core.Injectable()
-        ], ProductSettingsService);
         return ProductSettingsService;
-    }());
+    }());
+    ProductSettingsService.decorators = [
+        { type: i0.Injectable }
+    ];
+    ProductSettingsService.ctorParameters = function () { return [
+        { type: JsonUtilsService },
+        { type: DictionaryService }
+    ]; };
 
     // Holds all iONE backend related state and methods for a running HomeDecorator. To be used anywhere internally.
     var ProductConnectorService = /** @class */ (function () {
@@ -825,7 +1093,7 @@
             get: function () {
                 return this._shouldShowLoader;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ProductConnectorService.prototype.ngOnDestroy = function () {
@@ -934,15 +1202,15 @@
         ProductConnectorService.prototype.onShowLoaderChange = function (showLoader) {
             this._shouldShowLoader = showLoader;
         };
-        ProductConnectorService.ctorParameters = function () { return [
-            { type: ProductConnectorAdapterService },
-            { type: ProductSettingsService }
-        ]; };
-        ProductConnectorService = __decorate([
-            core.Injectable()
-        ], ProductConnectorService);
         return ProductConnectorService;
-    }());
+    }());
+    ProductConnectorService.decorators = [
+        { type: i0.Injectable }
+    ];
+    ProductConnectorService.ctorParameters = function () { return [
+        { type: ProductConnectorAdapterService },
+        { type: ProductSettingsService }
+    ]; };
 
     var ProductEventService = /** @class */ (function () {
         function ProductEventService() {
@@ -959,27 +1227,22 @@
             this.onArticleInfoReceived = new rxjs.Subject();
             this.onUpdateProductInfoTab = new rxjs.Subject();
         }
-        __decorate([
-            core.Output()
-        ], ProductEventService.prototype, "onAddToCart", void 0);
-        __decorate([
-            core.Output()
-        ], ProductEventService.prototype, "onAlternativeClick", void 0);
-        __decorate([
-            core.Output()
-        ], ProductEventService.prototype, "onAddToQuote", void 0);
-        __decorate([
-            core.Output()
-        ], ProductEventService.prototype, "onForceRenderImage", void 0);
-        ProductEventService = __decorate([
-            core.Directive(),
-            core.Injectable()
-        ], ProductEventService);
         return ProductEventService;
-    }());
+    }());
+    ProductEventService.decorators = [
+        { type: i0.Directive },
+        { type: i0.Injectable }
+    ];
+    ProductEventService.propDecorators = {
+        onAddToCart: [{ type: i0.Output }],
+        onAlternativeClick: [{ type: i0.Output }],
+        onAddToQuote: [{ type: i0.Output }],
+        onForceRenderImage: [{ type: i0.Output }]
+    };
 
     var IoneProductComponent = /** @class */ (function () {
         function IoneProductComponent(_dictionary, _jsonUtils, _ione, _changeDetector, _appEventService, _settingsService) {
+            var _this = this;
             // this.sku = 'CF-HILL';
             // this.sku = 'CF-ALMADA';
             // this.sku = 'CF-39904ANT';
@@ -990,20 +1253,20 @@
             // this.sku = '1000234793';
             // this.sku = '1066';
             // this.sku = '104';
-            var _this = this;
             this._dictionary = _dictionary;
             this._jsonUtils = _jsonUtils;
             this._ione = _ione;
             this._changeDetector = _changeDetector;
             this._appEventService = _appEventService;
             this._settingsService = _settingsService;
-            this.onAddToCart = new core.EventEmitter();
-            this.forceRenderImage = new core.EventEmitter();
-            this.onAlternativeClick = new core.EventEmitter();
-            this.onArticleInfoReceived = new core.EventEmitter();
-            this.onArticleReceived = new core.EventEmitter();
-            this.onSelectionsReceived = new core.EventEmitter();
-            this.onAddToQuote = new core.EventEmitter();
+            this.onAddToCart = new i0.EventEmitter();
+            this.forceRenderImage = new i0.EventEmitter();
+            this.onAlternativeClick = new i0.EventEmitter();
+            this.onArticleInfoReceived = new i0.EventEmitter();
+            this.onArticleReceived = new i0.EventEmitter();
+            this.onSelectionsReceived = new i0.EventEmitter();
+            this.onAddToQuote = new i0.EventEmitter();
+            this.openStockEvent = new i0.EventEmitter();
             this.settingsLoaded = false;
             this._subs = [];
             // this.sku = "70000107";
@@ -1032,7 +1295,7 @@
                     // this._initConnection(settings);
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         IoneProductComponent.prototype.ngOnInit = function () {
@@ -1073,16 +1336,16 @@
                             compositeGoods.sort(function (a, b) { return a.versionNumber < b.versionNumber ? -1 : 1; });
                             _loop_1 = function (i) {
                                 var good, subArticle;
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
+                                return __generator(this, function (_b) {
+                                    switch (_b.label) {
                                         case 0:
                                             good = compositeGoods[i];
                                             subArticle = articleTreeData.articleTree.subArticles.find(function (s) { return s.goodId === good.memberGoodId; });
                                             if (!subArticle) return [3 /*break*/, 2];
                                             return [4 /*yield*/, this_1._ione.addWebSessionTransactionLine(subArticle.articleNumber, good.quantity)];
                                         case 1:
-                                            _a.sent();
-                                            _a.label = 2;
+                                            _b.sent();
+                                            _b.label = 2;
                                         case 2: return [2 /*return*/];
                                     }
                                 });
@@ -1111,175 +1374,45 @@
                 });
             });
         };
-        IoneProductComponent.ctorParameters = function () { return [
-            { type: DictionaryService },
-            { type: JsonUtilsService },
-            { type: ProductConnectorService },
-            { type: core.ChangeDetectorRef },
-            { type: ProductEventService },
-            { type: ProductSettingsService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], IoneProductComponent.prototype, "sku", void 0);
-        __decorate([
-            core.Input()
-        ], IoneProductComponent.prototype, "settings", null);
-        __decorate([
-            core.Output()
-        ], IoneProductComponent.prototype, "onAddToCart", void 0);
-        __decorate([
-            core.Output()
-        ], IoneProductComponent.prototype, "forceRenderImage", void 0);
-        __decorate([
-            core.Output()
-        ], IoneProductComponent.prototype, "onAlternativeClick", void 0);
-        __decorate([
-            core.Output()
-        ], IoneProductComponent.prototype, "onArticleInfoReceived", void 0);
-        __decorate([
-            core.Output()
-        ], IoneProductComponent.prototype, "onArticleReceived", void 0);
-        __decorate([
-            core.Output()
-        ], IoneProductComponent.prototype, "onSelectionsReceived", void 0);
-        __decorate([
-            core.Output()
-        ], IoneProductComponent.prototype, "onAddToQuote", void 0);
-        IoneProductComponent = __decorate([
-            core.Component({
-                selector: 'app-ione-product',
-                template: "\n    <app-product-page *ngIf=\"settingsLoaded\"\n        [sku]=\"sku\"\n    ></app-product-page>\n  ",
-                providers: [
-                    ProductEventService,
-                    ProductSettingsService,
-                    ProductConnectorAdapterService,
-                    ProductConnectorService
-                ],
-                encapsulation: core.ViewEncapsulation.Emulated,
-                styles: [""]
-            })
-        ], IoneProductComponent);
-        return IoneProductComponent;
-    }());
-
-    var ProductExternalSourceComponent = /** @class */ (function () {
-        function ProductExternalSourceComponent(_sanitizer, _productConnectorService, _appEventService) {
-            this._sanitizer = _sanitizer;
-            this._productConnectorService = _productConnectorService;
-            this._appEventService = _appEventService;
-            this.addToCart = new core.EventEmitter();
-            this.addToQuote = new core.EventEmitter();
-            this.alternativeClick = new core.EventEmitter();
-            this.showProduct = false;
-            this.loaded = false;
-            this.externalSettings = {};
-            this._subs = [];
-        }
-        Object.defineProperty(ProductExternalSourceComponent.prototype, "externalSource", {
-            get: function () {
-                return this._externalSource;
-            },
-            set: function (value) {
-                this._externalSource = value;
-                this.loaded = false;
-                this._prepareExternalSource();
-            },
-            enumerable: true,
-            configurable: true
-        });
-        ProductExternalSourceComponent.prototype.showClass = function () {
-            return true;
-        };
-        ProductExternalSourceComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this._subs.push(this._appEventService.onAddToCart.subscribe(function (json) { return _this.addToCart.next(json); }), this._appEventService.onAddToQuote.subscribe(function (json) { return _this.addToQuote.next(json); }), this._appEventService.onAlternativeClick.subscribe(function (article) { return _this.alternativeClick.next(article); }));
+        IoneProductComponent.prototype.openStock = function () {
+            this.openStockEvent.emit();
         };
-        ProductExternalSourceComponent.prototype.ngOnDestroy = function () {
-            this._subs.forEach(function (s) { return s.unsubscribe(); });
-        };
-        ProductExternalSourceComponent.prototype._prepareExternalSource = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var bundleSettings;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!this._externalSource) {
-                                return [2 /*return*/];
-                            }
-                            this.externalUrl = undefined;
-                            this.externalSettings = {};
-                            if (!(this.externalSource.type === 'CATF')) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this._productConnectorService.getProductBundleSettings(this.externalSource.url, parseInt(this.externalSource.schema, 0))];
-                        case 1:
-                            bundleSettings = _a.sent();
-                            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;
-                            return [3 /*break*/, 3];
-                        case 2:
-                            this.externalUrl = this.externalSource.url;
-                            this.safeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(this.externalUrl);
-                            this.showProduct = false;
-                            _a.label = 3;
-                        case 3:
-                            this.loaded = true;
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        ProductExternalSourceComponent.ctorParameters = function () { return [
-            { type: platformBrowser.DomSanitizer },
-            { type: ProductConnectorService },
-            { type: ProductEventService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], ProductExternalSourceComponent.prototype, "sku", void 0);
-        __decorate([
-            core.Input()
-        ], ProductExternalSourceComponent.prototype, "externalSource", null);
-        __decorate([
-            core.Input()
-        ], ProductExternalSourceComponent.prototype, "options", void 0);
-        __decorate([
-            core.Output()
-        ], ProductExternalSourceComponent.prototype, "addToCart", void 0);
-        __decorate([
-            core.Output()
-        ], ProductExternalSourceComponent.prototype, "addToQuote", void 0);
-        __decorate([
-            core.Output()
-        ], ProductExternalSourceComponent.prototype, "alternativeClick", void 0);
-        __decorate([
-            core.HostBinding('class.co-product-external-source')
-        ], ProductExternalSourceComponent.prototype, "showClass", null);
-        ProductExternalSourceComponent = __decorate([
-            core.Component({
-                selector: 'co-product-external-source',
-                template: "\n        <ng-container *ngIf=\"loaded\">\n            <ng-container *ngIf=\"showProduct\">\n                <app-product-page\n                        [sku]=\"sku\"\n                        [settings]=\"externalSettings\"\n                ></app-product-page>\n            </ng-container>\n            <ng-container *ngIf=\"!showProduct\">\n                <iframe width=\"100%\" height=\"100%\" [src]=\"safeUrl\" frameborder=\"0\" allowfullscreen></iframe>\n            </ng-container>\n        </ng-container>\n    ",
-                providers: [
-                    ProductEventService,
-                    ProductSettingsService,
-                    ProductConnectorAdapterService,
-                    ProductConnectorService
-                ],
-                encapsulation: core.ViewEncapsulation.None
-            })
-        ], ProductExternalSourceComponent);
-        return ProductExternalSourceComponent;
-    }());
+        return IoneProductComponent;
+    }());
+    IoneProductComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-ione-product',
+                    template: "\n      <app-product-page *ngIf=\"settingsLoaded\"\n                        (openStockEvent)=\"openStock()\" [sku]=\"sku\"\n      ></app-product-page>\n  ",
+                    providers: [
+                        ProductEventService,
+                        ProductSettingsService,
+                        ProductConnectorAdapterService,
+                        ProductConnectorService
+                    ],
+                    encapsulation: i0.ViewEncapsulation.Emulated,
+                    styles: [""]
+                },] }
+    ];
+    IoneProductComponent.ctorParameters = function () { return [
+        { type: DictionaryService },
+        { type: JsonUtilsService },
+        { type: ProductConnectorService },
+        { type: i0.ChangeDetectorRef },
+        { type: ProductEventService },
+        { type: ProductSettingsService }
+    ]; };
+    IoneProductComponent.propDecorators = {
+        sku: [{ type: i0.Input }],
+        settings: [{ type: i0.Input }],
+        onAddToCart: [{ type: i0.Output }],
+        forceRenderImage: [{ type: i0.Output }],
+        onAlternativeClick: [{ type: i0.Output }],
+        onArticleInfoReceived: [{ type: i0.Output }],
+        onArticleReceived: [{ type: i0.Output }],
+        onSelectionsReceived: [{ type: i0.Output }],
+        onAddToQuote: [{ type: i0.Output }],
+        openStockEvent: [{ type: i0.Output }]
+    };
 
     var StockAndDelivery = /** @class */ (function () {
         function StockAndDelivery(stock, deliveryDescription) {
@@ -1349,7 +1482,7 @@
             get: function () {
                 return this._iconCache;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         IconCacheService.prototype.getIcon = function (iconName) {
@@ -1362,17 +1495,17 @@
                 }
             }
         };
-        IconCacheService.ctorParameters = function () { return [
-            { type: platformBrowser.DomSanitizer }
-        ]; };
-        IconCacheService.ɵprov = core.ɵɵdefineInjectable({ factory: function IconCacheService_Factory() { return new IconCacheService(core.ɵɵinject(platformBrowser.DomSanitizer)); }, token: IconCacheService, providedIn: "root" });
-        IconCacheService = __decorate([
-            core.Injectable({
-                providedIn: 'root'
-            })
-        ], IconCacheService);
         return IconCacheService;
-    }());
+    }());
+    IconCacheService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function IconCacheService_Factory() { return new IconCacheService(i0__namespace.ɵɵinject(i1__namespace$1.DomSanitizer)); }, token: IconCacheService, providedIn: "root" });
+    IconCacheService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    IconCacheService.ctorParameters = function () { return [
+        { type: i1$1.DomSanitizer }
+    ]; };
 
     var ProductPageComponent = /** @class */ (function () {
         function ProductPageComponent(_ione, _renderer, _changeDetector, iconCache, settingsService, appEventService) {
@@ -1384,6 +1517,7 @@
             this.settingsService = settingsService;
             this.appEventService = appEventService;
             this.icon = IconEnum;
+            this.openStockEvent = new i0.EventEmitter();
             this.configurable = false;
             this.threeD = false;
             this.show2D = true;
@@ -1417,7 +1551,7 @@
                     this._getArticle();
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(ProductPageComponent.prototype, "settings", {
@@ -1434,7 +1568,7 @@
                     }
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(ProductPageComponent.prototype, "fullScreen", {
@@ -1449,14 +1583,14 @@
                 //   this.fullscreenAnimationEnd = true;
                 // }, 400)
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(ProductPageComponent.prototype, "fullScreenIcon", {
             get: function () {
                 return this.fullScreen ? this.icon.NormalScreen : this.icon.FullScreen;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(ProductPageComponent.prototype, "currentView", {
@@ -1469,7 +1603,7 @@
                 this.show3D = this._currentView === SelectorType.ThreeD;
                 this._changeDetector.detectChanges();
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ProductPageComponent.prototype.ngOnInit = function () {
@@ -1545,70 +1679,66 @@
                 });
             });
         };
-        ProductPageComponent.ctorParameters = function () { return [
-            { type: ProductConnectorService },
-            { type: core.Renderer2 },
-            { type: core.ChangeDetectorRef },
-            { type: IconCacheService },
-            { type: ProductSettingsService },
-            { type: ProductEventService }
-        ]; };
-        __decorate([
-            core.ViewChild('configurator', { read: core.ElementRef })
-        ], ProductPageComponent.prototype, "configurator", void 0);
-        __decorate([
-            core.ViewChild('selections', { read: core.ElementRef })
-        ], ProductPageComponent.prototype, "selections", void 0);
-        __decorate([
-            core.ViewChild('fullscreenbutton', { read: core.ElementRef })
-        ], ProductPageComponent.prototype, "fullscreenbutton", void 0);
-        __decorate([
-            core.Input()
-        ], ProductPageComponent.prototype, "sku", null);
-        __decorate([
-            core.Input()
-        ], ProductPageComponent.prototype, "settings", null);
-        ProductPageComponent = __decorate([
-            core.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: [
-                    animations.trigger('toggleFullScreen', [
-                        animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
-                        animations.state('halfscreen', animations.style({ 'position': '*', 'top': '*', 'left': '*', 'width': '*', 'height': '*' })),
-                        animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out')),
-                    ]),
-                    animations.trigger('toggleTopLeft', [
-                        animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'left': '0' })),
-                        animations.state('halfscreen', animations.style({ 'position': 'absolute', 'top': '*', 'left': '*' })),
-                        animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out')),
-                    ]),
-                    animations.trigger('toggleTopRight', [
-                        animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'right': '0' })),
-                        animations.state('halfscreen', animations.style({ 'position': '*', 'top': '*', 'right': '*' })),
-                        animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out')),
-                    ]),
-                    animations.trigger('toggleFullScreenRight', [
-                        animations.state('fullscreen', animations.style({ 'position': 'fixed', 'width': '400px', 'top': '0', 'right': '0' })),
-                        animations.state('halfscreen', animations.style({ 'position': '*', 'width': '*', 'top': '*', 'right': '*' })),
-                        animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out')),
-                    ]),
-                    animations.trigger('toggleVisibilityByState', [
-                        animations.state('hide', animations.style({ 'opacity': '0', 'display': 'none' })),
-                        animations.state('show', animations.style({ 'display': 'block', 'opacity': '1' })),
-                        animations.transition('hide <=> show', animations.animate('200ms 100ms ease-in-out')),
-                    ]),
-                    animations.trigger('toggleVisibility', [
-                        animations.state('void', animations.style({ 'opacity': '0' })),
-                        animations.state('*', animations.style({ 'opacity': '1' })),
-                        animations.transition('void => *', animations.animate('200ms ease-in-out')),
-                    ])
-                ],
-                styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:1400px;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content.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.prototype.openStock = function () {
+            this.openStockEvent.emit();
+        };
         return ProductPageComponent;
-    }());
+    }());
+    ProductPageComponent.decorators = [
+        { type: i0.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: [
+                        animations.trigger('toggleFullScreen', [
+                            animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
+                            animations.state('halfscreen', animations.style({ 'position': '*', 'top': '*', 'left': '*', 'width': '*', 'height': '*' })),
+                            animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out')),
+                        ]),
+                        animations.trigger('toggleTopLeft', [
+                            animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'left': '0' })),
+                            animations.state('halfscreen', animations.style({ 'position': 'absolute', 'top': '*', 'left': '*' })),
+                            animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out')),
+                        ]),
+                        animations.trigger('toggleTopRight', [
+                            animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'right': '0' })),
+                            animations.state('halfscreen', animations.style({ 'position': '*', 'top': '*', 'right': '*' })),
+                            animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out')),
+                        ]),
+                        animations.trigger('toggleFullScreenRight', [
+                            animations.state('fullscreen', animations.style({ 'position': 'fixed', 'width': '400px', 'top': '0', 'right': '0' })),
+                            animations.state('halfscreen', animations.style({ 'position': '*', 'width': '*', 'top': '*', 'right': '*' })),
+                            animations.transition('halfscreen <=> fullscreen', animations.animate('200ms ease-in-out')),
+                        ]),
+                        animations.trigger('toggleVisibilityByState', [
+                            animations.state('hide', animations.style({ 'opacity': '0', 'display': 'none' })),
+                            animations.state('show', animations.style({ 'display': 'block', 'opacity': '1' })),
+                            animations.transition('hide <=> show', animations.animate('200ms 100ms ease-in-out')),
+                        ]),
+                        animations.trigger('toggleVisibility', [
+                            animations.state('void', animations.style({ 'opacity': '0' })),
+                            animations.state('*', animations.style({ 'opacity': '1' })),
+                            animations.transition('void => *', animations.animate('200ms ease-in-out')),
+                        ])
+                    ],
+                    styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:1400px;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child{margin-top:0}.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:55%;flex-direction:column}.page-wrapper-right{display:flex;width:45%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:1px solid #efefef}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional{width:100%}.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74B77F}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;grid-gap:15px;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px}.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 = function () { return [
+        { type: ProductConnectorService },
+        { type: i0.Renderer2 },
+        { type: i0.ChangeDetectorRef },
+        { type: IconCacheService },
+        { type: ProductSettingsService },
+        { type: ProductEventService }
+    ]; };
+    ProductPageComponent.propDecorators = {
+        configurator: [{ type: i0.ViewChild, args: ['configurator', { read: i0.ElementRef },] }],
+        selections: [{ type: i0.ViewChild, args: ['selections', { read: i0.ElementRef },] }],
+        fullscreenbutton: [{ type: i0.ViewChild, args: ['fullscreenbutton', { read: i0.ElementRef },] }],
+        sku: [{ type: i0.Input }],
+        settings: [{ type: i0.Input }],
+        openStockEvent: [{ type: i0.Output }]
+    };
 
     var ProductSelectorTypeComponent = /** @class */ (function () {
         function ProductSelectorTypeComponent(_iconCache, _changeDetector) {
@@ -1616,8 +1746,8 @@
             this._changeDetector = _changeDetector;
             this.type = SelectorType;
             this.icons = IconEnum;
-            this.onIconClick = new core.EventEmitter();
-            this.currentTypeChange = new core.EventEmitter();
+            this.onIconClick = new i0.EventEmitter();
+            this.currentTypeChange = new i0.EventEmitter();
             this.twoDIcon = this._iconCache.getIcon(this.icons.TwoD);
             this.threeDIcon = this._iconCache.getIcon(this.icons.ThreeD);
         }
@@ -1629,34 +1759,96 @@
             this.onIconClick.next(this.currentType);
             this._changeDetector.detectChanges();
         };
-        ProductSelectorTypeComponent.ctorParameters = function () { return [
-            { type: IconCacheService },
-            { type: core.ChangeDetectorRef }
-        ]; };
-        __decorate([
-            core.Input()
-        ], ProductSelectorTypeComponent.prototype, "show2D", void 0);
-        __decorate([
-            core.Input()
-        ], ProductSelectorTypeComponent.prototype, "show3D", void 0);
-        __decorate([
-            core.Input()
-        ], ProductSelectorTypeComponent.prototype, "currentType", void 0);
-        __decorate([
-            core.Output()
-        ], ProductSelectorTypeComponent.prototype, "onIconClick", void 0);
-        __decorate([
-            core.Output()
-        ], ProductSelectorTypeComponent.prototype, "currentTypeChange", void 0);
-        ProductSelectorTypeComponent = __decorate([
-            core.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);
         return ProductSelectorTypeComponent;
-    }());
+    }());
+    ProductSelectorTypeComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-product-selector-type',
+                    template: "\n        <div *ngIf=\"show2D || show3D\" class=\"show-in\" [textContent]=\"'SHOW_IN' | localize\"></div>\n<!--\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-->\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: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 = function () { return [
+        { type: IconCacheService },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    ProductSelectorTypeComponent.propDecorators = {
+        show2D: [{ type: i0.Input }],
+        show3D: [{ type: i0.Input }],
+        currentType: [{ type: i0.Input }],
+        onIconClick: [{ type: i0.Output }],
+        currentTypeChange: [{ type: i0.Output }]
+    };
+
+    // A pipe for localizing string values in view templates.
+    var LocalizePipe = /** @class */ (function () {
+        function LocalizePipe(_dictionaryService) {
+            this._dictionaryService = _dictionaryService;
+        }
+        LocalizePipe.prototype.transform = function (value, upperCaseFirst, replace) {
+            var _a;
+            if (upperCaseFirst === void 0) { upperCaseFirst = true; }
+            if (replace === void 0) { replace = []; }
+            if (!value) {
+                return '';
+            }
+            replace = replace ? replace : [];
+            if (!Array.isArray(replace)) {
+                replace = [replace];
+            }
+            return (_a = this._dictionaryService).get.apply(_a, __spreadArray([value, upperCaseFirst], __read(replace)));
+        };
+        return LocalizePipe;
+    }());
+    LocalizePipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'localize'
+                },] }
+    ];
+    LocalizePipe.ctorParameters = function () { return [
+        { type: DictionaryService }
+    ]; };
+
+    var PipeModule = /** @class */ (function () {
+        function PipeModule() {
+        }
+        return PipeModule;
+    }());
+    PipeModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        LocalizePipe
+                    ],
+                    providers: [
+                        LocalizePipe
+                    ],
+                    exports: [
+                        LocalizePipe
+                    ]
+                },] }
+    ];
+
+    // import {IconModule} from '@colijnit/corecomponents';
+    var ProductSelectorTypeModule = /** @class */ (function () {
+        function ProductSelectorTypeModule() {
+        }
+        return ProductSelectorTypeModule;
+    }());
+    ProductSelectorTypeModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        PipeModule /*,
+                        IconModule*/
+                    ],
+                    declarations: [
+                        ProductSelectorTypeComponent
+                    ],
+                    exports: [
+                        ProductSelectorTypeComponent
+                    ]
+                },] }
+    ];
 
     var ImageCarouselComponent = /** @class */ (function () {
         function ImageCarouselComponent(_ione, _appEventService, _changeDetector, _domSanitizer, iconCache) {
@@ -1696,7 +1888,7 @@
                     this._changeDetector.detectChanges();
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ImageCarouselComponent.prototype.handleWindowResize = function () {
@@ -1725,7 +1917,7 @@
                 this._currentIndex = value;
                 this._scrollCarouselToIndex();
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ImageCarouselComponent.prototype.ngOnInit = function () {
@@ -1781,61 +1973,91 @@
                 }
             }
         };
-        ImageCarouselComponent.ctorParameters = function () { return [
-            { type: ProductConnectorService },
-            { type: ProductEventService },
-            { type: core.ChangeDetectorRef },
-            { type: platformBrowser.DomSanitizer },
-            { type: IconCacheService }
-        ]; };
-        __decorate([
-            core.ViewChild('carousel', { read: core.ElementRef })
-        ], ImageCarouselComponent.prototype, "carousel", void 0);
-        __decorate([
-            core.Input()
-        ], ImageCarouselComponent.prototype, "showRefresh", void 0);
-        __decorate([
-            core.Input()
-        ], ImageCarouselComponent.prototype, "images", null);
-        __decorate([
-            core.HostListener('window:resize')
-        ], ImageCarouselComponent.prototype, "handleWindowResize", null);
-        __decorate([
-            core.HostListener('swipeleft')
-        ], ImageCarouselComponent.prototype, "gotoNextSlide", null);
-        __decorate([
-            core.HostListener('swiperight')
-        ], ImageCarouselComponent.prototype, "gotoPrevSlide", null);
-        __decorate([
-            core.HostBinding('class.resizing')
-        ], ImageCarouselComponent.prototype, "resizing", void 0);
-        ImageCarouselComponent = __decorate([
-            core.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);
         return ImageCarouselComponent;
-    }());
+    }());
+    ImageCarouselComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-image-carousel',
+                    template: "\n    <div id=\"product_page_carousel\">\n      <div id=\"product_page_carousel_items\">\n        <co-loader [isShown]=\"showLoader\"></co-loader>\n        <div #carousel class=\"inner-carousel\">\n          <!-- This has been taken out of the for loop to prevent flashing images when updating. -->\n          <div *ngIf=\"images[0]\" class=\"carousel-item\" [id]=\"'slide-0'\" [class.active]=\"isCurrentIndex(0)\">\n            <img [src]=\"getImageSrc(images[0])\">\n          </div>\n          <div *ngFor=\"let image of images.slice(1); let index = index\" class=\"carousel-item\" [id]=\"'slide-' + (index + 1)\" [class.active]=\"isCurrentIndex((index + 1))\">\n            <img [src]=\"getImageSrc(image)\">\n          </div>\n          <div class=\"carousel-scroller-layer\" *ngIf=\"images && images.length > 1\">\n            <div class=\"carousel-item-scroller prev\" (click)=\"gotoPrevSlide()\" *ngIf=\"currentIndex > 0\"></div>\n            <div class=\"carousel-item-scroller next\" (click)=\"gotoNextSlide()\" *ngIf=\"currentIndex < images.length - 1\"></div>\n          </div>\n        </div>\n<!--\n        <co-icon class=\"selector-type-icon refresh-button\" [iconData]=\"iconCache.getIcon(icons.Refresh)\" (click)=\"onForceRenderImage()\" [class.loading]=\"showLoader\" *ngIf=\"showRefresh\"></co-icon>\n-->\n      </div>\n\n      <div id=\"product_page_carousel_thumbs\">\n        <co-scroll-container class=\"scroll-container\" *ngIf=\"images && images.length > 1\">\n          <div *ngFor=\"let image of images; let index = index\" class=\"carousel-thumb\" [class.active]=\"index === currentIndex\">\n            <img [src]=\"getImageSrc(image)\" (click)=\"handleThumbClick(index)\"/>\n          </div>\n        </co-scroll-container>\n      </div>\n    </div>\n  ",
+                    styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
+                },] }
+    ];
+    ImageCarouselComponent.ctorParameters = function () { return [
+        { type: ProductConnectorService },
+        { type: ProductEventService },
+        { type: i0.ChangeDetectorRef },
+        { type: i1$1.DomSanitizer },
+        { type: IconCacheService }
+    ]; };
+    ImageCarouselComponent.propDecorators = {
+        carousel: [{ type: i0.ViewChild, args: ['carousel', { read: i0.ElementRef },] }],
+        showRefresh: [{ type: i0.Input }],
+        images: [{ type: i0.Input }],
+        handleWindowResize: [{ type: i0.HostListener, args: ['window:resize',] }],
+        gotoNextSlide: [{ type: i0.HostListener, args: ['swipeleft',] }],
+        gotoPrevSlide: [{ type: i0.HostListener, args: ['swiperight',] }],
+        resizing: [{ type: i0.HostBinding, args: ['class.resizing',] }]
+    };
+
+    var ImageCarouselModule = /** @class */ (function () {
+        function ImageCarouselModule() {
+        }
+        return ImageCarouselModule;
+    }());
+    ImageCarouselModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        corecomponents.LoaderModule,
+                        // IconModule,
+                        corecomponents.ScrollContainerModule
+                    ],
+                    declarations: [
+                        ImageCarouselComponent
+                    ],
+                    exports: [
+                        ImageCarouselComponent
+                    ]
+                },] }
+    ];
 
     var ProductDescriptionComponent = /** @class */ (function () {
         function ProductDescriptionComponent() {
         }
         ProductDescriptionComponent.prototype.ngOnInit = function () {
         };
-        __decorate([
-            core.Input()
-        ], ProductDescriptionComponent.prototype, "article", void 0);
-        ProductDescriptionComponent = __decorate([
-            core.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);
         return ProductDescriptionComponent;
-    }());
+    }());
+    ProductDescriptionComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-product-description',
+                    template: "\n    <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: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 = function () { return []; };
+    ProductDescriptionComponent.propDecorators = {
+        article: [{ type: i0.Input }]
+    };
+
+    var ProductDescriptionModule = /** @class */ (function () {
+        function ProductDescriptionModule() {
+        }
+        return ProductDescriptionModule;
+    }());
+    ProductDescriptionModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    declarations: [
+                        ProductDescriptionComponent
+                    ],
+                    exports: [
+                        ProductDescriptionComponent
+                    ]
+                },] }
+    ];
 
     var BitUtils = /** @class */ (function () {
         function BitUtils() {
@@ -1873,7 +2095,7 @@
                     this._prepareDescription();
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ProductAdditionalDescriptionComponent.prototype.ngOnInit = function () {
@@ -1896,21 +2118,41 @@
                 }
             }
         };
-        ProductAdditionalDescriptionComponent.ctorParameters = function () { return [
-            { type: ProductEventService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], ProductAdditionalDescriptionComponent.prototype, "article", null);
-        ProductAdditionalDescriptionComponent = __decorate([
-            core.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);
         return ProductAdditionalDescriptionComponent;
-    }());
+    }());
+    ProductAdditionalDescriptionComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-product-additional-description',
+                    template: "\n    <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: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 = function () { return [
+        { type: ProductEventService }
+    ]; };
+    ProductAdditionalDescriptionComponent.propDecorators = {
+        article: [{ type: i0.Input }]
+    };
+
+    var ProductAdditionalDescriptionModule = /** @class */ (function () {
+        function ProductAdditionalDescriptionModule() {
+        }
+        return ProductAdditionalDescriptionModule;
+    }());
+    ProductAdditionalDescriptionModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        PipeModule
+                    ],
+                    declarations: [
+                        ProductAdditionalDescriptionComponent
+                    ],
+                    exports: [
+                        ProductAdditionalDescriptionComponent
+                    ]
+                },] }
+    ];
 
     var ProductPriceComponent = /** @class */ (function () {
         function ProductPriceComponent(_changeDetector) {
@@ -1926,7 +2168,7 @@
                 this._pricing = value;
                 this._setPrices();
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(ProductPriceComponent.prototype, "configurable", {
@@ -1934,7 +2176,7 @@
                 this._configurable = value;
                 this._setPrices();
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ProductPriceComponent.prototype.ngOnInit = function () {
@@ -1964,24 +2206,43 @@
                     return '€';
             }
         };
-        ProductPriceComponent.ctorParameters = function () { return [
-            { type: core.ChangeDetectorRef }
-        ]; };
-        __decorate([
-            core.Input()
-        ], ProductPriceComponent.prototype, "pricing", null);
-        __decorate([
-            core.Input()
-        ], ProductPriceComponent.prototype, "configurable", null);
-        ProductPriceComponent = __decorate([
-            core.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);
         return ProductPriceComponent;
-    }());
+    }());
+    ProductPriceComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-product-price',
+                    template: "\n    <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: valutaSign\"></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: valutaSign\"></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: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 = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    ProductPriceComponent.propDecorators = {
+        pricing: [{ type: i0.Input }],
+        configurable: [{ type: i0.Input }]
+    };
+
+    var ProductPriceModule = /** @class */ (function () {
+        function ProductPriceModule() {
+        }
+        return ProductPriceModule;
+    }());
+    ProductPriceModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        PipeModule,
+                        corecomponents.PriceDisplayPipeModule
+                    ],
+                    declarations: [
+                        ProductPriceComponent
+                    ],
+                    exports: [
+                        ProductPriceComponent
+                    ]
+                },] }
+    ];
 
     var ProductAddtocartComponent = /** @class */ (function () {
         function ProductAddtocartComponent(iconCache, _ioneControllerService, _appEventService, _settingsService) {
@@ -1993,9 +2254,9 @@
             this.configurable = false;
             this.configuring = false;
             this.fullscreen = false;
-            this.startConfiguration = new core.EventEmitter();
-            this.addToCartClick = new core.EventEmitter();
-            this.addToQuoteClick = new core.EventEmitter();
+            this.startConfiguration = new i0.EventEmitter();
+            this.addToCartClick = new i0.EventEmitter();
+            this.addToQuoteClick = new i0.EventEmitter();
             this.showQuoteButton = false;
             this._quantity = 1;
         }
@@ -2006,7 +2267,7 @@
             set: function (value) {
                 this._quantity = Math.max(1, value);
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ProductAddtocartComponent.prototype.ngOnInit = function () {
@@ -2063,49 +2324,54 @@
                 });
             });
         };
-        ProductAddtocartComponent.ctorParameters = function () { return [
-            { type: IconCacheService },
-            { type: ProductConnectorService },
-            { type: ProductEventService },
-            { type: ProductSettingsService }
-        ]; };
-        __decorate([
-            core.ViewChild('addtocartbutton', { read: core.ElementRef })
-        ], ProductAddtocartComponent.prototype, "addToCartButton", void 0);
-        __decorate([
-            core.Input()
-        ], ProductAddtocartComponent.prototype, "article", void 0);
-        __decorate([
-            core.Input()
-        ], ProductAddtocartComponent.prototype, "configurable", void 0);
-        __decorate([
-            core.Input()
-        ], ProductAddtocartComponent.prototype, "configuring", void 0);
-        __decorate([
-            core.HostBinding('class.full-screen'),
-            core.Input()
-        ], ProductAddtocartComponent.prototype, "fullscreen", void 0);
-        __decorate([
-            core.Input()
-        ], ProductAddtocartComponent.prototype, "quantity", null);
-        __decorate([
-            core.Output()
-        ], ProductAddtocartComponent.prototype, "startConfiguration", void 0);
-        __decorate([
-            core.Output()
-        ], ProductAddtocartComponent.prototype, "addToCartClick", void 0);
-        __decorate([
-            core.Output()
-        ], ProductAddtocartComponent.prototype, "addToQuoteClick", void 0);
-        ProductAddtocartComponent = __decorate([
-            core.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);
         return ProductAddtocartComponent;
-    }());
+    }());
+    ProductAddtocartComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-product-addtocart',
+                    template: "\n    <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: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 = function () { return [
+        { type: IconCacheService },
+        { type: ProductConnectorService },
+        { type: ProductEventService },
+        { type: ProductSettingsService }
+    ]; };
+    ProductAddtocartComponent.propDecorators = {
+        addToCartButton: [{ type: i0.ViewChild, args: ['addtocartbutton', { read: i0.ElementRef },] }],
+        article: [{ type: i0.Input }],
+        configurable: [{ type: i0.Input }],
+        configuring: [{ type: i0.Input }],
+        fullscreen: [{ type: i0.HostBinding, args: ['class.full-screen',] }, { type: i0.Input }],
+        quantity: [{ type: i0.Input }],
+        startConfiguration: [{ type: i0.Output }],
+        addToCartClick: [{ type: i0.Output }],
+        addToQuoteClick: [{ type: i0.Output }]
+    };
+
+    var ProductAddtocartModule = /** @class */ (function () {
+        function ProductAddtocartModule() {
+        }
+        return ProductAddtocartModule;
+    }());
+    ProductAddtocartModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        corecomponents.NumberPickerModule,
+                        corecomponents.ButtonModule,
+                        PipeModule
+                    ],
+                    declarations: [
+                        ProductAddtocartComponent
+                    ],
+                    exports: [
+                        ProductAddtocartComponent
+                    ]
+                },] }
+    ];
 
     var ProductRelatedComponent = /** @class */ (function () {
         function ProductRelatedComponent(_iOne, _appEventService) {
@@ -2136,7 +2402,7 @@
                     this._loadImages();
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ProductRelatedComponent.prototype.handleContentClick = function (article) {
@@ -2154,37 +2420,93 @@
                 }
             });
         };
-        ProductRelatedComponent.ctorParameters = function () { return [
-            { type: ProductConnectorService },
-            { type: ProductEventService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], ProductRelatedComponent.prototype, "refType", void 0);
-        __decorate([
-            core.Input()
-        ], ProductRelatedComponent.prototype, "label", void 0);
-        __decorate([
-            core.Input()
-        ], ProductRelatedComponent.prototype, "isSmallModus", void 0);
-        __decorate([
-            core.Input()
-        ], ProductRelatedComponent.prototype, "articles", null);
-        ProductRelatedComponent = __decorate([
-            core.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);
         return ProductRelatedComponent;
-    }());
+    }());
+    ProductRelatedComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-product-related',
+                    template: "\n    <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: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 = function () { return [
+        { type: ProductConnectorService },
+        { type: ProductEventService }
+    ]; };
+    ProductRelatedComponent.propDecorators = {
+        refType: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        isSmallModus: [{ type: i0.Input }],
+        articles: [{ type: i0.Input }]
+    };
+
+    var HeaderComponent = /** @class */ (function () {
+        function HeaderComponent() {
+        }
+        HeaderComponent.prototype.ngOnInit = function () {
+        };
+        return HeaderComponent;
+    }());
+    HeaderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-header',
+                    template: "\n    <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}\n"]
+                },] }
+    ];
+    HeaderComponent.ctorParameters = function () { return []; };
+    HeaderComponent.propDecorators = {
+        label: [{ type: i0.Input }],
+        amount: [{ type: i0.Input }]
+    };
+
+    var HeaderModule = /** @class */ (function () {
+        function HeaderModule() {
+        }
+        return HeaderModule;
+    }());
+    HeaderModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    declarations: [
+                        HeaderComponent
+                    ],
+                    exports: [
+                        HeaderComponent
+                    ]
+                },] }
+    ];
+
+    var ProductRelatedModule = /** @class */ (function () {
+        function ProductRelatedModule() {
+        }
+        return ProductRelatedModule;
+    }());
+    ProductRelatedModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        HeaderModule,
+                        corecomponents.ScrollContainerModule,
+                        corecomponents.ArticleTileModule
+                    ],
+                    declarations: [
+                        ProductRelatedComponent
+                    ],
+                    exports: [
+                        ProductRelatedComponent
+                    ]
+                },] }
+    ];
 
     var ProductStockComponent = /** @class */ (function () {
         function ProductStockComponent(_iOne, _iconCache) {
             this._iOne = _iOne;
             this._iconCache = _iconCache;
             this.icon = IconEnum;
+            this.openStockEvent = new i0.EventEmitter();
             this.iconData = this._iconCache.getIcon(this.icon.Warehouse);
         }
         Object.defineProperty(ProductStockComponent.prototype, "stockAndDelivery", {
@@ -2193,56 +2515,52 @@
                     this.numberInStock = value.stock;
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ProductStockComponent.prototype.ngOnInit = function () {
         };
-        ProductStockComponent.ctorParameters = function () { return [
-            { type: ProductConnectorService },
-            { type: IconCacheService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], ProductStockComponent.prototype, "stockAndDelivery", null);
-        ProductStockComponent = __decorate([
-            core.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.prototype.openStock = function () {
+            this.openStockEvent.emit();
+        };
         return ProductStockComponent;
-    }());
+    }());
+    ProductStockComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-product-stock',
+                    template: "\n    <!--<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\" (click)=\"openStock()\">\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;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 = function () { return [
+        { type: ProductConnectorService },
+        { type: IconCacheService }
+    ]; };
+    ProductStockComponent.propDecorators = {
+        stockAndDelivery: [{ type: i0.Input }],
+        openStockEvent: [{ type: i0.Output }]
+    };
 
-    var LocalizePipe = /** @class */ (function () {
-        function LocalizePipe(_dictionaryService) {
-            this._dictionaryService = _dictionaryService;
+    var ProductStockModule = /** @class */ (function () {
+        function ProductStockModule() {
         }
-        LocalizePipe.prototype.transform = function (value, upperCaseFirst, replace) {
-            var _a;
-            if (upperCaseFirst === void 0) { upperCaseFirst = true; }
-            if (replace === void 0) { replace = []; }
-            if (!value) {
-                return '';
-            }
-            replace = replace ? replace : [];
-            if (!Array.isArray(replace)) {
-                replace = [replace];
-            }
-            return (_a = this._dictionaryService).get.apply(_a, __spread([value, upperCaseFirst], replace));
-        };
-        LocalizePipe.ctorParameters = function () { return [
-            { type: DictionaryService }
-        ]; };
-        LocalizePipe = __decorate([
-            core.Pipe({
-                name: 'localize'
-            })
-            // A pipe for localizing string values in view templates.
-        ], LocalizePipe);
-        return LocalizePipe;
-    }());
+        return ProductStockModule;
+    }());
+    ProductStockModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        corecomponents.IconModule,
+                        PipeModule
+                    ],
+                    declarations: [
+                        ProductStockComponent
+                    ],
+                    exports: [
+                        ProductStockComponent
+                    ]
+                },] }
+    ];
 
     var ProductDeliveryComponent = /** @class */ (function () {
         function ProductDeliveryComponent(_localizePipe, _iOne, _iconCache) {
@@ -2261,28 +2579,49 @@
                     }
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ProductDeliveryComponent.prototype.ngOnInit = function () {
         };
-        ProductDeliveryComponent.ctorParameters = function () { return [
-            { type: LocalizePipe },
-            { type: ProductConnectorService },
-            { type: IconCacheService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], ProductDeliveryComponent.prototype, "stockAndDelivery", null);
-        ProductDeliveryComponent = __decorate([
-            core.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);
         return ProductDeliveryComponent;
-    }());
+    }());
+    ProductDeliveryComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-product-delivery',
+                    template: "\n    <!--<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}}\n"]
+                },] }
+    ];
+    ProductDeliveryComponent.ctorParameters = function () { return [
+        { type: LocalizePipe },
+        { type: ProductConnectorService },
+        { type: IconCacheService }
+    ]; };
+    ProductDeliveryComponent.propDecorators = {
+        stockAndDelivery: [{ type: i0.Input }]
+    };
+
+    var ProductDeliveryModule = /** @class */ (function () {
+        function ProductDeliveryModule() {
+        }
+        return ProductDeliveryModule;
+    }());
+    ProductDeliveryModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        corecomponents.IconModule,
+                        PipeModule
+                    ],
+                    declarations: [
+                        ProductDeliveryComponent
+                    ],
+                    exports: [
+                        ProductDeliveryComponent
+                    ]
+                },] }
+    ];
 
     var ProductInfoTabsComponent = /** @class */ (function () {
         function ProductInfoTabsComponent(_appEventService) {
@@ -2304,7 +2643,7 @@
                     this.updateTab(0);
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ProductInfoTabsComponent.prototype.ngOnDestroy = function () {
@@ -2331,125 +2670,22 @@
                 this.tabs.push({ title: 'SYMBOLS' });
             }
         };
-        ProductInfoTabsComponent.ctorParameters = function () { return [
-            { type: ProductEventService }
-        ]; };
-        __decorate([
-            core.ViewChild('tabContent')
-        ], ProductInfoTabsComponent.prototype, "tabContent", void 0);
-        __decorate([
-            core.Input()
-        ], ProductInfoTabsComponent.prototype, "article", null);
-        ProductInfoTabsComponent = __decorate([
-            core.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);
         return ProductInfoTabsComponent;
-    }());
-
-    var PipeModule = /** @class */ (function () {
-        function PipeModule() {
-        }
-        PipeModule = __decorate([
-            core.NgModule({
-                exports: [
-                    LocalizePipe
-                ],
-                declarations: [
-                    LocalizePipe
-                ],
-                providers: [
-                    LocalizePipe
-                ]
-            })
-        ], PipeModule);
-        return PipeModule;
-    }());
-
-    var ProductDocumentsComponent = /** @class */ (function () {
-        function ProductDocumentsComponent(iconCache) {
-            this.iconCache = iconCache;
-            this.icon = IconEnum;
-            this.showLabel = false;
-            this.documents = [];
-        }
-        ProductDocumentsComponent.ctorParameters = function () { return [
-            { type: IconCacheService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], ProductDocumentsComponent.prototype, "showLabel", void 0);
-        __decorate([
-            core.Input()
-        ], ProductDocumentsComponent.prototype, "documents", void 0);
-        ProductDocumentsComponent = __decorate([
-            core.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);
-        return ProductDocumentsComponent;
-    }());
-
-    var HeaderComponent = /** @class */ (function () {
-        function HeaderComponent() {
-        }
-        HeaderComponent.prototype.ngOnInit = function () {
-        };
-        __decorate([
-            core.Input()
-        ], HeaderComponent.prototype, "label", void 0);
-        __decorate([
-            core.Input()
-        ], HeaderComponent.prototype, "amount", void 0);
-        HeaderComponent = __decorate([
-            core.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);
-        return HeaderComponent;
-    }());
-
-    var TabType;
-    (function (TabType) {
-        TabType["Additional"] = "additional";
-        TabType["Properties"] = "properties";
-    })(TabType || (TabType = {}));
-    var ProductInfoComponent = /** @class */ (function () {
-        function ProductInfoComponent() {
-            this.tabType = TabType;
-            this.currentTab = TabType.Additional;
-        }
-        ProductInfoComponent.prototype.ngOnInit = function () {
-        };
-        ProductInfoComponent.prototype.switchTab = function (tab) {
-            this.currentTab = tab;
-        };
-        __decorate([
-            core.Input()
-        ], ProductInfoComponent.prototype, "article", void 0);
-        ProductInfoComponent = __decorate([
-            core.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: [
-                    animations.trigger('showContent', [
-                        animations.state('void', animations.style({ 'opacity': '0' })),
-                        animations.state('*', animations.style({ 'opacity': '1' })),
-                        animations.transition('void => *', animations.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);
-        return ProductInfoComponent;
-    }());
+    }());
+    ProductInfoTabsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-product-info-tabs',
+                    template: "\n    <div class=\"tab-container\">\n      <div class=\"tab-header\">\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>\n      </div>\n      <div class=\"tab-content\" #tabContent [style.height.px]=\"(activeTabHeight > 0 ? activeTabHeight : '')\">\n        <div class=\"tab-content-item\" *ngFor=\"let tab of tabs; let i = index\" [class.active]=\"activeTab === i\">\n          <ng-container *ngIf=\"i === 0\">\n            <app-product-additional-info class=\"\" [article]=\"articleObject\" [showLabel]=\"false\"></app-product-additional-info>\n          </ng-container>\n          <ng-container *ngIf=\"i === 1\">\n            <app-product-properties class=\"\" [article]=\"articleObject\" [showLabel]=\"false\"></app-product-properties>\n          </ng-container>\n          <ng-container *ngIf=\"i === 2\">\n            <app-product-documents [showLabel]=\"false\" class=\"\" *ngIf=\"articleObject?.documents && articleObject?.documents.length > 0\" [documents]=\"articleObject?.documents\"></app-product-documents>\n          </ng-container>\n          <ng-container *ngIf=\"i === 3\">\n            <app-product-symbols class=\"\" *ngIf=\"articleObject?.symbols && articleObject?.symbols.length > 0\" [symbols]=\"articleObject?.symbols\"></app-product-symbols>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  ",
+                    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 = function () { return [
+        { type: ProductEventService }
+    ]; };
+    ProductInfoTabsComponent.propDecorators = {
+        tabContent: [{ type: i0.ViewChild, args: ['tabContent',] }],
+        article: [{ type: i0.Input }]
+    };
 
     var ProductAdditionalInfoComponent = /** @class */ (function () {
         function ProductAdditionalInfoComponent(_sanitizer, _connectorService, _changeDetector) {
@@ -2473,7 +2709,7 @@
                     });
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ProductAdditionalInfoComponent.prototype.ngOnInit = function () {
@@ -2502,7 +2738,7 @@
                                     case 3:
                                         mainArticle.texts.forEach(function (txt) {
                                             if (BitUtils.IsFullDescription(txt.publication)) {
-                                                var safeTxt = _this._sanitizer.sanitize(core.SecurityContext.HTML, txt.text);
+                                                var safeTxt = _this._sanitizer.sanitize(i0.SecurityContext.HTML, txt.text);
                                                 texts.push(safeTxt);
                                             }
                                         });
@@ -2529,12 +2765,12 @@
                         case 1:
                             texts = _b.sent();
                             if (texts.length > 0) {
-                                (_a = this.textParts).push.apply(_a, __spread(texts));
+                                (_a = this.textParts).push.apply(_a, __spreadArray([], __read(texts)));
                             }
                             if (this.article.texts) {
                                 this.article.texts.forEach(function (txt) {
                                     if (BitUtils.IsFullDescription(txt.publication)) {
-                                        var safeTxt = _this._sanitizer.sanitize(core.SecurityContext.HTML, txt.text);
+                                        var safeTxt = _this._sanitizer.sanitize(i0.SecurityContext.HTML, txt.text);
                                         _this.textParts.push(safeTxt);
                                     }
                                 });
@@ -2566,26 +2802,44 @@
                 });
             });
         };
-        ProductAdditionalInfoComponent.ctorParameters = function () { return [
-            { type: platformBrowser.DomSanitizer },
-            { type: ProductConnectorService },
-            { type: core.ChangeDetectorRef }
-        ]; };
-        __decorate([
-            core.Input()
-        ], ProductAdditionalInfoComponent.prototype, "article", null);
-        __decorate([
-            core.Input()
-        ], ProductAdditionalInfoComponent.prototype, "showLabel", void 0);
-        ProductAdditionalInfoComponent = __decorate([
-            core.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);
         return ProductAdditionalInfoComponent;
-    }());
+    }());
+    ProductAdditionalInfoComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-product-additional-info',
+                    template: "\n    <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}\n"]
+                },] }
+    ];
+    ProductAdditionalInfoComponent.ctorParameters = function () { return [
+        { type: i1$1.DomSanitizer },
+        { type: ProductConnectorService },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    ProductAdditionalInfoComponent.propDecorators = {
+        article: [{ type: i0.Input }],
+        showLabel: [{ type: i0.Input }]
+    };
+
+    var ProductAdditionalInfoModule = /** @class */ (function () {
+        function ProductAdditionalInfoModule() {
+        }
+        return ProductAdditionalInfoModule;
+    }());
+    ProductAdditionalInfoModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        PipeModule
+                    ],
+                    declarations: [
+                        ProductAdditionalInfoComponent
+                    ],
+                    exports: [
+                        ProductAdditionalInfoComponent
+                    ]
+                },] }
+    ];
 
     var propertyMap = new Map([
         ['articleNr', 'ARTICLE_NUMBER'],
@@ -2611,7 +2865,7 @@
                 this._article = value;
                 this._prepareProperties();
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ProductPropertiesComponent.prototype.ngOnInit = function () {
@@ -2628,21 +2882,86 @@
                 }
             });
         };
-        __decorate([
-            core.Input()
-        ], ProductPropertiesComponent.prototype, "article", null);
-        __decorate([
-            core.Input()
-        ], ProductPropertiesComponent.prototype, "showLabel", void 0);
-        ProductPropertiesComponent = __decorate([
-            core.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);
         return ProductPropertiesComponent;
-    }());
+    }());
+    ProductPropertiesComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-product-properties',
+                    template: "\n    <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}}\n"]
+                },] }
+    ];
+    ProductPropertiesComponent.ctorParameters = function () { return []; };
+    ProductPropertiesComponent.propDecorators = {
+        article: [{ type: i0.Input }],
+        showLabel: [{ type: i0.Input }]
+    };
+
+    var ProductPropertiesModule = /** @class */ (function () {
+        function ProductPropertiesModule() {
+        }
+        return ProductPropertiesModule;
+    }());
+    ProductPropertiesModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        PipeModule
+                    ],
+                    declarations: [
+                        ProductPropertiesComponent
+                    ],
+                    exports: [
+                        ProductPropertiesComponent
+                    ]
+                },] }
+    ];
+
+    var ProductDocumentsComponent = /** @class */ (function () {
+        function ProductDocumentsComponent(iconCache) {
+            this.iconCache = iconCache;
+            this.icon = IconEnum;
+            this.showLabel = false;
+            this.documents = [];
+        }
+        return ProductDocumentsComponent;
+    }());
+    ProductDocumentsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-product-documents',
+                    template: "\n    <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: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 = function () { return [
+        { type: IconCacheService }
+    ]; };
+    ProductDocumentsComponent.propDecorators = {
+        showLabel: [{ type: i0.Input }],
+        documents: [{ type: i0.Input }]
+    };
+
+    var ProductDocumentModule = /** @class */ (function () {
+        function ProductDocumentModule() {
+        }
+        return ProductDocumentModule;
+    }());
+    ProductDocumentModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        HeaderModule,
+                        PipeModule,
+                        corecomponents.FilesUploadModule
+                    ],
+                    declarations: [
+                        ProductDocumentsComponent
+                    ],
+                    exports: [
+                        ProductDocumentsComponent
+                    ]
+                },] }
+    ];
 
     var ProductSymbolsComponent = /** @class */ (function () {
         function ProductSymbolsComponent() {
@@ -2663,154 +2982,307 @@
                     }
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ProductSymbolsComponent.prototype.ngOnInit = function () {
         };
-        __decorate([
-            core.Input()
-        ], ProductSymbolsComponent.prototype, "symbols", null);
-        __decorate([
-            core.HostBinding('class')
-        ], ProductSymbolsComponent.prototype, "_className", void 0);
-        ProductSymbolsComponent = __decorate([
-            core.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);
         return ProductSymbolsComponent;
-    }());
+    }());
+    ProductSymbolsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-product-symbols',
+                    template: "\n    <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}\n"]
+                },] }
+    ];
+    ProductSymbolsComponent.ctorParameters = function () { return []; };
+    ProductSymbolsComponent.propDecorators = {
+        symbols: [{ type: i0.Input }],
+        _className: [{ type: i0.HostBinding, args: ['class',] }]
+    };
+
+    var ProductSymbolsModule = /** @class */ (function () {
+        function ProductSymbolsModule() {
+        }
+        return ProductSymbolsModule;
+    }());
+    ProductSymbolsModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        HeaderModule,
+                        PipeModule,
+                        corecomponents.ScrollContainerModule,
+                        corecomponents.TileModule
+                    ],
+                    declarations: [
+                        ProductSymbolsComponent
+                    ],
+                    exports: [
+                        ProductSymbolsComponent
+                    ]
+                },] }
+    ];
+
+    var ProductInfoTabsModule = /** @class */ (function () {
+        function ProductInfoTabsModule() {
+        }
+        return ProductInfoTabsModule;
+    }());
+    ProductInfoTabsModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        PipeModule,
+                        ProductAdditionalInfoModule,
+                        ProductPropertiesModule,
+                        ProductDocumentModule,
+                        ProductSymbolsModule
+                    ],
+                    declarations: [
+                        ProductInfoTabsComponent
+                    ],
+                    exports: [
+                        ProductInfoTabsComponent
+                    ]
+                },] }
+    ];
 
     var ProductPageModule = /** @class */ (function () {
         function ProductPageModule() {
         }
-        ProductPageModule = __decorate([
-            core.NgModule({
-                imports: [
-                    common.CommonModule,
-                    corecomponents.IconModule,
-                    corecomponents.LoaderModule,
-                    PipeModule,
-                    corecomponents.NumberPickerModule,
-                    corecomponents.ButtonModule,
-                    corecomponents.PriceDisplayPipeModule,
-                    corecomponents.InputTextModule,
-                    corecomponents.FilesUploadModule,
-                    corecomponents.ScrollContainerModule,
-                    corecomponents.TileModule,
-                    corecomponents.LevelIndicatorModule,
-                    corecomponents.ArticleTileModule,
-                ],
-                schemas: [core.CUSTOM_ELEMENTS_SCHEMA],
-                declarations: [
-                    ProductPageComponent,
-                    ProductSelectorTypeComponent,
-                    ImageCarouselComponent,
-                    ProductDescriptionComponent,
-                    ProductAdditionalDescriptionComponent,
-                    ProductPriceComponent,
-                    ProductAddtocartComponent,
-                    ProductRelatedComponent,
-                    ProductStockComponent,
-                    ProductDeliveryComponent,
-                    ProductInfoTabsComponent,
-                    ProductDocumentsComponent,
-                    HeaderComponent,
-                    ProductInfoComponent,
-                    ProductAdditionalInfoComponent,
-                    ProductPropertiesComponent,
-                    ProductSymbolsComponent
-                ],
-                exports: [ProductPageComponent]
-            })
-        ], ProductPageModule);
         return ProductPageModule;
-    }());
+    }());
+    ProductPageModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        ProductSelectorTypeModule,
+                        ImageCarouselModule,
+                        corecomponents.IconModule,
+                        ProductDescriptionModule,
+                        ProductAdditionalDescriptionModule,
+                        ProductPriceModule,
+                        ProductAddtocartModule,
+                        ProductRelatedModule,
+                        ProductStockModule,
+                        ProductDeliveryModule,
+                        ProductInfoTabsModule,
+                        PipeModule
+                    ],
+                    schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
+                    declarations: [
+                        ProductPageComponent
+                    ],
+                    exports: [
+                        ProductPageComponent
+                    ]
+                },] }
+    ];
+
+    var IoneProductModule = /** @class */ (function () {
+        function IoneProductModule() {
+        }
+        return IoneProductModule;
+    }());
+    IoneProductModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        // BrowserAnimationsModule,
+                        common.CommonModule,
+                        ProductPageModule
+                    ],
+                    declarations: [
+                        IoneProductComponent
+                    ],
+                    exports: [
+                        IoneProductComponent
+                    ],
+                    bootstrap: [
+                        IoneProductComponent
+                    ]
+                },] }
+    ];
+
+    var ProductExternalSourceComponent = /** @class */ (function () {
+        function ProductExternalSourceComponent(_sanitizer, _productConnectorService, _appEventService) {
+            this._sanitizer = _sanitizer;
+            this._productConnectorService = _productConnectorService;
+            this._appEventService = _appEventService;
+            this.addToCart = new i0.EventEmitter();
+            this.addToQuote = new i0.EventEmitter();
+            this.alternativeClick = new i0.EventEmitter();
+            this.showProduct = false;
+            this.loaded = false;
+            this.externalSettings = {};
+            this._subs = [];
+        }
+        Object.defineProperty(ProductExternalSourceComponent.prototype, "externalSource", {
+            get: function () {
+                return this._externalSource;
+            },
+            set: function (value) {
+                this._externalSource = value;
+                this.loaded = false;
+                this._prepareExternalSource();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ProductExternalSourceComponent.prototype.showClass = function () {
+            return true;
+        };
+        ProductExternalSourceComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this._subs.push(this._appEventService.onAddToCart.subscribe(function (json) { return _this.addToCart.next(json); }), this._appEventService.onAddToQuote.subscribe(function (json) { return _this.addToQuote.next(json); }), this._appEventService.onAlternativeClick.subscribe(function (article) { return _this.alternativeClick.next(article); }));
+        };
+        ProductExternalSourceComponent.prototype.ngOnDestroy = function () {
+            this._subs.forEach(function (s) { return s.unsubscribe(); });
+        };
+        ProductExternalSourceComponent.prototype._prepareExternalSource = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var bundleSettings;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this._externalSource) {
+                                return [2 /*return*/];
+                            }
+                            this.externalUrl = undefined;
+                            this.externalSettings = {};
+                            if (!(this.externalSource.type === 'CATF')) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._productConnectorService.getProductBundleSettings(this.externalSource.url, parseInt(this.externalSource.schema, 0))];
+                        case 1:
+                            bundleSettings = _a.sent();
+                            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;
+                            return [3 /*break*/, 3];
+                        case 2:
+                            this.externalUrl = this.externalSource.url;
+                            this.safeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(this.externalUrl);
+                            this.showProduct = false;
+                            _a.label = 3;
+                        case 3:
+                            this.loaded = true;
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return ProductExternalSourceComponent;
+    }());
+    ProductExternalSourceComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'co-product-external-source',
+                    template: "\n        <ng-container *ngIf=\"loaded\">\n            <ng-container *ngIf=\"showProduct\">\n                <app-product-page\n                        [sku]=\"sku\"\n                        [settings]=\"externalSettings\"\n                ></app-product-page>\n            </ng-container>\n            <ng-container *ngIf=\"!showProduct\">\n                <iframe width=\"100%\" height=\"100%\" [src]=\"safeUrl\" frameborder=\"0\" allowfullscreen></iframe>\n            </ng-container>\n        </ng-container>\n    ",
+                    providers: [
+                        ProductEventService,
+                        ProductSettingsService,
+                        ProductConnectorAdapterService,
+                        ProductConnectorService
+                    ],
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    ProductExternalSourceComponent.ctorParameters = function () { return [
+        { type: i1$1.DomSanitizer },
+        { type: ProductConnectorService },
+        { type: ProductEventService }
+    ]; };
+    ProductExternalSourceComponent.propDecorators = {
+        sku: [{ type: i0.Input }],
+        externalSource: [{ type: i0.Input }],
+        options: [{ type: i0.Input }],
+        addToCart: [{ type: i0.Output }],
+        addToQuote: [{ type: i0.Output }],
+        alternativeClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-product-external-source',] }]
+    };
 
     var ProductExternalSourceModule = /** @class */ (function () {
         function ProductExternalSourceModule() {
         }
-        ProductExternalSourceModule = __decorate([
-            core.NgModule({
-                imports: [
-                    common.CommonModule,
-                    ProductPageModule
-                ],
-                declarations: [
-                    ProductExternalSourceComponent
-                ],
-                exports: [
-                    ProductExternalSourceComponent
-                ]
-            })
-        ], ProductExternalSourceModule);
         return ProductExternalSourceModule;
-    }());
+    }());
+    ProductExternalSourceModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        ProductPageModule
+                    ],
+                    declarations: [
+                        ProductExternalSourceComponent
+                    ],
+                    exports: [
+                        ProductExternalSourceComponent
+                    ]
+                },] }
+    ];
 
-    var IoneProductModule = /** @class */ (function () {
-        function IoneProductModule() {
-        }
-        IoneProductModule = __decorate([
-            core.NgModule({
-                imports: [
-                    // BrowserAnimationsModule,
-                    common.CommonModule,
-                    ProductExternalSourceModule,
-                    ProductPageModule
-                ],
-                declarations: [
-                    IoneProductComponent
-                ],
-                entryComponents: [
-                    IoneProductComponent
-                ],
-                providers: [],
-                exports: [IoneProductComponent],
-                bootstrap: [
-                    IoneProductComponent
-                ]
-            })
-        ], IoneProductModule);
-        return IoneProductModule;
-    }());
+    /**
+     * Generated bundle index. Do not edit.
+     */
 
+    exports.IoneProductComponent = IoneProductComponent;
     exports.IoneProductModule = IoneProductModule;
     exports.ProductExternalSourceComponent = ProductExternalSourceComponent;
     exports.ProductExternalSourceModule = ProductExternalSourceModule;
     exports.Version = Version;
-    exports.ɵa = ProductPageModule;
-    exports.ɵb = PipeModule;
-    exports.ɵba = ProductSymbolsComponent;
-    exports.ɵbb = IoneProductComponent;
-    exports.ɵc = LocalizePipe;
-    exports.ɵd = DictionaryService;
-    exports.ɵe = JsonUtilsService;
-    exports.ɵf = ProductPageComponent;
-    exports.ɵg = ProductConnectorService;
-    exports.ɵh = ProductConnectorAdapterService;
-    exports.ɵi = ProductSettingsService;
-    exports.ɵj = IconCacheService;
-    exports.ɵk = ProductEventService;
-    exports.ɵl = ProductSelectorTypeComponent;
-    exports.ɵm = ImageCarouselComponent;
-    exports.ɵn = ProductDescriptionComponent;
-    exports.ɵo = ProductAdditionalDescriptionComponent;
-    exports.ɵp = ProductPriceComponent;
-    exports.ɵq = ProductAddtocartComponent;
-    exports.ɵr = ProductRelatedComponent;
-    exports.ɵs = ProductStockComponent;
-    exports.ɵt = ProductDeliveryComponent;
-    exports.ɵu = ProductInfoTabsComponent;
-    exports.ɵv = ProductDocumentsComponent;
-    exports.ɵw = HeaderComponent;
-    exports.ɵx = ProductInfoComponent;
-    exports.ɵy = ProductAdditionalInfoComponent;
-    exports.ɵz = ProductPropertiesComponent;
+    exports["ɵa"] = ProductPageModule;
+    exports["ɵb"] = ProductSelectorTypeModule;
+    exports["ɵba"] = ProductStockModule;
+    exports["ɵbb"] = ProductStockComponent;
+    exports["ɵbc"] = ProductDeliveryModule;
+    exports["ɵbd"] = ProductDeliveryComponent;
+    exports["ɵbe"] = ProductInfoTabsModule;
+    exports["ɵbf"] = ProductAdditionalInfoModule;
+    exports["ɵbg"] = ProductAdditionalInfoComponent;
+    exports["ɵbh"] = ProductPropertiesModule;
+    exports["ɵbi"] = ProductPropertiesComponent;
+    exports["ɵbj"] = ProductDocumentModule;
+    exports["ɵbk"] = ProductDocumentsComponent;
+    exports["ɵbl"] = ProductSymbolsModule;
+    exports["ɵbm"] = ProductSymbolsComponent;
+    exports["ɵbn"] = ProductInfoTabsComponent;
+    exports["ɵbo"] = ProductPageComponent;
+    exports["ɵc"] = PipeModule;
+    exports["ɵd"] = LocalizePipe;
+    exports["ɵe"] = DictionaryService;
+    exports["ɵf"] = JsonUtilsService;
+    exports["ɵg"] = ProductSelectorTypeComponent;
+    exports["ɵh"] = IconCacheService;
+    exports["ɵi"] = ImageCarouselModule;
+    exports["ɵj"] = ImageCarouselComponent;
+    exports["ɵk"] = ProductConnectorService;
+    exports["ɵl"] = ProductConnectorAdapterService;
+    exports["ɵm"] = ProductSettingsService;
+    exports["ɵn"] = ProductEventService;
+    exports["ɵo"] = ProductDescriptionModule;
+    exports["ɵp"] = ProductDescriptionComponent;
+    exports["ɵq"] = ProductAdditionalDescriptionModule;
+    exports["ɵr"] = ProductAdditionalDescriptionComponent;
+    exports["ɵs"] = ProductPriceModule;
+    exports["ɵt"] = ProductPriceComponent;
+    exports["ɵu"] = ProductAddtocartModule;
+    exports["ɵv"] = ProductAddtocartComponent;
+    exports["ɵw"] = ProductRelatedModule;
+    exports["ɵx"] = HeaderModule;
+    exports["ɵy"] = HeaderComponent;
+    exports["ɵz"] = ProductRelatedComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=colijnit-product.umd.js.map