@colijnit/transaction 255.1.36 → 255.1.38

package/bundles/colijnit-transaction.umd.js

@@ -33,8 +33,8 @@
         function Version() {
             this.name = "@colijnit/transaction";
             this.description = "Colijn IT transaction package";
-            this.symVer = "255.1.36";
-            this.publishDate = "10-9-2024 22:23:01";
+            this.symVer = "255.1.38";
+            this.publishDate = "12-9-2024 14:26:15";
         }
         return Version;
     }());
@@ -747,6 +747,8 @@
         Icon["IndustrySolid"] = "industry_solid";
         Icon["Invoice"] = "invoice";
         Icon["LessThanSolid"] = "less_than_solid";
+        Icon["LightCreditCardCheck"] = "light_credit_card_check";
+        Icon["LightEuroSignMinus"] = "light_euro_sign_minus";
         Icon["LinkRegular"] = "link_regular";
         Icon["LinkSimpleSolid"] = "link_simple_solid";
         Icon["ListRegular"] = "list_regular";
@@ -894,6 +896,8 @@
         "industry_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M32 32C14.3 32 0 46.3 0 64V304v48 80c0 26.5 21.5 48 48 48H464c26.5 0 48-21.5 48-48V304 152.2c0-18.2-19.4-29.7-35.4-21.1L320 215.4V152.2c0-18.2-19.4-29.7-35.4-21.1L128 215.4V64c0-17.7-14.3-32-32-32H32z\"/></svg>",
         "invoice": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M64 464H320c8.8 0 16-7.2 16-16V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16zM0 64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm80 48c0-8.8 7.2-16 16-16h80c8.8 0 16 7.2 16 16s-7.2 16-16 16H96c-8.8 0-16-7.2-16-16zm0 64c0-8.8 7.2-16 16-16h80c8.8 0 16 7.2 16 16s-7.2 16-16 16H96c-8.8 0-16-7.2-16-16zM192 400c0-8.8 7.2-16 16-16h80c8.8 0 16 7.2 16 16s-7.2 16-16 16H208c-8.8 0-16-7.2-16-16zM112 224H272c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H112c-17.7 0-32-14.3-32-32V256c0-17.7 14.3-32 32-32z\"/></svg>",
         "less_than_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M380.6 81.7c7.9 15.8 1.5 35-14.3 42.9L103.6 256 366.3 387.4c15.8 7.9 22.2 27.1 14.3 42.9s-27.1 22.2-42.9 14.3l-320-160C6.8 279.2 0 268.1 0 256s6.8-23.2 17.7-28.6l320-160c15.8-7.9 35-1.5 42.9 14.3z\"/></svg>",
+        "light_credit_card_check": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\"><path d=\"M0 96C0 60.7 28.7 32 64 32l448 0c35.3 0 64 28.7 64 64l0 115.2c-10.1-5.2-20.8-9.4-32-12.6l0-38.6L32 160l0 64 362.8 0c-12.9 9.1-24.5 19.9-34.6 32L32 256l0 160c0 17.7 14.3 32 32 32l275.2 0c5.9 11.4 12.9 22.2 21.1 32L64 480c-35.3 0-64-28.7-64-64L0 96zm32 0l0 32 512 0 0-32c0-17.7-14.3-32-32-32L64 64C46.3 64 32 78.3 32 96zM96 368c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16zm128 0c0-8.8 7.2-16 16-16l80.7 0c-.5 5.3-.7 10.6-.7 16s.2 10.7 .7 16L240 384c-8.8 0-16-7.2-16-16zm128 0c0-79.5 64.5-144 144-144s144 64.5 144 144s-64.5 144-144 144s-144-64.5-144-144zm32 0c0 61.9 50.1 112 112 112s112-50.1 112-112s-50.1-112-112-112s-112 50.1-112 112zm44.7-11.3c6.2-6.2 16.4-6.2 22.6 0L480 385.4l60.7-60.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6l-72 72c-6.2 6.2-16.4 6.2-22.6 0l-40-40c-6.2-6.2-6.2-16.4 0-22.6z\"/></svg>",
+        "light_euro_sign_minus": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M0 208c0-8.8 7.2-16 16-16l25.3 0C68.8 99.5 154.5 32 256 32l49 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-49 0c-83.6 0-154.7 53.4-181.1 128L272 192c8.8 0 16 7.2 16 16s-7.2 16-16 16L66.7 224c-1.8 10.4-2.7 21.1-2.7 32s1 21.6 2.7 32L272 288c1 0 2.1 .1 3 .3c-5.1 10.1-9.3 20.7-12.4 31.7L74.9 320c26.4 74.6 97.5 128 181.1 128l19.2 0c5.9 11.4 12.9 22.2 21.1 32L256 480C154.5 480 68.8 412.5 41.3 320L16 320c-8.8 0-16-7.2-16-16s7.2-16 16-16l18.3 0c-1.5-10.5-2.3-21.1-2.3-32s.8-21.5 2.3-32L16 224c-8.8 0-16-7.2-16-16zM288 368c0-79.5 64.5-144 144-144s144 64.5 144 144s-64.5 144-144 144s-144-64.5-144-144zm32 0c0 61.9 50.1 112 112 112s112-50.1 112-112s-50.1-112-112-112s-112 50.1-112 112zm32 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z\"/></svg>",
         "link_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\"><path d=\"M59.7 244.8C3.5 301 3.5 392.1 59.7 448.2c53.6 53.6 139.5 56.4 196.5 6.5l6.1-5.4-31.6-36.1-6.1 5.4c-38 33.2-95.2 31.3-130.9-4.4c-37.4-37.4-37.4-98.1 0-135.6L207 165.4c37.4-37.4 98.1-37.4 135.6 0c35.7 35.7 37.6 92.9 4.4 130.9l-5.4 6.1L377.7 334l5.4-6.1c49.9-57 47-142.9-6.5-196.5c-56.2-56.2-147.3-56.2-203.5 0L59.7 244.8zm520.6 22.4c56.2-56.2 56.2-147.3 0-203.5C526.8 10.2 440.9 7.3 383.9 57.2l-6.1 5.4 31.6 36.1 6.1-5.4c38-33.2 95.2-31.3 130.9 4.4c37.4 37.4 37.4 98.1 0 135.6L433.1 346.6c-37.4 37.4-98.2 37.4-135.6 0c-35.7-35.7-37.6-92.9-4.4-130.9l4.7-5.4-36.1-31.6-4.7 5.4c-49.8 57-46.9 142.9 6.6 196.4c56.2 56.2 147.3 56.2 203.5 0L580.3 267.2z\"/></svg>",
         "link_simple_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M0 256C0 167.6 71.6 96 160 96h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H160c-53 0-96 43-96 96s43 96 96 96h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H352c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c53 0 96-43 96-96s-43-96-96-96H352c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c88.4 0 160 71.6 160 160zM192 224H384c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32z\"/></svg>",
         "list_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M88 48C101.3 48 112 58.75 112 72V120C112 133.3 101.3 144 88 144H40C26.75 144 16 133.3 16 120V72C16 58.75 26.75 48 40 48H88zM488 72C501.3 72 512 82.75 512 96C512 109.3 501.3 120 488 120H184C170.7 120 160 109.3 160 96C160 82.75 170.7 72 184 72H488zM488 232C501.3 232 512 242.7 512 256C512 269.3 501.3 280 488 280H184C170.7 280 160 269.3 160 256C160 242.7 170.7 232 184 232H488zM488 392C501.3 392 512 402.7 512 416C512 429.3 501.3 440 488 440H184C170.7 440 160 429.3 160 416C160 402.7 170.7 392 184 392H488zM16 232C16 218.7 26.75 208 40 208H88C101.3 208 112 218.7 112 232V280C112 293.3 101.3 304 88 304H40C26.75 304 16 293.3 16 280V232zM88 368C101.3 368 112 378.7 112 392V440C112 453.3 101.3 464 88 464H40C26.75 464 16 453.3 16 440V392C16 378.7 26.75 368 40 368H88z\"/></svg>",
@@ -1289,7 +1293,7 @@
             this.scrollContent = new rxjs.Subject();
             // public readonly commitReceivePurchaseOrders: Subject<{date: Date, id: string}> = new Subject<{date: Date, id: string}>();
             this.selectAllLines = new rxjs.Subject();
-            this.transactionHeaderDirty = new rxjs.Subject();
+            this.transactionDirty = new rxjs.Subject();
             this.transactionLineChanged = new rxjs.Subject();
             this.transactionLineCheckboxChanged = new rxjs.Subject();
             this.transactionLineRefTransactionsChanged = new rxjs.BehaviorSubject(undefined);
@@ -1369,6 +1373,8 @@
             this.reservationSalesOrderLineClicked = new rxjs.Subject();
             this.requestCreateServiceOrderFromTransactionLine = new rxjs.Subject();
             this.blockScreen = new rxjs.BehaviorSubject(false);
+            this.saveTransactionClick = new rxjs.Subject();
+            this.cancelTransactionClick = new rxjs.Subject();
         }
         return TransactionEventService;
     }());
@@ -3521,6 +3527,9 @@
                 });
             });
         };
+        TransactionConnectorAdapterService.prototype.rollbackBeacon = function () {
+            return this.connector.rollbackBeacon();
+        };
         TransactionConnectorAdapterService.prototype.createTransaction = function (kind, branchNr) {
             var _this = this;
             return new Promise(function (resolve, reject) {
@@ -9135,6 +9144,9 @@
         TransactionConnectorService.prototype.rollback = function () {
             return this._adapterService.rollback();
         };
+        TransactionConnectorService.prototype.rollbackBeacon = function () {
+            return this._adapterService.rollbackBeacon();
+        };
         TransactionConnectorService.prototype.saveTransaction = function (uuid, showLoader) {
             if (showLoader === void 0) { showLoader = false; }
             return this._adapterService.saveTransaction(uuid, showLoader);
@@ -12934,6 +12946,7 @@
             _this.transactionKindSet = new rxjs.BehaviorSubject(false);
             _this.currentBranch = "1"; // current user branch, needs to be set before we can do anything with transactions
             _this.autoSave = false;
+            _this.manualSaveParam = false;
             _this.applicationUser = false;
             _this.invoiceAddressSameAsDelivery = true;
             _this.getRelationOnRememberCurrentTransaction = true;
@@ -12964,6 +12977,7 @@
             _this._alreadyLocked = false;
             _this._transactionDirty = false;
             _this._salesOrderConfirmationSent = false;
+            _this._subs = [];
             return _this;
         }
         Object.defineProperty(TransactionBaseService.prototype, "activeRubric", {
@@ -13132,7 +13146,7 @@
             },
             set: function (value) {
                 this._transactionDirty = value;
-                this.transactionEventService.transactionHeaderDirty.next(this._transactionDirty);
+                this.transactionEventService.transactionDirty.next(this._transactionDirty);
             },
             enumerable: false,
             configurable: true
@@ -13147,6 +13161,7 @@
         TransactionBaseService.prototype.init = function (options, resetCurrentTransaction) {
             if (resetCurrentTransaction === void 0) { resetCurrentTransaction = true; }
             return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -13165,6 +13180,12 @@
                             return [4 /*yield*/, this.connector.connect()];
                         case 4:
                             _a.sent();
+                            this._subs.push(this.transactionEventService.saveTransactionClick.subscribe(function () {
+                                _this.transactionEventService.blockScreen.next(true);
+                                _this.saveTransactionAndCommit();
+                            }), this.transactionEventService.cancelTransactionClick.subscribe(function () {
+                                _this.rollback(true, true);
+                            }));
                             return [2 /*return*/];
                     }
                 });
@@ -13231,14 +13252,18 @@
             this.resetLockTransaction();
             return this.connector.commit();
         };
-        TransactionBaseService.prototype.rollback = function (refresh) {
+        TransactionBaseService.prototype.rollback = function (refresh, force) {
             if (refresh === void 0) { refresh = false; }
+            if (force === void 0) { force = false; }
             return __awaiter(this, void 0, void 0, function () {
                 var rollbackSuccess;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
                             this.transactionEventService.blockScreen.next(false);
+                            if (this.manualSaveParam && !force) {
+                                return [2 /*return*/, true];
+                            }
                             return [4 /*yield*/, this.connector.rollback()];
                         case 1:
                             rollbackSuccess = _a.sent();
@@ -13253,6 +13278,18 @@
                 });
             });
         };
+        TransactionBaseService.prototype.rollbackBeacon = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.connector.rollbackBeacon()];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         TransactionBaseService.prototype.searchTransactions = function (request) {
             return this.connector.searchTransactions(request);
         };
@@ -13685,10 +13722,11 @@
                         case 5:
                             hasPendingReasons = response.headerOperationStatuses.filter(function (los) { return los.pendingReason !== "REASON_NONE"; }).length > 0;
                             if (!!hasPendingReasons) return [3 /*break*/, 8];
-                            if (!((this.autoSave && saveTransaction) || overrideSave)) return [3 /*break*/, 6];
+                            if (!((this.autoSave && saveTransaction && !this.manualSaveParam) || overrideSave)) return [3 /*break*/, 6];
                             return [2 /*return*/, this.saveTransactionAndCommit(response)];
-                        case 6: // just replace transaction object
-                        return [4 /*yield*/, this.rememberCurrentTransaction(response)];
+                        case 6:
+                            this.transactionEventService.blockScreen.next(false);
+                            return [4 /*yield*/, this.rememberCurrentTransaction(response)];
                         case 7:
                             _b.sent();
                             _b.label = 8;
@@ -13748,9 +13786,10 @@
                                 }
                                 this.transactionLineAdded = false;
                             }
-                            if (!(this.autoSave && saveTransaction)) return [3 /*break*/, 5];
+                            if (!(this.autoSave && saveTransaction && !this.manualSaveParam)) return [3 /*break*/, 5];
                             return [2 /*return*/, this.saveTransactionAndCommit(response)];
                         case 5:
+                            this.transactionEventService.blockScreen.next(false);
                             if (!rememberTransaction) return [3 /*break*/, 7];
                             return [4 /*yield*/, this.rememberCurrentTransaction(response)];
                         case 6:
@@ -14074,17 +14113,30 @@
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            // @ts-ignore
                             _a = this;
-                            return [4 /*yield*/, this.getInternalParameter('JS_PICKINGLIJST')];
+                            return [4 /*yield*/, this.getInternalParameter(internalParam_enum.InternalParam.PickingList)];
                         case 1:
-                            // @ts-ignore
                             _a.internalParameterJsPickingList = _b.sent();
                             return [2 /*return*/];
                     }
                 });
             });
         };
+        TransactionService.prototype.prepareManualSaveInternalParam = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = this;
+                            return [4 /*yield*/, this.getInternalParameter(internalParam_enum.InternalParam.TransManualSave)];
+                        case 1:
+                            _a.manualSaveParam = _b.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         TransactionService.prototype.prepareDropShipmentInternalParam = function () {
             var _this = this;
             this.getInternalParameter(internalParam_enum.InternalParam.DropShipment).then(function (value) { return _this.internalParameterAllowsDropShipment = value; });
@@ -14245,6 +14297,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleHeaderOperationStatuses(response, saveTransaction)];
                             }
                             return [2 /*return*/, false];
@@ -14262,6 +14315,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleHeaderOperationStatuses(response, saveTransaction)];
                             }
                             return [2 /*return*/, false];
@@ -14972,6 +15026,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -14988,6 +15043,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15004,6 +15060,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15020,6 +15077,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15036,6 +15094,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15052,6 +15111,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15082,6 +15142,7 @@
                         case 1:
                             response = _a.sent();
                             if (!response) return [3 /*break*/, 3];
+                            this.transactionDirty = true;
                             return [4 /*yield*/, this.handleLineOperationStatuses(response, false, false)];
                         case 2:
                             _a.sent();
@@ -15103,6 +15164,7 @@
                         case 1:
                             response = _a.sent();
                             if (!response) return [3 /*break*/, 3];
+                            this.transactionDirty = true;
                             return [4 /*yield*/, this.handleLineOperationStatuses(response, saveTransaction, rememberTransaction)];
                         case 2:
                             _a.sent();
@@ -15122,6 +15184,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15138,6 +15201,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15154,6 +15218,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15170,6 +15235,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15186,6 +15252,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15202,6 +15269,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15218,6 +15286,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15236,6 +15305,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15252,6 +15322,7 @@
                         case 1:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15516,6 +15587,7 @@
                         case 2:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleHeaderOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -15614,6 +15686,7 @@
                         case 1:
                             response = _a.sent();
                             if (response !== null) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response, saveTransaction)];
                             }
                             else {
@@ -15780,6 +15853,7 @@
                             return [4 /*yield*/, this.connector.addTextLineToTransaction(this.currentTransaction.transactionInfo.uuid, showOnDocuments, text, amount, articleBound, refArticleLineNr, aboveLineNr, belowLineNr)];
                         case 3:
                             response = _a.sent();
+                            this.transactionDirty = true;
                             return [2 /*return*/, this.handleLineOperationStatuses(response)];
                         case 4: return [2 /*return*/, false];
                     }
@@ -15798,6 +15872,7 @@
                             return [4 /*yield*/, this.connector.updateTextLine(uuid, lineUuid, showOnDocuments, text)];
                         case 2:
                             response = _a.sent();
+                            this.transactionDirty = true;
                             return [2 /*return*/, this.handleLineOperationStatuses(response)];
                         case 3: return [2 /*return*/, false];
                     }
@@ -15816,6 +15891,7 @@
                             return [4 /*yield*/, this.connector.changeLineSequence(this.currentTransaction.transactionInfo.uuid, lineUuid, aboveLineNr, belowLineNr)];
                         case 2:
                             response = _a.sent();
+                            this.transactionDirty = true;
                             return [2 /*return*/, this.handleLineOperationStatuses(response)];
                         case 3: return [2 /*return*/, false];
                     }
@@ -15830,6 +15906,7 @@
                         case 0: return [4 /*yield*/, this.connector.deleteTransactionLine(transactionUuid, TransactionLineUuid)];
                         case 1:
                             response = _a.sent();
+                            this.transactionDirty = true;
                             return [2 /*return*/, this.handleLineOperationStatuses(response)];
                     }
                 });
@@ -15843,6 +15920,7 @@
                         case 0: return [4 /*yield*/, this.connector.changeTransactionLineQuantity(transactionUuid, lineUuid, newQuantity)];
                         case 1:
                             response = _a.sent();
+                            this.transactionDirty = true;
                             return [2 /*return*/, this.handleLineOperationStatuses(response)];
                     }
                 });
@@ -15874,6 +15952,7 @@
                             this.transactionEventService.updatingPurchaseOrderReceiveGoods.next(false);
                             success = true;
                             if (!response) return [3 /*break*/, 4];
+                            this.transactionDirty = true;
                             return [4 /*yield*/, this.handleHeaderOperationStatuses(response)];
                         case 3:
                             success = _a.sent();
@@ -15900,6 +15979,7 @@
                             this.transactionEventService.updatingPurchaseOrderReceiveGoods.next(false);
                             success = true;
                             if (!response) return [3 /*break*/, 4];
+                            this.transactionDirty = true;
                             return [4 /*yield*/, this.handleHeaderOperationStatuses(response)];
                         case 3:
                             success = _a.sent();
@@ -15926,6 +16006,7 @@
                             this.transactionEventService.updatingPurchaseOrderAllocateGoods.next(false);
                             success = true;
                             if (!response) return [3 /*break*/, 4];
+                            this.transactionDirty = true;
                             return [4 /*yield*/, this.handleHeaderOperationStatuses(response)];
                         case 3:
                             success = _a.sent();
@@ -15952,6 +16033,7 @@
                             this.transactionEventService.updatingPurchaseOrderAllocateGoods.next(false);
                             success = true;
                             if (!response) return [3 /*break*/, 4];
+                            this.transactionDirty = true;
                             return [4 /*yield*/, this.handleHeaderOperationStatuses(response)];
                         case 3:
                             success = _a.sent();
@@ -15978,6 +16060,7 @@
                             this.transactionEventService.updatingSalesOrderGoodsToBePicked.next(false);
                             success = true;
                             if (!response) return [3 /*break*/, 4];
+                            this.transactionDirty = true;
                             return [4 /*yield*/, this.handleHeaderOperationStatuses(response)];
                         case 3:
                             success = _a.sent();
@@ -16004,6 +16087,7 @@
                             this.transactionEventService.updatingSalesOrderGoodsPicked.next(false);
                             success = true;
                             if (!response) return [3 /*break*/, 4];
+                            this.transactionDirty = true;
                             return [4 /*yield*/, this.handleHeaderOperationStatuses(response)];
                         case 3:
                             success = _a.sent();
@@ -16028,6 +16112,7 @@
                             response = _a.sent();
                             success = true;
                             if (!response) return [3 /*break*/, 4];
+                            this.transactionDirty = true;
                             return [4 /*yield*/, this.handleHeaderOperationStatuses(response)];
                         case 3:
                             success = _a.sent();
@@ -16052,6 +16137,7 @@
                             response = _a.sent();
                             success = true;
                             if (!response) return [3 /*break*/, 4];
+                            this.transactionDirty = true;
                             return [4 /*yield*/, this.handleHeaderOperationStatuses(response)];
                         case 3:
                             success = _a.sent();
@@ -17221,6 +17307,7 @@
                         case 2: return [4 /*yield*/, _a.sent()];
                         case 3:
                             response = _a.sent();
+                            this.transactionDirty = true;
                             return [2 /*return*/, this.handleLineOperationStatuses(response)];
                         case 4: return [2 /*return*/, false];
                     }
@@ -17240,6 +17327,7 @@
                         case 2: return [4 /*yield*/, _a.sent()];
                         case 3:
                             response = _a.sent();
+                            this.transactionDirty = true;
                             return [2 /*return*/, this.handleLineOperationStatuses(response)];
                         case 4: return [2 /*return*/, false];
                     }
@@ -17259,6 +17347,7 @@
                         case 2:
                             response = _a.sent();
                             if (response) {
+                                this.transactionDirty = true;
                                 return [2 /*return*/, this.handleLineOperationStatuses(response)];
                             }
                             return [2 /*return*/, false];
@@ -17748,11 +17837,14 @@
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.prepareMLocatInternalParam()];
+                        case 0: return [4 /*yield*/, this.prepareManualSaveInternalParam()];
                         case 1:
                             _a.sent();
-                            return [4 /*yield*/, this.preparePakBinnenInternalParam()];
+                            return [4 /*yield*/, this.prepareMLocatInternalParam()];
                         case 2:
+                            _a.sent();
+                            return [4 /*yield*/, this.preparePakBinnenInternalParam()];
+                        case 3:
                             _a.sent();
                             return [2 /*return*/];
                     }
@@ -27422,11 +27514,15 @@
             _this.transactionService = transactionService;
             _this.changeDetector = changeDetector;
             _this.Icon = Icon;
+            _this.showDetails = false;
             return _this;
         }
         TransactionLinesSidePanelServiceOrderComponent.prototype.showClass = function () {
             return true;
         };
+        TransactionLinesSidePanelServiceOrderComponent.prototype.showDetailsClick = function () {
+            this.showDetails = !this.showDetails;
+        };
         TransactionLinesSidePanelServiceOrderComponent.prototype.ngOnInit = function () {
             var _super = Object.create(null, {
                 ngOnInit: { get: function () { return _super_1.prototype.ngOnInit; } }
@@ -27451,8 +27547,15 @@
     TransactionLinesSidePanelServiceOrderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-transaction-lines-side-panel-service-order',
-                    template: "\n    <div class=\"full-details-wrapper\">\n      <div class=\"details-wrapper\">\n        <div class=\"details-label-wrapper\">\n          <label class=\"detail-label\" [textContent]=\"'ARTICLE_DETAILS' | localize\"\n          ></label>\n          <co-icon [iconData]=\"iconCacheService.getIcon(icons.ChevronDownRegular)\"></co-icon>\n        </div>\n        <div class=\"details-display articles\">\n          <div class=\"article-description\">\n            <!--co-input-text [(model)]=\"transactionServiceInfo.productName\"\n                          class=\"detail-text-field\" [readonly]=\"true\"></co-input-text-->\n            <div class=\"art-details\">\n              <label class=\"label\" [textContent]=\"'DESCRIPTION'| localize\"></label>\n              <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceArticleDescription\"></span>\n            </div>\n          </div>\n          <div class=\"art-amount-batch\">\n            <div class=\"detail\">\n              <label class=\"label\" [textContent]=\"'AMOUNT'| localize\"></label>\n              <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceQuantity\"></span>\n            </div>\n            <!--div class=\"detail\">\n              <label class=\"label\" [textContent]=\"'BATCH_NUMBER'| localize\"></label>\n              <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceBatchNr\"></span>\n            </div-->\n          </div>\n          <co-image-display class=\"image-display\" [model]=\"image\"></co-image-display>\n        </div>\n      </div>\n      <!-- Temp test Ruben 23/8 -->\n      <!--div class=\"details-wrapper\">\n        <div class=\"details-label-wrapper\">\n          <label class=\"detail-label\" [textContent]=\"'SALESORDER_DETAIL' | localize\"\n          ></label>\n          <co-icon [iconData]=\"iconCacheService.getIcon(icons.ChevronDownRegular)\"></co-icon>\n        </div>\n        <div class=\"details-display\">\n          <div class=\"detail\">\n            <label class=\"label\" [textContent]=\"'ORDERNUMBER'| localize\"></label>\n            <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceTransactionNr\"></span>\n          </div>\n          <div class=\"vertical-line\"></div>\n          <div class=\"detail\">\n            <label class=\"label\" [textContent]=\"'ORDER_DATE'| localize\"></label>\n            <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceTransactionDate | date : 'd-MM-yyyy'\"></span>\n          </div>\n          <div class=\"vertical-line\"></div>\n          <div class=\"detail\">\n            <label class=\"label\" [textContent]=\"'DELIVERY_DATE'| localize\"></label>\n            <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceDeliveryDate | date : 'd-MM-yyyy'\"></span>\n          </div>\n          <div class=\"vertical-line\"></div>\n          <div class=\"detail\">\n            <label class=\"label\" [textContent]=\"'REFERENCE'| localize\"></label>\n            <span class=\"value\" [textContent]=\"transactionServiceInfo.priority\"></span>\n          </div>\n        </div>\n      </div>\n      <div class=\"details-wrapper\">\n        <div class=\"details-label-wrapper\">\n          <label class=\"detail-label\" [textContent]=\"'PURCHASEORDER_DETAIL' | localize\"\n          ></label>\n          <co-icon [iconData]=\"iconCacheService.getIcon(icons.ChevronDownRegular)\"></co-icon>\n        </div>\n        <div class=\"details-display supplier\">\n          <div class=\"top-details\">\n            <div class=\"detail\">\n              <label class=\"label\" [textContent]=\"'ORDERNUMBER'| localize\"></label>\n              <span class=\"value\" [textContent]=\"transactionServiceInfo.sourcePurchaseTransactionNr\"></span>\n            </div>\n            <div class=\"vertical-line\"></div>\n            <div class=\"detail\">\n              <label class=\"label\" [textContent]=\"'ORDER_DATE'| localize\"></label>\n              <span class=\"value\" [textContent]=\"transactionServiceInfo.sourcePurchaseTransactionDate | date : 'd-MM-yyyy'\"></span>\n            </div>\n            <div class=\"vertical-line\"></div>\n            <div class=\"detail\">\n              <label class=\"label\" [textContent]=\"'RECEIVED'| localize\"></label>\n              <span class=\"value\" [textContent]=\"transactionServiceInfo.sourcePurchaseTransactionReceiptDate | date : 'd-MM-yyyy'\"></span>\n            </div>\n            <div class=\"vertical-line\"></div>\n            <div class=\"detail\">\n              <label class=\"label\" [textContent]=\"'REFERENCE'| localize\"></label>\n              <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceRefSupplier\"></span>\n            </div>\n          </div>\n            <div class=\"bottom-details\">\n              <div class=\"detail supplier\">\n                <label class=\"label\" [textContent]=\"'SUPPLIER'| localize\"></label>\n                <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceSupplierName\"></span>\n              </div>\n            </div>\n        </div>\n      </div-->\n    </div>\n  ",
-                    encapsulation: i0.ViewEncapsulation.None
+                    template: "\n    <div class=\"full-details-wrapper\">\n      <div class=\"details-wrapper\">\n        <div class=\"details-label-wrapper clickable\" (click)=\"showDetailsClick()\">\n          <label class=\"detail-label\" [textContent]=\"'ARTICLE_DETAILS' | localize\"\n          ></label>\n          <co-icon [class.active]=\"showDetails\" [iconData]=\"iconCacheService.getIcon(icons.ChevronDownRegular)\"></co-icon>\n        </div>\n        <div class=\"details-display articles\">\n          <div class=\"article-description\">\n            <!--co-input-text [(model)]=\"transactionServiceInfo.productName\"\n                          class=\"detail-text-field\" [readonly]=\"true\"></co-input-text-->\n            <div class=\"art-details\">\n              <label class=\"label\" [textContent]=\"'DESCRIPTION'| localize\"></label>\n              <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceArticleDescription\"></span>\n            </div>\n          </div>\n          <div class=\"art-amount-batch\">\n            <div class=\"detail\">\n              <label class=\"label\" [textContent]=\"'AMOUNT'| localize\"></label>\n              <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceQuantity\"></span>\n            </div>\n            <!--div class=\"detail\">\n              <label class=\"label\" [textContent]=\"'BATCH_NUMBER'| localize\"></label>\n              <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceBatchNr\"></span>\n            </div-->\n          </div>\n          <co-image-display class=\"image-display\" [model]=\"image\"></co-image-display>\n        </div>\n      </div>\n      <div class=\"show-details-wrapper\"\n           *ngIf=\"showDetails\"\n           [@slideToggle]=\"showDetails ? 'open' : 'closed'\">\n        <div class=\"details-wrapper\">\n          <div class=\"details-label-wrapper\">\n            <label class=\"detail-label\" [textContent]=\"'SALESORDER_DETAIL' | localize\"\n            ></label>\n          </div>\n          <div class=\"details-display\">\n            <div class=\"detail\">\n              <label class=\"label\" [textContent]=\"'ORDERNUMBER'| localize\"></label>\n              <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceTransactionNr\"></span>\n            </div>\n            <div class=\"vertical-line\"></div>\n            <div class=\"detail\">\n              <label class=\"label\" [textContent]=\"'ORDER_DATE'| localize\"></label>\n              <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceTransactionDate | date : 'd-MM-yyyy'\"></span>\n            </div>\n            <div class=\"vertical-line\"></div>\n            <div class=\"detail\">\n              <label class=\"label\" [textContent]=\"'DELIVERY_DATE'| localize\"></label>\n              <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceDeliveryDate | date : 'd-MM-yyyy'\"></span>\n            </div>\n            <div class=\"vertical-line\"></div>\n            <div class=\"detail\">\n              <label class=\"label\" [textContent]=\"'REFERENCE'| localize\"></label>\n              <span class=\"value\" [textContent]=\"transactionServiceInfo.priority\"></span>\n            </div>\n          </div>\n        </div>\n        <div class=\"details-wrapper\">\n          <div class=\"details-label-wrapper\">\n            <label class=\"detail-label\" [textContent]=\"'PURCHASEORDER_DETAIL' | localize\"\n            ></label>\n          </div>\n          <div class=\"details-display supplier\">\n            <div class=\"top-details\">\n              <div class=\"detail\">\n                <label class=\"label\" [textContent]=\"'ORDERNUMBER'| localize\"></label>\n                <span class=\"value\" [textContent]=\"transactionServiceInfo.sourcePurchaseTransactionNr\"></span>\n              </div>\n              <div class=\"vertical-line\"></div>\n              <div class=\"detail\">\n                <label class=\"label\" [textContent]=\"'ORDER_DATE'| localize\"></label>\n                <span class=\"value\" [textContent]=\"transactionServiceInfo.sourcePurchaseTransactionDate | date : 'd-MM-yyyy'\"></span>\n              </div>\n              <div class=\"vertical-line\"></div>\n              <div class=\"detail\">\n                <label class=\"label\" [textContent]=\"'RECEIVED'| localize\"></label>\n                <span class=\"value\" [textContent]=\"transactionServiceInfo.sourcePurchaseTransactionReceiptDate | date : 'd-MM-yyyy'\"></span>\n              </div>\n              <div class=\"vertical-line\"></div>\n              <div class=\"detail\">\n                <label class=\"label\" [textContent]=\"'REFERENCE'| localize\"></label>\n                <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceRefSupplier\"></span>\n              </div>\n            </div>\n            <div class=\"bottom-details\">\n              <div class=\"detail supplier\">\n                <label class=\"label\" [textContent]=\"'SUPPLIER'| localize\"></label>\n                <span class=\"value\" [textContent]=\"transactionServiceInfo.sourceSupplierName\"></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None,
+                    animations: [
+                        animations.trigger('slideToggle', [
+                            animations.state('void', animations.style({ height: '0px', overflow: 'hidden' })),
+                            animations.state('*', animations.style({ height: '*', overflow: 'hidden' })),
+                            animations.transition('void <=> *', animations.animate('300ms ease-in-out')),
+                        ])
+                    ]
                 },] }
     ];
     TransactionLinesSidePanelServiceOrderComponent.ctorParameters = function () { return [
@@ -36104,7 +36207,7 @@
                     if (_this.form.formGroup.dirty) {
                         _this.setFormDirty();
                     }
-                }), this.transactionEventService.transactionHeaderDirty.subscribe(function (dirty) {
+                }), this.transactionEventService.transactionDirty.subscribe(function (dirty) {
                     if (dirty) {
                         _this.setFormDirty();
                     }
@@ -41660,7 +41763,7 @@
     TransactionHeaderOrderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-header-order",
-                    template: "\n      <co-transaction-header-block\n              [firstBlockTemplate]=\"firstBlock\"\n              [secondBlockTemplate]=\"secondBlock\"\n              [hiddenBlockTemplate]=\"hiddenBlock\"\n              (headerClick)=\"showDialog = true\"\n      >\n      </co-transaction-header-block>\n      <ng-template #firstBlock>\n        <div class=\"transaction-header-block-row\" (click)=\"showDialog = true\">\n          <div class=\"header-order-total-wrapper\" [screenConfigurationObject]=\"cfgNames.HeaderOrderOrderTotalHeader\" screenConfigNativeElement>\n            <span class=\"header-order-total-label co-transaction-label\" [textContent]=\"'ORDER_TOTAL' | localize\"></span>\n            <div class=\"header-order-total\" [textContent]=\"transactionTotal.netAmount | coCurrency\"></div>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #secondBlock>\n        <div class=\"transaction-header-block-row\" (click)=\"showDialog = true\" [screenConfigurationObject]=\"cfgNames.HeaderOrderDiscountHeader\" screenConfigNativeElement>\n          <div class=\"transaction-header-discount-button\">\n            <div class=\"header-discount\" (click)=\"openDiscount($event)\">\n              <co-icon class=\"header-discount-icon\" [iconData]=\"iconCacheService.getIcon(icons.RegularEuroSignMinus)\"></co-icon>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #hiddenBlock>\n        <div class=\"transaction-header-block-row\" [screenConfigurationObject]=\"cfgNames.HeaderOrderDefinitiveHeader\" screenConfigNativeElement>\n          <div class=\"header-order-definitive\">\n            <co-transaction-header-definitive class=\"transaction-header-order-definitive\"\n                [screenConfigurationObject]=\"cfgNames.HeaderOrderDefinitiveHeader\"\n                [transactionInfo]=\"transactionInfo\"\n            ></co-transaction-header-definitive>\n          </div>\n          <!--span class=\"header-order-line-amount-label co-transaction-label\" [textContent]=\"'ORDER_LINES' | localize\"></span>\n          <div class=\"header-order-line-amount\" [textContent]=\"transactionLines.length\"></div-->\n        </div>\n      </ng-template>\n      <co-transaction-header-popup *ngIf=\"showDialog\"\n                                   [activeCategoryDescription]=\"'ORDER_INFORMATION1'\"\n                                   [relation]=\"relation\"\n                                   [transaction]=\"transaction\"\n                                   (closeClick)=\"showDialog = false\"></co-transaction-header-popup>\n<!--\n\n      <co-dialog class=\"transaction-header-order-dialog\" [customCssClass]=\"'co-small-scrollbar'\" [headerTemplate]=\"headerTemplate\" *ngIf=\"showDialog\"\n                 (closeClick)=\"showDialog = false\">\n          <ng-template #headerTemplate>\n              <div class=\"co-dialog-header-title\" [textContent]=\"'ORDER_INFORMATION1' | localize\"></div>\n              <co-transaction-header-block\n                      [headerBlockTemplate]=\"headerBlock\"\n                      [firstBlockTemplate]=\"firstBlock\"\n                      [secondBlockTemplate]=\"secondBlock\"\n                      [thirdBlockTemplate]=\"thirdBlock\"\n              >\n              </co-transaction-header-block>\n          </ng-template>\n          <div class=\"order-dialog-section\">\n              <div class=\"section-wrapper\">\n                  <div class=\"section-header\" [textContent]=\"'BASE_INFO1' | localize | prepend:'01 '\"></div>\n                  <div class=\"two-column-grid\">\n                      <co-transaction-header-branch [simple]=\"true\" [transaction]=\"transaction\" [transactionInfo]=\"transactionInfo\"></co-transaction-header-branch>\n                      <co-transaction-header-sales-person [transactionInfo]=\"transactionInfo\"></co-transaction-header-sales-person>\n                      <co-transaction-header-administrative-relation\n                              [transactionInfo]=\"transactionInfo\"></co-transaction-header-administrative-relation>\n                      <co-transaction-header-price-kind [transaction]=\"transaction\" [transactionInfo]=\"transactionInfo\"></co-transaction-header-price-kind>\n                      <co-transaction-header-currency [transaction]=\"transaction\" [transactionInfo]=\"transactionInfo\"></co-transaction-header-currency>\n                      <co-transaction-header-payment-condition\n                              [transactionInfo]=\"transactionInfo\"></co-transaction-header-payment-condition>\n                  </div>\n              </div>\n              <div class=\"section-wrapper\">\n                  <div class=\"section-header\" [textContent]=\"'ORDER_PARAMETERS' | localize | prepend:'02 '\"></div>\n                  <div class=\"section-sub-title\" [textContent]=\"'ON_HOLD_CODES' | localize\"></div>\n                  <co-transaction-header-hold-codes [transactionInfo]=\"transaction.transactionInfo\"></co-transaction-header-hold-codes>\n                  <div class=\"section-sub-title\" [textContent]=\"'MARKETING_CODE' | localize\"></div>\n                  <co-transaction-header-marketing [transactionInfo]=\"transaction.transactionInfo\"></co-transaction-header-marketing>\n              </div>\n          </div>\n      </co-dialog>\n-->\n      <co-dialog-transaction-header-discount class=\"discount-dialog\" *ngIf=\"showDialogDiscount\"\n                                             [screenConfigurationObject]=\"cfgNames.DiscountPriceInformationHeader\"\n                                             [transactionInfo]=\"transactionInfo\"\n                                             [transactionTotal]=\"transactionTotal\"\n                                             (close)=\"showDialogDiscount = false\">\n      </co-dialog-transaction-header-discount>\n  ",
+                    template: "\n      <co-transaction-header-block\n              [firstBlockTemplate]=\"firstBlock\"\n              [secondBlockTemplate]=\"secondBlock\"\n              [hiddenBlockTemplate]=\"hiddenBlock\"\n              (headerClick)=\"showDialog = true\"\n      >\n      </co-transaction-header-block>\n      <ng-template #firstBlock>\n        <div class=\"transaction-header-block-row\" (click)=\"showDialog = true\">\n          <div class=\"header-order-total-wrapper\" [screenConfigurationObject]=\"cfgNames.HeaderOrderOrderTotalHeader\" screenConfigNativeElement>\n            <span class=\"header-order-total-label co-transaction-label\" [textContent]=\"'ORDER_TOTAL' | localize\"></span>\n            <div class=\"header-order-total\" [textContent]=\"transactionTotal.netAmount | coCurrency\"></div>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #secondBlock>\n        <div class=\"transaction-header-block-row\" (click)=\"showDialog = true\" [screenConfigurationObject]=\"cfgNames.HeaderOrderDiscountHeader\" screenConfigNativeElement>\n          <div class=\"transaction-header-discount-button\">\n            <div class=\"header-discount\" (click)=\"openDiscount($event)\">\n              <co-icon class=\"header-discount-icon\" [iconData]=\"iconCacheService.getIcon(icons.LightEuroSignMinus)\"></co-icon>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #hiddenBlock>\n        <div class=\"transaction-header-block-row\" [screenConfigurationObject]=\"cfgNames.HeaderOrderDefinitiveHeader\" screenConfigNativeElement>\n          <div class=\"header-order-definitive\">\n            <co-transaction-header-definitive class=\"transaction-header-order-definitive\"\n                [screenConfigurationObject]=\"cfgNames.HeaderOrderDefinitiveHeader\"\n                [transactionInfo]=\"transactionInfo\"\n            ></co-transaction-header-definitive>\n          </div>\n          <!--span class=\"header-order-line-amount-label co-transaction-label\" [textContent]=\"'ORDER_LINES' | localize\"></span>\n          <div class=\"header-order-line-amount\" [textContent]=\"transactionLines.length\"></div-->\n        </div>\n      </ng-template>\n      <co-transaction-header-popup *ngIf=\"showDialog\"\n                                   [activeCategoryDescription]=\"'ORDER_INFORMATION1'\"\n                                   [relation]=\"relation\"\n                                   [transaction]=\"transaction\"\n                                   (closeClick)=\"showDialog = false\"></co-transaction-header-popup>\n<!--\n\n      <co-dialog class=\"transaction-header-order-dialog\" [customCssClass]=\"'co-small-scrollbar'\" [headerTemplate]=\"headerTemplate\" *ngIf=\"showDialog\"\n                 (closeClick)=\"showDialog = false\">\n          <ng-template #headerTemplate>\n              <div class=\"co-dialog-header-title\" [textContent]=\"'ORDER_INFORMATION1' | localize\"></div>\n              <co-transaction-header-block\n                      [headerBlockTemplate]=\"headerBlock\"\n                      [firstBlockTemplate]=\"firstBlock\"\n                      [secondBlockTemplate]=\"secondBlock\"\n                      [thirdBlockTemplate]=\"thirdBlock\"\n              >\n              </co-transaction-header-block>\n          </ng-template>\n          <div class=\"order-dialog-section\">\n              <div class=\"section-wrapper\">\n                  <div class=\"section-header\" [textContent]=\"'BASE_INFO1' | localize | prepend:'01 '\"></div>\n                  <div class=\"two-column-grid\">\n                      <co-transaction-header-branch [simple]=\"true\" [transaction]=\"transaction\" [transactionInfo]=\"transactionInfo\"></co-transaction-header-branch>\n                      <co-transaction-header-sales-person [transactionInfo]=\"transactionInfo\"></co-transaction-header-sales-person>\n                      <co-transaction-header-administrative-relation\n                              [transactionInfo]=\"transactionInfo\"></co-transaction-header-administrative-relation>\n                      <co-transaction-header-price-kind [transaction]=\"transaction\" [transactionInfo]=\"transactionInfo\"></co-transaction-header-price-kind>\n                      <co-transaction-header-currency [transaction]=\"transaction\" [transactionInfo]=\"transactionInfo\"></co-transaction-header-currency>\n                      <co-transaction-header-payment-condition\n                              [transactionInfo]=\"transactionInfo\"></co-transaction-header-payment-condition>\n                  </div>\n              </div>\n              <div class=\"section-wrapper\">\n                  <div class=\"section-header\" [textContent]=\"'ORDER_PARAMETERS' | localize | prepend:'02 '\"></div>\n                  <div class=\"section-sub-title\" [textContent]=\"'ON_HOLD_CODES' | localize\"></div>\n                  <co-transaction-header-hold-codes [transactionInfo]=\"transaction.transactionInfo\"></co-transaction-header-hold-codes>\n                  <div class=\"section-sub-title\" [textContent]=\"'MARKETING_CODE' | localize\"></div>\n                  <co-transaction-header-marketing [transactionInfo]=\"transaction.transactionInfo\"></co-transaction-header-marketing>\n              </div>\n          </div>\n      </co-dialog>\n-->\n      <co-dialog-transaction-header-discount class=\"discount-dialog\" *ngIf=\"showDialogDiscount\"\n                                             [screenConfigurationObject]=\"cfgNames.DiscountPriceInformationHeader\"\n                                             [transactionInfo]=\"transactionInfo\"\n                                             [transactionTotal]=\"transactionTotal\"\n                                             (close)=\"showDialogDiscount = false\">\n      </co-dialog-transaction-header-discount>\n  ",
                     providers: [{
                             provide: corecomponents_v12.SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return TransactionHeaderOrderComponent; })
@@ -41791,7 +41894,7 @@
     TransactionHeaderPaymentComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-header-payment",
-                    template: "\n    <div class=\"transaction-header-payment-wrapper\">\n      <div class=\"transaction-header-payment-wrapper-content\" [class.show-remaining]=\"showRemainingPayment\">\n        <co-transaction-header-block\n          [firstBlockTemplate]=\"firstBlock\"\n          [secondBlockTemplate]=\"secondBlock\"\n          [thirdBlockTemplate]=\"thirdBlock\"\n          [hiddenBlockTemplate]=\"hiddenBlock\"\n          (headerClick)=\"showDialog = true\"\n        >\n        </co-transaction-header-block>\n        <co-transaction-header-block *ngIf=\"showRemainingPayment\"\n          [firstBlockTemplate]=\"firstBlockRest\"\n          (headerClick)=\"showDialog = true\"\n        >\n        </co-transaction-header-block>\n      </div>\n    </div>\n    <ng-template #firstBlock>\n      <div class=\"transaction-header-block-row\" (click)=\"showDialog = true\">\n        <div class=\"header-downpayment-amount-wrapper\" [screenConfigurationObject]=\"cfgNames.HeaderPaymentAmountHeader\" screenConfigNativeElement>\n          <div class=\"header-deposit-label co-transaction-label\" [textContent]=\"'DOWNPAYMENT_AMOUNT' | localize\"></div>\n          <co-transaction-header-deposit-amount class=\"transaction-header-deposit\"\n                                                [screenConfigurationObject]=\"cfgNames.HeaderPaymentAmountHeader\"\n                                                [transaction]=\"transaction\"\n                                                [defaultEditMode]=\"false\"\n                                                [showLabel]=\"false\"\n          ></co-transaction-header-deposit-amount>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #firstBlockRest>\n      <div class=\"transaction-header-block-row\" (click)=\"showDialog = true\">\n        <div class=\"transaction-header-icon\" [screenConfigurationObject]=\"cfgNames.HeaderPaymentAvatarHeader\" screenConfigNativeElement>\n          <co-icon class=\"header-order-icon\"\n                   (click)=\"showPaymentDialog = true\"\n                   [iconData]=\"iconCacheService.getIcon(icons.CreditCardRegularCheck)\">\n          </co-icon>\n        </div>\n        <div class=\"header-remaining-payment-amount-wrapper\" [screenConfigurationObject]=\"cfgNames.HeaderPaymentAmountHeader\" screenConfigNativeElement>\n          <div class=\"header-deposit-label co-transaction-label\" [textContent]=\"'REMAINING_PAYMENT' | localize\"></div>\n          <co-transaction-header-remaining-amount class=\"transaction-header-remaining\"\n                                                  [screenConfigurationObject]=\"cfgNames.HeaderPaymentAmountHeader\"\n                                                  [transactionUuid]=\"transaction.transactionInfo.uuid\"\n                                                  (remainingAmountChange)=\"remainingToPay = $event\"\n          ></co-transaction-header-remaining-amount>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #secondBlock>\n      <div class=\"transaction-header-block-row\">\n        <div class=\"header-downpayment-percentage-wrapper\" [screenConfigurationObject]=\"cfgNames.HeaderPaymentPercentageHeader\" screenConfigNativeElement>\n          <div class=\"header-deposit-label co-transaction-label\" [textContent]=\"'%' | localize\"></div>\n          <co-transaction-header-deposit-percentage class=\"transaction-header-deposit\"\n                                                    [screenConfigurationObject]=\"cfgNames.HeaderPaymentPercentageHeader\"\n                                                    [transactionInfo]=\"transactionInfo\"\n                                                    [defaultEditMode]=\"false\"\n                                                    [showLabel]=\"false\"\n          ></co-transaction-header-deposit-percentage>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #thirdBlock>\n      <div class=\"transaction-header-block-row\">\n        <div class=\"payment-payed-wrapper\">\n          <div class=\"header-payed-label co-transaction-label\" [textContent]=\"'DOWNPAYMENT_DONE' | localize\"></div>\n          <span class=\"payment-paid\" [class.success]=\"paid >= toPay\" [textContent]=\"(paid | coCurrency) || 0\"></span>\n        </div>\n        <div class=\"header-payment-button-wrapper\" (click)=\"openPayment($event)\" [screenConfigurationObject]=\"cfgNames.HeaderPaymentPaymentHeader\" screenConfigNativeElement>\n            <co-icon class=\"header-order-icon\" [iconData]=\"iconCacheService.getIcon(icons.CreditCardRegularCheck)\">\n            </co-icon>\n\n          <!--co-transaction-header-payment-button *ngIf=\"transactionInfo.transactionKind !== transKind.PurchaseOrder\"\n                                                [transactionInfo]=\"transactionInfo\"\n          ></co-transaction-header-payment-button-->\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #hiddenBlock>\n      <!--div class=\"transaction-header-block-row\">\n        <div class=\"header-branch-label co-transaction-label\" [textContent]=\"'BRANCH' | localize\"></div>\n        <div class=\"branch-label\" [textContent]=\"transactionInfo.branch?.familyName\"></div>\n      </div-->\n    </ng-template>\n    <co-transaction-header-popup *ngIf=\"showDialog\"\n                                 [activeCategoryDescription]=\"'PAYMENT_INFORMATION'\"\n                                 [relation]=\"relation\"\n                                 [transaction]=\"transaction\"\n                                 (closeClick)=\"showDialog = false\"></co-transaction-header-popup>\n<!--\n    <co-dialog class=\"transaction-header-payment-dialog\" [headerTemplate]=\"headerTemplate\" *ngIf=\"showDialog\" (closeClick)=\"showDialog = false\">\n      <ng-template #headerTemplate>\n        <div class=\"co-dialog-header-title\" [textContent]=\"'PAYMENT_INFORMATION' | localize\"></div>\n        <co-transaction-header-block\n          [headerBlockTemplate]=\"headerBlock\"\n          [firstBlockTemplate]=\"firstBlock\"\n          [secondBlockTemplate]=\"secondBlock\"\n        >\n        </co-transaction-header-block>\n      </ng-template>\n      <div class=\"payment-dialog-section\">\n        <co-deposit-payment [branch]=\"transactionInfo.branch?.relationNr\" [transactionUuid]=\"transactionInfo.uuid\"></co-deposit-payment>\n      </div>\n    </co-dialog>\n-->\n    <co-dialog class=\"payment-dialog\" [modal]=\"true\" [headerTemplate]=\"headerTemplate\" *ngIf=\"showPaymentDialog\" (closeClick)=\"showPaymentDialog = false\">\n      <ng-template #headerTemplate>\n        <div class=\"co-dialog-wrapper-popup-title\">\n          <co-icon [iconData]=\"iconCacheService.getIcon(icons.CreditCardRegularCheck)\"></co-icon>\n          <div class=\"co-dialog-header-title\" [textContent]=\"'PAYMENT_METHOD' | localize\"></div>\n        </div>\n      </ng-template>\n      <co-payment\n        [transId]=\"transactionInfo.id\"\n        [branch]=\"transactionInfo.branch?.relationNr\"\n        [transactionUuid]=\"transactionInfo.uuid\"\n        [amount]=\"showRemainingPayment ? remainingToPay : toPay\"\n        [remainingPayment]=\"showRemainingPayment\"\n        [currencyId]=\"transactionInfo.currencyId\"\n        [doNotFetchAmountToPayForRemaining]=\"true\"\n      ></co-payment>\n    </co-dialog>\n  ",
+                    template: "\n    <div class=\"transaction-header-payment-wrapper\">\n      <div class=\"transaction-header-payment-wrapper-content\" [class.show-remaining]=\"showRemainingPayment\">\n        <co-transaction-header-block\n          [firstBlockTemplate]=\"firstBlock\"\n          [secondBlockTemplate]=\"secondBlock\"\n          [thirdBlockTemplate]=\"thirdBlock\"\n          [hiddenBlockTemplate]=\"hiddenBlock\"\n          (headerClick)=\"showDialog = true\"\n        >\n        </co-transaction-header-block>\n        <co-transaction-header-block *ngIf=\"showRemainingPayment\"\n          [firstBlockTemplate]=\"firstBlockRest\"\n          (headerClick)=\"showDialog = true\"\n        >\n        </co-transaction-header-block>\n      </div>\n    </div>\n    <ng-template #firstBlock>\n      <div class=\"transaction-header-block-row\" (click)=\"showDialog = true\">\n        <div class=\"header-downpayment-amount-wrapper\" [screenConfigurationObject]=\"cfgNames.HeaderPaymentAmountHeader\" screenConfigNativeElement>\n          <div class=\"header-deposit-label co-transaction-label\" [textContent]=\"'DOWNPAYMENT_AMOUNT' | localize\"></div>\n          <co-transaction-header-deposit-amount class=\"transaction-header-deposit\"\n                                                [screenConfigurationObject]=\"cfgNames.HeaderPaymentAmountHeader\"\n                                                [transaction]=\"transaction\"\n                                                [defaultEditMode]=\"false\"\n                                                [showLabel]=\"false\"\n          ></co-transaction-header-deposit-amount>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #firstBlockRest>\n      <div class=\"transaction-header-block-row\" (click)=\"showDialog = true\">\n        <div class=\"transaction-header-icon\" [screenConfigurationObject]=\"cfgNames.HeaderPaymentAvatarHeader\" screenConfigNativeElement>\n          <co-icon class=\"header-order-icon\"\n                   (click)=\"showPaymentDialog = true\"\n                   [iconData]=\"iconCacheService.getIcon(icons.CreditCardRegularCheck)\">\n          </co-icon>\n        </div>\n        <div class=\"header-remaining-payment-amount-wrapper\" [screenConfigurationObject]=\"cfgNames.HeaderPaymentAmountHeader\" screenConfigNativeElement>\n          <div class=\"header-deposit-label co-transaction-label\" [textContent]=\"'REMAINING_PAYMENT' | localize\"></div>\n          <co-transaction-header-remaining-amount class=\"transaction-header-remaining\"\n                                                  [screenConfigurationObject]=\"cfgNames.HeaderPaymentAmountHeader\"\n                                                  [transactionUuid]=\"transaction.transactionInfo.uuid\"\n                                                  (remainingAmountChange)=\"remainingToPay = $event\"\n          ></co-transaction-header-remaining-amount>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #secondBlock>\n      <div class=\"transaction-header-block-row\">\n        <div class=\"header-downpayment-percentage-wrapper\" [screenConfigurationObject]=\"cfgNames.HeaderPaymentPercentageHeader\" screenConfigNativeElement>\n          <div class=\"header-deposit-label co-transaction-label\" [textContent]=\"'%' | localize\"></div>\n          <co-transaction-header-deposit-percentage class=\"transaction-header-deposit\"\n                                                    [screenConfigurationObject]=\"cfgNames.HeaderPaymentPercentageHeader\"\n                                                    [transactionInfo]=\"transactionInfo\"\n                                                    [defaultEditMode]=\"false\"\n                                                    [showLabel]=\"false\"\n          ></co-transaction-header-deposit-percentage>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #thirdBlock>\n      <div class=\"transaction-header-block-row\">\n        <div class=\"payment-payed-wrapper\">\n          <div class=\"header-payed-label co-transaction-label\" [textContent]=\"'DOWNPAYMENT_DONE' | localize\"></div>\n          <span class=\"payment-paid\" [class.success]=\"paid >= toPay\" [textContent]=\"(paid | coCurrency) || 0\"></span>\n        </div>\n        <div class=\"header-payment-button-wrapper\" (click)=\"openPayment($event)\" [screenConfigurationObject]=\"cfgNames.HeaderPaymentPaymentHeader\" screenConfigNativeElement>\n            <co-icon class=\"header-order-icon\" [iconData]=\"iconCacheService.getIcon(icons.LightCreditCardCheck)\">\n            </co-icon>\n\n          <!--co-transaction-header-payment-button *ngIf=\"transactionInfo.transactionKind !== transKind.PurchaseOrder\"\n                                                [transactionInfo]=\"transactionInfo\"\n          ></co-transaction-header-payment-button-->\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #hiddenBlock>\n      <!--div class=\"transaction-header-block-row\">\n        <div class=\"header-branch-label co-transaction-label\" [textContent]=\"'BRANCH' | localize\"></div>\n        <div class=\"branch-label\" [textContent]=\"transactionInfo.branch?.familyName\"></div>\n      </div-->\n    </ng-template>\n    <co-transaction-header-popup *ngIf=\"showDialog\"\n                                 [activeCategoryDescription]=\"'PAYMENT_INFORMATION'\"\n                                 [relation]=\"relation\"\n                                 [transaction]=\"transaction\"\n                                 (closeClick)=\"showDialog = false\"></co-transaction-header-popup>\n<!--\n    <co-dialog class=\"transaction-header-payment-dialog\" [headerTemplate]=\"headerTemplate\" *ngIf=\"showDialog\" (closeClick)=\"showDialog = false\">\n      <ng-template #headerTemplate>\n        <div class=\"co-dialog-header-title\" [textContent]=\"'PAYMENT_INFORMATION' | localize\"></div>\n        <co-transaction-header-block\n          [headerBlockTemplate]=\"headerBlock\"\n          [firstBlockTemplate]=\"firstBlock\"\n          [secondBlockTemplate]=\"secondBlock\"\n        >\n        </co-transaction-header-block>\n      </ng-template>\n      <div class=\"payment-dialog-section\">\n        <co-deposit-payment [branch]=\"transactionInfo.branch?.relationNr\" [transactionUuid]=\"transactionInfo.uuid\"></co-deposit-payment>\n      </div>\n    </co-dialog>\n-->\n    <co-dialog class=\"payment-dialog\" [modal]=\"true\" [headerTemplate]=\"headerTemplate\" *ngIf=\"showPaymentDialog\" (closeClick)=\"showPaymentDialog = false\">\n      <ng-template #headerTemplate>\n        <div class=\"co-dialog-wrapper-popup-title\">\n          <co-icon [iconData]=\"iconCacheService.getIcon(icons.CreditCardRegularCheck)\"></co-icon>\n          <div class=\"co-dialog-header-title\" [textContent]=\"'PAYMENT_METHOD' | localize\"></div>\n        </div>\n      </ng-template>\n      <co-payment\n        [transId]=\"transactionInfo.id\"\n        [branch]=\"transactionInfo.branch?.relationNr\"\n        [transactionUuid]=\"transactionInfo.uuid\"\n        [amount]=\"showRemainingPayment ? remainingToPay : toPay\"\n        [remainingPayment]=\"showRemainingPayment\"\n        [currencyId]=\"transactionInfo.currencyId\"\n        [doNotFetchAmountToPayForRemaining]=\"true\"\n      ></co-payment>\n    </co-dialog>\n  ",
                     providers: [
                         { provide: corecomponents_v12.SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return TransactionHeaderPaymentComponent; }) }
                     ],
@@ -51819,7 +51922,7 @@
     TransactionServiceOverviewComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-service-overview",
-                    template: "\n    <div class=\"service-overview-wrapper\">\n      <div class=\"message-and-task-wrapper\">\n        <div class=\"service-message-and-image-wrapper\">\n          <div class=\"service-message-wrapper\">\n            <label class=\"label service-label\" [textContent]=\"'SERVICE_REPORT'| localize\"></label>\n            <co-transaction-service-message  class=\"transaction-service-message\" [transaction]=\"transaction\">\n            </co-transaction-service-message>\n            <co-input-textarea *ngIf=\"transactionServiceInfo && transactionServiceInfo.wizardQuestionsAndAnswers\" [readonly]=\"true\"\n                               [model]=\"transactionServiceInfo.wizardQuestionsAndAnswers\"></co-input-textarea>\n          </div>\n          <co-files-upload (documentChangeEvent)=\"upsertDocument($event)\"\n                           (documentDeleted)=\"deleteDocument($event)\"\n                           [label]=\"'ADD_IMAGES' | localize\"\n                           [documents]=\"documents\"\n                           [isEditable]=\"false\">\n          </co-files-upload>\n          <div class=\"service-order-lines-wrapper\">\n            <div class=\"service-message-extra-wrapper\">\n              <co-list-of-values [label]=\"'PRIORITY'| localize\" displayField=\"description\" [model]=\"priorityModel\"\n                                 [collection]=\"priorityDomainColl\"\n                                 (modelChange)=\"setPriority($event)\"></co-list-of-values>\n              <co-list-of-values [label]=\"'CAUSE_CODE' | localize\" displayField=\"description\" [model]=\"causeCodeModel\"\n                                 [collection]=\"causeCodeColl\"\n                                 (modelChange)=\"setCauseCode($event)\"></co-list-of-values>\n              <co-list-of-values [label]=\"'ENTRY_TYPE' | localize\" displayField=\"description\" [model]=\"entryTypeModel\"\n                                 [collection]=\"entryTypeColl\"\n                                 (modelChange)=\"setEntryType($event)\"></co-list-of-values>\n            </div>\n            <co-transaction-lines-side-panel\n              class=\"higher-max-width\"\n              [posOrderData]=\"posOrderData\"\n              [transaction]=\"transaction\">\n            </co-transaction-lines-side-panel>\n          </div>\n\n        </div>\n        <div class=\"activity-list-component-wrapper\">\n          <div class=\"activity-task-creator-wrapper\">\n            <co-component-activity-list #openActivities [showActivityHeader]=\"showActivityHeader\" [table]=\"TableName.Transactions\" [key]=\"transactionInfo.id.toString()\" (refreshRequested)=\"finishedActivitiesRefreshRequested()\">\n            </co-component-activity-list>\n            <co-task-creator [table]=\"TableName.Transactions\" [remarkAndWorkKey]=\"transactionInfo.id.toString()\" [taskKey]=\"transactionInfo.transactionNr.toString()\"\n                             [author]=\"transactionService.loggedInUser\" [branchNo]=\"transactionInfo.branch.relationNr.toString()\"\n                             [workflowCategoryType]=\"WorkflowCategoryType.ServiceOrder\"\n                             (activityCreated)=\"fullActivitiesRefreshRequested()\"></co-task-creator>\n          </div>\n          <div class=\"activity-list-conv-wrapper\">\n            <label class=\"label history-label\" [textContent]=\"'HISTORIC_ACTIVITY_CHAT'| localize\"></label>\n            <co-activity-list [activities]=\"activities\"></co-activity-list>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  ",
+                    template: "\n    <div class=\"service-overview-wrapper\">\n      <div class=\"message-and-task-wrapper\">\n        <div class=\"service-message-and-image-wrapper\">\n          <div class=\"service-message-wrapper\">\n            <label class=\"label service-label\" [textContent]=\"'SERVICE_REPORT'| localize\"></label>\n            <span *ngIf=\"transactionServiceInfo && transactionServiceInfo.wizardQuestionsAndAnswers\"\n                               [textContent]=\"transactionServiceInfo.wizardQuestionsAndAnswers\"></span>\n            <co-transaction-service-message  class=\"transaction-service-message\" [transaction]=\"transaction\">\n            </co-transaction-service-message>\n          </div>\n          <co-files-upload (documentChangeEvent)=\"upsertDocument($event)\"\n                           (documentDeleted)=\"deleteDocument($event)\"\n                           [label]=\"'ADD_IMAGES' | localize\"\n                           [documents]=\"documents\"\n                           [isEditable]=\"false\">\n          </co-files-upload>\n          <div class=\"service-order-lines-wrapper\">\n            <div class=\"service-message-extra-wrapper\">\n              <co-list-of-values [label]=\"'PRIORITY'| localize\" displayField=\"description\" [model]=\"priorityModel\"\n                                 [collection]=\"priorityDomainColl\"\n                                 (modelChange)=\"setPriority($event)\"></co-list-of-values>\n              <co-list-of-values [label]=\"'CAUSE_CODE' | localize\" displayField=\"description\" [model]=\"causeCodeModel\"\n                                 [collection]=\"causeCodeColl\"\n                                 (modelChange)=\"setCauseCode($event)\"></co-list-of-values>\n              <co-list-of-values [label]=\"'ENTRY_TYPE' | localize\" displayField=\"description\" [model]=\"entryTypeModel\"\n                                 [collection]=\"entryTypeColl\"\n                                 (modelChange)=\"setEntryType($event)\"></co-list-of-values>\n            </div>\n            <co-transaction-lines-side-panel\n              class=\"higher-max-width\"\n              [posOrderData]=\"posOrderData\"\n              [transaction]=\"transaction\">\n            </co-transaction-lines-side-panel>\n          </div>\n\n        </div>\n        <div class=\"activity-list-component-wrapper\">\n          <div class=\"activity-task-creator-wrapper\">\n            <co-component-activity-list #openActivities [showActivityHeader]=\"showActivityHeader\" [table]=\"TableName.Transactions\" [key]=\"transactionInfo.id.toString()\" (refreshRequested)=\"finishedActivitiesRefreshRequested()\">\n            </co-component-activity-list>\n            <co-task-creator [table]=\"TableName.Transactions\" [remarkAndWorkKey]=\"transactionInfo.id.toString()\" [taskKey]=\"transactionInfo.transactionNr.toString()\"\n                             [author]=\"transactionService.loggedInUser\" [branchNo]=\"transactionInfo.branch.relationNr.toString()\"\n                             [workflowCategoryType]=\"WorkflowCategoryType.ServiceOrder\"\n                             (activityCreated)=\"fullActivitiesRefreshRequested()\"></co-task-creator>\n          </div>\n          <div class=\"activity-list-conv-wrapper\">\n            <label class=\"label history-label\" [textContent]=\"'HISTORIC_ACTIVITY_CHAT'| localize\"></label>\n            <co-activity-list [activities]=\"activities\"></co-activity-list>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -51885,7 +51988,7 @@
     TransactionServiceMessageComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-service-message",
-                    template: "\n    <co-input-textarea #input\n                   [model]=\"transactionServiceInfo.reportMessage\"\n\n                   [readonly]=\"readonly\"\n                   [showSaveCancel]=\"true\"\n    ></co-input-textarea>\n  ",
+                    template: "\n    <co-input-textarea #input\n                   [model]=\"transactionServiceInfo.reportMessage\"\n                   [readonly]=\"readonly\"\n                   [showSaveCancel]=\"true\"\n    ></co-input-textarea>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -53216,18 +53319,22 @@
     ];
 
     var TransactionComponent = /** @class */ (function () {
-        function TransactionComponent(service, _transactionConnectorService, _screenConfigurationService, _changeDetector, _purchaseConfirmationService) {
+        function TransactionComponent(service, _transactionConnectorService, _screenConfigurationService, _changeDetector, _purchaseConfirmationService, _dictionaryService, _dialogService) {
             this.service = service;
             this._transactionConnectorService = _transactionConnectorService;
             this._screenConfigurationService = _screenConfigurationService;
             this._changeDetector = _changeDetector;
             this._purchaseConfirmationService = _purchaseConfirmationService;
+            this._dictionaryService = _dictionaryService;
+            this._dialogService = _dialogService;
             this.cfgNames = exports.TransactionCfgName;
             this.relation = new customerFullObject_bo.CustomerFullObject();
             this.showHeader = true;
             this.showViewModeButtons = true;
             this.showQuickAccess = true;
             this.showButtonBar = true;
+            this.showSaveCancelLabels = false;
+            this.saveCancelMovable = false;
             this.screenConfigLoaded = false;
         }
         Object.defineProperty(TransactionComponent.prototype, "confirmationAnalysisId", {
@@ -53270,13 +53377,21 @@
         TransactionComponent.prototype.showClass = function () {
             return true;
         };
+        TransactionComponent.prototype.checkTransaction = function () {
+            return this._checkTransactionDirty();
+        };
+        TransactionComponent.prototype.checkRollBack = function () {
+            if (this.service.transactionDirty && this.service.manualSaveParam) {
+                this.service.rollbackBeacon();
+            }
+        };
         TransactionComponent.prototype.ngOnChanges = function (changes) {
             if (changes && changes.hasOwnProperty('confirmationAnalysisId')) {
                 this._changeDetector.markForCheck();
             }
         };
-        TransactionComponent.prototype.addExternalOrderLines = function (request) {
-            this.service.addExternalCatalogArticle(request);
+        TransactionComponent.prototype._checkTransactionDirty = function () {
+            return !(this.service.transactionDirty && this.service.manualSaveParam);
         };
         TransactionComponent.prototype._getTransaction = function () {
             var _this = this;
@@ -53317,7 +53432,7 @@
     TransactionComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-transaction',
-                    template: "\n        <co-transaction-internal *ngIf=\"screenConfigLoaded\"\n                                 [(relation)]=\"relation\"\n                                 [showHeader]=\"showHeader\"\n                                 [showQuickAccess]=\"showQuickAccess\"\n                                 [showButtonBar]=\"showButtonBar\"\n                                 [showViewModeButtons]=\"showViewModeButtons\"\n                                 [confirmationAnalysisId]=\"confirmationAnalysisId\"\n                                 [posOrderData]=\"posOrderData\"\n        ></co-transaction-internal>\n    ",
+                    template: "\n        <co-save-cancel-buttons *ngIf=\"service.manualSaveParam\"\n                                [saveIconData]=\"saveIconData\"\n                                [cancelIconData]=\"cancelIconData\"\n                                [showLabels]=\"showSaveCancelLabels\"\n                                [movable]=\"saveCancelMovable\"\n        ></co-save-cancel-buttons>\n        <co-transaction-internal *ngIf=\"screenConfigLoaded\"\n                                 [(relation)]=\"relation\"\n                                 [showHeader]=\"showHeader\"\n                                 [showQuickAccess]=\"showQuickAccess\"\n                                 [showButtonBar]=\"showButtonBar\"\n                                 [showViewModeButtons]=\"showViewModeButtons\"\n                                 [confirmationAnalysisId]=\"confirmationAnalysisId\"\n                                 [posOrderData]=\"posOrderData\"\n        ></co-transaction-internal>\n    ",
                     providers: [
                         { provide: corecomponents_v12.BaseModuleScreenConfigService, useExisting: TransactionScreenConfigurationService }
                     ],
@@ -53329,7 +53444,9 @@
         { type: TransactionConnectorService },
         { type: TransactionScreenConfigurationService },
         { type: i0.ChangeDetectorRef },
-        { type: PurchaseConfirmationService }
+        { type: PurchaseConfirmationService },
+        { type: DictionaryService },
+        { type: DialogService }
     ]; };
     TransactionComponent.propDecorators = {
         relation: [{ type: i0.Input }],
@@ -53341,7 +53458,13 @@
         showViewModeButtons: [{ type: i0.Input }],
         showQuickAccess: [{ type: i0.Input }],
         showButtonBar: [{ type: i0.Input }],
-        showClass: [{ type: i0.HostBinding, args: ['class.co-transaction',] }]
+        saveIconData: [{ type: i0.Input }],
+        cancelIconData: [{ type: i0.Input }],
+        showSaveCancelLabels: [{ type: i0.Input }],
+        saveCancelMovable: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-transaction',] }],
+        checkTransaction: [{ type: i0.HostListener, args: ['window:beforeunload',] }],
+        checkRollBack: [{ type: i0.HostListener, args: ['window:unload',] }]
     };
 
     /**
@@ -53774,6 +53897,99 @@
                 },] }
     ];
 
+    var SaveCancelButtonsComponent = /** @class */ (function () {
+        function SaveCancelButtonsComponent(iconCacheService, _transactionEventService) {
+            var _this = this;
+            this.iconCacheService = iconCacheService;
+            this._transactionEventService = _transactionEventService;
+            this.icons = Icon;
+            this.showLabels = true;
+            this.movable = false;
+            this.show = false;
+            this._mouseDown = false;
+            // @HostBinding('style.top.px')
+            this._top = 0;
+            // @HostBinding('style.left.px')
+            this._left = 0;
+            this._subs = [];
+            this._subs.push(this._transactionEventService.transactionDirty.subscribe(function (dirty) { return _this.show = dirty; }));
+        }
+        SaveCancelButtonsComponent.prototype.showClass = function () {
+            return true;
+        };
+        SaveCancelButtonsComponent.prototype.ngOnDestroy = function () {
+            this._subs.forEach(function (s) { return s.unsubscribe(); });
+            this.saveCancelButtonsWrapper = undefined;
+        };
+        SaveCancelButtonsComponent.prototype.handleMouseDown = function (event) {
+            this._mouseDown = this.movable;
+            // if (this.saveCancelButtonsWrapper && this.saveCancelButtonsWrapper.nativeElement && this._mouseDown) {
+            //   const rect = this.saveCancelButtonsWrapper.nativeElement.getBoundingClientRect();
+            //   this._top = rect.top;
+            //   this._left = rect.left;
+            // }
+        };
+        SaveCancelButtonsComponent.prototype.handleMouseUp = function (event) {
+            this._mouseDown = false;
+        };
+        SaveCancelButtonsComponent.prototype.handleMouseMove = function (event) {
+            if (this._mouseDown) {
+                // this._top = this._top + event.movementY;
+                // this._left = this._left + event.movementX;
+            }
+        };
+        SaveCancelButtonsComponent.prototype.handleSaveClick = function (event) {
+            event.preventDefault();
+            this._transactionEventService.saveTransactionClick.next();
+        };
+        SaveCancelButtonsComponent.prototype.handleCancelClick = function (event) {
+            event.preventDefault();
+            this._transactionEventService.cancelTransactionClick.next();
+        };
+        return SaveCancelButtonsComponent;
+    }());
+    SaveCancelButtonsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'co-save-cancel-buttons',
+                    template: "\n      <ng-container *ngIf=\"show\">\n        <div class=\"save-cancel-buttons-wrapper\" #saveCancelButtonsWrapper\n             [class.movable]=\"movable\"\n             (mousedown)=\"handleMouseDown($event)\"\n             (mouseup)=\"handleMouseUp($event)\"\n             (mousemove)=\"handleMouseMove($event)\">\n            <ng-container *ngIf=\"showLabels\">\n                <co-button class=\"save-button\" [label]=\"'SAVE' | localize\" [title]=\"'SAVE' | localize\"\n                           [iconData]=\"saveIconData || iconCacheService.getIcon(icons.CheckThin)\"\n                            (onClick)=\"handleSaveClick($event)\"></co-button>\n                <co-button class=\"cancel-button\" [label]=\"'CANCEL' | localize\" [title]=\"'CANCEL' | localize\"\n                           [iconData]=\"cancelIconData || iconCacheService.getIcon(icons.Crossskinny)\"\n                            (onClick)=\"handleCancelClick($event)\"></co-button>\n            </ng-container>\n            <ng-container *ngIf=\"!showLabels\">\n                <div class=\"icon-wrapper save-icon\">\n                  <co-icon [title]=\"'SAVE' | localize\"\n                           [iconData]=\"saveIconData || iconCacheService.getIcon(icons.CheckThin)\"\n                              (click)=\"handleSaveClick($event)\"></co-icon>\n                </div>\n                <div class=\"icon-wrapper cancel-icon\">\n                  <co-icon [title]=\"'CANCEL' | localize\"\n                           [iconData]=\"cancelIconData || iconCacheService.getIcon(icons.Crossskinny)\"\n                              (click)=\"handleCancelClick($event)\"></co-icon>\n                </div>\n            </ng-container>\n        </div>\n      </ng-container>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    SaveCancelButtonsComponent.ctorParameters = function () { return [
+        { type: IconCacheService },
+        { type: TransactionEventService }
+    ]; };
+    SaveCancelButtonsComponent.propDecorators = {
+        saveCancelButtonsWrapper: [{ type: i0.ViewChild, args: ['saveCancelButtonsWrapper', { read: i0.ElementRef },] }],
+        saveIconData: [{ type: i0.Input }],
+        cancelIconData: [{ type: i0.Input }],
+        showLabels: [{ type: i0.Input }],
+        movable: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-save-cancel-buttons',] }]
+    };
+
+    var SaveCancelButtonsModule = /** @class */ (function () {
+        function SaveCancelButtonsModule() {
+        }
+        return SaveCancelButtonsModule;
+    }());
+    SaveCancelButtonsModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        corecomponents_v12.ButtonModule,
+                        PipeModule,
+                        corecomponents_v12.IconModule
+                    ],
+                    declarations: [
+                        SaveCancelButtonsComponent
+                    ],
+                    exports: [
+                        SaveCancelButtonsComponent
+                    ]
+                },] }
+    ];
+
     var TransactionModule = /** @class */ (function () {
         function TransactionModule() {
         }
@@ -53786,7 +54002,8 @@
                         CoreModule,
                         TransactionInternalModule,
                         TransactionGridModule,
-                        TransactionCashRegisterOrderReceiptDialogModule
+                        TransactionCashRegisterOrderReceiptDialogModule,
+                        SaveCancelButtonsModule
                     ],
                     declarations: [
                         TransactionComponent
@@ -56282,14 +56499,16 @@
     exports["ɵyf"] = TransactionGridComponent;
     exports["ɵyg"] = TransactionCashRegisterOrderReceiptDialogModule;
     exports["ɵyh"] = TransactionCashRegisterOrderReceiptDialogComponent;
-    exports["ɵyi"] = TransactionTagComponent;
-    exports["ɵyj"] = CheckoutSimpleModule;
-    exports["ɵyk"] = CheckoutSimpleComponent;
-    exports["ɵyl"] = CheckoutSimpleOverviewRelationEditComponent;
-    exports["ɵym"] = CheckoutSimpleOverviewDeliveryEditComponent;
-    exports["ɵyn"] = CheckoutSimpleOverviewPaymentComponent;
-    exports["ɵyo"] = SimpleVerticalStepperModule;
-    exports["ɵyp"] = SimpleVerticalStepperComponent;
+    exports["ɵyi"] = SaveCancelButtonsModule;
+    exports["ɵyj"] = SaveCancelButtonsComponent;
+    exports["ɵyk"] = TransactionTagComponent;
+    exports["ɵyl"] = CheckoutSimpleModule;
+    exports["ɵym"] = CheckoutSimpleComponent;
+    exports["ɵyn"] = CheckoutSimpleOverviewRelationEditComponent;
+    exports["ɵyo"] = CheckoutSimpleOverviewDeliveryEditComponent;
+    exports["ɵyp"] = CheckoutSimpleOverviewPaymentComponent;
+    exports["ɵyq"] = SimpleVerticalStepperModule;
+    exports["ɵyr"] = SimpleVerticalStepperComponent;
     exports["ɵz"] = CharacteristicAnswerComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });