@colijnit/sharedcomponents 1.0.31 → 1.0.33

package/README.md

@@ -1,24 +1,24 @@
-# Sharedcomponents
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project sharedcomponents` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project sharedcomponents`.
-> Note: Don't forget to add `--project sharedcomponents` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build sharedcomponents` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build sharedcomponents`, go to the dist folder `cd dist/sharedcomponents` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test sharedcomponents` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# Sharedcomponents
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project sharedcomponents` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project sharedcomponents`.
+> Note: Don't forget to add `--project sharedcomponents` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build sharedcomponents` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build sharedcomponents`, go to the dist folder `cd dist/sharedcomponents` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test sharedcomponents` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/bundles/colijnit-sharedcomponents.umd.js

@@ -1580,7 +1580,7 @@
     StockComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock",
-                    template: "\n      <div class=\"stock-info-container\">\n        <co-stock-information [article]=\"articleExtended\"\n                              [articleStock]=\"\"\n                              [allAvailableStockInformation]=\"allAvailableStock\"\n                              [allTechnicalStockInformation]=\"allTechnicalStock\"\n        >\n        </co-stock-information>\n        <hr>\n        <co-stock-information-grid *ngIf=\"showStockInformationGrid\"\n                                   [article]=\"articleExtended\"\n                                   [stockLocationData]=\"stockLocationInformation\"\n                                   [articleStockInformation]=\"stockInformation\"\n                                   (transferIconClicked)=\"handleStockTransferClick($event)\"\n                                   (historyClicked)=\"getStockHistory()\"\n                                   [stockHistoryInformation]=\"stockHistory\"\n                                   (okButtonClicked)=\"okButtonClicked.emit()\"\n                                   (cancelButtonClicked)=\"cancelButtonClicked.emit()\"\n        >\n        </co-stock-information-grid>\n        <co-stock-location *ngIf=\"showStockLocation\"\n                           (backToStockLines)=\"backToStockLinesClicked()\">\n\n        </co-stock-location>\n        <co-stock-transfer *ngIf=\"showStockTransfer\"\n                           (handleCancelClicked)=\"backToStock()\"\n                            [article]=\"stockTransferArticle\"\n                           [articleToTransfer]=\"stockTransferArticleDetails\"\n                           [stockSticker]=\"stockService.stockStickers\"\n                           (handleStickerClicked)=\"handleStickerClicked.emit($event)\"\n                           [articleWarehouse]=\"articleWarehouse\"\n                           [allWarehouses]=\"allWarehouses\"\n        >\n        </co-stock-transfer>\n      </div>\n  ",
+                    template: "\n      <div class=\"stock-info-container\">\n        <co-stock-information [article]=\"articleExtended\"\n                              [articleStock]=\"\"\n                              [allAvailableStockInformation]=\"allAvailableStock\"\n                              [allTechnicalStockInformation]=\"allTechnicalStock\"\n        >\n        </co-stock-information>\n        <hr>\n        <co-stock-information-grid *ngIf=\"showStockInformationGrid\"\n                                   [article]=\"articleExtended\"\n                                   [stockLocationData]=\"stockLocationInformation\"\n                                   [articleStockInformation]=\"stockInformation\"\n                                   (transferIconClicked)=\"handleStockTransferClick($event)\"\n                                   (historyClicked)=\"getStockHistory()\"\n                                   [stockHistoryInformation]=\"stockHistory\"\n                                   (okButtonClicked)=\"okButtonClicked.emit()\"\n                                   (cancelButtonClicked)=\"cancelButtonClicked.emit()\"\n        >\n        </co-stock-information-grid>\n        <co-stock-location *ngIf=\"showStockLocation\"\n                           (backToStockLines)=\"backToStockLinesClicked()\">\n\n        </co-stock-location>\n        <co-stock-transfer *ngIf=\"showStockTransfer\"\n                           (handleClick)=\"backToStock()\"\n                            [article]=\"stockTransferArticle\"\n                           [articleToTransfer]=\"stockTransferArticleDetails\"\n                           [stockSticker]=\"stockService.stockStickers\"\n                           (handleStickerClicked)=\"handleStickerClicked.emit($event)\"\n                           [articleWarehouse]=\"articleWarehouse\"\n                           [allWarehouses]=\"allWarehouses\"\n        >\n        </co-stock-transfer>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -1792,7 +1792,6 @@
             this.getArticleDetails(data);
             this.hideOrShowTabs = false;
             this.hideOrShowLocationTab = true;
-            this._stockService.lockArticleDetails(this.articleDetailsInformation);
         };
         StockInformationGridComponent.prototype.handleHistoryClick = function () {
             this.historyClicked.emit();
@@ -1890,7 +1889,7 @@
                     switch (_b.label) {
                         case 0:
                             orderData = new articleTransaction.ArticleTransaction();
-                            orderData.type = "V";
+                            orderData.type = "I";
                             orderData.goodId = this.articleStockInformation[0].goodId.toString();
                             _a = this;
                             return [4 /*yield*/, this._stockService.getArticleTransaction(orderData)];
@@ -1901,32 +1900,53 @@
                 });
             });
         };
-        StockInformationGridComponent.prototype.onSelectLocation = function () {
+        StockInformationGridComponent.prototype.onLocationDropdownClick = function () {
             var _this = this;
             this._stockService.getStockManagementLocations(this.selectedWarehouse).then(function (locations) {
                 _this.stockLocations = locations;
             });
         };
+        StockInformationGridComponent.prototype.onLocationSelected = function (location) {
+            this.selectedArticleDetailsData.locationNo = location;
+        };
         StockInformationGridComponent.prototype.onOkClickSendLocations = function () {
-            console.log(this.article);
-            this.selectedArticleDetailsData.selected = true;
-            this.selectedArticleDetailsData.goodId = this.article.goodId;
-            this.selectedArticleDetailsData.entryDate = new Date();
-            this.selectedArticleDetailsData.warehouseNo = this.selectedWarehouse;
-            this._stockService.updateArticleDetails(this.selectedArticleDetailsData);
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            console.log(this.article);
+                            this.selectedArticleDetailsData.selected = true;
+                            this.selectedArticleDetailsData.goodId = this.article.goodId;
+                            this.selectedArticleDetailsData.entryDate = new Date();
+                            this.selectedArticleDetailsData.warehouseNo = this.selectedWarehouse;
+                            return [4 /*yield*/, this._stockService.updateArticleDetails(this.selectedArticleDetailsData)];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, this._stockService.getArticleDetails(this.articleDetailsInformation).then(function (details) {
+                                    _this.articleDetails = details;
+                                })];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         StockInformationGridComponent.prototype.onCancelClickSendLocations = function () {
         };
-        StockInformationGridComponent.prototype.amountInStockChanged = function (data, row) {
-            console.log(data);
-            console.log(row);
+        StockInformationGridComponent.prototype.amountInStockChanged = function (data) {
+            this.selectedArticleDetailsData.amountInStock = data;
+        };
+        StockInformationGridComponent.prototype.lockSelectedRow = function (row) {
+            this._stockService.lockArticleDetails(row);
         };
         return StockInformationGridComponent;
     }());
     StockInformationGridComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-information-grid",
-                    template: "\n    <div class=\"tab-link show\" *ngIf=\"hideOrShowTabs\">\n      <span class=\"tab-link-buttons\"\n            *ngFor=\"let tab of tabs\"\n            (click)=\"handleTabClick(tab)\"\n            [textContent]=\"tab\"\n            [class.active]=\"tab === activeTab\"\n      ></span>\n    </div>\n\n    <div class=\"stock-line\">\n      <div [textContent]=\"activeTabText\"></div>\n\n    </div>\n\n    <div class=\"stock-grid\">\n      <co-simple-grid *ngIf=\"activeTab === tabs[0] && hideOrShowTabs\"\n                      [data]=\"articleStockInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n          <co-simple-grid-column [headerText]=\"'WAREHOUSE'\" [field]=\"'warehouseNo'\" [order]=\"10\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'DESCRIPTION'\" [field]=\"'warehouseName'\" [order]=\"11\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'STOCK'\" [field]=\"'technicalStock'\" [order]=\"12\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'AVAILABLE_STOCK'\" [field]=\"'availableStock'\" [order]=\"13\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'ECONOMICAL_STOCK'\" [field]=\"'economicalStock'\" [order]=\"14\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'LOCATION'\" [field]=\"'locationNo'\" [order]=\"15\">\n            <ng-template #template let-row=\"row\">\n              <span [textContent]=\"'Bekijken'\" (click)=\"onLocationClick(row)\"></span>\n            </ng-template>\n          </co-simple-grid-column>\n      </co-simple-grid>\n\n      <co-simple-grid *ngIf=\"activeTab === tabs[1]\"\n                      [data]=\"inOrderInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n        <co-simple-grid-column [headerText]=\"'IN_ORDER2'\" [field]=\"'transactionNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'CUSTOMER'\" [field]=\"'user'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DATE'\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.transactionDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AMOUNT'\" [field]=\"'amountInOrder'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'WAREHOUSE'\" [field]=\"'wareHouseNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DESCRIPTION'\" [field]=\"'locationNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK'\" [field]=\"'amountInStock'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSFER'\" [field]=\"'transfer'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.DeliveryTruck)\" (click)=\"handleStockTransferClick($event)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STICKER'\" [field]=\"'sticker'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\" (click)=\"openSendMethodDialog(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n\n      <co-simple-grid *ngIf=\"activeTab === tabs[2]\"\n                      [data]=\"orderInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n        <co-simple-grid-column [headerText]=\"'PURCHASE_ORDER_NR'\" [field]=\"'transactionNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DATE'\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.transactionDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AMOUNT'\" [field]=\"'amountInOrder'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'RESERVED'\" [field]=\"'reserved'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'FREE_STOCK'\" [field]=\"'freeStock'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DELIVERY_DATE1'\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.deliveryDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'RESERVE'\" [field]=\"'reservation'\"></co-simple-grid-column>\n      </co-simple-grid>\n    </div>\n\n    <div class=\"stock-grid\" *ngIf=\"hideOrShowLocationTab\">\n      <div class=\"stock-location-group\">\n        <div class=\"stock-location-left-group\">\n          <span class=\"stock-button-back\" [textContent]=\"'BACK_TO_STOCK_LINES'\" (click)=\"handleBackToStockClick()\"></span>\n        </div>\n        <div class=\"stock-location-right-group\">\n          <co-drop-down-list  [(model)]=\"selectedWarehouse\"\n                              [collection]=\"dataWareHouseCode\"\n                              [fields]=\"dataWareHouseFields\"\n                              [placeholder]=\"'WAREHOUSE'\"\n                              (modelChange)=\"onSelectWarehouse($event)\"\n                              [required]=\"true\"\n          ></co-drop-down-list>\n        </div>\n      </div>\n\n<!--      TODO move to own component stock-location-->\n      <co-simple-grid [data]=\"articleDetails\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n                      [showAdd]=\"true\"\n                      [showToolbar]=\"true\"\n                      [showDelete]=\"true\"\n                      [inlineEdit]=\"true\"\n      >\n        <div class=\"stock-location-group\">\n          <div class=\"stock-location-left-group\">\n            <co-button class=\"stock-lines-button\" [textContent]=\"'BACK_TO_STOCK_LINES'\" (click)=\"handleBackToStockClick()\"></co-button>\n          </div>\n        </div>\n        <co-simple-grid-column [headerText]=\"'LOCATION'\" [field]=\"'locationNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-drop-down-list [(model)]=\"row.locationNo\"\n                               [collection]=\"stockLocations\"\n                               [fields]=\"dataLocationFields\"\n                               [placeholder]=\"'LOCATION'\"\n                               (click)=\"onSelectLocation()\"\n                               [required]=\"true\"\n            ></co-drop-down-list>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'BATCH'\" [field]=\"'batchNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text [(model)]=\"row.batchNo\"\n                           [placeholder]=\"'BATCH'\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'SERIAL_NO'\" [field]=\"'serialNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text [(model)]=\"row.serialNo\"\n                           [placeholder]=\"'SERIAL_NO'\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK'\" [field]=\"'amountInStock'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text  [(model)]=\"row.amountInStock\"\n                            [label]=\"'STOCK'\"\n                            (modelChange)=\"amountInStockChanged($event, row)\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'ALLOCATED'\" [field]=\"'stockAssigned'\" ></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AVAILABLE_STOCK'\" [field]=\"'perceptibleStorage'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'PHYSICAL_STOCK'\" [field]=\"'amountInStockOriginal'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'VALUTA'\" [field]=\"'currency'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'PURCHASE_PRICE'\" [field]=\"'purchasePrice'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'SUPPLIER_NUMBER'\" [field]=\"'supplierNo'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSFER'\" [field]=\"'transfer'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.DeliveryTruck)\" (click)=\"handleStockTransferClick(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STICKER'\" [field]=\"'sticker'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\" (click)=\"openSendMethodDialog(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n    </div>\n\n    <co-stock-change-amount *ngIf=\"showChangeStockDetails\"\n                            (closeStockChangeAmount)=\"showChangeStockDetails = false\"\n                            [selectedArticleDetailsData]=\"selectedArticleDetailsData\"\n    >\n    </co-stock-change-amount>\n\n    <div class=\"stock-grid\" *ngIf=\"showStockHistory\">\n      <div class=\"stock-button-left-group\">\n        <span class=\"stock-button-back\" [textContent]=\"'BACK_TO_STOCK_LINES'\" (click)=\"backToStockInformation()\"></span>\n      </div>\n      <co-simple-grid [data]=\"stockHistoryInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n        <co-simple-grid-column [headerText]=\"'MUTATION_DATE'\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.mutationDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'MUTATION_TIME'\" [field]=\"'mutationTime'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AMOUNT'\" [field]=\"'amount'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'WAREHOUSE'\" [field]=\"'wareHouseNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'LOCATION'\" [field]=\"'locationNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSACTION_TYPE'\" [field]=\"'transType'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DOCUMENT_NUMBER'\" [field]=\"'docNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'LINE'\" [field]=\"'posLineNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK_STATE'\" [field]=\"'stockStateId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK_REMARK'\" [field]=\"'stockStateRemarkId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'VALUTA'\" [field]=\"'currencyCode'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'RELATION_ID'\" [field]=\"'relationId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'USER'\" [field]=\"'user'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'MUTATION_TYPE'\" [field]=\"'mutationType'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STICKER'\" [field]=\"'sticker'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\" (click)=\"openSendMethodDialog(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n    </div>\n\n    <div class=\"stock-button-toolbar\">\n      <div class=\"stock-button-left-group\">\n        <co-button *ngIf=\"activeTab === tabs[0]\" [label]=\"'HISTORY'\" (click)=\"handleHistoryClick()\"></co-button>\n      </div>\n      <div class=\"stock-button-middle-group\" *ngIf=\"activeTab !== tabs[0]\">\n        <div class=\"button-left\">\n          <co-button [textContent]=\"'Ok'\" (click)=\"onOkClick()\"></co-button>\n        </div>\n        <div class=\"button-right\">\n          <co-button [textContent]=\"'Annuleren'\" (click)=\"onCancelClick()\"></co-button>\n        </div>\n      </div>\n\n      <div class=\"stock-button-middle-group\" *ngIf=\"hideOrShowLocationTab\">\n        <div class=\"button-left\">\n          <co-button [textContent]=\"'Ok'\" (click)=\"onOkClickSendLocations()\"></co-button>\n        </div>\n        <div class=\"button-right\">\n          <co-button [textContent]=\"'Annuleren'\" (click)=\"onCancelClickSendLocations()\"></co-button>\n        </div>\n      </div>\n    </div>\n    <co-send-method-dialog *ngIf=\"showSendMethodDialog\"\n                           (closeClick)=\"showSendMethodDialog = false\"\n                           (printButtonClicked)=\"printStockStickers()\"\n    ></co-send-method-dialog>\n  ",
+                    template: "\n    <div class=\"tab-link show\" *ngIf=\"hideOrShowTabs\">\n      <span class=\"tab-link-buttons\"\n            *ngFor=\"let tab of tabs\"\n            (click)=\"handleTabClick(tab)\"\n            [textContent]=\"tab\"\n            [class.active]=\"tab === activeTab\"\n      ></span>\n    </div>\n\n    <div class=\"stock-line\">\n      <div [textContent]=\"activeTabText\"></div>\n\n    </div>\n\n    <div class=\"stock-grid\">\n      <co-simple-grid *ngIf=\"activeTab === tabs[0] && hideOrShowTabs\"\n                      [data]=\"articleStockInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n          <co-simple-grid-column [headerText]=\"'WAREHOUSE'\" [field]=\"'warehouseNo'\" [order]=\"10\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'DESCRIPTION'\" [field]=\"'warehouseName'\" [order]=\"11\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'STOCK'\" [field]=\"'technicalStock'\" [order]=\"12\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'AVAILABLE_STOCK'\" [field]=\"'availableStock'\" [order]=\"13\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'ECONOMICAL_STOCK'\" [field]=\"'economicalStock'\" [order]=\"14\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'LOCATION'\" [field]=\"'locationNo'\" [order]=\"15\">\n            <ng-template #template let-row=\"row\">\n              <span class=\"location-link\" [textContent]=\"'Bekijken'\" (click)=\"onLocationClick(row)\"></span>\n            </ng-template>\n          </co-simple-grid-column>\n      </co-simple-grid>\n\n      <co-simple-grid *ngIf=\"activeTab === tabs[1]\"\n                      [data]=\"inOrderInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n        <co-simple-grid-column [headerText]=\"'IN_ORDER2'\" [field]=\"'transactionNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'CUSTOMER'\" [field]=\"'customerName'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DATE'\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.transactionDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AMOUNT'\" [field]=\"'amountInOrder'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'WAREHOUSE'\" [field]=\"'warehouseNumber'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DESCRIPTION'\" [field]=\"'warehouseDescription'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSFER'\" [field]=\"'transfer'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.DeliveryTruck)\" (click)=\"handleStockTransferClick($event)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STICKER'\" [field]=\"'sticker'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\" (click)=\"openSendMethodDialog(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n\n      <co-simple-grid *ngIf=\"activeTab === tabs[2]\"\n                      [data]=\"orderInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n        <co-simple-grid-column [headerText]=\"'PURCHASE_ORDER_NR'\" [field]=\"'transactionNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DATE'\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.transactionDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AMOUNT'\" [field]=\"'amountInOrder'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'RESERVED'\" [field]=\"'reserved'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'FREE_STOCK'\" [field]=\"'InOrderForStock'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DELIVERY_DATE1'\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.deliveryDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n    </div>\n\n    <div class=\"stock-grid\" *ngIf=\"hideOrShowLocationTab\">\n      <div class=\"stock-location-group\">\n        <div class=\"stock-location-left-group\">\n          <span class=\"stock-button-back\" [textContent]=\"'BACK_TO_STOCK_LINES'\" (click)=\"handleBackToStockClick()\"></span>\n        </div>\n        <div class=\"stock-location-right-group\">\n          <co-drop-down-list  [(model)]=\"selectedWarehouse\"\n                              [collection]=\"dataWareHouseCode\"\n                              [fields]=\"dataWareHouseFields\"\n                              [placeholder]=\"'WAREHOUSE'\"\n                              (modelChange)=\"onSelectWarehouse($event)\"\n                              [required]=\"true\"\n          ></co-drop-down-list>\n        </div>\n      </div>\n\n<!--      TODO move to own component stock-location-->\n      <co-simple-grid [data]=\"articleDetails\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n                      [showAdd]=\"true\"\n                      [showToolbar]=\"true\"\n                      [showDelete]=\"true\"\n                      [inlineEdit]=\"true\"\n                      (dblClickRow)=\"lockSelectedRow($event)\"\n      >\n        <div class=\"stock-location-group\">\n          <div class=\"stock-location-left-group\">\n            <co-button class=\"stock-lines-button\" [textContent]=\"'BACK_TO_STOCK_LINES'\" (click)=\"handleBackToStockClick()\"></co-button>\n          </div>\n        </div>\n        <co-simple-grid-column [headerText]=\"'LOCATION'\" [field]=\"'locationNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-drop-down-list [(model)]=\"row.locationNo\"\n                               [collection]=\"stockLocations\"\n                               [fields]=\"dataLocationFields\"\n                               [placeholder]=\"'LOCATION'\"\n                               (click)=\"onLocationDropdownClick()\"\n                               [required]=\"true\"\n            ></co-drop-down-list>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'BATCH'\" [field]=\"'batchNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text [(model)]=\"row.batchNo\"\n                           [placeholder]=\"'BATCH'\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'SERIAL_NO'\" [field]=\"'serialNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text [(model)]=\"row.serialNo\"\n                           [placeholder]=\"'SERIAL_NO'\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK'\" [field]=\"'amountInStock'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text  [(model)]=\"row.amountInStock\"\n                            [label]=\"'STOCK'\"\n                            (modelChange)=\"amountInStockChanged($event)\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'ALLOCATED'\" [field]=\"'stockAssigned'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.stockAssigned\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AVAILABLE_STOCK'\" [field]=\"'amountInStockFree'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.amountInStockFree\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'VALUTA'\" [field]=\"'currency'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.currency\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'PURCHASE_PRICE'\" [field]=\"'purchasePrice'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.purchasePrice\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'SUPPLIER_NUMBER'\" [field]=\"'supplierNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <span [textContent]=\"row.supplierNo\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSFER'\" [field]=\"'transfer'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.DeliveryTruck)\" (click)=\"handleStockTransferClick(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STICKER'\" [field]=\"'sticker'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\" (click)=\"openSendMethodDialog(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n    </div>\n\n    <co-stock-change-amount *ngIf=\"showChangeStockDetails\"\n                            (closeStockChangeAmount)=\"showChangeStockDetails = false\"\n                            [selectedArticleDetailsData]=\"selectedArticleDetailsData\"\n    >\n    </co-stock-change-amount>\n\n    <div class=\"stock-grid\" *ngIf=\"showStockHistory\">\n      <div class=\"stock-button-left-group\">\n        <span class=\"stock-button-back\" [textContent]=\"'BACK_TO_STOCK_LINES'\" (click)=\"backToStockInformation()\"></span>\n      </div>\n      <co-simple-grid [data]=\"stockHistoryInformation\"\n                      class=\"simple-grid\"\n                      [rowsPerPage]=\"20\"\n      >\n        <co-simple-grid-column [headerText]=\"'MUTATION_DATE'\">\n          <ng-template #template let-row=\"row\">\n            <span [textContent]=\"row.mutationDate | date:'dd-MM-yyyy'\"></span>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'MUTATION_TIME'\" [field]=\"'mutationTime'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AMOUNT'\" [field]=\"'amount'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'WAREHOUSE'\" [field]=\"'wareHouseNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'LOCATION'\" [field]=\"'locationNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSACTION_TYPE'\" [field]=\"'transType'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DOCUMENT_NUMBER'\" [field]=\"'docNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'LINE'\" [field]=\"'posLineNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK_STATE'\" [field]=\"'stockStateId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK_REMARK'\" [field]=\"'stockStateRemarkId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'VALUTA'\" [field]=\"'currencyCode'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'RELATION_ID'\" [field]=\"'relationId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'USER'\" [field]=\"'user'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'MUTATION_TYPE'\" [field]=\"'mutationType'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STICKER'\" [field]=\"'sticker'\">\n          <ng-template #template let-row=\"row\">\n            <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\" (click)=\"openSendMethodDialog(row)\"></co-icon>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n    </div>\n\n    <div class=\"stock-button-toolbar\">\n      <div class=\"stock-button-left-group\">\n        <co-button *ngIf=\"activeTab === tabs[0]\" [label]=\"'HISTORY'\" (click)=\"handleHistoryClick()\"></co-button>\n      </div>\n      <div class=\"stock-button-middle-group\" *ngIf=\"activeTab !== tabs[0]\">\n        <div class=\"button-left\">\n          <co-button [textContent]=\"'Ok'\" (click)=\"onOkClick()\"></co-button>\n        </div>\n        <div class=\"button-right\">\n          <co-button [textContent]=\"'Annuleren'\" (click)=\"onCancelClick()\"></co-button>\n        </div>\n      </div>\n\n      <div class=\"stock-button-middle-group\" *ngIf=\"hideOrShowLocationTab\">\n        <div class=\"button-left\">\n          <co-button [textContent]=\"'Ok'\" (click)=\"onOkClickSendLocations()\"></co-button>\n        </div>\n        <div class=\"button-right\">\n          <co-button [textContent]=\"'Annuleren'\" (click)=\"onCancelClickSendLocations()\"></co-button>\n        </div>\n      </div>\n    </div>\n    <co-send-method-dialog *ngIf=\"showSendMethodDialog\"\n                           (closeClick)=\"showSendMethodDialog = false\"\n    ></co-send-method-dialog>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -1982,7 +2002,7 @@
     var StockTransferComponent = /** @class */ (function () {
         function StockTransferComponent(_stockService) {
             this._stockService = _stockService;
-            this.handleCancelClicked = new i0.EventEmitter();
+            this.handleClick = new i0.EventEmitter();
             this.handleStickerClicked = new i0.EventEmitter();
             this.allWarehousesDropdownFields = { text: "warehouseDescription", value: "warehouseNo" };
             this.allLocationDropdownFields = { text: "locationNo", value: "locationNo" };
@@ -2004,13 +2024,14 @@
                             return [4 /*yield*/, this._stockService.updateArticleDetails(data)];
                         case 1:
                             _a.sent();
+                            this.handleClick.emit();
                             return [2 /*return*/];
                     }
                 });
             });
         };
         StockTransferComponent.prototype.handleCancelClick = function () {
-            this.handleCancelClicked.emit();
+            this.handleClick.emit();
         };
         StockTransferComponent.prototype.handleSelectedWarehouse = function (event) {
             this.selectedWarehouse = event;
@@ -2048,7 +2069,7 @@
     StockTransferComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-transfer",
-                    template: "\n      <div class=\"stock-transfer\">\n        <div class=\"stock-transfer-columns\">\n          <div *ngIf=\"articleToTransfer\" class=\"stock-transfer-left-column\">\n            <co-input-text disabled\n                           [label]=\"'Standaard magazijn'\"\n                           [(model)]=\"articleToTransfer.warehouseDescription\"\n                           [textContent]=\"articleToTransfer.warehouseDescription\"\n                           [placeholder]=\"'Standaard magazijn'\"\n            >\n            </co-input-text>\n            <co-input-text disabled\n                           [(model)]=\"articleToTransfer.locationNo\"\n                           [textContent]=\"articleToTransfer.locationNo\"\n                           [placeholder]=\"'Standaard locatie'\">\n            </co-input-text>\n            <co-input-text disabled\n                           [(model)]=\"stockSticker.batch\"\n                           [placeholder]=\"'Batch'\">\n            </co-input-text>\n            <co-input-text disabled\n                           [(model)]=\"stockSticker.serial\"\n                           [placeholder]=\"'Serie'\">\n            </co-input-text>\n            <co-input-text\n              [(model)]=\"articleToTransfer.amountTransfer\"\n              [placeholder]=\"'Aantal'\">\n            </co-input-text>\n          </div>\n\n          <div class=\"stock-transfer-right-column\">\n            <co-drop-down-list [collection]=\"warehouses\"\n                               [fields]=\"allWarehousesDropdownFields\"\n                               (modelChange)=\"handleSelectedWarehouse($event)\"\n                               [(model)]=\"articleToTransfer.targetWarehouse\">\n            </co-drop-down-list>\n            <co-drop-down-list [collection]=\"locations\"\n                               [fields]=\"allLocationDropdownFields\"\n                               [(model)]=\"articleToTransfer.targetLocation\"\n            >\n            </co-drop-down-list>\n            <co-drop-down-list [collection]=\"stockState\"\n                               [fields]=\"stockStateDropdownField\"\n                               [placeholder]=\"'Voorraadstatus'\"\n                               [(model)]=\"articleToTransfer.stockStateId\">\n            </co-drop-down-list>\n            <co-input-text [placeholder]=\"'Omschrijving'\"\n                           [(model)]=\"articleToTransfer.stockStateRemark\">\n            </co-input-text>\n          </div>\n        </div>\n\n        <div class=\"ok-cancel-buttons\">\n          <co-button [textContent]=\"'Ok'\" (click)=\"handleOkClick(articleToTransfer)\"></co-button>\n          <co-button [textContent]=\"'Annuleren'\" (click)=\"handleCancelClick()\"></co-button>\n          <co-button [textContent]=\"'Sticker'\" (click)=\"handleStickerClick()\"></co-button>\n        </div>\n      </div>\n  ",
+                    template: "\n      <div class=\"stock-transfer\">\n        <div class=\"stock-transfer-columns\">\n          <div *ngIf=\"articleToTransfer\" class=\"stock-transfer-left-column\">\n            <co-input-text disabled\n                           [label]=\"'Standaard magazijn'\"\n                           [(model)]=\"articleToTransfer.warehouseDescription\"\n                           [textContent]=\"articleToTransfer.warehouseDescription\"\n                           [placeholder]=\"'Standaard magazijn'\"\n            >\n            </co-input-text>\n            <co-input-text disabled\n                           [(model)]=\"articleToTransfer.locationNo\"\n                           [textContent]=\"articleToTransfer.locationNo\"\n                           [placeholder]=\"'Standaard locatie'\">\n            </co-input-text>\n            <co-input-text disabled\n                           [(model)]=\"stockSticker.batch\"\n                           [placeholder]=\"'Batch'\">\n            </co-input-text>\n            <co-input-text disabled\n                           [(model)]=\"stockSticker.serial\"\n                           [placeholder]=\"'Serie'\">\n            </co-input-text>\n            <co-input-text\n              [(model)]=\"articleToTransfer.amountTransfer\"\n              [placeholder]=\"'Aantal'\">\n            </co-input-text>\n          </div>\n\n          <div class=\"stock-transfer-right-column\">\n            <co-drop-down-list [collection]=\"warehouses\"\n                               [fields]=\"allWarehousesDropdownFields\"\n                               (modelChange)=\"handleSelectedWarehouse($event)\"\n                               [placeholder]=\"'Magazijn'\"\n                               [(model)]=\"articleToTransfer.targetWarehouse\">\n            </co-drop-down-list>\n            <co-drop-down-list [collection]=\"locations\"\n                               [fields]=\"allLocationDropdownFields\"\n                               [(model)]=\"articleToTransfer.targetLocation\"\n                               [placeholder]=\"'Locatie'\"\n            >\n            </co-drop-down-list>\n            <co-drop-down-list [collection]=\"stockState\"\n                               [fields]=\"stockStateDropdownField\"\n                               [placeholder]=\"'Voorraadstatus'\"\n                               [(model)]=\"articleToTransfer.stockStateId\"\n            >\n            </co-drop-down-list>\n            <co-input-text [placeholder]=\"'Omschrijving'\"\n                           [(model)]=\"articleToTransfer.stockStateRemark\">\n            </co-input-text>\n          </div>\n        </div>\n\n        <div class=\"ok-cancel-buttons\">\n          <co-button [textContent]=\"'Ok'\" (click)=\"handleOkClick(articleToTransfer)\"></co-button>\n          <co-button [textContent]=\"'Annuleren'\" (click)=\"handleCancelClick()\"></co-button>\n          <co-button [textContent]=\"'Sticker'\" (click)=\"handleStickerClick()\"></co-button>\n        </div>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -2061,7 +2082,7 @@
         articleToTransfer: [{ type: i0.Input }],
         articleWarehouse: [{ type: i0.Input }],
         allWarehouses: [{ type: i0.Input }],
-        handleCancelClicked: [{ type: i0.Output }],
+        handleClick: [{ type: i0.Output }],
         handleStickerClicked: [{ type: i0.Output }]
     };
 
@@ -3100,15 +3121,19 @@
                 },] }
     ];
 
-    var GaugeColor$1;
+    var GaugeColor;
     (function (GaugeColor) {
-        GaugeColor["Low"] = "#E0E0E0";
-        GaugeColor["Medium"] = "#F88952";
-        GaugeColor["High"] = "#5FDCB3";
-    })(GaugeColor$1 || (GaugeColor$1 = {}));
+        GaugeColor["Lowest"] = "#E0E0E0";
+        GaugeColor["Low"] = "#fff7b8";
+        GaugeColor["MediumLow"] = "#ffe367";
+        GaugeColor["MediumHigh"] = "#ffc15b";
+        GaugeColor["High"] = "#F88952";
+        GaugeColor["Highest"] = "#5FDCB3";
+    })(GaugeColor || (GaugeColor = {}));
+
     var CoCircularGaugeComponent = /** @class */ (function () {
         function CoCircularGaugeComponent() {
-            this._color = GaugeColor$1.Low;
+            this._color = GaugeColor.Low;
             this.majorTicks = {
                 height: 0,
             };
@@ -3189,25 +3214,33 @@
         };
         ;
         CoCircularGaugeComponent.prototype.getAnnotations = function () {
-            if (this.value) {
+            if (this.value !== undefined) {
+                var label = this.value ? this.value + "%" : "0%";
                 return [{
-                        content: '<div class="annotation">' +
-                            this.value + '%</div>',
-                        angle: 90,
-                        radius: '50%',
+                        content: '<div class="annotation" style="width:20px;height:20px;">' +
+                            '<div class="annotation-label">' + label + '</div></div>',
                         zIndex: '10',
                     }];
             }
         };
         CoCircularGaugeComponent.prototype._setColor = function () {
             if (this.value == 0) {
-                this._color = GaugeColor$1.Low;
+                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 >= 0 && this.value < 100) {
-                this._color = GaugeColor$1.Medium;
+            else if (this.value >= 75 && this.value < 100) {
+                this._color = GaugeColor.High;
             }
             else if (this.value == 100) {
-                this._color = GaugeColor$1.High;
+                this._color = GaugeColor.Highest;
             }
         };
         return CoCircularGaugeComponent;
@@ -3245,12 +3278,6 @@
                 },] }
     ];
 
-    var GaugeColor;
-    (function (GaugeColor) {
-        GaugeColor["Low"] = "#E0E0E0";
-        GaugeColor["Medium"] = "#F88952";
-        GaugeColor["High"] = "#5FDCB3";
-    })(GaugeColor || (GaugeColor = {}));
     var CoLinearGaugeComponent = /** @class */ (function () {
         function CoLinearGaugeComponent() {
             this.color = GaugeColor.Low;
@@ -3274,14 +3301,23 @@
         };
         CoLinearGaugeComponent.prototype._setColor = function () {
             if (this.value == 0) {
+                this.color = GaugeColor.Lowest;
+            }
+            else if (this.value >= 1 && this.value < 25) {
                 this.color = GaugeColor.Low;
             }
-            else if (this.value >= 0 && this.value < 100) {
-                this.color = GaugeColor.Medium;
+            else if (this.value >= 25 && this.value < 50) {
+                this.color = GaugeColor.MediumLow;
             }
-            else if (this.value == 100) {
+            else if (this.value >= 50 && this.value < 75) {
+                this.color = GaugeColor.MediumHigh;
+            }
+            else if (this.value >= 75 && this.value < 100) {
                 this.color = GaugeColor.High;
             }
+            else if (this.value == 100) {
+                this.color = GaugeColor.Highest;
+            }
         };
         return CoLinearGaugeComponent;
     }());
@@ -3329,6 +3365,7 @@
             },
             set: function (value) {
                 this._statusbarData = value;
+                this.adjustTooHighPercentages();
             },
             enumerable: false,
             configurable: true
@@ -3336,17 +3373,13 @@
         StatusbarComponent.prototype.showClass = function () {
             return true;
         };
-        StatusbarComponent.prototype.onHover = function (event) {
-            this.showPopup = true;
-            this._mouseY = event.screenY;
-            this._windowHeight = window.innerHeight;
-            this.setPopupClass();
-        };
-        StatusbarComponent.prototype.onLeave = function () {
-            this.showPopup = false;
-        };
-        StatusbarComponent.prototype.onStatusbarClick = function () {
-            this.statusbarClick.emit();
+        StatusbarComponent.prototype.onStatusbarClick = function (event) {
+            this.showPopup = !this.showPopup;
+            if (this.showPopup) {
+                this._mouseY = event.screenY;
+                this._windowHeight = window.innerHeight;
+                this.setPopupClass();
+            }
         };
         StatusbarComponent.prototype.setPopupClass = function () {
             var popupHeight = this.statusbarData.length * 30;
@@ -3358,12 +3391,15 @@
                 this.popupClass = 'dropup';
             }
         };
+        StatusbarComponent.prototype.adjustTooHighPercentages = function () {
+            this._statusbarData.forEach(function (data) { return data.percentage > 100 ? data.percentage = 100 : false; });
+        };
         return StatusbarComponent;
     }());
     StatusbarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-statusbar",
-                    template: "\n    <div class=\"co-statusbar-wrapper\"\n         *ngIf=\"statusbarData\"\n         (mouseover)=\"onHover($event)\"\n         (mouseleave)=\"onLeave()\"\n         (click)=\"onStatusbarClick()\">\n      <div class=\"statuses\">\n        <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status\">\n          <co-linear-gauge [class.focused-status]=\"focusedStatusIndex !== undefined && focusedStatusIndex === index\"\n            [value]=\"data.percentage\" [count]=\"data.count ? data.count : undefined\"></co-linear-gauge>\n        </div>\n      </div>\n      <div class=status-description-popup *ngIf=\"showPopup\" @showHidePopup [ngClass]=\"popupClass\">\n        <div class=\"status-descriptions\">\n          <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status-description\">\n            <co-circular-gauge [value]=\"data.percentage\"></co-circular-gauge>\n            <span [textContent]=\"data.label\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"co-statusbar-wrapper\"\n         *ngIf=\"statusbarData\"\n         (click)=\"onStatusbarClick($event)\">\n      <div class=\"statuses\">\n        <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status\">\n          <co-linear-gauge [class.focused-status]=\"focusedStatusIndex !== undefined && focusedStatusIndex === index\"\n            [value]=\"data.percentage\" [count]=\"data.count ? data.count : undefined\"></co-linear-gauge>\n        </div>\n      </div>\n      <div class=status-description-popup *ngIf=\"showPopup\" @showHidePopup [ngClass]=\"popupClass\" clickOutside (clickOutside)=\"showPopup=false\">\n        <div class=\"status-descriptions\">\n          <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status-description\">\n            <co-circular-gauge [value]=\"data.percentage\"></co-circular-gauge>\n            <span [textContent]=\"data.label\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
                     animations: [
                         animations.trigger("showHidePopup", [
                             animations.state("void", animations.style({ opacity: 0 })),
@@ -3392,7 +3428,8 @@
                     imports: [
                         common.CommonModule,
                         CoCircularGaugeModule,
-                        CoLinearGaugeModule
+                        CoLinearGaugeModule,
+                        corecomponents_v12.ClickoutsideModule
                     ],
                     declarations: [
                         StatusbarComponent