@colijnit/sharedcomponents 1.0.43 → 1.0.45

package/bundles/colijnit-sharedcomponents.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('pdf-lib'), require('pdfjs-dist/legacy/build/pdf'), require('pdfjs-dist/build/pdf.worker.entry'), require('@angular/common'), require('signature_pad'), require('@colijnit/articleapi/build/articles'), require('@colijnit/sharedapi/build/sharedapi'), require('@colijnit/articleapi/build/model/article-stock.bo'), require('@colijnit/articleapi/build/model/stock-history.bo'), require('@colijnit/articleapi/build/model/article-details.bo'), require('@colijnit/articleapi/build/model/stock-status.bo'), require('@colijnit/articleapi/build/model/stock-management-warehouses.bo'), require('@colijnit/articleapi/build/model/stock-location.bo'), require('@colijnit/articleapi/build/model/article-transaction.bo'), require('rxjs'), require('@colijnit/mainapi'), require('@colijnit/mainapi/build/model/printer.bo'), require('@colijnit/ioneconnector/build/factory/business-object-factory'), require('@colijnit/mainapi/build/model/send-method.bo'), require('@colijnit/sharedapi/build/model/print-stock-stickers'), require('@colijnit/articleapi/build/model/article-stock'), require('@colijnit/corecomponents_v12'), require('@angular/platform-browser'), require('@colijnit/articleapi/build/model/article-stock-management'), require('@colijnit/articleapi/build/model/article-transaction'), require('@colijnit/sharedapi/build/model/print-price-stickers.bo'), require('@colijnit/mainapi/build/model/reporting-document-print-base-request'), require('@colijnit/mainapi/build/model/reporting-document-email-base-request'), require('@colijnit/mainapi/build/model/reporting-document-pdf-base-request'), require('@colijnit/mainapi/build/enum/send-method-type.enum'), require('@colijnit/articleapi/build/model/get-stock-history-request'), require('@syncfusion/ej2-angular-circulargauge'), require('moment')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/sharedcomponents', ['exports', '@angular/core', '@angular/animations', 'pdf-lib', 'pdfjs-dist/legacy/build/pdf', 'pdfjs-dist/build/pdf.worker.entry', '@angular/common', 'signature_pad', '@colijnit/articleapi/build/articles', '@colijnit/sharedapi/build/sharedapi', '@colijnit/articleapi/build/model/article-stock.bo', '@colijnit/articleapi/build/model/stock-history.bo', '@colijnit/articleapi/build/model/article-details.bo', '@colijnit/articleapi/build/model/stock-status.bo', '@colijnit/articleapi/build/model/stock-management-warehouses.bo', '@colijnit/articleapi/build/model/stock-location.bo', '@colijnit/articleapi/build/model/article-transaction.bo', 'rxjs', '@colijnit/mainapi', '@colijnit/mainapi/build/model/printer.bo', '@colijnit/ioneconnector/build/factory/business-object-factory', '@colijnit/mainapi/build/model/send-method.bo', '@colijnit/sharedapi/build/model/print-stock-stickers', '@colijnit/articleapi/build/model/article-stock', '@colijnit/corecomponents_v12', '@angular/platform-browser', '@colijnit/articleapi/build/model/article-stock-management', '@colijnit/articleapi/build/model/article-transaction', '@colijnit/sharedapi/build/model/print-price-stickers.bo', '@colijnit/mainapi/build/model/reporting-document-print-base-request', '@colijnit/mainapi/build/model/reporting-document-email-base-request', '@colijnit/mainapi/build/model/reporting-document-pdf-base-request', '@colijnit/mainapi/build/enum/send-method-type.enum', '@colijnit/articleapi/build/model/get-stock-history-request', '@syncfusion/ej2-angular-circulargauge', 'moment'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.sharedcomponents = {}), global.ng.core, global.ng.animations, global.pdfLib, global.PDFJS, global.pdfjsWorker, global.ng.common, global.SignaturePad, global.articles, global.sharedapi, global.articleStock_bo, global.stockHistory_bo, global.articleDetails_bo, global.stockStatus_bo, global.stockManagementWarehouses_bo, global.stockLocation_bo, global.articleTransaction_bo, global.rxjs, global.mainapi, global.printer_bo, global.businessObjectFactory, global.sendMethod_bo, global.printStockStickers, global.articleStock, global.corecomponents_v12, global.ng.platformBrowser, global.articleStockManagement, global.articleTransaction, global.printPriceStickers_bo, global.reportingDocumentPrintBaseRequest, global.reportingDocumentEmailBaseRequest, global.reportingDocumentPdfBaseRequest, global.sendMethodType_enum, global.getStockHistoryRequest, global.ej2AngularCirculargauge, global.moment));
-})(this, (function (exports, i0, animations, pdfLib, PDFJS, pdfjsWorker, common, SignaturePad, articles, sharedapi, articleStock_bo, stockHistory_bo, articleDetails_bo, stockStatus_bo, stockManagementWarehouses_bo, stockLocation_bo, articleTransaction_bo, rxjs, mainapi, printer_bo, businessObjectFactory, sendMethod_bo, printStockStickers, articleStock, corecomponents_v12, i1, articleStockManagement, articleTransaction, printPriceStickers_bo, reportingDocumentPrintBaseRequest, reportingDocumentEmailBaseRequest, reportingDocumentPdfBaseRequest, sendMethodType_enum, getStockHistoryRequest, ej2AngularCirculargauge, moment) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('pdf-lib'), require('pdfjs-dist/legacy/build/pdf'), require('pdfjs-dist/build/pdf.worker.entry'), require('@angular/common'), require('signature_pad'), require('@colijnit/articleapi/build/articles'), require('@colijnit/sharedapi/build/sharedapi'), require('@colijnit/articleapi/build/model/article-stock.bo'), require('@colijnit/articleapi/build/model/stock-history.bo'), require('@colijnit/articleapi/build/model/article-details.bo'), require('@colijnit/articleapi/build/model/stock-status.bo'), require('@colijnit/articleapi/build/model/stock-management-warehouses.bo'), require('@colijnit/articleapi/build/model/stock-location.bo'), require('@colijnit/articleapi/build/model/article-transaction.bo'), require('rxjs'), require('@colijnit/mainapi'), require('@colijnit/mainapi/build/model/printer.bo'), require('@colijnit/mainapi/build/model/send-method.bo'), require('@colijnit/ioneconnector/build/service/business-object-factory'), require('@colijnit/sharedapi/build/model/print-stock-stickers'), require('@colijnit/articleapi/build/model/article-stock'), require('@colijnit/corecomponents_v12'), require('@angular/platform-browser'), require('@colijnit/articleapi/build/model/article-stock-management'), require('@colijnit/articleapi/build/model/article-transaction'), require('@colijnit/sharedapi/build/model/print-price-stickers.bo'), require('@colijnit/mainapi/build/model/reporting-document-email-sign-doc-base-request'), require('@colijnit/mainapi/build/model/reporting-document-pdf-base-request'), require('@colijnit/mainapi/build/model/reporting-document-print-sign-doc-base-request'), require('@colijnit/mainapi/build/enum/send-method-type.enum'), require('@colijnit/articleapi/build/model/get-stock-history-request'), require('chart.js'), require('moment')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/sharedcomponents', ['exports', '@angular/core', '@angular/animations', 'pdf-lib', 'pdfjs-dist/legacy/build/pdf', 'pdfjs-dist/build/pdf.worker.entry', '@angular/common', 'signature_pad', '@colijnit/articleapi/build/articles', '@colijnit/sharedapi/build/sharedapi', '@colijnit/articleapi/build/model/article-stock.bo', '@colijnit/articleapi/build/model/stock-history.bo', '@colijnit/articleapi/build/model/article-details.bo', '@colijnit/articleapi/build/model/stock-status.bo', '@colijnit/articleapi/build/model/stock-management-warehouses.bo', '@colijnit/articleapi/build/model/stock-location.bo', '@colijnit/articleapi/build/model/article-transaction.bo', 'rxjs', '@colijnit/mainapi', '@colijnit/mainapi/build/model/printer.bo', '@colijnit/mainapi/build/model/send-method.bo', '@colijnit/ioneconnector/build/service/business-object-factory', '@colijnit/sharedapi/build/model/print-stock-stickers', '@colijnit/articleapi/build/model/article-stock', '@colijnit/corecomponents_v12', '@angular/platform-browser', '@colijnit/articleapi/build/model/article-stock-management', '@colijnit/articleapi/build/model/article-transaction', '@colijnit/sharedapi/build/model/print-price-stickers.bo', '@colijnit/mainapi/build/model/reporting-document-email-sign-doc-base-request', '@colijnit/mainapi/build/model/reporting-document-pdf-base-request', '@colijnit/mainapi/build/model/reporting-document-print-sign-doc-base-request', '@colijnit/mainapi/build/enum/send-method-type.enum', '@colijnit/articleapi/build/model/get-stock-history-request', 'chart.js', 'moment'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.sharedcomponents = {}), global.ng.core, global.ng.animations, global.pdfLib, global.PDFJS, global.pdfjsWorker, global.ng.common, global.SignaturePad, global.articles, global.sharedapi, global.articleStock_bo, global.stockHistory_bo, global.articleDetails_bo, global.stockStatus_bo, global.stockManagementWarehouses_bo, global.stockLocation_bo, global.articleTransaction_bo, global.rxjs, global.mainapi, global.printer_bo, global.sendMethod_bo, global.businessObjectFactory, global.printStockStickers, global.articleStock, global.corecomponents_v12, global.ng.platformBrowser, global.articleStockManagement, global.articleTransaction, global.printPriceStickers_bo, global.reportingDocumentEmailSignDocBaseRequest, global.reportingDocumentPdfBaseRequest, global.reportingDocumentPrintSignDocBaseRequest, global.sendMethodType_enum, global.getStockHistoryRequest, global.chart_js, global.moment));
+})(this, (function (exports, i0, animations, pdfLib, PDFJS, pdfjsWorker, common, SignaturePad, articles, sharedapi, articleStock_bo, stockHistory_bo, articleDetails_bo, stockStatus_bo, stockManagementWarehouses_bo, stockLocation_bo, articleTransaction_bo, rxjs, mainapi, printer_bo, sendMethod_bo, businessObjectFactory, printStockStickers, articleStock, corecomponents_v12, i1, articleStockManagement, articleTransaction, printPriceStickers_bo, reportingDocumentEmailSignDocBaseRequest, reportingDocumentPdfBaseRequest, reportingDocumentPrintSignDocBaseRequest, sendMethodType_enum, getStockHistoryRequest, chart_js, moment) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -730,13 +730,13 @@
                 },] }
     ];
 
-    exports["ɵbt"] = void 0;
+    exports["ɵbx"] = void 0;
     (function (LanguageCode) {
         LanguageCode["Dutch"] = "nl-NL";
         LanguageCode["English"] = "en-GB";
         LanguageCode["German"] = "de-DE";
         LanguageCode["French"] = "fr-FR";
-    })(exports["ɵbt"] || (exports["ɵbt"] = {}));
+    })(exports["ɵbx"] || (exports["ɵbx"] = {}));
 
     // Static utility functions holder related to strings.
     var StringUtils = /** @class */ (function () {
@@ -850,7 +850,7 @@
         DictionaryService.prototype.setDictionary = function (language) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
-                    this._language = language || exports["ɵbt"].Dutch;
+                    this._language = language || exports["ɵbx"].Dutch;
                     this._loadDictionary();
                     return [2 /*return*/];
                 });
@@ -883,7 +883,7 @@
                 return key || "";
             }
             if (this.language === undefined) {
-                this._language = exports["ɵbt"].Dutch;
+                this._language = exports["ɵbx"].Dutch;
                 this._loadDictionary();
             }
             var text = this._dictionaries.get(this.language)[key];
@@ -1327,6 +1327,25 @@
                 });
             });
         };
+        SharedConnectorService.prototype.getStockPrognose = function (goodId, warehouseNumber) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, new Promise(function (resolve, reject) {
+                            return _this.articleConnector.getStockForecast(goodId, warehouseNumber).then(function (result) {
+                                if (result.validationResult && result.validationResult.success) {
+                                    if (result.resultObjects) {
+                                        resolve(result.resultObjects);
+                                    }
+                                }
+                                else {
+                                    reject(result.validationMessagesAsString);
+                                }
+                            });
+                        })];
+                });
+            });
+        };
         SharedConnectorService.prototype.commit = function () {
             return this.articleConnector.commit();
         };
@@ -1457,6 +1476,16 @@
                 });
             });
         };
+        StockService.prototype.stockPrognose = function (goodId, warehouseNumber) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._sharedService.getStockPrognose(goodId, warehouseNumber)];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
         StockService.prototype.lockArticleDetails = function (data) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
@@ -1482,72 +1511,22 @@
         { type: SharedConnectorService }
     ]; };
 
-    var Translation = /** @class */ (function () {
+    var Translation$1 = /** @class */ (function () {
         function Translation() {
-            this.ALLOCATED = 'ALLOCATED';
-            this.ALLOCATION = 'ALLOCATION';
-            this.ALREADY_IN_ORDER = 'ALREADY_IN_ORDER';
-            this.AMOUNT = 'AMOUNT';
-            this.AMOUNT_AVAILABLE = 'AMOUNT_AVAILABLE';
-            this.AMOUNT_IN_STOCK = 'AMOUNT_IN_STOCK';
-            this.AMOUNT_LATER_AVAILABLE = 'AMOUNT_LATER_AVAILABLE';
-            this.AVAILABLE_STOCK = 'AVAILABLE_STOCK';
-            this.BACK_TO_STOCK_LINES = 'BACK_TO_STOCK_LINES';
-            this.BATCH = 'BATCH';
-            this.CANCEL = 'CANCEL';
-            this.CHOICES = 'CHOICES';
-            this.CUSTOMER = 'CUSTOMER';
-            this.DATE = 'DATE';
-            this.DELIVERY_DATE = 'DELIVERY_DATE';
-            this.DESCRIPTION = 'DESCRIPTION';
-            this.DOCUMENT_NUMBER = 'DOCUMENT_NUMBER';
-            this.ECONOMICAL_STOCK = 'ECONOMICAL_STOCK';
-            this.FREE_STOCK = 'FREE_STOCK';
-            this.HISTORY = 'HISTORY';
-            this.IN_ORDER = 'IN_ORDER';
-            this.LINE = 'LINE';
-            this.LOCATION = 'LOCATION';
-            this.LOOK_AT = 'LOOK_AT';
-            this.MUTATION_DATE = 'MUTATION_DATE';
-            this.MUTATION_TIME = 'MUTATION_TIME';
-            this.MUTATION_TYPE = 'MUTATION_TYPE';
-            this.OK = 'OK';
-            this.ORDER = 'ORDER';
-            this.ORDER_COMMISSION = 'ORDER_COMMISSION';
-            this.ORDER_STOCK = 'ORDER_STOCK';
-            this.OVERVIEW = 'OVERVIEW';
-            this.PURCHASE_ORDER_NR = 'PURCHASE_ORDER_NR';
-            this.PURCHASE_PRICE = 'PURCHASE_PRICE';
-            this.RELATION_ID = 'RELATION_ID';
-            this.RELATION_NR = 'RELATION_NR';
-            this.RESERVED = 'RESERVED';
-            this.SEARCH = 'SEARCH';
-            this.SERIAL_NO = 'SERIAL_NO';
-            this.STICKER = 'STICKER';
-            this.STOCK = 'STOCK';
-            this.STOCK_DETAILS = 'STOCK_DETAILS';
-            this.STOCK_REMARK = 'STOCK_REMARK';
-            this.STOCK_STATE = 'STOCK_STATE';
-            this.STOCK_STATUS = 'STOCK_STATUS';
-            this.SUPPLIER_NUMBER = 'SUPPLIER_NUMBER';
-            this.TRANSFER = 'TRANSFER';
-            this.USER = 'USER';
-            this.VALUTA = 'VALUTA';
-            this.WAREHOUSE = 'WAREHOUSE';
         }
         return Translation;
     }());
 
     var LocalizeService = /** @class */ (function () {
         function LocalizeService() {
-            this._translation = new Translation();
+            this._translation = new Translation$1();
         }
         Object.defineProperty(LocalizeService.prototype, "translation", {
             get: function () {
                 return this._translation;
             },
             set: function (value) {
-                this._translation = Object.assign(new Translation(), value);
+                this._translation = Object.assign(new Translation$1(), value);
             },
             enumerable: false,
             configurable: true
@@ -1630,7 +1609,6 @@
         };
         StockComponent.prototype.handleSendMethodClick = function (event) {
             this.showSendMethodDialog = true;
-            console.log(event);
         };
         StockComponent.prototype.backToStock = function () {
             this.showStockTransfer = !this.showStockTransfer;
@@ -1763,6 +1741,7 @@
 
     /** AUTO GENERATED FILE. DO NOT CHANGE.. OR YOU WILL SUFFER THE CONSEQUENCES OF YOUR ACTIONS **/
     var IconSvg = {
+        "account": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\"><g ><path d=\"M15,15c3.59,0,6.5-2.91,6.5-6.5s-2.91-6.5-6.5-6.5-6.5,2.91-6.5,6.5,2.91,6.5,6.5,6.5Zm-2.32,2.44c-5,0-9.05,4.05-9.05,9.05,0,.83,.68,1.51,1.51,1.51H24.87c.83,0,1.51-.68,1.51-1.51,0-5-4.05-9.05-9.05-9.05h-4.64Z\" fill=\"#484f60\"/></g></svg>",
         "angle_left_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\"><path fill=\"#183153\" d=\"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z\"/></svg>",
         "angle_right_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\"><path fill=\"#183153\" d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"/></svg>",
         "arrow_fat_right": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"37.5 25 25.2 12.7 25.2 20.35 12.5 20.35 12.5 29.66 25.2 29.66 25.2 37.3 37.5 25\" fill=\"#484f60\"/></svg>",
@@ -1775,10 +1754,13 @@
         "delivery_truck": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"15.35\" y=\"16.56\" width=\"15.14\" height=\"10.94\" transform=\"translate(-1.83 2.08) rotate(-5)\" fill=\"#484f60\"/><path d=\"M38.5,18.1l-6.9.61L32.41,28l-7.63.67a3.76,3.76,0,0,1,1.43,2.25l7.25-.63A3.83,3.83,0,0,1,41,29.6l1-.1-.52-6Zm.29,5.84-3.91.34a.51.51,0,0,1-.55-.46L34,20.1a.49.49,0,0,1,.45-.54l2.27-.2a.5.5,0,0,1,.48.25l2,3.59A.5.5,0,0,1,38.79,23.94Z\" fill=\"#484f60\"/><path d=\"M19.66,29.09a3.8,3.8,0,0,0-1,2.46l-.74.07-1.82-.94L16,29.41Z\" fill=\"#484f60\"/><path d=\"M34.56,30.62a2.74,2.74,0,1,0,2.49-3A2.73,2.73,0,0,0,34.56,30.62Z\" fill=\"#484f60\"/><path d=\"M19.74,31.91a2.74,2.74,0,1,0,2.49-3A2.74,2.74,0,0,0,19.74,31.91Z\" fill=\"#484f60\"/><rect x=\"7.96\" y=\"17.63\" width=\"5\" height=\"1\" transform=\"translate(-1.54 0.98) rotate(-5)\" fill=\"#484f60\"/><rect x=\"11.02\" y=\"29.71\" width=\"3\" height=\"1\" transform=\"translate(-2.59 1.21) rotate(-5)\" fill=\"#484f60\"/><rect x=\"9.48\" y=\"23.53\" width=\"4\" height=\"1\" transform=\"matrix(1, -0.09, 0.09, 1, -2.05, 1.09)\" fill=\"#484f60\"/></svg>",
         "email": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M31.79,38.45A17.82,17.82,0,0,1,23.86,40,13.09,13.09,0,0,1,10.41,26.42C10.41,17.63,16.83,10,26.53,10c7.63,0,13.06,5.21,13.06,12.46,0,6.33-3.53,10.3-8.19,10.3a3.42,3.42,0,0,1-3.71-3.32h-.08A6.5,6.5,0,0,1,22,32.76c-2.75,0-4.82-2.11-4.82-5.65a9.85,9.85,0,0,1,10.13-10,12.89,12.89,0,0,1,5.13,1l-1.3,8c-.43,2.54-.13,3.71,1.08,3.75,1.85.09,4.18-2.28,4.18-7.28,0-5.65-3.62-10-10.3-10S13.73,17.76,13.73,26c0,7.25,4.57,11.3,11,11.3A14.81,14.81,0,0,0,31,36ZM28,20.65a5.34,5.34,0,0,0-1.33-.18c-2.85,0-5.09,2.81-5.09,6.12,0,1.64.73,2.68,2.16,2.68,1.59,0,3.27-2,3.66-4.53Z\" fill=\"#484f60\"/></svg>",
         "envelope_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z\"/></svg>",
+        "eye_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z\"/></svg>",
         "file_export_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M568.1 303l-80-80c-9.375-9.375-24.56-9.375-33.94 0s-9.375 24.56 0 33.94L494.1 296H216C202.8 296 192 306.8 192 320s10.75 24 24 24h278.1l-39.03 39.03C450.3 387.7 448 393.8 448 400s2.344 12.28 7.031 16.97c9.375 9.375 24.56 9.375 33.94 0l80-80C578.3 327.6 578.3 312.4 568.1 303zM360 384c-13.25 0-24 10.74-24 24V448c0 8.836-7.164 16-16 16H64.02c-8.836 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160L224 128c0 17.67 14.33 32 32 32h79.1v72c0 13.25 10.74 24 23.1 24S384 245.3 384 232V138.6c0-16.98-6.742-33.26-18.75-45.26l-74.63-74.64C278.6 6.742 262.3 0 245.4 0H63.1C28.65 0-.002 28.66 0 64l.0065 384c.002 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64v-40C384 394.7 373.3 384 360 384z\"/></svg>",
         "file_export_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\"><path d=\"M32 64C32 28.7 60.7 0 96 0H256V128c0 17.7 14.3 32 32 32H416V288H248c-13.3 0-24 10.7-24 24s10.7 24 24 24H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V64zM416 336V288H526.1l-39-39c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l80 80c9.4 9.4 9.4 24.6 0 33.9l-80 80c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l39-39H416zm0-208H288V0L416 128z\"/></svg>",
         "file_pdf_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M320 464C328.8 464 336 456.8 336 448V416H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V416H48V448C48 456.8 55.16 464 64 464H320zM256 160C238.3 160 224 145.7 224 128V48H64C55.16 48 48 55.16 48 64V192H0V64C0 28.65 28.65 0 64 0H229.5C246.5 0 262.7 6.743 274.7 18.75L365.3 109.3C377.3 121.3 384 137.5 384 154.5V192H336V160H256zM88 224C118.9 224 144 249.1 144 280C144 310.9 118.9 336 88 336H80V368C80 376.8 72.84 384 64 384C55.16 384 48 376.8 48 368V240C48 231.2 55.16 224 64 224H88zM112 280C112 266.7 101.3 256 88 256H80V304H88C101.3 304 112 293.3 112 280zM160 240C160 231.2 167.2 224 176 224H200C226.5 224 248 245.5 248 272V336C248 362.5 226.5 384 200 384H176C167.2 384 160 376.8 160 368V240zM192 352H200C208.8 352 216 344.8 216 336V272C216 263.2 208.8 256 200 256H192V352zM336 224C344.8 224 352 231.2 352 240C352 248.8 344.8 256 336 256H304V288H336C344.8 288 352 295.2 352 304C352 312.8 344.8 320 336 320H304V368C304 376.8 296.8 384 288 384C279.2 384 272 376.8 272 368V240C272 231.2 279.2 224 288 224H336z\"/></svg>",
         "file_pdf_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM64 224H88c30.9 0 56 25.1 56 56s-25.1 56-56 56H80v32c0 8.8-7.2 16-16 16s-16-7.2-16-16V320 240c0-8.8 7.2-16 16-16zm24 80c13.3 0 24-10.7 24-24s-10.7-24-24-24H80v48h8zm72-64c0-8.8 7.2-16 16-16h24c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H176c-8.8 0-16-7.2-16-16V240zm32 112h8c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16h-8v96zm96-128h48c8.8 0 16 7.2 16 16s-7.2 16-16 16H304v32h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H304v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V304 240c0-8.8 7.2-16 16-16z\"/></svg>",
+        "file_signature_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M64 464H320c8.8 0 16-7.2 16-16v-6.7l39.8-9.9c2.8-.7 5.6-1.6 8.2-2.7V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3v49.1l-48 48V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16zm96-115l-9.8 32.8c-6.1 20.3-24.8 34.2-46 34.2H96c-8.8 0-16-7.2-16-16s7.2-16 16-16h8.2c7.1 0 13.3-4.6 15.3-11.4l14.9-49.5c3.4-11.3 13.8-19.1 25.6-19.1s22.2 7.7 25.6 19.1l11.6 38.6c7.4-6.2 16.8-9.7 26.8-9.7c15.9 0 30.4 9 37.5 23.2l4.4 8.8h25.6l12-48.2c1.4-5.6 4.3-10.8 8.4-14.9L441.1 191.8l71 71L382.9 391.9c-4.1 4.1-9.2 7-14.9 8.4l-60.1 15c-1.1 .3-2.1 .4-3.2 .5c-.8 .1-1.5 .2-2.3 .2H256c-6.1 0-11.6-3.4-14.3-8.8l-8.8-17.7c-1.7-3.4-5.1-5.5-8.8-5.5s-7.2 2.1-8.8 5.5l-8.8 17.7c-2.9 5.9-9.2 9.4-15.7 8.8s-12.1-5.1-13.9-11.3L160 349zM549.8 139.7l14.4 14.4c15.6 15.6 15.6 40.9 0 56.6l-29.4 29.4-71-71 29.4-29.4c15.6-15.6 40.9-15.6 56.6 0z\"/></svg>",
+        "lock": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\"><g ><g><path d=\"M22.65,11.67H7.35c-2.82,0-3.07,2.29-3.07,5.12v8.09c0,2.83,.25,5.12,3.07,5.12h15.29c2.81,0,3.07-2.29,3.07-5.12v-8.09c0-2.83-.25-5.12-3.07-5.12Zm-12.42,15.82l2.6-6.32c-1-.7-1.65-1.85-1.65-3.15,0-2.12,1.71-3.84,3.82-3.84s3.82,1.73,3.82,3.84c0,1.31-.65,2.46-1.65,3.15l2.6,6.32H10.22Z\" fill=\"#484f60\"/><path d=\"M19.51,6.64c0-3.6-2.02-4.07-4.51-4.07h0c-2.49,0-4.51,.47-4.51,4.07v3h-2.7v-3C7.79,1.62,11.02,0,15,0h0c3.98,0,7.21,1.62,7.21,6.64v3h-2.7v-3Z\" fill=\"#484f60\"/></g></g></svg>",
         "message_sms_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M448-.0004H64c-35.25 0-64 28.75-64 63.1v287.1c0 35.25 28.75 63.1 64 63.1h96v83.98c0 9.836 11.02 15.55 19.12 9.7L304 415.1H448c35.25 0 64-28.75 64-63.1V63.1C512 28.75 483.3-.0004 448-.0004zM464 352c0 8.75-7.25 16-16 16h-160l-80 60v-60H64c-8.75 0-16-7.25-16-16V64c0-8.75 7.25-16 16-16h384c8.75 0 16 7.25 16 16V352zM124.4 192.6C113.6 189.5 103.2 187.2 104.2 181.5c.7813-4.5 10.28-6.562 21.5-4.906c4.156 .6562 8.75 2.094 13.09 3.594c8.375 2.906 17.47-1.562 20.34-9.906c2.875-8.344-1.562-17.47-9.906-20.34C143.1 147.8 136.5 145.9 130.6 145c-30.69-4.812-53.94 7.719-58 31.09c-5.656 33.03 26.5 42.47 38.63 46c13.72 3.947 25.62 6.432 24.56 12.34C135 239 125.7 241.1 114.3 239.4C107.9 238.4 100.4 235.4 93.38 232.9c-8.375-2.969-16 1.875-18.97 10.19S77.19 261.1 85.5 264.1C92.81 266.8 101.1 269.8 109.4 271C113.7 271.7 117.9 272 121.1 272c24.28 0 41.94-12.03 45.38-32.13C173.1 206.5 141.4 197.5 124.4 192.6zM396.4 192.6C385.6 189.5 375.2 187.2 376.2 181.5c.7813-4.5 10.31-6.562 21.5-4.906c4.156 .6562 8.75 2.094 13.09 3.594c8.406 2.906 17.47-1.562 20.34-9.906c2.875-8.344-1.562-17.47-9.906-20.34c-6.156-2.125-12.69-4.062-18.59-4.969c-30.75-4.812-53.97 7.719-58 31.09c-5.656 33.03 26.5 42.47 38.63 46c13.72 3.947 25.62 6.432 24.56 12.34c-.7813 4.562-10.12 6.656-21.56 4.938c-6.342-.9883-13.9-3.939-20.88-6.438c-8.375-2.969-16 1.875-18.97 10.19s2.781 17.97 11.09 20.97c7.312 2.656 15.62 5.656 23.88 6.906C385.7 271.7 389.9 272 393.1 272c24.28 0 41.94-12.03 45.38-32.13C445.1 206.5 413.4 197.5 396.4 192.6zM309.1 144.8c-6.469-2.062-13.72 .0625-17.88 5.594L256 197.3L220.8 150.4C216.7 144.9 209.4 142.7 202.9 144.8C196.4 147 192 153.1 192 160v96c0 8.844 7.156 16 16 16S224 264.8 224 256V208l19.19 25.59c6.062 8.062 19.56 8.062 25.62 0L288 208V256c0 8.844 7.156 16 16 16S320 264.8 320 256V160C320 153.1 315.6 147 309.1 144.8z\"/></svg>",
         "message_sms_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zm202.9 80.8C196.4 147 192 153.1 192 160v96c0 8.8 7.2 16 16 16s16-7.2 16-16V208l19.2 25.6c3 4 7.8 6.4 12.8 6.4s9.8-2.4 12.8-6.4L288 208v48c0 8.8 7.2 16 16 16s16-7.2 16-16V160c0-6.9-4.4-13-10.9-15.2s-13.7 .1-17.9 5.6L256 197.3l-35.2-46.9c-4.1-5.5-11.3-7.8-17.9-5.6zm173.1 38c0-1.1 .2-1.6 .4-1.9c.3-.4 .9-1.2 2.4-2c3.1-1.8 8-3 12.9-2.9c6.1 .1 12.9 1.4 20.1 3.4c8.5 2.3 17.3-2.8 19.6-11.3s-2.8-17.3-11.3-19.6c-8.2-2.2-17.9-4.3-27.9-4.4c-9.3-.1-20.4 1.9-29.7 7.4c-9.9 5.9-18.6 16.4-18.5 31.6c.1 14.7 8.8 24 17.7 29.4c7.6 4.6 17.1 7.4 24.3 9.6l1.2 .4c8.5 2.6 14.2 4.5 18 6.9c2.7 1.7 2.7 2.4 2.7 3.1l0 .2c0 1.6-.3 2.3-.6 2.7c-.3 .5-.9 1.2-2.1 2c-2.8 1.7-7.5 2.9-12.8 2.8c-7-.2-13.5-2.4-22.6-5.5l0 0 0 0c-1.5-.5-3.2-1.1-4.9-1.6c-8.4-2.8-17.4 1.7-20.2 10.1s1.7 17.4 10.1 20.2c1.2 .4 2.6 .9 4 1.4l0 0 0 0c8.8 3 20.4 7 32.6 7.4c9.8 .3 21.2-1.6 30.7-7.6c10.2-6.4 18-17.3 17.8-32.3c-.2-14.7-8.5-24.2-17.6-29.9c-8-5-17.9-8-25.2-10.2l-.6-.2c-8.6-2.6-14.4-4.4-18.2-6.8c-1.6-1-2.1-1.6-2.2-1.7c0-.1 0-.2 0-.4zm-272 0c0-1.1 .2-1.6 .4-1.9c.3-.4 .9-1.2 2.4-2c3.1-1.8 8-3 12.9-2.9c6.6 .1 16.7 1.6 23.3 3.4c8.5 2.3 17.3-2.8 19.6-11.3s-2.8-17.3-11.3-19.6c-8.8-2.4-21.6-4.3-31.1-4.4c-9.3-.1-20.4 1.9-29.7 7.4C80.6 157.3 72 167.8 72 183c.1 14.7 8.8 24 17.7 29.4c7.6 4.6 17.1 7.4 24.3 9.6l0 0 1.2 .4c8.5 2.6 14.2 4.5 18 6.9c2.7 1.7 2.7 2.4 2.7 3.1l0 .2c0 1.6-.3 2.3-.6 2.7c-.3 .5-.9 1.2-2.1 2c-2.8 1.7-7.5 2.9-12.8 2.8c-7.2-.2-14.2-2.6-23.7-5.8l0 0 0 0c-1.3-.4-2.7-.9-4.1-1.4c-8.4-2.8-17.4 1.7-20.2 10.1s1.7 17.4 10.1 20.2c1.1 .4 2.4 .8 3.6 1.2l0 0 0 0c9 3.1 20.9 7.2 33.2 7.6c9.8 .3 21.2-1.6 30.7-7.6c10.2-6.4 18-17.3 17.8-32.3c-.2-14.7-8.5-24.2-17.6-29.9c-8-5-17.9-8-25.2-10.2l-.6-.2c-8.6-2.6-14.4-4.4-18.3-6.8c-1.6-1-2.1-1.6-2.2-1.7c0-.1 0-.2 0-.4z\"/></svg>",
         "pdf": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M31.42,40.17H13.88c-2.16,0-2.72-.56-2.72-2.72V12.88c0-2.15.56-2.71,2.72-2.71h11.6l8.66,8.88v3.43H32.8V19.6l-7.88-8.09h-11c-1.38,0-1.38,0-1.38,1.37V37.45c0,1.37,0,1.37,1.38,1.37H31.42c1.38,0,1.38,0,1.38-1.37V35h1.34v2.43C34.14,39.61,33.58,40.17,31.42,40.17Z\" fill=\"#484f60\"/><path d=\"M27.83,26.63v4.24h1a3.57,3.57,0,0,0,.78-.06,1.22,1.22,0,0,0,.52-.26,1.44,1.44,0,0,0,.34-.62,4.13,4.13,0,0,0,.13-1.18,3.79,3.79,0,0,0-.13-1.14,1.51,1.51,0,0,0-.37-.62,1.14,1.14,0,0,0-.6-.3,5.93,5.93,0,0,0-1.06-.06Z\" fill=\"#484f60\"/><path d=\"M21.86,26.63v1.82h.71a3.57,3.57,0,0,0,1-.1A.88.88,0,0,0,24,28a.84.84,0,0,0,.14-.5.8.8,0,0,0-.2-.57.88.88,0,0,0-.52-.29,6.36,6.36,0,0,0-.93,0Z\" fill=\"#484f60\"/><path d=\"M19.14,24.27v9h19.7v-9Zm6.12,4.24a1.68,1.68,0,0,1-.54.63,1.9,1.9,0,0,1-.67.3,6.57,6.57,0,0,1-1.34.1h-.85V32H20.57V25.54h2.07a7.75,7.75,0,0,1,1.54.1,1.73,1.73,0,0,1,.93.63,2,2,0,0,1,.37,1.25A2,2,0,0,1,25.26,28.51Zm6.45,1.66A2.91,2.91,0,0,1,31,31.31a2.28,2.28,0,0,1-.91.51A4,4,0,0,1,29,32H26.54V25.54H28.9a4.21,4.21,0,0,1,1.22.13,2.08,2.08,0,0,1,1,.59,2.79,2.79,0,0,1,.61,1,4.76,4.76,0,0,1,.21,1.52A4.19,4.19,0,0,1,31.71,30.17Zm5.7-3.54h-3.1v1.52H37v1.08H34.31V32H33V25.54h4.39Z\" fill=\"#484f60\"/><path d=\"M25.2,10.84v6.44c0,1.78.27,2,2,2h6.23Z\" fill=\"#484f60\"/></svg>",
@@ -1841,8 +1823,9 @@
     ]; };
 
     /** AUTO GENERATED FILE. DO NOT CHANGE.. OR YOU WILL SUFFER THE CONSEQUENCES OF YOUR ACTIONS **/
-    exports["ɵbn"] = void 0;
+    exports["ɵbr"] = void 0;
     (function (Icon) {
+        Icon["Account"] = "account";
         Icon["AngleLeftSolid"] = "angle_left_solid";
         Icon["AngleRightSolid"] = "angle_right_solid";
         Icon["ArrowFatRight"] = "arrow_fat_right";
@@ -1855,10 +1838,13 @@
         Icon["DeliveryTruck"] = "delivery_truck";
         Icon["Email"] = "email";
         Icon["EnvelopeRegular"] = "envelope_regular";
+        Icon["EyeRegular"] = "eye_regular";
         Icon["FileExportRegular"] = "file_export_regular";
         Icon["FileExportSolid"] = "file_export_solid";
         Icon["FilePdfRegular"] = "file_pdf_regular";
         Icon["FilePdfSolid"] = "file_pdf_solid";
+        Icon["FileSignatureRegular"] = "file_signature_regular";
+        Icon["Lock"] = "lock";
         Icon["MessageSmsRegular"] = "message_sms_regular";
         Icon["MessageSmsSolid"] = "message_sms_solid";
         Icon["Pdf"] = "pdf";
@@ -1867,13 +1853,13 @@
         Icon["PrintSolid"] = "print_solid";
         Icon["SignatureField"] = "signature_field";
         Icon["Xml"] = "xml";
-    })(exports["ɵbn"] || (exports["ɵbn"] = {}));
+    })(exports["ɵbr"] || (exports["ɵbr"] = {}));
 
     var StockInformationGridComponent = /** @class */ (function () {
         function StockInformationGridComponent(iconCacheService, _stockService) {
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
             this.transferIconClicked = new i0.EventEmitter();
             this.historyClicked = new i0.EventEmitter();
             this.cancelButtonClicked = new i0.EventEmitter();
@@ -2085,7 +2071,7 @@
     StockInformationGridComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-information-grid",
-                    template: "\n    <div class=\"tab-link show\" *ngIf=\"hideOrShowTabs\">\n      <span class=\"tab-link-buttons\"\n            *ngFor=\"let tab of tabs\"\n            (click)=\"handleTabClick(tab)\"\n            [textContent]=\"tab\"\n            [class.active]=\"tab === activeTab\"\n      ></span>\n    </div>\n\n    <div class=\"stock-line\">\n      <div [textContent]=\"activeTabText\"></div>\n\n    </div>\n\n    <div class=\"stock-grid\">\n      <co-simple-grid *ngIf=\"activeTab === tabs[0] && hideOrShowTabs\"\n                      [data]=\"articleStockInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n          <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'warehouseNo'\" [order]=\"10\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'DESCRIPTION' | localize\" [field]=\"'warehouseName'\" [order]=\"11\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'STOCK' | localize\" [field]=\"'technicalStock'\" [order]=\"12\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'AVAILABLE_STOCK' | localize\" [field]=\"'availableStock'\" [order]=\"13\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'ECONOMICAL_STOCK' | localize\" [field]=\"'economicalStock'\" [order]=\"14\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNo'\" [order]=\"15\">\n            <ng-template #template let-row=\"row\">\n              <span class=\"location-link\" [textContent]=\"'LOOK_AT' | localize\" (click)=\"onLocationClick(row)\"></span>\n            </ng-template>\n          </co-simple-grid-column>\n      </co-simple-grid>\n\n      <co-simple-grid *ngIf=\"activeTab === tabs[1]\"\n                      [data]=\"inOrderInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n        <co-simple-grid-column [headerText]=\"'IN_ORDER' | localize\" [field]=\"'transactionNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'CUSTOMER' | localize\" [field]=\"'customerName'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DATE' | localize\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.transactionDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AMOUNT' | localize\" [field]=\"'amountInOrder'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'warehouseNumber'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DESCRIPTION' | localize\" [field]=\"'warehouseDescription'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSFER' | localize\" [field]=\"'transfer'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.DeliveryTruck)\" (click)=\"handleStockTransferClick($event)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STICKER' | localize\" [field]=\"'sticker'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\" (click)=\"openSendMethodDialog(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n\n      <co-simple-grid *ngIf=\"activeTab === tabs[2]\"\n                      [data]=\"orderInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n        <co-simple-grid-column [headerText]=\"'PURCHASE_ORDER_NR' | localize\" [field]=\"'transactionNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DATE' | localize\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.transactionDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AMOUNT' | localize\" [field]=\"'amountInOrder'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'RESERVED' | localize\" [field]=\"'reserved'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'FREE_STOCK' | localize\" [field]=\"'InOrderForStock'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DELIVERY_DATE' | localize\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.deliveryDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n    </div>\n\n    <div class=\"stock-grid\" *ngIf=\"hideOrShowLocationTab\">\n      <div class=\"stock-location-group\">\n        <div class=\"stock-location-left-group\">\n          <span class=\"stock-button-back\" [textContent]=\"'BACK_TO_STOCK_LINES' | localize\" (click)=\"handleBackToStockClick()\"></span>\n        </div>\n        <div class=\"stock-location-right-group\">\n          <co-drop-down-list  [(model)]=\"selectedWarehouse\"\n                              [collection]=\"dataWareHouseCode\"\n                              [fields]=\"dataWareHouseFields\"\n                              [placeholder]=\"'WAREHOUSE' | localize\"\n                              (modelChange)=\"onSelectWarehouse($event)\"\n                              [required]=\"true\"\n          ></co-drop-down-list>\n        </div>\n      </div>\n\n<!--      TODO move to own component stock-location-->\n      <co-simple-grid [data]=\"articleDetails\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n                      [showAdd]=\"true\"\n                      [showToolbar]=\"true\"\n                      [showDelete]=\"true\"\n                      [inlineEdit]=\"true\"\n                      (dblClickRow)=\"lockSelectedRow($event)\"\n      >\n        <div class=\"stock-location-group\">\n          <div class=\"stock-location-left-group\">\n            <co-button class=\"stock-lines-button\" [textContent]=\"'BACK_TO_STOCK_LINES' | localize\" (click)=\"handleBackToStockClick()\"></co-button>\n          </div>\n        </div>\n        <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-drop-down-list [(model)]=\"row.locationNo\"\n                               [collection]=\"stockLocations\"\n                               [fields]=\"dataLocationFields\"\n                               [placeholder]=\"'LOCATION' | localize\"\n                               (click)=\"onLocationDropdownClick()\"\n                               [required]=\"true\"\n            ></co-drop-down-list>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'BATCH' | localize\" [field]=\"'batchNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text [(model)]=\"row.batchNo\"\n                           [placeholder]=\"'BATCH' | localize\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'SERIAL_NO' | localize\" [field]=\"'serialNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text [(model)]=\"row.serialNo\"\n                           [placeholder]=\"'SERIAL_NO' | localize\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK' | localize\" [field]=\"'amountInStock'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text  [(model)]=\"row.amountInStock\"\n                            [label]=\"'STOCK' | localize\"\n                            (modelChange)=\"amountInStockChanged($event)\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'ALLOCATED' | localize\" [field]=\"'stockAssigned'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.stockAssigned\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AVAILABLE_STOCK' | localize\" [field]=\"'amountInStockFree'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.amountInStockFree\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'VALUTA' | localize\" [field]=\"'currency'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.currency\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'PURCHASE_PRICE' | localize\" [field]=\"'purchasePrice'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.purchasePrice\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'SUPPLIER_NUMBER' | localize\" [field]=\"'supplierNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.supplierNo\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSFER' | localize\" [field]=\"'transfer'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.DeliveryTruck)\" (click)=\"handleStockTransferClick(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STICKER' | localize\" [field]=\"'sticker'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\" (click)=\"openSendMethodDialog(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n    </div>\n\n    <co-stock-change-amount *ngIf=\"showChangeStockDetails\"\n                            (closeStockChangeAmount)=\"showChangeStockDetails = false\"\n                            [selectedArticleDetailsData]=\"selectedArticleDetailsData\"\n    >\n    </co-stock-change-amount>\n\n    <div class=\"stock-grid\" *ngIf=\"showStockHistory\">\n      <div class=\"stock-button-left-group\">\n        <span class=\"stock-button-back\" [textContent]=\"'BACK_TO_STOCK_LINES' | localize\" (click)=\"backToStockInformation()\"></span>\n      </div>\n      <co-simple-grid [data]=\"stockHistoryInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n        <co-simple-grid-column [headerText]=\"'MUTATION_DATE' | localize\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.mutationDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'MUTATION_TIME' | localize\" [field]=\"'mutationTime'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AMOUNT' | localize\" [field]=\"'amount'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'wareHouseNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSACTION_TYPE' | localize\" [field]=\"'transType'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DOCUMENT_NUMBER' | localize\" [field]=\"'docNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'LINE' | localize\" [field]=\"'posLineNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK_STATE' | localize\" [field]=\"'stockStateId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK_REMARK' | localize\" [field]=\"'stockStateRemarkId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'VALUTA' | localize\" [field]=\"'currencyCode'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'RELATION_ID' | localize\" [field]=\"'relationId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'USER' | localize\" [field]=\"'user'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'MUTATION_TYPE' | localize\" [field]=\"'mutationType'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STICKER' | localize\" [field]=\"'sticker'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\" (click)=\"openSendMethodDialog(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n    </div>\n\n    <div class=\"stock-button-toolbar\">\n      <div class=\"stock-button-left-group\">\n        <co-button *ngIf=\"activeTab === tabs[0]\" [label]=\"'HISTORY' | localize\" (click)=\"handleHistoryClick()\"></co-button>\n      </div>\n      <div class=\"stock-button-middle-group\" *ngIf=\"activeTab !== tabs[0]\">\n        <div class=\"button-left\">\n          <co-button [textContent]=\"'OK' | localize\" (click)=\"onOkClick()\"></co-button>\n        </div>\n        <div class=\"button-right\">\n          <co-button [textContent]=\"'CANCEL' | localize\" (click)=\"onCancelClick()\"></co-button>\n        </div>\n      </div>\n\n      <div class=\"stock-button-middle-group\" *ngIf=\"hideOrShowLocationTab\">\n        <div class=\"button-left\">\n          <co-button [textContent]=\"'OK' | localize\" (click)=\"onOkClickSendLocations()\"></co-button>\n        </div>\n        <div class=\"button-right\">\n          <co-button [textContent]=\"'CANCEL' | localize\" (click)=\"onCancelClickSendLocations()\"></co-button>\n        </div>\n      </div>\n    </div>\n    <co-send-method-dialog *ngIf=\"showSendMethodDialog\"\n                           (closeClick)=\"showSendMethodDialog = false\"\n    ></co-send-method-dialog>\n  ",
+                    template: "\n    <div class=\"tab-link show\" *ngIf=\"hideOrShowTabs\">\n      <span class=\"tab-link-buttons\"\n            *ngFor=\"let tab of tabs\"\n            (click)=\"handleTabClick(tab)\"\n            [textContent]=\"tab\"\n            [class.active]=\"tab === activeTab\"\n      ></span>\n    </div>\n\n    <div class=\"stock-line\">\n      <div [textContent]=\"activeTabText\"></div>\n\n    </div>\n\n    <div class=\"stock-grid\">\n      <co-simple-grid *ngIf=\"activeTab === tabs[0] && hideOrShowTabs\"\n                      [data]=\"articleStockInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n          <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'warehouseNo'\" [order]=\"10\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'DESCRIPTION' | localize\" [field]=\"'warehouseName'\" [order]=\"11\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'STOCK' | localize\" [field]=\"'technicalStock'\" [order]=\"12\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'AVAILABLE_STOCK' | localize\" [field]=\"'availableStock'\" [order]=\"13\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'ECONOMICAL_STOCK' | localize\" [field]=\"'economicalStock'\" [order]=\"14\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNo'\" [order]=\"15\">\n            <ng-template #template let-row=\"row\">\n              <span class=\"location-link\" [textContent]=\"'LOOK_AT' | localize\" (click)=\"onLocationClick(row)\"></span>\n            </ng-template>\n          </co-simple-grid-column>\n      </co-simple-grid>\n\n      <co-simple-grid *ngIf=\"activeTab === tabs[1]\"\n                      [data]=\"inOrderInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n        <co-simple-grid-column [headerText]=\"'IN_ORDER' | localize\" [field]=\"'transactionNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'CUSTOMER' | localize\" [field]=\"'customerName'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DATE' | localize\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.transactionDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AMOUNT' | localize\" [field]=\"'amountInOrder'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'warehouseNumber'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DESCRIPTION' | localize\" [field]=\"'warehouseDescription'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSFER' | localize\" [field]=\"'transfer'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.DeliveryTruck)\" (click)=\"handleStockTransferClick($event)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STICKER' | localize\" [field]=\"'sticker'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\" (click)=\"openSendMethodDialog(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n\n      <co-simple-grid *ngIf=\"activeTab === tabs[2]\"\n                      [data]=\"orderInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n        <co-simple-grid-column [headerText]=\"'PURCHASE_ORDER_NR' | localize\" [field]=\"'transactionNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DATE' | localize\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.transactionDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AMOUNT' | localize\" [field]=\"'amountInOrder'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'RESERVED' | localize\" [field]=\"'reserved'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'FREE_STOCK' | localize\" [field]=\"'InOrderForStock'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DELIVERY_DATE' | localize\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.deliveryDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n    </div>\n\n    <div class=\"stock-grid\" *ngIf=\"hideOrShowLocationTab\">\n      <div class=\"stock-location-group\">\n        <div class=\"stock-location-left-group\">\n          <span class=\"stock-button-back\" [textContent]=\"'BACK_TO_STOCK_LINES' | localize\" (click)=\"handleBackToStockClick()\"></span>\n        </div>\n        <div class=\"stock-location-right-group\">\n<!--\n          <co-drop-down-list  [(model)]=\"selectedWarehouse\"\n                              [collection]=\"dataWareHouseCode\"\n                              [fields]=\"dataWareHouseFields\"\n                              [placeholder]=\"'WAREHOUSE' | localize\"\n                              (modelChange)=\"onSelectWarehouse($event)\"\n                              [required]=\"true\"\n          ></co-drop-down-list>\n-->\n        </div>\n      </div>\n\n<!--      TODO move to own component stock-location-->\n      <co-simple-grid [data]=\"articleDetails\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n                      [showAdd]=\"true\"\n                      [showToolbar]=\"true\"\n                      [showDelete]=\"true\"\n                      [inlineEdit]=\"true\"\n                      (dblClickRow)=\"lockSelectedRow($event)\"\n      >\n        <div class=\"stock-location-group\">\n          <div class=\"stock-location-left-group\">\n            <co-button class=\"stock-lines-button\" [textContent]=\"'BACK_TO_STOCK_LINES' | localize\" (click)=\"handleBackToStockClick()\"></co-button>\n          </div>\n        </div>\n        <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n<!--\n            <co-drop-down-list [(model)]=\"row.locationNo\"\n                               [collection]=\"stockLocations\"\n                               [fields]=\"dataLocationFields\"\n                               [placeholder]=\"'LOCATION' | localize\"\n                               (click)=\"onLocationDropdownClick()\"\n                               [required]=\"true\"\n            ></co-drop-down-list>\n-->\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'BATCH' | localize\" [field]=\"'batchNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text [(model)]=\"row.batchNo\"\n                           [placeholder]=\"'BATCH' | localize\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'SERIAL_NO' | localize\" [field]=\"'serialNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text [(model)]=\"row.serialNo\"\n                           [placeholder]=\"'SERIAL_NO' | localize\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK' | localize\" [field]=\"'amountInStock'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text  [(model)]=\"row.amountInStock\"\n                            [label]=\"'STOCK' | localize\"\n                            (modelChange)=\"amountInStockChanged($event)\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'ALLOCATED' | localize\" [field]=\"'stockAssigned'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.stockAssigned\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AVAILABLE_STOCK' | localize\" [field]=\"'amountInStockFree'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.amountInStockFree\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'VALUTA' | localize\" [field]=\"'currency'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.currency\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'PURCHASE_PRICE' | localize\" [field]=\"'purchasePrice'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.purchasePrice\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'SUPPLIER_NUMBER' | localize\" [field]=\"'supplierNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.supplierNo\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSFER' | localize\" [field]=\"'transfer'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.DeliveryTruck)\" (click)=\"handleStockTransferClick(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STICKER' | localize\" [field]=\"'sticker'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\" (click)=\"openSendMethodDialog(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n    </div>\n\n    <co-stock-change-amount *ngIf=\"showChangeStockDetails\"\n                            (closeStockChangeAmount)=\"showChangeStockDetails = false\"\n                            [selectedArticleDetailsData]=\"selectedArticleDetailsData\"\n    >\n    </co-stock-change-amount>\n\n    <div class=\"stock-grid\" *ngIf=\"showStockHistory\">\n      <div class=\"stock-button-left-group\">\n        <span class=\"stock-button-back\" [textContent]=\"'BACK_TO_STOCK_LINES' | localize\" (click)=\"backToStockInformation()\"></span>\n      </div>\n      <co-simple-grid [data]=\"stockHistoryInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n        <co-simple-grid-column [headerText]=\"'MUTATION_DATE' | localize\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.mutationDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'MUTATION_TIME' | localize\" [field]=\"'mutationTime'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AMOUNT' | localize\" [field]=\"'amount'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'wareHouseNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSACTION_TYPE' | localize\" [field]=\"'transType'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DOCUMENT_NUMBER' | localize\" [field]=\"'docNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'LINE' | localize\" [field]=\"'posLineNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK_STATE' | localize\" [field]=\"'stockStateId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK_REMARK' | localize\" [field]=\"'stockStateRemarkId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'VALUTA' | localize\" [field]=\"'currencyCode'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'RELATION_ID' | localize\" [field]=\"'relationId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'USER' | localize\" [field]=\"'user'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'MUTATION_TYPE' | localize\" [field]=\"'mutationType'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STICKER' | localize\" [field]=\"'sticker'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\" (click)=\"openSendMethodDialog(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n    </div>\n\n    <div class=\"stock-button-toolbar\">\n      <div class=\"stock-button-left-group\">\n        <co-button *ngIf=\"activeTab === tabs[0]\" [label]=\"'HISTORY' | localize\" (click)=\"handleHistoryClick()\"></co-button>\n      </div>\n      <div class=\"stock-button-middle-group\" *ngIf=\"activeTab !== tabs[0]\">\n        <div class=\"button-left\">\n          <co-button [textContent]=\"'OK' | localize\" (click)=\"onOkClick()\"></co-button>\n        </div>\n        <div class=\"button-right\">\n          <co-button [textContent]=\"'CANCEL' | localize\" (click)=\"onCancelClick()\"></co-button>\n        </div>\n      </div>\n\n      <div class=\"stock-button-middle-group\" *ngIf=\"hideOrShowLocationTab\">\n        <div class=\"button-left\">\n          <co-button [textContent]=\"'OK' | localize\" (click)=\"onOkClickSendLocations()\"></co-button>\n        </div>\n        <div class=\"button-right\">\n          <co-button [textContent]=\"'CANCEL' | localize\" (click)=\"onCancelClickSendLocations()\"></co-button>\n        </div>\n      </div>\n    </div>\n    <co-send-method-dialog *ngIf=\"showSendMethodDialog\"\n                           (closeClick)=\"showSendMethodDialog = false\"\n    ></co-send-method-dialog>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -2175,7 +2161,7 @@
     StockTransferComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-transfer",
-                    template: "\n      <div class=\"stock-transfer\">\n        <div class=\"stock-transfer-columns\">\n          <div *ngIf=\"articleToTransfer\" class=\"stock-transfer-left-column\">\n            <co-input-text disabled\n                           [label]=\"'Standaard magazijn' | localize\"\n                           [(model)]=\"articleToTransfer.warehouseDescription\"\n                           [textContent]=\"articleToTransfer.warehouseDescription\"\n                           [placeholder]=\"'Standaard magazijn' | localize\"\n            >\n            </co-input-text>\n            <co-input-text disabled\n                           [(model)]=\"articleToTransfer.locationNo\"\n                           [textContent]=\"articleToTransfer.locationNo\"\n                           [placeholder]=\"'Standaard locatie' | localize\">\n            </co-input-text>\n<!--            <co-input-text disabled-->\n<!--                           [(model)]=\"stockSticker.batch\"-->\n<!--                           [placeholder]=\"'Batch'\">-->\n<!--            </co-input-text>-->\n<!--            <co-input-text disabled-->\n<!--                           [(model)]=\"stockSticker.serial\"-->\n<!--                           [placeholder]=\"'Serie'\">-->\n<!--            </co-input-text>-->\n            <co-input-text\n              [(model)]=\"articleToTransfer.amountTransfer\"\n              [placeholder]=\"'Aantal' | localize\">\n            </co-input-text>\n          </div>\n\n          <div class=\"stock-transfer-right-column\">\n            <co-drop-down-list [collection]=\"warehouses\"\n                               [fields]=\"allWarehousesDropdownFields\"\n                               (modelChange)=\"handleSelectedWarehouse($event)\"\n                               [placeholder]=\"'Magazijn' | localize\"\n                               [(model)]=\"articleToTransfer.targetWarehouse\">\n            </co-drop-down-list>\n            <co-drop-down-list [collection]=\"locations\"\n                               [fields]=\"allLocationDropdownFields\"\n                               [(model)]=\"articleToTransfer.targetLocation\"\n                               [placeholder]=\"'Locatie' | localize\"\n            >\n            </co-drop-down-list>\n            <co-drop-down-list [collection]=\"stockState\"\n                               [fields]=\"stockStateDropdownField\"\n                               [placeholder]=\"'Voorraadstatus' | localize\"\n                               [(model)]=\"articleToTransfer.stockStateId\"\n            >\n            </co-drop-down-list>\n            <co-input-text [placeholder]=\"'Omschrijving' | localize\"\n                           [(model)]=\"articleToTransfer.stockStateRemark\">\n            </co-input-text>\n          </div>\n        </div>\n\n        <div class=\"ok-cancel-buttons\">\n          <co-button [textContent]=\"'OK' | localize\" (click)=\"handleOkClick(articleToTransfer)\"></co-button>\n          <co-button [textContent]=\"'CANCEL' | localize\" (click)=\"handleCancelClick()\"></co-button>\n          <co-button [textContent]=\"'STICKER' | localize\" (click)=\"handleStickerClick()\"></co-button>\n        </div>\n      </div>\n  ",
+                    template: "\n      <div class=\"stock-transfer\">\n        <div class=\"stock-transfer-columns\">\n          <div *ngIf=\"articleToTransfer\" class=\"stock-transfer-left-column\">\n            <co-input-text disabled\n                           [label]=\"'Standaard magazijn' | localize\"\n                           [(model)]=\"articleToTransfer.warehouseDescription\"\n                           [textContent]=\"articleToTransfer.warehouseDescription\"\n                           [placeholder]=\"'Standaard magazijn' | localize\"\n            >\n            </co-input-text>\n            <co-input-text disabled\n                           [(model)]=\"articleToTransfer.locationNo\"\n                           [textContent]=\"articleToTransfer.locationNo\"\n                           [placeholder]=\"'Standaard locatie' | localize\">\n            </co-input-text>\n<!--            <co-input-text disabled-->\n<!--                           [(model)]=\"stockSticker.batch\"-->\n<!--                           [placeholder]=\"'Batch'\">-->\n<!--            </co-input-text>-->\n<!--            <co-input-text disabled-->\n<!--                           [(model)]=\"stockSticker.serial\"-->\n<!--                           [placeholder]=\"'Serie'\">-->\n<!--            </co-input-text>-->\n            <co-input-text\n              [(model)]=\"articleToTransfer.amountTransfer\"\n              [placeholder]=\"'Aantal' | localize\">\n            </co-input-text>\n          </div>\n\n          <div class=\"stock-transfer-right-column\">\n<!--\n            <co-drop-down-list [collection]=\"warehouses\"\n                               [fields]=\"allWarehousesDropdownFields\"\n                               (modelChange)=\"handleSelectedWarehouse($event)\"\n                               [placeholder]=\"'Magazijn' | localize\"\n                               [(model)]=\"articleToTransfer.targetWarehouse\">\n            </co-drop-down-list>\n            <co-drop-down-list [collection]=\"locations\"\n                               [fields]=\"allLocationDropdownFields\"\n                               [(model)]=\"articleToTransfer.targetLocation\"\n                               [placeholder]=\"'Locatie' | localize\"\n            >\n            </co-drop-down-list>\n            <co-drop-down-list [collection]=\"stockState\"\n                               [fields]=\"stockStateDropdownField\"\n                               [placeholder]=\"'Voorraadstatus' | localize\"\n                               [(model)]=\"articleToTransfer.stockStateId\"\n            >\n            </co-drop-down-list>\n-->\n            <co-input-text [placeholder]=\"'Omschrijving' | localize\"\n                           [(model)]=\"articleToTransfer.stockStateRemark\">\n            </co-input-text>\n          </div>\n        </div>\n\n        <div class=\"ok-cancel-buttons\">\n          <co-button [textContent]=\"'OK' | localize\" (click)=\"handleOkClick(articleToTransfer)\"></co-button>\n          <co-button [textContent]=\"'CANCEL' | localize\" (click)=\"handleCancelClick()\"></co-button>\n          <co-button [textContent]=\"'STICKER' | localize\" (click)=\"handleStickerClick()\"></co-button>\n        </div>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -2245,34 +2231,34 @@
 
     var SendMethodService = /** @class */ (function () {
         function SendMethodService() {
-            this.reportingDocumentPrintBaseRequestChanged = new rxjs.Subject();
-            this.reportingDocumentEmailBaseRequestChanged = new rxjs.Subject();
+            this.reportingDocumentPrintSignDocBaseRequestChanged = new rxjs.Subject();
+            this.reportingDocumentEmailSignDocBaseRequestChanged = new rxjs.Subject();
             this.reportingDocumentPdfBaseRequestChanged = new rxjs.Subject();
             this.selectedEmailAddresses = [];
-            this._reportingDocumentPrintBaseRequest = new reportingDocumentPrintBaseRequest.ReportingDocumentPrintBaseRequest();
-            this._reportingDocumentEmailBaseRequest = new reportingDocumentEmailBaseRequest.ReportingDocumentEmailBaseRequest();
+            this._reportingDocumentPrintSignDocBaseRequest = new reportingDocumentPrintSignDocBaseRequest.ReportingDocumentPrintSignDocBaseRequest();
+            this._reportingDocumentEmailSignDocBaseRequest = new reportingDocumentEmailSignDocBaseRequest.ReportingDocumentEmailSignDocBaseRequest();
             this._reportingDocumentPdfBaseRequest = new reportingDocumentPdfBaseRequest.ReportingDocumentPdfBaseRequest();
         }
-        Object.defineProperty(SendMethodService.prototype, "reportingDocumentPrintBaseRequest", {
+        Object.defineProperty(SendMethodService.prototype, "reportingDocumentPrintSignDocBaseRequest", {
             get: function () {
-                return this._reportingDocumentPrintBaseRequest;
+                return this._reportingDocumentPrintSignDocBaseRequest;
             },
             set: function (value) {
-                this._reportingDocumentPrintBaseRequest = value;
-                this.activePrinter = this._reportingDocumentPrintBaseRequest.printerName;
-                this.reportingDocumentPrintBaseRequestChanged.next(this._reportingDocumentPrintBaseRequest);
+                this._reportingDocumentPrintSignDocBaseRequest = value;
+                this.activePrinter = this._reportingDocumentPrintSignDocBaseRequest.printerName;
+                this.reportingDocumentPrintSignDocBaseRequestChanged.next(this._reportingDocumentPrintSignDocBaseRequest);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SendMethodService.prototype, "reportingDocumentEmailBaseRequest", {
+        Object.defineProperty(SendMethodService.prototype, "reportingDocumentEmailSignDocBaseRequest", {
             get: function () {
-                return this._reportingDocumentEmailBaseRequest;
+                return this._reportingDocumentEmailSignDocBaseRequest;
             },
             set: function (value) {
-                this._reportingDocumentEmailBaseRequest = value;
-                this.selectedEmailAddresses = this._reportingDocumentEmailBaseRequest.toAddresses.split(';');
-                this.reportingDocumentEmailBaseRequestChanged.next(this._reportingDocumentEmailBaseRequest);
+                this._reportingDocumentEmailSignDocBaseRequest = value;
+                this.selectedEmailAddresses = this._reportingDocumentEmailSignDocBaseRequest.toAddresses.split(';');
+                this.reportingDocumentEmailSignDocBaseRequestChanged.next(this._reportingDocumentEmailSignDocBaseRequest);
             },
             enumerable: false,
             configurable: true
@@ -2301,8 +2287,8 @@
             }
         };
         SendMethodService.prototype._updateEmailAddresses = function () {
-            this._reportingDocumentEmailBaseRequest.toAddresses = this.selectedEmailAddresses.join(';');
-            this.reportingDocumentEmailBaseRequestChanged.next(this._reportingDocumentEmailBaseRequest);
+            this._reportingDocumentEmailSignDocBaseRequest.toAddresses = this.selectedEmailAddresses.join(';');
+            this.reportingDocumentEmailSignDocBaseRequestChanged.next(this._reportingDocumentEmailSignDocBaseRequest);
         };
         return SendMethodService;
     }());
@@ -2320,13 +2306,13 @@
     }());
 
     var sendMethodsWithIcon = [
-        new SendMethod(sendMethodType_enum.SendMethodType.Fax, "Fax", exports["ɵbn"].PrintRegular),
-        new SendMethod(sendMethodType_enum.SendMethodType.Print, "Print", exports["ɵbn"].PrintSolid),
-        new SendMethod(sendMethodType_enum.SendMethodType.Email, "Email", exports["ɵbn"].AtSolid),
-        new SendMethod(sendMethodType_enum.SendMethodType.Edi, "Edi", exports["ɵbn"].FileExportSolid),
-        new SendMethod(sendMethodType_enum.SendMethodType.EmailTemplate, "Email template", exports["ɵbn"].EnvelopeRegular),
-        new SendMethod(sendMethodType_enum.SendMethodType.Sms, "Sms", exports["ɵbn"].MessageSmsSolid),
-        new SendMethod(sendMethodType_enum.SendMethodType.WebService, "Webservice", exports["ɵbn"].PrintRegular)
+        new SendMethod(sendMethodType_enum.SendMethodType.Fax, "Fax", exports["ɵbr"].PrintRegular),
+        new SendMethod(sendMethodType_enum.SendMethodType.Print, "Print", exports["ɵbr"].PrintSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.Email, "Email", exports["ɵbr"].AtSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.Edi, "Edi", exports["ɵbr"].FileExportSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.EmailTemplate, "Email template", exports["ɵbr"].EnvelopeRegular),
+        new SendMethod(sendMethodType_enum.SendMethodType.Sms, "Sms", exports["ɵbr"].MessageSmsSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.WebService, "Webservice", exports["ɵbr"].PrintRegular)
     ];
     var SendMethodDialogComponent = /** @class */ (function () {
         function SendMethodDialogComponent(iconCacheService, _changeDetector, _sharedService, _sendMethodService) {
@@ -2335,7 +2321,7 @@
             this._changeDetector = _changeDetector;
             this._sharedService = _sharedService;
             this._sendMethodService = _sendMethodService;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
             this.printerList = [];
             this.emailLayouts = [];
             this.printLayouts = [];
@@ -2360,17 +2346,17 @@
             this.showEmailTemplate = true;
             this.showWebservice = true;
             this._subscriptions = [];
-            this._subscriptions.push(this._sendMethodService.reportingDocumentPrintBaseRequestChanged.subscribe(function (value) { return _this.reportingDocumentPrintRequestChange.next(value); }), this._sendMethodService.reportingDocumentEmailBaseRequestChanged.subscribe(function (value) { return _this.reportingDocumentEmailRequestChange.next(value); }), this._sendMethodService.reportingDocumentPdfBaseRequestChanged.subscribe(function (value) { return _this.reportingDocumentPdfRequestChange.next(value); }));
+            this._subscriptions.push(this._sendMethodService.reportingDocumentPrintSignDocBaseRequestChanged.subscribe(function (value) { return _this.reportingDocumentPrintRequestChange.next(value); }), this._sendMethodService.reportingDocumentEmailSignDocBaseRequestChanged.subscribe(function (value) { return _this.reportingDocumentEmailRequestChange.next(value); }), this._sendMethodService.reportingDocumentPdfBaseRequestChanged.subscribe(function (value) { return _this.reportingDocumentPdfRequestChange.next(value); }));
         }
         SendMethodDialogComponent.prototype.showClass = function () {
             return true;
         };
         SendMethodDialogComponent.prototype.ngOnInit = function () {
             if (this.reportingDocumentEmailRequest) {
-                this._sendMethodService.reportingDocumentEmailBaseRequest = this.reportingDocumentEmailRequest;
+                this._sendMethodService.reportingDocumentEmailSignDocBaseRequest = this.reportingDocumentEmailRequest;
             }
             if (this.reportingDocumentPrintRequest) {
-                this._sendMethodService.reportingDocumentPrintBaseRequest = this.reportingDocumentPrintRequest;
+                this._sendMethodService.reportingDocumentPrintSignDocBaseRequest = this.reportingDocumentPrintRequest;
             }
             if (this.reportingDocumentPdfRequest) {
                 this._sendMethodService.reportingDocumentPdfBaseRequest = this.reportingDocumentPdfRequest;
@@ -2538,7 +2524,7 @@
     SendMethodEmailComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-send-method-email',
-                    template: "\n    <div class=\"email-addresses-wrapper co-small-scrollbar\">\n      <div class=\"email-address-wrapper\" *ngFor=\"let emailAddressViewmodel of emailAddressViewmodels\" (click)=\"handleCheckedEmail(emailAddressViewmodel)\">\n        <co-input-checkbox [model]=\"emailAddressViewmodel.checked\" (modelChange)=\"handleCheckedEmail(emailAddressViewmodel)\"></co-input-checkbox>\n        <div class=\"email-address\" [textContent]=\"emailAddressViewmodel.emailAddress\"></div>\n      </div>\n    </div>\n    <co-layout-selection\n      [(request)]=\"sendMethodService.reportingDocumentEmailBaseRequest\"\n      [layouts]=\"layouts\"\n    ></co-layout-selection>\n  ",
+                    template: "\n    <div class=\"email-addresses-wrapper co-small-scrollbar\">\n      <div class=\"email-address-wrapper\" *ngFor=\"let emailAddressViewmodel of emailAddressViewmodels\" (click)=\"handleCheckedEmail(emailAddressViewmodel)\">\n        <co-input-checkbox [model]=\"emailAddressViewmodel.checked\" (modelChange)=\"handleCheckedEmail(emailAddressViewmodel)\"></co-input-checkbox>\n        <div class=\"email-address\" [textContent]=\"emailAddressViewmodel.emailAddress\"></div>\n      </div>\n    </div>\n    <div class=\"layout-signature-wrapper\">\n      <co-layout-selection\n        [(request)]=\"sendMethodService.reportingDocumentEmailSignDocBaseRequest\"\n        [layouts]=\"layouts\"\n      ></co-layout-selection>\n      <co-signature-button\n        [request]=\"sendMethodService.reportingDocumentEmailSignDocBaseRequest\"\n      ></co-signature-button>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -2615,6 +2601,54 @@
                 },] }
     ];
 
+    var SignatureButtonComponent = /** @class */ (function () {
+        function SignatureButtonComponent(iconCacheService) {
+            this.iconCacheService = iconCacheService;
+            this.icons = exports["ɵbr"];
+        }
+        SignatureButtonComponent.prototype.showClass = function () {
+            return true;
+        };
+        SignatureButtonComponent.prototype.handleToggleSignature = function () {
+            this.request.parkForDigitalSignature = !this.request.parkForDigitalSignature;
+        };
+        return SignatureButtonComponent;
+    }());
+    SignatureButtonComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-signature-button",
+                    template: "\n    <div class=\"signature-button-wrapper\"\n         [class.selected]=\"request.parkForDigitalSignature\"\n         (click)=\"handleToggleSignature()\">\n      <co-icon\n        [iconData]=\"iconCacheService.getIcon(icons.FileSignatureRegular)\"\n      ></co-icon>\n    </div>\n    ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    SignatureButtonComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
+    ]; };
+    SignatureButtonComponent.propDecorators = {
+        request: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-signature-button",] }]
+    };
+
+    var SignatureButtonModule = /** @class */ (function () {
+        function SignatureButtonModule() {
+        }
+        return SignatureButtonModule;
+    }());
+    SignatureButtonModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        corecomponents_v12.IconModule
+                    ],
+                    declarations: [
+                        SignatureButtonComponent
+                    ],
+                    exports: [
+                        SignatureButtonComponent
+                    ]
+                },] }
+    ];
+
     var SendMethodEmailModule = /** @class */ (function () {
         function SendMethodEmailModule() {
         }
@@ -2625,7 +2659,9 @@
                     imports: [
                         common.CommonModule,
                         corecomponents_v12.InputCheckboxModule,
-                        LayoutSelectionModule
+                        LayoutSelectionModule,
+                        corecomponents_v12.IconModule,
+                        SignatureButtonModule
                     ],
                     declarations: [
                         SendMethodEmailComponent
@@ -2646,19 +2682,19 @@
             return true;
         };
         SendMethodPrinterComponent.prototype.handleDefaultPrinterUserChange = function (checked) {
-            this.sendMethodService.reportingDocumentPrintBaseRequest.saveDefaultPrinterForUser = checked;
-            this.sendMethodService.reportingDocumentPrintBaseRequestChanged.next(this.sendMethodService.reportingDocumentPrintBaseRequest);
+            this.sendMethodService.reportingDocumentPrintSignDocBaseRequest.saveDefaultPrinterForUser = checked;
+            this.sendMethodService.reportingDocumentPrintSignDocBaseRequestChanged.next(this.sendMethodService.reportingDocumentPrintSignDocBaseRequest);
         };
         SendMethodPrinterComponent.prototype.handleDefaultPrinterAllUsersChange = function (checked) {
-            this.sendMethodService.reportingDocumentPrintBaseRequest.saveDefaultPrinterForAllUsers = checked;
-            this.sendMethodService.reportingDocumentPrintBaseRequestChanged.next(this.sendMethodService.reportingDocumentPrintBaseRequest);
+            this.sendMethodService.reportingDocumentPrintSignDocBaseRequest.saveDefaultPrinterForAllUsers = checked;
+            this.sendMethodService.reportingDocumentPrintSignDocBaseRequestChanged.next(this.sendMethodService.reportingDocumentPrintSignDocBaseRequest);
         };
         return SendMethodPrinterComponent;
     }());
     SendMethodPrinterComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-send-method-printer',
-                    template: "\n    <co-printer-selection [printers]=\"printerList\"></co-printer-selection>\n    <co-layout-selection\n      [(request)]=\"sendMethodService.reportingDocumentPrintBaseRequest\"\n      [layouts]=\"layouts\"\n    ></co-layout-selection>\n    <co-input-checkbox\n      [model]=\"sendMethodService.reportingDocumentPrintBaseRequest.saveDefaultPrinterForUser\"\n      [label]=\"'Koppeling onthouden'\"\n      (modelChange)=\"handleDefaultPrinterUserChange($event)\"\n    ></co-input-checkbox>\n    <co-input-checkbox\n      [model]=\"sendMethodService.reportingDocumentPrintBaseRequest.saveDefaultPrinterForAllUsers\"\n      [label]=\"'Alle gebruikers'\"\n      (modelChange)=\"handleDefaultPrinterAllUsersChange($event)\"\n    ></co-input-checkbox>\n  ",
+                    template: "\n    <co-printer-selection [printers]=\"printerList\"></co-printer-selection>\n    <div class=\"layout-signature-wrapper\">\n      <co-layout-selection\n        [(request)]=\"sendMethodService.reportingDocumentPrintSignDocBaseRequest\"\n        [layouts]=\"layouts\"\n      ></co-layout-selection>\n      <co-signature-button\n        [request]=\"sendMethodService.reportingDocumentPrintSignDocBaseRequest\"\n      ></co-signature-button>\n    </div>\n    <co-input-checkbox\n      [model]=\"sendMethodService.reportingDocumentPrintSignDocBaseRequest.saveDefaultPrinterForUser\"\n      [label]=\"'Koppeling onthouden'\"\n      (modelChange)=\"handleDefaultPrinterUserChange($event)\"\n    ></co-input-checkbox>\n    <co-input-checkbox\n      [model]=\"sendMethodService.reportingDocumentPrintSignDocBaseRequest.saveDefaultPrinterForAllUsers\"\n      [label]=\"'Alle gebruikers'\"\n      (modelChange)=\"handleDefaultPrinterAllUsersChange($event)\"\n    ></co-input-checkbox>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -2676,7 +2712,7 @@
             this.sendMethodService = sendMethodService;
             this.iconService = iconService;
             this._service = _service;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
             this.printers = [];
             this.showPrinterList = false;
         }
@@ -2684,17 +2720,17 @@
             return true;
         };
         PrinterSelectionComponent.prototype.ngOnInit = function () {
-            if (!this.sendMethodService.reportingDocumentPrintBaseRequest.printerName && this.printers && this.printers.length > 0) {
+            if (!this.sendMethodService.reportingDocumentPrintSignDocBaseRequest.printerName && this.printers && this.printers.length > 0) {
                 var defaultPrinter = this.printers.find(function (p) { return p.isDefault; });
                 if (defaultPrinter) {
-                    this.sendMethodService.reportingDocumentPrintBaseRequest.printerName = defaultPrinter.name;
-                    this.sendMethodService.reportingDocumentPrintBaseRequestChanged.next(this.sendMethodService.reportingDocumentPrintBaseRequest);
+                    this.sendMethodService.reportingDocumentPrintSignDocBaseRequest.printerName = defaultPrinter.name;
+                    this.sendMethodService.reportingDocumentPrintSignDocBaseRequestChanged.next(this.sendMethodService.reportingDocumentPrintSignDocBaseRequest);
                 }
             }
         };
         PrinterSelectionComponent.prototype.handlePrinterClicked = function (printer) {
-            this.sendMethodService.reportingDocumentPrintBaseRequest.printerName = printer.name;
-            this.sendMethodService.reportingDocumentPrintBaseRequestChanged.next(this.sendMethodService.reportingDocumentPrintBaseRequest);
+            this.sendMethodService.reportingDocumentPrintSignDocBaseRequest.printerName = printer.name;
+            this.sendMethodService.reportingDocumentPrintSignDocBaseRequestChanged.next(this.sendMethodService.reportingDocumentPrintSignDocBaseRequest);
             this.showPrinterList = false;
         };
         return PrinterSelectionComponent;
@@ -2702,7 +2738,7 @@
     PrinterSelectionComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-printer-selection',
-                    template: "\n    <div class=\"printer-selection-wrapper\" (click)=\"showPrinterList = !showPrinterList\">\n      <div class=\"title\" [textContent]=\"'Printer'\"></div>\n      <div class=\"printer-name\" [textContent]=\"sendMethodService.reportingDocumentPrintBaseRequest.printerName || 'Printer kiezen'\"></div>\n    </div>\n    <div class=\"layouts-wrapper co-small-scrollbar\" *ngIf=\"showPrinterList\" @showHideLayouts>\n      <div class=\"printer-list-item\" *ngFor=\"let printer of printers\"\n           [class.selected]=\"sendMethodService.reportingDocumentPrintBaseRequest.printerName === printer.name\"\n           (click)=\"handlePrinterClicked(printer)\">\n        <co-icon class=\"printer-icon\" [iconData]=\"iconService.getIcon(icons.PrintRegular)\"></co-icon>\n        <div class=\"printer-details\">\n          <span class=\"printer-name\" [textContent]=\"printer.name\"></span>\n          <span class=\"printer-status\" [textContent]=\"printer.acceptingJobs\"></span>\n        </div>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"printer-selection-wrapper\" (click)=\"showPrinterList = !showPrinterList\">\n      <div class=\"title\" [textContent]=\"'Printer'\"></div>\n      <div class=\"printer-name\" [textContent]=\"sendMethodService.reportingDocumentPrintSignDocBaseRequest.printerName || 'Printer kiezen'\"></div>\n    </div>\n    <div class=\"layouts-wrapper co-small-scrollbar\" *ngIf=\"showPrinterList\" @showHideLayouts>\n      <div class=\"printer-list-item\" *ngFor=\"let printer of printers\"\n           [class.selected]=\"sendMethodService.reportingDocumentPrintSignDocBaseRequest.printerName === printer.name\"\n           (click)=\"handlePrinterClicked(printer)\">\n        <co-icon class=\"printer-icon\" [iconData]=\"iconService.getIcon(icons.PrintRegular)\"></co-icon>\n        <div class=\"printer-details\">\n          <span class=\"printer-name\" [textContent]=\"printer.name\"></span>\n          <span class=\"printer-status\" [textContent]=\"printer.acceptingJobs\"></span>\n        </div>\n      </div>\n    </div>\n  ",
                     animations: [
                         animations.trigger('showHideLayouts', [
                             animations.state('void', animations.style({ height: 0 })),
@@ -2756,7 +2792,8 @@
                         corecomponents_v12.IconModule,
                         LayoutSelectionModule,
                         PrinterSelectionModule,
-                        corecomponents_v12.InputCheckboxModule
+                        corecomponents_v12.InputCheckboxModule,
+                        SignatureButtonModule
                     ],
                     declarations: [
                         SendMethodPrinterComponent
@@ -2837,7 +2874,7 @@
     StockChangeAmountComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-change-amount",
-                    template: "\n      <div class=\"stock-transfer\">\n        <co-dialog-wizard [showCloseIcon]=\"true\" (closeClick)=\"closeDialogClick()\">\n          <ng-container header>\n            <span [textContent]=\"'STOCK_CHANGE_REASON' | localize\"></span>\n          </ng-container>\n          <div class=\"popup-wrapper\">\n            <co-drop-down-list [collection]=\"stockState\"\n                               [fields]=\"stockStateDropdownField\"\n                               [placeholder]=\"'STOCK_STATE' | localize\"\n                               [(model)]=\"selectedArticleDetailsData.stockStateId\"\n            ></co-drop-down-list>\n\n            <co-input-textarea [(model)]=\"selectedArticleDetailsData.stockStateRemark\"\n\n            ></co-input-textarea>\n            <div class=\"ok-cancel-buttons\">\n              <co-button [textContent]=\"'OK' | localize\" (click)=\"handleOkClick(selectedArticleDetailsData)\"></co-button>\n              <co-button [textContent]=\"'CANCEL' | localize\" (click)=\"handleCancelClick()\"></co-button>\n            </div>\n          </div>\n        </co-dialog-wizard>\n      </div>\n  ",
+                    template: "\n      <div class=\"stock-transfer\">\n        <co-dialog-wizard [showCloseIcon]=\"true\" (closeClick)=\"closeDialogClick()\">\n          <ng-container header>\n            <span [textContent]=\"'STOCK_CHANGE_REASON' | localize\"></span>\n          </ng-container>\n          <div class=\"popup-wrapper\">\n<!--\n            <co-drop-down-list [collection]=\"stockState\"\n                               [fields]=\"stockStateDropdownField\"\n                               [placeholder]=\"'STOCK_STATE' | localize\"\n                               [(model)]=\"selectedArticleDetailsData.stockStateId\"\n            ></co-drop-down-list>\n-->\n\n            <co-input-textarea [(model)]=\"selectedArticleDetailsData.stockStateRemark\"\n\n            ></co-input-textarea>\n            <div class=\"ok-cancel-buttons\">\n              <co-button [textContent]=\"'OK' | localize\" (click)=\"handleOkClick(selectedArticleDetailsData)\"></co-button>\n              <co-button [textContent]=\"'CANCEL' | localize\" (click)=\"handleCancelClick()\"></co-button>\n            </div>\n          </div>\n        </co-dialog-wizard>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -2874,7 +2911,7 @@
         function OrderTabComponent(iconCacheService, _stockService) {
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
             this.locationClicked = new i0.EventEmitter();
             this.transferIconClicked = new i0.EventEmitter();
             this.sendMethodDialogClicked = new i0.EventEmitter();
@@ -2910,9 +2947,11 @@
         function StockTabsComponent(_stockService, _localizeService) {
             this._stockService = _stockService;
             this._localizeService = _localizeService;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
             this.transferIconClicked = new i0.EventEmitter();
             this.sendMethodDialogClicked = new i0.EventEmitter();
+            this.articleDetailsInformation = new articleStockManagement.ArticleStockManagement();
+            this.showWarehouseSelection = false;
             this.tabs = [];
             this.historyTabs = [];
         }
@@ -2920,6 +2959,7 @@
             var _this = this;
             this.tabs = [
                 { title: this._localizeService.get('OVERVIEW'), active: true },
+                { title: this._localizeService.get('STOCK_FORECAST'), active: false },
                 { title: this._localizeService.get('STOCK_DETAILS'), active: false },
                 { title: this._localizeService.get('ALREADY_IN_ORDER'), active: false, clickHandler: function () { return _this.getInOrderData(); } },
                 { title: this._localizeService.get('IN_ORDER'), active: false, clickHandler: function () { return _this.getOrderData(); } },
@@ -2932,11 +2972,13 @@
                 { title: this._localizeService.get('ORDER'), active: false, clickHandler: function () { return _this.getOrderStockHistory(); } },
                 { title: this._localizeService.get('ALLOCATION'), active: false, clickHandler: function () { return _this.getAllocationStockHistory(); } },
             ];
+            console.log(this.tabs[0]);
+            console.log(this.historyTabs[5]);
         };
         StockTabsComponent.prototype.handleLocationClicked = function (data) {
             this.selectedLocation = data.warehouseNo;
             this.tabs[0].active = false;
-            this.tabs[1].active = true;
+            this.tabs[2].active = true;
         };
         StockTabsComponent.prototype.getStockHistory = function () {
             return __awaiter(this, void 0, void 0, function () {
@@ -3078,12 +3120,41 @@
                 });
             });
         };
+        StockTabsComponent.prototype.getStockPrognose = function (warehouseNo) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = this;
+                            return [4 /*yield*/, this._stockService.stockPrognose(this.article.goodId, warehouseNo)];
+                        case 1:
+                            _a.stockPrognose = _b.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        StockTabsComponent.prototype.handleWarehouseSelected = function (event) {
+            var _this = this;
+            this.selectedWarehouse = event;
+            if (this.tabs[1].active) {
+                this.getStockPrognose(this.selectedWarehouse.warehouseNo);
+            }
+            if (this.tabs[2].active) {
+                this.articleDetailsInformation.warehouseNumber = event.warehouseNo;
+                this.articleDetailsInformation.goodId = this.article.goodId;
+                this._stockService.getArticleDetails(this.articleDetailsInformation).then(function (details) {
+                    _this.articleDetails = details;
+                });
+            }
+        };
         return StockTabsComponent;
     }());
     StockTabsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-tabs",
-                    template: "\n    <co-tab-bar [wareHouseLabel]=\"'CHOICES' | localize\" [wareHouseSearchLabel]=\"'SEARCH' | localize\" \n                [tabs]=\"tabs\" [dataWareHouseCode]=\"warehouses\" [secondaryTabs]=\"historyTabs\" [ActivateSecondaryTabs]=\"tabs[4].active\"></co-tab-bar>\n\n    <co-stock-tab *ngIf=\"tabs[0].active\"\n                  [articleStockInformation]=\"stockInformation\"\n                  (locationClicked)=\"handleLocationClicked($event)\"\n    ></co-stock-tab>\n\n    <co-stock-location *ngIf=\"tabs[1].active\"\n                       [articleStockInformation]=\"stockInformation\"\n                       [article]=\"article\"\n                       [clickedLocation]=\"selectedLocation\"\n                       [dataWareHouseCode]=\"warehouses\"\n                       (transferIconClicked)=\"transferIconClicked.emit($event)\"\n                       (sendMethodDialogClicked)=\"sendMethodDialogClicked.emit($event)\"\n    ></co-stock-location>\n\n    <co-order-tab *ngIf=\"tabs[2].active\"\n                  [articleStockInformation]=\"stockInformation\"\n                  [inOrderInformation]=\"inOrderInformation\"\n                  (transferIconClicked)=\"transferIconClicked.emit($event)\"\n                  (sendMethodDialogClicked)=\"sendMethodDialogClicked.emit($event)\"\n    ></co-order-tab>\n\n    <co-order-stock-tab *ngIf=\"tabs[3].active\"\n                        [orderInformation]=\"orderInformation\"\n    ></co-order-stock-tab>\n\n    <co-stock-history *ngIf=\"historyTabs[0].active && tabs[4].active\"\n                      [stockHistory]=\"stockHistory\"\n    ></co-stock-history>\n\n    <co-order-supply-stock-history *ngIf=\"historyTabs[1].active && tabs[4].active\"\n                                   [orderSupplyStockHistory]=\"orderSupplyStockHistory\"\n    ></co-order-supply-stock-history>\n\n    <co-order-stock-commission-history *ngIf=\"historyTabs[2].active && tabs[4].active\"\n                                       [orderStockCommissionHistory]=\"orderCommissionStockHistory\"\n    ></co-order-stock-commission-history>\n\n    <co-order-stock-history *ngIf=\"historyTabs[3].active && tabs[4].active\"\n                            [orderStockHistory]=\"orderStockHistory\"\n    ></co-order-stock-history>\n\n    <co-allocation-stock-history *ngIf=\"historyTabs[4].active && tabs[4].active\"\n                                 [allocationStockHistory]=\"orderAllocationStockHistory\"\n    ></co-allocation-stock-history>\n\n  ",
+                    template: "\n    <co-tab-bar [wareHouseLabel]=\"'CHOICES' | localize\"\n                [wareHouseSearchLabel]=\"'SEARCH' | localize\"\n                [tabs]=\"tabs\"\n                [dataWareHouseCode]=\"warehouses\"\n                [secondaryTabs]=\"historyTabs\"\n                [ActivateSecondaryTabs]=\"tabs[5].active\"\n                [showWarehouseSelection]=\"tabs[1].active || tabs[2].active\"\n                (warehouseSelected)=\"handleWarehouseSelected($event)\"\n    ></co-tab-bar>\n\n    <co-stock-tab *ngIf=\"tabs[0].active\"\n                  [articleStockInformation]=\"stockInformation\"\n                  (locationClicked)=\"handleLocationClicked($event)\"\n    ></co-stock-tab>\n\n    <co-stock-prognose *ngIf=\"tabs[1].active\"\n                       [stockPrognose]=\"stockPrognose\"\n    ></co-stock-prognose>\n\n    <co-stock-location *ngIf=\"tabs[2].active\"\n                       [articleStockInfo]=\"articleDetails\"\n                       [articleStockInformation]=\"stockInformation\"\n                       [article]=\"article\"\n                       [clickedLocation]=\"selectedLocation\"\n                       [dataWareHouseCode]=\"warehouses\"\n                       (transferIconClicked)=\"transferIconClicked.emit($event)\"\n                       (sendMethodDialogClicked)=\"sendMethodDialogClicked.emit($event)\"\n    ></co-stock-location>\n\n    <co-order-tab *ngIf=\"tabs[3].active\"\n                  [articleStockInformation]=\"stockInformation\"\n                  [inOrderInformation]=\"inOrderInformation\"\n                  (transferIconClicked)=\"transferIconClicked.emit($event)\"\n                  (sendMethodDialogClicked)=\"sendMethodDialogClicked.emit($event)\"\n    ></co-order-tab>\n\n    <co-order-stock-tab *ngIf=\"tabs[4].active\"\n                        [orderInformation]=\"orderInformation\"\n    ></co-order-stock-tab>\n\n    <co-stock-history *ngIf=\"historyTabs[0].active && tabs[5].active\"\n                      [stockHistory]=\"stockHistory\"\n    ></co-stock-history>\n\n    <co-order-supply-stock-history *ngIf=\"historyTabs[1].active && tabs[5].active\"\n                            [orderSupplyStockHistory]=\"orderSupplyStockHistory\"\n    ></co-order-supply-stock-history>\n\n    <co-order-stock-commission-history *ngIf=\"historyTabs[2].active && tabs[5].active\"\n                                       [orderStockCommissionHistory]=\"orderCommissionStockHistory\"\n    ></co-order-stock-commission-history>\n\n    <co-order-stock-history *ngIf=\"historyTabs[3].active && tabs[5].active\"\n                            [orderStockHistory]=\"orderStockHistory\"\n    ></co-order-stock-history>\n\n    <co-allocation-stock-history *ngIf=\"historyTabs[4].active && tabs[5].active\"\n                                 [allocationStockHistory]=\"orderAllocationStockHistory\"\n    ></co-allocation-stock-history>\n\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3101,7 +3172,7 @@
 
     var StockHistoryTabsComponent = /** @class */ (function () {
         function StockHistoryTabsComponent() {
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
             this.selectedTab = 0;
         }
         return StockHistoryTabsComponent;
@@ -3121,7 +3192,7 @@
         function OrderStockTabComponent(iconCacheService, _stockService) {
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
         }
         return OrderStockTabComponent;
     }());
@@ -3145,7 +3216,7 @@
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
             this._changeDetector = _changeDetector;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
             this.transferIconClicked = new i0.EventEmitter();
             this.sendMethodDialogClicked = new i0.EventEmitter();
             this.dataWareHouseFields = { text: "warehouseDescription", value: "warehouseNo" };
@@ -3219,7 +3290,7 @@
     StockLocationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-location",
-                    template: "\n      <div class=\"stock-grid\">\n          <div class=\"stock-location-group\">\n              <div class=\"stock-location-right-group\">\n                  <co-drop-down-list [(model)]=\"selectedWarehouse\"\n                                     [collection]=\"dataWareHouseCode\"\n                                     [fields]=\"dataWareHouseFields\"\n                                     [placeholder]=\"'WAREHOUSE' | localize\"\n                                     (modelChange)=\"onSelectWarehouse($event)\"\n                                     [required]=\"true\"\n                  ></co-drop-down-list>\n                <co-list-of-values [label]=\"'CHOICES' | localize\"\n                                   [displayField]=\"'warehouseDescription'\"\n                                   [collection]=\"dataWareHouseCode\"\n                                   [model]=\"selectedWarehouseModel\"\n                                   [multiselect]=\"false\"\n                                   [required]=\"false\"\n                                   [readonly]=\"true\"\n                                   [customCssClass]=\"'mini-scrollbar'\"\n                                   [searchPlaceholder]=\"'SEARCH' | localize\"\n                                   (modelChange)=\"onSelectWarehouse($event)\"\n                >\n                </co-list-of-values>\n              </div>\n          </div>\n\n          <co-simple-grid [data]=\"articleDetails\"\n                          class=\"simple-grid\"\n                          [rowsPerPage]=\"20\"\n                          [showAdd]=\"true\"\n                          [inlineEdit]=\"true\"\n                          (dblClickRow)=\"lockSelectedRow($event)\"\n                          [showToolbar]=\"true\"\n                          (keydown.enter)=\"onOkClickSendLocations()\"\n          >\n              <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-drop-down-list [(model)]=\"row.locationNo\"\n                                         [collection]=\"stockLocations\"\n                                         [fields]=\"dataLocationFields\"\n                                         [placeholder]=\"'LOCATION' | localize\"\n                                         (click)=\"onLocationDropdownClick()\"\n                                         [required]=\"true\"\n                                         (modelChange)=\"locationChanged($event)\"\n                      ></co-drop-down-list>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'BATCH' | localize\" [field]=\"'batchNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.batchNo\"\n                                     [placeholder]=\"'BATCH' | localize\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'SERIAL_NO' | localize\" [field]=\"'serialNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.serialNo\"\n                                     [placeholder]=\"'SERIAL_NO' | localize\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'STOCK' | localize\" [field]=\"'amountInStock'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.amountInStock\"\n                                     [label]=\"'STOCK' | localize\"\n                                     (modelChange)=\"amountInStockChanged($event)\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'ALLOCATED' | localize\" [field]=\"'stockAssigned'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.stockAssigned\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'AVAILABLE_STOCK' | localize\" [field]=\"'amountInStockFree'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.amountInStockFree\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'VALUTA' | localize\" [field]=\"'currency'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.currency\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'PURCHASE_PRICE' | localize\" [field]=\"'purchasePrice'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.purchasePrice\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'SUPPLIER_NUMBER' | localize\" [field]=\"'supplierNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.supplierNo\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'TRANSFER' | localize\" [field]=\"'transfer'\">\n                  <ng-template #template let-row=\"row\">\n                      <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.DeliveryTruck)\"\n                               (click)=\"handleStockTransferClick(row)\"></co-icon>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'STICKER' | localize\" [field]=\"'sticker'\">\n                  <ng-template #template let-row=\"row\">\n                      <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\"\n                               (click)=\"openSendMethodDialog(row)\"></co-icon>\n                  </ng-template>\n              </co-simple-grid-column>\n          </co-simple-grid>\n      </div>\n  ",
+                    template: "\n      <div class=\"stock-grid\">\n          <co-simple-grid [data]=\"articleDetails\"\n                          class=\"simple-grid\"\n                          [rowsPerPage]=\"20\"\n                          [showAdd]=\"true\"\n                          [inlineEdit]=\"true\"\n                          (dblClickRow)=\"lockSelectedRow($event)\"\n                          [showToolbar]=\"true\"\n                          (keydown.enter)=\"onOkClickSendLocations()\"\n          >\n              <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n<!--\n                      <co-drop-down-list [(model)]=\"row.locationNo\"\n                                         [collection]=\"stockLocations\"\n                                         [fields]=\"dataLocationFields\"\n                                         [placeholder]=\"'LOCATION' | localize\"\n                                         (click)=\"onLocationDropdownClick()\"\n                                         [required]=\"true\"\n                                         (modelChange)=\"locationChanged($event)\"\n                      ></co-drop-down-list>\n-->\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'BATCH' | localize\" [field]=\"'batchNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.batchNo\"\n                                     [placeholder]=\"'BATCH' | localize\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'SERIAL_NO' | localize\" [field]=\"'serialNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.serialNo\"\n                                     [placeholder]=\"'SERIAL_NO' | localize\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'STOCK' | localize\" [field]=\"'amountInStock'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.amountInStock\"\n                                     [label]=\"'STOCK' | localize\"\n                                     (modelChange)=\"amountInStockChanged($event)\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'ALLOCATED' | localize\" [field]=\"'stockAssigned'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.stockAssigned\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'AVAILABLE_STOCK' | localize\" [field]=\"'amountInStockFree'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.amountInStockFree\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'VALUTA' | localize\" [field]=\"'currency'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.currency\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'PURCHASE_PRICE' | localize\" [field]=\"'purchasePrice'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.purchasePrice\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'SUPPLIER_NUMBER' | localize\" [field]=\"'supplierNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.supplierNo\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'TRANSFER' | localize\" [field]=\"'transfer'\">\n                  <ng-template #template let-row=\"row\">\n                      <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.DeliveryTruck)\"\n                               (click)=\"handleStockTransferClick(row)\"></co-icon>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'STICKER' | localize\" [field]=\"'sticker'\">\n                  <ng-template #template let-row=\"row\">\n                      <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\"\n                               (click)=\"openSendMethodDialog(row)\"></co-icon>\n                  </ng-template>\n              </co-simple-grid-column>\n          </co-simple-grid>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3229,6 +3300,7 @@
         { type: i0.ChangeDetectorRef }
     ]; };
     StockLocationComponent.propDecorators = {
+        articleStockInfo: [{ type: i0.Input }],
         articleStockInformation: [{ type: i0.Input }],
         article: [{ type: i0.Input }],
         clickedLocation: [{ type: i0.Input }],
@@ -3241,7 +3313,7 @@
         function StockHistoryComponent(iconCacheService, _stockService) {
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
         }
         return StockHistoryComponent;
     }());
@@ -3266,8 +3338,8 @@
         function TabBarComponent(_stockService) {
             this._stockService = _stockService;
             this.ActivateSecondaryTabs = false;
-            this.dataWareHouseFields = { text: "warehouseDescription", value: "warehouseNo" };
-            this.articleDetailsInformation = new articleStockManagement.ArticleStockManagement();
+            this.showWarehouseSelection = false;
+            this.warehouseSelected = new i0.EventEmitter();
         }
         TabBarComponent.prototype.selectTab = function (tab) {
             if (tab.clickHandler) {
@@ -3284,21 +3356,14 @@
             secondaryTab.active = true;
         };
         TabBarComponent.prototype.onSelectWarehouse = function (event) {
-            var _this = this;
-            this.articleDetailsInformation.warehouseNumber = event;
-            this.articleDetailsInformation.goodId = this.article.goodId;
-            if (this.selectedWarehouse || this.selectedWarehouse === 0) {
-                this._stockService.getArticleDetails(this.articleDetailsInformation).then(function (details) {
-                    _this.articleDetails = details;
-                });
-            }
+            this.warehouseSelected.emit(event);
         };
         return TabBarComponent;
     }());
     TabBarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-tab-bar",
-                    template: "\n    <div class=\"tab-bar-wrapper\">\n      <div class=\"tab-bar-warehouse-wrapper\">\n        <div class=\"stock-location-group\">\n          <div class=\"stock-location-right-group\">\n            <co-list-of-values [label]=\"wareHouseLabel\"\n                               [displayField]=\"'warehouseDescription'\"\n                               [collection]=\"dataWareHouseCode\"\n                               [multiselect]=\"false\"\n                               [required]=\"false\"\n                               [readonly]=\"true\"\n                               [customCssClass]=\"'mini-scrollbar'\"\n                               [searchPlaceholder]=\"wareHouseSearchLabel\"\n                               (modelChange)=\"onSelectWarehouse($event)\"\n            >\n            </co-list-of-values>\n          </div>\n        </div>\n      </div>\n      <div class=\"tab-bar\">\n        <div class=\"tab-bar-primary\">\n          <button *ngFor=\"let tab of tabs\" [class.active]=\"tab.active\" (click)=\"selectTab(tab)\">\n            {{tab.title}}\n          </button>\n        </div>\n        <div class=\"secondary-tab-bar\" *ngIf=\"ActivateSecondaryTabs\">\n          <button *ngFor=\"let tab of secondaryTabs\" [class.active]=\"tab.active\" (click)=\"selectSecondaryTab(tab)\">\n            {{tab.title}}\n          </button>\n        </div>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"tab-bar-wrapper\">\n      <div class=\"tab-bar-warehouse-wrapper\">\n        <div class=\"stock-location-group\">\n          <div class=\"stock-location-right-group\">\n            <co-list-of-values *ngIf=\"showWarehouseSelection\"\n                               [label]=\"wareHouseLabel\"\n                               [displayField]=\"'warehouseDescription'\"\n                               [collection]=\"dataWareHouseCode\"\n                               [multiselect]=\"false\"\n                               [required]=\"false\"\n                               [readonly]=\"false\"\n                               [customCssClass]=\"'mini-scrollbar'\"\n                               [searchPlaceholder]=\"wareHouseSearchLabel\"\n                               [model]=\"selectedWarehouse\"\n                               (modelChange)=\"onSelectWarehouse($event)\"\n            >\n            </co-list-of-values>\n          </div>\n        </div>\n      </div>\n      <div class=\"tab-bar\">\n        <div class=\"tab-bar-primary\">\n          <button *ngFor=\"let tab of tabs\" [class.active]=\"tab.active\" (click)=\"selectTab(tab)\">\n            {{tab.title}}\n          </button>\n        </div>\n        <div class=\"secondary-tab-bar\" *ngIf=\"ActivateSecondaryTabs\">\n          <button *ngFor=\"let tab of secondaryTabs\" [class.active]=\"tab.active\" (click)=\"selectSecondaryTab(tab)\">\n            {{tab.title}}\n          </button>\n        </div>\n      </div>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3312,7 +3377,9 @@
         secondaryTabs: [{ type: i0.Input }],
         ActivateSecondaryTabs: [{ type: i0.Input }],
         dataWareHouseCode: [{ type: i0.Input }],
-        article: [{ type: i0.Input }]
+        article: [{ type: i0.Input }],
+        showWarehouseSelection: [{ type: i0.Input }],
+        warehouseSelected: [{ type: i0.Output }]
     };
 
     var TabBarModule = /** @class */ (function () {
@@ -3324,7 +3391,6 @@
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        corecomponents_v12.DropDownModule,
                         corecomponents_v12.ListOfValuesModule,
                     ],
                     declarations: [
@@ -3339,7 +3405,7 @@
     var OrderSupplyStockHistoryComponent = /** @class */ (function () {
         function OrderSupplyStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
         }
         return OrderSupplyStockHistoryComponent;
     }());
@@ -3360,7 +3426,7 @@
     var OrderCommissionStockHistoryComponent = /** @class */ (function () {
         function OrderCommissionStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
         }
         return OrderCommissionStockHistoryComponent;
     }());
@@ -3381,7 +3447,7 @@
     var OrderStockHistoryComponent = /** @class */ (function () {
         function OrderStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
         }
         return OrderStockHistoryComponent;
     }());
@@ -3402,7 +3468,7 @@
     var AllocationStockHistoryComponent = /** @class */ (function () {
         function AllocationStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
         }
         return AllocationStockHistoryComponent;
     }());
@@ -3420,7 +3486,7 @@
         allocationStockHistory: [{ type: i0.Input }]
     };
 
-    var GaugeColor;
+    var GaugeColor$1;
     (function (GaugeColor) {
         GaugeColor["Lowest"] = "#E0E0E0";
         GaugeColor["Low"] = "#fff7b8";
@@ -3428,158 +3494,11 @@
         GaugeColor["MediumHigh"] = "#ffc15b";
         GaugeColor["High"] = "#F88952";
         GaugeColor["Highest"] = "#5FDCB3";
-    })(GaugeColor || (GaugeColor = {}));
-
-    var CoCircularGaugeComponent = /** @class */ (function () {
-        function CoCircularGaugeComponent() {
-            this._color = GaugeColor.Low;
-            this.majorTicks = {
-                height: 0,
-            };
-            this.minorTicks = {
-                height: 0
-            };
-            this.labelStyle = {
-                position: 'Inside', useRangeColor: true,
-                font: { size: '0px', fontFamily: 'inherit' }
-            };
-            this.lineStyle = {
-                width: 0
-            };
-            this.ranges = [
-                {
-                    start: 1, end: 100,
-                    radius: '13px',
-                    startWidth: 3, endWidth: 3,
-                    color: '#E0E0E0',
-                    roundedCornerRadius: 0
-                },
-            ];
-        }
-        Object.defineProperty(CoCircularGaugeComponent.prototype, "value", {
-            get: function () {
-                return this._value;
-            },
-            set: function (value) {
-                this._value = value;
-                this._setColor();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(CoCircularGaugeComponent.prototype, "color", {
-            get: function () {
-                return this._color;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        CoCircularGaugeComponent.prototype.showClass = function () {
-            return true;
-        };
-        CoCircularGaugeComponent.prototype.getAxes = function () {
-            return [{
-                    minimum: 0,
-                    maximum: 100,
-                    radius: '15px',
-                    startAngle: 1,
-                    endAngle: 360,
-                    majorTicks: this.majorTicks,
-                    minorTicks: this.minorTicks,
-                    labelStyle: this.labelStyle,
-                    lineStyle: this.lineStyle,
-                    ranges: this.ranges,
-                    pointers: this.getPointers(),
-                    annotations: this.getAnnotations(),
-                }];
-        };
-        CoCircularGaugeComponent.prototype.getPointers = function () {
-            if (this.value) {
-                return [{
-                        roundedCornerRadius: 0,
-                        value: this.value,
-                        type: 'RangeBar',
-                        radius: '13px',
-                        color: this.color,
-                        border: {
-                            width: 0
-                        },
-                        animation: {
-                            enable: false
-                        },
-                        pointerWidth: 3
-                    }];
-            }
-        };
-        ;
-        CoCircularGaugeComponent.prototype.getAnnotations = function () {
-            if (this.value !== undefined) {
-                var label = this.value ? this.value + "%" : "0%";
-                return [{
-                        content: '<div class="annotation" style="width:20px;height:20px;">' +
-                            '<div class="annotation-label">' + label + '</div></div>',
-                        zIndex: '10',
-                    }];
-            }
-        };
-        CoCircularGaugeComponent.prototype._setColor = function () {
-            if (this.value <= 0) {
-                this._color = GaugeColor.Lowest;
-            }
-            else if (this.value >= 1 && this.value < 25) {
-                this._color = GaugeColor.Low;
-            }
-            else if (this.value >= 25 && this.value < 50) {
-                this._color = GaugeColor.MediumLow;
-            }
-            else if (this.value >= 50 && this.value < 75) {
-                this._color = GaugeColor.MediumHigh;
-            }
-            else if (this.value >= 75 && this.value < 100) {
-                this._color = GaugeColor.High;
-            }
-            else if (this.value >= 100) {
-                this._color = GaugeColor.Highest;
-            }
-        };
-        return CoCircularGaugeComponent;
-    }());
-    CoCircularGaugeComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: "co-circular-gauge",
-                    template: "\n    <div class=\"circular-gauge-wrapper\">\n      <ejs-circulargauge\n        class=\"circular-gauge\"\n        [width]=\"'100%'\"\n        [axes]=\"getAxes()\">\n      </ejs-circulargauge>\n    </div>\n  ",
-                    encapsulation: i0.ViewEncapsulation.None
-                },] }
-    ];
-    CoCircularGaugeComponent.propDecorators = {
-        circulargauge: [{ type: i0.ViewChild, args: ['circulargauge',] }],
-        value: [{ type: i0.Input }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-circular-gauge",] }]
-    };
-
-    var CoCircularGaugeModule = /** @class */ (function () {
-        function CoCircularGaugeModule() {
-        }
-        return CoCircularGaugeModule;
-    }());
-    CoCircularGaugeModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        ej2AngularCirculargauge.CircularGaugeModule
-                    ],
-                    declarations: [
-                        CoCircularGaugeComponent
-                    ],
-                    exports: [
-                        CoCircularGaugeComponent
-                    ]
-                },] }
-    ];
+    })(GaugeColor$1 || (GaugeColor$1 = {}));
 
     var CoLinearGaugeComponent = /** @class */ (function () {
         function CoLinearGaugeComponent() {
-            this.color = GaugeColor.Low;
+            this.color = GaugeColor$1.Low;
         }
         Object.defineProperty(CoLinearGaugeComponent.prototype, "value", {
             get: function () {
@@ -3600,22 +3519,22 @@
         };
         CoLinearGaugeComponent.prototype._setColor = function () {
             if (this.value <= 0) {
-                this.color = GaugeColor.Lowest;
+                this.color = GaugeColor$1.Lowest;
             }
             else if (this.value >= 1 && this.value < 25) {
-                this.color = GaugeColor.Low;
+                this.color = GaugeColor$1.Low;
             }
             else if (this.value >= 25 && this.value < 50) {
-                this.color = GaugeColor.MediumLow;
+                this.color = GaugeColor$1.MediumLow;
             }
             else if (this.value >= 50 && this.value < 75) {
-                this.color = GaugeColor.MediumHigh;
+                this.color = GaugeColor$1.MediumHigh;
             }
             else if (this.value >= 75 && this.value < 100) {
-                this.color = GaugeColor.High;
+                this.color = GaugeColor$1.High;
             }
             else if (this.value >= 100) {
-                this.color = GaugeColor.Highest;
+                this.color = GaugeColor$1.Highest;
             }
         };
         return CoLinearGaugeComponent;
@@ -3652,21 +3571,90 @@
                 },] }
     ];
 
+    chart_js.Chart.register(chart_js.DoughnutController, chart_js.ArcElement);
+    var GaugeColor;
+    (function (GaugeColor) {
+        GaugeColor["Lowest"] = "#E0E0E0";
+        GaugeColor["Low"] = "#fff7b8";
+        GaugeColor["MediumLow"] = "#ffe367";
+        GaugeColor["MediumHigh"] = "#ffc15b";
+        GaugeColor["High"] = "#F88952";
+        GaugeColor["Highest"] = "#5FDCB3";
+    })(GaugeColor || (GaugeColor = {}));
     var StatusbarPopupComponent = /** @class */ (function () {
         function StatusbarPopupComponent() {
             this.statusbarData = [];
             this.showClass = true;
+            this.doughnutCharts = [];
         }
+        Object.defineProperty(StatusbarPopupComponent.prototype, "content", {
+            set: function (content) {
+                this.doughnutCharts = content.toArray();
+                this._prepareChartData();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        StatusbarPopupComponent.prototype.ngOnInit = function () {
+            this._prepareChartData();
+        };
+        StatusbarPopupComponent.prototype._prepareChartData = function () {
+            var _this = this;
+            if (!this.doughnutCharts || this.doughnutCharts.length === 0) {
+                return;
+            }
+            this.doughnutCharts.forEach(function (chart, index) {
+                new chart_js.Chart(chart.nativeElement, {
+                    type: 'doughnut',
+                    data: {
+                        datasets: [{
+                                label: _this.statusbarData[index].label,
+                                data: [Math.max(0.0001, _this.statusbarData[index].percentage), 100 - Math.max(0.0001, _this.statusbarData[index].percentage)],
+                                backgroundColor: [
+                                    _this._getColor(_this.statusbarData[index].percentage),
+                                    _this._getColor(-1),
+                                ],
+                                borderWidth: 1
+                            }]
+                    },
+                    options: {
+                        cutout: '70%'
+                    }
+                });
+            });
+        };
+        StatusbarPopupComponent.prototype._getColor = function (value) {
+            if (value <= 0) {
+                return GaugeColor.Lowest;
+            }
+            else if (value >= 1 && value < 25) {
+                return GaugeColor.Low;
+            }
+            else if (value >= 25 && value < 50) {
+                return GaugeColor.MediumLow;
+            }
+            else if (value >= 50 && value < 75) {
+                return GaugeColor.MediumHigh;
+            }
+            else if (value >= 75 && value < 100) {
+                return GaugeColor.High;
+            }
+            else if (value >= 100) {
+                return GaugeColor.Highest;
+            }
+        };
         return StatusbarPopupComponent;
     }());
     StatusbarPopupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-statusbar-popup",
-                    template: "\n        <div class=\"co-statusbar-popup-wrapper\" [overlay]=\"parentForOverlay\">\n            <div class=\"status-descriptions\">\n                <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status-description\">\n                    <co-circular-gauge [value]=\"data.percentage\"></co-circular-gauge>\n                    <span [textContent]=\"data.label\"></span>\n                </div>\n            </div>\n        </div>\n    ",
+                    template: "\n        <div class=\"co-statusbar-popup-wrapper\" [overlay]=\"parentForOverlay\">\n            <div class=\"status-descriptions\">\n                <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status-description\">\n                    <div class=\"statusbar-canvas-wrapper\">\n                        <canvas #doughnutCanvas class=\"chart-canvas\"></canvas>\n                        <span class=\"statusbar-inner-canvas-label\" [textContent]=\"data.percentage\"></span>\n                    </div>\n                    <span class=\"statusbar-description\" [textContent]=\"data.label\"></span>\n                </div>\n            </div>\n        </div>\n    ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     StatusbarPopupComponent.propDecorators = {
+        content: [{ type: i0.ViewChildren, args: ['doughnutCanvas', { read: i0.ElementRef },] }],
+        defaultColor: [{ type: i0.Input }],
         statusbarData: [{ type: i0.Input }],
         parentForOverlay: [{ type: i0.Input }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-statusbar-popup",] }]
@@ -3702,7 +3690,7 @@
             }
             event.preventDefault();
             event.stopPropagation();
-            this._statusbarPopupComponentRef = this._overlayService.createComponent(StatusbarPopupComponent, { parentForOverlay: this._elementRef, statusbarData: this.statusbarData });
+            this._statusbarPopupComponentRef = this._overlayService.createComponent(StatusbarPopupComponent, { parentForOverlay: this._elementRef, statusbarData: this.statusbarData, defaultColor: this.defaultColor });
             this.popupShowing = true;
         };
         StatusbarComponent.prototype.handleHidePopup = function () {
@@ -3737,6 +3725,7 @@
     ]; };
     StatusbarComponent.propDecorators = {
         statusbarData: [{ type: i0.Input }],
+        defaultColor: [{ type: i0.Input }],
         focusedStatusIndex: [{ type: i0.Input }],
         statusbarClick: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-statusbar",] }],
@@ -3752,7 +3741,6 @@
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        CoCircularGaugeModule,
                         CoLinearGaugeModule,
                         corecomponents_v12.ClickoutsideModule,
                         corecomponents_v12.OverlayModule
@@ -3804,6 +3792,29 @@
                 },] }
     ];
 
+    var StockPrognoseComponent = /** @class */ (function () {
+        function StockPrognoseComponent(iconCacheService, _stockService) {
+            this.iconCacheService = iconCacheService;
+            this._stockService = _stockService;
+            this.icons = exports["ɵbr"];
+        }
+        return StockPrognoseComponent;
+    }());
+    StockPrognoseComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-stock-prognose",
+                    template: "\n    <co-simple-grid [data]=\"stockPrognose\"\n                    class=\"simple-grid\"\n                    [rowsPerPage]=\"20\"\n    >\n      <co-simple-grid-column [headerText]=\"'AVAILABILITY'\" [field]=\"'available'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'FREE_STOCK'\" [field]=\"'freeStock'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'IN_ORDER'\" [field]=\"'inOrder'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'PURCHASE_ORDER'\" [field]=\"'transNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'PURCHASE_ORDER_DATE'\" [field]=\"'transactionDate'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DELIVERY_DATE'\" [field]=\"'docNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'REFERENCE'\" [field]=\"'reference'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DELIVERY_DATE_CONFIRMED'\" [field]=\"'transConfirmedDate'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DATE_DELIVERED'\" [field]=\"'transDeliveryDate'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'FUTURE_FREE_STOCK'\" [field]=\"'laterAvailable'\"></co-simple-grid-column>\n    </co-simple-grid>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    StockPrognoseComponent.ctorParameters = function () { return [
+        { type: IconCacheService },
+        { type: StockService }
+    ]; };
+    StockPrognoseComponent.propDecorators = {
+        stockPrognose: [{ type: i0.Input }]
+    };
+
     var LocalizePipe = /** @class */ (function () {
         function LocalizePipe(_localizeService) {
             this._localizeService = _localizeService;
@@ -3832,6 +3843,25 @@
         { type: LocalizeService }
     ]; };
 
+    var LocalizationModule = /** @class */ (function () {
+        function LocalizationModule() {
+        }
+        return LocalizationModule;
+    }());
+    LocalizationModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    declarations: [
+                        LocalizePipe
+                    ],
+                    exports: [
+                        LocalizePipe
+                    ]
+                },] }
+    ];
+
     var StockModule = /** @class */ (function () {
         function StockModule() {
         }
@@ -3840,12 +3870,9 @@
     StockModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
-                        corecomponents_v12.InputComboBoxModule,
-                        corecomponents_v12.CoGridModule,
                         corecomponents_v12.ButtonModule,
                         common.CommonModule,
                         corecomponents_v12.InputRadioButtonModule,
-                        corecomponents_v12.DropDownModule,
                         corecomponents_v12.SimpleGridModule,
                         corecomponents_v12.ImageModule,
                         corecomponents_v12.InputTextModule,
@@ -3858,7 +3885,8 @@
                         corecomponents_v12.CoDialogModule,
                         StatusbarModule,
                         StockStatusbarModule,
-                        corecomponents_v12.ListOfValuesModule
+                        corecomponents_v12.ListOfValuesModule,
+                        LocalizationModule
                     ],
                     declarations: [
                         StockComponent,
@@ -3877,7 +3905,7 @@
                         OrderCommissionStockHistoryComponent,
                         OrderStockHistoryComponent,
                         AllocationStockHistoryComponent,
-                        LocalizePipe
+                        StockPrognoseComponent
                     ],
                     exports: [
                         StockComponent
@@ -3889,6 +3917,62 @@
                 },] }
     ];
 
+    var Translation = /** @class */ (function () {
+        function Translation() {
+            this.ALLOCATED = 'ALLOCATED';
+            this.ALLOCATION = 'ALLOCATION';
+            this.ALREADY_IN_ORDER = 'ALREADY_IN_ORDER';
+            this.AMOUNT = 'AMOUNT';
+            this.AMOUNT_AVAILABLE = 'AMOUNT_AVAILABLE';
+            this.AMOUNT_IN_STOCK = 'AMOUNT_IN_STOCK';
+            this.AMOUNT_LATER_AVAILABLE = 'AMOUNT_LATER_AVAILABLE';
+            this.AVAILABLE_STOCK = 'AVAILABLE_STOCK';
+            this.BACK_TO_STOCK_LINES = 'BACK_TO_STOCK_LINES';
+            this.BATCH = 'BATCH';
+            this.CANCEL = 'CANCEL';
+            this.CHOICES = 'CHOICES';
+            this.CUSTOMER = 'CUSTOMER';
+            this.DATE = 'DATE';
+            this.DELIVERY_DATE = 'DELIVERY_DATE';
+            this.DESCRIPTION = 'DESCRIPTION';
+            this.DOCUMENT_NUMBER = 'DOCUMENT_NUMBER';
+            this.ECONOMICAL_STOCK = 'ECONOMICAL_STOCK';
+            this.FREE_STOCK = 'FREE_STOCK';
+            this.HISTORY = 'HISTORY';
+            this.IN_ORDER = 'IN_ORDER';
+            this.LINE = 'LINE';
+            this.LOCATION = 'LOCATION';
+            this.LOOK_AT = 'LOOK_AT';
+            this.MUTATION_DATE = 'MUTATION_DATE';
+            this.MUTATION_TIME = 'MUTATION_TIME';
+            this.MUTATION_TYPE = 'MUTATION_TYPE';
+            this.OK = 'OK';
+            this.ORDER = 'ORDER';
+            this.ORDER_COMMISSION = 'ORDER_COMMISSION';
+            this.ORDER_STOCK = 'ORDER_STOCK';
+            this.OVERVIEW = 'OVERVIEW';
+            this.PURCHASE_ORDER_NR = 'PURCHASE_ORDER_NR';
+            this.PURCHASE_PRICE = 'PURCHASE_PRICE';
+            this.RELATION_ID = 'RELATION_ID';
+            this.RELATION_NR = 'RELATION_NR';
+            this.RESERVED = 'RESERVED';
+            this.SEARCH = 'SEARCH';
+            this.SERIAL_NO = 'SERIAL_NO';
+            this.STICKER = 'STICKER';
+            this.STOCK = 'STOCK';
+            this.STOCK_DETAILS = 'STOCK_DETAILS';
+            this.STOCK_REMARK = 'STOCK_REMARK';
+            this.STOCK_STATE = 'STOCK_STATE';
+            this.STOCK_STATUS = 'STOCK_STATUS';
+            this.SUPPLIER_NUMBER = 'SUPPLIER_NUMBER';
+            this.TRANSFER = 'TRANSFER';
+            this.USER = 'USER';
+            this.VALUTA = 'VALUTA';
+            this.WAREHOUSE = 'WAREHOUSE';
+        }
+        return Translation;
+    }());
+
     var KeyboardCode;
     (function (KeyboardCode) {
         KeyboardCode["Backspace"] = "Backspace";
@@ -3924,7 +4008,7 @@
     var KeyPadComponent = /** @class */ (function () {
         function KeyPadComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
             this.showValue = true;
             this.emitModelChangeOnEnter = true;
             this.modelChange = new i0.EventEmitter();
@@ -4115,7 +4199,7 @@
     var LayoutSwitcherComponent = /** @class */ (function () {
         function LayoutSwitcherComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icon = exports["ɵbn"];
+            this.icon = exports["ɵbr"];
             this.layoutItems = [];
             this.layoutSwitchEmit = new i0.EventEmitter();
             this.showMaskSidebar = false;
@@ -4380,7 +4464,7 @@
             this.iconCacheService = iconCacheService;
             this.selectedDate = new Date();
             this.selectedDateChange = new i0.EventEmitter();
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
             this.showMonthYearSelect = false;
             this.expanded = false;
         }
@@ -4941,7 +5025,7 @@
                 },] }
     ];
     CalendarViewComponent.ctorParameters = function () { return [
-        { type: exports["ɵbt"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
+        { type: exports["ɵbx"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
     ]; };
     CalendarViewComponent.propDecorators = {
         view: [{ type: i0.Input }],
@@ -5029,7 +5113,7 @@
     CalendarUtils.Locale = undefined;
     CalendarUtils.Now = new Date();
     CalendarUtils.ctorParameters = function () { return [
-        { type: exports["ɵbt"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
+        { type: exports["ɵbx"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
     ]; };
 
     var AgendaEvent = /** @class */ (function () {
@@ -5086,7 +5170,7 @@
             this._renderer = _renderer;
             this._ngZone = _ngZone;
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
             this.viewTypes = CalendarView;
             this.scrollbarWidth = 15;
             this.view = CalendarView.WeekSelectView;
@@ -5262,7 +5346,7 @@
                 },] }
     ];
     AgendaHeaderComponent.ctorParameters = function () { return [
-        { type: exports["ɵbt"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
+        { type: exports["ɵbx"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
         { type: i0.NgZone },
@@ -5362,7 +5446,7 @@
         { type: i0.Directive }
     ];
     AgendaBaseViewComponent.ctorParameters = function () { return [
-        { type: exports["ɵbt"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
+        { type: exports["ɵbx"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
         { type: IconCacheService }
     ]; };
     AgendaBaseViewComponent.propDecorators = {
@@ -5478,7 +5562,7 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.view = CalendarView.WeekSelectView;
             _this.week = NULL_WEEK;
-            _this.icons = exports["ɵbn"];
+            _this.icons = exports["ɵbr"];
             return _this;
         }
         AgendaWeekSelectViewComponent.prototype.prepareViewData = function () {
@@ -5723,7 +5807,7 @@
             this._elementRef = _elementRef;
             this._renderer = _renderer;
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
             this.event = NULL_AGENDA_EVENT;
             this.eventChecked = new i0.EventEmitter();
         }
@@ -5892,7 +5976,7 @@
     var AgendaSelectEventComponent = /** @class */ (function () {
         function AgendaSelectEventComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbn"];
+            this.icons = exports["ɵbr"];
             this.event = NULL_AGENDA_EVENT;
             this.eventChecked = new i0.EventEmitter();
         }
@@ -5966,8 +6050,6 @@
      * Generated bundle index. Do not edit.
      */
 
-    exports.CoCircularGaugeComponent = CoCircularGaugeComponent;
-    exports.CoCircularGaugeModule = CoCircularGaugeModule;
     exports.CoLinearGaugeComponent = CoLinearGaugeComponent;
     exports.CoLinearGaugeModule = CoLinearGaugeModule;
     exports.DatePlanningComponent = DatePlanningComponent;
@@ -5989,43 +6071,47 @@
     exports.sendMethodsWithIcon = sendMethodsWithIcon;
     exports["ɵa"] = SignatureComponent;
     exports["ɵb"] = SignaturesComponent;
-    exports["ɵba"] = StockTabComponent;
-    exports["ɵbb"] = OrderTabComponent;
-    exports["ɵbc"] = StockTabsComponent;
-    exports["ɵbd"] = StockHistoryTabsComponent;
-    exports["ɵbe"] = OrderStockTabComponent;
-    exports["ɵbf"] = StockLocationComponent;
-    exports["ɵbg"] = StockHistoryComponent;
-    exports["ɵbh"] = OrderSupplyStockHistoryComponent;
-    exports["ɵbi"] = OrderCommissionStockHistoryComponent;
-    exports["ɵbj"] = OrderStockHistoryComponent;
-    exports["ɵbk"] = AllocationStockHistoryComponent;
-    exports["ɵbl"] = LocalizePipe;
-    exports["ɵbm"] = SendMethod;
-    exports["ɵbo"] = CalendarAllYearsComponent;
-    exports["ɵbp"] = CalendarAllMonthsComponent;
-    exports["ɵbq"] = CalendarHeaderComponent;
-    exports["ɵbr"] = CalendarComponent;
-    exports["ɵbs"] = CalendarViewComponent;
-    exports["ɵbu"] = AgendaHeaderComponent;
-    exports["ɵbv"] = AgendaViewComponent;
-    exports["ɵbw"] = AgendaMonthViewComponent;
-    exports["ɵbx"] = AgendaBaseViewComponent;
-    exports["ɵby"] = AgendaDayViewComponent;
-    exports["ɵbz"] = AgendaWeekViewComponent;
+    exports["ɵba"] = StockInformationComponent;
+    exports["ɵbb"] = StockInformationGridComponent;
+    exports["ɵbc"] = StockTransferComponent;
+    exports["ɵbd"] = StockChangeAmountComponent;
+    exports["ɵbe"] = StockTabComponent;
+    exports["ɵbf"] = OrderTabComponent;
+    exports["ɵbg"] = StockTabsComponent;
+    exports["ɵbh"] = StockHistoryTabsComponent;
+    exports["ɵbi"] = OrderStockTabComponent;
+    exports["ɵbj"] = StockLocationComponent;
+    exports["ɵbk"] = StockHistoryComponent;
+    exports["ɵbl"] = OrderSupplyStockHistoryComponent;
+    exports["ɵbm"] = OrderCommissionStockHistoryComponent;
+    exports["ɵbn"] = OrderStockHistoryComponent;
+    exports["ɵbo"] = AllocationStockHistoryComponent;
+    exports["ɵbp"] = StockPrognoseComponent;
+    exports["ɵbq"] = SendMethod;
+    exports["ɵbs"] = CalendarAllYearsComponent;
+    exports["ɵbt"] = CalendarAllMonthsComponent;
+    exports["ɵbu"] = CalendarHeaderComponent;
+    exports["ɵbv"] = CalendarComponent;
+    exports["ɵbw"] = CalendarViewComponent;
+    exports["ɵby"] = AgendaHeaderComponent;
+    exports["ɵbz"] = AgendaViewComponent;
     exports["ɵc"] = StockService;
-    exports["ɵca"] = AgendaWeekSelectViewComponent;
-    exports["ɵcb"] = AgendaHourViewComponent;
-    exports["ɵcc"] = AgendaHourCellComponent;
-    exports["ɵcd"] = AgendaHourViewLabelsComponent;
-    exports["ɵce"] = AgendaHalfHourCellComponent;
-    exports["ɵcf"] = AgendaEventsComponent;
-    exports["ɵcg"] = AgendaEventComponent;
-    exports["ɵch"] = ViewSelectComponent;
-    exports["ɵci"] = AgendaSelectEventComponent;
-    exports["ɵcj"] = MASTER_PIPES;
-    exports["ɵck"] = ArrayNumberPipe;
-    exports["ɵcl"] = UCfirstPipe;
+    exports["ɵca"] = AgendaMonthViewComponent;
+    exports["ɵcb"] = AgendaBaseViewComponent;
+    exports["ɵcc"] = AgendaDayViewComponent;
+    exports["ɵcd"] = AgendaWeekViewComponent;
+    exports["ɵce"] = AgendaWeekSelectViewComponent;
+    exports["ɵcf"] = AgendaHourViewComponent;
+    exports["ɵcg"] = AgendaHourCellComponent;
+    exports["ɵch"] = AgendaHourViewLabelsComponent;
+    exports["ɵci"] = AgendaHalfHourCellComponent;
+    exports["ɵcj"] = AgendaEventsComponent;
+    exports["ɵck"] = AgendaEventComponent;
+    exports["ɵcl"] = ViewSelectComponent;
+    exports["ɵcm"] = AgendaSelectEventComponent;
+    exports["ɵcn"] = MASTER_PIPES;
+    exports["ɵco"] = ArrayNumberPipe;
+    exports["ɵcp"] = UCfirstPipe;
     exports["ɵd"] = SharedConnectorService;
     exports["ɵe"] = OptionsService;
     exports["ɵf"] = DictionaryService;
@@ -6035,20 +6121,20 @@
     exports["ɵj"] = SendMethodEmailModule;
     exports["ɵk"] = LayoutSelectionModule;
     exports["ɵl"] = LayoutSelectionComponent;
-    exports["ɵm"] = SendMethodEmailComponent;
-    exports["ɵn"] = SendMethodPrinterModule;
-    exports["ɵo"] = PrinterSelectionModule;
-    exports["ɵp"] = PrinterSelectionComponent;
-    exports["ɵq"] = SendMethodPrinterComponent;
-    exports["ɵr"] = TabBarModule;
-    exports["ɵs"] = TabBarComponent;
-    exports["ɵt"] = StatusbarPopupComponent;
-    exports["ɵu"] = StockStatusbarModule;
-    exports["ɵv"] = StockStatusbarComponent;
-    exports["ɵw"] = StockInformationComponent;
-    exports["ɵx"] = StockInformationGridComponent;
-    exports["ɵy"] = StockTransferComponent;
-    exports["ɵz"] = StockChangeAmountComponent;
+    exports["ɵm"] = SignatureButtonModule;
+    exports["ɵn"] = SignatureButtonComponent;
+    exports["ɵo"] = SendMethodEmailComponent;
+    exports["ɵp"] = SendMethodPrinterModule;
+    exports["ɵq"] = PrinterSelectionModule;
+    exports["ɵr"] = PrinterSelectionComponent;
+    exports["ɵs"] = SendMethodPrinterComponent;
+    exports["ɵt"] = TabBarModule;
+    exports["ɵu"] = TabBarComponent;
+    exports["ɵv"] = StatusbarPopupComponent;
+    exports["ɵw"] = StockStatusbarModule;
+    exports["ɵx"] = StockStatusbarComponent;
+    exports["ɵy"] = LocalizationModule;
+    exports["ɵz"] = LocalizePipe;
 
     Object.defineProperty(exports, '__esModule', { value: true });