@colijnit/sharedcomponents 1.0.40 → 1.0.42

package/bundles/colijnit-sharedcomponents.umd.js

@@ -730,13 +730,13 @@
                 },] }
     ];
 
-    exports["ɵbq"] = void 0;
+    exports["ɵbt"] = void 0;
     (function (LanguageCode) {
         LanguageCode["Dutch"] = "nl-NL";
         LanguageCode["English"] = "en-GB";
         LanguageCode["German"] = "de-DE";
         LanguageCode["French"] = "fr-FR";
-    })(exports["ɵbq"] || (exports["ɵbq"] = {}));
+    })(exports["ɵbt"] || (exports["ɵbt"] = {}));
 
     // Static utility functions holder related to strings.
     var StringUtils = /** @class */ (function () {
@@ -850,7 +850,7 @@
         DictionaryService.prototype.setDictionary = function (language) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
-                    this._language = language || exports["ɵbq"].Dutch;
+                    this._language = language || exports["ɵbt"].Dutch;
                     this._loadDictionary();
                     return [2 /*return*/];
                 });
@@ -883,7 +883,7 @@
                 return key || "";
             }
             if (this.language === undefined) {
-                this._language = exports["ɵbq"].Dutch;
+                this._language = exports["ɵbt"].Dutch;
                 this._loadDictionary();
             }
             var text = this._dictionaries.get(this.language)[key];
@@ -1482,13 +1482,108 @@
         { type: SharedConnectorService }
     ]; };
 
+    var Translation = /** @class */ (function () {
+        function Translation() {
+            this.ALLOCATED = 'ALLOCATED';
+            this.ALLOCATION = 'ALLOCATION';
+            this.ALREADY_IN_ORDER = 'ALREADY_IN_ORDER';
+            this.AMOUNT = 'AMOUNT';
+            this.AMOUNT_AVAILABLE = 'AMOUNT_AVAILABLE';
+            this.AMOUNT_IN_STOCK = 'AMOUNT_IN_STOCK';
+            this.AMOUNT_LATER_AVAILABLE = 'AMOUNT_LATER_AVAILABLE';
+            this.AVAILABLE_STOCK = 'AVAILABLE_STOCK';
+            this.BACK_TO_STOCK_LINES = 'BACK_TO_STOCK_LINES';
+            this.BATCH = 'BATCH';
+            this.CANCEL = 'CANCEL';
+            this.CHOICES = 'CHOICES';
+            this.CUSTOMER = 'CUSTOMER';
+            this.DATE = 'DATE';
+            this.DELIVERY_DATE = 'DELIVERY_DATE';
+            this.DESCRIPTION = 'DESCRIPTION';
+            this.DOCUMENT_NUMBER = 'DOCUMENT_NUMBER';
+            this.ECONOMICAL_STOCK = 'ECONOMICAL_STOCK';
+            this.FREE_STOCK = 'FREE_STOCK';
+            this.HISTORY = 'HISTORY';
+            this.IN_ORDER = 'IN_ORDER';
+            this.LINE = 'LINE';
+            this.LOCATION = 'LOCATION';
+            this.LOOK_AT = 'LOOK_AT';
+            this.MUTATION_DATE = 'MUTATION_DATE';
+            this.MUTATION_TIME = 'MUTATION_TIME';
+            this.MUTATION_TYPE = 'MUTATION_TYPE';
+            this.OK = 'OK';
+            this.ORDER = 'ORDER';
+            this.ORDER_COMMISSION = 'ORDER_COMMISSION';
+            this.ORDER_STOCK = 'ORDER_STOCK';
+            this.OVERVIEW = 'OVERVIEW';
+            this.PURCHASE_ORDER_NR = 'PURCHASE_ORDER_NR';
+            this.PURCHASE_PRICE = 'PURCHASE_PRICE';
+            this.RELATION_ID = 'RELATION_ID';
+            this.RELATION_NR = 'RELATION_NR';
+            this.RESERVED = 'RESERVED';
+            this.SEARCH = 'SEARCH';
+            this.SERIAL_NO = 'SERIAL_NO';
+            this.STICKER = 'STICKER';
+            this.STOCK = 'STOCK';
+            this.STOCK_DETAILS = 'STOCK_DETAILS';
+            this.STOCK_REMARK = 'STOCK_REMARK';
+            this.STOCK_STATE = 'STOCK_STATE';
+            this.STOCK_STATUS = 'STOCK_STATUS';
+            this.SUPPLIER_NUMBER = 'SUPPLIER_NUMBER';
+            this.TRANSFER = 'TRANSFER';
+            this.USER = 'USER';
+            this.VALUTA = 'VALUTA';
+            this.WAREHOUSE = 'WAREHOUSE';
+        }
+        return Translation;
+    }());
+
+    var LocalizeService = /** @class */ (function () {
+        function LocalizeService() {
+            this._translation = new Translation();
+        }
+        Object.defineProperty(LocalizeService.prototype, "translation", {
+            get: function () {
+                return this._translation;
+            },
+            set: function (value) {
+                this._translation = Object.assign(new Translation(), value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        LocalizeService.prototype.get = function (key, upperCaseFirst) {
+            if (upperCaseFirst === void 0) { upperCaseFirst = true; }
+            var replacementTexts = [];
+            for (var _i = 2; _i < arguments.length; _i++) {
+                replacementTexts[_i - 2] = arguments[_i];
+            }
+            var text = key;
+            if (this.translation.hasOwnProperty(key)) {
+                text = this.translation[key].toLowerCase();
+                if (upperCaseFirst) {
+                    text = text.charAt(0).toUpperCase() + text.slice(1);
+                }
+            }
+            else {
+                console.log('not found', key);
+            }
+            return text;
+        };
+        return LocalizeService;
+    }());
+    LocalizeService.decorators = [
+        { type: i0.Injectable }
+    ];
+
     var StockComponent = /** @class */ (function () {
-        function StockComponent(stockService, _optionsService, _dictionary, _changeDetector) {
+        function StockComponent(stockService, _optionsService, _dictionary, _changeDetector, _localizeService) {
             var _this = this;
             this.stockService = stockService;
             this._optionsService = _optionsService;
             this._dictionary = _dictionary;
             this._changeDetector = _changeDetector;
+            this._localizeService = _localizeService;
             this.handleStickerClicked = new i0.EventEmitter();
             this.okButtonClicked = new i0.EventEmitter();
             this.cancelButtonClicked = new i0.EventEmitter();
@@ -1500,6 +1595,14 @@
             this._subscriptions = [];
             this._subscriptions.push(this._optionsService.optionsLoaded.subscribe(function (loaded) { return _this._handleSettingsLoaded(loaded); }));
         }
+        Object.defineProperty(StockComponent.prototype, "translation", {
+            set: function (value) {
+                this._localizeService.translation = value;
+                this._changeDetector.markForCheck();
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(StockComponent.prototype, "article", {
             set: function (article) {
                 this.articleExtended = article;
@@ -1624,10 +1727,12 @@
         { type: StockService },
         { type: OptionsService },
         { type: DictionaryService },
-        { type: i0.ChangeDetectorRef }
+        { type: i0.ChangeDetectorRef },
+        { type: LocalizeService }
     ]; };
     StockComponent.propDecorators = {
         stock: [{ type: i0.ViewChild, args: [StockComponent,] }],
+        translation: [{ type: i0.Input }],
         handleStickerClicked: [{ type: i0.Output }],
         article: [{ type: i0.Input }],
         articleWarehouse: [{ type: i0.Input }],
@@ -1645,11 +1750,10 @@
     StockInformationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-information",
-                    template: "\n      <div class=\"stock-info\" *ngIf=\"article\">\n        <div class=\"stock-info-row\" >\n          <div class=\"stock-info-row-image\">\n            <div class=\"stock-image\">\n              <co-image class=\"stock-image\" [source]=\"article.imageData\"></co-image>\n            </div>\n          </div>\n          <div class=\"stock-good-info\">\n            <div>\n              <span [textContent]=\"article.description\"></span>\n            </div>\n            <div>\n              <span [textContent]=\"article.articleNumber\"></span>\n            </div>\n          </div>\n        </div>\n        <div class=\"stock-status\">\n          <label [textContent]=\"'STOCK_STATUS'\"></label>\n          <span [textContent]=\"article.stockStatus\"></span>\n          <co-stock-statusbar [value]=\"articleStockState\"></co-stock-statusbar>\n        </div>\n        <div class=\"stock-status\">\n          <label [textContent]=\"'AMOUNT_IN_STOCK'\"></label>\n          <span [textContent]=\"allTechnicalStockInformation\"></span>\n        </div>\n        <div class=\"stock-status\">\n          <label [textContent]=\"'AMOUNT_AVAILABLE'\"></label>\n          <span [textContent]=\"allAvailableStockInformation\"></span>\n        </div>\n        <div class=\"stock-status\">\n          <label [textContent]=\"'AMOUNT_LATER_AVAILABLE'\"></label>\n          <span [textContent]=\"\"></span>\n        </div>\n      </div>\n  ",
+                    template: "\n      <div class=\"stock-info\" *ngIf=\"article\">\n        <div class=\"stock-info-row\" >\n          <div class=\"stock-info-row-image\">\n            <div class=\"stock-image\">\n              <co-image class=\"stock-image\" [source]=\"article.imageData\"></co-image>\n            </div>\n          </div>\n          <div class=\"stock-good-info\">\n            <div>\n              <span [textContent]=\"article.description\"></span>\n            </div>\n            <div>\n              <span [textContent]=\"article.articleNumber\"></span>\n            </div>\n          </div>\n        </div>\n        <div class=\"stock-status\">\n          <label class=\"stock-label\" [textContent]=\"'STOCK_STATUS' | localize\"></label>\n          <span class=\"stock-span\" [textContent]=\"article.stockStatus\"></span>\n          <co-stock-statusbar [value]=\"articleStockState\"></co-stock-statusbar>\n        </div>\n        <div class=\"stock-status\">\n          <label class=\"stock-label\" [textContent]=\"'AMOUNT_IN_STOCK' | localize\"></label>\n          <span class=\"stock-span\" [textContent]=\"allTechnicalStockInformation\"></span>\n        </div>\n        <div class=\"stock-status\">\n          <label class=\"stock-label\" [textContent]=\"'AMOUNT_AVAILABLE' | localize\"></label>\n          <span class=\"stock-span\" [textContent]=\"allAvailableStockInformation\"></span>\n        </div>\n        <div class=\"stock-status\">\n          <label class=\"stock-label\" [textContent]=\"'AMOUNT_LATER_AVAILABLE' | localize\"></label>\n          <span class=\"stock-span\" [textContent]=\"\"></span>\n        </div>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
-    StockInformationComponent.ctorParameters = function () { return []; };
     StockInformationComponent.propDecorators = {
         article: [{ type: i0.Input }],
         articleStockState: [{ type: i0.Input }],
@@ -1737,7 +1841,7 @@
     ]; };
 
     /** AUTO GENERATED FILE. DO NOT CHANGE.. OR YOU WILL SUFFER THE CONSEQUENCES OF YOUR ACTIONS **/
-    exports["ɵbk"] = void 0;
+    exports["ɵbn"] = void 0;
     (function (Icon) {
         Icon["AngleLeftSolid"] = "angle_left_solid";
         Icon["AngleRightSolid"] = "angle_right_solid";
@@ -1763,13 +1867,13 @@
         Icon["PrintSolid"] = "print_solid";
         Icon["SignatureField"] = "signature_field";
         Icon["Xml"] = "xml";
-    })(exports["ɵbk"] || (exports["ɵbk"] = {}));
+    })(exports["ɵbn"] || (exports["ɵbn"] = {}));
 
     var StockInformationGridComponent = /** @class */ (function () {
         function StockInformationGridComponent(iconCacheService, _stockService) {
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
             this.transferIconClicked = new i0.EventEmitter();
             this.historyClicked = new i0.EventEmitter();
             this.cancelButtonClicked = new i0.EventEmitter();
@@ -1981,7 +2085,7 @@
     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 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  ",
+                    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' | localize\" [field]=\"'warehouseNo'\" [order]=\"10\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'DESCRIPTION' | localize\" [field]=\"'warehouseName'\" [order]=\"11\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'STOCK' | localize\" [field]=\"'technicalStock'\" [order]=\"12\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'AVAILABLE_STOCK' | localize\" [field]=\"'availableStock'\" [order]=\"13\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'ECONOMICAL_STOCK' | localize\" [field]=\"'economicalStock'\" [order]=\"14\"></co-simple-grid-column>\n          <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNo'\" [order]=\"15\">\n            <ng-template #template let-row=\"row\">\n              <span class=\"location-link\" [textContent]=\"'LOOK_AT' | localize\" (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_ORDER' | localize\" [field]=\"'transactionNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'CUSTOMER' | localize\" [field]=\"'customerName'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DATE' | localize\">\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' | localize\" [field]=\"'amountInOrder'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'warehouseNumber'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DESCRIPTION' | localize\" [field]=\"'warehouseDescription'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSFER' | localize\" [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' | localize\" [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' | localize\" [field]=\"'transactionNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DATE' | localize\">\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' | localize\" [field]=\"'amountInOrder'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'RESERVED' | localize\" [field]=\"'reserved'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'FREE_STOCK' | localize\" [field]=\"'InOrderForStock'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DELIVERY_DATE' | localize\">\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' | localize\" (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' | localize\"\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' | localize\" (click)=\"handleBackToStockClick()\"></co-button>\n          </div>\n        </div>\n        <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [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' | localize\"\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' | localize\" [field]=\"'batchNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text [(model)]=\"row.batchNo\"\n                           [placeholder]=\"'BATCH' | localize\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'SERIAL_NO' | localize\" [field]=\"'serialNo'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text [(model)]=\"row.serialNo\"\n                           [placeholder]=\"'SERIAL_NO' | localize\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK' | localize\" [field]=\"'amountInStock'\">\n          <ng-template #editTemplate let-row=\"row\">\n            <co-input-text  [(model)]=\"row.amountInStock\"\n                            [label]=\"'STOCK' | localize\"\n                            (modelChange)=\"amountInStockChanged($event)\"\n            ></co-input-text>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'ALLOCATED' | localize\" [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' | localize\" [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' | localize\" [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' | localize\" [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' | localize\" [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' | localize\" [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' | localize\" [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' | localize\" (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' | localize\">\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' | localize\" [field]=\"'mutationTime'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'AMOUNT' | localize\" [field]=\"'amount'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'wareHouseNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSACTION_TYPE' | localize\" [field]=\"'transType'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DOCUMENT_NUMBER' | localize\" [field]=\"'docNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'LINE' | localize\" [field]=\"'posLineNr'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK_STATE' | localize\" [field]=\"'stockStateId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STOCK_REMARK' | localize\" [field]=\"'stockStateRemarkId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'VALUTA' | localize\" [field]=\"'currencyCode'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'RELATION_ID' | localize\" [field]=\"'relationId'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'USER' | localize\" [field]=\"'user'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'MUTATION_TYPE' | localize\" [field]=\"'mutationType'\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'STICKER' | localize\" [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' | localize\" (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' | localize\" (click)=\"onOkClick()\"></co-button>\n        </div>\n        <div class=\"button-right\">\n          <co-button [textContent]=\"'CANCEL' | localize\" (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' | localize\" (click)=\"onOkClickSendLocations()\"></co-button>\n        </div>\n        <div class=\"button-right\">\n          <co-button [textContent]=\"'CANCEL' | localize\" (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
                 },] }
     ];
@@ -2071,7 +2175,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                               [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  ",
+                    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' | localize\"\n                           [(model)]=\"articleToTransfer.warehouseDescription\"\n                           [textContent]=\"articleToTransfer.warehouseDescription\"\n                           [placeholder]=\"'Standaard magazijn' | localize\"\n            >\n            </co-input-text>\n            <co-input-text disabled\n                           [(model)]=\"articleToTransfer.locationNo\"\n                           [textContent]=\"articleToTransfer.locationNo\"\n                           [placeholder]=\"'Standaard locatie' | localize\">\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' | localize\">\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' | localize\"\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' | localize\"\n            >\n            </co-drop-down-list>\n            <co-drop-down-list [collection]=\"stockState\"\n                               [fields]=\"stockStateDropdownField\"\n                               [placeholder]=\"'Voorraadstatus' | localize\"\n                               [(model)]=\"articleToTransfer.stockStateId\"\n            >\n            </co-drop-down-list>\n            <co-input-text [placeholder]=\"'Omschrijving' | localize\"\n                           [(model)]=\"articleToTransfer.stockStateRemark\">\n            </co-input-text>\n          </div>\n        </div>\n\n        <div class=\"ok-cancel-buttons\">\n          <co-button [textContent]=\"'OK' | localize\" (click)=\"handleOkClick(articleToTransfer)\"></co-button>\n          <co-button [textContent]=\"'CANCEL' | localize\" (click)=\"handleCancelClick()\"></co-button>\n          <co-button [textContent]=\"'STICKER' | localize\" (click)=\"handleStickerClick()\"></co-button>\n        </div>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -2216,13 +2320,13 @@
     }());
 
     var sendMethodsWithIcon = [
-        new SendMethod(sendMethodType_enum.SendMethodType.Fax, "Fax", exports["ɵbk"].PrintRegular),
-        new SendMethod(sendMethodType_enum.SendMethodType.Print, "Print", exports["ɵbk"].PrintSolid),
-        new SendMethod(sendMethodType_enum.SendMethodType.Email, "Email", exports["ɵbk"].AtSolid),
-        new SendMethod(sendMethodType_enum.SendMethodType.Edi, "Edi", exports["ɵbk"].FileExportSolid),
-        new SendMethod(sendMethodType_enum.SendMethodType.EmailTemplate, "Email template", exports["ɵbk"].EnvelopeRegular),
-        new SendMethod(sendMethodType_enum.SendMethodType.Sms, "Sms", exports["ɵbk"].MessageSmsSolid),
-        new SendMethod(sendMethodType_enum.SendMethodType.WebService, "Webservice", exports["ɵbk"].PrintRegular)
+        new SendMethod(sendMethodType_enum.SendMethodType.Fax, "Fax", exports["ɵbn"].PrintRegular),
+        new SendMethod(sendMethodType_enum.SendMethodType.Print, "Print", exports["ɵbn"].PrintSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.Email, "Email", exports["ɵbn"].AtSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.Edi, "Edi", exports["ɵbn"].FileExportSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.EmailTemplate, "Email template", exports["ɵbn"].EnvelopeRegular),
+        new SendMethod(sendMethodType_enum.SendMethodType.Sms, "Sms", exports["ɵbn"].MessageSmsSolid),
+        new SendMethod(sendMethodType_enum.SendMethodType.WebService, "Webservice", exports["ɵbn"].PrintRegular)
     ];
     var SendMethodDialogComponent = /** @class */ (function () {
         function SendMethodDialogComponent(iconCacheService, _changeDetector, _sharedService, _sendMethodService) {
@@ -2231,7 +2335,7 @@
             this._changeDetector = _changeDetector;
             this._sharedService = _sharedService;
             this._sendMethodService = _sendMethodService;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
             this.printerList = [];
             this.emailLayouts = [];
             this.printLayouts = [];
@@ -2572,7 +2676,7 @@
             this.sendMethodService = sendMethodService;
             this.iconService = iconService;
             this._service = _service;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
             this.printers = [];
             this.showPrinterList = false;
         }
@@ -2733,7 +2837,7 @@
     StockChangeAmountComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-change-amount",
-                    template: "\n      <div class=\"stock-transfer\">\n        <co-dialog-wizard [showCloseIcon]=\"true\" (closeClick)=\"closeDialogClick()\">\n          <ng-container header>\n            <span [textContent]=\"'STOCK_CHANGE_REASON'\"></span>\n          </ng-container>\n          <div class=\"popup-wrapper\">\n            <co-drop-down-list [collection]=\"stockState\"\n                               [fields]=\"stockStateDropdownField\"\n                               [placeholder]=\"'STOCK_STATE'\"\n                               [(model)]=\"selectedArticleDetailsData.stockStateId\"\n            ></co-drop-down-list>\n\n            <co-input-textarea [(model)]=\"selectedArticleDetailsData.stockStateRemark\"\n\n            ></co-input-textarea>\n            <div class=\"ok-cancel-buttons\">\n              <co-button [textContent]=\"'Ok'\" (click)=\"handleOkClick(selectedArticleDetailsData)\"></co-button>\n              <co-button [textContent]=\"'Annuleren'\" (click)=\"handleCancelClick()\"></co-button>\n            </div>\n          </div>\n        </co-dialog-wizard>\n      </div>\n  ",
+                    template: "\n      <div class=\"stock-transfer\">\n        <co-dialog-wizard [showCloseIcon]=\"true\" (closeClick)=\"closeDialogClick()\">\n          <ng-container header>\n            <span [textContent]=\"'STOCK_CHANGE_REASON' | localize\"></span>\n          </ng-container>\n          <div class=\"popup-wrapper\">\n            <co-drop-down-list [collection]=\"stockState\"\n                               [fields]=\"stockStateDropdownField\"\n                               [placeholder]=\"'STOCK_STATE' | localize\"\n                               [(model)]=\"selectedArticleDetailsData.stockStateId\"\n            ></co-drop-down-list>\n\n            <co-input-textarea [(model)]=\"selectedArticleDetailsData.stockStateRemark\"\n\n            ></co-input-textarea>\n            <div class=\"ok-cancel-buttons\">\n              <co-button [textContent]=\"'OK' | localize\" (click)=\"handleOkClick(selectedArticleDetailsData)\"></co-button>\n              <co-button [textContent]=\"'CANCEL' | localize\" (click)=\"handleCancelClick()\"></co-button>\n            </div>\n          </div>\n        </co-dialog-wizard>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -2757,11 +2861,10 @@
     StockTabComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-tab",
-                    template: "\n    <co-simple-grid [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  ",
+                    template: "\n    <co-simple-grid [data]=\"articleStockInformation\"\n                    class=\"simple-grid\"\n                    [rowsPerPage]=\"20\"\n    >\n      <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'warehouseNo'\" [order]=\"10\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DESCRIPTION' | localize\" [field]=\"'warehouseName'\" [order]=\"11\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'STOCK' | localize\" [field]=\"'technicalStock'\" [order]=\"12\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'AVAILABLE_STOCK' | localize\" [field]=\"'availableStock'\" [order]=\"13\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'ECONOMICAL_STOCK' | localize\" [field]=\"'economicalStock'\" [order]=\"14\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNo'\" [order]=\"15\">\n        <ng-template #template let-row=\"row\">\n          <span class=\"location-link\" [textContent]=\"'LOOK_AT' | localize\" (click)=\"onLocationClick(row)\"></span>\n        </ng-template>\n      </co-simple-grid-column>\n    </co-simple-grid>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
-    StockTabComponent.ctorParameters = function () { return []; };
     StockTabComponent.propDecorators = {
         articleStockInformation: [{ type: i0.Input }],
         locationClicked: [{ type: i0.Output }]
@@ -2771,7 +2874,7 @@
         function OrderTabComponent(iconCacheService, _stockService) {
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
             this.locationClicked = new i0.EventEmitter();
             this.transferIconClicked = new i0.EventEmitter();
             this.sendMethodDialogClicked = new i0.EventEmitter();
@@ -2787,7 +2890,7 @@
     OrderTabComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-order-tab",
-                    template: "\n    <co-simple-grid [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(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  ",
+                    template: "\n    <co-simple-grid [data]=\"inOrderInformation\"\n                    class=\"simple-grid\"\n                    [rowsPerPage]=\"20\"\n    >\n      <co-simple-grid-column [headerText]=\"'IN_ORDER' | localize\" [field]=\"'transactionNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'CUSTOMER' | localize\" [field]=\"'customerName'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DATE' | localize\">\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' | localize\" [field]=\"'amountInOrder'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'warehouseNumber'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DESCRIPTION' | localize\" [field]=\"'warehouseDescription'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'TRANSFER' | localize\" [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' | localize\" [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  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -2804,28 +2907,34 @@
     };
 
     var StockTabsComponent = /** @class */ (function () {
-        function StockTabsComponent(_stockService) {
+        function StockTabsComponent(_stockService, _localizeService) {
             this._stockService = _stockService;
-            this.icons = exports["ɵbk"];
+            this._localizeService = _localizeService;
+            this.icons = exports["ɵbn"];
             this.transferIconClicked = new i0.EventEmitter();
             this.sendMethodDialogClicked = new i0.EventEmitter();
+            this.tabs = [];
+            this.historyTabs = [];
+        }
+        StockTabsComponent.prototype.ngOnInit = function () {
+            var _this = this;
             this.tabs = [
-                { title: 'Overzicht', active: true },
-                { 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 },
+                { title: this._localizeService.get('OVERVIEW'), active: true },
+                { title: this._localizeService.get('STOCK_DETAILS'), active: false },
+                { title: this._localizeService.get('ALREADY_IN_ORDER'), active: false, clickHandler: function () { return _this.getInOrderData(); } },
+                { title: this._localizeService.get('IN_ORDER'), active: false, clickHandler: function () { return _this.getOrderData(); } },
+                { title: this._localizeService.get('HISTORY'), active: false },
             ];
             this.historyTabs = [
-                { 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) },
-                { title: 'Toewijzing', active: false, clickHandler: this.getAllocationStockHistory.bind(this) },
+                { title: this._localizeService.get('STOCK'), active: true, clickHandler: function () { return _this.getStockHistory(); } },
+                { title: this._localizeService.get('ORDER_STOCK'), active: false, clickHandler: function () { return _this.getOrderSupplyStockHistory(); } },
+                { title: this._localizeService.get('ORDER_COMMISSION'), active: false, clickHandler: function () { return _this.getOrderCommissionStockHistory(); } },
+                { title: this._localizeService.get('ORDER'), active: false, clickHandler: function () { return _this.getOrderStockHistory(); } },
+                { title: this._localizeService.get('ALLOCATION'), active: false, clickHandler: function () { return _this.getAllocationStockHistory(); } },
             ];
-        }
+        };
         StockTabsComponent.prototype.handleLocationClicked = function (data) {
-            this.clickedLocation = data.warehouseNo;
+            this.selectedLocation = data.warehouseNo;
             this.tabs[0].active = false;
             this.tabs[1].active = true;
         };
@@ -2974,12 +3083,13 @@
     StockTabsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-tabs",
-                    template: "\n    <co-tab-bar [tabs]=\"tabs\" [secondaryTabs]=\"historyTabs\" [ActivateSecondaryTabs]=\"tabs[4].active\"></co-tab-bar>\n\n    <co-stock-tab *ngIf=\"tabs[0].active\"\n                  [articleStockInformation]=\"stockInformation\"\n                  (locationClicked)=\"handleLocationClicked($event)\"\n    ></co-stock-tab>\n\n    <co-stock-location *ngIf=\"tabs[1].active\"\n                       [articleStockInformation]=\"stockInformation\"\n                       [article]=\"article\"\n                       [clickedLocation]=\"clickedLocation\"\n                       [dataWareHouseCode]=\"warehouses\"\n                       (transferIconClicked)=\"transferIconClicked.emit($event)\"\n                       (sendMethodDialogClicked)=\"sendMethodDialogClicked.emit($event)\"\n    ></co-stock-location>\n\n    <co-order-tab *ngIf=\"tabs[2].active\"\n                  [articleStockInformation]=\"stockInformation\"\n                  [inOrderInformation]=\"inOrderInformation\"\n                  (transferIconClicked)=\"transferIconClicked.emit($event)\"\n                  (sendMethodDialogClicked)=\"sendMethodDialogClicked.emit($event)\"\n    ></co-order-tab>\n\n    <co-order-stock-tab *ngIf=\"tabs[3].active\"\n                        [orderInformation]=\"orderInformation\"\n    ></co-order-stock-tab>\n\n    <co-stock-history *ngIf=\"historyTabs[0].active && tabs[4].active\"\n                      [stockHistory]=\"stockHistory\"\n    ></co-stock-history>\n\n    <co-order-supply-stock-history *ngIf=\"historyTabs[1].active && tabs[4].active\"\n                            [orderSupplyStockHistory]=\"orderSupplyStockHistory\"\n    ></co-order-supply-stock-history>\n\n    <co-order-stock-commission-history *ngIf=\"historyTabs[2].active && tabs[4].active\"\n                                       [orderStockCommissionHistory]=\"orderCommissionStockHistory\"\n    ></co-order-stock-commission-history>\n\n    <co-order-stock-history *ngIf=\"historyTabs[3].active && tabs[4].active\"\n                            [orderStockHistory]=\"orderStockHistory\"\n    ></co-order-stock-history>\n\n    <co-allocation-stock-history *ngIf=\"historyTabs[4].active && tabs[4].active\"\n                                 [allocationStockHistory]=\"orderAllocationStockHistory\"\n    ></co-allocation-stock-history>\n\n  ",
+                    template: "\n    <co-tab-bar [wareHouseLabel]=\"'CHOICES' | localize\" [wareHouseSearchLabel]=\"'SEARCH' | localize\" \n                [tabs]=\"tabs\" [dataWareHouseCode]=\"warehouses\" [secondaryTabs]=\"historyTabs\" [ActivateSecondaryTabs]=\"tabs[4].active\"></co-tab-bar>\n\n    <co-stock-tab *ngIf=\"tabs[0].active\"\n                  [articleStockInformation]=\"stockInformation\"\n                  (locationClicked)=\"handleLocationClicked($event)\"\n    ></co-stock-tab>\n\n    <co-stock-location *ngIf=\"tabs[1].active\"\n                       [articleStockInformation]=\"stockInformation\"\n                       [article]=\"article\"\n                       [clickedLocation]=\"selectedLocation\"\n                       [dataWareHouseCode]=\"warehouses\"\n                       (transferIconClicked)=\"transferIconClicked.emit($event)\"\n                       (sendMethodDialogClicked)=\"sendMethodDialogClicked.emit($event)\"\n    ></co-stock-location>\n\n    <co-order-tab *ngIf=\"tabs[2].active\"\n                  [articleStockInformation]=\"stockInformation\"\n                  [inOrderInformation]=\"inOrderInformation\"\n                  (transferIconClicked)=\"transferIconClicked.emit($event)\"\n                  (sendMethodDialogClicked)=\"sendMethodDialogClicked.emit($event)\"\n    ></co-order-tab>\n\n    <co-order-stock-tab *ngIf=\"tabs[3].active\"\n                        [orderInformation]=\"orderInformation\"\n    ></co-order-stock-tab>\n\n    <co-stock-history *ngIf=\"historyTabs[0].active && tabs[4].active\"\n                      [stockHistory]=\"stockHistory\"\n    ></co-stock-history>\n\n    <co-order-supply-stock-history *ngIf=\"historyTabs[1].active && tabs[4].active\"\n                                   [orderSupplyStockHistory]=\"orderSupplyStockHistory\"\n    ></co-order-supply-stock-history>\n\n    <co-order-stock-commission-history *ngIf=\"historyTabs[2].active && tabs[4].active\"\n                                       [orderStockCommissionHistory]=\"orderCommissionStockHistory\"\n    ></co-order-stock-commission-history>\n\n    <co-order-stock-history *ngIf=\"historyTabs[3].active && tabs[4].active\"\n                            [orderStockHistory]=\"orderStockHistory\"\n    ></co-order-stock-history>\n\n    <co-allocation-stock-history *ngIf=\"historyTabs[4].active && tabs[4].active\"\n                                 [allocationStockHistory]=\"orderAllocationStockHistory\"\n    ></co-allocation-stock-history>\n\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     StockTabsComponent.ctorParameters = function () { return [
-        { type: StockService }
+        { type: StockService },
+        { type: LocalizeService }
     ]; };
     StockTabsComponent.propDecorators = {
         stockInformation: [{ type: i0.Input }],
@@ -2991,7 +3101,7 @@
 
     var StockHistoryTabsComponent = /** @class */ (function () {
         function StockHistoryTabsComponent() {
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
             this.selectedTab = 0;
         }
         return StockHistoryTabsComponent;
@@ -2999,11 +3109,10 @@
     StockHistoryTabsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-history-tabs",
-                    template: "\n    <div class=\"stock-history-tabs-wrapper\">\n      <div class=\"tab-container\">\n        <div class=\"tab-header\">\n          <button class=\"tab-button\" (click)=\"selectedTab = 0\" [class.active]=\"selectedTab === 0\">Voorraad</button>\n          <button class=\"tab-button\" (click)=\"selectedTab = 1\" [class.active]=\"selectedTab === 1\">Order voorraad</button>\n          <button class=\"tab-button\" (click)=\"selectedTab = 2\" [class.active]=\"selectedTab === 2\">Order commissie</button>\n          <button class=\"tab-button\" (click)=\"selectedTab = 3\" [class.active]=\"selectedTab === 3\">Bestelling</button>\n          <button class=\"tab-button\" (click)=\"selectedTab = 4\" [class.active]=\"selectedTab === 4\">Toewijzing</button>\n        </div>\n      </div>\n    </div>\n\n\n  ",
+                    template: "\n    <div class=\"stock-history-tabs-wrapper\">\n      <div class=\"tab-container\">\n        <div class=\"tab-header\">\n          <button class=\"tab-button\" (click)=\"selectedTab = 0\" [class.active]=\"selectedTab === 0\">{{ 'STOCK' | localize }}</button>\n          <button class=\"tab-button\" (click)=\"selectedTab = 1\" [class.active]=\"selectedTab === 1\">{{ 'ORDER_STOCK' | localize }}</button>\n          <button class=\"tab-button\" (click)=\"selectedTab = 2\" [class.active]=\"selectedTab === 2\">{{ 'ORDER_COMMISSION' | localize }}</button>\n          <button class=\"tab-button\" (click)=\"selectedTab = 3\" [class.active]=\"selectedTab === 3\">{{ 'ORDER' | localize }}</button>\n          <button class=\"tab-button\" (click)=\"selectedTab = 4\" [class.active]=\"selectedTab === 4\">{{ 'ALLOCATION' | localize }}</button>\n        </div>\n      </div>\n    </div>\n\n\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
-    StockHistoryTabsComponent.ctorParameters = function () { return []; };
     StockHistoryTabsComponent.propDecorators = {
         stockInformation: [{ type: i0.Input }]
     };
@@ -3012,14 +3121,14 @@
         function OrderStockTabComponent(iconCacheService, _stockService) {
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
         }
         return OrderStockTabComponent;
     }());
     OrderStockTabComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-order-stock-tab",
-                    template: "\n    <co-simple-grid [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  ",
+                    template: "\n    <co-simple-grid [data]=\"orderInformation\"\n                    class=\"simple-grid\"\n                    [rowsPerPage]=\"20\"\n    >\n      <co-simple-grid-column [headerText]=\"'PURCHASE_ORDER_NR' | localize\" [field]=\"'transactionNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DATE' | localize\">\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' | localize\" [field]=\"'amountInOrder'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'RESERVED' | localize\" [field]=\"'reserved'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'FREE_STOCK' | localize\" [field]=\"'InOrderForStock'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DELIVERY_DATE' | localize\">\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  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3036,7 +3145,7 @@
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
             this._changeDetector = _changeDetector;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
             this.transferIconClicked = new i0.EventEmitter();
             this.sendMethodDialogClicked = new i0.EventEmitter();
             this.dataWareHouseFields = { text: "warehouseDescription", value: "warehouseNo" };
@@ -3110,7 +3219,7 @@
     StockLocationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-location",
-                    template: "\n      <div class=\"stock-grid\">\n          <div class=\"stock-location-group\">\n              <div class=\"stock-location-right-group\">\n                  <co-drop-down-list [(model)]=\"selectedWarehouse\"\n                                     [collection]=\"dataWareHouseCode\"\n                                     [fields]=\"dataWareHouseFields\"\n                                     [placeholder]=\"'WAREHOUSE'\"\n                                     (modelChange)=\"onSelectWarehouse($event)\"\n                                     [required]=\"true\"\n                  ></co-drop-down-list>\n              </div>\n          </div>\n\n          <co-simple-grid [data]=\"articleDetails\"\n                          class=\"simple-grid\"\n                          [rowsPerPage]=\"20\"\n                          [showAdd]=\"true\"\n                          [inlineEdit]=\"true\"\n                          (dblClickRow)=\"lockSelectedRow($event)\"\n                          [rightToolbar]=\"true\"\n                          [showToolbar]=\"true\"\n                          (keydown.enter)=\"onOkClickSendLocations()\"\n          >\n              <co-simple-grid-column [headerText]=\"'LOCATION'\" [field]=\"'locationNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-drop-down-list [(model)]=\"row.locationNo\"\n                                         [collection]=\"stockLocations\"\n                                         [fields]=\"dataLocationFields\"\n                                         [placeholder]=\"'LOCATION'\"\n                                         (click)=\"onLocationDropdownClick()\"\n                                         [required]=\"true\"\n                                         (modelChange)=\"locationChanged($event)\"\n                      ></co-drop-down-list>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'BATCH'\" [field]=\"'batchNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.batchNo\"\n                                     [placeholder]=\"'BATCH'\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'SERIAL_NO'\" [field]=\"'serialNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.serialNo\"\n                                     [placeholder]=\"'SERIAL_NO'\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'STOCK'\" [field]=\"'amountInStock'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.amountInStock\"\n                                     [label]=\"'STOCK'\"\n                                     (modelChange)=\"amountInStockChanged($event)\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'ALLOCATED'\" [field]=\"'stockAssigned'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.stockAssigned\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'AVAILABLE_STOCK'\" [field]=\"'amountInStockFree'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.amountInStockFree\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'VALUTA'\" [field]=\"'currency'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.currency\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'PURCHASE_PRICE'\" [field]=\"'purchasePrice'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.purchasePrice\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'SUPPLIER_NUMBER'\" [field]=\"'supplierNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <span [textContent]=\"row.supplierNo\"></span>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'TRANSFER'\" [field]=\"'transfer'\">\n                  <ng-template #template let-row=\"row\">\n                      <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.DeliveryTruck)\"\n                               (click)=\"handleStockTransferClick(row)\"></co-icon>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'STICKER'\" [field]=\"'sticker'\">\n                  <ng-template #template let-row=\"row\">\n                      <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\"\n                               (click)=\"openSendMethodDialog(row)\"></co-icon>\n                  </ng-template>\n              </co-simple-grid-column>\n          </co-simple-grid>\n      </div>\n  ",
+                    template: "\n      <div class=\"stock-grid\">\n          <div class=\"stock-location-group\">\n              <div class=\"stock-location-right-group\">\n                  <co-drop-down-list [(model)]=\"selectedWarehouse\"\n                                     [collection]=\"dataWareHouseCode\"\n                                     [fields]=\"dataWareHouseFields\"\n                                     [placeholder]=\"'WAREHOUSE' | localize\"\n                                     (modelChange)=\"onSelectWarehouse($event)\"\n                                     [required]=\"true\"\n                  ></co-drop-down-list>\n                <co-list-of-values [label]=\"'CHOICES' | localize\"\n                                   [displayField]=\"'warehouseDescription'\"\n                                   [collection]=\"dataWareHouseCode\"\n                                   [model]=\"selectedWarehouseModel\"\n                                   [multiselect]=\"false\"\n                                   [required]=\"false\"\n                                   [readonly]=\"true\"\n                                   [customCssClass]=\"'mini-scrollbar'\"\n                                   [searchPlaceholder]=\"'SEARCH' | localize\"\n                                   (modelChange)=\"onSelectWarehouse($event)\"\n                >\n                </co-list-of-values>\n              </div>\n          </div>\n\n          <co-simple-grid [data]=\"articleDetails\"\n                          class=\"simple-grid\"\n                          [rowsPerPage]=\"20\"\n                          [showAdd]=\"true\"\n                          [inlineEdit]=\"true\"\n                          (dblClickRow)=\"lockSelectedRow($event)\"\n                          [showToolbar]=\"true\"\n                          (keydown.enter)=\"onOkClickSendLocations()\"\n          >\n              <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [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' | localize\"\n                                         (click)=\"onLocationDropdownClick()\"\n                                         [required]=\"true\"\n                                         (modelChange)=\"locationChanged($event)\"\n                      ></co-drop-down-list>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'BATCH' | localize\" [field]=\"'batchNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.batchNo\"\n                                     [placeholder]=\"'BATCH' | localize\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column *ngIf=\"articleDetails\" [headerText]=\"'SERIAL_NO' | localize\" [field]=\"'serialNo'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.serialNo\"\n                                     [placeholder]=\"'SERIAL_NO' | localize\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'STOCK' | localize\" [field]=\"'amountInStock'\">\n                  <ng-template #editTemplate let-row=\"row\">\n                      <co-input-text [(model)]=\"row.amountInStock\"\n                                     [label]=\"'STOCK' | localize\"\n                                     (modelChange)=\"amountInStockChanged($event)\"\n                      ></co-input-text>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'ALLOCATED' | localize\" [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' | localize\" [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' | localize\" [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' | localize\" [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' | localize\" [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' | localize\" [field]=\"'transfer'\">\n                  <ng-template #template let-row=\"row\">\n                      <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.DeliveryTruck)\"\n                               (click)=\"handleStockTransferClick(row)\"></co-icon>\n                  </ng-template>\n              </co-simple-grid-column>\n              <co-simple-grid-column [headerText]=\"'STICKER' | localize\" [field]=\"'sticker'\">\n                  <ng-template #template let-row=\"row\">\n                      <co-icon class=\"menu-icon\" [iconData]=\"iconCacheService.getIcon(icons.Print)\"\n                               (click)=\"openSendMethodDialog(row)\"></co-icon>\n                  </ng-template>\n              </co-simple-grid-column>\n          </co-simple-grid>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3132,14 +3241,14 @@
         function StockHistoryComponent(iconCacheService, _stockService) {
             this.iconCacheService = iconCacheService;
             this._stockService = _stockService;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
         }
         return StockHistoryComponent;
     }());
     StockHistoryComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stock-history",
-                    template: "\n    <co-simple-grid [data]=\"stockHistory\"\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]=\"'DOCUMENT_NUMBER'\" [field]=\"'docNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LINE'\" [field]=\"'transLineNr'\"></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_NR'\" [field]=\"'relationNr'\"></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>\n  ",
+                    template: "\n    <co-simple-grid [data]=\"stockHistory\"\n                    class=\"simple-grid\"\n                    [rowsPerPage]=\"20\"\n    >\n      <co-simple-grid-column [headerText]=\"'MUTATION_DATE' | localize\">\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' | localize\" [field]=\"'mutationTime'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'AMOUNT' | localize\" [field]=\"'amount'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'wareHouseNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DOCUMENT_NUMBER' | localize\" [field]=\"'docNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LINE' | localize\" [field]=\"'transLineNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'STOCK_STATE' | localize\" [field]=\"'stockStateId'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'STOCK_REMARK' | localize\" [field]=\"'stockStateRemarkId'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'VALUTA' | localize\" [field]=\"'currencyCode'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'RELATION_NR' | localize\" [field]=\"'relationNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'USER' | localize\" [field]=\"'user'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'MUTATION_TYPE' | localize\" [field]=\"'mutationType'\"></co-simple-grid-column>\n    </co-simple-grid>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3154,8 +3263,11 @@
     };
 
     var TabBarComponent = /** @class */ (function () {
-        function TabBarComponent() {
+        function TabBarComponent(_stockService) {
+            this._stockService = _stockService;
             this.ActivateSecondaryTabs = false;
+            this.dataWareHouseFields = { text: "warehouseDescription", value: "warehouseNo" };
+            this.articleDetailsInformation = new articleStockManagement.ArticleStockManagement();
         }
         TabBarComponent.prototype.selectTab = function (tab) {
             if (tab.clickHandler) {
@@ -3171,20 +3283,36 @@
             this.secondaryTabs.forEach(function (t) { return t.active = false; });
             secondaryTab.active = true;
         };
+        TabBarComponent.prototype.onSelectWarehouse = function (event) {
+            var _this = this;
+            this.articleDetailsInformation.warehouseNumber = event;
+            this.articleDetailsInformation.goodId = this.article.goodId;
+            if (this.selectedWarehouse || this.selectedWarehouse === 0) {
+                this._stockService.getArticleDetails(this.articleDetailsInformation).then(function (details) {
+                    _this.articleDetails = details;
+                });
+            }
+        };
         return TabBarComponent;
     }());
     TabBarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-tab-bar",
-                    template: "\n    <div class=\"tab-bar\">\n        <button *ngFor=\"let tab of tabs\" [class.active]=\"tab.active\" (click)=\"selectTab(tab)\">\n          {{tab.title}}\n        </button>\n    </div>\n    <div class=\"secondary-tab-bar\" *ngIf=\"ActivateSecondaryTabs\">\n        <button *ngFor=\"let tab of secondaryTabs\" [class.active]=\"tab.active\" (click)=\"selectSecondaryTab(tab)\">\n          {{tab.title}}\n        </button>\n    </div>\n  ",
+                    template: "\n    <div class=\"tab-bar-wrapper\">\n      <div class=\"tab-bar-warehouse-wrapper\">\n        <div class=\"stock-location-group\">\n          <div class=\"stock-location-right-group\">\n            <co-list-of-values [label]=\"wareHouseLabel\"\n                               [displayField]=\"'warehouseDescription'\"\n                               [collection]=\"dataWareHouseCode\"\n                               [multiselect]=\"false\"\n                               [required]=\"false\"\n                               [readonly]=\"true\"\n                               [customCssClass]=\"'mini-scrollbar'\"\n                               [searchPlaceholder]=\"wareHouseSearchLabel\"\n                               (modelChange)=\"onSelectWarehouse($event)\"\n            >\n            </co-list-of-values>\n          </div>\n        </div>\n      </div>\n      <div class=\"tab-bar\">\n        <div class=\"tab-bar-primary\">\n          <button *ngFor=\"let tab of tabs\" [class.active]=\"tab.active\" (click)=\"selectTab(tab)\">\n            {{tab.title}}\n          </button>\n        </div>\n        <div class=\"secondary-tab-bar\" *ngIf=\"ActivateSecondaryTabs\">\n          <button *ngFor=\"let tab of secondaryTabs\" [class.active]=\"tab.active\" (click)=\"selectSecondaryTab(tab)\">\n            {{tab.title}}\n          </button>\n        </div>\n      </div>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
-    TabBarComponent.ctorParameters = function () { return []; };
+    TabBarComponent.ctorParameters = function () { return [
+        { type: StockService }
+    ]; };
     TabBarComponent.propDecorators = {
+        wareHouseLabel: [{ type: i0.Input }],
+        wareHouseSearchLabel: [{ type: i0.Input }],
         tabs: [{ type: i0.Input }],
         secondaryTabs: [{ type: i0.Input }],
-        ActivateSecondaryTabs: [{ type: i0.Input }]
+        ActivateSecondaryTabs: [{ type: i0.Input }],
+        dataWareHouseCode: [{ type: i0.Input }],
+        article: [{ type: i0.Input }]
     };
 
     var TabBarModule = /** @class */ (function () {
@@ -3196,6 +3324,8 @@
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
+                        corecomponents_v12.DropDownModule,
+                        corecomponents_v12.ListOfValuesModule,
                     ],
                     declarations: [
                         TabBarComponent
@@ -3209,14 +3339,14 @@
     var OrderSupplyStockHistoryComponent = /** @class */ (function () {
         function OrderSupplyStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
         }
         return OrderSupplyStockHistoryComponent;
     }());
     OrderSupplyStockHistoryComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-order-supply-stock-history",
-                    template: "\n    <co-simple-grid [data]=\"orderSupplyStockHistory\"\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]=\"'DOCUMENT_NUMBER'\" [field]=\"'docNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LINE'\" [field]=\"'transLineNr'\"></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_NR'\" [field]=\"'relationNr'\"></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>\n  ",
+                    template: "\n    <co-simple-grid [data]=\"orderSupplyStockHistory\"\n                    class=\"simple-grid\"\n                    [rowsPerPage]=\"20\"\n    >\n      <co-simple-grid-column [headerText]=\"'MUTATION_DATE' | localize\">\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' | localize\" [field]=\"'mutationTime'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'AMOUNT' | localize\" [field]=\"'amount'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'wareHouseNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DOCUMENT_NUMBER' | localize\" [field]=\"'docNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LINE' | localize\" [field]=\"'transLineNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'STOCK_STATE' | localize\" [field]=\"'stockStateId'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'STOCK_REMARK' | localize\" [field]=\"'stockStateRemarkId'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'VALUTA' | localize\" [field]=\"'currencyCode'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'RELATION_NR' | localize\" [field]=\"'relationNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'USER' | localize\" [field]=\"'user'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'MUTATION_TYPE' | localize\" [field]=\"'mutationType'\"></co-simple-grid-column>\n    </co-simple-grid>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3230,14 +3360,14 @@
     var OrderCommissionStockHistoryComponent = /** @class */ (function () {
         function OrderCommissionStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
         }
         return OrderCommissionStockHistoryComponent;
     }());
     OrderCommissionStockHistoryComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-order-stock-commission-history",
-                    template: "\n    <co-simple-grid [data]=\"orderStockCommissionHistory\"\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]=\"'DOCUMENT_NUMBER'\" [field]=\"'docNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LINE'\" [field]=\"'transLineNr'\"></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_NR'\" [field]=\"'relationNr'\"></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>\n  ",
+                    template: "\n    <co-simple-grid [data]=\"orderStockCommissionHistory\"\n                    class=\"simple-grid\"\n                    [rowsPerPage]=\"20\"\n    >\n      <co-simple-grid-column [headerText]=\"'MUTATION_DATE' | localize\">\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' | localize\" [field]=\"'mutationTime'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'AMOUNT' | localize\" [field]=\"'amount'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'wareHouseNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DOCUMENT_NUMBER' | localize\" [field]=\"'docNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LINE' | localize\" [field]=\"'transLineNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'STOCK_STATE' | localize\" [field]=\"'stockStateId'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'STOCK_REMARK' | localize\" [field]=\"'stockStateRemarkId'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'VALUTA' | localize\" [field]=\"'currencyCode'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'RELATION_NR' | localize\" [field]=\"'relationNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'USER' | localize\" [field]=\"'user'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'MUTATION_TYPE' | localize\" [field]=\"'mutationType'\"></co-simple-grid-column>\n    </co-simple-grid>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3251,14 +3381,14 @@
     var OrderStockHistoryComponent = /** @class */ (function () {
         function OrderStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
         }
         return OrderStockHistoryComponent;
     }());
     OrderStockHistoryComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-order-stock-history",
-                    template: "\n    <co-simple-grid [data]=\"orderStockHistory\"\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]=\"'DOCUMENT_NUMBER'\" [field]=\"'docNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LINE'\" [field]=\"'transLineNr'\"></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_NR'\" [field]=\"'relationNr'\"></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>\n  ",
+                    template: "\n    <co-simple-grid [data]=\"orderStockHistory\"\n                    class=\"simple-grid\"\n                    [rowsPerPage]=\"20\"\n    >\n      <co-simple-grid-column [headerText]=\"'MUTATION_DATE' | localize\">\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' | localize\" [field]=\"'mutationTime'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'AMOUNT' | localize\" [field]=\"'amount'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'wareHouseNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DOCUMENT_NUMBER' | localize\" [field]=\"'docNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LINE' | localize\" [field]=\"'transLineNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'STOCK_STATE' | localize\" [field]=\"'stockStateId'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'STOCK_REMARK' | localize\" [field]=\"'stockStateRemarkId'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'VALUTA' | localize\" [field]=\"'currencyCode'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'RELATION_NR' | localize\" [field]=\"'relationNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'USER' | localize\" [field]=\"'user'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'MUTATION_TYPE' | localize\" [field]=\"'mutationType'\"></co-simple-grid-column>\n    </co-simple-grid>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3272,14 +3402,14 @@
     var AllocationStockHistoryComponent = /** @class */ (function () {
         function AllocationStockHistoryComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
         }
         return AllocationStockHistoryComponent;
     }());
     AllocationStockHistoryComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-allocation-stock-history",
-                    template: "\n    <co-simple-grid [data]=\"allocationStockHistory\"\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]=\"'DOCUMENT_NUMBER'\" [field]=\"'docNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LINE'\" [field]=\"'transLineNr'\"></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_NR'\" [field]=\"'relationNr'\"></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>\n  ",
+                    template: "\n    <co-simple-grid [data]=\"allocationStockHistory\"\n                    class=\"simple-grid\"\n                    [rowsPerPage]=\"20\"\n    >\n      <co-simple-grid-column [headerText]=\"'MUTATION_DATE' | localize\">\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' | localize\" [field]=\"'mutationTime'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'AMOUNT' | localize\" [field]=\"'amount'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'WAREHOUSE' | localize\" [field]=\"'wareHouseNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LOCATION' | localize\" [field]=\"'locationNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DOCUMENT_NUMBER' | localize\" [field]=\"'docNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'LINE' | localize\" [field]=\"'transLineNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'STOCK_STATE' | localize\" [field]=\"'stockStateId'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'STOCK_REMARK' | localize\" [field]=\"'stockStateRemarkId'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'VALUTA' | localize\" [field]=\"'currencyCode'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'RELATION_NR' | localize\" [field]=\"'relationNr'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'USER' | localize\" [field]=\"'user'\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'MUTATION_TYPE' | localize\" [field]=\"'mutationType'\"></co-simple-grid-column>\n    </co-simple-grid>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3522,11 +3652,32 @@
                 },] }
     ];
 
+    var StatusbarPopupComponent = /** @class */ (function () {
+        function StatusbarPopupComponent() {
+            this.statusbarData = [];
+            this.showClass = true;
+        }
+        return StatusbarPopupComponent;
+    }());
+    StatusbarPopupComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-statusbar-popup",
+                    template: "\n        <div class=\"co-statusbar-popup-wrapper\" [overlay]=\"parentForOverlay\">\n            <div class=\"status-descriptions\">\n                <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status-description\">\n                    <co-circular-gauge [value]=\"data.percentage\"></co-circular-gauge>\n                    <span [textContent]=\"data.label\"></span>\n                </div>\n            </div>\n        </div>\n    ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    StatusbarPopupComponent.propDecorators = {
+        statusbarData: [{ type: i0.Input }],
+        parentForOverlay: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-statusbar-popup",] }]
+    };
+
     var StatusbarComponent = /** @class */ (function () {
-        function StatusbarComponent() {
+        function StatusbarComponent(_elementRef, _overlayService) {
+            this._elementRef = _elementRef;
+            this._overlayService = _overlayService;
             this.statusbarClick = new i0.EventEmitter();
-            this.showPopup = false;
-            this.popupClass = 'dropdown';
+            this.popupShowing = false;
         }
         Object.defineProperty(StatusbarComponent.prototype, "statusbarData", {
             get: function () {
@@ -3542,23 +3693,21 @@
         StatusbarComponent.prototype.showClass = function () {
             return true;
         };
-        StatusbarComponent.prototype.onStatusbarClick = function (event) {
-            this.showPopup = !this.showPopup;
-            if (this.showPopup) {
-                this._mouseY = event.screenY;
-                this._windowHeight = window.innerHeight;
-                this.setPopupClass();
-            }
+        StatusbarComponent.prototype.handleClick = function (event) {
+            this.handleShowPopup(event);
         };
-        StatusbarComponent.prototype.setPopupClass = function () {
-            var popupHeight = this.statusbarData.length * 30;
-            var dropdownInScreen = (this._mouseY + popupHeight) <= this._windowHeight;
-            if (dropdownInScreen) {
-                this.popupClass = 'dropdown';
-            }
-            else {
-                this.popupClass = 'dropup';
+        StatusbarComponent.prototype.handleShowPopup = function (event) {
+            if (this.popupShowing) {
+                return;
             }
+            event.preventDefault();
+            event.stopPropagation();
+            this._statusbarPopupComponentRef = this._overlayService.createComponent(StatusbarPopupComponent, { parentForOverlay: this._elementRef, statusbarData: this.statusbarData });
+            this.popupShowing = true;
+        };
+        StatusbarComponent.prototype.handleHidePopup = function () {
+            this._overlayService.removeComponent(this._statusbarPopupComponentRef);
+            this.popupShowing = false;
         };
         StatusbarComponent.prototype.adjustTooHighPercentages = function () {
             this._statusbarData.forEach(function (data) { return data.percentage > 100 ? data.percentage = 100 : false; });
@@ -3568,7 +3717,10 @@
     StatusbarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-statusbar",
-                    template: "\n    <div class=\"co-statusbar-wrapper\"\n         *ngIf=\"statusbarData\"\n         (click)=\"onStatusbarClick($event)\">\n      <div class=\"statuses\">\n        <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status\">\n          <co-linear-gauge [class.focused-status]=\"focusedStatusIndex !== undefined && focusedStatusIndex === index\"\n            [value]=\"data.percentage\" [count]=\"data.count ? data.count : undefined\"></co-linear-gauge>\n        </div>\n      </div>\n      <div class=status-description-popup *ngIf=\"showPopup\" @showHidePopup [ngClass]=\"popupClass\" clickOutside (clickOutside)=\"showPopup=false\">\n        <div class=\"status-descriptions\">\n          <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status-description\">\n            <co-circular-gauge [value]=\"data.percentage\"></co-circular-gauge>\n            <span [textContent]=\"data.label\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"co-statusbar-wrapper\" *ngIf=\"statusbarData\" [clickOutside]=\"popupShowing\"\n         (clickOutside)=\"handleHidePopup()\">\n      <div class=\"statuses\">\n        <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status\">\n          <co-linear-gauge [class.focused-status]=\"focusedStatusIndex !== undefined && focusedStatusIndex === index\"\n                           [value]=\"data.percentage\" [count]=\"data.count ? data.count : undefined\"></co-linear-gauge>\n        </div>\n      </div>\n    </div>\n  ",
+                    providers: [
+                        corecomponents_v12.OverlayService
+                    ],
                     animations: [
                         animations.trigger("showHidePopup", [
                             animations.state("void", animations.style({ opacity: 0 })),
@@ -3579,12 +3731,16 @@
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
-    StatusbarComponent.ctorParameters = function () { return []; };
+    StatusbarComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: corecomponents_v12.OverlayService }
+    ]; };
     StatusbarComponent.propDecorators = {
         statusbarData: [{ type: i0.Input }],
         focusedStatusIndex: [{ type: i0.Input }],
         statusbarClick: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-statusbar",] }]
+        showClass: [{ type: i0.HostBinding, args: ["class.co-statusbar",] }],
+        handleClick: [{ type: i0.HostListener, args: ["click", ["$event"],] }]
     };
 
     var StatusbarModule = /** @class */ (function () {
@@ -3598,13 +3754,16 @@
                         common.CommonModule,
                         CoCircularGaugeModule,
                         CoLinearGaugeModule,
-                        corecomponents_v12.ClickoutsideModule
+                        corecomponents_v12.ClickoutsideModule,
+                        corecomponents_v12.OverlayModule
                     ],
                     declarations: [
-                        StatusbarComponent
+                        StatusbarComponent,
+                        StatusbarPopupComponent
                     ],
                     exports: [
-                        StatusbarComponent
+                        StatusbarComponent,
+                        StatusbarPopupComponent
                     ]
                 },] }
     ];
@@ -3645,6 +3804,34 @@
                 },] }
     ];
 
+    var LocalizePipe = /** @class */ (function () {
+        function LocalizePipe(_localizeService) {
+            this._localizeService = _localizeService;
+        }
+        LocalizePipe.prototype.transform = function (value, upperCaseFirst, replace) {
+            var _a;
+            if (upperCaseFirst === void 0) { upperCaseFirst = true; }
+            if (replace === void 0) { replace = []; }
+            if (!value) {
+                return "";
+            }
+            replace = (replace !== undefined && replace !== null) ? replace : [];
+            if (!Array.isArray(replace)) {
+                replace = [replace];
+            }
+            return (_a = this._localizeService).get.apply(_a, __spreadArray([value, upperCaseFirst], __read(replace)));
+        };
+        return LocalizePipe;
+    }());
+    LocalizePipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: "localize"
+                },] }
+    ];
+    LocalizePipe.ctorParameters = function () { return [
+        { type: LocalizeService }
+    ]; };
+
     var StockModule = /** @class */ (function () {
         function StockModule() {
         }
@@ -3670,7 +3857,8 @@
                         TabBarModule,
                         corecomponents_v12.CoDialogModule,
                         StatusbarModule,
-                        StockStatusbarModule
+                        StockStatusbarModule,
+                        corecomponents_v12.ListOfValuesModule
                     ],
                     declarations: [
                         StockComponent,
@@ -3688,13 +3876,16 @@
                         OrderSupplyStockHistoryComponent,
                         OrderCommissionStockHistoryComponent,
                         OrderStockHistoryComponent,
-                        AllocationStockHistoryComponent
+                        AllocationStockHistoryComponent,
+                        LocalizePipe
                     ],
                     exports: [
-                        StockComponent
+                        StockComponent,
+                        LocalizePipe
                     ],
                     providers: [
-                        StockService
+                        StockService,
+                        LocalizeService
                     ]
                 },] }
     ];
@@ -3734,7 +3925,7 @@
     var KeyPadComponent = /** @class */ (function () {
         function KeyPadComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
             this.showValue = true;
             this.emitModelChangeOnEnter = true;
             this.modelChange = new i0.EventEmitter();
@@ -3925,7 +4116,7 @@
     var LayoutSwitcherComponent = /** @class */ (function () {
         function LayoutSwitcherComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icon = exports["ɵbk"];
+            this.icon = exports["ɵbn"];
             this.layoutItems = [];
             this.layoutSwitchEmit = new i0.EventEmitter();
             this.showMaskSidebar = false;
@@ -4190,7 +4381,7 @@
             this.iconCacheService = iconCacheService;
             this.selectedDate = new Date();
             this.selectedDateChange = new i0.EventEmitter();
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
             this.showMonthYearSelect = false;
             this.expanded = false;
         }
@@ -4751,7 +4942,7 @@
                 },] }
     ];
     CalendarViewComponent.ctorParameters = function () { return [
-        { type: exports["ɵbq"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
+        { type: exports["ɵbt"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
     ]; };
     CalendarViewComponent.propDecorators = {
         view: [{ type: i0.Input }],
@@ -4839,7 +5030,7 @@
     CalendarUtils.Locale = undefined;
     CalendarUtils.Now = new Date();
     CalendarUtils.ctorParameters = function () { return [
-        { type: exports["ɵbq"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
+        { type: exports["ɵbt"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
     ]; };
 
     var AgendaEvent = /** @class */ (function () {
@@ -4896,7 +5087,7 @@
             this._renderer = _renderer;
             this._ngZone = _ngZone;
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
             this.viewTypes = CalendarView;
             this.scrollbarWidth = 15;
             this.view = CalendarView.WeekSelectView;
@@ -5072,7 +5263,7 @@
                 },] }
     ];
     AgendaHeaderComponent.ctorParameters = function () { return [
-        { type: exports["ɵbq"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
+        { type: exports["ɵbt"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
         { type: i0.NgZone },
@@ -5172,7 +5363,7 @@
         { type: i0.Directive }
     ];
     AgendaBaseViewComponent.ctorParameters = function () { return [
-        { type: exports["ɵbq"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
+        { type: exports["ɵbt"], decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
         { type: IconCacheService }
     ]; };
     AgendaBaseViewComponent.propDecorators = {
@@ -5288,7 +5479,7 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.view = CalendarView.WeekSelectView;
             _this.week = NULL_WEEK;
-            _this.icons = exports["ɵbk"];
+            _this.icons = exports["ɵbn"];
             return _this;
         }
         AgendaWeekSelectViewComponent.prototype.prepareViewData = function () {
@@ -5533,7 +5724,7 @@
             this._elementRef = _elementRef;
             this._renderer = _renderer;
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
             this.event = NULL_AGENDA_EVENT;
             this.eventChecked = new i0.EventEmitter();
         }
@@ -5702,7 +5893,7 @@
     var AgendaSelectEventComponent = /** @class */ (function () {
         function AgendaSelectEventComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
-            this.icons = exports["ɵbk"];
+            this.icons = exports["ɵbn"];
             this.event = NULL_AGENDA_EVENT;
             this.eventChecked = new i0.EventEmitter();
         }
@@ -5798,63 +5989,66 @@
     exports.sendMethodsWithIcon = sendMethodsWithIcon;
     exports["ɵa"] = SignatureComponent;
     exports["ɵb"] = SignaturesComponent;
-    exports["ɵba"] = StockTabsComponent;
-    exports["ɵbb"] = StockHistoryTabsComponent;
-    exports["ɵbc"] = OrderStockTabComponent;
-    exports["ɵbd"] = StockLocationComponent;
-    exports["ɵbe"] = StockHistoryComponent;
-    exports["ɵbf"] = OrderSupplyStockHistoryComponent;
-    exports["ɵbg"] = OrderCommissionStockHistoryComponent;
-    exports["ɵbh"] = OrderStockHistoryComponent;
-    exports["ɵbi"] = AllocationStockHistoryComponent;
-    exports["ɵbj"] = SendMethod;
-    exports["ɵbl"] = CalendarAllYearsComponent;
-    exports["ɵbm"] = CalendarAllMonthsComponent;
-    exports["ɵbn"] = CalendarHeaderComponent;
-    exports["ɵbo"] = CalendarComponent;
-    exports["ɵbp"] = CalendarViewComponent;
-    exports["ɵbr"] = AgendaHeaderComponent;
-    exports["ɵbs"] = AgendaViewComponent;
-    exports["ɵbt"] = AgendaMonthViewComponent;
-    exports["ɵbu"] = AgendaBaseViewComponent;
-    exports["ɵbv"] = AgendaDayViewComponent;
-    exports["ɵbw"] = AgendaWeekViewComponent;
-    exports["ɵbx"] = AgendaWeekSelectViewComponent;
-    exports["ɵby"] = AgendaHourViewComponent;
-    exports["ɵbz"] = AgendaHourCellComponent;
+    exports["ɵba"] = StockTabComponent;
+    exports["ɵbb"] = OrderTabComponent;
+    exports["ɵbc"] = StockTabsComponent;
+    exports["ɵbd"] = StockHistoryTabsComponent;
+    exports["ɵbe"] = OrderStockTabComponent;
+    exports["ɵbf"] = StockLocationComponent;
+    exports["ɵbg"] = StockHistoryComponent;
+    exports["ɵbh"] = OrderSupplyStockHistoryComponent;
+    exports["ɵbi"] = OrderCommissionStockHistoryComponent;
+    exports["ɵbj"] = OrderStockHistoryComponent;
+    exports["ɵbk"] = AllocationStockHistoryComponent;
+    exports["ɵbl"] = LocalizePipe;
+    exports["ɵbm"] = SendMethod;
+    exports["ɵbo"] = CalendarAllYearsComponent;
+    exports["ɵbp"] = CalendarAllMonthsComponent;
+    exports["ɵbq"] = CalendarHeaderComponent;
+    exports["ɵbr"] = CalendarComponent;
+    exports["ɵbs"] = CalendarViewComponent;
+    exports["ɵbu"] = AgendaHeaderComponent;
+    exports["ɵbv"] = AgendaViewComponent;
+    exports["ɵbw"] = AgendaMonthViewComponent;
+    exports["ɵbx"] = AgendaBaseViewComponent;
+    exports["ɵby"] = AgendaDayViewComponent;
+    exports["ɵbz"] = AgendaWeekViewComponent;
     exports["ɵc"] = StockService;
-    exports["ɵca"] = AgendaHourViewLabelsComponent;
-    exports["ɵcb"] = AgendaHalfHourCellComponent;
-    exports["ɵcc"] = AgendaEventsComponent;
-    exports["ɵcd"] = AgendaEventComponent;
-    exports["ɵce"] = ViewSelectComponent;
-    exports["ɵcf"] = AgendaSelectEventComponent;
-    exports["ɵcg"] = MASTER_PIPES;
-    exports["ɵch"] = ArrayNumberPipe;
-    exports["ɵci"] = UCfirstPipe;
+    exports["ɵca"] = AgendaWeekSelectViewComponent;
+    exports["ɵcb"] = AgendaHourViewComponent;
+    exports["ɵcc"] = AgendaHourCellComponent;
+    exports["ɵcd"] = AgendaHourViewLabelsComponent;
+    exports["ɵce"] = AgendaHalfHourCellComponent;
+    exports["ɵcf"] = AgendaEventsComponent;
+    exports["ɵcg"] = AgendaEventComponent;
+    exports["ɵch"] = ViewSelectComponent;
+    exports["ɵci"] = AgendaSelectEventComponent;
+    exports["ɵcj"] = MASTER_PIPES;
+    exports["ɵck"] = ArrayNumberPipe;
+    exports["ɵcl"] = UCfirstPipe;
     exports["ɵd"] = SharedConnectorService;
     exports["ɵe"] = OptionsService;
     exports["ɵf"] = DictionaryService;
-    exports["ɵg"] = IconCacheService;
-    exports["ɵh"] = SendMethodService;
-    exports["ɵi"] = SendMethodEmailModule;
-    exports["ɵj"] = LayoutSelectionModule;
-    exports["ɵk"] = LayoutSelectionComponent;
-    exports["ɵl"] = SendMethodEmailComponent;
-    exports["ɵm"] = SendMethodPrinterModule;
-    exports["ɵn"] = PrinterSelectionModule;
-    exports["ɵo"] = PrinterSelectionComponent;
-    exports["ɵp"] = SendMethodPrinterComponent;
-    exports["ɵq"] = TabBarModule;
-    exports["ɵr"] = TabBarComponent;
-    exports["ɵs"] = StockStatusbarModule;
-    exports["ɵt"] = StockStatusbarComponent;
-    exports["ɵu"] = StockInformationComponent;
-    exports["ɵv"] = StockInformationGridComponent;
-    exports["ɵw"] = StockTransferComponent;
-    exports["ɵx"] = StockChangeAmountComponent;
-    exports["ɵy"] = StockTabComponent;
-    exports["ɵz"] = OrderTabComponent;
+    exports["ɵg"] = LocalizeService;
+    exports["ɵh"] = IconCacheService;
+    exports["ɵi"] = SendMethodService;
+    exports["ɵj"] = SendMethodEmailModule;
+    exports["ɵk"] = LayoutSelectionModule;
+    exports["ɵl"] = LayoutSelectionComponent;
+    exports["ɵm"] = SendMethodEmailComponent;
+    exports["ɵn"] = SendMethodPrinterModule;
+    exports["ɵo"] = PrinterSelectionModule;
+    exports["ɵp"] = PrinterSelectionComponent;
+    exports["ɵq"] = SendMethodPrinterComponent;
+    exports["ɵr"] = TabBarModule;
+    exports["ɵs"] = TabBarComponent;
+    exports["ɵt"] = StatusbarPopupComponent;
+    exports["ɵu"] = StockStatusbarModule;
+    exports["ɵv"] = StockStatusbarComponent;
+    exports["ɵw"] = StockInformationComponent;
+    exports["ɵx"] = StockInformationGridComponent;
+    exports["ɵy"] = StockTransferComponent;
+    exports["ɵz"] = StockChangeAmountComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });