@colijnit/transaction 12.1.15 → 12.1.16

package/fesm2015/colijnit-transaction.js

@@ -7,7 +7,7 @@ import { SequenceName } from '@colijnit/transactionapi/build/enum/sequence-name.
 import { TransactionKind } from '@colijnit/transactionapi/build/enum/transaction-kind.enum';
 import { TransactionLineType } from '@colijnit/transactionapi/build/enum/transaction-line-type.enum';
 import { NULL_CUSTOMER_FULL_OBJECT, NULL_RELATION_OBJECT, NULL_RELATION_LIST_OBJECT } from '@colijnit/transactionapi/build/model/nul-relation-object';
-import { BehaviorSubject, throwError } from 'rxjs';
+import { BehaviorSubject, throwError, Subject } from 'rxjs';
 import { TransactionInfoResponse } from '@colijnit/transactionapi/build/model/transaction-info-response.bo';
 import { CustomerFullObject } from '@colijnit/transactionapi/build/model/customer-full-object.bo';
 import { RelationPrivacySetting } from '@colijnit/transactionapi/build/model/relation-privacy-setting.bo';
@@ -42,9 +42,10 @@ import { Tag } from '@colijnit/transactionapi/build/model/tag';
 import { OnHoldCode } from '@colijnit/transactionapi/build/model/on-hold-code.bo';
 import { Warehouse } from '@colijnit/transactionapi/build/model/warehouse.bo';
 import { CodeDescription } from '@colijnit/transactionapi/build/model/code-description';
+import { GoodsReceiptStatusWithHistory } from '@colijnit/transactionapi/build/model/goods-receipt-status-with-history.bo';
 import { RelationStatus } from '@colijnit/transactionapi/build/enum/relation-status.enum';
 import { ResolveLinePendingReasonRequest } from '@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo';
-import { FormMasterService, FormComponent, CoDialogModule, ButtonModule, InputComboBoxModule, InputTextModule, FormModule, InputRadioButtonModule, IconModule, InputCheckboxModule, InputListboxModule, DropDownModule, InputNumberPickerModule, PriceDisplayPipeModule, InputDatePickerModule, CoDialogPromptModule, MultiSelectListModule, PopupModule, CoSidebarModule, CoGridModule, CoRichTextEditorModule, Carousel3dModule, InputTextareaModule, CollapsibleModule, ColumnAlign, SimpleGridColumnDirective, InputTextComponent, SimpleGridModule, InputSearchModule, FilterItemModule, InputDateRangePickerModule } from '@colijnit/corecomponents_v12';
+import { FormMasterService, FormComponent, CoDialogModule, ButtonModule, InputComboBoxModule, InputTextModule, FormModule, InputRadioButtonModule, IconModule, InputCheckboxModule, InputListboxModule, DropDownModule, InputNumberPickerModule, PriceDisplayPipeModule, InputDatePickerModule, CoDialogPromptModule, MultiSelectListModule, PopupModule, CoSidebarModule, CoGridModule, CoRichTextEditorModule, Carousel3dModule, InputTextareaModule, CollapsibleModule, ColumnAlign, SimpleGridColumnDirective, InputTextComponent, SimpleGridModule, GridToolbarButtonModule, InputSearchModule, FilterItemModule, InputDateRangePickerModule } from '@colijnit/corecomponents_v12';
 import { FlexModule } from '@angular/flex-layout';
 import { CommunicationType } from '@colijnit/transactionapi/build/enum/communication-type.enum';
 import { ContactOption } from '@colijnit/transactionapi/build/model/contact-option.bo';
@@ -56,14 +57,26 @@ import { Address } from '@colijnit/transactionapi/build/model/address.bo';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { TransactionAddTextLineRequest } from '@colijnit/transactionapi/build/model/transaction-add-text-line-request.bo';
 import { StockStatus } from '@colijnit/transactionapi/build/enum/refcode/stock-status.enum';
 import { RelationRequest } from '@colijnit/transactionapi/build/model/relation-request';
+import { Sharedapi } from '@colijnit/sharedapi/build/sharedapi';
+import { CoDocument } from '@colijnit/sharedapi/build/model/co-document.bo';
+import { PaymentMethod } from '@colijnit/transactionapi/build/model/payment-method.bo';
+import { KeyPadModule } from '@colijnit/sharedcomponents';
 import { DiscountType } from '@colijnit/transactionapi/build/enum/discount-type.enum';
+import { ReceiveGoodsForPurchaseOrderCorrectionRequest } from '@colijnit/transactionapi/build/model/receive-goods-for-purchase-order-correction-request.bo';
+import { PurchaseOrderLineReceiptCorrectionDetails } from '@colijnit/transactionapi/build/model/purchase-order-line-receipt-correction-details.bo';
+import { PurchaseOrderLineReceiptDetails } from '@colijnit/transactionapi/build/model/purchase-order-line-receipt-details.bo';
+import { ReceiveGoodsForPurchaseOrderRequest } from '@colijnit/transactionapi/build/model/receive-goods-for-purchase-order-request.bo';
+import { Articles } from '@colijnit/articleapi/build/articles';
+import { StockLocation } from '@colijnit/articleapi/build/model/stock-location.bo';
+import { GoodsReceiptStatus } from '@colijnit/transactionapi/build/model/goods-receipt-status.bo';
 import { TransactionSearchViewRequest } from '@colijnit/transactionapi/build/model/transaction-search-view-request';
+import { RelationKind } from '@colijnit/transactionapi/build/enum/relation-kind.enum';
 
 var LanguageCode;
 (function (LanguageCode) {
@@ -144,6 +157,7 @@ class Dictionary {
                 "ACCOUNT_DETAILS": "Accountgegevens",
                 "ACCOUNT_EXPLANATION": "Het e-mailadres en wachtwoord zijn nodig om toegang te krijgen tot de gegevens. " +
                     "Ook zullen we je via dit e-mailadres op de hoogte houden van de status van bestellingen.",
+                "ACTIVE": "Actief",
                 "ADD_ARTICLE_LINE_UP": "Artikelregel boven toevoegen",
                 "ADD_ARTICLE_LINE_DOWN": "Artikelregel onder toevoegen",
                 "ADD_ARTICLE_TEXT_LINE_UP": "Tekstregel boven toevoegen",
@@ -206,6 +220,7 @@ class Dictionary {
                 "CUSTOMER_NAME": "Klantnaam",
                 "DATE": "Datum",
                 "DATE_OF_BIRTH": "Geboortedatum",
+                "DEFINITIVE": "Definitief",
                 "DELETE_TRANSACTION_LINE": "verwijderen",
                 "DELETE_TRANSACTION_LINE_HINT": "Verwijderen transactieregel",
                 "DELETE_TRANSACTION_LINE_FAILED": "Het verwijderen van de transactieregel is mislukt",
@@ -218,6 +233,7 @@ class Dictionary {
                 "DELIVERY_COSTS": "Bezorgkosten",
                 "DELIVERY_DATA": "Levergegevens",
                 "DELIVERY_DATE": "Leverdatum",
+                "DELIVERY_DATE_DEFINITIVE": "Leverdatum definitief",
                 "DELIVERY_DATE_FINAL": "Definitieve leverdatum",
                 "DELIVERY_DIRECT": "Direct leverbaar",
                 "DELIVERY_LOCATION": "Bezorgingslocatie",
@@ -250,6 +266,7 @@ class Dictionary {
                 "FABRICATION_COST_LINE_TOTAL": "Fabricageprijs regeltotaal",
                 "FEMALE": "Vrouw",
                 "FIRST_NAME": "Voornaam",
+                "FREE": "Gratis",
                 "GROSS_PRICE": "Bruto prijs",
                 "GOOD_DESCRIPTION": "Artikelomschrijving",
                 "HANDLED_BY": "Verkoper",
@@ -305,6 +322,7 @@ class Dictionary {
                 "ORDER_RULESET": "Orderregelset",
                 "ORDER_TOTAL": "Ordertotaal",
                 "ORDER_TYPE": "Type bestelling",
+                "ORDERED": "Besteld",
                 "OTHER": "Overig",
                 "OVERVIEW": "Overzicht",
                 "OWN_REFERENCE": "Eigen referentie",
@@ -315,6 +333,7 @@ class Dictionary {
                 "PASSWORD": "Wachtwoord",
                 "PAY": "Betalen",
                 "PAYMENT": "Betaling",
+                "PAYMENT_METHOD": "Betaalmethode",
                 "PERSONAL_DATA": "Basisgegevens",
                 "PICKED": "Gepickt",
                 "PHONE_NO": "Telefoonnummer",
@@ -354,6 +373,8 @@ class Dictionary {
                 "SEARCH_IN_COLLECTION": "Zoek binnen collectie...",
                 "SEARCH_ADD_ARTICLE": "Zoeken en toevoegen artikel",
                 "SELECT": "Selecteren",
+                "SELECT_A": "Selecteer een",
+                "SELECT_CASH_REGISTER": "Selecteer kassa",
                 "SELECT_DATE": "Selecteer een start- en einddatum",
                 "SERIAL_NUMBER": "Serienummer",
                 "SERVICE_NUMBER": "Servicenummer",
@@ -378,13 +399,15 @@ class Dictionary {
                 "STREET": "Straatnaam",
                 "TAGS": "Tags",
                 "TEXT_ARTICLE_BOUND": "Text bij artikel |~",
+                "TO_REPORT_IN": 'Binnen te melden',
                 "TO_BE_PICKED": "Te picken",
                 "TO_DELIVER": "Te leveren",
+                "TO_PAY": "Te betalen",
                 "TOTAL_AMOUNT": "Totaalbedrag",
                 "TOTAL_ASSEMBLY_TIME": "Totale montagetijd",
                 "TOTAL_GROSS": "Totaal bruto",
                 "TOTAL_LINE_DISCOUNT": "Totale regelkorting",
-                "TRANSACTION_DATE": "Transactiedatum",
+                "TRANSACTION_DATE": "Orderdatum",
                 "TRANSACTION_DISCOUNT": "Totale transactie korting",
                 "TRANSACTION_DISCOUNT_PERC": "% Trans. korting",
                 "TRANSACTION_PRICE_DECLARATION": "Order prijsverklaring",
@@ -414,6 +437,7 @@ class Dictionary {
             "en": {
                 "ACCOUNT_DETAILS": "Account details",
                 "ACCOUNT_EXPLANATION": "E-mailaddress and password are needed to gain access to the data. We also notify you on this e-mailaddress about the order status",
+                "ACTIVE": "Active",
                 "ADD_ARTICLE_LINE_UP": "Add article line up",
                 "ADD_ARTICLE_LINE_DOWN": "Add article line down",
                 "ADD_ARTICLE_TEXT_LINE_UP": "Add text line up",
@@ -474,6 +498,7 @@ class Dictionary {
                 "CUSTOMER_NAME": "Customer name",
                 "DATE": "Date",
                 "DATE_OF_BIRTH": "Date of birth",
+                "DEFINITIVE": "Definitive",
                 "DELETE_TRANSACTION_LINE": "Delete transaction line verwijderen?",
                 "DELETE_TRANSACTION_LINE_HINT": "Delete transaction line",
                 "DELETE_TRANSACTION_LINE_FAILED": "Deletion of transaction line has failed",
@@ -485,6 +510,7 @@ class Dictionary {
                 "DELIVERY_COSTS": "Delivery costs",
                 "DELIVERY_DATA": "Deliverydata",
                 "DELIVERY_DATE": "Delivery date",
+                "DELIVERY_DATE_DEFINITIVE": "Delivery date definitive",
                 "DELIVERY_DATE_FINAL": "Final delivery date",
                 "DELIVERY_DIRECT": "Direct delivery",
                 "DELIVERY_LOCATION": "Delivery location",
@@ -516,6 +542,7 @@ class Dictionary {
                 "FABRICATION_COST_LINE_TOTAL": "Fabricationcost linetotal",
                 "FEMALE": "Female",
                 "FIRST_NAME": "First name",
+                "FREE": "Free",
                 "GOOD_DESCRIPTION": "Article description",
                 "GROSS_PRICE": "Gross price",
                 "HANDLED_BY": "Handled by",
@@ -571,6 +598,7 @@ class Dictionary {
                 "ORDER_RULESET": "Orderruleset",
                 "ORDER_TOTAAL": "Order total",
                 "ORDER_TYPE": "Order type",
+                "ORDERED": "Ordered",
                 "OTHER": "Other",
                 "OVERVIEW": "Overview",
                 "OWN_REFERENCE": "Own reference",
@@ -581,6 +609,7 @@ class Dictionary {
                 "PASSWORD": "Password",
                 "PAY": "Pay",
                 "PAYMENT": "Payment",
+                "PAYMENT_METHOD": "Payment method",
                 "PERSONAL_DATA": "Personal data",
                 "PHONE_NO": "Telephone number",
                 "PLANNING": "Planning",
@@ -611,6 +640,8 @@ class Dictionary {
                 "SEARCH_ADD_ARTICLE": "Search and add article",
                 "SEARCH_IN_COLLECTION": "Search in collection...",
                 "SELECT": "Select",
+                "SELECT_A": "Select a",
+                "SELECT_CASH_REGISTER": "Select cash register",
                 "SELECT_DATE_RANGE": "Select a date range",
                 "SERIAL_NUMBER": "Serial number",
                 "SERVICE_NUMBER": "Service number",
@@ -634,8 +665,10 @@ class Dictionary {
                 "STATE": "STATUS",
                 "STREET": "Streetname",
                 "TAGS": "Tags",
+                "TO_REPORT_IN": 'To report in',
                 "TO_BE_PICKED": "Te be picked",
                 "TO_DELIVER": "To deliver",
+                "TO_PAY": "To pay",
                 "TOTAL_AMOUNT": "Total amount",
                 "TOTAL_ASSEMBLY_TIME": "Total assembly time",
                 "TOTAL_GROSS": "Gross total",
@@ -742,6 +775,7 @@ DictionaryService.ctorParameters = () => [];
 class OptionsService {
     constructor(_dictionary) {
         this._dictionary = _dictionary;
+        this.optionsInitialized = new BehaviorSubject(false);
         this.optionsLoaded = new BehaviorSubject(false);
     }
     set options(value) {
@@ -788,6 +822,7 @@ class OptionsService {
             if (options) {
                 yield this.createSettingsFromObject(options);
                 yield this._dictionary.setDictionary(this.options.languageCode);
+                this.optionsInitialized.next(true);
             }
         });
     }
@@ -1497,7 +1532,7 @@ CollectionCacheService.decorators = [
             },] }
 ];
 
-class IOneConnectorAdapterService {
+class TransactionConnectorService {
     constructor(_optionsService, _collectionService) {
         this._optionsService = _optionsService;
         this._collectionService = _collectionService;
@@ -2425,14 +2460,58 @@ class IOneConnectorAdapterService {
             }
         });
     }
+    getGoodsReceiptStatus(transId, lineNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.connector.getGoodsReceiptStatus(transId, lineNr);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(GoodsReceiptStatusWithHistory, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    getGoodsReceiptStatusWithHistory(transId, lineNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.connector.getGoodsReceiptStatusWithHistory(transId, lineNr);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(GoodsReceiptStatusWithHistory, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    receiveGoodsForPurchaseOrder(request) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.connector.receiveGoodsForPurchaseOrder(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    receiveGoodsForPurchaseOrderCorrection(request) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.connector.receiveGoodsForPurchaseOrderCorrection(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
 }
-IOneConnectorAdapterService.ɵprov = i0.ɵɵdefineInjectable({ factory: function IOneConnectorAdapterService_Factory() { return new IOneConnectorAdapterService(i0.ɵɵinject(OptionsService), i0.ɵɵinject(CollectionCacheService)); }, token: IOneConnectorAdapterService, providedIn: "root" });
-IOneConnectorAdapterService.decorators = [
+TransactionConnectorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionConnectorService_Factory() { return new TransactionConnectorService(i0.ɵɵinject(OptionsService), i0.ɵɵinject(CollectionCacheService)); }, token: TransactionConnectorService, providedIn: "root" });
+TransactionConnectorService.decorators = [
     { type: Injectable, args: [{
                 providedIn: "root"
             },] }
 ];
-IOneConnectorAdapterService.ctorParameters = () => [
+TransactionConnectorService.ctorParameters = () => [
     { type: OptionsService },
     { type: CollectionCacheService }
 ];
@@ -2715,7 +2794,7 @@ class PendingReasonService {
         });
     }
 }
-PendingReasonService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PendingReasonService_Factory() { return new PendingReasonService(i0.ɵɵinject(DialogService), i0.ɵɵinject(OptionsService), i0.ɵɵinject(IOneConnectorAdapterService)); }, token: PendingReasonService, providedIn: "root" });
+PendingReasonService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PendingReasonService_Factory() { return new PendingReasonService(i0.ɵɵinject(DialogService), i0.ɵɵinject(OptionsService), i0.ɵɵinject(TransactionConnectorService)); }, token: PendingReasonService, providedIn: "root" });
 PendingReasonService.decorators = [
     { type: Injectable, args: [{
                 providedIn: "root"
@@ -2724,7 +2803,7 @@ PendingReasonService.decorators = [
 PendingReasonService.ctorParameters = () => [
     { type: DialogService },
     { type: OptionsService },
-    { type: IOneConnectorAdapterService }
+    { type: TransactionConnectorService }
 ];
 
 class TransactionService extends PendingReasonService {
@@ -3207,6 +3286,26 @@ class TransactionService extends PendingReasonService {
     //   const response: boolean = await this.connector.setRelationByUser(this.currentTransaction.uuid, username, password);
     //   return response;
     // }
+    getGoodsReceiptStatus(transId, lineNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.connector.getGoodsReceiptStatus(transId, lineNr);
+        });
+    }
+    getGoodsReceiptStatusWithHistory(transId, lineNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.connector.getGoodsReceiptStatusWithHistory(transId, lineNr);
+        });
+    }
+    receiveGoodsForPurchaseOrder(request) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.connector.receiveGoodsForPurchaseOrder(request);
+        });
+    }
+    receiveGoodsForPurchaseOrderCorrection(request) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.connector.receiveGoodsForPurchaseOrderCorrection(request);
+        });
+    }
     getTextTypes(languageCode) {
         return this.connector.getTextTypes(languageCode);
     }
@@ -3216,17 +3315,14 @@ class TransactionService extends PendingReasonService {
     getArticleFullObject(goodId) {
         return this.connector.getArticleFullObject(goodId);
     }
-    getDocumentContent(id) {
-        return this.connector.getDocumentContent(id);
-    }
     getGoodIdFromArticleNr(sku) {
         return this.connector.getGoodIdFromArticleNr(sku);
     }
     getCountry(countryCode) {
         return this.connector.getCountry(countryCode);
     }
-    getCashRegisters() {
-        return this.connector.getCashRegisters(undefined, 1);
+    getCashRegisters(branch, group) {
+        return this.connector.getCashRegisters(branch, group);
     }
     getRelationNumber(relationId) {
         return this.connector.getRelationNumber(relationId);
@@ -3285,7 +3381,7 @@ class TransactionService extends PendingReasonService {
         });
     }
 }
-TransactionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionService_Factory() { return new TransactionService(i0.ɵɵinject(DialogService), i0.ɵɵinject(OptionsService), i0.ɵɵinject(IOneConnectorAdapterService)); }, token: TransactionService, providedIn: "root" });
+TransactionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionService_Factory() { return new TransactionService(i0.ɵɵinject(DialogService), i0.ɵɵinject(OptionsService), i0.ɵɵinject(TransactionConnectorService)); }, token: TransactionService, providedIn: "root" });
 TransactionService.decorators = [
     { type: Injectable, args: [{
                 providedIn: "root"
@@ -3313,7 +3409,7 @@ class CheckoutComponent {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.checkoutRelation && this.stepRelation) {
                 const valid = this.checkoutRelation.submit();
-                this.stepRelation.completed = yield this.saveRelation();
+                this.stepRelation.completed = true; // await this.saveRelation();
                 // if (valid) {
                 //   this.saveRelation();
                 // }
@@ -3324,7 +3420,7 @@ class CheckoutComponent {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.checkoutDelivery && this.stepDelivery) {
                 const valid = this.checkoutDelivery.submit();
-                this.stepDelivery.completed = yield this.handleSaveDelivery();
+                this.stepDelivery.completed = true; // await this.handleSaveDelivery();
                 // if (valid) {
                 //   this.handleSaveDelivery();
                 // }
@@ -3382,12 +3478,13 @@ CheckoutComponent.decorators = [
                                             [transaction]="service.currentTransaction"
         ></co-checkout-overview-delivery-edit>
       </co-stepper-step>
-      <co-stepper-step #stepPayment [index]="3" [label]="'PAYMENT' | localize" (validateStep)="handlePaymentValidation()">
-        <co-payment #checkoutPayment *ngIf="stepPayment.show" [amount]="service.currentTransaction.transactionTotal.netAmount"></co-payment>
-      </co-stepper-step>
       <co-stepper-step #stepOverview [index]="4" [label]="'OVERVIEW' | localize" (validateStep)="handleOverviewValidation()">
       </co-stepper-step>
-      <co-stepper-step #stepPay [index]="5" [label]="'PAY' | localize">
+      <co-stepper-step #stepPayment [index]="3" [label]="'PAYMENT' | localize" (validateStep)="handlePaymentValidation()">
+        <co-payment #checkoutPayment *ngIf="stepPayment.show"
+                    [transactionUuid]="service.currentTransaction.transactionInfo.uuid"
+                    [amount]="service.currentTransaction.transactionTotal.netAmount"
+        ></co-payment>
       </co-stepper-step>
       <div class="co-checkout-right-panel">
         <div class="co-checkout-right-panel-relation">
@@ -3428,6 +3525,7 @@ var Icon;
     Icon["Article"] = "article";
     Icon["Barcode"] = "barcode";
     Icon["BarcodeSolid"] = "barcode_solid";
+    Icon["BarsFilter"] = "bars_filter";
     Icon["CalendarDay"] = "calendar_day";
     Icon["Cancel"] = "cancel";
     Icon["CartFlatbedBoxesSolid"] = "cart_flatbed_boxes_solid";
@@ -3452,6 +3550,7 @@ var Icon;
     Icon["Tag"] = "tag";
     Icon["ThickLines"] = "thick_lines";
     Icon["ThinLines"] = "thin_lines";
+    Icon["TrashBin"] = "trash_bin";
     Icon["TriangleDown"] = "triangle_down";
     Icon["TriangleUp"] = "triangle_up";
     Icon["Truck"] = "truck";
@@ -3989,6 +4088,7 @@ const IconSvg = {
     "article": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M37.43,15.14H12.57A2.57,2.57,0,0,0,10,17.71V32.29a2.57,2.57,0,0,0,2.57,2.57H37.43A2.57,2.57,0,0,0,40,32.29V17.71A2.57,2.57,0,0,0,37.43,15.14ZM14.29,32.71H12.15V17.29h2.14Zm2,0H15V17.29h1.29Zm2.57,0H17.54V17.29h1.29Zm3.52,0H20.2V17.29h2.15Zm2,0H23.11V17.29H24.4Zm2.06,0H25.17V17.29h1.29Zm2.66,0H27.83V17.29h1.29Zm3.51,0H31.34V17.29h1.29Zm3.34,0H33.4V17.29H36Zm2.32,0H37V17.29h1.29Z\" fill=\"#484f60\"/></svg>",
     "barcode": "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M2,6H4V18H2V6M5,6H6V18H5V6M7,6H10V18H7V6M11,6H12V18H11V6M14,6H16V18H14V6M17,6H20V18H17V6M21,6H22V18H21V6Z\" /></svg>",
     "barcode_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M40 32C53.25 32 64 42.75 64 56V456C64 469.3 53.25 480 40 480H24C10.75 480 0 469.3 0 456V56C0 42.75 10.75 32 24 32H40zM128 48V464C128 472.8 120.8 480 112 480C103.2 480 96 472.8 96 464V48C96 39.16 103.2 32 112 32C120.8 32 128 39.16 128 48zM200 32C213.3 32 224 42.75 224 56V456C224 469.3 213.3 480 200 480H184C170.7 480 160 469.3 160 456V56C160 42.75 170.7 32 184 32H200zM296 32C309.3 32 320 42.75 320 56V456C320 469.3 309.3 480 296 480H280C266.7 480 256 469.3 256 456V56C256 42.75 266.7 32 280 32H296zM448 56C448 42.75 458.7 32 472 32H488C501.3 32 512 42.75 512 56V456C512 469.3 501.3 480 488 480H472C458.7 480 448 469.3 448 456V56zM384 48C384 39.16 391.2 32 400 32C408.8 32 416 39.16 416 48V464C416 472.8 408.8 480 400 480C391.2 480 384 472.8 384 464V48z\"/></svg>",
+    "bars_filter": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M264 392H183.1C170.8 392 160 402.8 160 415.1C160 429.2 170.8 440 183.1 440h80C277.2 440 288 429.2 288 416C288 402.8 277.2 392 264 392zM424 72H23.1C10.8 72 0 82.8 0 95.1S10.8 120 23.1 120H424c13.2 0 24-10.8 24-23.1S437.2 72 424 72zM360 232H87.1C74.8 232 64 242.8 64 255.1C64 269.2 74.8 280 87.1 280h272C373.2 280 384 269.2 384 256C384 242.8 373.2 232 360 232z\"/></svg>",
     "calendar_day": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 50 50\" enable-background=\"new 0 0 50 50\" ><g><path fill=\"#022D42\" d=\"M35.4,13.7H14.6c-0.6,0-1,0.5-1,1V20h22.9v-5.2C36.4,14.2,36,13.7,35.4,13.7z M19,18.8c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8c1,0,1.8,0.8,1.8,1.8C20.8,18,20,18.8,19,18.8z M31,18.8c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8C32.7,18,32,18.8,31,18.8z\"/><path fill=\"#022D42\" d=\"M35.4,22.3v12.6L31.3,39H14.6c0,0,0,0,0,0V22.3H35.4 M36.4,21.3H13.6V39c0,0.6,0.5,1,1,1h17.2l4.7-4.7V21.3L36.4,21.3z\"/><rect x=\"18.2\" y=\"10\" fill=\"#022D42\" width=\"1.6\" height=\"5.2\"/><rect x=\"30.2\" y=\"10\" fill=\"#022D42\" width=\"1.6\" height=\"5.2\"/><rect x=\"18.6\" y=\"30.5\" fill=\"#022D42\" width=\"3.4\" height=\"3.4\"/><rect x=\"19.1\" y=\"24.8\" opacity=\"0.1\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"19.1\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"19.1\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"22.2\" y=\"24.8\" opacity=\"0.1\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"22.2\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"22.2\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"22.2\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"25.4\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"25.4\" y=\"24.8\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"25.4\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"25.4\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"31.6\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"31.6\" y=\"24.8\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"31.6\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"28.5\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"28.5\" y=\"24.8\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"28.5\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"28.5\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"16\" y=\"24.8\" opacity=\"0.1\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"16\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"16\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"16\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/></g></svg>",
     "cancel": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"36 35.16 30.45 35.16 14 14.84 19.55 14.84 36 35.16\" fill=\"#484f60\"/><polygon points=\"14 35.16 19.55 35.16 36 14.84 30.45 14.84 14 35.16\" fill=\"#484f60\"/></svg>",
     "cart_flatbed_boxes_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\"><path d=\"M448 160h64c17.6 0 32-14.4 32-32V64c0-17.6-14.4-32-32-32h-64c-17.6 0-32 14.4-32 32v64C416 145.6 430.4 160 448 160zM448 320h128c17.6 0 32-14.4 32-32V224c0-17.6-14.4-32-32-32h-128c-17.6 0-32 14.4-32 32v64C416 305.6 430.4 320 448 320zM224 320h128c17.6 0 32-14.4 32-32V64c0-17.6-14.4-32-32-32H224C206.4 32 192 46.4 192 64v224C192 305.6 206.4 320 224 320zM640 415.1c0 17.6-14.4 32-32 31.1l-66.88-.0011c1.787 5.027 2.907 10.36 2.907 16c0 26.51-21.5 48-48.01 48c-26.51 0-47.99-21.49-47.99-48c0-5.641 1.141-10.97 2.928-16H253.1C254.9 453 256 458.4 256 464C256 490.5 234.5 512 208 512S160 490.5 160 464c0-5.641 1.13-10.97 2.917-16l-66.92 .0011C78.4 448 64 433.6 64 415.1V80C64 71.16 56.84 64 48 64H31.1C14.4 64 0 49.6 0 32S14.4 0 31.1 0H64c35.2 0 64 28.8 64 64v320h480C625.6 384 640 398.4 640 415.1z\"/></svg>",
@@ -4013,6 +4113,7 @@ const IconSvg = {
     "tag": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M40,29.15v-.68a5.28,5.28,0,0,0-1.34-3.25L24.78,11.34A5.34,5.34,0,0,0,21.53,10H11.9A1.91,1.91,0,0,0,10,11.9v9.63a5.28,5.28,0,0,0,1.34,3.25L25.22,38.66A5.28,5.28,0,0,0,28.47,40h.68a5.28,5.28,0,0,0,3.24-1.34l6.27-6.27A5.28,5.28,0,0,0,40,29.15ZM13.13,16.72a2.54,2.54,0,1,1,3.59,0A2.55,2.55,0,0,1,13.13,16.72Zm15.9,19L17.84,24.55l1.34-1.34L30.37,34.4Zm2.69-2.69L20.52,21.87l1.35-1.35,11.19,11.2Zm2.68-2.69L23.21,19.18l1.34-1.34L35.75,29Z\" fill=\"#484f60\"/></svg>",
     "thick_lines": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"10\" y=\"12.67\" width=\"30\" height=\"7\" fill=\"#484f60\"/><rect x=\"10\" y=\"21.67\" width=\"30\" height=\"7\" fill=\"#484f60\"/><rect x=\"10\" y=\"30.67\" width=\"30\" height=\"7\" fill=\"#484f60\"/></svg>",
     "thin_lines": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"10\" y=\"14.17\" width=\"30\" height=\"4\" fill=\"#484f60\"/><rect x=\"10\" y=\"20.17\" width=\"30\" height=\"4\" fill=\"#484f60\"/><rect x=\"10\" y=\"26.17\" width=\"30\" height=\"4\" fill=\"#484f60\"/><rect x=\"10\" y=\"32.17\" width=\"30\" height=\"4\" fill=\"#484f60\"/></svg>",
+    "trash_bin": "<svg preserveAspectRatio=\"none\" version=\"1.1\" viewBox=\"0 0 50 50\" x=\"0px\" xmlns=\"http://www.w3.org/2000/svg\" y=\"0px\"><g transform=\" translate(14 10)\"><path d=\"M 0 0 L 0 18.215 C 0 19.99 1.439 21.429 3.215 21.429 L 15 21.429 C 16.775 21.429 18.215 19.99 18.215 18.215 L 18.215 0 L 0 0 Z M 4.287 19.286 L 2.143 19.286 L 2.143 2.143 L 4.287 2.143 L 4.287 19.286 Z M 10.18 19.286 L 8.037 19.286 L 8.037 2.143 L 10.18 2.143 L 10.18 19.286 Z M 16.072 19.286 L 13.93 19.286 L 13.93 2.143 L 16.072 2.143 L 16.072 19.286 Z\" fill=\"#1E2930\" transform=\" translate(1.891 8.571)\" /><path d=\"M 18.213 2.143 L 10.713 2.143 C 11.305 2.143 11.785 1.664 11.785 1.071 C 11.785 0.479 11.305 0 10.713 0 L 9.643 0 C 9.051 0 8.57 0.479 8.57 1.071 C 8.57 1.664 9.051 2.143 9.643 2.143 L 2.143 2.143 C 0.959 2.143 0 3.103 0 4.286 L 0 5.357 C 0 6.541 0.959 6.429 2.143 6.429 L 18.213 6.429 C 19.397 6.429 20.357 6.541 20.357 5.357 L 20.357 4.286 C 20.357 3.103 19.397 2.143 18.213 2.143 Z\" fill=\"#1E2930\" transform=\" translate(0.821 0)\" /></g></svg>",
     "triangle_down": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"29.06 18.75 37.5 18.75 25 31.25 12.5 18.75 20.95 18.75 29.06 18.75\" fill=\"#484f60\"/></svg>",
     "triangle_up": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"20.94 31.25 12.5 31.25 25 18.75 37.5 31.25 29.05 31.25 20.94 31.25\" fill=\"#484f60\"/></svg>",
     "truck": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"10\" y=\"14.75\" width=\"17.47\" height=\"12.62\" fill=\"#484f60\"/><path d=\"M37,18.11h-8V28.84H20.22a4.42,4.42,0,0,1,1.41,2.73H30a4.41,4.41,0,0,1,8.76,0H40V24.63Zm-.26,6.73H32.25a.57.57,0,0,1-.57-.57V20a.57.57,0,0,1,.57-.58h2.63a.58.58,0,0,1,.52.35L37.31,24A.58.58,0,0,1,36.78,24.84Z\" fill=\"#484f60\"/><path d=\"M14.28,28.84a4.39,4.39,0,0,0-1.42,2.73H12l-2-1.26V28.84Z\" fill=\"#484f60\"/><path d=\"M31.25,32.1a3.16,3.16,0,1,0,3.16-3.16A3.16,3.16,0,0,0,31.25,32.1Z\" fill=\"#484f60\"/><path d=\"M14.09,32.1a3.16,3.16,0,1,0,3.16-3.16A3.15,3.15,0,0,0,14.09,32.1Z\" fill=\"#484f60\"/></svg>",
@@ -4629,7 +4730,7 @@ CustomerGroupsComponent.decorators = [
             },] }
 ];
 CustomerGroupsComponent.ctorParameters = () => [
-    { type: IOneConnectorAdapterService }
+    { type: TransactionConnectorService }
 ];
 CustomerGroupsComponent.propDecorators = {
     required: [{ type: Input }],
@@ -5193,7 +5294,7 @@ RelationAddressComponent.decorators = [
 ];
 RelationAddressComponent.ctorParameters = () => [
     { type: DictionaryService },
-    { type: IOneConnectorAdapterService },
+    { type: TransactionConnectorService },
     { type: FormMasterService }
 ];
 RelationAddressComponent.propDecorators = {
@@ -5801,14 +5902,14 @@ class TransactionImageService {
         });
     }
 }
-TransactionImageService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionImageService_Factory() { return new TransactionImageService(i0.ɵɵinject(IOneConnectorAdapterService)); }, token: TransactionImageService, providedIn: "root" });
+TransactionImageService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionImageService_Factory() { return new TransactionImageService(i0.ɵɵinject(TransactionConnectorService)); }, token: TransactionImageService, providedIn: "root" });
 TransactionImageService.decorators = [
     { type: Injectable, args: [{
                 providedIn: "root"
             },] }
 ];
 TransactionImageService.ctorParameters = () => [
-    { type: IOneConnectorAdapterService }
+    { type: TransactionConnectorService }
 ];
 
 class TransactionLineComponent {
@@ -6471,9 +6572,87 @@ ShoppingCartPreviewModule.decorators = [
             },] }
 ];
 
+class SharedConnectorService {
+    constructor(_optionsService) {
+        this._optionsService = _optionsService;
+        this._boFactory = new BusinessObjectFactory();
+    }
+    connect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.connector = new Sharedapi(this._optionsService.options);
+        });
+    }
+    selectDocsByTableKey(table, key) {
+        return new Promise((resolve, reject) => {
+            return this.connector.selectDocsByTableKey(table, key).then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(CoDocument, result.resultObjects));
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
+    }
+    getDocumentContent(id, thumbnail = true) {
+        return new Promise((resolve, reject) => {
+            return this.connector.getDocumentContent(id, thumbnail).then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(result.resultObject.documentContent);
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
+    }
+}
+SharedConnectorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SharedConnectorService_Factory() { return new SharedConnectorService(i0.ɵɵinject(OptionsService)); }, token: SharedConnectorService, providedIn: "root" });
+SharedConnectorService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+SharedConnectorService.ctorParameters = () => [
+    { type: OptionsService }
+];
+
+class SharedService {
+    constructor(_optionsService, _connector) {
+        this._optionsService = _optionsService;
+        this._connector = _connector;
+        this._subs = [];
+        this._subs.push(this._optionsService.optionsLoaded.subscribe((loaded) => {
+            if (loaded) {
+                this._connector.connect();
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+    selectDocsByTableKey(table, key) {
+        return this._connector.selectDocsByTableKey(table, key);
+    }
+    getDocumentContent(docId, thumbnail = true) {
+        return this._connector.getDocumentContent(docId, thumbnail);
+    }
+}
+SharedService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SharedService_Factory() { return new SharedService(i0.ɵɵinject(OptionsService), i0.ɵɵinject(SharedConnectorService)); }, token: SharedService, providedIn: "root" });
+SharedService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+SharedService.ctorParameters = () => [
+    { type: OptionsService },
+    { type: SharedConnectorService }
+];
+
 class AvatarComponent {
-    constructor(_service) {
-        this._service = _service;
+    constructor(_transactionService, _sharedService) {
+        this._transactionService = _transactionService;
+        this._sharedService = _sharedService;
     }
     set relationId(value) {
         this._relationId = value;
@@ -6489,11 +6668,11 @@ class AvatarComponent {
         if (!isNaN(this._relationId)) {
             const request = new RelationRequest();
             request.relationId = this._relationId;
-            this._service.getRelationListObjects(request).then((data) => {
+            this._transactionService.getRelationListObjects(request).then((data) => {
                 if (data && data.length > 0) {
                     this.relation = data[0];
                     if (this.relation && this.relation.image && this.relation.image.documentId) {
-                        this._service.getDocumentContent(this.relation.image.documentId)
+                        this._sharedService.getDocumentContent(this.relation.image.documentId)
                             .then((content) => {
                             this.image = content;
                         })
@@ -6521,7 +6700,8 @@ AvatarComponent.decorators = [
             },] }
 ];
 AvatarComponent.ctorParameters = () => [
-    { type: TransactionService }
+    { type: TransactionService },
+    { type: SharedService }
 ];
 AvatarComponent.propDecorators = {
     relationId: [{ type: Input }],
@@ -6602,102 +6782,1208 @@ DeliveryTypeTileModule.decorators = [
             },] }
 ];
 
-class PaymentComponent {
-    constructor(_transactionService) {
-        this._transactionService = _transactionService;
-        this.icons = Icon;
-        this.amount = 0;
-        this.paymentMethodIdx = 0;
-        this.paymentMethods = [
-            { icon: this.icons.Truck, description: 'Contant' },
-            { icon: this.icons.IdealLogo, description: 'iDeal' },
-            { icon: this.icons.Truck, description: 'Creditcard' },
-            { icon: this.icons.Truck, description: 'Overschrijving' }
-        ];
-        this.cashRegisters = [];
+class IOneConnectorAdapterService {
+    constructor(_optionsService, _collectionService) {
+        this._optionsService = _optionsService;
+        this._collectionService = _collectionService;
+        this._boFactory = new BusinessObjectFactory();
+        this._countryList = [];
     }
-    showClass() {
-        return true;
+    connect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.connector = new Transaction(this._optionsService.options);
+        });
     }
-    ngOnInit() {
-        this._getCashRegisters();
+    getArticleFullObject(goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getArticleFullObject(goodId).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObject) {
+                            resolve(this._boFactory.makeWithRawBackendData(ArticleFullObject, result.resultObject));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
     }
-    _getCashRegisters() {
-        this._transactionService.getCashRegisters().then((cashRegisters) => {
-            this.cashRegisters = cashRegisters;
+    getGoodIdFromArticleNr(articleNr) {
+        return new Promise((resolve, reject) => {
+            return this.connector.getGoodIdFromArticleNr(articleNr).then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(result.resultObject);
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
         });
     }
-}
-PaymentComponent.decorators = [
-    { type: Component, args: [{
-                selector: "co-payment",
-                template: `
-    <div class="payment-wrapper">
-      <div class="payment-methods-header">
-        <span class="payment-header-title" [textContent]="'Selecteer een' | localize"></span>
-        <span class="payment-header-title extra" [textContent]="'gratis' | localize:false"></span>
-        <span class="payment-header-title" [textContent]="'betaalmethode' | localize:false"></span>
-      </div>
-      <div class="payment-methods">
-        <co-payment-tile *ngFor="let paymentMethod of paymentMethods; let index = index"
-                         [icon]="paymentMethod.icon"
-                         [description]="paymentMethod.description"
-                         [selected]="paymentMethodIdx === index"
-                         (selectedChange)="paymentMethodIdx = index"
-        ></co-payment-tile>
-      </div>
-      <div class="payment-cash-register-header">
-        <span class="payment-header-title" [textContent]="'Selecteer kassa' | localize"></span>
-      </div>
-      <div class="payment-methods">
-        <co-payment-tile *ngFor="let cashRegister of cashRegisters"
-                         [icon]="cashRegister.icon"
-                         [description]="cashRegister.description"
-        ></co-payment-tile>
-      </div>
-      <div class="payment-to-pay">
-        <div [textContent]="'Te betalen' | localize"></div>
-        <div class="payment-amount" [textContent]="amount | priceDisplay"></div>
-      </div>
-    </div>
-  `,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-PaymentComponent.ctorParameters = () => [
-    { type: TransactionService }
-];
-PaymentComponent.propDecorators = {
-    amount: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-payment",] }]
-};
-
-class PaymentTileComponent {
-    constructor() {
-        this.selected = false;
-        this.selectedChange = new EventEmitter();
+    getSingleImage(nodeId, publication, includeMimetype, thumb) {
+        return new Promise((resolve, reject) => {
+            return this.connector.getSingleImage(nodeId, publication, includeMimetype, thumb).then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    if (result.resultObject && result.resultObject.filePath !== null && result.resultObject.filePath !== undefined && result.resultObject.filePath !== "") {
+                        return resolve(ImageUtils.getFixedImageFilepathUrl(result.resultObject.filePath));
+                    }
+                    else {
+                        if (result.resultObject) {
+                            if (includeMimetype) {
+                                return resolve(ImageUtils.getDocBodyWithMimeTypeDefinition(result.resultObject.fileName, thumb ? result.resultObject.thumbnailBody : result.resultObject.documentBody));
+                            }
+                            return resolve(thumb ? result.resultObject.thumbnailBody : result.resultObject.documentBody);
+                        }
+                        else { // no image
+                            resolve("");
+                        }
+                    }
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
     }
-    showClass() {
-        return true;
+    getCountries() {
+        if (this._countryList.length > 0) {
+            return new Promise((resolve) => {
+                resolve(this._countryList);
+            });
+        }
+        return new Promise((resolve, reject) => {
+            return this.connector.getCountries().then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    this._countryList = result.resultObjects;
+                    resolve(result.resultObjects);
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
     }
-}
-PaymentTileComponent.decorators = [
-    { type: Component, args: [{
-                selector: "co-payment-tile",
-                template: `
-    <co-tile [selected]="selected" (selectedChange)="selectedChange.emit($event)">
-      <div class="payment-tile-wrapper">
-        <icon class="payment-tile-icon" [icon]="icon"></icon>
-        <span class="payment-tile-description" [textContent]="description | localize"></span>
-      </div>
-    </co-tile>
-  `,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-PaymentTileComponent.propDecorators = {
-    selected: [{ type: Input }],
+    getCustomerGroups() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.connector.getCustomerGroups();
+            if (response && response.validationResult && response.validationResult.success) {
+                return response.resultObjects;
+            }
+            else {
+                return [];
+            }
+        });
+    }
+    getCountry(countryCode) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.getCountries();
+            return this._countryList.find(country => country.code === countryCode);
+        });
+    }
+    getPrivacySettings() {
+        return new Promise((resolve, reject) => {
+            return this.connector.getPrivacySettings().then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(result.resultObjects);
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
+    }
+    getRelationPrivacySettings() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const privacySettings = [];
+            const basePrivacySettings = yield this.getPrivacySettings();
+            for (let i = 0, len = basePrivacySettings.length; i < len; i++) {
+                const basePrivSetting = basePrivacySettings[i];
+                const newRelPrivSet = this._boFactory.instantiateNewBo(RelationPrivacySetting);
+                newRelPrivSet.applyBasePrivacySettingValues(basePrivSetting);
+                privacySettings.push(newRelPrivSet);
+            }
+            return privacySettings;
+        });
+    }
+    getMarketingCodes() {
+        return new Promise((resolve, reject) => {
+            return this.connector.getMarketingCodes().then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(result.resultObjects);
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
+    }
+    createTransaction(kind, branchNr) {
+        return new Promise((resolve, reject) => {
+            return this.connector.createTransaction(kind, branchNr).then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
+    }
+    getArticleBoundTextLinesOfArticleLine(articleLineUuid) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = yield this.connector.getArticleBoundTextLinesOfArticleLine(articleLineUuid);
+            if (result.validationResult && result.validationResult.success) {
+                return this._boFactory.makeBOArrayFromRawBackendDataArray(TransactionLineInfo, result.resultObject);
+            }
+            else {
+                return [];
+            }
+        });
+    }
+    getTransactionByNrAndKind(kind, transactionNo) {
+        return new Promise((resolve, reject) => {
+            return this.connector.getTransactionByNrAndKind(kind, transactionNo).then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
+    }
+    getTransactionById(transactionId) {
+        return new Promise((resolve, reject) => {
+            return this.connector.getTransactionById(transactionId).then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
+    }
+    commit() {
+        return this.connector.commit();
+    }
+    saveTransaction(uuid) {
+        return new Promise((resolve, reject) => {
+            return this.connector.saveTransaction(uuid).then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
+    }
+    getCustomerFullObject(relationNo) {
+        return new Promise((resolve, reject) => {
+            return this.connector.getCustomerFullObject(relationNo).then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(this._boFactory.makeWithRawBackendData(CustomerFullObject, result.resultObject));
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
+    }
+    getCashRegisters(branch, group) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.connector.getCashRegister(branch, group);
+            if (response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeBOArrayFromRawBackendDataArray(CashRegister, response.resultObjects);
+            }
+            else {
+                return [];
+            }
+        });
+    }
+    getRelationNumber(relationId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getRelationNumber(relationId).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(result.resultObject);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getPriceLists(code) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.connector.getPriceLists(code);
+            if (response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeBOArrayFromRawBackendDataArray(PriceList, response.resultObjects);
+            }
+            else {
+                return []; // todo: handle error messages in a good way
+            }
+        });
+    }
+    getVatList(onlyValid = false) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.connector.getVatList(onlyValid);
+            if (response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeBOArrayFromRawBackendDataArray(Vat, response.resultObjects);
+            }
+            else {
+                return []; // todo: handle error messages in a good way
+            }
+        });
+    }
+    searchTransactions(request) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.connector.searchTransactions(request);
+            if (response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeBOArrayFromRawBackendDataArray(TransactionSearchView, response.resultObjects);
+            }
+            else {
+                return []; // todo: handle error messages in a good way
+            }
+        });
+    }
+    getSequenceValue(sequenceName) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getSequenceValue(sequenceName).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(result.resultObject);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    insertCustomer(relation) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.insertCustomer(relation).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(CustomerFullObject, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    updateCustomer(relation) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.updateCustomer(relation).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(CustomerFullObject, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getDeliveryMethods() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getDeliveryMethods().then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(DeliveryMethod, result.resultObjects));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getDeliveryOptions() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getDeliveryOptions().then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(DeliveryMethod, result.resultObjects));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    addRelationToTransaction(uuid, relationId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.addRelationToTransaction(uuid, relationId).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    setTransactionDeliveryOptions(transactionDeliveryOptionsRequest) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.setTransactionDeliveryOptions(transactionDeliveryOptionsRequest).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getPostalCodeRetrieval(postcalCode, houseNo) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getPostalCodeRetrieval(postcalCode, houseNo).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        const outputParams = new GetPostalCodeRetrievalOutputParams();
+                        outputParams.city = result.resultObject.city;
+                        outputParams.street = result.resultObject.street;
+                        outputParams.status = result.resultObject.status;
+                        outputParams.netNumber = result.resultObject.netNumber;
+                        resolve(outputParams);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getRelationListObjects(relationRequest) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getRelationListObjects(relationRequest).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(RelationListObject, result.resultObjects));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    addTransactionLine(uuid, articleLine, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.addTransactionLine(uuid, articleLine, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    addTextLineToTransaction(uuid, showOnDocuments, text, amount, articleBound, refArticleLineNr, aboveLineNr, belowLineNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.addTextLineToTransaction(uuid, showOnDocuments, text, amount, articleBound, refArticleLineNr, aboveLineNr, belowLineNr).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    changeLineSequence(uuid, lineUuid, aboveLineNr, belowLineNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                const request = {
+                    transactionUuid: uuid,
+                    lineUuid: lineUuid,
+                    aboveLineNr: aboveLineNr,
+                    belowLineNr: belowLineNr
+                };
+                return this.connector.changeLineSequence(request).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    cancelAddTransactionLine(lineUuid) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.cancelAddTransactionLine(lineUuid).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    deleteTransactionLine(uuid, lineUuid) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.deleteTransactionLine(uuid, lineUuid).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    changeTransactionLineQuantity(uuid, lineUuid, newQuantity) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                const request = {
+                    transactionUuid: uuid,
+                    lineUuid: lineUuid,
+                    newQuantity: newQuantity
+                };
+                return this.connector.changeTransactionLineQuantity(request).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    resolvePendingLineReason(pendingLineValues) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.resolvePendingLineReason(pendingLineValues).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getCommissionCodes(languageCode) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getCommissionCodes(languageCode).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(result.resultObjects);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getInOutCollection(languageCode) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getInOutCollection(languageCode).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(result.resultObjects);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getTransactionArticleWarehouses(goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getTransactionArticleWarehouses(goodId).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(result.resultObjects);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    setRelationByUser(uuid, username, password) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.setRelationByUser(uuid, username, password).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(result.validationResult.success);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getTextTypes(languageCode) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getTextTypes(languageCode).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        const texts = this._boFactory.makeBOArrayFromRawBackendDataArray(CoDomainValue, result.resultObjects);
+                        texts.sort((a, b) => a.sequence > b.sequence ? 1 : -1);
+                        resolve(texts);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getStandardTexts(languageCode) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getStandardTexts(languageCode).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(StandardText, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getBranches(branchNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getBranches(branchNr).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(BranchLov, result.resultObjects));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getSalesPersons(date) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getSalesPersons(date).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(SalesPerson, result.resultObjects));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getTags(category) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                const collection = this._collectionService.getCollection(Tag.name, [category]);
+                if (collection) {
+                    return resolve(collection);
+                }
+                return this.connector.getTags(category).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        const collection = this._boFactory.makeBOArrayFromRawBackendDataArray(Tag, result.resultObjects);
+                        this._collectionService.cacheCollection(Tag.name, collection, [category]);
+                        resolve(collection);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getOnHoldCodes() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                const collection = this._collectionService.getCollection(OnHoldCode.name);
+                if (collection) {
+                    return resolve(collection);
+                }
+                return this.connector.getOnHoldCodes().then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        const collection = this._boFactory.makeBOArrayFromRawBackendDataArray(OnHoldCode, result.resultObjects);
+                        this._collectionService.cacheCollection(OnHoldCode.name, collection);
+                        resolve(collection);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getWarehouses(branchNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getWarehouses(branchNr).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(Warehouse, result.resultObjects));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getHistoricStateValues() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                const result = this.connector.getHistoricStateValues();
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(CodeDescription, result.resultObjects));
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
+    }
+    getPaymentMethods() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                const result = yield this.connector.getPaymentMethods();
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(PaymentMethod, result.resultObjects));
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            }));
+        });
+    }
+    changeTransactionLineCommissionCode(uuid, lineUuid, code) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                lineUuid: lineUuid,
+                newCommissionCode: code
+            };
+            const response = yield this.connector.changeTransactionLineCommissionCode(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    changeTransactionLineWarehouse(uuid, lineUuid, warehouseNumber) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                lineUuid: lineUuid,
+                newWarehouseNumber: warehouseNumber
+            };
+            const response = yield this.connector.changeTransactionLineWarehouse(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    changeTransactionLinePrice(uuid, lineUuid, price) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                lineUuid: lineUuid,
+                newPrice: price
+            };
+            const response = yield this.connector.changeTransactionLinePrice(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    changeTransactionLinePriceList(uuid, lineUuid, priceList) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                lineUuid: lineUuid,
+                newPriceListCode: priceList
+            };
+            const response = yield this.connector.changeTransactionLinePriceList(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    changeTransactionLineVat(uuid, lineUuid, id) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                lineUuid: lineUuid,
+                newVatId: id
+            };
+            const response = yield this.connector.changeTransactionLineVat(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    changeTransactionLineLineDiscount(uuid, lineUuid, type, discount, reason, code) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                lineUuid: lineUuid,
+                discountType: type,
+                newDiscount: discount,
+                newDiscountReason: reason,
+                newDiscountCode: code
+            };
+            const response = yield this.connector.changeTransactionLineDiscount(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    changeTransactionLineDeliveryMethod(uuid, lineUuid, method) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                lineUuid: lineUuid,
+                newDeliveryMethodCode: method
+            };
+            const response = yield this.connector.changeTransactionLineDeliveryMethod(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    changeTransactionLineDeliveryDate(uuid, lineUuid, date) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                lineUuid: lineUuid,
+                newDeliveryDate: date
+            };
+            const response = yield this.connector.changeTransactionLineDeliveryDate(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    changeTransactionLineAssemblyTime(uuid, lineUuid, time) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                lineUuid: lineUuid,
+                newAssemblyTime: time
+            };
+            const response = yield this.connector.changeTransactionLineAssemblyTime(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    changeTransactionLineEditTime(uuid, lineUuid, time) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                lineUuid: lineUuid,
+                newEditTime: time
+            };
+            const response = yield this.connector.changeTransactionLineEditTime(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    changeTransactionLineSupplierArticleNumber(uuid, lineUuid, articleNumber) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                lineUuid: lineUuid,
+                newSupplierArticleNumber: articleNumber
+            };
+            const response = yield this.connector.changeTransactionLineSupplierArticleNumber(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    changeTransactionLineReference(uuid, lineUuid, reference) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                lineUuid: lineUuid,
+                newReference: reference
+            };
+            const response = yield this.connector.changeTransactionLineReference(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    changeHeaderTransactionDefinitive(uuid, definitive) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                newTransactionDefinitive: definitive
+            };
+            const response = yield this.connector.changeHeaderTransactionDefinitive(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    changeTransactionLineCollectionCode(uuid, lineUuid, code) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transactionUuid: uuid,
+                lineUuid: lineUuid,
+                newCollectionCode: code
+            };
+            const response = yield this.connector.changeTransactionLineCollectionCode(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                return this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    createOutstandingEntry(uuid, amount) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transUUID: uuid,
+                amount: amount
+            };
+            const response = yield this.connector.createOutstandingEntry(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                console.log(response);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+    registerSalesOrderPayment(uuid, amount, currencyCode, paymentMethod, cashRegisterGroupId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = {
+                transUUID: uuid,
+                amount: amount,
+                currencyCode: currencyCode,
+                paymentMethodCode: paymentMethod,
+                cashRegisterGroupId: cashRegisterGroupId
+            };
+            const response = yield this.connector.registerSalesOrderPayment(request);
+            if (response && response.validationResult && response.validationResult.success) {
+                console.log(response);
+            }
+            else {
+                return Promise.reject(response.validationMessagesAsString);
+            }
+        });
+    }
+}
+IOneConnectorAdapterService.ɵprov = i0.ɵɵdefineInjectable({ factory: function IOneConnectorAdapterService_Factory() { return new IOneConnectorAdapterService(i0.ɵɵinject(OptionsService), i0.ɵɵinject(CollectionCacheService)); }, token: IOneConnectorAdapterService, providedIn: "root" });
+IOneConnectorAdapterService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+IOneConnectorAdapterService.ctorParameters = () => [
+    { type: OptionsService },
+    { type: CollectionCacheService }
+];
+
+class PaymentService {
+    constructor(_connector) {
+        this._connector = _connector;
+    }
+    createOutstandingEntry(uuid, amount) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this._connector.createOutstandingEntry(uuid, amount)
+                .catch((error) => {
+                // todo: do something with the error
+                return false;
+            });
+            if (response) {
+                return true;
+            }
+            return false;
+        });
+    }
+    registerSalesOrderPayment(uuid, amount, currencyCode, paymentMethod, cashRegisterGroupId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this._connector.registerSalesOrderPayment(uuid, amount, currencyCode, paymentMethod, cashRegisterGroupId);
+            // .catch((error) => {
+            //   // todo: do something with the error
+            //   // return;
+            // });
+            if (response) {
+                return true;
+            }
+            return false;
+        });
+    }
+    getPaymentMethods() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this._connector.getPaymentMethods();
+        });
+    }
+}
+PaymentService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PaymentService_Factory() { return new PaymentService(i0.ɵɵinject(IOneConnectorAdapterService)); }, token: PaymentService, providedIn: "root" });
+PaymentService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+PaymentService.ctorParameters = () => [
+    { type: IOneConnectorAdapterService }
+];
+
+class PaymentViewmodel {
+    constructor(method) {
+        this.payment = method;
+    }
+}
+
+class PaymentComponent {
+    constructor(_transactionService, _sharedService, _paymentService) {
+        this._transactionService = _transactionService;
+        this._sharedService = _sharedService;
+        this._paymentService = _paymentService;
+        this.icons = Icon;
+        this.amount = 0;
+        this.paymentMethodIdx = 0;
+        this.cashRegisterIdx = 0;
+        this.paymentMethods = [];
+        this.cashRegisters = [];
+        this.showCashRegisters = false;
+        this.showKeyPad = false;
+    }
+    showClass() {
+        return true;
+    }
+    ngOnInit() {
+        this._paymentService.createOutstandingEntry(this.transactionUuid, this.amount).then(() => {
+            this._getPaymentMethods().then(() => {
+                this._prepareCashRegisters();
+            });
+        });
+    }
+    paymentMethodSelected(method, index) {
+        this.paymentMethodIdx = index;
+        this._prepareCashRegisters();
+    }
+    handlePayment() {
+        const currentPaymentMethod = this.paymentMethods[this.paymentMethodIdx];
+        const currentCashRegister = this.cashRegisters[this.cashRegisterIdx];
+        this._paymentService.registerSalesOrderPayment(this.transactionUuid, this.amount, this.currencyCode, currentPaymentMethod.payment.code, currentCashRegister.group).then(() => {
+            this.showKeyPad = false;
+        });
+    }
+    handleKeyPadModelChange(model) {
+        this.amount = model;
+        console.log(model);
+    }
+    /**
+     *
+     * @private
+     */
+    _prepareCashRegisters() {
+        const paymentMethod = this.paymentMethods[this.paymentMethodIdx].payment;
+        if (paymentMethod && !paymentMethod.externalSourceId) {
+            this.cashRegisters.length = 0;
+            paymentMethod.posGroups.forEach(crg => {
+                this._getCashRegisters(crg.branchNo, crg.id);
+            });
+            this.showCashRegisters = true;
+        }
+        else {
+            this.showCashRegisters = false;
+        }
+    }
+    _getCashRegisters(branch, group) {
+        this._transactionService.getCashRegisters(branch, group).then((cashRegisters) => {
+            this.cashRegisters.push(...cashRegisters);
+        });
+    }
+    _getPaymentMethods() {
+        this.paymentMethods.length = 0;
+        return this._paymentService.getPaymentMethods().then((methods) => {
+            methods.forEach((m) => __awaiter(this, void 0, void 0, function* () {
+                const paymentViewModel = new PaymentViewmodel(m);
+                const imageDocs = m.documents.filter(d => d.isImageDocument());
+                if (imageDocs && imageDocs.length) {
+                    const image = imageDocs[0];
+                    if (image.filePath) {
+                        paymentViewModel.image = image.filePath;
+                    }
+                    else {
+                        if (!image.thumbnailBody) {
+                            const content = yield this._sharedService.getDocumentContent(image.documentId);
+                            image.thumbnailBody = content;
+                        }
+                        paymentViewModel.image = image.thumbnailBodyAsDataUri;
+                    }
+                }
+                this.paymentMethods.push(paymentViewModel);
+            }));
+        });
+    }
+}
+PaymentComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-payment",
+                template: `
+    <div class="payment-wrapper">
+      <div class="payment-methods-header">
+        <span class="payment-header-title" [textContent]="'SELECT_A' | localize"></span>
+        <span class="payment-header-title extra" [textContent]="'FREE' | localize:false"></span>
+        <span class="payment-header-title" [textContent]="'PAYMENT_METHOD' | localize:false"></span>
+      </div>
+      <div class="payment-methods">
+        <co-payment-tile *ngFor="let paymentMethod of paymentMethods; let index = index"
+                         [image]="paymentMethod.image"
+                         [description]="paymentMethod.payment.description"
+                         [selected]="paymentMethodIdx === index"
+                         (selectedChange)="paymentMethodSelected(paymentMethod.payment, index)"
+        ></co-payment-tile>
+      </div>
+      <div class="payment-cash-register-wrapper" *ngIf="showCashRegisters">
+        <div class="payment-cash-register-header">
+          <span class="payment-header-title" [textContent]="'SELECT_CASH_REGISTER' | localize"></span>
+        </div>
+        <div class="payment-methods">
+          <co-payment-tile *ngFor="let cashRegister of cashRegisters; let index = index"
+                           [icon]="cashRegister.icon"
+                           [description]="cashRegister.description"
+                           [selected]="cashRegisterIdx === index"
+          ></co-payment-tile>
+        </div>
+      </div>
+      <div class="payment-to-pay-wrapper">
+        <div class="payment-to-pay">
+          <div [textContent]="'TO_PAY' | localize"></div>
+          <div class="payment-amount" [textContent]="amount | priceDisplay"></div>
+        </div>
+        <div class="payment-to-pay-button">
+            <co-button [label]="'PAY' | localize" (click)="handlePayment()"></co-button>
+        </div>
+        <co-key-pad class="payment-to-pay-keypad"
+          [showValue]="false"
+          [emitModelChangeOnEnter]="false"
+          [model]="amount"
+          (modelChange)="handleKeyPadModelChange($event)"
+          (enterClick)="handlePayment()"
+        ></co-key-pad>
+      </div>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+PaymentComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: SharedService },
+    { type: PaymentService }
+];
+PaymentComponent.propDecorators = {
+    transactionUuid: [{ type: Input }],
+    amount: [{ type: Input }],
+    currencyCode: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-payment",] }]
+};
+
+class PaymentTileComponent {
+    constructor() {
+        this.selected = false;
+        this.selectedChange = new EventEmitter();
+    }
+    showClass() {
+        return true;
+    }
+}
+PaymentTileComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-payment-tile",
+                template: `
+    <co-tile [selected]="selected" (selectedChange)="selectedChange.emit($event)">
+      <div class="payment-tile-wrapper">
+        <icon *ngIf="icon" class="payment-tile-icon" [icon]="icon"></icon>
+        <img *ngIf="image" class="payment-tile-image" [src]="image"/>
+        <span class="payment-tile-description" [textContent]="description | localize"></span>
+      </div>
+    </co-tile>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+PaymentTileComponent.propDecorators = {
+    selected: [{ type: Input }],
     icon: [{ type: Input }],
+    image: [{ type: Input }],
     description: [{ type: Input }],
     selectedChange: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-payment-tile",] }]
@@ -6731,7 +8017,10 @@ PaymentModule.decorators = [
                     CoreModule,
                     PipeModule,
                     PaymentTileModule,
-                    PriceDisplayPipeModule
+                    PriceDisplayPipeModule,
+                    KeyPadModule,
+                    CoDialogModule,
+                    ButtonModule
                 ],
                 declarations: [
                     PaymentComponent
@@ -6873,22 +8162,11 @@ var ContentViewMode;
     ContentViewMode[ContentViewMode["Tiles"] = 5] = "Tiles";
 })(ContentViewMode || (ContentViewMode = {}));
 
-var TabCategory;
-(function (TabCategory) {
-    TabCategory[TabCategory["Overview"] = 0] = "Overview";
-    TabCategory[TabCategory["OrderConfirmation"] = 1] = "OrderConfirmation";
-    TabCategory[TabCategory["Transport"] = 2] = "Transport";
-    TabCategory[TabCategory["ReceivedGoods"] = 3] = "ReceivedGoods";
-    TabCategory[TabCategory["InvoiceCheck"] = 4] = "InvoiceCheck";
-    TabCategory[TabCategory["Menu"] = 5] = "Menu";
-})(TabCategory || (TabCategory = {}));
-
 class TransactionComponent {
     constructor(iconCacheService, _service) {
         this.iconCacheService = iconCacheService;
         this._service = _service;
         this.viewModes = ContentViewMode;
-        this.tabCategory = TabCategory;
         this.icons = Icon;
         this.showHeader = true;
         this.showQuickAccess = true;
@@ -6912,9 +8190,13 @@ class TransactionComponent {
     }
     set transactionId(value) {
         if (value) {
+            this._transactionId = value;
             this._service.getTransactionById(value).catch(() => { });
         }
     }
+    get transactionId() {
+        return this._transactionId;
+    }
     showClass() {
         return true;
     }
@@ -6978,6 +8260,7 @@ TransactionComponent.decorators = [
     <div class="transaction-lines-grid-wrapper" *ngIf="activeViewMode === viewModes.Grid">
       <co-transaction-grid
         [transactionLines]="transaction.transactionLines"
+        [transactionId]="transactionId"
         [transactionType]="transaction.transactionInfo.transactionKind"
         [activeCategory]="activeCategory"
         (sidePanelClicked)="handleShowSidePanel($event)"
@@ -7000,6 +8283,7 @@ TransactionComponent.decorators = [
                                     [transactionType]="transaction.transactionInfo.transactionKind"
                                     [activeCategory]="activeCategory"
                                     [transactionLine]="sidePanelTransactionLine"
+                                    [transactionId]="transactionId"
                                     (cancelClick)="handleCloseSidePanel($event)"
     ></co-transaction-line-side-panel>
   `,
@@ -7290,7 +8574,7 @@ TransactionHeaderDeliveryComponent.decorators = [
     </co-transaction-header-block>
     <ng-template #headerBlock>
       <div class="header-delivery-method">
-        <co-icon [iconData]="iconService.getIcon(icons.DeliveryTruck)"></co-icon>
+        <co-icon class="header-delivery-truck-icon" [iconData]="iconService.getIcon(icons.DeliveryTruck)"></co-icon>
         <span [textContent]="deliveryMethod?.description"></span>
       </div>
       <co-icon class="planning-request-button" [class.co-transaction-check]="transactionInfo.deliveryDateDefinitive"
@@ -7358,11 +8642,11 @@ TransactionHeaderOrderComponent.decorators = [
       [headerBlockTemplate]="headerBlock"
       [firstBlockTemplate]="firstBlock"
       [secondBlockTemplate]="secondBlock"
+      [thirdBlockTemplate]="thirdBlock"
     >
     </co-transaction-header-block>
     <ng-template #headerBlock>
       <div class="header-block-label" [textContent]="transactionInfo.branch?.familyName"></div>
-      <co-input-checkbox [model]="true"></co-input-checkbox>
     </ng-template>
     <ng-template #firstBlock>
       <span class="header-order-total-label co-transaction-label" [textContent]="'ORDER_TOTAL' | localize"></span>
@@ -7372,6 +8656,10 @@ TransactionHeaderOrderComponent.decorators = [
       <span class="header-order-line-amount-label co-transaction-label" [textContent]="'ORDER_LINES' | localize"></span>
       <div class="header-order-line-amount" [textContent]="transactionLines.length"></div>
     </ng-template>
+    <ng-template #thirdBlock>
+      <div class="header-order-definitive-label co-transaction-label" [textContent]="'DEFINITIVE' | localize"></div>
+      <co-input-checkbox [model]="true"></co-input-checkbox>
+    </ng-template>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -7401,9 +8689,16 @@ TransactionHeaderOrderModule.decorators = [
 ];
 
 class TransactionHeaderPaymentComponent extends TransactionBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.showPaymentDialog = false;
+    }
     showClass() {
         return true;
     }
+    openPayment() {
+        this.showPaymentDialog = true;
+    }
 }
 TransactionHeaderPaymentComponent.decorators = [
     { type: Component, args: [{
@@ -7417,7 +8712,7 @@ TransactionHeaderPaymentComponent.decorators = [
     </co-transaction-header-block>
     <ng-template #headerBlock>
       <div class="header-block-label" [textContent]="'BALANCE' | localize"></div>
-      <div class="header-block-balance">
+      <div class="header-block-balance" (click)="openPayment()">
         <span class="payment-paid" [textContent]="200 | priceDisplay"></span>
         <span class="payment-divider" [textContent]="'/'"></span>
         <span class="payment-to-pay" [textContent]="100 | priceDisplay"></span>
@@ -7431,6 +8726,16 @@ TransactionHeaderPaymentComponent.decorators = [
       <div class="header-downpayment-label co-transaction-label" [textContent]="'DOWNPAYMENT_AMOUNT' | localize"></div>
       <div class="header-downpayment" [textContent]="'NOT_IMPLEMENTED'"></div>
     </ng-template>
+    <co-dialog class="payment-dialog" *ngIf="showPaymentDialog"
+               [modal]="true"
+               (closeClick)="showPaymentDialog = false"
+    >
+      <co-payment
+        [transactionUuid]="transactionInfo.uuid"
+        [amount]="transactionTotal.netAmount"
+        [currencyCode]="transactionInfo.currencyId"
+      ></co-payment>
+    </co-dialog>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -7447,7 +8752,9 @@ TransactionHeaderPaymentModule.decorators = [
                     CommonModule,
                     TransactionHeaderBlockModule,
                     PipeModule,
-                    PriceDisplayPipeModule
+                    PriceDisplayPipeModule,
+                    CoDialogModule,
+                    PaymentModule
                 ],
                 declarations: [
                     TransactionHeaderPaymentComponent
@@ -7485,6 +8792,7 @@ class TransactionGridBaseComponent {
         this.icons = Icon;
         this.align = ColumnAlign;
         this.sidePanelClicked = new EventEmitter();
+        this.rowVisible = new EventEmitter();
         this.extraColumns = [];
         this._transactionLines = [];
     }
@@ -7521,8 +8829,10 @@ TransactionGridBaseComponent.ctorParameters = () => [
 ];
 TransactionGridBaseComponent.propDecorators = {
     content: [{ type: ContentChildren, args: [SimpleGridColumnDirective,] }],
+    transactionId: [{ type: Input }],
     transactionLines: [{ type: Input }],
-    sidePanelClicked: [{ type: Output }]
+    sidePanelClicked: [{ type: Output }],
+    rowVisible: [{ type: Output }]
 };
 
 class TransactionLinesGridComponent extends TransactionGridBaseComponent {
@@ -7609,7 +8919,12 @@ TransactionBaseGridComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-transaction-base-grid",
                 template: `
-    <co-simple-grid [data]="transactionLines" [extraColumns]="extraColumns" [dragDropEnabled]="true" [emitDragDrop]="true" (onDrop)="handleDrop($event)">
+    <co-simple-grid [data]="transactionLines"
+                    [extraColumns]="extraColumns"
+                    [dragDropEnabled]="true"
+                    [emitDragDrop]="true"
+                    (onDrop)="handleDrop($event)"
+                    (rowVisible)="rowVisible.next($event)">
       <co-simple-grid-column [headerText]="'DESCRIPTION' | localize" [width]="300" [order]="10">
         <ng-template #template let-row = "row">
           <div class="transaction-grid-article-description" [textContent]="row.goodDescription"></div>
@@ -7640,11 +8955,55 @@ TransactionBaseGridComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ['class.co-transaction-base-grid',] }]
 };
 
+var TransactionTypeCategory;
+(function (TransactionTypeCategory) {
+    TransactionTypeCategory["PurchaseOrderOverview"] = "purchaseOrderOverview";
+    TransactionTypeCategory["PurchaseOrderOrderConfirmation"] = "purchaseOrderOrderConfirmation";
+    TransactionTypeCategory["PurchaseOrderTransport"] = "purchaseOrderTransport";
+    TransactionTypeCategory["PurchaseOrderReceivedGoods"] = "purchaseOrderReceivedGoods";
+    TransactionTypeCategory["PurchaseOrderInvoiceCheck"] = "purchaseOrderInvoiceCheck";
+    TransactionTypeCategory["PurchaseOrderMenu"] = "purchaseOrderMenu";
+    TransactionTypeCategory["SalesOrderOverview"] = "salesOrderOverview";
+    TransactionTypeCategory["SalesOrderPurchase"] = "salesOrderPurchase";
+    TransactionTypeCategory["SalesOrderLogistics"] = "salesOrderLogistics";
+    TransactionTypeCategory["SalesOrderPlanning"] = "salesOrderPlanning";
+    TransactionTypeCategory["SalesOrderDeliveryNote"] = "salesOrderDeliveryNote";
+    TransactionTypeCategory["SalesOrderInvoice"] = "salesOrderInvoice";
+})(TransactionTypeCategory || (TransactionTypeCategory = {}));
+
+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.receivedPurchaseOrderCommit = new Subject();
+        this.commitReceivePurchaseOrders = new Subject();
+        this.transactionLineChanged = 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 TransactionLineSidePanelComponent {
-    constructor(iconService) {
+    constructor(iconService, _service, _transactionEventService) {
         this.iconService = iconService;
+        this._service = _service;
+        this._transactionEventService = _transactionEventService;
         this.icons = Icon;
-        this.tabCategory = TabCategory;
+        this.categories = TransactionTypeCategory;
         this.transactionTypes = TransactionKind;
         this.transactionLine = new TransactionLineInfo();
         this.cancelClick = new EventEmitter();
@@ -7677,8 +9036,10 @@ TransactionLineSidePanelComponent.decorators = [
       </div>
       <div class="side-panel-header-divider"></div>
       <div class="transaction-line-side-panel-header-item">
-        <span class="side-panel-header-label" [textContent]="'PRICE'| localize"></span>
-        <span class="side-panel-header-field" [textContent]="transactionLine.price | priceDisplay"></span>
+        <span class="side-panel-header-label"
+              [textContent]="activeCategory === categories.PurchaseOrderReceivedGoods ? ('TO_REPORT_IN' | localize) : ('PRICE' | localize)"></span>
+        <span class="side-panel-header-field"
+              [textContent]="activeCategory === categories.PurchaseOrderReceivedGoods ? quantityToReceive : (transactionLine.price | priceDisplay)"></span>
       </div>
       <icon (click)="handleCancelClick($event)" [icon]="icons.Cancel" class="close-button"></icon>
     </div>
@@ -7692,7 +9053,10 @@ TransactionLineSidePanelComponent.decorators = [
       <ng-container [ngSwitch]="transactionType">
         <ng-container *ngSwitchCase="transactionTypes.PurchaseOrder">
           <co-transaction-line-side-panel-purchase
+            [transactionLine]="transactionLine"
+            [transactionId]="transactionId"
             [category]="activeCategory"
+            (quantityToReceiveChange)="quantityToReceive = $event"
           ></co-transaction-line-side-panel-purchase>
         </ng-container>
         <ng-container *ngSwitchDefault>
@@ -7707,11 +9071,14 @@ TransactionLineSidePanelComponent.decorators = [
             },] }
 ];
 TransactionLineSidePanelComponent.ctorParameters = () => [
-    { type: IconCacheService }
+    { type: IconCacheService },
+    { type: TransactionService },
+    { type: TransactionEventService }
 ];
 TransactionLineSidePanelComponent.propDecorators = {
     transactionType: [{ type: Input }],
     transactionLine: [{ type: Input }],
+    transactionId: [{ type: Input }],
     activeCategory: [{ type: Input }],
     cancelClick: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-line-side-panel",] }]
@@ -8694,42 +10061,19 @@ TransactionLineSidePanelDefaultModule.decorators = [
             },] }
 ];
 
-class TransactionReceivingGoodsHistoryComponent {
-    constructor() {
-        this.transactionLines = [];
-    }
-    showClass() {
-        return true;
-    }
-}
-TransactionReceivingGoodsHistoryComponent.decorators = [
-    { type: Component, args: [{
-                selector: "co-transaction-receiving-goods-history",
-                template: `
-    <div class="history-grid-wrapper">
-      <co-transaction-history-grid [transactionLines]="transactionLines">
-        <co-simple-grid-column [headerText]="'WAREHOUSE' | localize" [field]="'warehouseNumber'" [order]="40"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'LOCATION' | localize" [field]="'warehouseLocation'" [order]="60"></co-simple-grid-column>
-      </co-transaction-history-grid>
-    </div>
-  `,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-TransactionReceivingGoodsHistoryComponent.propDecorators = {
-    transactionLines: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-transaction-receiving-goods-history",] }]
-};
-
 var StatusType;
 (function (StatusType) {
     StatusType["Unknown"] = "UNKNOWN";
+    StatusType["BG"] = "RECEIVED";
+    StatusType["BT"] = "ORDERED";
 })(StatusType || (StatusType = {}));
 
 class TransactionHistoryGridComponent {
-    constructor() {
-        this.tabCategory = TabCategory;
+    constructor(iconsService) {
+        this.iconsService = iconsService;
         this.statusType = StatusType;
+        this.icons = Icon;
+        this.deleteSelectedRow = new EventEmitter();
         this.extraColumns = [];
     }
     set content(columnComponents) {
@@ -8739,7 +10083,10 @@ class TransactionHistoryGridComponent {
         return true;
     }
     handleSelectRow(row) {
-        //
+        this.selectedRow = row;
+    }
+    handleDeleteClick() {
+        this.deleteSelectedRow.next(this.selectedRow);
     }
 }
 TransactionHistoryGridComponent.decorators = [
@@ -8747,36 +10094,59 @@ TransactionHistoryGridComponent.decorators = [
                 selector: "co-transaction-history-grid",
                 template: `
     <div class="history-grid-wrapper">
-      <co-simple-grid [data]="transactionLines" [extraColumns]="extraColumns" (selectRow)="handleSelectRow($event)">
-        <co-simple-grid-column [headerText]="'STATE' | localize" [field]="'status'" [order]="10">
+      <div class="delete-button-wrapper">
+        <co-grid-toolbar-button
+          (buttonClick)="handleDeleteClick()"
+          [iconData]="iconsService.getIcon(icons.TrashBin)"
+          [disabled]="!selectedRow"
+        ></co-grid-toolbar-button>
+      </div>
+      <co-simple-grid [data]="collection" [extraColumns]="extraColumns" (selectRow)="handleSelectRow($event)">
+        <co-simple-grid-column [headerText]="'STATE' | localize" [field]="'status'" [order]="10" [width]="150">
           <ng-template #template let-row="row">
-            <co-transaction-history-grid-status [statusType]="statusType.Unknown"></co-transaction-history-grid-status>
+            <co-transaction-history-grid-status [statusType]="row.status" [subType]="row.type"></co-transaction-history-grid-status>
           </ng-template>
         </co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'DELIVERY_DATE' | localize" [field]="'deliveryDate'" [order]="20"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'AMOUNT' | localize" [field]="'amount'" [order]="30"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'REFERENCE' | localize" [field]="'referenceNumber'" [order]="50"></co-simple-grid-column>
-        <co-simple-grid-column [headerText]="'USER' | localize" [field]="'user'" [order]="70"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DELIVERY_DATE' | localize" [field]="'receiptDate'" [order]="20" [width]="100"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AMOUNT' | localize" [field]="'quantity'" [order]="30" [width]="70"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'REFERENCE' | localize" [field]="'reference'" [order]="50"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'USER' | localize" [field]="'username'" [order]="70"></co-simple-grid-column>
       </co-simple-grid>
     </div>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
+TransactionHistoryGridComponent.ctorParameters = () => [
+    { type: IconCacheService }
+];
 TransactionHistoryGridComponent.propDecorators = {
     content: [{ type: ContentChildren, args: [SimpleGridColumnDirective,] }],
-    transactionLines: [{ type: Input }],
+    collection: [{ type: Input }],
+    deleteSelectedRow: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-history-grid",] }]
 };
 
 class TransactionHistoryGridStatusComponent {
+    constructor() {
+        this.type = StatusType;
+    }
     showClass() {
         return true;
     }
     _getStatusIndicatorColor() {
-        switch (this.statusType) {
+        switch (this.type[this.statusType]) {
             case StatusType.Unknown:
                 return '#dce4ea';
+            case StatusType.BG:
+                if (this.subType && this.subType === 'correction') {
+                    return '#f19826';
+                }
+                else {
+                    return '#48d521';
+                }
+            case StatusType.BT:
+                return '#f19826';
         }
     }
     ngAfterViewInit() {
@@ -8791,7 +10161,7 @@ TransactionHistoryGridStatusComponent.decorators = [
                 template: `
     <div class="transaction-status-indication">
       <div #statusIndicator class="status-color-circle"></div>
-      <span class="status-text" [textContent]="statusType | localize"></span>
+      <span class="status-text" [textContent]="type[statusType] | localize"></span>
     </div>
   `,
                 encapsulation: ViewEncapsulation.None
@@ -8799,6 +10169,7 @@ TransactionHistoryGridStatusComponent.decorators = [
 ];
 TransactionHistoryGridStatusComponent.propDecorators = {
     statusType: [{ type: Input }],
+    subType: [{ type: Input }],
     statusIndicator: [{ type: ViewChild, args: ["statusIndicator", { read: ElementRef },] }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-history-grid-status",] }]
 };
@@ -8830,7 +10201,8 @@ TransactionHistoryGridModule.decorators = [
                     CoreModule,
                     SimpleGridModule,
                     PipeModule,
-                    TransactionHistoryGridStatusModule
+                    TransactionHistoryGridStatusModule,
+                    GridToolbarButtonModule
                 ],
                 declarations: [
                     TransactionHistoryGridComponent
@@ -8841,6 +10213,74 @@ TransactionHistoryGridModule.decorators = [
             },] }
 ];
 
+class TransactionReceivingGoodsHistoryComponent {
+    constructor(_service, _datePipe) {
+        this._service = _service;
+        this._datePipe = _datePipe;
+        this.reloadReceivingGoodsHistory = new EventEmitter();
+    }
+    set goodsReceiptHistory(value) {
+        if (value) {
+            this._goodsReceiptHistory = value.reverse();
+        }
+    }
+    get goodsReceiptHistory() {
+        return this._goodsReceiptHistory.map((receipt) => {
+            receipt.receiptDate = this._datePipe.transform(receipt.receiptDate);
+            return receipt;
+        });
+    }
+    showClass() {
+        return true;
+    }
+    handleDeleteSelectedRow(row) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (row && row.type !== 'correction') {
+                const request = new ReceiveGoodsForPurchaseOrderCorrectionRequest();
+                const correctionDetails = new PurchaseOrderLineReceiptCorrectionDetails();
+                request.allowedToRemovePickedAllocations = false;
+                request.transId = this.transactionId;
+                request.purchaseOrderLineReceiptCorrectionDetailsDTOS = [correctionDetails];
+                correctionDetails.lineNr = this.transactionLine.lineNr;
+                correctionDetails.quantityToCorrect = row.quantity;
+                correctionDetails.documentId = row.documentId;
+                correctionDetails.documentLineNr = row.lineNumber;
+                yield this._service.receiveGoodsForPurchaseOrderCorrection(request).then(() => {
+                    this.reloadReceivingGoodsHistory.next();
+                });
+            }
+        });
+    }
+}
+TransactionReceivingGoodsHistoryComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-receiving-goods-history",
+                template: `
+    <co-transaction-history-grid
+      [collection]="goodsReceiptHistory"
+      (deleteSelectedRow)="handleDeleteSelectedRow($event)"
+    >
+      <co-simple-grid-column [headerText]="'WAREHOUSE' | localize" [field]="'warehouseNumber'"
+                             [order]="40"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LOCATION' | localize" [field]="'locationNumber'"
+                             [order]="60"></co-simple-grid-column>
+    </co-transaction-history-grid>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionReceivingGoodsHistoryComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: DatePipe }
+];
+TransactionReceivingGoodsHistoryComponent.propDecorators = {
+    goodsReceiptHistory: [{ type: Input }],
+    transactionLine: [{ type: Input }],
+    transactionId: [{ type: Input }],
+    reloadReceivingGoodsHistory: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-receiving-goods-history",] }]
+};
+
 class TransactionReceivingGoodsHistoryModule {
 }
 TransactionReceivingGoodsHistoryModule.decorators = [
@@ -8857,20 +10297,150 @@ TransactionReceivingGoodsHistoryModule.decorators = [
                 ],
                 exports: [
                     TransactionReceivingGoodsHistoryComponent
+                ],
+                providers: [
+                    DatePipe
                 ]
             },] }
 ];
 
+class ArticleConnectorService {
+    constructor(_optionsService, _collectionService) {
+        this._optionsService = _optionsService;
+        this._collectionService = _collectionService;
+        this._boFactory = new BusinessObjectFactory();
+        this._optionsService.optionsInitialized.subscribe((initialized) => {
+            if (initialized) {
+                this.connect();
+            }
+        });
+    }
+    connect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.connector = new Articles(this._optionsService.options);
+        });
+    }
+    getWarehouseLocations(warehouseNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                const collection = this._collectionService.getCollection(StockLocation.name, [warehouseNr]);
+                if (collection) {
+                    resolve(collection);
+                }
+                else {
+                    return this.connector.getStockManagementLocations(warehouseNr).then((response) => {
+                        if (response && response.validationResult && response.validationResult.success) {
+                            const collection = this._boFactory.makeBOArrayFromRawBackendDataArray(StockLocation, response.resultObjects);
+                            this._collectionService.cacheCollection(StockLocation.name, collection, [warehouseNr]);
+                            resolve(collection);
+                        }
+                        else {
+                            reject(response.validationMessagesAsString);
+                        }
+                    });
+                }
+            });
+        });
+    }
+}
+ArticleConnectorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ArticleConnectorService_Factory() { return new ArticleConnectorService(i0.ɵɵinject(OptionsService), i0.ɵɵinject(CollectionCacheService)); }, token: ArticleConnectorService, providedIn: "root" });
+ArticleConnectorService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+ArticleConnectorService.ctorParameters = () => [
+    { type: OptionsService },
+    { type: CollectionCacheService }
+];
+
+class ArticleService {
+    constructor(_articleConnectorService) {
+        this._articleConnectorService = _articleConnectorService;
+    }
+    getWarehouseLocations(warehouseNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._articleConnectorService.getWarehouseLocations(warehouseNr);
+        });
+    }
+}
+ArticleService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ArticleService_Factory() { return new ArticleService(i0.ɵɵinject(ArticleConnectorService)); }, token: ArticleService, providedIn: "root" });
+ArticleService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+ArticleService.ctorParameters = () => [
+    { type: ArticleConnectorService }
+];
+
 class TransactionReceivingGoodsDetailsComponent {
-    constructor() {
-        this.transactionLineInfo = new TransactionLineInfo();
+    constructor(_formMaster, _service, _articleService) {
+        this._formMaster = _formMaster;
+        this._service = _service;
+        this._articleService = _articleService;
+        this.reloadReceivingGoodsHistory = new EventEmitter();
+        this.receiptDetails = new PurchaseOrderLineReceiptDetails();
+        this.request = new ReceiveGoodsForPurchaseOrderRequest();
+        this.saveButtonDisabled = false;
+        this.locationDropdownFields = { text: "locationNo", value: "locationNo" };
+        this.request.purchaseOrderLineReceiptDetailsDTOS = [this.receiptDetails];
+        const timeElapsed = Date.now();
+        this.request.receivedDate = new Date(timeElapsed);
+    }
+    set amountLeftToReceive(value) {
+        this._amountLeftToReceive = value;
+        this.receiptDetails.quantityToReceive = value;
+    }
+    set transactionLine(value) {
+        this._transactionLine = value;
+        this.receiptDetails.warehouseNr = value.warehouseNumber;
+        this.receiptDetails.lineNr = value.lineNr;
     }
     showClass() {
         return true;
     }
+    get amountLeftToReceive() {
+        return this._amountLeftToReceive;
+    }
+    get transactionLine() {
+        return this._transactionLine;
+    }
+    submit() {
+        return this._formMaster.submitSlaves();
+    }
+    locationRequired() {
+        return this._transactionLine.isLocationRequired ||
+            this._transactionLine.isBatchNrRequired ||
+            this._transactionLine.isSerialNrRequired;
+    }
     handleSaveDetailsEdit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const valid = this.submit();
+            if (valid) {
+                this.saveButtonDisabled = true;
+                const request = this.request;
+                request.transId = this.transactionId;
+                yield this._service.receiveGoodsForPurchaseOrder(request).then((result) => __awaiter(this, void 0, void 0, function* () {
+                    this.reloadReceivingGoodsHistory.next();
+                })).catch((e) => {
+                    this.saveButtonDisabled = false;
+                });
+                this.saveButtonDisabled = false;
+            }
+        });
     }
     handleCancelDetailsEdit() {
+        // Velden resetten
+    }
+    handleDropDownSelected(warehouseNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.locations) {
+                yield this._articleService.getWarehouseLocations(warehouseNr).then((result) => {
+                    this.locations = result;
+                });
+            }
+        });
     }
 }
 TransactionReceivingGoodsDetailsComponent.decorators = [
@@ -8878,20 +10448,62 @@ TransactionReceivingGoodsDetailsComponent.decorators = [
                 selector: 'co-transaction-receiving-goods-details',
                 template: `
     <div class="receipt-details-wrapper">
-      <span class="details-header" [textContent]="'RECEIPT_DETAILS' | localize | uppercase"></span>
-      <div class="columns-wrapper">
-        <div class="details-column">
-          <co-input-text class="details-input" [(model)]="transactionLineInfo.amount" [placeholder]="'AMOUNT' | localize"></co-input-text>
-          <co-input-text class="details-input" [(model)]="transactionLineInfo.warehouseNumber" [placeholder]="'WAREHOUSE' | localize"></co-input-text>
-          <co-input-text class="details-input" [(model)]="valuePlaceholder" [placeholder]="'LOCATION' | localize"></co-input-text>
-        </div>
-        <div class="divider-wrapper"><div class="divider"></div></div>
-        <div class="details-column">
-          <co-input-text class="details-input" [(model)]="valuePlaceholder" [placeholder]="'BATCH_NUMBER' | localize"></co-input-text>
-          <co-input-text class="details-input" [(model)]="valuePlaceholder" [placeholder]="'SERIAL_NUMBER' | localize"></co-input-text>
-          <co-input-text class="details-input" [(model)]="transactionLineInfo.refLineNr" [placeholder]="'REFERENCE_ID' | localize"></co-input-text>
+      <co-form>
+        <div class="details-header" [textContent]="'RECEIPT_DETAILS' | localize | uppercase"></div>
+        <div class="columns-wrapper">
+          <div class="details-column">
+            <co-input-text class="details-input"
+                           [max]="amountLeftToReceive"
+                           [(model)]="receiptDetails.serialNr ? 1 : receiptDetails.quantityToReceive"
+                           [disabled]="!!receiptDetails.serialNr || receiptDetails.quantityToReceive === 0"
+                           [readonly]="!!receiptDetails.serialNr || receiptDetails.quantityToReceive === 0"
+                           [required]="true"
+                           [type]="'number'"
+                           [min]="1"
+                           [placeholder]="'AMOUNT' | localize"></co-input-text>
+            <co-input-text class="details-input" [(model)]="receiptDetails.warehouseNr"
+                           [type]="'number'"
+                           [hideArrowButtons]="true"
+                           [readonly]="transactionLine.warehouseNumber !== undefined"
+                           [disabled]="transactionLine.warehouseNumber !== undefined"
+                           [required]="transactionLine.isWarehouseRequired"
+                           [placeholder]="'WAREHOUSE' | localize"></co-input-text>
+            <co-drop-down-list class="details-input"
+                               noTriangleGraphic
+                               (focus)="handleDropDownSelected(receiptDetails.warehouseNr)"
+                               [collection]="locations"
+                               [fields]="locationDropdownFields"
+                               [(model)]="receiptDetails.locationNr"
+                               [required]="locationRequired()"
+                               [readonly]="receiptDetails.quantityToReceive === 0"
+                               [disabled]="receiptDetails.quantityToReceive === 0"
+                               [placeholder]="'LOCATION' | localize"
+            ></co-drop-down-list>
+            <co-input-text class="details-input" [(model)]="request.packingSlipNr"
+                           [placeholder]="'PACKING_SLIP' | localize"></co-input-text>
+          </div>
+          <div class="divider-wrapper">
+            <div class="divider"></div>
+          </div>
+          <div class="details-column">
+            <co-input-date class="details-input" [(model)]="request.receivedDate"
+            ></co-input-date>
+            <co-input-text class="details-input" [(model)]="receiptDetails.batchNr"
+                           [type]="'number'"
+                           [hideArrowButtons]="true"
+                           [required]="transactionLine.isBatchNrRequired"
+                           [placeholder]="'BATCH_NUMBER' | localize"></co-input-text>
+            <co-input-text class="details-input" [(model)]="receiptDetails.serialNr"
+                           [type]="'number'"
+                           [hideArrowButtons]="true"
+                           [required]="transactionLine.isSerialNrRequired"
+                           [placeholder]="'SERIAL_NUMBER' | localize"></co-input-text>
+            <!--          <co-input-text class="details-input" [(model)]="receiptDetails.refLineNr"-->
+            <!--                         [placeholder]="'REFERENCE_ID' | localize"></co-input-text>-->
+          </div>
         </div>
-      </div>
+      </co-form>
+
       <div class="save-cancel-wrapper">
         <co-button class="button-wrapper" [label]="'SAVE' | localize" (click)="handleSaveDetailsEdit()"></co-button>
         <co-button class="button-wrapper" [label]="'CANCEL' | localize" (click)="handleCancelDetailsEdit()"></co-button>
@@ -8901,8 +10513,16 @@ TransactionReceivingGoodsDetailsComponent.decorators = [
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
+TransactionReceivingGoodsDetailsComponent.ctorParameters = () => [
+    { type: FormMasterService },
+    { type: TransactionService },
+    { type: ArticleService }
+];
 TransactionReceivingGoodsDetailsComponent.propDecorators = {
-    transactionLineInfo: [{ type: Input }],
+    amountLeftToReceive: [{ type: Input }],
+    transactionId: [{ type: Input }],
+    transactionLine: [{ type: Input }],
+    reloadReceivingGoodsHistory: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-receiving-goods-details",] }]
 };
 
@@ -8915,7 +10535,10 @@ TransactionReceivingGoodsDetailsModule.decorators = [
                     CoreModule,
                     PipeModule,
                     InputTextModule,
+                    FormModule,
+                    InputDatePickerModule,
                     ButtonModule,
+                    DropDownModule,
                 ],
                 declarations: [
                     TransactionReceivingGoodsDetailsComponent
@@ -8926,22 +10549,6 @@ TransactionReceivingGoodsDetailsModule.decorators = [
             },] }
 ];
 
-var TransactionTypeCategory;
-(function (TransactionTypeCategory) {
-    TransactionTypeCategory["PurchaseOrderOverview"] = "purchaseOrderOverview";
-    TransactionTypeCategory["PurchaseOrderOrderConfirmation"] = "purchaseOrderOrderConfirmation";
-    TransactionTypeCategory["PurchaseOrderTransport"] = "purchaseOrderTransport";
-    TransactionTypeCategory["PurchaseOrderReceivedGoods"] = "purchaseOrderReceivedGoods";
-    TransactionTypeCategory["PurchaseOrderInvoiceCheck"] = "purchaseOrderInvoiceCheck";
-    TransactionTypeCategory["PurchaseOrderMenu"] = "purchaseOrderMenu";
-    TransactionTypeCategory["SalesOrderOverview"] = "salesOrderOverview";
-    TransactionTypeCategory["SalesOrderPurchase"] = "salesOrderPurchase";
-    TransactionTypeCategory["SalesOrderLogistics"] = "salesOrderLogistics";
-    TransactionTypeCategory["SalesOrderPlanning"] = "salesOrderPlanning";
-    TransactionTypeCategory["SalesOrderDeliveryNote"] = "salesOrderDeliveryNote";
-    TransactionTypeCategory["SalesOrderInvoice"] = "salesOrderInvoice";
-})(TransactionTypeCategory || (TransactionTypeCategory = {}));
-
 class TransactionQuickAccessOrderConfirmationComponent extends TransactionBaseComponent {
     showClass() {
         return true;
@@ -8969,27 +10576,63 @@ TransactionQuickAccessOrderConfirmationComponent.propDecorators = {
 };
 
 class TransactionQuickAccessReceivedGoodsComponent extends TransactionBaseComponent {
+    constructor(_transactionService, _transactionEventService) {
+        super(_transactionService);
+        this._transactionService = _transactionService;
+        this._transactionEventService = _transactionEventService;
+        // Route through event service instead
+        this.checkboxValueChanged = new EventEmitter();
+        this.commitCheckboxState = false;
+        this._subscriptions = [];
+    }
     showClass() {
         return true;
     }
+    ngOnInit() {
+        const timeElapsed = Date.now();
+        this.commitDate = new Date(timeElapsed);
+        this._subscriptions.push(this._transactionEventService.receivedPurchaseOrderCommit.subscribe((value) => {
+            this.commitCheckboxState = value;
+        }));
+    }
+    ngOnDestroy() {
+        this._subscriptions.forEach((subscription) => subscription.unsubscribe());
+    }
+    handleCommitEvent(value) {
+        this._transactionEventService.commitReceivePurchaseOrders.next(value);
+    }
 }
 TransactionQuickAccessReceivedGoodsComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-transaction-quick-access-received-goods",
                 template: `
-    <co-input-text
-      [placeholder]="'RECEIVED_DATE' | localize"
-    ></co-input-text>
-    <co-input-text
-      [placeholder]="'PACKING_SLIP' | localize"
-    ></co-input-text>
-    <co-input-checkbox
-    ></co-input-checkbox>
+      <co-input-date
+                     [placeholder]="'CONFIRMED_DATE' | localize"
+                     [(model)]="this.commitDate"
+      ></co-input-date>
+      <co-input-text
+                     [placeholder]="'PACKING_SLIP' | localize"
+                     [(model)]="this.commitReferenceId"
+      ></co-input-text>
+      <co-input-checkbox
+        class="checkbox-wrapper"
+        [(model)]="commitCheckboxState"
+        [disabled]="commitCheckboxState"
+        (modelChange)="handleCommitEvent({checkboxValue: $event, date: this.commitDate, id: this.commitReferenceId})"
+        ></co-input-checkbox>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
+TransactionQuickAccessReceivedGoodsComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: TransactionEventService }
+];
 TransactionQuickAccessReceivedGoodsComponent.propDecorators = {
+    commitDate: [{ type: Input }],
+    commitReferenceId: [{ type: Input }],
+    packingSlipId: [{ type: Input }],
+    checkboxValueChanged: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-quick-access-received-goods",] }]
 };
 
@@ -9063,35 +10706,145 @@ TransactionOrderConfirmationGridComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ["class.co-transaction-order-confirmation-grid",] }]
 };
 
+class ReceiveGoodsViewModel {
+    constructor(transactionLine, goodsReceiptStatus, selected, toReceive) {
+        this.toReceive = 0;
+        this.location = '';
+        this.transactionLine = transactionLine;
+        this.goodsReceiptStatus = goodsReceiptStatus;
+        this.selected = selected;
+        this.toReceive = toReceive;
+    }
+}
+
 class TransactionReceivedGoodsGridComponent extends TransactionGridBaseComponent {
+    constructor(_imageService, _transactionService, _transactionEventService, _articleService) {
+        super(_imageService);
+        this._imageService = _imageService;
+        this._transactionService = _transactionService;
+        this._transactionEventService = _transactionEventService;
+        this._articleService = _articleService;
+        this.locationDropdownFields = { text: "locationNo", value: "locationNo" };
+        this.rowViewModels = new Map();
+        this._subscriptions = [];
+        this._subscriptions.push(this._transactionEventService.commitReceivePurchaseOrders.subscribe((value => {
+            this.handleReceiveSelectedPurchaseOrders(value);
+        })), this._transactionEventService.transactionLineChanged.subscribe((value) => {
+            this.handleTransactionLineChanged(value);
+        }));
+    }
     showClass() {
         return true;
     }
+    ngOnInit() {
+        this.transactionLines.forEach((line) => {
+            this.rowViewModels.set(line, new ReceiveGoodsViewModel(line, new GoodsReceiptStatus(), false));
+        });
+    }
+    ngOnDestroy() {
+        this._subscriptions.forEach((subscription) => subscription.unsubscribe());
+    }
+    handleRowVisible(row) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._transactionService.getGoodsReceiptStatus(this.transactionId, row.lineNr)
+                .then((result) => {
+                this.rowViewModels.set(row, new ReceiveGoodsViewModel(row, result, result.quantityToReceive === 0, result.quantityToReceive));
+            });
+        });
+    }
+    locationRequired(row) {
+        return row.isLocationRequired || row.isBatchNrRequired || row.isSerialNrRequired;
+    }
+    handleDropDownSelected(warehouseNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.locations) {
+                yield this._articleService.getWarehouseLocations(warehouseNr).then((result) => {
+                    this.locations = result;
+                });
+            }
+        });
+    }
+    getRowViewModel(row) {
+        return this.rowViewModels.get(row);
+    }
+    handleReceiveSelectedPurchaseOrders(value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const selectedRows = [...this.rowViewModels.values()]
+                .filter((row) => row.selected && row.toReceive !== 0);
+            if (value.checkboxValue && selectedRows.length > 0) {
+                const receivedGoodsRequest = new ReceiveGoodsForPurchaseOrderRequest();
+                receivedGoodsRequest.transId = this.transactionId;
+                receivedGoodsRequest.receivedDate = value.date;
+                receivedGoodsRequest.packingSlipNr = value.id;
+                receivedGoodsRequest.purchaseOrderLineReceiptDetailsDTOS = [];
+                selectedRows.forEach((row) => {
+                    const detail = new PurchaseOrderLineReceiptDetails();
+                    detail.lineNr = row.transactionLine.lineNr;
+                    detail.quantityToReceive = row.toReceive;
+                    detail.warehouseNr = row.transactionLine.warehouseNumber;
+                    detail.locationNr = row.location;
+                    receivedGoodsRequest.purchaseOrderLineReceiptDetailsDTOS.push(detail);
+                });
+                yield this._transactionService.receiveGoodsForPurchaseOrder(receivedGoodsRequest).then(() => {
+                    this._handleAfterCommitReceivedOrders(selectedRows);
+                });
+            }
+        });
+    }
+    _handleAfterCommitReceivedOrders(selectedRows) {
+        selectedRows.forEach((row) => {
+            row.goodsReceiptStatus.quantityToReceive = row.goodsReceiptStatus.quantityToReceive -= row.toReceive;
+            row.toReceive = row.goodsReceiptStatus.quantityToReceive;
+            if (row.goodsReceiptStatus.quantityToReceive !== 0) {
+                row.selected = false;
+            }
+        });
+        this._transactionEventService.receivedPurchaseOrderCommit.next(false);
+    }
+    handleTransactionLineChanged(change) {
+        const receiveGoodsViewModel = this.rowViewModels.get(change.transactionLine);
+        receiveGoodsViewModel.goodsReceiptStatus.quantityToReceive = change.goodsReceiptStatus.quantityToReceive;
+        receiveGoodsViewModel.toReceive = change.goodsReceiptStatus.quantityToReceive;
+    }
 }
 TransactionReceivedGoodsGridComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-transaction-received-goods-grid",
                 template: `
-    <co-transaction-base-grid [transactionLines]="transactionLines" (sidePanelClicked)="openSidePanel($event)">
-      <co-simple-grid-column [width]="100" [field]="'warehouseNumber'" [textAlign]="align.Center" [order]="40">
-        <ng-template #headerTemplate let-row="row">
-          <icon class="transaction-grid-header-icon" [icon]="icons.Warehouse"></icon>
+    <co-transaction-base-grid [transactionLines]="transactionLines" (sidePanelClicked)="openSidePanel($event)" (rowVisible)="handleRowVisible($event)">
+      <co-simple-grid-column [headerText]="'WAREHOUSE' | localize" [field]="'warehouseNumber'" [order]="40"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'LOCATION' | localize" [order]="45">
+        <ng-template #template let-row = "row">
+          <co-drop-down-list
+            noTriangleGraphic
+            (focus)="handleDropDownSelected(row.warehouseNumber)"
+            [required]="locationRequired(row) && getRowViewModel(row).goodsReceiptStatus.quantityToReceive > 0"
+            [collection]="locations"
+            [fields]="locationDropdownFields"
+            [(model)]="getRowViewModel(row).location"
+            [disabled]="getRowViewModel(row).goodsReceiptStatus.quantityToReceive === 0"
+          ></co-drop-down-list>
         </ng-template>
       </co-simple-grid-column>
-      <co-simple-grid-column [field]="'location'" [order]="50">
-        <ng-template #headerTemplate let-row="row">
-          <icon class="transaction-grid-header-icon" [icon]="icons.LocationDotSolid"></icon>
+      <co-simple-grid-column [headerText]="'IN_ORDER' | localize" [field]="'amount'" [order]="50"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'RECEIVED' | localize" [order]="51">
+        <ng-template #template let-row = "row">
+          <co-input-number-picker
+            [min]="getRowViewModel(row).goodsReceiptStatus.quantityToReceive > 0 ? 1 : 0"
+            [max]="getRowViewModel(row).goodsReceiptStatus.quantityToReceive"
+            [(model)]="getRowViewModel(row).toReceive"
+            [disabled]="getRowViewModel(row).goodsReceiptStatus.quantityToReceive === 0"
+            [readonly]="getRowViewModel(row).goodsReceiptStatus.quantityToReceive === 0"
+          ></co-input-number-picker>
         </ng-template>
       </co-simple-grid-column>
-      <co-simple-grid-column [headerText]="'IN_ORDER' | localize" [field]="'amount'" [order]="51"></co-simple-grid-column>
-      <co-simple-grid-column [headerText]="'RECEIVED' | localize" [field]="'amount'" [order]="52"></co-simple-grid-column>
-      <co-simple-grid-column [headerText]="'BATCH' | localize" [field]="'nettoPrice'" [order]="53"></co-simple-grid-column>
-      <co-simple-grid-column [field]="'commitButton'" [order]="55" [textAlign]="align.Center">
-        <ng-template #headerTemplate let-row="row">
-          <co-input-checkbox></co-input-checkbox>
-        </ng-template>
-        <ng-template #template let-row="row">
-          <co-input-checkbox></co-input-checkbox>
+      <co-simple-grid-column [headerText]="'BATCH' | localize" [field]="'inOrder'" [order]="52"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'Commit button'" [field]="'commitButton'" [order]="55">
+        <ng-template #template let-row = "row">
+          <co-input-checkbox
+            [(model)]="getRowViewModel(row).selected"
+            [disabled]="getRowViewModel(row).goodsReceiptStatus.quantityToReceive === 0"
+          ></co-input-checkbox>
         </ng-template>
       </co-simple-grid-column>
     </co-transaction-base-grid>
@@ -9099,6 +10852,12 @@ TransactionReceivedGoodsGridComponent.decorators = [
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
+TransactionReceivedGoodsGridComponent.ctorParameters = () => [
+    { type: TransactionImageService },
+    { type: TransactionService },
+    { type: TransactionEventService },
+    { type: ArticleService }
+];
 TransactionReceivedGoodsGridComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ["class.co-transaction-received-goods-grid",] }]
 };
@@ -9289,7 +11048,7 @@ TransactionConfirmationHistoryComponent.decorators = [
                 selector: "co-transaction-confirmation-history",
                 template: `
     <div class="history-grid-wrapper">
-      <co-transaction-history-grid [transactionLines]="transactionLines">
+      <co-transaction-history-grid [collection]="transactionLines">
         <co-simple-grid-column [headerText]="'PRICE' | localize" [field]="'price'" [order]="40"></co-simple-grid-column>
         <co-simple-grid-column [headerText]="'DATE' | localize" [field]="'date'" [order]="60"></co-simple-grid-column>
       </co-transaction-history-grid>
@@ -9324,13 +11083,36 @@ TransactionConfirmationHistoryModule.decorators = [
 ];
 
 class TransactionLineSidePanelPurchaseComponent {
-    constructor() {
+    constructor(_service, _transactionEventService) {
+        this._service = _service;
+        this._transactionEventService = _transactionEventService;
         this.categories = TransactionTypeCategory;
         this.transactionLine = new TransactionLineInfo();
+        this.quantityToReceiveChange = new EventEmitter();
+        this.goodsReceiptStatus = new GoodsReceiptStatusWithHistory();
+    }
+    set transactionId(value) {
+        if (value) {
+            this._transactionId = value;
+            this.getGoodsReceiptStatusWithHistory();
+        }
+    }
+    get transactionId() {
+        return this._transactionId;
     }
     showClass() {
         return true;
     }
+    getGoodsReceiptStatusWithHistory() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._service.getGoodsReceiptStatusWithHistory(this._transactionId, this.transactionLine.lineNr)
+                .then((result) => {
+                this.goodsReceiptStatus = result;
+                this._transactionEventService.transactionLineChanged.next({ transactionLine: this.transactionLine, goodsReceiptStatus: result });
+                this.quantityToReceiveChange.next(result.quantityToReceive);
+            });
+        });
+    }
 }
 TransactionLineSidePanelPurchaseComponent.decorators = [
     { type: Component, args: [{
@@ -9344,8 +11126,18 @@ TransactionLineSidePanelPurchaseComponent.decorators = [
       </ng-container>
 
       <ng-container *ngSwitchCase="categories.PurchaseOrderReceivedGoods">
-        <co-transaction-receiving-goods-details></co-transaction-receiving-goods-details>
-        <co-transaction-receiving-goods-history></co-transaction-receiving-goods-history>
+        <co-transaction-receiving-goods-details
+          [transactionId]="transactionId"
+          [transactionLine]="transactionLine"
+          [amountLeftToReceive]="goodsReceiptStatus.quantityToReceive"
+          (reloadReceivingGoodsHistory)="getGoodsReceiptStatusWithHistory()"
+        ></co-transaction-receiving-goods-details>
+        <co-transaction-receiving-goods-history
+          [transactionId]="transactionId"
+          [transactionLine]="transactionLine"
+          [goodsReceiptHistory]="goodsReceiptStatus.goodsReceiptHistory"
+          (reloadReceivingGoodsHistory)="getGoodsReceiptStatusWithHistory()"
+        ></co-transaction-receiving-goods-history>
       </ng-container>
 
       <ng-container *ngSwitchDefault>
@@ -9358,9 +11150,15 @@ TransactionLineSidePanelPurchaseComponent.decorators = [
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
+TransactionLineSidePanelPurchaseComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: TransactionEventService }
+];
 TransactionLineSidePanelPurchaseComponent.propDecorators = {
-    category: [{ type: Input }],
     transactionLine: [{ type: Input }],
+    transactionId: [{ type: Input }],
+    category: [{ type: Input }],
+    quantityToReceiveChange: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-line-side-panel-purchase",] }]
 };
 
@@ -9688,7 +11486,8 @@ TransactionQuickAccessReceivedGoodsModule.decorators = [
                     CommonModule,
                     InputTextModule,
                     PipeModule,
-                    InputCheckboxModule
+                    InputCheckboxModule,
+                    InputDatePickerModule
                 ],
                 declarations: [
                     TransactionQuickAccessReceivedGoodsComponent
@@ -9770,7 +11569,6 @@ class ViewModeButtonsComponent {
         this.viewModes = ContentViewMode;
         this.showViewModes = [this.viewModes.List, this.viewModes.Grid, this.viewModes.Tiles];
         this.viewModeChange = new EventEmitter();
-        this._activeViewMode = ContentViewMode.List;
     }
     showClass() {
         return true;
@@ -9782,6 +11580,9 @@ class ViewModeButtonsComponent {
     get activeViewMode() {
         return this._activeViewMode;
     }
+    ngOnInit() {
+        this.activeViewMode = this.showViewModes.includes(ContentViewMode.List) ? ContentViewMode.List : this.showViewModes[0];
+    }
 }
 ViewModeButtonsComponent.decorators = [
     { type: Component, args: [{
@@ -9883,6 +11684,7 @@ class TransactionGridComponent {
             .create(this.injector);
         this.appRef.attachView(this._componentRef.hostView);
         this._componentRef.instance.transactionLines = this.transactionLines;
+        this._componentRef.instance.transactionId = this.transactionId;
         this._componentRef.instance.sidePanelClicked = this.sidePanelClicked;
         const domElem = this._componentRef.hostView
             .rootNodes[0];
@@ -9912,6 +11714,7 @@ TransactionGridComponent.propDecorators = {
     container: [{ type: ViewChild, args: ['transactionGrid', { read: ElementRef },] }],
     transactionType: [{ type: Input }],
     activeCategory: [{ type: Input }],
+    transactionId: [{ type: Input }],
     transactionLines: [{ type: Input }],
     sidePanelClicked: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-grid",] }]
@@ -9943,7 +11746,9 @@ TransactionReceivedGoodsGridModule.decorators = [
                     TransactionBaseGridModule,
                     SimpleGridModule,
                     PipeModule,
-                    InputCheckboxModule
+                    InputCheckboxModule,
+                    DropDownModule,
+                    InputNumberPickerModule
                 ],
                 declarations: [
                     TransactionReceivedGoodsGridComponent
@@ -10024,10 +11829,8 @@ class TransactionSearchComponent {
         this.showFilterSidebar = false;
     }
     handleResetFilter() {
-        this.handleHideFilter();
-        setTimeout(() => {
-            this.handleShowFilter();
-        }, 10);
+        this.showFilterSidebar = false;
+        setTimeout(() => { this.showFilterSidebar = true; }, 10);
     }
     onTransactionClick(transaction) {
         this.transactionClick.emit(transaction);
@@ -10043,7 +11846,8 @@ TransactionSearchComponent.decorators = [
                                (resetFilterClick)="handleResetFilter()"></co-transaction-filter>
       </div>
       <div class="transaction-search-result-wrapper">
-        <co-transaction-search-result (filterButtonClick)="handleShowFilter()" (transactionClick)="onTransactionClick($event)"></co-transaction-search-result>
+        <co-transaction-search-result (filterButtonClick)="handleShowFilter()"
+                                      (transactionClick)="onTransactionClick($event)"></co-transaction-search-result>
       </div>
     </div>
   `,
@@ -10063,6 +11867,110 @@ TransactionSearchComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ["class.co-transaction-search",] }]
 };
 
+class TransactionSearchGridComponent {
+    constructor() {
+        this.align = ColumnAlign;
+        this.transactions = [];
+        this.transactionClick = new EventEmitter();
+        this.extraColumns = [];
+    }
+    set content(columnComponents) {
+        this.extraColumns = columnComponents.toArray();
+    }
+    showClass() {
+        return true;
+    }
+    onTransactionClick(transaction) {
+        this.transactionClick.emit(transaction);
+    }
+}
+TransactionSearchGridComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-search-grid",
+                template: `
+    <div>
+      <co-simple-grid [data]="transactions" [extraColumns]="extraColumns" [dragDropEnabled]="true" [emitDragDrop]="false"
+                      (selectRow)="onTransactionClick($event)">
+        <co-simple-grid-column [headerText]="'ACTIVE' | localize"
+                               [order]="10" [textAlign]="align.Center">
+          <ng-template #template let-row= "row">
+            <co-input-checkbox [model]="row.active" readonly></co-input-checkbox>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'NR' | localize" [field]="'transNr'" [order]="20"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'NAME' | localize" [field]="'relationName'"
+                               [order]="30"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'RELATION_NUMBER' | localize" [field]="'relationNr'"
+                               [order]="40"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'BRANCH' | localize" [field]="'brancheName'"
+                               [order]="50"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'ADDRESS' | localize" [field]="'adres'"
+                               [order]="70"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'REFERENCE_RELATION' | localize" [field]="'relationReference'" [order]="80"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'PREFERRED_DATE' | localize"
+                               [order]="90" [textAlign]="align.Right" [resizable]="false">
+          <ng-template #template let-row = "row">
+            <div [textContent]=""></div> <!--todo: wachten op aanpassing api-->
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'TRANSACTION_DATE' | localize"
+                               [order]="100" [textAlign]="align.Right" [resizable]="false">
+          <ng-template #template let-row = "row">
+            <div [textContent]="row.transDate | date:'dd MMM yyyy'"></div>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'ORDER_DEFINITIVE' | localize"
+                               [order]="105" [textAlign]="align.Center">
+          <ng-template #template let-row= "row">
+            <co-input-checkbox [model]="row.transactionDefinitive" readonly></co-input-checkbox>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DELIVERY_DATE' | localize"
+                               [order]="110" [textAlign]="align.Right" [resizable]="false" >
+          <ng-template #template let-row = "row">
+            <div [textContent]="row.deliveryDate | date:'dd MMM yyyy'"></div>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DELIVERY_DATE_DEFINITIVE' | localize"
+                               [order]="115" [textAlign]="align.Center">
+          <ng-template #template let-row= "row">
+            <co-input-checkbox [model]="row.deliveryDateDefinitive" readonly></co-input-checkbox>
+          </ng-template>
+        </co-simple-grid-column>
+      </co-simple-grid>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionSearchGridComponent.ctorParameters = () => [];
+TransactionSearchGridComponent.propDecorators = {
+    content: [{ type: ContentChildren, args: [SimpleGridColumnDirective,] }],
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-search-grid",] }],
+    transactions: [{ type: Input }],
+    transactionClick: [{ type: Output }]
+};
+
+class TransactionSearchGridModule {
+}
+TransactionSearchGridModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule,
+                    PipeModule,
+                    SimpleGridModule,
+                    InputCheckboxModule
+                ],
+                declarations: [
+                    TransactionSearchGridComponent
+                ],
+                exports: [
+                    TransactionSearchGridComponent
+                ]
+            },] }
+];
+
 class TransactionTileComponent {
     constructor(iconCacheService) {
         this.iconCacheService = iconCacheService;
@@ -10095,10 +12003,7 @@ TransactionTileComponent.decorators = [
           </div>
         </div>
         <div class="transaction-tile-order-summary">
-          <div class="header"><span [textContent]="'€32.519'"></span></div>
-          <div>
-            <co-button [textContent]="'Besteld'"></co-button>
-          </div>
+          <div class="header"><span [textContent]="'€12.345'"></span></div>  <!--todo: vullen als api aanpassing gedaan is-->
         </div>
       </div>
       <div class="transaction-tile-footer">
@@ -10190,8 +12095,10 @@ TransactionSearchService.ctorParameters = () => [
 ];
 
 class TransactionSearchResultComponent {
-    constructor(searchService) {
+    constructor(searchService, iconCacheService) {
         this.searchService = searchService;
+        this.iconCacheService = iconCacheService;
+        this.icon = Icon;
         this.viewModes = ContentViewMode;
         this.filterButtonClick = new EventEmitter();
         this.transactionClick = new EventEmitter();
@@ -10202,7 +12109,7 @@ class TransactionSearchResultComponent {
     }
     ngOnInit() {
     }
-    onTileClick(transaction) {
+    onTransactionClick(transaction) {
         this.transactionClick.emit(transaction);
     }
 }
@@ -10215,22 +12122,28 @@ TransactionSearchResultComponent.decorators = [
                        [(model)]="searchService.searchRequest.general"
                        [placeholder]="'Waar ben je naar op zoek?'"
                        (search)="searchService.searchTransactions()"></co-input-search>
-      <co-button class="transaction-search-filter-button" [label]="'Filter'"
+      <co-button class="transaction-search-filter-button" [iconData]="iconCacheService.getIcon(icon.BarsFilter)"
                  (click)="filterButtonClick.emit()"></co-button>
     </div>
     <co-view-mode-buttons [showViewModes]="[viewModes.Tiles, viewModes.Grid]"
                           (viewModeChange)="activeViewMode = $event"></co-view-mode-buttons>
     <div class="transaction-search-result-content-tiles-wrapper" *ngIf="activeViewMode === viewModes.Tiles">
       <div class="transaction-tile" *ngFor="let transaction of searchService.transactions">
-        <co-transaction-tile [transaction]="transaction" (tileClick)="onTileClick(transaction)"></co-transaction-tile>
+        <co-transaction-tile [transaction]="transaction"
+                             (tileClick)="onTransactionClick(transaction)"></co-transaction-tile>
       </div>
     </div>
+    <div class="transaction-search-result-content-grid-wrapper" *ngIf="activeViewMode === viewModes.Grid">
+      <co-transaction-search-grid [transactions]="searchService.transactions"
+                                  (transactionClick)="onTransactionClick($event)"></co-transaction-search-grid>
+    </div>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 TransactionSearchResultComponent.ctorParameters = () => [
-    { type: TransactionSearchService }
+    { type: TransactionSearchService },
+    { type: IconCacheService }
 ];
 TransactionSearchResultComponent.propDecorators = {
     filterButtonClick: [{ type: Output }],
@@ -10248,7 +12161,8 @@ TransactionSearchResultModule.decorators = [
                     ButtonModule,
                     ViewModeButtonsModule,
                     AvatarModule,
-                    TransactionTileModule
+                    TransactionTileModule,
+                    TransactionSearchGridModule
                 ],
                 declarations: [
                     TransactionSearchResultComponent
@@ -10259,11 +12173,70 @@ TransactionSearchResultModule.decorators = [
             },] }
 ];
 
+class FilterItemViewmodel {
+    constructor(code, description, checked, count) {
+        this.checked = false;
+        this.code = code;
+        this.description = description === null || description === void 0 ? void 0 : description.toString();
+        this.count = count;
+    }
+}
+
+class FilterViewmodel {
+    constructor(collection, fields) {
+        this.filterItems = [];
+        collection.forEach((item) => {
+            var _a, _b;
+            this.filterItems.push(new FilterItemViewmodel(item[fields.value], item[fields.text], (_a = item.checked) !== null && _a !== void 0 ? _a : false, (_b = item.count) !== null && _b !== void 0 ? _b : null));
+        });
+    }
+}
+
 class FilterRequestService {
-    constructor(_transactionService) {
+    constructor(searchService, _transactionService) {
+        this.searchService = searchService;
         this._transactionService = _transactionService;
     }
-    getFilterRequestForCollectionRange(collection) {
+    handleCollectionChangeForRange(collection, modelName) {
+        this.searchService.searchRequest[modelName] = this._getFilterRequestForCollectionRange(collection);
+    }
+    handleCollectionChangeForArray(collection, modelName) {
+        this.searchService.searchRequest[modelName] = this._getFilterRequestForCollectionArray(collection);
+    }
+    //todo: tijdelijk totdat filter-item single select ondersteunt
+    handleCollectionChangeForSingleValue(collection, modelName) {
+        this.searchService.searchRequest[modelName] = this._getFilterRequestForSingleCollectionValue(collection);
+    }
+    //todo: tijdelijk totdat filter-item single select ondersteunt
+    handleCollectionChangeForSingleNumber(collection, modelName) {
+        this.searchService.searchRequest[modelName] = collection ? this._getFilterRequestForSingleCollectionNumber(collection) : -1;
+    }
+    handleCheckboxValueChangeForString(value, modelName) {
+        this.searchService.searchRequest[modelName] = this._getFilterRequestForBooleanToString(value);
+    }
+    handleCheckboxValueChangeForNumber(value, modelName) {
+        this.searchService.searchRequest[modelName] = value ? 1 : 0;
+    }
+    handleDateRangeChange(dates, modelName) {
+        if (dates) {
+            let startDate = dates[0];
+            let endDate = dates[1];
+            this.searchService.searchRequest[modelName] = this._getFilterRequestForDateRange(startDate, endDate);
+        }
+    }
+    getDateFromFilterRequestRange(filterRequestRange, index) {
+        if (filterRequestRange) {
+            const datePattern = new RegExp('\\d{2}\\-\\d{2}\\-\\d{4}');
+            let dateString = filterRequestRange
+                .split(',')[index]
+                .match(datePattern)[0];
+            const day = Number(dateString.match('^\\d{2}')[0]);
+            const month = Number(dateString.match('(?<=\\-)(\\d{2})(?=\\-)')[0]) - 1;
+            const year = Number(dateString.match('\\d{4}')[0]);
+            return new Date(year, month, day);
+        }
+    }
+    _getFilterRequestForCollectionRange(collection) {
         let filterRequest = '';
         collection === null || collection === void 0 ? void 0 : collection.forEach(item => {
             if (item.checked) {
@@ -10273,78 +12246,101 @@ class FilterRequestService {
         });
         return filterRequest;
     }
-    getFilterRequestForCollectionArray(collection) {
+    _getFilterRequestForBooleanToString(value) {
+        let filterRequest = '';
+        if (value) {
+            filterRequest = "?='J'";
+        }
+        else {
+            filterRequest = "?='N'";
+        }
+        return filterRequest;
+    }
+    _getFilterRequestForCollectionArray(collection) {
         let filterRequest = [];
         collection === null || collection === void 0 ? void 0 : collection.forEach(item => {
             if (item.checked) {
+                filterRequest.push(item.code.toString());
             }
-            filterRequest.push(item.code.toString());
         });
         return filterRequest;
     }
-    getFilterRequestForDateRange(startDate, endDate) {
-        const startDateRequest = startDate ? this.formatDate(startDate) : '';
-        const endDateRequest = endDate ? this.formatDate(endDate) : '';
-        return `?=\'${startDateRequest}\',\'${endDateRequest}\'`;
-    }
-    getDateFromFilterRequestRange(filterRequestRange, index) {
-        if (filterRequestRange) {
-            let dateRange = filterRequestRange.replace("?=", "");
-            let date = Number(dateRange
-                .split(",")[index]
-                .replace("'", "")
-                .replace("'", ""));
-            return new Date(date);
+    //todo: tijdelijk totdat filter-item single select ondersteunt
+    _getFilterRequestForSingleCollectionValue(collection) {
+        let filterRequest = '';
+        const firstValue = collection.find(item => item.checked).code.toString();
+        if (firstValue) {
+            filterRequest = `?=\'${firstValue}\'`;
         }
+        return filterRequest;
     }
-    formatDate(date) {
+    //todo: tijdelijk totdat filter-item single select ondersteunt
+    _getFilterRequestForSingleCollectionNumber(collection) {
+        var _a;
+        const firstValue = Number((_a = collection.find(item => item.checked)) === null || _a === void 0 ? void 0 : _a.code);
+        return firstValue !== null && firstValue !== void 0 ? firstValue : -1;
+    }
+    _getFilterRequestForDateRange(startDate, endDate) {
+        const startDateRequest = startDate ? this._formatDateToString(startDate) : '';
+        const endDateRequest = endDate ? this._formatDateToString(endDate) : '';
+        return `?>=\'${startDateRequest}\'& ?<=\'${endDateRequest}\'`;
+    }
+    _formatDateToString(date) {
         let day = date.getDate().toString().padStart(2, '0');
         let month = (date.getMonth() + 1).toString().padStart(2, '0');
         let year = date.getFullYear();
         return `${day}-${month}-${year}`;
     }
 }
-FilterRequestService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FilterRequestService_Factory() { return new FilterRequestService(i0.ɵɵinject(TransactionService)); }, token: FilterRequestService, providedIn: "root" });
+FilterRequestService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FilterRequestService_Factory() { return new FilterRequestService(i0.ɵɵinject(TransactionSearchService), i0.ɵɵinject(TransactionService)); }, token: FilterRequestService, providedIn: "root" });
 FilterRequestService.decorators = [
     { type: Injectable, args: [{
                 providedIn: "root"
             },] }
 ];
 FilterRequestService.ctorParameters = () => [
+    { type: TransactionSearchService },
     { type: TransactionService }
 ];
 
 class TransactionFilterContentArticleComponent {
-    constructor(searchService, _transactionService, _filterRequestService) {
+    constructor(searchService, filterRequestService, _transactionService) {
         this.searchService = searchService;
+        this.filterRequestService = filterRequestService;
         this._transactionService = _transactionService;
-        this._filterRequestService = _filterRequestService;
-        this.searchRequestChange = new EventEmitter();
+        this.searchRequest = this.searchService.searchRequest;
         this.searchPlaceholder = "SEARCH_IN_COLLECTION";
+        this.showMoreLabel = "SHOW_MORE";
+        this.showLessLabel = "SHOW_LESS";
         this.articleNumberFields = { text: "description", value: "code" };
+        this.exceedanceCodeFields = { text: "description", value: "code" };
+        this.supplierFields = { text: "displayName", value: "relationId" };
     }
     showClass() {
         return true;
     }
     ngOnInit() {
-        this._getArticleNumbers();
-    }
-    //Artikelnummer
-    _getArticleNumbers() {
+        this._setArticleNumbers();
+        this._setExceedanceCodes();
+        this._setSuppliers();
     }
-    handleCollectionChangeForRange(collection, model) {
-        this.searchRequest[model] = this._filterRequestService.getFilterRequestForCollectionRange(collection);
+    onFilterButtonClick() {
+        this.searchService.searchTransactions();
     }
-    handleCollectionChangeForArray(collection, model) {
-        this.searchRequest[model] = this._filterRequestService.getFilterRequestForCollectionArray(collection);
+    //Artikelnummer
+    _setArticleNumbers() {
     }
-    handleDateRangeChange(dates, model) {
-        let startDate = dates[0];
-        let endDate = dates[1];
-        this.searchRequest[model] = this._filterRequestService.getFilterRequestForDateRange(startDate, endDate);
+    _setExceedanceCodes() {
+        this._transactionService.getInOutCollection("NL").then((exceedanceCodes) => {
+            this.exceedanceCodes = new FilterViewmodel(exceedanceCodes, this.exceedanceCodeFields).filterItems;
+        });
     }
-    onFilterButtonClick() {
-        this.searchService.searchTransactions();
+    _setSuppliers() {
+        const request = new RelationRequest();
+        request.relationType = RelationKind.Supplier;
+        this._transactionService.getRelationListObjects(request).then((relationListObjects) => {
+            this.suppliers = new FilterViewmodel(relationListObjects, this.supplierFields).filterItems;
+        });
     }
 }
 TransactionFilterContentArticleComponent.decorators = [
@@ -10353,15 +12349,17 @@ TransactionFilterContentArticleComponent.decorators = [
                 template: `
     <div class="transaction-filter-content-article-wrapper">
 
-      <!--Artikelnummer: nog geen call in de API? -->
+      <!--Artikelnummer: todo: wachten op API call -->
       <co-filter-item
         [placeholder]="'ARTICLE_NR' | localize"
         [expanded]="true"
+        [customContent]="true"
       >
-
+        <co-input-text [(model)]="searchRequest.mainArticleNrRange"
+                       [placeholder]="'ARTICLE_NR' | localize"></co-input-text>
       </co-filter-item>
 
-      <!--Omzetgroep: nog geen call in de API? -->
+      <!--Omzetgroep: todo: wachten op API call -->
       <co-filter-item
         [placeholder]="'TURNOVER_GROUP' | localize"
         [customContent]="true"
@@ -10370,7 +12368,7 @@ TransactionFilterContentArticleComponent.decorators = [
                        [placeholder]="'TURNOVER_GROUP' | localize"></co-input-text>
       </co-filter-item>
 
-      <!--Hoofdartikel: nog geen call in de API? -->
+      <!--Hoofdartikel: todo: wachten op API call -->
       <co-filter-item
         [placeholder]="'MAIN_ARTICLE' | localize"
         [customContent]="true"
@@ -10379,22 +12377,28 @@ TransactionFilterContentArticleComponent.decorators = [
                        [placeholder]="'MAIN_ARTICLE' | localize"></co-input-text>
       </co-filter-item>
 
-      <!--Uitloopcode: nog geen call in de API? -->
+      <!--Uitloopcode -->
       <co-filter-item
         [placeholder]="'EXCEEDENCE_CODE' | localize"
-        [customContent]="true"
-        [expanded]="true">
-        <co-input-text [(model)]="searchRequest.exceedanceCodes"
-                       [placeholder]="'EXCEEDENCE_CODE' | localize"></co-input-text>
+        [expanded]="true"
+        [collection]="exceedanceCodes"
+        [searchPlaceholder]="searchPlaceholder | localize"
+        [showMoreLabel]="showMoreLabel | localize"
+        [showLessLabel]="showLessLabel | localize"
+        (collectionChange)="this.filterRequestService.handleCollectionChangeForArray($event, 'exceedanceCodes')"
+      >
       </co-filter-item>
 
-      <!--Leverancier: nog geen call in de API? -->
+      <!--Leverancier-->
       <co-filter-item
         [placeholder]="'SUPPLIER' | localize"
-        [customContent]="true"
-        [expanded]="true">
-        <co-input-text [(model)]="searchRequest.rangeSupplier"
-                       [placeholder]="'SUPPLIER' | localize"></co-input-text>
+        [expanded]="true"
+        [collection]="suppliers"
+        [searchPlaceholder]="searchPlaceholder | localize"
+        [showMoreLabel]="showMoreLabel | localize"
+        [showLessLabel]="showLessLabel | localize"
+        (collectionChange)="this.filterRequestService.handleCollectionChangeForRange($event, 'rangeSupplier')"
+      >
       </co-filter-item>
       <div class="filter-button-container">
         <co-button class="clickable" [label]="'Filter'" (click)="onFilterButtonClick()"></co-button>
@@ -10405,12 +12409,10 @@ TransactionFilterContentArticleComponent.decorators = [
 ];
 TransactionFilterContentArticleComponent.ctorParameters = () => [
     { type: TransactionSearchService },
-    { type: TransactionService },
-    { type: FilterRequestService }
+    { type: FilterRequestService },
+    { type: TransactionService }
 ];
 TransactionFilterContentArticleComponent.propDecorators = {
-    searchRequest: [{ type: Input }],
-    searchRequestChange: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-filter-content-article",] }]
 };
 
@@ -10434,35 +12436,17 @@ TransactionFilterContentArticleModule.decorators = [
             },] }
 ];
 
-class FilterItemViewmodel {
-    constructor(code, description, checked, count) {
-        this.checked = false;
-        this.code = code;
-        this.description = description === null || description === void 0 ? void 0 : description.toString();
-        this.count = count;
-    }
-}
-
-class FilterViewmodel {
-    constructor(collection, fields) {
-        this.filterItems = [];
-        collection.forEach((item) => {
-            var _a, _b;
-            this.filterItems.push(new FilterItemViewmodel(item[fields.value], item[fields.text], (_a = item.checked) !== null && _a !== void 0 ? _a : false, (_b = item.count) !== null && _b !== void 0 ? _b : null));
-        });
-    }
-}
-
 class TransactionFilterContentLogisticsComponent {
-    constructor(searchService, _transactionService, _filterRequestService) {
+    constructor(searchService, filterRequestService, _transactionService) {
         this.searchService = searchService;
+        this.filterRequestService = filterRequestService;
         this._transactionService = _transactionService;
-        this._filterRequestService = _filterRequestService;
-        this.searchRequestChange = new EventEmitter();
+        this.searchRequest = this.searchService.searchRequest;
         this.searchPlaceholder = "SEARCH_IN_COLLECTION";
+        this.showMoreLabel = "SHOW_MORE";
+        this.showLessLabel = "SHOW_LESS";
         this.deliveryMethods = [];
         this.deliveryMethodFields = { text: "description", value: "code" };
-        this.warehouses = [];
         this.warehouseFields = { text: "description", value: "warehouseNo" };
     }
     showClass() {
@@ -10470,41 +12454,30 @@ class TransactionFilterContentLogisticsComponent {
     }
     ngOnInit() {
         this._setRangeDates();
-        this._getDeliveryMethods();
-        this._getWarehouses();
+        this._setDeliveryMethods();
+        this._setWarehouses();
+    }
+    onFilterButtonClick() {
+        this.searchService.searchTransactions();
     }
     _setRangeDates() {
-        this.confirmedDeliveryStartDate = this._filterRequestService.getDateFromFilterRequestRange(this.searchRequest.confirmedDeliveryDateRange, 0);
-        this.confirmedDeliveryEndDate = this._filterRequestService.getDateFromFilterRequestRange(this.searchRequest.confirmedDeliveryDateRange, 1);
-        this.arrivalStartDate = this._filterRequestService.getDateFromFilterRequestRange(this.searchRequest.arrivalDateRange, 0);
-        this.arrivalEndDate = this._filterRequestService.getDateFromFilterRequestRange(this.searchRequest.arrivalDateRange, 1);
+        this.confirmedDeliveryStartDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.confirmedDeliveryDateRange, 0);
+        this.confirmedDeliveryEndDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.confirmedDeliveryDateRange, 1);
+        this.arrivalStartDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.arrivalDateRange, 0);
+        this.arrivalEndDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.arrivalDateRange, 1);
     }
     //Delivery Methods
-    _getDeliveryMethods() {
+    _setDeliveryMethods() {
         this._transactionService.getDeliveryMethods().then((deliveryMethods) => {
             this.deliveryMethods = new FilterViewmodel(deliveryMethods, this.deliveryMethodFields).filterItems;
         });
     }
     //Warehouses
-    _getWarehouses() {
+    _setWarehouses() {
         this._transactionService.getWarehouses().then((warehouses) => {
-            this.warehouses = warehouses;
+            this.warehouses = new FilterViewmodel(warehouses, this.warehouseFields).filterItems;
         });
     }
-    handleCollectionChangeForRange(collection, model) {
-        this.searchRequest[model] = this._filterRequestService.getFilterRequestForCollectionRange(collection);
-    }
-    handleCollectionChangeForArray(collection, model) {
-        this.searchRequest[model] = this._filterRequestService.getFilterRequestForCollectionArray(collection);
-    }
-    handleDateRangeChange(dates, model) {
-        let startDate = dates[0];
-        let endDate = dates[1];
-        this.searchRequest[model] = this._filterRequestService.getFilterRequestForDateRange(startDate, endDate);
-    }
-    onFilterButtonClick() {
-        this.searchService.searchTransactions();
-    }
 }
 TransactionFilterContentLogisticsComponent.decorators = [
     { type: Component, args: [{
@@ -10512,27 +12485,30 @@ TransactionFilterContentLogisticsComponent.decorators = [
                 template: `
     <div class="transaction-filter-content-logistics-wrapper">
 
-      <!--Levermethode (werkt)-->
+      <!--Levermethode-->
       <co-filter-item
         [placeholder]="'DELIVERY_METHOD' | localize"
         [expanded]="true"
         [collection]="deliveryMethods"
         [searchPlaceholder]="searchPlaceholder | localize"
-        (collectionChange)="handleCollectionChangeForRange($event, 'rangeDeliveryMethod')">
+        [showMoreLabel]="showMoreLabel | localize"
+        [showLessLabel]="showLessLabel | localize"
+        (collectionChange)="this.filterRequestService.handleCollectionChangeForRange($event, 'rangeDeliveryMethod')">
       </co-filter-item>
 
 
-      <!--Leverdatum definitief: werkt nog niet: waarde uit domein moet boolean zijn?-->
+      <!--Leverdatum definitief-->
       <co-filter-item
         [placeholder]="'DELIVERY_DATE_FINAL' | localize"
         [customContent]="true"
         [expanded]="true">
         <co-input-checkbox
-          [(model)]="!!searchRequest.deliveryDateDefinitive"
+          [model]="searchRequest.deliveryDateDefinitive === 'J'"
+          (modelChange)="this.filterRequestService.handleCheckboxValueChangeForString($event, 'deliveryDateDefinitive')"
           [label]="'DELIVERY_DATE_FINAL' | localize"></co-input-checkbox>
       </co-filter-item>
 
-      <!--Toegewezen: dit is een quantity in het domain. Zoeken met range oid?-->
+      <!--Toegewezen: todo: enum uizoeken en verwerken-->
       <co-filter-item
         [placeholder]="'ALLOCATED' | localize"
         [customContent]="true"
@@ -10541,7 +12517,7 @@ TransactionFilterContentLogisticsComponent.decorators = [
                        [placeholder]="'ALLOCATED' | localize"></co-input-text>
       </co-filter-item>
 
-      <!--Geleverd: dit is een quantity in het domain. Zoeken met range oid?-->
+      <!--Geleverd: todo: enum uizoeken en verwerken-->
       <co-filter-item
         [placeholder]="'DELIVERED' | localize"
         [customContent]="true"
@@ -10550,15 +12526,17 @@ TransactionFilterContentLogisticsComponent.decorators = [
                        [placeholder]="'DELIVERED' | localize"></co-input-text>
       </co-filter-item>
 
-      <!--Gefactureerd: dit is een quantity in het domain. Zoeken met range oid?-->
+      <!--Gefactureerd: todo: enum uizoeken en verwerken-->
       <co-filter-item
         [placeholder]="'INVOICED' | localize"
         [customContent]="true"
         [expanded]="true">
-        <co-input-text [(model)]="searchRequest.quantityInvoiced" [placeholder]="'INVOICED' | localize"></co-input-text>
+        <co-input-text
+          [(model)]="searchRequest.quantityInvoiced"
+          [placeholder]="'INVOICED' | localize"></co-input-text>
       </co-filter-item>
 
-      <!--Te picken: dit is een quantity in het domain. Zoeken met range oid?-->
+      <!--Te picken: todo: enum uizoeken en verwerken-->
       <co-filter-item
         [placeholder]="'TO_BE_PICKED' | localize"
         [customContent]="true"
@@ -10567,15 +12545,17 @@ TransactionFilterContentLogisticsComponent.decorators = [
                        [placeholder]="'TO_BE_PICKED' | localize"></co-input-text>
       </co-filter-item>
 
-      <!--Gepicked: dit is een quantity in het domain. Zoeken met range oid?-->
+      <!--Gepicked: todo: enum uizoeken en verwerken-->
       <co-filter-item
         [placeholder]="'PICKED' | localize"
         [customContent]="true"
         [expanded]="true">
-        <co-input-text [(model)]="searchRequest.quantityPicked" [placeholder]="'PICED' | localize"></co-input-text>
+        <co-input-text
+          [(model)]="searchRequest.quantityPicked"
+          [placeholder]="'PICKED' | localize"></co-input-text>
       </co-filter-item>
 
-      <!--Bevestigde leverdatum: range picker werkt, alleen output filter niet goed? -->
+      <!--Bevestigde leverdatum-->
       <co-filter-item
         [placeholder]="'CONFIRMED_DELIVERY_DATE' | localize"
         [customContent]="true"
@@ -10583,12 +12563,12 @@ TransactionFilterContentLogisticsComponent.decorators = [
         <co-input-date-range
           [startDate]="confirmedDeliveryStartDate"
           [endDate]="confirmedDeliveryEndDate"
-          (dateRangeChange)="handleDateRangeChange($event, 'confirmedDeliveryDateRange')"
+          (dateRangeChange)="this.filterRequestService.handleDateRangeChange($event, 'confirmedDeliveryDateRange')"
           [placeholder]="'SELECT_DATE' | localize">
         </co-input-date-range>
       </co-filter-item>
 
-      <!--Aankomstdatum: range picker werkt, alleen output filter niet goed? -->
+      <!--Aankomstdatum-->
       <co-filter-item
         [placeholder]="'ARRIVAL_DATE' | localize"
         [customContent]="true"
@@ -10596,39 +12576,46 @@ TransactionFilterContentLogisticsComponent.decorators = [
         <co-input-date-range
           [startDate]="arrivalStartDate"
           [endDate]="arrivalEndDate"
-          (dateRangeChange)="handleDateRangeChange($event, 'arrivalDateRange')"
+          (dateRangeChange)="this.filterRequestService.handleDateRangeChange($event, 'arrivalDateRange')"
           [placeholder]="'SELECT_DATE' | localize">
         </co-input-date-range>
       </co-filter-item>
 
-      <!--Deellevering: Kan ik niet vinden in de transaction service. Zit dat in deliveryoptions???-->
+      <!--Deellevering-->
       <co-filter-item
         [placeholder]="'PART_DELIVERY' | localize"
         [customContent]="true"
         [expanded]="true">
-        <co-input-text [(model)]="searchRequest.partialDelivery"
-                       [placeholder]="'PART_DELIVERY' | localize"></co-input-text>
+        <co-input-checkbox
+          [model]="searchRequest.partialDelivery === 'J'"
+          (modelChange)="this.filterRequestService.handleCheckboxValueChangeForString($event, 'partialDelivery')"
+          [label]="'PART_DELIVERY' | localize">
+        </co-input-checkbox>
       </co-filter-item>
 
       <!--Magazijn -->
-      <!--<co-filter-item
+      <co-filter-item
         [placeholder]="'WAREHOUSE' | localize"
         [expanded]="true"
         [collection]="warehouses"
-
         [searchPlaceholder]="searchPlaceholder | localize"
-        (collectionChange)="handlecollectionChange($event, 'deliveryMethod', warehouseFields)">
-      </co-filter-item>-->
+        [showMoreLabel]="showMoreLabel | localize"
+        [showLessLabel]="showLessLabel | localize"
+        (collectionChange)="this.filterRequestService.handleCollectionChangeForSingleNumber($event, 'warehouse')">
+      </co-filter-item>
 
 
-      <!--Bron magazijn: collectie zelfde als warehouses? -->
-      <!--      <co-filter-item
-              [placeholder]="'SOURCE_WAREHOUSE' | localize"
-              [expanded]="true"
-              [collection]="warehouses"
-              [searchPlaceholder]="searchPlaceholder | localize"
-              (collectionChange)="handlecollectionChanged($event, 'sourceWarehouse', warehouseFields)">
-            </co-filter-item>-->
+      <!--Bron magazijn-->
+      <co-filter-item
+        [placeholder]="'SOURCE_WAREHOUSE' | localize"
+        [expanded]="true"
+        [collection]="warehouses"
+        [searchPlaceholder]="searchPlaceholder | localize"
+        [showMoreLabel]="showMoreLabel | localize"
+        [showLessLabel]="showLessLabel | localize"
+        (collectionChange)="this.filterRequestService.handleCollectionChangeForSingleNumber($event, 'sourceWarehouse')">
+      </co-filter-item>
+
 
       <!--Serienummer -->
       <co-filter-item
@@ -10647,43 +12634,42 @@ TransactionFilterContentLogisticsComponent.decorators = [
         <co-input-text [(model)]="searchRequest.batchNumber" [placeholder]="'BATCH_NUMBER' | localize"></co-input-text>
       </co-filter-item>
 
-      <!--Inclusief retouren: is een number in het domein, moet boolean zijn?-->
+      <!--Inclusief retouren-->
       <co-filter-item
         [placeholder]="'INCLUDING_RETURNS' | localize"
         [customContent]="true"
         [expanded]="true">
         <co-input-checkbox
           [label]="'INCLUDING_RETURNS' | localize"
-        ><!--[(model)]="searchRequest.includingReturns"-->
-        </co-input-checkbox>
-      </co-filter-item>
-
-      <!--Levermethode op (regel/header): waar moet hier precies op gefilterd worden?-->
-      <co-filter-item
-        [placeholder]="'Levermethode op regel/header'"
-        [customContent]="true"
-        [expanded]="true">
-        <co-input-checkbox
-          [label]="'Levermethode op regel/header'"
+          [model]="searchRequest.includingReturns === 1"
+          (modelChange)="this.filterRequestService.handleCheckboxValueChangeForNumber($event, 'includingReturns')"
         >
         </co-input-checkbox>
       </co-filter-item>
+
+      <!--Levermethode op (regel/header): todo: nog uitzoeken welke filter dit is-->
+      <!--      <co-filter-item
+              [placeholder]="'Levermethode op regel/header'"
+              [customContent]="true"
+              [expanded]="true">
+              <co-input-checkbox
+                [label]="'Levermethode op regel/header'"
+              >
+              </co-input-checkbox>
+            </co-filter-item>-->
       <div class="filter-button-container">
         <co-button class="clickable" [label]="'Filter'" (click)="onFilterButtonClick()"></co-button>
       </div>
     </div>
-
   `
             },] }
 ];
 TransactionFilterContentLogisticsComponent.ctorParameters = () => [
     { type: TransactionSearchService },
-    { type: TransactionService },
-    { type: FilterRequestService }
+    { type: FilterRequestService },
+    { type: TransactionService }
 ];
 TransactionFilterContentLogisticsComponent.propDecorators = {
-    searchRequest: [{ type: Input }],
-    searchRequestChange: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-filter-content-logistics",] }]
 };
 
@@ -10711,13 +12697,14 @@ TransactionFilterContentLogisticsModule.decorators = [
 ];
 
 class TransactionFilterContentOrderComponent {
-    constructor(_transactionService, searchService, _filterRequestService) {
-        this._transactionService = _transactionService;
+    constructor(searchService, filterRequestService, _transactionService) {
         this.searchService = searchService;
-        this._filterRequestService = _filterRequestService;
-        this.searchRequestChange = new EventEmitter();
-        this.booleanTextDecorator = BooleanTextDecorator;
+        this.filterRequestService = filterRequestService;
+        this._transactionService = _transactionService;
+        this.searchRequest = this.searchService.searchRequest;
         this.searchPlaceholder = "SEARCH_IN_COLLECTION";
+        this.showMoreLabel = "SHOW_MORE";
+        this.showLessLabel = "SHOW_LESS";
         this.salesPersonsFields = { text: "name", value: "relationId" };
         this.tagsFields = { text: "description", value: "tagValueId" };
         this.branchFields = { text: "description", value: "relationId" };
@@ -10730,69 +12717,58 @@ class TransactionFilterContentOrderComponent {
     }
     ngOnInit() {
         this._setRangeDates();
-        this._getSalesPersons();
-        this._getTags();
-        this._getBranches();
-        this._getOnHoldCodes();
-        this._getCommissionCodes();
-        this._getCustomerGroups();
+        this._setSalesPersons();
+        this._setTags();
+        this._setBranches();
+        this._setOnHoldCodes();
+        this._setCommissionCodes();
+        this._setCustomerGroups();
+    }
+    onFilterButtonClick() {
+        this.searchService.searchTransactions();
     }
     _setRangeDates() {
-        this.transStartDate = this._filterRequestService.getDateFromFilterRequestRange(this.searchRequest.rangeTransDate, 0);
-        this.transEndDate = this._filterRequestService.getDateFromFilterRequestRange(this.searchRequest.rangeTransDate, 1);
-        this.deliveryStartDate = this._filterRequestService.getDateFromFilterRequestRange(this.searchRequest.deliveryDateRange, 0);
-        this.deliveryEndDate = this._filterRequestService.getDateFromFilterRequestRange(this.searchRequest.deliveryDateRange, 1);
+        this.transStartDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.rangeTransDate, 0);
+        this.transEndDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.rangeTransDate, 1);
+        this.deliveryStartDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.deliveryDateRange, 0);
+        this.deliveryEndDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.deliveryDateRange, 1);
     }
     //Verkoper
-    _getSalesPersons() {
+    _setSalesPersons() {
         this._transactionService.getSalesPersons().then((salesPersons) => {
             this.salesPersons = new FilterViewmodel(salesPersons, this.salesPersonsFields).filterItems;
         });
     }
     // Tags
-    _getTags() {
+    _setTags() {
         this._transactionService.getTags(1).then((tags) => {
             this.tags = new FilterViewmodel(tags, this.tagsFields).filterItems;
         });
     }
     //Branches
-    _getBranches() {
+    _setBranches() {
         this._transactionService.getBranches().then((branches) => {
             this.branches = new FilterViewmodel(branches, this.branchFields).filterItems;
         });
     }
     //OnHoldCodes
-    _getOnHoldCodes() {
+    _setOnHoldCodes() {
         this._transactionService.getOnHoldCodes().then((onHoldCodes) => {
             this.onHoldCodes = new FilterViewmodel(onHoldCodes, this.onHoldCodeFields).filterItems;
         });
     }
     //CommissionCodes
-    _getCommissionCodes() {
+    _setCommissionCodes() {
         this._transactionService.getCommissionCodes("NL").then((commissionCodes) => {
             this.commissionCodes = new FilterViewmodel(commissionCodes, this.commissionCodeFields).filterItems;
         });
     }
     //CustomerGroups
-    _getCustomerGroups() {
+    _setCustomerGroups() {
         this._transactionService.getCustomerGroups().then((customerGroups) => {
             this.customerGroups = new FilterViewmodel(customerGroups, this.customerGroupFields).filterItems;
         });
     }
-    handleCollectionChangeForRange(collection, model) {
-        this.searchRequest[model] = this._filterRequestService.getFilterRequestForCollectionRange(collection);
-    }
-    handleCollectionChangeForArray(collection, model) {
-        this.searchRequest[model] = this._filterRequestService.getFilterRequestForCollectionArray(collection);
-    }
-    handleDateRangeChange(dates, model) {
-        let startDate = dates[0];
-        let endDate = dates[1];
-        this.searchRequest[model] = this._filterRequestService.getFilterRequestForDateRange(startDate, endDate);
-    }
-    onFilterButtonClick() {
-        this.searchService.searchTransactions();
-    }
 }
 TransactionFilterContentOrderComponent.decorators = [
     { type: Component, args: [{
@@ -10800,7 +12776,7 @@ TransactionFilterContentOrderComponent.decorators = [
                 template: `
     <div class="transaction-filter-content-order-wrapper">
 
-      <!--Orderdatum: range picker werkt, alleen output filter niet goed?-->
+      <!--Orderdatum-->
       <co-filter-item
         [placeholder]="'ORDER_DATE' | localize"
         [expanded]="true"
@@ -10808,45 +12784,49 @@ TransactionFilterContentOrderComponent.decorators = [
         <co-input-date-range
           [startDate]="transStartDate"
           [endDate]="transEndDate"
-          (dateRangeChange)="handleDateRangeChange($event, 'rangeTransDate')"
+          (dateRangeChange)="this.filterRequestService.handleDateRangeChange($event, 'rangeTransDate')"
           [placeholder]="'SELECT_DATE' | localize">
         </co-input-date-range>
       </co-filter-item>
 
-      <!--Leverdatum: range picker werkt, alleen output filter niet goed?-->
+      <!--Leverdatum-->
       <co-filter-item
         [placeholder]="'DELIVERY_DATE' | localize"
         [expanded]="true"
         [customContent]="true">
         <co-input-date-range
-          [startDate]="transStartDate"
-          [endDate]="transEndDate"
-          (dateRangeChange)="handleDateRangeChange($event, 'deliveryDateRange')"
+          [startDate]="deliveryStartDate"
+          [endDate]="deliveryEndDate"
+          (dateRangeChange)="this.filterRequestService.handleDateRangeChange($event, 'deliveryDateRange')"
           [placeholder]="'SELECT_DATE' | localize">
         </co-input-date-range>
       </co-filter-item>
 
-      <!--Filiaal (werkt)-->
+      <!--Filiaal-->
       <co-filter-item
         [placeholder]="'BRANCH' | localize"
         [expanded]="true"
         [collection]="branches"
         [searchPlaceholder]="searchPlaceholder | localize"
-        (collectionChange)="handleCollectionChangeForRange($event, 'rangeBranchId')"
+        [showMoreLabel]="showMoreLabel | localize"
+        [showLessLabel]="showLessLabel | localize"
+        (collectionChange)="this.filterRequestService.handleCollectionChangeForRange($event, 'rangeBranchId')"
       >
       </co-filter-item>
 
-      <!--Verkoper (werkt)-->
+      <!--Verkoper-->
       <co-filter-item
         [placeholder]="'HANDLED_BY' | localize"
         [expanded]="true"
         [collection]="salesPersons"
         [searchPlaceholder]="searchPlaceholder | localize"
-        (collectionChange)="handleCollectionChangeForRange($event, 'rangeSalesPerson')"
+        [showMoreLabel]="showMoreLabel | localize"
+        [showLessLabel]="showLessLabel | localize"
+        (collectionChange)="this.filterRequestService.handleCollectionChangeForRange($event, 'rangeSalesPerson')"
       >
       </co-filter-item>
 
-      <!--Eigen referentie (werkt)-->
+      <!--Eigen referentie-->
       <co-filter-item
         [placeholder]="'OWN_REFERENCE' | localize"
         [customContent]="true"
@@ -10855,60 +12835,68 @@ TransactionFilterContentOrderComponent.decorators = [
                        [placeholder]="'OWN_REFERENCE' | localize"></co-input-text>
       </co-filter-item>
 
-      <!--Tags (kan niet testen, geen data met tags)-->
+      <!--Tags-->
       <co-filter-item
         [placeholder]="'TAGS' | localize"
         [expanded]="true"
         [collection]="tags"
         [searchPlaceholder]="searchPlaceholder | localize"
-        (collectionChange)="handleCollectionChangeForRange($event, 'tagRange')"
+        [showMoreLabel]="showMoreLabel | localize"
+        [showLessLabel]="showLessLabel | localize"
+        (collectionChange)="this.filterRequestService.handleCollectionChangeForRange($event, 'tagRange')"
       >
         <co-input-text [(model)]="searchRequest.tagRange" [placeholder]="'TAGS' | localize"></co-input-text>
       </co-filter-item>
 
-      <!--On hold codes (kan niet testen. kan niet terugvinden in API output)-->
+      <!--On hold codes-->
       <co-filter-item
         [placeholder]="'ON_HOLD' | localize"
         [expanded]="true"
         [collection]="onHoldCodes"
         [searchPlaceholder]="searchPlaceholder | localize"
-        (collectionChange)="handleCollectionChangeForRange($event,'rangeOnHoldCodes')"
+        [showMoreLabel]="showMoreLabel | localize"
+        [showLessLabel]="showLessLabel | localize"
+        (collectionChange)="this.filterRequestService.handleCollectionChangeForRange($event,'rangeOnHoldCodes')"
       >
         <co-input-text [(model)]="searchRequest.tagRange" [placeholder]="'TAGS' | localize"></co-input-text>
       </co-filter-item>
 
-      <!--Order definitief (werkt nog niet. aanpassen wanneer domain een boolean heeft)-->
+      <!--Order definitief-->
       <co-filter-item
         [placeholder]="'ORDER_DEFINITIVE' | localize"
         [customContent]="true"
         [expanded]="true">
         <co-input-checkbox
-          [(model)]="!!searchRequest.transactionDefinitive"
+          [model]="searchRequest.transactionDefinitive === 'J'"
+          (modelChange)="this.filterRequestService.handleCheckboxValueChangeForString($event, 'transactionDefinitive')"
           [label]="'ORDER_DEFINITIVE' | localize"></co-input-checkbox>
       </co-filter-item>
 
-      <!--Commissiecode (kan niet testen, commissiecode niet terug te vinden in data)-->
+      <!--Commissiecode-->
       <co-filter-item
         [placeholder]="'COMMISSION_CODE' | localize"
         [expanded]="true"
         [collection]="commissionCodes"
         [searchPlaceholder]="searchPlaceholder | localize"
-        (collectionChange)="handleCollectionChangeForArray($event, 'commissionCodes')"
+        [showMoreLabel]="showMoreLabel | localize"
+        [showLessLabel]="showLessLabel | localize"
+        (collectionChange)="this.filterRequestService.handleCollectionChangeForArray($event, 'commissionCodes')"
       >
       </co-filter-item>
 
-      <!--Inactieve transacties (kan niet testen. geen inactieve transacties in data)-->
+      <!--Inactieve transacties-->
       <co-filter-item
         [placeholder]="'INACTIVE_TRANSACTIONS' | localize"
         [customContent]="true"
         [expanded]="true">
         <co-input-checkbox
-          [(model)]="searchRequest.transactionShowInactive"
+          [model]="searchRequest.active === false"
+          (modelChange)="searchRequest.active = !$event"
           [label]="'INACTIVE_TRANSACTIONS' | localize"
         ></co-input-checkbox>
       </co-filter-item>
 
-      <!--Klantnaam: nog niet af:   geen API call?-->
+      <!--Klantnaam: voorlopig met input-text. todo: aanpassen als er een collection API is-->
       <co-filter-item
         [placeholder]="'CUSTOMER_NAME' | localize"
         [customContent]="true"
@@ -10917,13 +12905,15 @@ TransactionFilterContentOrderComponent.decorators = [
                        [placeholder]="'CUSTOMER_NAME' | localize"></co-input-text>
       </co-filter-item>
 
-      <!--Klantgroep:  (werkt nog niet, customergroups niet terug te vinden in data)-->
+      <!--Klantgroep-->
       <co-filter-item
         [placeholder]="'CUSTOMER_GROUP' | localize"
         [expanded]="true"
         [collection]="customerGroups"
         [searchPlaceholder]="searchPlaceholder | localize"
-        (collectionChange)="handleCollectionChangeForRange($event, 'customerGroupId')">
+        [showMoreLabel]="showMoreLabel | localize"
+        [showLessLabel]="showLessLabel | localize"
+        (collectionChange)="this.filterRequestService.handleCollectionChangeForSingleValue($event, 'customerGroupId')">
       </co-filter-item>
       <div class="filter-button-container">
         <co-button class="clickable" [label]="'Filter'" (click)="onFilterButtonClick()"></co-button>
@@ -10933,13 +12923,11 @@ TransactionFilterContentOrderComponent.decorators = [
             },] }
 ];
 TransactionFilterContentOrderComponent.ctorParameters = () => [
-    { type: TransactionService },
     { type: TransactionSearchService },
-    { type: FilterRequestService }
+    { type: FilterRequestService },
+    { type: TransactionService }
 ];
 TransactionFilterContentOrderComponent.propDecorators = {
-    searchRequest: [{ type: Input }],
-    searchRequestChange: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-filter-content-order",] }]
 };
 
@@ -11024,16 +13012,13 @@ TransactionFilterComponent.decorators = [
     </div>
     <div #filterItems class="transaction-category-filter-wrapper" data-ride="carousel">
       <div #orderFilter class="transaction-filter-category-content">
-        <co-transaction-filter-content-order [(searchRequest)]="searchService.searchRequest"
-                                             (searchRequestChange)="searchService.searchRequest = $event"></co-transaction-filter-content-order>
+        <co-transaction-filter-content-order></co-transaction-filter-content-order>
       </div>
       <div #logisticsFilter class="transaction-filter-category-content">
-        <co-transaction-filter-content-logistics [(searchRequest)]="searchService.searchRequest"
-                                                 (searchRequestChange)="searchService.searchRequest = $event"></co-transaction-filter-content-logistics>
+        <co-transaction-filter-content-logistics></co-transaction-filter-content-logistics>
       </div>
       <div #articleFilter class="transaction-filter-category-content">
-        <co-transaction-filter-content-article [(searchRequest)]="searchService.searchRequest"
-                                               (searchRequestChange)="searchService.searchRequest = $event"></co-transaction-filter-content-article>
+        <co-transaction-filter-content-article></co-transaction-filter-content-article>
       </div>
     </div>
   `,
@@ -11257,5 +13242,5 @@ TransactionLineGridModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { CheckoutComponent, CheckoutModule, ShoppingCartComponent, ShoppingCartModule, ShoppingCartPreviewComponent, ShoppingCartPreviewModule, TransactionComponent, TransactionHeaderComponent, TransactionHeaderDeliveryComponent, TransactionHeaderDeliveryModule, TransactionHeaderModule, TransactionHeaderOrderComponent, TransactionHeaderOrderModule, TransactionHeaderRelationComponent, TransactionHeaderRelationModule, TransactionLineComponent, TransactionLineGridComponent, TransactionLineGridModule, TransactionLineModule, TransactionLinesComponent, TransactionLinesModule, TransactionModule, TransactionQuickAccessComponent, TransactionQuickAccessModule, TransactionQuickAccessOrderConfirmationComponent, TransactionQuickAccessOrderConfirmationModule, TransactionQuickAccessReceivedGoodsComponent, TransactionQuickAccessReceivedGoodsModule, TransactionSearchComponent, TransactionSearchModule, TransactionService, TransactionTotalsComponent, TransactionTotalsModule, PendingReasonService as ɵa, DialogService as ɵb, RelationAddressTileModule as ɵba, TileModule as ɵbb, TileComponent as ɵbc, RelationAddressTileComponent as ɵbd, RelationAddressSelectComponent as ɵbe, BusinessObjectFactory as ɵbf, StepperModule as ɵbg, StepperComponent as ɵbh, StepperStepComponent as ɵbi, TransactionArticleTextModule as ɵbj, TransactionArticleTextComponent as ɵbk, TransactionArticleTextOverviewModule as ɵbl, TransactionArticleTextOverviewComponent as ɵbm, TransactionImageService as ɵbn, AvatarModule as ɵbo, AvatarComponent as ɵbp, DeliveryTypeTileModule as ɵbq, DeliveryTypeTileComponent as ɵbr, PaymentModule as ɵbs, PaymentTileModule as ɵbt, PaymentTileComponent as ɵbu, PaymentComponent as ɵbv, CheckoutOverviewRelationEditComponent as ɵbw, CheckoutOverviewDeliveryEditComponent as ɵbx, CheckoutOverviewDeliveryAddressComponent as ɵby, CheckOutRelationSuggestionsListComponent as ɵbz, OptionsService as ɵc, CheckOutRelationSuggestionsListItemComponent as ɵca, CheckoutLoginComponent as ɵcb, TransactionHeaderModule$1 as ɵcc, TransactionHeaderBlockModule as ɵcd, TransactionHeaderBlockComponent as ɵce, TransactionBaseComponent as ɵcf, TransactionHeaderPaymentModule as ɵcg, TransactionHeaderPaymentComponent as ɵch, TransactionHeaderComponent$1 as ɵci, TransactionLinesGridModule as ɵcj, TransactionBaseGridModule as ɵck, TransactionLineSidePanelModule as ɵcl, TransactionLineSidePanelDefaultModule as ɵcm, TransactionLinePriceModule as ɵcn, TransactionLinePriceComponent as ɵco, TransactionLineFieldsBaseComponent as ɵcp, TransactionLinePriceListModule as ɵcq, TransactionLinePriceListComponent as ɵcr, TransactionLineVatModule as ɵcs, TransactionLineVatComponent as ɵct, TransactionLineQuantityModule as ɵcu, TransactionLineQuantityComponent as ɵcv, TransactionLineLineDiscountModule as ɵcw, TransactionLineLineDiscountComponent as ɵcx, TransactionLineDeliveryMethodModule as ɵcy, TransactionLineDeliveryMethodComponent as ɵcz, DictionaryService as ɵd, TransactionLineDeliveryDateModule as ɵda, TransactionLineDeliveryDateComponent as ɵdb, TransactionLineReferenceModule as ɵdc, TransactionLineReferenceComponent as ɵdd, TransactionLineCommissionCodeModule as ɵde, TransactionLineCommissionCodeComponent as ɵdf, TransactionLineWarehouseModule as ɵdg, TransactionLineWarehouseComponent as ɵdh, TransactionLineDiscountAmountModule as ɵdi, TransactionLineDiscountAmountComponent as ɵdj, TransactionLineQuantumDiscountModule as ɵdk, TransactionLineQuantumDiscountComponent as ɵdl, TransactionLineSpecialDiscountModule as ɵdm, TransactionLineSpecialDiscountComponent as ɵdn, TransactionLineSidePanelDefaultComponent as ɵdo, TransactionReceivingGoodsHistoryModule as ɵdp, TransactionHistoryGridModule as ɵdq, TransactionHistoryGridStatusModule as ɵdr, TransactionHistoryGridStatusComponent as ɵds, TransactionHistoryGridComponent as ɵdt, TransactionReceivingGoodsHistoryComponent as ɵdu, TransactionReceivingGoodsDetailsModule as ɵdv, TransactionReceivingGoodsDetailsComponent as ɵdw, TransactionButtonBarModule as ɵdx, TransactionButtonBarComponent as ɵdy, TransactionMappingService as ɵdz, IOneConnectorAdapterService as ɵe, TransactionButtonBarButtonComponent as ɵea, TransactionConfirmationHistoryModule as ɵeb, TransactionConfirmationHistoryComponent as ɵec, TransactionLineSidePanelPurchaseModule as ɵed, TransactionLineSidePanelPurchaseComponent as ɵee, TransactionLineSidePanelComponent as ɵef, TransactionBaseGridComponent as ɵeg, TransactionGridBaseComponent as ɵeh, TransactionLinesGridComponent as ɵei, DiscountModule as ɵej, DiscountComponent as ɵek, TransactionQuickAccessOverviewModule as ɵel, TransactionQuickAccessOverviewComponent as ɵem, TransactionOrderConfirmationGridModule as ɵen, TransactionOrderConfirmationGridComponent as ɵeo, TransactionReceivedGoodsGridModule as ɵep, TransactionReceivedGoodsGridComponent as ɵeq, ViewModeButtonsModule as ɵer, ViewModeButtonsComponent as ɵes, TransactionGridModule as ɵet, TransactionGridComponent as ɵeu, TransactionSearchResultModule as ɵev, TransactionTileModule as ɵew, TransactionTileComponent as ɵex, TransactionSearchResultComponent as ɵey, TransactionSearchService as ɵez, CollectionCacheService as ɵf, TransactionFilterModule as ɵfa, TransactionFilterCategoriesModule as ɵfb, TransactionFilterCategoriesComponent as ɵfc, TransactionFilterContentOrderModule as ɵfd, TransactionFilterContentOrderComponent as ɵfe, FilterRequestService as ɵff, TransactionFilterContentLogisticsModule as ɵfg, TransactionFilterContentLogisticsComponent as ɵfh, TransactionFilterContentArticleModule as ɵfi, TransactionFilterContentArticleComponent as ɵfj, TransactionFilterComponent as ɵfk, CoreModule as ɵg, ConfirmationDialogModule as ɵh, PipeModule as ɵi, AppendPipe as ɵj, DeliveryTimePipe as ɵk, DateDurationPipe as ɵl, LocalizePipe as ɵm, CoCurrencyPipe as ɵn, SafeStylePipe as ɵo, SafeHtmlPipe as ɵp, ConfirmationDialogComponent as ɵq, DialogBaseComponent as ɵr, ImageDisplayComponent as ɵs, IconComponent as ɵt, IconCacheService as ɵu, CustomerGroupsComponent as ɵv, StockStatusIndicatorComponent as ɵw, RelationAddressModule as ɵx, RelationAddressComponent as ɵy, RelationAddressSelectModule as ɵz };
+export { CheckoutComponent, CheckoutModule, ShoppingCartComponent, ShoppingCartModule, ShoppingCartPreviewComponent, ShoppingCartPreviewModule, TransactionComponent, TransactionHeaderComponent, TransactionHeaderDeliveryComponent, TransactionHeaderDeliveryModule, TransactionHeaderModule, TransactionHeaderOrderComponent, TransactionHeaderOrderModule, TransactionHeaderRelationComponent, TransactionHeaderRelationModule, TransactionLineComponent, TransactionLineGridComponent, TransactionLineGridModule, TransactionLineModule, TransactionLinesComponent, TransactionLinesModule, TransactionModule, TransactionQuickAccessComponent, TransactionQuickAccessModule, TransactionQuickAccessOrderConfirmationComponent, TransactionQuickAccessOrderConfirmationModule, TransactionQuickAccessReceivedGoodsComponent, TransactionQuickAccessReceivedGoodsModule, TransactionSearchComponent, TransactionSearchModule, TransactionService, TransactionTotalsComponent, TransactionTotalsModule, PendingReasonService as ɵa, DialogService as ɵb, RelationAddressTileModule as ɵba, TileModule as ɵbb, TileComponent as ɵbc, RelationAddressTileComponent as ɵbd, RelationAddressSelectComponent as ɵbe, BusinessObjectFactory as ɵbf, StepperModule as ɵbg, StepperComponent as ɵbh, StepperStepComponent as ɵbi, TransactionArticleTextModule as ɵbj, TransactionArticleTextComponent as ɵbk, TransactionArticleTextOverviewModule as ɵbl, TransactionArticleTextOverviewComponent as ɵbm, TransactionImageService as ɵbn, AvatarModule as ɵbo, AvatarComponent as ɵbp, SharedService as ɵbq, SharedConnectorService as ɵbr, DeliveryTypeTileModule as ɵbs, DeliveryTypeTileComponent as ɵbt, PaymentModule as ɵbu, PaymentTileModule as ɵbv, PaymentTileComponent as ɵbw, PaymentComponent as ɵbx, PaymentService as ɵby, IOneConnectorAdapterService as ɵbz, OptionsService as ɵc, CheckoutOverviewRelationEditComponent as ɵca, CheckoutOverviewDeliveryEditComponent as ɵcb, CheckoutOverviewDeliveryAddressComponent as ɵcc, CheckOutRelationSuggestionsListComponent as ɵcd, CheckOutRelationSuggestionsListItemComponent as ɵce, CheckoutLoginComponent as ɵcf, TransactionHeaderModule$1 as ɵcg, TransactionHeaderBlockModule as ɵch, TransactionHeaderBlockComponent as ɵci, TransactionBaseComponent as ɵcj, TransactionHeaderPaymentModule as ɵck, TransactionHeaderPaymentComponent as ɵcl, TransactionHeaderComponent$1 as ɵcm, TransactionLinesGridModule as ɵcn, TransactionBaseGridModule as ɵco, TransactionLineSidePanelModule as ɵcp, TransactionLineSidePanelDefaultModule as ɵcq, TransactionLinePriceModule as ɵcr, TransactionLinePriceComponent as ɵcs, TransactionLineFieldsBaseComponent as ɵct, TransactionLinePriceListModule as ɵcu, TransactionLinePriceListComponent as ɵcv, TransactionLineVatModule as ɵcw, TransactionLineVatComponent as ɵcx, TransactionLineQuantityModule as ɵcy, TransactionLineQuantityComponent as ɵcz, DictionaryService as ɵd, TransactionLineLineDiscountModule as ɵda, TransactionLineLineDiscountComponent as ɵdb, TransactionLineDeliveryMethodModule as ɵdc, TransactionLineDeliveryMethodComponent as ɵdd, TransactionLineDeliveryDateModule as ɵde, TransactionLineDeliveryDateComponent as ɵdf, TransactionLineReferenceModule as ɵdg, TransactionLineReferenceComponent as ɵdh, TransactionLineCommissionCodeModule as ɵdi, TransactionLineCommissionCodeComponent as ɵdj, TransactionLineWarehouseModule as ɵdk, TransactionLineWarehouseComponent as ɵdl, TransactionLineDiscountAmountModule as ɵdm, TransactionLineDiscountAmountComponent as ɵdn, TransactionLineQuantumDiscountModule as ɵdo, TransactionLineQuantumDiscountComponent as ɵdp, TransactionLineSpecialDiscountModule as ɵdq, TransactionLineSpecialDiscountComponent as ɵdr, TransactionLineSidePanelDefaultComponent as ɵds, TransactionReceivingGoodsHistoryModule as ɵdt, TransactionHistoryGridModule as ɵdu, TransactionHistoryGridStatusModule as ɵdv, TransactionHistoryGridStatusComponent as ɵdw, TransactionHistoryGridComponent as ɵdx, TransactionReceivingGoodsHistoryComponent as ɵdy, TransactionReceivingGoodsDetailsModule as ɵdz, TransactionConnectorService as ɵe, TransactionReceivingGoodsDetailsComponent as ɵea, ArticleService as ɵeb, ArticleConnectorService as ɵec, TransactionButtonBarModule as ɵed, TransactionButtonBarComponent as ɵee, TransactionMappingService as ɵef, TransactionButtonBarButtonComponent as ɵeg, TransactionConfirmationHistoryModule as ɵeh, TransactionConfirmationHistoryComponent as ɵei, TransactionLineSidePanelPurchaseModule as ɵej, TransactionLineSidePanelPurchaseComponent as ɵek, TransactionEventService as ɵel, TransactionLineSidePanelComponent as ɵem, TransactionBaseGridComponent as ɵen, TransactionGridBaseComponent as ɵeo, TransactionLinesGridComponent as ɵep, DiscountModule as ɵeq, DiscountComponent as ɵer, TransactionQuickAccessOverviewModule as ɵes, TransactionQuickAccessOverviewComponent as ɵet, TransactionOrderConfirmationGridModule as ɵeu, TransactionOrderConfirmationGridComponent as ɵev, TransactionReceivedGoodsGridModule as ɵew, TransactionReceivedGoodsGridComponent as ɵex, ViewModeButtonsModule as ɵey, ViewModeButtonsComponent as ɵez, CollectionCacheService as ɵf, TransactionGridModule as ɵfa, TransactionGridComponent as ɵfb, TransactionSearchResultModule as ɵfc, TransactionTileModule as ɵfd, TransactionTileComponent as ɵfe, TransactionSearchGridModule as ɵff, TransactionSearchGridComponent as ɵfg, TransactionSearchResultComponent as ɵfh, TransactionSearchService as ɵfi, TransactionFilterModule as ɵfj, TransactionFilterCategoriesModule as ɵfk, TransactionFilterCategoriesComponent as ɵfl, TransactionFilterContentOrderModule as ɵfm, TransactionFilterContentOrderComponent as ɵfn, FilterRequestService as ɵfo, TransactionFilterContentLogisticsModule as ɵfp, TransactionFilterContentLogisticsComponent as ɵfq, TransactionFilterContentArticleModule as ɵfr, TransactionFilterContentArticleComponent as ɵfs, TransactionFilterComponent as ɵft, CoreModule as ɵg, ConfirmationDialogModule as ɵh, PipeModule as ɵi, AppendPipe as ɵj, DeliveryTimePipe as ɵk, DateDurationPipe as ɵl, LocalizePipe as ɵm, CoCurrencyPipe as ɵn, SafeStylePipe as ɵo, SafeHtmlPipe as ɵp, ConfirmationDialogComponent as ɵq, DialogBaseComponent as ɵr, ImageDisplayComponent as ɵs, IconComponent as ɵt, IconCacheService as ɵu, CustomerGroupsComponent as ɵv, StockStatusIndicatorComponent as ɵw, RelationAddressModule as ɵx, RelationAddressComponent as ɵy, RelationAddressSelectModule as ɵz };
 //# sourceMappingURL=colijnit-transaction.js.map