@colijnit/sharedcomponents 1.0.38 → 1.0.40

package/bundles/colijnit-sharedcomponents.umd.js

@@ -730,13 +730,13 @@
                 },] }
     ];
 
-    exports["ɵbo"] = void 0;
+    exports["ɵbq"] = 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["ɵbq"] || (exports["ɵbq"] = {}));
 
     // 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["ɵbq"].Dutch;
                     this._loadDictionary();
                     return [2 /*return*/];
                 });
@@ -883,7 +883,7 @@
                 return key || "";
             }
             if (this.language === undefined) {
-                this._language = exports["ɵbo"].Dutch;
+                this._language = exports["ɵbq"].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["ɵbk"] = 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["ɵbk"] || (exports["ɵbk"] = {}));
 
     var StockInformationGridComponent = /** @class */ (function () {
         function StockInformationGridComponent(iconCacheService, _stockService) {
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbk"];
             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["ɵbk"].PrintRegular),
+        new SendMethod(sendMethodType_enum.SendMethodType.Print, "Print", exports["ɵbk"].PrintSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.Email, "Email", exports["ɵbk"].AtSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.Edi, "Edi", exports["ɵbk"].FileExportSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.EmailTemplate, "Email template", exports["ɵbk"].EnvelopeRegular),
+        new SendMethod(sendMethodType_enum.SendMethodType.Sms, "Sms", exports["ɵbk"].MessageSmsSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.WebService, "Webservice", exports["ɵbk"].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["ɵbk"];
+            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["ɵbk"];
             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["ɵbk"];
             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["ɵbk"];
             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) },
@@ -2817,7 +2838,7 @@
                             if (!!this.stockHistory) return [3 /*break*/, 2];
                             stockHistoryInformation = new getStockHistoryRequest.GetStockHistoryRequest();
                             stockHistoryInformation.type = "V";
-                            stockHistoryInformation.goodId = this.article;
+                            stockHistoryInformation.goodId = this.article.goodId;
                             _a = this;
                             return [4 /*yield*/, this._stockService.getStockHistory(stockHistoryInformation)];
                         case 1:
@@ -2837,7 +2858,7 @@
                             if (!!this.orderSupplyStockHistory) return [3 /*break*/, 2];
                             stockHistoryInformation = new getStockHistoryRequest.GetStockHistoryRequest();
                             stockHistoryInformation.type = "O";
-                            stockHistoryInformation.goodId = this.article;
+                            stockHistoryInformation.goodId = this.article.goodId;
                             _a = this;
                             return [4 /*yield*/, this._stockService.getStockHistory(stockHistoryInformation)];
                         case 1:
@@ -2857,7 +2878,7 @@
                             if (!!this.orderCommissionStockHistory) return [3 /*break*/, 2];
                             stockHistoryInformation = new getStockHistoryRequest.GetStockHistoryRequest();
                             stockHistoryInformation.type = "C";
-                            stockHistoryInformation.goodId = this.article;
+                            stockHistoryInformation.goodId = this.article.goodId;
                             _a = this;
                             return [4 /*yield*/, this._stockService.getStockHistory(stockHistoryInformation)];
                         case 1:
@@ -2877,7 +2898,7 @@
                             if (!!this.orderStockHistory) return [3 /*break*/, 2];
                             stockHistoryInformation = new getStockHistoryRequest.GetStockHistoryRequest();
                             stockHistoryInformation.type = "B";
-                            stockHistoryInformation.goodId = this.article;
+                            stockHistoryInformation.goodId = this.article.goodId;
                             _a = this;
                             return [4 /*yield*/, this._stockService.getStockHistory(stockHistoryInformation)];
                         case 1:
@@ -2897,7 +2918,7 @@
                             if (!!this.orderAllocationStockHistory) return [3 /*break*/, 2];
                             stockHistoryInformation = new getStockHistoryRequest.GetStockHistoryRequest();
                             stockHistoryInformation.type = "T";
-                            stockHistoryInformation.goodId = this.article;
+                            stockHistoryInformation.goodId = this.article.goodId;
                             _a = this;
                             return [4 /*yield*/, this._stockService.getStockHistory(stockHistoryInformation)];
                         case 1:
@@ -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["ɵbk"];
             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["ɵbk"];
         }
         return OrderStockTabComponent;
     }());
@@ -3020,10 +3036,9 @@
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
             this._changeDetector = _changeDetector;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbk"];
             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,32 +3132,8 @@
         function StockHistoryComponent(iconCacheService, _stockService) {
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbk"];
         }
-        StockHistoryComponent.prototype.openSendMethodDialog = function (data) {
-            if (!(this._stockService.printLayoutParams instanceof printPriceStickers_bo.PrintPriceStickers)) {
-                this._stockService.printLayoutParams.goodId = data.goodId;
-                this._stockService.printLayoutParams.warehouse = data.warehouseNo;
-            }
-        };
-        StockHistoryComponent.prototype.getStockHistory = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var stockHistoryInformation, _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            stockHistoryInformation = new getStockHistoryRequest.GetStockHistoryRequest();
-                            stockHistoryInformation.type = "B";
-                            stockHistoryInformation.goodId = this.articleGoodId;
-                            _a = this;
-                            return [4 /*yield*/, this._stockService.getStockHistory(stockHistoryInformation)];
-                        case 1:
-                            _a.stockHistory = _b.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
         return StockHistoryComponent;
     }());
     StockHistoryComponent.decorators = [
@@ -3191,7 +3209,7 @@
     var OrderSupplyStockHistoryComponent = /** @class */ (function () {
         function OrderSupplyStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbk"];
         }
         return OrderSupplyStockHistoryComponent;
     }());
@@ -3212,7 +3230,7 @@
     var OrderCommissionStockHistoryComponent = /** @class */ (function () {
         function OrderCommissionStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbk"];
         }
         return OrderCommissionStockHistoryComponent;
     }());
@@ -3233,7 +3251,7 @@
     var OrderStockHistoryComponent = /** @class */ (function () {
         function OrderStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbk"];
         }
         return OrderStockHistoryComponent;
     }());
@@ -3254,7 +3272,7 @@
     var AllocationStockHistoryComponent = /** @class */ (function () {
         function AllocationStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbk"];
         }
         return AllocationStockHistoryComponent;
     }());
@@ -3272,678 +3290,716 @@
         allocationStockHistory: [{ type: i0.Input }]
     };
 
-    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,
-                        SendMethodDialogModule,
-                        corecomponents_v12.IconModule,
-                        corecomponents_v12.InputNumberPickerModule,
-                        corecomponents_v12.CoDialogWizardModule,
-                        corecomponents_v12.InputTextareaModule,
-                        TabBarModule,
-                        corecomponents_v12.CoDialogModule
-                    ],
-                    declarations: [
-                        StockComponent,
-                        StockInformationComponent,
-                        StockInformationGridComponent,
-                        StockTransferComponent,
-                        StockChangeAmountComponent,
-                        StockTabComponent,
-                        OrderTabComponent,
-                        StockTabsComponent,
-                        StockHistoryTabsComponent,
-                        OrderStockTabComponent,
-                        StockLocationComponent,
-                        StockHistoryComponent,
-                        OrderSupplyStockHistoryComponent,
-                        OrderCommissionStockHistoryComponent,
-                        OrderStockHistoryComponent,
-                        AllocationStockHistoryComponent
-                    ],
-                    exports: [
-                        StockComponent
-                    ],
-                    providers: [
-                        StockService
-                    ]
-                },] }
-    ];
-
-    var KeyboardCode;
-    (function (KeyboardCode) {
-        KeyboardCode["Backspace"] = "Backspace";
-        KeyboardCode["Digit0"] = "Digit0";
-        KeyboardCode["Digit1"] = "Digit1";
-        KeyboardCode["Digit2"] = "Digit2";
-        KeyboardCode["Digit3"] = "Digit3";
-        KeyboardCode["Digit4"] = "Digit4";
-        KeyboardCode["Digit5"] = "Digit5";
-        KeyboardCode["Digit6"] = "Digit6";
-        KeyboardCode["Digit7"] = "Digit7";
-        KeyboardCode["Digit8"] = "Digit8";
-        KeyboardCode["Digit9"] = "Digit9";
-        KeyboardCode["Enter"] = "Enter";
-        KeyboardCode["Escape"] = "Escape";
-        KeyboardCode["Minus"] = "Minus";
-        KeyboardCode["Numpad0"] = "Numpad0";
-        KeyboardCode["Numpad1"] = "Numpad1";
-        KeyboardCode["Numpad2"] = "Numpad2";
-        KeyboardCode["Numpad3"] = "Numpad3";
-        KeyboardCode["Numpad4"] = "Numpad4";
-        KeyboardCode["Numpad5"] = "Numpad5";
-        KeyboardCode["Numpad6"] = "Numpad6";
-        KeyboardCode["Numpad7"] = "Numpad7";
-        KeyboardCode["Numpad8"] = "Numpad8";
-        KeyboardCode["Numpad9"] = "Numpad9";
-        KeyboardCode["NumpadDecimal"] = "NumpadDecimal";
-        KeyboardCode["NumpadEnter"] = "NumpadEnter";
-        KeyboardCode["NumpadSubtract"] = "NumpadSubtract";
-        KeyboardCode["Period"] = "Period";
-    })(KeyboardCode || (KeyboardCode = {}));
+    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 KeyPadComponent = /** @class */ (function () {
-        function KeyPadComponent(iconCacheService) {
-            this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
-            this.showValue = true;
-            this.emitModelChangeOnEnter = true;
-            this.modelChange = new i0.EventEmitter();
-            this.internalModelChange = new i0.EventEmitter();
-            this.enterClick = new i0.EventEmitter();
-            this._validKeyMap = new Map([
-                [KeyboardCode.Digit0, "0"],
-                [KeyboardCode.Digit1, "1"],
-                [KeyboardCode.Digit2, "2"],
-                [KeyboardCode.Digit3, "3"],
-                [KeyboardCode.Digit4, "4"],
-                [KeyboardCode.Digit5, "5"],
-                [KeyboardCode.Digit6, "6"],
-                [KeyboardCode.Digit7, "7"],
-                [KeyboardCode.Digit8, "8"],
-                [KeyboardCode.Digit9, "9"],
-                [KeyboardCode.Numpad0, "0"],
-                [KeyboardCode.Numpad1, "1"],
-                [KeyboardCode.Numpad2, "2"],
-                [KeyboardCode.Numpad3, "3"],
-                [KeyboardCode.Numpad4, "4"],
-                [KeyboardCode.Numpad5, "5"],
-                [KeyboardCode.Numpad6, "6"],
-                [KeyboardCode.Numpad7, "7"],
-                [KeyboardCode.Numpad8, "8"],
-                [KeyboardCode.Numpad9, "9"],
-                [KeyboardCode.NumpadDecimal, "."],
-                [KeyboardCode.Period, "."]
-            ]);
-            this.isNegative = false;
-            this._model = 0;
-            this._internalModel = "0";
-            this._maxCharacters = 11;
+    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(KeyPadComponent.prototype, "model", {
+        Object.defineProperty(CoCircularGaugeComponent.prototype, "value", {
             get: function () {
-                return this._model;
+                return this._value;
             },
             set: function (value) {
-                this._model = value;
-                this._internalModel = this._model + "";
+                this._value = value;
+                this._setColor();
             },
             enumerable: false,
             configurable: true
         });
-        KeyPadComponent.prototype.showClass = function () {
-            return true;
-        };
-        KeyPadComponent.prototype.handleKeyDown = function (event) {
-            this._keyDown(event);
-        };
-        Object.defineProperty(KeyPadComponent.prototype, "internalModel", {
+        Object.defineProperty(CoCircularGaugeComponent.prototype, "color", {
             get: function () {
-                return this._internalModel;
-            },
-            set: function (value) {
-                this._internalModel = value;
-                this.isNegative = parseFloat(this._internalModel) < 0;
-                this.internalModelChange.emit(this._internalModel);
+                return this._color;
             },
             enumerable: false,
             configurable: true
         });
-        KeyPadComponent.prototype.handleMinusClick = function (event) {
-            var model = parseFloat(this.internalModel);
-            if (model !== 0) {
-                if (model < 0) {
-                    this.internalModel = Math.abs(model) + "";
-                }
-                else {
-                    this.internalModel = -model + "";
-                }
-            }
-            this._emitModelChange();
+        CoCircularGaugeComponent.prototype.showClass = function () {
+            return true;
         };
-        KeyPadComponent.prototype.handleClearClick = function (event) {
-            this.internalModel = "0";
-            this._emitModelChange();
+        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(),
+                }];
         };
-        KeyPadComponent.prototype.handleBsClick = function (event) {
-            var wish = this.internalModel;
-            wish = wish.slice(0, wish.length - 1) || "0";
-            if (!isNaN(parseFloat(wish))) {
-                this.internalModel = parseFloat(wish) + "";
+        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
+                    }];
             }
-            this._emitModelChange();
-        };
-        KeyPadComponent.prototype.handleButtonClick = function (chr) {
-            this._updateModel(chr);
-        };
-        KeyPadComponent.prototype.handleEnterClick = function (event) {
-            this._emitModelChange(true);
-            this.enterClick.emit();
         };
-        KeyPadComponent.prototype._updateModel = function (value) {
-            if (value === undefined || value === null ||
-                (value === '.' && this.internalModel.indexOf('.') > -1) ||
-                this.internalModel.length >= this._maxCharacters) {
-                return;
+        ;
+        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',
+                    }];
             }
-            this.internalModel = this.internalModel !== "0" ? this.internalModel + value : value;
-            this._emitModelChange();
         };
-        KeyPadComponent.prototype._keyDown = function (event) {
-            if (this._isEnter(event)) {
-                this.handleEnterClick(event);
+        CoCircularGaugeComponent.prototype._setColor = function () {
+            if (this.value <= 0) {
+                this._color = GaugeColor.Lowest;
             }
-            else if (this._isMinus(event)) {
-                this.handleMinusClick(event);
+            else if (this.value >= 1 && this.value < 25) {
+                this._color = GaugeColor.Low;
             }
-            else if (this._isEscape(event)) {
-                this.handleClearClick(event);
+            else if (this.value >= 25 && this.value < 50) {
+                this._color = GaugeColor.MediumLow;
             }
-            else if (this._isBackspace(event)) {
-                this.handleBsClick(event);
+            else if (this.value >= 50 && this.value < 75) {
+                this._color = GaugeColor.MediumHigh;
             }
-            else {
-                this._updateModel(this._validKeyMap.get(event.code));
+            else if (this.value >= 75 && this.value < 100) {
+                this._color = GaugeColor.High;
             }
-        };
-        KeyPadComponent.prototype._isEnter = function (event) {
-            return event.code === KeyboardCode.Enter || event.code === KeyboardCode.NumpadEnter;
-        };
-        KeyPadComponent.prototype._isMinus = function (event) {
-            return event.code === KeyboardCode.Minus || event.code === KeyboardCode.NumpadSubtract;
-        };
-        KeyPadComponent.prototype._isEscape = function (event) {
-            return event.code === KeyboardCode.Escape;
-        };
-        KeyPadComponent.prototype._isBackspace = function (event) {
-            return event.code === KeyboardCode.Backspace;
-        };
-        KeyPadComponent.prototype._emitModelChange = function (enter) {
-            if (enter === void 0) { enter = false; }
-            if ((enter && this.emitModelChangeOnEnter) || (!enter && !this.emitModelChangeOnEnter)) {
-                var model = parseFloat(this.internalModel);
-                if (!isNaN(model)) {
-                    if (enter && this.emitModelChangeOnEnter) {
-                        this.model = model;
-                    }
-                    this.modelChange.emit(model);
-                }
+            else if (this.value >= 100) {
+                this._color = GaugeColor.Highest;
             }
         };
-        return KeyPadComponent;
+        return CoCircularGaugeComponent;
     }());
-    KeyPadComponent.decorators = [
+    CoCircularGaugeComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'co-key-pad',
-                    template: "\n    <div class=\"key-pad-wrapper\">\n      <div class=\"key-pad-model-wrapper\" *ngIf=\"showValue\">\n        <div class=\"key-pad-model\" [textContent]=\"internalModel\" [class.negative]=\"isNegative\"></div>\n      </div>\n      <div class=\"key-pad-button-wrapper\">\n        <div class=\"key-pad-button button-7\" [textContent]=\"'7'\" (click)=\"handleButtonClick('7')\"></div>\n        <div class=\"key-pad-button button-8\" [textContent]=\"'8'\" (click)=\"handleButtonClick('8')\"></div>\n        <div class=\"key-pad-button button-9\" [textContent]=\"'9'\" (click)=\"handleButtonClick('9')\"></div>\n        <div class=\"key-pad-button button-bs\" (click)=\"handleBsClick($event)\">\n          <co-icon [iconData]=\"iconCacheService.getIcon(icons.DeleteLeftRegular)\"></co-icon>\n        </div>\n        <div class=\"key-pad-button button-4\" [textContent]=\"'4'\" (click)=\"handleButtonClick('4')\"></div>\n        <div class=\"key-pad-button button-5\" [textContent]=\"'5'\" (click)=\"handleButtonClick('5')\"></div>\n        <div class=\"key-pad-button button-6\" [textContent]=\"'6'\" (click)=\"handleButtonClick('6')\"></div>\n        <div class=\"key-pad-button button-minus\" [textContent]=\"'-'\" (click)=\"handleMinusClick($event)\"></div>\n        <div class=\"key-pad-button button-1\" [textContent]=\"'1'\" (click)=\"handleButtonClick('1')\"></div>\n        <div class=\"key-pad-button button-2\" [textContent]=\"'2'\" (click)=\"handleButtonClick('2')\"></div>\n        <div class=\"key-pad-button button-3\" [textContent]=\"'3'\" (click)=\"handleButtonClick('3')\"></div>\n        <div class=\"key-pad-button button-enter\" (click)=\"handleEnterClick($event)\">\n          <span [textContent]=\"'enter'\"></span>\n        </div>\n        <div class=\"key-pad-button button-0\" [textContent]=\"'0'\" (click)=\"handleButtonClick('0')\"></div>\n        <div class=\"key-pad-button button-dot\" [textContent]=\"'.'\" (click)=\"handleButtonClick('.')\"></div>\n      </div>\n    </div>\n    ",
+                    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
                 },] }
     ];
-    KeyPadComponent.ctorParameters = function () { return [
-        { type: IconCacheService }
-    ]; };
-    KeyPadComponent.propDecorators = {
-        model: [{ type: i0.Input }],
-        showValue: [{ type: i0.Input }],
-        emitModelChangeOnEnter: [{ type: i0.Input }],
-        modelChange: [{ type: i0.Output }],
-        internalModelChange: [{ type: i0.Output }],
-        enterClick: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ['class.co-key-pad',] }],
-        handleKeyDown: [{ type: i0.HostListener, args: ['window:keydown', ['$event'],] }]
+    CoCircularGaugeComponent.propDecorators = {
+        circulargauge: [{ type: i0.ViewChild, args: ['circulargauge',] }],
+        value: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-circular-gauge",] }]
     };
 
-    var KeyPadModule = /** @class */ (function () {
-        function KeyPadModule() {
+    var CoCircularGaugeModule = /** @class */ (function () {
+        function CoCircularGaugeModule() {
         }
-        return KeyPadModule;
+        return CoCircularGaugeModule;
     }());
-    KeyPadModule.decorators = [
+    CoCircularGaugeModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        corecomponents_v12.IconModule
+                        ej2AngularCirculargauge.CircularGaugeModule
                     ],
                     declarations: [
-                        KeyPadComponent
+                        CoCircularGaugeComponent
                     ],
                     exports: [
-                        KeyPadComponent
+                        CoCircularGaugeComponent
                     ]
                 },] }
     ];
 
-    var LayoutSwitcherComponent = /** @class */ (function () {
-        function LayoutSwitcherComponent(iconCacheService) {
-            this.iconCacheService = iconCacheService;
-            this.icon = exports["ɵbi"];
-            this.layoutItems = [];
-            this.layoutSwitchEmit = new i0.EventEmitter();
-            this.showMaskSidebar = false;
-            this._activeIndex = 0;
+    var CoLinearGaugeComponent = /** @class */ (function () {
+        function CoLinearGaugeComponent() {
+            this.color = GaugeColor.Low;
         }
-        LayoutSwitcherComponent.prototype.showClass = function () {
-            return true;
-        };
-        Object.defineProperty(LayoutSwitcherComponent.prototype, "activeIndex", {
+        Object.defineProperty(CoLinearGaugeComponent.prototype, "value", {
             get: function () {
-                return this._activeIndex;
+                return this._value;
             },
-            set: function (index) {
-                this._activeIndex = index;
-                this.toggleMaskSidebar();
-                this.layoutSwitchEmit.emit(this.layoutItems[index]);
+            set: function (value) {
+                this._value = value;
+                this._setColor();
             },
             enumerable: false,
             configurable: true
         });
-        LayoutSwitcherComponent.prototype.toggleMaskSidebar = function () {
-            this.showMaskSidebar = !this.showMaskSidebar;
+        CoLinearGaugeComponent.prototype.showClass = function () {
+            return true;
         };
-        return LayoutSwitcherComponent;
-    }());
-    LayoutSwitcherComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: "co-layout-switcher",
-                    template: "\n    <div class=\"mask-wrapper\" [class.mask-wrapper-active]='showMaskSidebar' @showHideSidebar>\n      <div class=\"icon-wrapper\" (click)=\"toggleMaskSidebar()\">\n        <co-icon class=\"icon-mask\" [iconData]=\"iconCacheService.getIcon(icon.BringForwardRegular)\" [@positionIcon]=\"showMaskSidebar\"></co-icon>\n\n        <co-icon class='icon-mask-sidebar-handle' [@positionHandle]='showMaskSidebar' [iconData]=\"showMaskSidebar ? iconCacheService.getIcon(this.icon.AngleLeftSolid) : iconCacheService.getIcon(this.icon.AngleRightSolid)\"></co-icon>\n      </div>\n\n      <div class=\"mask-content\" *ngIf=\"showMaskSidebar\" @showHideSidebar>\n        <span *ngFor='let item of this.layoutItems' [class.active]=\"this.activeIndex === this.layoutItems.indexOf(item)\" [textContent]=\"item\" (click)='activeIndex = this.layoutItems.indexOf(item)' ></span>\n      </div>\n    </div>\n\n  ",
-                    animations: [
-                        animations.trigger("showHideSidebar", [
-                            animations.state("void", animations.style({ "width": "0" })),
-                            animations.state("*", animations.style({ "width": "*" })),
-                            animations.transition("void <=> *", animations.animate(200))
-                        ]),
-                        animations.trigger("positionIcon", [
-                            animations.state("true", animations.style({ "left": "70px" })),
-                            animations.state("false", animations.style({ "left": "10px" })),
-                            animations.transition("true <=> false", animations.animate(200))
-                        ]),
-                        animations.trigger("positionHandle", [
-                            animations.state("true", animations.style({ "left": "15px" })),
-                            animations.state("false", animations.style({ "left": "75px" })),
-                            animations.transition("true <=> false", animations.animate(200))
-                        ])
-                    ],
+        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
                 },] }
     ];
-    LayoutSwitcherComponent.ctorParameters = function () { return [
-        { type: IconCacheService }
-    ]; };
-    LayoutSwitcherComponent.propDecorators = {
-        showClass: [{ type: i0.HostBinding, args: ['class.co-layout-switcher',] }],
-        layoutItems: [{ type: i0.Input }],
-        layoutSwitchEmit: [{ type: i0.Output }]
+    CoLinearGaugeComponent.propDecorators = {
+        value: [{ type: i0.Input }],
+        count: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-linear-gauge",] }]
     };
 
-    var LayoutSwitcherModule = /** @class */ (function () {
-        function LayoutSwitcherModule() {
+    var CoLinearGaugeModule = /** @class */ (function () {
+        function CoLinearGaugeModule() {
         }
-        return LayoutSwitcherModule;
+        return CoLinearGaugeModule;
     }());
-    LayoutSwitcherModule.decorators = [
+    CoLinearGaugeModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        corecomponents_v12.IconModule
                     ],
                     declarations: [
-                        LayoutSwitcherComponent,
+                        CoLinearGaugeComponent
                     ],
                     exports: [
-                        LayoutSwitcherComponent
+                        CoLinearGaugeComponent
                     ]
                 },] }
     ];
 
-    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
-                },
-            ];
+    var StatusbarComponent = /** @class */ (function () {
+        function StatusbarComponent() {
+            this.statusbarClick = new i0.EventEmitter();
+            this.showPopup = false;
+            this.popupClass = 'dropdown';
         }
-        Object.defineProperty(CoCircularGaugeComponent.prototype, "value", {
+        Object.defineProperty(StatusbarComponent.prototype, "statusbarData", {
             get: function () {
-                return this._value;
+                return this._statusbarData;
             },
             set: function (value) {
-                this._value = value;
-                this._setColor();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(CoCircularGaugeComponent.prototype, "color", {
-            get: function () {
-                return this._color;
+                this._statusbarData = value;
+                this.adjustTooHighPercentages();
             },
             enumerable: false,
             configurable: true
         });
-        CoCircularGaugeComponent.prototype.showClass = function () {
+        StatusbarComponent.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',
-                    }];
+        StatusbarComponent.prototype.onStatusbarClick = function (event) {
+            this.showPopup = !this.showPopup;
+            if (this.showPopup) {
+                this._mouseY = event.screenY;
+                this._windowHeight = window.innerHeight;
+                this.setPopupClass();
             }
         };
-        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;
+        StatusbarComponent.prototype.setPopupClass = function () {
+            var popupHeight = this.statusbarData.length * 30;
+            var dropdownInScreen = (this._mouseY + popupHeight) <= this._windowHeight;
+            if (dropdownInScreen) {
+                this.popupClass = 'dropdown';
             }
-            else if (this.value >= 100) {
-                this._color = GaugeColor.Highest;
+            else {
+                this.popupClass = 'dropup';
             }
         };
-        return CoCircularGaugeComponent;
+        StatusbarComponent.prototype.adjustTooHighPercentages = function () {
+            this._statusbarData.forEach(function (data) { return data.percentage > 100 ? data.percentage = 100 : false; });
+        };
+        return StatusbarComponent;
     }());
-    CoCircularGaugeComponent.decorators = [
+    StatusbarComponent.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  ",
+                    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
                 },] }
     ];
-    CoCircularGaugeComponent.propDecorators = {
-        circulargauge: [{ type: i0.ViewChild, args: ['circulargauge',] }],
-        value: [{ type: i0.Input }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-circular-gauge",] }]
+    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 CoCircularGaugeModule = /** @class */ (function () {
-        function CoCircularGaugeModule() {
+    var StatusbarModule = /** @class */ (function () {
+        function StatusbarModule() {
         }
-        return CoCircularGaugeModule;
+        return StatusbarModule;
     }());
-    CoCircularGaugeModule.decorators = [
+    StatusbarModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        ej2AngularCirculargauge.CircularGaugeModule
+                        CoCircularGaugeModule,
+                        CoLinearGaugeModule,
+                        corecomponents_v12.ClickoutsideModule
                     ],
                     declarations: [
-                        CoCircularGaugeComponent
+                        StatusbarComponent
                     ],
                     exports: [
-                        CoCircularGaugeComponent
+                        StatusbarComponent
                     ]
                 },] }
     ];
 
-    var CoLinearGaugeComponent = /** @class */ (function () {
-        function CoLinearGaugeComponent() {
-            this.color = GaugeColor.Low;
+    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,
+                        SendMethodDialogModule,
+                        corecomponents_v12.IconModule,
+                        corecomponents_v12.InputNumberPickerModule,
+                        corecomponents_v12.CoDialogWizardModule,
+                        corecomponents_v12.InputTextareaModule,
+                        TabBarModule,
+                        corecomponents_v12.CoDialogModule,
+                        StatusbarModule,
+                        StockStatusbarModule
+                    ],
+                    declarations: [
+                        StockComponent,
+                        StockInformationComponent,
+                        StockInformationGridComponent,
+                        StockTransferComponent,
+                        StockChangeAmountComponent,
+                        StockTabComponent,
+                        OrderTabComponent,
+                        StockTabsComponent,
+                        StockHistoryTabsComponent,
+                        OrderStockTabComponent,
+                        StockLocationComponent,
+                        StockHistoryComponent,
+                        OrderSupplyStockHistoryComponent,
+                        OrderCommissionStockHistoryComponent,
+                        OrderStockHistoryComponent,
+                        AllocationStockHistoryComponent
+                    ],
+                    exports: [
+                        StockComponent
+                    ],
+                    providers: [
+                        StockService
+                    ]
+                },] }
+    ];
+
+    var KeyboardCode;
+    (function (KeyboardCode) {
+        KeyboardCode["Backspace"] = "Backspace";
+        KeyboardCode["Digit0"] = "Digit0";
+        KeyboardCode["Digit1"] = "Digit1";
+        KeyboardCode["Digit2"] = "Digit2";
+        KeyboardCode["Digit3"] = "Digit3";
+        KeyboardCode["Digit4"] = "Digit4";
+        KeyboardCode["Digit5"] = "Digit5";
+        KeyboardCode["Digit6"] = "Digit6";
+        KeyboardCode["Digit7"] = "Digit7";
+        KeyboardCode["Digit8"] = "Digit8";
+        KeyboardCode["Digit9"] = "Digit9";
+        KeyboardCode["Enter"] = "Enter";
+        KeyboardCode["Escape"] = "Escape";
+        KeyboardCode["Minus"] = "Minus";
+        KeyboardCode["Numpad0"] = "Numpad0";
+        KeyboardCode["Numpad1"] = "Numpad1";
+        KeyboardCode["Numpad2"] = "Numpad2";
+        KeyboardCode["Numpad3"] = "Numpad3";
+        KeyboardCode["Numpad4"] = "Numpad4";
+        KeyboardCode["Numpad5"] = "Numpad5";
+        KeyboardCode["Numpad6"] = "Numpad6";
+        KeyboardCode["Numpad7"] = "Numpad7";
+        KeyboardCode["Numpad8"] = "Numpad8";
+        KeyboardCode["Numpad9"] = "Numpad9";
+        KeyboardCode["NumpadDecimal"] = "NumpadDecimal";
+        KeyboardCode["NumpadEnter"] = "NumpadEnter";
+        KeyboardCode["NumpadSubtract"] = "NumpadSubtract";
+        KeyboardCode["Period"] = "Period";
+    })(KeyboardCode || (KeyboardCode = {}));
+
+    var KeyPadComponent = /** @class */ (function () {
+        function KeyPadComponent(iconCacheService) {
+            this.iconCacheService = iconCacheService;
+            this.icons = exports["ɵbk"];
+            this.showValue = true;
+            this.emitModelChangeOnEnter = true;
+            this.modelChange = new i0.EventEmitter();
+            this.internalModelChange = new i0.EventEmitter();
+            this.enterClick = new i0.EventEmitter();
+            this._validKeyMap = new Map([
+                [KeyboardCode.Digit0, "0"],
+                [KeyboardCode.Digit1, "1"],
+                [KeyboardCode.Digit2, "2"],
+                [KeyboardCode.Digit3, "3"],
+                [KeyboardCode.Digit4, "4"],
+                [KeyboardCode.Digit5, "5"],
+                [KeyboardCode.Digit6, "6"],
+                [KeyboardCode.Digit7, "7"],
+                [KeyboardCode.Digit8, "8"],
+                [KeyboardCode.Digit9, "9"],
+                [KeyboardCode.Numpad0, "0"],
+                [KeyboardCode.Numpad1, "1"],
+                [KeyboardCode.Numpad2, "2"],
+                [KeyboardCode.Numpad3, "3"],
+                [KeyboardCode.Numpad4, "4"],
+                [KeyboardCode.Numpad5, "5"],
+                [KeyboardCode.Numpad6, "6"],
+                [KeyboardCode.Numpad7, "7"],
+                [KeyboardCode.Numpad8, "8"],
+                [KeyboardCode.Numpad9, "9"],
+                [KeyboardCode.NumpadDecimal, "."],
+                [KeyboardCode.Period, "."]
+            ]);
+            this.isNegative = false;
+            this._model = 0;
+            this._internalModel = "0";
+            this._maxCharacters = 11;
         }
-        Object.defineProperty(CoLinearGaugeComponent.prototype, "value", {
+        Object.defineProperty(KeyPadComponent.prototype, "model", {
             get: function () {
-                return this._value;
+                return this._model;
             },
             set: function (value) {
-                this._value = value;
-                this._setColor();
+                this._model = value;
+                this._internalModel = this._model + "";
             },
             enumerable: false,
             configurable: true
         });
-        CoLinearGaugeComponent.prototype.showClass = function () {
+        KeyPadComponent.prototype.showClass = function () {
             return true;
         };
-        CoLinearGaugeComponent.prototype.getStyle = function () {
-            return "linear-gradient(90deg, " + this.color + " 0 " + this.value + "%, white " + this.value + "% 100%";
+        KeyPadComponent.prototype.handleKeyDown = function (event) {
+            this._keyDown(event);
         };
-        CoLinearGaugeComponent.prototype._setColor = function () {
-            if (this.value <= 0) {
-                this.color = GaugeColor.Lowest;
+        Object.defineProperty(KeyPadComponent.prototype, "internalModel", {
+            get: function () {
+                return this._internalModel;
+            },
+            set: function (value) {
+                this._internalModel = value;
+                this.isNegative = parseFloat(this._internalModel) < 0;
+                this.internalModelChange.emit(this._internalModel);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        KeyPadComponent.prototype.handleMinusClick = function (event) {
+            var model = parseFloat(this.internalModel);
+            if (model !== 0) {
+                if (model < 0) {
+                    this.internalModel = Math.abs(model) + "";
+                }
+                else {
+                    this.internalModel = -model + "";
+                }
             }
-            else if (this.value >= 1 && this.value < 25) {
-                this.color = GaugeColor.Low;
+            this._emitModelChange();
+        };
+        KeyPadComponent.prototype.handleClearClick = function (event) {
+            this.internalModel = "0";
+            this._emitModelChange();
+        };
+        KeyPadComponent.prototype.handleBsClick = function (event) {
+            var wish = this.internalModel;
+            wish = wish.slice(0, wish.length - 1) || "0";
+            if (!isNaN(parseFloat(wish))) {
+                this.internalModel = parseFloat(wish) + "";
             }
-            else if (this.value >= 25 && this.value < 50) {
-                this.color = GaugeColor.MediumLow;
+            this._emitModelChange();
+        };
+        KeyPadComponent.prototype.handleButtonClick = function (chr) {
+            this._updateModel(chr);
+        };
+        KeyPadComponent.prototype.handleEnterClick = function (event) {
+            this._emitModelChange(true);
+            this.enterClick.emit();
+        };
+        KeyPadComponent.prototype._updateModel = function (value) {
+            if (value === undefined || value === null ||
+                (value === '.' && this.internalModel.indexOf('.') > -1) ||
+                this.internalModel.length >= this._maxCharacters) {
+                return;
             }
-            else if (this.value >= 50 && this.value < 75) {
-                this.color = GaugeColor.MediumHigh;
+            this.internalModel = this.internalModel !== "0" ? this.internalModel + value : value;
+            this._emitModelChange();
+        };
+        KeyPadComponent.prototype._keyDown = function (event) {
+            if (this._isEnter(event)) {
+                this.handleEnterClick(event);
             }
-            else if (this.value >= 75 && this.value < 100) {
-                this.color = GaugeColor.High;
+            else if (this._isMinus(event)) {
+                this.handleMinusClick(event);
             }
-            else if (this.value >= 100) {
-                this.color = GaugeColor.Highest;
+            else if (this._isEscape(event)) {
+                this.handleClearClick(event);
+            }
+            else if (this._isBackspace(event)) {
+                this.handleBsClick(event);
+            }
+            else {
+                this._updateModel(this._validKeyMap.get(event.code));
             }
         };
-        return CoLinearGaugeComponent;
+        KeyPadComponent.prototype._isEnter = function (event) {
+            return event.code === KeyboardCode.Enter || event.code === KeyboardCode.NumpadEnter;
+        };
+        KeyPadComponent.prototype._isMinus = function (event) {
+            return event.code === KeyboardCode.Minus || event.code === KeyboardCode.NumpadSubtract;
+        };
+        KeyPadComponent.prototype._isEscape = function (event) {
+            return event.code === KeyboardCode.Escape;
+        };
+        KeyPadComponent.prototype._isBackspace = function (event) {
+            return event.code === KeyboardCode.Backspace;
+        };
+        KeyPadComponent.prototype._emitModelChange = function (enter) {
+            if (enter === void 0) { enter = false; }
+            if ((enter && this.emitModelChangeOnEnter) || (!enter && !this.emitModelChangeOnEnter)) {
+                var model = parseFloat(this.internalModel);
+                if (!isNaN(model)) {
+                    if (enter && this.emitModelChangeOnEnter) {
+                        this.model = model;
+                    }
+                    this.modelChange.emit(model);
+                }
+            }
+        };
+        return KeyPadComponent;
     }());
-    CoLinearGaugeComponent.decorators = [
+    KeyPadComponent.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  ",
+                    selector: 'co-key-pad',
+                    template: "\n    <div class=\"key-pad-wrapper\">\n      <div class=\"key-pad-model-wrapper\" *ngIf=\"showValue\">\n        <div class=\"key-pad-model\" [textContent]=\"internalModel\" [class.negative]=\"isNegative\"></div>\n      </div>\n      <div class=\"key-pad-button-wrapper\">\n        <div class=\"key-pad-button button-7\" [textContent]=\"'7'\" (click)=\"handleButtonClick('7')\"></div>\n        <div class=\"key-pad-button button-8\" [textContent]=\"'8'\" (click)=\"handleButtonClick('8')\"></div>\n        <div class=\"key-pad-button button-9\" [textContent]=\"'9'\" (click)=\"handleButtonClick('9')\"></div>\n        <div class=\"key-pad-button button-bs\" (click)=\"handleBsClick($event)\">\n          <co-icon [iconData]=\"iconCacheService.getIcon(icons.DeleteLeftRegular)\"></co-icon>\n        </div>\n        <div class=\"key-pad-button button-4\" [textContent]=\"'4'\" (click)=\"handleButtonClick('4')\"></div>\n        <div class=\"key-pad-button button-5\" [textContent]=\"'5'\" (click)=\"handleButtonClick('5')\"></div>\n        <div class=\"key-pad-button button-6\" [textContent]=\"'6'\" (click)=\"handleButtonClick('6')\"></div>\n        <div class=\"key-pad-button button-minus\" [textContent]=\"'-'\" (click)=\"handleMinusClick($event)\"></div>\n        <div class=\"key-pad-button button-1\" [textContent]=\"'1'\" (click)=\"handleButtonClick('1')\"></div>\n        <div class=\"key-pad-button button-2\" [textContent]=\"'2'\" (click)=\"handleButtonClick('2')\"></div>\n        <div class=\"key-pad-button button-3\" [textContent]=\"'3'\" (click)=\"handleButtonClick('3')\"></div>\n        <div class=\"key-pad-button button-enter\" (click)=\"handleEnterClick($event)\">\n          <span [textContent]=\"'enter'\"></span>\n        </div>\n        <div class=\"key-pad-button button-0\" [textContent]=\"'0'\" (click)=\"handleButtonClick('0')\"></div>\n        <div class=\"key-pad-button button-dot\" [textContent]=\"'.'\" (click)=\"handleButtonClick('.')\"></div>\n      </div>\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",] }]
+    KeyPadComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
+    ]; };
+    KeyPadComponent.propDecorators = {
+        model: [{ type: i0.Input }],
+        showValue: [{ type: i0.Input }],
+        emitModelChangeOnEnter: [{ type: i0.Input }],
+        modelChange: [{ type: i0.Output }],
+        internalModelChange: [{ type: i0.Output }],
+        enterClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-key-pad',] }],
+        handleKeyDown: [{ type: i0.HostListener, args: ['window:keydown', ['$event'],] }]
     };
 
-    var CoLinearGaugeModule = /** @class */ (function () {
-        function CoLinearGaugeModule() {
+    var KeyPadModule = /** @class */ (function () {
+        function KeyPadModule() {
         }
-        return CoLinearGaugeModule;
+        return KeyPadModule;
     }());
-    CoLinearGaugeModule.decorators = [
+    KeyPadModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
+                        corecomponents_v12.IconModule
                     ],
                     declarations: [
-                        CoLinearGaugeComponent
+                        KeyPadComponent
                     ],
                     exports: [
-                        CoLinearGaugeComponent
+                        KeyPadComponent
                     ]
                 },] }
     ];
 
-    var StatusbarComponent = /** @class */ (function () {
-        function StatusbarComponent() {
-            this.statusbarClick = new i0.EventEmitter();
-            this.showPopup = false;
-            this.popupClass = 'dropdown';
+    var LayoutSwitcherComponent = /** @class */ (function () {
+        function LayoutSwitcherComponent(iconCacheService) {
+            this.iconCacheService = iconCacheService;
+            this.icon = exports["ɵbk"];
+            this.layoutItems = [];
+            this.layoutSwitchEmit = new i0.EventEmitter();
+            this.showMaskSidebar = false;
+            this._activeIndex = 0;
         }
-        Object.defineProperty(StatusbarComponent.prototype, "statusbarData", {
+        LayoutSwitcherComponent.prototype.showClass = function () {
+            return true;
+        };
+        Object.defineProperty(LayoutSwitcherComponent.prototype, "activeIndex", {
             get: function () {
-                return this._statusbarData;
+                return this._activeIndex;
             },
-            set: function (value) {
-                this._statusbarData = value;
-                this.adjustTooHighPercentages();
+            set: function (index) {
+                this._activeIndex = index;
+                this.toggleMaskSidebar();
+                this.layoutSwitchEmit.emit(this.layoutItems[index]);
             },
             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; });
+        LayoutSwitcherComponent.prototype.toggleMaskSidebar = function () {
+            this.showMaskSidebar = !this.showMaskSidebar;
         };
-        return StatusbarComponent;
+        return LayoutSwitcherComponent;
     }());
-    StatusbarComponent.decorators = [
+    LayoutSwitcherComponent.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  ",
+                    selector: "co-layout-switcher",
+                    template: "\n    <div class=\"mask-wrapper\" [class.mask-wrapper-active]='showMaskSidebar' @showHideSidebar>\n      <div class=\"icon-wrapper\" (click)=\"toggleMaskSidebar()\">\n        <co-icon class=\"icon-mask\" [iconData]=\"iconCacheService.getIcon(icon.BringForwardRegular)\" [@positionIcon]=\"showMaskSidebar\"></co-icon>\n\n        <co-icon class='icon-mask-sidebar-handle' [@positionHandle]='showMaskSidebar' [iconData]=\"showMaskSidebar ? iconCacheService.getIcon(this.icon.AngleLeftSolid) : iconCacheService.getIcon(this.icon.AngleRightSolid)\"></co-icon>\n      </div>\n\n      <div class=\"mask-content\" *ngIf=\"showMaskSidebar\" @showHideSidebar>\n        <span *ngFor='let item of this.layoutItems' [class.active]=\"this.activeIndex === this.layoutItems.indexOf(item)\" [textContent]=\"item\" (click)='activeIndex = this.layoutItems.indexOf(item)' ></span>\n      </div>\n    </div>\n\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")),
+                        animations.trigger("showHideSidebar", [
+                            animations.state("void", animations.style({ "width": "0" })),
+                            animations.state("*", animations.style({ "width": "*" })),
+                            animations.transition("void <=> *", animations.animate(200))
+                        ]),
+                        animations.trigger("positionIcon", [
+                            animations.state("true", animations.style({ "left": "70px" })),
+                            animations.state("false", animations.style({ "left": "10px" })),
+                            animations.transition("true <=> false", animations.animate(200))
+                        ]),
+                        animations.trigger("positionHandle", [
+                            animations.state("true", animations.style({ "left": "15px" })),
+                            animations.state("false", animations.style({ "left": "75px" })),
+                            animations.transition("true <=> false", animations.animate(200))
                         ])
                     ],
                     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",] }]
+    LayoutSwitcherComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
+    ]; };
+    LayoutSwitcherComponent.propDecorators = {
+        showClass: [{ type: i0.HostBinding, args: ['class.co-layout-switcher',] }],
+        layoutItems: [{ type: i0.Input }],
+        layoutSwitchEmit: [{ type: i0.Output }]
     };
 
-    var StatusbarModule = /** @class */ (function () {
-        function StatusbarModule() {
+    var LayoutSwitcherModule = /** @class */ (function () {
+        function LayoutSwitcherModule() {
         }
-        return StatusbarModule;
+        return LayoutSwitcherModule;
     }());
-    StatusbarModule.decorators = [
+    LayoutSwitcherModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        CoCircularGaugeModule,
-                        CoLinearGaugeModule,
-                        corecomponents_v12.ClickoutsideModule
+                        corecomponents_v12.IconModule
                     ],
                     declarations: [
-                        StatusbarComponent
+                        LayoutSwitcherComponent,
                     ],
                     exports: [
-                        StatusbarComponent
+                        LayoutSwitcherComponent
                     ]
                 },] }
     ];
@@ -4134,7 +4190,7 @@
             this.iconCacheService = iconCacheService;
             this.selectedDate = new Date();
             this.selectedDateChange = new i0.EventEmitter();
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbk"];
             this.showMonthYearSelect = false;
             this.expanded = false;
         }
@@ -4695,7 +4751,7 @@
                 },] }
     ];
     CalendarViewComponent.ctorParameters = function () { return [
-        { type: exports["ɵbo"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
+        { type: exports["ɵbq"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
     ]; };
     CalendarViewComponent.propDecorators = {
         view: [{ type: i0.Input }],
@@ -4783,7 +4839,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["ɵbq"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
     ]; };
 
     var AgendaEvent = /** @class */ (function () {
@@ -4840,7 +4896,7 @@
             this._renderer = _renderer;
             this._ngZone = _ngZone;
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbk"];
             this.viewTypes = CalendarView;
             this.scrollbarWidth = 15;
             this.view = CalendarView.WeekSelectView;
@@ -5016,7 +5072,7 @@
                 },] }
     ];
     AgendaHeaderComponent.ctorParameters = function () { return [
-        { type: exports["ɵbo"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
+        { type: exports["ɵbq"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
         { type: i0.NgZone },
@@ -5116,7 +5172,7 @@
         { type: i0.Directive }
     ];
     AgendaBaseViewComponent.ctorParameters = function () { return [
-        { type: exports["ɵbo"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
+        { type: exports["ɵbq"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
         { type: IconCacheService }
     ]; };
     AgendaBaseViewComponent.propDecorators = {
@@ -5232,7 +5288,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["ɵbk"];
             return _this;
         }
         AgendaWeekSelectViewComponent.prototype.prepareViewData = function () {
@@ -5477,7 +5533,7 @@
             this._elementRef = _elementRef;
             this._renderer = _renderer;
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbk"];
             this.event = NULL_AGENDA_EVENT;
             this.eventChecked = new i0.EventEmitter();
         }
@@ -5646,7 +5702,7 @@
     var AgendaSelectEventComponent = /** @class */ (function () {
         function AgendaSelectEventComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbi"];
+            this.icons = exports["ɵbk"];
             this.event = NULL_AGENDA_EVENT;
             this.eventChecked = new i0.EventEmitter();
         }
@@ -5742,38 +5798,40 @@
     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"] = StockTabsComponent;
+    exports["ɵbb"] = StockHistoryTabsComponent;
+    exports["ɵbc"] = OrderStockTabComponent;
+    exports["ɵbd"] = StockLocationComponent;
+    exports["ɵbe"] = StockHistoryComponent;
+    exports["ɵbf"] = OrderSupplyStockHistoryComponent;
+    exports["ɵbg"] = OrderCommissionStockHistoryComponent;
+    exports["ɵbh"] = OrderStockHistoryComponent;
+    exports["ɵbi"] = AllocationStockHistoryComponent;
+    exports["ɵbj"] = SendMethod;
+    exports["ɵbl"] = CalendarAllYearsComponent;
+    exports["ɵbm"] = CalendarAllMonthsComponent;
+    exports["ɵbn"] = CalendarHeaderComponent;
+    exports["ɵbo"] = CalendarComponent;
+    exports["ɵbp"] = CalendarViewComponent;
+    exports["ɵbr"] = AgendaHeaderComponent;
+    exports["ɵbs"] = AgendaViewComponent;
+    exports["ɵbt"] = AgendaMonthViewComponent;
+    exports["ɵbu"] = AgendaBaseViewComponent;
+    exports["ɵbv"] = AgendaDayViewComponent;
+    exports["ɵbw"] = AgendaWeekViewComponent;
+    exports["ɵbx"] = AgendaWeekSelectViewComponent;
+    exports["ɵby"] = AgendaHourViewComponent;
+    exports["ɵbz"] = AgendaHourCellComponent;
     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"] = AgendaHourViewLabelsComponent;
+    exports["ɵcb"] = AgendaHalfHourCellComponent;
+    exports["ɵcc"] = AgendaEventsComponent;
+    exports["ɵcd"] = AgendaEventComponent;
+    exports["ɵce"] = ViewSelectComponent;
+    exports["ɵcf"] = AgendaSelectEventComponent;
+    exports["ɵcg"] = MASTER_PIPES;
+    exports["ɵch"] = ArrayNumberPipe;
+    exports["ɵci"] = UCfirstPipe;
     exports["ɵd"] = SharedConnectorService;
     exports["ɵe"] = OptionsService;
     exports["ɵf"] = DictionaryService;
@@ -5789,14 +5847,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"] = StockStatusbarModule;
+    exports["ɵt"] = StockStatusbarComponent;
+    exports["ɵu"] = StockInformationComponent;
+    exports["ɵv"] = StockInformationGridComponent;
+    exports["ɵw"] = StockTransferComponent;
+    exports["ɵx"] = StockChangeAmountComponent;
+    exports["ɵy"] = StockTabComponent;
+    exports["ɵz"] = OrderTabComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });