@colijnit/sharedcomponents 1.0.38 → 1.0.40

package/fesm2015/colijnit-sharedcomponents.js

@@ -23,7 +23,7 @@ import { BusinessObjectFactory } from '@colijnit/ioneconnector/build/factory/bus
 import { SendMethod as SendMethod$1 } from '@colijnit/mainapi/build/model/send-method.bo';
 import { PrintStockStickers } from '@colijnit/sharedapi/build/model/print-stock-stickers';
 import { ArticleStock as ArticleStock$1 } from '@colijnit/articleapi/build/model/article-stock';
-import { InputCheckboxModule, IconModule, CoDialogModule, ButtonModule, InputComboBoxModule, CoGridModule, InputRadioButtonModule, DropDownModule, SimpleGridModule, ImageModule, InputTextModule, InputNumberPickerModule, CoDialogWizardModule, InputTextareaModule, ClickoutsideModule, InputDatePickerModule } from '@colijnit/corecomponents_v12';
+import { InputCheckboxModule, IconModule, CoDialogModule, ButtonModule, ClickoutsideModule, InputComboBoxModule, CoGridModule, InputRadioButtonModule, DropDownModule, SimpleGridModule, ImageModule, InputTextModule, InputNumberPickerModule, CoDialogWizardModule, InputTextareaModule, InputDatePickerModule } from '@colijnit/corecomponents_v12';
 import * as i1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ArticleStockManagement } from '@colijnit/articleapi/build/model/article-stock-management';
@@ -710,6 +710,22 @@ class SharedConnectorService {
             });
         });
     }
+    getArtStockStatus(goodId, branchNo, requestedAmount, warehouseId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.getArtStockStatus(goodId, branchNo, requestedAmount, warehouseId).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObject) {
+                            resolve(result.resultObject);
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
     getStockManagementWarehouses() {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
@@ -924,6 +940,11 @@ class StockService {
             return yield this._sharedService.getStockStatus();
         });
     }
+    getArtStockStatus(goodId, branchNo, requestedAmount, warehouseId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.getArtStockStatus(goodId, branchNo, requestedAmount, warehouseId);
+        });
+    }
     // public async getStockStickerTemplates(data: StockStickersPrintLayouts): Promise<StockStickersPrintLayouts[]> {
     //   return await this._sharedService.getStockStickerTemplates(data);
     // }
@@ -998,6 +1019,10 @@ class StockComponent {
     ngOnDestroy() {
         this._subscriptions.forEach(subscription => subscription.unsubscribe());
     }
+    ngOnInit() {
+        this.getArtStockStatus();
+        this.getStockManagementWarehouses();
+    }
     handleStockTransferClick(event) {
         this.stockTransferArticleDetails = event;
         this.showStockTransfer = !this.showStockTransfer;
@@ -1022,6 +1047,16 @@ class StockComponent {
             this.stockInformation.forEach((articleStock) => this.allTechnicalStock += articleStock.technicalStock);
         });
     }
+    getArtStockStatus() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.articleStockState = yield this.stockService.getArtStockStatus(this.articleExtended.goodId);
+        });
+    }
+    getStockManagementWarehouses() {
+        this.stockService.getStockManagementWarehouses().then((warehouses) => {
+            this.warehouses = warehouses;
+        });
+    }
     _handleSettingsLoaded(loaded) {
         return __awaiter(this, void 0, void 0, function* () {
             if (loaded) {
@@ -1048,7 +1083,7 @@ StockComponent.decorators = [
                 template: `
       <div class="stock-info-container">
         <co-stock-information [article]="articleExtended"
-                              [articleStock]=""
+                              [articleStockState]="articleStockState"
                               [allAvailableStockInformation]="allAvailableStock"
                               [allTechnicalStockInformation]="allTechnicalStock"
         >
@@ -1058,6 +1093,7 @@ StockComponent.decorators = [
                        [article]="articleExtended"
                        (transferIconClicked)="handleStockTransferClick($event)"
                        (sendMethodDialogClicked)="handleSendMethodClick($event)"
+                       [warehouses]="warehouses"
         ></co-stock-tabs>
 
         <co-dialog *ngIf="showStockTransfer">
@@ -1124,6 +1160,7 @@ StockInformationComponent.decorators = [
         <div class="stock-status">
           <label [textContent]="'STOCK_STATUS'"></label>
           <span [textContent]="article.stockStatus"></span>
+          <co-stock-statusbar [value]="articleStockState"></co-stock-statusbar>
         </div>
         <div class="stock-status">
           <label [textContent]="'AMOUNT_IN_STOCK'"></label>
@@ -1145,7 +1182,7 @@ StockInformationComponent.decorators = [
 StockInformationComponent.ctorParameters = () => [];
 StockInformationComponent.propDecorators = {
     article: [{ type: Input }],
-    articleStock: [{ type: Input }],
+    articleStockState: [{ type: Input }],
     allAvailableStockInformation: [{ type: Input }],
     allTechnicalStockInformation: [{ type: Input }]
 };
@@ -1933,14 +1970,13 @@ const sendMethodsWithIcon = [
     new SendMethod(SendMethodType.WebService, "Webservice", Icon.PrintRegular)
 ];
 class SendMethodDialogComponent {
-    constructor(iconCacheService, _optionsService, _dictionary, _changeDetector, _sharedService, _sendMethodService) {
+    constructor(iconCacheService, _changeDetector, _sharedService, _sendMethodService) {
         this.iconCacheService = iconCacheService;
-        this._optionsService = _optionsService;
-        this._dictionary = _dictionary;
         this._changeDetector = _changeDetector;
         this._sharedService = _sharedService;
         this._sendMethodService = _sendMethodService;
         this.icons = Icon;
+        this.printerList = [];
         this.emailLayouts = [];
         this.printLayouts = [];
         this.emailAddresses = [];
@@ -1964,7 +2000,7 @@ class SendMethodDialogComponent {
         this.showEmailTemplate = true;
         this.showWebservice = true;
         this._subscriptions = [];
-        this._subscriptions.push(this._optionsService.optionsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)), this._sendMethodService.reportingDocumentPrintBaseRequestChanged.subscribe((value) => this.reportingDocumentPrintRequestChange.next(value)), this._sendMethodService.reportingDocumentEmailBaseRequestChanged.subscribe((value) => this.reportingDocumentEmailRequestChange.next(value)), this._sendMethodService.reportingDocumentPdfBaseRequestChanged.subscribe((value) => this.reportingDocumentPdfRequestChange.next(value)));
+        this._subscriptions.push(this._sendMethodService.reportingDocumentPrintBaseRequestChanged.subscribe((value) => this.reportingDocumentPrintRequestChange.next(value)), this._sendMethodService.reportingDocumentEmailBaseRequestChanged.subscribe((value) => this.reportingDocumentEmailRequestChange.next(value)), this._sendMethodService.reportingDocumentPdfBaseRequestChanged.subscribe((value) => this.reportingDocumentPdfRequestChange.next(value)));
     }
     showClass() {
         return true;
@@ -1979,7 +2015,7 @@ class SendMethodDialogComponent {
         if (this.reportingDocumentPdfRequest) {
             this._sendMethodService.reportingDocumentPdfBaseRequest = this.reportingDocumentPdfRequest;
         }
-        this._selectDefaultSendMethod();
+        this._initDefaultSendMethod();
         this._prepareVisibleMethods();
     }
     ngOnDestroy() {
@@ -2013,20 +2049,27 @@ class SendMethodDialogComponent {
             this.navigationItems.nativeElement.scrollLeft = this.webServiceItems.nativeElement.offsetLeft - this.navigationItems.nativeElement.offsetLeft;
         }
     }
-    _selectDefaultSendMethod() {
+    _initDefaultSendMethod() {
         if (this.defaultSendMethod) {
-            const sendMethod = this.sendMethods.find(sm => sm.code === this.defaultSendMethod);
-            if (sendMethod) {
-                setTimeout(() => {
-                    this.handleSendMethodClick(sendMethod);
-                    this.startUp = false;
-                });
-            }
+            this._selectDefaultSendMethod();
         }
         else {
+            if (this.visibleMethods && this.visibleMethods.length === 1) {
+                this.defaultSendMethod = this.visibleMethods[0];
+                this._selectDefaultSendMethod();
+            }
             this.startUp = false;
         }
     }
+    _selectDefaultSendMethod() {
+        const sendMethod = this.sendMethods.find(sm => sm.code === this.defaultSendMethod);
+        if (sendMethod) {
+            setTimeout(() => {
+                this.handleSendMethodClick(sendMethod);
+                this.startUp = false;
+            });
+        }
+    }
     _prepareVisibleMethods() {
         if (this.visibleMethods && this.visibleMethods.length > 0) {
             this.sendMethods = this.sendMethods.filter(sm => this.visibleMethods.find(vm => vm === sm.code));
@@ -2039,26 +2082,6 @@ class SendMethodDialogComponent {
         this.showSms = this.sendMethods.find(sm => sm.code === SendMethodType.Sms) !== undefined;
         this.showWebservice = this.sendMethods.find(sm => sm.code === SendMethodType.WebService) !== undefined;
     }
-    _handleSettingsLoaded(loaded) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (loaded) {
-                yield this._initConnection().then();
-                this.upAndLoaded = true;
-            }
-        });
-    }
-    _initConnection() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // await this._connector.connect(this._optionsService.options);
-            if (this._optionsService.options.url) {
-                this._dictionary.rootUrl = this._optionsService.options.url.replace('/ajaxservice', '');
-            }
-            yield this._dictionary.setDictionary(this._optionsService.options.languageCode);
-            setTimeout(() => {
-                this._changeDetector.detectChanges();
-            });
-        });
-    }
 }
 SendMethodDialogComponent.decorators = [
     { type: Component, args: [{
@@ -2084,6 +2107,7 @@ SendMethodDialogComponent.decorators = [
           </div>
           <div #printItems class="send-method-navigation-content co-small-scrollbar" *ngIf="showPrint">
             <co-send-method-printer
+              [printerList]="printerList"
               [layouts]="printLayouts"
             ></co-send-method-printer>
           </div>
@@ -2126,8 +2150,6 @@ SendMethodDialogComponent.decorators = [
 ];
 SendMethodDialogComponent.ctorParameters = () => [
     { type: IconCacheService },
-    { type: OptionsService },
-    { type: DictionaryService },
     { type: ChangeDetectorRef },
     { type: SharedService },
     { type: SendMethodService }
@@ -2141,6 +2163,7 @@ SendMethodDialogComponent.propDecorators = {
     emailTemplateItems: [{ type: ViewChild, args: ['emailTemplateItems', { read: ElementRef },] }],
     smsItems: [{ type: ViewChild, args: ['smsItems', { read: ElementRef },] }],
     webServiceItems: [{ type: ViewChild, args: ['webServiceItems', { read: ElementRef },] }],
+    printerList: [{ type: Input }],
     reportingDocumentPrintRequest: [{ type: Input }],
     reportingDocumentEmailRequest: [{ type: Input }],
     reportingDocumentPdfRequest: [{ type: Input }],
@@ -2316,6 +2339,7 @@ SendMethodEmailModule.decorators = [
 class SendMethodPrinterComponent {
     constructor(sendMethodService) {
         this.sendMethodService = sendMethodService;
+        this.printerList = [];
         this.layouts = [];
     }
     showClass() {
@@ -2334,7 +2358,7 @@ SendMethodPrinterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-send-method-printer',
                 template: `
-    <co-printer-selection></co-printer-selection>
+    <co-printer-selection [printers]="printerList"></co-printer-selection>
     <co-layout-selection
       [(request)]="sendMethodService.reportingDocumentPrintBaseRequest"
       [layouts]="layouts"
@@ -2357,6 +2381,7 @@ SendMethodPrinterComponent.ctorParameters = () => [
     { type: SendMethodService }
 ];
 SendMethodPrinterComponent.propDecorators = {
+    printerList: [{ type: Input }],
     layouts: [{ type: Input }],
     showClass: [{ type: HostBinding, args: ['class.co-send-method-printer',] }]
 };
@@ -2374,16 +2399,13 @@ class PrinterSelectionComponent {
         return true;
     }
     ngOnInit() {
-        this._service.getAllPrinters().then((printers) => {
-            this.printers = printers;
-            if (!this.sendMethodService.reportingDocumentPrintBaseRequest.printerName) {
-                const defaultPrinter = this.printers.find(p => 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) {
+            const defaultPrinter = this.printers.find(p => p.isDefault);
+            if (defaultPrinter) {
+                this.sendMethodService.reportingDocumentPrintBaseRequest.printerName = defaultPrinter.name;
+                this.sendMethodService.reportingDocumentPrintBaseRequestChanged.next(this.sendMethodService.reportingDocumentPrintBaseRequest);
             }
-        });
+        }
     }
     handlePrinterClicked(printer) {
         this.sendMethodService.reportingDocumentPrintBaseRequest.printerName = printer.name;
@@ -2428,6 +2450,7 @@ PrinterSelectionComponent.ctorParameters = () => [
     { type: SharedService }
 ];
 PrinterSelectionComponent.propDecorators = {
+    printers: [{ type: Input }],
     showClass: [{ type: HostBinding, args: ['class.co-printer-selection',] }]
 };
 
@@ -2666,13 +2689,13 @@ class StockTabsComponent {
         this.sendMethodDialogClicked = new 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) },
@@ -2689,7 +2712,7 @@ class StockTabsComponent {
             if (!this.stockHistory) {
                 const stockHistoryInformation = new GetStockHistoryRequest();
                 stockHistoryInformation.type = "V";
-                stockHistoryInformation.goodId = this.article;
+                stockHistoryInformation.goodId = this.article.goodId;
                 this.stockHistory = yield this._stockService.getStockHistory(stockHistoryInformation);
             }
         });
@@ -2699,7 +2722,7 @@ class StockTabsComponent {
             if (!this.orderSupplyStockHistory) {
                 const stockHistoryInformation = new GetStockHistoryRequest();
                 stockHistoryInformation.type = "O";
-                stockHistoryInformation.goodId = this.article;
+                stockHistoryInformation.goodId = this.article.goodId;
                 this.orderSupplyStockHistory = yield this._stockService.getStockHistory(stockHistoryInformation);
             }
         });
@@ -2709,7 +2732,7 @@ class StockTabsComponent {
             if (!this.orderCommissionStockHistory) {
                 const stockHistoryInformation = new GetStockHistoryRequest();
                 stockHistoryInformation.type = "C";
-                stockHistoryInformation.goodId = this.article;
+                stockHistoryInformation.goodId = this.article.goodId;
                 this.orderCommissionStockHistory = yield this._stockService.getStockHistory(stockHistoryInformation);
             }
         });
@@ -2719,7 +2742,7 @@ class StockTabsComponent {
             if (!this.orderStockHistory) {
                 const stockHistoryInformation = new GetStockHistoryRequest();
                 stockHistoryInformation.type = "B";
-                stockHistoryInformation.goodId = this.article;
+                stockHistoryInformation.goodId = this.article.goodId;
                 this.orderStockHistory = yield this._stockService.getStockHistory(stockHistoryInformation);
             }
         });
@@ -2729,7 +2752,7 @@ class StockTabsComponent {
             if (!this.orderAllocationStockHistory) {
                 const stockHistoryInformation = new GetStockHistoryRequest();
                 stockHistoryInformation.type = "T";
-                stockHistoryInformation.goodId = this.article;
+                stockHistoryInformation.goodId = this.article.goodId;
                 this.orderAllocationStockHistory = yield this._stockService.getStockHistory(stockHistoryInformation);
             }
         });
@@ -2744,11 +2767,6 @@ class StockTabsComponent {
             }
         });
     }
-    getStockManagementWarehouses() {
-        this._stockService.getStockManagementWarehouses().then((warehouses) => {
-            this.warehouses = warehouses;
-        });
-    }
     getOrderData() {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.orderInformation) {
@@ -2821,6 +2839,7 @@ StockTabsComponent.ctorParameters = () => [
 StockTabsComponent.propDecorators = {
     stockInformation: [{ type: Input }],
     article: [{ type: Input }],
+    warehouses: [{ type: Input }],
     transferIconClicked: [{ type: Output }],
     sendMethodDialogClicked: [{ type: Output }]
 };
@@ -2907,7 +2926,6 @@ class StockLocationComponent {
         this.icons = Icon;
         this.transferIconClicked = new EventEmitter();
         this.sendMethodDialogClicked = new EventEmitter();
-        this.selectedWarehouse = 0;
         this.dataWareHouseFields = { text: "warehouseDescription", value: "warehouseNo" };
         this.dataLocationFields = { text: "locationNo", value: "locationNo" };
         this.articleDetailsInformation = new ArticleStockManagement();
@@ -2936,6 +2954,9 @@ class StockLocationComponent {
             this.stockLocations = locations;
         });
     }
+    locationChanged(event) {
+        this.selectedLocation = event;
+    }
     amountInStockChanged(data) {
         this.selectedArticleDetailsData.amountInStock = data;
     }
@@ -2945,6 +2966,19 @@ class StockLocationComponent {
     handleStockTransferClick(event) {
         this.transferIconClicked.emit(event);
     }
+    onOkClickSendLocations() {
+        return __awaiter(this, void 0, void 0, function* () {
+            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;
+            yield this._stockService.updateArticleDetails(this.selectedArticleDetailsData);
+            yield this._stockService.getArticleDetails(this.articleDetailsInformation).then((details) => {
+                this.articleDetails = details;
+            });
+        });
+    }
 }
 StockLocationComponent.decorators = [
     { type: Component, args: [{
@@ -2967,11 +3001,11 @@ StockLocationComponent.decorators = [
                           class="simple-grid"
                           [rowsPerPage]="20"
                           [showAdd]="true"
-                          [showDelete]="true"
                           [inlineEdit]="true"
                           (dblClickRow)="lockSelectedRow($event)"
                           [rightToolbar]="true"
                           [showToolbar]="true"
+                          (keydown.enter)="onOkClickSendLocations()"
           >
               <co-simple-grid-column [headerText]="'LOCATION'" [field]="'locationNo'">
                   <ng-template #editTemplate let-row="row">
@@ -2981,6 +3015,7 @@ StockLocationComponent.decorators = [
                                          [placeholder]="'LOCATION'"
                                          (click)="onLocationDropdownClick()"
                                          [required]="true"
+                                         (modelChange)="locationChanged($event)"
                       ></co-drop-down-list>
                   </ng-template>
               </co-simple-grid-column>
@@ -3069,20 +3104,6 @@ class StockHistoryComponent {
         this._stockService = _stockService;
         this.icons = Icon;
     }
-    openSendMethodDialog(data) {
-        if (!(this._stockService.printLayoutParams instanceof PrintPriceStickers)) {
-            this._stockService.printLayoutParams.goodId = data.goodId;
-            this._stockService.printLayoutParams.warehouse = data.warehouseNo;
-        }
-    }
-    getStockHistory() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const stockHistoryInformation = new GetStockHistoryRequest();
-            stockHistoryInformation.type = "B";
-            stockHistoryInformation.goodId = this.articleGoodId;
-            this.stockHistory = yield this._stockService.getStockHistory(stockHistoryInformation);
-        });
-    }
 }
 StockHistoryComponent.decorators = [
     { type: Component, args: [{
@@ -3356,698 +3377,738 @@ AllocationStockHistoryComponent.propDecorators = {
     allocationStockHistory: [{ type: Input }]
 };
 
-class StockModule {
-}
-StockModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    InputComboBoxModule,
-                    CoGridModule,
-                    ButtonModule,
-                    CommonModule,
-                    InputRadioButtonModule,
-                    DropDownModule,
-                    SimpleGridModule,
-                    ImageModule,
-                    InputTextModule,
-                    SendMethodDialogModule,
-                    IconModule,
-                    InputNumberPickerModule,
-                    CoDialogWizardModule,
-                    InputTextareaModule,
-                    TabBarModule,
-                    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 = {}));
 
-class KeyPadComponent {
-    constructor(iconCacheService) {
-        this.iconCacheService = iconCacheService;
-        this.icons = Icon;
-        this.showValue = true;
-        this.emitModelChangeOnEnter = true;
-        this.modelChange = new EventEmitter();
-        this.internalModelChange = new EventEmitter();
-        this.enterClick = new 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;
+class CoCircularGaugeComponent {
+    constructor() {
+        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
+            },
+        ];
     }
-    set model(value) {
-        this._model = value;
-        this._internalModel = this._model + "";
+    set value(value) {
+        this._value = value;
+        this._setColor();
     }
-    get model() {
-        return this._model;
+    get value() {
+        return this._value;
+    }
+    get color() {
+        return this._color;
     }
     showClass() {
         return true;
     }
-    handleKeyDown(event) {
-        this._keyDown(event);
-    }
-    set internalModel(value) {
-        this._internalModel = value;
-        this.isNegative = parseFloat(this._internalModel) < 0;
-        this.internalModelChange.emit(this._internalModel);
-    }
-    get internalModel() {
-        return this._internalModel;
-    }
-    handleMinusClick(event) {
-        const model = parseFloat(this.internalModel);
-        if (model !== 0) {
-            if (model < 0) {
-                this.internalModel = Math.abs(model) + "";
-            }
-            else {
-                this.internalModel = -model + "";
-            }
-        }
-        this._emitModelChange();
-    }
-    handleClearClick(event) {
-        this.internalModel = "0";
-        this._emitModelChange();
+    getAxes() {
+        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(),
+            }];
     }
-    handleBsClick(event) {
-        let wish = this.internalModel;
-        wish = wish.slice(0, wish.length - 1) || "0";
-        if (!isNaN(parseFloat(wish))) {
-            this.internalModel = parseFloat(wish) + "";
+    getPointers() {
+        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();
-    }
-    handleButtonClick(chr) {
-        this._updateModel(chr);
-    }
-    handleEnterClick(event) {
-        this._emitModelChange(true);
-        this.enterClick.emit();
     }
-    _updateModel(value) {
-        if (value === undefined || value === null ||
-            (value === '.' && this.internalModel.indexOf('.') > -1) ||
-            this.internalModel.length >= this._maxCharacters) {
-            return;
+    ;
+    getAnnotations() {
+        if (this.value !== undefined) {
+            const 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();
     }
-    _keyDown(event) {
-        if (this._isEnter(event)) {
-            this.handleEnterClick(event);
+    _setColor() {
+        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;
         }
-    }
-    _isEnter(event) {
-        return event.code === KeyboardCode.Enter || event.code === KeyboardCode.NumpadEnter;
-    }
-    _isMinus(event) {
-        return event.code === KeyboardCode.Minus || event.code === KeyboardCode.NumpadSubtract;
-    }
-    _isEscape(event) {
-        return event.code === KeyboardCode.Escape;
-    }
-    _isBackspace(event) {
-        return event.code === KeyboardCode.Backspace;
-    }
-    _emitModelChange(enter = false) {
-        if ((enter && this.emitModelChangeOnEnter) || (!enter && !this.emitModelChangeOnEnter)) {
-            const 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;
         }
     }
 }
-KeyPadComponent.decorators = [
+CoCircularGaugeComponent.decorators = [
     { type: Component, args: [{
-                selector: 'co-key-pad',
+                selector: "co-circular-gauge",
                 template: `
-    <div class="key-pad-wrapper">
-      <div class="key-pad-model-wrapper" *ngIf="showValue">
-        <div class="key-pad-model" [textContent]="internalModel" [class.negative]="isNegative"></div>
-      </div>
-      <div class="key-pad-button-wrapper">
-        <div class="key-pad-button button-7" [textContent]="'7'" (click)="handleButtonClick('7')"></div>
-        <div class="key-pad-button button-8" [textContent]="'8'" (click)="handleButtonClick('8')"></div>
-        <div class="key-pad-button button-9" [textContent]="'9'" (click)="handleButtonClick('9')"></div>
-        <div class="key-pad-button button-bs" (click)="handleBsClick($event)">
-          <co-icon [iconData]="iconCacheService.getIcon(icons.DeleteLeftRegular)"></co-icon>
-        </div>
-        <div class="key-pad-button button-4" [textContent]="'4'" (click)="handleButtonClick('4')"></div>
-        <div class="key-pad-button button-5" [textContent]="'5'" (click)="handleButtonClick('5')"></div>
-        <div class="key-pad-button button-6" [textContent]="'6'" (click)="handleButtonClick('6')"></div>
-        <div class="key-pad-button button-minus" [textContent]="'-'" (click)="handleMinusClick($event)"></div>
-        <div class="key-pad-button button-1" [textContent]="'1'" (click)="handleButtonClick('1')"></div>
-        <div class="key-pad-button button-2" [textContent]="'2'" (click)="handleButtonClick('2')"></div>
-        <div class="key-pad-button button-3" [textContent]="'3'" (click)="handleButtonClick('3')"></div>
-        <div class="key-pad-button button-enter" (click)="handleEnterClick($event)">
-          <span [textContent]="'enter'"></span>
-        </div>
-        <div class="key-pad-button button-0" [textContent]="'0'" (click)="handleButtonClick('0')"></div>
-        <div class="key-pad-button button-dot" [textContent]="'.'" (click)="handleButtonClick('.')"></div>
-      </div>
+    <div class="circular-gauge-wrapper">
+      <ejs-circulargauge
+        class="circular-gauge"
+        [width]="'100%'"
+        [axes]="getAxes()">
+      </ejs-circulargauge>
     </div>
-    `,
+  `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-KeyPadComponent.ctorParameters = () => [
-    { type: IconCacheService }
-];
-KeyPadComponent.propDecorators = {
-    model: [{ type: Input }],
-    showValue: [{ type: Input }],
-    emitModelChangeOnEnter: [{ type: Input }],
-    modelChange: [{ type: Output }],
-    internalModelChange: [{ type: Output }],
-    enterClick: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ['class.co-key-pad',] }],
-    handleKeyDown: [{ type: HostListener, args: ['window:keydown', ['$event'],] }]
+CoCircularGaugeComponent.propDecorators = {
+    circulargauge: [{ type: ViewChild, args: ['circulargauge',] }],
+    value: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-circular-gauge",] }]
 };
 
-class KeyPadModule {
+class CoCircularGaugeModule {
 }
-KeyPadModule.decorators = [
+CoCircularGaugeModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
-                    IconModule
+                    CircularGaugeModule
                 ],
                 declarations: [
-                    KeyPadComponent
+                    CoCircularGaugeComponent
                 ],
                 exports: [
-                    KeyPadComponent
+                    CoCircularGaugeComponent
                 ]
             },] }
 ];
 
-class LayoutSwitcherComponent {
-    constructor(iconCacheService) {
-        this.iconCacheService = iconCacheService;
-        this.icon = Icon;
-        this.layoutItems = [];
-        this.layoutSwitchEmit = new EventEmitter();
-        this.showMaskSidebar = false;
-        this._activeIndex = 0;
+class CoLinearGaugeComponent {
+    constructor() {
+        this.color = GaugeColor.Low;
+    }
+    set value(value) {
+        this._value = value;
+        this._setColor();
+    }
+    get value() {
+        return this._value;
     }
     showClass() {
         return true;
     }
-    get activeIndex() {
-        return this._activeIndex;
-    }
-    set activeIndex(index) {
-        this._activeIndex = index;
-        this.toggleMaskSidebar();
-        this.layoutSwitchEmit.emit(this.layoutItems[index]);
+    getStyle() {
+        return `linear-gradient(90deg, ${this.color} 0 ${this.value}%, white ${this.value}% 100%`;
     }
-    toggleMaskSidebar() {
-        this.showMaskSidebar = !this.showMaskSidebar;
+    _setColor() {
+        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;
+        }
     }
 }
-LayoutSwitcherComponent.decorators = [
+CoLinearGaugeComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-layout-switcher",
+                selector: "co-linear-gauge",
                 template: `
-    <div class="mask-wrapper" [class.mask-wrapper-active]='showMaskSidebar' @showHideSidebar>
-      <div class="icon-wrapper" (click)="toggleMaskSidebar()">
-        <co-icon class="icon-mask" [iconData]="iconCacheService.getIcon(icon.BringForwardRegular)" [@positionIcon]="showMaskSidebar"></co-icon>
-
-        <co-icon class='icon-mask-sidebar-handle' [@positionHandle]='showMaskSidebar' [iconData]="showMaskSidebar ? iconCacheService.getIcon(this.icon.AngleLeftSolid) : iconCacheService.getIcon(this.icon.AngleRightSolid)"></co-icon>
-      </div>
-
-      <div class="mask-content" *ngIf="showMaskSidebar" @showHideSidebar>
-        <span *ngFor='let item of this.layoutItems' [class.active]="this.activeIndex === this.layoutItems.indexOf(item)" [textContent]="item" (click)='activeIndex = this.layoutItems.indexOf(item)' ></span>
-      </div>
-    </div>
-
-  `,
-                animations: [
-                    trigger("showHideSidebar", [
-                        state("void", style({ "width": "0" })),
-                        state("*", style({ "width": "*" })),
-                        transition("void <=> *", animate(200))
-                    ]),
-                    trigger("positionIcon", [
-                        state("true", style({ "left": "70px" })),
-                        state("false", style({ "left": "10px" })),
-                        transition("true <=> false", animate(200))
-                    ]),
-                    trigger("positionHandle", [
-                        state("true", style({ "left": "15px" })),
-                        state("false", style({ "left": "75px" })),
-                        transition("true <=> false", animate(200))
-                    ])
-                ],
+    <div class="linear-gauge"
+         [style.background]="getStyle()"
+         [style.border-color]="color"
+         [textContent]="count ? count : ''"
+    ></div>
+  `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-LayoutSwitcherComponent.ctorParameters = () => [
-    { type: IconCacheService }
-];
-LayoutSwitcherComponent.propDecorators = {
-    showClass: [{ type: HostBinding, args: ['class.co-layout-switcher',] }],
-    layoutItems: [{ type: Input }],
-    layoutSwitchEmit: [{ type: Output }]
+CoLinearGaugeComponent.propDecorators = {
+    value: [{ type: Input }],
+    count: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-linear-gauge",] }]
 };
 
-class LayoutSwitcherModule {
+class CoLinearGaugeModule {
 }
-LayoutSwitcherModule.decorators = [
+CoLinearGaugeModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
-                    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 = {}));
-
-class CoCircularGaugeComponent {
+class StatusbarComponent {
     constructor() {
-        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
-            },
-        ];
-    }
-    set value(value) {
-        this._value = value;
-        this._setColor();
+        this.statusbarClick = new EventEmitter();
+        this.showPopup = false;
+        this.popupClass = 'dropdown';
     }
-    get value() {
-        return this._value;
+    set statusbarData(value) {
+        this._statusbarData = value;
+        this.adjustTooHighPercentages();
     }
-    get color() {
-        return this._color;
+    get statusbarData() {
+        return this._statusbarData;
     }
     showClass() {
         return true;
     }
-    getAxes() {
-        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(),
-            }];
-    }
-    getPointers() {
-        if (this.value) {
-            return [{
-                    roundedCornerRadius: 0,
-                    value: this.value,
-                    type: 'RangeBar',
-                    radius: '13px',
-                    color: this.color,
-                    border: {
-                        width: 0
-                    },
-                    animation: {
-                        enable: false
-                    },
-                    pointerWidth: 3
-                }];
-        }
-    }
-    ;
-    getAnnotations() {
-        if (this.value !== undefined) {
-            const 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',
-                }];
+    onStatusbarClick(event) {
+        this.showPopup = !this.showPopup;
+        if (this.showPopup) {
+            this._mouseY = event.screenY;
+            this._windowHeight = window.innerHeight;
+            this.setPopupClass();
         }
     }
-    _setColor() {
-        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;
+    setPopupClass() {
+        const popupHeight = this.statusbarData.length * 30;
+        let dropdownInScreen = (this._mouseY + popupHeight) <= this._windowHeight;
+        if (dropdownInScreen) {
+            this.popupClass = 'dropdown';
         }
-        else if (this.value >= 100) {
-            this._color = GaugeColor.Highest;
+        else {
+            this.popupClass = 'dropup';
         }
     }
+    adjustTooHighPercentages() {
+        this._statusbarData.forEach(data => data.percentage > 100 ? data.percentage = 100 : false);
+    }
 }
-CoCircularGaugeComponent.decorators = [
+StatusbarComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-circular-gauge",
+                selector: "co-statusbar",
                 template: `
-    <div class="circular-gauge-wrapper">
-      <ejs-circulargauge
-        class="circular-gauge"
-        [width]="'100%'"
-        [axes]="getAxes()">
-      </ejs-circulargauge>
+    <div class="co-statusbar-wrapper"
+         *ngIf="statusbarData"
+         (click)="onStatusbarClick($event)">
+      <div class="statuses">
+        <div *ngFor="let data of statusbarData; let index = index" class="status">
+          <co-linear-gauge [class.focused-status]="focusedStatusIndex !== undefined && focusedStatusIndex === index"
+            [value]="data.percentage" [count]="data.count ? data.count : undefined"></co-linear-gauge>
+        </div>
+      </div>
+      <div class=status-description-popup *ngIf="showPopup" @showHidePopup [ngClass]="popupClass" clickOutside (clickOutside)="showPopup=false">
+        <div class="status-descriptions">
+          <div *ngFor="let data of statusbarData; let index = index" class="status-description">
+            <co-circular-gauge [value]="data.percentage"></co-circular-gauge>
+            <span [textContent]="data.label"></span>
+          </div>
+        </div>
+      </div>
     </div>
   `,
+                animations: [
+                    trigger("showHidePopup", [
+                        state("void", style({ opacity: 0 })),
+                        state("*", style({ opacity: 1 })),
+                        transition("void <=> *", animate("250ms ease-in-out")),
+                    ])
+                ],
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-CoCircularGaugeComponent.propDecorators = {
-    circulargauge: [{ type: ViewChild, args: ['circulargauge',] }],
-    value: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-circular-gauge",] }]
+StatusbarComponent.ctorParameters = () => [];
+StatusbarComponent.propDecorators = {
+    statusbarData: [{ type: Input }],
+    focusedStatusIndex: [{ type: Input }],
+    statusbarClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-statusbar",] }]
 };
 
-class CoCircularGaugeModule {
+class StatusbarModule {
 }
-CoCircularGaugeModule.decorators = [
+StatusbarModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
-                    CircularGaugeModule
+                    CoCircularGaugeModule,
+                    CoLinearGaugeModule,
+                    ClickoutsideModule
                 ],
                 declarations: [
-                    CoCircularGaugeComponent
+                    StatusbarComponent
                 ],
                 exports: [
-                    CoCircularGaugeComponent
+                    StatusbarComponent
                 ]
             },] }
 ];
 
-class CoLinearGaugeComponent {
+class StockStatusbarComponent {
     constructor() {
-        this.color = GaugeColor.Low;
     }
-    set value(value) {
-        this._value = value;
-        this._setColor();
+}
+StockStatusbarComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-stock-statusbar",
+                template: `
+    <div class="status-bar">
+      <div class="status-bar-block" [ngClass]="{'red': value === 0, 'orange': value === 1, 'green': value === 2}"></div>
+      <div class="status-bar-block" [ngClass]="{'orange': value === 1, 'green': value === 2}"></div>
+      <div class="status-bar-block" [ngClass]="{'green': value === 2}"></div>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StockStatusbarComponent.ctorParameters = () => [];
+StockStatusbarComponent.propDecorators = {
+    value: [{ type: Input }]
+};
+
+class StockStatusbarModule {
+}
+StockStatusbarModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                ],
+                declarations: [
+                    StockStatusbarComponent
+                ],
+                exports: [
+                    StockStatusbarComponent
+                ]
+            },] }
+];
+
+class StockModule {
+}
+StockModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    InputComboBoxModule,
+                    CoGridModule,
+                    ButtonModule,
+                    CommonModule,
+                    InputRadioButtonModule,
+                    DropDownModule,
+                    SimpleGridModule,
+                    ImageModule,
+                    InputTextModule,
+                    SendMethodDialogModule,
+                    IconModule,
+                    InputNumberPickerModule,
+                    CoDialogWizardModule,
+                    InputTextareaModule,
+                    TabBarModule,
+                    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 = {}));
+
+class KeyPadComponent {
+    constructor(iconCacheService) {
+        this.iconCacheService = iconCacheService;
+        this.icons = Icon;
+        this.showValue = true;
+        this.emitModelChangeOnEnter = true;
+        this.modelChange = new EventEmitter();
+        this.internalModelChange = new EventEmitter();
+        this.enterClick = new 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;
+    }
+    set model(value) {
+        this._model = value;
+        this._internalModel = this._model + "";
+    }
+    get model() {
+        return this._model;
+    }
+    showClass() {
+        return true;
+    }
+    handleKeyDown(event) {
+        this._keyDown(event);
+    }
+    set internalModel(value) {
+        this._internalModel = value;
+        this.isNegative = parseFloat(this._internalModel) < 0;
+        this.internalModelChange.emit(this._internalModel);
+    }
+    get internalModel() {
+        return this._internalModel;
+    }
+    handleMinusClick(event) {
+        const model = parseFloat(this.internalModel);
+        if (model !== 0) {
+            if (model < 0) {
+                this.internalModel = Math.abs(model) + "";
+            }
+            else {
+                this.internalModel = -model + "";
+            }
+        }
+        this._emitModelChange();
+    }
+    handleClearClick(event) {
+        this.internalModel = "0";
+        this._emitModelChange();
+    }
+    handleBsClick(event) {
+        let wish = this.internalModel;
+        wish = wish.slice(0, wish.length - 1) || "0";
+        if (!isNaN(parseFloat(wish))) {
+            this.internalModel = parseFloat(wish) + "";
+        }
+        this._emitModelChange();
     }
-    get value() {
-        return this._value;
+    handleButtonClick(chr) {
+        this._updateModel(chr);
     }
-    showClass() {
-        return true;
+    handleEnterClick(event) {
+        this._emitModelChange(true);
+        this.enterClick.emit();
     }
-    getStyle() {
-        return `linear-gradient(90deg, ${this.color} 0 ${this.value}%, white ${this.value}% 100%`;
+    _updateModel(value) {
+        if (value === undefined || value === null ||
+            (value === '.' && this.internalModel.indexOf('.') > -1) ||
+            this.internalModel.length >= this._maxCharacters) {
+            return;
+        }
+        this.internalModel = this.internalModel !== "0" ? this.internalModel + value : value;
+        this._emitModelChange();
     }
-    _setColor() {
-        if (this.value <= 0) {
-            this.color = GaugeColor.Lowest;
+    _keyDown(event) {
+        if (this._isEnter(event)) {
+            this.handleEnterClick(event);
         }
-        else if (this.value >= 1 && this.value < 25) {
-            this.color = GaugeColor.Low;
+        else if (this._isMinus(event)) {
+            this.handleMinusClick(event);
         }
-        else if (this.value >= 25 && this.value < 50) {
-            this.color = GaugeColor.MediumLow;
+        else if (this._isEscape(event)) {
+            this.handleClearClick(event);
         }
-        else if (this.value >= 50 && this.value < 75) {
-            this.color = GaugeColor.MediumHigh;
+        else if (this._isBackspace(event)) {
+            this.handleBsClick(event);
         }
-        else if (this.value >= 75 && this.value < 100) {
-            this.color = GaugeColor.High;
+        else {
+            this._updateModel(this._validKeyMap.get(event.code));
         }
-        else if (this.value >= 100) {
-            this.color = GaugeColor.Highest;
+    }
+    _isEnter(event) {
+        return event.code === KeyboardCode.Enter || event.code === KeyboardCode.NumpadEnter;
+    }
+    _isMinus(event) {
+        return event.code === KeyboardCode.Minus || event.code === KeyboardCode.NumpadSubtract;
+    }
+    _isEscape(event) {
+        return event.code === KeyboardCode.Escape;
+    }
+    _isBackspace(event) {
+        return event.code === KeyboardCode.Backspace;
+    }
+    _emitModelChange(enter = false) {
+        if ((enter && this.emitModelChangeOnEnter) || (!enter && !this.emitModelChangeOnEnter)) {
+            const model = parseFloat(this.internalModel);
+            if (!isNaN(model)) {
+                if (enter && this.emitModelChangeOnEnter) {
+                    this.model = model;
+                }
+                this.modelChange.emit(model);
+            }
         }
     }
 }
-CoLinearGaugeComponent.decorators = [
+KeyPadComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-linear-gauge",
+                selector: 'co-key-pad',
                 template: `
-    <div class="linear-gauge"
-         [style.background]="getStyle()"
-         [style.border-color]="color"
-         [textContent]="count ? count : ''"
-    ></div>
-  `,
+    <div class="key-pad-wrapper">
+      <div class="key-pad-model-wrapper" *ngIf="showValue">
+        <div class="key-pad-model" [textContent]="internalModel" [class.negative]="isNegative"></div>
+      </div>
+      <div class="key-pad-button-wrapper">
+        <div class="key-pad-button button-7" [textContent]="'7'" (click)="handleButtonClick('7')"></div>
+        <div class="key-pad-button button-8" [textContent]="'8'" (click)="handleButtonClick('8')"></div>
+        <div class="key-pad-button button-9" [textContent]="'9'" (click)="handleButtonClick('9')"></div>
+        <div class="key-pad-button button-bs" (click)="handleBsClick($event)">
+          <co-icon [iconData]="iconCacheService.getIcon(icons.DeleteLeftRegular)"></co-icon>
+        </div>
+        <div class="key-pad-button button-4" [textContent]="'4'" (click)="handleButtonClick('4')"></div>
+        <div class="key-pad-button button-5" [textContent]="'5'" (click)="handleButtonClick('5')"></div>
+        <div class="key-pad-button button-6" [textContent]="'6'" (click)="handleButtonClick('6')"></div>
+        <div class="key-pad-button button-minus" [textContent]="'-'" (click)="handleMinusClick($event)"></div>
+        <div class="key-pad-button button-1" [textContent]="'1'" (click)="handleButtonClick('1')"></div>
+        <div class="key-pad-button button-2" [textContent]="'2'" (click)="handleButtonClick('2')"></div>
+        <div class="key-pad-button button-3" [textContent]="'3'" (click)="handleButtonClick('3')"></div>
+        <div class="key-pad-button button-enter" (click)="handleEnterClick($event)">
+          <span [textContent]="'enter'"></span>
+        </div>
+        <div class="key-pad-button button-0" [textContent]="'0'" (click)="handleButtonClick('0')"></div>
+        <div class="key-pad-button button-dot" [textContent]="'.'" (click)="handleButtonClick('.')"></div>
+      </div>
+    </div>
+    `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-CoLinearGaugeComponent.propDecorators = {
-    value: [{ type: Input }],
-    count: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-linear-gauge",] }]
+KeyPadComponent.ctorParameters = () => [
+    { type: IconCacheService }
+];
+KeyPadComponent.propDecorators = {
+    model: [{ type: Input }],
+    showValue: [{ type: Input }],
+    emitModelChangeOnEnter: [{ type: Input }],
+    modelChange: [{ type: Output }],
+    internalModelChange: [{ type: Output }],
+    enterClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ['class.co-key-pad',] }],
+    handleKeyDown: [{ type: HostListener, args: ['window:keydown', ['$event'],] }]
 };
 
-class CoLinearGaugeModule {
+class KeyPadModule {
 }
-CoLinearGaugeModule.decorators = [
+KeyPadModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
+                    IconModule
                 ],
                 declarations: [
-                    CoLinearGaugeComponent
+                    KeyPadComponent
                 ],
                 exports: [
-                    CoLinearGaugeComponent
+                    KeyPadComponent
                 ]
             },] }
 ];
 
-class StatusbarComponent {
-    constructor() {
-        this.statusbarClick = new EventEmitter();
-        this.showPopup = false;
-        this.popupClass = 'dropdown';
-    }
-    set statusbarData(value) {
-        this._statusbarData = value;
-        this.adjustTooHighPercentages();
-    }
-    get statusbarData() {
-        return this._statusbarData;
+class LayoutSwitcherComponent {
+    constructor(iconCacheService) {
+        this.iconCacheService = iconCacheService;
+        this.icon = Icon;
+        this.layoutItems = [];
+        this.layoutSwitchEmit = new EventEmitter();
+        this.showMaskSidebar = false;
+        this._activeIndex = 0;
     }
     showClass() {
         return true;
     }
-    onStatusbarClick(event) {
-        this.showPopup = !this.showPopup;
-        if (this.showPopup) {
-            this._mouseY = event.screenY;
-            this._windowHeight = window.innerHeight;
-            this.setPopupClass();
-        }
+    get activeIndex() {
+        return this._activeIndex;
     }
-    setPopupClass() {
-        const popupHeight = this.statusbarData.length * 30;
-        let dropdownInScreen = (this._mouseY + popupHeight) <= this._windowHeight;
-        if (dropdownInScreen) {
-            this.popupClass = 'dropdown';
-        }
-        else {
-            this.popupClass = 'dropup';
-        }
+    set activeIndex(index) {
+        this._activeIndex = index;
+        this.toggleMaskSidebar();
+        this.layoutSwitchEmit.emit(this.layoutItems[index]);
     }
-    adjustTooHighPercentages() {
-        this._statusbarData.forEach(data => data.percentage > 100 ? data.percentage = 100 : false);
+    toggleMaskSidebar() {
+        this.showMaskSidebar = !this.showMaskSidebar;
     }
 }
-StatusbarComponent.decorators = [
+LayoutSwitcherComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-statusbar",
+                selector: "co-layout-switcher",
                 template: `
-    <div class="co-statusbar-wrapper"
-         *ngIf="statusbarData"
-         (click)="onStatusbarClick($event)">
-      <div class="statuses">
-        <div *ngFor="let data of statusbarData; let index = index" class="status">
-          <co-linear-gauge [class.focused-status]="focusedStatusIndex !== undefined && focusedStatusIndex === index"
-            [value]="data.percentage" [count]="data.count ? data.count : undefined"></co-linear-gauge>
-        </div>
+    <div class="mask-wrapper" [class.mask-wrapper-active]='showMaskSidebar' @showHideSidebar>
+      <div class="icon-wrapper" (click)="toggleMaskSidebar()">
+        <co-icon class="icon-mask" [iconData]="iconCacheService.getIcon(icon.BringForwardRegular)" [@positionIcon]="showMaskSidebar"></co-icon>
+
+        <co-icon class='icon-mask-sidebar-handle' [@positionHandle]='showMaskSidebar' [iconData]="showMaskSidebar ? iconCacheService.getIcon(this.icon.AngleLeftSolid) : iconCacheService.getIcon(this.icon.AngleRightSolid)"></co-icon>
       </div>
-      <div class=status-description-popup *ngIf="showPopup" @showHidePopup [ngClass]="popupClass" clickOutside (clickOutside)="showPopup=false">
-        <div class="status-descriptions">
-          <div *ngFor="let data of statusbarData; let index = index" class="status-description">
-            <co-circular-gauge [value]="data.percentage"></co-circular-gauge>
-            <span [textContent]="data.label"></span>
-          </div>
-        </div>
+
+      <div class="mask-content" *ngIf="showMaskSidebar" @showHideSidebar>
+        <span *ngFor='let item of this.layoutItems' [class.active]="this.activeIndex === this.layoutItems.indexOf(item)" [textContent]="item" (click)='activeIndex = this.layoutItems.indexOf(item)' ></span>
       </div>
     </div>
+
   `,
                 animations: [
-                    trigger("showHidePopup", [
-                        state("void", style({ opacity: 0 })),
-                        state("*", style({ opacity: 1 })),
-                        transition("void <=> *", animate("250ms ease-in-out")),
+                    trigger("showHideSidebar", [
+                        state("void", style({ "width": "0" })),
+                        state("*", style({ "width": "*" })),
+                        transition("void <=> *", animate(200))
+                    ]),
+                    trigger("positionIcon", [
+                        state("true", style({ "left": "70px" })),
+                        state("false", style({ "left": "10px" })),
+                        transition("true <=> false", animate(200))
+                    ]),
+                    trigger("positionHandle", [
+                        state("true", style({ "left": "15px" })),
+                        state("false", style({ "left": "75px" })),
+                        transition("true <=> false", animate(200))
                     ])
                 ],
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-StatusbarComponent.ctorParameters = () => [];
-StatusbarComponent.propDecorators = {
-    statusbarData: [{ type: Input }],
-    focusedStatusIndex: [{ type: Input }],
-    statusbarClick: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.co-statusbar",] }]
+LayoutSwitcherComponent.ctorParameters = () => [
+    { type: IconCacheService }
+];
+LayoutSwitcherComponent.propDecorators = {
+    showClass: [{ type: HostBinding, args: ['class.co-layout-switcher',] }],
+    layoutItems: [{ type: Input }],
+    layoutSwitchEmit: [{ type: Output }]
 };
 
-class StatusbarModule {
+class LayoutSwitcherModule {
 }
-StatusbarModule.decorators = [
+LayoutSwitcherModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
-                    CoCircularGaugeModule,
-                    CoLinearGaugeModule,
-                    ClickoutsideModule
+                    IconModule
                 ],
                 declarations: [
-                    StatusbarComponent
+                    LayoutSwitcherComponent,
                 ],
                 exports: [
-                    StatusbarComponent
+                    LayoutSwitcherComponent
                 ]
             },] }
 ];
@@ -5969,5 +6030,5 @@ DatePlanningModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { CoCircularGaugeComponent, CoCircularGaugeModule, CoLinearGaugeComponent, CoLinearGaugeModule, DatePlanningComponent, DatePlanningModule, DocsignComponent, DocsignModule, KeyPadComponent, KeyPadModule, LayoutSwitcherComponent, LayoutSwitcherModule, SendMethodDialogComponent, SendMethodDialogModule, SharedService, StatusbarComponent, StatusbarModule, StockComponent, StockModule, sendMethodsWithIcon, SignatureComponent as ɵa, SignaturesComponent as ɵb, OrderStockTabComponent as ɵba, StockLocationComponent as ɵbb, StockHistoryComponent as ɵbc, OrderSupplyStockHistoryComponent as ɵbd, OrderCommissionStockHistoryComponent as ɵbe, OrderStockHistoryComponent as ɵbf, AllocationStockHistoryComponent as ɵbg, SendMethod as ɵbh, Icon as ɵbi, CalendarAllYearsComponent as ɵbj, CalendarAllMonthsComponent as ɵbk, CalendarHeaderComponent as ɵbl, CalendarComponent as ɵbm, CalendarViewComponent as ɵbn, LanguageCode as ɵbo, AgendaHeaderComponent as ɵbp, AgendaViewComponent as ɵbq, AgendaMonthViewComponent as ɵbr, AgendaBaseViewComponent as ɵbs, AgendaDayViewComponent as ɵbt, AgendaWeekViewComponent as ɵbu, AgendaWeekSelectViewComponent as ɵbv, AgendaHourViewComponent as ɵbw, AgendaHourCellComponent as ɵbx, AgendaHourViewLabelsComponent as ɵby, AgendaHalfHourCellComponent as ɵbz, StockService as ɵc, AgendaEventsComponent as ɵca, AgendaEventComponent as ɵcb, ViewSelectComponent as ɵcc, AgendaSelectEventComponent as ɵcd, MASTER_PIPES as ɵce, ArrayNumberPipe as ɵcf, UCfirstPipe as ɵcg, SharedConnectorService as ɵd, OptionsService as ɵe, DictionaryService as ɵf, IconCacheService as ɵg, SendMethodService as ɵh, SendMethodEmailModule as ɵi, LayoutSelectionModule as ɵj, LayoutSelectionComponent as ɵk, SendMethodEmailComponent as ɵl, SendMethodPrinterModule as ɵm, PrinterSelectionModule as ɵn, PrinterSelectionComponent as ɵo, SendMethodPrinterComponent as ɵp, TabBarModule as ɵq, TabBarComponent as ɵr, StockInformationComponent as ɵs, StockInformationGridComponent as ɵt, StockTransferComponent as ɵu, StockChangeAmountComponent as ɵv, StockTabComponent as ɵw, OrderTabComponent as ɵx, StockTabsComponent as ɵy, StockHistoryTabsComponent as ɵz };
+export { CoCircularGaugeComponent, CoCircularGaugeModule, CoLinearGaugeComponent, CoLinearGaugeModule, DatePlanningComponent, DatePlanningModule, DocsignComponent, DocsignModule, KeyPadComponent, KeyPadModule, LayoutSwitcherComponent, LayoutSwitcherModule, SendMethodDialogComponent, SendMethodDialogModule, SharedService, StatusbarComponent, StatusbarModule, StockComponent, StockModule, sendMethodsWithIcon, SignatureComponent as ɵa, SignaturesComponent as ɵb, StockTabsComponent as ɵba, StockHistoryTabsComponent as ɵbb, OrderStockTabComponent as ɵbc, StockLocationComponent as ɵbd, StockHistoryComponent as ɵbe, OrderSupplyStockHistoryComponent as ɵbf, OrderCommissionStockHistoryComponent as ɵbg, OrderStockHistoryComponent as ɵbh, AllocationStockHistoryComponent as ɵbi, SendMethod as ɵbj, Icon as ɵbk, CalendarAllYearsComponent as ɵbl, CalendarAllMonthsComponent as ɵbm, CalendarHeaderComponent as ɵbn, CalendarComponent as ɵbo, CalendarViewComponent as ɵbp, LanguageCode as ɵbq, AgendaHeaderComponent as ɵbr, AgendaViewComponent as ɵbs, AgendaMonthViewComponent as ɵbt, AgendaBaseViewComponent as ɵbu, AgendaDayViewComponent as ɵbv, AgendaWeekViewComponent as ɵbw, AgendaWeekSelectViewComponent as ɵbx, AgendaHourViewComponent as ɵby, AgendaHourCellComponent as ɵbz, StockService as ɵc, AgendaHourViewLabelsComponent as ɵca, AgendaHalfHourCellComponent as ɵcb, AgendaEventsComponent as ɵcc, AgendaEventComponent as ɵcd, ViewSelectComponent as ɵce, AgendaSelectEventComponent as ɵcf, MASTER_PIPES as ɵcg, ArrayNumberPipe as ɵch, UCfirstPipe as ɵci, SharedConnectorService as ɵd, OptionsService as ɵe, DictionaryService as ɵf, IconCacheService as ɵg, SendMethodService as ɵh, SendMethodEmailModule as ɵi, LayoutSelectionModule as ɵj, LayoutSelectionComponent as ɵk, SendMethodEmailComponent as ɵl, SendMethodPrinterModule as ɵm, PrinterSelectionModule as ɵn, PrinterSelectionComponent as ɵo, SendMethodPrinterComponent as ɵp, TabBarModule as ɵq, TabBarComponent as ɵr, StockStatusbarModule as ɵs, StockStatusbarComponent as ɵt, StockInformationComponent as ɵu, StockInformationGridComponent as ɵv, StockTransferComponent as ɵw, StockChangeAmountComponent as ɵx, StockTabComponent as ɵy, OrderTabComponent as ɵz };
 //# sourceMappingURL=colijnit-sharedcomponents.js.map