@colijnit/sharedcomponents 1.0.39 → 1.0.41

package/bundles/colijnit-sharedcomponents.umd.js

@@ -730,13 +730,13 @@
                 },] }
     ];
 
-    exports["ɵbo"] = void 0;
+    exports["ɵbr"] = void 0;
     (function (LanguageCode) {
         LanguageCode["Dutch"] = "nl-NL";
         LanguageCode["English"] = "en-GB";
         LanguageCode["German"] = "de-DE";
         LanguageCode["French"] = "fr-FR";
-    })(exports["ɵbo"] || (exports["ɵbo"] = {}));
+    })(exports["ɵbr"] || (exports["ɵbr"] = {}));
 
     // 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["ɵbo"].Dutch;
+                    this._language = language || exports["ɵbr"].Dutch;
                     this._loadDictionary();
                     return [2 /*return*/];
                 });
@@ -883,7 +883,7 @@
                 return key || "";
             }
             if (this.language === undefined) {
-                this._language = exports["ɵbo"].Dutch;
+                this._language = exports["ɵbr"].Dutch;
                 this._loadDictionary();
             }
             var text = this._dictionaries.get(this.language)[key];
@@ -1109,6 +1109,25 @@
                 });
             });
         };
+        SharedConnectorService.prototype.getArtStockStatus = function (goodId, branchNo, requestedAmount, warehouseId) {
+            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.getArtStockStatus(goodId, branchNo, requestedAmount, warehouseId).then(function (result) {
+                                if (result.validationResult && result.validationResult.success) {
+                                    if (result.resultObject) {
+                                        resolve(result.resultObject);
+                                    }
+                                }
+                                else {
+                                    reject(result.validationMessagesAsString);
+                                }
+                            });
+                        })];
+                });
+            });
+        };
         SharedConnectorService.prototype.getStockManagementWarehouses = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
@@ -1386,6 +1405,16 @@
                 });
             });
         };
+        StockService.prototype.getArtStockStatus = function (goodId, branchNo, requestedAmount, warehouseId) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._sharedService.getArtStockStatus(goodId, branchNo, requestedAmount, warehouseId)];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
         // public async getStockStickerTemplates(data: StockStickersPrintLayouts): Promise<StockStickersPrintLayouts[]> {
         //   return await this._sharedService.getStockStickerTemplates(data);
         // }
@@ -1486,6 +1515,10 @@
         StockComponent.prototype.ngOnDestroy = function () {
             this._subscriptions.forEach(function (subscription) { return subscription.unsubscribe(); });
         };
+        StockComponent.prototype.ngOnInit = function () {
+            this.getArtStockStatus();
+            this.getStockManagementWarehouses();
+        };
         StockComponent.prototype.handleStockTransferClick = function (event) {
             this.stockTransferArticleDetails = event;
             this.showStockTransfer = !this.showStockTransfer;
@@ -1521,6 +1554,27 @@
                 });
             });
         };
+        StockComponent.prototype.getArtStockStatus = function () {
+            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.getArtStockStatus(this.articleExtended.goodId)];
+                        case 1:
+                            _a.articleStockState = _b.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        StockComponent.prototype.getStockManagementWarehouses = function () {
+            var _this = this;
+            this.stockService.getStockManagementWarehouses().then(function (warehouses) {
+                _this.warehouses = warehouses;
+            });
+        };
         StockComponent.prototype._handleSettingsLoaded = function (loaded) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
@@ -1562,7 +1616,7 @@
     StockComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock",
-                    template: "\n      <div class=\"stock-info-container\">\n        <co-stock-information [article]=\"articleExtended\"\n                              [articleStock]=\"\"\n                              [allAvailableStockInformation]=\"allAvailableStock\"\n                              [allTechnicalStockInformation]=\"allTechnicalStock\"\n        >\n        </co-stock-information>\n        <hr>\n        <co-stock-tabs [stockInformation]=\"stockInformation\"\n                       [article]=\"articleExtended\"\n                       (transferIconClicked)=\"handleStockTransferClick($event)\"\n                       (sendMethodDialogClicked)=\"handleSendMethodClick($event)\"\n        ></co-stock-tabs>\n\n        <co-dialog *ngIf=\"showStockTransfer\">\n          <co-stock-transfer (handleClick)=\"backToStock()\"\n                             class=\"stock-transfer-dialog\"\n                             [article]=\"stockTransferArticle\"\n                             [articleToTransfer]=\"stockTransferArticleDetails\"\n                             (handleStickerClicked)=\"handleStickerClicked.emit($event)\"\n                             [articleWarehouse]=\"articleWarehouse\"\n                             [allWarehouses]=\"allWarehouses\"\n          >\n          </co-stock-transfer>\n        </co-dialog>\n\n        <co-send-method-dialog *ngIf=\"showSendMethodDialog\">\n\n        </co-send-method-dialog>\n      </div>\n  ",
+                    template: "\n      <div class=\"stock-info-container\">\n        <co-stock-information [article]=\"articleExtended\"\n                              [articleStockState]=\"articleStockState\"\n                              [allAvailableStockInformation]=\"allAvailableStock\"\n                              [allTechnicalStockInformation]=\"allTechnicalStock\"\n        >\n        </co-stock-information>\n        <hr>\n        <co-stock-tabs [stockInformation]=\"stockInformation\"\n                       [article]=\"articleExtended\"\n                       (transferIconClicked)=\"handleStockTransferClick($event)\"\n                       (sendMethodDialogClicked)=\"handleSendMethodClick($event)\"\n                       [warehouses]=\"warehouses\"\n        ></co-stock-tabs>\n\n        <co-dialog *ngIf=\"showStockTransfer\">\n          <co-stock-transfer (handleClick)=\"backToStock()\"\n                             class=\"stock-transfer-dialog\"\n                             [article]=\"stockTransferArticle\"\n                             [articleToTransfer]=\"stockTransferArticleDetails\"\n                             (handleStickerClicked)=\"handleStickerClicked.emit($event)\"\n                             [articleWarehouse]=\"articleWarehouse\"\n                             [allWarehouses]=\"allWarehouses\"\n          >\n          </co-stock-transfer>\n        </co-dialog>\n\n        <co-send-method-dialog *ngIf=\"showSendMethodDialog\">\n\n        </co-send-method-dialog>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -1591,14 +1645,14 @@
     StockInformationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-information",
-                    template: "\n      <div class=\"stock-info\" *ngIf=\"article\">\n        <div class=\"stock-info-row\" >\n          <div class=\"stock-info-row-image\">\n            <div class=\"stock-image\">\n              <co-image class=\"stock-image\" [source]=\"article.imageData\"></co-image>\n            </div>\n          </div>\n          <div class=\"stock-good-info\">\n            <div>\n              <span [textContent]=\"article.description\"></span>\n            </div>\n            <div>\n              <span [textContent]=\"article.articleNumber\"></span>\n            </div>\n          </div>\n        </div>\n        <div class=\"stock-status\">\n          <label [textContent]=\"'STOCK_STATUS'\"></label>\n          <span [textContent]=\"article.stockStatus\"></span>\n        </div>\n        <div class=\"stock-status\">\n          <label [textContent]=\"'AMOUNT_IN_STOCK'\"></label>\n          <span [textContent]=\"allTechnicalStockInformation\"></span>\n        </div>\n        <div class=\"stock-status\">\n          <label [textContent]=\"'AMOUNT_AVAILABLE'\"></label>\n          <span [textContent]=\"allAvailableStockInformation\"></span>\n        </div>\n        <div class=\"stock-status\">\n          <label [textContent]=\"'AMOUNT_LATER_AVAILABLE'\"></label>\n          <span [textContent]=\"\"></span>\n        </div>\n      </div>\n  ",
+                    template: "\n      <div class=\"stock-info\" *ngIf=\"article\">\n        <div class=\"stock-info-row\" >\n          <div class=\"stock-info-row-image\">\n            <div class=\"stock-image\">\n              <co-image class=\"stock-image\" [source]=\"article.imageData\"></co-image>\n            </div>\n          </div>\n          <div class=\"stock-good-info\">\n            <div>\n              <span [textContent]=\"article.description\"></span>\n            </div>\n            <div>\n              <span [textContent]=\"article.articleNumber\"></span>\n            </div>\n          </div>\n        </div>\n        <div class=\"stock-status\">\n          <label [textContent]=\"'STOCK_STATUS'\"></label>\n          <span [textContent]=\"article.stockStatus\"></span>\n          <co-stock-statusbar [value]=\"articleStockState\"></co-stock-statusbar>\n        </div>\n        <div class=\"stock-status\">\n          <label [textContent]=\"'AMOUNT_IN_STOCK'\"></label>\n          <span [textContent]=\"allTechnicalStockInformation\"></span>\n        </div>\n        <div class=\"stock-status\">\n          <label [textContent]=\"'AMOUNT_AVAILABLE'\"></label>\n          <span [textContent]=\"allAvailableStockInformation\"></span>\n        </div>\n        <div class=\"stock-status\">\n          <label [textContent]=\"'AMOUNT_LATER_AVAILABLE'\"></label>\n          <span [textContent]=\"\"></span>\n        </div>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     StockInformationComponent.ctorParameters = function () { return []; };
     StockInformationComponent.propDecorators = {
         article: [{ type: i0.Input }],
-        articleStock: [{ type: i0.Input }],
+        articleStockState: [{ type: i0.Input }],
         allAvailableStockInformation: [{ type: i0.Input }],
         allTechnicalStockInformation: [{ type: i0.Input }]
     };
@@ -1683,7 +1737,7 @@
     ]; };
 
     /** AUTO GENERATED FILE. DO NOT CHANGE.. OR YOU WILL SUFFER THE CONSEQUENCES OF YOUR ACTIONS **/
-    exports["ɵbi"] = void 0;
+    exports["ɵbl"] = void 0;
     (function (Icon) {
         Icon["AngleLeftSolid"] = "angle_left_solid";
         Icon["AngleRightSolid"] = "angle_right_solid";
@@ -1709,13 +1763,13 @@
         Icon["PrintSolid"] = "print_solid";
         Icon["SignatureField"] = "signature_field";
         Icon["Xml"] = "xml";
-    })(exports["ɵbi"] || (exports["ɵbi"] = {}));
+    })(exports["ɵbl"] || (exports["ɵbl"] = {}));
 
     var StockInformationGridComponent = /** @class */ (function () {
         function StockInformationGridComponent(iconCacheService, _stockService) {
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
             this.transferIconClicked = new i0.EventEmitter();
             this.historyClicked = new i0.EventEmitter();
             this.cancelButtonClicked = new i0.EventEmitter();
@@ -2162,24 +2216,23 @@
     }());
 
     var sendMethodsWithIcon = [
-        new SendMethod(sendMethodType_enum.SendMethodType.Fax, "Fax", exports["ɵbi"].PrintRegular),
-        new SendMethod(sendMethodType_enum.SendMethodType.Print, "Print", exports["ɵbi"].PrintSolid),
-        new SendMethod(sendMethodType_enum.SendMethodType.Email, "Email", exports["ɵbi"].AtSolid),
-        new SendMethod(sendMethodType_enum.SendMethodType.Edi, "Edi", exports["ɵbi"].FileExportSolid),
-        new SendMethod(sendMethodType_enum.SendMethodType.EmailTemplate, "Email template", exports["ɵbi"].EnvelopeRegular),
-        new SendMethod(sendMethodType_enum.SendMethodType.Sms, "Sms", exports["ɵbi"].MessageSmsSolid),
-        new SendMethod(sendMethodType_enum.SendMethodType.WebService, "Webservice", exports["ɵbi"].PrintRegular)
+        new SendMethod(sendMethodType_enum.SendMethodType.Fax, "Fax", exports["ɵbl"].PrintRegular),
+        new SendMethod(sendMethodType_enum.SendMethodType.Print, "Print", exports["ɵbl"].PrintSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.Email, "Email", exports["ɵbl"].AtSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.Edi, "Edi", exports["ɵbl"].FileExportSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.EmailTemplate, "Email template", exports["ɵbl"].EnvelopeRegular),
+        new SendMethod(sendMethodType_enum.SendMethodType.Sms, "Sms", exports["ɵbl"].MessageSmsSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.WebService, "Webservice", exports["ɵbl"].PrintRegular)
     ];
     var SendMethodDialogComponent = /** @class */ (function () {
-        function SendMethodDialogComponent(iconCacheService, _optionsService, _dictionary, _changeDetector, _sharedService, _sendMethodService) {
+        function SendMethodDialogComponent(iconCacheService, _changeDetector, _sharedService, _sendMethodService) {
             var _this = this;
             this.iconCacheService = iconCacheService;
-            this._optionsService = _optionsService;
-            this._dictionary = _dictionary;
             this._changeDetector = _changeDetector;
             this._sharedService = _sharedService;
             this._sendMethodService = _sendMethodService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
+            this.printerList = [];
             this.emailLayouts = [];
             this.printLayouts = [];
             this.emailAddresses = [];
@@ -2203,7 +2256,7 @@
             this.showEmailTemplate = true;
             this.showWebservice = true;
             this._subscriptions = [];
-            this._subscriptions.push(this._optionsService.optionsLoaded.subscribe(function (loaded) { return _this._handleSettingsLoaded(loaded); }), 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.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); }));
         }
         SendMethodDialogComponent.prototype.showClass = function () {
             return true;
@@ -2218,7 +2271,7 @@
             if (this.reportingDocumentPdfRequest) {
                 this._sendMethodService.reportingDocumentPdfBaseRequest = this.reportingDocumentPdfRequest;
             }
-            this._selectDefaultSendMethod();
+            this._initDefaultSendMethod();
             this._prepareVisibleMethods();
         };
         SendMethodDialogComponent.prototype.ngOnDestroy = function () {
@@ -2252,21 +2305,28 @@
                 this.navigationItems.nativeElement.scrollLeft = this.webServiceItems.nativeElement.offsetLeft - this.navigationItems.nativeElement.offsetLeft;
             }
         };
-        SendMethodDialogComponent.prototype._selectDefaultSendMethod = function () {
-            var _this = this;
+        SendMethodDialogComponent.prototype._initDefaultSendMethod = function () {
             if (this.defaultSendMethod) {
-                var sendMethod_1 = this.sendMethods.find(function (sm) { return sm.code === _this.defaultSendMethod; });
-                if (sendMethod_1) {
-                    setTimeout(function () {
-                        _this.handleSendMethodClick(sendMethod_1);
-                        _this.startUp = false;
-                    });
-                }
+                this._selectDefaultSendMethod();
             }
             else {
+                if (this.visibleMethods && this.visibleMethods.length === 1) {
+                    this.defaultSendMethod = this.visibleMethods[0];
+                    this._selectDefaultSendMethod();
+                }
                 this.startUp = false;
             }
         };
+        SendMethodDialogComponent.prototype._selectDefaultSendMethod = function () {
+            var _this = this;
+            var sendMethod = this.sendMethods.find(function (sm) { return sm.code === _this.defaultSendMethod; });
+            if (sendMethod) {
+                setTimeout(function () {
+                    _this.handleSendMethodClick(sendMethod);
+                    _this.startUp = false;
+                });
+            }
+        };
         SendMethodDialogComponent.prototype._prepareVisibleMethods = function () {
             var _this = this;
             if (this.visibleMethods && this.visibleMethods.length > 0) {
@@ -2280,49 +2340,12 @@
             this.showSms = this.sendMethods.find(function (sm) { return sm.code === sendMethodType_enum.SendMethodType.Sms; }) !== undefined;
             this.showWebservice = this.sendMethods.find(function (sm) { return sm.code === sendMethodType_enum.SendMethodType.WebService; }) !== undefined;
         };
-        SendMethodDialogComponent.prototype._handleSettingsLoaded = function (loaded) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!loaded) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this._initConnection().then()];
-                        case 1:
-                            _a.sent();
-                            this.upAndLoaded = true;
-                            _a.label = 2;
-                        case 2: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        SendMethodDialogComponent.prototype._initConnection = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            // await this._connector.connect(this._optionsService.options);
-                            if (this._optionsService.options.url) {
-                                this._dictionary.rootUrl = this._optionsService.options.url.replace('/ajaxservice', '');
-                            }
-                            return [4 /*yield*/, this._dictionary.setDictionary(this._optionsService.options.languageCode)];
-                        case 1:
-                            _a.sent();
-                            setTimeout(function () {
-                                _this._changeDetector.detectChanges();
-                            });
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
         return SendMethodDialogComponent;
     }());
     SendMethodDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-send-method-dialog',
-                    template: "\n    <co-dialog id=\"sendOptionsDialog\" [headerTemplate]=\"headerTemplate\" [footerTemplate]=\"footerTemplate\"\n               (closeClick)=\"closeClick.emit($event)\">\n      <ng-template #headerTemplate>\n        <div class=\"co-dialog-header-title\" [textContent]=\"headerTitle\"></div>\n      </ng-template>\n      <div class=\"dialog-content-wrapper\">\n        <div class=\"send-methods-wrapper\">\n          <div class=\"send-button-wrapper\" *ngFor=\"let sendMethod of sendMethods; let index = index\"\n               [class.selected]=\"activeSendMethod ? sendMethod.code === activeSendMethod.code : index === 0\"\n               (click)=\"handleSendMethodClick(sendMethod)\">\n            <co-icon class=\"custom-button-icon\" [iconData]=\"iconCacheService.getIcon(sendMethod.icon)\"></co-icon>\n            <div class=\"custom-button-title\" [textContent]=\"sendMethod.description\"></div>\n          </div>\n        </div>\n        <div #navigationItems class=\"send-method-navigation-wrapper\" [class.smooth-scrolling]=\"!startUp\">\n          <div #faxItems class=\"send-method-navigation-content co-small-scrollbar\">\n\n          </div>\n          <div #printItems class=\"send-method-navigation-content co-small-scrollbar\" *ngIf=\"showPrint\">\n            <co-send-method-printer\n              [layouts]=\"printLayouts\"\n            ></co-send-method-printer>\n          </div>\n          <div #emailItems class=\"send-method-navigation-content co-small-scrollbar\" *ngIf=\"showEmail\">\n            <co-send-method-email\n              [emailAddresses]=\"emailAddresses\"\n              [layouts]=\"emailLayouts\"\n            ></co-send-method-email>\n          </div>\n          <div #ediItems class=\"send-method-navigation-content co-small-scrollbar\" *ngIf=\"showEdi\">\n\n          </div>\n          <div #emailTemplateItems class=\"send-method-navigation-content co-small-scrollbar\" *ngIf=\"showEmailTemplate\">\n\n          </div>\n          <div #smsItems class=\"send-method-navigation-content co-small-scrollbar\" *ngIf=\"showSms\">\n\n          </div>\n          <div #webServiceItems class=\"send-method-navigation-content co-small-scrollbar\" *ngIf=\"showWebservice\">\n\n          </div>\n        </div>\n      </div>\n      <ng-template #footerTemplate>\n        <div class=\"co-dialog-footer-button-wrapper\">\n          <co-button [label]=\"'Ok'\" (click)=\"okClick.emit(activeSendMethod ? activeSendMethod.code : '0')\"></co-button>\n        </div>\n      </ng-template>\n    </co-dialog>\n  ",
+                    template: "\n    <co-dialog id=\"sendOptionsDialog\" [headerTemplate]=\"headerTemplate\" [footerTemplate]=\"footerTemplate\"\n               (closeClick)=\"closeClick.emit($event)\">\n      <ng-template #headerTemplate>\n        <div class=\"co-dialog-header-title\" [textContent]=\"headerTitle\"></div>\n      </ng-template>\n      <div class=\"dialog-content-wrapper\">\n        <div class=\"send-methods-wrapper\">\n          <div class=\"send-button-wrapper\" *ngFor=\"let sendMethod of sendMethods; let index = index\"\n               [class.selected]=\"activeSendMethod ? sendMethod.code === activeSendMethod.code : index === 0\"\n               (click)=\"handleSendMethodClick(sendMethod)\">\n            <co-icon class=\"custom-button-icon\" [iconData]=\"iconCacheService.getIcon(sendMethod.icon)\"></co-icon>\n            <div class=\"custom-button-title\" [textContent]=\"sendMethod.description\"></div>\n          </div>\n        </div>\n        <div #navigationItems class=\"send-method-navigation-wrapper\" [class.smooth-scrolling]=\"!startUp\">\n          <div #faxItems class=\"send-method-navigation-content co-small-scrollbar\">\n\n          </div>\n          <div #printItems class=\"send-method-navigation-content co-small-scrollbar\" *ngIf=\"showPrint\">\n            <co-send-method-printer\n              [printerList]=\"printerList\"\n              [layouts]=\"printLayouts\"\n            ></co-send-method-printer>\n          </div>\n          <div #emailItems class=\"send-method-navigation-content co-small-scrollbar\" *ngIf=\"showEmail\">\n            <co-send-method-email\n              [emailAddresses]=\"emailAddresses\"\n              [layouts]=\"emailLayouts\"\n            ></co-send-method-email>\n          </div>\n          <div #ediItems class=\"send-method-navigation-content co-small-scrollbar\" *ngIf=\"showEdi\">\n\n          </div>\n          <div #emailTemplateItems class=\"send-method-navigation-content co-small-scrollbar\" *ngIf=\"showEmailTemplate\">\n\n          </div>\n          <div #smsItems class=\"send-method-navigation-content co-small-scrollbar\" *ngIf=\"showSms\">\n\n          </div>\n          <div #webServiceItems class=\"send-method-navigation-content co-small-scrollbar\" *ngIf=\"showWebservice\">\n\n          </div>\n        </div>\n      </div>\n      <ng-template #footerTemplate>\n        <div class=\"co-dialog-footer-button-wrapper\">\n          <co-button [label]=\"'Ok'\" (click)=\"okClick.emit(activeSendMethod ? activeSendMethod.code : '0')\"></co-button>\n        </div>\n      </ng-template>\n    </co-dialog>\n  ",
                     encapsulation: i0.ViewEncapsulation.None,
                     animations: [
                         animations.trigger('slideInOut', [
@@ -2335,8 +2358,6 @@
     ];
     SendMethodDialogComponent.ctorParameters = function () { return [
         { type: IconCacheService },
-        { type: OptionsService },
-        { type: DictionaryService },
         { type: i0.ChangeDetectorRef },
         { type: SharedService },
         { type: SendMethodService }
@@ -2350,6 +2371,7 @@
         emailTemplateItems: [{ type: i0.ViewChild, args: ['emailTemplateItems', { read: i0.ElementRef },] }],
         smsItems: [{ type: i0.ViewChild, args: ['smsItems', { read: i0.ElementRef },] }],
         webServiceItems: [{ type: i0.ViewChild, args: ['webServiceItems', { read: i0.ElementRef },] }],
+        printerList: [{ type: i0.Input }],
         reportingDocumentPrintRequest: [{ type: i0.Input }],
         reportingDocumentEmailRequest: [{ type: i0.Input }],
         reportingDocumentPdfRequest: [{ type: i0.Input }],
@@ -2513,6 +2535,7 @@
     var SendMethodPrinterComponent = /** @class */ (function () {
         function SendMethodPrinterComponent(sendMethodService) {
             this.sendMethodService = sendMethodService;
+            this.printerList = [];
             this.layouts = [];
         }
         SendMethodPrinterComponent.prototype.showClass = function () {
@@ -2531,7 +2554,7 @@
     SendMethodPrinterComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-send-method-printer',
-                    template: "\n    <co-printer-selection></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    <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  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -2539,6 +2562,7 @@
         { type: SendMethodService }
     ]; };
     SendMethodPrinterComponent.propDecorators = {
+        printerList: [{ type: i0.Input }],
         layouts: [{ type: i0.Input }],
         showClass: [{ type: i0.HostBinding, args: ['class.co-send-method-printer',] }]
     };
@@ -2548,7 +2572,7 @@
             this.sendMethodService = sendMethodService;
             this.iconService = iconService;
             this._service = _service;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
             this.printers = [];
             this.showPrinterList = false;
         }
@@ -2556,17 +2580,13 @@
             return true;
         };
         PrinterSelectionComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this._service.getAllPrinters().then(function (printers) {
-                _this.printers = printers;
-                if (!_this.sendMethodService.reportingDocumentPrintBaseRequest.printerName) {
-                    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);
-                    }
+            if (!this.sendMethodService.reportingDocumentPrintBaseRequest.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);
                 }
-            });
+            }
         };
         PrinterSelectionComponent.prototype.handlePrinterClicked = function (printer) {
             this.sendMethodService.reportingDocumentPrintBaseRequest.printerName = printer.name;
@@ -2596,6 +2616,7 @@
         { type: SharedService }
     ]; };
     PrinterSelectionComponent.propDecorators = {
+        printers: [{ type: i0.Input }],
         showClass: [{ type: i0.HostBinding, args: ['class.co-printer-selection',] }]
     };
 
@@ -2750,7 +2771,7 @@
         function OrderTabComponent(iconCacheService, _stockService) {
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
             this.locationClicked = new i0.EventEmitter();
             this.transferIconClicked = new i0.EventEmitter();
             this.sendMethodDialogClicked = new i0.EventEmitter();
@@ -2785,18 +2806,18 @@
     var StockTabsComponent = /** @class */ (function () {
         function StockTabsComponent(_stockService) {
             this._stockService = _stockService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
             this.transferIconClicked = new i0.EventEmitter();
             this.sendMethodDialogClicked = new i0.EventEmitter();
             this.tabs = [
                 { title: 'Overzicht', active: true },
-                { title: 'Voorraaddetails', active: false, clickHandler: this.getStockManagementWarehouses.bind(this) },
+                { title: 'Voorraaddetails', active: false },
                 { title: 'In order', active: false, clickHandler: this.getInOrderData.bind(this) },
                 { title: 'In bestelling', active: false, clickHandler: this.getOrderData.bind(this) },
                 { title: 'Historie', active: false },
             ];
             this.historyTabs = [
-                { title: 'Voorraad', active: false, clickHandler: this.getStockHistory.bind(this) },
+                { title: 'Voorraad', active: true, clickHandler: this.getStockHistory.bind(this) },
                 { title: 'Order voorraad', active: false, clickHandler: this.getOrderSupplyStockHistory.bind(this) },
                 { title: 'Order commissie', active: false, clickHandler: this.getOrderCommissionStockHistory.bind(this) },
                 { title: 'Bestelling', active: false, clickHandler: this.getOrderStockHistory.bind(this) },
@@ -2928,12 +2949,6 @@
                 });
             });
         };
-        StockTabsComponent.prototype.getStockManagementWarehouses = function () {
-            var _this = this;
-            this._stockService.getStockManagementWarehouses().then(function (warehouses) {
-                _this.warehouses = warehouses;
-            });
-        };
         StockTabsComponent.prototype.getOrderData = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var orderData, _a;
@@ -2969,13 +2984,14 @@
     StockTabsComponent.propDecorators = {
         stockInformation: [{ type: i0.Input }],
         article: [{ type: i0.Input }],
+        warehouses: [{ type: i0.Input }],
         transferIconClicked: [{ type: i0.Output }],
         sendMethodDialogClicked: [{ type: i0.Output }]
     };
 
     var StockHistoryTabsComponent = /** @class */ (function () {
         function StockHistoryTabsComponent() {
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
             this.selectedTab = 0;
         }
         return StockHistoryTabsComponent;
@@ -2996,7 +3012,7 @@
         function OrderStockTabComponent(iconCacheService, _stockService) {
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
         }
         return OrderStockTabComponent;
     }());
@@ -3020,10 +3036,9 @@
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
             this._changeDetector = _changeDetector;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
             this.transferIconClicked = new i0.EventEmitter();
             this.sendMethodDialogClicked = new i0.EventEmitter();
-            this.selectedWarehouse = 0;
             this.dataWareHouseFields = { text: "warehouseDescription", value: "warehouseNo" };
             this.dataLocationFields = { text: "locationNo", value: "locationNo" };
             this.articleDetailsInformation = new articleStockManagement.ArticleStockManagement();
@@ -3054,6 +3069,9 @@
                 _this.stockLocations = locations;
             });
         };
+        StockLocationComponent.prototype.locationChanged = function (event) {
+            this.selectedLocation = event;
+        };
         StockLocationComponent.prototype.amountInStockChanged = function (data) {
             this.selectedArticleDetailsData.amountInStock = data;
         };
@@ -3063,12 +3081,36 @@
         StockLocationComponent.prototype.handleStockTransferClick = function (event) {
             this.transferIconClicked.emit(event);
         };
+        StockLocationComponent.prototype.onOkClickSendLocations = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this.selectedArticleDetailsData.selected = true;
+                            this.selectedArticleDetailsData.goodId = this.article.goodId;
+                            this.selectedArticleDetailsData.entryDate = new Date();
+                            this.selectedArticleDetailsData.warehouseNo = this.selectedWarehouse;
+                            this.selectedArticleDetailsData.locationNo = this.selectedLocation;
+                            return [4 /*yield*/, this._stockService.updateArticleDetails(this.selectedArticleDetailsData)];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, this._stockService.getArticleDetails(this.articleDetailsInformation).then(function (details) {
+                                    _this.articleDetails = details;
+                                })];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         return StockLocationComponent;
     }());
     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'\"\n                                     (modelChange)=\"onSelectWarehouse($event)\"\n                                     [required]=\"true\"\n                  ></co-drop-down-list>\n              </div>\n          </div>\n\n          <co-simple-grid [data]=\"articleDetails\"\n                          class=\"simple-grid\"\n                          [rowsPerPage]=\"20\"\n                          [showAdd]=\"true\"\n                          [showDelete]=\"true\"\n                          [inlineEdit]=\"true\"\n                          (dblClickRow)=\"lockSelectedRow($event)\"\n                          [rightToolbar]=\"true\"\n                          [showToolbar]=\"true\"\n          >\n              <co-simple-grid-column [headerText]=\"'LOCATION'\" [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'\"\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'\" [field]=\"'batchNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.batchNo\"\n                                     [placeholder]=\"'BATCH'\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'SERIAL_NO'\" [field]=\"'serialNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.serialNo\"\n                                     [placeholder]=\"'SERIAL_NO'\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'STOCK'\" [field]=\"'amountInStock'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.amountInStock\"\n                                     [label]=\"'STOCK'\"\n                                     (modelChange)=\"amountInStockChanged($event)\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'ALLOCATED'\" [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'\" [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'\" [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'\" [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'\" [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'\" [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'\" [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          <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'\"\n                                     (modelChange)=\"onSelectWarehouse($event)\"\n                                     [required]=\"true\"\n                  ></co-drop-down-list>\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                          [rightToolbar]=\"true\"\n                          [showToolbar]=\"true\"\n                          (keydown.enter)=\"onOkClickSendLocations()\"\n          >\n              <co-simple-grid-column [headerText]=\"'LOCATION'\" [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'\"\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'\" [field]=\"'batchNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.batchNo\"\n                                     [placeholder]=\"'BATCH'\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'SERIAL_NO'\" [field]=\"'serialNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.serialNo\"\n                                     [placeholder]=\"'SERIAL_NO'\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'STOCK'\" [field]=\"'amountInStock'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.amountInStock\"\n                                     [label]=\"'STOCK'\"\n                                     (modelChange)=\"amountInStockChanged($event)\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'ALLOCATED'\" [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'\" [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'\" [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'\" [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'\" [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'\" [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'\" [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
                 },] }
     ];
@@ -3090,7 +3132,7 @@
         function StockHistoryComponent(iconCacheService, _stockService) {
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
         }
         return StockHistoryComponent;
     }());
@@ -3167,7 +3209,7 @@
     var OrderSupplyStockHistoryComponent = /** @class */ (function () {
         function OrderSupplyStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
         }
         return OrderSupplyStockHistoryComponent;
     }());
@@ -3188,7 +3230,7 @@
     var OrderCommissionStockHistoryComponent = /** @class */ (function () {
         function OrderCommissionStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
         }
         return OrderCommissionStockHistoryComponent;
     }());
@@ -3209,7 +3251,7 @@
     var OrderStockHistoryComponent = /** @class */ (function () {
         function OrderStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
         }
         return OrderStockHistoryComponent;
     }());
@@ -3230,7 +3272,7 @@
     var AllocationStockHistoryComponent = /** @class */ (function () {
         function AllocationStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
         }
         return AllocationStockHistoryComponent;
     }());
@@ -3248,20 +3290,404 @@
         allocationStockHistory: [{ type: i0.Input }]
     };
 
-    var StockModule = /** @class */ (function () {
-        function StockModule() {
+    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 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
+                },
+            ];
         }
-        return StockModule;
+        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;
     }());
-    StockModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        corecomponents_v12.InputComboBoxModule,
-                        corecomponents_v12.CoGridModule,
-                        corecomponents_v12.ButtonModule,
-                        common.CommonModule,
-                        corecomponents_v12.InputRadioButtonModule,
-                        corecomponents_v12.DropDownModule,
+    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
+                    ]
+                },] }
+    ];
+
+    var CoLinearGaugeComponent = /** @class */ (function () {
+        function CoLinearGaugeComponent() {
+            this.color = GaugeColor.Low;
+        }
+        Object.defineProperty(CoLinearGaugeComponent.prototype, "value", {
+            get: function () {
+                return this._value;
+            },
+            set: function (value) {
+                this._value = value;
+                this._setColor();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CoLinearGaugeComponent.prototype.showClass = function () {
+            return true;
+        };
+        CoLinearGaugeComponent.prototype.getStyle = function () {
+            return "linear-gradient(90deg, " + this.color + " 0 " + this.value + "%, white " + this.value + "% 100%";
+        };
+        CoLinearGaugeComponent.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 CoLinearGaugeComponent;
+    }());
+    CoLinearGaugeComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-linear-gauge",
+                    template: "\n    <div class=\"linear-gauge\"\n         [style.background]=\"getStyle()\"\n         [style.border-color]=\"color\"\n         [textContent]=\"count ? count : ''\"\n    ></div>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    CoLinearGaugeComponent.propDecorators = {
+        value: [{ type: i0.Input }],
+        count: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-linear-gauge",] }]
+    };
+
+    var CoLinearGaugeModule = /** @class */ (function () {
+        function CoLinearGaugeModule() {
+        }
+        return CoLinearGaugeModule;
+    }());
+    CoLinearGaugeModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                    ],
+                    declarations: [
+                        CoLinearGaugeComponent
+                    ],
+                    exports: [
+                        CoLinearGaugeComponent
+                    ]
+                },] }
+    ];
+
+    var StatusbarPopupComponent = /** @class */ (function () {
+        function StatusbarPopupComponent() {
+            this.statusbarData = [];
+            this.showClass = true;
+        }
+        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    ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    StatusbarPopupComponent.propDecorators = {
+        statusbarData: [{ type: i0.Input }],
+        parentForOverlay: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-statusbar-popup",] }]
+    };
+
+    var StatusbarComponent = /** @class */ (function () {
+        function StatusbarComponent(_elementRef, _overlayService) {
+            this._elementRef = _elementRef;
+            this._overlayService = _overlayService;
+            this.statusbarClick = new i0.EventEmitter();
+            this.popupShowing = false;
+        }
+        Object.defineProperty(StatusbarComponent.prototype, "statusbarData", {
+            get: function () {
+                return this._statusbarData;
+            },
+            set: function (value) {
+                this._statusbarData = value;
+                this.adjustTooHighPercentages();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        StatusbarComponent.prototype.showClass = function () {
+            return true;
+        };
+        StatusbarComponent.prototype.handleClick = function (event) {
+            this.handleShowPopup(event);
+        };
+        StatusbarComponent.prototype.handleShowPopup = function (event) {
+            if (this.popupShowing) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this._overlayService.createComponent(StatusbarPopupComponent, { parentForOverlay: this._elementRef, statusbarData: this.statusbarData });
+            this.popupShowing = true;
+        };
+        StatusbarComponent.prototype.handleHidePopup = function () {
+            this._overlayService.removeComponent();
+            this.popupShowing = false;
+        };
+        StatusbarComponent.prototype.adjustTooHighPercentages = function () {
+            this._statusbarData.forEach(function (data) { return data.percentage > 100 ? data.percentage = 100 : false; });
+        };
+        return StatusbarComponent;
+    }());
+    StatusbarComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-statusbar",
+                    template: "\n    <div class=\"co-statusbar-wrapper\" *ngIf=\"statusbarData\" [clickOutside]=\"popupShowing\"\n         (clickOutside)=\"handleHidePopup()\">\n      <div class=\"statuses\">\n        <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status\">\n          <co-linear-gauge [class.focused-status]=\"focusedStatusIndex !== undefined && focusedStatusIndex === index\"\n                           [value]=\"data.percentage\" [count]=\"data.count ? data.count : undefined\"></co-linear-gauge>\n        </div>\n      </div>\n    </div>\n  ",
+                    providers: [
+                        corecomponents_v12.OverlayService
+                    ],
+                    animations: [
+                        animations.trigger("showHidePopup", [
+                            animations.state("void", animations.style({ opacity: 0 })),
+                            animations.state("*", animations.style({ opacity: 1 })),
+                            animations.transition("void <=> *", animations.animate("250ms ease-in-out")),
+                        ])
+                    ],
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    StatusbarComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: corecomponents_v12.OverlayService }
+    ]; };
+    StatusbarComponent.propDecorators = {
+        statusbarData: [{ type: i0.Input }],
+        focusedStatusIndex: [{ type: i0.Input }],
+        statusbarClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-statusbar",] }],
+        handleClick: [{ type: i0.HostListener, args: ["click", ["$event"],] }]
+    };
+
+    var StatusbarModule = /** @class */ (function () {
+        function StatusbarModule() {
+        }
+        return StatusbarModule;
+    }());
+    StatusbarModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        CoCircularGaugeModule,
+                        CoLinearGaugeModule,
+                        corecomponents_v12.ClickoutsideModule,
+                        corecomponents_v12.OverlayModule
+                    ],
+                    declarations: [
+                        StatusbarComponent,
+                        StatusbarPopupComponent
+                    ],
+                    exports: [
+                        StatusbarComponent,
+                        StatusbarPopupComponent
+                    ]
+                },] }
+    ];
+
+    var StockStatusbarComponent = /** @class */ (function () {
+        function StockStatusbarComponent() {
+        }
+        return StockStatusbarComponent;
+    }());
+    StockStatusbarComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-stock-statusbar",
+                    template: "\n    <div class=\"status-bar\">\n      <div class=\"status-bar-block\" [ngClass]=\"{'red': value === 0, 'orange': value === 1, 'green': value === 2}\"></div>\n      <div class=\"status-bar-block\" [ngClass]=\"{'orange': value === 1, 'green': value === 2}\"></div>\n      <div class=\"status-bar-block\" [ngClass]=\"{'green': value === 2}\"></div>\n    </div>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    StockStatusbarComponent.ctorParameters = function () { return []; };
+    StockStatusbarComponent.propDecorators = {
+        value: [{ type: i0.Input }]
+    };
+
+    var StockStatusbarModule = /** @class */ (function () {
+        function StockStatusbarModule() {
+        }
+        return StockStatusbarModule;
+    }());
+    StockStatusbarModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                    ],
+                    declarations: [
+                        StockStatusbarComponent
+                    ],
+                    exports: [
+                        StockStatusbarComponent
+                    ]
+                },] }
+    ];
+
+    var StockModule = /** @class */ (function () {
+        function StockModule() {
+        }
+        return StockModule;
+    }());
+    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,
@@ -3271,7 +3697,9 @@
                         corecomponents_v12.CoDialogWizardModule,
                         corecomponents_v12.InputTextareaModule,
                         TabBarModule,
-                        corecomponents_v12.CoDialogModule
+                        corecomponents_v12.CoDialogModule,
+                        StatusbarModule,
+                        StockStatusbarModule
                     ],
                     declarations: [
                         StockComponent,
@@ -3335,7 +3763,7 @@
     var KeyPadComponent = /** @class */ (function () {
         function KeyPadComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
             this.showValue = true;
             this.emitModelChangeOnEnter = true;
             this.modelChange = new i0.EventEmitter();
@@ -3526,7 +3954,7 @@
     var LayoutSwitcherComponent = /** @class */ (function () {
         function LayoutSwitcherComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icon = exports["ɵbi"];
+            this.icon = exports["ɵbl"];
             this.layoutItems = [];
             this.layoutSwitchEmit = new i0.EventEmitter();
             this.showMaskSidebar = false;
@@ -3605,325 +4033,6 @@
                 },] }
     ];
 
-    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 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
-                    ]
-                },] }
-    ];
-
-    var CoLinearGaugeComponent = /** @class */ (function () {
-        function CoLinearGaugeComponent() {
-            this.color = GaugeColor.Low;
-        }
-        Object.defineProperty(CoLinearGaugeComponent.prototype, "value", {
-            get: function () {
-                return this._value;
-            },
-            set: function (value) {
-                this._value = value;
-                this._setColor();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        CoLinearGaugeComponent.prototype.showClass = function () {
-            return true;
-        };
-        CoLinearGaugeComponent.prototype.getStyle = function () {
-            return "linear-gradient(90deg, " + this.color + " 0 " + this.value + "%, white " + this.value + "% 100%";
-        };
-        CoLinearGaugeComponent.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 CoLinearGaugeComponent;
-    }());
-    CoLinearGaugeComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: "co-linear-gauge",
-                    template: "\n    <div class=\"linear-gauge\"\n         [style.background]=\"getStyle()\"\n         [style.border-color]=\"color\"\n         [textContent]=\"count ? count : ''\"\n    ></div>\n  ",
-                    encapsulation: i0.ViewEncapsulation.None
-                },] }
-    ];
-    CoLinearGaugeComponent.propDecorators = {
-        value: [{ type: i0.Input }],
-        count: [{ type: i0.Input }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-linear-gauge",] }]
-    };
-
-    var CoLinearGaugeModule = /** @class */ (function () {
-        function CoLinearGaugeModule() {
-        }
-        return CoLinearGaugeModule;
-    }());
-    CoLinearGaugeModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                    ],
-                    declarations: [
-                        CoLinearGaugeComponent
-                    ],
-                    exports: [
-                        CoLinearGaugeComponent
-                    ]
-                },] }
-    ];
-
-    var StatusbarComponent = /** @class */ (function () {
-        function StatusbarComponent() {
-            this.statusbarClick = new i0.EventEmitter();
-            this.showPopup = false;
-            this.popupClass = 'dropdown';
-        }
-        Object.defineProperty(StatusbarComponent.prototype, "statusbarData", {
-            get: function () {
-                return this._statusbarData;
-            },
-            set: function (value) {
-                this._statusbarData = value;
-                this.adjustTooHighPercentages();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        StatusbarComponent.prototype.showClass = function () {
-            return true;
-        };
-        StatusbarComponent.prototype.onStatusbarClick = function (event) {
-            this.showPopup = !this.showPopup;
-            if (this.showPopup) {
-                this._mouseY = event.screenY;
-                this._windowHeight = window.innerHeight;
-                this.setPopupClass();
-            }
-        };
-        StatusbarComponent.prototype.setPopupClass = function () {
-            var popupHeight = this.statusbarData.length * 30;
-            var dropdownInScreen = (this._mouseY + popupHeight) <= this._windowHeight;
-            if (dropdownInScreen) {
-                this.popupClass = 'dropdown';
-            }
-            else {
-                this.popupClass = 'dropup';
-            }
-        };
-        StatusbarComponent.prototype.adjustTooHighPercentages = function () {
-            this._statusbarData.forEach(function (data) { return data.percentage > 100 ? data.percentage = 100 : false; });
-        };
-        return StatusbarComponent;
-    }());
-    StatusbarComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: "co-statusbar",
-                    template: "\n    <div class=\"co-statusbar-wrapper\"\n         *ngIf=\"statusbarData\"\n         (click)=\"onStatusbarClick($event)\">\n      <div class=\"statuses\">\n        <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status\">\n          <co-linear-gauge [class.focused-status]=\"focusedStatusIndex !== undefined && focusedStatusIndex === index\"\n            [value]=\"data.percentage\" [count]=\"data.count ? data.count : undefined\"></co-linear-gauge>\n        </div>\n      </div>\n      <div class=status-description-popup *ngIf=\"showPopup\" @showHidePopup [ngClass]=\"popupClass\" clickOutside (clickOutside)=\"showPopup=false\">\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    </div>\n  ",
-                    animations: [
-                        animations.trigger("showHidePopup", [
-                            animations.state("void", animations.style({ opacity: 0 })),
-                            animations.state("*", animations.style({ opacity: 1 })),
-                            animations.transition("void <=> *", animations.animate("250ms ease-in-out")),
-                        ])
-                    ],
-                    encapsulation: i0.ViewEncapsulation.None
-                },] }
-    ];
-    StatusbarComponent.ctorParameters = function () { return []; };
-    StatusbarComponent.propDecorators = {
-        statusbarData: [{ type: i0.Input }],
-        focusedStatusIndex: [{ type: i0.Input }],
-        statusbarClick: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-statusbar",] }]
-    };
-
-    var StatusbarModule = /** @class */ (function () {
-        function StatusbarModule() {
-        }
-        return StatusbarModule;
-    }());
-    StatusbarModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        CoCircularGaugeModule,
-                        CoLinearGaugeModule,
-                        corecomponents_v12.ClickoutsideModule
-                    ],
-                    declarations: [
-                        StatusbarComponent
-                    ],
-                    exports: [
-                        StatusbarComponent
-                    ]
-                },] }
-    ];
-
     var DatePlanningComponent = /** @class */ (function () {
         function DatePlanningComponent(_changeDetector, renderer) {
             this._changeDetector = _changeDetector;
@@ -4110,7 +4219,7 @@
             this.iconCacheService = iconCacheService;
             this.selectedDate = new Date();
             this.selectedDateChange = new i0.EventEmitter();
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
             this.showMonthYearSelect = false;
             this.expanded = false;
         }
@@ -4671,7 +4780,7 @@
                 },] }
     ];
     CalendarViewComponent.ctorParameters = function () { return [
-        { type: exports["ɵbo"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
+        { type: exports["ɵbr"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
     ]; };
     CalendarViewComponent.propDecorators = {
         view: [{ type: i0.Input }],
@@ -4759,7 +4868,7 @@
     CalendarUtils.Locale = undefined;
     CalendarUtils.Now = new Date();
     CalendarUtils.ctorParameters = function () { return [
-        { type: exports["ɵbo"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
+        { type: exports["ɵbr"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
     ]; };
 
     var AgendaEvent = /** @class */ (function () {
@@ -4816,7 +4925,7 @@
             this._renderer = _renderer;
             this._ngZone = _ngZone;
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
             this.viewTypes = CalendarView;
             this.scrollbarWidth = 15;
             this.view = CalendarView.WeekSelectView;
@@ -4992,7 +5101,7 @@
                 },] }
     ];
     AgendaHeaderComponent.ctorParameters = function () { return [
-        { type: exports["ɵbo"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
+        { type: exports["ɵbr"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
         { type: i0.NgZone },
@@ -5092,7 +5201,7 @@
         { type: i0.Directive }
     ];
     AgendaBaseViewComponent.ctorParameters = function () { return [
-        { type: exports["ɵbo"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
+        { type: exports["ɵbr"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
         { type: IconCacheService }
     ]; };
     AgendaBaseViewComponent.propDecorators = {
@@ -5208,7 +5317,7 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.view = CalendarView.WeekSelectView;
             _this.week = NULL_WEEK;
-            _this.icons = exports["ɵbi"];
+            _this.icons = exports["ɵbl"];
             return _this;
         }
         AgendaWeekSelectViewComponent.prototype.prepareViewData = function () {
@@ -5453,7 +5562,7 @@
             this._elementRef = _elementRef;
             this._renderer = _renderer;
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
             this.event = NULL_AGENDA_EVENT;
             this.eventChecked = new i0.EventEmitter();
         }
@@ -5622,7 +5731,7 @@
     var AgendaSelectEventComponent = /** @class */ (function () {
         function AgendaSelectEventComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbl"];
             this.event = NULL_AGENDA_EVENT;
             this.eventChecked = new i0.EventEmitter();
         }
@@ -5718,38 +5827,41 @@
     exports.sendMethodsWithIcon = sendMethodsWithIcon;
     exports["ɵa"] = SignatureComponent;
     exports["ɵb"] = SignaturesComponent;
-    exports["ɵba"] = OrderStockTabComponent;
-    exports["ɵbb"] = StockLocationComponent;
-    exports["ɵbc"] = StockHistoryComponent;
-    exports["ɵbd"] = OrderSupplyStockHistoryComponent;
-    exports["ɵbe"] = OrderCommissionStockHistoryComponent;
-    exports["ɵbf"] = OrderStockHistoryComponent;
-    exports["ɵbg"] = AllocationStockHistoryComponent;
-    exports["ɵbh"] = SendMethod;
-    exports["ɵbj"] = CalendarAllYearsComponent;
-    exports["ɵbk"] = CalendarAllMonthsComponent;
-    exports["ɵbl"] = CalendarHeaderComponent;
-    exports["ɵbm"] = CalendarComponent;
-    exports["ɵbn"] = CalendarViewComponent;
-    exports["ɵbp"] = AgendaHeaderComponent;
-    exports["ɵbq"] = AgendaViewComponent;
-    exports["ɵbr"] = AgendaMonthViewComponent;
-    exports["ɵbs"] = AgendaBaseViewComponent;
-    exports["ɵbt"] = AgendaDayViewComponent;
-    exports["ɵbu"] = AgendaWeekViewComponent;
-    exports["ɵbv"] = AgendaWeekSelectViewComponent;
-    exports["ɵbw"] = AgendaHourViewComponent;
-    exports["ɵbx"] = AgendaHourCellComponent;
-    exports["ɵby"] = AgendaHourViewLabelsComponent;
-    exports["ɵbz"] = AgendaHalfHourCellComponent;
+    exports["ɵba"] = OrderTabComponent;
+    exports["ɵbb"] = StockTabsComponent;
+    exports["ɵbc"] = StockHistoryTabsComponent;
+    exports["ɵbd"] = OrderStockTabComponent;
+    exports["ɵbe"] = StockLocationComponent;
+    exports["ɵbf"] = StockHistoryComponent;
+    exports["ɵbg"] = OrderSupplyStockHistoryComponent;
+    exports["ɵbh"] = OrderCommissionStockHistoryComponent;
+    exports["ɵbi"] = OrderStockHistoryComponent;
+    exports["ɵbj"] = AllocationStockHistoryComponent;
+    exports["ɵbk"] = SendMethod;
+    exports["ɵbm"] = CalendarAllYearsComponent;
+    exports["ɵbn"] = CalendarAllMonthsComponent;
+    exports["ɵbo"] = CalendarHeaderComponent;
+    exports["ɵbp"] = CalendarComponent;
+    exports["ɵbq"] = CalendarViewComponent;
+    exports["ɵbs"] = AgendaHeaderComponent;
+    exports["ɵbt"] = AgendaViewComponent;
+    exports["ɵbu"] = AgendaMonthViewComponent;
+    exports["ɵbv"] = AgendaBaseViewComponent;
+    exports["ɵbw"] = AgendaDayViewComponent;
+    exports["ɵbx"] = AgendaWeekViewComponent;
+    exports["ɵby"] = AgendaWeekSelectViewComponent;
+    exports["ɵbz"] = AgendaHourViewComponent;
     exports["ɵc"] = StockService;
-    exports["ɵca"] = AgendaEventsComponent;
-    exports["ɵcb"] = AgendaEventComponent;
-    exports["ɵcc"] = ViewSelectComponent;
-    exports["ɵcd"] = AgendaSelectEventComponent;
-    exports["ɵce"] = MASTER_PIPES;
-    exports["ɵcf"] = ArrayNumberPipe;
-    exports["ɵcg"] = UCfirstPipe;
+    exports["ɵca"] = AgendaHourCellComponent;
+    exports["ɵcb"] = AgendaHourViewLabelsComponent;
+    exports["ɵcc"] = AgendaHalfHourCellComponent;
+    exports["ɵcd"] = AgendaEventsComponent;
+    exports["ɵce"] = AgendaEventComponent;
+    exports["ɵcf"] = ViewSelectComponent;
+    exports["ɵcg"] = AgendaSelectEventComponent;
+    exports["ɵch"] = MASTER_PIPES;
+    exports["ɵci"] = ArrayNumberPipe;
+    exports["ɵcj"] = UCfirstPipe;
     exports["ɵd"] = SharedConnectorService;
     exports["ɵe"] = OptionsService;
     exports["ɵf"] = DictionaryService;
@@ -5765,14 +5877,14 @@
     exports["ɵp"] = SendMethodPrinterComponent;
     exports["ɵq"] = TabBarModule;
     exports["ɵr"] = TabBarComponent;
-    exports["ɵs"] = StockInformationComponent;
-    exports["ɵt"] = StockInformationGridComponent;
-    exports["ɵu"] = StockTransferComponent;
-    exports["ɵv"] = StockChangeAmountComponent;
-    exports["ɵw"] = StockTabComponent;
-    exports["ɵx"] = OrderTabComponent;
-    exports["ɵy"] = StockTabsComponent;
-    exports["ɵz"] = StockHistoryTabsComponent;
+    exports["ɵs"] = StatusbarPopupComponent;
+    exports["ɵt"] = StockStatusbarModule;
+    exports["ɵu"] = StockStatusbarComponent;
+    exports["ɵv"] = StockInformationComponent;
+    exports["ɵw"] = StockInformationGridComponent;
+    exports["ɵx"] = StockTransferComponent;
+    exports["ɵy"] = StockChangeAmountComponent;
+    exports["ɵz"] = StockTabComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });