@colijnit/transaction 12.1.22 → 12.1.25

package/fesm2015/colijnit-transaction.js

@@ -56,7 +56,8 @@ import { StockLocation } from '@colijnit/articleapi/build/model/stock-location.b
 import { ArticleLight } from '@colijnit/articleapi/build/model/article-light.bo';
 import { TurnoverGroupImage } from '@colijnit/articleapi/build/model/turnover-group-image.bo';
 import { MainArticle } from '@colijnit/articleapi/build/model/main-article.bo';
-import { FormMasterService, FormComponent, CoDialogModule, ButtonModule, InputComboBoxModule, InputTextModule, FormModule, InputRadioButtonModule, IconModule, InputCheckboxModule, InputListboxModule, DropDownModule, ClickoutsideModule, InputTextComponent, InputNumberPickerModule, PriceDisplayPipeModule, InputDatePickerModule, CoDialogPromptModule, MultiSelectListModule, PopupModule, CoSidebarModule, CoGridModule, CoRichTextEditorModule, Carousel3dModule, InputTextareaModule, CollapsibleModule, ColumnAlign, SimpleGridColumnDirective, SimpleGridModule, GridToolbarButtonModule, InputDateRangePickerModule, InputSearchModule, FilterItemModule, PaginationModule } from '@colijnit/corecomponents_v12';
+import { ResolveHeaderPendingReasonRequest } from '@colijnit/transactionapi/build/model/resolve-header-pending-reason-request.bo';
+import { FormMasterService, FormComponent, CoDialogModule, ButtonModule, InputComboBoxModule, InputTextModule, FormModule, InputRadioButtonModule, IconModule, InputCheckboxModule, InputListboxModule, DropDownModule, ClickoutsideModule, InputTextComponent, InputNumberPickerModule, PriceDisplayPipeModule, InputDatePickerModule, CoDialogPromptModule, MultiSelectListModule, PopupModule, CoSidebarModule, CoGridModule, CoRichTextEditorModule, Carousel3dModule, InputTextareaModule, CollapsibleModule, InputDatePickerComponent, ColumnAlign, SimpleGridColumnDirective, SimpleGridModule, GridToolbarButtonModule, InputDateRangePickerModule, InputSearchModule, FilterItemModule, PaginationModule, PaginationBarModule } from '@colijnit/corecomponents_v12';
 import { FlexModule } from '@angular/flex-layout';
 import { CommunicationType } from '@colijnit/transactionapi/build/enum/communication-type.enum';
 import { ContactOption } from '@colijnit/transactionapi/build/model/contact-option.bo';
@@ -73,11 +74,13 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { TransactionAddTextLineRequest } from '@colijnit/transactionapi/build/model/transaction-add-text-line-request.bo';
 import { StockStatus } from '@colijnit/transactionapi/build/enum/refcode/stock-status.enum';
+import { TransactionInfo } from '@colijnit/transactionapi/build/model/transaction-info.bo';
 import { RelationRequest } from '@colijnit/transactionapi/build/model/relation-request';
 import { Sharedapi } from '@colijnit/sharedapi/build/sharedapi';
 import { CoDocument } from '@colijnit/sharedapi/build/model/co-document.bo';
 import { KeyPadModule } from '@colijnit/sharedcomponents';
 import { DiscountType } from '@colijnit/transactionapi/build/enum/discount-type.enum';
+import { RelationKind } from '@colijnit/transactionapi/build/enum/relation-kind.enum';
 import { ReceiveGoodsForPurchaseOrderCorrectionRequest } from '@colijnit/transactionapi/build/model/receive-goods-for-purchase-order-correction-request.bo';
 import { PurchaseOrderLineReceiptCorrectionDetails } from '@colijnit/transactionapi/build/model/purchase-order-line-receipt-correction-details.bo';
 import { PurchaseOrderLineReceiptDetails } from '@colijnit/transactionapi/build/model/purchase-order-line-receipt-details.bo';
@@ -89,7 +92,6 @@ import { GetPurchasePortalLine } from '@colijnit/transactionapi/build/model/get-
 import { PurchasePortalFilters } from '@colijnit/transactionapi/build/model/purchase-portal-filters.bo';
 import { DocDeliveryBatch } from '@colijnit/transactionapi/build/model/doc-delivery-batch.bo';
 import { ArticleExtendedRequest } from '@colijnit/articleapi/build/model/article-extended-request';
-import { RelationKind } from '@colijnit/transactionapi/build/enum/relation-kind.enum';
 import { QuantityInHistoricState } from '@colijnit/transactionapi/build/enum/quantity-in-historic-state.enum';
 
 var LanguageCode;
@@ -2188,6 +2190,20 @@ class TransactionConnectorService {
             });
         });
     }
+    resolvePendingHeaderReason(pendingHeaderValues) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.resolvePendingHeaderReason(pendingHeaderValues).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
     getCommissionCodes(languageCode) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
@@ -2604,6 +2620,21 @@ class TransactionConnectorService {
             }
         });
     }
+    changeHeaderTransactionDeliveryDate(uuid, date) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                newDeliveryDate: date
+            };
+            const response = yield this.connector.changeHeaderTransactionDeliveryDate(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
     changeTransactionLineCollectionCode(uuid, lineUuid, code) {
         return __awaiter(this, void 0, void 0, function* () {
             const request = {
@@ -3052,6 +3083,19 @@ class PendingReasonService {
             return success;
         });
     }
+    handleHeaderOperationStatuses(response) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!response.headerOperationStatuses || response.headerOperationStatuses.length === 0) {
+                return true;
+            }
+            let success = true;
+            for (let i = 0; i < response.headerOperationStatuses.length; i++) {
+                const status = response.headerOperationStatuses[i];
+                success = success && (yield this._handleHeaderOperationStatus(status, response.transactionInfo));
+            }
+            return success;
+        });
+    }
     _rememberCurrentTransaction(value) {
         return __awaiter(this, void 0, void 0, function* () {
             this.currentTransaction = value;
@@ -3090,6 +3134,20 @@ class PendingReasonService {
             }
         });
     }
+    _handleHeaderOperationStatus(operationStatus, transactionInfo) {
+        return __awaiter(this, void 0, void 0, function* () {
+            switch (operationStatus.pendingReasonType) {
+                case PendingReasonType.ABORTED:
+                case PendingReasonType.CANCELLED:
+                    return false;
+                case PendingReasonType.CONFIRMATION_NEEDED:
+                    return yield this._confirmHeaderAction(transactionInfo.uuid, operationStatus.pendingReason, operationStatus.pendingReasonType);
+                case PendingReasonType.NONE:
+                default:
+                    return true;
+            }
+        });
+    }
     resolvePendingLineReason(pendingLineValues) {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.resolvePendingLineReason(pendingLineValues);
@@ -3097,6 +3155,13 @@ class PendingReasonService {
             this.handleLineOperationStatuses(response);
         });
     }
+    resolvePendingHeaderReason(pendingHeaderValues) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.connector.resolvePendingHeaderReason(pendingHeaderValues);
+            this._rememberCurrentTransaction(response);
+            return this.handleHeaderOperationStatuses(response);
+        });
+    }
     _confirmAction(uuid, reason, type) {
         return __awaiter(this, void 0, void 0, function* () {
             const reasonRequest = new ResolveLinePendingReasonRequest(uuid, reason, type);
@@ -3106,6 +3171,14 @@ class PendingReasonService {
             // this._handleLineOperationStatus()
         });
     }
+    _confirmHeaderAction(uuid, reason, type) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const reasonRequest = new ResolveHeaderPendingReasonRequest(uuid, reason, type);
+            // const pendingReasonText: string = await this._getPendingReasonText(this.currentOperationStatus.pendingReason);
+            reasonRequest.confirmation = yield this.dialogService.showYesNo('Action', reason);
+            return yield this.resolvePendingHeaderReason(reasonRequest);
+        });
+    }
     _showReasonDialog(reason) {
         return __awaiter(this, void 0, void 0, function* () {
             this.dialogService.showInformation(reason);
@@ -3199,6 +3272,21 @@ class TransactionService extends PendingReasonService {
             return false;
         });
     }
+    updateHeaderTransactionDeliveryDate(uuid, date) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.connector.changeHeaderTransactionDeliveryDate(uuid, date)
+                .catch((error) => {
+                // todo: do something with the error
+                return false;
+            });
+            if (response) {
+                const success = yield this.handleHeaderOperationStatuses(response);
+                this._rememberCurrentTransaction(response);
+                return success;
+            }
+            return false;
+        });
+    }
     updateQuantityTransactionLine(uuid, lineUuid, quantity) {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.changeTransactionLineQuantity(uuid, lineUuid, quantity)
@@ -3773,10 +3861,9 @@ class CheckoutComponent {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.checkoutRelation && this.stepRelation) {
                 const valid = this.checkoutRelation.submit();
-                this.stepRelation.completed = yield this.saveRelation();
-                // if (valid) {
-                //   this.saveRelation();
-                // }
+                if (valid) {
+                    this.stepRelation.completed = yield this.saveRelation();
+                }
             }
         });
     }
@@ -3784,10 +3871,9 @@ class CheckoutComponent {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.checkoutDelivery && this.stepDelivery) {
                 const valid = this.checkoutDelivery.submit();
-                this.stepDelivery.completed = yield this.handleSaveDelivery();
-                // if (valid) {
-                //   this.handleSaveDelivery();
-                // }
+                if (valid) {
+                    this.stepDelivery.completed = yield this.handleSaveDelivery();
+                }
             }
         });
     }
@@ -3899,6 +3985,7 @@ var Icon;
     Icon["CartShoppingSolid"] = "cart_shopping_solid";
     Icon["CashRegister"] = "cash_register";
     Icon["CreditCardSolid"] = "credit_card_solid";
+    Icon["DeliveryStatusUncheck"] = "delivery_status_uncheck";
     Icon["DeliveryTruck"] = "delivery_truck";
     Icon["EditPencil"] = "edit_pencil";
     Icon["IdealLogo"] = "ideal_logo";
@@ -3918,6 +4005,8 @@ var Icon;
     Icon["ShelvesSolid"] = "shelves_solid";
     Icon["SidePanel"] = "side_panel";
     Icon["SlideIn"] = "slide_in";
+    Icon["SquareFull"] = "square_full";
+    Icon["SquareFullSolid"] = "square_full_solid";
     Icon["SyncAlt"] = "sync_alt";
     Icon["Tag"] = "tag";
     Icon["ThickLines"] = "thick_lines";
@@ -4469,6 +4558,7 @@ const IconSvg = {
     "cart_shopping_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M96 0C107.5 0 117.4 8.19 119.6 19.51L121.1 32H541.8C562.1 32 578.3 52.25 572.6 72.66L518.6 264.7C514.7 278.5 502.1 288 487.8 288H170.7L179.9 336H488C501.3 336 512 346.7 512 360C512 373.3 501.3 384 488 384H159.1C148.5 384 138.6 375.8 136.4 364.5L76.14 48H24C10.75 48 0 37.25 0 24C0 10.75 10.75 0 24 0H96zM128 464C128 437.5 149.5 416 176 416C202.5 416 224 437.5 224 464C224 490.5 202.5 512 176 512C149.5 512 128 490.5 128 464zM512 464C512 490.5 490.5 512 464 512C437.5 512 416 490.5 416 464C416 437.5 437.5 416 464 416C490.5 416 512 437.5 512 464z\"/></svg>",
     "cash_register": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M35.39,18.12H14.62L10,29.66H40ZM23,19.29H27l.1,1.6H22.87Zm-.13,2h4.32l.12,1.81H22.72Zm-.15,2.3h4.62l.14,2.08h-4.9ZM17.9,19.29H22l-.16,1.6H17.54Zm-.46,2h4.32l-.18,1.81H17Zm-.53,2.3h4.62l-.2,2.08h-4.9Zm-1.16,5.06.55-2.42H27.49l.16,2.42ZM28,19.29H32.1l.36,1.6H28.2Zm.2,2h4.32L33,23.12H28.42Zm.23,2.3h4.62l.48,2.08h-4.9Zm.5,5.06-.24-2.42h5l.55,2.42Z\" fill=\"#484f60\"/><path d=\"M10,29.66v9.23H40V29.66Zm27.69,6.92H12.31V32H37.69Z\" fill=\"#484f60\"/><path d=\"M15.63,11.11v7.58H34.37V11.11Zm17.31,6.15H17.06V12.54H32.94Z\" fill=\"#484f60\"/></svg>",
     "credit_card_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M512 32C547.3 32 576 60.65 576 96V128H0V96C0 60.65 28.65 32 64 32H512zM576 416C576 451.3 547.3 480 512 480H64C28.65 480 0 451.3 0 416V224H576V416zM112 352C103.2 352 96 359.2 96 368C96 376.8 103.2 384 112 384H176C184.8 384 192 376.8 192 368C192 359.2 184.8 352 176 352H112zM240 384H368C376.8 384 384 376.8 384 368C384 359.2 376.8 352 368 352H240C231.2 352 224 359.2 224 368C224 376.8 231.2 384 240 384z\"/></svg>",
+    "delivery_status_uncheck": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 50 50\" style=\"enable-background:new 0 0 50 50;\" ><style type=\"text/css\">.rect{fill:#514F4F;}</style><path class=\"rect\" d=\"M50,50H0.1V0H50V50z M41.5,8.2H8.6v33.2h32.9V8.2z\"/></svg>",
     "delivery_truck": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"15.35\" y=\"16.56\" width=\"15.14\" height=\"10.94\" transform=\"translate(-1.83 2.08) rotate(-5)\" fill=\"#484f60\"/><path d=\"M38.5,18.1l-6.9.61L32.41,28l-7.63.67a3.76,3.76,0,0,1,1.43,2.25l7.25-.63A3.83,3.83,0,0,1,41,29.6l1-.1-.52-6Zm.29,5.84-3.91.34a.51.51,0,0,1-.55-.46L34,20.1a.49.49,0,0,1,.45-.54l2.27-.2a.5.5,0,0,1,.48.25l2,3.59A.5.5,0,0,1,38.79,23.94Z\" fill=\"#484f60\"/><path d=\"M19.66,29.09a3.8,3.8,0,0,0-1,2.46l-.74.07-1.82-.94L16,29.41Z\" fill=\"#484f60\"/><path d=\"M34.56,30.62a2.74,2.74,0,1,0,2.49-3A2.73,2.73,0,0,0,34.56,30.62Z\" fill=\"#484f60\"/><path d=\"M19.74,31.91a2.74,2.74,0,1,0,2.49-3A2.74,2.74,0,0,0,19.74,31.91Z\" fill=\"#484f60\"/><rect x=\"7.96\" y=\"17.63\" width=\"5\" height=\"1\" transform=\"translate(-1.54 0.98) rotate(-5)\" fill=\"#484f60\"/><rect x=\"11.02\" y=\"29.71\" width=\"3\" height=\"1\" transform=\"translate(-2.59 1.21) rotate(-5)\" fill=\"#484f60\"/><rect x=\"9.48\" y=\"23.53\" width=\"4\" height=\"1\" transform=\"matrix(1, -0.09, 0.09, 1, -2.05, 1.09)\" fill=\"#484f60\"/></svg>",
     "edit_pencil": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"12.54 38.16 12 37.62 14.85 29.64 20.52 35.31 12.54 38.16\" fill=\"#484f60\"/><rect x=\"16.33\" y=\"20.52\" width=\"17.99\" height=\"8.64\" transform=\"translate(-10.15 25.18) rotate(-45)\" fill=\"#484f60\"/><path d=\"M37.54,18.73,36,20.32l-6.11-6.1,1.59-1.59a1.55,1.55,0,0,1,2.2,0l3.91,3.9A1.55,1.55,0,0,1,37.54,18.73Z\" fill=\"#484f60\"/></svg>",
     "ideal_logo": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 306.1 269.8\" style=\"enable-background:new 0 0 306.1 269.8;\" ><style type=\"text/css\">.st0{fill:#FFFFFF;}.st1{fill:#CC0066;}</style><g><g><path class=\"st0\" d=\"M0,20v229.8c0,11,9,20,20,20h137.3c103.8,0,148.8-58.1,148.8-135.2C306.1,57.9,261.1,0,157.3,0H20C9,0,0,9,0,20z\"/><path class=\"st1\" d=\"M91.9,56.4v169.8h73.9c67.1,0,96.2-37.9,96.2-91.5c0-51.3-29.1-91.1-96.2-91.1h-61.1C97.6,43.6,91.9,49.4,91.9,56.4z\"/><g><g><path d=\"M157.3,251.5H37.9c-10.6,0-19.2-8.6-19.2-19.2V37.6c0-10.6,8.6-19.2,19.2-19.2h119.4c113.3,0,130.2,72.9,130.2,116.3C287.5,210,241.2,251.5,157.3,251.5z M37.9,24.8c-7.1,0-12.8,5.7-12.8,12.8v194.7c0,7.1,5.7,12.8,12.8,12.8h119.4c79.8,0,123.8-39.2,123.8-110.4c0-95.6-77.6-109.9-123.8-109.9H37.9z\"/></g></g></g><g><path class=\"st0\" d=\"M117.9,111.8c2.6,0,5,0.4,7.3,1.2c2.3,0.8,4.2,2.1,5.9,3.7c1.6,1.7,2.9,3.8,3.9,6.2c0.9,2.5,1.4,5.4,1.4,8.8c0,3-0.4,5.7-1.1,8.2c-0.8,2.5-1.9,4.7-3.4,6.5c-1.5,1.8-3.4,3.2-5.7,4.3c-2.3,1-5,1.6-8.1,1.6h-17.5v-40.6H117.9z M117.3,144.9c1.3,0,2.5-0.2,3.8-0.6c1.2-0.4,2.3-1.1,3.2-2.1c0.9-1,1.7-2.2,2.3-3.8c0.6-1.6,0.9-3.4,0.9-5.7c0-2-0.2-3.9-0.6-5.5c-0.4-1.6-1.1-3.1-2-4.2s-2.1-2.1-3.6-2.7c-1.5-0.6-3.3-0.9-5.5-0.9h-6.4v25.6H117.3z\"/><path class=\"st0\" d=\"M172.5,111.8v7.5h-21.4v8.7h19.7v6.9h-19.7v9.9H173v7.5h-30.8v-40.6H172.5z\"/><path class=\"st0\" d=\"M203.1,111.8l15.2,40.6H209l-3.1-9h-15.2l-3.2,9h-9l15.3-40.6H203.1z M203.6,136.7l-5.1-14.9h-0.1l-5.3,14.9H203.6z\"/><path class=\"st0\" d=\"M232.8,111.8v33.1h19.8v7.5h-28.7v-40.6H232.8z\"/></g><g><circle cx=\"58.5\" cy=\"132.1\" r=\"18.7\"/></g><path d=\"M72.6,226.2L72.6,226.2c-15.7,0-28.3-12.7-28.3-28.3v-22.1c0-7.8,6.3-14.2,14.2-14.2h0c7.8,0,14.2,6.3,14.2,14.2V226.2z\"/></g></svg>",
@@ -4488,6 +4578,8 @@ const IconSvg = {
     "shelves_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\"><path d=\"M608 0c-17.6 0-32 14.4-32 31.1V160H64V31.1C64 14.4 49.6 0 32 0S0 14.4 0 31.1v480h64v-32h512v32h64v-480C640 14.4 625.6 0 608 0zM576 416H64V224h512V416zM368 128h96C472.8 128 480 120.8 480 112v-96C480 7.25 472.8 0 464 0h-96C359.2 0 352 7.25 352 16v96C352 120.8 359.2 128 368 128zM112 384h96C216.8 384 224 376.8 224 368v-96C224 263.2 216.8 256 208 256h-96C103.2 256 96 263.2 96 272v96C96 376.8 103.2 384 112 384zM272 384h96c8.75 0 16-7.25 16-16v-96C384 263.2 376.8 256 368 256h-96C263.2 256 256 263.2 256 272v96C256 376.8 263.2 384 272 384z\"/></svg>",
     "side_panel": "<svg width=\"47px\" height=\"43px\" viewBox=\"0 0 47 43\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><defs><image width=\"47\" height=\"43\" xlink:href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAArCAYAAADottG6AAAABHNCSVQICAgIfAhkiAAAAHtJREFUWIXt18EJwCAQAEENKSNv60gVgVQYSBWpw3f6OHvQx3Kw8xcX0QNrRERJaqMDVhhPMZ5iPMV4ivEU4ynGU/bZhb3/5Xm/pc3v6yytHdPrq58RiPEUHywl9bUxnuKDpaS+NsZTUsennjapT95RSTGeYjzFeErq+AEBrixGEVJ5mAAAAABJRU5ErkJggg==\" /></defs><use xlink:href=\"#img_1\" fill=\"#FFFFFF\" stroke=\"none\" /></svg>",
     "slide_in": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M12,12.17H38v26H12ZM36.76,13.4H13.24V36.93H36.76Z\" fill=\"#484f60\"/><polygon points=\"33.71 23.42 28.41 23.42 28.41 20.43 24.13 24.72 28.41 29.01 28.41 26.02 33.71 26.02 33.71 23.42\" fill=\"#484f60\"/><rect x=\"12\" y=\"12.17\" width=\"9\" height=\"26\" fill=\"#484f60\"/></svg>",
+    "square_full": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M464 48v416h-416v-416H464zM512 0H0v512h512V0z\"/></svg>",
+    "square_full_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M0 0h512v512H0V0z\"/></svg>",
     "sync_alt": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z\"/></svg>",
     "tag": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M40,29.15v-.68a5.28,5.28,0,0,0-1.34-3.25L24.78,11.34A5.34,5.34,0,0,0,21.53,10H11.9A1.91,1.91,0,0,0,10,11.9v9.63a5.28,5.28,0,0,0,1.34,3.25L25.22,38.66A5.28,5.28,0,0,0,28.47,40h.68a5.28,5.28,0,0,0,3.24-1.34l6.27-6.27A5.28,5.28,0,0,0,40,29.15ZM13.13,16.72a2.54,2.54,0,1,1,3.59,0A2.55,2.55,0,0,1,13.13,16.72Zm15.9,19L17.84,24.55l1.34-1.34L30.37,34.4Zm2.69-2.69L20.52,21.87l1.35-1.35,11.19,11.2Zm2.68-2.69L23.21,19.18l1.34-1.34L35.75,29Z\" fill=\"#484f60\"/></svg>",
     "thick_lines": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"10\" y=\"12.67\" width=\"30\" height=\"7\" fill=\"#484f60\"/><rect x=\"10\" y=\"21.67\" width=\"30\" height=\"7\" fill=\"#484f60\"/><rect x=\"10\" y=\"30.67\" width=\"30\" height=\"7\" fill=\"#484f60\"/></svg>",
@@ -6593,7 +6685,11 @@ TransactionLineComponent.decorators = [
           </div>
           <div class="transaction-line-description">
             <div class="description-wrapper">
-              <span [textContent]="line.goodDescription" class="transaction-line-description-description"></span>
+              <co-transaction-line-description class="transaction-line-description-description"
+                                               [transactionLine]="line"
+                                               [defaultEditMode]="false"
+                                               [showLabel]="false"
+              ></co-transaction-line-description>
               <span *ngIf="line.goodDescription && line.articleNumber" class="transaction-line-description-divider">|</span>
               <span [textContent]="line.articleNumber" class="transaction-line-description-sku"></span>
               <co-icon class="delete-icon" [iconData]="iconCacheService.getIcon(icons.TrashCanLight)" (click)="deleteTransactionLineClick()"></co-icon>
@@ -6938,6 +7034,7 @@ class TransactionLineFieldsBaseComponent {
     constructor() {
         this.readonly = false;
         this._transactionLine = new TransactionLineInfo();
+        this._transactionInfo = new TransactionInfo();
     }
     set transactionLine(value) {
         if (value) {
@@ -6949,15 +7046,28 @@ class TransactionLineFieldsBaseComponent {
     get transactionLine() {
         return this._transactionLine;
     }
+    set transactionInfo(value) {
+        if (value) {
+            this._transactionInfo = value;
+            this.transactionInfoSet();
+        }
+    }
+    get transactionInfo() {
+        return this._transactionInfo;
+    }
     // overridden by descendents
     transactionLineSet() {
     }
+    // overridden by descendents
+    transactionInfoSet() {
+    }
 }
 TransactionLineFieldsBaseComponent.decorators = [
     { type: Directive }
 ];
 TransactionLineFieldsBaseComponent.propDecorators = {
-    transactionLine: [{ type: Input }]
+    transactionLine: [{ type: Input }],
+    transactionInfo: [{ type: Input }]
 };
 
 class TransactionLinePriceComponent extends TransactionLineFieldsBaseComponent {
@@ -7054,6 +7164,100 @@ TransactionLinePriceModule.decorators = [
             },] }
 ];
 
+class TransactionLineDescriptionComponent extends TransactionLineFieldsBaseComponent {
+    constructor(_transactionService) {
+        super();
+        this._transactionService = _transactionService;
+        this.showLabel = true;
+        this.defaultEditMode = true;
+        this._editMode = false;
+    }
+    set child(content) {
+        if (content) {
+            this.input = content;
+            this.input.commit = (description) => this.commitDescription(description);
+            if (this._editMode) {
+                this.input.requestFocus();
+            }
+        }
+    }
+    set editMode(value) {
+        this._editMode = value;
+        if (this._editMode && this.input) {
+            this.input.doFocus();
+        }
+    }
+    get editMode() {
+        return this._editMode;
+    }
+    handleClick(event) {
+        if (!this.readonly) {
+            this.editMode = true;
+        }
+    }
+    commitDescription(description) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // todo uncomment and finish when updateGoodDescriptionTransactionLine is present in the middletier
+            // if (this.transactionLine.goodDescription !== description) {
+            //   const oldDescription = this.transactionLine.goodDescription;
+            //   const success = await this._transactionService.updateGoodDescriptionTransactionLine(this._transactionService.currentTransaction.transactionInfo.uuid, this.transactionLine.uuid, description);
+            //   if (!success) {
+            //     this.input.model = oldDescription;
+            //   }
+            //   return success;
+            // }
+            return true;
+        });
+    }
+    transactionLineSet() {
+        this.readonly = this.readonly || !this.transactionLine.articleFreeDescription;
+    }
+}
+TransactionLineDescriptionComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-line-description",
+                template: `
+    <span *ngIf="(!editMode  || readonly) && !defaultEditMode" [textContent]="transactionLine.goodDescription"></span>
+    <co-input-text #input *ngIf="editMode || defaultEditMode"
+                   [placeholder]="showLabel ? ('GOOD_DESCRIPTION' | localize) : ''"
+                   [showSaveCancel]="!readonly"
+                   [readonly]="readonly"
+                   [model]="transactionLine.goodDescription"
+                   (blur)="editMode = false"
+    ></co-input-text>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionLineDescriptionComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionLineDescriptionComponent.propDecorators = {
+    child: [{ type: ViewChild, args: ['input', { read: InputTextComponent },] }],
+    showLabel: [{ type: Input }],
+    defaultEditMode: [{ type: Input }],
+    editMode: [{ type: Input }],
+    handleClick: [{ type: HostListener, args: ["click", ["$event"],] }]
+};
+
+class TransactionLineDescriptionModule {
+}
+TransactionLineDescriptionModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    InputTextModule,
+                    PipeModule
+                ],
+                declarations: [
+                    TransactionLineDescriptionComponent
+                ],
+                exports: [
+                    TransactionLineDescriptionComponent
+                ]
+            },] }
+];
+
 class TransactionLineModule {
 }
 TransactionLineModule.decorators = [
@@ -7069,7 +7273,8 @@ TransactionLineModule.decorators = [
                     TransactionLineActionButtonsModule,
                     IconModule,
                     EditableLabelModule,
-                    TransactionLinePriceModule
+                    TransactionLinePriceModule,
+                    TransactionLineDescriptionModule
                 ],
                 declarations: [
                     TransactionLineComponent
@@ -7949,7 +8154,7 @@ CheckoutModule.decorators = [
                 entryComponents: [
                     CheckoutComponent
                 ],
-                exports: [CheckoutComponent],
+                exports: [CheckoutComponent, CheckoutOverviewRelationEditComponent],
                 bootstrap: [CheckoutComponent]
             },] }
 ];
@@ -8038,7 +8243,9 @@ class TransactionComponent {
         this._subs = [];
         this._transaction = new TransactionInfoResponse();
         this._subs.push(this._service.transactionUpdated.subscribe((transaction) => __awaiter(this, void 0, void 0, function* () {
-            this.transaction = transaction;
+            if (transaction) {
+                this.transaction = transaction;
+            }
         })));
     }
     set transaction(value) {
@@ -8108,9 +8315,16 @@ TransactionComponent.decorators = [
       ></co-transaction-button-bar>
 
       <co-view-mode-buttons class="transaction-lines-header-item"
-                            [showViewModes]="[viewModes.List, viewModes.Grid]" (viewModeChange)="activeViewMode = $event"></co-view-mode-buttons>
+                            [showViewModes]="[viewModes.List, viewModes.Grid, viewModes.Tiles]" (viewModeChange)="activeViewMode = $event"></co-view-mode-buttons>
     </div>
 
+    <div class="transaction-tiles-wrapper" *ngIf="activeViewMode === viewModes.Tiles">
+      <co-transaction-tile
+        *ngFor="let transaction of transaction.transactionLines"
+        [transactionLine]="transaction"
+        (showSidePanelClicked)="handleShowSidePanel($event)"
+      ></co-transaction-tile>
+    </div>
     <div class="transaction-lines-wrapper" *ngIf="activeViewMode === viewModes.List">
       <co-transaction-lines
         [transactionLines]="transaction.transactionLines"
@@ -8141,11 +8355,9 @@ TransactionComponent.decorators = [
     </co-discount>
 
     <co-transaction-line-side-panel *ngIf="showSidePanel" @showHideSidePanel
-                                    [transactionType]="transaction.transactionInfo.transactionKind"
-                                    [activeCategory]="activeCategory"
+                                    [transactionInfo]="transaction.transactionInfo"
                                     [transactionLine]="sidePanelTransactionLine"
-                                    [transactionId]="transactionId"
-                                    [transactionInfoNr]="transaction.transactionInfo.transactionNr"
+                                    [activeCategory]="activeCategory"
                                     (cancelClick)="handleCloseSidePanel($event)"
     ></co-transaction-line-side-panel>
   `,
@@ -8445,7 +8657,11 @@ TransactionHeaderDeliveryComponent.decorators = [
     <ng-template #firstBlock>
       <div class="header-delivery-deliverydate-label co-transaction-label" [textContent]="'DELIVERY_DATE' | localize"></div>
       <div class="header-delivery-deliverydate-wrapper" [class.closed]="transactionInfo.deliveryDateDefinitive">
-        <span class="header-delivery-deliverydate" [textContent]="transactionInfo.deliveryDate | date:'dd MMM yyyy'"></span>
+        <co-transaction-header-delivery-date class="header-delivery-deliverydate"
+                                             [transactionInfo]="transactionInfo"
+                                             [defaultEditMode]="false"
+                                             [showLabel]="false"
+        ></co-transaction-header-delivery-date>
         <co-icon *ngIf="transactionInfo.deliveryDateDefinitive" [iconData]="iconService.getIcon(icons.LockKeyholeSolid)"></co-icon>
         <co-icon *ngIf="!transactionInfo.deliveryDateDefinitive" [iconData]="iconService.getIcon(icons.LockKeyholeOpenSolid)"></co-icon>
       </div>
@@ -8470,6 +8686,106 @@ TransactionHeaderDeliveryComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ["class.co-transaction-header-delivery",] }]
 };
 
+class TransactionHeaderFieldsBaseComponent {
+    constructor() {
+        this.readonly = false;
+        this._transactionInfo = new TransactionInfo();
+    }
+    set transactionInfo(value) {
+        if (value) {
+            this._transactionInfo = value;
+            this.transactionInfoSet();
+        }
+    }
+    get transactionInfo() {
+        return this._transactionInfo;
+    }
+    // overridden by descendents
+    transactionInfoSet() {
+    }
+}
+TransactionHeaderFieldsBaseComponent.decorators = [
+    { type: Directive }
+];
+TransactionHeaderFieldsBaseComponent.propDecorators = {
+    transactionInfo: [{ type: Input }]
+};
+
+class TransactionHeaderDeliveryDateComponent extends TransactionHeaderFieldsBaseComponent {
+    constructor(_transactionService) {
+        super();
+        this._transactionService = _transactionService;
+        this.showLabel = true;
+        this.defaultEditMode = true;
+        this._editMode = false;
+    }
+    set child(content) {
+        if (content) {
+            this.input = content;
+            this.input.commit = (date) => this.commitDeliveryDate(date);
+            if (this._editMode) {
+                this.input.doFocus();
+            }
+        }
+    }
+    set editMode(value) {
+        this._editMode = value;
+        if (this._editMode && this.input) {
+            this.input.doFocus();
+        }
+    }
+    get editMode() {
+        return this._editMode;
+    }
+    handleClick(event) {
+        if (!this.readonly) {
+            this.editMode = true;
+        }
+    }
+    commitDeliveryDate(date) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.transactionInfo.deliveryDate !== date) {
+                const oldDate = this.transactionInfo.deliveryDate;
+                const success = yield this._transactionService.updateHeaderTransactionDeliveryDate(this._transactionService.currentTransaction.transactionInfo.uuid, date);
+                if (!success) {
+                    this.input.model = oldDate;
+                }
+                return success;
+            }
+            return true;
+        });
+    }
+    transactionInfoSet() {
+        this.readonly = this.readonly || this.transactionInfo.deliveryDateDefinitive;
+    }
+}
+TransactionHeaderDeliveryDateComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-header-delivery-date",
+                template: `
+    <span *ngIf="(!editMode  || readonly) && !defaultEditMode" [textContent]="transactionInfo.deliveryDate | date:'dd MMM yyyy'"></span>
+    <co-input-date #input *ngIf="editMode || defaultEditMode"
+                   [placeholder]="showLabel ? ('DELIVERY_DATE' | localize) : ''"
+                   [showSaveCancel]="!readonly"
+                   [readonly]="readonly"
+                   [model]="transactionInfo.deliveryDate"
+                   (blur)="editMode = false"
+    ></co-input-date>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionHeaderDeliveryDateComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionHeaderDeliveryDateComponent.propDecorators = {
+    child: [{ type: ViewChild, args: ['input', { read: InputDatePickerComponent },] }],
+    showLabel: [{ type: Input }],
+    defaultEditMode: [{ type: Input }],
+    editMode: [{ type: Input }],
+    handleClick: [{ type: HostListener, args: ["click", ["$event"],] }]
+};
+
 class TransactionHeaderDeliveryModule {
 }
 TransactionHeaderDeliveryModule.decorators = [
@@ -8480,10 +8796,12 @@ TransactionHeaderDeliveryModule.decorators = [
                     TransactionHeaderBlockModule,
                     InputCheckboxModule,
                     IconModule,
-                    PipeModule
+                    PipeModule,
+                    InputDatePickerModule
                 ],
                 declarations: [
-                    TransactionHeaderDeliveryComponent
+                    TransactionHeaderDeliveryComponent,
+                    TransactionHeaderDeliveryDateComponent
                 ],
                 exports: [
                     TransactionHeaderDeliveryComponent
@@ -8880,6 +9198,7 @@ class TransactionLineSidePanelComponent {
         this.categories = TransactionTypeCategory;
         this.transactionTypes = TransactionKind;
         this.transactionLine = new TransactionLineInfo();
+        this.transactionInfo = new TransactionInfo();
         this.cancelClick = new EventEmitter();
     }
     showClass() {
@@ -8919,23 +9238,24 @@ TransactionLineSidePanelComponent.decorators = [
     </div>
     <div class="transaction-line-side-panel-nav-bar">
       <co-transaction-button-bar
-        [transactionType]="transactionType"
+        [transactionType]="transactionInfo.transactionKind"
         (buttonClicked)="activeCategory = $event.category"
       ></co-transaction-button-bar>
     </div>
     <div class="transaction-line-side-panel-content">
-      <ng-container [ngSwitch]="transactionType">
+      <ng-container [ngSwitch]="transactionInfo.transactionKind">
         <ng-container *ngSwitchCase="transactionTypes.PurchaseOrder">
           <co-transaction-line-side-panel-purchase
+            [transactionInfo]="transactionInfo"
             [transactionLine]="transactionLine"
-            [transactionId]="transactionId"
-            [transactionInfoNr]="transactionInfoNr"
             [category]="activeCategory"
             (quantityToReceiveChange)="quantityToReceive = $event"
           ></co-transaction-line-side-panel-purchase>
         </ng-container>
         <ng-container *ngSwitchDefault>
           <co-transaction-line-side-panel-purchase
+            [transactionInfo]="transactionInfo"
+            [transactionLine]="transactionLine"
             [category]="activeCategory"
           ></co-transaction-line-side-panel-purchase>
         </ng-container>
@@ -8951,12 +9271,10 @@ TransactionLineSidePanelComponent.ctorParameters = () => [
     { type: TransactionEventService }
 ];
 TransactionLineSidePanelComponent.propDecorators = {
-    transactionType: [{ type: Input }],
     transactionLine: [{ type: Input }],
-    transactionId: [{ type: Input }],
+    transactionInfo: [{ type: Input }],
     activeCategory: [{ type: Input }],
     cancelClick: [{ type: Output }],
-    transactionInfoNr: [{ type: Input }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-line-side-panel",] }]
 };
 
@@ -9041,7 +9359,7 @@ TransactionLineSidePanelDefaultComponent.decorators = [
         </div>
         <div class="side-panel-input-row">
           <co-transaction-line-delivery-method class="side-panel-input" [transactionLine]="transactionLine"></co-transaction-line-delivery-method>
-          <co-transaction-line-delivery-date class="side-panel-input" [transactionLine]="transactionLine"></co-transaction-line-delivery-date>
+          <co-transaction-line-delivery-date class="side-panel-input" [transactionLine]="transactionLine" [transactionInfo]="transactionInfo"></co-transaction-line-delivery-date>
         </div>
         <div class="side-panel-input-row">
           <co-input-text class="side-panel-input" [placeholder]="'ASSEMBLY_TIME' | localize" [readonly]="readonly"></co-input-text>
@@ -9051,7 +9369,7 @@ TransactionLineSidePanelDefaultComponent.decorators = [
           <co-input-text class="side-panel-input" [placeholder]="'MODIFICATION_TIME' | localize" [readonly]="readonly"></co-input-text>
         </div>
         <div class="side-panel-input-row">
-          <co-input-combo-box class="side-panel-input" [collection]="data" [placeholder]="'SUPPLIER' | localize" [readonly]="readonly"></co-input-combo-box>
+          <co-transaction-line-supplier class="side-panel-input" [transactionLine]="transactionLine"></co-transaction-line-supplier>
           <co-input-text class="side-panel-input" [placeholder]="'ARTICLE_NR_SUPPLIER' | localize" [model]="transactionLine.articleNumber" [readonly]="readonly"></co-input-text>
         </div>
         <div class="side-panel-input-row">
@@ -9067,6 +9385,10 @@ TransactionLineSidePanelDefaultComponent.decorators = [
       [expanded]="true"
     >
       <div class="collapsible-content-wrapper">
+        <div class="side-panel-input-row">
+          <co-transaction-line-description class="side-panel-input"
+                                           [transactionLine]="transactionLine"></co-transaction-line-description>
+        </div>
         <div class="side-panel-input-row">
           <co-transaction-line-reference class="side-panel-input" [transactionLine]="transactionLine"></co-transaction-line-reference>
         </div>
@@ -9094,6 +9416,7 @@ TransactionLineSidePanelDefaultComponent.ctorParameters = () => [
 ];
 TransactionLineSidePanelDefaultComponent.propDecorators = {
     transactionLine: [{ type: Input }],
+    transactionInfo: [{ type: Input }],
     cancelClick: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-line-side-panel-default",] }]
 };
@@ -9422,6 +9745,9 @@ class TransactionLineDeliveryDateComponent extends TransactionLineFieldsBaseComp
             return true;
         });
     }
+    transactionInfoSet() {
+        this.readonly = this.readonly || (this.transactionInfo.deliveryDateDefinitive || !this.transactionInfo.allowPartialDelivery);
+    }
 }
 TransactionLineDeliveryDateComponent.decorators = [
     { type: Component, args: [{
@@ -9548,6 +9874,9 @@ class TransactionLineCommissionCodeComponent extends TransactionLineFieldsBaseCo
             return true;
         });
     }
+    transactionLineSet() {
+        this.readonly = this.readonly || !this.transactionLine.articleFreeCommissionCode;
+    }
 }
 TransactionLineCommissionCodeComponent.decorators = [
     { type: Component, args: [{
@@ -9847,21 +10176,90 @@ TransactionLineSpecialDiscountModule.decorators = [
             },] }
 ];
 
-class TransactionLineSidePanelDefaultModule {
-}
-TransactionLineSidePanelDefaultModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    CoreModule,
-                    PipeModule,
-                    ButtonModule,
-                    CollapsibleModule,
-                    InputTextModule,
-                    InputComboBoxModule,
-                    InputDatePickerModule,
-                    InputNumberPickerModule,
-                    TransactionLinePriceModule,
+class TransactionLineSupplierComponent extends TransactionLineFieldsBaseComponent {
+    constructor(_transactionService) {
+        super();
+        this._transactionService = _transactionService;
+        this.data = [];
+        this.fields = { text: "displayName", value: "relationId" };
+    }
+    ngOnInit() {
+        const request = new RelationRequest();
+        request.relationType = RelationKind.Supplier;
+        this._transactionService.getRelationListObjects(request).then((relationListObjects) => {
+            this.data = relationListObjects;
+        });
+    }
+    commitSupplier(code) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // if (this.transactionLine.supplier !== code) {
+            //   const oldCode = this.transactionLine.supplier;
+            //   const success = await this._transactionService.updateSupplierTransactionLine(this._transactionService.currentTransaction.transactionInfo.uuid, this.transactionLine.uuid, code);
+            //   if (!success) {
+            //     // this.transactionLine.supplier = code;
+            //   }
+            //   return success;
+            // }
+            return true;
+        });
+    }
+    transactionLineSet() {
+        this.readonly = this.readonly || !this.transactionLine.articleFreeSupplier;
+    }
+}
+TransactionLineSupplierComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-line-supplier",
+                template: `
+    <co-input-combo-box
+      [collection]="data"
+      [placeholder]="'SUPPLIER' | localize"
+      [fields]="fields"
+      [readonly]="readonly"
+      [model]="tempSupplier"
+      (modelChange)="commitSupplier($event)"
+    ></co-input-combo-box>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionLineSupplierComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+
+class TransactionLineSupplierModule {
+}
+TransactionLineSupplierModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    PipeModule,
+                    InputComboBoxModule
+                ],
+                declarations: [
+                    TransactionLineSupplierComponent
+                ],
+                exports: [
+                    TransactionLineSupplierComponent
+                ]
+            },] }
+];
+
+class TransactionLineSidePanelDefaultModule {
+}
+TransactionLineSidePanelDefaultModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule,
+                    PipeModule,
+                    ButtonModule,
+                    CollapsibleModule,
+                    InputTextModule,
+                    InputComboBoxModule,
+                    InputDatePickerModule,
+                    InputNumberPickerModule,
+                    TransactionLinePriceModule,
                     TransactionLinePriceListModule,
                     TransactionLineVatModule,
                     TransactionLineQuantityModule,
@@ -9873,7 +10271,9 @@ TransactionLineSidePanelDefaultModule.decorators = [
                     TransactionLineWarehouseModule,
                     TransactionLineDiscountAmountModule,
                     TransactionLineQuantumDiscountModule,
-                    TransactionLineSpecialDiscountModule
+                    TransactionLineSpecialDiscountModule,
+                    TransactionLineSupplierModule,
+                    TransactionLineDescriptionModule
                 ],
                 declarations: [
                     TransactionLineSidePanelDefaultComponent
@@ -9925,15 +10325,41 @@ TransactionHistoryGridComponent.decorators = [
         ></co-grid-toolbar-button>
       </div>
       <co-simple-grid [data]="collection" [extraColumns]="extraColumns" (selectRow)="handleSelectRow($event)">
-        <co-simple-grid-column [headerText]="'STATE' | localize" [field]="'status'" [order]="10" [width]="150">
+        <co-simple-grid-column [headerText]="'DELIVERY_DATE' | localize" [order]="20" [width]="100">
+          <ng-template #template let-row="row">
+            <div class="row-container">
+              <span class="row" [textContent]="row.receiptDate | date"></span>
+              <span class="correction" *ngFor="let correction of row.corrections" [textContent]="correction.receiptDate | date"></span>
+            </div>
+          </ng-template>
+        </co-simple-grid-column>
+
+        <co-simple-grid-column [headerText]="'AMOUNT' | localize" [order]="30" [width]="70">
+          <ng-template #template let-row="row">
+            <div class="row-container">
+              <span class="row" [textContent]="row.quantity"></span>
+              <span class="correction" *ngFor="let correction of row.corrections" [textContent]="correction.quantity"></span>
+            </div>
+          </ng-template>
+        </co-simple-grid-column>
+
+        <co-simple-grid-column [headerText]="'REFERENCE' | localize" [order]="50">
+          <ng-template #template let-row="row">
+            <div class="row-container">
+              <span class="row" [textContent]="row.reference"></span>
+              <span class="correction" *ngFor="let correction of row.corrections" [textContent]="correction.reference"></span>
+            </div>
+          </ng-template>
+        </co-simple-grid-column>
+
+        <co-simple-grid-column [headerText]="'USER' | localize" [order]="70">
           <ng-template #template let-row="row">
-            <co-transaction-history-grid-status [statusType]="row.status" [subType]="row.type"></co-transaction-history-grid-status>
+            <div class="row-container">
+              <span class="row" [textContent]="row.username"></span>
+              <span class="correction" *ngFor="let correction of row.corrections" [textContent]="correction.username"></span>
+            </div>
           </ng-template>
         </co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'DELIVERY_DATE' | localize" [field]="'receiptDate'" [order]="20" [width]="100"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'AMOUNT' | localize" [field]="'quantity'" [order]="30" [width]="70"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'REFERENCE' | localize" [field]="'reference'" [order]="50"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'USER' | localize" [field]="'username'" [order]="70"></co-simple-grid-column>
       </co-simple-grid>
     </div>
   `,
@@ -10083,10 +10509,23 @@ TransactionReceivingGoodsHistoryComponent.decorators = [
       [collection]="goodsReceiptHistory"
       (deleteSelectedRow)="handleDeleteSelectedRow($event)"
     >
-      <co-simple-grid-column [headerText]="'WAREHOUSE' | localize" [field]="'warehouseNumber'"
-                             [order]="40"></co-simple-grid-column>
-      <co-simple-grid-column [headerText]="'LOCATION' | localize" [field]="'locationNumber'"
-                             [order]="60"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'WAREHOUSE' | localize" [order]="40">
+        <ng-template #template let-row="row">
+          <div class="row-container">
+            <span class="row" [textContent]="row.warehouseNumber"></span>
+            <span class="correction" *ngFor="let correction of row.corrections" [textContent]="correction.warehouseNumber"></span>
+          </div>
+        </ng-template>
+      </co-simple-grid-column>
+
+      <co-simple-grid-column [headerText]="'LOCATION' | localize" [order]="60">
+        <ng-template #template let-row="row">
+          <div class="row-container">
+            <span class="row" [textContent]="row.locationNumber"></span>
+            <span class="correction" *ngFor="let correction of row.corrections" [textContent]="correction.locationNumber"></span>
+          </div>
+        </ng-template>
+      </co-simple-grid-column>
     </co-transaction-history-grid>
   `,
                 encapsulation: ViewEncapsulation.None
@@ -10342,6 +10781,7 @@ class TransactionSearchService {
     constructor(_transactionService) {
         this._transactionService = _transactionService;
         this.searchRequest = new TransactionSearchViewRequest();
+        this.previousSearchRequest = new TransactionSearchViewRequest();
         this.transactions = [];
         this.labelBasedOnTransactionType = new Map([
             [TransactionKind.SalesOrder, "SALESORDERS"],
@@ -10350,7 +10790,7 @@ class TransactionSearchService {
         ]);
         this.transactionsPerPage = 20;
         this.resultCount = 0;
-        this._showcasePage = 1;
+        this._currentPage = 1;
         this._transactionType = TransactionKind.SalesOrder;
     }
     set transactionType(value) {
@@ -10361,34 +10801,44 @@ class TransactionSearchService {
     get transactionType() {
         return this._transactionType;
     }
-    get showcasePage() {
-        return this._showcasePage;
+    get currentPage() {
+        return this._currentPage;
     }
-    set showcasePage(value) {
-        this._showcasePage = value;
+    set currentPage(value) {
+        this._currentPage = value;
         this.searchTransactions();
     }
     searchTransactions() {
         this.searchRequest.transactionKind = this.transactionType;
-        const lowerBound = ((this.showcasePage - 1) * this.transactionsPerPage) + 1;
+        if (this.isNewGeneralSearch()) {
+            this._currentPage = 1;
+        }
+        const lowerBound = ((this.currentPage - 1) * this.transactionsPerPage) + 1;
         this.searchRequest.paging = new PagingParameters(lowerBound, lowerBound + this.transactionsPerPage - 1, this.transactionsPerPage);
         this._transactionService.searchTransactions(this.searchRequest).then((result) => {
             this.transactions = result.transactions;
             this.resultCount = result.count;
         });
+        this.setPreviousSearchRequest();
     }
     getLabelBasedOnTransactionType() {
         return this.labelBasedOnTransactionType.get(this._transactionType);
     }
     resetFilters() {
-        const oldSearchRequest = Object.assign({}, this.searchRequest);
+        this.setPreviousSearchRequest();
         this._resetRequest();
-        this.searchRequest.general = oldSearchRequest.general;
+        this.searchRequest.general = this.previousSearchRequest.general;
         this.searchTransactions();
     }
     _resetRequest() {
         this.searchRequest = new TransactionSearchViewRequest();
     }
+    setPreviousSearchRequest() {
+        this.previousSearchRequest = Object.assign({}, this.searchRequest);
+    }
+    isNewGeneralSearch() {
+        return this.previousSearchRequest && this.previousSearchRequest.general !== this.searchRequest.general;
+    }
 }
 TransactionSearchService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionSearchService_Factory() { return new TransactionSearchService(i0.ɵɵinject(TransactionService)); }, token: TransactionSearchService, providedIn: "root" });
 TransactionSearchService.decorators = [
@@ -10595,58 +11045,64 @@ TransactionSearchPurchaseOrderGridComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-transaction-search-purchase-order-grid",
                 template: `
-    <div>
-      <co-simple-grid [data]="searchService.transactions" [extraColumns]="extraColumns" [dragDropEnabled]="true" [emitDragDrop]="false"
-                      (selectRow)="onTransactionClick($event)">
-        <co-simple-grid-column [headerText]="'ACTIVE' | localize"
-                               [order]="10" [textAlign]="align.Center">
-          <ng-template #template let-row= "row">
-            <co-input-checkbox [model]="row.active" readonly></co-input-checkbox>
-          </ng-template>
-        </co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'NR' | localize" [field]="'transNr'" [order]="20"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'NAME' | localize" [field]="'relationName'"
-                               [order]="30"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'RELATION_NUMBER' | localize" [field]="'relationNr'"
-                               [order]="40"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'BRANCH' | localize" [field]="'brancheName'"
-                               [order]="50"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'ADDRESS' | localize" [field]="'adres'"
-                               [order]="70"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'REFERENCE_RELATION' | localize" [field]="'relationReference'" [order]="80"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'PREFERRED_DATE' | localize"
-                               [order]="90" [textAlign]="align.Right" [resizable]="false">
-          <ng-template #template let-row = "row">
-            <div [textContent]="row.preferredDeliveryDate | date: 'dd MMM yyyy'"></div>
-          </ng-template>
-        </co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'TRANSACTION_DATE' | localize"
-                               [order]="100" [textAlign]="align.Right" [resizable]="false">
-          <ng-template #template let-row = "row">
-            <div [textContent]="row.transDate | date:'dd MMM yyyy'"></div>
-          </ng-template>
-        </co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'ORDER_DEFINITIVE' | localize"
-                               [order]="105" [textAlign]="align.Center">
-          <ng-template #template let-row= "row">
-            <co-input-checkbox [model]="row.transactionDefinitive" readonly></co-input-checkbox>
-          </ng-template>
-        </co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'DELIVERY_DATE' | localize"
-                               [order]="110" [textAlign]="align.Right" [resizable]="false" >
-          <ng-template #template let-row = "row">
-            <div [textContent]="row.deliveryDate | date:'dd MMM yyyy'"></div>
-          </ng-template>
-        </co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'DELIVERY_DATE_DEFINITIVE' | localize"
-                               [order]="115" [textAlign]="align.Center">
-          <ng-template #template let-row= "row">
-            <co-input-checkbox [model]="row.deliveryDateDefinitive" readonly></co-input-checkbox>
-          </ng-template>
-        </co-simple-grid-column>
-      </co-simple-grid>
-    </div>
-    `,
+      <div>
+          <co-simple-grid
+                  [data]="searchService.transactions"
+                  [extraColumns]="extraColumns"
+                  [dragDropEnabled]="true"
+                  [emitDragDrop]="false"
+                  (selectRow)="onTransactionClick($event)">
+              <co-simple-grid-column [headerText]="'ACTIVE' | localize"
+                                     [order]="10" [textAlign]="align.Center">
+                  <ng-template #template let-row="row">
+                      <co-input-checkbox [model]="row.active" readonly></co-input-checkbox>
+                  </ng-template>
+              </co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'NR' | localize" [field]="'transNr'"
+                                     [order]="20"></co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'NAME' | localize" [field]="'relationName'"
+                                     [order]="30"></co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'RELATION_NUMBER' | localize" [field]="'relationNr'"
+                                     [order]="40"></co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'BRANCH' | localize" [field]="'brancheName'"
+                                     [order]="50"></co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'ADDRESS' | localize" [field]="'adres'"
+                                     [order]="70"></co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'REFERENCE_RELATION' | localize" [field]="'relationReference'"
+                                     [order]="80"></co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'PREFERRED_DATE' | localize"
+                                     [order]="90" [textAlign]="align.Right" [resizable]="false">
+                  <ng-template #template let-row="row">
+                      <div [textContent]="row.preferredDeliveryDate | date: 'dd MMM yyyy'"></div>
+                  </ng-template>
+              </co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'TRANSACTION_DATE' | localize"
+                                     [order]="100" [textAlign]="align.Right" [resizable]="false">
+                  <ng-template #template let-row="row">
+                      <div [textContent]="row.transDate | date:'dd MMM yyyy'"></div>
+                  </ng-template>
+              </co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'ORDER_DEFINITIVE' | localize"
+                                     [order]="105" [textAlign]="align.Center">
+                  <ng-template #template let-row="row">
+                      <co-input-checkbox [model]="row.transactionDefinitive" readonly></co-input-checkbox>
+                  </ng-template>
+              </co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'DELIVERY_DATE' | localize"
+                                     [order]="110" [textAlign]="align.Right" [resizable]="false">
+                  <ng-template #template let-row="row">
+                      <div [textContent]="row.deliveryDate | date:'dd MMM yyyy'"></div>
+                  </ng-template>
+              </co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'DELIVERY_DATE_DEFINITIVE' | localize"
+                                     [order]="115" [textAlign]="align.Center">
+                  <ng-template #template let-row="row">
+                      <co-input-checkbox [model]="row.deliveryDateDefinitive" readonly></co-input-checkbox>
+                  </ng-template>
+              </co-simple-grid-column>
+          </co-simple-grid>
+      </div>
+  `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -10665,62 +11121,71 @@ class TransactionSearchSalesOrderGridComponent extends TransactionSearchGridBase
     showClass() {
         return true;
     }
+    onTransactionClick(event) {
+        console.log(this.searchService.transactions.length);
+    }
 }
 TransactionSearchSalesOrderGridComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-transaction-search-sales-order-grid",
                 template: `
-    <div>
-      <co-simple-grid [data]="searchService.transactions" [extraColumns]="extraColumns" [dragDropEnabled]="true" [emitDragDrop]="false"
-                      (selectRow)="onTransactionClick($event)">
-        <co-simple-grid-column [headerText]="'ACTIVE' | localize"
-                               [order]="10" [textAlign]="align.Center">
-          <ng-template #template let-row= "row">
-            <co-input-checkbox [model]="row.active" readonly></co-input-checkbox>
-          </ng-template>
-        </co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'NR' | localize" [field]="'transNr'" [order]="20"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'NAME' | localize" [field]="'relationName'"
-                               [order]="30"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'RELATION_NUMBER' | localize" [field]="'relationNr'"
-                               [order]="40"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'BRANCH' | localize" [field]="'brancheName'"
-                               [order]="50"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'ADDRESS' | localize" [field]="'adres'"
-                               [order]="70"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'REFERENCE_RELATION' | localize" [field]="'relationReference'" [order]="80"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'PREFERRED_DATE' | localize"
-                               [order]="90" [textAlign]="align.Right" [resizable]="false">
-          <ng-template #template let-row = "row">
-            <div [textContent]="row.preferredDeliveryDate | date: 'dd MMM yyyy'"></div>
-          </ng-template>
-        </co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'TRANSACTION_DATE' | localize"
-                               [order]="100" [textAlign]="align.Right" [resizable]="false">
-          <ng-template #template let-row = "row">
-            <div [textContent]="row.transDate | date:'dd MMM yyyy'"></div>
-          </ng-template>
-        </co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'ORDER_DEFINITIVE' | localize"
-                               [order]="105" [textAlign]="align.Center">
-          <ng-template #template let-row= "row">
-            <co-input-checkbox [model]="row.transactionDefinitive" readonly></co-input-checkbox>
-          </ng-template>
-        </co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'DELIVERY_DATE' | localize"
-                               [order]="110" [textAlign]="align.Right" [resizable]="false" >
-          <ng-template #template let-row = "row">
-            <div [textContent]="row.deliveryDate | date:'dd MMM yyyy'"></div>
-          </ng-template>
-        </co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'DELIVERY_DATE_DEFINITIVE' | localize"
-                               [order]="115" [textAlign]="align.Center">
-          <ng-template #template let-row= "row">
-            <co-input-checkbox [model]="row.deliveryDateDefinitive" readonly></co-input-checkbox>
-          </ng-template>
-        </co-simple-grid-column>
-      </co-simple-grid>
-    </div>
+      <div>
+          <co-simple-grid
+                  [data]="searchService.transactions"
+                  [extraColumns]="extraColumns"
+                  [dragDropEnabled]="true"
+                  [emitDragDrop]="false"
+                  (selectRow)="onTransactionClick($event)">
+              <co-simple-grid-column [headerText]="'ACTIVE' | localize"
+                                     [order]="10" [textAlign]="align.Center">
+                  <ng-template #template let-row="row">
+                      <co-input-checkbox [model]="row.active" readonly></co-input-checkbox>
+                  </ng-template>
+              </co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'NR' | localize" [field]="'transNr'"
+                                     [order]="20"></co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'NAME' | localize" [field]="'relationName'"
+                                     [order]="30"></co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'RELATION_NUMBER' | localize" [field]="'relationNr'"
+                                     [order]="40"></co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'BRANCH' | localize" [field]="'brancheName'"
+                                     [order]="50"></co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'ADDRESS' | localize" [field]="'adres'"
+                                     [order]="70"></co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'REFERENCE_RELATION' | localize" [field]="'relationReference'"
+                                     [order]="80"></co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'PREFERRED_DATE' | localize"
+                                     [order]="90" [textAlign]="align.Right" [resizable]="false">
+                  <ng-template #template let-row="row">
+                      <div [textContent]="row.preferredDeliveryDate | date: 'dd MMM yyyy'"></div>
+                  </ng-template>
+              </co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'TRANSACTION_DATE' | localize"
+                                     [order]="100" [textAlign]="align.Right" [resizable]="false">
+                  <ng-template #template let-row="row">
+                      <div [textContent]="row.transDate | date:'dd MMM yyyy'"></div>
+                  </ng-template>
+              </co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'ORDER_DEFINITIVE' | localize"
+                                     [order]="105" [textAlign]="align.Center">
+                  <ng-template #template let-row="row">
+                      <co-input-checkbox [model]="row.transactionDefinitive" readonly></co-input-checkbox>
+                  </ng-template>
+              </co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'DELIVERY_DATE' | localize"
+                                     [order]="110" [textAlign]="align.Right" [resizable]="false">
+                  <ng-template #template let-row="row">
+                      <div [textContent]="row.deliveryDate | date:'dd MMM yyyy'"></div>
+                  </ng-template>
+              </co-simple-grid-column>
+              <co-simple-grid-column [headerText]="'DELIVERY_DATE_DEFINITIVE' | localize"
+                                     [order]="115" [textAlign]="align.Center">
+                  <ng-template #template let-row="row">
+                      <co-input-checkbox [model]="row.deliveryDateDefinitive" readonly></co-input-checkbox>
+                  </ng-template>
+              </co-simple-grid-column>
+          </co-simple-grid>
+      </div>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -10764,47 +11229,56 @@ TransactionSearchPurchaseOrderTileComponent.decorators = [
                 selector: "co-transaction-search-purchase-order-tile",
                 template: `
     <div class="transaction-tile-wrapper" (click)="onTransactionClick(transaction)">
-      <div class="transaction-tile-body">
-        <div class="transaction-tile-avatar">
-          <co-avatar [image]="transaction.execImage" [relationId]="transaction.handledBy"></co-avatar>
-        </div>
-        <div class="transaction-tile-seller-info">
-          <div>
+      <div class="tile">
+        <div class="tile-header">
+          <div class="tile-upper-left">
+            <div class="transaction-tile-avatar">
+              <co-avatar [image]="transaction.execImage" [relationId]="transaction.handledBy"></co-avatar>
+            </div>
+          </div>
+          <div class="tile-upper-middle">
             <div class="header"><span [textContent]="transaction.transNr"></span></div>
             <div class="text"><span [textContent]="transaction.brancheName"></span></div>
           </div>
-          <div>
+          <div class="tile-upper-right">
+            <div class="status-bar-wrapper">
+              <co-status-bar></co-status-bar>
+            </div>
+            <div class="header"><span [textContent]="transaction.totalPriceVat | currency:'EUR'"></span></div>
+          </div>
+        </div>
+        <div class="tile-body">
+          <div class="tile-middle-left"></div>
+          <div class="tile-middle-middle">
             <div class="text"><span [textContent]="transaction.relationName"></span></div>
             <div class="text"><span [textContent]="transaction.getAdres()"></span></div>
           </div>
+          <div class="tile-middle-right"></div>
         </div>
-        <div class="transaction-tile-order-summary">
-          <div class="header"><span [textContent]="transaction.totalPriceVat | currency:'EUR'"></span></div>
-        </div>
-      </div>
-      <div class="transaction-tile-footer">
-        <div class="order-info-section">
-          <div class="label"><span [textContent]="'ORDER_DATE' | localize"></span></div>
-          <div class="value">
-            <span [textContent]="transaction.getTransDate() | date:'dd MMM yyyy'"></span></div>
-        </div>
-        <div class="order-info-section">
-          <div class="label"><span [textContent]="'DELIVERY_DATE' | localize"></span></div>
-          <div class="value">
-            <span [textContent]="transaction.getDeliveryDate() | date:'dd MMM yyyy'"></span>
-            <div *ngIf="transaction.getDeliveryDate()">
-              <co-icon *ngIf="transaction.deliveryDateDefinitive; else indefinite"
-                       [iconData]="this.iconCacheService.getIcon(this.icons.Lock)" class="lock-icon"></co-icon>
-              <ng-template #indefinite>
-                <co-icon [iconData]="this.iconCacheService.getIcon(this.icons.Unlock)" class="unlock-icon"></co-icon>
-              </ng-template>
+        <div class="tile-footer">
+          <div class="tile-bottom-left order-info-section">
+            <div class="label"><span [textContent]="'ORDER_DATE' | localize"></span></div>
+            <div class="value">
+              <span [textContent]="transaction.getTransDate() | date:'dd MMM yyyy'"></span></div>
+          </div>
+          <div class="tile-bottom-middle order-info-section">
+            <div class="label"><span [textContent]="'DELIVERY_DATE' | localize"></span></div>
+            <div class="value">
+              <span [textContent]="transaction.getDeliveryDate() | date:'dd MMM yyyy'"></span>
+              <div *ngIf="transaction.getDeliveryDate()">
+                <co-icon *ngIf="transaction.deliveryDateDefinitive; else indefinite"
+                         [iconData]="this.iconCacheService.getIcon(this.icons.Lock)" class="lock-icon"></co-icon>
+                <ng-template #indefinite>
+                  <co-icon [iconData]="this.iconCacheService.getIcon(this.icons.Unlock)" class="unlock-icon"></co-icon>
+                </ng-template>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="order-info-section">
-          <div class="label"><span [textContent]="'ORDER_RULE' | localize"></span></div>
-          <div class="value">
-            <span [textContent]="'68/00'"></span></div>
+          <div class="tile-bottom-right order-info-section">
+            <div class="label"><span [textContent]="'ORDER_RULE' | localize"></span></div>
+            <div class="value">
+              <span [textContent]="'68/00'"></span></div>
+          </div>
         </div>
       </div>
     </div>
@@ -10824,50 +11298,58 @@ TransactionSearchSalesOrderTileComponent.decorators = [
                 selector: "co-transaction-search-sales-order-tile",
                 template: `
     <div class="transaction-tile-wrapper" (click)="onTransactionClick(transaction)">
-      <div class="transaction-tile-body">
-        <div class="transaction-tile-avatar">
-          <co-avatar [image]="transaction.execImage" [relationId]="transaction.handledBy"></co-avatar>
-        </div>
-        <div class="transaction-tile-seller-info">
-          <div>
+      <div class="tile">
+        <div class="tile-header">
+          <div class="tile-upper-left">
+            <div class="transaction-tile-avatar">
+              <co-avatar [image]="transaction.execImage" [relationId]="transaction.handledBy"></co-avatar>
+            </div>
+          </div>
+          <div class="tile-upper-middle">
             <div class="header"><span [textContent]="transaction.transNr"></span></div>
             <div class="text"><span [textContent]="transaction.brancheName"></span></div>
           </div>
-          <div>
+          <div class="tile-upper-right">
+            <div class="status-bar-wrapper">
+              <co-status-bar></co-status-bar>
+            </div>
+            <div class="header"><span [textContent]="transaction.totalPriceVat | currency:'EUR'"></span></div>
+          </div>
+        </div>
+        <div class="tile-body">
+          <div class="tile-middle-left"></div>
+          <div class="tile-middle-middle">
             <div class="text"><span [textContent]="transaction.relationName"></span></div>
             <div class="text"><span [textContent]="transaction.getAdres()"></span></div>
           </div>
+          <div class="tile-middle-right"></div>
         </div>
-        <div class="transaction-tile-order-summary">
-          <div class="header"><span [textContent]="transaction.totalPriceVat | currency:'EUR'"></span></div>
-        </div>
-      </div>
-      <div class="transaction-tile-footer">
-        <div class="order-info-section">
-          <div class="label"><span [textContent]="'ORDER_DATE' | localize"></span></div>
-          <div class="value">
-            <span [textContent]="transaction.getTransDate() | date:'dd MMM yyyy'"></span></div>
-        </div>
-        <div class="order-info-section">
-          <div class="label"><span [textContent]="'DELIVERY_DATE' | localize"></span></div>
-          <div class="value">
-            <span [textContent]="transaction.getDeliveryDate() | date:'dd MMM yyyy'"></span>
-            <div *ngIf="transaction.getDeliveryDate()">
-              <co-icon *ngIf="transaction.deliveryDateDefinitive; else indefinite"
-                       [iconData]="this.iconCacheService.getIcon(this.icons.Lock)" class="lock-icon"></co-icon>
-              <ng-template #indefinite>
-                <co-icon [iconData]="this.iconCacheService.getIcon(this.icons.Unlock)" class="unlock-icon"></co-icon>
-              </ng-template>
-            </div>
+        <div class="tile-footer">
+          <div class="tile-bottom-left order-info-section">
+              <div class="label"><span [textContent]="'ORDER_DATE' | localize"></span></div>
+              <div class="value">
+                <span [textContent]="transaction.getTransDate() | date:'dd MMM yyyy'"></span></div>
+          </div>
+          <div class="tile-bottom-middle order-info-section">
+              <div class="label"><span [textContent]="'DELIVERY_DATE' | localize"></span></div>
+              <div class="value">
+                <span [textContent]="transaction.getDeliveryDate() | date:'dd MMM yyyy'"></span>
+                <div *ngIf="transaction.getDeliveryDate()">
+                  <co-icon *ngIf="transaction.deliveryDateDefinitive; else indefinite"
+                           [iconData]="this.iconCacheService.getIcon(this.icons.Lock)" class="lock-icon"></co-icon>
+                  <ng-template #indefinite>
+                    <co-icon [iconData]="this.iconCacheService.getIcon(this.icons.Unlock)" class="unlock-icon"></co-icon>
+                  </ng-template>
+                </div>
+              </div>
+          </div>
+          <div class="tile-bottom-right order-info-section">
+              <div class="label"><span [textContent]="'ORDER_RULE' | localize"></span></div>
+              <div class="value">
+                <span [textContent]="'68/00'"></span></div>
           </div>
-        </div>
-        <div class="order-info-section">
-          <div class="label"><span [textContent]="'ORDER_RULE' | localize"></span></div>
-          <div class="value">
-            <span [textContent]="'68/00'"></span></div>
         </div>
       </div>
-
     </div>`,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -11677,22 +12159,21 @@ class TransactionLineSidePanelPurchaseComponent {
         this.transactionLine = new TransactionLineInfo();
         this.quantityToReceiveChange = new EventEmitter();
         this.goodsReceiptStatus = new GoodsReceiptStatusWithHistory();
+        this._transactionInfo = new TransactionInfo();
     }
-    set transactionId(value) {
-        if (value) {
-            this._transactionId = value;
-            this.getGoodsReceiptStatusWithHistory();
-        }
+    set transactionInfo(value) {
+        this._transactionInfo = value;
+        this.getGoodsReceiptStatusWithHistory();
     }
-    get transactionId() {
-        return this._transactionId;
+    get transactionInfo() {
+        return this._transactionInfo;
     }
     showClass() {
         return true;
     }
     getGoodsReceiptStatusWithHistory() {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this._service.getGoodsReceiptStatusWithHistory(this._transactionId, this.transactionLine.lineNr)
+            yield this._service.getGoodsReceiptStatusWithHistory(this._transactionInfo.id, this.transactionLine.lineNr)
                 .then((result) => {
                 this.goodsReceiptStatus = result;
                 this._transactionEventService.transactionLineChanged.next({ transactionLine: this.transactionLine, goodsReceiptStatus: result });
@@ -11708,25 +12189,25 @@ TransactionLineSidePanelPurchaseComponent.decorators = [
     <ng-container [ngSwitch]="category">
       <ng-container *ngSwitchCase="categories.PurchaseOrderOrderConfirmation">
         <co-transaction-confirmation-details
-          [transactionInfoNr]="transactionInfoNr"
+          [transactionInfoNr]="transactionInfo.transactionNr"
           [transactionLines]="transactionLine"
         ></co-transaction-confirmation-details>
         <co-transaction-confirmation-history
           [transactionLines]="transactionLine"
-          [transactionInfoNr]="transactionInfoNr"
-          [transactionId]="transactionId"
+          [transactionInfoNr]="transactionInfo.transactionNr"
+          [transactionId]="transactionInfo.id"
         ></co-transaction-confirmation-history>
       </ng-container>
 
       <ng-container *ngSwitchCase="categories.PurchaseOrderReceivedGoods">
         <co-transaction-receiving-goods-details
-          [transactionId]="transactionId"
+          [transactionId]="transactionInfo.id"
           [transactionLine]="transactionLine"
           [amountLeftToReceive]="goodsReceiptStatus.quantityToReceive"
           (reloadReceivingGoodsHistory)="getGoodsReceiptStatusWithHistory()"
         ></co-transaction-receiving-goods-details>
         <co-transaction-receiving-goods-history
-          [transactionId]="transactionId"
+          [transactionId]="transactionInfo.id"
           [transactionLine]="transactionLine"
           [goodsReceiptHistory]="goodsReceiptStatus.goodsReceiptHistory"
           (reloadReceivingGoodsHistory)="getGoodsReceiptStatusWithHistory()"
@@ -11735,6 +12216,7 @@ TransactionLineSidePanelPurchaseComponent.decorators = [
 
       <ng-container *ngSwitchDefault>
         <co-transaction-line-side-panel-default
+          [transactionInfo]="transactionInfo"
           [transactionLine]="transactionLine"
         ></co-transaction-line-side-panel-default>
       </ng-container>
@@ -11748,10 +12230,9 @@ TransactionLineSidePanelPurchaseComponent.ctorParameters = () => [
     { type: TransactionEventService }
 ];
 TransactionLineSidePanelPurchaseComponent.propDecorators = {
+    transactionInfo: [{ type: Input }],
     transactionLine: [{ type: Input }],
-    transactionId: [{ type: Input }],
     category: [{ type: Input }],
-    transactionInfoNr: [{ type: Input }],
     quantityToReceiveChange: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-line-side-panel-purchase",] }]
 };
@@ -12357,6 +12838,153 @@ TransactionReceivedGoodsGridModule.decorators = [
             },] }
 ];
 
+class TransactionTileComponent {
+    constructor(iconCacheService, _imageService) {
+        this.iconCacheService = iconCacheService;
+        this._imageService = _imageService;
+        this.icon = Icon;
+        this.transactionTypes = TransactionKind;
+        this.showSidePanelClicked = new EventEmitter();
+    }
+    set transactionLine(value) {
+        this._transactionLine = value;
+        this._loadLineImage();
+    }
+    get transactionLine() {
+        return this._transactionLine;
+    }
+    showClass() {
+        return true;
+    }
+    handleSidePanelButtonClicked() {
+        this.showSidePanelClicked.next(this._transactionLine);
+    }
+    getStatusColor(n) {
+        switch (n) {
+            case 0:
+                return '#5fdbb2';
+            case 1:
+                return '#f78852';
+            case 2:
+                return '#f23a3a';
+        }
+    }
+    _loadLineImage() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._transactionLine && this._transactionLine.isArticle) {
+                this._imageService.retrieveLineImage(this._transactionLine).then((image) => {
+                    this.image = image;
+                });
+            }
+        });
+    }
+}
+TransactionTileComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-tile",
+                template: `
+    <div class="transaction-tile-wrapper" *ngIf="transactionLine">
+      <div class="header-row center">
+        <div class="header-transport-container center">
+          <co-icon class="transport-method-icon" [iconData]="iconCacheService.getIcon(icon.DeliveryTruck)"></co-icon>
+          <span class="transport-method-text" [textContent]="'Dropshipment door leverancier'"></span>
+        </div>
+        <span class="header-date bold" [textContent]="transactionLine.deliveryDate | date : 'd-MM-yyyy'"></span>
+        <co-icon class="header-side-panel-button"
+                 [iconData]="iconCacheService.getIcon(icon.ThickLines)"
+                 (click)="handleSidePanelButtonClicked()"
+        ></co-icon>
+      </div>
+
+      <div class="transaction-details-row">
+        <div class="transaction-details-container">
+          <span class="transaction-tile-title bold" [textContent]="transactionLine.goodDescription"></span>
+          <span  *ngFor="let text of transactionLine.articleTestAsArray" class="transaction-tile-description"
+                [innerHTML]="text | safeHtml"></span>
+        </div>
+        <co-image-display class="tile-image" [model]="image"></co-image-display>
+      </div>
+
+      <div class="transaction-order-status-row">
+        <div class="indicators-wrapper">
+          <div *ngFor="let n of [0, 1, 2]" [style.background]="getStatusColor(n)" class="transaction-order-status-indicator"></div>
+        </div>
+      </div>
+
+      <div class="transaction-data-row center">
+        <div class="transaction-data-header">
+          <div class="transaction-data-header-item">
+            <span class="transaction-data-header-label" [textContent]="'ARTICLE_NR'| localize"></span>
+            <span class="transaction-data-header-field"
+                  [textContent]="transactionLine.articleNumber ? transactionLine.articleNumber : '-'"></span>
+          </div>
+          <div class="transaction-data-header-divider"></div>
+          <div class="transaction-data-header-item center">
+            <span class="transaction-data-header-label" [textContent]="'PRICE'| localize"></span>
+            <span class="transaction-data-header-field"
+                  [textContent]="transactionLine.price ? (transactionLine.price | priceDisplay) : '-'"></span>
+          </div>
+          <div class="transaction-data-header-divider"></div>
+          <div class="transaction-data-header-item center">
+            <span class="transaction-data-header-label" [textContent]="'DISCOUNT'| localize"></span>
+            <span class="transaction-data-header-field"
+                  [textContent]="transactionLine.discountAmount ? transactionLine.discountAmount : '-'"></span>
+          </div>
+          <div class="transaction-data-header-divider"></div>
+          <div class="transaction-data-header-item center">
+            <span class="transaction-data-header-label" [textContent]="'Mag'| localize"></span>
+            <span class="transaction-data-header-field"
+                  [textContent]="transactionLine.warehouseNumber ? transactionLine.warehouseNumber : '-'"></span>
+          </div>
+          <div class="transaction-data-header-divider"></div>
+          <div class="transaction-data-header-item center">
+            <span class="transaction-data-header-label" [textContent]="'CC'| localize"></span>
+            <span class="transaction-data-header-field"
+                  [textContent]="transactionLine.commissionCode ? transactionLine.commissionCode : '-'"></span>
+          </div>
+        </div>
+        <div class="transaction-data-header-item mutable center">
+          <span class="transaction-data-header-label" [textContent]="'AMOUNT'| localize"></span>
+          <input type="number" class="transaction-data-header-field bold amount-input" [(ngModel)]="transactionLine.amount">
+        </div>
+      </div>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionTileComponent.ctorParameters = () => [
+    { type: IconCacheService },
+    { type: TransactionImageService }
+];
+TransactionTileComponent.propDecorators = {
+    transactionType: [{ type: Input }],
+    transactionLine: [{ type: Input }],
+    showSidePanelClicked: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-tile",] }]
+};
+
+class TransactionTileModule {
+}
+TransactionTileModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule,
+                    IconModule,
+                    PipeModule,
+                    FormsModule,
+                    PriceDisplayPipeModule
+                ],
+                declarations: [
+                    TransactionTileComponent
+                ],
+                exports: [
+                    TransactionTileComponent
+                ]
+            },] }
+];
+
 class TransactionModule {
 }
 TransactionModule.decorators = [
@@ -12381,7 +13009,8 @@ TransactionModule.decorators = [
                     TransactionOrderConfirmationGridModule,
                     TransactionReceivedGoodsGridModule,
                     ViewModeButtonsModule,
-                    TransactionGridModule
+                    TransactionGridModule,
+                    TransactionTileModule
                 ],
                 declarations: [
                     TransactionComponent
@@ -12463,26 +13092,27 @@ TransactionSearchComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-transaction-search',
                 template: `
-    <div class="transaction-search-wrapper" [ngClass]="fullscreen ? 'fullscreen' : 'sidebar'">
-      <div class="transaction-filter-wrapper narrow-scrollbar" [ngClass]="fullscreen ? 'fullscreen' : 'sidebar'"
-           *ngIf="showFilterSidebar" @showHideFilterSidebar>
-        <co-transaction-filter
-          [transactionType]="transactionType"
-          [activeSearchViewMode]="activeSearchViewMode"
-          (closeButtonClick)="handleHideFilter()"
-          (resetFilterClick)="handleResetFilter()"></co-transaction-filter>
-      </div>
-      <div class="transaction-search-result-wrapper">
-        <co-transaction-search-result
-          [transactionType]="transactionType"
-          [activeSearchViewMode]="activeSearchViewMode"
-          (filterClick)="toggleFilter()"
-          (transactionClick)="onTransactionClick($event)"
-          (resizeClick)="onResizeClick()"
-          (closeClick)="closeClick.emit()"
-        ></co-transaction-search-result>
+      <div class="transaction-search-wrapper" [ngClass]="fullscreen ? 'fullscreen' : 'sidebar'">
+        <div class="transaction-filter-wrapper narrow-scrollbar" [ngClass]="fullscreen ? 'fullscreen' : 'sidebar'"
+             *ngIf="showFilterSidebar" @showHideFilterSidebar>
+          <co-transaction-filter
+            [transactionType]="transactionType"
+            [activeSearchViewMode]="activeSearchViewMode"
+            (closeButtonClick)="handleHideFilter()"
+            (resetFilterClick)="handleResetFilter()"></co-transaction-filter>
+        </div>
+        <div class="transaction-search-result-wrapper">
+          <co-transaction-search-result
+            [transactionType]="transactionType"
+            [activeSearchViewMode]="activeSearchViewMode"
+            (filterClick)="toggleFilter()"
+            (transactionClick)="onTransactionClick($event)"
+            (resizeClick)="onResizeClick()"
+            (closeClick)="closeClick.emit()"
+          ></co-transaction-search-result>
+        </div>
       </div>
-    </div>
+      <ng-content></ng-content>
   `,
                 animations: [
                     trigger("showHideFilterSidebar", [
@@ -13642,7 +14272,8 @@ TransactionSearchPurchaseOrderGridModule.decorators = [
                     CommonModule,
                     SimpleGridModule,
                     PipeModule,
-                    InputCheckboxModule
+                    InputCheckboxModule,
+                    PaginationModule
                 ],
                 declarations: [
                     TransactionSearchPurchaseOrderGridComponent
@@ -13662,7 +14293,8 @@ TransactionSearchSalesOrderGridModule.decorators = [
                     CoreModule,
                     PipeModule,
                     SimpleGridModule,
-                    InputCheckboxModule
+                    InputCheckboxModule,
+                    PaginationModule
                 ],
                 declarations: [
                     TransactionSearchSalesOrderGridComponent
@@ -13893,6 +14525,57 @@ TransactionSearchGridModule.decorators = [
             },] }
 ];
 
+class StatusBarComponent {
+    constructor(iconCacheService) {
+        this.iconCacheService = iconCacheService;
+        this.icons = Icon;
+    }
+    showClass() {
+        return true;
+    }
+}
+StatusBarComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-status-bar",
+                template: `
+    <div>
+      <!--Tijdelijk visueel voorbeeld:-->
+      <div class="status-bar-icons-wrapper">
+        <co-icon class="color-green" [iconData]="this.iconCacheService.getIcon(this.icons.SquareFullSolid)"></co-icon>
+        <co-icon class="color-orange" [iconData]="this.iconCacheService.getIcon(this.icons.SquareFullSolid)"></co-icon>
+        <co-icon [iconData]="this.iconCacheService.getIcon(this.icons.SquareFull)"></co-icon>
+        <co-icon [iconData]="this.iconCacheService.getIcon(this.icons.SquareFull)"></co-icon>
+        <co-icon [iconData]="this.iconCacheService.getIcon(this.icons.SquareFull)"></co-icon>
+      </div>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StatusBarComponent.ctorParameters = () => [
+    { type: IconCacheService }
+];
+StatusBarComponent.propDecorators = {
+    showClass: [{ type: HostBinding, args: ["class.co-status-bar",] }]
+};
+
+class StatusBarModule {
+}
+StatusBarModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    IconModule
+                ],
+                declarations: [
+                    StatusBarComponent
+                ],
+                exports: [
+                    StatusBarComponent
+                ]
+            },] }
+];
+
 class TransactionSearchPurchaseOrderTileModule {
 }
 TransactionSearchPurchaseOrderTileModule.decorators = [
@@ -13901,7 +14584,8 @@ TransactionSearchPurchaseOrderTileModule.decorators = [
                     CommonModule,
                     PipeModule,
                     AvatarModule,
-                    IconModule
+                    IconModule,
+                    StatusBarModule
                 ],
                 declarations: [
                     TransactionSearchPurchaseOrderTileComponent
@@ -13923,6 +14607,7 @@ TransactionSearchSalesOrderTileModule.decorators = [
                     ButtonModule,
                     PipeModule,
                     IconModule,
+                    StatusBarModule,
                 ],
                 declarations: [
                     TransactionSearchSalesOrderTileComponent
@@ -14070,8 +14755,14 @@ class TransactionSearchResultComponent {
     onFilterClick() {
         this.filterClick.emit();
     }
-    onPaginationPageChange(pageNr) {
-        this.searchService.showcasePage = pageNr;
+    onPreviousClick() {
+        this.searchService.currentPage -= 1;
+    }
+    onNextClick() {
+        this.searchService.currentPage += 1;
+    }
+    onPageClick(pageNr) {
+        this.searchService.currentPage = pageNr;
     }
 }
 TransactionSearchResultComponent.decorators = [
@@ -14092,8 +14783,7 @@ TransactionSearchResultComponent.decorators = [
 
     <div class="transaction-search-result-content-tiles-wrapper" [ngClass]="fullscreen ? 'fullscreen' : 'sidebar'"
          *ngIf="activeContentViewMode === contentViewModes.Tiles">
-      <div class="transaction-tile" *ngFor="let transaction of searchService.transactions | paginate:
-      {itemsPerPage: searchService.transactionsPerPage, currentPage: searchService.showcasePage, totalItems: searchService.resultCount}">
+      <div class="transaction-tile" *ngFor="let transaction of searchService.transactions">
         <co-transaction-search-tile
           [transaction]="transaction"
           [transactionType]="transactionType"
@@ -14101,15 +14791,25 @@ TransactionSearchResultComponent.decorators = [
           (transactionClick)="onTransactionClick($event)">
         </co-transaction-search-tile>
       </div>
-      <co-pagination [previousLabel]="'PREVIOUS' | localize" [nextLabel]="'NEXT' | localize"
-                     (pageChange)="onPaginationPageChange($event)"></co-pagination>
     </div>
+
     <div class="transaction-search-result-content-grid-wrapper" *ngIf="activeContentViewMode === contentViewModes.Grid">
       <co-transaction-search-grid
         [transactionType]="transactionType"
         (transactionClick)="onTransactionClick($event)"
       ></co-transaction-search-grid>
     </div>
+    <co-pagination-bar *ngIf="searchService.transactions?.length > 0"
+                       [currentPage]="searchService.currentPage"
+                       [itemsPerPage]="searchService.transactionsPerPage"
+                       [totalItems]="searchService.resultCount"
+                       [previousLabel]="'PREVIOUS' | localize"
+                       [nextLabel]="'NEXT' | localize"
+                       [autoHide]="true"
+                       (previousClick)="onPreviousClick()"
+                       (nextClick)="onNextClick()"
+                       (pageClick)="onPageClick($event)">
+    </co-pagination-bar>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -14145,7 +14845,8 @@ TransactionSearchResultModule.decorators = [
                     TransactionSearchHeaderModule,
                     TransactionSearchGridModule,
                     TransactionSearchTileModule,
-                    PaginationModule
+                    PaginationModule,
+                    PaginationBarModule
                 ],
                 declarations: [
                     TransactionSearchResultComponent
@@ -14969,5 +15670,5 @@ TransactionLineGridModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { CheckoutComponent, CheckoutModule, ShoppingCartComponent, ShoppingCartModule, ShoppingCartPreviewComponent, ShoppingCartPreviewModule, TransactionComponent, TransactionConfirmationDetailsComponent, TransactionConfirmationDetailsModule, TransactionConfirmationHistoryComponent, TransactionConfirmationHistoryModule, TransactionHeaderComponent, TransactionHeaderDeliveryComponent, TransactionHeaderDeliveryModule, TransactionHeaderModule, TransactionHeaderOrderComponent, TransactionHeaderOrderModule, TransactionHeaderRelationComponent, TransactionHeaderRelationModule, TransactionLineComponent, TransactionLineGridComponent, TransactionLineGridModule, TransactionLineModule, TransactionLinesComponent, TransactionLinesModule, TransactionModule, TransactionQuickAccessComponent, TransactionQuickAccessModule, TransactionQuickAccessOrderConfirmationComponent, TransactionQuickAccessOrderConfirmationModule, TransactionQuickAccessReceivedGoodsComponent, TransactionQuickAccessReceivedGoodsModule, TransactionSearchComponent, TransactionSearchModule, TransactionService, TransactionTotalsComponent, TransactionTotalsModule, PendingReasonService as ɵa, DialogService as ɵb, RelationAddressComponent as ɵba, RelationAddressSelectModule as ɵbb, RelationAddressTileModule as ɵbc, TileModule as ɵbd, TileComponent as ɵbe, RelationAddressTileComponent as ɵbf, RelationAddressSelectComponent as ɵbg, BusinessObjectFactory as ɵbh, StepperModule as ɵbi, StepperComponent as ɵbj, StepperStepComponent as ɵbk, TransactionArticleTextModule as ɵbl, TransactionArticleTextComponent as ɵbm, TransactionArticleTextOverviewModule as ɵbn, TransactionArticleTextOverviewComponent as ɵbo, TransactionLineActionButtonsModule as ɵbp, TransactionLineActionButtonsComponent as ɵbq, EditableLabelModule as ɵbr, EditableLabelComponent as ɵbs, TransactionLinePriceModule as ɵbt, TransactionLinePriceComponent as ɵbu, TransactionLineFieldsBaseComponent as ɵbv, TransactionImageService as ɵbw, AvatarModule as ɵbx, AvatarComponent as ɵby, SharedService as ɵbz, OptionsService as ɵc, SharedConnectorService as ɵca, DeliveryTypeTileModule as ɵcb, DeliveryTypeTileComponent as ɵcc, PaymentModule as ɵcd, PaymentTileModule as ɵce, PaymentTileComponent as ɵcf, PaymentQrCodeModule as ɵcg, PaymentQrCodeComponent as ɵch, PaymentService as ɵci, PaymentComponent as ɵcj, CheckoutOverviewRelationEditComponent as ɵck, CheckoutOverviewDeliveryEditComponent as ɵcl, CheckoutOverviewDeliveryAddressComponent as ɵcm, CheckOutRelationSuggestionsListComponent as ɵcn, CheckOutRelationSuggestionsListItemComponent as ɵco, CheckoutLoginComponent as ɵcp, TransactionHeaderModule$1 as ɵcq, TransactionHeaderBlockModule as ɵcr, TransactionHeaderBlockComponent as ɵcs, TransactionBaseComponent as ɵct, TransactionHeaderPaymentModule as ɵcu, TransactionHeaderPaymentComponent as ɵcv, TransactionHeaderComponent$1 as ɵcw, TransactionLinesGridModule as ɵcx, TransactionBaseGridModule as ɵcy, TransactionLineSidePanelModule as ɵcz, DictionaryService as ɵd, TransactionLineSidePanelDefaultModule as ɵda, TransactionLinePriceListModule as ɵdb, TransactionLinePriceListComponent as ɵdc, TransactionLineVatModule as ɵdd, TransactionLineVatComponent as ɵde, TransactionLineQuantityModule as ɵdf, TransactionLineQuantityComponent as ɵdg, TransactionLineLineDiscountModule as ɵdh, TransactionLineLineDiscountComponent as ɵdi, TransactionLineDeliveryMethodModule as ɵdj, TransactionLineDeliveryMethodComponent as ɵdk, TransactionLineDeliveryDateModule as ɵdl, TransactionLineDeliveryDateComponent as ɵdm, TransactionLineReferenceModule as ɵdn, TransactionLineReferenceComponent as ɵdo, TransactionLineCommissionCodeModule as ɵdp, TransactionLineCommissionCodeComponent as ɵdq, TransactionLineWarehouseModule as ɵdr, TransactionLineWarehouseComponent as ɵds, TransactionLineDiscountAmountModule as ɵdt, TransactionLineDiscountAmountComponent as ɵdu, TransactionLineQuantumDiscountModule as ɵdv, TransactionLineQuantumDiscountComponent as ɵdw, TransactionLineSpecialDiscountModule as ɵdx, TransactionLineSpecialDiscountComponent as ɵdy, TransactionLineSidePanelDefaultComponent as ɵdz, TransactionConnectorService as ɵe, TransactionReceivingGoodsHistoryModule as ɵea, TransactionHistoryGridModule as ɵeb, TransactionHistoryGridStatusModule as ɵec, TransactionHistoryGridStatusComponent as ɵed, TransactionHistoryGridComponent as ɵee, TransactionReceivingGoodsHistoryComponent as ɵef, TransactionReceivingGoodsDetailsModule as ɵeg, TransactionReceivingGoodsDetailsComponent as ɵeh, ArticleService as ɵei, TransactionButtonBarModule as ɵej, TransactionButtonBarComponent as ɵek, TransactionMappingService as ɵel, TransactionButtonBarButtonComponent as ɵem, TransactionLineSidePanelPurchaseModule as ɵen, DefaultOkCancelButtonsModule as ɵeo, DefaultOkCancelButtonsComponent as ɵep, TransactionLineSidePanelPurchaseComponent as ɵeq, TransactionEventService as ɵer, TransactionLineSidePanelComponent as ɵes, TransactionBaseGridComponent as ɵet, TransactionGridBaseComponent as ɵeu, TransactionLinesGridComponent as ɵev, DiscountModule as ɵew, DiscountComponent as ɵex, TransactionQuickAccessOverviewModule as ɵey, TransactionQuickAccessOverviewComponent as ɵez, CollectionCacheService as ɵf, TransactionOrderConfirmationGridModule as ɵfa, TransactionOrderConfirmationGridComponent as ɵfb, TransactionReceivedGoodsGridModule as ɵfc, TransactionReceivedGoodsGridComponent as ɵfd, ViewModeButtonsModule as ɵfe, ViewModeButtonsComponent as ɵff, TransactionGridModule as ɵfg, TransactionGridComponent as ɵfh, TransactionSearchService as ɵfi, TransactionSearchResultModule as ɵfj, TransactionSearchSalesOrderTileModule as ɵfk, TransactionSearchSalesOrderTileComponent as ɵfl, TransactionSearchTileBaseComponent as ɵfm, TransactionSearchPurchaseOrderTileModule as ɵfn, TransactionSearchPurchaseOrderTileComponent as ɵfo, TransactionSearchSalesOrderGridModule as ɵfp, TransactionSearchSalesOrderGridComponent as ɵfq, TransactionSearchGridBaseComponent as ɵfr, TransactionSearchPurchaseOrderGridModule as ɵfs, TransactionSearchPurchaseOrderGridComponent as ɵft, TransactionSearchHeaderModule as ɵfu, TransactionSearchHeaderComponent as ɵfv, TransactionSearchGridModule as ɵfw, TransactionSearchGridComponent as ɵfx, TransactionSearchTileModule as ɵfy, TransactionSearchTileComponent as ɵfz, ArticleConnectorService as ɵg, TransactionSearchResultComponent as ɵga, TransactionSalesOrderFilterModule as ɵgb, TransactionFilterCategoriesModule as ɵgc, TransactionFilterCategoriesComponent as ɵgd, TransactionSalesOrderFilterContentOrderModule as ɵge, TransactionSalesOrderFilterContentOrderComponent as ɵgf, TransactionFilterContentBaseComponent as ɵgg, FilterRequestService as ɵgh, TransactionSalesOrderFilterContentLogisticsModule as ɵgi, TransactionFilterHistoricStateModule as ɵgj, TransactionFilterHistoricStateComponent as ɵgk, TransactionSalesOrderFilterContentLogisticsComponent as ɵgl, TransactionSalesOrderFilterContentArticleModule as ɵgm, TransactionSalesOrderFilterContentArticleComponent as ɵgn, TransactionSalesOrderFilterComponent as ɵgo, TransactionFilterBaseComponent as ɵgp, TransactionPurchaseOrderFilterModule as ɵgq, TransactionPurchaseOrderFilterContentOrderModule as ɵgr, TransactionPurchaseOrderFilterContentOrderComponent as ɵgs, TransactionPurchaseOrderFilterContentLogisticsModule as ɵgt, TransactionPurchaseOrderFilterContentLogisticsComponent as ɵgu, TransactionPurchaseOrderFilterContentArticleModule as ɵgv, TransactionPurchaseOrderFilterContentArticleComponent as ɵgw, TransactionPurchaseOrderFilterComponent as ɵgx, TransactionFilterModule as ɵgy, TransactionFilterComponent as ɵgz, CoreModule as ɵh, ConfirmationDialogModule as ɵi, PipeModule as ɵj, AppendPipe as ɵk, DeliveryTimePipe as ɵl, DateDurationPipe as ɵm, LocalizePipe as ɵn, CoCurrencyPipe as ɵo, SafeStylePipe as ɵp, SafeHtmlPipe as ɵq, ConfirmationDialogComponent as ɵr, DialogBaseComponent as ɵs, ImageDisplayComponent as ɵt, IconComponent as ɵu, IconCacheService as ɵv, CustomerGroupsComponent as ɵw, StockStatusIndicatorComponent as ɵx, LoaderComponent as ɵy, RelationAddressModule as ɵz };
+export { CheckoutComponent, CheckoutModule, ShoppingCartComponent, ShoppingCartModule, ShoppingCartPreviewComponent, ShoppingCartPreviewModule, TransactionComponent, TransactionConfirmationDetailsComponent, TransactionConfirmationDetailsModule, TransactionConfirmationHistoryComponent, TransactionConfirmationHistoryModule, TransactionHeaderComponent, TransactionHeaderDeliveryComponent, TransactionHeaderDeliveryModule, TransactionHeaderModule, TransactionHeaderOrderComponent, TransactionHeaderOrderModule, TransactionHeaderRelationComponent, TransactionHeaderRelationModule, TransactionLineComponent, TransactionLineGridComponent, TransactionLineGridModule, TransactionLineModule, TransactionLinesComponent, TransactionLinesModule, TransactionModule, TransactionQuickAccessComponent, TransactionQuickAccessModule, TransactionQuickAccessOrderConfirmationComponent, TransactionQuickAccessOrderConfirmationModule, TransactionQuickAccessReceivedGoodsComponent, TransactionQuickAccessReceivedGoodsModule, TransactionSearchComponent, TransactionSearchModule, TransactionService, TransactionTotalsComponent, TransactionTotalsModule, PendingReasonService as ɵa, DialogService as ɵb, RelationAddressComponent as ɵba, RelationAddressSelectModule as ɵbb, RelationAddressTileModule as ɵbc, TileModule as ɵbd, TileComponent as ɵbe, RelationAddressTileComponent as ɵbf, RelationAddressSelectComponent as ɵbg, BusinessObjectFactory as ɵbh, StepperModule as ɵbi, StepperComponent as ɵbj, StepperStepComponent as ɵbk, TransactionArticleTextModule as ɵbl, TransactionArticleTextComponent as ɵbm, TransactionArticleTextOverviewModule as ɵbn, TransactionArticleTextOverviewComponent as ɵbo, TransactionLineActionButtonsModule as ɵbp, TransactionLineActionButtonsComponent as ɵbq, EditableLabelModule as ɵbr, EditableLabelComponent as ɵbs, TransactionLinePriceModule as ɵbt, TransactionLinePriceComponent as ɵbu, TransactionLineFieldsBaseComponent as ɵbv, TransactionLineDescriptionModule as ɵbw, TransactionLineDescriptionComponent as ɵbx, TransactionImageService as ɵby, AvatarModule as ɵbz, OptionsService as ɵc, AvatarComponent as ɵca, SharedService as ɵcb, SharedConnectorService as ɵcc, DeliveryTypeTileModule as ɵcd, DeliveryTypeTileComponent as ɵce, PaymentModule as ɵcf, PaymentTileModule as ɵcg, PaymentTileComponent as ɵch, PaymentQrCodeModule as ɵci, PaymentQrCodeComponent as ɵcj, PaymentService as ɵck, PaymentComponent as ɵcl, CheckoutOverviewRelationEditComponent as ɵcm, CheckoutOverviewDeliveryEditComponent as ɵcn, CheckoutOverviewDeliveryAddressComponent as ɵco, CheckOutRelationSuggestionsListComponent as ɵcp, CheckOutRelationSuggestionsListItemComponent as ɵcq, CheckoutLoginComponent as ɵcr, TransactionHeaderModule$1 as ɵcs, TransactionHeaderBlockModule as ɵct, TransactionHeaderBlockComponent as ɵcu, TransactionBaseComponent as ɵcv, TransactionHeaderDeliveryDateComponent as ɵcw, TransactionHeaderFieldsBaseComponent as ɵcx, TransactionHeaderPaymentModule as ɵcy, TransactionHeaderPaymentComponent as ɵcz, DictionaryService as ɵd, TransactionHeaderComponent$1 as ɵda, TransactionLinesGridModule as ɵdb, TransactionBaseGridModule as ɵdc, TransactionLineSidePanelModule as ɵdd, TransactionLineSidePanelDefaultModule as ɵde, TransactionLinePriceListModule as ɵdf, TransactionLinePriceListComponent as ɵdg, TransactionLineVatModule as ɵdh, TransactionLineVatComponent as ɵdi, TransactionLineQuantityModule as ɵdj, TransactionLineQuantityComponent as ɵdk, TransactionLineLineDiscountModule as ɵdl, TransactionLineLineDiscountComponent as ɵdm, TransactionLineDeliveryMethodModule as ɵdn, TransactionLineDeliveryMethodComponent as ɵdo, TransactionLineDeliveryDateModule as ɵdp, TransactionLineDeliveryDateComponent as ɵdq, TransactionLineReferenceModule as ɵdr, TransactionLineReferenceComponent as ɵds, TransactionLineCommissionCodeModule as ɵdt, TransactionLineCommissionCodeComponent as ɵdu, TransactionLineWarehouseModule as ɵdv, TransactionLineWarehouseComponent as ɵdw, TransactionLineDiscountAmountModule as ɵdx, TransactionLineDiscountAmountComponent as ɵdy, TransactionLineQuantumDiscountModule as ɵdz, TransactionConnectorService as ɵe, TransactionLineQuantumDiscountComponent as ɵea, TransactionLineSpecialDiscountModule as ɵeb, TransactionLineSpecialDiscountComponent as ɵec, TransactionLineSupplierModule as ɵed, TransactionLineSupplierComponent as ɵee, TransactionLineSidePanelDefaultComponent as ɵef, TransactionReceivingGoodsHistoryModule as ɵeg, TransactionHistoryGridModule as ɵeh, TransactionHistoryGridStatusModule as ɵei, TransactionHistoryGridStatusComponent as ɵej, TransactionHistoryGridComponent as ɵek, TransactionReceivingGoodsHistoryComponent as ɵel, TransactionReceivingGoodsDetailsModule as ɵem, TransactionReceivingGoodsDetailsComponent as ɵen, ArticleService as ɵeo, TransactionButtonBarModule as ɵep, TransactionButtonBarComponent as ɵeq, TransactionMappingService as ɵer, TransactionButtonBarButtonComponent as ɵes, TransactionLineSidePanelPurchaseModule as ɵet, DefaultOkCancelButtonsModule as ɵeu, DefaultOkCancelButtonsComponent as ɵev, TransactionLineSidePanelPurchaseComponent as ɵew, TransactionEventService as ɵex, TransactionLineSidePanelComponent as ɵey, TransactionBaseGridComponent as ɵez, CollectionCacheService as ɵf, TransactionGridBaseComponent as ɵfa, TransactionLinesGridComponent as ɵfb, DiscountModule as ɵfc, DiscountComponent as ɵfd, TransactionQuickAccessOverviewModule as ɵfe, TransactionQuickAccessOverviewComponent as ɵff, TransactionOrderConfirmationGridModule as ɵfg, TransactionOrderConfirmationGridComponent as ɵfh, TransactionReceivedGoodsGridModule as ɵfi, TransactionReceivedGoodsGridComponent as ɵfj, ViewModeButtonsModule as ɵfk, ViewModeButtonsComponent as ɵfl, TransactionGridModule as ɵfm, TransactionGridComponent as ɵfn, TransactionTileModule as ɵfo, TransactionTileComponent as ɵfp, TransactionSearchService as ɵfq, TransactionSearchResultModule as ɵfr, TransactionSearchSalesOrderTileModule as ɵfs, StatusBarModule as ɵft, StatusBarComponent as ɵfu, TransactionSearchSalesOrderTileComponent as ɵfv, TransactionSearchTileBaseComponent as ɵfw, TransactionSearchPurchaseOrderTileModule as ɵfx, TransactionSearchPurchaseOrderTileComponent as ɵfy, TransactionSearchSalesOrderGridModule as ɵfz, ArticleConnectorService as ɵg, TransactionSearchSalesOrderGridComponent as ɵga, TransactionSearchGridBaseComponent as ɵgb, TransactionSearchPurchaseOrderGridModule as ɵgc, TransactionSearchPurchaseOrderGridComponent as ɵgd, TransactionSearchHeaderModule as ɵge, TransactionSearchHeaderComponent as ɵgf, TransactionSearchGridModule as ɵgg, TransactionSearchGridComponent as ɵgh, TransactionSearchTileModule as ɵgi, TransactionSearchTileComponent as ɵgj, TransactionSearchResultComponent as ɵgk, TransactionSalesOrderFilterModule as ɵgl, TransactionFilterCategoriesModule as ɵgm, TransactionFilterCategoriesComponent as ɵgn, TransactionSalesOrderFilterContentOrderModule as ɵgo, TransactionSalesOrderFilterContentOrderComponent as ɵgp, TransactionFilterContentBaseComponent as ɵgq, FilterRequestService as ɵgr, TransactionSalesOrderFilterContentLogisticsModule as ɵgs, TransactionFilterHistoricStateModule as ɵgt, TransactionFilterHistoricStateComponent as ɵgu, TransactionSalesOrderFilterContentLogisticsComponent as ɵgv, TransactionSalesOrderFilterContentArticleModule as ɵgw, TransactionSalesOrderFilterContentArticleComponent as ɵgx, TransactionSalesOrderFilterComponent as ɵgy, TransactionFilterBaseComponent as ɵgz, CoreModule as ɵh, TransactionPurchaseOrderFilterModule as ɵha, TransactionPurchaseOrderFilterContentOrderModule as ɵhb, TransactionPurchaseOrderFilterContentOrderComponent as ɵhc, TransactionPurchaseOrderFilterContentLogisticsModule as ɵhd, TransactionPurchaseOrderFilterContentLogisticsComponent as ɵhe, TransactionPurchaseOrderFilterContentArticleModule as ɵhf, TransactionPurchaseOrderFilterContentArticleComponent as ɵhg, TransactionPurchaseOrderFilterComponent as ɵhh, TransactionFilterModule as ɵhi, TransactionFilterComponent as ɵhj, ConfirmationDialogModule as ɵi, PipeModule as ɵj, AppendPipe as ɵk, DeliveryTimePipe as ɵl, DateDurationPipe as ɵm, LocalizePipe as ɵn, CoCurrencyPipe as ɵo, SafeStylePipe as ɵp, SafeHtmlPipe as ɵq, ConfirmationDialogComponent as ɵr, DialogBaseComponent as ɵs, ImageDisplayComponent as ɵt, IconComponent as ɵu, IconCacheService as ɵv, CustomerGroupsComponent as ɵw, StockStatusIndicatorComponent as ɵx, LoaderComponent as ɵy, RelationAddressModule as ɵz };
 //# sourceMappingURL=colijnit-transaction.js.map