@colijnit/transaction 256.1.8 → 256.1.9

package/bundles/colijnit-transaction.umd.js

@@ -33,8 +33,8 @@
         function Version() {
             this.name = "@colijnit/transaction";
             this.description = "Colijn IT transaction package";
-            this.symVer = "256.1.8";
-            this.publishDate = "1-11-2024 08:49:24";
+            this.symVer = "256.1.9";
+            this.publishDate = "6-11-2024 14:22:44";
         }
         return Version;
     }());
@@ -2642,6 +2642,9 @@
                         case 1:
                             result = _a.sent();
                             if (result.validationResult && result.validationResult.success) {
+                                if (result.resultObject && result.resultObject.fileType === 'UNITYWEB') {
+                                    return [2 /*return*/, ""];
+                                }
                                 if (result.resultObject && result.resultObject.filePath !== null && result.resultObject.filePath !== undefined && result.resultObject.filePath !== "") {
                                     return [2 /*return*/, imageUtils.ImageUtils.getFixedImageFilepathUrl(result.resultObject.filePath)];
                                 }
@@ -9552,63 +9555,71 @@
         };
         TransactionConnectorService.prototype.getCommissionCodes = function (languageCode) {
             return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
                 return __generator(this, function (_a) {
-                    //const domainName: DomainName = DomainName.CommissionCode;
-                    //return this._selectMultipleParameterizedCacheService.requestCache<CoDomainValue>(CoDomainValue, (languageCode: string, domainName: DomainName) => {
-                    return [2 /*return*/, this._adapterService.getCommissionCodes(languageCode)];
+                    return [2 /*return*/, this._selectMultipleParameterizedCacheService.requestCache(domainName_enum.DomainName.CommissionCode, function (languageCode, domainName) {
+                            return _this._adapterService.getCommissionCodes(languageCode);
+                        }).getValue(languageCode, domainName_enum.DomainName.CommissionCode)];
                 });
             });
         };
         TransactionConnectorService.prototype.getInOutCollection = function (languageCode) {
             return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
                 return __generator(this, function (_a) {
-                    //const domainName: DomainName = DomainName.InOutCollection;
-                    //return this._selectMultipleParameterizedCacheService.requestCache<CoDomainValue>(CoDomainValue, (languageCode: string, domainName: DomainName) => {
-                    return [2 /*return*/, this._adapterService.getInOutCollection(languageCode)];
+                    return [2 /*return*/, this._selectMultipleParameterizedCacheService.requestCache(domainName_enum.DomainName.InOutCollection, function (languageCode, domainName) {
+                            return _this._adapterService.getInOutCollection(languageCode);
+                        }).getValue(languageCode, domainName_enum.DomainName.InOutCollection)];
                 });
             });
         };
         TransactionConnectorService.prototype.getYesNoCollection = function (languageCode) {
             return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
                 return __generator(this, function (_a) {
-                    //const domainName: DomainName = DomainName.YesNo;
-                    //return this._selectMultipleParameterizedCacheService.requestCache<CoDomainValue>(CoDomainValue, (languageCode: string, domainName: DomainName) => {
-                    return [2 /*return*/, this._adapterService.getYesNoCollection(languageCode)];
+                    return [2 /*return*/, this._selectMultipleParameterizedCacheService.requestCache(domainName_enum.DomainName.YesNo, function (languageCode, domainName) {
+                            return _this._adapterService.getYesNoCollection(languageCode);
+                        }).getValue(languageCode, domainName_enum.DomainName.YesNo)];
                 });
             });
         };
         TransactionConnectorService.prototype.getPriceKindCollection = function (languageCode) {
             return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
                 return __generator(this, function (_a) {
-                    //const domainName: DomainName = DomainName.PriceKind;
-                    //return this._selectMultipleParameterizedCacheService.requestCache<CoDomainValue>(CoDomainValue, (languageCode: string, domainName: DomainName) => {
-                    return [2 /*return*/, this._adapterService.getPriceKindCollection(languageCode)];
+                    return [2 /*return*/, this._selectMultipleParameterizedCacheService.requestCache(domainName_enum.DomainName.PriceKind, function (languageCode, domainName) {
+                            return _this._adapterService.getPriceKindCollection(languageCode);
+                        }).getValue(languageCode, domainName_enum.DomainName.PriceKind)];
                 });
             });
         };
         TransactionConnectorService.prototype.getPriorityCollection = function (languageCode) {
             return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
                 return __generator(this, function (_a) {
-                    // const domainName: DomainName = DomainName.Priority;
-                    //return this._selectMultipleParameterizedCacheService.requestCache<CoDomainValue>(CoDomainValue, (languageCode: string, domainName: DomainName) => {
-                    return [2 /*return*/, this._adapterService.getPriorityCollection(languageCode)];
+                    return [2 /*return*/, this._selectMultipleParameterizedCacheService.requestCache(domainName_enum.DomainName.Priority, function (languageCode, domainName) {
+                            return _this._adapterService.getPriorityCollection(languageCode);
+                        }).getValue(languageCode, domainName_enum.DomainName.Priority)];
                 });
             });
         };
         TransactionConnectorService.prototype.getEntryTypes = function (languageCode) {
-            // const domainName: DomainName = DomainName.ServiceCommunicationType;
-            //return this._selectMultipleParameterizedCacheService.requestCache<CoDomainValue>(CoDomainValue, (languageCode: string, domainName: DomainName) => {
-            return this._adapterService.getEntryTypes(languageCode);
-            //}).getValue(languageCode, domainName);
+            var _this = this;
+            return this._selectMultipleParameterizedCacheService.requestCache(domainName_enum.DomainName.ServiceCommunicationType, function (languageCode, domainName) {
+                return _this._adapterService.getEntryTypes(languageCode);
+            }).getValue(languageCode, domainName_enum.DomainName.ServiceCommunicationType);
         };
         TransactionConnectorService.prototype.getDomainTypes = function (languageCode) {
-            // const domainName: DomainName = DomainName.TransType;
-            // return this._selectMultipleParameterizedCacheService.requestCache<CoDomainValue>(CoDomainValue, (languageCode: string, domainName: DomainName) => {
-            return this._adapterService.getDomainTypes(languageCode);
-            //}).getValue(languageCode, domainName);
+            var _this = this;
+            return this._selectMultipleParameterizedCacheService.requestCache(domainName_enum.DomainName.TransType, function (languageCode, domainName) {
+                return _this._adapterService.getDomainTypes(languageCode);
+            }).getValue(languageCode, domainName_enum.DomainName.TransType);
         };
         TransactionConnectorService.prototype.getCauseCodes = function () {
-            return this._adapterService.getCauseCodes();
+            var _this = this;
+            return this._selectMultipleCacheService.requestCache(causeCode_bo.CauseCode, function () {
+                return _this._adapterService.getCauseCodes();
+            }).getValue();
         };
         TransactionConnectorService.prototype.getTransactionArticleWarehouses = function (goodId) {
             return __awaiter(this, void 0, void 0, function () {
@@ -10361,21 +10372,21 @@
         };
         TransactionConnectorService.prototype.getOrderConfirmationDefaultSendMethod = function (relationId) {
             return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._adapterService.getOrderConfirmationDefaultSendMethod(relationId)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
+                    return [2 /*return*/, this._selectSinlgeParameterizedCacheService.requestCache(Number, function (relationId) {
+                            return _this._adapterService.getOrderConfirmationDefaultSendMethod(relationId);
+                        }).getValue(relationId)];
                 });
             });
         };
         TransactionConnectorService.prototype.getDefaultEmailAddressListForOrderConfirmation = function (transactionUUID) {
             return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._adapterService.getDefaultEmailAddressListForOrderConfirmation(transactionUUID)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
+                    return [2 /*return*/, this._selectMultipleParameterizedCacheService.requestCache(String, function (transactionUUID) {
+                            return _this._adapterService.getDefaultEmailAddressListForOrderConfirmation(transactionUUID);
+                        }).getValue(transactionUUID)];
                 });
             });
         };
@@ -11085,11 +11096,12 @@
         };
         TransactionConnectorService.prototype.getTransactionInfo = function (transId, lineNr) {
             return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._adapterService.getTransactionInfo(transId, lineNr)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
+                    return [2 /*return*/, this._selectMultipleParameterizedCacheService.requestCache(transactionInfoHistory_bo.TransactionInfoHistory, function (_a) {
+                            var _b = __read(_a, 2), transId = _b[0], lineNr = _b[1];
+                            return _this._adapterService.getTransactionInfo(transId, lineNr);
+                        }).getValue([transId, lineNr])];
                 });
             });
         };
@@ -11135,21 +11147,21 @@
         };
         TransactionConnectorService.prototype.getReportHeadersByTransIdAndLayoutCode = function (transId, documentCode) {
             return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._adapterService.getReportHeadersByTransIdAndLayoutCode(transId, documentCode)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
+                    return [2 /*return*/, this._selectMultipleParameterizedCacheService.requestCache(historicReport_bo.HistoricReport, function (transId, documentCode) {
+                            return _this._adapterService.getReportHeadersByTransIdAndLayoutCode(transId, documentCode);
+                        }).getValue(transId, documentCode)];
                 });
             });
         };
         TransactionConnectorService.prototype.getPackageStickerPrintLayouts = function () {
             return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._adapterService.getPackageStickerPrintLayouts()];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
+                    return [2 /*return*/, this._selectMultipleCacheService.requestCache(reportLayoutSelectionPrint_bo.ReportLayoutSelectionPrint, function () {
+                            return _this._adapterService.getPackageStickerPrintLayouts();
+                        }).getValue()];
                 });
             });
         };
@@ -12043,6 +12055,7 @@
             set: function (value) {
                 this._cfgName = value;
                 this.configSet();
+                this.detectChanges();
             },
             enumerable: false,
             configurable: true
@@ -12058,6 +12071,7 @@
                     this.headerReadonly = false;
                     this.tooltipMessage = undefined;
                 }
+                this.detectChanges();
             },
             enumerable: false,
             configurable: true
@@ -12067,6 +12081,7 @@
                 return this._transaction;
             },
             set: function (value) {
+                var shouldDetectChanges = this._transaction !== value;
                 this._transaction = value;
                 if (this._transaction) {
                     if (this._transaction.transactionInfo) {
@@ -12102,6 +12117,9 @@
                         this.transactionLines.filter(function (l) { return l.articleLineStatus ? l.articleLineStatus.quantityToInvoice !== 0 : false; }).length > 0 :
                         this.transactionLines.filter(function (l) { return l.articleLineStatus ? l.articleLineStatus.quantityToInvoice === 0 : false; }).length === 0;
                 }
+                if (shouldDetectChanges) {
+                    this.detectChanges();
+                }
             },
             enumerable: false,
             configurable: true
@@ -12111,6 +12129,7 @@
                 return this._transactionLine;
             },
             set: function (value) {
+                var shouldDetectChanges = this._transactionLine !== value;
                 if (value) {
                     this._transactionLine = value;
                     if (this._transactionLine.salesUnitDecimals) {
@@ -12148,6 +12167,9 @@
                     this.lineQuantityTransportNotification = this._transactionLine.articleLineStatus && this._transactionLine.articleLineStatus.hasOwnProperty('quantityTransportNotification') ? this._transactionLine.articleLineStatus.quantityTransportNotification : 0;
                     this.lineQuantityInvoiceControl = this._transactionLine.articleLineStatus && this._transactionLine.articleLineStatus.hasOwnProperty('quantityInvoiceControl') ? this._transactionLine.articleLineStatus.quantityInvoiceControl : 0;
                     this.transactionLineSet();
+                    if (shouldDetectChanges) {
+                        this.detectChanges();
+                    }
                 }
             },
             enumerable: false,
@@ -12166,6 +12188,7 @@
             //   return this._transactionMarginInfo;
             // }
             set: function (value) {
+                var shouldDetectChanges = this._transactionInfo !== value;
                 if (value) {
                     this.headerReadonly = false;
                     this.tooltipMessage = "";
@@ -12186,6 +12209,9 @@
                         this.orderLineSets = this._transactionInfo.orderLineSets;
                     }
                     this.transactionInfoSet();
+                    if (shouldDetectChanges) {
+                        this.detectChanges();
+                    }
                 }
             },
             enumerable: false,
@@ -12196,7 +12222,11 @@
                 return this._orderLineSets;
             },
             set: function (value) {
+                var shouldDetectChanges = this._orderLineSets !== value;
                 this._orderLineSets = value;
+                if (shouldDetectChanges) {
+                    this.detectChanges();
+                }
             },
             enumerable: false,
             configurable: true
@@ -12214,9 +12244,13 @@
                 return this._transactionServiceInfo ? this._transactionServiceInfo : new TransactionServiceInfo();
             }*/
             set: function (value) {
+                var shouldDetectChanges = this._transactionTotal !== value;
                 if (value) {
                     this._transactionTotal = value;
                     this.transactionTotalSet();
+                    if (shouldDetectChanges) {
+                        this.detectChanges();
+                    }
                 }
             },
             enumerable: false,
@@ -12227,11 +12261,15 @@
                 return this._relation;
             },
             set: function (value) {
+                var shouldDetectChanges = this._relation !== value;
                 if (value) {
                     this._relation = value;
                     this.relationKind = this._relation.relationType;
                     this.relationType = this._relation.type;
                     this.relationSet();
+                    if (shouldDetectChanges) {
+                        this.detectChanges();
+                    }
                 }
             },
             enumerable: false,
@@ -12246,6 +12284,7 @@
                 if (this.transactionLine) {
                     this.transactionLine.selected = this._selected;
                 }
+                this.detectChanges();
             },
             enumerable: false,
             configurable: true
@@ -12259,6 +12298,7 @@
         });
         TransactionBaseComponent.prototype.ngOnInit = function () {
             var _this = this;
+            this.changeDetector.markForCheck();
             this._baseSubs.push(this.transactionEventService.transactionLineVisibilityChange.subscribe(function (data) {
                 if (data && _this.transactionLine && data.line.lineNr === _this.transactionLine.lineNr) {
                     _this.visibilitySet(data.visible);
@@ -12300,6 +12340,7 @@
         };
         TransactionBaseComponent.prototype.visibilitySet = function (visible) {
             this.visible = visible;
+            this.detectChanges();
         };
         TransactionBaseComponent.prototype.configSet = function () {
         };
@@ -12448,6 +12489,7 @@
             }
             this.close.emit();
             this.onClose(type);
+            this.detectChanges();
         };
         return DialogTransactionBaseComponent;
     }(TransactionBaseComponent));
@@ -13081,9 +13123,10 @@
             // }).getValue();
         };
         TransactionRelationService.prototype.getSupplierLightById = function (supplierId) {
-            // return this._selectSingleCacheService.requestCache<SupplierFullObject>(SupplierFullObject, relationNo, () => {
-            return this._adapterService.getSupplierLightById(supplierId);
-            // }).getValue();
+            var _this = this;
+            return this._selectSingleCacheService.requestCache(supplierLightObject_bo.SupplierLightObject, supplierId, function () {
+                return _this._adapterService.getSupplierLightById(supplierId);
+            }).getValue();
         };
         TransactionRelationService.prototype.insertAddress = function (address) {
             return this._adapterService.insertAddress(address);
@@ -14509,31 +14552,19 @@
         };
         TransactionService.prototype.prepareJsPickingListInternalParam = 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.PickingList)];
-                        case 1:
-                            _a.internalParameterJsPickingList = _b.sent();
-                            return [2 /*return*/];
-                    }
+                var _this = this;
+                return __generator(this, function (_a) {
+                    this.getInternalParameter(internalParam_enum.InternalParam.PickingList).then(function (value) { return _this.internalParameterJsPickingList = value; });
+                    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*/];
-                    }
+                var _this = this;
+                return __generator(this, function (_a) {
+                    this.getInternalParameter(internalParam_enum.InternalParam.TransManualSave).then(function (value) { return _this.manualSaveParam = value; });
+                    return [2 /*return*/];
                 });
             });
         };
@@ -21064,12 +21095,16 @@
                 });
             });
         };
+        TransactionTotalsComponent.prototype.transactionTotalSet = function () {
+            this.detectChanges();
+        };
         return TransactionTotalsComponent;
     }(TransactionBaseComponent));
     TransactionTotalsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-totals",
                     template: "\n    <div class=\"transaction-totals-wrapper\">\n      <span class=\"totals-gross label\" [textContent]=\"'ORDER_GROSS' | localize\"></span>\n      <span class=\"totals-gross value\" [textContent]=\"transactionTotal?.grossAmount | coCurrency: true\"></span>\n      <ng-container *ngIf=\"transactionTotal?.totalDiscountAmount\">\n        <span class=\"totals-discount-amount label\" [textContent]=\"'DISCOUNT_AMOUNT' | localize\"></span>\n        <span class=\"totals-discount-amount value\" [class.transaction-negative-value]=\"transactionTotal?.totalDiscountAmount < 0\" [textContent]=\"transactionTotal?.totalDiscountAmount | coCurrency: true\"></span>\n      </ng-container>\n      <ng-container *ngIf=\"transactionInfo?.transactionDiscountPercentage\">\n        <span class=\"totals-discount-percentage label\" [textContent]=\"'TRANSACTION_DISCOUNT_PERC' | localize\"></span>\n        <span class=\"totals-discount-percentage value\" [class.transaction-negative-value]=\"transactionInfo?.transactionDiscountPercentage < 0\" [textContent]=\"transactionInfo?.transactionDiscountPercentage.toString() | append:' %'\"></span>\n      </ng-container>\n      <ng-container *ngIf=\"transactionTotal?.orderTotalDeliveryCostsAmount\">\n        <span class=\"totals-delivery-costs label\" [textContent]=\"'DELIVERY_COSTS' | localize\"></span>\n        <span class=\"totals-delivery-costs value\" [class.transaction-negative-value]=\"transactionTotal?.orderTotalDeliveryCostsAmount < 0\" [textContent]=\"transactionTotal?.orderTotalDeliveryCostsAmount | coCurrency\"></span>\n      </ng-container>\n      <ng-container *ngIf=\"transactionTotal?.assemblyCosts\">\n        <span class=\"totals-assembly-costs label\" [textContent]=\"'ASSEMBLY_COSTS' | localize\"></span>\n        <span class=\"totals-assembly-costs value\" [class.transaction-negative-value]=\"transactionTotal?.assemblyCosts < 0\" [textContent]=\"transactionTotal?.assemblyCosts | coCurrency\"></span>\n      </ng-container>\n      <ng-container *ngIf=\"transactionTotal?.totalSurchargeAmount\">\n        <span class=\"totals-surcharge-amount label\" [textContent]=\"'SURCHARGE_AMOUNT' | localize\"></span>\n        <span class=\"totals-surcharge-amount value\" [class.transaction-negative-value]=\"transactionTotal?.totalSurchargeAmount < 0\" [textContent]=\"transactionTotal?.totalSurchargeAmount | coCurrency\"></span>\n      </ng-container>\n      <span class=\"totals-net label\" [textContent]=\"'ORDER_NET'| localize\"></span>\n      <span class=\"totals-net value\" [textContent]=\"transactionTotal?.netAmount | coCurrency: true\"></span>\n      <a *ngIf=\"showDiscount\" class=\"add-discount label\" (click)=\"handleShowDiscountDialog($event)\" [textContent]=\"'ADD_DISCOUNTS' | localize\"></a>\n    </div>\n    <co-dialog-transaction-header-discount class=\"discount-dialog\" *ngIf=\"showDiscountDialog\"\n                                           [transactionInfo]=\"transactionInfo\"\n                                           [transactionTotal]=\"transactionTotal\"\n                                           (close)=\"showDiscountDialog = false\">\n    </co-dialog-transaction-header-discount>\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -21437,8 +21472,9 @@
     ];
 
     var TransactionButtonComponent = /** @class */ (function () {
-        function TransactionButtonComponent(_screenConfigService) {
+        function TransactionButtonComponent(_screenConfigService, _changeDetector) {
             this._screenConfigService = _screenConfigService;
+            this._changeDetector = _changeDetector;
             this.statusColor = false;
             this.readonly = false;
             this.hidden = false;
@@ -21469,11 +21505,13 @@
                             provide: corecomponents_v12.SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return TransactionButtonComponent; })
                         }],
-                    encapsulation: i0.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.Default
                 },] }
     ];
     TransactionButtonComponent.ctorParameters = function () { return [
-        { type: TransactionScreenConfigurationService }
+        { type: TransactionScreenConfigurationService },
+        { type: i0.ChangeDetectorRef }
     ]; };
     TransactionButtonComponent.propDecorators = {
         label: [{ type: i0.Input }],
@@ -21565,6 +21603,7 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.icons = Icon;
             _this.showPurchaseDesc = false;
+            _this.customHeight = true;
             return _this;
         }
         Object.defineProperty(TransactionLineDescriptionComponent.prototype, "child", {
@@ -21671,7 +21710,7 @@
     TransactionLineDescriptionComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-line-description",
-                    template: "\n    <div class=\"co-transaction-default-flex-row\">\n      <div class=\"co-transaction-overflow-ellipsis\" [textContent]=\"getDescription()\"\n           [screenConfigurationObject]=\"configNames?.description\" screenConfigNativeElement\n      ></div>\n      <co-icon *ngIf=\"this.transactionLine.articleFreeDescription\"\n               [iconData]=\"iconCacheService.getIcon(icons.EditPencil)\"\n               (click)=\"editMode = true\"\n               [screenConfigurationObject]=\"configNames?.descriptionEditBtn\" screenConfigNativeElement\n      ></co-icon>\n    </div>\n    <co-input-text #input *ngIf=\"editMode || defaultEditMode\"\n                   [screenConfigurationObject]=\"configNames?.description\"\n                   [noStyle]=\"false\"\n                   [placeholder]=\"showLabel ? ('GOOD_DESCRIPTION' | localize) : ''\"\n                   [showSaveCancel]=\"!readonly\"\n                   [hidden]=\"hidden\"\n                   [readonly]=\"readonly\"\n                   [model]=\"getDescription()\"\n                   (blur)=\"editMode = false\"\n                   class=\"custom-height\"\n    ></co-input-text>\n  ",
+                    template: "\n    <div class=\"co-transaction-default-flex-row\">\n      <div class=\"co-transaction-overflow-ellipsis\" [textContent]=\"getDescription()\"\n           [screenConfigurationObject]=\"configNames?.description\" screenConfigNativeElement\n      ></div>\n      <co-icon *ngIf=\"this.transactionLine.articleFreeDescription\"\n               [iconData]=\"iconCacheService.getIcon(icons.EditPencil)\"\n               (click)=\"editMode = true\"\n               [screenConfigurationObject]=\"configNames?.descriptionEditBtn\" screenConfigNativeElement\n      ></co-icon>\n    </div>\n    <co-input-text #input *ngIf=\"editMode || defaultEditMode\"\n                   [screenConfigurationObject]=\"configNames?.description\"\n                   [noStyle]=\"false\"\n                   [placeholder]=\"showLabel ? ('GOOD_DESCRIPTION' | localize) : ''\"\n                   [showSaveCancel]=\"!readonly\"\n                   [hidden]=\"hidden\"\n                   [readonly]=\"readonly\"\n                   [model]=\"getDescription()\"\n                   (blur)=\"editMode = false\"\n                   [class.custom-height]=\"customHeight\"\n    ></co-input-text>\n  ",
                     providers: [{
                             provide: corecomponents_v12.SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return TransactionLineDescriptionComponent; })
@@ -21683,7 +21722,8 @@
     TransactionLineDescriptionComponent.propDecorators = {
         child: [{ type: i0.ViewChild, args: ['input', { read: corecomponents_v12.InputTextComponent },] }],
         showPurchaseDesc: [{ type: i0.Input }],
-        configNames: [{ type: i0.Input }]
+        configNames: [{ type: i0.Input }],
+        customHeight: [{ type: i0.Input }]
     };
 
     var TransactionLineDescriptionModule = /** @class */ (function () {
@@ -22196,7 +22236,9 @@
             set: function (value) {
                 if (this._transactionType !== value) {
                     this._resetRequest();
+                    this.searchRequest.transactionKind = value;
                     this.transactions.length = 0;
+                    this.searchRequestSet.next(this.searchRequest);
                 }
                 this._transactionType = value;
             },
@@ -22500,13 +22542,36 @@
     };
 
     var TransactionSearchTileBaseComponent = /** @class */ (function () {
-        function TransactionSearchTileBaseComponent(iconCacheService) {
+        function TransactionSearchTileBaseComponent(iconCacheService, changeDetection) {
             this.iconCacheService = iconCacheService;
+            this.changeDetection = changeDetection;
             this.cfgNames = exports.TransactionCfgName;
             this.icons = Icon;
             this.transactionClick = new i0.EventEmitter();
             this.selectedClick = new i0.EventEmitter();
         }
+        Object.defineProperty(TransactionSearchTileBaseComponent.prototype, "showCheckbox", {
+            get: function () {
+                return this._showCheckbox;
+            },
+            set: function (value) {
+                this._showCheckbox = value;
+                this.detectChanges();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionSearchTileBaseComponent.prototype, "transaction", {
+            get: function () {
+                return this._transaction;
+            },
+            set: function (value) {
+                this._transaction = value;
+                this.detectChanges();
+            },
+            enumerable: false,
+            configurable: true
+        });
         TransactionSearchTileBaseComponent.prototype.showClass = function () {
             return true;
         };
@@ -22516,13 +22581,17 @@
         TransactionSearchTileBaseComponent.prototype.onSelectedClick = function (transaction) {
             this.selectedClick.emit(transaction);
         };
+        TransactionSearchTileBaseComponent.prototype.detectChanges = function () {
+            this.changeDetection.detectChanges();
+        };
         return TransactionSearchTileBaseComponent;
     }());
     TransactionSearchTileBaseComponent.decorators = [
         { type: i0.Directive }
     ];
     TransactionSearchTileBaseComponent.ctorParameters = function () { return [
-        { type: IconCacheService }
+        { type: IconCacheService },
+        { type: i0.ChangeDetectorRef }
     ]; };
     TransactionSearchTileBaseComponent.propDecorators = {
         showCheckbox: [{ type: i0.Input }],
@@ -22557,9 +22626,10 @@
 
     var TransactionSearchSalesOrderTileComponent = /** @class */ (function (_super) {
         __extends(TransactionSearchSalesOrderTileComponent, _super);
-        function TransactionSearchSalesOrderTileComponent(iconCacheService) {
-            var _this = _super.call(this, iconCacheService) || this;
+        function TransactionSearchSalesOrderTileComponent(iconCacheService, changeDetector) {
+            var _this = _super.call(this, iconCacheService, changeDetector) || this;
             _this.iconCacheService = iconCacheService;
+            _this.changeDetector = changeDetector;
             _this.statusBarConfigNames = {
                 statusBarBT: _this.cfgNames.StatusBarBT,
                 statusBarTG: _this.cfgNames.StatusBarTG,
@@ -22571,20 +22641,33 @@
                 statusBarGL: _this.cfgNames.StatusBarGL,
                 statusBarGF: _this.cfgNames.StatusBarGF
             };
-            _this.showAvatar = true;
+            _this._showAvatar = true;
             return _this;
         }
+        Object.defineProperty(TransactionSearchSalesOrderTileComponent.prototype, "showAvatar", {
+            get: function () {
+                return this._showAvatar;
+            },
+            set: function (value) {
+                this._showAvatar = value;
+                this.detectChanges();
+            },
+            enumerable: false,
+            configurable: true
+        });
         return TransactionSearchSalesOrderTileComponent;
     }(TransactionSearchTileBaseComponent));
     TransactionSearchSalesOrderTileComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-search-sales-order-tile",
-                    template: "\n    <div class=\"transaction-tile-wrapper\" (click)=\"onTransactionClick(transaction)\">\n      <div class=\"tile\">\n        <div class=\"tile-header\">\n          <div class=\"tile-upper-left\" *ngIf=\"showAvatar\">\n            <div class=\"transaction-tile-avatar\">\n              <co-avatar [image]=\"transaction.execImage\" [relationId]=\"transaction.handledBy\"></co-avatar>\n            </div>\n          </div>\n          <div class=\"tile-upper-middle\">\n            <div class=\"header\">\n              <span [textContent]=\"transaction.transNr\"></span>\n              <div class=\"type-indicator\"><span [textContent]=\"transaction.transactionKind\"></span></div>\n            </div>\n            <div class=\"text\"><span [textContent]=\"transaction.brancheName\"></span></div>\n          </div>\n          <div class=\"tile-upper-right\">\n            <div class=\"status-bar-wrapper\" (click)=\"$event.stopPropagation()\">\n              <co-transaction-statusbar\n                [screenConfigurationObject]=\"cfgNames.StatusBar\"\n                [configNames]=\"statusBarConfigNames\"\n                [transaction]=\"transaction\"></co-transaction-statusbar>\n            </div>\n            <div class=\"header total-price-vat\"><span\n              [textContent]=\"transaction.totalPriceWithVat | currency:'EUR'\"></span></div>\n          </div>\n        </div>\n        <div class=\"tile-body\">\n          <div class=\"tile-middle-left\">\n            <co-input-checkbox\n              *ngIf=\"showCheckbox\"\n              [(model)]=\"transaction.selected\"\n              (modelChange)=\"onSelectedClick(transaction)\"\n            ></co-input-checkbox>\n          </div>\n          <div class=\"tile-middle-middle\">\n            <div class=\"text\"><span [textContent]=\"transaction.relationName\"></span></div>\n            <div class=\"text\"><span [textContent]=\"transaction.getAdres()\"></span></div>\n          </div>\n          <div class=\"tile-middle-right\"></div>\n        </div>\n        <div class=\"tile-footer\">\n          <div class=\"tile-bottom-left order-info-section\">\n            <div class=\"label\"><span [textContent]=\"'ORDER_DATE' | localize\"></span></div>\n            <div class=\"value\">\n              <span [textContent]=\"transaction.getTransDate() | date:'dd MMM yyyy'\"></span></div>\n          </div>\n          <div class=\"tile-bottom-middle order-info-section\">\n            <div class=\"label\"><span [textContent]=\"'DELIVERY_DATE' | localize\"></span></div>\n            <div class=\"value\">\n              <span [textContent]=\"transaction.getDeliveryDate() | date:'dd MMM yyyy'\"></span>\n              <div *ngIf=\"transaction.getDeliveryDate()\">\n                <co-icon *ngIf=\"transaction.deliveryDateDefinitive; else indefinite\"\n                         [iconData]=\"iconCacheService.getIcon(icons.Lock)\" class=\"lock-icon\"></co-icon>\n                <ng-template #indefinite>\n                  <co-icon [iconData]=\"iconCacheService.getIcon(icons.Unlock)\" class=\"unlock-icon\"></co-icon>\n                </ng-template>\n              </div>\n            </div>\n          </div>\n          <div class=\"tile-bottom-right order-info-section\">\n            <div class=\"label\"><span [textContent]=\"'ORDER_RULE' | localize\"></span></div>\n            <div class=\"value\">\n              <span [textContent]=\"'68/00'\"></span></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
+                    template: "\n      <div class=\"transaction-tile-wrapper\" (click)=\"onTransactionClick(transaction)\">\n          <div class=\"tile\">\n              <div class=\"tile-header\">\n                  <div class=\"tile-upper-left\" *ngIf=\"showAvatar\">\n                      <div class=\"transaction-tile-avatar\">\n                          <co-avatar [image]=\"transaction.execImage\" [relationId]=\"transaction.handledBy\"></co-avatar>\n                      </div>\n                  </div>\n                  <div class=\"tile-upper-middle\">\n                      <div class=\"header\">\n                          <span [textContent]=\"transaction.transNr\"></span>\n                          <div class=\"type-indicator\"><span [textContent]=\"transaction.transactionKind\"></span></div>\n                      </div>\n                      <div class=\"text\"><span [textContent]=\"transaction.brancheName\"></span></div>\n                  </div>\n                  <div class=\"tile-upper-right\">\n                      <div class=\"status-bar-wrapper\" (click)=\"$event.stopPropagation()\">\n                          <co-transaction-statusbar\n                                  [screenConfigurationObject]=\"cfgNames.StatusBar\"\n                                  [configNames]=\"statusBarConfigNames\"\n                                  [transaction]=\"transaction\"></co-transaction-statusbar>\n                      </div>\n                      <div class=\"header total-price-vat\"><span\n                              [textContent]=\"transaction.totalPriceWithVat | currency:'EUR'\"></span></div>\n                  </div>\n              </div>\n              <div class=\"tile-body\">\n                  <div class=\"tile-middle-left\">\n                      <co-input-checkbox\n                              *ngIf=\"showCheckbox\"\n                              [(model)]=\"transaction.selected\"\n                              (modelChange)=\"onSelectedClick(transaction)\"\n                      ></co-input-checkbox>\n                  </div>\n                  <div class=\"tile-middle-middle\">\n                      <div class=\"text\"><span [textContent]=\"transaction.relationName\"></span></div>\n                      <div class=\"text\"><span [textContent]=\"transaction.getAdres()\"></span></div>\n                  </div>\n                  <div class=\"tile-middle-right\"></div>\n              </div>\n              <div class=\"tile-footer\">\n                  <div class=\"tile-bottom-left order-info-section\">\n                      <div class=\"label\"><span [textContent]=\"'ORDER_DATE' | localize\"></span></div>\n                      <div class=\"value\">\n                          <span [textContent]=\"transaction.getTransDate() | date:'dd MMM yyyy'\"></span></div>\n                  </div>\n                  <div class=\"tile-bottom-middle order-info-section\">\n                      <div class=\"label\"><span [textContent]=\"'DELIVERY_DATE' | localize\"></span></div>\n                      <div class=\"value\">\n                          <span [textContent]=\"transaction.getDeliveryDate() | date:'dd MMM yyyy'\"></span>\n                          <div *ngIf=\"transaction.getDeliveryDate()\">\n                              <co-icon *ngIf=\"transaction.deliveryDateDefinitive; else indefinite\"\n                                       [iconData]=\"iconCacheService.getIcon(icons.Lock)\" class=\"lock-icon\"></co-icon>\n                              <ng-template #indefinite>\n                                  <co-icon [iconData]=\"iconCacheService.getIcon(icons.Unlock)\" class=\"unlock-icon\"></co-icon>\n                              </ng-template>\n                          </div>\n                      </div>\n                  </div>\n                  <div class=\"tile-bottom-right order-info-section\">\n                      <div class=\"label\"><span [textContent]=\"'ORDER_RULE' | localize\"></span></div>\n                      <div class=\"value\">\n                          <span [textContent]=\"'68/00'\"></span></div>\n                  </div>\n              </div>\n          </div>\n      </div>\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     TransactionSearchSalesOrderTileComponent.ctorParameters = function () { return [
-        { type: IconCacheService }
+        { type: IconCacheService },
+        { type: i0.ChangeDetectorRef }
     ]; };
     TransactionSearchSalesOrderTileComponent.propDecorators = {
         showAvatar: [{ type: i0.Input }]
@@ -22720,7 +22803,9 @@
                             result = _a.sent();
                             if (result) {
                                 this.analyzedConfirmation = result.find(function (a) { return a.analysisId === _this.confirmationAnalysisId; });
-                                this.setOrdersTotal(this.analyzedConfirmation.ordersTotal);
+                                if (this.analyzedConfirmation) {
+                                    this.setOrdersTotal(this.analyzedConfirmation.ordersTotal);
+                                }
                             }
                             _a.label = 2;
                         case 2: return [2 /*return*/];
@@ -23068,8 +23153,12 @@
                 if (_this.printLayouts && _this.printLayouts.length > 0) {
                     var defaultLayout = _this.printLayouts.find(function (p) { return p.isDefault; });
                     if (defaultLayout) {
-                        _this.reportDocumentPrintRequest.reportId = defaultLayout.reportId;
-                        _this.reportDocumentPdfRequest.reportId = defaultLayout.reportId;
+                        if (_this.reportDocumentPrintRequest) {
+                            _this.reportDocumentPrintRequest.reportId = defaultLayout.reportId;
+                        }
+                        if (_this.reportDocumentPdfRequest) {
+                            _this.reportDocumentPdfRequest.reportId = defaultLayout.reportId;
+                        }
                     }
                 }
             });
@@ -23629,12 +23718,13 @@
     };
 
     var TransactionLineActionButtonsComponent = /** @class */ (function () {
-        function TransactionLineActionButtonsComponent(elementRef, iconCacheService, _transactionService, _transactionEventService, _overlayService) {
+        function TransactionLineActionButtonsComponent(elementRef, iconCacheService, _transactionService, _transactionEventService, _overlayService, _changeDetector) {
             this.elementRef = elementRef;
             this.iconCacheService = iconCacheService;
             this._transactionService = _transactionService;
             this._transactionEventService = _transactionEventService;
             this._overlayService = _overlayService;
+            this._changeDetector = _changeDetector;
             this.icons = Icon;
             this.isFirst = false;
             this.waitingForUserAction = new i0.EventEmitter();
@@ -23746,7 +23836,8 @@
                     providers: [
                         corecomponents_v12.OverlayService
                     ],
-                    encapsulation: i0.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     TransactionLineActionButtonsComponent.ctorParameters = function () { return [
@@ -23754,7 +23845,8 @@
         { type: IconCacheService },
         { type: TransactionService },
         { type: TransactionEventService },
-        { type: corecomponents_v12.OverlayService }
+        { type: corecomponents_v12.OverlayService },
+        { type: i0.ChangeDetectorRef }
     ]; };
     TransactionLineActionButtonsComponent.propDecorators = {
         configNames: [{ type: i0.Input }],
@@ -23845,7 +23937,8 @@
         { type: i0.Component, args: [{
                     selector: "co-transaction-overview-line",
                     template: "\n      <co-transaction-base-line\n          [transactionInfo]=\"transactionInfo\"\n          [transactionLine]=\"transactionLine\"\n          [preview]=\"preview\"\n          [isFirst]=\"isFirst\"\n          [checkbox]=\"orderLineSetService.currentOrderLineSetCode && (!transactionLine.orderLineSetCode || transactionLine.orderLineSetCode === orderLineSetService.currentOrderLineSetCode)\"\n          [checkboxValue]=\"orderLineSetService.currentOrderLineSetCode === transactionLine.orderLineSetCode\"\n          (checkboxValueChanged)=\"handleCheckBoxValueChanged($event)\"\n          observeVisibility #observer=visibilityObserve (visibilityChange)=\"handleVisibilityChange(transactionLine, $event)\">\n          <ng-container *ngIf=\"transactionLine.isArticle\">\n              <div class=\"transaction-line-wrapper\">\n                  <div *ngIf=!preview class=\"transaction-line-extended-wrapper\">\n                      <div class=\"column1\">\n                        <span class=\"transaction-field-label\" [textContent]=\"'COMMISSION_CODE' | localize\" *ngIf=\"isFirst\"></span>\n                          <co-transaction-line-commission-button\n                                  [screenConfigurationObject]=\"cfgNames.LineCommission\"\n                                  [transactionLine]=\"transactionLine\"\n                                  [transactionInfo]=\"transactionInfo\"\n                          ></co-transaction-line-commission-button>\n                      </div>\n                    <div class=\"column2\">\n                      <span class=\"transaction-field-label\" [textContent]=\"'WAREHOUSE_AND_STATUS' | localize\"  *ngIf=\"isFirst\"></span>\n                      <co-transaction-line-warehouse-button\n                        [screenConfigurationObject]=\"cfgNames.LineWarehouse\"\n                        [transactionLine]=\"transactionLine\"\n                        [transactionInfo]=\"transactionInfo\"\n                      ></co-transaction-line-warehouse-button>\n                      <co-transaction-line-statusbar\n                        [screenConfigurationObject]=\"cfgNames.StatusBar\"\n                        [configNames]=\"statusBarConfigNames\"\n                        [transactionInfo]=\"transactionInfo\"\n                        [transactionLine]=\"transactionLine\"\n                        [activeCategory]=\"category.SalesOrderOverview\"></co-transaction-line-statusbar>\n                    </div>\n                      <div class=\"column3\">\n                        <span class=\"transaction-field-label\" [textContent]=\"'DELIVERY_INFORMATION' | localize\"  *ngIf=\"isFirst\"></span>\n                          <co-transaction-line-delivery-button\n                                  [screenConfigurationObject]=\"cfgNames.LineDeliveryMethod\"\n                                  [transactionLine]=\"transactionLine\"\n                                  [transactionInfo]=\"transactionInfo\"\n                          ></co-transaction-line-delivery-button>\n                          <co-transaction-line-delivery-date-button class=\"transaction-line-delivery-date two-column\"\n                                  [screenConfigurationObject]=\"cfgNames.LineDeliveryDate\"\n                                  [transactionInfo]=\"transactionInfo\"\n                                  [transactionLine]=\"transactionLine\"\n                          ></co-transaction-line-delivery-date-button>\n                      </div>\n                  </div>\n                  <div class=\"transaction-line-section\">\n                    <span class=\"transaction-field-label\" [textContent]=\"'TOTALS_AND_DISCOUNT' | localize\" *ngIf=\"isFirst\"></span>\n                      <co-transaction-line-vat-button *ngIf=\"!preview\"\n                                  [screenConfigurationObject]=\"cfgNames.LineVat\"\n                                  [transactionLine]=\"transactionLine\"\n                                  [transactionInfo]=\"transactionInfo\"\n                      ></co-transaction-line-vat-button>\n                      <div class=\"transaction-line-totals\">\n                          <co-transaction-line-price class=\"transaction-line-totals-price price\"\n                                                     [screenConfigurationObject]=\"cfgNames.LinePrice\"\n                                                     [transactionInfo]=\"transactionInfo\"\n                                                     [transactionLine]=\"transactionLine\"\n                                                     [showLabel]=\"false\"\n                                                     [defaultEditMode]=\"false\"\n                          ></co-transaction-line-price>\n                          <co-transaction-line-discount-button *ngIf=\"!preview\"\n                                                               [screenConfigurationObject]=\"cfgNames.LineDiscount\"\n                                                               [configNames]=\"discountConfigNames\"\n                                                               [transactionLine]=\"transactionLine\"\n                                                               [transactionInfo]=\"transactionInfo\"\n                          ></co-transaction-line-discount-button>\n                          <div class=\"transaction-line-totals-amount\">\n                              <co-transaction-line-amount class=\"amount-number-picker\"\n                                                          [screenConfigurationObject]=\"cfgNames.LineAmount\"\n                                                          [transactionLine]=\"transactionLine\"\n                                                          [transactionInfo]=\"transactionInfo\"\n                              ></co-transaction-line-amount>\n                          </div>\n                          <co-editable-label class=\"transaction-line-totals-total price\"\n                                             [model]=\"transactionLine.displayNetLineTotal | coCurrency: true\"\n                                             [editModel]=\"transactionLine.displayNetLineTotal\"\n                                             [readonly]=\"true\"\n                          ></co-editable-label>\n                      </div>\n                  </div>\n              </div>\n          </ng-container>\n      </co-transaction-base-line>\n  ",
-                    encapsulation: i0.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     TransactionOverviewLineComponent.ctorParameters = function () { return [
@@ -24207,6 +24300,9 @@
             this._subscriptions.forEach(function (s) { return s.unsubscribe(); });
         };
         TransactionReceiveGoodsLineBaseComponent.prototype.changeLineAmount = function (amount) {
+            if (this.transactionLine.articleLineStatus) {
+                this.transactionLine.articleLineStatus.quantityToReceive = amount;
+            }
             this.transactionLine.stickerAmount = amount * (this.transactionLine.productItemsAmount ? this.transactionLine.productItemsAmount : 1);
         };
         TransactionReceiveGoodsLineBaseComponent.prototype.handleLineClicked = function (mouseClick) {
@@ -24253,7 +24349,7 @@
     TransactionReceiveGoodsLineComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-receive-goods-line",
-                    template: "\n      <co-transaction-base-line\n              [transactionInfo]=\"transactionInfo\"\n              [transactionLine]=\"transactionLine\"\n              [preview]=\"preview\"\n              [isFirst]=\"isFirst\"\n              [checkbox]=\"showCheckboxForLine\"\n              [checkboxValue]=\"transactionLine.selected\"\n              (checkboxValueChanged)=\"transactionLine.selected = $event\"\n              (click)=\"handleLineClicked($event)\"\n              observeVisibility #observer=visibilityObserve (visibilityChange)=\"handleVisibilityChange(transactionLine, $event)\">\n        <div class=\"transaction-line-wrapper\">\n          <div class=\"transaction-line-extended-wrapper\">\n            <div class=\"column1\">\n              <span class=\"transaction-field-label\" [textContent]=\"'STATUS' | localize\" *ngIf=\"isFirst\"></span>\n              <co-transaction-line-statusbar\n                [screenConfigurationObject]=\"cfgNames.StatusBar\"\n                [configNames]=\"statusBarConfigNames\"\n                [transactionInfo]=\"transactionInfo\"\n                [transactionLine]=\"transactionLine\"\n                [activeCategory]=\"transactionTypeCategory.PurchaseOrderReceivedGoods\"></co-transaction-line-statusbar>\n            </div>\n            <div class=\"column2\">\n              <span class=\"transaction-field-label\" [textContent]=\"'WAREHOUSE' | localize\"  *ngIf=\"isFirst\"></span>\n              <co-transaction-line-warehouse-button\n                [screenConfigurationObject]=\"cfgNames.LineWarehouse\"\n                [transactionLine]=\"transactionLine\"\n                [transactionInfo]=\"transactionInfo\"></co-transaction-line-warehouse-button>\n              <co-transaction-line-warehouse-location-button\n                *ngIf=\"transactionLine.isLocationRequired\"\n                [screenConfigurationObject]=\"cfgNames.LineWarehouseLocationReceived\"\n                [readonly]=\"warehouseLocationButtonDisabled\"\n                [transactionLine]=\"transactionLine\">\n              </co-transaction-line-warehouse-location-button>\n            </div>\n            <div class=\"column3\">\n              <span class=\"transaction-field-label\" [textContent]=\"'DELIVERY_INFORMATION' | localize\"  *ngIf=\"isFirst\"></span>\n              <co-input-text\n                [model]=\"transactionLine.amount\"\n                [leftIconData]=\"iconCacheService.getIcon(icons.CartShoppingRegular)\"\n                [readonly]=\"true\"\n                [customHeight]=\"true\"\n              ></co-input-text>\n              <co-input-text\n                [leftIconData]=\"iconCacheService.getIcon(icons.RegularCartFlatbedBoxesCircleCheck)\"\n                [readonly]=\"true\"\n                [customHeight]=\"true\"\n              ></co-input-text>\n\n            </div>\n          </div>\n          <div class=\"transaction-line-section\">\n            <span class=\"transaction-field-label\" [textContent]=\"'TOTALS_AND_DISCOUNT' | localize\" *ngIf=\"isFirst\"></span>\n            <co-input-text class=\"side-panel-input\"\n                           *ngIf=\"transactionLine.isBatchNrRequired\"\n                           [(model)]=\"transactionLine.batchNr\"\n                           [type]=\"'number'\"\n                           [hideArrowButtons]=\"true\"\n                           [readonly]=\"true\"\n                           [required]=\"true\"\n                           [customHeight]=\"true\"\n            ></co-input-text>\n            <div class=\"transaction-line-totals\">\n              <co-transaction-print-package-sticker\n                [screenConfigurationObject]=\"cfgNames.StickerAmount\"\n                [transactionLine]=\"transactionLine\"\n                [transactionInfo]=\"transactionInfo\"\n              ></co-transaction-print-package-sticker>\n              <div class=\"transaction-line-totals-amount\">\n                <co-input-number-picker class=\"amount-number-picker\"\n                                        [screenConfigurationObject]=\"cfgNames.LineQuantityToReceive\"\n                                        [(model)]=\"transactionLine.articleLineStatus.quantityToReceive\"\n                                        [decimals]=\"decimals\"\n                                        [min]=\"1\"\n                                        [max]=\"transactionLine.amount - lineQuantityReceived\"\n                                        [leftIconData]=\"iconCacheService.getIcon(icons.CartFlatbedBoxesRegular)\"\n                                        [readonly]=\"readonly || lineQuantityReceived === transactionLine.amount\"\n                                        (modelChange)=\"changeLineAmount($event)\">\n                </co-input-number-picker>\n              </div>\n              <co-editable-label class=\"transaction-line-totals-total price\"\n                                 [model]=\"transactionLine.displayNetLineTotal | coCurrency: true\"\n                                 [editModel]=\"transactionLine.displayNetLineTotal\"\n                                 [commit]=\"!readonly\"\n                                 [readonly]=\"true\"\n                                 [editMode]=\"false\"\n              ></co-editable-label>\n            </div>\n          </div>\n        </div>\n      </co-transaction-base-line>\n  ",
+                    template: "\n      <co-transaction-base-line\n              [transactionInfo]=\"transactionInfo\"\n              [transactionLine]=\"transactionLine\"\n              [preview]=\"preview\"\n              [isFirst]=\"isFirst\"\n              [checkbox]=\"showCheckboxForLine\"\n              [checkboxValue]=\"transactionLine.selected\"\n              (checkboxValueChanged)=\"transactionLine.selected = $event\"\n              (click)=\"handleLineClicked($event)\"\n              observeVisibility #observer=visibilityObserve (visibilityChange)=\"handleVisibilityChange(transactionLine, $event)\">\n        <div class=\"transaction-line-wrapper\">\n          <div class=\"transaction-line-extended-wrapper\">\n            <div class=\"column1\">\n              <span class=\"transaction-field-label\" [textContent]=\"'STATUS' | localize\" *ngIf=\"isFirst\"></span>\n              <co-transaction-line-statusbar\n                [screenConfigurationObject]=\"cfgNames.StatusBar\"\n                [configNames]=\"statusBarConfigNames\"\n                [transactionInfo]=\"transactionInfo\"\n                [transactionLine]=\"transactionLine\"\n                [activeCategory]=\"transactionTypeCategory.PurchaseOrderReceivedGoods\"></co-transaction-line-statusbar>\n            </div>\n            <div class=\"column2\">\n              <span class=\"transaction-field-label\" [textContent]=\"'WAREHOUSE' | localize\"  *ngIf=\"isFirst\"></span>\n              <co-transaction-line-warehouse-button\n                [screenConfigurationObject]=\"cfgNames.LineWarehouse\"\n                [transactionLine]=\"transactionLine\"\n                [transactionInfo]=\"transactionInfo\"></co-transaction-line-warehouse-button>\n              <co-transaction-line-warehouse-location-button\n                *ngIf=\"transactionLine.isLocationRequired\"\n                [screenConfigurationObject]=\"cfgNames.LineWarehouseLocationReceived\"\n                [readonly]=\"warehouseLocationButtonDisabled\"\n                [transactionLine]=\"transactionLine\">\n              </co-transaction-line-warehouse-location-button>\n            </div>\n            <div class=\"column3\">\n              <span class=\"transaction-field-label\" [textContent]=\"'DELIVERY_INFORMATION' | localize\"  *ngIf=\"isFirst\"></span>\n              <co-input-text\n                [model]=\"transactionLine.amount\"\n                [leftIconData]=\"iconCacheService.getIcon(icons.CartShoppingRegular)\"\n                [readonly]=\"true\"\n                [customHeight]=\"true\"\n              ></co-input-text>\n              <co-input-text\n                [leftIconData]=\"iconCacheService.getIcon(icons.RegularCartFlatbedBoxesCircleCheck)\"\n                [readonly]=\"true\"\n                [customHeight]=\"true\"\n              ></co-input-text>\n\n            </div>\n          </div>\n          <div class=\"transaction-line-section\">\n            <span class=\"transaction-field-label\" [textContent]=\"'TOTALS_AND_DISCOUNT' | localize\" *ngIf=\"isFirst\"></span>\n            <co-input-text class=\"side-panel-input\"\n                           *ngIf=\"transactionLine.isBatchNrRequired\"\n                           [(model)]=\"transactionLine.batchNr\"\n                           [type]=\"'number'\"\n                           [hideArrowButtons]=\"true\"\n                           [readonly]=\"true\"\n                           [required]=\"true\"\n                           [customHeight]=\"true\"\n            ></co-input-text>\n            <div class=\"transaction-line-totals\">\n              <co-transaction-print-package-sticker\n                [screenConfigurationObject]=\"cfgNames.StickerAmount\"\n                [transactionLine]=\"transactionLine\"\n                [transactionInfo]=\"transactionInfo\"\n              ></co-transaction-print-package-sticker>\n              <div class=\"transaction-line-totals-amount\">\n                <co-input-number-picker class=\"amount-number-picker\"\n                                        [screenConfigurationObject]=\"cfgNames.LineQuantityToReceive\"\n                                        [model]=\"transactionLine.articleLineStatus?.quantityToReceive\"\n                                        [decimals]=\"decimals\"\n                                        [min]=\"1\"\n                                        [max]=\"transactionLine.amount - lineQuantityReceived\"\n                                        [leftIconData]=\"iconCacheService.getIcon(icons.CartFlatbedBoxesRegular)\"\n                                        [readonly]=\"readonly || lineQuantityReceived === transactionLine.amount\"\n                                        (modelChange)=\"changeLineAmount($event)\">\n                </co-input-number-picker>\n              </div>\n              <co-editable-label class=\"transaction-line-totals-total price\"\n                                 [model]=\"transactionLine.displayNetLineTotal | coCurrency: true\"\n                                 [editModel]=\"transactionLine.displayNetLineTotal\"\n                                 [commit]=\"!readonly\"\n                                 [readonly]=\"true\"\n                                 [editMode]=\"false\"\n              ></co-editable-label>\n            </div>\n          </div>\n        </div>\n      </co-transaction-base-line>\n  ",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
@@ -25066,6 +25162,7 @@
         }
         TransactionPurchaseOrderLineBaseComponent.prototype.ngOnInit = function () {
             var _this = this;
+            _super.prototype.ngOnInit.call(this);
             this.subs.push(this.transactionEventService.orderConfirmationDropped.subscribe(function (data) {
                 if (data) {
                     if (data.lineNr !== undefined && _this.transactionLine && _this.transactionLine.lineNr === data.lineNr) {
@@ -25083,7 +25180,6 @@
             }), this.transactionEventService.overwritePurchaseOrderConfirmationCompletedChanged.subscribe(function () {
                 _this._handleConfirmationOverwrite();
             }));
-            this._getPurchasePortalLine();
         };
         TransactionPurchaseOrderLineBaseComponent.prototype.ngOnDestroy = function () {
             this.subs.forEach(function (s) { return s.unsubscribe(); });
@@ -25120,15 +25216,23 @@
         };
         TransactionPurchaseOrderLineBaseComponent.prototype.transactionLineSet = function () {
             _super.prototype.transactionLineSet.call(this);
+            this._getPurchasePortalLine();
             this.showCheckboxForLine = this.transactionLine.articleLineStatus &&
                 this.transactionLine.articleLineStatus.quantityPurchaseConfirmed !== this.transactionLine.amount;
         };
+        TransactionPurchaseOrderLineBaseComponent.prototype.visibilitySet = function (visible) {
+            _super.prototype.visibilitySet.call(this, visible);
+            this._getPurchasePortalLine();
+        };
         TransactionPurchaseOrderLineBaseComponent.prototype._getPurchasePortalLine = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var getPurchasePortalLine$1, purchasePortalFilter, purchasePortalLinesResponse;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                var getPurchasePortalLine$1, purchasePortalFilter, _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
+                            if (this._purchasePortalLinesResponse || !this.transactionInfo || !this.transactionLine || !this.visible) {
+                                return [2 /*return*/];
+                            }
                             getPurchasePortalLine$1 = new getPurchasePortalLine.GetPurchasePortalLine();
                             purchasePortalFilter = new purchasePortalFilters_bo.PurchasePortalFilters();
                             purchasePortalFilter.purchaseOrderNo = this.transactionInfo.transactionNr.toString();
@@ -25136,11 +25240,12 @@
                             getPurchasePortalLine$1.transIdPurchase = this.transactionInfo.id;
                             getPurchasePortalLine$1.docKind = "IB";
                             getPurchasePortalLine$1.filterObject = purchasePortalFilter;
+                            _a = this;
                             return [4 /*yield*/, this.transactionService.getPurchasePortalLines(getPurchasePortalLine$1)];
                         case 1:
-                            purchasePortalLinesResponse = _a.sent();
-                            if (purchasePortalLinesResponse.length > 0) {
-                                this.transactionLine.purchasePortalLine = purchasePortalLinesResponse[0];
+                            _a._purchasePortalLinesResponse = _b.sent();
+                            if (this._purchasePortalLinesResponse.length > 0) {
+                                this.transactionLine.purchasePortalLine = this._purchasePortalLinesResponse[0];
                                 this.transactionLine.quantityPurchaseToConfirm = +this.transactionLine.purchasePortalLine.amountOrdered - +this.transactionLine.purchasePortalLine.amountConfirmedTarget;
                                 this.transactionEventService.transactionLineChanged.next(this.transactionLine);
                                 this.detectChanges();
@@ -25329,6 +25434,7 @@
         { type: i0.Component, args: [{
                     selector: "co-transaction-sales-allocation-button-bar-button",
                     template: "\n    <co-icon class=\"co-transaction-button-bar-icon\" [iconData]=\"iconCacheService.getIcon(iconName)\"></co-icon>\n    <span class=\"button-title\" [textContent]=\"title | localize\"></span>\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -26982,9 +27088,10 @@
 
     var TransactionSearchSalesQuotationTileComponent = /** @class */ (function (_super) {
         __extends(TransactionSearchSalesQuotationTileComponent, _super);
-        function TransactionSearchSalesQuotationTileComponent(iconCacheService) {
-            var _this = _super.call(this, iconCacheService) || this;
+        function TransactionSearchSalesQuotationTileComponent(iconCacheService, changeDetector) {
+            var _this = _super.call(this, iconCacheService, changeDetector) || this;
             _this.iconCacheService = iconCacheService;
+            _this.changeDetector = changeDetector;
             return _this;
         }
         TransactionSearchSalesQuotationTileComponent.prototype.showClass = function () {
@@ -27000,7 +27107,8 @@
                 },] }
     ];
     TransactionSearchSalesQuotationTileComponent.ctorParameters = function () { return [
-        { type: IconCacheService }
+        { type: IconCacheService },
+        { type: i0.ChangeDetectorRef }
     ]; };
     TransactionSearchSalesQuotationTileComponent.propDecorators = {
         showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-search-sales-quotation-tile",] }]
@@ -27178,9 +27286,10 @@
 
     var TransactionSearchPosOrderTileComponent = /** @class */ (function (_super) {
         __extends(TransactionSearchPosOrderTileComponent, _super);
-        function TransactionSearchPosOrderTileComponent(iconCacheService) {
-            var _this = _super.call(this, iconCacheService) || this;
+        function TransactionSearchPosOrderTileComponent(iconCacheService, changeDetector) {
+            var _this = _super.call(this, iconCacheService, changeDetector) || this;
             _this.iconCacheService = iconCacheService;
+            _this.changeDetector = changeDetector;
             _this.statusBarConfigNames = {
                 statusBarBT: _this.cfgNames.StatusBarBT,
                 statusBarTG: _this.cfgNames.StatusBarTG,
@@ -27199,12 +27308,13 @@
     TransactionSearchPosOrderTileComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-transaction-search-pos-order-tile',
-                    template: "\n        <div class=\"transaction-tile-wrapper\" (click)=\"onTransactionClick(transaction)\">\n            <div class=\"tile\">\n                <div class=\"tile-header\">\n                    <div class=\"tile-upper-left\">\n                        <div class=\"transaction-tile-avatar\">\n                            <co-avatar [image]=\"transaction.execImage\" [relationId]=\"transaction.handledBy\"></co-avatar>\n                        </div>\n                    </div>\n                    <div class=\"tile-upper-middle\">\n                        <div class=\"header\">\n                            <span [textContent]=\"transaction.transNr\"></span>\n                            <div class=\"type-indicator\"><span [textContent]=\"transaction.transactionKind\"></span></div>\n                        </div>\n                        <div class=\"text\"><span [textContent]=\"transaction.brancheName\"></span></div>\n                    </div>\n                    <div class=\"tile-upper-right\">\n                        <div class=\"status-bar-wrapper\"  (click)=\"$event.stopPropagation()\">\n                            <co-transaction-statusbar\n                                    [screenConfigurationObject]=\"cfgNames.StatusBar\"\n                                    [configNames]=\"statusBarConfigNames\"\n                                    [transaction]=\"transaction\"></co-transaction-statusbar>\n                        </div>\n                        <div class=\"header total-price-vat\"><span [textContent]=\"transaction.totalPriceWithVat | currency:'EUR'\"></span></div>\n                    </div>\n                </div>\n                <div class=\"tile-body\">\n                    <div class=\"tile-middle-left\">\n                        <co-input-checkbox *ngIf=\"showCheckbox\"\n                                           [(model)]=\"transaction.selected\"\n                        ></co-input-checkbox>\n                    </div>\n                    <div class=\"tile-middle-middle\">\n                        <div class=\"text\"><span [textContent]=\"transaction.relationName\"></span></div>\n                        <div class=\"text\"><span [textContent]=\"transaction.getAdres()\"></span></div>\n                    </div>\n                    <div class=\"tile-middle-right\"></div>\n                </div>\n                <div class=\"tile-footer\">\n                    <div class=\"tile-bottom-left order-info-section\">\n                        <div class=\"label\"><span [textContent]=\"'ORDER_DATE' | localize\"></span></div>\n                        <div class=\"value\">\n                            <span [textContent]=\"transaction.getTransDate() | date:'dd MMM yyyy'\"></span></div>\n                    </div>\n                    <div class=\"tile-bottom-middle order-info-section\">\n                        <div class=\"label\"><span [textContent]=\"'DELIVERY_DATE' | localize\"></span></div>\n                        <div class=\"value\">\n                            <span [textContent]=\"transaction.getDeliveryDate() | date:'dd MMM yyyy'\"></span>\n                            <div *ngIf=\"transaction.getDeliveryDate()\">\n                                <co-icon *ngIf=\"transaction.deliveryDateDefinitive; else indefinite\"\n                                         [iconData]=\"iconCacheService.getIcon(icons.Lock)\" class=\"lock-icon\"></co-icon>\n                                <ng-template #indefinite>\n                                    <co-icon [iconData]=\"iconCacheService.getIcon(icons.Unlock)\" class=\"unlock-icon\"></co-icon>\n                                </ng-template>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"tile-bottom-right order-info-section\">\n                        <div class=\"label\"><span [textContent]=\"'ORDER_RULE' | localize\"></span></div>\n                        <div class=\"value\">\n                            <span [textContent]=\"'68/00'\"></span></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ",
+                    template: "\n      <div class=\"transaction-tile-wrapper\" (click)=\"onTransactionClick(transaction)\">\n          <div class=\"tile\">\n              <div class=\"tile-header\">\n                  <div class=\"tile-upper-left\">\n                      <div class=\"transaction-tile-avatar\">\n                          <co-avatar [image]=\"transaction.execImage\" [relationId]=\"transaction.handledBy\"></co-avatar>\n                      </div>\n                  </div>\n                  <div class=\"tile-upper-middle\">\n                      <div class=\"header\">\n                          <span [textContent]=\"transaction.transNr\"></span>\n                          <div class=\"type-indicator\"><span [textContent]=\"transaction.transactionKind\"></span></div>\n                      </div>\n                      <div class=\"text\"><span [textContent]=\"transaction.brancheName\"></span></div>\n                  </div>\n                  <div class=\"tile-upper-right\">\n                      <div class=\"status-bar-wrapper\" (click)=\"$event.stopPropagation()\">\n                          <co-transaction-statusbar\n                                  [screenConfigurationObject]=\"cfgNames.StatusBar\"\n                                  [configNames]=\"statusBarConfigNames\"\n                                  [transaction]=\"transaction\"></co-transaction-statusbar>\n                      </div>\n                      <div class=\"header total-price-vat\"><span [textContent]=\"transaction.totalPriceWithVat | currency:'EUR'\"></span></div>\n                  </div>\n              </div>\n              <div class=\"tile-body\">\n                  <div class=\"tile-middle-left\">\n                      <co-input-checkbox *ngIf=\"showCheckbox\"\n                                         [(model)]=\"transaction.selected\"\n                      ></co-input-checkbox>\n                  </div>\n                  <div class=\"tile-middle-middle\">\n                      <div class=\"text\"><span [textContent]=\"transaction.relationName\"></span></div>\n                      <div class=\"text\"><span [textContent]=\"transaction.getAdres()\"></span></div>\n                  </div>\n                  <div class=\"tile-middle-right\"></div>\n              </div>\n              <div class=\"tile-footer\">\n                  <div class=\"tile-bottom-left order-info-section\">\n                      <div class=\"label\"><span [textContent]=\"'ORDER_DATE' | localize\"></span></div>\n                      <div class=\"value\">\n                          <span [textContent]=\"transaction.getTransDate() | date:'dd MMM yyyy'\"></span></div>\n                  </div>\n                  <div class=\"tile-bottom-middle order-info-section\">\n                      <div class=\"label\"><span [textContent]=\"'DELIVERY_DATE' | localize\"></span></div>\n                      <div class=\"value\">\n                          <span [textContent]=\"transaction.getDeliveryDate() | date:'dd MMM yyyy'\"></span>\n                          <div *ngIf=\"transaction.getDeliveryDate()\">\n                              <co-icon *ngIf=\"transaction.deliveryDateDefinitive; else indefinite\"\n                                       [iconData]=\"iconCacheService.getIcon(icons.Lock)\" class=\"lock-icon\"></co-icon>\n                              <ng-template #indefinite>\n                                  <co-icon [iconData]=\"iconCacheService.getIcon(icons.Unlock)\" class=\"unlock-icon\"></co-icon>\n                              </ng-template>\n                          </div>\n                      </div>\n                  </div>\n                  <div class=\"tile-bottom-right order-info-section\">\n                      <div class=\"label\"><span [textContent]=\"'ORDER_RULE' | localize\"></span></div>\n                      <div class=\"value\">\n                          <span [textContent]=\"'68/00'\"></span></div>\n                  </div>\n              </div>\n          </div>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     TransactionSearchPosOrderTileComponent.ctorParameters = function () { return [
-        { type: IconCacheService }
+        { type: IconCacheService },
+        { type: i0.ChangeDetectorRef }
     ]; };
     TransactionSearchPosOrderTileComponent.propDecorators = {
         showClass: [{ type: i0.HostBinding, args: ['class.co-transaction-search-pos-order-tile',] }]
@@ -27988,6 +28098,7 @@
             _super.prototype.ngOnInit.call(this);
             this._subscriptions.push(this.transactionEventService.selectAllSalesOrderLinesToBePicked.subscribe(function (value) {
                 _this.transactionLine.selected = value && !_this.transactionLineToBePickedCompleted;
+                _this.detectChanges();
             }));
         };
         TransactionPlanningLineComponent.prototype.ngOnDestroy = function () {
@@ -28002,6 +28113,7 @@
                 this.hasOpenedSidePanel = true;
             }
             this.transactionLine.selected = value;
+            this.detectChanges();
         };
         TransactionPlanningLineComponent.prototype.handleLineClicked = function (mouseClick) {
             var _a, _b;
@@ -28015,7 +28127,7 @@
         };
         TransactionPlanningLineComponent.prototype.dragStarted = function (ev) {
             this._deliveryPlanningService.currentTransId = this.transaction.transactionInfo.id;
-            ev.dataTransfer.setData("text", "lines");
+            ev.dataTransfer.setData('text', 'lines');
         };
         Object.defineProperty(TransactionPlanningLineComponent.prototype, "linePlanned", {
             get: function () {
@@ -28029,17 +28141,14 @@
             enumerable: false,
             configurable: true
         });
-        TransactionPlanningLineComponent.prototype.allowPartialDelivery = function () {
-            var _a;
-            return (_a = this.transactionInfo) === null || _a === void 0 ? void 0 : _a.allowPartialDelivery;
-        };
         return TransactionPlanningLineComponent;
     }(TransactionBaseComponent));
     TransactionPlanningLineComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-planning-overview-line",
-                    template: "\n    <co-transaction-base-line\n      [transactionInfo]=\"transactionInfo\"\n      [transactionLine]=\"transactionLine\"\n      [preview]=\"preview\"\n      [isFirst]=\"isFirst\"\n      [draggable]=\"!linePlanned\"\n      (dragstart)=\"dragStarted($event)\"\n      [checkbox]=\"true\"\n      [checkboxValue]=\"transactionLine.selected || !allowPartialDelivery()\"\n      [checkboxReadonly]=\"!allowPartialDelivery()\"\n      (checkboxValueChanged)=\"handleCheckBoxValueChanged($event, transactionLine)\"\n      (click)=\"handleLineClicked($event)\"\n      observeVisibility #observer=visibilityObserve\n      (visibilityChange)=\"handleVisibilityChange(transactionLine, $event)\">\n      <ng-container *ngIf=\"transactionLine.isArticle\">\n        <div class=\"transaction-line-wrapper\">\n          <div *ngIf=!preview class=\"transaction-line-extended-wrapper\">\n            <div class=\"column1\">\n              <span class=\"transaction-field-label\" [textContent]=\"'COMMISSION_CODE' | localize\" *ngIf=\"isFirst\"></span>\n              <co-transaction-line-commission-button\n                [screenConfigurationObject]=\"cfgNames.LineCommission\"\n                [transactionLine]=\"transactionLine\"\n                [transactionInfo]=\"transactionInfo\"\n              ></co-transaction-line-commission-button>\n            </div>\n            <div class=\"column2\">\n              <span class=\"transaction-field-label\" [textContent]=\"'WAREHOUSE_AND_STATUS' | localize\"\n                    *ngIf=\"isFirst\"></span>\n              <co-transaction-line-warehouse-button\n                [screenConfigurationObject]=\"cfgNames.LineWarehouse\"\n                [transactionLine]=\"transactionLine\"\n                [transactionInfo]=\"transactionInfo\"\n              ></co-transaction-line-warehouse-button>\n              <co-transaction-line-statusbar\n                [screenConfigurationObject]=\"cfgNames.StatusBar\"\n                [configNames]=\"statusBarConfigNames\"\n                [transactionInfo]=\"transactionInfo\"\n                [transactionLine]=\"transactionLine\"\n                [activeCategory]=\"category.SalesOrderPlanning\"></co-transaction-line-statusbar>\n            </div>\n            <div class=\"column3\">\n              <span class=\"transaction-field-label\" [textContent]=\"'DELIVERY_INFORMATION' | localize\"\n                    *ngIf=\"isFirst\"></span>\n              <co-transaction-line-delivery-button\n                [screenConfigurationObject]=\"cfgNames.LineDeliveryMethod\"\n                [transactionLine]=\"transactionLine\"\n                [transactionInfo]=\"transactionInfo\"\n              ></co-transaction-line-delivery-button>\n              <co-transaction-line-delivery-date-button class=\"transaction-line-delivery-date two-column\"\n                                                        [screenConfigurationObject]=\"cfgNames.LineDeliveryDate\"\n                                                        [transactionInfo]=\"transactionInfo\"\n                                                        [transactionLine]=\"transactionLine\"\n              ></co-transaction-line-delivery-date-button>\n            </div>\n          </div>\n          <div class=\"transaction-line-section\">\n            <span class=\"transaction-field-label\" [textContent]=\"'TOTALS_AND_DISCOUNT' | localize\"\n                  *ngIf=\"isFirst\"></span>\n            <co-transaction-line-vat-button *ngIf=\"!preview\"\n                                            [screenConfigurationObject]=\"cfgNames.LineVat\"\n                                            [transactionLine]=\"transactionLine\"\n                                            [transactionInfo]=\"transactionInfo\"\n            ></co-transaction-line-vat-button>\n            <div class=\"transaction-line-totals\">\n              <co-transaction-line-price class=\"transaction-line-totals-price price\"\n                                         [screenConfigurationObject]=\"cfgNames.LinePrice\"\n                                         [transactionInfo]=\"transactionInfo\"\n                                         [transactionLine]=\"transactionLine\"\n                                         [showLabel]=\"false\"\n                                         [defaultEditMode]=\"false\"\n              ></co-transaction-line-price>\n              <co-transaction-line-discount-button *ngIf=\"!preview\"\n                                                   [screenConfigurationObject]=\"cfgNames.LineDiscount\"\n                                                   [configNames]=\"discountConfigNames\"\n                                                   [transactionLine]=\"transactionLine\"\n                                                   [transactionInfo]=\"transactionInfo\"\n              ></co-transaction-line-discount-button>\n              <div class=\"transaction-line-totals-amount\">\n                <co-transaction-line-amount class=\"amount-number-picker\"\n                                            [screenConfigurationObject]=\"cfgNames.LineAmount\"\n                                            [transactionLine]=\"transactionLine\"\n                                            [transactionInfo]=\"transactionInfo\"\n                ></co-transaction-line-amount>\n              </div>\n              <co-editable-label class=\"transaction-line-totals-total price\"\n                                 [screenConfigurationObject]=\"cfgNames.LineNetLineTotal\"\n                                 [model]=\"transactionLine.displayNetLineTotal | coCurrency: true\"\n                                 [editModel]=\"transactionLine.displayNetLineTotal\"\n                                 [commit]=\"!readonly\"\n              ></co-editable-label>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </co-transaction-base-line>\n  ",
-                    encapsulation: i0.ViewEncapsulation.None
+                    selector: 'co-transaction-planning-line',
+                    template: "\n      <co-transaction-base-line\n              [transactionInfo]=\"transactionInfo\"\n              [transactionLine]=\"transactionLine\"\n              [preview]=\"preview\"\n              [isFirst]=\"isFirst\"\n              [draggable]=\"!linePlanned\"\n              (dragstart)=\"dragStarted($event)\"\n              [checkbox]=\"true\"\n              [checkboxValue]=\"transactionLine.selected || !transactionInfo?.allowPartialDelivery\"\n              [checkboxReadonly]=\"!transactionInfo?.allowPartialDelivery\"\n              (checkboxValueChanged)=\"handleCheckBoxValueChanged($event, transactionLine)\"\n              (click)=\"handleLineClicked($event)\"\n              observeVisibility #observer=visibilityObserve\n              (visibilityChange)=\"handleVisibilityChange(transactionLine, $event)\">\n          <ng-container *ngIf=\"transactionLine.isArticle\">\n              <div class=\"transaction-line-wrapper\">\n                  <div *ngIf=!preview class=\"transaction-line-extended-wrapper\">\n                      <div class=\"column1\">\n                          <span class=\"transaction-field-label\" [textContent]=\"'COMMISSION_CODE' | localize\" *ngIf=\"isFirst\"></span>\n                          <co-transaction-line-commission-button\n                                  [screenConfigurationObject]=\"cfgNames.LineCommission\"\n                                  [transactionLine]=\"transactionLine\"\n                                  [transactionInfo]=\"transactionInfo\"\n                          ></co-transaction-line-commission-button>\n                      </div>\n                      <div class=\"column2\">\n              <span class=\"transaction-field-label\" [textContent]=\"'WAREHOUSE_AND_STATUS' | localize\"\n                    *ngIf=\"isFirst\"></span>\n                          <co-transaction-line-warehouse-button\n                                  [screenConfigurationObject]=\"cfgNames.LineWarehouse\"\n                                  [transactionLine]=\"transactionLine\"\n                                  [transactionInfo]=\"transactionInfo\"\n                          ></co-transaction-line-warehouse-button>\n                          <co-transaction-line-statusbar\n                                  [screenConfigurationObject]=\"cfgNames.StatusBar\"\n                                  [configNames]=\"statusBarConfigNames\"\n                                  [transactionInfo]=\"transactionInfo\"\n                                  [transactionLine]=\"transactionLine\"\n                                  [activeCategory]=\"category.SalesOrderPlanning\"></co-transaction-line-statusbar>\n                      </div>\n                      <div class=\"column3\">\n              <span class=\"transaction-field-label\" [textContent]=\"'DELIVERY_INFORMATION' | localize\"\n                    *ngIf=\"isFirst\"></span>\n                          <co-transaction-line-delivery-button\n                                  [screenConfigurationObject]=\"cfgNames.LineDeliveryMethod\"\n                                  [transactionLine]=\"transactionLine\"\n                                  [transactionInfo]=\"transactionInfo\"\n                          ></co-transaction-line-delivery-button>\n                          <co-transaction-line-delivery-date-button class=\"transaction-line-delivery-date two-column\"\n                                                                    [screenConfigurationObject]=\"cfgNames.LineDeliveryDate\"\n                                                                    [transactionInfo]=\"transactionInfo\"\n                                                                    [transactionLine]=\"transactionLine\"\n                          ></co-transaction-line-delivery-date-button>\n                      </div>\n                  </div>\n                  <div class=\"transaction-line-section\">\n            <span class=\"transaction-field-label\" [textContent]=\"'TOTALS_AND_DISCOUNT' | localize\"\n                  *ngIf=\"isFirst\"></span>\n                      <co-transaction-line-vat-button *ngIf=\"!preview\"\n                                                      [screenConfigurationObject]=\"cfgNames.LineVat\"\n                                                      [transactionLine]=\"transactionLine\"\n                                                      [transactionInfo]=\"transactionInfo\"\n                      ></co-transaction-line-vat-button>\n                      <div class=\"transaction-line-totals\">\n                          <co-transaction-line-price class=\"transaction-line-totals-price price\"\n                                                     [screenConfigurationObject]=\"cfgNames.LinePrice\"\n                                                     [transactionInfo]=\"transactionInfo\"\n                                                     [transactionLine]=\"transactionLine\"\n                                                     [showLabel]=\"false\"\n                                                     [defaultEditMode]=\"false\"\n                          ></co-transaction-line-price>\n                          <co-transaction-line-discount-button *ngIf=\"!preview\"\n                                                               [screenConfigurationObject]=\"cfgNames.LineDiscount\"\n                                                               [configNames]=\"discountConfigNames\"\n                                                               [transactionLine]=\"transactionLine\"\n                                                               [transactionInfo]=\"transactionInfo\"\n                          ></co-transaction-line-discount-button>\n                          <div class=\"transaction-line-totals-amount\">\n                              <co-transaction-line-amount class=\"amount-number-picker\"\n                                                          [screenConfigurationObject]=\"cfgNames.LineAmount\"\n                                                          [transactionLine]=\"transactionLine\"\n                                                          [transactionInfo]=\"transactionInfo\"\n                              ></co-transaction-line-amount>\n                          </div>\n                          <co-editable-label class=\"transaction-line-totals-total price\"\n                                             [screenConfigurationObject]=\"cfgNames.LineNetLineTotal\"\n                                             [model]=\"transactionLine.displayNetLineTotal | coCurrency: true\"\n                                             [editModel]=\"transactionLine.displayNetLineTotal\"\n                                             [commit]=\"!readonly\"\n                          ></co-editable-label>\n                      </div>\n                  </div>\n              </div>\n          </ng-container>\n      </co-transaction-base-line>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     TransactionPlanningLineComponent.ctorParameters = function () { return [
@@ -28056,9 +28165,9 @@
     TransactionPlanningLineComponent.propDecorators = {
         transactionLineActionButtons: [{ type: i0.ViewChild, args: [TransactionLineActionButtonsComponent,] }],
         descriptionDblClick: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-overview-line",] }],
-        handleMouseOver: [{ type: i0.HostListener, args: ["mouseover", ["$event"],] }],
-        handleMouseLeave: [{ type: i0.HostListener, args: ["mouseleave", ["$event"],] }]
+        showClass: [{ type: i0.HostBinding, args: ['class.co-transaction-planning-line',] }],
+        handleMouseOver: [{ type: i0.HostListener, args: ['mouseover', ['$event'],] }],
+        handleMouseLeave: [{ type: i0.HostListener, args: ['mouseleave', ['$event'],] }]
     };
 
     var TransactionQuickAccessPlanningComponent = /** @class */ (function (_super) {
@@ -29000,14 +29109,15 @@
             if (!componentClass) {
                 return;
             }
-            this._componentRef = this._compFactoryResolver
-                .resolveComponentFactory(componentClass)
-                .create(this.injector);
-            this.appRef.attachView(this._componentRef.hostView);
+            var factory = this._compFactoryResolver.resolveComponentFactory(componentClass);
+            this._transactionLineContainer.clear();
+            this._componentRef = this._transactionLineContainer.createComponent(factory);
             this._prepareProps();
-            var domElem = this._componentRef.hostView
-                .rootNodes[0];
-            this._transactionLineContainer.nativeElement.appendChild(domElem);
+            this.changeDetector.markForCheck();
+            // const domElem = (this._componentRef.hostView as EmbeddedViewRef<any>)
+            //   .rootNodes[0] as HTMLElement;
+            //
+            // this._transactionLineContainer.nativeElement.appendChild(domElem);
             this._componentRef.onDestroy(function () {
                 _this.appRef.detachView(_this._componentRef.hostView);
             });
@@ -29050,7 +29160,7 @@
         { type: i0.Injector }
     ]; };
     TransactionLineComponent.propDecorators = {
-        container: [{ type: i0.ViewChild, args: ['transactionLine', { read: i0.ElementRef },] }],
+        container: [{ type: i0.ViewChild, args: ['transactionLine', { read: i0.ViewContainerRef },] }],
         activeCategory: [{ type: i0.Input }],
         preview: [{ type: i0.Input }],
         isFirst: [{ type: i0.Input }],
@@ -32119,10 +32229,9 @@
         };
         TransactionLineSupplierButtonComponent.prototype._getSupplierDescription = function () {
             var _this = this;
-            if (this.transactionLine && this.transactionLine.isArticle && this.transactionLine.supplierDescription === undefined) {
-                this._relationService.getRelationById(this.transactionLine.supplierId).then(function (relations) {
-                    var relation = relations && relations.length > 0 ? relations[0] : null;
-                    _this.transactionLine.supplierDescription = relation ? relation.displayName : "";
+            if (this.transactionLine && this.transactionLine.isArticle && this.transactionLine.supplierDescription === undefined && this.visible) {
+                this._relationService.getSupplierLightById(this.transactionLine.supplierId).then(function (supplier) {
+                    _this.transactionLine.supplierDescription = supplier ? supplier.supplierName : "";
                     _this.detectChanges();
                 });
                 this.readonly = !this.transactionLine.articleFreeSupplier;
@@ -32485,21 +32594,10 @@
         TransactionLineDropShipmentButtonComponent.prototype._getSupplierAllowsDropShipmentParameter = function () {
             var _this = this;
             if (this.transactionLine && this.visible) {
-                this._relationService.getSupplierLightById(this.transactionLine.supplierId).then(function (result) {
-                    _this.supplierAllowsDropShipment = result.dropshipment;
+                this._relationService.getSupplierLightById(this.transactionLine.supplierId).then(function (supplier) {
+                    _this.supplierAllowsDropShipment = supplier.dropshipment;
                     _this.detectChanges();
                 });
-                // this._relationService.getRelationById(this.transactionLine.supplierId).then((relations: RelationListObject[]) => {
-                //   const relation: RelationListObject = relations && relations.length > 0 ? relations[0] : null;
-                //   if (relation) {
-                //     this._relationService.getSupplierFullObject(+relation.relationNr).then((result) => {
-                //       if (result) {
-                //         this.supplierAllowsDropShipment = result.dropshipment;
-                //         this.detectChanges();
-                //       }
-                //     });
-                //   }
-                // });
             }
         };
         return TransactionLineDropShipmentButtonComponent;
@@ -32648,6 +32746,7 @@
             _this.showConfirmedDeliveryDate = false;
             _this.isConfirmedDateLater = false;
             _this._subs = [];
+            _this._handled = false;
             return _this;
         }
         TransactionLineConfirmedDeliveryDateButtonComponent.prototype.showClass = function () {
@@ -32674,7 +32773,8 @@
         };
         TransactionLineConfirmedDeliveryDateButtonComponent.prototype._checkConfirmedDeliveryDate = function (line) {
             var _this = this;
-            if (line && line.refTransactions && line.refTransactions.length === 1 && !this.confirmedDeliveryDate) {
+            if (line && line.lineNr === this.transactionLine.lineNr && line.refTransactions && line.refTransactions.length === 1 &&
+                !this.confirmedDeliveryDate && this.visible && !this._handled) {
                 if (line.refTransactions[0].refTransactionType === transactionKind_enum.TransactionKind.PurchaseOrder) {
                     this.service.getMaxConfirmedDeliveryDateForPurchaseOrder(line.refTransactions[0].refTransactionId).then(function (date) {
                         if (date) {
@@ -32682,6 +32782,7 @@
                             _this.showConfirmedDeliveryDate = true;
                             _this._checkDates();
                         }
+                        _this._handled = true;
                     });
                 }
             }
@@ -38881,6 +38982,7 @@
                         case 1:
                             if (_a.sent()) {
                                 this.showDialog = true;
+                                this.detectChanges();
                             }
                             return [2 /*return*/];
                     }
@@ -38911,7 +39013,8 @@
                             useExisting: i0.forwardRef(function () { return TransactionHeaderDeliveryMethodButtonComponent; })
                         }
                     ],
-                    encapsulation: i0.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     TransactionHeaderDeliveryMethodButtonComponent.ctorParameters = function () { return [
@@ -39046,10 +39149,13 @@
                             event.stopPropagation();
                             return [4 /*yield*/, this.lockTransaction()];
                         case 1:
-                            if (_a.sent()) {
-                                this.transactionService.updateHeaderTransactionDeliveryDateDefinitive(this.transactionInfo.uuid, definitive, this.lockAndSave);
-                            }
-                            return [2 /*return*/];
+                            if (!_a.sent()) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this.transactionService.updateHeaderTransactionDeliveryDateDefinitive(this.transactionInfo.uuid, definitive, this.lockAndSave)];
+                        case 2:
+                            _a.sent();
+                            this.detectChanges();
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
                     }
                 });
             });
@@ -39057,6 +39163,7 @@
         TransactionHeaderDeliverydateDefinitiveButtonComponent.prototype.configSet = function () {
             if (this.screenConfigService.configObjects && this.cfgName) {
                 this.hidden = this.screenConfigService.getObjectConfigurationFor(this.cfgName).immediatelyHidden();
+                this.detectChanges();
             }
         };
         return TransactionHeaderDeliverydateDefinitiveButtonComponent;
@@ -41055,14 +41162,6 @@
             enumerable: false,
             configurable: true
         });
-        SearchViewModeService.prototype.calculateClasses = function () {
-            return {
-                'fullscreen': this.fullscreen,
-                'sidebar': !this.fullscreen,
-                'collapsed': this.collapsed,
-                'expanded': !this.collapsed,
-            };
-        };
         SearchViewModeService.prototype.toggleFilter = function () {
             this.showFilterSidebar = !this.showFilterSidebar;
         };
@@ -41118,6 +41217,8 @@
         function SearchFilterPanelComponent(iconCacheService, searchViewModeService) {
             this.iconCacheService = iconCacheService;
             this.searchViewModeService = searchViewModeService;
+            this.viewMode = exports.SearchViewMode;
+            this.barViewMode = exports.SearchbarViewMode;
             this.align = corecomponents_v12.ColumnAlign;
             this.icon = Icon;
             this.resetFilterClick = new i0.EventEmitter();
@@ -41136,7 +41237,7 @@
     SearchFilterPanelComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-search-filter-panel",
-                    template: "\n    <div class=\"search-filter-panel-wrapper\">\n\n      <!--buttons-header-->\n      <div class=\"search-filter-panel-header-wrapper\">\n        <div class=\"search-filter-panel-header\">\n          <span [textContent]=\"'Filters'\"></span>\n          <co-icon class=\"filter-reset-icon clickable\"\n                   [iconData]=\"iconCacheService.getIcon(icon.SyncAlt)\"\n                   (click)=\"onResetButtonClick()\">\n          </co-icon>\n        </div>\n        <co-icon class=\"clickable\"\n                 [iconData]=\"iconCacheService.getIcon(icon.Cancel)\"\n               (click)=\"onCloseButtonClick()\">\n        </co-icon>\n      </div>\n\n      <!--filter-content-->\n      <div class=\"search-filter-wrapper narrow-scrollbar\"\n           [ngClass]=\"searchViewModeService.calculateClasses()\"\n           *ngIf=\" searchViewModeService.showFilterSidebar\">\n        <ng-content></ng-content>\n      </div>\n\n    </div>\n  ",
+                    template: "\n    <div class=\"search-filter-panel-wrapper\">\n\n      <!--buttons-header-->\n      <div class=\"search-filter-panel-header-wrapper\">\n        <div class=\"search-filter-panel-header\">\n          <span [textContent]=\"'Filters'\"></span>\n          <co-icon class=\"filter-reset-icon clickable\"\n                   [iconData]=\"iconCacheService.getIcon(icon.SyncAlt)\"\n                   (click)=\"onResetButtonClick()\">\n          </co-icon>\n        </div>\n        <co-icon class=\"clickable\"\n                 [iconData]=\"iconCacheService.getIcon(icon.Cancel)\"\n               (click)=\"onCloseButtonClick()\">\n        </co-icon>\n      </div>\n\n      <!--filter-content-->\n      <div class=\"search-filter-wrapper narrow-scrollbar\" *ngIf=\" searchViewModeService.showFilterSidebar\"\n           [class.fullscreen]=\"searchViewModeService.activeSearchViewMode === viewMode.FullScreen\"\n           [class.sidebar]=\"searchViewModeService.activeSearchViewMode !== viewMode.FullScreen\"\n           [class.collapsed]=\"searchViewModeService.activeSearchBarViewMode === barViewMode.Collapsed\"\n           [class.expanced]=\"searchViewModeService.activeSearchBarViewMode !== barViewMode.Collapsed\">\n        <ng-content></ng-content>\n      </div>\n\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -41172,11 +41273,12 @@
     ];
 
     var TransactionFilterComponent = /** @class */ (function () {
-        function TransactionFilterComponent(_mappingService, _compFactoryResolver, appRef, injector, searchService) {
+        function TransactionFilterComponent(_mappingService, _compFactoryResolver, appRef, injector, _changeDetector, searchService) {
             this._mappingService = _mappingService;
             this._compFactoryResolver = _compFactoryResolver;
             this.appRef = appRef;
             this.injector = injector;
+            this._changeDetector = _changeDetector;
             this.searchService = searchService;
         }
         Object.defineProperty(TransactionFilterComponent.prototype, "container", {
@@ -41222,6 +41324,7 @@
             var domElem = this._componentRef.hostView
                 .rootNodes[0];
             this._transactionFilterContainer.nativeElement.appendChild(domElem);
+            this._changeDetector.detectChanges();
             this._componentRef.onDestroy(function () {
                 _this.appRef.detachView(_this._componentRef.hostView);
             });
@@ -41232,6 +41335,7 @@
         { type: i0.Component, args: [{
                     selector: "co-transaction-filter",
                     template: "\n    <div #transactionFilter class=\"transaction-filter-wrapper\">\n    </div>\n    ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -41240,6 +41344,7 @@
         { type: i0.ComponentFactoryResolver },
         { type: i0.ApplicationRef },
         { type: i0.Injector },
+        { type: i0.ChangeDetectorRef },
         { type: TransactionSearchService }
     ]; };
     TransactionFilterComponent.propDecorators = {
@@ -41472,10 +41577,11 @@
 
     var TransactionSearchSalesLineSelectTileComponent = /** @class */ (function (_super) {
         __extends(TransactionSearchSalesLineSelectTileComponent, _super);
-        function TransactionSearchSalesLineSelectTileComponent(iconCacheService, transactionService) {
-            var _this = _super.call(this, iconCacheService) || this;
+        function TransactionSearchSalesLineSelectTileComponent(iconCacheService, transactionService, changeDetector) {
+            var _this = _super.call(this, iconCacheService, changeDetector) || this;
             _this.iconCacheService = iconCacheService;
             _this.transactionService = transactionService;
+            _this.changeDetector = changeDetector;
             _this.lineClicked = new i0.EventEmitter();
             return _this;
         }
@@ -41506,17 +41612,18 @@
     }(TransactionSearchTileBaseComponent));
     TransactionSearchSalesLineSelectTileComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-transaction-search-sales-line-select-tile",
-                    template: "\n    <div class=\"co-transaction-search-sales-line-select-tile-wrapper \" observeVisibility #observer=visibilityObserve (visibilityChange)=\"handleVisibilityChange($event)\">\n      <co-transaction-search-sales-order-tile [transaction]=\"transaction\" [showAvatar]=\"true\">\n      </co-transaction-search-sales-order-tile>\n      <div class=\"vertical-line \"></div>\n      <div class=\"order-lines-container co-small-scrollbar\">\n        <div *ngFor=\"let line of lines\" >\n          <co-transaction-line-tile [line]=\"line\" (click)=\"tileClicked(line)\"></co-transaction-line-tile>\n        </div>\n      </div>\n    </div>\n  ",
+                    selector: 'co-transaction-search-sales-line-select-tile',
+                    template: "\n      <div class=\"co-transaction-search-sales-line-select-tile-wrapper \" observeVisibility #observer=visibilityObserve\n           (visibilityChange)=\"handleVisibilityChange($event)\">\n          <co-transaction-search-sales-order-tile [transaction]=\"transaction\" [showAvatar]=\"true\">\n          </co-transaction-search-sales-order-tile>\n          <div class=\"vertical-line \"></div>\n          <div class=\"order-lines-container co-small-scrollbar\">\n              <div *ngFor=\"let line of lines\">\n                  <co-transaction-line-tile [line]=\"line\" (click)=\"tileClicked(line)\"></co-transaction-line-tile>\n              </div>\n          </div>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     TransactionSearchSalesLineSelectTileComponent.ctorParameters = function () { return [
         { type: IconCacheService },
-        { type: TransactionService }
+        { type: TransactionService },
+        { type: i0.ChangeDetectorRef }
     ]; };
     TransactionSearchSalesLineSelectTileComponent.propDecorators = {
-        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-search-sales-line-select-tile",] }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-transaction-search-sales-line-select-tile',] }],
         lineClicked: [{ type: i0.Output }]
     };
 
@@ -42859,7 +42966,7 @@
                   if(result) {*/
                 this._transactionEventService.requestCreateServiceOrderFromTransactionLine.next({ transaction: this.transaction, lineNr: lineNr });
                 //added for bundle purposes so we can pass the value along without the event service. Use the event service in all other cases.
-                this.serviceRequested.emit({ transaction: this.transaction.transactionInfo.transactionNr, lineNr: lineNr });
+                this.serviceRequested.emit({ transactionNr: this.transaction.transactionInfo.transactionNr, transactionId: this.transaction.transactionInfo.id, lineNr: lineNr });
                 /*   }
                  });*/
             }
@@ -43002,8 +43109,9 @@
     TransactionInternalComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-transaction-internal',
-                    template: "\n    <ng-container *ngIf=\"loaded\">\n      <co-click-block></co-click-block>\n      <co-transaction-header\n        *ngIf=\"showHeader\"\n        [transaction]=\"transaction\"\n        [relation]=\"relation\"\n        (relationChange)=\"handleRelationChange($event)\">\n      </co-transaction-header>\n\n      <div class=\"transaction-lines-header\">\n        <co-transaction-quick-access\n          *ngIf=\"showQuickAccess\"\n          class=\"transaction-lines-header-item\"\n          [transaction]=\"transaction\"\n          [relation]=\"relation\"\n          [activeCategory]=\"activeCategory\">\n        </co-transaction-quick-access>\n        <co-transaction-button-bar\n          *ngIf=\"showButtonBar\"\n          class=\"transaction-lines-header-item\"\n          [selectedCategory]=\"activeCategory\"\n          (buttonClicked)=\"handleButtonBarButtonClicked($event)\">\n        </co-transaction-button-bar>\n\n        <div class=\"transaction-lines-header-item right\">\n          <co-avatar\n            class=\"transaction-sales-avatar\"\n            [relationId]=\"transaction.transactionInfo.handledBy\"\n            [screenConfigurationObject]=\"cfgNames.HeaderHandledBy\"\n            screenConfigNativeElement>\n          </co-avatar>\n          <co-avatar\n            class=\"transaction-sales-avatar\"\n            [relationId]=\"transaction.transactionInfo.branch?.relationId\"\n            [screenConfigurationObject]=\"cfgNames.HeaderBranch\"\n            screenConfigNativeElement>\n          </co-avatar>\n          <co-view-mode-buttons\n            *ngIf=\"!shouldShowTiles() && showViewModeButtons\"\n            [showViewModes]=\"[viewModes.List, viewModes.Tiles]\"\n            (viewModeChange)=\"handleViewModeChange($event)\">\n          </co-view-mode-buttons>\n        </div>\n      </div>\n\n      <div class=\"transaction-lines-content-wrapper\">\n        <!--<co-transaction-document-button-bar [transaction]=\"transaction\"></co-transaction-document-button-bar>-->\n        <div class=\"transaction-lines-content\">\n          <div *ngIf=\"activeCategory === category.ServiceOrderService\">\n            <co-transaction-service-overview [posOrderData]=\"posOrderData\" [transaction]=\"transaction\"></co-transaction-service-overview>\n          </div>\n          <div class=\"transaction-tiles-wrapper\" *ngIf=\"activeViewMode === viewModes.Tiles || shouldShowTiles() || transactionPlanning\">\n            <co-transaction-cards\n              [transaction]=\"transaction\"\n              [activeCategory]=\"activeCategory\"\n              [class.planning-cards]=\"transactionPlanning\">\n            </co-transaction-cards>\n          </div>\n          <div class=\"transaction-lines-wrapper\"\n               *ngIf=\"(activeViewMode === viewModes.List && !shouldShowTiles()) && activeCategory !== category.ServiceOrderService && !transactionPlanning\">\n            <co-transaction-lines\n              [transaction]=\"transaction\"\n              [activeCategory]=\"activeCategory\"\n              (saveTransactionLine)=\"saveTransactionLineText($event)\">\n            </co-transaction-lines>\n          </div>\n          <div class=\"transaction-footer-wrapper\">\n            <div class=\"transaction-footer-left\">\n              <co-add-product\n                *ngIf=\"activeCategory === categories.SalesOrderCashRegister ||\n                activeCategory === categories.SalesOrderOverview ||\n                activeCategory === categories.PurchaseOrderOverview ||\n                activeCategory === categories.SalesOrderQuotation ||\n                activeCategory === categories.ServiceOrderOverview\">\n              </co-add-product>\n              <co-transaction-button\n                class=\"custom-width text-rule\"\n                *ngIf=\"activeCategory !== categories.ServiceOrderService\"\n                [iconData]=\"iconCacheService.getIcon(icons.TextSolid)\"\n                (click)=\"handleTransactionText()\">\n              </co-transaction-button>\n            </div>\n\n            <div class=\"transaction-footer-center\">\n              <co-transaction-margin *ngIf=\"activeCategory === categories.SalesOrderMarginInfo\"\n                                     [transactionInfo]=\"transaction.transactionInfo\"\n              ></co-transaction-margin>\n            </div>\n\n            <co-transaction-totals\n              *ngIf=\"activeCategory !== category.ServiceOrderService\"\n              [transactionInfo]=\"transaction.transactionInfo\"\n              [transactionTotal]=\"transaction.transactionTotal\"\n              [showDiscount]=\"true\">\n            </co-transaction-totals>\n          </div>\n        </div>\n\n        <co-transaction-lines-side-panel\n          *ngIf=\"\n          transaction &&\n          (transaction.transactionInfo.transactionKind === transactionKind.CashDesk && !fullyInvoiced())\"\n          [posOrderData]=\"posOrderData\"\n          [transaction]=\"transaction\">\n        </co-transaction-lines-side-panel>\n\n        <co-transaction-line-side-panel\n          *ngIf=\"showSidePanel\"\n          [transaction]=\"transaction\"\n          [transactionInfo]=\"transaction.transactionInfo\"\n          [transactionLine]=\"sidePanelTransactionLine\"\n          [activeCategory]=\"activeCategory\"\n          (cancelClick)=\"showSidePanel = false\">\n        </co-transaction-line-side-panel>\n\n        <!--Popup voor wijzigen volgorde van tekstregels-->\n        <co-transaction-article-text-overview\n          *ngIf=\"showArticleTextOverview\"\n          [transactionInfo]=\"transaction.transactionInfo\"\n          [transactionLine]=\"transactionLine\"\n          (closeClick)=\"closeArticleTextOverview()\"\n          (cancelClick)=\"closeArticleTextOverview()\">\n        </co-transaction-article-text-overview>\n\n        <!--Popup voor aanmaken en updaten transactietekstregels-->\n        <co-transaction-article-text\n          *ngIf=\"showTransactionText\"\n          [header]=\"'ORDER_TEXT_LINE' | localize\"\n          [transactionUuid]=\"transaction.transactionInfo.uuid\"\n          [editText]=\"textToEdit\"\n          [orderLineSetDTO]=\"selectedOrderLineSetDTO\"\n          [transactionLine]=\"transactionLine\"\n          (saveClick)=\"saveTransactionLineText($event)\"\n          (closeClick)=\"closeTransactionText()\"\n          (cancelClick)=\"closeTransactionText()\"\n          (saveOrderLineSetClick)=\"saveOrderLineSet($event)\">\n        </co-transaction-article-text>\n\n        <!--Popup voor aanmaken en updaten artikeltekstregels-->\n        <co-transaction-article-text\n          *ngIf=\"showArticleText\"\n          [header]=\"'PRODUCT_DESCRIPTION_AND_TEXTS' | localize\"\n          [transactionUuid]=\"transaction.transactionInfo.uuid\"\n          [showArticleImageDescription]=\"transactionLine.articleBound\"\n          [showImage]=\"false\"\n          [articleLineNr]=\"transactionLine.lineNr\"\n          [articleRef]=\"transactionLine.articleNumber\"\n          [transactionLine]=\"transactionLine\"\n          [editText]=\"textToEdit\"\n          (saveClick)=\"saveArticleLineText($event)\"\n          (closeClick)=\"closeArticleText()\"\n          (cancelClick)=\"closeArticleText()\">\n        </co-transaction-article-text>\n\n        <co-transaction-copy-order\n          *ngIf=\"showCopyOrderDialog\"\n          [transaction]=\"transaction\"\n          (closeDialog)=\"showCopyOrderDialog = false\">\n        </co-transaction-copy-order>\n      </div>\n    </ng-container>\n  ",
-                    encapsulation: i0.ViewEncapsulation.None
+                    template: "\n    <ng-container *ngIf=\"loaded\">\n      <co-click-block></co-click-block>\n      <co-transaction-header\n        *ngIf=\"showHeader\"\n        [transaction]=\"transaction\"\n        [relation]=\"relation\"\n        (relationChange)=\"handleRelationChange($event)\">\n      </co-transaction-header>\n\n      <div class=\"transaction-lines-header\">\n        <co-transaction-quick-access\n          *ngIf=\"showQuickAccess\"\n          class=\"transaction-lines-header-item\"\n          [transaction]=\"transaction\"\n          [relation]=\"relation\"\n          [activeCategory]=\"activeCategory\">\n        </co-transaction-quick-access>\n        <co-transaction-button-bar\n          *ngIf=\"showButtonBar\"\n          class=\"transaction-lines-header-item\"\n          [selectedCategory]=\"activeCategory\"\n          (buttonClicked)=\"handleButtonBarButtonClicked($event)\">\n        </co-transaction-button-bar>\n\n        <div class=\"transaction-lines-header-item right\">\n          <co-avatar\n            class=\"transaction-sales-avatar\"\n            [relationId]=\"transaction.transactionInfo.handledBy\"\n            [screenConfigurationObject]=\"cfgNames.HeaderHandledBy\"\n            screenConfigNativeElement>\n          </co-avatar>\n          <co-avatar\n            class=\"transaction-sales-avatar\"\n            [relationId]=\"transaction.transactionInfo.branch?.relationId\"\n            [screenConfigurationObject]=\"cfgNames.HeaderBranch\"\n            screenConfigNativeElement>\n          </co-avatar>\n          <co-view-mode-buttons *ngIf=\"!shouldShowTiles() && showViewModeButtons\"\n            [showViewModes]=\"[viewModes.List, viewModes.Tiles]\"\n            (viewModeChange)=\"handleViewModeChange($event)\">\n          </co-view-mode-buttons>\n        </div>\n      </div>\n\n      <div class=\"transaction-lines-content-wrapper\">\n        <!--<co-transaction-document-button-bar [transaction]=\"transaction\"></co-transaction-document-button-bar>-->\n        <div class=\"transaction-lines-content\">\n          <div *ngIf=\"activeCategory === category.ServiceOrderService\">\n            <co-transaction-service-overview [posOrderData]=\"posOrderData\" [transaction]=\"transaction\"></co-transaction-service-overview>\n          </div>\n          <div class=\"transaction-tiles-wrapper\" *ngIf=\"activeViewMode === viewModes.Tiles || shouldShowTiles() || transactionPlanning\">\n            <co-transaction-cards\n              [transaction]=\"transaction\"\n              [activeCategory]=\"activeCategory\"\n              [class.planning-cards]=\"transactionPlanning\">\n            </co-transaction-cards>\n          </div>\n          <div class=\"transaction-lines-wrapper\"\n               *ngIf=\"(activeViewMode === viewModes.List && !shouldShowTiles()) && activeCategory !== category.ServiceOrderService && !transactionPlanning\">\n            <co-transaction-lines\n              [transaction]=\"transaction\"\n              [activeCategory]=\"activeCategory\"\n              (saveTransactionLine)=\"saveTransactionLineText($event)\">\n            </co-transaction-lines>\n          </div>\n          <div class=\"transaction-footer-wrapper\">\n            <div class=\"transaction-footer-left\">\n              <co-add-product\n                *ngIf=\"activeCategory === categories.SalesOrderCashRegister ||\n                activeCategory === categories.SalesOrderOverview ||\n                activeCategory === categories.PurchaseOrderOverview ||\n                activeCategory === categories.SalesOrderQuotation ||\n                activeCategory === categories.ServiceOrderOverview\">\n              </co-add-product>\n              <co-transaction-button *ngIf=\"activeCategory !== categories.ServiceOrderService\"\n                class=\"custom-width text-rule\"\n                [iconData]=\"iconCacheService.getIcon(icons.TextSolid)\"\n                (click)=\"handleTransactionText()\">\n              </co-transaction-button>\n            </div>\n\n            <div class=\"transaction-footer-center\">\n              <co-transaction-margin *ngIf=\"activeCategory === categories.SalesOrderMarginInfo\"\n                                     [transactionInfo]=\"transaction.transactionInfo\"\n              ></co-transaction-margin>\n            </div>\n            <co-transaction-totals *ngIf=\"activeCategory !== category.ServiceOrderService\"\n              [transactionInfo]=\"transaction.transactionInfo\"\n              [transactionTotal]=\"transaction.transactionTotal\"\n              [showDiscount]=\"true\">\n            </co-transaction-totals>\n          </div>\n        </div>\n\n        <co-transaction-lines-side-panel *ngIf=\"transaction && (transaction.transactionInfo.transactionKind === transactionKind.CashDesk && !fullyInvoiced())\"\n          [posOrderData]=\"posOrderData\"\n          [transaction]=\"transaction\">\n        </co-transaction-lines-side-panel>\n\n        <co-transaction-line-side-panel *ngIf=\"showSidePanel\"\n          [transaction]=\"transaction\"\n          [transactionInfo]=\"transaction.transactionInfo\"\n          [transactionLine]=\"sidePanelTransactionLine\"\n          [activeCategory]=\"activeCategory\"\n          (cancelClick)=\"showSidePanel = false\">\n        </co-transaction-line-side-panel>\n\n        <!--Popup voor wijzigen volgorde van tekstregels-->\n        <co-transaction-article-text-overview *ngIf=\"showArticleTextOverview\"\n          [transactionInfo]=\"transaction.transactionInfo\"\n          [transactionLine]=\"transactionLine\"\n          (closeClick)=\"closeArticleTextOverview()\"\n          (cancelClick)=\"closeArticleTextOverview()\">\n        </co-transaction-article-text-overview>\n\n        <!--Popup voor aanmaken en updaten transactietekstregels-->\n        <co-transaction-article-text *ngIf=\"showTransactionText\"\n          [header]=\"'ORDER_TEXT_LINE' | localize\"\n          [transactionUuid]=\"transaction.transactionInfo.uuid\"\n          [editText]=\"textToEdit\"\n          [orderLineSetDTO]=\"selectedOrderLineSetDTO\"\n          [transactionLine]=\"transactionLine\"\n          (saveClick)=\"saveTransactionLineText($event)\"\n          (closeClick)=\"closeTransactionText()\"\n          (cancelClick)=\"closeTransactionText()\"\n          (saveOrderLineSetClick)=\"saveOrderLineSet($event)\">\n        </co-transaction-article-text>\n\n        <!--Popup voor aanmaken en updaten artikeltekstregels-->\n        <co-transaction-article-text *ngIf=\"showArticleText\"\n          [header]=\"'PRODUCT_DESCRIPTION_AND_TEXTS' | localize\"\n          [transactionUuid]=\"transaction.transactionInfo.uuid\"\n          [showArticleImageDescription]=\"transactionLine.articleBound\"\n          [showImage]=\"false\"\n          [articleLineNr]=\"transactionLine.lineNr\"\n          [articleRef]=\"transactionLine.articleNumber\"\n          [transactionLine]=\"transactionLine\"\n          [editText]=\"textToEdit\"\n          (saveClick)=\"saveArticleLineText($event)\"\n          (closeClick)=\"closeArticleText()\"\n          (cancelClick)=\"closeArticleText()\">\n        </co-transaction-article-text>\n\n        <co-transaction-copy-order *ngIf=\"showCopyOrderDialog\"\n          [transaction]=\"transaction\"\n          (closeDialog)=\"showCopyOrderDialog = false\">\n        </co-transaction-copy-order>\n      </div>\n    </ng-container>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     TransactionInternalComponent.ctorParameters = function () { return [
@@ -43113,6 +43221,7 @@
             }), this.transactionService.relationUpdated.subscribe(function (relation) {
                 if (relation !== undefined) {
                     _this.loaded = true;
+                    _this.changeDetector.markForCheck();
                 }
             }));
         };
@@ -43123,6 +43232,7 @@
         TransactionHeaderRelationComponent.prototype.relationSet = function () {
             _super.prototype.relationSet.call(this);
             this._setRelationAddress();
+            this.changeDetector.markForCheck();
         };
         TransactionHeaderRelationComponent.prototype.transactionInfoSet = function () {
             _super.prototype.transactionInfoSet.call(this);
@@ -43155,7 +43265,8 @@
                             useExisting: i0.forwardRef(function () { return TransactionHeaderRelationComponent; })
                         }
                     ],
-                    encapsulation: i0.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     TransactionHeaderRelationComponent.propDecorators = {
@@ -43386,7 +43497,7 @@
         TransactionHeaderRemainingAmountComponent.prototype.ngOnInit = function () {
             var _this = this;
             this._subs.push(this._transactionEventService.quantitySelectedLineChanged.subscribe(function (changed) {
-                if (changed) {
+                if (changed && !_this.transactionService.manualSaveParam) {
                     var request = new calculateAmountToPayRequest.CalculateAmountToPayRequest();
                     request.transactionUuid = _this.transactionUuid;
                     _this._paymentConnectorService.calculateAmountToPayWithLineSelection(request).then(function (data) {
@@ -43640,6 +43751,7 @@
         { type: i0.Component, args: [{
                     selector: "co-quick-send-button",
                     template: "\n    <div class=\"quick-send-button-wrapper\" [class.disabled]=\"showLoader\" [class.no-dialog]=\"!showSendMethodDialogIcon\">\n      <co-loader *ngIf=\"showLoader\"></co-loader>\n      <div class=\"icon-wrapper-flat-left\" (click)=\"sendIconClicked.emit($event)\">\n        <div class=\"icons-and-title-wrapper\">\n          <div class=\"icons-wrapper\">\n            <co-icon [iconData]=\"iconCacheService.getIcon(icon)\" class=\"icon-send\"></co-icon>\n            <co-icon *ngIf=\"showSendMethodIcon\" class=\"icon-method\"\n              [iconData]=\"iconCacheService.getIcon(defaultMethodIcon ? defaultMethodIcon : icons.AtSolid)\"></co-icon>\n            </div>\n          <span class=\"send-button-title\" [textContent]=\"title | localize\"></span>\n        </div>\n      </div>\n      <div class=\"icons-spacer\" *ngIf=\"showSendMethodDialogIcon\"></div>\n      <div class=\"icon-wrapper-flat-right\" *ngIf=\"showSendMethodDialogIcon\" (click)=\"openSendMethodDialog.emit($event)\">\n        <co-icon [iconData]=\"iconCacheService.getIcon(icons.EllipsisVerticalSolid)\"></co-icon>\n      </div>\n    </div>\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -44931,7 +45043,7 @@
     TransactionLineSidePanelDefaultComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-line-side-panel-default",
-                    template: "\n    <div class=\"default-details-wrapper form-and-buttons\">\n      <co-collapsible\n        [iconData]=\"iconService.getIcon(icons.TriangleUp)\"\n        [headerTitle]=\"'PRICING' | localize\"\n        [expandButtonLast]=\"true\"\n        [expanded]=\"true\"\n      >\n        <div class=\"collapsible-content-wrapper\">\n          <div class=\"side-panel-input-row\">\n            <co-transaction-line-quantity class=\"side-panel-input\" [transactionLine]=\"transactionLine\"></co-transaction-line-quantity>\n            <co-transaction-line-price class=\"side-panel-input\" [transactionLine]=\"transactionLine\" [transactionInfo]=\"transactionInfo\"></co-transaction-line-price>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'NET_LINE_TOTAL' | localize\" [model]=\"transactionLine.netLineTotal\" [readonly]=\"true\"></co-input-text>\n          </div>\n        </div>\n      </co-collapsible>\n      <co-collapsible\n        [iconData]=\"iconService.getIcon(icons.TriangleUp)\"\n        [headerTitle]=\"'LOGISTICS_AND_PLANNING' | localize\"\n        [expandButtonLast]=\"true\"\n        [expanded]=\"true\"\n      >\n        <div class=\"collapsible-content-wrapper\">\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'ASSEMBLY_TIME' | localize\" [readonly]=\"readonly\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'ASSEMBLY_COSTS' | localize\" [type]=\"'number'\" [model]=\"transactionLine.assemblyCost\" [readonly]=\"readonly\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'MODIFICATION_TIME' | localize\" [readonly]=\"readonly\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'IN_OUT_COLLECTION' | localize\" [readonly]=\"readonly\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-transaction-line-supplier-button class=\"side-panel-input\" [transactionLine]=\"transactionLine\" [transactionInfo]=\"transactionInfo\"></co-transaction-line-supplier-button>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'ARTICLE_NR_SUPPLIER' | localize\" [model]=\"transactionLine.supplierArticleNumber\" [readonly]=\"readonly\"></co-input-text>\n          </div>\n        </div>\n      </co-collapsible>\n\n      <co-collapsible\n        [iconData]=\"iconService.getIcon(icons.TriangleUp)\"\n        [headerTitle]=\"'OTHER' | localize\"\n        [expandButtonLast]=\"true\"\n        [expanded]=\"true\"\n      >\n        <div class=\"collapsible-content-wrapper\">\n          <div class=\"side-panel-input-row\">\n            <co-transaction-line-description class=\"side-panel-input\"\n                                             [transactionLine]=\"transactionLine\"></co-transaction-line-description>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-transaction-line-reference class=\"side-panel-input\" [transactionLine]=\"transactionLine\"></co-transaction-line-reference>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'CUSTOMER' | localize\" [readonly]=\"readonly\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'ORDER_RULESET' | localize\" [readonly]=\"readonly\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'LAST_EDITED_DATE' | localize\" [readonly]=\"readonly\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'LAST_EDITED_USER' | localize\" [readonly]=\"readonly\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'FABRICATION_COST' | localize\" [readonly]=\"readonly\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'FABRICATION_COST_LINE_TOTAL' | localize\" [readonly]=\"readonly\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'TRANSPORT_COST' | localize\" [readonly]=\"readonly\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'TRANSPORT_COST_LINE_TOTAL' | localize\" [readonly]=\"readonly\"></co-input-text>\n          </div>\n        </div>\n      </co-collapsible>\n    </div>\n  ",
+                    template: "\n    <div class=\"default-details-wrapper form-and-buttons\">\n      <co-collapsible\n        [iconData]=\"iconService.getIcon(icons.TriangleUp)\"\n        [headerTitle]=\"'PRICING' | localize\"\n        [expandButtonLast]=\"true\"\n        [expanded]=\"true\"\n      >\n        <div class=\"collapsible-content-wrapper\">\n          <div class=\"side-panel-input-row\">\n            <co-transaction-line-quantity class=\"side-panel-input\" [transactionLine]=\"transactionLine\"></co-transaction-line-quantity>\n            <co-transaction-line-price class=\"side-panel-input\" [transactionLine]=\"transactionLine\" [transactionInfo]=\"transactionInfo\"></co-transaction-line-price>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'NET_LINE_TOTAL' | localize\" [model]=\"transactionLine.netLineTotal\" [readonly]=\"true\"></co-input-text>\n          </div>\n        </div>\n      </co-collapsible>\n      <co-collapsible\n        [iconData]=\"iconService.getIcon(icons.TriangleUp)\"\n        [headerTitle]=\"'LOGISTICS_AND_PLANNING' | localize\"\n        [expandButtonLast]=\"true\"\n        [expanded]=\"true\"\n      >\n        <div class=\"collapsible-content-wrapper\">\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'ASSEMBLY_TIME' | localize\" [readonly]=\"readonly\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'ASSEMBLY_COSTS' | localize\" [type]=\"'number'\" [model]=\"transactionLine.assemblyCost\" [readonly]=\"readonly\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'MODIFICATION_TIME' | localize\" [readonly]=\"readonly\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'IN_OUT_COLLECTION' | localize\" [readonly]=\"readonly\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-transaction-line-supplier-button class=\"side-panel-input\" [transactionLine]=\"transactionLine\" [transactionInfo]=\"transactionInfo\"></co-transaction-line-supplier-button>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'ARTICLE_NR_SUPPLIER' | localize\" [model]=\"transactionLine.supplierArticleNumber\" [readonly]=\"readonly\"></co-input-text>\n          </div>\n        </div>\n      </co-collapsible>\n\n      <co-collapsible\n        [iconData]=\"iconService.getIcon(icons.TriangleUp)\"\n        [headerTitle]=\"'OTHER' | localize\"\n        [expandButtonLast]=\"true\"\n        [expanded]=\"true\"\n      >\n        <div class=\"collapsible-content-wrapper\">\n          <div class=\"side-panel-input-row\">\n            <co-transaction-line-description class=\"side-panel-input\"\n                                             [customHeight]=\"false\"\n                                             [transactionLine]=\"transactionLine\"></co-transaction-line-description>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-transaction-line-reference class=\"side-panel-input\" [transactionLine]=\"transactionLine\"></co-transaction-line-reference>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'CUSTOMER' | localize\" [readonly]=\"readonly\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'ORDER_RULESET' | localize\" [readonly]=\"readonly\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'LAST_EDITED_DATE' | localize\" [readonly]=\"readonly\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'LAST_EDITED_USER' | localize\" [readonly]=\"readonly\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'FABRICATION_COST' | localize\" [readonly]=\"readonly\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'FABRICATION_COST_LINE_TOTAL' | localize\" [readonly]=\"readonly\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'TRANSPORT_COST' | localize\" [readonly]=\"readonly\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'TRANSPORT_COST_LINE_TOTAL' | localize\" [readonly]=\"readonly\"></co-input-text>\n          </div>\n        </div>\n      </co-collapsible>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -47776,7 +47888,8 @@
             this.searchViewModeService = searchViewModeService;
             this.icon = Icon;
             this.contentViewModes = corecomponents_v12.ContentViewMode;
-            this.searchViewModes = exports.SearchViewMode;
+            this.viewMode = exports.SearchViewMode;
+            this.barViewMode = exports.SearchbarViewMode;
             this.iconSlideIn = this.iconCacheService.getIcon(this.icon.SlideIn);
             this.iconResize = this.iconCacheService.getIcon(this.icon.ExpandSolid);
             this.iconCancel = this.iconCacheService.getIcon(this.icon.XSolid);
@@ -47815,7 +47928,7 @@
     SearchHeaderButtonsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-search-header-buttons",
-                    template: "\n    <div class=\"search-header-buttons-wrapper\">\n      <div class=\"upper-header\">\n        <div class=\"header-buttons-wrapper\">\n          <div class=\"close-search-button-wrapper button-wrapper\" *ngIf=\"!fullscreen\"\n               [ngClass]=\"searchViewModeService.calculateClasses()\">\n            <co-button [iconData]=\"iconResize\"\n                       class=\"toggle-sidebar-button transparent\"\n                       (click)=\"onResizeClick()\"></co-button>\n            <co-button [iconData]=\"iconCancel\"\n                       class=\"toggle-sidebar-button transparent\"\n                       (click)=\"onCloseSearchClick()\">\n            </co-button>\n          </div>\n        </div>\n      </div>\n      <div class=\"header-searchbar-wrapper\">\n        <div class=\"header-searchbar-title\" [textContent]=\"headerLabel | localize\" *ngIf=\"fullscreen\"\n             @showHideLabel></div>\n        <co-button class=\"add-button transparent\" [iconData]=\"iconCacheService.getIcon(icon.PlusSimple)\"\n                   (click)=\"onAddButtonClick()\"></co-button>\n\n        <div class=\"search-header-content-wrapper\" [ngClass]=\"searchViewModeService.calculateClasses()\">\n          <ng-content></ng-content>\n        </div>\n\n        <div class=\"header-search-bar-button-wrapper button-wrapper\">\n          <co-button class=\"search-filter-button\"\n                     [iconData]=\"iconCacheService.getIcon(icon.BarsFilter)\"\n                     (click)=\"onFilterButtonClick()\">\n          </co-button>\n          <co-button *ngIf=\"fullscreen\" [iconData]=\"iconSlideIn\"\n                     class=\"toggle-sidebar-button transparent fullscreen\"\n                     (click)=\"onResizeClick()\"></co-button>\n        </div>\n      </div>\n      <div class=\"view-mode-buttons-wrapper\">\n        <co-view-mode-buttons\n          *ngIf=\"fullscreen\"\n          [showViewModes]=\"[contentViewModes.Tiles, contentViewModes.Grid]\"\n          (viewModeChange)=\"onViewModeChange($event)\">\n        </co-view-mode-buttons>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"search-header-buttons-wrapper\">\n      <div class=\"upper-header\">\n        <div class=\"header-buttons-wrapper\">\n          <div class=\"close-search-button-wrapper button-wrapper\" *ngIf=\"!fullscreen\"\n               [class.fullscreen]=\"searchViewModeService.activeSearchViewMode === viewMode.FullScreen\"\n               [class.sidebar]=\"searchViewModeService.activeSearchViewMode !== viewMode.FullScreen\"\n               [class.collapsed]=\"searchViewModeService.activeSearchBarViewMode === barViewMode.Collapsed\"\n               [class.expanced]=\"searchViewModeService.activeSearchBarViewMode !== barViewMode.Collapsed\">\n            <co-button [iconData]=\"iconResize\"\n                       class=\"toggle-sidebar-button transparent\"\n                       (click)=\"onResizeClick()\"></co-button>\n            <co-button [iconData]=\"iconCancel\"\n                       class=\"toggle-sidebar-button transparent\"\n                       (click)=\"onCloseSearchClick()\">\n            </co-button>\n          </div>\n        </div>\n      </div>\n      <div class=\"header-searchbar-wrapper\">\n        <div class=\"header-searchbar-title\" [textContent]=\"headerLabel | localize\" *ngIf=\"fullscreen\"\n             @showHideLabel></div>\n        <co-button class=\"add-button transparent\" [iconData]=\"iconCacheService.getIcon(icon.PlusSimple)\"\n                   (click)=\"onAddButtonClick()\"></co-button>\n\n        <div class=\"search-header-content-wrapper\"\n             [class.fullscreen]=\"searchViewModeService.activeSearchViewMode === viewMode.FullScreen\"\n             [class.sidebar]=\"searchViewModeService.activeSearchViewMode !== viewMode.FullScreen\"\n             [class.collapsed]=\"searchViewModeService.activeSearchBarViewMode === barViewMode.Collapsed\"\n             [class.expanced]=\"searchViewModeService.activeSearchBarViewMode !== barViewMode.Collapsed\">\n          <ng-content></ng-content>\n        </div>\n\n        <div class=\"header-search-bar-button-wrapper button-wrapper\">\n          <co-button class=\"search-filter-button\"\n                     [iconData]=\"iconCacheService.getIcon(icon.BarsFilter)\"\n                     (click)=\"onFilterButtonClick()\">\n          </co-button>\n          <co-button *ngIf=\"fullscreen\" [iconData]=\"iconSlideIn\"\n                     class=\"toggle-sidebar-button transparent fullscreen\"\n                     (click)=\"onResizeClick()\"></co-button>\n        </div>\n      </div>\n      <div class=\"view-mode-buttons-wrapper\">\n        <co-view-mode-buttons\n          *ngIf=\"fullscreen\"\n          [showViewModes]=\"[contentViewModes.Tiles, contentViewModes.Grid]\"\n          (viewModeChange)=\"onViewModeChange($event)\">\n        </co-view-mode-buttons>\n      </div>\n    </div>\n  ",
                     animations: [
                         animations.trigger("showHideLabel", [
                             animations.state("void", animations.style({ opacity: 0 })),
@@ -47865,6 +47978,8 @@
     var SearchComponent = /** @class */ (function () {
         function SearchComponent(searchViewModeService) {
             this.searchViewModeService = searchViewModeService;
+            this.viewMode = exports.SearchViewMode;
+            this.barViewMode = exports.SearchbarViewMode;
             this.icon = Icon;
             this.headerLabel = '';
             this.addClick = new i0.EventEmitter();
@@ -47892,7 +48007,7 @@
     SearchComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-search',
-                    template: "\n    <div class=\"search-main-wrapper\">\n      <div class=\"search-wrapper\" [ngClass]=searchViewModeService.calculateClasses()>\n\n        <!--filter panel-->\n        <div class=\"search-filter-panel narrow-scrollbar\"\n             [ngClass]=\"searchViewModeService.calculateClasses()\"\n             *ngIf=\"searchViewModeService.showFilterSidebar\" @showHideFilterSidebar>\n          <co-search-filter-panel (resetFilterClick)=\"onResetFilterClick()\">\n            <ng-content select=\"[search-filter-panel]\"></ng-content>\n          </co-search-filter-panel>\n        </div>\n\n        <!--search header-->\n        <div class=\"search-header-result-wrapper co-small-scrollbar\">\n          <div class=\"search-header\">\n            <co-search-header-buttons\n              [headerLabel]=\"headerLabel\"\n              (addClick)=\"onAddClick()\">\n              <ng-content select=\"[search-header]\"></ng-content>\n            </co-search-header-buttons>\n          </div>\n\n          <!--search result-->\n          <div class=\"search-result\" [ngClass]=\"searchViewModeService.calculateClasses()\">\n            <ng-content select=\"[search-result]\"></ng-content>\n          </div>\n        </div>\n      </div>\n\n      <!--routing content-->\n      <div class=\"search-content-wrapper\"\n           [ngClass]=\"searchViewModeService.calculateClasses()\">\n        <!--routing content?-->\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"search-main-wrapper\">\n      <div class=\"search-wrapper\" \n           [class.fullscreen]=\"searchViewModeService.activeSearchViewMode === viewMode.FullScreen\"\n           [class.sidebar]=\"searchViewModeService.activeSearchViewMode !== viewMode.FullScreen\"\n           [class.collapsed]=\"searchViewModeService.activeSearchBarViewMode === barViewMode.Collapsed\"\n           [class.expanced]=\"searchViewModeService.activeSearchBarViewMode !== barViewMode.Collapsed\">\n\n        <!--filter panel-->\n        <div class=\"search-filter-panel narrow-scrollbar\" *ngIf=\"searchViewModeService.showFilterSidebar\" @showHideFilterSidebar\n             [class.fullscreen]=\"searchViewModeService.activeSearchViewMode === viewMode.FullScreen\"\n             [class.sidebar]=\"searchViewModeService.activeSearchViewMode !== viewMode.FullScreen\"\n             [class.collapsed]=\"searchViewModeService.activeSearchBarViewMode === barViewMode.Collapsed\"\n             [class.expanced]=\"searchViewModeService.activeSearchBarViewMode !== barViewMode.Collapsed\">\n          <co-search-filter-panel (resetFilterClick)=\"onResetFilterClick()\">\n            <ng-content select=\"[search-filter-panel]\"></ng-content>\n          </co-search-filter-panel>\n        </div>\n\n        <!--search header-->\n        <div class=\"search-header-result-wrapper co-small-scrollbar\">\n          <div class=\"search-header\">\n            <co-search-header-buttons\n              [headerLabel]=\"headerLabel\"\n              (addClick)=\"onAddClick()\">\n              <ng-content select=\"[search-header]\"></ng-content>\n            </co-search-header-buttons>\n          </div>\n\n          <!--search result-->\n          <div class=\"search-result\"\n               [class.fullscreen]=\"searchViewModeService.activeSearchViewMode === viewMode.FullScreen\"\n               [class.sidebar]=\"searchViewModeService.activeSearchViewMode !== viewMode.FullScreen\"\n               [class.collapsed]=\"searchViewModeService.activeSearchBarViewMode === barViewMode.Collapsed\"\n               [class.expanced]=\"searchViewModeService.activeSearchBarViewMode !== barViewMode.Collapsed\">\n            <ng-content select=\"[search-result]\"></ng-content>\n          </div>\n        </div>\n      </div>\n\n      <!--routing content-->\n      <div class=\"search-content-wrapper\"\n           [class.fullscreen]=\"searchViewModeService.activeSearchViewMode === viewMode.FullScreen\"\n           [class.sidebar]=\"searchViewModeService.activeSearchViewMode !== viewMode.FullScreen\"\n           [class.collapsed]=\"searchViewModeService.activeSearchBarViewMode === barViewMode.Collapsed\"\n           [class.expanced]=\"searchViewModeService.activeSearchBarViewMode !== barViewMode.Collapsed\">\n        <!--routing content?-->\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
                     animations: [
                         animations.trigger("showHideFilterSidebar", [
                             animations.state("void", animations.style({ transform: 'translateX(-100%)' })),
@@ -49803,6 +49918,7 @@
             set: function (kind) {
                 if (!(kind === null || kind === undefined)) {
                     this.transactionSearchService.transactionType = kind;
+                    this.transactionSearchService.searchTransactions();
                 }
             },
             enumerable: false,
@@ -53801,7 +53917,7 @@
                     switch (_d.label) {
                         case 0:
                             _a = this;
-                            return [4 /*yield*/, this.transactionService.getPriority("NL")];
+                            return [4 /*yield*/, this.transactionService.getPriority('NL')];
                         case 1:
                             _a.priorityDomainColl = _d.sent();
                             _b = this;
@@ -53809,7 +53925,7 @@
                         case 2:
                             _b.causeCodeColl = _d.sent();
                             _c = this;
-                            return [4 /*yield*/, this.transactionService.getEntryTypes("NL")];
+                            return [4 /*yield*/, this.transactionService.getEntryTypes('NL')];
                         case 3:
                             _c.entryTypeColl = _d.sent();
                             this.priorityModel = this.priorityDomainColl.find(function (p) { return p.codeAsNumber === _this.transactionServiceInfo.priority; });
@@ -53840,6 +53956,7 @@
                             return [4 /*yield*/, this.transactionService.getHistoricActivities(this.transactionInfo.id)];
                         case 1:
                             _a.activities = _b.sent();
+                            this.detectChanges();
                             return [2 /*return*/];
                     }
                 });
@@ -53849,8 +53966,11 @@
             this.getActivities();
         };
         TransactionServiceOverviewComponent.prototype.fullActivitiesRefreshRequested = function () {
+            var _this = this;
             this.getActivities();
-            this.openActivities.getActivities();
+            this.openActivities.getActivities().then(function () {
+                _this.detectChanges();
+            });
         };
         TransactionServiceOverviewComponent.prototype.fetchDocuments = function () {
             var _this = this;
@@ -53864,6 +53984,7 @@
                         case 1: return [2 /*return*/, _a.documentBody = _b.sent()];
                     }
                 }); }); });
+                _this.detectChanges();
             });
         };
         TransactionServiceOverviewComponent.prototype.setPriority = function (priority) {
@@ -53881,6 +54002,7 @@
                             return [4 /*yield*/, this.transactionService.updateServiceHeaderPriority(this.transactionServiceInfo.priority, true)];
                         case 1:
                             _a.sent();
+                            this.detectChanges();
                             return [2 /*return*/];
                     }
                 });
@@ -53901,6 +54023,7 @@
                             return [4 /*yield*/, this.transactionService.updateServiceHeaderCauseCode(this.transactionServiceInfo.causeCode, true)];
                         case 1:
                             _a.sent();
+                            this.detectChanges();
                             return [2 /*return*/];
                     }
                 });
@@ -53921,6 +54044,7 @@
                             return [4 /*yield*/, this.transactionService.updateServiceHeaderEntryType(this.transactionServiceInfo.entryType, true)];
                         case 1:
                             _a.sent();
+                            this.detectChanges();
                             return [2 /*return*/];
                     }
                 });
@@ -53936,7 +54060,7 @@
                             response = _a.sent();
                             if (!response) return [3 /*break*/, 3];
                             this.fetchDocuments();
-                            return [4 /*yield*/, this._dialogService.showToast("DATA_SAVED", true)];
+                            return [4 /*yield*/, this._dialogService.showToast('DATA_SAVED', true)];
                         case 2:
                             _a.sent();
                             _a.label = 3;
@@ -53955,7 +54079,7 @@
                             response = _a.sent();
                             if (!(response && response.success)) return [3 /*break*/, 3];
                             this.fetchDocuments();
-                            return [4 /*yield*/, this._dialogService.showToast("DATA_SAVED", true)];
+                            return [4 /*yield*/, this._dialogService.showToast('DATA_SAVED', true)];
                         case 2:
                             _a.sent();
                             _a.label = 3;
@@ -53980,7 +54104,7 @@
         };
         TransactionServiceOverviewComponent.prototype.sortDocumentList = function () {
             sortUtils.SortUtils.SortObjectArray(this.documents, [{
-                    property: "documentId",
+                    property: 'documentId',
                     direction: sortDirection.SortDirection.Ascending,
                     type: sortType_enum.SortType.Number
                 }]);
@@ -53989,8 +54113,8 @@
     }(TransactionBaseComponent));
     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            <div class=\"service-message\">\n              <label class=\"label service-label\" [textContent]=\"'SERVICE_REPORT'| localize\"></label>\n              <span  *ngIf=\"transactionServiceInfo && transactionServiceInfo.wizardQuestionsAndAnswers\"\n                                 [textContent]=\"transactionServiceInfo.wizardQuestionsAndAnswers\" [screenConfigurationObject]=\"cfgNames.ServiceWizardMessage\" screenConfigNativeElement\n                                 ></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)\" [screenConfigurationObject]=\"cfgNames.ServiceOverviewImage\"\n                           (documentDeleted)=\"deleteDocument($event)\"\n                           [label]=\"'ADD_IMAGES' | localize\"\n                           [documents]=\"documents\"\n                           [isEditable]=\"false\" > <!---->\n          </co-files-upload>\n          </div>\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\" [screenConfigurationObject]=\"cfgNames.ServicePriority\"\n                                 (modelChange)=\"setPriority($event)\"></co-list-of-values> <!---->\n              <co-list-of-values [label]=\"'CAUSE_CODE' | localize\" displayField=\"description\" [model]=\"causeCodeModel\"\n                                 [collection]=\"causeCodeColl\" [screenConfigurationObject]=\"cfgNames.ServiceCauseCode\"\n                                 (modelChange)=\"setCauseCode($event)\"></co-list-of-values> <!---->\n              <co-list-of-values [label]=\"'ENTRY_TYPE' | localize\" displayField=\"description\" [model]=\"entryTypeModel\"\n                                 [collection]=\"entryTypeColl\" [screenConfigurationObject]=\"cfgNames.ServiceEntryType\"\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\" [screenConfigurationObject]=\"cfgNames.HeaderActivityList\"\n                                        [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\" [screenConfigurationObject]=\"cfgNames.HeaderTaskCreator\"\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\" [screenConfigurationObject]=\"cfgNames.HeaderHistActivities\" screenConfigNativeElement></label>\n            <co-activity-list [activities]=\"activities\" [screenConfigurationObject]=\"cfgNames.HeaderHistActivities\"></co-activity-list>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  ",
+                    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                      <div class=\"service-message\">\n                          <label class=\"label service-label\" [textContent]=\"'SERVICE_REPORT'| localize\"></label>\n                          <span *ngIf=\"transactionServiceInfo && transactionServiceInfo.wizardQuestionsAndAnswers\"\n                                [textContent]=\"transactionServiceInfo.wizardQuestionsAndAnswers\"\n                                [screenConfigurationObject]=\"cfgNames.ServiceWizardMessage\" screenConfigNativeElement\n                          ></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                                       [screenConfigurationObject]=\"cfgNames.ServiceOverviewImage\"\n                                       (documentDeleted)=\"deleteDocument($event)\"\n                                       [label]=\"'ADD_IMAGES' | localize\"\n                                       [documents]=\"documents\"\n                                       [isEditable]=\"false\">\n                      </co-files-upload>\n                  </div>\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\" [screenConfigurationObject]=\"cfgNames.ServicePriority\"\n                                             (modelChange)=\"setPriority($event)\"></co-list-of-values>\n                          <co-list-of-values [label]=\"'CAUSE_CODE' | localize\" displayField=\"description\" [model]=\"causeCodeModel\"\n                                             [collection]=\"causeCodeColl\" [screenConfigurationObject]=\"cfgNames.ServiceCauseCode\"\n                                             (modelChange)=\"setCauseCode($event)\"></co-list-of-values>\n                          <co-list-of-values [label]=\"'ENTRY_TYPE' | localize\" displayField=\"description\" [model]=\"entryTypeModel\"\n                                             [collection]=\"entryTypeColl\" [screenConfigurationObject]=\"cfgNames.ServiceEntryType\"\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\"\n                                                  [screenConfigurationObject]=\"cfgNames.HeaderActivityList\"\n                                                  [table]=\"TableName.Transactions\" [key]=\"transactionInfo.id.toString()\"\n                                                  (refreshRequested)=\"finishedActivitiesRefreshRequested()\">\n                      </co-component-activity-list>\n                      <co-task-creator [table]=\"TableName.Transactions\" [remarkAndWorkKey]=\"transactionInfo.id.toString()\"\n                                       [taskKey]=\"transactionInfo.transactionNr.toString()\"\n                                       [author]=\"transactionService.loggedInUser\" [branchNo]=\"transactionInfo.branch.relationNr.toString()\"\n                                       [workflowCategoryType]=\"WorkflowCategoryType.ServiceOrder\"\n                                       [screenConfigurationObject]=\"cfgNames.HeaderTaskCreator\"\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\"\n                             [screenConfigurationObject]=\"cfgNames.HeaderHistActivities\" screenConfigNativeElement></label>\n                      <co-activity-list [activities]=\"activities\"\n                                        [screenConfigurationObject]=\"cfgNames.HeaderHistActivities\"></co-activity-list>\n                  </div>\n              </div>\n          </div>\n      </div>\n\n  ",
                     providers: [{
                             provide: corecomponents_v12.SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return TransactionServiceOverviewComponent; })
@@ -54011,7 +54135,7 @@
     ]; };
     TransactionServiceOverviewComponent.propDecorators = {
         openActivities: [{ type: i0.ViewChild, args: [i10.ComponentActivityListComponent,] }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-service-overview",] }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-transaction-service-overview',] }],
         posOrderData: [{ type: i0.Input }]
     };
 
@@ -56296,10 +56420,11 @@
     ];
 
     var TransactionTagsComponent = /** @class */ (function () {
-        function TransactionTagsComponent(_transactionService, _transactionEventService, _transactionConnectorService, iconCacheService) {
+        function TransactionTagsComponent(_transactionService, _transactionEventService, _transactionConnectorService, _changeDetector, iconCacheService) {
             this._transactionService = _transactionService;
             this._transactionEventService = _transactionEventService;
             this._transactionConnectorService = _transactionConnectorService;
+            this._changeDetector = _changeDetector;
             this.iconCacheService = iconCacheService;
             this.icons = Icon;
             this.tags = [];
@@ -56338,6 +56463,7 @@
                 this._transactionService.getJoinedTags(this._table, this._key).then(function (tags) {
                     _this.tags = tags;
                     _this.editingTags = __spreadArray([], __read(tags));
+                    _this._changeDetector.detectChanges();
                 });
             }
         };
@@ -56362,6 +56488,7 @@
                             return [4 /*yield*/, this._transactionService.getTagsFullTree(this._getTabCategory(), true)];
                         case 1:
                             _a.allTags = _b.sent();
+                            this._changeDetector.detectChanges();
                             _b.label = 2;
                         case 2:
                             this.showEditTagsDialog = true;
@@ -56380,12 +56507,14 @@
                     else {
                         tag.image.thumbnailBody = null;
                     }
+                    _this._changeDetector.detectChanges();
                 }
                 return tag;
             });
             this._transactionService.mergeJoinedTags(this._table, this._key, tagsToMerge).then(function (success) {
                 if (success) {
                     _this.tags = _this.editingTags;
+                    _this._changeDetector.detectChanges();
                 }
             });
         };
@@ -56394,7 +56523,8 @@
     TransactionTagsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-tags",
-                    template: "\n        <div class=\"transaction-tags-wrapper\">\n          <div class=\"edit-tags-wrapper\">\n            <co-button [label]=\"'' | localize\"\n                       [iconData]=\"iconCacheService.getIcon(icons.TagLines)\"\n                       (onClick)=\"handleEditTags()\"\n            ></co-button>\n          </div>\n          <co-transaction-tag *ngFor=\"let tag of tags\" [tag]=\"tag\"></co-transaction-tag>\n          <co-simple-tags\n            *ngIf=\"showEditTagsDialog\"\n            [tags]=\"allTags\"\n            [linkedTags]=\"editingTags\"\n            (saveClick)=\"handleSaveTags($event)\"\n            (closeClick)=\"showEditTagsDialog = false\"\n          ></co-simple-tags>\n        </div>\n    ",
+                    template: "\n        <div class=\"transaction-tags-wrapper\">\n          <div class=\"edit-tags-wrapper\">\n            <co-button [label]=\"'' | localize\"\n                       [iconData]=\"iconCacheService.getIcon(icons.TagLines)\"\n                       (onClick)=\"handleEditTags()\"\n            ></co-button>\n          </div>\n          <co-transaction-tag *ngFor=\"let tag of tags\" [tag]=\"tag\"></co-transaction-tag>\n          <co-simple-tags *ngIf=\"showEditTagsDialog\"\n            [tags]=\"allTags\"\n            [linkedTags]=\"editingTags\"\n            (saveClick)=\"handleSaveTags($event)\"\n            (closeClick)=\"showEditTagsDialog = false\"\n          ></co-simple-tags>\n        </div>\n    ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -56402,6 +56532,7 @@
         { type: TransactionService },
         { type: TransactionEventService },
         { type: TransactionConnectorService },
+        { type: i0.ChangeDetectorRef },
         { type: IconCacheService }
     ]; };
     TransactionTagsComponent.propDecorators = {