@colijnit/transaction 257.1.1 → 257.1.2

package/fesm2015/colijnit-transaction.js

@@ -283,8 +283,8 @@ class Version {
     constructor() {
         this.name = "@colijnit/transaction";
         this.description = "Colijn IT transaction package";
-        this.symVer = "257.1.1";
-        this.publishDate = "15-1-2025 17:49:15";
+        this.symVer = "257.1.2";
+        this.publishDate = "16-1-2025 18:39:46";
     }
 }
 
@@ -18422,6 +18422,13 @@ class ColorUtils {
     }
 }
 
+class TransactionLineViewModel {
+    constructor(l) {
+        this.showColor = false;
+        this.line = l;
+    }
+}
+
 class PurchaseConfirmationService {
     constructor(_transactionConnectorService, _transactionEventService) {
         this._transactionConnectorService = _transactionConnectorService;
@@ -18431,6 +18438,19 @@ class PurchaseConfirmationService {
         this.confirmationAnalysisResult = [];
         this.ordersTotal = new BehaviorSubject(0);
         this.ordersTotalObservable = this.ordersTotal.asObservable();
+        this.transactionLinesViewModels = [];
+        this._transactionLines = [];
+        this._subs = [];
+        this._subs.push(this._transactionEventService.orderConfirmationDropped.subscribe((data) => {
+            this._updateViewModels(data);
+        }));
+    }
+    set transactionLines(value) {
+        this._transactionLines = value;
+        this._prepareViewModels();
+    }
+    get transactionLines() {
+        return this._transactionLines;
     }
     set confirmationAnalysisId(value) {
         this._confirmationAnalysisId = value;
@@ -18442,6 +18462,9 @@ class PurchaseConfirmationService {
     setOrdersTotal(value) {
         this.ordersTotal.next(value);
     }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
     reset() {
         this.confirmationAnalysisId = undefined;
         this._transactionEventService.orderConfirmationDropped.next(undefined);
@@ -18497,6 +18520,36 @@ class PurchaseConfirmationService {
             }
         });
     }
+    _updateViewModels(data) {
+        if (data) {
+            this.transactionLinesViewModels.forEach(vm => {
+                if (vm.line && vm.line.lineNr === data.lineNr) {
+                    vm.line.linkedAnalysisResultId = data.analysisResultId;
+                    vm.showColor = true;
+                    vm.color = data.color;
+                }
+                else if (vm.line && vm.line.linkedAnalysisResultId === data.analysisResultId) {
+                    vm.line.linkedAnalysisResultId = undefined;
+                    vm.showColor = false;
+                    vm.color = "";
+                }
+            });
+        }
+        else {
+            this.transactionLinesViewModels.forEach(vm => {
+                vm.line.linkedAnalysisResultId = undefined;
+                vm.showColor = false;
+                vm.color = "";
+            });
+        }
+    }
+    _prepareViewModels() {
+        this.transactionLinesViewModels.length = 0;
+        this._transactionLines.forEach(t => {
+            const viewModel = new TransactionLineViewModel(t);
+            this.transactionLinesViewModels.push(viewModel);
+        });
+    }
 }
 PurchaseConfirmationService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PurchaseConfirmationService_Factory() { return new PurchaseConfirmationService(i0.ɵɵinject(TransactionConnectorService), i0.ɵɵinject(TransactionEventService)); }, token: PurchaseConfirmationService, providedIn: "root" });
 PurchaseConfirmationService.decorators = [
@@ -21856,7 +21909,7 @@ class TransactionPurchaseOrderLineBaseComponent extends TransactionLineBaseCompo
         try {
             const droppedData = JSON.parse(event.dataTransfer.getData('orderconfirmationanalysis'));
             this._purchaseConfirmationService.linkAnalysisToTransactionLine(this.transactionLine, droppedData);
-            this.changeDetector.markForCheck();
+            this.detectChanges();
         }
         catch (e) {
         }
@@ -33348,20 +33401,98 @@ TransactionTextLineModule.decorators = [
             },] }
 ];
 
+class LineSelectionService {
+    constructor(_transactionEventService, _transactionService) {
+        this._transactionEventService = _transactionEventService;
+        this._transactionService = _transactionService;
+        this.selectedTransactionLineChanged = new BehaviorSubject(undefined);
+        this._subs = [];
+        this._selectedLineUuidsForDelivery = [];
+        this._selectedLineUuidsForInvoice = [];
+        this._selectedTransactionLine = new TransactionLineInfo();
+        this._subs.push(this._transactionEventService.transactionLineChanged.subscribe((line) => {
+            if (this.selectedTransactionLine && line.lineNr === this.selectedTransactionLine.lineNr) {
+                this.selectedTransactionLine = line;
+            }
+        }), this._transactionEventService.lineSelectedForDelivery.subscribe((data) => {
+            if (this._checkAllLinesSelectedForDelivery(data)) {
+                this._selectedLineUuidsForDelivery.length = 0;
+                this._transactionEventService.allLinesSelectedForDelivery.next();
+            }
+        }), this._transactionEventService.lineSelectedForInvoice.subscribe((data) => {
+            if (this._checkAllLinesSelectedForInvoice(data)) {
+                this._selectedLineUuidsForInvoice.length = 0;
+                this._transactionEventService.allLinesSelectedForInvoice.next();
+            }
+        }));
+    }
+    set selectedTransactionLine(value) {
+        this._selectedTransactionLine = value;
+        this.selectedTransactionLineChanged.next(this._selectedTransactionLine);
+    }
+    get selectedTransactionLine() {
+        return this._selectedTransactionLine;
+    }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+    _checkAllLinesSelectedForDelivery(data) {
+        if (data && data.lineUuid) {
+            if (!data.selected) {
+                return true;
+            }
+            this._selectedLineUuidsForDelivery.push(data.lineUuid);
+            let transactionLinesForDelivery = this._transactionService.currentTransaction.transactionLines.filter(l => l.articleLineStatus && l.articleLineStatus.quantityToDeliver !== 0);
+            if (this._transactionService.currentTransaction.deliveryCostLines) {
+                transactionLinesForDelivery = transactionLinesForDelivery.concat(this._transactionService.currentTransaction.deliveryCostLines);
+            }
+            const notFound = transactionLinesForDelivery.filter(l => this._selectedLineUuidsForDelivery.indexOf(l.uuid) < 0);
+            return notFound.length === 0;
+        }
+        return false;
+    }
+    _checkAllLinesSelectedForInvoice(data) {
+        if (data && data.lineUuid) {
+            if (!data.selected) {
+                return true;
+            }
+            this._selectedLineUuidsForInvoice.push(data.lineUuid);
+            let transactionLinesForInvoice = this._transactionService.currentTransaction.transactionLines.filter(l => l.articleLineStatus && l.articleLineStatus.quantityToInvoice !== 0);
+            if (this._transactionService.currentTransaction.deliveryCostLines) {
+                transactionLinesForInvoice = transactionLinesForInvoice.concat(this._transactionService.currentTransaction.deliveryCostLines);
+            }
+            const notFound = transactionLinesForInvoice.filter(l => this._selectedLineUuidsForInvoice.indexOf(l.uuid) < 0);
+            return notFound.length === 0;
+        }
+        return false;
+    }
+}
+LineSelectionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function LineSelectionService_Factory() { return new LineSelectionService(i0.ɵɵinject(TransactionEventService), i0.ɵɵinject(TransactionService)); }, token: LineSelectionService, providedIn: "root" });
+LineSelectionService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+LineSelectionService.ctorParameters = () => [
+    { type: TransactionEventService },
+    { type: TransactionService }
+];
+
 class TransactionLineSidePanelComponent {
-    constructor(_service, _transactionHeaderService, _transactionLineService, _transactionEventService, _transactionMappingService, _purchaseConfirmationService) {
+    constructor(_service, _transactionHeaderService, _transactionLineService, _transactionEventService, _transactionMappingService, _purchaseConfirmationService, _lineSelectionService, _changeDetector) {
         this._service = _service;
         this._transactionHeaderService = _transactionHeaderService;
         this._transactionLineService = _transactionLineService;
         this._transactionEventService = _transactionEventService;
         this._transactionMappingService = _transactionMappingService;
         this._purchaseConfirmationService = _purchaseConfirmationService;
+        this._lineSelectionService = _lineSelectionService;
+        this._changeDetector = _changeDetector;
         this.icons = Icon;
         this.categories = TransactionTypeCategory;
         this.transactionTypes = TransactionKind;
         this.TransactionTypeCategory = TransactionTypeCategory;
         this.wide = false;
-        this.transactionLine = new TransactionLineInfo();
         this.cancelClick = new EventEmitter();
         this._subs = [];
     }
@@ -33375,10 +33506,14 @@ class TransactionLineSidePanelComponent {
         return this._transactionHeaderService.transactionInfo;
     }
     ngOnInit() {
-        this._transactionLineService.transactionLine = this.transactionLine;
         this.activeCategoryButton = this._transactionMappingService.getButtonBar(this._transactionHeaderService.transactionKind)
             .find((button) => button.category === this.activeCategory);
-        this._subs.push(this._purchaseConfirmationService.ordersTotalObservable.subscribe((value) => {
+        this._subs.push(this._lineSelectionService.selectedTransactionLineChanged.subscribe((line) => {
+            if (line) {
+                this._transactionLineService.transactionLine = line;
+                this._changeDetector.detectChanges();
+            }
+        }), this._purchaseConfirmationService.ordersTotalObservable.subscribe((value) => {
             this.ordersTotal = value;
         }));
     }
@@ -33415,11 +33550,7 @@ TransactionLineSidePanelComponent.decorators = [
       <div class="transaction-line-side-panel-content co-small-scrollbar">
         <ng-container [ngSwitch]="transactionInfo.transactionKind">
           <ng-container *ngSwitchCase="transactionTypes.PurchaseOrder">
-            <co-transaction-line-side-panel-purchase 
-                    [categoryType]="activeCategory"
-                    [transactionLine]="transactionLine"
-                    [transactionInfo]="transaction.transactionInfo"
-            ></co-transaction-line-side-panel-purchase>
+            <co-transaction-line-side-panel-purchase [categoryType]="activeCategory"></co-transaction-line-side-panel-purchase>
           </ng-container>
           <ng-container *ngSwitchCase="transactionTypes.SalesOrder">
             <co-transaction-line-side-panel-sales [categoryType]="activeCategory"></co-transaction-line-side-panel-sales>
@@ -33450,12 +33581,13 @@ TransactionLineSidePanelComponent.ctorParameters = () => [
     { type: TransactionLineService },
     { type: TransactionEventService },
     { type: TransactionMappingService },
-    { type: PurchaseConfirmationService }
+    { type: PurchaseConfirmationService },
+    { type: LineSelectionService },
+    { type: ChangeDetectorRef }
 ];
 TransactionLineSidePanelComponent.propDecorators = {
     wide: [{ type: Input }],
     activeCategory: [{ type: Input }],
-    transactionLine: [{ type: Input }],
     cancelClick: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-line-side-panel",] }]
 };
@@ -34393,28 +34525,12 @@ TransactionConfirmationHistoryModule.decorators = [
 ];
 
 class TransactionLineSidePanelPurchaseComponent {
-    constructor(_service, _transactionEventService) {
-        this._service = _service;
-        this._transactionEventService = _transactionEventService;
+    constructor() {
         this.categories = TransactionTypeCategory;
-        this.transactionInfo = new TransactionInfo();
-        this.transactionLine = new TransactionLineInfo();
-        this.quantityToReceiveChange = new EventEmitter();
-        this.goodsReceiptStatus = new GoodsReceiptHistory();
-        this.selectedLineDocBatchArray = new DocDeliveryBatch();
-        this.isDocBatchSaved = false;
-        this.editingMode = false;
     }
     showClass() {
         return true;
     }
-    fillInputOnClick(data) {
-        this.selectedLineDocBatchArray = data;
-        this.editingMode = true;
-    }
-    docBatchSaved(data) {
-        this.isDocBatchSaved = data;
-    }
 }
 TransactionLineSidePanelPurchaseComponent.decorators = [
     { type: Component, args: [{
@@ -34422,10 +34538,7 @@ TransactionLineSidePanelPurchaseComponent.decorators = [
                 template: `
     <ng-container [ngSwitch]="categoryType">
       <ng-container *ngSwitchCase="categories.PurchaseOrderOrderConfirmation">
-        <co-transaction-line-purchase-confirmation
-                [transactionInfo]="transactionInfo"
-                [transactionLine]="transactionLine"
-        ></co-transaction-line-purchase-confirmation>
+        <co-transaction-line-purchase-confirmation></co-transaction-line-purchase-confirmation>
       </ng-container>
       <ng-container *ngSwitchCase="categories.PurchaseOrderReceivedGoods">
         <co-transaction-line-purchase-receive-goods></co-transaction-line-purchase-receive-goods>
@@ -34438,15 +34551,8 @@ TransactionLineSidePanelPurchaseComponent.decorators = [
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-TransactionLineSidePanelPurchaseComponent.ctorParameters = () => [
-    { type: TransactionService },
-    { type: TransactionEventService }
-];
 TransactionLineSidePanelPurchaseComponent.propDecorators = {
-    transactionInfo: [{ type: Input }],
-    transactionLine: [{ type: Input }],
     categoryType: [{ type: Input }],
-    quantityToReceiveChange: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-line-side-panel-purchase",] }]
 };
 
@@ -34898,17 +35004,21 @@ TransactionLinePurchaseReceiveGoodsModule.decorators = [
             },] }
 ];
 
-class TransactionLinePurchaseConfirmationComponent {
-    constructor(transactionHeaderService, iconCacheService, purchaseConfirmationService, _transactionEventService, _transactionService) {
+class TransactionLinePurchaseConfirmationComponent extends TransactionLineBaseComponent {
+    constructor(transactionHeaderService, transactionLineService, transactionEventService, service, iconCacheService, transactionScreenConfigurationService, purchaseConfirmationService, dictionaryService, imageService, changeDetector) {
+        super(transactionHeaderService, transactionLineService, transactionEventService, iconCacheService, transactionScreenConfigurationService, imageService, dictionaryService, service, changeDetector);
         this.transactionHeaderService = transactionHeaderService;
+        this.transactionLineService = transactionLineService;
+        this.transactionEventService = transactionEventService;
+        this.service = service;
         this.iconCacheService = iconCacheService;
+        this.transactionScreenConfigurationService = transactionScreenConfigurationService;
         this.purchaseConfirmationService = purchaseConfirmationService;
-        this._transactionEventService = _transactionEventService;
-        this._transactionService = _transactionService;
+        this.dictionaryService = dictionaryService;
+        this.imageService = imageService;
+        this.changeDetector = changeDetector;
         this.icons = Icon;
         this.transactionTypeCategory = TransactionTypeCategory;
-        this.transactionInfo = new TransactionInfo();
-        this.transactionLine = new TransactionLineInfo();
         this.docDeliveryBatch = new DocDeliveryBatch();
         this.filteredDocBatchArray = [];
         this.maxDocAmount = 0;
@@ -34920,12 +35030,12 @@ class TransactionLinePurchaseConfirmationComponent {
         return true;
     }
     ngOnInit() {
-        this._subs.push(this._transactionEventService.transactionLineChanged.subscribe((line) => {
+        super.ngOnInit();
+        this._subs.push(this.transactionEventService.transactionLineChanged.subscribe((line) => {
             if (line.lineNr === this.transactionLine.lineNr) {
-                this.transactionLine = line;
                 this._updateBatchArray();
             }
-        }), this._transactionEventService.orderConfirmationReset.subscribe(() => {
+        }), this.transactionEventService.orderConfirmationReset.subscribe(() => {
             this.showPurchaseConfirmationAI = false;
         }), this.purchaseConfirmationService.confirmationNeeded.subscribe((needed) => {
             this.showPurchaseConfirmationAI = needed;
@@ -34935,6 +35045,7 @@ class TransactionLinePurchaseConfirmationComponent {
     }
     ngOnDestroy() {
         this._subs.forEach(s => s.unsubscribe());
+        super.ngOnDestroy();
     }
     handleSaveDetailsEdit() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -34954,7 +35065,7 @@ class TransactionLinePurchaseConfirmationComponent {
                     this.transactionLine.purchasePortalLine.docBatchArray.push(this.docDeliveryBatch);
                 }
                 this.transactionLine.purchasePortalLine.docKind = 'IB';
-                const success = yield this._transactionService.updatePurchasePortalLines(this.transactionInfo.id, this.transactionInfo.version, this.transactionLine.purchasePortalLine);
+                const success = yield this.transactionService.updatePurchasePortalLines(this.transactionInfo.id, this.transactionInfo.version, this.transactionLine.purchasePortalLine);
                 if (success) {
                     this._initNewDocDeliveryBatch();
                     this.confirmingOrder = false;
@@ -34969,7 +35080,7 @@ class TransactionLinePurchaseConfirmationComponent {
         return __awaiter(this, void 0, void 0, function* () {
             row.deleteLine = 'T';
             this.transactionLine.purchasePortalLine.docKind = 'IB';
-            const success = yield this._transactionService.updatePurchasePortalLines(this.transactionInfo.id, this.transactionInfo.version, this.transactionLine.purchasePortalLine);
+            const success = yield this.transactionService.updatePurchasePortalLines(this.transactionInfo.id, this.transactionInfo.version, this.transactionLine.purchasePortalLine);
             if (success) {
                 this._initNewDocDeliveryBatch();
             }
@@ -34986,7 +35097,12 @@ class TransactionLinePurchaseConfirmationComponent {
     handleDeliveryBatchChange() {
         this._setMaxDocAmount();
     }
+    transactionLineSet() {
+        super.transactionLineSet();
+        this._updateBatchArray();
+    }
     _updateBatchArray() {
+        this._initNewDocDeliveryBatch();
         this.filteredDocBatchArray = this.transactionLine.purchasePortalLine.docBatchArray.filter(value => value.historical.toLowerCase() === 'h' && value.docAmount >= 0);
         this._setMaxDocAmount();
     }
@@ -35019,8 +35135,8 @@ class TransactionLinePurchaseConfirmationComponent {
             .forEach((d => {
             alreadyConfirmed = alreadyConfirmed + d.docAmount;
         }));
-        this.docDeliveryBatch.docAmount = this.transactionLine.amount - alreadyConfirmed;
-        this.docDeliveryBatch.confirmedPrice = +this.transactionLine.purchasePortalLine.netOrderPrice;
+        this.docDeliveryBatch.docAmount = (this.transactionLine.amount !== undefined ? this.transactionLine.amount : 0) - alreadyConfirmed;
+        this.docDeliveryBatch.confirmedPrice = this.transactionLine.purchasePortalLine.netOrderPrice ? +this.transactionLine.purchasePortalLine.netOrderPrice : 0;
         this._setMaxDocAmount();
     }
 }
@@ -35114,14 +35230,17 @@ TransactionLinePurchaseConfirmationComponent.decorators = [
 ];
 TransactionLinePurchaseConfirmationComponent.ctorParameters = () => [
     { type: TransactionHeaderService },
+    { type: TransactionLineService },
+    { type: TransactionEventService },
+    { type: TransactionService },
     { type: IconCacheService },
+    { type: TransactionScreenConfigurationService },
     { type: PurchaseConfirmationService },
-    { type: TransactionEventService },
-    { type: TransactionService }
+    { type: DictionaryService },
+    { type: TransactionImageService },
+    { type: ChangeDetectorRef }
 ];
 TransactionLinePurchaseConfirmationComponent.propDecorators = {
-    transactionInfo: [{ type: Input }],
-    transactionLine: [{ type: Input }],
     showClass: [{ type: HostBinding, args: ['class.co-transaction-line-purchase-confirmation',] }]
 };
 
@@ -35284,8 +35403,8 @@ TransactionLabeledPriceInputModule.decorators = [
 ];
 
 class TransactionLinesPopupComponent {
-    constructor() {
-        this.transactionLines = [];
+    constructor(purchaseConfirmationService) {
+        this.purchaseConfirmationService = purchaseConfirmationService;
         this.clickOutside = new EventEmitter();
         this.transactionLineClick = new EventEmitter();
     }
@@ -35303,18 +35422,20 @@ TransactionLinesPopupComponent.decorators = [
              (clickOutside)="clickOutside.emit()">
             <table>
                 <tr>
+                    <th class="color"></th>
                     <th class="line-nr right-align" [textContent]="'LINE_NR' | localize"></th>
                     <th class="article-nr" [textContent]="'ARTICLE_NR' | localize"></th>
                     <th class="article-nr" [textContent]="'DESCRIPTION' | localize"></th>
                     <th class="amount right-align" [textContent]="'AMOUNT' | localize"></th>
                     <th class="price right-align" [textContent]="'PRICE' | localize"></th>
                 </tr>
-                <tr class="transaction-line" *ngFor="let transactionLine of transactionLines" (click)="transactionLineClick.emit(transactionLine)">
-                    <td class="right-align" [textContent]="transactionLine.lineNr"></td>
-                    <td [textContent]="transactionLine.articleNumber"></td>
-                    <td [textContent]="transactionLine.goodDescription"></td>
-                    <td class="right-align" [textContent]="transactionLine.amount"></td>
-                    <td class="right-align" [textContent]="transactionLine.price | coCurrency: true"></td>
+                <tr class="transaction-line" *ngFor="let viewModel of purchaseConfirmationService.transactionLinesViewModels" (click)="transactionLineClick.emit(viewModel.line)">
+                    <td class="color" [style.background-color]="viewModel.color"></td>
+                    <td class="right-align" [textContent]="viewModel.line.lineNr"></td>
+                    <td [textContent]="viewModel.line.articleNumber"></td>
+                    <td [textContent]="viewModel.line.goodDescription"></td>
+                    <td class="right-align" [textContent]="viewModel.line.amount"></td>
+                    <td class="right-align" [textContent]="viewModel.line.price | coCurrency: true"></td>
                 </tr>
             </table>
         </div>
@@ -35322,8 +35443,10 @@ TransactionLinesPopupComponent.decorators = [
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
+TransactionLinesPopupComponent.ctorParameters = () => [
+    { type: PurchaseConfirmationService }
+];
 TransactionLinesPopupComponent.propDecorators = {
-    transactionLines: [{ type: Input }],
     parentForOverlay: [{ type: Input }],
     clickOutside: [{ type: Output }],
     transactionLineClick: [{ type: Output }],
@@ -35352,6 +35475,13 @@ class PurchaseConfirmationLinesComponent {
         this._transaction = value;
         if (this._transaction && this._transaction.transactionLines) {
             this.transactionLines = this._transaction.transactionLines.filter(tl => tl.isArticle);
+            // create the list of transaction lines without a reference to the original ones
+            this._purchaseConfirmationService.transactionLines.length = 0;
+            const transLines = [];
+            this.transactionLines.forEach(t => {
+                transLines.push(Object.assign(new TransactionLineInfo(), t));
+            });
+            this._purchaseConfirmationService.transactionLines = transLines;
         }
     }
     get transaction() {
@@ -35410,7 +35540,7 @@ class PurchaseConfirmationLinesComponent {
     showPopup(element, confirmationVM) {
         if (confirmationVM && confirmationVM.confirmation) {
             this.currentConfirmationViewModel = confirmationVM;
-            this._popupComponentRef = this._overlayService.createComponent(TransactionLinesPopupComponent, { parentForOverlay: element, transactionLines: this.transactionLines }, {
+            this._popupComponentRef = this._overlayService.createComponent(TransactionLinesPopupComponent, { parentForOverlay: element }, {
                 transactionLineClick: (line) => this._handleTransactionLineClick(line, this.currentConfirmationViewModel.confirmation),
                 clickOutside: () => this.hidePopup()
             });
@@ -45374,8 +45504,18 @@ TransactionLineModule.decorators = [
 ];
 
 class TransactionLinesBaseComponent extends TransactionHeaderBaseComponent {
-    constructor() {
-        super(...arguments);
+    constructor(transactionHeaderService, transactionEventService, service, iconCacheService, transactionScreenConfigurationService, dictionaryService, imageService, changeDetector, purchaseConfirmationService, lineSelectionService) {
+        super(transactionHeaderService, transactionEventService, iconCacheService, transactionScreenConfigurationService, imageService, dictionaryService, service, changeDetector);
+        this.transactionHeaderService = transactionHeaderService;
+        this.transactionEventService = transactionEventService;
+        this.service = service;
+        this.iconCacheService = iconCacheService;
+        this.transactionScreenConfigurationService = transactionScreenConfigurationService;
+        this.dictionaryService = dictionaryService;
+        this.imageService = imageService;
+        this.changeDetector = changeDetector;
+        this.purchaseConfirmationService = purchaseConfirmationService;
+        this.lineSelectionService = lineSelectionService;
         this.icons = Icon;
         this.category = TransactionTypeCategory;
         this.saveTransactionLine = new EventEmitter();
@@ -45394,6 +45534,12 @@ class TransactionLinesBaseComponent extends TransactionHeaderBaseComponent {
     get activeCategory() {
         return this._activeCategory;
     }
+    set selectedTransactionLine(value) {
+        this.lineSelectionService.selectedTransactionLine = value;
+    }
+    get selectedTransactionLine() {
+        return this.lineSelectionService.selectedTransactionLine;
+    }
     ngOnInit() {
         super.ngOnInit();
         this._subscriptions.push(this.transactionEventService.transactionLineDraggedOver.subscribe((lineNr) => {
@@ -45464,23 +45610,26 @@ class TransactionLinesBaseComponent extends TransactionHeaderBaseComponent {
 TransactionLinesBaseComponent.decorators = [
     { type: Directive }
 ];
+TransactionLinesBaseComponent.ctorParameters = () => [
+    { type: TransactionHeaderService },
+    { type: TransactionEventService },
+    { type: TransactionService },
+    { type: IconCacheService },
+    { type: TransactionScreenConfigurationService },
+    { type: DictionaryService },
+    { type: TransactionImageService },
+    { type: ChangeDetectorRef },
+    { type: PurchaseConfirmationService },
+    { type: LineSelectionService }
+];
 TransactionLinesBaseComponent.propDecorators = {
     activeCategory: [{ type: Input }],
     saveTransactionLine: [{ type: Output }]
 };
 
 class TransactionLinesComponent extends TransactionLinesBaseComponent {
-    constructor(transactionHeaderService, transactionEventService, service, iconCacheService, transactionScreenConfigurationService, dictionaryService, imageService, changeDetector, _purchaseConfirmationService) {
-        super(transactionHeaderService, transactionEventService, iconCacheService, transactionScreenConfigurationService, imageService, dictionaryService, service, changeDetector);
-        this.transactionHeaderService = transactionHeaderService;
-        this.transactionEventService = transactionEventService;
-        this.service = service;
-        this.iconCacheService = iconCacheService;
-        this.transactionScreenConfigurationService = transactionScreenConfigurationService;
-        this.dictionaryService = dictionaryService;
-        this.imageService = imageService;
-        this.changeDetector = changeDetector;
-        this._purchaseConfirmationService = _purchaseConfirmationService;
+    constructor() {
+        super(...arguments);
         this.customerPortal = false;
         this.showSidePanel = false;
         this.showSidePanelForConfirmationAI = false;
@@ -45492,7 +45641,7 @@ class TransactionLinesComponent extends TransactionLinesBaseComponent {
     }
     ngOnInit() {
         super.ngOnInit();
-        this._subs.push(this._purchaseConfirmationService.confirmationNeeded.subscribe((needed) => {
+        this._subs.push(this.purchaseConfirmationService.confirmationNeeded.subscribe((needed) => {
             if (needed) {
                 this.showSidePanelForConfirmationAI = true;
                 this.showSidePanel = true;
@@ -45516,7 +45665,8 @@ class TransactionLinesComponent extends TransactionLinesBaseComponent {
     }
     _checkActiveLine() {
         if (this.showSidePanelForConfirmationAI && this.transactionLines && this.transactionLines.length > 0) {
-            this.activeTransactionLine = this.transactionLines[0];
+            // this.activeTransactionLine = this.transactionLines[0];
+            this.lineSelectionService.selectedTransactionLine = this.transactionLines[0];
         }
     }
 }
@@ -45584,10 +45734,8 @@ TransactionLinesComponent.decorators = [
         </div>
       </ng-container>
     </div>
-    <co-transaction-line-side-panel *ngIf="showSidePanel" clickOutside
+    <co-transaction-line-side-panel *ngIf="showSidePanel"
                                     [activeCategory]="activeCategory"
-                                    [transactionLine]="activeTransactionLine"
-                                    (clickOutside)="showSidePanel = false"
                                     (cancelClick)="showSidePanel = false">
     </co-transaction-line-side-panel>
   `,
@@ -45595,17 +45743,6 @@ TransactionLinesComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
-TransactionLinesComponent.ctorParameters = () => [
-    { type: TransactionHeaderService },
-    { type: TransactionEventService },
-    { type: TransactionService },
-    { type: IconCacheService },
-    { type: TransactionScreenConfigurationService },
-    { type: DictionaryService },
-    { type: TransactionImageService },
-    { type: ChangeDetectorRef },
-    { type: PurchaseConfirmationService }
-];
 TransactionLinesComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ["class.co-transaction-lines",] }],
     customerPortal: [{ type: Input }]
@@ -53423,70 +53560,6 @@ ShoppingCartComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ['class.co-shopping-cart',] }]
 };
 
-class LineSelectionService {
-    constructor(_transactionEventService, _transactionService) {
-        this._transactionEventService = _transactionEventService;
-        this._transactionService = _transactionService;
-        this._subs = [];
-        this._selectedLineUuidsForDelivery = [];
-        this._selectedLineUuidsForInvoice = [];
-        this._subs.push(this._transactionEventService.lineSelectedForDelivery.subscribe((data) => {
-            if (this._checkAllLinesSelectedForDelivery(data)) {
-                this._selectedLineUuidsForDelivery.length = 0;
-                this._transactionEventService.allLinesSelectedForDelivery.next();
-            }
-        }), this._transactionEventService.lineSelectedForInvoice.subscribe((data) => {
-            if (this._checkAllLinesSelectedForInvoice(data)) {
-                this._selectedLineUuidsForInvoice.length = 0;
-                this._transactionEventService.allLinesSelectedForInvoice.next();
-            }
-        }));
-    }
-    ngOnDestroy() {
-        this._subs.forEach(s => s.unsubscribe());
-    }
-    _checkAllLinesSelectedForDelivery(data) {
-        if (data && data.lineUuid) {
-            if (!data.selected) {
-                return true;
-            }
-            this._selectedLineUuidsForDelivery.push(data.lineUuid);
-            let transactionLinesForDelivery = this._transactionService.currentTransaction.transactionLines.filter(l => l.articleLineStatus && l.articleLineStatus.quantityToDeliver !== 0);
-            if (this._transactionService.currentTransaction.deliveryCostLines) {
-                transactionLinesForDelivery = transactionLinesForDelivery.concat(this._transactionService.currentTransaction.deliveryCostLines);
-            }
-            const notFound = transactionLinesForDelivery.filter(l => this._selectedLineUuidsForDelivery.indexOf(l.uuid) < 0);
-            return notFound.length === 0;
-        }
-        return false;
-    }
-    _checkAllLinesSelectedForInvoice(data) {
-        if (data && data.lineUuid) {
-            if (!data.selected) {
-                return true;
-            }
-            this._selectedLineUuidsForInvoice.push(data.lineUuid);
-            let transactionLinesForInvoice = this._transactionService.currentTransaction.transactionLines.filter(l => l.articleLineStatus && l.articleLineStatus.quantityToInvoice !== 0);
-            if (this._transactionService.currentTransaction.deliveryCostLines) {
-                transactionLinesForInvoice = transactionLinesForInvoice.concat(this._transactionService.currentTransaction.deliveryCostLines);
-            }
-            const notFound = transactionLinesForInvoice.filter(l => this._selectedLineUuidsForInvoice.indexOf(l.uuid) < 0);
-            return notFound.length === 0;
-        }
-        return false;
-    }
-}
-LineSelectionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function LineSelectionService_Factory() { return new LineSelectionService(i0.ɵɵinject(TransactionEventService), i0.ɵɵinject(TransactionService)); }, token: LineSelectionService, providedIn: "root" });
-LineSelectionService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: "root"
-            },] }
-];
-LineSelectionService.ctorParameters = () => [
-    { type: TransactionEventService },
-    { type: TransactionService }
-];
-
 class TransactionInternalComponent {
     constructor(iconCacheService, service, transactionEventService, _transactionConnectorService, _transactionEventService, _screenConfigurationService, _dialogService, _purchaseConfirmationService, _deliveryPlanningService, _transactionBaseService, _changeDetector, _transactionHeaderService, _lineSelection //Do not remove this. While it is not directly used it has its own important subscriptions.
     ) {