@colijnit/sharedcomponents 1.0.39 → 1.0.41

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, OverlayService, ClickoutsideModule, OverlayModule, 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) },
@@ -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>
@@ -3342,51 +3377,443 @@ AllocationStockHistoryComponent.propDecorators = {
     allocationStockHistory: [{ type: Input }]
 };
 
-class StockModule {
+var GaugeColor;
+(function (GaugeColor) {
+    GaugeColor["Lowest"] = "#E0E0E0";
+    GaugeColor["Low"] = "#fff7b8";
+    GaugeColor["MediumLow"] = "#ffe367";
+    GaugeColor["MediumHigh"] = "#ffc15b";
+    GaugeColor["High"] = "#F88952";
+    GaugeColor["Highest"] = "#5FDCB3";
+})(GaugeColor || (GaugeColor = {}));
+
+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 value(value) {
+        this._value = value;
+        this._setColor();
+    }
+    get value() {
+        return this._value;
+    }
+    get color() {
+        return this._color;
+    }
+    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',
+                }];
+        }
+    }
+    _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;
+        }
+    }
 }
-StockModule.decorators = [
+CoCircularGaugeComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-circular-gauge",
+                template: `
+    <div class="circular-gauge-wrapper">
+      <ejs-circulargauge
+        class="circular-gauge"
+        [width]="'100%'"
+        [axes]="getAxes()">
+      </ejs-circulargauge>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+CoCircularGaugeComponent.propDecorators = {
+    circulargauge: [{ type: ViewChild, args: ['circulargauge',] }],
+    value: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-circular-gauge",] }]
+};
+
+class CoCircularGaugeModule {
+}
+CoCircularGaugeModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
-                    InputComboBoxModule,
-                    CoGridModule,
-                    ButtonModule,
                     CommonModule,
-                    InputRadioButtonModule,
-                    DropDownModule,
-                    SimpleGridModule,
-                    ImageModule,
-                    InputTextModule,
-                    SendMethodDialogModule,
-                    IconModule,
-                    InputNumberPickerModule,
-                    CoDialogWizardModule,
-                    InputTextareaModule,
-                    TabBarModule,
-                    CoDialogModule
+                    CircularGaugeModule
                 ],
                 declarations: [
-                    StockComponent,
-                    StockInformationComponent,
-                    StockInformationGridComponent,
-                    StockTransferComponent,
-                    StockChangeAmountComponent,
-                    StockTabComponent,
-                    OrderTabComponent,
-                    StockTabsComponent,
-                    StockHistoryTabsComponent,
-                    OrderStockTabComponent,
-                    StockLocationComponent,
-                    StockHistoryComponent,
-                    OrderSupplyStockHistoryComponent,
-                    OrderCommissionStockHistoryComponent,
-                    OrderStockHistoryComponent,
-                    AllocationStockHistoryComponent
+                    CoCircularGaugeComponent
                 ],
                 exports: [
-                    StockComponent
-                ],
-                providers: [
-                    StockService
+                    CoCircularGaugeComponent
+                ]
+            },] }
+];
+
+class CoLinearGaugeComponent {
+    constructor() {
+        this.color = GaugeColor.Low;
+    }
+    set value(value) {
+        this._value = value;
+        this._setColor();
+    }
+    get value() {
+        return this._value;
+    }
+    showClass() {
+        return true;
+    }
+    getStyle() {
+        return `linear-gradient(90deg, ${this.color} 0 ${this.value}%, white ${this.value}% 100%`;
+    }
+    _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;
+        }
+    }
+}
+CoLinearGaugeComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-linear-gauge",
+                template: `
+    <div class="linear-gauge"
+         [style.background]="getStyle()"
+         [style.border-color]="color"
+         [textContent]="count ? count : ''"
+    ></div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+CoLinearGaugeComponent.propDecorators = {
+    value: [{ type: Input }],
+    count: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-linear-gauge",] }]
+};
+
+class CoLinearGaugeModule {
+}
+CoLinearGaugeModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                ],
+                declarations: [
+                    CoLinearGaugeComponent
+                ],
+                exports: [
+                    CoLinearGaugeComponent
+                ]
+            },] }
+];
+
+class StatusbarPopupComponent {
+    constructor() {
+        this.statusbarData = [];
+        this.showClass = true;
+    }
+}
+StatusbarPopupComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-statusbar-popup",
+                template: `
+        <div class="co-statusbar-popup-wrapper" [overlay]="parentForOverlay">
+            <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>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StatusbarPopupComponent.propDecorators = {
+    statusbarData: [{ type: Input }],
+    parentForOverlay: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-statusbar-popup",] }]
+};
+
+class StatusbarComponent {
+    constructor(_elementRef, _overlayService) {
+        this._elementRef = _elementRef;
+        this._overlayService = _overlayService;
+        this.statusbarClick = new EventEmitter();
+        this.popupShowing = false;
+    }
+    set statusbarData(value) {
+        this._statusbarData = value;
+        this.adjustTooHighPercentages();
+    }
+    get statusbarData() {
+        return this._statusbarData;
+    }
+    showClass() {
+        return true;
+    }
+    handleClick(event) {
+        this.handleShowPopup(event);
+    }
+    handleShowPopup(event) {
+        if (this.popupShowing) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this._overlayService.createComponent(StatusbarPopupComponent, { parentForOverlay: this._elementRef, statusbarData: this.statusbarData });
+        this.popupShowing = true;
+    }
+    handleHidePopup() {
+        this._overlayService.removeComponent();
+        this.popupShowing = false;
+    }
+    adjustTooHighPercentages() {
+        this._statusbarData.forEach(data => data.percentage > 100 ? data.percentage = 100 : false);
+    }
+}
+StatusbarComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-statusbar",
+                template: `
+    <div class="co-statusbar-wrapper" *ngIf="statusbarData" [clickOutside]="popupShowing"
+         (clickOutside)="handleHidePopup()">
+      <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>
+  `,
+                providers: [
+                    OverlayService
+                ],
+                animations: [
+                    trigger("showHidePopup", [
+                        state("void", style({ opacity: 0 })),
+                        state("*", style({ opacity: 1 })),
+                        transition("void <=> *", animate("250ms ease-in-out")),
+                    ])
+                ],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StatusbarComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: OverlayService }
+];
+StatusbarComponent.propDecorators = {
+    statusbarData: [{ type: Input }],
+    focusedStatusIndex: [{ type: Input }],
+    statusbarClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-statusbar",] }],
+    handleClick: [{ type: HostListener, args: ["click", ["$event"],] }]
+};
+
+class StatusbarModule {
+}
+StatusbarModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoCircularGaugeModule,
+                    CoLinearGaugeModule,
+                    ClickoutsideModule,
+                    OverlayModule
+                ],
+                declarations: [
+                    StatusbarComponent,
+                    StatusbarPopupComponent
+                ],
+                exports: [
+                    StatusbarComponent,
+                    StatusbarPopupComponent
+                ]
+            },] }
+];
+
+class StockStatusbarComponent {
+    constructor() {
+    }
+}
+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
                 ]
             },] }
 ];
@@ -3714,330 +4141,6 @@ LayoutSwitcherModule.decorators = [
             },] }
 ];
 
-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 {
-    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();
-    }
-    get value() {
-        return this._value;
-    }
-    get color() {
-        return this._color;
-    }
-    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',
-                }];
-        }
-    }
-    _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;
-        }
-    }
-}
-CoCircularGaugeComponent.decorators = [
-    { type: Component, args: [{
-                selector: "co-circular-gauge",
-                template: `
-    <div class="circular-gauge-wrapper">
-      <ejs-circulargauge
-        class="circular-gauge"
-        [width]="'100%'"
-        [axes]="getAxes()">
-      </ejs-circulargauge>
-    </div>
-  `,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-CoCircularGaugeComponent.propDecorators = {
-    circulargauge: [{ type: ViewChild, args: ['circulargauge',] }],
-    value: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-circular-gauge",] }]
-};
-
-class CoCircularGaugeModule {
-}
-CoCircularGaugeModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    CircularGaugeModule
-                ],
-                declarations: [
-                    CoCircularGaugeComponent
-                ],
-                exports: [
-                    CoCircularGaugeComponent
-                ]
-            },] }
-];
-
-class CoLinearGaugeComponent {
-    constructor() {
-        this.color = GaugeColor.Low;
-    }
-    set value(value) {
-        this._value = value;
-        this._setColor();
-    }
-    get value() {
-        return this._value;
-    }
-    showClass() {
-        return true;
-    }
-    getStyle() {
-        return `linear-gradient(90deg, ${this.color} 0 ${this.value}%, white ${this.value}% 100%`;
-    }
-    _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;
-        }
-    }
-}
-CoLinearGaugeComponent.decorators = [
-    { type: Component, args: [{
-                selector: "co-linear-gauge",
-                template: `
-    <div class="linear-gauge"
-         [style.background]="getStyle()"
-         [style.border-color]="color"
-         [textContent]="count ? count : ''"
-    ></div>
-  `,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-CoLinearGaugeComponent.propDecorators = {
-    value: [{ type: Input }],
-    count: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-linear-gauge",] }]
-};
-
-class CoLinearGaugeModule {
-}
-CoLinearGaugeModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                ],
-                declarations: [
-                    CoLinearGaugeComponent
-                ],
-                exports: [
-                    CoLinearGaugeComponent
-                ]
-            },] }
-];
-
-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;
-    }
-    showClass() {
-        return true;
-    }
-    onStatusbarClick(event) {
-        this.showPopup = !this.showPopup;
-        if (this.showPopup) {
-            this._mouseY = event.screenY;
-            this._windowHeight = window.innerHeight;
-            this.setPopupClass();
-        }
-    }
-    setPopupClass() {
-        const popupHeight = this.statusbarData.length * 30;
-        let dropdownInScreen = (this._mouseY + popupHeight) <= this._windowHeight;
-        if (dropdownInScreen) {
-            this.popupClass = 'dropdown';
-        }
-        else {
-            this.popupClass = 'dropup';
-        }
-    }
-    adjustTooHighPercentages() {
-        this._statusbarData.forEach(data => data.percentage > 100 ? data.percentage = 100 : false);
-    }
-}
-StatusbarComponent.decorators = [
-    { type: Component, args: [{
-                selector: "co-statusbar",
-                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>
-      <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
-            },] }
-];
-StatusbarComponent.ctorParameters = () => [];
-StatusbarComponent.propDecorators = {
-    statusbarData: [{ type: Input }],
-    focusedStatusIndex: [{ type: Input }],
-    statusbarClick: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.co-statusbar",] }]
-};
-
-class StatusbarModule {
-}
-StatusbarModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    CoCircularGaugeModule,
-                    CoLinearGaugeModule,
-                    ClickoutsideModule
-                ],
-                declarations: [
-                    StatusbarComponent
-                ],
-                exports: [
-                    StatusbarComponent
-                ]
-            },] }
-];
-
 class DatePlanningComponent {
     constructor(_changeDetector, renderer) {
         this._changeDetector = _changeDetector;
@@ -5955,5 +6058,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, OrderTabComponent as ɵba, StockTabsComponent as ɵbb, StockHistoryTabsComponent as ɵbc, OrderStockTabComponent as ɵbd, StockLocationComponent as ɵbe, StockHistoryComponent as ɵbf, OrderSupplyStockHistoryComponent as ɵbg, OrderCommissionStockHistoryComponent as ɵbh, OrderStockHistoryComponent as ɵbi, AllocationStockHistoryComponent as ɵbj, SendMethod as ɵbk, Icon as ɵbl, CalendarAllYearsComponent as ɵbm, CalendarAllMonthsComponent as ɵbn, CalendarHeaderComponent as ɵbo, CalendarComponent as ɵbp, CalendarViewComponent as ɵbq, LanguageCode as ɵbr, AgendaHeaderComponent as ɵbs, AgendaViewComponent as ɵbt, AgendaMonthViewComponent as ɵbu, AgendaBaseViewComponent as ɵbv, AgendaDayViewComponent as ɵbw, AgendaWeekViewComponent as ɵbx, AgendaWeekSelectViewComponent as ɵby, AgendaHourViewComponent as ɵbz, StockService as ɵc, AgendaHourCellComponent as ɵca, AgendaHourViewLabelsComponent as ɵcb, AgendaHalfHourCellComponent as ɵcc, AgendaEventsComponent as ɵcd, AgendaEventComponent as ɵce, ViewSelectComponent as ɵcf, AgendaSelectEventComponent as ɵcg, MASTER_PIPES as ɵch, ArrayNumberPipe as ɵci, UCfirstPipe as ɵcj, 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, StatusbarPopupComponent as ɵs, StockStatusbarModule as ɵt, StockStatusbarComponent as ɵu, StockInformationComponent as ɵv, StockInformationGridComponent as ɵw, StockTransferComponent as ɵx, StockChangeAmountComponent as ɵy, StockTabComponent as ɵz };
 //# sourceMappingURL=colijnit-sharedcomponents.js.map