@colijnit/transaction 12.1.57 → 12.1.59

package/fesm2015/colijnit-transaction.js

@@ -5,6 +5,7 @@ import { PendingReasonType } from '@colijnit/transactionapi/build/enum/pending-r
 import { SequenceName } from '@colijnit/transactionapi/build/enum/sequence-name.enum';
 import { TransactionKind } from '@colijnit/transactionapi/build/enum/transaction-kind.enum';
 import { TransactionLineType } from '@colijnit/transactionapi/build/enum/transaction-line-type.enum';
+import { ValidationResult } from '@colijnit/transactionapi/build/model/validation-result';
 import { BehaviorSubject, Subject, throwError } from 'rxjs';
 import { TransactionInfoResponse } from '@colijnit/transactionapi/build/model/transaction-info-response.bo';
 import { Marketing } from '@colijnit/transactionapi/build/model/marketing.bo';
@@ -55,6 +56,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { TransactionInfo } from '@colijnit/transactionapi/build/model/transaction-info.bo';
 import { SupplierFullObject } from '@colijnit/transactionapi/build/model/supplier-full-object.bo';
 import { TransactionDownPaymentInfo } from '@colijnit/transactionapi/build/model/transaction-down-payment-info.bo';
+import { TransactionLockResult } from '@colijnit/transactionapi/build/model/transaction-lock-result.bo';
 import { RelationStatus } from '@colijnit/transactionapi/build/enum/relation-status.enum';
 import { ResolveLinePendingReasonRequest } from '@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo';
 import { Articles } from '@colijnit/articleapi/build/articles';
@@ -66,7 +68,7 @@ import { ResolveHeaderPendingReasonRequest } from '@colijnit/transactionapi/buil
 import { DocDeliveryBatch } from '@colijnit/transactionapi/build/model/doc-delivery-batch.bo';
 import { NULL_CUSTOMER_FULL_OBJECT, NULL_RELATION_OBJECT } from '@colijnit/transactionapi/build/model/nul-relation-object';
 import { RelationKind } from '@colijnit/transactionapi/build/enum/relation-kind.enum';
-import { FormMasterService, CoDialogModule, ButtonModule, CollapsibleModule, InputCheckboxModule, InputTextModule, InputComboBoxModule, FormModule, InputRadioButtonModule, IconModule, InputTextComponent, InputListboxModule, DropDownModule, InputSearchModule, ColumnAlign, SimpleGridColumnDirective, ObserveVisibilityModule, ColorSequenceService, PriceDisplayPipeModule, InputDatePickerModule, Carousel3dModule, InputDatePickerComponent, InputTextareaComponent, InputTextareaModule, InputNumberPickerModule, CoDialogPromptModule, MultiSelectListModule, PopupModule, CoSidebarModule, CoGridModule, CoRichTextEditorModule, CarouselModule, SimpleGridModule, GridToolbarButtonModule, InputDateRangePickerModule, ClickoutsideModule, CheckmarkOverlayModule, CoOrientation, CoDirection, FilterItemModule, PaginationModule, PaginationBarModule, IconCollapseHandleModule } from '@colijnit/corecomponents_v12';
+import { FormMasterService, CoDialogModule, ButtonModule, CollapsibleModule, InputCheckboxModule, InputTextModule, InputComboBoxModule, FormModule, InputRadioButtonModule, IconModule, InputTextComponent, InputListboxModule, DropDownModule, InputSearchModule, ColumnAlign, SimpleGridColumnDirective, ObserveVisibilityModule, ColorSequenceService, PriceDisplayPipeModule, InputDatePickerModule, Carousel3dModule, CarouselModule, FilterPipeModule, InputDatePickerComponent, InputTextareaComponent, InputTextareaModule, InputNumberPickerModule, CoDialogPromptModule, MultiSelectListModule, PopupModule, CoSidebarModule, CoGridModule, CoRichTextEditorModule, SimpleGridModule, GridToolbarButtonModule, InputDateRangePickerModule, ClickoutsideModule, CheckmarkOverlayModule, CoOrientation, CoDirection, FilterItemModule, PaginationModule, PaginationBarModule, IconCollapseHandleModule } from '@colijnit/corecomponents_v12';
 import { FlexModule } from '@angular/flex-layout';
 import { AddressType } from '@colijnit/transactionapi/build/enum/address-type.enum';
 import { trigger, state, style, transition, animate } from '@angular/animations';
@@ -220,6 +222,7 @@ class Dictionary {
                 "BRANCH": "Filiaal",
                 "BRANCH_NUMBER": "Filiaalnummer",
                 "BUSINESS_RULE_DISCOUNT": "Business rule korting",
+                "BY": "Door",
                 "CANCEL": "Annuleren",
                 "CANNOT_CHANGE_NEGATIVE_QUANTITY": "Een negatieve voorraad kan niet gewijzigd worden.",
                 "CART": "Winkelwagen",
@@ -449,6 +452,7 @@ class Dictionary {
                 "REDISTRIBUTE_DISCOUNT": "Herverdeel korting",
                 "REFERENCE": "Referentie",
                 "REFERENCE_RELATION": "Ref. relatie",
+                "RELATION_ALREADY_LOCKED": "De relatie wordt al bewerkt",
                 "RELATION_NUMBER": "Relatienummer",
                 "REMARKS": "Opmerkingen",
                 "REQUESTED_DELIVERY": "Gevraagde leverdatum",
@@ -481,6 +485,7 @@ class Dictionary {
                 "SHOPPING_CART_RESUME": "Verder winkelen",
                 "SHOW_MORE": "Toon meer",
                 "SHOW_LESS": "Toon minder",
+                "SINCE": "Sinds",
                 "SPECIAL_DISCOUNT": "Speciale korting",
                 "SOURCE_WAREHOUSE": "Bron magazijn",
                 "STOCK": "Voorraad",
@@ -503,6 +508,7 @@ class Dictionary {
                 "TOTAL_ASSEMBLY_TIME": "Totale montagetijd",
                 "TOTAL_GROSS": "Totaal bruto",
                 "TOTAL_LINE_DISCOUNT": "Totale regelkorting",
+                "TRANSACTION_ALREADY_LOCKED": "De transactie wordt al bewerkt",
                 "TRANSACTION_DATE": "Orderdatum",
                 "TRANSACTION_DISCOUNT": "Transactie korting",
                 "TRANSACTION_DISCOUNT_PERC": "% Trans. korting",
@@ -571,6 +577,7 @@ class Dictionary {
                 "BRANCH": "Branch",
                 "BRANCH_NUMBER": "Branch number",
                 "BUSINESS_RULE_DISCOUNT": "Business rule discount",
+                "BY": "By",
                 "CANCEL": "Cancel",
                 "CANNOT_CHANGE_NEGATIVE_QUANTITY": "A negative supply cannot be changed.",
                 "CART": "Cart",
@@ -787,6 +794,7 @@ class Dictionary {
                 "RECEIVED_DELIVERED": "Received / delivered",
                 "REFERENCE": "Reference",
                 "REFERENCE_RELATION": "Ref. relation",
+                "RELATION_ALREADY_LOCKED": "Relation is already locked",
                 "RELATION_NUMBER": "Relation number",
                 "REMARKS": "Remarks",
                 "REQUESTED_DELIVERY": "Requested delivery",
@@ -818,6 +826,7 @@ class Dictionary {
                 "SHOPPING_CART_RESUME": "Resume shopping",
                 "SHOW_MORE": "Show more",
                 "SHOW_LESS": "Show less",
+                "SINCE": "Since",
                 "SPECIAL_DISCOUNT": "Special discount",
                 "SOURCE_WAREHOUSE": "Source warehouse",
                 "STOCK": "Stock",
@@ -839,6 +848,7 @@ class Dictionary {
                 "TOTAL_ASSEMBLY_TIME": "Total assembly time",
                 "TOTAL_GROSS": "Gross total",
                 "TOTAL_LINE_DISCOUNT": "Total linediscount",
+                "TRANSACTION_ALREADY_LOCKED": "Transaction is already locked",
                 "TRANSACTION_DATE": "Transaction date",
                 "TRANSACTION_DISCOUNT": "Transaction discount",
                 "TRANSACTION_DISCOUNT_PERC": "% Trans. discount",
@@ -2060,6 +2070,7 @@ var Icon;
     Icon["DeliveryTruck"] = "delivery_truck";
     Icon["EditPencil"] = "edit_pencil";
     Icon["EllipsisLight"] = "ellipsis_light";
+    Icon["EllipsisVerticalSolid"] = "ellipsis_vertical_solid";
     Icon["FileCircleInfoSolid"] = "file_circle_info_solid";
     Icon["FilePdfSolid"] = "file_pdf_solid";
     Icon["GearSolid"] = "gear_solid";
@@ -2131,6 +2142,7 @@ const IconSvg = {
     "delivery_truck": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"15.35\" y=\"16.56\" width=\"15.14\" height=\"10.94\" transform=\"translate(-1.83 2.08) rotate(-5)\" fill=\"#484f60\"/><path d=\"M38.5,18.1l-6.9.61L32.41,28l-7.63.67a3.76,3.76,0,0,1,1.43,2.25l7.25-.63A3.83,3.83,0,0,1,41,29.6l1-.1-.52-6Zm.29,5.84-3.91.34a.51.51,0,0,1-.55-.46L34,20.1a.49.49,0,0,1,.45-.54l2.27-.2a.5.5,0,0,1,.48.25l2,3.59A.5.5,0,0,1,38.79,23.94Z\" fill=\"#484f60\"/><path d=\"M19.66,29.09a3.8,3.8,0,0,0-1,2.46l-.74.07-1.82-.94L16,29.41Z\" fill=\"#484f60\"/><path d=\"M34.56,30.62a2.74,2.74,0,1,0,2.49-3A2.73,2.73,0,0,0,34.56,30.62Z\" fill=\"#484f60\"/><path d=\"M19.74,31.91a2.74,2.74,0,1,0,2.49-3A2.74,2.74,0,0,0,19.74,31.91Z\" fill=\"#484f60\"/><rect x=\"7.96\" y=\"17.63\" width=\"5\" height=\"1\" transform=\"translate(-1.54 0.98) rotate(-5)\" fill=\"#484f60\"/><rect x=\"11.02\" y=\"29.71\" width=\"3\" height=\"1\" transform=\"translate(-2.59 1.21) rotate(-5)\" fill=\"#484f60\"/><rect x=\"9.48\" y=\"23.53\" width=\"4\" height=\"1\" transform=\"matrix(1, -0.09, 0.09, 1, -2.05, 1.09)\" fill=\"#484f60\"/></svg>",
     "edit_pencil": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"12.54 38.16 12 37.62 14.85 29.64 20.52 35.31 12.54 38.16\" fill=\"#484f60\"/><rect x=\"16.33\" y=\"20.52\" width=\"17.99\" height=\"8.64\" transform=\"translate(-10.15 25.18) rotate(-45)\" fill=\"#484f60\"/><path d=\"M37.54,18.73,36,20.32l-6.11-6.1,1.59-1.59a1.55,1.55,0,0,1,2.2,0l3.91,3.9A1.55,1.55,0,0,1,37.54,18.73Z\" fill=\"#484f60\"/></svg>",
     "ellipsis_light": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M352 256C352 238.3 366.3 224 384 224C401.7 224 416 238.3 416 256C416 273.7 401.7 288 384 288C366.3 288 352 273.7 352 256zM192 256C192 238.3 206.3 224 224 224C241.7 224 256 238.3 256 256C256 273.7 241.7 288 224 288C206.3 288 192 273.7 192 256zM96 256C96 273.7 81.67 288 64 288C46.33 288 32 273.7 32 256C32 238.3 46.33 224 64 224C81.67 224 96 238.3 96 256z\"/></svg>",
+    "ellipsis_vertical_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 128 512\"><path d=\"M64 360c30.9 0 56 25.1 56 56s-25.1 56-56 56s-56-25.1-56-56s25.1-56 56-56zm0-160c30.9 0 56 25.1 56 56s-25.1 56-56 56s-56-25.1-56-56s25.1-56 56-56zM120 96c0 30.9-25.1 56-56 56S8 126.9 8 96S33.1 40 64 40s56 25.1 56 56z\"/></svg>",
     "file_circle_info_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V198.6C310.1 219.5 256 287.4 256 368C256 427.1 285.1 479.3 329.7 511.3C326.6 511.7 323.3 512 320 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256zM288 368C288 288.5 352.5 224 432 224C511.5 224 576 288.5 576 368C576 447.5 511.5 512 432 512C352.5 512 288 447.5 288 368zM432 320C445.3 320 456 309.3 456 296C456 282.7 445.3 272 432 272C418.7 272 408 282.7 408 296C408 309.3 418.7 320 432 320zM416 384L416 432C407.2 432 400 439.2 400 448C400 456.8 407.2 464 416 464H448C456.8 464 464 456.8 464 448C464 439.2 456.8 432 448 432V368C448 359.2 440.8 352 432 352H416C407.2 352 400 359.2 400 368C400 376.8 407.2 384 416 384z\"/></svg>",
     "file_pdf_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M88 304H80V256H88C101.3 256 112 266.7 112 280C112 293.3 101.3 304 88 304zM192 256H200C208.8 256 216 263.2 216 272V336C216 344.8 208.8 352 200 352H192V256zM224 0V128C224 145.7 238.3 160 256 160H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64C0 28.65 28.65 0 64 0H224zM64 224C55.16 224 48 231.2 48 240V368C48 376.8 55.16 384 64 384C72.84 384 80 376.8 80 368V336H88C118.9 336 144 310.9 144 280C144 249.1 118.9 224 88 224H64zM160 368C160 376.8 167.2 384 176 384H200C226.5 384 248 362.5 248 336V272C248 245.5 226.5 224 200 224H176C167.2 224 160 231.2 160 240V368zM288 224C279.2 224 272 231.2 272 240V368C272 376.8 279.2 384 288 384C296.8 384 304 376.8 304 368V320H336C344.8 320 352 312.8 352 304C352 295.2 344.8 288 336 288H304V256H336C344.8 256 352 248.8 352 240C352 231.2 344.8 224 336 224H288zM256 0L384 128H256V0z\"/></svg>",
     "gear_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M200 0H312l17.2 78.4c15.8 6.5 30.6 15.1 44 25.4l76.5-24.4 56 97-59.4 54.1c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l59.4 54.1-56 97-76.5-24.4c-13.4 10.3-28.2 18.9-44 25.4L312 512H200l-17.2-78.4c-15.8-6.5-30.6-15.1-44-25.4L62.3 432.5l-56-97 59.4-54.1C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L6.3 176.5l56-97 76.5 24.4c13.4-10.3 28.2-18.9 44-25.4L200 0zm56 336c44.2 0 80-35.8 80-80s-35.8-80-80-80s-80 35.8-80 80s35.8 80 80 80z\"/></svg>",
@@ -2263,7 +2275,7 @@ ConfirmationDialogComponent.decorators = [
       <div class="co-transaction-dialog-header-title" [textContent]="title | localize"></div>
     </ng-template>
     <ng-template #footerTemplate>
-      <div class="button-wrapper">
+      <div class="co-transaction-dialog-footer-button-wrapper">
         <ng-container *ngIf="type === ptype.Confirmation">
           <co-button [label]="'YES' | localize" (click)="handleYesClick($event)"></co-button>
           <co-button [label]="'NO' | localize" (click)="handleNoClick($event)"></co-button>
@@ -2349,7 +2361,7 @@ CharacteristicAnswerComponent.decorators = [
       <div class="co-transaction-dialog-header-title" [textContent]="title"></div>
     </ng-template>
     <ng-template #footerTemplate>
-      <div class="dialog-footer-button-wrapper">
+      <div class="co-transaction-dialog-footer-button-wrapper">
         <co-button [label]="'OK' | localize" (click)="handleOkClick()"></co-button>
       </div>
     </ng-template>
@@ -2368,116 +2380,8 @@ CharacteristicAnswerComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ['class.co-characteristic-answer',] }]
 };
 
-class TransactionFilterPopupBaseComponent {
-    constructor() {
-        this.autoClose = false;
-        this.useModel = true;
-        this.valueChange = new EventEmitter();
-        this.closeAfterCommit = new EventEmitter();
-        this.viewModels = [];
-        this.viewModelsFiltered = [];
-        this.propsForLabel = [];
-        this._collection = [];
-    }
-    set searchText(value) {
-        this._searchText = value;
-        this._doSearch();
-    }
-    get searchText() {
-        return this._searchText;
-    }
-    set collection(value) {
-        this._collection = value;
-        this.prepareViewModels();
-    }
-    get collection() {
-        return this._collection;
-    }
-    get model() {
-        return undefined;
-    }
-    commit(value) {
-        return Promise.resolve(true);
-    }
-    handleChecked(row) {
-        return __awaiter(this, void 0, void 0, function* () {
-            row.checked = true;
-            const currentModel = this.viewModels.find(v => v.value === row.value);
-            if (currentModel) {
-                currentModel.checked = true;
-            }
-            for (let i = 0; i < this.viewModels.length; i++) {
-                if (this.viewModels[i].value !== row.value) {
-                    this.viewModels[i].checked = false;
-                }
-            }
-            if (this.useModel) {
-                if (this.autoClose) {
-                    if (yield this.commit(row.value)) {
-                        this.closeAfterCommit.emit();
-                    }
-                }
-                else {
-                    this.commit(row.value);
-                }
-            }
-            else {
-                this.valueChange.emit(row.value);
-            }
-        });
-    }
-    prepareViewModels() {
-        this.collection.forEach((d, index) => {
-            const labels = this.propsForLabel.map(p => d[p]);
-            this.viewModels.push({
-                value: d[this.codeField],
-                propsForLabel: labels,
-                checked: (this.useModel && this.model && this.checkField) ?
-                    this.model[this.checkField] === d[this.codeField] :
-                    (this.value ? this.value === d[this.codeField] : index === 0)
-            });
-        });
-        this.viewModelsFiltered = this.viewModels.slice();
-        if (!this.useModel && this.viewModels.length > 0) {
-            this.valueChange.next(this.value ? this.value : this.viewModels[0].value);
-        }
-    }
-    _doSearch() {
-        this.viewModelsFiltered = JSON.parse(JSON.stringify(this.viewModels));
-        if (this.searchText) {
-            this.viewModelsFiltered = this.viewModelsFiltered.filter(vmf => {
-                return vmf.propsForLabel.find(p => p && p.toString().match(new RegExp(this.searchText, 'gi')));
-            });
-            // if (!this.searchText) {
-            //   this.viewModelsFiltered = this.viewModels.slice();
-            // } else {
-            // this.viewModelsFiltered = JSON.parse(JSON.stringify(this.viewModels));
-            // for (let i = 0; i < this.viewModelsFiltered.length; i++) {
-            //   const vmf = this.viewModelsFiltered[i];
-            //   for (let j = 0; j < vmf.propsForLabel.length; j++) {
-            //     if (vmf.propsForLabel[j]) {
-            //       vmf.propsForLabel[j] = vmf.propsForLabel[j].replace(new RegExp(this.searchText, 'gi'), `<span class="highlight">${this.searchText}</span>`);
-            //     }
-            //   }
-            // }
-        }
-    }
-}
-TransactionFilterPopupBaseComponent.decorators = [
-    { type: Directive }
-];
-TransactionFilterPopupBaseComponent.propDecorators = {
-    autoClose: [{ type: Input }],
-    useModel: [{ type: Input }],
-    searchText: [{ type: Input }],
-    value: [{ type: Input }],
-    valueChange: [{ type: Output }],
-    closeAfterCommit: [{ type: Output }]
-};
-
-class TransactionLineBaseComponent extends TransactionFilterPopupBaseComponent {
+class TransactionLineBaseComponent {
     constructor() {
-        super(...arguments);
         this.readonly = false;
         this._transactionLine = new TransactionLineInfo();
         this._transactionInfo = new TransactionInfo();
@@ -2527,6 +2431,8 @@ class DialogTransactionLineBaseComponent extends TransactionLineBaseComponent {
     constructor() {
         super(...arguments);
         this.buttonType = AppPopupButtonType;
+        this.autoClose = false;
+        this.useModel = true;
         this.close = new EventEmitter();
     }
     onClose(eventType, output) {
@@ -2550,6 +2456,8 @@ DialogTransactionLineBaseComponent.decorators = [
     { type: Directive }
 ];
 DialogTransactionLineBaseComponent.propDecorators = {
+    autoClose: [{ type: Input }],
+    useModel: [{ type: Input }],
     close: [{ type: Output }]
 };
 
@@ -2576,7 +2484,7 @@ DialogTransactionLineWarehouseComponent.decorators = [
       <co-dialog-header-search [title]="'WAREHOUSE'" (search)="handleSearch($event)"></co-dialog-header-search>
     </ng-template>
     <ng-template #footerTemplate>
-      <div class="dialog-footer-button-wrapper" *ngIf="!useModel">
+      <div class="co-transaction-dialog-footer-button-wrapper" *ngIf="!useModel">
         <co-button [label]="'OK' | localize" (click)="handleOkClick()"></co-button>
       </div>
     </ng-template>
@@ -2610,7 +2518,7 @@ DialogTransactionLineCommissionCodeComponent.decorators = [
       <div class="co-transaction-dialog-header-title" [textContent]="'COMMISSION_CODE' | localize"></div>
     </ng-template>
     <ng-template #footerTemplate>
-      <div class="dialog-footer-button-wrapper" *ngIf="!useModel">
+      <div class="co-transaction-dialog-footer-button-wrapper" *ngIf="!useModel">
         <co-button [label]="'OK' | localize" (click)="handleOkClick()"></co-button>
       </div>
     </ng-template>
@@ -2719,7 +2627,7 @@ DialogTransactionLineWarehouseLocationComponent.decorators = [
       <co-dialog-header-search [title]="'LOCATION'" (search)="handleSearch($event)"></co-dialog-header-search>
     </ng-template>
     <ng-template #footerTemplate>
-      <div class="dialog-footer-button-wrapper" *ngIf="!useModel">
+      <div class="co-transaction-dialog-footer-button-wrapper" *ngIf="!useModel">
         <co-button [label]="'OK' | localize" (click)="handleOkClick()"></co-button>
       </div>
     </ng-template>
@@ -2795,7 +2703,7 @@ DialogTransactionLineWarehouseCcComponent.decorators = [
       <div class="co-transaction-dialog-header-title" [textContent]="'COMMISSION_CODE_WAREHOUSE_SELECTION' | localize"></div>
     </ng-template>
     <ng-template #footerTemplate>
-      <div class="dialog-footer-button-wrapper">
+      <div class="co-transaction-dialog-footer-button-wrapper">
         <co-button [label]="'OK' | localize" (click)="handleOkClick()"></co-button>
       </div>
     </ng-template>
@@ -3125,6 +3033,18 @@ class TransactionConnectorAdapterService {
             }
         });
     }
+    lockTransactionById(transactionId, version) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = yield this.connector.lockTransactionByTransId(transactionId, version);
+            if (result.validationResult && result.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionLockResult, result.resultObject);
+            }
+            else {
+                this._handleExceptionFromResponse(result);
+                return null;
+            }
+        });
+    }
     getCustomerFullObject(relationNo) {
         return __awaiter(this, void 0, void 0, function* () {
             const result = yield this.connector.getCustomerFullObject(relationNo);
@@ -3683,6 +3603,23 @@ class TransactionConnectorAdapterService {
             }
         });
     }
+    changeTransactionLineSupplier(uuid, lineUuid, id) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                lineUuid: lineUuid,
+                newSupplierId: id
+            };
+            const response = yield this.connector.changeTransactionLineSupplier(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                this._handleExceptionFromResponse(response);
+                return null;
+            }
+        });
+    }
     changeTransactionLineWarehouse(uuid, lineUuid, warehouseNumber) {
         return __awaiter(this, void 0, void 0, function* () {
             const request = {
@@ -4370,6 +4307,62 @@ class TransactionConnectorAdapterService {
             });
         });
     }
+    generateCommissionOrders(transId, onlyGenerateForDirectSellSuppliers) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.generateCommissionOrders(transId, onlyGenerateForDirectSellSuppliers).then((result) => __awaiter(this, void 0, void 0, function* () {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(true);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                }));
+            });
+        });
+    }
+    lockCustomerFullObject(relationNr) {
+        return new Promise((resolve, reject) => {
+            return this.connector.lockCustomerById(relationNr).then((result) => __awaiter(this, void 0, void 0, function* () {
+                resolve(result.validationResult);
+            }));
+        });
+    }
+    lockSupplierFullObject(relationNr) {
+        return new Promise((resolve, reject) => {
+            return this.connector.lockSupplierById(relationNr).then((result) => __awaiter(this, void 0, void 0, function* () {
+                resolve(result.validationResult);
+            }));
+        });
+    }
+    lockEmployeeFullObject(relationNr) {
+        return new Promise((resolve, reject) => {
+            return this.connector.lockEmployeeById(relationNr).then((result) => __awaiter(this, void 0, void 0, function* () {
+                resolve(result.validationResult);
+            }));
+        });
+    }
+    lockBranchFullObject(relationNr) {
+        return new Promise((resolve, reject) => {
+            return this.connector.lockBranchById(relationNr).then((result) => __awaiter(this, void 0, void 0, function* () {
+                resolve(result.validationResult);
+            }));
+        });
+    }
+    lockCompanyFullObject(relationNr) {
+        return new Promise((resolve, reject) => {
+            return this.connector.lockCompanyById(relationNr).then((result) => __awaiter(this, void 0, void 0, function* () {
+                resolve(result.validationResult);
+            }));
+        });
+    }
+    lockContactPerson(relationNr) {
+        return new Promise((resolve, reject) => {
+            return this.connector.lockContactPersonById(relationNr).then((result) => __awaiter(this, void 0, void 0, function* () {
+                resolve(result.validationResult);
+            }));
+        });
+    }
     _handleExceptionFromResponse(result) {
         this._errorService.showValidationError(result);
     }
@@ -4484,6 +4477,9 @@ class TransactionConnectorService {
     getTransactionById(transactionId) {
         return this._adapterService.getTransactionById(transactionId);
     }
+    lockTransactionById(transId, version) {
+        return this._adapterService.lockTransactionById(transId, version);
+    }
     commit() {
         return this._adapterService.commit();
     }
@@ -4712,6 +4708,11 @@ class TransactionConnectorService {
             return this._adapterService.changeTransactionLineCommissionCode(uuid, lineUuid, code);
         });
     }
+    changeTransactionLineSupplier(uuid, lineUuid, id) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this._adapterService.changeTransactionLineSupplier(uuid, lineUuid, id);
+        });
+    }
     changeTransactionLineWarehouse(uuid, lineUuid, warehouseNumber) {
         return __awaiter(this, void 0, void 0, function* () {
             return this._adapterService.changeTransactionLineWarehouse(uuid, lineUuid, warehouseNumber);
@@ -4922,6 +4923,27 @@ class TransactionConnectorService {
             return this._adapterService.lockPurchasePortalLines(transIdPurchase, lineId);
         });
     }
+    generateCommissionOrders(transId, onlyGenerateForDirectSellSuppliers) {
+        return this._adapterService.generateCommissionOrders(transId, onlyGenerateForDirectSellSuppliers);
+    }
+    lockCustomerFullObject(relationNr) {
+        return this._adapterService.lockCustomerFullObject(relationNr);
+    }
+    lockSupplierFullObject(relationNr) {
+        return this._adapterService.lockSupplierFullObject(relationNr);
+    }
+    lockEmployeeFullObject(relationNr) {
+        return this._adapterService.lockEmployeeFullObject(relationNr);
+    }
+    lockBranchFullObject(relationNr) {
+        return this._adapterService.lockBranchFullObject(relationNr);
+    }
+    lockCompanyFullObject(relationNr) {
+        return this._adapterService.lockCompanyFullObject(relationNr);
+    }
+    lockContactPerson(relationNr) {
+        return this._adapterService.lockContactPerson(relationNr);
+    }
 }
 TransactionConnectorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionConnectorService_Factory() { return new TransactionConnectorService(i0.ɵɵinject(TransactionConnectorAdapterService), i0.ɵɵinject(SelectSingleCacheService), i0.ɵɵinject(SelectMultipleCacheService), i0.ɵɵinject(SelectMultipleParameterizedCacheService)); }, token: TransactionConnectorService, providedIn: "root" });
 TransactionConnectorService.decorators = [
@@ -5027,12 +5049,43 @@ ArticleConnectorService.ctorParameters = () => [
     { type: OptionsService }
 ];
 
+class TransactionEventService {
+    constructor() {
+        this.addToCartBySku = new Subject();
+        this.addToCartBySelectorResult = new Subject();
+        this.openShoppingCartModule = new Subject();
+        this.loggedIn = new Subject();
+        this.addNewUserToShoppingCartModule = new Subject();
+        this.addUserRelationShoppingCartModule = new Subject();
+        this.addArticleLine = new Subject();
+        this.addTextLine = new Subject();
+        this.addArticleLineAt = new Subject();
+        this.addTextLineAt = new Subject();
+        this.changeLineSequence = new Subject();
+        this.transactionLineClicked = new Subject();
+        this.rightSidebarClose = new Subject();
+        this.scrollContent = new Subject();
+        this.commitReceivePurchaseOrders = new Subject();
+        this.selectAllLines = new Subject();
+        this.transactionLineChanged = new Subject();
+        this.openSidePanel = new Subject();
+        this.selectAllSalesOrderLinesForPurchase = new Subject();
+        this.generateCommissionOrders = new Subject();
+    }
+}
+TransactionEventService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionEventService_Factory() { return new TransactionEventService(); }, token: TransactionEventService, providedIn: "root" });
+TransactionEventService.decorators = [
+    { type: Injectable, args: [{ providedIn: "root" },] }
+];
+
 class PendingReasonService {
-    constructor(dialogService, options, connector, articleConnector) {
+    constructor(dialogService, options, connector, articleConnector, dictionaryService, transactionEventService) {
         this.dialogService = dialogService;
         this.options = options;
         this.connector = connector;
         this.articleConnector = articleConnector;
+        this.dictionaryService = dictionaryService;
+        this.transactionEventService = transactionEventService;
         this.logout = new Subject();
         this.transactionUpdated = new BehaviorSubject(undefined);
         this.relationUpdated = new BehaviorSubject(undefined);
@@ -5284,7 +5337,7 @@ class PendingReasonService {
         }
     }
 }
-PendingReasonService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PendingReasonService_Factory() { return new PendingReasonService(i0.ɵɵinject(DialogService), i0.ɵɵinject(OptionsService), i0.ɵɵinject(TransactionConnectorService), i0.ɵɵinject(ArticleConnectorService)); }, token: PendingReasonService, providedIn: "root" });
+PendingReasonService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PendingReasonService_Factory() { return new PendingReasonService(i0.ɵɵinject(DialogService), i0.ɵɵinject(OptionsService), i0.ɵɵinject(TransactionConnectorService), i0.ɵɵinject(ArticleConnectorService), i0.ɵɵinject(DictionaryService), i0.ɵɵinject(TransactionEventService)); }, token: PendingReasonService, providedIn: "root" });
 PendingReasonService.decorators = [
     { type: Injectable, args: [{
                 providedIn: "root"
@@ -5294,10 +5347,23 @@ PendingReasonService.ctorParameters = () => [
     { type: DialogService },
     { type: OptionsService },
     { type: TransactionConnectorService },
-    { type: ArticleConnectorService }
+    { type: ArticleConnectorService },
+    { type: DictionaryService },
+    { type: TransactionEventService }
 ];
 
 class TransactionService extends PendingReasonService {
+    constructor() {
+        super(...arguments);
+        this._lockMethods = new Map([
+            [RelationKind.Customer, (relationNr) => this._lockCustomerFullObject(relationNr)],
+            [RelationKind.Supplier, (relationNr) => this._lockSupplierFullObject(relationNr)],
+            [RelationKind.Personnel, (relationNr) => this._lockEmployeeFullObject(relationNr)],
+            [RelationKind.Branch, (relationNr) => this._lockBranchFullObject(relationNr)],
+            [RelationKind.Company, (relationNr) => this._lockCompanyFullObject(relationNr)],
+            [RelationKind.ContactPerson, (relationNr) => this._lockContactPerson(relationNr)],
+        ]);
+    }
     pendingLineOperationStatus(lineOperationStatuses) {
         const status = lineOperationStatuses.find(line => line.pendingReasonType !== PendingReasonType.NONE
             && line.pendingReasonType !== PendingReasonType.NON_CRITICAL_DISCONTINUATION);
@@ -5307,9 +5373,7 @@ class TransactionService extends PendingReasonService {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.changeTransactionLinePrice(uuid, lineUuid, price);
             if (response) {
-                const success = yield this.handleLineOperationStatuses(response);
-                this.rememberCurrentTransaction(response);
-                return success;
+                return this.handleLineOperationStatuses(response);
             }
             return false;
         });
@@ -5318,9 +5382,7 @@ class TransactionService extends PendingReasonService {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.changeTransactionLineReference(uuid, lineUuid, reference);
             if (response) {
-                const success = yield this.handleLineOperationStatuses(response);
-                this.rememberCurrentTransaction(response);
-                return success;
+                return this.handleLineOperationStatuses(response);
             }
             return false;
         });
@@ -5329,9 +5391,7 @@ class TransactionService extends PendingReasonService {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.changeTransactionLineGoodDescription(uuid, lineUuid, goodDescription);
             if (response) {
-                const success = yield this.handleLineOperationStatuses(response);
-                this.rememberCurrentTransaction(response);
-                return success;
+                return this.handleLineOperationStatuses(response);
             }
             return false;
         });
@@ -5527,9 +5587,7 @@ class TransactionService extends PendingReasonService {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.changeTransactionLineQuantity(uuid, lineUuid, quantity);
             if (response) {
-                const success = yield this.handleLineOperationStatuses(response);
-                this.rememberCurrentTransaction(response);
-                return success;
+                return this.handleLineOperationStatuses(response);
             }
             return false;
         });
@@ -5538,9 +5596,7 @@ class TransactionService extends PendingReasonService {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.changeTransactionLineDeliveryDate(uuid, lineUuid, date);
             if (response) {
-                const success = yield this.handleLineOperationStatuses(response);
-                this.rememberCurrentTransaction(response);
-                return success;
+                return this.handleLineOperationStatuses(response);
             }
             return false;
         });
@@ -5549,9 +5605,7 @@ class TransactionService extends PendingReasonService {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.changeTransactionLinePriceList(uuid, lineUuid, priceList);
             if (response) {
-                const success = yield this.handleLineOperationStatuses(response);
-                this.rememberCurrentTransaction(response);
-                return success;
+                return this.handleLineOperationStatuses(response);
             }
             return false;
         });
@@ -5560,9 +5614,7 @@ class TransactionService extends PendingReasonService {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.changeTransactionLineVat(uuid, lineUuid, id);
             if (response) {
-                const success = yield this.handleLineOperationStatuses(response);
-                this.rememberCurrentTransaction(response);
-                return success;
+                return this.handleLineOperationStatuses(response);
             }
             return false;
         });
@@ -5571,9 +5623,16 @@ class TransactionService extends PendingReasonService {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.changeTransactionLineCommissionCode(uuid, lineUuid, code);
             if (response) {
-                const success = yield this.handleLineOperationStatuses(response);
-                this.rememberCurrentTransaction(response);
-                return success;
+                return this.handleLineOperationStatuses(response);
+            }
+            return false;
+        });
+    }
+    updateSupplierTransactionLine(uuid, lineUuid, id) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.connector.changeTransactionLineSupplier(uuid, lineUuid, id);
+            if (response) {
+                return this.handleLineOperationStatuses(response);
             }
             return false;
         });
@@ -5582,9 +5641,7 @@ class TransactionService extends PendingReasonService {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.changeTransactionLineWarehouse(uuid, lineUuid, warehouseNumber);
             if (response) {
-                const success = yield this.handleLineOperationStatuses(response);
-                this.rememberCurrentTransaction(response);
-                return success;
+                return this.handleLineOperationStatuses(response);
             }
             return false;
         });
@@ -5593,9 +5650,7 @@ class TransactionService extends PendingReasonService {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.changeTransactionLineDeliveryMethod(uuid, lineUuid, method);
             if (response) {
-                const success = yield this.handleLineOperationStatuses(response);
-                this.rememberCurrentTransaction(response);
-                return success;
+                return this.handleLineOperationStatuses(response);
             }
             return false;
         });
@@ -5604,13 +5659,19 @@ class TransactionService extends PendingReasonService {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.changeTransactionLineLineDiscount(uuid, lineUuid, type, discount, reason, code);
             if (response) {
-                const success = yield this.handleLineOperationStatuses(response);
-                this.rememberCurrentTransaction(response);
-                return success;
+                return this.handleLineOperationStatuses(response);
             }
             return false;
         });
     }
+    generateCommissionOrders(transId, onlyGenerateForDirectSellSuppliers) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.transactionEventService.generateCommissionOrders.next(true);
+            const response = yield this.connector.generateCommissionOrders(transId, onlyGenerateForDirectSellSuppliers);
+            this.transactionEventService.generateCommissionOrders.next(false);
+            return response;
+        });
+    }
     searchTransactions(request) {
         return this.connector.searchTransactions(request);
     }
@@ -5656,25 +5717,47 @@ class TransactionService extends PendingReasonService {
     getTransactionById(transactionId) {
         return new Promise((resolve, reject) => {
             this.connector.getTransactionById(transactionId)
-                .then((response) => {
-                if (response.isSuccess) {
-                    this.rememberCurrentTransaction(response);
-                    this.transactionUpdated.next(response);
+                .then((transaction) => __awaiter(this, void 0, void 0, function* () {
+                if (transaction.isSuccess) {
+                    const lockResponse = yield this.lockTransaction(transaction.transactionInfo.id, 0);
+                    if (lockResponse && lockResponse.isLockSuccess) {
+                        this.rememberCurrentTransaction(transaction);
+                        this.transactionUpdated.next(transaction);
+                    }
+                    else {
+                        const lockDetails = `${this.dictionaryService.get("BY")}: ${lockResponse.lockedBy}
+              ${this.dictionaryService.get("SINCE", false)} ${lockResponse.lockedSince.toLocaleString()}`;
+                        this.dialogService.showError(this.dictionaryService.get("TRANSACTION_ALREADY_LOCKED"), lockDetails);
+                    }
                     resolve(true);
                 }
                 else {
                     reject(false);
                 }
-            })
+            }))
                 .catch((reason) => {
                 reject(false);
             });
         });
     }
-    commit() {
-        return this.connector.commit();
-    }
-    saveTransaction(close = false) {
+    lockRelation(relationKind, relationNr) {
+        const lockMethod = this._lockMethods.get(relationKind);
+        if (lockMethod) {
+            return lockMethod.call(this, relationNr);
+        }
+        else {
+            const result = new ValidationResult();
+            result.success = false;
+            return Promise.resolve(result);
+        }
+    }
+    lockTransaction(transId, version) {
+        return this.connector.lockTransactionById(transId, version);
+    }
+    commit() {
+        return this.connector.commit();
+    }
+    saveTransaction(close = false) {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.connector.saveTransaction(this.currentTransaction.transactionInfo.uuid);
             if (response && response.isSuccess) {
@@ -5746,10 +5829,7 @@ class TransactionService extends PendingReasonService {
         return __awaiter(this, void 0, void 0, function* () {
             yield this._checkAndCreateTransaction();
             const response = yield this.connector.addTransactionLine(this.currentTransaction.transactionInfo.uuid, TransactionLineType.ArticleLine, articleNo, null, null, null, isReturn, aboveLineNr, belowLineNr);
-            if (yield this.handleLineOperationStatuses(response)) {
-                this.rememberCurrentTransaction(response);
-            }
-            return true;
+            return this.handleLineOperationStatuses(response);
         });
     }
     // public async addArticleToTransaction(transactionUuid: string, articleNo: string, amount: number = 1, warehouseNo: number = 1, commissionCode: string = "2", isReturn: boolean = false, aboveLineNr: number = 0, belowLineNr: number = 0): Promise<LineOperationResponse> {
@@ -5986,8 +6066,26 @@ class TransactionService extends PendingReasonService {
             }
         });
     }
+    _lockCustomerFullObject(relationNr) {
+        return this.connector.lockCustomerFullObject(relationNr);
+    }
+    _lockSupplierFullObject(relationNr) {
+        return this.connector.lockSupplierFullObject(relationNr);
+    }
+    _lockEmployeeFullObject(relationNr) {
+        return this.connector.lockEmployeeFullObject(relationNr);
+    }
+    _lockBranchFullObject(relationNr) {
+        return this.connector.lockBranchFullObject(relationNr);
+    }
+    _lockCompanyFullObject(relationNr) {
+        return this.connector.lockCompanyFullObject(relationNr);
+    }
+    _lockContactPerson(relationNr) {
+        return this.connector.lockContactPerson(relationNr);
+    }
 }
-TransactionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionService_Factory() { return new TransactionService(i0.ɵɵinject(DialogService), i0.ɵɵinject(OptionsService), i0.ɵɵinject(TransactionConnectorService), i0.ɵɵinject(ArticleConnectorService)); }, token: TransactionService, providedIn: "root" });
+TransactionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionService_Factory() { return new TransactionService(i0.ɵɵinject(DialogService), i0.ɵɵinject(OptionsService), i0.ɵɵinject(TransactionConnectorService), i0.ɵɵinject(ArticleConnectorService), i0.ɵɵinject(DictionaryService), i0.ɵɵinject(TransactionEventService)); }, token: TransactionService, providedIn: "root" });
 TransactionService.decorators = [
     { type: Injectable, args: [{
                 providedIn: "root"
@@ -6083,8 +6181,6 @@ CheckoutComponent.decorators = [
     <co-stepper #stepper [finishButtonLabel]="'CHECKOUT_FINISH' | localize" (finishStep)="handleFinishStep()">
       <co-stepper-step #stepRelation [index]="1" [label]="'YOUR_DATA' | localize" (validateStep)="handleRelationValidation()">
         <co-checkout-overview-relation-edit #checkoutRelation *ngIf="stepRelation.show" [(relation)]="service.relation"
-                                            [deliveryAddressNawNr]="deliveryAddressNawNr"
-                                            [invoiceAddressNawNr]="invoiceAddressNawNr"
                                             (deliveryAddressChange)="handleDeliveryAddressChange($event)"
                                             (invoiceAddressChange)="handleInvoiceAddressChange($event)"
                                             (relationChange)="service.relation = $event"
@@ -6154,8 +6250,8 @@ class CheckoutOverviewRelationEditComponent {
         // public privacySettings: RelationPrivacySetting[];
         // public addresses: Address[] = [];
         this._relation = new CustomerFullObject();
-        this.deliveryAddressIdx = 0;
-        this.invoiceAddressIdx = 0;
+        // public deliveryAddressIdx: number = 0;
+        // public invoiceAddressIdx: number = 0;
         this.editAddressType = AddressType.DeliveryAddress;
     }
     // @ViewChild(FormComponent, {static: true})
@@ -6164,21 +6260,14 @@ class CheckoutOverviewRelationEditComponent {
         this._relation = value;
         if (this._relation) {
             this.address = this._relation.getFirstAddressOrCreateNew();
+            const firstActiveAddress = this._relation.activeAddresses.length > 0 ? this._relation.activeAddresses[0] : undefined;
+            this.deliveryAddressNawNr = firstActiveAddress ? firstActiveAddress.nawNr : 0;
+            this.invoiceAddressNawNr = firstActiveAddress ? firstActiveAddress.nawNr : 0;
         }
     }
     get relation() {
         return this._relation;
     }
-    set deliveryAddressNawNr(value) {
-        if (value && this.relation && this.relation.addresses) {
-            this.deliveryAddressIdx = this.relation.addresses.findIndex(a => a.nawNr === value);
-        }
-    }
-    set invoiceAddressNawNr(value) {
-        if (value && this.relation && this.relation.addresses) {
-            this.invoiceAddressIdx = this.relation.addresses.findIndex(a => a.nawNr === value);
-        }
-    }
     showClass() {
         return true;
     }
@@ -6230,15 +6319,16 @@ class CheckoutOverviewRelationEditComponent {
     //   this.editAddressType = deliveryAddress ? AddressType.DeliveryAddress : AddressType.BillingAddress;
     //   this.showSelectAddressDialog = true;
     // }
-    setIndexDeliveryAddress(idx) {
-        this.deliveryAddressIdx = idx;
-        this.editAddressType = AddressType.DeliveryAddress;
-    }
-    setIndexInvoiceAddress(idx) {
-        this.invoiceAddressIdx = idx;
-        this.editAddressType = AddressType.BillingAddress;
-        // this.selectAddress(this.relation.addresses[idx]);
-    }
+    // public setIndexDeliveryAddress(idx: number): void {
+    //   this.deliveryAddressIdx = idx;
+    //   this.editAddressType = AddressType.DeliveryAddress;
+    // }
+    //
+    // public setIndexInvoiceAddress(idx: number): void {
+    //   this.invoiceAddressIdx = idx;
+    //   this.editAddressType = AddressType.BillingAddress;
+    //   // this.selectAddress(this.relation.addresses[idx]);
+    // }
     // public editAddress(addr: Address): void {
     //   this.addressToEdit = <Address><unknown>this._boFactory.makeWithRawBackendData(Address, addr);
     //   this.showEditAddressDialog()
@@ -6335,23 +6425,31 @@ CheckoutOverviewRelationEditComponent.decorators = [
             <span class="label" [textContent]="'PERSONAL_DATA' | localize"></span>
           </div>
           <div class="checkout-data-column">
-            <co-relation-type
-              [relation]="relation"
-            ></co-relation-type>
-            <div class="default-data-row">
+            <div class="checkout-data-row">
+              <co-relation-type
+                [relation]="relation"
+              ></co-relation-type>
+            </div>
+            <div class="checkout-data-row">
               <relation-customer-groups [(model)]="relation.customerGroup" required></relation-customer-groups>
             </div>
-            <co-relation-general [relation]="relation" (relationChange)="updateRelation($event)"></co-relation-general>
-            <co-relation-address [address]="address"></co-relation-address>
+            <div class="checkout-data-row">
+              <co-relation-general [relation]="relation" (relationChange)="updateRelation($event)"></co-relation-general>
+            </div>
+            <div class="checkout-data-row">
+              <co-relation-address [address]="address"></co-relation-address>
+            </div>
           </div>
           <div class="checkout-data-column">
-            <co-relation-addresses
-              [addresses]="relation.activeAddresses"
-              [type]="addressType.DeliveryAddress"
-              [selectedAddressIdx]="deliveryAddressIdx"
-              (selectedAddressChange)="setIndexDeliveryAddress($event)"
-              (selectedAddressNawNrChange)="deliveryAddressChange.emit($event)"
-            ></co-relation-addresses>
+            <div class="checkout-data-row">
+              <co-relation-addresses
+                [relation]="relation"
+                [addresses]="relation.addresses"
+                [type]="addressType.DeliveryAddress"
+                [selectedNawNr]="deliveryAddressNawNr"
+                (selectedNawNrChange)="deliveryAddressChange.emit($event)"
+              ></co-relation-addresses>
+            </div>
           </div>
           <div class="checkout-label-column">
             <span>02</span>
@@ -6362,13 +6460,14 @@ CheckoutOverviewRelationEditComponent.decorators = [
               <co-input-checkbox [(model)]="service.invoiceAddressSameAsDelivery" (modelChange)="checkSameAddress($event)" [label]="'SAME_AS_DELIVERY' | localize"></co-input-checkbox>
             </div>
             <div class="overview-delivery-invoice-address" *ngIf="!service.invoiceAddressSameAsDelivery" @showHideInvoiceAddress>
-              <co-relation-addresses
-                [addresses]="relation.activeAddresses"
-                [type]="addressType.BillingAddress"
-                [selectedAddressIdx]="invoiceAddressIdx"
-                (selectedAddressChange)="setIndexInvoiceAddress($event)"
-                (selectedAddressNawNrChange)="invoiceAddressChange.emit($event)"
-              ></co-relation-addresses>
+              <div class="checkout-data-row">
+                <co-relation-addresses
+                  [addresses]="relation.activeAddresses"
+                  [type]="addressType.BillingAddress"
+                  [selectedNawNr]="invoiceAddressNawNr"
+                  (selectedNawNrChange)="invoiceAddressChange.emit($event)"
+                ></co-relation-addresses>
+              </div>
             </div>
           </div>
           <div class="checkout-label-column">
@@ -6376,14 +6475,18 @@ CheckoutOverviewRelationEditComponent.decorators = [
             <span class="label" [textContent]="'CONTACT_DETAILS' | localize"></span>
           </div>
           <div class="checkout-data-column">
-            <co-relation-contact-details [relation]="relation"></co-relation-contact-details>
+            <div class="checkout-data-row">
+              <co-relation-contact-details [relation]="relation"></co-relation-contact-details>
+            </div>
           </div>
           <div class="checkout-label-column">
             <span>04</span>
             <span class="label" [textContent]="'PRIVACY_PREFERENCES' | localize"></span>
           </div>
           <div class="checkout-data-column">
-            <co-relation-preferences [relation]="relation"></co-relation-preferences>
+            <div class="checkout-data-row">
+              <co-relation-preferences [relation]="relation"></co-relation-preferences>
+            </div>
           </div>
         </div>
       </co-form>
@@ -6427,8 +6530,6 @@ CheckoutOverviewRelationEditComponent.ctorParameters = () => [
 ];
 CheckoutOverviewRelationEditComponent.propDecorators = {
     relation: [{ type: Input }],
-    deliveryAddressNawNr: [{ type: Input }],
-    invoiceAddressNawNr: [{ type: Input }],
     validSubmit: [{ type: Output }],
     invalidSubmit: [{ type: Output }],
     deliveryAddressChange: [{ type: Output }],
@@ -6570,102 +6671,96 @@ CheckoutOverviewDeliveryEditComponent.decorators = [
     <div class="delivery-edit-content">
       <co-form>
         <div class="checkout-form-wrapper">
-          <div class="checkout-section-wrapper">
-            <div class="checkout-label-column">
-              <span>01</span>
-              <span class="label" [textContent]="'DELIVERY_DATA' | localize"></span>
+          <div class="checkout-label-column">
+            <span>01</span>
+            <span class="label" [textContent]="'DELIVERY_DATA' | localize"></span>
+          </div>
+          <div class="checkout-data-column">
+            <div class="checkout-data-row">
+              <co-transaction-header-delivery-method
+                [transactionInfo]="transaction.transactionInfo"
+                [filterOnWizard]="true"
+                (deliveryMethodChange)="currentDeliveryMethod = $event"
+              ></co-transaction-header-delivery-method>
             </div>
-            <div class="checkout-data-column">
-              <div class="checkout-data-row">
-                <co-transaction-header-delivery-method
-                  [transactionInfo]="transaction.transactionInfo"
-                  [filterOnWizard]="true"
-                  (deliveryMethodChange)="currentDeliveryMethod = $event"
-                ></co-transaction-header-delivery-method>
-              </div>
-              <div class="checkout-data-row">
-                <co-transaction-header-delivery-date class="header-delivery-deliverydate"
-                                                     [transactionInfo]="transaction.transactionInfo"
-                ></co-transaction-header-delivery-date>
-                <co-transaction-header-preferred-delivery-date class="header-delivery-deliverydate"
-                                                     [transactionInfo]="transaction.transactionInfo"
-                ></co-transaction-header-preferred-delivery-date>
-              </div>
-              <div class="checkout-data-row">
-                <co-transaction-header-partial-delivery [transactionInfo]="transaction.transactionInfo"></co-transaction-header-partial-delivery>
-              </div>
-              <div class="checkout-data-row">
-                <co-collapsible [headerTitle]="'ADD_DELIVERY_OPTION' | localize" [iconData]="iconService.getIcon(icons.TriangleDown)">
-                  <div class="checkout-data-row">
-                    <co-transaction-header-delivery-options
-                      [transactionInfo]="transaction.transactionInfo"
-                      [deliveryMethod]="currentDeliveryMethod"
-                    ></co-transaction-header-delivery-options>
-                  </div>
-                </co-collapsible>
-              </div>
-              <div class="checkout-data-row">
-                <co-collapsible [headerTitle]="'ADD_REMARK' | localize" [iconData]="iconService.getIcon(icons.TriangleDown)">
-                  <div class="checkout-data-row">
-                    <co-transaction-header-remarks [transactionInfo]="transaction.transactionInfo"></co-transaction-header-remarks>
-                  </div>
-                </co-collapsible>
-              </div>
-              <div class="checkout-data-row">
-                <co-collapsible [headerTitle]="'ADD_REFERENCE' | localize" [iconData]="iconService.getIcon(icons.TriangleDown)">
-                  <div class="checkout-data-row">
-                    <co-transaction-header-reference [transactionInfo]="transaction.transactionInfo"></co-transaction-header-reference>
-                  </div>
-                  <div class="checkout-data-row">
-                    <co-transaction-header-relation-reference [transactionInfo]="transaction.transactionInfo"></co-transaction-header-relation-reference>
-                  </div>
-                </co-collapsible>
-              </div>
-              <div class="checkout-data-row">
-                <co-input-date [model]="'NOG_NIET_GEIMPLEMENTEERD'" [placeholder]="'ASSEMBLY_DATE' | localize"></co-input-date>
-              </div>
+            <div class="checkout-data-row">
+              <co-transaction-header-delivery-date class="header-delivery-deliverydate"
+                                                   [transactionInfo]="transaction.transactionInfo"
+              ></co-transaction-header-delivery-date>
+              <co-transaction-header-preferred-delivery-date class="header-delivery-deliverydate"
+                                                             [transactionInfo]="transaction.transactionInfo"
+              ></co-transaction-header-preferred-delivery-date>
+            </div>
+            <div class="checkout-data-row">
+              <co-transaction-header-partial-delivery [transactionInfo]="transaction.transactionInfo"></co-transaction-header-partial-delivery>
+            </div>
+            <div class="checkout-data-row">
+              <co-collapsible [headerTitle]="'ADD_DELIVERY_OPTION' | localize" [iconData]="iconService.getIcon(icons.TriangleDown)">
+                <div class="checkout-data-row">
+                  <co-transaction-header-delivery-options
+                    [transactionInfo]="transaction.transactionInfo"
+                    [deliveryMethod]="currentDeliveryMethod"
+                  ></co-transaction-header-delivery-options>
+                </div>
+              </co-collapsible>
+            </div>
+            <div class="checkout-data-row">
+              <co-collapsible [headerTitle]="'ADD_REMARK' | localize" [iconData]="iconService.getIcon(icons.TriangleDown)">
+                <div class="checkout-data-row">
+                  <co-transaction-header-remarks [transactionInfo]="transaction.transactionInfo"></co-transaction-header-remarks>
+                </div>
+              </co-collapsible>
+            </div>
+            <div class="checkout-data-row">
+              <co-collapsible [headerTitle]="'ADD_REFERENCE' | localize" [iconData]="iconService.getIcon(icons.TriangleDown)">
+                <div class="checkout-data-row">
+                  <co-transaction-header-reference [transactionInfo]="transaction.transactionInfo"></co-transaction-header-reference>
+                </div>
+                <div class="checkout-data-row">
+                  <co-transaction-header-relation-reference [transactionInfo]="transaction.transactionInfo"></co-transaction-header-relation-reference>
+                </div>
+              </co-collapsible>
+            </div>
+            <div class="checkout-data-row">
+              <co-input-date [model]="'NOG_NIET_GEIMPLEMENTEERD'" [placeholder]="'ASSEMBLY_DATE' | localize"></co-input-date>
             </div>
           </div>
-          <div class="checkout-section-wrapper">
-            <div class="checkout-label-column">
-              <span>02</span>
-              <span class="label" [textContent]="'DOWNPAYMENT' | localize"></span>
+          <div class="checkout-label-column">
+            <span>02</span>
+            <span class="label" [textContent]="'DOWNPAYMENT' | localize"></span>
+          </div>
+          <div class="checkout-data-column">
+            <div class="checkout-data-row">
+              <co-transaction-header-downpayment-percentage [transactionInfo]="transaction.transactionInfo"></co-transaction-header-downpayment-percentage>
+              <co-transaction-header-downpayment-amount [transactionInfo]="transaction.transactionInfo"></co-transaction-header-downpayment-amount>
             </div>
-            <div class="checkout-data-column">
-              <div class="checkout-data-row">
-                <co-transaction-header-downpayment-percentage [transactionInfo]="transaction.transactionInfo"></co-transaction-header-downpayment-percentage>
-                <co-transaction-header-downpayment-amount [transactionInfo]="transaction.transactionInfo"></co-transaction-header-downpayment-amount>
-              </div>
-              <div class="checkout-data-row">
-                <co-input-text [model]="'NOG_NIET_GEIMPLEMENTEERD'" [placeholder]="'DOWNPAYMENT_BY_BR' | localize"></co-input-text>
-              </div>
-              <div class="checkout-data-row">
-                <co-input-text [model]="'NOG_NIET_GEIMPLEMENTEERD'" [placeholder]="'DOWNPAYMENT_ON_DELIVERY' | localize"></co-input-text>
-              </div>
+            <div class="checkout-data-row">
+              <co-input-text [model]="'NOG_NIET_GEIMPLEMENTEERD'" [placeholder]="'DOWNPAYMENT_BY_BR' | localize"></co-input-text>
+            </div>
+            <div class="checkout-data-row">
+              <co-input-text [model]="'NOG_NIET_GEIMPLEMENTEERD'" [placeholder]="'DOWNPAYMENT_ON_DELIVERY' | localize"></co-input-text>
             </div>
           </div>
-          <div class="checkout-section-wrapper">
-            <div class="checkout-label-column">
-              <span>03</span>
-              <span class="label" [textContent]="'ORDER_DATA' | localize"></span>
+          <div class="checkout-label-column">
+            <span>03</span>
+            <span class="label" [textContent]="'ORDER_DATA' | localize"></span>
+          </div>
+          <div class="checkout-data-column">
+            <div class="checkout-data-row">
+              <co-transaction-header-branch [simple]="true" [transactionInfo]="transaction.transactionInfo"></co-transaction-header-branch>
+              <co-transaction-header-administrative-relation [transactionInfo]="transaction.transactionInfo"></co-transaction-header-administrative-relation>
             </div>
-            <div class="checkout-data-column">
-              <div class="checkout-data-row">
-                <co-transaction-header-branch [simple]="true" [transactionInfo]="transaction.transactionInfo"></co-transaction-header-branch>
-                <co-transaction-header-administrative-relation [transactionInfo]="transaction.transactionInfo"></co-transaction-header-administrative-relation>
-              </div>
-              <div class="checkout-data-row">
-                <span class="label" [textContent]="'MARKETING_CODE' | localize"></span>
-              </div>
-              <div class="checkout-data-row">
-                <co-transaction-header-marketing [transactionInfo]="transaction.transactionInfo"></co-transaction-header-marketing>
-              </div>
-              <div class="checkout-data-row">
-                <span class="label" [textContent]="'ORDER_PARAMETERS' | localize"></span>
-              </div>
-              <div class="checkout-data-row">
-                <co-transaction-header-definitive [transactionInfo]="transaction.transactionInfo"></co-transaction-header-definitive>
-              </div>
+            <div class="checkout-data-row">
+              <span class="label" [textContent]="'MARKETING_CODE' | localize"></span>
+            </div>
+            <div class="checkout-data-row">
+              <co-transaction-header-marketing [transactionInfo]="transaction.transactionInfo"></co-transaction-header-marketing>
+            </div>
+            <div class="checkout-data-row">
+              <span class="label" [textContent]="'ORDER_PARAMETERS' | localize"></span>
+            </div>
+            <div class="checkout-data-row">
+              <co-transaction-header-definitive [transactionInfo]="transaction.transactionInfo"></co-transaction-header-definitive>
             </div>
           </div>
         </div>
@@ -6910,6 +7005,7 @@ IconComponent.propDecorators = {
 class CustomerGroupsComponent {
     constructor(_connector) {
         this._connector = _connector;
+        this.readonly = false;
         this.required = false;
         this.modelChange = new EventEmitter();
         this.customerGroups = [];
@@ -6928,6 +7024,7 @@ CustomerGroupsComponent.decorators = [
                 selector: "relation-customer-groups",
                 template: `
     <co-input-combo-box [model]="model"
+                        [readonly]="readonly"
                         (modelChange)="modelChange.emit($event)"
                         [collection]="customerGroups"
                         [fields]="fields"
@@ -6942,6 +7039,7 @@ CustomerGroupsComponent.ctorParameters = () => [
     { type: TransactionConnectorService }
 ];
 CustomerGroupsComponent.propDecorators = {
+    readonly: [{ type: Input }],
     required: [{ type: Input }],
     model: [{ type: Input }],
     modelChange: [{ type: Output }]
@@ -7233,49 +7331,6 @@ ConfirmationDialogModule.decorators = [
             },] }
 ];
 
-class LoaderComponent {
-}
-LoaderComponent.decorators = [
-    { type: Component, args: [{
-                selector: "transaction-loader",
-                template: `
-        <div class="transaction-loader">
-            <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
-                <defs>
-                    <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
-                        <stop stop-color="#000" stop-opacity="0" offset="0%"/>
-                        <stop stop-color="#000" stop-opacity=".631" offset="63.146%"/>
-                        <stop stop-color="#000" offset="100%"/>
-                    </linearGradient>
-                </defs>
-                <g fill="none" fill-rule="evenodd">
-                    <g transform="translate(1 1)">
-                        <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
-                            <animateTransform
-                                    attributeName="transform"
-                                    type="rotate"
-                                    from="0 18 18"
-                                    to="360 18 18"
-                                    dur="0.9s"
-                                    repeatCount="indefinite" />
-                        </path>
-                        <circle fill="#000" cx="36" cy="18" r="1">
-                            <animateTransform
-                                    attributeName="transform"
-                                    type="rotate"
-                                    from="0 18 18"
-                                    to="360 18 18"
-                                    dur="0.9s"
-                                    repeatCount="indefinite" />
-                        </circle>
-                    </g>
-                </g>
-            </svg>
-        </div>
-    `
-            },] }
-];
-
 class CharacteristicAnswerModule {
 }
 CharacteristicAnswerModule.decorators = [
@@ -7341,7 +7396,7 @@ WarehouseComponent.decorators = [
       <div class="co-transaction-dialog-header-title" [textContent]="'WAREHOUSE' | localize"></div>
     </ng-template>
     <ng-template #footerTemplate>
-      <div class="dialog-footer-button-wrapper">
+      <div class="co-transaction-dialog-footer-button-wrapper">
         <co-button [label]="'OK' | localize" (click)="handleOkClick()"></co-button>
       </div>
     </ng-template>
@@ -7468,7 +7523,6 @@ CoreModule.decorators = [
                     IconComponent,
                     CustomerGroupsComponent,
                     StockStatusIndicatorComponent,
-                    LoaderComponent,
                     LazyRenderMasterDirective,
                     LazyRenderDirective
                 ],
@@ -7477,7 +7531,6 @@ CoreModule.decorators = [
                     IconComponent,
                     CustomerGroupsComponent,
                     StockStatusIndicatorComponent,
-                    LoaderComponent,
                     LazyRenderMasterDirective,
                     LazyRenderDirective
                 ]
@@ -7794,13 +7847,17 @@ class RelationAddressTileComponent {
         event.stopImmediatePropagation();
         this.editAddressClicked.next(this.address);
     }
+    handleSelectedChange(address) {
+        this.selected = true;
+        this.selectedChange.emit(address);
+    }
 }
 RelationAddressTileComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-relation-address-tile",
                 template: `
     <ng-container *ngIf="!actAsAddTile">
-      <co-tile [selected]="selected" (selectedChange)="selectedChange.emit($event)">
+      <co-tile [selected]="selected" (selectedChange)="handleSelectedChange(address)">
         <div class="relation-content-wrapper">
           <span class="relation-address-type" [textContent]="address.displayType | localize"></span>
           <span class="relation-address-name" [textContent]="address.addressName"></span>
@@ -7850,7 +7907,7 @@ TileComponent.decorators = [
                 template: `
     <div class="co-tile-wrapper" (click)="selectedChange.emit(selected)">
       <div class="co-tile-select-wrapper">
-        <co-input-radio-button [model]="selected" (modelChange)="selectedChange.emit($event)"></co-input-radio-button>
+        <co-input-radio-button [model]="selected" [readonly]="selected" (modelChange)="selectedChange.emit($event)"></co-input-radio-button>
       </div>
       <div class="co-tile-content-wrapper">
         <ng-content></ng-content>
@@ -8163,7 +8220,116 @@ TransactionTotalsComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ["class.co-transaction-totals",] }]
 };
 
-class TransactionHeaderBaseComponent extends TransactionFilterPopupBaseComponent {
+class TransactionHeaderFilterPopupBaseComponent {
+    constructor() {
+        this.autoClose = false;
+        this.useModel = true;
+        this.valueChange = new EventEmitter();
+        this.closeAfterCommit = new EventEmitter();
+        this.viewModels = [];
+        this.viewModelsFiltered = [];
+        this.propsForLabel = [];
+        this._collection = [];
+    }
+    set searchText(value) {
+        if (value !== undefined && value !== null) {
+            this._searchText = value;
+            this._doSearch();
+        }
+    }
+    get searchText() {
+        return this._searchText;
+    }
+    set collection(value) {
+        this._collection = value;
+        this.prepareViewModels();
+    }
+    get collection() {
+        return this._collection;
+    }
+    get model() {
+        return undefined;
+    }
+    commit(value) {
+        return Promise.resolve(true);
+    }
+    handleChecked(row) {
+        return __awaiter(this, void 0, void 0, function* () {
+            row.checked = true;
+            const currentModel = this.viewModels.find(v => v.value === row.value);
+            if (currentModel) {
+                currentModel.checked = true;
+            }
+            for (let i = 0; i < this.viewModels.length; i++) {
+                if (this.viewModels[i].value !== row.value) {
+                    this.viewModels[i].checked = false;
+                }
+            }
+            if (this.useModel) {
+                if (this.autoClose) {
+                    if (yield this.commit(row.value)) {
+                        this.closeAfterCommit.emit();
+                    }
+                }
+                else {
+                    this.commit(row.value);
+                }
+            }
+            else {
+                this.valueChange.emit(row.value);
+            }
+        });
+    }
+    prepareViewModels() {
+        this.collection.forEach((d, index) => {
+            const labels = this.propsForLabel.map(p => d[p]);
+            this.viewModels.push({
+                value: d[this.codeField],
+                propsForLabel: labels,
+                checked: (this.useModel && this.model && this.checkField) ?
+                    this.model[this.checkField] === d[this.codeField] :
+                    (this.value ? this.value === d[this.codeField] : index === 0)
+            });
+        });
+        this.viewModelsFiltered = this.viewModels.slice();
+        if (!this.useModel && this.viewModels.length > 0) {
+            this.valueChange.next(this.value ? this.value : this.viewModels[0].value);
+        }
+    }
+    _doSearch() {
+        this.viewModelsFiltered = JSON.parse(JSON.stringify(this.viewModels));
+        if (this.searchText) {
+            this.viewModelsFiltered = this.viewModelsFiltered.filter(vmf => {
+                return vmf.propsForLabel.find(p => p && p.toString().match(new RegExp(this.searchText, 'gi')));
+            });
+            // if (!this.searchText) {
+            //   this.viewModelsFiltered = this.viewModels.slice();
+            // } else {
+            // this.viewModelsFiltered = JSON.parse(JSON.stringify(this.viewModels));
+            // for (let i = 0; i < this.viewModelsFiltered.length; i++) {
+            //   const vmf = this.viewModelsFiltered[i];
+            //   for (let j = 0; j < vmf.propsForLabel.length; j++) {
+            //     if (vmf.propsForLabel[j]) {
+            //       vmf.propsForLabel[j] = vmf.propsForLabel[j].replace(new RegExp(this.searchText, 'gi'), `<span class="highlight">${this.searchText}</span>`);
+            //     }
+            //   }
+            // }
+        }
+    }
+}
+TransactionHeaderFilterPopupBaseComponent.decorators = [
+    { type: Directive }
+];
+TransactionHeaderFilterPopupBaseComponent.propDecorators = {
+    autoClose: [{ type: Input }],
+    useModel: [{ type: Input }],
+    searchText: [{ type: Input }],
+    value: [{ type: Input }],
+    valueChange: [{ type: Output }],
+    closeAfterCommit: [{ type: Output }]
+};
+
+class TransactionHeaderBaseComponent extends TransactionHeaderFilterPopupBaseComponent {
     constructor() {
         super(...arguments);
         this.readonly = false;
@@ -9848,33 +10014,6 @@ TransactionQuickAccessOrderConfirmationComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ["class.co-transaction-quick-access-order-confirmation",] }]
 };
 
-class TransactionEventService {
-    constructor() {
-        this.addToCartBySku = new Subject();
-        this.addToCartBySelectorResult = new Subject();
-        this.openShoppingCartModule = new Subject();
-        this.loggedIn = new Subject();
-        this.addNewUserToShoppingCartModule = new Subject();
-        this.addUserRelationShoppingCartModule = new Subject();
-        this.addArticleLine = new Subject();
-        this.addTextLine = new Subject();
-        this.addArticleLineAt = new Subject();
-        this.addTextLineAt = new Subject();
-        this.changeLineSequence = new Subject();
-        this.transactionLineClicked = new Subject();
-        this.rightSidebarClose = new Subject();
-        this.scrollContent = new Subject();
-        this.commitReceivePurchaseOrders = new Subject();
-        this.selectAllLines = new Subject();
-        this.transactionLineChanged = new Subject();
-        this.openSidePanel = new Subject();
-    }
-}
-TransactionEventService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionEventService_Factory() { return new TransactionEventService(); }, token: TransactionEventService, providedIn: "root" });
-TransactionEventService.decorators = [
-    { type: Injectable, args: [{ providedIn: "root" },] }
-];
-
 class TransactionReceiveGoodsService {
     constructor(_transactionService, _transactionEventService) {
         this._transactionService = _transactionService;
@@ -10437,7 +10576,6 @@ class TransactionLinesLineBaseComponent {
         this.waitingForUserAction = new EventEmitter();
         this.preview = false;
         this.readonly = false;
-        this.lineSet = new BehaviorSubject(false);
         this.lineVisible = new BehaviorSubject(false);
     }
     set line(value) {
@@ -10446,7 +10584,7 @@ class TransactionLinesLineBaseComponent {
         this.isArticle = this._line.isArticle;
         this.isSelected = this._line.isSelected;
         this.readonly = this._line.hasInvoices;
-        this.lineSet.next(true);
+        this.transactionLineSet();
     }
     get line() {
         return this._line;
@@ -10454,6 +10592,9 @@ class TransactionLinesLineBaseComponent {
     showClass() {
         return true;
     }
+    // overridden by descendents
+    transactionLineSet() {
+    }
 }
 TransactionLinesLineBaseComponent.decorators = [
     { type: Directive }
@@ -10471,18 +10612,16 @@ TransactionLinesLineBaseComponent.propDecorators = {
 };
 
 class TransactionOverviewLineComponent extends TransactionLinesLineBaseComponent {
-    constructor(service, iconCacheService, _dialogService, _dictionaryService) {
+    constructor(service, iconCacheService, _dictionaryService) {
         super();
         this.service = service;
         this.iconCacheService = iconCacheService;
-        this._dialogService = _dialogService;
         this._dictionaryService = _dictionaryService;
         this.stock = StockStatus.Low;
         this.mouseOver = false;
         this.readonly = false;
         this.showDialogVat = false;
         this.showDialogDiscount = false;
-        this.subscriptions = [];
     }
     showClass() {
         return true;
@@ -10493,34 +10632,16 @@ class TransactionOverviewLineComponent extends TransactionLinesLineBaseComponent
     handleMouseLeave(event) {
         this.mouseOver = false;
     }
-    ngOnChanges(changes) {
-        console.log(changes);
-    }
     ngOnInit() {
-        this.subscriptions.push(this.lineSet.subscribe((set) => {
-            if (set) {
-                this.localAmount = this._line.amount;
-                this._loadLineVat();
-            }
-        }));
         this.transactionKind = this.service.currentTransaction.transactionInfo.transactionKind;
     }
-    ngOnDestroy() {
-        this.subscriptions.forEach((subscription) => subscription.unsubscribe());
-    }
-    changeLineAmount(amount) {
-        this.service.changeTransactionLineQuantity(this.line.uuid, amount).then((value) => {
-            if (!value || !value.isSuccess) {
-                this.localAmount = this._line.amount;
-                return;
-            }
-            // this._handleLine(value).then();
-        });
-    }
     handleOpenArticleText(text) {
         this.transactionLineActionButtons.textToEdit = text;
         this.transactionLineActionButtons.showArticleTextDialog();
     }
+    transactionLineSet() {
+        this._loadLineVat();
+    }
     _loadLineVat() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.line && this.line.isArticle) {
@@ -10565,10 +10686,7 @@ TransactionOverviewLineComponent.decorators = [
                     [textContent]="(line.lineTotalDiscountAmount | coCurrency) || ('DISCOUNT' | localize)"></span>
             </div>
             <div *ngIf=!preview class="transaction-line-totals-amount">
-              <co-input-number-picker class="amount-number-picker"
-                                      [(model)]="localAmount" [min]="0"
-                                      [readonly]="readonly"
-                                      (modelChange)="changeLineAmount($event)"></co-input-number-picker>
+              <co-transaction-line-amount class="amount-number-picker" [transactionLine]="line"></co-transaction-line-amount>
             </div>
             <co-editable-label class="transaction-line-totals-total price"
                                [model]="line.displayNetLineTotal | coCurrency"
@@ -10598,7 +10716,6 @@ TransactionOverviewLineComponent.decorators = [
 TransactionOverviewLineComponent.ctorParameters = () => [
     { type: TransactionService },
     { type: IconCacheService },
-    { type: DialogService },
     { type: DictionaryService }
 ];
 TransactionOverviewLineComponent.propDecorators = {
@@ -10706,15 +10823,10 @@ class TransactionQuickAccessOrderDeliveryComponent extends TransactionBaseCompon
         this.iconService = iconService;
         this.service = service;
         this._transactionEventService = _transactionEventService;
-        this.icons = Icon;
-        this.showDialog = false;
     }
     showClass() {
         return true;
     }
-    openDeliveryDocumentDialog() {
-        this.showDialog = !this.showDialog;
-    }
     handleSelectAllLines(value) {
         this._transactionEventService.selectAllLines.next(value);
     }
@@ -10723,25 +10835,17 @@ TransactionQuickAccessOrderDeliveryComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-transaction-quick-access-order-delivery",
                 template: `
-    <div class="order-delivery-wrapper">
+    <div class="quick-access-content-wrapper">
       <div class="select-all-wrapper">
         <co-input-checkbox
-            (modelChange)="handleSelectAllLines($event)"
+          [label]="'SELECT_ALL_LINES' | localize"
+          (modelChange)="handleSelectAllLines($event)"
         ></co-input-checkbox>
-        <span class="select-all-text" [textContent]="'SELECT_ALL_LINES' | localize"></span>
       </div>
       <div class="send-button-wrapper">
-        <div class="button-wrapper">
-          <co-icon class="button-icon" [iconData]="iconService.getIcon(icons.ArrowPointRight)"></co-icon>
-          <span class="button-title" [textContent]="'SEND' | localize"></span>
-        </div>
-        <co-icon class="hover-icon" [iconData]="iconService.getIcon(icons.GripDotsVerticalSolid)" (click)="openDeliveryDocumentDialog()"></co-icon>
+        <co-transaction-send-button-dialog></co-transaction-send-button-dialog>
       </div>
     </div>
-
-    <ione-send-method-dialog
-      [showDialog]="showDialog"
-    ></ione-send-method-dialog>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -10859,6 +10963,206 @@ TransactionReceiveGoodsLineComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ["class.co-transaction-receive-goods-line",] }]
 };
 
+class TransactionPurchaseLineComponent extends TransactionLinesLineBaseComponent {
+    constructor(service, iconCacheService, _transactionEventService) {
+        super();
+        this.service = service;
+        this.iconCacheService = iconCacheService;
+        this._transactionEventService = _transactionEventService;
+        this.selected = false;
+        this.showDialogDiscount = false;
+        this.showCheckboxForLine = false;
+        this._subs = [];
+    }
+    showClass() {
+        return true;
+    }
+    ngOnInit() {
+        this._subs.push(this._transactionEventService.selectAllSalesOrderLinesForPurchase.subscribe((value) => {
+            this.selected = value;
+        }));
+    }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+    transactionLineSet() {
+        this.showCheckboxForLine = this.line.commissionCode === "0";
+    }
+}
+TransactionPurchaseLineComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-purchase-line",
+                template: `
+    <co-transaction-base-line [line]="line" [preview]="preview" [checkbox]="showCheckboxForLine" [checkboxValue]="selected" (checkboxValueChanged)="selected = $event">
+      <ng-container *ngIf="line.isArticle">
+        <div class="transaction-line-wrapper">
+          <div *ngIf=!preview class="transaction-line-extended-wrapper">
+            <co-transaction-line-supplier-button [transactionLine]="line" [transactionInfo]="service.currentTransaction.transactionInfo"></co-transaction-line-supplier-button>
+            <co-transaction-line-commission-button [transactionLine]="line" [transactionInfo]="service.currentTransaction.transactionInfo"></co-transaction-line-commission-button>
+            <co-transaction-line-warehouse-button [transactionLine]="line" [transactionInfo]="service.currentTransaction.transactionInfo"></co-transaction-line-warehouse-button>
+            <co-transaction-line-delivery-button [transactionLine]="line" [transactionInfo]="service.currentTransaction.transactionInfo"></co-transaction-line-delivery-button>
+            <co-transaction-line-delivery-date-button [transactionLine]="line" class="two-column"></co-transaction-line-delivery-date-button>
+            <co-transaction-line-statusbar [transaction]="line" [transactionKind]="service.currentTransaction.transactionInfo.transactionKind"></co-transaction-line-statusbar>
+          </div>
+          <div class="transaction-line-totals">
+            <co-transaction-line-price class="transaction-line-totals-price price"
+                                       [transactionLine]="line"
+                                       [showLabel]="false"
+                                       [defaultEditMode]="false"
+            ></co-transaction-line-price>
+            <div class="transaction-line-button custom-width transaction-line-totals-discount" (click)="showDialogDiscount = true">
+              <span class="co-transaction-overflow-ellipsis" [class.transaction-negative-value]="line.lineTotalDiscountAmount < 0"
+                    [textContent]="(line.lineTotalDiscountAmount | coCurrency) || ('DISCOUNT' | localize)"></span>
+            </div>
+            <div *ngIf=!preview class="transaction-line-totals-amount">
+              <co-transaction-line-amount class="amount-number-picker" [transactionLine]="line"></co-transaction-line-amount>
+            </div>
+            <co-editable-label class="transaction-line-totals-total price"
+                               [model]="line.displayNetLineTotal | coCurrency"
+                               [editModel]="line.displayNetLineTotal"
+                               [readonly]="readonly"
+                               [commit]="!readonly"
+            ></co-editable-label>
+          </div>
+        </div>
+      </ng-container>
+    </co-transaction-base-line>
+    <co-dialog-transaction-line-discount *ngIf="showDialogDiscount"
+                                         [transactionInfo]="service.currentTransaction.transactionInfo"
+                                         [transactionLine]="line"
+                                         (close)="showDialogDiscount = false"
+    ></co-dialog-transaction-line-discount>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionPurchaseLineComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: IconCacheService },
+    { type: TransactionEventService }
+];
+TransactionPurchaseLineComponent.propDecorators = {
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-purchase-line",] }]
+};
+
+class TransactionQuickAccessOrderPurchaseComponent extends TransactionBaseComponent {
+    constructor(service, _transactionEventService) {
+        super(service);
+        this.service = service;
+        this._transactionEventService = _transactionEventService;
+        this.icons = Icon;
+    }
+    showClass() {
+        return true;
+    }
+    handleSelectAllLines(value) {
+        this._transactionEventService.selectAllSalesOrderLinesForPurchase.next(value);
+    }
+    handleSendButtonClick(event) {
+        this.service.generateCommissionOrders(this.transactionInfo.id, false);
+    }
+}
+TransactionQuickAccessOrderPurchaseComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-quick-access-order-purchase",
+                template: `
+    <div class="quick-access-content-wrapper">
+      <div class="select-all-wrapper">
+        <co-input-checkbox
+          [label]="'SELECT_ALL_LINES' | localize"
+          (modelChange)="handleSelectAllLines($event)"
+        ></co-input-checkbox>
+      </div>
+      <div class="send-button-wrapper">
+        <co-transaction-send-button-dialog
+          [showSendIcon]="false"
+          [showHoverIcon]="false"
+          (sendButtonClick)="handleSendButtonClick($event)"></co-transaction-send-button-dialog>
+      </div>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionQuickAccessOrderPurchaseComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: TransactionEventService }
+];
+TransactionQuickAccessOrderPurchaseComponent.propDecorators = {
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-quick-access-order-purchase",] }]
+};
+
+class TransactionButtonBarButtonBaseComponent {
+    constructor() {
+        this.showLoaderChange = new BehaviorSubject(undefined);
+        this.checkedChange = new BehaviorSubject(undefined);
+        this._showLoader = false;
+        this._checked = false;
+    }
+    set showLoader(value) {
+        this._showLoader = value;
+        this.showLoaderChange.next(this._showLoader);
+    }
+    get showLoader() {
+        return this._showLoader;
+    }
+    set checked(value) {
+        this._checked = value;
+        this.checkedChange.next(this._checked);
+    }
+    get checked() {
+        return this._checked;
+    }
+}
+TransactionButtonBarButtonBaseComponent.decorators = [
+    { type: Directive }
+];
+TransactionButtonBarButtonBaseComponent.propDecorators = {
+    title: [{ type: Input }],
+    iconName: [{ type: Input }],
+    transactionInfoResponse: [{ type: Input }],
+    showLoader: [{ type: Input }],
+    checked: [{ type: Input }],
+    showLoaderChange: [{ type: Output }],
+    checkedChange: [{ type: Output }]
+};
+
+class TransactionSalesPurchaseButtonBarButtonComponent extends TransactionButtonBarButtonBaseComponent {
+    constructor(iconCacheService, _transactionEventService) {
+        super();
+        this.iconCacheService = iconCacheService;
+        this._transactionEventService = _transactionEventService;
+        this.showClass = true;
+        this._subs = [];
+        this._subs.push(this._transactionEventService.generateCommissionOrders.subscribe((generating) => {
+            this.showLoader = generating;
+            if (!this.showLoader) {
+                this.checked = true;
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+}
+TransactionSalesPurchaseButtonBarButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-sales-purchase-button-bar-button",
+                template: `
+    <co-icon class="co-transaction-button-bar-icon" [iconData]="iconCacheService.getIcon(iconName)"></co-icon>
+    <span class="button-title" [textContent]="title | localize"></span>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionSalesPurchaseButtonBarButtonComponent.ctorParameters = () => [
+    { type: IconCacheService },
+    { type: TransactionEventService }
+];
+TransactionSalesPurchaseButtonBarButtonComponent.propDecorators = {
+    showClass: [{ type: HostBinding, args: ['class.co-transaction-sales-purchase-button-bar-button',] }]
+};
+
 class TransactionMappingService {
     constructor() {
         this._buttonBarTransaction = new Map([
@@ -10872,7 +11176,7 @@ class TransactionMappingService {
                 ]],
             [TransactionKind.SalesOrder, [
                     { title: 'OVERVIEW', icon: Icon.CartShoppingSolid, category: TransactionTypeCategory.SalesOrderOverview },
-                    { title: 'PURCHASE', icon: Icon.PalletBoxesSolid, category: TransactionTypeCategory.SalesOrderPurchase },
+                    { title: 'PURCHASE', icon: Icon.PalletBoxesSolid, category: TransactionTypeCategory.SalesOrderPurchase, component: TransactionSalesPurchaseButtonBarButtonComponent },
                     { title: 'LOGISTICS', icon: Icon.ShelvesSolid, category: TransactionTypeCategory.SalesOrderLogistics },
                     { title: 'PLANNING', icon: Icon.TruckMovingSolid, category: TransactionTypeCategory.SalesOrderPlanning },
                     { title: 'DELIVERY_NOTE', icon: Icon.MemoCircleCheckSolid, category: TransactionTypeCategory.SalesOrderDeliveryNote },
@@ -10883,6 +11187,7 @@ class TransactionMappingService {
             [{ type: TransactionKind.PurchaseOrder, category: TransactionTypeCategory.PurchaseOrderOrderConfirmation }, TransactionQuickAccessOrderConfirmationComponent],
             [{ type: TransactionKind.PurchaseOrder, category: TransactionTypeCategory.PurchaseOrderReceivedGoods }, TransactionQuickAccessReceivedGoodsComponent],
             [{ type: TransactionKind.SalesOrder, category: TransactionTypeCategory.SalesOrderOverview }, TransactionQuickAccessOverviewComponent],
+            [{ type: TransactionKind.SalesOrder, category: TransactionTypeCategory.SalesOrderPurchase }, TransactionQuickAccessOrderPurchaseComponent],
             [{ type: TransactionKind.SalesOrder, category: TransactionTypeCategory.SalesOrderDeliveryNote }, TransactionQuickAccessOrderDeliveryComponent]
         ]);
         this._transactionGridComponent = new Map([
@@ -10892,6 +11197,7 @@ class TransactionMappingService {
         ]);
         this._transactionLineComponent = new Map([
             [{ type: TransactionKind.SalesOrder, category: TransactionTypeCategory.SalesOrderOverview }, TransactionOverviewLineComponent],
+            [{ type: TransactionKind.SalesOrder, category: TransactionTypeCategory.SalesOrderPurchase }, TransactionPurchaseLineComponent],
             [{ type: TransactionKind.SalesOrder, category: TransactionTypeCategory.SalesOrderDeliveryNote }, TransactionOrderDeliveryLineComponent],
             [{ type: TransactionKind.PurchaseOrder, category: TransactionTypeCategory.PurchaseOrderReceivedGoods }, TransactionReceiveGoodsLineComponent],
         ]);
@@ -11821,15 +12127,18 @@ class PaymentComponent {
     }
     _getDownpaymentInfo() {
         this.downPayments.length = 0;
-        this._paymentService.getDownPaymentInfo(this.transactionUuid).then((info) => {
-            this.amountToPay = (info.toDownPayAmount ? info.toDownPayAmount : 0) - (info.payedDownAmount ? info.payedDownAmount : 0);
-            if (info.downPayments) {
-                info.downPayments.forEach((dp) => {
-                    const paymentMethod = this.paymentMethods.find(pm => pm.payment.code === dp.paymentMethodCode);
-                    this.downPayments.push(new DownPaymentViewModel(dp, paymentMethod));
-                });
-            }
-            this.showLoaderDownPayments = false;
+        return new Promise((resolve) => {
+            this._paymentService.getDownPaymentInfo(this.transactionUuid).then((info) => {
+                this.amountToPay = (info.toDownPayAmount ? info.toDownPayAmount : 0) - (info.payedDownAmount ? info.payedDownAmount : 0);
+                if (info.downPayments) {
+                    info.downPayments.forEach((dp) => {
+                        const paymentMethod = this.paymentMethods.find(pm => pm.payment.code === dp.paymentMethodCode);
+                        this.downPayments.push(new DownPaymentViewModel(dp, paymentMethod));
+                    });
+                }
+                this.showLoaderDownPayments = false;
+                resolve();
+            });
         });
     }
     _dataUriToBase64(uri, mimeType) {
@@ -11906,7 +12215,7 @@ PaymentComponent.decorators = [
         <span class="payment-header-title" [textContent]="'PAYMENT_METHOD' | localize:false"></span>
       </div>
       <div class="payment-methods">
-        <transaction-loader class="loader" *ngIf="showLoader"></transaction-loader>
+        <co-loader class="loader" *ngIf="showLoader"></co-loader>
         <ng-container *ngIf="!showLoader">
           <co-payment-tile *ngFor="let paymentMethod of paymentMethods; let index = index"
                            [image]="paymentMethod.image"
@@ -12033,7 +12342,7 @@ PaymentQrCodeComponent.decorators = [
                 selector: "co-payment-qr-code",
                 template: `
     <div class="payment-qr-code-wrapper">
-      <transaction-loader *ngIf="!qrCodeImage"></transaction-loader>
+      <co-loader *ngIf="!qrCodeImage"></co-loader>
       <img *ngIf="qrCodeImage" [src]="qrCodeImage"/>
     </div>
   `,
@@ -12045,13 +12354,80 @@ PaymentQrCodeComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ["class.co-payment-qr-code",] }]
 };
 
+class LoaderComponent {
+    showClass() {
+        return true;
+    }
+}
+LoaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-loader",
+                template: `
+    <div class="transaction-loader">
+      <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+            <stop stop-color="#000" stop-opacity="0" offset="0%"/>
+            <stop stop-color="#000" stop-opacity=".631" offset="63.146%"/>
+            <stop stop-color="#000" offset="100%"/>
+          </linearGradient>
+        </defs>
+        <g fill="none" fill-rule="evenodd">
+          <g transform="translate(1 1)">
+            <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
+              <animateTransform
+                attributeName="transform"
+                type="rotate"
+                from="0 18 18"
+                to="360 18 18"
+                dur="0.9s"
+                repeatCount="indefinite"/>
+            </path>
+            <circle fill="#000" cx="36" cy="18" r="1">
+              <animateTransform
+                attributeName="transform"
+                type="rotate"
+                from="0 18 18"
+                to="360 18 18"
+                dur="0.9s"
+                repeatCount="indefinite"/>
+            </circle>
+          </g>
+        </g>
+      </svg>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+LoaderComponent.propDecorators = {
+    showClass: [{ type: HostBinding, args: ["class.co-loader",] }]
+};
+
+class LoaderModule {
+}
+LoaderModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule
+                ],
+                declarations: [
+                    LoaderComponent
+                ],
+                exports: [
+                    LoaderComponent
+                ]
+            },] }
+];
+
 class PaymentQrCodeModule {
 }
 PaymentQrCodeModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
-                    CoreModule
+                    CoreModule,
+                    LoaderModule
                 ],
                 declarations: [
                     PaymentQrCodeComponent
@@ -12102,7 +12478,7 @@ DownPaymentComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-down-payment",
                 template: `
-      <transaction-loader class="loader" *ngIf="showLoader"></transaction-loader>
+      <co-loader class="loader" *ngIf="showLoader"></co-loader>
       <div class="down-payment-payments-title" [textContent]="'PAYMENTS_MADE' | localize" *ngIf="downPayments && downPayments.length > 0"></div>
       <div class="down-payment-payments-wrapper">
         <div class="down-payment-payments" *ngFor="let payment of downPayments">
@@ -12138,7 +12514,8 @@ DownPaymentModule.decorators = [
                     CommonModule,
                     CoreModule,
                     PipeModule,
-                    PaymentTileModule
+                    PaymentTileModule,
+                    LoaderModule
                 ],
                 declarations: [
                     DownPaymentComponent
@@ -12163,7 +12540,8 @@ PaymentModule.decorators = [
                     CoDialogModule,
                     ButtonModule,
                     PaymentQrCodeModule,
-                    DownPaymentModule
+                    DownPaymentModule,
+                    LoaderModule
                 ],
                 declarations: [
                     PaymentComponent
@@ -12177,6 +12555,7 @@ PaymentModule.decorators = [
 class RelationTypeComponent {
     constructor() {
         this.relType = RelationNameKind;
+        this.readonly = false;
         this.relation = NULL_RELATION_OBJECT;
         this.relationChange = new EventEmitter();
     }
@@ -12194,11 +12573,13 @@ RelationTypeComponent.decorators = [
                 template: `
     <div class="default-data-row">
       <co-input-radio-button class="default-width"
+                             [readonly]="readonly"
                              [label]="'PRIVATE_PERSON' | localize"
                              [model]="relation.type === relType.Private"
                              (modelChange)="handleChangeRelationType(relType.Private)"
       ></co-input-radio-button>
       <co-input-radio-button class="default-width"
+                             [readonly]="readonly"
                              [label]="'COMPANY' | localize"
                              [model]="relation.type === relType.Company"
                              (modelChange)="handleChangeRelationType(relType.Company)"
@@ -12209,6 +12590,7 @@ RelationTypeComponent.decorators = [
             },] }
 ];
 RelationTypeComponent.propDecorators = {
+    readonly: [{ type: Input }],
     relation: [{ type: Input }],
     relationChange: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-relation-type",] }]
@@ -12233,11 +12615,14 @@ RelationTypeModule.decorators = [
 ];
 
 class RelationGeneralComponent extends RelationBaseComponent {
-    constructor(_service) {
+    constructor(_service, _dictionaryService, _dialogService) {
         super();
         this._service = _service;
+        this._dictionaryService = _dictionaryService;
+        this._dialogService = _dialogService;
         this.relType = RelationNameKind;
         this.genderType = GenderType;
+        this.readonly = false;
         this.relationSuggestions = [];
         this.showSuggestionsSidebar = false;
         // fetches relation suggestions
@@ -12273,7 +12658,9 @@ class RelationGeneralComponent extends RelationBaseComponent {
         }
     }
     showSidebar() {
-        this.showSuggestionsSidebar = true;
+        if (!this.readonly) {
+            this.showSuggestionsSidebar = true;
+        }
     }
     // Hide sidebar with a little timeout to prevent missing the click
     hideSidebar() {
@@ -12284,10 +12671,15 @@ class RelationGeneralComponent extends RelationBaseComponent {
     onRelationSuggestionClick(relationSuggested) {
         return __awaiter(this, void 0, void 0, function* () {
             if (relationSuggested) {
-                this.hideSidebar();
-                // await this._service.addRelationToTransaction(relationSuggested.relationId);
-                this.relation = yield this._service.getCustomerFullObjectByRelationId(relationSuggested.relationId);
-                this.relationChange.next(this.relation);
+                const lockResult = yield this._service.lockRelation(relationSuggested.relationType, parseInt(relationSuggested.relationNr, 0));
+                if (!lockResult.success) {
+                    this._dialogService.showError(this._dictionaryService.get("RELATION_ALREADY_LOCKED"), lockResult.messages[0].message);
+                }
+                else {
+                    this.hideSidebar();
+                    this.relation = yield this._service.getCustomerFullObjectByRelationId(relationSuggested.relationId);
+                    this.relationChange.next(this.relation);
+                }
             }
         });
     }
@@ -12329,6 +12721,7 @@ RelationGeneralComponent.decorators = [
       <div class="default-data-row">
         <co-input-text
           class="checkout-first-name"
+          [readonly]="readonly"
           [(model)]="relation.firstName"
           [placeholder]="'FIRST_NAME' | localize"
           (modelChange)="firstNameChange($event)"
@@ -12337,11 +12730,13 @@ RelationGeneralComponent.decorators = [
         ></co-input-text>
         <co-input-text
           class="checkout-prefix-name default-width"
+          [readonly]="readonly"
           [(model)]="relation.prefix"
           [placeholder]="'PREFIX' | localize"
         ></co-input-text>
         <co-input-text
           class="checkout-last-name"
+          [readonly]="readonly"
           [(model)]="relation.familyName"
           [placeholder]="'LAST_NAME' | localize"
           (modelChange)="familyNameChange($event)"
@@ -12350,27 +12745,30 @@ RelationGeneralComponent.decorators = [
       </div>
       <div class="default-data-row">
         <co-input-radio-button class="default-width"
+                               [readonly]="readonly"
                                [label]="'MALE' | localize"
                                [model]="relation.gender === genderType.Male"
                                (modelChange)="changeGenderType(genderType.Male)"
         ></co-input-radio-button>
         <co-input-radio-button class="default-width"
+                               [readonly]="readonly"
                                [label]="'FEMALE' | localize "
                                [model]="relation.gender === genderType.Female"
                                (modelChange)="changeGenderType(genderType.Female)"
         ></co-input-radio-button>
         <co-input-radio-button class="default-width"
+                               [readonly]="readonly"
                                [label]="'UNKNOWN' | localize"
                                [model]="relation.gender === genderType.Unspecified"
                                (modelChange)="changeGenderType(genderType.Unspecified)"
         ></co-input-radio-button>
       </div>
       <div class="default-data-row">
-        <co-input-date [placeholder]="'DATE_OF_BIRTH' | localize " [(model)]="dateOfBirth"></co-input-date>
+        <co-input-date [readonly]="readonly" [placeholder]="'DATE_OF_BIRTH' | localize " [(model)]="dateOfBirth"></co-input-date>
       </div>
     </div>
     <div *ngIf="relation?.type === relType.Company" class="default-data-row collapseable" @showHideCompanyRelationFields>
-      <co-input-text [(model)]="relation.familyName" [placeholder]="'COMPANY_NAME' | localize" [required]="true"></co-input-text>
+      <co-input-text [readonly]="readonly" [(model)]="relation.familyName" [placeholder]="'COMPANY_NAME' | localize" [required]="true"></co-input-text>
     </div>
 
     <div class="suggestions-sidebar" *ngIf="showSuggestionsSidebar" @showHideSidebar>
@@ -12406,9 +12804,12 @@ RelationGeneralComponent.decorators = [
             },] }
 ];
 RelationGeneralComponent.ctorParameters = () => [
-    { type: TransactionService }
+    { type: TransactionService },
+    { type: DictionaryService },
+    { type: DialogService }
 ];
 RelationGeneralComponent.propDecorators = {
+    readonly: [{ type: Input }],
     showClass: [{ type: HostBinding, args: ["class.co-relation-general",] }]
 };
 
@@ -12533,11 +12934,12 @@ class RelationAddressesComponent extends RelationBaseComponent {
         this._boFactory = _boFactory;
         this._formMasterService = _formMasterService;
         this.icons = Icon;
+        this.readonly = false;
         this.addresses = [];
+        this.showOnlyActive = true;
         this.type = AddressType.DeliveryAddress;
-        this.selectedAddressIdx = 0;
-        this.selectedAddressChange = new EventEmitter();
-        this.selectedAddressNawNrChange = new EventEmitter();
+        this.selectedNawNr = 0;
+        this.selectedNawNrChange = new EventEmitter();
         this.showEditAddressDialog = false;
     }
     showClass() {
@@ -12565,15 +12967,17 @@ class RelationAddressesComponent extends RelationBaseComponent {
         this.addressToEdit = new Address();
         this.showEditAddressDialog = true;
     }
-    setIndexAddress(idx) {
-        this.selectedAddressIdx = idx;
-        this.selectedAddressChange.emit(idx);
-        const nawNr = this.addresses[this.selectedAddressIdx].nawNr;
-        this.selectedAddressNawNrChange.emit(nawNr);
+    changeAddress(address) {
+        if (address && !this.readonly) {
+            this.selectedNawNr = address.nawNr;
+            this.selectedNawNrChange.emit(this.selectedNawNr);
+        }
     }
     editAddress(addr) {
-        this.addressToEdit = this._boFactory.makeWithRawBackendData(Address, addr);
-        this.showEditAddressDialog = true;
+        if (!this.readonly) {
+            this.addressToEdit = this._boFactory.makeWithRawBackendData(Address, addr);
+            this.showEditAddressDialog = true;
+        }
     }
 }
 RelationAddressesComponent.decorators = [
@@ -12581,19 +12985,16 @@ RelationAddressesComponent.decorators = [
                 selector: "co-relation-addresses",
                 template: `
     <div class="default-data-row">
-      <co-carousel-3d *ngIf="addresses && addresses.length > 1"
-                      [tileWidth]="200"
-                      [tileHeight]="100"
-                      [selectedIndex]="selectedAddressIdx"
-                      (indexSelected)="setIndexAddress($event)">
-        <co-relation-address-tile #carouselItem *ngFor="let address of addresses; let index = index"
+      <co-carousel *ngIf="addresses && addresses.length > 1">
+        <co-relation-address-tile #carouselItem *ngFor="let address of addresses | filter:'isActive':true; let index = index"
                                   [address]="address"
-                                  [selected]="selectedAddressIdx === index"
+                                  [selected]="selectedNawNr === address.nawNr"
                                   (editAddressClicked)="editAddress($event)"
+                                  (selectedChange)="changeAddress($event)"
         ></co-relation-address-tile>
-      </co-carousel-3d>
+      </co-carousel>
     </div>
-    <div class="default-data-row">
+    <div class="default-data-row" *ngIf="!readonly">
       <div class="relation-address-new">
         <icon class="relation-address-icon" [icon]="icons.ArrowPointRight"></icon>
         <div [textContent]="'ADDRESS_ADD' | localize" (click)="showNewAddressDialog()"></div>
@@ -12601,7 +13002,9 @@ RelationAddressesComponent.decorators = [
     </div>
     <co-dialog class="dialog-relation-addresses-create-address" *ngIf="showEditAddressDialog"
                [footerTemplate]="templateFooter"
-               [headerTemplate]="templateHeader">
+               [headerTemplate]="templateHeader"
+               (closeClick)="showEditAddressDialog = false"
+    >
       <co-form>
         <co-relation-address
           [relation]="relation"
@@ -12612,9 +13015,8 @@ RelationAddressesComponent.decorators = [
         <div class="co-transaction-dialog-header-title" [textContent]="'NEW_ADDRESS' | localize"></div>
       </ng-template>
       <ng-template #templateFooter>
-        <div class="dialog-footer-button-wrapper">
-          <co-button [label]="'SAVE' | localize" (click)="submitForm()"></co-button>
-          <co-button [label]="'CANCEL' | localize" (click)="showEditAddressDialog = false"></co-button>
+        <div class="co-transaction-dialog-footer-button-wrapper">
+          <co-button [label]="'OK' | localize" (click)="submitForm()"></co-button>
         </div>
       </ng-template>
     </co-dialog>
@@ -12630,11 +13032,12 @@ RelationAddressesComponent.ctorParameters = () => [
     { type: FormMasterService }
 ];
 RelationAddressesComponent.propDecorators = {
+    readonly: [{ type: Input }],
     addresses: [{ type: Input }],
+    showOnlyActive: [{ type: Input }],
     type: [{ type: Input }],
-    selectedAddressIdx: [{ type: Input }],
-    selectedAddressChange: [{ type: Output }],
-    selectedAddressNawNrChange: [{ type: Output }],
+    selectedNawNr: [{ type: Input }],
+    selectedNawNrChange: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-relation-addresses",] }]
 };
 
@@ -12651,7 +13054,9 @@ RelationAddressesModule.decorators = [
                     CoDialogModule,
                     RelationAddressModule,
                     FormModule,
-                    ButtonModule
+                    ButtonModule,
+                    CarouselModule,
+                    FilterPipeModule
                 ],
                 declarations: [
                     RelationAddressesComponent
@@ -12665,6 +13070,7 @@ RelationAddressesModule.decorators = [
 class RelationContactDetailsComponent extends RelationBaseComponent {
     constructor() {
         super(...arguments);
+        this.readonly = false;
         this.emailAddress = new ContactOption();
         this.phoneNumber = new ContactOption();
         this.inviteToAccount = false;
@@ -12704,19 +13110,20 @@ RelationContactDetailsComponent.decorators = [
                 selector: "co-relation-contact-details",
                 template: `
     <div class="default-data-row">
-      <co-input-text [(model)]="phoneNumber.value" [placeholder]="'PHONE_NO' | localize " [required]="true"></co-input-text>
+      <co-input-text [readonly]="readonly" [(model)]="phoneNumber.value" [placeholder]="'PHONE_NO' | localize " [required]="true"></co-input-text>
     </div>
     <div class="default-data-row">
-      <co-input-text [(model)]="emailAddress.value" [placeholder]="'EMAIL_ADDRESS' | localize " [type]="'email'" [required]="true"></co-input-text>
+      <co-input-text [readonly]="readonly" [(model)]="emailAddress.value" [placeholder]="'EMAIL_ADDRESS' | localize " [type]="'email'" [required]="true"></co-input-text>
     </div>
     <div class="default-data-row">
-      <co-input-checkbox [label]="'INVITE_TO_ACCOUNT' | localize" [(model)]="inviteToAccount"></co-input-checkbox>
+      <co-input-checkbox [readonly]="readonly" [label]="'INVITE_TO_ACCOUNT' | localize" [(model)]="inviteToAccount"></co-input-checkbox>
     </div>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 RelationContactDetailsComponent.propDecorators = {
+    readonly: [{ type: Input }],
     showClass: [{ type: HostBinding, args: ["class.co-relation-contact-details",] }]
 };
 
@@ -12743,6 +13150,7 @@ class RelationPreferencesComponent extends RelationBaseComponent {
     constructor(_service) {
         super();
         this._service = _service;
+        this.readonly = false;
     }
     showClass() {
         return true;
@@ -12781,6 +13189,7 @@ RelationPreferencesComponent.decorators = [
     <div class="two-column-grid">
       <ng-container *ngFor="let privacySetting of privacySettings">
         <co-input-checkbox class="first-column"
+                           [readonly]="readonly"
                            [label]="privacySetting.description"
                            [model]="isShared(privacySetting)"
                            (modelChange)="changePrivacySetting(privacySetting, $event)"
@@ -12796,6 +13205,7 @@ RelationPreferencesComponent.ctorParameters = () => [
     { type: TransactionService }
 ];
 RelationPreferencesComponent.propDecorators = {
+    readonly: [{ type: Input }],
     showClass: [{ type: HostBinding, args: ["class.co-relation-preferences",] }]
 };
 
@@ -13515,24 +13925,34 @@ class TransactionHeaderDeliveryMethodComponent extends TransactionHeaderBaseComp
             }
         });
     }
-    transactionInfoSet() {
-        this.readonly = this.readonly || this.transactionInfo.deliveryDateDefinitive;
-    }
-}
-TransactionHeaderDeliveryMethodComponent.decorators = [
-    { type: Component, args: [{
-                selector: "co-transaction-header-delivery-method",
-                template: `
-    <ng-container *ngIf="showAsCarousel">
-      <co-carousel-3d [tileWidth]="200"
-                      [tileHeight]="100"
-                      [selectedIndex]="selectedIdx"
-                      (indexSelected)="setIndexDeliveryType($event)">
+    setDeliveryType(method) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const idx = this.collection.findIndex(d => d.code === method.code);
+            if (method) {
+                const success = yield this.commit(method.code);
+                if (success) {
+                    this.selectedIdx = idx;
+                    this.deliveryMethodChange.emit(method);
+                }
+            }
+        });
+    }
+    transactionInfoSet() {
+        this.readonly = this.readonly || this.transactionInfo.deliveryDateDefinitive;
+    }
+}
+TransactionHeaderDeliveryMethodComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-header-delivery-method",
+                template: `
+    <ng-container *ngIf="showAsCarousel">
+      <co-carousel>
         <co-delivery-type-tile #carouselItem *ngFor="let method of collection; let index = index"
                                [method]="method"
                                [selected]="selectedIdx === index"
+                               (selectedChange)="setDeliveryType($event)"
         ></co-delivery-type-tile>
-      </co-carousel-3d>
+      </co-carousel>
     </ng-container>
     <ng-container *ngIf="!showAsCarousel">
       <co-transaction-line-checkbox-list
@@ -13590,7 +14010,7 @@ TransactionLineCheckboxListComponent.decorators = [
           ></co-input-checkbox>
         </div>
         <div class="label-wrapper">
-          <span *ngFor="let label of row.propsForLabel" [innerHTML]="label" class="label"></span>
+          <span *ngFor="let label of row.propsForLabel; let index = index" [innerHTML]="label" [class.first]="index === 0" class="label"></span>
         </div>
       </div>
     </cdk-virtual-scroll-viewport>
@@ -13635,7 +14055,8 @@ TransactionHeaderDeliveryMethodModule.decorators = [
                     Carousel3dModule,
                     DeliveryTypeTileModule,
                     InputCheckboxModule,
-                    TransactionLineCheckboxModule
+                    TransactionLineCheckboxModule,
+                    CarouselModule
                 ],
                 declarations: [
                     TransactionHeaderDeliveryMethodComponent
@@ -13768,7 +14189,7 @@ DialogTransactionHeaderDeliveryMethodComponent.decorators = [
       <co-dialog-header-search [title]="'DELIVERY_METHOD'" (search)="handleSearch($event)"></co-dialog-header-search>
     </ng-template>
     <ng-template #footerTemplate>
-      <div class="dialog-footer-button-wrapper" *ngIf="!useModel">
+      <div class="co-transaction-dialog-footer-button-wrapper" *ngIf="!useModel">
         <co-button [label]="'OK' | localize" (click)="handleOkClick()"></co-button>
       </div>
     </ng-template>
@@ -14867,7 +15288,7 @@ TransactionComponent.decorators = [
 
     <div class="transaction-lines-header">
       <co-transaction-quick-access *ngIf="showQuickAccess" class="transaction-lines-header-item"
-                                   [transactionType]="transaction.transactionInfo.transactionKind"
+                                   [transaction]="transaction"
                                    [activeCategory]="activeCategory"
       ></co-transaction-quick-access>
 
@@ -14986,10 +15407,11 @@ TransactionHeaderComponent.propDecorators = {
 };
 
 class TransactionHeaderRelationComponent extends TransactionBaseComponent {
-    constructor(service, _dictionary) {
+    constructor(service, _dictionary, _dialogService) {
         super(service);
         this.service = service;
         this._dictionary = _dictionary;
+        this._dialogService = _dialogService;
         this.addressType = AddressType;
         this.deliveryAddressIdx = 0;
         this.invoiceAddressIdx = 0;
@@ -14997,6 +15419,7 @@ class TransactionHeaderRelationComponent extends TransactionBaseComponent {
         this.showDialog = false;
         this.categories = [this._dictionary.get('CLIENT_DATA'), this._dictionary.get('PRIVACY_PREFERENCES')];
         this.relationType = RelationKind.Customer;
+        this.readonly = false;
         this._relation = new CustomerFullObject();
     }
     set relation(value) {
@@ -15044,6 +15467,22 @@ class TransactionHeaderRelationComponent extends TransactionBaseComponent {
             this.relation.customerGroup = this.customerGroup;
         }
     }
+    handleShowDialog() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const lockResult = yield this.service.lockRelation(this.relation.relationType, parseInt(this.relation.relationNumber, 0));
+            if (!lockResult.success) {
+                const question = yield this._dialogService.showYesNo("LOCKED", lockResult.messages[0].message);
+                if (question) {
+                    this.readonly = true;
+                    this.showDialog = true;
+                }
+            }
+            else {
+                this.readonly = false;
+                this.showDialog = true;
+            }
+        });
+    }
     relationSet() {
         if (this.relationType === RelationKind.Customer) {
             this.customerGroup = this.relation.customerGroup;
@@ -15059,7 +15498,7 @@ TransactionHeaderRelationComponent.decorators = [
       [firstBlockTemplate]="firstBlock"
       [secondBlockTemplate]="secondBlock"
       [hasDetails]="true"
-      (headerClick)="showDialog = true"
+      (headerClick)="handleShowDialog()"
     >
     </co-transaction-header-block>
     <ng-template #headerBlock>
@@ -15088,39 +15527,42 @@ TransactionHeaderRelationComponent.decorators = [
           <div class="header-relation-section">
             <div class="header-relation-section-label" [textContent]="'PERSONAL_DATA' | localize"></div>
             <co-relation-type
+              [readonly]="readonly"
               [relation]="relation"
             ></co-relation-type>
             <ng-container *ngIf="relationType === relationKind.Customer">
-                <relation-customer-groups [model]="customerGroup" (modelChange)="handleChangeCustomGroup($event)" required></relation-customer-groups>
+                <relation-customer-groups [readonly]="readonly" [model]="customerGroup" (modelChange)="handleChangeCustomGroup($event)" required></relation-customer-groups>
             </ng-container>
-            <co-relation-general [relation]="relation" (relationChange)="updateRelation($event)"></co-relation-general>
+            <co-relation-general [readonly]="readonly" [relation]="relation" (relationChange)="updateRelation($event)"></co-relation-general>
           </div>
           <div class="header-relation-section">
             <div class="header-relation-section-label" [textContent]="'ADDRESSES' | localize"></div>
             <co-relation-addresses
+              [readonly]="readonly"
               [addresses]="relation.activeAddresses"
               [type]="addressType.DeliveryAddress"
-              [selectedAddressIdx]="deliveryAddressIdx"
+              [selectedNawNr]="deliveryAddressIdx"
               (selectedAddressChange)="setIndexDeliveryAddress($event)"
             ></co-relation-addresses>
             <div class="header-relation-section-label" [textContent]="'INVOICE_ADDRESS' | localize"></div>
-            <co-input-checkbox [(model)]="invoiceAddressSameAsDeliveryAddress" (modelChange)="checkSameAddress($event)" [label]="'SAME_AS_DELIVERY' | localize"></co-input-checkbox>
+            <co-input-checkbox [readonly]="readonly" [(model)]="invoiceAddressSameAsDeliveryAddress" (modelChange)="checkSameAddress($event)" [label]="'SAME_AS_DELIVERY' | localize"></co-input-checkbox>
             <div class="overview-delivery-invoice-address" *ngIf="!invoiceAddressSameAsDeliveryAddress" @showHideInvoiceAddress>
               <co-relation-addresses
+                [readonly]="readonly"
                 [addresses]="relation.activeAddresses"
                 [type]="addressType.BillingAddress"
-                [selectedAddressIdx]="invoiceAddressIdx"
+                [selectedNawNr]="invoiceAddressIdx"
                 (selectedAddressChange)="setIndexInvoiceAddress($event)"
               ></co-relation-addresses>
             </div>
           </div>
           <div class="header-relation-section">
             <div class="header-relation-section-label" [textContent]="'CONTACT_DETAILS' | localize"></div>
-            <co-relation-contact-details [relation]="relation"></co-relation-contact-details>
+            <co-relation-contact-details [readonly]="readonly" [relation]="relation"></co-relation-contact-details>
           </div>
         </div>
         <div #preferenceItems class="header-relation-navigation-content">
-          <co-relation-preferences [relation]="relation"></co-relation-preferences>
+          <co-relation-preferences [readonly]="readonly" [relation]="relation"></co-relation-preferences>
         </div>
       </div>
     </co-dialog>
@@ -15138,7 +15580,8 @@ TransactionHeaderRelationComponent.decorators = [
 ];
 TransactionHeaderRelationComponent.ctorParameters = () => [
     { type: TransactionService },
-    { type: DictionaryService }
+    { type: DictionaryService },
+    { type: DialogService }
 ];
 TransactionHeaderRelationComponent.propDecorators = {
     navigationItems: [{ type: ViewChild, args: ['navigationItems', { read: ElementRef },] }],
@@ -15365,14 +15808,9 @@ TransactionHeaderPaymentComponent.decorators = [
       <div class="header-block-balance" *ngIf="transactionInfo.transactionKind !== transactionKind.PurchaseOrder" (click)="openPayment($event)">
         <co-icon class="payment-icon" [iconData]="iconService.getIcon(icons.CreditCardSolid)"></co-icon>
         <div class="payment-payed-wrapper">
-          <ng-container *ngIf="toPay === paid">
-            <span class="payment-paid" [textContent]="paid | priceDisplay"></span>
-          </ng-container>
-          <ng-container *ngIf="toPay !== paid">
-            <span class="payment-paid" [textContent]="paid | priceDisplay"></span>
-            <span class="payment-divider" [textContent]="'/'"></span>
-            <span class="payment-to-pay" [textContent]="toPay | priceDisplay"></span>
-          </ng-container>
+          <span class="payment-to-pay" [textContent]="toPay | priceDisplay"></span>
+          <span class="payment-divider" [textContent]="'/'"></span>
+          <span class="payment-paid" [class.success]="paid >= toPay" [textContent]="paid | priceDisplay"></span>
         </div>
       </div>
     </ng-template>
@@ -15945,7 +16383,114 @@ TransactionLinePriceModule.decorators = [
             },] }
 ];
 
-class TransactionLineVatComponent extends TransactionLineBaseComponent {
+class TransactionFilterPopupBaseComponent extends TransactionLineBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.autoClose = false;
+        this.useModel = true;
+        this.valueChange = new EventEmitter();
+        this.closeAfterCommit = new EventEmitter();
+        this.viewModels = [];
+        this.viewModelsFiltered = [];
+        this.propsForLabel = [];
+        this._collection = [];
+    }
+    set searchText(value) {
+        if (value !== undefined && value !== null) {
+            this._searchText = value;
+            this._doSearch();
+        }
+    }
+    get searchText() {
+        return this._searchText;
+    }
+    set collection(value) {
+        this._collection = value;
+        this.prepareViewModels();
+    }
+    get collection() {
+        return this._collection;
+    }
+    commit(value) {
+        return Promise.resolve(true);
+    }
+    handleChecked(row) {
+        return __awaiter(this, void 0, void 0, function* () {
+            row.checked = true;
+            const currentModel = this.viewModels.find(v => v.value === row.value);
+            if (currentModel) {
+                currentModel.checked = true;
+            }
+            for (let i = 0; i < this.viewModels.length; i++) {
+                if (this.viewModels[i].value !== row.value) {
+                    this.viewModels[i].checked = false;
+                }
+            }
+            if (this.useModel) {
+                if (this.autoClose) {
+                    if (yield this.commit(row.value)) {
+                        this.closeAfterCommit.emit();
+                    }
+                }
+                else {
+                    this.commit(row.value);
+                }
+            }
+            else {
+                this.valueChange.emit(row.value);
+            }
+        });
+    }
+    prepareViewModels() {
+        this.collection.forEach((d, index) => {
+            const labels = this.propsForLabel.map(p => d[p]);
+            this.viewModels.push({
+                value: d[this.codeField],
+                propsForLabel: labels,
+                checked: (this.useModel && this.model && this.checkField) ?
+                    this.model[this.checkField] === d[this.codeField] :
+                    (this.value ? this.value === d[this.codeField] : index === 0)
+            });
+        });
+        this.viewModelsFiltered = this.viewModels.slice();
+        if (!this.useModel && this.viewModels.length > 0) {
+            this.valueChange.next(this.value ? this.value : this.viewModels[0].value);
+        }
+    }
+    _doSearch() {
+        this.viewModelsFiltered = JSON.parse(JSON.stringify(this.viewModels));
+        if (this.searchText) {
+            this.viewModelsFiltered = this.viewModelsFiltered.filter(vmf => {
+                return vmf.propsForLabel.find(p => p && p.toString().match(new RegExp(this.searchText, 'gi')));
+            });
+            // if (!this.searchText) {
+            //   this.viewModelsFiltered = this.viewModels.slice();
+            // } else {
+            // this.viewModelsFiltered = JSON.parse(JSON.stringify(this.viewModels));
+            // for (let i = 0; i < this.viewModelsFiltered.length; i++) {
+            //   const vmf = this.viewModelsFiltered[i];
+            //   for (let j = 0; j < vmf.propsForLabel.length; j++) {
+            //     if (vmf.propsForLabel[j]) {
+            //       vmf.propsForLabel[j] = vmf.propsForLabel[j].replace(new RegExp(this.searchText, 'gi'), `<span class="highlight">${this.searchText}</span>`);
+            //     }
+            //   }
+            // }
+        }
+    }
+}
+TransactionFilterPopupBaseComponent.decorators = [
+    { type: Directive }
+];
+TransactionFilterPopupBaseComponent.propDecorators = {
+    autoClose: [{ type: Input }],
+    useModel: [{ type: Input }],
+    searchText: [{ type: Input }],
+    value: [{ type: Input }],
+    valueChange: [{ type: Output }],
+    closeAfterCommit: [{ type: Output }]
+};
+
+class TransactionLineVatComponent extends TransactionFilterPopupBaseComponent {
     constructor(_transactionService) {
         super();
         this._transactionService = _transactionService;
@@ -16011,7 +16556,7 @@ TransactionLineVatModule.decorators = [
             },] }
 ];
 
-class TransactionLinePriceListComponent extends TransactionLineBaseComponent {
+class TransactionLinePriceListComponent extends TransactionFilterPopupBaseComponent {
     constructor(_transactionService) {
         super();
         this._transactionService = _transactionService;
@@ -16079,7 +16624,7 @@ TransactionLinePriceListModule.decorators = [
             },] }
 ];
 
-class TransactionLineDeliveryMethodComponent extends TransactionLineBaseComponent {
+class TransactionLineDeliveryMethodComponent extends TransactionFilterPopupBaseComponent {
     constructor(_transactionService) {
         super();
         this._transactionService = _transactionService;
@@ -16310,7 +16855,7 @@ TransactionLineReferenceModule.decorators = [
             },] }
 ];
 
-class TransactionLineCommissionCodeComponent extends TransactionLineBaseComponent {
+class TransactionLineCommissionCodeComponent extends TransactionFilterPopupBaseComponent {
     constructor(_transactionService) {
         super();
         this._transactionService = _transactionService;
@@ -16381,7 +16926,7 @@ TransactionLineCommissionCodeModule.decorators = [
             },] }
 ];
 
-class TransactionLineWarehouseComponent extends TransactionLineBaseComponent {
+class TransactionLineWarehouseComponent extends TransactionFilterPopupBaseComponent {
     constructor(_transactionService) {
         super();
         this._transactionService = _transactionService;
@@ -16645,11 +17190,13 @@ TransactionLineSpecialDiscountModule.decorators = [
             },] }
 ];
 
-class TransactionLineSupplierComponent extends TransactionLineBaseComponent {
+class TransactionLineSupplierComponent extends TransactionFilterPopupBaseComponent {
     constructor(_transactionService) {
         super();
         this._transactionService = _transactionService;
-        this.fields = { text: "displayName", value: "relationId" };
+        this.codeField = 'relationId';
+        this.checkField = 'supplierId';
+        this.propsForLabel = ['relationNr', 'displayName'];
     }
     ngOnInit() {
         const request = new RelationRequest();
@@ -16658,17 +17205,16 @@ class TransactionLineSupplierComponent extends TransactionLineBaseComponent {
             this.collection = relationListObjects;
         });
     }
-    commit(code) {
+    commit(id) {
         return __awaiter(this, void 0, void 0, function* () {
-            // if (this.transactionLine.supplier !== code) {
-            //   const oldCode = this.transactionLine.supplier;
-            //   const success = await this._transactionService.updateSupplierTransactionLine(this._transactionService.currentTransaction.transactionInfo.uuid, this.transactionLine.uuid, code);
-            //   if (!success) {
-            //     // this.transactionLine.supplier = code;
-            //   }
-            //   return success;
-            // }
-            return true;
+            if (this.transactionLine.supplierId !== id) {
+                const oldId = this.transactionLine.supplierId;
+                const success = yield this._transactionService.updateSupplierTransactionLine(this._transactionService.currentTransaction.transactionInfo.uuid, this.transactionLine.uuid, id);
+                if (!success) {
+                    this.transactionLine.supplierId = oldId;
+                }
+                return success;
+            }
         });
     }
     transactionLineSet() {
@@ -16679,14 +17225,11 @@ TransactionLineSupplierComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-transaction-line-supplier",
                 template: `
-    <co-input-combo-box
-      [collection]="collection"
-      [placeholder]="'SUPPLIER' | localize"
-      [fields]="fields"
+    <co-transaction-line-checkbox-list
+      [collection]="viewModelsFiltered"
       [readonly]="readonly"
-      [model]="tempSupplier"
-      (modelChange)="commit($event)"
-    ></co-input-combo-box>
+      (checked)="handleChecked($event)"
+    ></co-transaction-line-checkbox-list>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -16702,7 +17245,8 @@ TransactionLineSupplierModule.decorators = [
                 imports: [
                     CommonModule,
                     PipeModule,
-                    InputComboBoxModule
+                    InputComboBoxModule,
+                    TransactionLineCheckboxModule
                 ],
                 declarations: [
                     TransactionLineSupplierComponent
@@ -17272,6 +17816,8 @@ TransactionButtonBarComponent.decorators = [
                 template: `
     <div class="button-bar-wrapper">
       <co-transaction-button-bar-button *ngFor="let button of buttons; let index = index"
+                                        [transactionInfoResponse]="transactionInfoResponse"
+                                        [component]="button.component"
                                         [class.selected]="selectedCategory === button.category"
                                         [title]="button.title"
                                         [iconName]="button.icon"
@@ -17287,38 +17833,125 @@ TransactionButtonBarComponent.ctorParameters = () => [
 ];
 TransactionButtonBarComponent.propDecorators = {
     transactionType: [{ type: Input }],
+    transactionInfoResponse: [{ type: Input }],
     selectedCategory: [{ type: Input }],
     buttonClicked: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-button-bar",] }]
 };
 
-class TransactionButtonBarButtonComponent {
-    constructor(iconCacheService) {
+class TransactionButtonBarButtonComponent extends TransactionButtonBarButtonBaseComponent {
+    constructor(iconCacheService, _compFactoryResolver, appRef, injector) {
+        super();
         this.iconCacheService = iconCacheService;
+        this._compFactoryResolver = _compFactoryResolver;
+        this.appRef = appRef;
+        this.injector = injector;
         this.showClass = true;
+        this.useComponent = false;
+    }
+    set child(content) {
+        this.buttonWrapper = content;
+        this._checkAndCreateComponent();
+    }
+    get isLoaderShowing() {
+        return this.showLoader;
+    }
+    ngOnInit() {
+        this._checkAndCreateComponent();
+    }
+    _checkAndCreateComponent() {
+        if (this.component && this.buttonWrapper && this.buttonWrapper.nativeElement) {
+            this.useComponent = true;
+            const componentRef = this._compFactoryResolver.resolveComponentFactory(this.component).create(this.injector);
+            componentRef.instance.transactionInfoResponse = this.transactionInfoResponse;
+            componentRef.instance.iconName = this.iconName;
+            componentRef.instance.title = this.title;
+            componentRef.instance.showLoader = this.showLoader;
+            componentRef.instance.checked = this.checked;
+            componentRef.instance.showLoaderChange.subscribe((value) => this.showLoader = value);
+            componentRef.instance.checkedChange.subscribe((value) => this.checked = value);
+            this.appRef.attachView(componentRef.hostView);
+            const domElem = componentRef.hostView
+                .rootNodes[0];
+            this.buttonWrapper.nativeElement.appendChild(domElem);
+            componentRef.onDestroy(() => {
+                this.appRef.detachView(componentRef.hostView);
+            });
+        }
     }
 }
 TransactionButtonBarButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-transaction-button-bar-button",
                 template: `
-    <div class="button-wrapper">
-      <co-icon class="co-transaction-button-bar-icon" [iconData]="iconCacheService.getIcon(iconName)"></co-icon>
-      <span class="button-title" [textContent]="title | localize"></span>
+    <co-loader *ngIf="showLoader"></co-loader>
+    <div class="button-wrapper" #buttonWrapper>
+      <co-animated-checkbox [checked]="checked"></co-animated-checkbox>
+      <ng-container *ngIf="!useComponent">
+        <co-icon class="co-transaction-button-bar-icon" [iconData]="iconCacheService.getIcon(iconName)"></co-icon>
+        <span class="button-title" [textContent]="title | localize"></span>
+      </ng-container>
     </div>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 TransactionButtonBarButtonComponent.ctorParameters = () => [
-    { type: IconCacheService }
+    { type: IconCacheService },
+    { type: ComponentFactoryResolver },
+    { type: ApplicationRef },
+    { type: Injector }
 ];
 TransactionButtonBarButtonComponent.propDecorators = {
-    title: [{ type: Input }],
-    iconName: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ['class.co-transaction-button-bar-button',] }]
+    child: [{ type: ViewChild, args: ["buttonWrapper", { read: ElementRef },] }],
+    component: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ['class.co-transaction-button-bar-button',] }],
+    isLoaderShowing: [{ type: HostBinding, args: ['class.show-loader',] }]
+};
+
+class AnimatedCheckboxComponent {
+    constructor() {
+        this.checked = false;
+    }
+    showClass() {
+        return true;
+    }
+}
+AnimatedCheckboxComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-animated-checkbox",
+                template: `
+    <div class="checkbox">
+      <div class="checkmark" [class.show]="checked"></div>
+    </div>
+    <div class="label" *ngIf="label" [textContent]="label | localize"></div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AnimatedCheckboxComponent.propDecorators = {
+    checked: [{ type: Input }],
+    label: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-animated-checkbox",] }]
 };
 
+class AnimatedCheckboxModule {
+}
+AnimatedCheckboxModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    PipeModule
+                ],
+                declarations: [
+                    AnimatedCheckboxComponent
+                ],
+                exports: [
+                    AnimatedCheckboxComponent
+                ]
+            },] }
+];
+
 class TransactionButtonBarModule {
 }
 TransactionButtonBarModule.decorators = [
@@ -17328,14 +17961,18 @@ TransactionButtonBarModule.decorators = [
                     CoreModule,
                     IconModule,
                     PipeModule,
+                    LoaderModule,
+                    AnimatedCheckboxModule,
                 ],
                 declarations: [
                     TransactionButtonBarComponent,
-                    TransactionButtonBarButtonComponent
+                    TransactionButtonBarButtonComponent,
+                    TransactionSalesPurchaseButtonBarButtonComponent
                 ],
                 exports: [
                     TransactionButtonBarComponent,
-                    TransactionButtonBarButtonComponent
+                    TransactionButtonBarButtonComponent,
+                    TransactionSalesPurchaseButtonBarButtonComponent
                 ]
             },] }
 ];
@@ -18071,7 +18708,7 @@ DialogTransactionLineDeliveryMethodComponent.decorators = [
       <co-dialog-header-search [title]="'DELIVERY_METHOD'" (search)="handleSearch($event)"></co-dialog-header-search>
     </ng-template>
     <ng-template #footerTemplate>
-      <div class="dialog-footer-button-wrapper" *ngIf="!useModel">
+      <div class="co-transaction-dialog-footer-button-wrapper" *ngIf="!useModel">
         <co-button [label]="'OK' | localize" (click)="handleOkClick()"></co-button>
       </div>
     </ng-template>
@@ -18127,7 +18764,7 @@ DialogTransactionLineVatComponent.decorators = [
       <co-dialog-header-search [title]="'VAT'" (search)="handleSearch($event)"></co-dialog-header-search>
     </ng-template>
     <ng-template #footerTemplate>
-      <div class="dialog-footer-button-wrapper" *ngIf="!useModel">
+      <div class="co-transaction-dialog-footer-button-wrapper" *ngIf="!useModel">
         <co-button [label]="'OK' | localize" (click)="handleOkClick()"></co-button>
       </div>
     </ng-template>
@@ -18204,10 +18841,6 @@ DialogTransactionLineDiscountComponent.decorators = [
           <co-transaction-line-special-discount [transactionLine]="transactionLine"></co-transaction-line-special-discount>
           <co-transaction-line-quantum-discount [transactionLine]="transactionLine"></co-transaction-line-quantum-discount>
         </div>
-        <div class="two-column-grid">
-          <co-input-text [placeholder]="'SURCHARGE_AMOUNT' | localize" [model]="transactionLine.surchargeAmount" [readonly]="readonly"></co-input-text>
-          <co-input-text [placeholder]="'BUSINESS_RULE_DISCOUNT' | localize" [model]="'NIET_GEIMPLEMENTEERD'" [readonly]="readonly"></co-input-text>
-        </div>
         <div class="transaction-line-discount-overview">
           <div class="transaction-line-discount-overview-item">
             <div class="title" [textContent]="'TRANSACTION_DISCOUNT' | localize"></div>
@@ -18215,7 +18848,7 @@ DialogTransactionLineDiscountComponent.decorators = [
           </div>
           <div class="transaction-line-discount-overview-item">
             <div class="title" [textContent]="'BUSINESS_RULE_DISCOUNT' | localize"></div>
-            <div class="value" [textContent]="'NIET_GEIMPLEMENTEERD'"></div>
+            <div class="value" [class.transaction-negative-value]="transactionLine.transBusinessRuleDiscount < 0" [textContent]="transactionLine.transBusinessRuleDiscount | coCurrency"></div>
           </div>
           <div class="transaction-line-discount-overview-item">
             <div class="title" [textContent]="'QUANTUM_DISCOUNT' | localize"></div>
@@ -18234,7 +18867,7 @@ DialogTransactionLineDiscountComponent.decorators = [
     </co-dialog>
     <ng-template #dialogHeader>
       <div class="co-transaction-dialog-header-title" [textContent]="'DISCOUNT_PRICE_INFORMATION' | localize"></div>
-      <div class="transaction-line-button big" (click)="openThePriceListDialog()">
+      <div class="transaction-line-button full-width" (click)="openThePriceListDialog()">
         <span class="co-transaction-overflow-ellipsis" [textContent]="transactionLine.priceListDescription"></span>
       </div>
     </ng-template>
@@ -18276,7 +18909,7 @@ DialogTransactionLinePriceListComponent.decorators = [
       <co-dialog-header-search [title]="'PRICE_LIST'" (search)="handleSearch($event)"></co-dialog-header-search>
     </ng-template>
     <ng-template #footerTemplate>
-      <div class="dialog-footer-button-wrapper" *ngIf="!useModel">
+      <div class="co-transaction-dialog-footer-button-wrapper" *ngIf="!useModel">
         <co-button [label]="'OK' | localize" (click)="handleOkClick()"></co-button>
       </div>
     </ng-template>
@@ -18533,12 +19166,13 @@ class TransactionQuickAccessComponent {
         this.appRef = appRef;
         this.injector = injector;
     }
-    set transactionType(value) {
-        this._transactionType = value;
+    set transaction(value) {
+        this._transaction = value;
+        this.transactionType = this._transaction.transactionInfo ? this._transaction.transactionInfo.transactionKind : TransactionKind.SalesOrder;
         this._prepareContent();
     }
-    get transactionType() {
-        return this._transactionType;
+    get transaction() {
+        return this._transaction;
     }
     set activeCategory(value) {
         this._activeCategory = value;
@@ -18551,7 +19185,7 @@ class TransactionQuickAccessComponent {
         return true;
     }
     _prepareContent() {
-        if (!this._transactionType || !this._activeCategory || !this.quickAccessContainer) {
+        if (!this.transactionType || !this._activeCategory || !this.quickAccessContainer) {
             return;
         }
         const componentClass = this._mappingService.getQuickAccessComponent(this.transactionType, this.activeCategory);
@@ -18564,6 +19198,7 @@ class TransactionQuickAccessComponent {
         this._componentRef = this._compFactoryResolver
             .resolveComponentFactory(componentClass)
             .create(this.injector);
+        this._componentRef.instance.transaction = this.transaction;
         this.appRef.attachView(this._componentRef.hostView);
         const domElem = this._componentRef.hostView
             .rootNodes[0];
@@ -18591,7 +19226,7 @@ TransactionQuickAccessComponent.ctorParameters = () => [
 ];
 TransactionQuickAccessComponent.propDecorators = {
     quickAccessContainer: [{ type: ViewChild, args: ['quickAccessContent', { read: ElementRef },] }],
-    transactionType: [{ type: Input }],
+    transaction: [{ type: Input }],
     activeCategory: [{ type: Input }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-quick-access",] }]
 };
@@ -18656,6 +19291,96 @@ TransactionQuickAccessOverviewModule.decorators = [
             },] }
 ];
 
+class TransactionSendButtonDialogComponent {
+    constructor(iconService) {
+        this.iconService = iconService;
+        this.icons = Icon;
+        this.label = 'SEND';
+        this.showSendIcon = true;
+        this.showHoverIcon = true;
+        this.sendButtonClick = new EventEmitter();
+        // @HostListener("mouseenter", ["$event"])
+        // public mouseEnter(event: MouseEvent) {
+        //   this.showOpenDialogIcon = true;
+        // }
+        //
+        // @HostListener("mouseleave", ["$event"])
+        // public mouseLeave(event: MouseEvent) {
+        //   this.showOpenDialogIcon = false;
+        // }
+        this.showDialog = false;
+        this.showOpenDialogIcon = false;
+    }
+    showClass() {
+        return true;
+    }
+    openDialog() {
+        this.showDialog = !this.showDialog;
+    }
+}
+TransactionSendButtonDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-send-button-dialog",
+                template: `
+    <div class="transaction-send-button-content-wrapper" (mouseenter)="showOpenDialogIcon = true" (mouseleave)="showOpenDialogIcon = false">
+      <div class="transaction-send-button-wrapper" (click)="sendButtonClick.emit($event)">
+        <div class="transaction-send-button-icon-wrapper">
+          <co-icon class="button-icon" [iconData]="iconService.getIcon(icons.ShareSolid)"></co-icon>
+          <co-icon *ngIf="showSendIcon" class="button-icon send-type-icon" [iconData]="iconService.getIcon(icons.AtSolid)"></co-icon>
+        </div>
+        <span class="button-title" [textContent]="label | localize"></span>
+      </div>
+      <div class="transaction-send-button-hover-icon-wrapper" *ngIf="showHoverIcon">
+        <co-icon *ngIf="showOpenDialogIcon" class="hover-icon" @showHideHoverIcon
+                 [iconData]="iconService.getIcon(icons.EllipsisVerticalSolid)" (click)="openDialog()">
+        </co-icon>
+      </div>
+    </div>
+    <ione-send-method-dialog
+      [showDialog]="showDialog"
+    ></ione-send-method-dialog>
+  `,
+                animations: [
+                    trigger("showHideHoverIcon", [
+                        state("void", style({ width: 0, opacity: 0 })),
+                        state("*", style({ width: "*", opacity: 1 })),
+                        transition("void => *", animate("200ms ease-in-out")),
+                        transition("* => void", animate("200ms ease-out"))
+                    ])
+                ],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionSendButtonDialogComponent.ctorParameters = () => [
+    { type: IconCacheService }
+];
+TransactionSendButtonDialogComponent.propDecorators = {
+    label: [{ type: Input }],
+    showSendIcon: [{ type: Input }],
+    showHoverIcon: [{ type: Input }],
+    sendButtonClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-send-button-dialog",] }]
+};
+
+class TransactionSendButtonDialogModule {
+}
+TransactionSendButtonDialogModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    IconModule,
+                    PipeModule,
+                    SendMethodDialogModule
+                ],
+                declarations: [
+                    TransactionSendButtonDialogComponent
+                ],
+                exports: [
+                    TransactionSendButtonDialogComponent
+                ]
+            },] }
+];
+
 class TransactionQuickAccessOrderDeliveryModule {
 }
 TransactionQuickAccessOrderDeliveryModule.decorators = [
@@ -18666,7 +19391,8 @@ TransactionQuickAccessOrderDeliveryModule.decorators = [
                     IconModule,
                     PipeModule,
                     InputCheckboxModule,
-                    SendMethodDialogModule
+                    SendMethodDialogModule,
+                    TransactionSendButtonDialogModule
                 ],
                 declarations: [
                     TransactionQuickAccessOrderDeliveryComponent
@@ -18677,6 +19403,27 @@ TransactionQuickAccessOrderDeliveryModule.decorators = [
             },] }
 ];
 
+class TransactionQuickAccessOrderPurchaseModule {
+}
+TransactionQuickAccessOrderPurchaseModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    InputCheckboxModule,
+                    IconModule,
+                    PipeModule,
+                    SendMethodDialogModule,
+                    TransactionSendButtonDialogModule
+                ],
+                declarations: [
+                    TransactionQuickAccessOrderPurchaseComponent
+                ],
+                exports: [
+                    TransactionQuickAccessOrderPurchaseComponent
+                ]
+            },] }
+];
+
 class TransactionQuickAccessModule {
 }
 TransactionQuickAccessModule.decorators = [
@@ -18691,7 +19438,8 @@ TransactionQuickAccessModule.decorators = [
                     TransactionQuickAccessOrderConfirmationModule,
                     TransactionQuickAccessReceivedGoodsModule,
                     TransactionQuickAccessOverviewModule,
-                    TransactionQuickAccessOrderDeliveryModule
+                    TransactionQuickAccessOrderDeliveryModule,
+                    TransactionQuickAccessOrderPurchaseModule
                 ],
                 declarations: [
                     TransactionQuickAccessComponent
@@ -19052,7 +19800,7 @@ TransactionReceivedGoodsGridComponent.propDecorators = {
 };
 
 // @ts-ignore
-class TransactionLineWarehouseLocationComponent extends TransactionLineBaseComponent {
+class TransactionLineWarehouseLocationComponent extends TransactionFilterPopupBaseComponent {
     constructor(_articleService) {
         super();
         this._articleService = _articleService;
@@ -19433,6 +20181,7 @@ class TransactionBaseLineComponent extends TransactionLinesLineBaseComponent {
         this.checkbox = false;
         this.checkboxValue = false;
         this.actionButtons = true;
+        this.checkboxValueChanged = new EventEmitter();
     }
     showClass() {
         return true;
@@ -19452,8 +20201,6 @@ class TransactionBaseLineComponent extends TransactionLinesLineBaseComponent {
         this._transactionEventService.openSidePanel.next(line);
         this.waitingForUserAction.next(true);
     }
-    handleCheckboxValueChanged() {
-    }
 }
 TransactionBaseLineComponent.decorators = [
     { type: Component, args: [{
@@ -19464,7 +20211,7 @@ TransactionBaseLineComponent.decorators = [
         <div class="transaction-base-line-section">
           <co-input-checkbox *ngIf="checkbox" class="transaction-line-checkbox"
                              [model]="checkboxValue"
-                             (modelChange)="handleCheckboxValueChanged()"
+                             (modelChange)="checkboxValueChanged.emit($event)"
           ></co-input-checkbox>
           <co-transaction-line-image-and-description
             *ngIf="line.isArticle" class="transaction-line-image-and-description-wrapper"
@@ -19504,6 +20251,7 @@ TransactionBaseLineComponent.propDecorators = {
     checkbox: [{ type: Input }],
     checkboxValue: [{ type: Input }],
     actionButtons: [{ type: Input }],
+    checkboxValueChanged: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-base-line",] }]
 };
 
@@ -19775,6 +20523,66 @@ TransactionLineDeliveryDateButtonModule.decorators = [
             },] }
 ];
 
+class TransactionLineAmountComponent extends TransactionLineBaseComponent {
+    constructor(_service) {
+        super();
+        this._service = _service;
+    }
+    showClass() {
+        return true;
+    }
+    changeLineAmount(amount) {
+        this._service.changeTransactionLineQuantity(this.transactionLine.uuid, amount).then((value) => {
+            if (!value || !value.isSuccess) {
+                this.localAmount = this.transactionLine.amount;
+                return;
+            }
+        });
+    }
+    transactionLineSet() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.transactionLine && this.transactionLine.isArticle) {
+                this.localAmount = this.transactionLine.amount;
+            }
+        });
+    }
+}
+TransactionLineAmountComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-line-amount",
+                template: `
+    <co-input-number-picker class="amount-number-picker"
+                            [(model)]="localAmount" [min]="0"
+                            [readonly]="readonly"
+                            (modelChange)="changeLineAmount($event)"></co-input-number-picker>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionLineAmountComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionLineAmountComponent.propDecorators = {
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-line-amount",] }]
+};
+
+class TransactionLineAmountModule {
+}
+TransactionLineAmountModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    InputNumberPickerModule
+                ],
+                declarations: [
+                    TransactionLineAmountComponent
+                ],
+                exports: [
+                    TransactionLineAmountComponent
+                ]
+            },] }
+];
+
 class TransactionOverviewLineModule {
 }
 TransactionOverviewLineModule.decorators = [
@@ -19800,7 +20608,8 @@ TransactionOverviewLineModule.decorators = [
                     TransactionLineDeliveryDateButtonModule,
                     DialogTransactionLineVatModule,
                     DialogTransactionLineDiscountModule,
-                    TransactionLineStatusbarModule
+                    TransactionLineStatusbarModule,
+                    TransactionLineAmountModule
                 ],
                 declarations: [
                     TransactionOverviewLineComponent
@@ -19860,6 +20669,155 @@ TransactionReceiveGoodsLineModule.decorators = [
             },] }
 ];
 
+class TransactionLineSupplierButtonComponent extends TransactionLineBaseComponent {
+    constructor(_service) {
+        super();
+        this._service = _service;
+        this.showDialogSupplier = false;
+    }
+    showClass() {
+        return true;
+    }
+    transactionLineSet() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.transactionLine && this.transactionLine.isArticle) {
+                this._service.getSupplierFullObjectByRelationId(this.transactionLine.supplierId).then((supp) => {
+                    this.transactionLine.supplierDescription = supp ? supp.displayName : "";
+                });
+            }
+        });
+    }
+}
+TransactionLineSupplierButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-line-supplier-button",
+                template: `
+    <div class="transaction-line-button big" (click)="showDialogSupplier = true">
+      <span class="co-transaction-overflow-ellipsis" [textContent]="transactionLine.supplierDescription"></span>
+    </div>
+    <co-dialog-transaction-line-supplier *ngIf="showDialogSupplier"
+                                                [autoClose]="true"
+                                                [transactionInfo]="transactionInfo"
+                                                [transactionLine]="transactionLine"
+                                                (close)="showDialogSupplier = false"
+    ></co-dialog-transaction-line-supplier>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionLineSupplierButtonComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionLineSupplierButtonComponent.propDecorators = {
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-line-supplier-button",] }]
+};
+
+class DialogTransactionLineSupplierComponent extends DialogTransactionLineBaseComponent {
+    showClass() {
+        return true;
+    }
+}
+DialogTransactionLineSupplierComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-dialog-transaction-line-supplier",
+                template: `
+    <co-dialog [headerTemplate]="dialogHeader" [footerTemplate]="footerTemplate" [showCloseIcon]="useModel" (closeClick)="handleClose(buttonType.Ok)">
+      <co-transaction-line-supplier
+        [autoClose]="autoClose"
+        [useModel]="useModel"
+        [searchText]="searchText"
+        [transactionInfo]="transactionInfo"
+        [transactionLine]="transactionLine"
+        (closeAfterCommit)="handleClose(buttonType.Ok)"
+        (valueChange)="handleValueChange($event)"></co-transaction-line-supplier>
+    </co-dialog>
+    <ng-template #dialogHeader>
+      <co-dialog-header-search [title]="'SUPPLIER'" (search)="handleSearch($event)"></co-dialog-header-search>
+    </ng-template>
+    <ng-template #footerTemplate>
+      <div class="co-transaction-dialog-footer-button-wrapper" *ngIf="!useModel">
+        <co-button [label]="'OK' | localize" (click)="handleOkClick()"></co-button>
+      </div>
+    </ng-template>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+DialogTransactionLineSupplierComponent.propDecorators = {
+    showClass: [{ type: HostBinding, args: ["class.co-dialog-transaction-line-supplier",] }]
+};
+
+class DialogTransactionLineSupplierModule {
+}
+DialogTransactionLineSupplierModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoDialogModule,
+                    TransactionLineSupplierModule,
+                    PipeModule,
+                    ButtonModule,
+                    DialogHeaderSearchModule
+                ],
+                declarations: [
+                    DialogTransactionLineSupplierComponent
+                ],
+                exports: [
+                    DialogTransactionLineSupplierComponent
+                ]
+            },] }
+];
+
+class TransactionLineSupplierButtonModule {
+}
+TransactionLineSupplierButtonModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoDialogModule,
+                    TransactionLineSupplierModule,
+                    PipeModule,
+                    ButtonModule,
+                    DialogTransactionLineSupplierModule
+                ],
+                declarations: [
+                    TransactionLineSupplierButtonComponent
+                ],
+                exports: [
+                    TransactionLineSupplierButtonComponent
+                ]
+            },] }
+];
+
+class TransactionPurchaseLineModule {
+}
+TransactionPurchaseLineModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    TransactionBaseLineModule,
+                    TransactionLineWarehouseButtonModule,
+                    TransactionLineDeliveryButtonModule,
+                    TransactionLineDeliveryDateButtonModule,
+                    TransactionLineStatusbarModule,
+                    TransactionLinePriceModule,
+                    PipeModule,
+                    InputNumberPickerModule,
+                    EditableLabelModule,
+                    DialogTransactionLineDiscountModule,
+                    TransactionLineAmountModule,
+                    TransactionLineCommissionButtonModule,
+                    TransactionLineSupplierButtonModule
+                ],
+                declarations: [
+                    TransactionPurchaseLineComponent
+                ],
+                exports: [
+                    TransactionPurchaseLineComponent
+                ]
+            },] }
+];
+
 class TransactionModule {
 }
 TransactionModule.decorators = [
@@ -19888,7 +20846,8 @@ TransactionModule.decorators = [
                     TransactionTileModule,
                     TransactionOverviewLineModule,
                     TransactionOrderDeliveryLineModule,
-                    TransactionReceiveGoodsLineModule
+                    TransactionReceiveGoodsLineModule,
+                    TransactionPurchaseLineModule
                 ],
                 declarations: [
                     TransactionComponent
@@ -20663,8 +21622,8 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
       <!--Bevestigde leverdatum-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderConfirmedDeliveryDate="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderConfirmedDeliveryDate.isShowing"
-                        [placeholder]="'CONFIRMED_DELIVERY_DATE'"
-                        [customContent]="true">
+                                    [placeholder]="'CONFIRMED_DELIVERY_DATE'"
+                                    [customContent]="true">
           <co-input-date-range
             [startDate]="confirmedDeliveryStartDate"
             [endDate]="confirmedDeliveryEndDate"
@@ -20678,8 +21637,8 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
       <!--Serienummer-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderSerialNumber="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderSerialNumber.isShowing"
-                        [placeholder]="'SERIAL_NUMBER'"
-                        [customContent]="true">
+                                    [placeholder]="'SERIAL_NUMBER'"
+                                    [customContent]="true">
           <co-input-text [(model)]="searchRequest.serialNumber"
                          [placeholder]="searchPlaceholder | localize"></co-input-text>
         </co-transaction-filter-item>
@@ -20688,8 +21647,8 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
       <!--Batchnummer-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderBatchNumber="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderBatchNumber.isShowing"
-                        [placeholder]="'BATCH_NUMBER'"
-                        [customContent]="true">
+                                    [placeholder]="'BATCH_NUMBER'"
+                                    [customContent]="true">
           <co-input-text [(model)]="searchRequest.batchNumber"
                          [placeholder]="searchPlaceholder | localize"></co-input-text>
         </co-transaction-filter-item>
@@ -20699,7 +21658,7 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderDelivered="lazyRender">
         <co-transaction-filter-historic-state *ngIf="lazyRenderDelivered.isShowing"
                                               [label]="'DELIVERED'"
-                                              (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityDelivered')"
+                                              (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityDelivered')"
         ></co-transaction-filter-historic-state>
       </div>
 
@@ -20707,7 +21666,7 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderInvoiced="lazyRender">
         <co-transaction-filter-historic-state *ngIf="lazyRenderInvoiced.isShowing"
                                               [label]="'INVOICED'"
-                                              (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityInvoiced')"
+                                              (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityInvoiced')"
         ></co-transaction-filter-historic-state>
       </div>
 
@@ -20715,7 +21674,7 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderReceived="lazyRender">
         <co-transaction-filter-historic-state *ngIf="lazyRenderReceived.isShowing"
                                               [label]="'RECEIVED_DELIVERED'"
-                                              (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityReceived')"
+                                              (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityReceived')"
         ></co-transaction-filter-historic-state>
       </div>
 
@@ -20723,15 +21682,15 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderConfirmed="lazyRender">
         <co-transaction-filter-historic-state *ngIf="lazyRenderConfirmed.isShowing"
                                               [label]="'CONFIRMED'"
-                                              (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityConfirmed')"
+                                              (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityConfirmed')"
         ></co-transaction-filter-historic-state>
       </div>
 
       <!--Aankomstdatum-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderArrivalDate="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderArrivalDate.isShowing"
-                        [placeholder]="'ARRIVAL_DATE'"
-                        [customContent]="true">
+                                    [placeholder]="'ARRIVAL_DATE'"
+                                    [customContent]="true">
           <co-input-date-range
             [startDate]="arrivalStartDate"
             [endDate]="arrivalEndDate"
@@ -20746,7 +21705,7 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderAllocated="lazyRender">
         <co-transaction-filter-historic-state *ngIf="lazyRenderAllocated.isShowing"
                                               [label]="'ALLOCATED'"
-                                              (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityAllocated')"
+                                              (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityAllocated')"
         ></co-transaction-filter-historic-state>
       </div>
 
@@ -20754,7 +21713,7 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderToBePicked="lazyRender">
         <co-transaction-filter-historic-state *ngIf="lazyRenderToBePicked.isShowing"
                                               [label]="'TO_BE_PICKED'"
-                                              (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityToBePicked')"
+                                              (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityToBePicked')"
         ></co-transaction-filter-historic-state>
       </div>
 
@@ -20762,7 +21721,7 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderPicked="lazyRender">
         <co-transaction-filter-historic-state *ngIf="lazyRenderPicked.isShowing"
                                               [label]="'PICKED'"
-                                              (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityPicked')"
+                                              (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityPicked')"
         ></co-transaction-filter-historic-state>
       </div>
 
@@ -20784,37 +21743,37 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.decorators = [
       <!--Magazijn-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderWarehouse="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderWarehouse.isShowing"
-                        [placeholder]="'WAREHOUSE'"
-                        [singleSelect]="true"
-                        [collection]="warehouses"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'warehouse')">
+                                    [placeholder]="'WAREHOUSE'"
+                                    [singleSelect]="true"
+                                    [collection]="warehouses"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'warehouse')">
         </co-transaction-filter-item>
       </div>
 
       <!--Bron magazijn-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderSourceWarehouse="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderSourceWarehouse.isShowing"
-                        [placeholder]="'SOURCE_WAREHOUSE'"
-                        [singleSelect]="true"
-                        [collection]="sourceWarehouses"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'sourceWarehouse')">
+                                    [placeholder]="'SOURCE_WAREHOUSE'"
+                                    [singleSelect]="true"
+                                    [collection]="sourceWarehouses"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForSingleSelect($event, 'sourceWarehouse')">
         </co-transaction-filter-item>
       </div>
 
       <!--Levermethode-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderDeliveryMethod="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderDeliveryMethod.isShowing"
-                        [placeholder]="'DELIVERY_METHOD'"
-                        [collection]="deliveryMethods"
-                        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeDeliveryMethod')">
+                                    [placeholder]="'DELIVERY_METHOD'"
+                                    [collection]="deliveryMethods"
+                                    (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeDeliveryMethod')">
         </co-transaction-filter-item>
       </div>
 
       <!--Leverdatum definitief-->
       <div class="filter-item-wrapper" lazyRender #lazyRenderDeliveryDateDefinitive="lazyRender">
         <co-transaction-filter-item *ngIf="lazyRenderDeliveryDateDefinitive.isShowing"
-                        [placeholder]="'DELIVERY_DATE_FINAL'"
-                        [customContent]="true">
+                                    [placeholder]="'DELIVERY_DATE_FINAL'"
+                                    [customContent]="true">
           <co-input-checkbox
             [model]="searchRequest.deliveryDateDefinitive === 'J'"
             (modelChange)="filterRequestService.handleCheckboxValueChangeForString($event, 'deliveryDateDefinitive')"
@@ -20837,9 +21796,10 @@ TransactionPurchaseOrderFilterContentLogisticsComponent.propDecorators = {
 };
 
 class TransactionFilterHistoricStateComponent {
-    constructor() {
+    constructor(_dictionary) {
+        this._dictionary = _dictionary;
         this.expanded = true;
-        this.filterClicked = new EventEmitter();
+        this.collectionChange = new EventEmitter();
         this.states = [];
     }
     set label(value) {
@@ -20856,14 +21816,11 @@ class TransactionFilterHistoricStateComponent {
     showClass() {
         return true;
     }
-    handleStateChange(value) {
-        this.filterClicked.emit(value);
-    }
     _setStates() {
         this.states = [
-            { label: this.labelNothing, value: QuantityInHistoricState.Nothing, checked: false },
-            { label: this.labelPartly, value: QuantityInHistoricState.Partly, checked: false },
-            { label: this.labelFully, value: QuantityInHistoricState.Fully, checked: false }
+            { description: this._dictionary.get(this.labelNothing), code: QuantityInHistoricState.Nothing, checked: false },
+            { description: this._dictionary.get(this.labelPartly), code: QuantityInHistoricState.Partly, checked: false },
+            { description: this._dictionary.get(this.labelFully), code: QuantityInHistoricState.Fully, checked: false }
         ];
     }
 }
@@ -20873,21 +21830,20 @@ TransactionFilterHistoricStateComponent.decorators = [
                 template: `
     <co-transaction-filter-item
       [placeholder]="label"
-      [customContent]="true">
-      <co-input-radio-button *ngFor="let state of states"
-                             [model]="state.checked"
-                             [label]="state.label | localize"
-                             (modelChange)="handleStateChange(state.value)"
-      ></co-input-radio-button>
+      [collection]="states"
+      (collectionChange)="collectionChange.emit($event)">
     </co-transaction-filter-item>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
+TransactionFilterHistoricStateComponent.ctorParameters = () => [
+    { type: DictionaryService }
+];
 TransactionFilterHistoricStateComponent.propDecorators = {
     label: [{ type: Input }],
     expanded: [{ type: Input }],
-    filterClicked: [{ type: Output }],
+    collectionChange: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-filter-historic-state",] }]
 };
 
@@ -22060,7 +23016,7 @@ TransactionSalesOrderFilterContentLogisticsComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderAllocated="lazyRender">
         <co-transaction-filter-historic-state *ngIf="lazyRenderAllocated.isShowing"
                                               [label]="'ALLOCATED'"
-                                              (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityAllocated')"
+                                              (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityAllocated')"
         ></co-transaction-filter-historic-state>
       </div>
 
@@ -22068,7 +23024,7 @@ TransactionSalesOrderFilterContentLogisticsComponent.decorators = [
       <div class="filter-item-wrapper" lazyRender #lazyRenderDelivered="lazyRender">
         <co-transaction-filter-historic-state *ngIf="lazyRenderDelivered.isShowing"
                                               [label]="'DELIVERED'"
-                                              (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityDelivered')"
+                                              (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityDelivered')"
         ></co-transaction-filter-historic-state>
         </div>
 
@@ -22076,7 +23032,7 @@ TransactionSalesOrderFilterContentLogisticsComponent.decorators = [
         <div class="filter-item-wrapper" lazyRender #lazyRenderInvoiced="lazyRender">
           <co-transaction-filter-historic-state *ngIf="lazyRenderInvoiced.isShowing"
                                                 [label]="'INVOICED'"
-                                                (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityInvoiced')"
+                                                (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityInvoiced')"
           ></co-transaction-filter-historic-state>
         </div>
 
@@ -22084,7 +23040,7 @@ TransactionSalesOrderFilterContentLogisticsComponent.decorators = [
         <div class="filter-item-wrapper" lazyRender #lazyRenderToBePicked="lazyRender">
           <co-transaction-filter-historic-state *ngIf="lazyRenderToBePicked.isShowing"
                                                 [label]="'TO_BE_PICKED'"
-                                                (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityToBePicked')"
+                                                (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityToBePicked')"
           ></co-transaction-filter-historic-state>
         </div>
 
@@ -22092,7 +23048,7 @@ TransactionSalesOrderFilterContentLogisticsComponent.decorators = [
         <div class="filter-item-wrapper" lazyRender #lazyRenderPicked="lazyRender">
           <co-transaction-filter-historic-state *ngIf="lazyRenderPicked.isShowing"
                                                 [label]="'PICKED'"
-                                                (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityPicked')"
+                                                (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'quantityPicked')"
           ></co-transaction-filter-historic-state>
         </div>
 
@@ -22580,5 +23536,5 @@ TransactionLineGridModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { CheckoutComponent, CheckoutModule, SearchViewMode, SearchbarViewMode, ShoppingCartComponent, ShoppingCartModule, ShoppingCartPreviewComponent, ShoppingCartPreviewModule, TransactionComponent, TransactionConfirmationDetailsComponent, TransactionConfirmationDetailsModule, TransactionConfirmationHistoryComponent, TransactionConfirmationHistoryModule, TransactionHeaderComponent, TransactionHeaderDeliveryComponent, TransactionHeaderDeliveryModule, TransactionHeaderModule, TransactionHeaderOrderComponent, TransactionHeaderOrderModule, TransactionHeaderRelationComponent, TransactionHeaderRelationModule, TransactionLineGridComponent, TransactionLineGridModule, TransactionLineStatusbarComponent, TransactionLineStatusbarModule, TransactionLinesComponent, TransactionLinesModule, TransactionModule, TransactionQuickAccessComponent, TransactionQuickAccessModule, TransactionQuickAccessOrderConfirmationComponent, TransactionQuickAccessOrderConfirmationModule, TransactionQuickAccessReceivedGoodsComponent, TransactionQuickAccessReceivedGoodsModule, TransactionSearchComponent, TransactionSearchModule, TransactionSearchService, TransactionService, TransactionStatusbarComponent, TransactionStatusbarModule, TransactionTotalsComponent, TransactionTotalsModule, PendingReasonService as ɵa, DialogService as ɵb, IconCacheService as ɵba, CharacteristicAnswerModule as ɵbb, CharacteristicAnswerComponent as ɵbc, WarehouseModule as ɵbd, WarehouseComponent as ɵbe, ImageDisplayComponent as ɵbf, IconComponent as ɵbg, CustomerGroupsComponent as ɵbh, StockStatusIndicatorComponent as ɵbi, LoaderComponent as ɵbj, LazyRenderMasterDirective as ɵbk, LazyRenderDirective as ɵbl, RelationAddressModule as ɵbm, RelationAddressComponent as ɵbn, RelationBaseComponent as ɵbo, RelationAddressSelectModule as ɵbp, RelationAddressTileModule as ɵbq, TileModule as ɵbr, TileComponent as ɵbs, RelationAddressTileComponent as ɵbt, RelationAddressSelectComponent as ɵbu, BusinessObjectFactory as ɵbv, StepperModule as ɵbw, StepperComponent as ɵbx, StepperStepComponent as ɵby, TransactionLineModule as ɵbz, DynamicComponentService as ɵc, TransactionLineComponent as ɵca, TransactionMappingService as ɵcb, TransactionArticleTextModule as ɵcc, TransactionLineImageAndDescriptionModule as ɵcd, TransactionLineDescriptionModule as ɵce, TransactionLineDescriptionComponent as ɵcf, TransactionLineBaseComponent as ɵcg, TransactionFilterPopupBaseComponent as ɵch, TransactionLineImageAndDescriptionComponent as ɵci, TransactionImageService as ɵcj, TransactionArticleTextComponent as ɵck, TransactionReceiveGoodsService as ɵcl, TransactionEventService as ɵcm, DialogTransactionHeaderDiscountModule as ɵcn, TransactionHeaderDiscountPercentageModule as ɵco, TransactionHeaderDiscountPercentageComponent as ɵcp, TransactionHeaderBaseComponent as ɵcq, TransactionHeaderDiscountAmountModule as ɵcr, TransactionHeaderDiscountAmountComponent as ɵcs, TransactionHeaderDiscountTransactionTotalModule as ɵct, TransactionHeaderDiscountTransactionTotalComponent as ɵcu, DialogTransactionHeaderDiscountComponent as ɵcv, DialogTransactionHeaderBaseComponent as ɵcw, AvatarModule as ɵcx, AvatarComponent as ɵcy, SharedService as ɵcz, OptionsService as ɵd, SharedConnectorService as ɵda, DeliveryTypeTileModule as ɵdb, DeliveryTypeTileComponent as ɵdc, PaymentModule as ɵdd, PaymentTileModule as ɵde, PaymentTileComponent as ɵdf, PaymentQrCodeModule as ɵdg, PaymentQrCodeComponent as ɵdh, DownPaymentModule as ɵdi, DownPaymentComponent as ɵdj, PaymentService as ɵdk, PaymentComponent as ɵdl, RelationTypeModule as ɵdm, RelationTypeComponent as ɵdn, RelationGeneralModule as ɵdo, RelationSuggestionsListModule as ɵdp, RelationSuggestionsListItemModule as ɵdq, RelationSuggestionsListItemComponent as ɵdr, RelationSuggestionsListComponent as ɵds, RelationGeneralComponent as ɵdt, RelationAddressesModule as ɵdu, RelationAddressesComponent as ɵdv, RelationContactDetailsModule as ɵdw, RelationContactDetailsComponent as ɵdx, RelationPreferencesModule as ɵdy, RelationPreferencesComponent as ɵdz, DictionaryService as ɵe, TransactionHeaderBlockModule as ɵea, TransactionHeaderBlockComponent as ɵeb, TransactionHeaderDeliveryDateModule as ɵec, TransactionHeaderDeliveryDateComponent as ɵed, TransactionHeaderDeliveryOptionsModule as ɵee, TransactionHeaderDeliveryOptionsComponent as ɵef, TransactionHeaderRemarksModule as ɵeg, TransactionHeaderRemarksComponent as ɵeh, TransactionHeaderReferenceModule as ɵei, TransactionHeaderReferenceComponent as ɵej, TransactionHeaderRelationReferenceModule as ɵek, TransactionHeaderRelationReferenceComponent as ɵel, TransactionHeaderDeliveryMethodModule as ɵem, TransactionLineCheckboxModule as ɵen, TransactionLineCheckboxListComponent as ɵeo, TransactionHeaderDeliveryMethodComponent as ɵep, TransactionHeaderPreferredDeliveryDateModule as ɵeq, TransactionHeaderPreferredDeliveryDateComponent as ɵer, DialogTransactionHeaderDeliveryMethodModule as ɵes, DialogHeaderSearchModule as ɵet, DialogHeaderSearchComponent as ɵeu, DialogTransactionHeaderDeliveryMethodComponent as ɵev, TransactionHeaderPartialDeliveryModule as ɵew, TransactionHeaderPartialDeliveryComponent as ɵex, TransactionBaseComponent as ɵey, TransactionHeaderDownpaymentPercentageModule as ɵez, TransactionConnectorService as ɵf, TransactionHeaderDownpaymentPercentageComponent as ɵfa, TransactionHeaderDownpaymentAmountModule as ɵfb, TransactionHeaderDownpaymentAmountComponent as ɵfc, TransactionHeaderDefinitiveModule as ɵfd, TransactionHeaderDefinitiveComponent as ɵfe, TransactionHeaderBranchModule as ɵff, TransactionHeaderBranchComponent as ɵfg, TransactionHeaderAdministrativeRelationModule as ɵfh, TransactionHeaderAdministrativeRelationComponent as ɵfi, TransactionHeaderMarketingModule as ɵfj, TransactionHeaderMarketingComponent as ɵfk, CheckoutOverviewRelationEditComponent as ɵfl, CheckoutOverviewDeliveryEditComponent as ɵfm, CheckoutOverviewDeliveryAddressComponent as ɵfn, CheckoutOverviewPaymentComponent as ɵfo, CheckoutLoginComponent as ɵfp, TransactionFilterCategoriesModule as ɵfq, TransactionFilterCategoriesComponent as ɵfr, TransactionHeaderPaymentModule as ɵfs, TransactionHeaderPaymentComponent as ɵft, TransactionLinesGridModule as ɵfu, TransactionBaseGridModule as ɵfv, TransactionLineSidePanelModule as ɵfw, TransactionLineSidePanelDefaultModule as ɵfx, TransactionLinePriceModule as ɵfy, TransactionLinePriceComponent as ɵfz, TransactionConnectorAdapterService as ɵg, TransactionLinePriceListModule as ɵga, TransactionLinePriceListComponent as ɵgb, TransactionLineVatModule as ɵgc, TransactionLineVatComponent as ɵgd, TransactionLineQuantityModule as ɵge, TransactionLineQuantityComponent as ɵgf, TransactionLineLineDiscountModule as ɵgg, TransactionLineLineDiscountComponent as ɵgh, TransactionLineDeliveryMethodModule as ɵgi, TransactionLineDeliveryMethodComponent as ɵgj, TransactionLineDeliveryDateModule as ɵgk, TransactionLineDeliveryDateComponent as ɵgl, TransactionLineReferenceModule as ɵgm, TransactionLineReferenceComponent as ɵgn, TransactionLineCommissionCodeModule as ɵgo, TransactionLineCommissionCodeComponent as ɵgp, TransactionLineWarehouseModule as ɵgq, TransactionLineWarehouseComponent as ɵgr, TransactionLineDiscountAmountModule as ɵgs, TransactionLineDiscountAmountComponent as ɵgt, TransactionLineQuantumDiscountModule as ɵgu, TransactionLineQuantumDiscountComponent as ɵgv, TransactionLineSpecialDiscountModule as ɵgw, TransactionLineSpecialDiscountComponent as ɵgx, TransactionLineSupplierModule as ɵgy, TransactionLineSupplierComponent as ɵgz, SelectMultipleCacheService as ɵh, TransactionLineSidePanelDefaultComponent as ɵha, TransactionReceivingGoodsHistoryModule as ɵhb, TransactionHistoryGridModule as ɵhc, TransactionHistoryGridStatusModule as ɵhd, TransactionHistoryGridStatusComponent as ɵhe, TransactionHistoryGridComponent as ɵhf, TransactionReceivingGoodsHistoryComponent as ɵhg, TransactionReceivingGoodsDetailsModule as ɵhh, TransactionReceivingGoodsDetailsComponent as ɵhi, ArticleService as ɵhj, TransactionButtonBarModule as ɵhk, TransactionButtonBarComponent as ɵhl, TransactionButtonBarButtonComponent as ɵhm, TransactionLineSidePanelPurchaseModule as ɵhn, DefaultOkCancelButtonsModule as ɵho, DefaultOkCancelButtonsComponent as ɵhp, TransactionLineSidePanelPurchaseComponent as ɵhq, TransactionLineSidePanelComponent as ɵhr, DynamicBaseComponent as ɵhs, TransactionLineActionButtonsModule as ɵht, TransactionArticleTextOverviewModule as ɵhu, TransactionArticleTextOverviewComponent as ɵhv, TransactionLineActionButtonsComponent as ɵhw, TransactionBaseGridComponent as ɵhx, TransactionGridBaseComponent as ɵhy, DialogTransactionLineCommissionCodeModule as ɵhz, BusinessObjectCacheManagerService as ɵi, DialogTransactionLineCommissionCodeComponent as ɵia, DialogTransactionLineBaseComponent as ɵib, DialogTransactionLineWarehouseModule as ɵic, DialogTransactionLineWarehouseComponent as ɵid, DialogTransactionLineWarehouseCcModule as ɵie, DialogTransactionLineWarehouseCcComponent as ɵif, DialogTransactionLineDeliveryMethodModule as ɵig, DialogTransactionLineDeliveryMethodComponent as ɵih, DialogTransactionLineVatModule as ɵii, DialogTransactionLineVatComponent as ɵij, DialogTransactionLineDiscountModule as ɵik, DialogTransactionLinePriceListModule as ɵil, DialogTransactionLinePriceListComponent as ɵim, DialogTransactionLineDiscountComponent as ɵin, TransactionLinesGridComponent as ɵio, DiscountModule as ɵip, DiscountComponent as ɵiq, TransactionQuickAccessOverviewModule as ɵir, TransactionQuickAccessOverviewComponent as ɵis, TransactionQuickAccessOrderDeliveryModule as ɵit, TransactionQuickAccessOrderDeliveryComponent as ɵiu, TransactionOrderConfirmationGridModule as ɵiv, TransactionOrderConfirmationGridComponent as ɵiw, TransactionReceivedGoodsGridModule as ɵix, DialogTransactionLineWarehouseLocationModule as ɵiy, TransactionLineWarehouseLocationModule as ɵiz, CacheField as ɵj, TransactionLineWarehouseLocationComponent as ɵja, DialogTransactionLineWarehouseLocationComponent as ɵjb, TransactionLineWarehouseLocationButtonModule as ɵjc, TransactionLineWarehouseLocationButtonComponent as ɵjd, TransactionReceivedGoodsGridComponent as ɵje, ViewModeButtonsModule as ɵjf, ViewModeButtonsComponent as ɵjg, TransactionGridModule as ɵjh, TransactionGridComponent as ɵji, TransactionTileModule as ɵjj, TransactionTileComponent as ɵjk, TransactionOverviewLineModule as ɵjl, EditableLabelModule as ɵjm, EditableLabelComponent as ɵjn, TransactionBaseLineModule as ɵjo, TransactionBaseLineComponent as ɵjp, TransactionLinesLineBaseComponent as ɵjq, TransactionLineCommissionButtonModule as ɵjr, TransactionLineCommissionButtonComponent as ɵjs, TransactionLineWarehouseButtonModule as ɵjt, TransactionLineWarehouseButtonComponent as ɵju, TransactionLineDeliveryButtonModule as ɵjv, TransactionLineDeliveryButtonComponent as ɵjw, TransactionLineDeliveryDateButtonModule as ɵjx, TransactionLineDeliveryDateButtonComponent as ɵjy, TransactionOverviewLineComponent as ɵjz, SelectMultipleParameterizedCacheService as ɵk, TransactionOrderDeliveryLineModule as ɵka, TransactionOrderDeliveryLineComponent as ɵkb, TransactionReceiveGoodsLineModule as ɵkc, TransactionReceiveGoodsLineComponent as ɵkd, TransactionSearchResultModule as ɵke, TransactionSearchSalesOrderTileModule as ɵkf, TransactionSearchSalesOrderTileComponent as ɵkg, TransactionSearchTileBaseComponent as ɵkh, TransactionSearchPurchaseOrderTileModule as ɵki, TransactionSearchPurchaseOrderTileComponent as ɵkj, TransactionSearchSalesOrderGridModule as ɵkk, TransactionSearchSalesOrderGridComponent as ɵkl, TransactionSearchGridBaseComponent as ɵkm, TransactionSearchPurchaseOrderGridModule as ɵkn, TransactionSearchPurchaseOrderGridComponent as ɵko, TransactionSearchHeaderModule as ɵkp, TransactionSearchHeaderComponent as ɵkq, TransactionSearchGridModule as ɵkr, TransactionSearchGridComponent as ɵks, TransactionSearchTileModule as ɵkt, TransactionSearchTileComponent as ɵku, TransactionSearchResultComponent as ɵkv, TransactionSalesOrderFilterModule as ɵkw, TransactionSalesOrderFilterContentOrderModule as ɵkx, TransactionFilterItemModule as ɵky, TransactionFilterItemComponent as ɵkz, ErrorService as ɵl, TransactionSalesOrderFilterContentOrderComponent as ɵla, TransactionFilterContentBaseComponent as ɵlb, FilterRequestService as ɵlc, TransactionSalesOrderFilterContentLogisticsModule as ɵld, TransactionFilterHistoricStateModule as ɵle, TransactionFilterHistoricStateComponent as ɵlf, TransactionSalesOrderFilterContentLogisticsComponent as ɵlg, TransactionSalesOrderFilterContentArticleModule as ɵlh, TransactionSalesOrderFilterContentArticleComponent as ɵli, TransactionSalesOrderFilterComponent as ɵlj, TransactionFilterBaseComponent as ɵlk, TransactionPurchaseOrderFilterModule as ɵll, TransactionPurchaseOrderFilterContentOrderModule as ɵlm, TransactionPurchaseOrderFilterContentOrderComponent as ɵln, TransactionPurchaseOrderFilterContentLogisticsModule as ɵlo, TransactionPurchaseOrderFilterContentLogisticsComponent as ɵlp, TransactionPurchaseOrderFilterContentArticleModule as ɵlq, TransactionPurchaseOrderFilterContentArticleComponent as ɵlr, TransactionPurchaseOrderFilterComponent as ɵls, TransactionFilterModule as ɵlt, TransactionFilterComponent as ɵlu, SelectSingleCacheService as ɵm, ArticleConnectorService as ɵn, CoreModule as ɵo, ConfirmationDialogModule as ɵp, PipeModule as ɵq, AppendPipe as ɵr, DeliveryTimePipe as ɵs, DateDurationPipe as ɵt, LocalizePipe as ɵu, CoCurrencyPipe as ɵv, SafeStylePipe as ɵw, SafeHtmlPipe as ɵx, ConfirmationDialogComponent as ɵy, DialogBaseComponent as ɵz };
+export { CheckoutComponent, CheckoutModule, LoaderComponent, LoaderModule, SearchViewMode, SearchbarViewMode, ShoppingCartComponent, ShoppingCartModule, ShoppingCartPreviewComponent, ShoppingCartPreviewModule, TransactionComponent, TransactionConfirmationDetailsComponent, TransactionConfirmationDetailsModule, TransactionConfirmationHistoryComponent, TransactionConfirmationHistoryModule, TransactionHeaderComponent, TransactionHeaderDeliveryComponent, TransactionHeaderDeliveryModule, TransactionHeaderModule, TransactionHeaderOrderComponent, TransactionHeaderOrderModule, TransactionHeaderRelationComponent, TransactionHeaderRelationModule, TransactionLineGridComponent, TransactionLineGridModule, TransactionLineStatusbarComponent, TransactionLineStatusbarModule, TransactionLinesComponent, TransactionLinesModule, TransactionModule, TransactionQuickAccessComponent, TransactionQuickAccessModule, TransactionQuickAccessOrderConfirmationComponent, TransactionQuickAccessOrderConfirmationModule, TransactionQuickAccessReceivedGoodsComponent, TransactionQuickAccessReceivedGoodsModule, TransactionSearchComponent, TransactionSearchModule, TransactionSearchService, TransactionService, TransactionStatusbarComponent, TransactionStatusbarModule, TransactionTotalsComponent, TransactionTotalsModule, PendingReasonService as ɵa, DialogService as ɵb, DialogBaseComponent as ɵba, IconCacheService as ɵbb, CharacteristicAnswerModule as ɵbc, CharacteristicAnswerComponent as ɵbd, WarehouseModule as ɵbe, WarehouseComponent as ɵbf, ImageDisplayComponent as ɵbg, IconComponent as ɵbh, CustomerGroupsComponent as ɵbi, StockStatusIndicatorComponent as ɵbj, LazyRenderMasterDirective as ɵbk, LazyRenderDirective as ɵbl, RelationAddressModule as ɵbm, RelationAddressComponent as ɵbn, RelationBaseComponent as ɵbo, RelationAddressSelectModule as ɵbp, RelationAddressTileModule as ɵbq, TileModule as ɵbr, TileComponent as ɵbs, RelationAddressTileComponent as ɵbt, RelationAddressSelectComponent as ɵbu, BusinessObjectFactory as ɵbv, StepperModule as ɵbw, StepperComponent as ɵbx, StepperStepComponent as ɵby, TransactionLineModule as ɵbz, DynamicComponentService as ɵc, TransactionLineComponent as ɵca, TransactionMappingService as ɵcb, TransactionArticleTextModule as ɵcc, TransactionLineImageAndDescriptionModule as ɵcd, TransactionLineDescriptionModule as ɵce, TransactionLineDescriptionComponent as ɵcf, TransactionLineBaseComponent as ɵcg, TransactionLineImageAndDescriptionComponent as ɵch, TransactionImageService as ɵci, TransactionArticleTextComponent as ɵcj, TransactionReceiveGoodsService as ɵck, DialogTransactionHeaderDiscountModule as ɵcl, TransactionHeaderDiscountPercentageModule as ɵcm, TransactionHeaderDiscountPercentageComponent as ɵcn, TransactionHeaderBaseComponent as ɵco, TransactionHeaderFilterPopupBaseComponent as ɵcp, TransactionHeaderDiscountAmountModule as ɵcq, TransactionHeaderDiscountAmountComponent as ɵcr, TransactionHeaderDiscountTransactionTotalModule as ɵcs, TransactionHeaderDiscountTransactionTotalComponent as ɵct, DialogTransactionHeaderDiscountComponent as ɵcu, DialogTransactionHeaderBaseComponent as ɵcv, AvatarModule as ɵcw, AvatarComponent as ɵcx, SharedService as ɵcy, SharedConnectorService as ɵcz, OptionsService as ɵd, DeliveryTypeTileModule as ɵda, DeliveryTypeTileComponent as ɵdb, PaymentModule as ɵdc, PaymentTileModule as ɵdd, PaymentTileComponent as ɵde, PaymentQrCodeModule as ɵdf, PaymentQrCodeComponent as ɵdg, DownPaymentModule as ɵdh, DownPaymentComponent as ɵdi, PaymentService as ɵdj, PaymentComponent as ɵdk, RelationTypeModule as ɵdl, RelationTypeComponent as ɵdm, RelationGeneralModule as ɵdn, RelationSuggestionsListModule as ɵdo, RelationSuggestionsListItemModule as ɵdp, RelationSuggestionsListItemComponent as ɵdq, RelationSuggestionsListComponent as ɵdr, RelationGeneralComponent as ɵds, RelationAddressesModule as ɵdt, RelationAddressesComponent as ɵdu, RelationContactDetailsModule as ɵdv, RelationContactDetailsComponent as ɵdw, RelationPreferencesModule as ɵdx, RelationPreferencesComponent as ɵdy, TransactionHeaderBlockModule as ɵdz, DictionaryService as ɵe, TransactionHeaderBlockComponent as ɵea, TransactionHeaderDeliveryDateModule as ɵeb, TransactionHeaderDeliveryDateComponent as ɵec, TransactionHeaderDeliveryOptionsModule as ɵed, TransactionHeaderDeliveryOptionsComponent as ɵee, TransactionHeaderRemarksModule as ɵef, TransactionHeaderRemarksComponent as ɵeg, TransactionHeaderReferenceModule as ɵeh, TransactionHeaderReferenceComponent as ɵei, TransactionHeaderRelationReferenceModule as ɵej, TransactionHeaderRelationReferenceComponent as ɵek, TransactionHeaderDeliveryMethodModule as ɵel, TransactionLineCheckboxModule as ɵem, TransactionLineCheckboxListComponent as ɵen, TransactionHeaderDeliveryMethodComponent as ɵeo, TransactionHeaderPreferredDeliveryDateModule as ɵep, TransactionHeaderPreferredDeliveryDateComponent as ɵeq, DialogTransactionHeaderDeliveryMethodModule as ɵer, DialogHeaderSearchModule as ɵes, DialogHeaderSearchComponent as ɵet, DialogTransactionHeaderDeliveryMethodComponent as ɵeu, TransactionHeaderPartialDeliveryModule as ɵev, TransactionHeaderPartialDeliveryComponent as ɵew, TransactionBaseComponent as ɵex, TransactionHeaderDownpaymentPercentageModule as ɵey, TransactionHeaderDownpaymentPercentageComponent as ɵez, TransactionConnectorService as ɵf, TransactionHeaderDownpaymentAmountModule as ɵfa, TransactionHeaderDownpaymentAmountComponent as ɵfb, TransactionHeaderDefinitiveModule as ɵfc, TransactionHeaderDefinitiveComponent as ɵfd, TransactionHeaderBranchModule as ɵfe, TransactionHeaderBranchComponent as ɵff, TransactionHeaderAdministrativeRelationModule as ɵfg, TransactionHeaderAdministrativeRelationComponent as ɵfh, TransactionHeaderMarketingModule as ɵfi, TransactionHeaderMarketingComponent as ɵfj, CheckoutOverviewRelationEditComponent as ɵfk, CheckoutOverviewDeliveryEditComponent as ɵfl, CheckoutOverviewDeliveryAddressComponent as ɵfm, CheckoutOverviewPaymentComponent as ɵfn, CheckoutLoginComponent as ɵfo, TransactionFilterCategoriesModule as ɵfp, TransactionFilterCategoriesComponent as ɵfq, TransactionHeaderPaymentModule as ɵfr, TransactionHeaderPaymentComponent as ɵfs, TransactionLinesGridModule as ɵft, TransactionBaseGridModule as ɵfu, TransactionLineSidePanelModule as ɵfv, TransactionLineSidePanelDefaultModule as ɵfw, TransactionLinePriceModule as ɵfx, TransactionLinePriceComponent as ɵfy, TransactionLinePriceListModule as ɵfz, TransactionConnectorAdapterService as ɵg, TransactionLinePriceListComponent as ɵga, TransactionFilterPopupBaseComponent as ɵgb, TransactionLineVatModule as ɵgc, TransactionLineVatComponent as ɵgd, TransactionLineQuantityModule as ɵge, TransactionLineQuantityComponent as ɵgf, TransactionLineLineDiscountModule as ɵgg, TransactionLineLineDiscountComponent as ɵgh, TransactionLineDeliveryMethodModule as ɵgi, TransactionLineDeliveryMethodComponent as ɵgj, TransactionLineDeliveryDateModule as ɵgk, TransactionLineDeliveryDateComponent as ɵgl, TransactionLineReferenceModule as ɵgm, TransactionLineReferenceComponent as ɵgn, TransactionLineCommissionCodeModule as ɵgo, TransactionLineCommissionCodeComponent as ɵgp, TransactionLineWarehouseModule as ɵgq, TransactionLineWarehouseComponent as ɵgr, TransactionLineDiscountAmountModule as ɵgs, TransactionLineDiscountAmountComponent as ɵgt, TransactionLineQuantumDiscountModule as ɵgu, TransactionLineQuantumDiscountComponent as ɵgv, TransactionLineSpecialDiscountModule as ɵgw, TransactionLineSpecialDiscountComponent as ɵgx, TransactionLineSupplierModule as ɵgy, TransactionLineSupplierComponent as ɵgz, SelectMultipleCacheService as ɵh, TransactionLineSidePanelDefaultComponent as ɵha, TransactionReceivingGoodsHistoryModule as ɵhb, TransactionHistoryGridModule as ɵhc, TransactionHistoryGridStatusModule as ɵhd, TransactionHistoryGridStatusComponent as ɵhe, TransactionHistoryGridComponent as ɵhf, TransactionReceivingGoodsHistoryComponent as ɵhg, TransactionReceivingGoodsDetailsModule as ɵhh, TransactionReceivingGoodsDetailsComponent as ɵhi, ArticleService as ɵhj, TransactionButtonBarModule as ɵhk, AnimatedCheckboxModule as ɵhl, AnimatedCheckboxComponent as ɵhm, TransactionButtonBarComponent as ɵhn, TransactionButtonBarButtonComponent as ɵho, TransactionButtonBarButtonBaseComponent as ɵhp, TransactionSalesPurchaseButtonBarButtonComponent as ɵhq, TransactionLineSidePanelPurchaseModule as ɵhr, DefaultOkCancelButtonsModule as ɵhs, DefaultOkCancelButtonsComponent as ɵht, TransactionLineSidePanelPurchaseComponent as ɵhu, TransactionLineSidePanelComponent as ɵhv, DynamicBaseComponent as ɵhw, TransactionLineActionButtonsModule as ɵhx, TransactionArticleTextOverviewModule as ɵhy, TransactionArticleTextOverviewComponent as ɵhz, BusinessObjectCacheManagerService as ɵi, TransactionLineActionButtonsComponent as ɵia, TransactionBaseGridComponent as ɵib, TransactionGridBaseComponent as ɵic, DialogTransactionLineCommissionCodeModule as ɵid, DialogTransactionLineCommissionCodeComponent as ɵie, DialogTransactionLineBaseComponent as ɵif, DialogTransactionLineWarehouseModule as ɵig, DialogTransactionLineWarehouseComponent as ɵih, DialogTransactionLineWarehouseCcModule as ɵii, DialogTransactionLineWarehouseCcComponent as ɵij, DialogTransactionLineDeliveryMethodModule as ɵik, DialogTransactionLineDeliveryMethodComponent as ɵil, DialogTransactionLineVatModule as ɵim, DialogTransactionLineVatComponent as ɵin, DialogTransactionLineDiscountModule as ɵio, DialogTransactionLinePriceListModule as ɵip, DialogTransactionLinePriceListComponent as ɵiq, DialogTransactionLineDiscountComponent as ɵir, TransactionLinesGridComponent as ɵis, DiscountModule as ɵit, DiscountComponent as ɵiu, TransactionQuickAccessOverviewModule as ɵiv, TransactionQuickAccessOverviewComponent as ɵiw, TransactionQuickAccessOrderDeliveryModule as ɵix, TransactionSendButtonDialogModule as ɵiy, TransactionSendButtonDialogComponent as ɵiz, CacheField as ɵj, TransactionQuickAccessOrderDeliveryComponent as ɵja, TransactionQuickAccessOrderPurchaseModule as ɵjb, TransactionQuickAccessOrderPurchaseComponent as ɵjc, TransactionOrderConfirmationGridModule as ɵjd, TransactionOrderConfirmationGridComponent as ɵje, TransactionReceivedGoodsGridModule as ɵjf, DialogTransactionLineWarehouseLocationModule as ɵjg, TransactionLineWarehouseLocationModule as ɵjh, TransactionLineWarehouseLocationComponent as ɵji, DialogTransactionLineWarehouseLocationComponent as ɵjj, TransactionLineWarehouseLocationButtonModule as ɵjk, TransactionLineWarehouseLocationButtonComponent as ɵjl, TransactionReceivedGoodsGridComponent as ɵjm, ViewModeButtonsModule as ɵjn, ViewModeButtonsComponent as ɵjo, TransactionGridModule as ɵjp, TransactionGridComponent as ɵjq, TransactionTileModule as ɵjr, TransactionTileComponent as ɵjs, TransactionOverviewLineModule as ɵjt, EditableLabelModule as ɵju, EditableLabelComponent as ɵjv, TransactionBaseLineModule as ɵjw, TransactionBaseLineComponent as ɵjx, TransactionLinesLineBaseComponent as ɵjy, TransactionLineCommissionButtonModule as ɵjz, SelectMultipleParameterizedCacheService as ɵk, TransactionLineCommissionButtonComponent as ɵka, TransactionLineWarehouseButtonModule as ɵkb, TransactionLineWarehouseButtonComponent as ɵkc, TransactionLineDeliveryButtonModule as ɵkd, TransactionLineDeliveryButtonComponent as ɵke, TransactionLineDeliveryDateButtonModule as ɵkf, TransactionLineDeliveryDateButtonComponent as ɵkg, TransactionLineAmountModule as ɵkh, TransactionLineAmountComponent as ɵki, TransactionOverviewLineComponent as ɵkj, TransactionOrderDeliveryLineModule as ɵkk, TransactionOrderDeliveryLineComponent as ɵkl, TransactionReceiveGoodsLineModule as ɵkm, TransactionReceiveGoodsLineComponent as ɵkn, TransactionPurchaseLineModule as ɵko, TransactionLineSupplierButtonModule as ɵkp, DialogTransactionLineSupplierModule as ɵkq, DialogTransactionLineSupplierComponent as ɵkr, TransactionLineSupplierButtonComponent as ɵks, TransactionPurchaseLineComponent as ɵkt, TransactionSearchResultModule as ɵku, TransactionSearchSalesOrderTileModule as ɵkv, TransactionSearchSalesOrderTileComponent as ɵkw, TransactionSearchTileBaseComponent as ɵkx, TransactionSearchPurchaseOrderTileModule as ɵky, TransactionSearchPurchaseOrderTileComponent as ɵkz, ErrorService as ɵl, TransactionSearchSalesOrderGridModule as ɵla, TransactionSearchSalesOrderGridComponent as ɵlb, TransactionSearchGridBaseComponent as ɵlc, TransactionSearchPurchaseOrderGridModule as ɵld, TransactionSearchPurchaseOrderGridComponent as ɵle, TransactionSearchHeaderModule as ɵlf, TransactionSearchHeaderComponent as ɵlg, TransactionSearchGridModule as ɵlh, TransactionSearchGridComponent as ɵli, TransactionSearchTileModule as ɵlj, TransactionSearchTileComponent as ɵlk, TransactionSearchResultComponent as ɵll, TransactionSalesOrderFilterModule as ɵlm, TransactionSalesOrderFilterContentOrderModule as ɵln, TransactionFilterItemModule as ɵlo, TransactionFilterItemComponent as ɵlp, TransactionSalesOrderFilterContentOrderComponent as ɵlq, TransactionFilterContentBaseComponent as ɵlr, FilterRequestService as ɵls, TransactionSalesOrderFilterContentLogisticsModule as ɵlt, TransactionFilterHistoricStateModule as ɵlu, TransactionFilterHistoricStateComponent as ɵlv, TransactionSalesOrderFilterContentLogisticsComponent as ɵlw, TransactionSalesOrderFilterContentArticleModule as ɵlx, TransactionSalesOrderFilterContentArticleComponent as ɵly, TransactionSalesOrderFilterComponent as ɵlz, SelectSingleCacheService as ɵm, TransactionFilterBaseComponent as ɵma, TransactionPurchaseOrderFilterModule as ɵmb, TransactionPurchaseOrderFilterContentOrderModule as ɵmc, TransactionPurchaseOrderFilterContentOrderComponent as ɵmd, TransactionPurchaseOrderFilterContentLogisticsModule as ɵme, TransactionPurchaseOrderFilterContentLogisticsComponent as ɵmf, TransactionPurchaseOrderFilterContentArticleModule as ɵmg, TransactionPurchaseOrderFilterContentArticleComponent as ɵmh, TransactionPurchaseOrderFilterComponent as ɵmi, TransactionFilterModule as ɵmj, TransactionFilterComponent as ɵmk, ArticleConnectorService as ɵn, TransactionEventService as ɵo, CoreModule as ɵp, ConfirmationDialogModule as ɵq, PipeModule as ɵr, AppendPipe as ɵs, DeliveryTimePipe as ɵt, DateDurationPipe as ɵu, LocalizePipe as ɵv, CoCurrencyPipe as ɵw, SafeStylePipe as ɵx, SafeHtmlPipe as ɵy, ConfirmationDialogComponent as ɵz };
 //# sourceMappingURL=colijnit-transaction.js.map