@colijnit/transaction 12.1.42 → 12.1.44

package/bundles/colijnit-transaction.umd.js

@@ -652,7 +652,10 @@
                     "PICKED": "Gepickt",
                     "PHONE_NO": "Telefoonnummer",
                     "PHYSICAL_STOCK": "Fysieke voorraad",
+                    "PLANNED": "Gepland",
                     "PLANNING": "Planning",
+                    "PLANNING_REQUESTED": "Voorkeur aangevraagd",
+                    "PLANNING_PREFERRED_DATE_ENTERED": "Voorkeur bekend",
                     "POSTAL_CODE": "Postcode",
                     "PREFERRED_DATE": "Voorkeursdatum",
                     "PREFIX": "Tussenvoegsel",
@@ -729,6 +732,7 @@
                     "TEXT_ARTICLE_BOUND": "Text bij artikel |~",
                     "TO_REPORT_IN": 'Binnen te melden',
                     "TO_BE_PICKED": "Te picken",
+                    "TO_ORDER": "Te bestellen",
                     "TO_DELIVER": "Te leveren",
                     "TO_PAY": "Te betalen",
                     "TOTAL_AMOUNT": "Totaalbedrag",
@@ -742,6 +746,7 @@
                     "TRANSACTION_SUM_I": "Ordertotaal incl. BTW",
                     "TRANSACTION_TOTAL": "Transactie totaal",
                     "TRANSPORT": "Transport",
+                    "TRANSPORT_NOTIFICATION": "Transport notificatie",
                     "TRANSPORT_COST": "Transportkosten",
                     "TRANSPORT_COST_LINE_TOTAL": "Transportkosten regeltotaal",
                     "TURNOVER_GROUP": "Omzetgroep",
@@ -993,6 +998,9 @@
                     "PRICING": "Pricing",
                     "PRIVACY_PREFERENCES": "Privacy preferences",
                     "PRIVATE_PERSON": "Private",
+                    "PLANNED": "Planned",
+                    "PLANNING_REQUESTED": "Planning requested",
+                    "PLANNING_PREFERRED_DATE_ENTERED": "Planning preferred date entered",
                     "PRODUCT": "Product",
                     "PRODUCT_TYPE": "Product type",
                     "PURCHASE": "Purchase",
@@ -1052,6 +1060,7 @@
                     "TO_REPORT_IN": 'To report in',
                     "TO_BE_PICKED": "Te be picked",
                     "TO_DELIVER": "To deliver",
+                    "TO_ORDER": "To order",
                     "TO_PAY": "To pay",
                     "TOTAL_AMOUNT": "Total amount",
                     "TOTAL_ASSEMBLY_TIME": "Total assembly time",
@@ -1066,6 +1075,7 @@
                     "TRANSPORT": "Transport",
                     "TRANSPORT_COST": "Transportcosts",
                     "TRANSPORT_COST_LINE_TOTAL": "Transportcosts linetotal",
+                    "TRANSPORT_NOTIFICATION": "Transport notification",
                     "TURNOVER_GROUP": "Turnover group",
                     "TYPE": "Type",
                     "UNKNOWN": "unknown",
@@ -2729,7 +2739,9 @@
                 _this.viewModels.push({
                     value: d[_this.codeField],
                     propsForLabel: labels,
-                    checked: (_this.useModel && _this.model && _this.checkField) ? _this.model[_this.checkField] === d[_this.codeField] : index === 0
+                    checked: (_this.useModel && _this.model && _this.checkField) ?
+                        _this.model[_this.checkField] === d[_this.codeField] :
+                        (_this.value ? _this.value === d[_this.codeField] : index === 0)
                 });
             });
             this.viewModelsFiltered = this.viewModels.slice();
@@ -2767,6 +2779,7 @@
         autoClose: [{ type: i0.Input }],
         useModel: [{ type: i0.Input }],
         searchText: [{ type: i0.Input }],
+        value: [{ type: i0.Input }],
         valueChange: [{ type: i0.Output }],
         closeAfterCommit: [{ type: i0.Output }]
     };
@@ -2958,7 +2971,7 @@
                             }
                         }
                     }
-                    resolve(output ? output : button);
+                    resolve({ button: button, output: output ? output : undefined });
                 };
             });
         };
@@ -2989,7 +3002,7 @@
     DialogTransactionLineWarehouseLocationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-dialog-transaction-line-warehouse-location",
-                    template: "\n    <co-dialog [headerTemplate]=\"dialogHeader\" [footerTemplate]=\"footerTemplate\" [showCloseIcon]=\"useModel\" (closeClick)=\"onClose(buttonType.Ok)\">\n      <co-transaction-line-warehouse-location\n        [autoClose]=\"autoClose\"\n        [useModel]=\"useModel\"\n        [transactionLine]=\"transactionLine\"\n        [searchText]=\"searchText\"\n        [warehouseNr]=\"warehouseNr\"\n        (closeAfterCommit)=\"handleClose(buttonType.Ok)\"\n        (valueChange)=\"handleValueChange($event)\"\n      ></co-transaction-line-warehouse-location>\n    </co-dialog>\n    <ng-template #dialogHeader>\n      <co-dialog-header-search [title]=\"'LOCATION'\" (search)=\"handleSearch($event)\"></co-dialog-header-search>\n    </ng-template>\n    <ng-template #footerTemplate>\n      <div class=\"dialog-footer-button-wrapper\" *ngIf=\"!useModel\">\n        <co-button [label]=\"'OK' | localize\" (click)=\"handleOkClick()\"></co-button>\n      </div>\n    </ng-template>\n    ",
+                    template: "\n    <co-dialog [headerTemplate]=\"dialogHeader\" [footerTemplate]=\"footerTemplate\" [showCloseIcon]=\"true\" (closeClick)=\"onClose(buttonType.Ok)\">\n      <co-transaction-line-warehouse-location\n        [autoClose]=\"autoClose\"\n        [useModel]=\"useModel\"\n        [transactionLine]=\"transactionLine\"\n        [searchText]=\"searchText\"\n        [warehouseNr]=\"warehouseNr\"\n        (closeAfterCommit)=\"handleClose(buttonType.Ok)\"\n        (valueChange)=\"handleValueChange($event)\"\n      ></co-transaction-line-warehouse-location>\n    </co-dialog>\n    <ng-template #dialogHeader>\n      <co-dialog-header-search [title]=\"'LOCATION'\" (search)=\"handleSearch($event)\"></co-dialog-header-search>\n    </ng-template>\n    <ng-template #footerTemplate>\n      <div class=\"dialog-footer-button-wrapper\" *ngIf=\"!useModel\">\n        <co-button [label]=\"'OK' | localize\" (click)=\"handleOkClick()\"></co-button>\n      </div>\n    </ng-template>\n    ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3002,14 +3015,14 @@
         __extends(DialogTransactionLineWarehouseCcComponent, _super);
         function DialogTransactionLineWarehouseCcComponent() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.amount = 1;
+            _this.quantity = 1;
             return _this;
         }
         DialogTransactionLineWarehouseCcComponent.prototype.showClass = function () {
             return true;
         };
-        DialogTransactionLineWarehouseCcComponent.prototype.handleAmountChange = function (value) {
-            this.amount = value;
+        DialogTransactionLineWarehouseCcComponent.prototype.handleQuantityChange = function (value) {
+            this.quantity = value;
         };
         DialogTransactionLineWarehouseCcComponent.prototype.handleCommissionCodeChange = function (value) {
             this.commissionCode = value;
@@ -3019,9 +3032,9 @@
         };
         DialogTransactionLineWarehouseCcComponent.prototype.handleOkClick = function () {
             var output = {
-                amount: this.amount,
+                quantity: this.quantity,
                 commissionCode: this.commissionCode,
-                warehouse: this.warehouse,
+                warehouseNr: this.warehouse,
             };
             this.onClose(AppPopupButtonType.Ok, output);
         };
@@ -3033,11 +3046,14 @@
     DialogTransactionLineWarehouseCcComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-dialog-transaction-line-warehouse-cc",
-                    template: "\n    <co-dialog\n      [customCssClass]=\"'co-transaction-small-toolbar'\"\n      [headerTemplate]=\"dialogHeader\"\n      [footerTemplate]=\"footerTemplate\"\n      (closeClick)=\"handleDialogClose()\">\n      <div class=\"transaction-line-warehouse-cc-section\">\n        <co-input-number-picker class=\"amount-number-picker\"\n                                [(model)]=\"amount\" [min]=\"1\"\n                                (modelChange)=\"handleAmountChange($event)\"></co-input-number-picker>\n      </div>\n      <div class=\"transaction-line-warehouse-cc-section\">\n        <div class=\"transaction-line-warehouse-cc-section-label\" [textContent]=\"'COMMISSION_CODE' | localize\"></div>\n        <co-transaction-line-commission-code\n          [useModel]=\"false\"\n          (valueChange)=\"handleCommissionCodeChange($event)\"></co-transaction-line-commission-code>\n      </div>\n      <div class=\"transaction-line-warehouse-cc-section\">\n        <div class=\"transaction-line-warehouse-cc-section-label\" [textContent]=\"'WAREHOUSE' | localize\"></div>\n        <co-transaction-line-warehouse\n          [useModel]=\"false\"\n          (valueChange)=\"handleWarehouseChange($event)\"></co-transaction-line-warehouse>\n      </div>\n    </co-dialog>\n    <ng-template #dialogHeader>\n      <div class=\"dialog-header-title\" [textContent]=\"'COMMISSION_CODE_WAREHOUSE_SELECTION' | localize\"></div>\n    </ng-template>\n    <ng-template #footerTemplate>\n      <div class=\"dialog-footer-button-wrapper\">\n        <co-button [label]=\"'OK' | localize\" (click)=\"handleOkClick()\"></co-button>\n      </div>\n    </ng-template>\n  ",
+                    template: "\n    <co-dialog\n      [customCssClass]=\"'co-transaction-small-toolbar'\"\n      [headerTemplate]=\"dialogHeader\"\n      [footerTemplate]=\"footerTemplate\"\n      (closeClick)=\"handleDialogClose()\">\n      <div class=\"transaction-line-warehouse-cc-section\">\n        <co-input-number-picker class=\"quantity-number-picker\"\n                                [(model)]=\"quantity\" [min]=\"1\"\n                                (modelChange)=\"handleQuantityChange($event)\"></co-input-number-picker>\n      </div>\n      <div class=\"transaction-line-warehouse-cc-section\">\n        <div class=\"transaction-line-warehouse-cc-section-label\" [textContent]=\"'COMMISSION_CODE' | localize\"></div>\n        <co-transaction-line-commission-code\n          [value]=\"commissionCode\"\n          [useModel]=\"false\"\n          (valueChange)=\"handleCommissionCodeChange($event)\"></co-transaction-line-commission-code>\n      </div>\n      <div class=\"transaction-line-warehouse-cc-section\">\n        <div class=\"transaction-line-warehouse-cc-section-label\" [textContent]=\"'WAREHOUSE' | localize\"></div>\n        <co-transaction-line-warehouse\n          [value]=\"warehouse\"\n          [useModel]=\"false\"\n          (valueChange)=\"handleWarehouseChange($event)\"></co-transaction-line-warehouse>\n      </div>\n    </co-dialog>\n    <ng-template #dialogHeader>\n      <div class=\"dialog-header-title\" [textContent]=\"'COMMISSION_CODE_WAREHOUSE_SELECTION' | localize\"></div>\n    </ng-template>\n    <ng-template #footerTemplate>\n      <div class=\"dialog-footer-button-wrapper\">\n        <co-button [label]=\"'OK' | localize\" (click)=\"handleOkClick()\"></co-button>\n      </div>\n    </ng-template>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     DialogTransactionLineWarehouseCcComponent.propDecorators = {
+        quantity: [{ type: i0.Input }],
+        commissionCode: [{ type: i0.Input }],
+        warehouse: [{ type: i0.Input }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-dialog-transaction-line-warehouse-cc",] }]
     };
 
@@ -3063,7 +3079,7 @@
                             return [4 /*yield*/, this.dynamicComponentService.createComponent(ConfirmationDialogComponent, data)];
                         case 1:
                             response = _a.sent();
-                            return [2 /*return*/, response === AppPopupButtonType.Yes];
+                            return [2 /*return*/, response.button === AppPopupButtonType.Yes];
                     }
                 });
             });
@@ -3107,9 +3123,12 @@
             };
             return this.dynamicComponentService.createComponent(CharacteristicAnswerComponent, data);
         };
-        DialogService.prototype.showWarehouseCC = function () {
+        DialogService.prototype.showWarehouseCC = function (quantity, commissionCode, warehouseNr) {
             var data = {
-                useModel: false
+                useModel: false,
+                quantity: quantity,
+                commissionCode: commissionCode,
+                warehouse: warehouseNr,
             };
             return this.dynamicComponentService.createComponent(DialogTransactionLineWarehouseCcComponent, data);
         };
@@ -6305,7 +6324,7 @@
                         case 6:
                             _b.sent();
                             return [2 /*return*/, false];
-                        case 7: return [4 /*yield*/, this._showWarehouseCcDialog(operationStatus.uuid, operationStatus.pendingReason, operationStatus.pendingReasonType)];
+                        case 7: return [4 /*yield*/, this._showWarehouseCcDialog(operationStatus.uuid, transactionLine.amount, transactionLine.commissionCode, transactionLine.warehouseNumber, operationStatus.pendingReason, operationStatus.pendingReasonType)];
                         case 8:
                             _b.sent();
                             return [2 /*return*/, true];
@@ -6430,76 +6449,48 @@
         };
         PendingReasonService.prototype._showCharacteristicDialog = function (uuid, characteristics, reason, type) {
             return __awaiter(this, void 0, void 0, function () {
-                var reasonRequest, _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var reasonRequest, char, response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             reasonRequest = new resolvePendingReasonRequest_bo.ResolveLinePendingReasonRequest(uuid, reason, type);
-                            _a = reasonRequest;
                             return [4 /*yield*/, this.dialogService.showCharacteristics(characteristics.question, characteristics.transactionLineCharacteristicChoices, characteristics.value)];
                         case 1:
-                            _a.textualUserInput =
-                                _b.sent();
-                            return [4 /*yield*/, this.resolvePendingLineReason(reasonRequest)];
-                        case 2:
-                            _b.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        PendingReasonService.prototype._showWarehouseDialog = function (uuid, reason, type) {
-            return __awaiter(this, void 0, void 0, function () {
-                var reasonRequest, _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            reasonRequest = new resolvePendingReasonRequest_bo.ResolveLinePendingReasonRequest(uuid, reason, type);
-                            _a = reasonRequest;
-                            return [4 /*yield*/, this.dialogService.showWarehouse()];
-                        case 1:
-                            _a.warehouseNr = _b.sent();
-                            return [4 /*yield*/, this.resolvePendingLineReason(reasonRequest)];
-                        case 2:
-                            _b.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        PendingReasonService.prototype._showCommissionCodeDialog = function (uuid, reason, type) {
-            return __awaiter(this, void 0, void 0, function () {
-                var reasonRequest, _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            reasonRequest = new resolvePendingReasonRequest_bo.ResolveLinePendingReasonRequest(uuid, reason, type);
-                            _a = reasonRequest;
-                            return [4 /*yield*/, this.dialogService.showCommissionCode()];
-                        case 1:
-                            _a.commissionCode = _b.sent();
+                            response = _a.sent();
+                            if (response.button === AppPopupButtonType.Ok) {
+                                char = response.output;
+                            }
+                            reasonRequest.textualUserInput = char;
                             return [4 /*yield*/, this.resolvePendingLineReason(reasonRequest)];
                         case 2:
-                            _b.sent();
+                            _a.sent();
                             return [2 /*return*/];
                     }
                 });
             });
         };
-        PendingReasonService.prototype._showWarehouseCcDialog = function (uuid, reason, type) {
+        PendingReasonService.prototype._showWarehouseCcDialog = function (uuid, quantity, commissionCode, warehouseNr, reason, type) {
             return __awaiter(this, void 0, void 0, function () {
                 var reasonRequest, response;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
                             reasonRequest = new resolvePendingReasonRequest_bo.ResolveLinePendingReasonRequest(uuid, reason, type);
-                            return [4 /*yield*/, this.dialogService.showWarehouseCC()];
+                            return [4 /*yield*/, this.dialogService.showWarehouseCC(quantity, commissionCode, warehouseNr)];
                         case 1:
                             response = _a.sent();
+                            if (!(response.button === AppPopupButtonType.Ok)) return [3 /*break*/, 3];
+                            reasonRequest.quantity = response.output.quantity;
+                            reasonRequest.commissionCode = response.output.commissionCode;
+                            reasonRequest.warehouseNr = response.output.warehouseNr;
                             return [4 /*yield*/, this.resolvePendingLineReason(reasonRequest)];
                         case 2:
                             _a.sent();
-                            return [2 /*return*/];
+                            return [3 /*break*/, 4];
+                        case 3:
+                            this._cancelArticle(uuid);
+                            _a.label = 4;
+                        case 4: return [2 /*return*/];
                     }
                 });
             });
@@ -15604,6 +15595,106 @@
                 },] }
     ];
 
+    var TransactionLineStatusbarComponent = /** @class */ (function () {
+        function TransactionLineStatusbarComponent(_dictionary) {
+            this._dictionary = _dictionary;
+            this.showClass = true;
+        }
+        Object.defineProperty(TransactionLineStatusbarComponent.prototype, "transaction", {
+            get: function () {
+                return this._transaction;
+            },
+            set: function (value) {
+                this._transaction = value;
+                this._total = value.amount;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TransactionLineStatusbarComponent.prototype.ngOnInit = function () {
+            this.setStatusbarData();
+        };
+        TransactionLineStatusbarComponent.prototype.setStatusbarData = function () {
+            if (this.transactionKind === transactionKind_enum.TransactionKind.PurchaseOrder) {
+                this.setStatusbarDataForPurchaseOrder();
+            }
+            else {
+                this.setStatusbardataForSalesOrder();
+            }
+        };
+        TransactionLineStatusbarComponent.prototype.setStatusbardataForSalesOrder = function () {
+            var transaction = this._transaction;
+            this.statusbarData = [
+                this.getStatusbarLine("TO_ORDER", transaction.amount),
+                this.getStatusbarLine("ALLOCATED", transaction.quantityAllocatedFromStock),
+                this.getStatusbarLine("PLANNING_REQUESTED", transaction.quantityPlanningRequested),
+                this.getStatusbarLine("PLANNING_PREFERRED_DATE_ENTERED", transaction.quantityPlanningPreferredDateEntered),
+                this.getStatusbarLine("TO_BE_PICKED", transaction.quantityToBePicked),
+                this.getStatusbarLine("PICKED", transaction.quantityPicked),
+                this.getStatusbarLine("PLANNED", transaction.quantityPlanned),
+                this.getStatusbarLine("DELIVERED", transaction.quantityDelivered),
+                this.getStatusbarLine("INVOICED", transaction.quantityInvoiced), //Gefactureerd
+            ];
+        };
+        TransactionLineStatusbarComponent.prototype.setStatusbarDataForPurchaseOrder = function () {
+            var transaction = this._transaction;
+            this.statusbarData = [
+                this.getStatusbarLine("IN_ORDER", transaction.amount),
+                this.getStatusbarLine("CONFIRMED", transaction.quantityPurchaseConfirmed),
+                this.getStatusbarLine("TRANSPORT_NOTIFICATION", transaction.quantityTransportNotification), //Transport notificatie
+                //todo: Vooraangemeld
+                //todo: Binnengemeld
+                //todo: Factuurcheck
+            ];
+        };
+        TransactionLineStatusbarComponent.prototype.getStatusbarLine = function (label, property) {
+            return { label: this._dictionary.get(label), percentage: this.calculatePercentage(property, this._total), count: property };
+        };
+        TransactionLineStatusbarComponent.prototype.calculatePercentage = function (amount, totalAmount) {
+            if (amount === 0 || totalAmount === 0) {
+                return 0;
+            }
+            return Math.floor((amount / totalAmount) * 100);
+        };
+        return TransactionLineStatusbarComponent;
+    }());
+    TransactionLineStatusbarComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-transaction-line-statusbar",
+                    template: "\n    <co-statusbar [statusbarData]=\"statusbarData\"></co-statusbar>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    TransactionLineStatusbarComponent.ctorParameters = function () { return [
+        { type: DictionaryService }
+    ]; };
+    TransactionLineStatusbarComponent.propDecorators = {
+        transaction: [{ type: i0.Input }],
+        transactionKind: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-line-statusbar",] }]
+    };
+
+    var TransactionLineStatusbarModule = /** @class */ (function () {
+        function TransactionLineStatusbarModule() {
+        }
+        return TransactionLineStatusbarModule;
+    }());
+    TransactionLineStatusbarModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        CoreModule,
+                        sharedcomponents.StatusbarModule
+                    ],
+                    declarations: [
+                        TransactionLineStatusbarComponent
+                    ],
+                    exports: [
+                        TransactionLineStatusbarComponent
+                    ]
+                },] }
+    ];
+
     var TransactionGridBaseComponent = /** @class */ (function () {
         function TransactionGridBaseComponent(imageService) {
             this.imageService = imageService;
@@ -15681,6 +15772,9 @@
         TransactionLinesGridComponent.prototype.showClass = function () {
             return true;
         };
+        TransactionLinesGridComponent.prototype.ngOnInit = function () {
+            this.transactionKind = this.service.currentTransaction.transactionInfo.transactionKind;
+        };
         TransactionLinesGridComponent.prototype.changeLineAmount = function (row, amount) {
             this.service.changeTransactionLineQuantity(row.uuid, amount).then(function (value) {
                 if (!value || !value.isSuccess) {
@@ -15704,7 +15798,7 @@
     TransactionLinesGridComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-lines-grid",
-                    template: "\n    <co-transaction-base-grid [transactionLines]=\"transactionLines\" (sidePanelClicked)=\"openSidePanel($event)\">\n      <co-simple-grid-column [field]=\"'warehouseNumber'\" [width]=\"50\" [order]=\"40\" [textAlign]=\"align.Right\">\n        <ng-template #headerTemplate>\n          <icon class=\"transaction-grid-header-icon\" [icon]=\"icons.Warehouse\"></icon>\n        </ng-template>\n        <ng-template #template let-row = \"row\">\n          <div [textContent]=\"row.warehouseNumber\" (click)=\"openWarehouseDialog(row)\"></div>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [field]=\"''\" [width]=\"50\" [order]=\"45\" [textAlign]=\"align.Right\">\n        <ng-template #headerTemplate>\n          <icon class=\"transaction-grid-header-icon\" [icon]=\"icons.DeliveryTruck\"></icon>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [field]=\"''\" [width]=\"50\" [order]=\"46\" [textAlign]=\"align.Right\">\n        <ng-template #headerTemplate>\n          <icon class=\"transaction-grid-header-icon\" [icon]=\"icons.DeliveryTruck\"></icon>\n        </ng-template>\n        <ng-template #template let-row = \"row\">\n          <div [textContent]=\"row.commissionCode\" (click)=\"openCommissionCodeDialog(row)\"></div>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'AMOUNT' | localize\" [field]=\"'amount'\" [textAlign]=\"align.Right\" [width]=\"75\" [resizable]=\"false\" [order]=\"50\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'TO_DELIVER' | localize\" [textAlign]=\"align.Right\" [width]=\"75\" [resizable]=\"false\" [order]=\"60\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'STATUS' | localize\" [textAlign]=\"align.Center\" [width]=\"100\" [resizable]=\"false\" [order]=\"70\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'PRICE' | localize\" [textAlign]=\"align.Right\" [order]=\"80\">\n        <ng-template #template let-row = \"row\">\n          <div [textContent]=\"row.price | priceDisplay\"></div>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DISCOUNT' | localize\" [textAlign]=\"align.Right\" [width]=\"100\" [resizable]=\"false\" [order]=\"90\">\n        <ng-template #template let-row = \"row\">\n          <div class=\"transaction-lines-grid-line-label\" [textContent]=\"row.lineTotalDiscountAmount | priceDisplay\"></div>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'SUBTOTAL' | localize\" [textAlign]=\"align.Right\" [width]=\"100\" [resizable]=\"false\" [order]=\"100\">\n        <ng-template #template let-row = \"row\">\n          <div class=\"transaction-lines-grid-line-label\" [textContent]=\"row.lineTotalDiscountAmount | priceDisplay\"></div>\n          <div [textContent]=\"row.netLineTotal | priceDisplay\"></div>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DELIVERY_DATE' | localize\" [textAlign]=\"align.Right\" [width]=\"100\" [resizable]=\"false\" [order]=\"110\">\n        <ng-template #template let-row = \"row\">\n          <div [textContent]=\"row.deliveryDate | date:'dd MMM yyyy'\"></div>\n        </ng-template>\n      </co-simple-grid-column>\n    </co-transaction-base-grid>\n    <co-dialog-transaction-line-commission-code *ngIf=\"showDialogCommissionCode\"\n                                                [transactionInfo]=\"service.currentTransaction.transactionInfo\"\n                                                [transactionLine]=\"currentTransactionLine\"\n                                                (close)=\"showDialogCommissionCode = false\"\n    ></co-dialog-transaction-line-commission-code>\n    <co-dialog-transaction-line-warehouse *ngIf=\"showDialogWarehouse\"\n                                          [transactionInfo]=\"service.currentTransaction.transactionInfo\"\n                                          [transactionLine]=\"currentTransactionLine\"\n                                          (close)=\"showDialogWarehouse = false\">\n    </co-dialog-transaction-line-warehouse>\n  ",
+                    template: "\n    <co-transaction-base-grid [transactionLines]=\"transactionLines\" (sidePanelClicked)=\"openSidePanel($event)\">\n      <co-simple-grid-column [field]=\"'warehouseNumber'\" [width]=\"50\" [order]=\"40\" [textAlign]=\"align.Right\">\n        <ng-template #headerTemplate>\n          <icon class=\"transaction-grid-header-icon\" [icon]=\"icons.Warehouse\"></icon>\n        </ng-template>\n        <ng-template #template let-row = \"row\">\n          <div [textContent]=\"row.warehouseNumber\" (click)=\"openWarehouseDialog(row)\"></div>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [field]=\"''\" [width]=\"50\" [order]=\"45\" [textAlign]=\"align.Right\">\n        <ng-template #headerTemplate>\n          <icon class=\"transaction-grid-header-icon\" [icon]=\"icons.DeliveryTruck\"></icon>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [field]=\"''\" [width]=\"50\" [order]=\"46\" [textAlign]=\"align.Right\">\n        <ng-template #headerTemplate>\n          <icon class=\"transaction-grid-header-icon\" [icon]=\"icons.DeliveryTruck\"></icon>\n        </ng-template>\n        <ng-template #template let-row = \"row\">\n          <div [textContent]=\"row.commissionCode\" (click)=\"openCommissionCodeDialog(row)\"></div>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'AMOUNT' | localize\" [field]=\"'amount'\" [textAlign]=\"align.Right\" [width]=\"75\" [resizable]=\"false\" [order]=\"50\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'TO_DELIVER' | localize\" [textAlign]=\"align.Right\" [width]=\"75\" [resizable]=\"false\" [order]=\"60\"></co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'STATUS' | localize\" [textAlign]=\"align.Left\" [width]=\"100\" [resizable]=\"false\" [order]=\"70\">\n        <ng-template #template let-row = \"row\">\n          <co-transaction-line-statusbar [transaction]=\"row\" [transactionKind]=\"transactionKind\"></co-transaction-line-statusbar>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'PRICE' | localize\" [textAlign]=\"align.Right\" [order]=\"80\">\n        <ng-template #template let-row = \"row\">\n          <div [textContent]=\"row.price | priceDisplay\"></div>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DISCOUNT' | localize\" [textAlign]=\"align.Right\" [width]=\"100\" [resizable]=\"false\" [order]=\"90\">\n        <ng-template #template let-row = \"row\">\n          <div class=\"transaction-lines-grid-line-label\" [textContent]=\"row.lineTotalDiscountAmount | priceDisplay\"></div>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'SUBTOTAL' | localize\" [textAlign]=\"align.Right\" [width]=\"100\" [resizable]=\"false\" [order]=\"100\">\n        <ng-template #template let-row = \"row\">\n          <div class=\"transaction-lines-grid-line-label\" [textContent]=\"row.lineTotalDiscountAmount | priceDisplay\"></div>\n          <div [textContent]=\"row.netLineTotal | priceDisplay\"></div>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"'DELIVERY_DATE' | localize\" [textAlign]=\"align.Right\" [width]=\"100\" [resizable]=\"false\" [order]=\"110\">\n        <ng-template #template let-row = \"row\">\n          <div [textContent]=\"row.deliveryDate | date:'dd MMM yyyy'\"></div>\n        </ng-template>\n      </co-simple-grid-column>\n    </co-transaction-base-grid>\n    <co-dialog-transaction-line-commission-code *ngIf=\"showDialogCommissionCode\"\n                                                [transactionInfo]=\"service.currentTransaction.transactionInfo\"\n                                                [transactionLine]=\"currentTransactionLine\"\n                                                (close)=\"showDialogCommissionCode = false\"\n    ></co-dialog-transaction-line-commission-code>\n    <co-dialog-transaction-line-warehouse *ngIf=\"showDialogWarehouse\"\n                                          [transactionInfo]=\"service.currentTransaction.transactionInfo\"\n                                          [transactionLine]=\"currentTransactionLine\"\n                                          (close)=\"showDialogWarehouse = false\">\n    </co-dialog-transaction-line-warehouse>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -16395,14 +16489,15 @@
         };
         TransactionReceivingGoodsDetailsComponent.prototype.openWarehouseLocationDialog = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
+                var response;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._dialogService.showWarehouseLocation(this.receiptDetails.warehouseNr).then(function (result) {
-                                _this.receiptDetails.locationNr = result;
-                            })];
+                        case 0: return [4 /*yield*/, this._dialogService.showWarehouseLocation(this.receiptDetails.warehouseNr)];
                         case 1:
-                            _a.sent();
+                            response = _a.sent();
+                            if (response.button === AppPopupButtonType.Ok) {
+                                this.receiptDetails.locationNr = response.output;
+                            }
                             return [2 /*return*/];
                     }
                 });
@@ -16467,11 +16562,116 @@
         SearchViewMode[SearchViewMode["SideBar"] = 1] = "SideBar";
     })(SearchViewMode || (SearchViewMode = {}));
 
+    exports.SearchBarViewMode = void 0;
+    (function (SearchBarViewMode) {
+        SearchBarViewMode[SearchBarViewMode["Expanded"] = 0] = "Expanded";
+        SearchBarViewMode[SearchBarViewMode["Collapsed"] = 1] = "Collapsed";
+    })(exports.SearchBarViewMode || (exports.SearchBarViewMode = {}));
+    var TransactionSearchComponent = /** @class */ (function () {
+        function TransactionSearchComponent(transactionSearchService) {
+            this.transactionSearchService = transactionSearchService;
+            this.searchViewModes = SearchViewMode;
+            this.orientations = corecomponents_v12.CoOrientation;
+            this.directionRight = corecomponents_v12.CoDirection.Right;
+            this.transactionClick = new i0.EventEmitter();
+            this.searchViewModeChange = new i0.EventEmitter();
+        }
+        Object.defineProperty(TransactionSearchComponent.prototype, "transactionType", {
+            get: function () {
+                return this._transactionType;
+            },
+            set: function (value) {
+                this._transactionType = value;
+                this.transactionSearchService.transactionType = this._transactionType;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TransactionSearchComponent.prototype.showClass = function () {
+            return true;
+        };
+        TransactionSearchComponent.prototype.onTransactionClick = function (transaction) {
+            if (this.transactionSearchService.activeSearchViewMode === this.searchViewModes.FullScreen) {
+                this.collapseSearchBar();
+            }
+            this._scrollToTop();
+            this.transactionClick.emit(transaction);
+        };
+        TransactionSearchComponent.prototype.onSearchViewResizeClick = function () {
+            if (this.transactionSearchService.activeSearchViewMode === this.searchViewModes.SideBar) {
+                this.transactionSearchService.activeSearchViewMode = this.searchViewModes.FullScreen;
+            }
+            else {
+                this.transactionSearchService.activeSearchViewMode = this.searchViewModes.SideBar;
+            }
+            this.searchViewModeChange.emit(this.transactionSearchService.activeSearchViewMode);
+        };
+        TransactionSearchComponent.prototype.onSideCollapseHandleClick = function () {
+            this.toggleSearchBar();
+        };
+        TransactionSearchComponent.prototype.toggleSearchBar = function () {
+            if (this.transactionSearchService.collapsed || this.transactionSearchService.fullscreen) {
+                this.expandSearchBar();
+            }
+            else {
+                this.collapseSearchBar();
+            }
+        };
+        TransactionSearchComponent.prototype.collapseSearchBar = function () {
+            this.transactionSearchService.activeSearchViewMode = this.searchViewModes.SideBar;
+            this.transactionSearchService.activeSearchBarViewMode = exports.SearchBarViewMode.Collapsed;
+            this.searchViewModeChange.emit(this.searchViewModes.SideBar);
+        };
+        TransactionSearchComponent.prototype.expandSearchBar = function () {
+            this.transactionSearchService.activeSearchViewMode = this.searchViewModes.SideBar;
+            this.transactionSearchService.activeSearchBarViewMode = exports.SearchBarViewMode.Expanded;
+            this.searchViewModeChange.emit(this.searchViewModes.SideBar);
+        };
+        TransactionSearchComponent.prototype.calculateClasses = function () {
+            return {
+                'fullscreen': this.transactionSearchService.fullscreen,
+                'sidebar': !this.transactionSearchService.fullscreen,
+                'collapsed': this.transactionSearchService.collapsed,
+                'expanded': !this.transactionSearchService.collapsed,
+            };
+        };
+        TransactionSearchComponent.prototype._scrollToTop = function () {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        };
+        return TransactionSearchComponent;
+    }());
+    TransactionSearchComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'co-transaction-search',
+                    template: "\n    <div class=\"transaction-search-main-wrapper\">\n      <div class=\"transaction-search-wrapper\"\n           [ngClass]=\"calculateClasses()\">\n        <div class=\"transaction-filter-wrapper narrow-scrollbar\"\n             [ngClass]=\"calculateClasses()\"\n             *ngIf=\"transactionSearchService.showFilterSidebar\" @showHideFilterSidebar>\n          <co-transaction-filter\n            [transactionType]=\"transactionType\"\n            [activeSearchViewMode]=\"transactionSearchService.activeSearchViewMode\"\n            (closeButtonClick)=\"transactionSearchService.handleHideFilter()\"\n            (resetFilterClick)=\"transactionSearchService.handleResetFilter()\"></co-transaction-filter>\n        </div>\n        <div class=\"transaction-search-result-wrapper\"\n             [class.fullscreen]=\"transactionSearchService.fullscreen\"\n             [class.sidebar]=\"!transactionSearchService.fullscreen\"\n             [class.collapsed]=\"transactionSearchService.collapsed\"\n             [class.expanded]=\"!transactionSearchService.collapsed\"\n        >\n          <co-transaction-search-result\n            [transactionType]=\"transactionType\"\n            [activeSearchViewMode]=\"transactionSearchService.activeSearchViewMode\"\n            (filterClick)=\"transactionSearchService.toggleFilter()\"\n            (transactionClick)=\"onTransactionClick($event)\"\n            (resizeClick)=\"onSearchViewResizeClick()\"\n            (closeClick)=\"collapseSearchBar()\"\n          ></co-transaction-search-result>\n        </div>\n      </div>\n      <div class=\"transaction-search-content-wrapper\"\n           [class.fullscreen]=\"transactionSearchService.fullscreen\"\n           [class.sidebar]=\"!transactionSearchService.fullscreen\"\n           [class.collapsed]=\"transactionSearchService.collapsed\"\n           [class.expanded]=\"!transactionSearchService.collapsed\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
+                    animations: [
+                        animations.trigger("showHideFilterSidebar", [
+                            animations.state("void", animations.style({ transform: 'translateX(-100%)' })),
+                            animations.state("*", animations.style({ transform: 'translateX(0)' })),
+                            animations.transition("void <=> *", animations.animate("200ms ease-in-out"))
+                        ])
+                    ],
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    TransactionSearchComponent.ctorParameters = function () { return [
+        { type: TransactionSearchService }
+    ]; };
+    TransactionSearchComponent.propDecorators = {
+        transactionType: [{ type: i0.Input }],
+        transactionClick: [{ type: i0.Output }],
+        searchViewModeChange: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-search",] }]
+    };
+
     var TransactionSearchService = /** @class */ (function () {
         function TransactionSearchService(_transactionService) {
             this._transactionService = _transactionService;
             this.searchRequest = new transactionSearchViewRequest.TransactionSearchViewRequest();
             this.previousSearchRequest = new transactionSearchViewRequest.TransactionSearchViewRequest();
+            this.activeSearchViewMode = SearchViewMode.FullScreen;
+            this.activeSearchBarViewMode = exports.SearchBarViewMode.Expanded;
+            this.showFilterSidebar = false;
             this.transactions = [];
             this.labelBasedOnTransactionType = new Map([
                 [transactionKind_enum.TransactionKind.SalesOrder, "SALESORDERS"],
@@ -16540,6 +16740,34 @@
         TransactionSearchService.prototype.isNewGeneralSearch = function () {
             return this.previousSearchRequest && this.previousSearchRequest.general !== this.searchRequest.general;
         };
+        Object.defineProperty(TransactionSearchService.prototype, "fullscreen", {
+            get: function () {
+                return this.activeSearchViewMode === SearchViewMode.FullScreen;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionSearchService.prototype, "collapsed", {
+            get: function () {
+                return this.activeSearchBarViewMode === exports.SearchBarViewMode.Collapsed;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TransactionSearchService.prototype.toggleFilter = function () {
+            this.showFilterSidebar = !this.showFilterSidebar;
+        };
+        TransactionSearchService.prototype.handleHideFilter = function () {
+            this.showFilterSidebar = false;
+        };
+        TransactionSearchService.prototype.handleResetFilter = function () {
+            var _this = this;
+            this.resetFilters();
+            this.showFilterSidebar = false;
+            setTimeout(function () {
+                _this.showFilterSidebar = true;
+            }, 10);
+        };
         return TransactionSearchService;
     }());
     TransactionSearchService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function TransactionSearchService_Factory() { return new TransactionSearchService(i0__namespace.ɵɵinject(TransactionService)); }, token: TransactionSearchService, providedIn: "root" });
@@ -16966,18 +17194,13 @@
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!row.isArticle) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this._transactionService.getGoodsReceiptStatus(this.transactionId, row.lineNr)
-                                    .then(function (result) {
-                                    _this.rowViewModels.set(row, new ReceiveGoodsViewModel(row, result, result.quantityToReceive === 0, result.quantityToReceive));
-                                })];
-                        case 1:
-                            _a.sent();
-                            _a.label = 2;
-                        case 2: return [2 /*return*/];
+                    if (row.isArticle) {
+                        this._transactionService.getGoodsReceiptStatus(this.transactionId, row.lineNr)
+                            .then(function (result) {
+                            _this.rowViewModels.set(row, new ReceiveGoodsViewModel(row, result, result.quantityToReceive === 0, result.quantityToReceive));
+                        });
                     }
+                    return [2 /*return*/];
                 });
             });
         };
@@ -16988,17 +17211,12 @@
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!!this.locations) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this._articleService.getWarehouseLocations(warehouseNr).then(function (result) {
-                                    _this.locations = result;
-                                })];
-                        case 1:
-                            _a.sent();
-                            _a.label = 2;
-                        case 2: return [2 /*return*/];
+                    if (!this.locations) {
+                        this._articleService.getWarehouseLocations(warehouseNr).then(function (result) {
+                            _this.locations = result;
+                        });
                     }
+                    return [2 /*return*/];
                 });
             });
         };
@@ -17010,31 +17228,26 @@
                 var selectedRows, receivedGoodsRequest_1;
                 var _this = this;
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            selectedRows = __spreadArray([], __read(this.rowViewModels.values())).filter(function (row) { return row.selected && row.toReceive !== 0; });
-                            if (!(value.checkboxValue && selectedRows.length > 0)) return [3 /*break*/, 2];
-                            receivedGoodsRequest_1 = new receiveGoodsForPurchaseOrderRequest_bo.ReceiveGoodsForPurchaseOrderRequest();
-                            receivedGoodsRequest_1.transId = this.transactionId;
-                            receivedGoodsRequest_1.receivedDate = value.date;
-                            receivedGoodsRequest_1.packingSlipNr = value.id;
-                            receivedGoodsRequest_1.purchaseOrderLineReceiptDetailsDTOS = [];
-                            selectedRows.forEach(function (row) {
-                                var detail = new purchaseOrderLineReceiptDetails_bo.PurchaseOrderLineReceiptDetails();
-                                detail.lineNr = row.transactionLine.lineNr;
-                                detail.quantityToReceive = row.toReceive;
-                                detail.warehouseNr = row.transactionLine.warehouseNumber;
-                                detail.locationNr = row.location;
-                                receivedGoodsRequest_1.purchaseOrderLineReceiptDetailsDTOS.push(detail);
-                            });
-                            return [4 /*yield*/, this._transactionService.receiveGoodsForPurchaseOrder(receivedGoodsRequest_1).then(function () {
-                                    _this._handleAfterCommitReceivedOrders(selectedRows);
-                                })];
-                        case 1:
-                            _a.sent();
-                            _a.label = 2;
-                        case 2: return [2 /*return*/];
+                    selectedRows = __spreadArray([], __read(this.rowViewModels.values())).filter(function (row) { return row.selected && row.toReceive !== 0; });
+                    if (value.checkboxValue && selectedRows.length > 0) {
+                        receivedGoodsRequest_1 = new receiveGoodsForPurchaseOrderRequest_bo.ReceiveGoodsForPurchaseOrderRequest();
+                        receivedGoodsRequest_1.transId = this.transactionId;
+                        receivedGoodsRequest_1.receivedDate = value.date;
+                        receivedGoodsRequest_1.packingSlipNr = value.id;
+                        receivedGoodsRequest_1.purchaseOrderLineReceiptDetailsDTOS = [];
+                        selectedRows.forEach(function (row) {
+                            var detail = new purchaseOrderLineReceiptDetails_bo.PurchaseOrderLineReceiptDetails();
+                            detail.lineNr = row.transactionLine.lineNr;
+                            detail.quantityToReceive = row.toReceive;
+                            detail.warehouseNr = row.transactionLine.warehouseNumber;
+                            detail.locationNr = row.location;
+                            receivedGoodsRequest_1.purchaseOrderLineReceiptDetailsDTOS.push(detail);
+                        });
+                        this._transactionService.receiveGoodsForPurchaseOrder(receivedGoodsRequest_1).then(function () {
+                            _this._handleAfterCommitReceivedOrders(selectedRows);
+                        });
                     }
+                    return [2 /*return*/];
                 });
             });
         };
@@ -17055,14 +17268,15 @@
         };
         TransactionReceivedGoodsGridComponent.prototype.openWarehouseLocationDialog = function (line) {
             return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
+                var response;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._dialogService.showWarehouseLocation(line.warehouseNumber).then(function (result) {
-                                _this.getRowViewModel(line).location = result;
-                            })];
+                        case 0: return [4 /*yield*/, this._dialogService.showWarehouseLocation(line.warehouseNumber)];
                         case 1:
-                            _a.sent();
+                            response = _a.sent();
+                            if (response.button === AppPopupButtonType.Ok) {
+                                this.getRowViewModel(line).location = response.output;
+                            }
                             return [2 /*return*/];
                     }
                 });
@@ -17710,7 +17924,9 @@
                         DialogTransactionLineDeliveryMethodModule,
                         DialogTransactionLineVatModule,
                         DialogTransactionLineDiscountModule,
-                        DialogTransactionLinePriceListModule
+                        DialogTransactionLinePriceListModule,
+                        sharedcomponents.StatusbarModule,
+                        TransactionLineStatusbarModule
                     ],
                     declarations: [
                         TransactionLinesGridComponent
@@ -18459,139 +18675,6 @@
                 },] }
     ];
 
-    exports.SearchBarViewMode = void 0;
-    (function (SearchBarViewMode) {
-        SearchBarViewMode[SearchBarViewMode["Expanded"] = 0] = "Expanded";
-        SearchBarViewMode[SearchBarViewMode["Collapsed"] = 1] = "Collapsed";
-    })(exports.SearchBarViewMode || (exports.SearchBarViewMode = {}));
-    var TransactionSearchComponent = /** @class */ (function () {
-        function TransactionSearchComponent(_transactionSearchService) {
-            this._transactionSearchService = _transactionSearchService;
-            this.searchViewModes = SearchViewMode;
-            this.orientations = corecomponents_v12.CoOrientation;
-            this.directionRight = corecomponents_v12.CoDirection.Right;
-            this.activeSearchViewMode = SearchViewMode.FullScreen;
-            this.activeSearchBarViewMode = exports.SearchBarViewMode.Expanded;
-            this.showFilterSidebar = false;
-            this.transactionClick = new i0.EventEmitter();
-            this.searchViewModeChange = new i0.EventEmitter();
-        }
-        Object.defineProperty(TransactionSearchComponent.prototype, "transactionType", {
-            get: function () {
-                return this._transactionType;
-            },
-            set: function (value) {
-                this._transactionType = value;
-                this._transactionSearchService.transactionType = this._transactionType;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TransactionSearchComponent.prototype.showClass = function () {
-            return true;
-        };
-        Object.defineProperty(TransactionSearchComponent.prototype, "fullscreen", {
-            get: function () {
-                return this.activeSearchViewMode === SearchViewMode.FullScreen;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TransactionSearchComponent.prototype, "collapsed", {
-            get: function () {
-                return this.activeSearchBarViewMode === exports.SearchBarViewMode.Collapsed;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TransactionSearchComponent.prototype.toggleFilter = function () {
-            this.showFilterSidebar = !this.showFilterSidebar;
-        };
-        TransactionSearchComponent.prototype.handleHideFilter = function () {
-            this.showFilterSidebar = false;
-        };
-        TransactionSearchComponent.prototype.handleResetFilter = function () {
-            var _this = this;
-            this._transactionSearchService.resetFilters();
-            this.showFilterSidebar = false;
-            setTimeout(function () {
-                _this.showFilterSidebar = true;
-            }, 10);
-        };
-        TransactionSearchComponent.prototype.onTransactionClick = function (transaction) {
-            if (this.activeSearchViewMode === this.searchViewModes.FullScreen) {
-                this.collapseSearchBar();
-            }
-            this._scrollToTop();
-            this.transactionClick.emit(transaction);
-        };
-        TransactionSearchComponent.prototype.onSearchViewResizeClick = function () {
-            if (this.activeSearchViewMode === this.searchViewModes.SideBar) {
-                this.activeSearchViewMode = this.searchViewModes.FullScreen;
-            }
-            else {
-                this.activeSearchViewMode = this.searchViewModes.SideBar;
-            }
-            this.searchViewModeChange.emit(this.activeSearchViewMode);
-        };
-        TransactionSearchComponent.prototype.onSideCollapseHandleClick = function () {
-            this.toggleSearchBar();
-        };
-        TransactionSearchComponent.prototype.toggleSearchBar = function () {
-            if (this.collapsed || this.fullscreen) {
-                this.expandSearchBar();
-            }
-            else {
-                this.collapseSearchBar();
-            }
-        };
-        TransactionSearchComponent.prototype.collapseSearchBar = function () {
-            this.activeSearchViewMode = this.searchViewModes.SideBar;
-            this.activeSearchBarViewMode = exports.SearchBarViewMode.Collapsed;
-            this.searchViewModeChange.emit(this.activeSearchViewMode);
-        };
-        TransactionSearchComponent.prototype.expandSearchBar = function () {
-            this.activeSearchViewMode = this.searchViewModes.SideBar;
-            this.activeSearchBarViewMode = exports.SearchBarViewMode.Expanded;
-            this.searchViewModeChange.emit(this.activeSearchViewMode);
-        };
-        TransactionSearchComponent.prototype.calculateClasses = function () {
-            return {
-                'fullscreen': this.fullscreen,
-                'sidebar': !this.fullscreen,
-                'collapsed': this.collapsed,
-                'expanded': !this.collapsed,
-            };
-        };
-        TransactionSearchComponent.prototype._scrollToTop = function () {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        };
-        return TransactionSearchComponent;
-    }());
-    TransactionSearchComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'co-transaction-search',
-                    template: "\n    <div class=\"transaction-search-main-wrapper\">\n      <div class=\"transaction-search-wrapper\"\n           [ngClass]=\"calculateClasses()\">\n        <div class=\"transaction-filter-wrapper narrow-scrollbar\"\n             [ngClass]=\"calculateClasses()\"\n             *ngIf=\"showFilterSidebar\" @showHideFilterSidebar>\n          <co-transaction-filter\n            [transactionType]=\"transactionType\"\n            [activeSearchViewMode]=\"activeSearchViewMode\"\n            (closeButtonClick)=\"handleHideFilter()\"\n            (resetFilterClick)=\"handleResetFilter()\"></co-transaction-filter>\n        </div>\n        <div class=\"transaction-search-result-wrapper\"\n             [class.fullscreen]=\"fullscreen\"\n             [class.sidebar]=\"!fullscreen\"\n             [class.collapsed]=\"collapsed\"\n             [class.expanded]=\"!collapsed\"\n        >\n          <co-transaction-search-result\n            [transactionType]=\"transactionType\"\n            [activeSearchViewMode]=\"activeSearchViewMode\"\n            (filterClick)=\"toggleFilter()\"\n            (transactionClick)=\"onTransactionClick($event)\"\n            (resizeClick)=\"onSearchViewResizeClick()\"\n            (closeClick)=\"collapseSearchBar()\"\n          ></co-transaction-search-result>\n        </div>\n      </div>\n      <div class=\"transaction-search-content-wrapper\"\n           [class.fullscreen]=\"fullscreen\"\n           [class.sidebar]=\"!fullscreen\"\n           [class.collapsed]=\"collapsed\"\n           [class.expanded]=\"!collapsed\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
-                    animations: [
-                        animations.trigger("showHideFilterSidebar", [
-                            animations.state("void", animations.style({ transform: 'translateX(-100%)' })),
-                            animations.state("*", animations.style({ transform: 'translateX(0)' })),
-                            animations.transition("void <=> *", animations.animate("200ms ease-in-out"))
-                        ])
-                    ],
-                    encapsulation: i0.ViewEncapsulation.None
-                },] }
-    ];
-    TransactionSearchComponent.ctorParameters = function () { return [
-        { type: TransactionSearchService }
-    ]; };
-    TransactionSearchComponent.propDecorators = {
-        transactionType: [{ type: i0.Input }],
-        transactionClick: [{ type: i0.Output }],
-        searchViewModeChange: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-search",] }]
-    };
-
     var TransactionFilterComponent = /** @class */ (function () {
         function TransactionFilterComponent(_mappingService, _compFactoryResolver, appRef, injector, searchService) {
             this._mappingService = _mappingService;
@@ -20547,70 +20630,72 @@
     exports["ɵhz"] = TransactionBaseGridComponent;
     exports["ɵi"] = BusinessObjectCacheManagerService;
     exports["ɵia"] = TransactionGridBaseComponent;
-    exports["ɵib"] = TransactionLinesGridComponent;
-    exports["ɵic"] = DiscountModule;
-    exports["ɵid"] = DiscountComponent;
-    exports["ɵie"] = TransactionQuickAccessOverviewModule;
-    exports["ɵif"] = TransactionQuickAccessOverviewComponent;
-    exports["ɵig"] = TransactionOrderConfirmationGridModule;
-    exports["ɵih"] = TransactionOrderConfirmationGridComponent;
-    exports["ɵii"] = TransactionReceivedGoodsGridModule;
-    exports["ɵij"] = DialogTransactionLineWarehouseLocationModule;
-    exports["ɵik"] = TransactionLineWarehouseLocationModule;
-    exports["ɵil"] = TransactionLineWarehouseLocationComponent;
-    exports["ɵim"] = DialogTransactionLineWarehouseLocationComponent;
-    exports["ɵin"] = TransactionReceivedGoodsGridComponent;
-    exports["ɵio"] = ViewModeButtonsModule;
-    exports["ɵip"] = ViewModeButtonsComponent;
-    exports["ɵiq"] = TransactionGridModule;
-    exports["ɵir"] = TransactionGridComponent;
-    exports["ɵis"] = TransactionTileModule;
-    exports["ɵit"] = TransactionTileComponent;
-    exports["ɵiu"] = TransactionSearchResultModule;
-    exports["ɵiv"] = TransactionSearchSalesOrderTileModule;
-    exports["ɵiw"] = StatusBarModule;
-    exports["ɵix"] = StatusBarComponent;
-    exports["ɵiy"] = TransactionSearchSalesOrderTileComponent;
-    exports["ɵiz"] = TransactionSearchTileBaseComponent;
+    exports["ɵib"] = TransactionLineStatusbarModule;
+    exports["ɵic"] = TransactionLineStatusbarComponent;
+    exports["ɵid"] = TransactionLinesGridComponent;
+    exports["ɵie"] = DiscountModule;
+    exports["ɵif"] = DiscountComponent;
+    exports["ɵig"] = TransactionQuickAccessOverviewModule;
+    exports["ɵih"] = TransactionQuickAccessOverviewComponent;
+    exports["ɵii"] = TransactionOrderConfirmationGridModule;
+    exports["ɵij"] = TransactionOrderConfirmationGridComponent;
+    exports["ɵik"] = TransactionReceivedGoodsGridModule;
+    exports["ɵil"] = DialogTransactionLineWarehouseLocationModule;
+    exports["ɵim"] = TransactionLineWarehouseLocationModule;
+    exports["ɵin"] = TransactionLineWarehouseLocationComponent;
+    exports["ɵio"] = DialogTransactionLineWarehouseLocationComponent;
+    exports["ɵip"] = TransactionReceivedGoodsGridComponent;
+    exports["ɵiq"] = ViewModeButtonsModule;
+    exports["ɵir"] = ViewModeButtonsComponent;
+    exports["ɵis"] = TransactionGridModule;
+    exports["ɵit"] = TransactionGridComponent;
+    exports["ɵiu"] = TransactionTileModule;
+    exports["ɵiv"] = TransactionTileComponent;
+    exports["ɵiw"] = TransactionSearchResultModule;
+    exports["ɵix"] = TransactionSearchSalesOrderTileModule;
+    exports["ɵiy"] = StatusBarModule;
+    exports["ɵiz"] = StatusBarComponent;
     exports["ɵj"] = CacheField;
-    exports["ɵja"] = TransactionSearchPurchaseOrderTileModule;
-    exports["ɵjb"] = TransactionSearchPurchaseOrderTileComponent;
-    exports["ɵjc"] = TransactionSearchSalesOrderGridModule;
-    exports["ɵjd"] = TransactionSearchSalesOrderGridComponent;
-    exports["ɵje"] = TransactionSearchGridBaseComponent;
-    exports["ɵjf"] = TransactionSearchPurchaseOrderGridModule;
-    exports["ɵjg"] = TransactionSearchPurchaseOrderGridComponent;
-    exports["ɵjh"] = TransactionSearchHeaderModule;
-    exports["ɵji"] = TransactionSearchHeaderComponent;
-    exports["ɵjj"] = TransactionSearchGridModule;
-    exports["ɵjk"] = TransactionSearchGridComponent;
-    exports["ɵjl"] = TransactionSearchTileModule;
-    exports["ɵjm"] = TransactionSearchTileComponent;
-    exports["ɵjn"] = TransactionSearchResultComponent;
-    exports["ɵjo"] = TransactionSalesOrderFilterModule;
-    exports["ɵjp"] = TransactionSalesOrderFilterContentOrderModule;
-    exports["ɵjq"] = TransactionSalesOrderFilterContentOrderComponent;
-    exports["ɵjr"] = TransactionFilterContentBaseComponent;
-    exports["ɵjs"] = FilterRequestService;
-    exports["ɵjt"] = TransactionSalesOrderFilterContentLogisticsModule;
-    exports["ɵju"] = TransactionFilterHistoricStateModule;
-    exports["ɵjv"] = TransactionFilterHistoricStateComponent;
-    exports["ɵjw"] = TransactionSalesOrderFilterContentLogisticsComponent;
-    exports["ɵjx"] = TransactionSalesOrderFilterContentArticleModule;
-    exports["ɵjy"] = TransactionSalesOrderFilterContentArticleComponent;
-    exports["ɵjz"] = TransactionSalesOrderFilterComponent;
+    exports["ɵja"] = TransactionSearchSalesOrderTileComponent;
+    exports["ɵjb"] = TransactionSearchTileBaseComponent;
+    exports["ɵjc"] = TransactionSearchPurchaseOrderTileModule;
+    exports["ɵjd"] = TransactionSearchPurchaseOrderTileComponent;
+    exports["ɵje"] = TransactionSearchSalesOrderGridModule;
+    exports["ɵjf"] = TransactionSearchSalesOrderGridComponent;
+    exports["ɵjg"] = TransactionSearchGridBaseComponent;
+    exports["ɵjh"] = TransactionSearchPurchaseOrderGridModule;
+    exports["ɵji"] = TransactionSearchPurchaseOrderGridComponent;
+    exports["ɵjj"] = TransactionSearchHeaderModule;
+    exports["ɵjk"] = TransactionSearchHeaderComponent;
+    exports["ɵjl"] = TransactionSearchGridModule;
+    exports["ɵjm"] = TransactionSearchGridComponent;
+    exports["ɵjn"] = TransactionSearchTileModule;
+    exports["ɵjo"] = TransactionSearchTileComponent;
+    exports["ɵjp"] = TransactionSearchResultComponent;
+    exports["ɵjq"] = TransactionSalesOrderFilterModule;
+    exports["ɵjr"] = TransactionSalesOrderFilterContentOrderModule;
+    exports["ɵjs"] = TransactionSalesOrderFilterContentOrderComponent;
+    exports["ɵjt"] = TransactionFilterContentBaseComponent;
+    exports["ɵju"] = FilterRequestService;
+    exports["ɵjv"] = TransactionSalesOrderFilterContentLogisticsModule;
+    exports["ɵjw"] = TransactionFilterHistoricStateModule;
+    exports["ɵjx"] = TransactionFilterHistoricStateComponent;
+    exports["ɵjy"] = TransactionSalesOrderFilterContentLogisticsComponent;
+    exports["ɵjz"] = TransactionSalesOrderFilterContentArticleModule;
     exports["ɵk"] = SelectMultipleParameterizedCacheService;
-    exports["ɵka"] = TransactionFilterBaseComponent;
-    exports["ɵkb"] = TransactionPurchaseOrderFilterModule;
-    exports["ɵkc"] = TransactionPurchaseOrderFilterContentOrderModule;
-    exports["ɵkd"] = TransactionPurchaseOrderFilterContentOrderComponent;
-    exports["ɵke"] = TransactionPurchaseOrderFilterContentLogisticsModule;
-    exports["ɵkf"] = TransactionPurchaseOrderFilterContentLogisticsComponent;
-    exports["ɵkg"] = TransactionPurchaseOrderFilterContentArticleModule;
-    exports["ɵkh"] = TransactionPurchaseOrderFilterContentArticleComponent;
-    exports["ɵki"] = TransactionPurchaseOrderFilterComponent;
-    exports["ɵkj"] = TransactionFilterModule;
-    exports["ɵkk"] = TransactionFilterComponent;
+    exports["ɵka"] = TransactionSalesOrderFilterContentArticleComponent;
+    exports["ɵkb"] = TransactionSalesOrderFilterComponent;
+    exports["ɵkc"] = TransactionFilterBaseComponent;
+    exports["ɵkd"] = TransactionPurchaseOrderFilterModule;
+    exports["ɵke"] = TransactionPurchaseOrderFilterContentOrderModule;
+    exports["ɵkf"] = TransactionPurchaseOrderFilterContentOrderComponent;
+    exports["ɵkg"] = TransactionPurchaseOrderFilterContentLogisticsModule;
+    exports["ɵkh"] = TransactionPurchaseOrderFilterContentLogisticsComponent;
+    exports["ɵki"] = TransactionPurchaseOrderFilterContentArticleModule;
+    exports["ɵkj"] = TransactionPurchaseOrderFilterContentArticleComponent;
+    exports["ɵkk"] = TransactionPurchaseOrderFilterComponent;
+    exports["ɵkl"] = TransactionFilterModule;
+    exports["ɵkm"] = TransactionFilterComponent;
     exports["ɵl"] = ErrorService;
     exports["ɵm"] = SelectSingleCacheService;
     exports["ɵn"] = ArticleConnectorService;