@colijnit/transaction 12.1.8 → 12.1.9

package/fesm2015/colijnit-transaction.js

@@ -12,6 +12,7 @@ import { TransactionInfoResponse } from '@colijnit/transactionapi/build/model/tr
 import { ResolvePendingLineReasonRequest } from '@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo';
 import { CustomerFullObject } from '@colijnit/transactionapi/build/model/customer-full-object.bo';
 import { RelationPrivacySetting } from '@colijnit/transactionapi/build/model/relation-privacy-setting.bo';
+import { DeliveryMethod } from '@colijnit/transactionapi/build/model/delivery-method.bo';
 import { GetPostalCodeRetrievalOutputParams } from '@colijnit/transactionapi/build/model/get-postal-code-retrieval-output-params';
 import { RelationListObject } from '@colijnit/transactionapi/build/model/relation-list-object.bo';
 import { CoDomainValue } from '@colijnit/transactionapi/build/model/co-domain-value.bo';
@@ -33,9 +34,10 @@ import { JsonFieldFieldDecorator } from '@colijnit/transactionapi/build/factory/
 import { ComplexArrayDecorator as ComplexArrayDecorator$1 } from '@colijnit/transactionapi/build/factory/decorators/complex-array.decorator';
 import { ImageUtils } from '@colijnit/transactionapi/build/utils/image-utils';
 import { TransactionLineInfo } from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
+import { CashRegister } from '@colijnit/transactionapi/build/model/cash-register';
 import { SetTransactionDeliveryOptionsRequest } from '@colijnit/transactionapi/build/model/set-transaction-delivery-options-request.bo';
 import { RelationStatus } from '@colijnit/transactionapi/build/enum/relation-status.enum';
-import { FormMasterService, FormComponent, CoDialogModule, ButtonModule, InputComboBoxModule, InputTextModule, FormModule, InputRadioButtonModule, IconModule, InputCheckboxModule, InputDatePickerModule, InputNumberPickerModule, CoDialogPromptModule, MultiSelectListModule, DropDownModule, PopupModule, CoSidebarModule, CoGridModule, CoRichTextEditorModule, Carousel3dModule, InputTextareaModule, InputListboxModule, ColumnAlign, SimpleGridModule } from '@colijnit/corecomponents_v12';
+import { FormMasterService, FormComponent, CoDialogModule, ButtonModule, InputComboBoxModule, InputTextModule, FormModule, InputRadioButtonModule, IconModule, InputCheckboxModule, InputListboxModule, DropDownModule, InputTextComponent, CollapsibleModule, InputDatePickerModule, InputNumberPickerModule, PriceDisplayPipeModule, CoDialogPromptModule, MultiSelectListModule, PopupModule, CoSidebarModule, CoGridModule, CoRichTextEditorModule, Carousel3dModule, InputTextareaModule, ColumnAlign, SimpleGridModule } 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';
@@ -45,15 +47,14 @@ import { BusinessObjectUtils } from '@colijnit/transactionapi/build/utils/busine
 import { FunctionUtils } from '@colijnit/transactionapi/build/utils/function-utils';
 import { Address } from '@colijnit/transactionapi/build/model/address.bo';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { CommonModule } 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 { DeliveryMethod } from '@colijnit/transactionapi/build/model/delivery-method.bo';
 
 var LanguageCode;
 (function (LanguageCode) {
@@ -138,23 +139,31 @@ class Dictionary {
                 "ADD_ARTICLE_LINE_DOWN": "Artikelregel onder toevoegen",
                 "ADD_ARTICLE_TEXT_LINE_UP": "Tekstregel boven toevoegen",
                 "ADD_ARTICLE_TEXT_LINE_DOWN": "Tekstregel onder toevoegen",
+                "ADD_DELIVERY_OPTION": "Voeg een leveroptie toe",
                 "ADD_DISCOUNTS": "Korting toevoegen",
+                "ADD_REFERENCE": "Voeg referentie toe",
+                "ADD_REMARK": "Voeg een opmerking toe",
                 "ADDRESS": "Adres",
                 "ADDRESSES": "Adressen",
                 "ADDRESS_ADD": "Adres toevoegen",
                 "ADDRESS_CHANGE": "Adres wijzigen",
+                "ADMINISTRATIVE_MANAGER": "Administratief verantwoordelijke",
                 "ALWAYS_SHOW_LOGISTICS_POPUP": "Controleer magazijn en commissiecode",
                 "ARTICLE": "Artikel",
                 "ARTICLE_DESCRIPTION": "Artikelomschrijving",
                 "ARTICLE_IN_OUT_COLLECTION": "Status van artikel is '|~'. Weet u zeker dat u door wilt gaan?",
                 "ARTICLE_NR": "Artikelnummer",
+                "ARTICLE_NR_SUPPLIER": "Artikelnr leverancier",
                 "ARTICLE_UNKNOWN": "Onbekend artikel",
                 "ASSEMBLY_COSTS": "Montagekosten",
                 "ASSEMBLY_DATE": "Montagedatum",
+                "ASSEMBLY_TIME": "Montagetijd",
                 "AMOUNT": "Aantal",
                 "AVAILABLE_STOCK": "Bechikbaar",
                 "BACK": "Terug",
                 "BACK_TO_STOCK_LINES": "Terug naar voorraadregels",
+                "BRANCH": "Filiaal",
+                "BUSINESS_RULE_DISCOUNT": "Business rule korting",
                 "CANCEL": "Annuleren",
                 "CANNOT_CHANGE_NEGATIVE_QUANTITY": "Een negatieve voorraad kan niet gewijzigd worden.",
                 "CART": "Winkelwagen",
@@ -165,6 +174,7 @@ class Dictionary {
                 "COMPANY": "Bedrijf",
                 "COMPANY_NAME": "Bedrijfsnaam",
                 "COMMISSION_CODE": "Commisiecode",
+                "CONTACT_DETAILS": "Contactgegevens",
                 "CONTINUE": "Volgende",
                 "CONTINUE_ORDER_WHILE_STOCK_AVAILABLE_PLEASE_CONFIRM": "U heeft gekozen voor het bestellen van artikelen terwijl er nog voorraad aanwezig is. Wilt u verdergaan?",
                 "CONTINUE_WITHOUT_ACCOUNT": "Ga door zonder account",
@@ -172,6 +182,8 @@ class Dictionary {
                 "COUNTRY": "Land",
                 "CREATE_ACCOUNT": "Maak een account aan",
                 "CREATE_ACCOUNT_IN_2_MIN": "Maak binnen 2 minuten een account aan.",
+                "CUSTOMER": "Klant",
+                "CUSTOMER_GROUP": "Klantgroep",
                 "DATE_OF_BIRTH": "Geboortedatum",
                 "DELETE_TRANSACTION_LINE": "verwijderen",
                 "DELETE_TRANSACTION_LINE_HINT": "Verwijderen transactieregel",
@@ -182,20 +194,27 @@ class Dictionary {
                 "DELIVERY_ADDRESS_ADD": "Bezorgadres toevoegen",
                 "DELIVERY_ADDRESS_CHANGE": "Bezorgadres wijzigen",
                 "DELIVERY_COSTS": "Bezorgkosten",
+                "DELIVERY_DATA": "Levergegevens",
                 "DELIVERY_DATE": "Leverdatum",
                 "DELIVERY_DATE_FINAL": "Definitieve leverdatum",
                 "DELIVERY_DIRECT": "Direct leverbaar",
                 "DELIVERY_LOCATION": "Bezorgingslocatie",
                 "DELIVERY_OPTIONS": "Leveropties",
-                "DELIVERY_METHOD2": "Levermethode",
+                "DELIVERY_METHOD": "Levermethode",
                 "DELIVERY_MOMENT": "Levermoment",
                 "DELIVERY_OPTARTICLE_NRIONS": "Bezorgopties",
                 "DELIVERY_TIME_PERIOD": "Levertijd",
                 "DESCRIPTION": "Omschrijving",
                 "DETAILS": "Details",
                 "DISCOUNT": "Korting",
+                "DISCOUNTS": "Kortingen",
                 "DISCOUNT_AMOUNT": "Kortingsbedrag",
                 "DISCOUNT_PERCENTAGE": "Kortings %",
+                "DOWNPAYMENT": "Aanbetaling",
+                "DOWNPAYMENT_PERCENTAGE": "Aan te betalen percentage",
+                "DOWNPAYMENT_AMOUNT": "Aan te betalen bedrag",
+                "DOWNPAYMENT_BY_BR": "Berekend door BR",
+                "DOWNPAYMENT_ON_DELIVERY": "Rembours",
                 "DROPSHIPMENT": "Dropshipment",
                 "ECONOMICAL_STOCK": "Later beschikbaar",
                 "EDIT_CART": "Wijzig winkelwagen",
@@ -203,22 +222,30 @@ class Dictionary {
                 "EXISTING_CUSTOMERS": "Bestaande klanten",
                 "EXPECTED_DELIVERY_DATE": "Verwachte bezorgdatum",
                 "EXPECTED_DELIVERY_WEEK": "Verwachte leverweek",
+                "FABRICATION_COST": "Fabricageprijs",
+                "FABRICATION_COST_LINE_TOTAL": "Fabricageprijs regeltotaal",
                 "FEMALE": "Vrouw",
                 "FIRST_NAME": "Voornaam",
                 "GOOD_DESCRIPTION": "Artikelomschrijving",
                 "HOUSE_NO": "Huisnummer",
                 "HOUSE_NO_ADDITION": "Huisnummer toevoeging",
+                "IN_OUT_COLLECTION": "In-uit-collectie",
                 "INVITE_TO_ACCOUNT": "Uitnodigen voor account",
                 "INVOICE_ADDRESS": "Factuuradres",
                 "INVOICE_ADDRESS_ADD": "Factuuradres toevoegen",
                 "INVOICE_ADDRESS_CHANGE": "Factuuradres wijzigen",
+                "LAST_EDITED_DATE": "Datum laatste wijziging",
+                "LAST_EDITED_USER": "Gebruiker laatste wijziging",
                 "LAST_NAME": "Achternaam",
                 "LINE_NEEDS_COMMISSION_CODE": "De commisiecode ontbreekt. Vul de commissiecode in.",
                 "LOGIN": "Inloggen",
                 "LOGIN_DETAILS": "Inloggegevens",
+                "LOGISTICS_AND_PLANNING": "Logistiek & planning",
                 "MALE": "Man",
                 "MARKETING": "Marketing",
+                "MODIFICATION_TIME": "Bewerkingstijd",
                 "NAME": "Naam",
+                "NET_LINE_TOTAL": "Regeltotaal",
                 "NETT": "Netto",
                 "NEW_AT": "Nieuw bij ",
                 "NEW_LOCATION": "Nieuwe locatie",
@@ -230,17 +257,21 @@ class Dictionary {
                 "ON_DATE": "Op datum",
                 "OPEN_SHOPPING_CART": "Open winkelwagen",
                 "ORDER_DATE": "Orderdatum",
+                "ORDER_DATA": "Ordergegevens",
                 "ORDER_GROSS": "Ordertotaal bruto",
                 "ORDER_NET": "Ordertotaal netto",
                 "ORDER_NUMBER": "Ordernummer",
+                "ORDER_RULESET": "Orderregelset",
                 "ORDER_TYPE": "Type bestelling",
+                "OTHER": "Overig",
                 "OVERVIEW": "Overzicht",
                 "OWN_REFERENCE": "Eigen referentie",
                 "PAID_DOWN2": "Aanbetaald",
                 "PART_DELIVERIES": "Deelleveringen",
                 "PASSWORD": "Wachtwoord",
+                "PAY": "Betalen",
                 "PAYMENT": "Betaling",
-                "PERSONAL_DATA": "Persoonlijke gegevens",
+                "PERSONAL_DATA": "Basisgegevens",
                 "PHONE_NO": "Telefoonnummer",
                 "PHYSICAL_STOCK": "Fysieke voorraad",
                 "POSTAL_CODE": "Postcode",
@@ -248,6 +279,7 @@ class Dictionary {
                 "PREFIX": "Tussenvoegsel",
                 "PRICE": "Prijs",
                 "PRICE_LIST": "Prijslijst",
+                "PRICING": "Prijzen",
                 "PRIVACY_PREFERENCES": "Privacyvoorkeuren",
                 "PRIVATE_PERSON": "Particulier",
                 "PRODUCT": "Product",
@@ -262,10 +294,11 @@ class Dictionary {
                 "QUANTITY_CANNOT_BE_LESS_THAN_RECEIVED": "Het aantal moet gelijk zijn aan het aantal ontvangen.",
                 "QUANTITY_CANNOT_BE_MORE_THAN_RECEIVED": "Het aantal moet gelijk zijn aan het aantal ontvangen",
                 "QUANTUM_DISCOUNT": "Kwantumkorting",
+                "REFERENCE": "Referentie",
                 "REFERENCE_RELATION": "Ref. relatie",
                 "REMARKS": "Opmerkingen",
                 "SALUTATION": "Aanhef",
-                "SAME_AS_DELIVERY": "Hetzelfde als afleveradres",
+                "SAME_AS_DELIVERY": "Hetzelfde als bezorgadres",
                 "SAVE": "Opslaan",
                 "SELECT": "Selecteren",
                 "SERVICE_NUMBER": "Servicenummer",
@@ -281,18 +314,22 @@ class Dictionary {
                 "STOCK_AVAILABLE_CHANGE_WAREHOUSE_OR_COMMISSIONCODE": "Er is voldoende voorraad. Verander magazijn en/of commissiecode",
                 "SUBTOTAL": "Subtotaal",
                 "SUGGESTIONS": "Suggesties",
+                "SUPPLIER": "Leverancier",
                 "SURCHARGE_AMOUNT": "Toeslag",
                 "STATE": "Status",
                 "STREET": "Straatnaam",
                 "TEXT_ARTICLE_BOUND": "Text bij artikel |~",
                 "TOTAL_AMOUNT": "Totaalbedrag",
-                "TOTAL_GROSS": "Totaal bruto",
                 "TOTAL_ASSEMBLY_TIME": "Totale montagetijd",
+                "TOTAL_GROSS": "Totaal bruto",
+                "TOTAL_LINE_DISCOUNT": "Totale regelkorting",
                 "TRANSACTION_DISCOUNT": "Totale transactie korting",
                 "TRANSACTION_DISCOUNT_PERC": "% Trans. korting",
                 "TRANSACTION_PRICE_DECLARATION": "Order prijsverklaring",
                 "TRANSACTION_SUM_I": "Ordertotaal incl. BTW",
                 "TRANSACTION_TOTAL": "Transactie totaal",
+                "TRANSPORT_COST": "Transportkosten",
+                "TRANSPORT_COST_LINE_TOTAL": "Transportkosten regeltotaal",
                 "UNKNOWN": "Onbekend",
                 "UNKNOWN_ADDRESS_CHECK_IT": "Onbekend adres",
                 "VAT": "Btw",
@@ -300,7 +337,7 @@ class Dictionary {
                 "VALUE": "Waarde",
                 "WHERE_ARE_YOU_LOOKING_FOR": "Waar ben je naar op zoek?",
                 "WAREHOUSE": "Magazijn",
-                "YOUR_DATA": "Uw gegevens",
+                "YOUR_DATA": "Gegevens",
                 "STANDARD_TEXTS": "Standaardteksten",
                 "ARTICLE_BOUND_TEXT": "Artikelgebonden tekst",
                 "FOR_DOCUMENTS": "Bestemd voor documenten",
@@ -315,21 +352,29 @@ class Dictionary {
                 "ADD_ARTICLE_LINE_DOWN": "Add article line down",
                 "ADD_ARTICLE_TEXT_LINE_UP": "Add text line up",
                 "ADD_ARTICLE_TEXT_LINE_DOWN": "Add text line down",
+                "ADD_DELIVERY_OPTION": "Add delivery option",
                 "ADD_DISCOUNTS": "Add discount",
+                "ADD_REFERENCE": "Add reference",
+                "ADD_REMARK": "Add remark",
                 "ADDRESS": "Address",
                 "ADDRESSES": "Addresses",
                 "ADDRESS_ADD": "Add address",
                 "ADDRESS_CHANGE": "Change address",
+                "ADMINISTRATIVE_MANAGER": "Administrative manager",
                 "ALWAYS_SHOW_LOGISTICS_POPUP": "Check warehouse and commissioncode",
                 "ARTICLE": "Article",
                 "ARTICLE_DESCRIPTION": "Article description",
                 "ARTICLE_IN_OUT_COLLECTION": "Status of article is '|~'. Are you sure to proceed?",
                 "ARTICLE_NR": "Article number",
+                "ARTICLE_NR_SUPPLIER": "Artikelnr supplier",
                 "ARTICLE_UNKNOWN": "Article unknown",
                 "ASSEMBLY_COSTS": "Assembly costs",
                 "ASSEMBLY_DATE": "Assembly date",
+                "ASSEMBLY_TIME": "Assembly time",
                 "AMOUNT": "Amount",
                 "BACK": "Back",
+                "BRANCH": "Branch",
+                "BUSINESS_RULE_DISCOUNT": "Business rule discount",
                 "CANCEL": "Cancel",
                 "CANNOT_CHANGE_NEGATIVE_QUANTITY": "A negative supply cannot be changed.",
                 "CART": "Cart",
@@ -340,6 +385,7 @@ class Dictionary {
                 "COMPANY": "Company",
                 "COMPANY_NAME": "Company name",
                 "COMMISSION_CODE": "Commission code",
+                "CONTACT_DETAILS": "Contactdetails",
                 "CONTINUE": "Next",
                 "CONTINUE_ORDER_WHILE_STOCK_AVAILABLE_PLEASE_CONFIRM": "You have chosen to order articles while stock is still available. Do you wish to proceed?",
                 "CONTINUE_WITHOUT_ACCOUNT": "Continue without an account",
@@ -347,6 +393,8 @@ class Dictionary {
                 "COUNTRY": "Country",
                 "CREATE_ACCOUNT": "Create an account",
                 "CREATE_ACCOUNT_IN_2_MIN": "Create an account in 2 minutes.",
+                "CUSTOMER": "Customer",
+                "CUSTOMER_GROUP": "Customergroup",
                 "DATE_OF_BIRTH": "Date of birth",
                 "DELETE_TRANSACTION_LINE": "Delete transaction line verwijderen?",
                 "DELETE_TRANSACTION_LINE_HINT": "Delete transaction line",
@@ -356,42 +404,57 @@ class Dictionary {
                 "DELIVERY_ADDRESS_ADD": "Add delivery address",
                 "DELIVERY_ADDRESS_CHANGE": "Change delivery address",
                 "DELIVERY_COSTS": "Delivery costs",
+                "DELIVERY_DATA": "Deliverydata",
                 "DELIVERY_DATE": "Delivery date",
                 "DELIVERY_DATE_FINAL": "Final delivery date",
                 "DELIVERY_DIRECT": "Direct delivery",
                 "DELIVERY_LOCATION": "Delivery location",
                 "DELIVERY_OPTIONS": "Delivery options",
-                "DELIVERY_METHOD2": "Delivery method",
+                "DELIVERY_METHOD": "Delivery method",
                 "DELIVERY_MOMENT": "Delivery moment",
                 "DELIVERY_OPTARTICLE_NRIONS": "Delivery options",
                 "DELIVERY_TIME_PERIOD": "Delivery time period",
                 "DESCRIPTION": "Description",
                 "DETAILS": "Details",
                 "DISCOUNT": "Discount",
+                "DISCOUNTS": "Discounts",
                 "DISCOUNT_AMOUNT": "Discount amount",
                 "DISCOUNT_PERCENTAGE": "Discount %",
+                "DOWNPAYMENT": "Downpayment",
+                "DOWNPAYMENT_PERCENTAGE": "Percentage to be paid",
+                "DOWNPAYMENT_AMOUNT": "Amount to be paid",
+                "DOWNPAYMENT_BY_BR": "Calculated by BR",
+                "DOWNPAYMENT_ON_DELIVERY": "On delivery",
                 "DROPSHIPMENT": "Dropshipment",
                 "EDIT_CART": "Edit cart",
                 "EMAIL_ADDRESS": "E-mailadres",
                 "EXISTING_CUSTOMERS": "Existing customers",
                 "EXPECTED_DELIVERY_DATE": "Expected delivery date",
                 "EXPECTED_DELIVERY_WEEK": "Expected delivery week",
+                "FABRICATION_COST": "Fabricationcost",
+                "FABRICATION_COST_LINE_TOTAL": "Fabricationcost linetotal",
                 "FEMALE": "Female",
                 "FIRST_NAME": "First name",
                 "GOOD_DESCRIPTION": "Article description",
                 "HOUSE_NO": "Housenumber",
                 "HOUSE_NO_ADDITION": "Housenumber addition",
+                "IN_OUT_COLLECTION": "In-out-collection",
                 "INVITE_TO_ACCOUNT": "Invite account",
                 "INVOICE_ADDRESS": "Invoice address",
                 "INVOICE_ADDRESS_ADD": "Add invoice address",
                 "INVOICE_ADDRESS_CHANGE": "Change invoice address",
+                "LAST_EDITED_DATE": "Date last mutation",
+                "LAST_EDITED_USER": "User last mutation",
                 "LAST_NAME": "Last name",
                 "LINE_NEEDS_COMMISSION_CODE": "Line needs a commission code",
                 "LOGIN": "Login",
                 "LOGIN_DETAILS": "Login details",
+                "LOGISTICS_AND_PLANNING": "Logistics & planning",
                 "MALE": "Male",
                 "MARKETING": "Marketing",
+                "MODIFICATION_TIME": "Modification time",
                 "NAME": "Name",
+                "NET_LINE_TOTAL": "Linetotal",
                 "NETT": "Net",
                 "NEW_AT": "New at ",
                 "NEW_LOCATION": "New location",
@@ -403,15 +466,19 @@ class Dictionary {
                 "ON_DATE": "On date",
                 "OPEN_SHOPPING_CART": "Open shopping cart",
                 "ORDER_DATE": "Order date",
+                "ORDER_DATA": "Orderdata",
                 "ORDER_GROSS": "Total gross amount",
                 "ORDER_NET": "Total net amount",
                 "ORDER_NUMBER": "Order number",
+                "ORDER_RULESET": "Orderruleset",
                 "ORDER_TYPE": "Order type",
+                "OTHER": "Other",
                 "OVERVIEW": "Overview",
                 "OWN_REFERENCE": "Own reference",
                 "PAID_DOWN2": "Prepaid",
                 "PART_DELIVERIES": "Partial deliveries",
                 "PASSWORD": "Password",
+                "PAY": "Pay",
                 "PAYMENT": "Payment",
                 "PERSONAL_DATA": "Personal data",
                 "PHONE_NO": "Telephone number",
@@ -420,12 +487,14 @@ class Dictionary {
                 "PREFIX": "Prefix",
                 "PRICE": "Price",
                 "PRICE_LIST": "Pricelist",
+                "PRICING": "Pricing",
                 "PRIVACY_PREFERENCES": "Privacy preferences",
                 "PRIVATE_PERSON": "Private",
                 "PRODUCT": "Product",
                 "PRODUCT_TYPE": "Product type",
                 "QUANTITY_CANNOT_BE_ZERO_OR_EMPTY": "Quantity cannot be zero or empty",
                 "QUANTUM_DISCOUNT": "Quantum discount",
+                "REFERENCE": "Reference",
                 "REFERENCE_RELATION": "Ref. relation",
                 "REMARKS": "Remarks",
                 "SALUTATION": "Salutation",
@@ -445,17 +514,21 @@ class Dictionary {
                 "STOCK_AVAILABLE_CHANGE_WAREHOUSE_OR_COMMISSIONCODE": "Not enough supply. Change warehouse and/or commissioncode",
                 "SUBTOTAL": "Subtotal",
                 "SUGGESTIONS": "Suggestions",
+                "SUPPLIER": "Supplier",
                 "SURCHARGE_AMOUNT": "Surcharge",
                 "STATE": "STATUS",
                 "STREET": "Streetname",
                 "TOTAL_AMOUNT": "Total amount",
-                "TOTAL_GROSS": "Gross total",
                 "TOTAL_ASSEMBLY_TIME": "Total assembly time",
+                "TOTAL_GROSS": "Gross total",
+                "TOTAL_LINE_DISCOUNT": "Total linediscount",
                 "TRANSACTION_DISCOUNT": "Total transaction discount",
                 "TRANSACTION_DISCOUNT_PERC": "% Trans. discount",
                 "TRANSACTION_PRICE_DECLARATION": "Transaction price declaration",
                 "TRANSACTION_SUM_I": "Ordertotal incl VAT",
                 "TRANSACTION_TOTAL": "Transaction total",
+                "TRANSPORT_COST": "Transportcosts",
+                "TRANSPORT_COST_LINE_TOTAL": "Transportcosts linetotal",
                 "UNKNOWN": "unknown",
                 "UNKNOWN_ADDRESS_CHECK_IT": "Unknown address",
                 "VALUE": "Value",
@@ -1329,7 +1402,7 @@ class IOneConnectorAdapterService {
             });
         });
     }
-    getDocumentContent(id, thumbnail) {
+    getDocumentContent(id, thumbnail = true) {
         return new Promise((resolve, reject) => {
             return this.connector.getDocumentContent(id, thumbnail).then((result) => {
                 if (result.validationResult && result.validationResult.success) {
@@ -1485,6 +1558,17 @@ class IOneConnectorAdapterService {
             });
         });
     }
+    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) => {
@@ -1546,7 +1630,7 @@ class IOneConnectorAdapterService {
             return new Promise((resolve, reject) => {
                 return this.connector.getDeliveryMethods().then((result) => {
                     if (result.validationResult && result.validationResult.success) {
-                        resolve(result.resultObjects);
+                        resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(DeliveryMethod, result.resultObjects));
                     }
                     else {
                         reject(result.validationMessagesAsString);
@@ -1560,7 +1644,7 @@ class IOneConnectorAdapterService {
             return new Promise((resolve, reject) => {
                 return this.connector.getDeliveryOptions().then((result) => {
                     if (result.validationResult && result.validationResult.success) {
-                        resolve(result.resultObjects);
+                        resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(DeliveryMethod, result.resultObjects));
                     }
                     else {
                         reject(result.validationMessagesAsString);
@@ -1574,7 +1658,7 @@ class IOneConnectorAdapterService {
             return new Promise((resolve, reject) => {
                 return this.connector.addRelationToTransaction(uuid, relationId).then((result) => {
                     if (result.validationResult && result.validationResult.success) {
-                        resolve(result.resultObject);
+                        resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
                     }
                     else {
                         reject(result.validationMessagesAsString);
@@ -1588,7 +1672,7 @@ class IOneConnectorAdapterService {
             return new Promise((resolve, reject) => {
                 return this.connector.setTransactionDeliveryOptions(transactionDeliveryOptionsRequest).then((result) => {
                     if (result.validationResult && result.validationResult.success) {
-                        resolve(result.resultObject);
+                        resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
                     }
                     else {
                         reject(result.validationMessagesAsString);
@@ -1946,6 +2030,7 @@ class PendingReasonService {
         this.applicationUser = false;
         this.currentTransaction = new TransactionInfoResponse();
         this.relation = new CustomerFullObject();
+        this.deliveryOptions = new SetTransactionDeliveryOptionsRequest();
         this.articleAmount = 0;
     }
     init(options) {
@@ -2152,6 +2237,9 @@ class TransactionService extends PendingReasonService {
             return yield this.connector.getArticleFullObject(goodId);
         });
     }
+    getDocumentContent(id) {
+        return this.connector.getDocumentContent(id);
+    }
     getGoodIdFromArticleNr(sku) {
         return __awaiter(this, void 0, void 0, function* () {
             return yield this.connector.getGoodIdFromArticleNr(sku);
@@ -2162,6 +2250,11 @@ class TransactionService extends PendingReasonService {
             return yield this.connector.getCountry(countryCode);
         });
     }
+    getCashRegisters() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.connector.getCashRegisters(undefined, 1);
+        });
+    }
     getRelationNumber(relationId) {
         return __awaiter(this, void 0, void 0, function* () {
             return this.connector.getRelationNumber(relationId);
@@ -2611,46 +2704,57 @@ class CheckoutComponent {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.checkoutRelation && this.stepRelation) {
                 const valid = this.checkoutRelation.submit();
-                this.stepRelation.completed = valid;
-                if (valid) {
-                    this.saveRelation();
-                }
+                this.stepRelation.completed = yield this.saveRelation();
+                // if (valid) {
+                //   this.saveRelation();
+                // }
             }
         });
     }
     handleDeliveryValidation() {
-        if (this.checkoutDelivery && this.stepDelivery) {
-            const valid = this.checkoutDelivery.submit();
-            this.stepDelivery.completed = valid;
-            if (valid) {
-                this.handleSaveDelivery();
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.checkoutDelivery && this.stepDelivery) {
+                const valid = this.checkoutDelivery.submit();
+                this.stepDelivery.completed = yield this.handleSaveDelivery();
+                // if (valid) {
+                //   this.handleSaveDelivery();
+                // }
             }
+        });
+    }
+    handlePaymentValidation() {
+        if ( /*this.checkoutDelivery && */this.stepPayment) {
+            this.stepPayment.completed = true;
+        }
+    }
+    handleOverviewValidation() {
+        if ( /*this.checkoutDelivery && */this.stepOverview) {
+            this.stepOverview.completed = true;
         }
     }
+    handleFinishStep() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if ( /*this.checkoutDelivery && */this.stepPay) {
+                this.stepPay.completed = true;
+                const response = yield this.service.saveTransaction();
+                if (response && response.isSuccess) {
+                    // const commitResponse: DataServiceResponseData = await this.service.commit();
+                    // if (commitResponse && commitResponse.validationResult && commitResponse.validationResult.success) {
+                    this.transactionFinished.next(this.service.currentTransaction.transactionInfo);
+                    // }
+                }
+                else {
+                    yield this._dialogService.showError("Opslag bezorging mislukt");
+                }
+            }
+        });
+    }
     saveRelation() {
         return this.service.saveRelation();
     }
     handleSaveDelivery() {
         return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve, reject) => {
-                this.service.setTransactionDeliveryOptions().then((response) => __awaiter(this, void 0, void 0, function* () {
-                    if (response) {
-                        const response = yield this.service.saveTransaction();
-                        if (response && response.isSuccess) {
-                            const commitResponse = yield this.service.commit();
-                            if (commitResponse && commitResponse.validationResult && commitResponse.validationResult.success) {
-                                this.transactionFinished.next(this.service.currentTransaction.transactionInfo);
-                            }
-                        }
-                    }
-                    else {
-                        yield this._dialogService.showError("Opslag bezorging mislukt");
-                    }
-                    resolve(true);
-                })).catch((reason) => {
-                    this._dialogService.showError("Opslag transactie mislukt");
-                });
-            });
+            return this.service.setTransactionDeliveryOptions();
         });
     }
 }
@@ -2658,16 +2762,30 @@ CheckoutComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-checkout",
                 template: `
-    <co-stepper [finishButtonLabel]="'CHECKOUT_FINISH' | localize" (finishStep)="handleDeliveryValidation()">
+    <co-stepper [finishButtonLabel]="'CHECKOUT_FINISH' | localize" (finishStep)="handleFinishStep()">
       <co-stepper-step #stepRelation [index]="1" [label]="'YOUR_DATA' | localize" (validateStep)="handleRelationValidation()">
-        <co-checkout-overview-relation-edit #checkoutRelation [(relation)]="service.relation" (relationChange)="service.relation = $event"
+        <co-checkout-overview-relation-edit #checkoutRelation *ngIf="stepRelation.show" [(relation)]="service.relation" [deliveryOptionsRequest]="service.deliveryOptions"
+                                            (relationChange)="service.relation = $event"
         ></co-checkout-overview-relation-edit>
       </co-stepper-step>
-      <co-stepper-step #stepDelivery [index]="2" [label]="'DELIVERY' | localize">
-        <co-checkout-overview-delivery-edit #checkoutDelivery *ngIf="service.deliveryOptions" [(relation)]="service.relation" [deliveryOptionsRequest]="service.deliveryOptions"
+      <co-stepper-step #stepDelivery [index]="2" [label]="'DELIVERY' | localize" (validateStep)="handleDeliveryValidation()">
+        <co-checkout-overview-delivery-edit #checkoutDelivery *ngIf="stepDelivery.show" [deliveryOptionsRequest]="service.deliveryOptions"
                                             [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>
+      <div class="co-checkout-right-panel">
+        <div class="co-checkout-right-panel-relation">
+            <co-seller-information [relationId]="sellerId"></co-seller-information>
+        </div>
+        <co-shopping-cart-preview [showCheckoutButton]="false" [withoutBorder]="true"></co-shopping-cart-preview>
+      </div>
     </co-stepper>
   `,
                 encapsulation: ViewEncapsulation.None
@@ -2681,16 +2799,47 @@ CheckoutComponent.ctorParameters = () => [
 CheckoutComponent.propDecorators = {
     stepRelation: [{ type: ViewChild, args: ["stepRelation",] }],
     stepDelivery: [{ type: ViewChild, args: ["stepDelivery",] }],
+    stepPayment: [{ type: ViewChild, args: ["stepPayment",] }],
+    stepOverview: [{ type: ViewChild, args: ["stepOverview",] }],
+    stepPay: [{ type: ViewChild, args: ["stepPay",] }],
     checkoutRelation: [{ type: ViewChild, args: ["checkoutRelation",] }],
     checkoutDelivery: [{ type: ViewChild, args: ["checkoutDelivery",] }],
+    checkoutPayment: [{ type: ViewChild, args: ["checkoutPayment",] }],
+    sellerId: [{ type: Input }],
     transactionFinished: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-checkout",] }]
 };
 
+/** AUTO GENERATED FILE. DO NOT CHANGE.. OR YOU WILL SUFFER THE CONSEQUENCES OF YOUR ACTIONS **/
+var Icon;
+(function (Icon) {
+    Icon["ArrowPointDown"] = "arrow_point_down";
+    Icon["ArrowPointLeft"] = "arrow_point_left";
+    Icon["ArrowPointRight"] = "arrow_point_right";
+    Icon["CalendarDay"] = "calendar_day";
+    Icon["Cancel"] = "cancel";
+    Icon["CashRegister"] = "cash_register";
+    Icon["DeliveryTruck"] = "delivery_truck";
+    Icon["EditPencil"] = "edit_pencil";
+    Icon["IdealLogo"] = "ideal_logo";
+    Icon["MasterDetail"] = "master_detail";
+    Icon["PlusRound"] = "plus_round";
+    Icon["SidePanel"] = "side_panel";
+    Icon["Tag"] = "tag";
+    Icon["ThickLines"] = "thick_lines";
+    Icon["ThinLines"] = "thin_lines";
+    Icon["TriangleDown"] = "triangle_down";
+    Icon["TriangleUp"] = "triangle_up";
+    Icon["Truck"] = "truck";
+    Icon["Txt"] = "txt";
+})(Icon || (Icon = {}));
+
 class CheckoutOverviewRelationEditComponent {
-    constructor(_service, _formMaster) {
+    constructor(_service, _formMaster, _boFactory) {
         this._service = _service;
         this._formMaster = _formMaster;
+        this._boFactory = _boFactory;
+        this.icons = Icon;
         this.validSubmit = new EventEmitter();
         this.invalidSubmit = new EventEmitter();
         this.relationChange = new EventEmitter();
@@ -2702,6 +2851,13 @@ class CheckoutOverviewRelationEditComponent {
         this.relationSuggestions = [];
         this.showRelationSidebar = false;
         this.inviteToAccount = false;
+        this.addresses = [];
+        this.deliveryAddressIdx = 0;
+        this.invoiceAddressIdx = 0;
+        this.invoiceAddressSameAsDeliveryAddress = true;
+        this.editAddressType = AddressType.DeliveryAddress;
+        this.showSelectAddressDialog = false;
+        this.showCreateAddressDialog = false;
         this.relType = RelationNameKind;
         this.genderType = GenderType;
         this._relation = NULL_RELATION_OBJECT;
@@ -2754,6 +2910,70 @@ class CheckoutOverviewRelationEditComponent {
         // return this.relationForm.submit();
         return this._formMaster.submitSlaves();
     }
+    showNewAddressDialog(deliveryAddress = true) {
+        this.editAddressType = deliveryAddress ? AddressType.DeliveryAddress : AddressType.BillingAddress;
+        this.showCreateAddressDialog = true;
+    }
+    showEditAddressDialog(deliveryAddress = true) {
+        this.editAddressType = deliveryAddress ? AddressType.DeliveryAddress : AddressType.BillingAddress;
+        this.showSelectAddressDialog = true;
+    }
+    setIndexDeliveryAddress(idx) {
+        this.deliveryAddressIdx = idx;
+        this.editAddressType = AddressType.DeliveryAddress;
+        this.selectAddress(this.relation.addresses[idx]);
+    }
+    setIndexInvoiceAddress(idx) {
+        this.invoiceAddressIdx = idx;
+        this.editAddressType = AddressType.BillingAddress;
+        this.selectAddress(this.relation.addresses[idx]);
+    }
+    editAddress(addr) {
+        this.addressToEdit = this._boFactory.makeWithRawBackendData(Address, addr);
+        this.showEditAddressDialog();
+    }
+    checkSameAddress(checked) {
+        if (checked) {
+            this.editAddressType = AddressType.DeliveryAddress;
+            this.selectAddress(this.deliveryAddress);
+        }
+    }
+    saveNewAddress(address) {
+        address.addressType = this.editAddressType;
+        this.relation.addresses.push(address);
+        this.selectAddress(address);
+        this.showCreateAddressDialog = false;
+    }
+    saveAddress(address) {
+        const idx = this.relation.addresses.findIndex(a => a.nawNr === address.nawNr);
+        if (idx > -1) {
+            this.relation.addresses[idx] = this._boFactory.makeWithRawBackendData(Address, address);
+        }
+        this.showSelectAddressDialog = false;
+    }
+    selectAddress(address) {
+        if (!this.deliveryOptionsRequest) {
+            return;
+        }
+        if (!address) {
+            address = this._service.getFirstAddress(this.relation);
+        }
+        if (!address) {
+            return;
+        }
+        this._setCountryNameToAddress(address);
+        if (this.editAddressType === AddressType.DeliveryAddress) {
+            this.deliveryOptionsRequest.transactionAddress = address.nawNr;
+            this.deliveryAddress = address;
+            this.deliveryAddressIdx = this.relation.addresses.findIndex(a => a.nawNr === this.deliveryAddress.nawNr);
+        }
+        if (this.invoiceAddressSameAsDeliveryAddress || this.editAddressType !== AddressType.DeliveryAddress) {
+            this.deliveryOptionsRequest.invoiceAddress = address.nawNr;
+            this.invoiceAddress = address;
+            this.invoiceAddressIdx = this.relation.addresses.findIndex(a => a.nawNr === this.invoiceAddress.nawNr);
+        }
+        this.showSelectAddressDialog = false;
+    }
     preparePrimaryEmail() {
         if (this._relation) {
             this.emailAddress = this._relation.getLowestSequenceOfContactOptionsWithType(CommunicationType.Email);
@@ -2814,6 +3034,11 @@ class CheckoutOverviewRelationEditComponent {
         }
         this._relationNameChangeHandler.call(this);
     }
+    checkVisibilitySuggestions() {
+        if (this._relation.firstName && this._relation.familyName) {
+            this.hideSidebar();
+        }
+    }
     onRelationSuggestionClick(relationSuggested) {
         return __awaiter(this, void 0, void 0, function* () {
             if (relationSuggested) {
@@ -2836,8 +3061,11 @@ class CheckoutOverviewRelationEditComponent {
     showSidebar() {
         this.showRelationSidebar = true;
     }
+    // Hide sidebar with a little timeout to prevent missing the click
     hideSidebar() {
-        this.showRelationSidebar = false;
+        setTimeout(() => {
+            this.showRelationSidebar = false;
+        }, 200);
     }
     _initForm() {
         if (this.relationForm) {
@@ -2866,133 +3094,197 @@ class CheckoutOverviewRelationEditComponent {
             this.relationSuggestions = yield this._service.getRelationListObjects(relationRequest);
         });
     }
+    _setCountryNameToAddress(address) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (address.countryId && !address.countryName) {
+                const country = yield this._service.getCountry(address.countryId);
+                address.countryName = country.description;
+            }
+        });
+    }
 }
 CheckoutOverviewRelationEditComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-checkout-overview-relation-edit",
                 template: `
-    <co-form>
-      <div class="checkout-form-wrapper">
-        <div class="checkout-label-column">
-          <span>01</span>
-          <span class="label" [textContent]="'PERSONAL_DATA' | localize"></span>
-        </div>
-        <div class="checkout-data-column">
-          <div class="checkout-data-row">
-            <co-input-radio-button class="default-width"
-                                   [name]="'type'"
-                                   [label]="'PRIVATE_PERSON' | localize"
-                                   [value]="relType.Private"
-                                   [checked]="relation.type === relType.Private"
-                                   (modelChange)="changeRelationType(relType.Private)"
-            ></co-input-radio-button>
-            <co-input-radio-button class="default-width"
-                                   [name]="'type'"
-                                   [label]="'COMPANY' | localize"
-                                   [value]="relType.Company"
-                                   [(model)]="relation.type"
-                                   [checked]="relation.type === relType.Company"
-                                   (modelChange)="changeRelationType(relType.Company)"
-            ></co-input-radio-button>
-          </div>
-          <div class="checkout-data-row">
-            <relation-customer-groups [(model)]="relation.customerGroup" required></relation-customer-groups>
+    <div class="relation-edit-content">
+      <co-form>
+        <div class="checkout-form-wrapper">
+          <div class="checkout-label-column">
+            <span>01</span>
+            <span class="label" [textContent]="'PERSONAL_DATA' | localize"></span>
           </div>
-          <div *ngIf="relation.type === relType.Private" class="collapseable" @showHidePrivateRelationFields>
-            <div class="checkout-data-row">
-              <co-input-text
-                class="checkout-first-name"
-                [(model)]="relation.firstName"
-                [placeholder]="'FIRST_NAME' | localize"
-                (modelChange)="firstNameChange($event)"
-                [required]="true"
-              ></co-input-text>
-              <co-input-text
-                class="checkout-prefix-name default-width"
-                [(model)]="relation.prefix"
-                [placeholder]="'PREFIX' | localize"
-              ></co-input-text>
-              <co-input-text
-                class="checkout-last-name"
-                [(model)]="relation.familyName"
-                [placeholder]="'LAST_NAME' | localize"
-                (modelChange)="familyNameChange($event)"
-                [required]="true"></co-input-text>
-            </div>
+          <div class="checkout-data-column">
             <div class="checkout-data-row">
               <co-input-radio-button class="default-width"
-                                     [name]="'gender'"
-                                     [label]="'MALE' | localize"
-                                     [value]="genderType.Male"
-                                     [checked]="relation.gender === genderType.Male"
-                                     (modelChange)="changeGenderType(genderType.Male)"
-              ></co-input-radio-button>
-              <co-input-radio-button class="default-width"
-                                     [name]="'gender'"
-                                     [label]="'FEMALE' | localize "
-                                     [value]="genderType.Female"
-                                     [checked]="relation.gender === genderType.Female"
-                                     (modelChange)="changeGenderType(genderType.Female)"
+                                     [name]="'type'"
+                                     [label]="'PRIVATE_PERSON' | localize"
+                                     [value]="relType.Private"
+                                     [checked]="relation.type === relType.Private"
+                                     (modelChange)="changeRelationType(relType.Private)"
               ></co-input-radio-button>
               <co-input-radio-button class="default-width"
-                                     [name]="'gender'"
-                                     [label]="'UNKNOWN' | localize"
-                                     [value]="genderType.Unspecified"
-                                     [checked]="relation.gender === genderType.Unspecified"
-                                     (modelChange)="changeGenderType(genderType.Unspecified)"
+                                     [name]="'type'"
+                                     [label]="'COMPANY' | localize"
+                                     [value]="relType.Company"
+                                     [(model)]="relation.type"
+                                     [checked]="relation.type === relType.Company"
+                                     (modelChange)="changeRelationType(relType.Company)"
               ></co-input-radio-button>
             </div>
             <div class="checkout-data-row">
-              <co-input-date [placeholder]="'DATE_OF_BIRTH' | localize " [(model)]="dateOfBirth" [required]="true"></co-input-date>
-              <co-input-text [(model)]="phoneNumber.value" [placeholder]="'PHONE_NO' | localize " [required]="true"></co-input-text>
+              <relation-customer-groups [(model)]="relation.customerGroup" required></relation-customer-groups>
+            </div>
+            <div *ngIf="relation.type === relType.Private" class="collapseable" @showHidePrivateRelationFields>
+              <div class="checkout-data-row">
+                <co-input-text
+                  class="checkout-first-name"
+                  [(model)]="relation.firstName"
+                  [placeholder]="'FIRST_NAME' | localize"
+                  (modelChange)="firstNameChange($event)"
+                  (blur)="checkVisibilitySuggestions()"
+                  [required]="true"
+                ></co-input-text>
+                <co-input-text
+                  class="checkout-prefix-name default-width"
+                  [(model)]="relation.prefix"
+                  [placeholder]="'PREFIX' | localize"
+                ></co-input-text>
+                <co-input-text
+                  class="checkout-last-name"
+                  [(model)]="relation.familyName"
+                  [placeholder]="'LAST_NAME' | localize"
+                  (modelChange)="familyNameChange($event)"
+                  (blur)="checkVisibilitySuggestions()"
+                  [required]="true"></co-input-text>
+              </div>
+              <div class="checkout-data-row">
+                <co-input-radio-button class="default-width"
+                                       [name]="'gender'"
+                                       [label]="'MALE' | localize"
+                                       [value]="genderType.Male"
+                                       [checked]="relation.gender === genderType.Male"
+                                       (modelChange)="changeGenderType(genderType.Male)"
+                ></co-input-radio-button>
+                <co-input-radio-button class="default-width"
+                                       [name]="'gender'"
+                                       [label]="'FEMALE' | localize "
+                                       [value]="genderType.Female"
+                                       [checked]="relation.gender === genderType.Female"
+                                       (modelChange)="changeGenderType(genderType.Female)"
+                ></co-input-radio-button>
+                <co-input-radio-button class="default-width"
+                                       [name]="'gender'"
+                                       [label]="'UNKNOWN' | localize"
+                                       [value]="genderType.Unspecified"
+                                       [checked]="relation.gender === genderType.Unspecified"
+                                       (modelChange)="changeGenderType(genderType.Unspecified)"
+                ></co-input-radio-button>
+              </div>
+              <div class="checkout-data-row">
+                <co-input-date [placeholder]="'DATE_OF_BIRTH' | localize " [(model)]="dateOfBirth" [required]="true"></co-input-date>
+              </div>
+            </div>
+            <div *ngIf="relation?.type === relType.Company" class="checkout-data-row collapseable" @showHideCompanyRelationFields>
+              <co-input-text [(model)]="relation.familyName" [placeholder]="'COMPANY_NAME' | localize" [required]="true"></co-input-text>
             </div>
+            <co-relation-address [address]="editFirstAddress" [showButtons]="false"></co-relation-address>
           </div>
-          <div *ngIf="relation?.type === relType.Company" class="checkout-data-row collapseable" @showHideCompanyRelationFields>
-            <co-input-text [(model)]="relation.familyName" [placeholder]="'COMPANY_NAME' | localize" [required]="true"></co-input-text>
+          <div class="checkout-data-column">
+            <div class="checkout-data-row">
+              <co-carousel-3d *ngIf="relation.addresses && relation.addresses.length > 1"
+                              [tileWidth]="200"
+                              [tileHeight]="100"
+                              [selectedIndex]="deliveryAddressIdx"
+                              (indexSelected)="setIndexDeliveryAddress($event)">
+                <co-relation-address-tile #carouselItem *ngFor="let address of relation.addresses; let index = index"
+                                          [address]="address"
+                                          [selected]="deliveryAddressIdx === index"
+                                          (editAddressClicked)="editAddress($event)"
+                ></co-relation-address-tile>
+              </co-carousel-3d>
+            </div>
+            <div class="checkout-data-row">
+              <div class="relation-address-new">
+                <icon class="relation-address-icon" [icon]="icons.ArrowPointRight"></icon>
+                <div [textContent]="'ADDRESS_ADD' | localize" (click)="showNewAddressDialog()"></div>
+              </div>
+            </div>
           </div>
-        </div>
-        <div class="checkout-label-column">
-          <span>02</span>
-          <span class="label" [textContent]="'DELIVERY_ADDRESS' | localize"></span>
-        </div>
-        <div class="checkout-data-column">
-          <co-relation-address [address]="editFirstAddress" [showButtons]="false"></co-relation-address>
-        </div>
-        <div class="checkout-label-column">
-          <span>03</span>
-          <span class="label" [textContent]="'LOGIN_DETAILS' | localize"></span>
-          <span class="label-description" [textContent]="'ACCOUNT_EXPLANATION' | localize"></span>
-        </div>
-        <div class="checkout-data-column">
-          <div class="checkout-data-row">
-            <co-input-text [(model)]="emailAddress.value" [placeholder]="'EMAIL_ADDRESS' | localize " [type]="'email'" [required]="true"></co-input-text>
+
+          <div class="checkout-label-column">
+            <span>02</span>
+            <span class="label" [textContent]="'INVOICE_ADDRESS' | localize"></span>
           </div>
-          <div *ngIf="!applicationUser" class="checkout-data-row">
-            <co-input-text [(model)]="accountPassword" [placeholder]="'PASSWORD' | localize " [type]="'password'" [required]="true"></co-input-text>
+          <div class="checkout-data-column">
+            <div class="checkout-data-row">
+              <co-input-checkbox [(model)]="invoiceAddressSameAsDeliveryAddress" (modelChange)="checkSameAddress($event)" [label]="'SAME_AS_DELIVERY' | localize"></co-input-checkbox>
+            </div>
+            <div class="overview-delivery-invoice-address" *ngIf="!invoiceAddressSameAsDeliveryAddress" @showHideInvoiceAddress>
+              <div class="checkout-data-row">
+                <co-carousel-3d *ngIf="relation.addresses && relation.addresses.length > 1"
+                                [tileWidth]="200"
+                                [tileHeight]="100"
+                                [selectedIndex]="invoiceAddressIdx"
+                                (indexSelected)="setIndexInvoiceAddress($event)">
+                  <co-relation-address-tile #carouselItem *ngFor="let address of relation.addresses; let index = index"
+                                            [address]="address"
+                                            [selected]="invoiceAddressIdx === index"
+                                            (editAddressClicked)="editAddress($event)"
+                  ></co-relation-address-tile>
+                </co-carousel-3d>
+              </div>
+              <div class="checkout-data-row">
+                <div class="relation-address-new">
+                  <icon class="relation-address-icon" [icon]="icons.ArrowPointRight"></icon>
+                  <div [textContent]="'ADDRESS_ADD' | localize" (click)="showNewAddressDialog()"></div>
+                </div>
+              </div>
+            </div>
           </div>
-          <div *ngIf="applicationUser" class="checkout-data-row">
-            <co-input-checkbox [label]="'INVITE_TO_ACCOUNT' | localize" [(model)]="inviteToAccount"></co-input-checkbox>
+          <div class="checkout-label-column">
+            <span>03</span>
+            <span class="label" [textContent]="'CONTACT_DETAILS' | localize"></span>
           </div>
-        </div>
-        <div class="checkout-label-column">
-          <span>04</span>
-          <span class="label" [textContent]="'PRIVACY_PREFERENCES' | localize"></span>
-        </div>
-        <div class="checkout-data-column">
-          <div class="two-column-grid">
-            <ng-container *ngFor="let privacySetting of privacySettings">
-              <co-input-checkbox class="first-column"
-                                 [label]="privacySetting.description"
-                                 [model]="isShared(privacySetting)"
-                                 (modelChange)="changePrivacySetting(privacySetting, $event)"
-              ></co-input-checkbox>
-              <span class="second-column" [textContent]="privacySetting.explanation"></span>
-            </ng-container>
+          <div class="checkout-data-column">
+            <div class="checkout-data-row">
+              <co-input-text [(model)]="phoneNumber.value" [placeholder]="'PHONE_NO' | localize " [required]="true"></co-input-text>
+            </div>
+            <div class="checkout-data-row">
+              <co-input-text [(model)]="emailAddress.value" [placeholder]="'EMAIL_ADDRESS' | localize " [type]="'email'" [required]="true"></co-input-text>
+            </div>
+<!--
+          </div>
+          <div class="checkout-label-column">
+            <span>04</span>
+            <span class="label" [textContent]="'PASSWORD' | localize"></span>
+            <span class="label-description" [textContent]="'ACCOUNT_EXPLANATION' | localize"></span>
+          </div>
+          <div class="checkout-data-column">
+-->
+            <div class="checkout-data-row">
+              <co-input-checkbox [label]="'INVITE_TO_ACCOUNT' | localize" [(model)]="inviteToAccount"></co-input-checkbox>
+            </div>
+          </div>
+          <div class="checkout-label-column">
+            <span>04</span>
+            <span class="label" [textContent]="'PRIVACY_PREFERENCES' | localize"></span>
+          </div>
+          <div class="checkout-data-column">
+            <div class="two-column-grid">
+              <ng-container *ngFor="let privacySetting of privacySettings">
+                <co-input-checkbox class="first-column"
+                                   [label]="privacySetting.description"
+                                   [model]="isShared(privacySetting)"
+                                   (modelChange)="changePrivacySetting(privacySetting, $event)"
+                ></co-input-checkbox>
+                <span class="second-column" [textContent]="privacySetting.explanation"></span>
+              </ng-container>
+            </div>
           </div>
         </div>
-      </div>
-    </co-form>
-
+      </co-form>
+    </div>
     <div class="suggestions-sidebar" *ngIf="showRelationSidebar" @showHideSidebar>
       <div class="relation-sidebar-header">
         <label class="checkout-label-h3" [textContent]="'SUGGESTIONS' | localize"></label>
@@ -3002,14 +3294,27 @@ CheckoutOverviewRelationEditComponent.decorators = [
         (suggestionSelected)="onRelationSuggestionClick($event)"
       ></co-checkout-relation-suggestions-list>
     </div>
-  `,
-                providers: [
-                    FormMasterService
-                ],
-                animations: [
-                    trigger("showHidePrivateRelationFields", [
-                        state("void", style({ height: 0 })),
-                        state("*", style({ height: "*" })),
+    <co-dialog *ngIf="showCreateAddressDialog">
+      <co-relation-address
+        (saveClick)="saveNewAddress($event)"
+        (cancelClick)="showCreateAddressDialog = false"
+      ></co-relation-address>
+    </co-dialog>
+    <co-dialog *ngIf="showSelectAddressDialog && addressToEdit">
+      <co-relation-address
+        [address]="addressToEdit"
+        (saveClick)="saveAddress($event)"
+        (cancelClick)="showSelectAddressDialog = false"
+      ></co-relation-address>
+    </co-dialog>
+  `,
+                providers: [
+                    FormMasterService
+                ],
+                animations: [
+                    trigger("showHidePrivateRelationFields", [
+                        state("void", style({ height: 0 })),
+                        state("*", style({ height: "*" })),
                         transition("void => *", animate("200ms ease-in-out")),
                         transition("* => void", animate("200ms ease-out"))
                     ]),
@@ -3023,6 +3328,12 @@ CheckoutOverviewRelationEditComponent.decorators = [
                         state("void", style({ transform: "translateX(100%)" })),
                         state("*", style({ transform: "translateX(0)" })),
                         transition("void <=> *", animate("200ms ease-in-out"))
+                    ]),
+                    trigger("showHideInvoiceAddress", [
+                        state("void", style({ height: 0, opacity: 0 })),
+                        state("*", style({ height: "*", opacity: 1 })),
+                        transition("void => *", animate("200ms ease-in-out")),
+                        transition("* => void", animate("200ms ease-out"))
                     ])
                 ],
                 encapsulation: ViewEncapsulation.None
@@ -3030,11 +3341,13 @@ CheckoutOverviewRelationEditComponent.decorators = [
 ];
 CheckoutOverviewRelationEditComponent.ctorParameters = () => [
     { type: TransactionService },
-    { type: FormMasterService }
+    { type: FormMasterService },
+    { type: BusinessObjectFactory }
 ];
 CheckoutOverviewRelationEditComponent.propDecorators = {
     relationForm: [{ type: ViewChild, args: [FormComponent, { static: true },] }],
     relation: [{ type: Input }],
+    deliveryOptionsRequest: [{ type: Input }],
     validSubmit: [{ type: Output }],
     invalidSubmit: [{ type: Output }],
     relationChange: [{ type: Output }],
@@ -3042,38 +3355,95 @@ CheckoutOverviewRelationEditComponent.propDecorators = {
 };
 
 /** AUTO GENERATED FILE. DO NOT CHANGE.. OR YOU WILL SUFFER THE CONSEQUENCES OF YOUR ACTIONS **/
-var Icon;
-(function (Icon) {
-    Icon["ArrowPointDown"] = "arrow_point_down";
-    Icon["ArrowPointLeft"] = "arrow_point_left";
-    Icon["ArrowPointRight"] = "arrow_point_right";
-    Icon["CalendarDay"] = "calendar_day";
-    Icon["Cancel"] = "cancel";
-    Icon["DeliveryTruck"] = "delivery_truck";
-    Icon["EditPencil"] = "edit_pencil";
-    Icon["PlusRound"] = "plus_round";
-    Icon["Tag"] = "tag";
-    Icon["ThickLines"] = "thick_lines";
-    Icon["ThinLines"] = "thin_lines";
-    Icon["Txt"] = "txt";
-})(Icon || (Icon = {}));
+const IconSvg = {
+    "arrow_point_down": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"-280 371 51 51\" enable-background=\"new -280 371 51 51\" ><path fill=\"#29363E\" d=\"M-248.3,392.2c0.3,0,0.6,0.1,0.8,0.3c0.5,0.5,0.5,1.2,0,1.6l-6.2,6.2c-0.2,0.2-0.5,0.3-0.8,0.3c-0.3,0-0.6-0.1-0.8-0.3l-6.2-6.2c-0.2-0.2-0.3-0.5-0.3-0.8c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3l5.4,5.4l5.4-5.4C-248.9,392.4-248.6,392.2-248.3,392.2z\"/></svg>",
+    "arrow_point_left": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51 51\" enable-background=\"new 0 0 51 51\" ><path fill=\"#484F5F\" d=\"M31.9,36.7l-14.7-9.6C17.1,27,17,26.9,17,26.7v-2.4c0-0.2,0.1-0.3,0.2-0.4l14.7-9.6c0.2-0.2,0.5-0.1,0.7,0.1l1.4,2.1c0.2,0.2,0.1,0.5-0.1,0.7l-12,7.8c-0.3,0.2-0.3,0.6,0,0.8l12,7.8c0.2,0.2,0.3,0.5,0.1,0.7l-1.4,2.1C32.4,36.8,32.1,36.8,31.9,36.7z\"/></svg>",
+    "arrow_point_right": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51 51\" enable-background=\"new 0 0 51 51\" ><path fill=\"#484F5F\" d=\"M19.1,14.3l14.7,9.6c0.1,0.1,0.2,0.2,0.2,0.4v2.4c0,0.2-0.1,0.3-0.2,0.4l-14.7,9.6c-0.2,0.2-0.5,0.1-0.7-0.1l-1.4-2.1c-0.2-0.2-0.1-0.5,0.1-0.7l12-7.8c0.3-0.2,0.3-0.6,0-0.8l-12-7.8c-0.2-0.2-0.3-0.5-0.1-0.7l1.4-2.1C18.6,14.2,18.9,14.2,19.1,14.3z\"/></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>",
+    "cash_register": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M35.39,18.12H14.62L10,29.66H40ZM23,19.29H27l.1,1.6H22.87Zm-.13,2h4.32l.12,1.81H22.72Zm-.15,2.3h4.62l.14,2.08h-4.9ZM17.9,19.29H22l-.16,1.6H17.54Zm-.46,2h4.32l-.18,1.81H17Zm-.53,2.3h4.62l-.2,2.08h-4.9Zm-1.16,5.06.55-2.42H27.49l.16,2.42ZM28,19.29H32.1l.36,1.6H28.2Zm.2,2h4.32L33,23.12H28.42Zm.23,2.3h4.62l.48,2.08h-4.9Zm.5,5.06-.24-2.42h5l.55,2.42Z\" fill=\"#484f60\"/><path d=\"M10,29.66v9.23H40V29.66Zm27.69,6.92H12.31V32H37.69Z\" fill=\"#484f60\"/><path d=\"M15.63,11.11v7.58H34.37V11.11Zm17.31,6.15H17.06V12.54H32.94Z\" fill=\"#484f60\"/></svg>",
+    "delivery_truck": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"15.35\" y=\"16.56\" width=\"15.14\" height=\"10.94\" transform=\"translate(-1.83 2.08) rotate(-5)\" fill=\"#484f60\"/><path d=\"M38.5,18.1l-6.9.61L32.41,28l-7.63.67a3.76,3.76,0,0,1,1.43,2.25l7.25-.63A3.83,3.83,0,0,1,41,29.6l1-.1-.52-6Zm.29,5.84-3.91.34a.51.51,0,0,1-.55-.46L34,20.1a.49.49,0,0,1,.45-.54l2.27-.2a.5.5,0,0,1,.48.25l2,3.59A.5.5,0,0,1,38.79,23.94Z\" fill=\"#484f60\"/><path d=\"M19.66,29.09a3.8,3.8,0,0,0-1,2.46l-.74.07-1.82-.94L16,29.41Z\" fill=\"#484f60\"/><path d=\"M34.56,30.62a2.74,2.74,0,1,0,2.49-3A2.73,2.73,0,0,0,34.56,30.62Z\" fill=\"#484f60\"/><path d=\"M19.74,31.91a2.74,2.74,0,1,0,2.49-3A2.74,2.74,0,0,0,19.74,31.91Z\" fill=\"#484f60\"/><rect x=\"7.96\" y=\"17.63\" width=\"5\" height=\"1\" transform=\"translate(-1.54 0.98) rotate(-5)\" fill=\"#484f60\"/><rect x=\"11.02\" y=\"29.71\" width=\"3\" height=\"1\" transform=\"translate(-2.59 1.21) rotate(-5)\" fill=\"#484f60\"/><rect x=\"9.48\" y=\"23.53\" width=\"4\" height=\"1\" transform=\"matrix(1, -0.09, 0.09, 1, -2.05, 1.09)\" fill=\"#484f60\"/></svg>",
+    "edit_pencil": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"12.54 38.16 12 37.62 14.85 29.64 20.52 35.31 12.54 38.16\" fill=\"#484f60\"/><rect x=\"16.33\" y=\"20.52\" width=\"17.99\" height=\"8.64\" transform=\"translate(-10.15 25.18) rotate(-45)\" fill=\"#484f60\"/><path d=\"M37.54,18.73,36,20.32l-6.11-6.1,1.59-1.59a1.55,1.55,0,0,1,2.2,0l3.91,3.9A1.55,1.55,0,0,1,37.54,18.73Z\" fill=\"#484f60\"/></svg>",
+    "ideal_logo": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 306.1 269.8\" style=\"enable-background:new 0 0 306.1 269.8;\" ><style type=\"text/css\">.st0{fill:#FFFFFF;}.st1{fill:#CC0066;}</style><g><g><path class=\"st0\" d=\"M0,20v229.8c0,11,9,20,20,20h137.3c103.8,0,148.8-58.1,148.8-135.2C306.1,57.9,261.1,0,157.3,0H20C9,0,0,9,0,20z\"/><path class=\"st1\" d=\"M91.9,56.4v169.8h73.9c67.1,0,96.2-37.9,96.2-91.5c0-51.3-29.1-91.1-96.2-91.1h-61.1C97.6,43.6,91.9,49.4,91.9,56.4z\"/><g><g><path d=\"M157.3,251.5H37.9c-10.6,0-19.2-8.6-19.2-19.2V37.6c0-10.6,8.6-19.2,19.2-19.2h119.4c113.3,0,130.2,72.9,130.2,116.3C287.5,210,241.2,251.5,157.3,251.5z M37.9,24.8c-7.1,0-12.8,5.7-12.8,12.8v194.7c0,7.1,5.7,12.8,12.8,12.8h119.4c79.8,0,123.8-39.2,123.8-110.4c0-95.6-77.6-109.9-123.8-109.9H37.9z\"/></g></g></g><g><path class=\"st0\" d=\"M117.9,111.8c2.6,0,5,0.4,7.3,1.2c2.3,0.8,4.2,2.1,5.9,3.7c1.6,1.7,2.9,3.8,3.9,6.2c0.9,2.5,1.4,5.4,1.4,8.8c0,3-0.4,5.7-1.1,8.2c-0.8,2.5-1.9,4.7-3.4,6.5c-1.5,1.8-3.4,3.2-5.7,4.3c-2.3,1-5,1.6-8.1,1.6h-17.5v-40.6H117.9z M117.3,144.9c1.3,0,2.5-0.2,3.8-0.6c1.2-0.4,2.3-1.1,3.2-2.1c0.9-1,1.7-2.2,2.3-3.8c0.6-1.6,0.9-3.4,0.9-5.7c0-2-0.2-3.9-0.6-5.5c-0.4-1.6-1.1-3.1-2-4.2s-2.1-2.1-3.6-2.7c-1.5-0.6-3.3-0.9-5.5-0.9h-6.4v25.6H117.3z\"/><path class=\"st0\" d=\"M172.5,111.8v7.5h-21.4v8.7h19.7v6.9h-19.7v9.9H173v7.5h-30.8v-40.6H172.5z\"/><path class=\"st0\" d=\"M203.1,111.8l15.2,40.6H209l-3.1-9h-15.2l-3.2,9h-9l15.3-40.6H203.1z M203.6,136.7l-5.1-14.9h-0.1l-5.3,14.9H203.6z\"/><path class=\"st0\" d=\"M232.8,111.8v33.1h19.8v7.5h-28.7v-40.6H232.8z\"/></g><g><circle cx=\"58.5\" cy=\"132.1\" r=\"18.7\"/></g><path d=\"M72.6,226.2L72.6,226.2c-15.7,0-28.3-12.7-28.3-28.3v-22.1c0-7.8,6.3-14.2,14.2-14.2h0c7.8,0,14.2,6.3,14.2,14.2V226.2z\"/></g></svg>",
+    "master_detail": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"22\" y=\"32.17\" width=\"18\" height=\"4\" transform=\"translate(62 68.33) rotate(180)\" fill=\"#484f60\"/><rect x=\"22\" y=\"26.17\" width=\"18\" height=\"4\" transform=\"translate(62 56.33) rotate(180)\" fill=\"#484f60\"/><rect x=\"22\" y=\"20.17\" width=\"18\" height=\"4\" transform=\"translate(62 44.33) rotate(180)\" fill=\"#484f60\"/><rect x=\"22\" y=\"14.17\" width=\"18\" height=\"4\" transform=\"translate(62 32.33) rotate(180)\" fill=\"#484f60\"/><rect x=\"10\" y=\"14.17\" width=\"10\" height=\"22\" transform=\"translate(30 50.33) rotate(180)\" fill=\"#484f60\"/></svg>",
+    "plus_round": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"-288 379 35 35\" enable-background=\"new -288 379 35 35\" ><path fill=\"#29363E\" d=\"M-270.5,381.5c-8.3,0-15,6.7-15,15c0,8.3,6.7,15,15,15s15-6.7,15-15C-255.5,388.2-262.2,381.5-270.5,381.5z M-261.1,397.3c0,0.9-0.7,1.6-1.6,1.6h-5.5v5.5c0,0.9-0.7,1.6-1.6,1.6h-1.6c-0.9,0-1.6-0.7-1.6-1.6v-5.5h-5.5c-0.9,0-1.6-0.7-1.6-1.6v-1.6c0-0.9,0.7-1.6,1.6-1.6h5.5v-5.5c0-0.9,0.7-1.6,1.6-1.6h1.6c0.9,0,1.6,0.7,1.6,1.6v5.5h5.5c0.9,0,1.6,0.7,1.6,1.6V397.3z\"/></svg>",
+    "side_panel": "<svg width=\"47px\" height=\"43px\" viewBox=\"0 0 47 43\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><defs><image width=\"47\" height=\"43\" xlink:href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAArCAYAAADottG6AAAABHNCSVQICAgIfAhkiAAAAHtJREFUWIXt18EJwCAQAEENKSNv60gVgVQYSBWpw3f6OHvQx3Kw8xcX0QNrRERJaqMDVhhPMZ5iPMV4ivEU4ynGU/bZhb3/5Xm/pc3v6yytHdPrq58RiPEUHywl9bUxnuKDpaS+NsZTUsennjapT95RSTGeYjzFeErq+AEBrixGEVJ5mAAAAABJRU5ErkJggg==\" /></defs><use xlink:href=\"#img_1\" fill=\"#FFFFFF\" stroke=\"none\" /></svg>",
+    "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>",
+    "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>",
+    "txt": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M31.42,40.17H13.87c-2.15,0-2.71-.56-2.71-2.72V12.88c0-2.15.56-2.71,2.71-2.71H25.48l8.66,8.88v3.43H32.8V19.6l-7.88-8.09H13.87c-1.37,0-1.37,0-1.37,1.37V37.45c0,1.37,0,1.37,1.37,1.37H31.42c1.38,0,1.38,0,1.38-1.37V35h1.34v2.43C34.14,39.61,33.58,40.17,31.42,40.17Z\" fill=\"#484f60\"/><path d=\"M25.2,10.84v6.44c0,1.78.27,2,2,2h6.23Z\" fill=\"#484f60\"/><path d=\"M19.14,24.27v9h19.7v-9Zm6.68,2.36h-1.9V32h-1.3V26.63h-1.9V25.54h5.1ZM30.4,32,29,29.74,27.55,32H26l2.19-3.34-2-3.07h1.52L29,27.6l1.26-2.06h1.5l-2,3.12L32,32Zm6.86-5.32h-1.9V32H34.07V26.63H32.16V25.54h5.1Z\" fill=\"#484f60\"/></svg>"
+};
+
+class IconCacheService {
+    constructor(_sanitizer) {
+        this._sanitizer = _sanitizer;
+        this._iconCache = {};
+        this.setIconCache();
+    }
+    /**
+     * All the icons as a large JSON object, from the all-icons.json file.
+     * The object has property keys that are the icon names, and property values with the data string of the actual svg icon.
+     */
+    get iconCache() {
+        return this._iconCache;
+    }
+    getIcon(iconName) {
+        if (iconName) {
+            return this._iconCache[iconName.toLowerCase()];
+        }
+    }
+    getIconAsBase64(iconName) {
+        const icon = IconSvg[iconName];
+        const base64Data = window.btoa(icon);
+        return this._sanitizer.bypassSecurityTrustUrl(`data:image/svg+xml;base64,${base64Data}`);
+    }
+    getRawIcon(iconName) {
+        if (iconName) {
+            return IconSvg[iconName.toLowerCase()];
+        }
+    }
+    setIconCache() {
+        for (const key in IconSvg) {
+            if (IconSvg.hasOwnProperty(key) && typeof IconSvg[key] !== "function") {
+                this._iconCache[key.toLowerCase()] = this._sanitizer.bypassSecurityTrustHtml(IconSvg[key]);
+            }
+        }
+    }
+}
+IconCacheService.ɵprov = i0.ɵɵdefineInjectable({ factory: function IconCacheService_Factory() { return new IconCacheService(i0.ɵɵinject(i1.DomSanitizer)); }, token: IconCacheService, providedIn: "root" });
+IconCacheService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+IconCacheService.ctorParameters = () => [
+    { type: DomSanitizer }
+];
 
 class CheckoutOverviewDeliveryEditComponent {
-    constructor(_dictionaryService, _formMasterService, _boFactory, service) {
+    constructor(_dictionaryService, _formMasterService, _boFactory, service, iconService) {
         this._dictionaryService = _dictionaryService;
         this._formMasterService = _formMasterService;
         this._boFactory = _boFactory;
         this.service = service;
+        this.iconService = iconService;
         this.icons = Icon;
-        this.relationChange = new EventEmitter();
         this.validSubmit = new EventEmitter();
         this.invalidSubmit = new EventEmitter();
+        this.deliveryTypes = [
+            { code: '1', description: 'Bezorgen', icon: this.icons.DeliveryTruck, price: 89 },
+            { code: '2', description: 'Bezorgen & monteren', icon: this.icons.CalendarDay, price: 119 },
+            { code: '3', description: 'Meenemen', icon: this.icons.Truck },
+        ];
         this.deliveryOptionList = [];
         this.deliveryOptions = [];
         this.deliveryOptionFields = { text: "description", value: "code" };
         this.deliveryMethods = [];
         this.deliveryMethodFields = { text: "description", value: "code" };
-        this.addLocationPopup = false;
+        this.deliveryTypeIdx = 0;
         this.changeLocationPopup = false;
         this.preferredDateOptions = [
             { text: "NOT_AFTER", value: ">" },
@@ -3083,42 +3453,15 @@ class CheckoutOverviewDeliveryEditComponent {
         this.preferredDate = new Date();
         this.marketing = [];
         this.marketingFields = { text: "description", value: "code" };
-        this.showSelectAddressDialog = false;
-        this.showCreateAddressDialog = false;
-        this.editAddressType = AddressType.DeliveryAddress;
-        this.addresses = [];
-        this.deliveryAddressIdx = 0;
-        this.invoiceAddressIdx = 0;
-        this.invoiceAddressSameAsDeliveryAddress = true;
-        this.columns = [];
         // TODO: Deze velden nog opnemen in Transaction!!
         this.deliveryDateFinal = false;
         this.assemblyDate = new Date();
         this.totalAssemblyTime = "";
         this.dropshipment = false;
-        this.columns.push({ field: "streetName", headerText: this._dictionaryService.get("STREET") }, { field: "houseNo", headerText: this._dictionaryService.get("HOUSE_NO") }, { field: "houseNoAddition", headerText: this._dictionaryService.get("HOUSE_NO_ADDITION") }, { field: "postalCode", headerText: this._dictionaryService.get("POSTAL_CODE"), allowFiltering: false }, { field: "city", headerText: this._dictionaryService.get("CITY") });
-    }
-    set relation(value) {
-        this._relation = value;
-        this.selectAddress();
-    }
-    get relation() {
-        return this._relation;
     }
     showClass() {
         return true;
     }
-    get billingAddress() {
-        if (this.transaction.transactionInfo.invoiceAddress === undefined) {
-            if (this.relation &&
-                this.relation.firstBillingAddress &&
-                this.relation.firstBillingAddress.isNotEmptyAddress()) {
-                this.transaction.transactionInfo.invoiceAddress = this.relation.firstBillingAddress;
-                this._setCountryNameToAddress(this.transaction.transactionInfo.invoiceAddress).then();
-            }
-        }
-        return this.transaction.transactionInfo.invoiceAddress;
-    }
     get deliveryDate() {
         if (this.transaction.transactionInfo.deliveryDate === undefined) {
             this.transaction.transactionInfo.deliveryDate = new Date();
@@ -3137,16 +3480,6 @@ class CheckoutOverviewDeliveryEditComponent {
     set preferredDeliveryDate(value) {
         this.transaction.transactionInfo.preferredDeliveryDate = value;
     }
-    newRelationAddress() {
-        if (this.relation) {
-            const address = new Address();
-            address.addressType = AddressType.DeliveryAddress;
-            address.startDate = new Date();
-            address.sequence = this.relation.getNextAddressSequence();
-            this.relation.addresses.push(address);
-            return address;
-        }
-    }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
             this.deliveryCosts = this.calculateDeliveryCosts();
@@ -3162,70 +3495,9 @@ class CheckoutOverviewDeliveryEditComponent {
             });
         });
     }
-    showNewAddressDialog(deliveryAddress = true) {
-        this.editAddressType = deliveryAddress ? AddressType.DeliveryAddress : AddressType.BillingAddress;
-        this.showCreateAddressDialog = true;
-    }
-    showEditAddressDialog(deliveryAddress = true) {
-        this.editAddressType = deliveryAddress ? AddressType.DeliveryAddress : AddressType.BillingAddress;
-        this.showSelectAddressDialog = true;
-    }
-    setIndexDeliveryAddress(idx) {
-        this.deliveryAddressIdx = idx;
-        this.editAddressType = AddressType.DeliveryAddress;
-        this.selectAddress(this.relation.addresses[idx]);
-    }
-    setIndexInvoiceAddress(idx) {
-        this.invoiceAddressIdx = idx;
-        this.editAddressType = AddressType.BillingAddress;
-        this.selectAddress(this.relation.addresses[idx]);
-    }
-    editAddress(addr) {
-        this.addressToEdit = this._boFactory.makeWithRawBackendData(Address, addr);
-        this.showEditAddressDialog();
-    }
-    checkSameAddress(checked) {
-        if (checked) {
-            this.editAddressType = AddressType.DeliveryAddress;
-            this.selectAddress(this.deliveryAddress);
-        }
-    }
     submit() {
         return this._formMasterService.submitSlaves();
     }
-    saveNewAddress(address) {
-        address.addressType = this.editAddressType;
-        this.relation.addresses.push(address);
-        this.selectAddress(address);
-        this.showCreateAddressDialog = false;
-    }
-    saveAddress(address) {
-        const idx = this.relation.addresses.findIndex(a => a.nawNr === address.nawNr);
-        if (idx > -1) {
-            this.relation.addresses[idx] = this._boFactory.makeWithRawBackendData(Address, address);
-        }
-        this.showSelectAddressDialog = false;
-    }
-    selectAddress(address) {
-        if (!address) {
-            address = this.service.getFirstAddress(this.relation);
-        }
-        if (!address) {
-            return;
-        }
-        this._setCountryNameToAddress(address);
-        if (this.editAddressType === AddressType.DeliveryAddress) {
-            this.deliveryOptionsRequest.transactionAddress = address.nawNr;
-            this.deliveryAddress = address;
-            this.deliveryAddressIdx = this.relation.addresses.findIndex(a => a.nawNr === this.deliveryAddress.nawNr);
-        }
-        if (this.invoiceAddressSameAsDeliveryAddress || this.editAddressType !== AddressType.DeliveryAddress) {
-            this.deliveryOptionsRequest.invoiceAddress = address.nawNr;
-            this.invoiceAddress = address;
-            this.invoiceAddressIdx = this.relation.addresses.findIndex(a => a.nawNr === this.invoiceAddress.nawNr);
-        }
-        this.showSelectAddressDialog = false;
-    }
     handleDeliveryMethodChange(deliveryMethodId) {
         return __awaiter(this, void 0, void 0, function* () {
             const deliveryMethod = this.selectDeliveryMethodById(deliveryMethodId);
@@ -3236,41 +3508,16 @@ class CheckoutOverviewDeliveryEditComponent {
             }
         });
     }
+    setIndexDeliveryType(idx) {
+        this.deliveryTypeIdx = idx;
+        // this.selectAddress(this.relation.addresses[idx]);
+    }
     selectDeliveryOptionsByDeliveryMethod(deliveryMethod) {
         return this.deliveryOptionList.filter(deliveryOption => deliveryMethod.deliveryOptions.indexOf(deliveryOption.code) !== -1);
     }
     selectDeliveryMethodById(deliveryMethodId) {
         return this.deliveryMethods.find(delivery => delivery.code === deliveryMethodId);
     }
-    changeAddress(addressType) {
-        this._addressType = addressType;
-        this.addresses = this.relation.addresses;
-        this.changeLocationPopup = true;
-    }
-    saveNewLocation() {
-        this.locationForm.submit();
-    }
-    saveLocation() {
-        this.addLocation();
-        this.changeLocationPopup = false;
-    }
-    addLocation() {
-        this.updateAddress(this.newAddress).then();
-        this.relation.addresses.push(this.newAddress);
-        // this.service.saveRelation().then();
-        this.addLocationPopup = false;
-    }
-    updateAddress(address) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this._addressType === AddressType.DeliveryAddress) {
-                this.transaction.transactionInfo.transactionAddress = address;
-            }
-            else {
-                this.transaction.transactionInfo.invoiceAddress = address;
-            }
-            yield this._setCountryNameToAddress(address);
-        });
-    }
     isDeliveryOptionChecked(deliveryOptionItem) {
         return (this.transaction.transactionInfo.deliveryOptions.indexOf(deliveryOptionItem.code, 0) === 0);
     }
@@ -3283,179 +3530,135 @@ class CheckoutOverviewDeliveryEditComponent {
     onChangeLocationCancelClick() {
         this.changeLocationPopup = false;
     }
-    onAddLocationOkClick() {
-        this._addAddress(this._addressType);
-        this.addLocationPopup = true;
-    }
-    handleAddressSelected(rows) {
-        this.selectedAddress = (rows.find(x => x !== undefined));
-        this.updateAddress(this.selectedAddress);
-        this.changeLocationPopup = false;
-    }
     calculateDeliveryCosts() {
         return 0;
     }
     calculateAssemblyCosts() {
         return 0;
     }
-    _addAddress(addressType) {
-        this.newAddress = new Address();
-        this.newAddress.addressType = addressType;
-        this.newAddress.startDate = new Date();
-        this.newAddress.sequence = this.relation.getNextAddressSequence();
-    }
-    _setCountryNameToAddress(address) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (address.countryId && !address.countryName) {
-                const country = yield this.service.getCountry(address.countryId);
-                address.countryName = country.description;
-            }
-        });
-    }
 }
 CheckoutOverviewDeliveryEditComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-checkout-overview-delivery-edit",
                 template: `
-    <co-form>
-      <div class="checkout-form-wrapper">
-        <div class="checkout-section-wrapper">
-          <div class="checkout-label-column">
-            <span>01</span>
-            <span class="label" [textContent]="'DELIVERY' | localize"></span>
-          </div>
-          <div class="checkout-data-column">
-            <div class="checkout-data-row">
-              <co-carousel-3d class="default-width" *ngIf="relation.addresses"
-                              [tileWidth]="200"
-                              [tileHeight]="100"
-                              [selectedIndex]="deliveryAddressIdx"
-                              (indexSelected)="setIndexDeliveryAddress($event)">
-                <co-relation-address-tile #carouselItem *ngFor="let address of relation.addresses; let index = index"
-                                          [address]="address"
-                                          [selected]="deliveryAddressIdx === index"
-                                          (editAddressClicked)="editAddress($event)"
-                ></co-relation-address-tile>
-              </co-carousel-3d>
-            </div>
-            <div class="checkout-data-row">
-              <div class="relation-address-new">
-                <icon class="relation-address-icon" [icon]="icons.ArrowPointRight"></icon>
-                <div [textContent]="'ADDRESS_ADD' | localize" (click)="showNewAddressDialog()"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="checkout-section-wrapper">
-          <div class="checkout-label-column">
-            <span>02</span>
-            <span class="label" [textContent]="'INVOICE_ADDRESS' | localize"></span>
-          </div>
-          <div class="checkout-data-column">
-            <div class="checkout-data-row">
-              <co-input-checkbox [(model)]="invoiceAddressSameAsDeliveryAddress" (modelChange)="checkSameAddress($event)" [label]="'SAME_AS_DELIVERY'"></co-input-checkbox>
+    <div class="delivery-edit-content">
+      <co-form>
+        <div class="checkout-form-wrapper">
+          <div class="checkout-section-wrapper">
+            <div class="checkout-label-column">
+              <span>01</span>
+              <span class="label" [textContent]="'DELIVERY_DATA' | localize"></span>
             </div>
-            <div class="overview-delivery-invoice-address" *ngIf="!invoiceAddressSameAsDeliveryAddress" @showHideInvoiceAddress>
+            <div class="checkout-data-column">
               <div class="checkout-data-row">
-                <co-carousel-3d class="default-width" *ngIf="relation.addresses"
-                                [tileWidth]="200"
+                <co-carousel-3d [tileWidth]="200"
                                 [tileHeight]="100"
-                                [selectedIndex]="invoiceAddressIdx"
-                                (indexSelected)="setIndexInvoiceAddress($event)">
-                  <co-relation-address-tile #carouselItem *ngFor="let address of relation.addresses; let index = index"
-                                            [address]="address"
-                                            [selected]="invoiceAddressIdx === index"
-                                            (editAddressClicked)="editAddress($event)"
-                  ></co-relation-address-tile>
+                                [selectedIndex]="deliveryTypeIdx"
+                                (indexSelected)="setIndexDeliveryType($event)">
+                  <co-delivery-type-tile #carouselItem *ngFor="let type of deliveryTypes; let index = index"
+                                            [type]="type"
+                                            [selected]="deliveryTypeIdx === index"
+                  ></co-delivery-type-tile>
                 </co-carousel-3d>
               </div>
               <div class="checkout-data-row">
-                <div class="relation-address-new">
-                  <icon class="relation-address-icon" [icon]="icons.ArrowPointRight"></icon>
-                  <div [textContent]="'ADDRESS_ADD' | localize" (click)="showNewAddressDialog()"></div>
-                </div>
+                <co-input-date [(model)]="deliveryOptionsRequest.deliveryDate" [placeholder]="'DELIVERY_DATE' | localize" [required]="true"></co-input-date>
+              </div>
+              <div class="checkout-data-row">
+                <co-input-date [(model)]="deliveryOptionsRequest.preferredDeliveryDate" [placeholder]="'PREFERRED_DATE' | localize"></co-input-date>
+              </div>
+              <div class="checkout-data-row">
+                <co-input-checkbox [(model)]="deliveryOptionsRequest.allowPartialDelivery" [label]="'PART_DELIVERIES' | localize"></co-input-checkbox>
+              </div>
+              <div class="checkout-data-row">
+                <co-collapsible [headerTitle]="'ADD_DELIVERY_OPTION' | localize" [iconData]="iconService.getIcon(icons.TriangleDown)">
+                  <div class="checkout-data-row">
+                    <co-drop-down-list
+                      [collection]="deliveryMethods"
+                      [fields]="deliveryMethodFields"
+                      [required]="true"
+                      [model]="deliveryOptionsRequest.deliveryMethod"
+                      (modelChange)="handleDeliveryMethodChange($event)"
+                      [placeholder]="'DELIVERY_METHOD' | localize"></co-drop-down-list>
+                    <co-input-text [placeholder]="'TOTAL_ASSEMBLY_TIME' | localize"></co-input-text>
+                  </div>
+                  <div class="checkout-data-row">
+                    <co-input-listbox
+                      [placeholder]="'DELIVERY_OPTIONS' | localize"
+                      [(model)]="deliveryOptionsRequest.deliveryOptions"
+                      [collection]="deliveryOptions"
+                      [fields]="deliveryOptionFields"
+                      [showCheckbox]="true"
+                    ></co-input-listbox>
+                  </div>
+                </co-collapsible>
+              </div>
+              <div class="checkout-data-row">
+                <co-collapsible [headerTitle]="'ADD_REMARK' | localize" [iconData]="iconService.getIcon(icons.TriangleDown)">
+                  <div class="checkout-data-row">
+                    <co-input-textarea [(model)]="deliveryOptionsRequest.remark" [placeholder]="'REMARKS' | localize"></co-input-textarea>
+                  </div>
+                </co-collapsible>
+              </div>
+              <div class="checkout-data-row">
+                <co-collapsible [headerTitle]="'ADD_REFERENCE' | localize" [iconData]="iconService.getIcon(icons.TriangleDown)">
+                  <div class="checkout-data-row">
+                    <co-input-text [(model)]="deliveryOptionsRequest.ownReference" [placeholder]="'REFERENCE' | localize"></co-input-text>
+                  </div>
+                  <div class="checkout-data-row">
+                    <co-input-text [(model)]="deliveryOptionsRequest.relationReference" [placeholder]="'REFERENCE_RELATION' | localize"></co-input-text>
+                  </div>
+                </co-collapsible>
+              </div>
+              <div class="checkout-data-row">
+                <co-input-date [model]="'NOG_NIET_GEIMPLEMENTEERD'" [placeholder]="'ASSEMBLY_DATE' | localize"></co-input-date>
               </div>
             </div>
           </div>
-        </div>
-        <div class="checkout-section-wrapper">
-          <div class="checkout-label-column">
-            <span>03</span>
-            <span class="label" [textContent]="'DELIVERY_MOMENT' | localize"></span>
-          </div>
-          <div class="checkout-data-column">
-            <div class="checkout-data-row">
-              <co-input-date [(model)]="deliveryOptionsRequest.deliveryDate" [placeholder]="'DELIVERY_DATE' | localize" [required]="true"></co-input-date>
-              <co-input-checkbox [(model)]="deliveryOptionsRequest.allowPartialDelivery" [label]="'PART_DELIVERIES' | localize"></co-input-checkbox>
-            </div>
-            <div class="checkout-data-row">
-              <co-input-date [(model)]="deliveryOptionsRequest.preferredDeliveryDate" [placeholder]="'PREFERRED_DATE' | localize"></co-input-date>
-              <co-input-date [model]="'NOG_NIET_GEIMPLEMENTEERD'" [placeholder]="'ASSEMBLY_DATE' | localize"></co-input-date>
+          <div class="checkout-section-wrapper">
+            <div class="checkout-label-column">
+              <span>02</span>
+              <span class="label" [textContent]="'DOWNPAYMENT' | localize"></span>
             </div>
-            <div class="checkout-data-row">
+            <div class="checkout-data-column">
+              <div class="checkout-data-row">
+                <co-input-text [model]="'NOG_NIET_GEIMPLEMENTEERD'" [placeholder]="'DOWNPAYMENT_PERCENTAGE' | localize"></co-input-text>
+                <co-input-text [model]="'NOG_NIET_GEIMPLEMENTEERD'" [placeholder]="'DOWNPAYMENT_AMOUNT' | localize"></co-input-text>
+              </div>
+              <div class="checkout-data-row">
+                <co-input-text [model]="'NOG_NIET_GEIMPLEMENTEERD'" [placeholder]="'DOWNPAYMENT_BY_BR' | localize"></co-input-text>
+              </div>
+              <div class="checkout-data-row">
+                <co-input-text [model]="'NOG_NIET_GEIMPLEMENTEERD'" [placeholder]="'DOWNPAYMENT_ON_DELIVERY' | localize"></co-input-text>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="checkout-section-wrapper">
-          <div class="checkout-label-column">
-            <span>04</span>
-            <span class="label" [textContent]="'DELIVERY_OPTIONS' | localize"></span>
-          </div>
-          <div class="checkout-data-column">
-            <div class="checkout-data-row">
-              <co-drop-down-list
-                [collection]="deliveryMethods"
-                [fields]="deliveryMethodFields"
-                [required]="true"
-                [model]="deliveryOptionsRequest.deliveryMethod"
-                (modelChange)="handleDeliveryMethodChange($event)"
-                [placeholder]="'DELIVERY_METHOD2' | localize"></co-drop-down-list>
-              <co-input-text [placeholder]="'TOTAL_ASSEMBLY_TIME' | localize"></co-input-text>
-            </div>
-            <div class="checkout-data-row">
-              <co-input-listbox
-                [placeholder]="'DELIVERY_OPTIONS' | localize"
-                [(model)]="deliveryOptionsRequest.deliveryOptions"
-                [collection]="deliveryOptions"
-                [fields]="deliveryOptionFields"
-                [showCheckbox]="true"
-              ></co-input-listbox>
+          <div class="checkout-section-wrapper">
+            <div class="checkout-label-column">
+              <span>03</span>
+              <span class="label" [textContent]="'ORDER_DATA' | localize"></span>
             </div>
-            <div class="checkout-data-row">
-              <co-input-textarea [(model)]="deliveryOptionsRequest.remark" [placeholder]="'REMARKS' | localize"></co-input-textarea>
-            </div>
-          </div>
-        </div>
-        <div class="checkout-section-wrapper">
-          <div class="checkout-label-column">
-            <span>05</span>
-            <span class="label" [textContent]="'MARKETING' | localize"></span>
-          </div>
-          <div class="checkout-data-column">
-            <div class="checkout-data-row">
-              <co-drop-down-list
-                [collection]="marketing"
-                [fields]="marketingFields"
-                [(model)]="deliveryOptionsRequest.marketingCode"
-                [placeholder]="'MARKETING' | localize"></co-drop-down-list>
+            <div class="checkout-data-column">
+              <div class="checkout-data-row">
+                <co-input-text [model]="'NOG_NIET_GEIMPLEMENTEERD'" [placeholder]="'BRANCH' | localize"></co-input-text>
+                <co-input-text [model]="'NOG_NIET_GEIMPLEMENTEERD'" [placeholder]="'ADMINISTRATIVE_MANAGER' | localize"></co-input-text>
+              </div>
+              <div class="checkout-data-row">
+                <co-drop-down-list
+                  [collection]="marketing"
+                  [fields]="marketingFields"
+                  [(model)]="deliveryOptionsRequest.marketingCode"
+                  [placeholder]="'MARKETING' | localize"></co-drop-down-list>
+              </div>
+              <div class="checkout-data-row">
+              </div>
+              <div class="checkout-data-row">
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </co-form>
-    <co-dialog *ngIf="showCreateAddressDialog">
-      <co-relation-address
-        (saveClick)="saveNewAddress($event)"
-        (cancelClick)="showCreateAddressDialog = false"
-      ></co-relation-address>
-    </co-dialog>
-    <co-dialog *ngIf="showSelectAddressDialog && addressToEdit">
-      <co-relation-address
-        [address]="addressToEdit"
-        (saveClick)="saveAddress($event)"
-        (cancelClick)="showSelectAddressDialog = false"
-      ></co-relation-address>
-    </co-dialog>
+      </co-form>
+    </div>
   `,
                 providers: [
                     FormMasterService
@@ -3475,17 +3678,12 @@ CheckoutOverviewDeliveryEditComponent.ctorParameters = () => [
     { type: DictionaryService },
     { type: FormMasterService },
     { type: BusinessObjectFactory },
-    { type: TransactionService }
+    { type: TransactionService },
+    { type: IconCacheService }
 ];
 CheckoutOverviewDeliveryEditComponent.propDecorators = {
-    deliveryForm: [{ type: ViewChild, args: ["deliveryForm", { read: FormComponent },] }],
-    locationForm: [{ type: ViewChild, args: ["locationForm", { read: FormComponent },] }],
-    changeLocationDialog: [{ type: ViewChild, args: ["changeLocationDialog",] }],
-    addressGrid: [{ type: ViewChild, args: ["addressGrid",] }],
-    relation: [{ type: Input }],
     deliveryOptionsRequest: [{ type: Input }],
     transaction: [{ type: Input }],
-    relationChange: [{ type: Output }],
     validSubmit: [{ type: Output }],
     invalidSubmit: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-checkout-overview-delivery-edit",] }]
@@ -3552,7 +3750,7 @@ CheckOutRelationSuggestionsListComponent.decorators = [
                 template: `
     <div class="flex-column items-wrapper">
       <co-checkout-relation-suggestions-list-item *ngFor="let suggestion of suggestions" [suggestion]="suggestion"
-                                                  (selectionSelected)="suggestionSelected.emit(suggestion)"></co-checkout-relation-suggestions-list-item>
+                                                  (selectionSelected)="suggestionSelected.emit($event)"></co-checkout-relation-suggestions-list-item>
       <span *ngIf="suggestions?.length === 0" class="no-results" localize="NO_RESULTS_FOUND"></span>
     </div>
   `,
@@ -3728,68 +3926,6 @@ ImageDisplayComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ['class.co-image-display',] }]
 };
 
-/** AUTO GENERATED FILE. DO NOT CHANGE.. OR YOU WILL SUFFER THE CONSEQUENCES OF YOUR ACTIONS **/
-const IconSvg = {
-    "arrow_point_down": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"-280 371 51 51\" enable-background=\"new -280 371 51 51\" ><path fill=\"#29363E\" d=\"M-248.3,392.2c0.3,0,0.6,0.1,0.8,0.3c0.5,0.5,0.5,1.2,0,1.6l-6.2,6.2c-0.2,0.2-0.5,0.3-0.8,0.3c-0.3,0-0.6-0.1-0.8-0.3l-6.2-6.2c-0.2-0.2-0.3-0.5-0.3-0.8c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3l5.4,5.4l5.4-5.4C-248.9,392.4-248.6,392.2-248.3,392.2z\"/></svg>",
-    "arrow_point_left": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51 51\" enable-background=\"new 0 0 51 51\" ><path fill=\"#484F5F\" d=\"M31.9,36.7l-14.7-9.6C17.1,27,17,26.9,17,26.7v-2.4c0-0.2,0.1-0.3,0.2-0.4l14.7-9.6c0.2-0.2,0.5-0.1,0.7,0.1l1.4,2.1c0.2,0.2,0.1,0.5-0.1,0.7l-12,7.8c-0.3,0.2-0.3,0.6,0,0.8l12,7.8c0.2,0.2,0.3,0.5,0.1,0.7l-1.4,2.1C32.4,36.8,32.1,36.8,31.9,36.7z\"/></svg>",
-    "arrow_point_right": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51 51\" enable-background=\"new 0 0 51 51\" ><path fill=\"#484F5F\" d=\"M19.1,14.3l14.7,9.6c0.1,0.1,0.2,0.2,0.2,0.4v2.4c0,0.2-0.1,0.3-0.2,0.4l-14.7,9.6c-0.2,0.2-0.5,0.1-0.7-0.1l-1.4-2.1c-0.2-0.2-0.1-0.5,0.1-0.7l12-7.8c0.3-0.2,0.3-0.6,0-0.8l-12-7.8c-0.2-0.2-0.3-0.5-0.1-0.7l1.4-2.1C18.6,14.2,18.9,14.2,19.1,14.3z\"/></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>",
-    "delivery_truck": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"15.35\" y=\"16.56\" width=\"15.14\" height=\"10.94\" transform=\"translate(-1.83 2.08) rotate(-5)\" fill=\"#484f60\"/><path d=\"M38.5,18.1l-6.9.61L32.41,28l-7.63.67a3.76,3.76,0,0,1,1.43,2.25l7.25-.63A3.83,3.83,0,0,1,41,29.6l1-.1-.52-6Zm.29,5.84-3.91.34a.51.51,0,0,1-.55-.46L34,20.1a.49.49,0,0,1,.45-.54l2.27-.2a.5.5,0,0,1,.48.25l2,3.59A.5.5,0,0,1,38.79,23.94Z\" fill=\"#484f60\"/><path d=\"M19.66,29.09a3.8,3.8,0,0,0-1,2.46l-.74.07-1.82-.94L16,29.41Z\" fill=\"#484f60\"/><path d=\"M34.56,30.62a2.74,2.74,0,1,0,2.49-3A2.73,2.73,0,0,0,34.56,30.62Z\" fill=\"#484f60\"/><path d=\"M19.74,31.91a2.74,2.74,0,1,0,2.49-3A2.74,2.74,0,0,0,19.74,31.91Z\" fill=\"#484f60\"/><rect x=\"7.96\" y=\"17.63\" width=\"5\" height=\"1\" transform=\"translate(-1.54 0.98) rotate(-5)\" fill=\"#484f60\"/><rect x=\"11.02\" y=\"29.71\" width=\"3\" height=\"1\" transform=\"translate(-2.59 1.21) rotate(-5)\" fill=\"#484f60\"/><rect x=\"9.48\" y=\"23.53\" width=\"4\" height=\"1\" transform=\"matrix(1, -0.09, 0.09, 1, -2.05, 1.09)\" fill=\"#484f60\"/></svg>",
-    "edit_pencil": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"12.54 38.16 12 37.62 14.85 29.64 20.52 35.31 12.54 38.16\" fill=\"#484f60\"/><rect x=\"16.33\" y=\"20.52\" width=\"17.99\" height=\"8.64\" transform=\"translate(-10.15 25.18) rotate(-45)\" fill=\"#484f60\"/><path d=\"M37.54,18.73,36,20.32l-6.11-6.1,1.59-1.59a1.55,1.55,0,0,1,2.2,0l3.91,3.9A1.55,1.55,0,0,1,37.54,18.73Z\" fill=\"#484f60\"/></svg>",
-    "plus_round": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"-288 379 35 35\" enable-background=\"new -288 379 35 35\" ><path fill=\"#29363E\" d=\"M-270.5,381.5c-8.3,0-15,6.7-15,15c0,8.3,6.7,15,15,15s15-6.7,15-15C-255.5,388.2-262.2,381.5-270.5,381.5z M-261.1,397.3c0,0.9-0.7,1.6-1.6,1.6h-5.5v5.5c0,0.9-0.7,1.6-1.6,1.6h-1.6c-0.9,0-1.6-0.7-1.6-1.6v-5.5h-5.5c-0.9,0-1.6-0.7-1.6-1.6v-1.6c0-0.9,0.7-1.6,1.6-1.6h5.5v-5.5c0-0.9,0.7-1.6,1.6-1.6h1.6c0.9,0,1.6,0.7,1.6,1.6v5.5h5.5c0.9,0,1.6,0.7,1.6,1.6V397.3z\"/></svg>",
-    "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>",
-    "txt": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M31.42,40.17H13.87c-2.15,0-2.71-.56-2.71-2.72V12.88c0-2.15.56-2.71,2.71-2.71H25.48l8.66,8.88v3.43H32.8V19.6l-7.88-8.09H13.87c-1.37,0-1.37,0-1.37,1.37V37.45c0,1.37,0,1.37,1.37,1.37H31.42c1.38,0,1.38,0,1.38-1.37V35h1.34v2.43C34.14,39.61,33.58,40.17,31.42,40.17Z\" fill=\"#484f60\"/><path d=\"M25.2,10.84v6.44c0,1.78.27,2,2,2h6.23Z\" fill=\"#484f60\"/><path d=\"M19.14,24.27v9h19.7v-9Zm6.68,2.36h-1.9V32h-1.3V26.63h-1.9V25.54h5.1ZM30.4,32,29,29.74,27.55,32H26l2.19-3.34-2-3.07h1.52L29,27.6l1.26-2.06h1.5l-2,3.12L32,32Zm6.86-5.32h-1.9V32H34.07V26.63H32.16V25.54h5.1Z\" fill=\"#484f60\"/></svg>"
-};
-
-class IconCacheService {
-    constructor(_sanitizer) {
-        this._sanitizer = _sanitizer;
-        this._iconCache = {};
-        this.setIconCache();
-    }
-    /**
-     * All the icons as a large JSON object, from the all-icons.json file.
-     * The object has property keys that are the icon names, and property values with the data string of the actual svg icon.
-     */
-    get iconCache() {
-        return this._iconCache;
-    }
-    getIcon(iconName) {
-        if (iconName) {
-            return this._iconCache[iconName.toLowerCase()];
-        }
-    }
-    getIconAsBase64(iconName) {
-        const icon = IconSvg[iconName];
-        const base64Data = window.btoa(icon);
-        return this._sanitizer.bypassSecurityTrustUrl(`data:image/svg+xml;base64,${base64Data}`);
-    }
-    getRawIcon(iconName) {
-        if (iconName) {
-            return IconSvg[iconName.toLowerCase()];
-        }
-    }
-    setIconCache() {
-        for (const key in IconSvg) {
-            if (IconSvg.hasOwnProperty(key) && typeof IconSvg[key] !== "function") {
-                this._iconCache[key.toLowerCase()] = this._sanitizer.bypassSecurityTrustHtml(IconSvg[key]);
-            }
-        }
-    }
-}
-IconCacheService.ɵprov = i0.ɵɵdefineInjectable({ factory: function IconCacheService_Factory() { return new IconCacheService(i0.ɵɵinject(i1.DomSanitizer)); }, token: IconCacheService, providedIn: "root" });
-IconCacheService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: "root"
-            },] }
-];
-IconCacheService.ctorParameters = () => [
-    { type: DomSanitizer }
-];
-
 class IconComponent {
     constructor(_iconCacheService) {
         this._iconCacheService = _iconCacheService;
@@ -3841,10 +3977,11 @@ CustomerGroupsComponent.decorators = [
                         (modelChange)="modelChange.emit($event)"
                         [collection]="customerGroups"
                         [fields]="fields"
-                        [placeholder]="'CUSTOMER_GROUP'| localize"
+                        [placeholder]="'CUSTOMER_GROUP' | localize"
                         [required]="required"
     ></co-input-combo-box>
-  `
+  `,
+                styles: [":host{display:flex}:host .co-input-combo-box{width:100%}\n"]
             },] }
 ];
 CustomerGroupsComponent.ctorParameters = () => [
@@ -4448,6 +4585,7 @@ class RelationAddressTileComponent {
         this.icons = Icon;
         this.actAsAddTile = false;
         this.selected = false;
+        this.selectedChange = new EventEmitter();
         this.addAddressClicked = new EventEmitter();
         this.editAddressClicked = new EventEmitter();
     }
@@ -4466,10 +4604,7 @@ RelationAddressTileComponent.decorators = [
                 selector: "co-relation-address-tile",
                 template: `
     <ng-container *ngIf="!actAsAddTile">
-      <div class="relation-address">
-        <div class="relation-select-wrapper">
-          <co-input-radio-button [checked]="selected"></co-input-radio-button>
-        </div>
+      <co-tile [selected]="selected" (selectedChange)="selectedChange.emit($event)">
         <div class="relation-content-wrapper">
           <span class="relation-address-type" [textContent]="address.displayType | localize"></span>
           <span class="relation-address-name" [textContent]="address.addressName"></span>
@@ -4480,26 +4615,17 @@ RelationAddressTileComponent.decorators = [
         <div class="relation-address-edit" (click)="handleEditAddressClick($event)">
           <icon class="relation-address-edit-icon" [icon]="icons.EditPencil"></icon>
         </div>
-      </div>
+      </co-tile>
     </ng-container>
     <ng-container *ngIf="actAsAddTile">
-      <div class="relation-address-create" (click)="addAddressClicked.emit()">
-        <icon class="relation-address-icon" [icon]="icons.PlusRound"></icon>
-        <span [textContent]="'ADDRESS_ADD' | localize"></span>
-      </div>
+      <co-tile (click)="addAddressClicked.emit()">
+        <div class="relation-content-wrapper">
+          <icon class="relation-address-icon" [icon]="icons.PlusRound"></icon>
+          <span [textContent]="'ADDRESS_ADD' | localize"></span>
+        </div>
+      </co-tile>
     </ng-container>
   `,
-                providers: [
-                    FormMasterService
-                ],
-                animations: [
-                    trigger("showHideNavigationButton", [
-                        state("void", style({ opacity: 0 })),
-                        state("*", style({ opacity: 1 })),
-                        transition("void => *", animate("200ms ease-in-out")),
-                        transition("* => void", animate("200ms ease-out"))
-                    ])
-                ],
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -4507,11 +4633,59 @@ RelationAddressTileComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ["class.co-relation-address-tile",] }],
     address: [{ type: Input }],
     actAsAddTile: [{ type: Input }],
-    selected: [{ type: HostBinding, args: ['class.selected',] }, { type: Input }],
+    selected: [{ type: Input }],
+    selectedChange: [{ type: Output }],
     addAddressClicked: [{ type: Output }],
     editAddressClicked: [{ type: Output }]
 };
 
+class TileComponent {
+    constructor() {
+        this.selected = false;
+        this.selectedChange = new EventEmitter();
+    }
+    showClass() {
+        return true;
+    }
+}
+TileComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-tile",
+                template: `
+    <div class="co-tile-wrapper" (click)="selectedChange.emit(selected)">
+      <div class="co-tile-select-wrapper">
+        <co-input-radio-button [checked]="selected" (modelChange)="selectedChange.emit($event)"></co-input-radio-button>
+      </div>
+      <div class="co-tile-content-wrapper">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TileComponent.propDecorators = {
+    selected: [{ type: HostBinding, args: ['class.selected',] }, { type: Input }],
+    selectedChange: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-tile",] }]
+};
+
+class TileModule {
+}
+TileModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    InputRadioButtonModule
+                ],
+                declarations: [
+                    TileComponent
+                ],
+                exports: [
+                    TileComponent
+                ]
+            },] }
+];
+
 class RelationAddressTileModule {
 }
 RelationAddressTileModule.decorators = [
@@ -4524,7 +4698,8 @@ RelationAddressTileModule.decorators = [
                     RelationAddressModule,
                     ButtonModule,
                     FormModule,
-                    PipeModule
+                    PipeModule,
+                    TileModule
                 ],
                 declarations: [
                     RelationAddressTileComponent
@@ -4563,8 +4738,8 @@ RelationAddressSelectModule.decorators = [
 class StepperStepComponent {
     constructor() {
         this.index = 0;
-        this.validateStep = new EventEmitter();
         this.show = false;
+        this.validateStep = new EventEmitter();
         this._completed = false;
         this.onComplete = (complete) => { };
     }
@@ -4594,18 +4769,31 @@ StepperStepComponent.propDecorators = {
     index: [{ type: Input }],
     label: [{ type: Input }],
     completed: [{ type: Input }],
+    show: [{ type: HostBinding, args: ['class.show',] }, { type: Input }],
     validateStep: [{ type: Output }],
-    show: [{ type: Input }],
     showClass: [{ type: HostBinding, args: ["class.co-stepper-step",] }]
 };
 
 class StepperComponent {
     constructor() {
+        this.icons = Icon;
         this.finishStep = new EventEmitter();
-        this.steps = [];
+        this.firstStep = 0;
+        this.truckPosition = 0;
+        this._activeStep = 0;
     }
     set content(children) {
         this.stepChildren = children.toArray();
+        if (this.stepChildren) {
+            setTimeout(() => {
+                this._setActive(0);
+            });
+        }
+    }
+    set child(child) {
+        if (child && child.nativeElement) {
+            this._deliveryTruckClientRect = child.nativeElement.getBoundingClientRect();
+        }
     }
     showClass() {
         return true;
@@ -4618,23 +4806,23 @@ class StepperComponent {
         return this._stepChildren;
     }
     get canPrevious() {
-        return this.activeStep !== this.firstStep;
+        return this.activeStep > this.firstStep;
     }
     get canNext() {
-        return this.activeStep !== this.lastStep;
+        return this.activeStep < this.lastStep;
     }
     get finished() {
         return this.activeStep === this.lastStep;
     }
-    ngAfterContentInit() {
-        if (this.stepChildren) {
-            this.stepChildren[0].show = true;
-            this.activeStep = this.stepChildren[0].index;
-        }
+    set activeStep(value) {
+        this._activeStep = value;
+        this.truckPosition = (100 / this.stepChildren.length) * (this._activeStep + 1);
+    }
+    get activeStep() {
+        return this._activeStep;
     }
     goto(idx) {
-        const currentIndex = this.stepChildren.findIndex(s => s.index === this.activeStep);
-        if (idx > currentIndex) {
+        if (idx > this.activeStep) {
             this._validateCurrentStep(idx);
         }
         else {
@@ -4642,22 +4830,18 @@ class StepperComponent {
         }
     }
     gotoPrevious() {
-        const currentIndex = this.stepChildren.findIndex(s => s.index === this.activeStep);
-        this._setActive(currentIndex - 1);
+        this._setActive(this.activeStep - 1);
     }
     gotoNext() {
         this._validateCurrentStep();
     }
     _validateCurrentStep(nextStep) {
-        const currentStep = this.stepChildren.find(s => s.index === this.activeStep);
-        const currentStepIdx = this.stepChildren.findIndex(s => s.index === this.activeStep);
-        currentStep.onComplete = (complete) => {
-            this.steps[currentStepIdx].complete = complete;
+        this.stepChildren[this.activeStep].onComplete = (complete) => {
             if (complete) {
-                this._setActive(nextStep === undefined ? currentStepIdx + 1 : nextStep);
+                this._setActive(nextStep === undefined ? this.activeStep + 1 : nextStep);
             }
         };
-        currentStep.validateStep.next();
+        this.stepChildren[this.activeStep].validateStep.next();
     }
     _setActive(idx) {
         const prevStep = this.stepChildren[idx - 1];
@@ -4665,26 +4849,12 @@ class StepperComponent {
             if (this.stepChildren) {
                 this.stepChildren.map(s => s.show = false);
                 this.stepChildren[idx].show = true;
-                this.activeStep = this.stepChildren[idx].index;
+                this.activeStep = idx;
             }
         }
     }
     _prepareSteps() {
-        this.steps.length = 0;
-        for (let i = 0; i < this.stepChildren.length; i++) {
-            const step = this.stepChildren[i];
-            this.steps.push({
-                index: step.index,
-                description: step.label,
-                complete: step.completed
-            });
-            if (i === 0) {
-                this.firstStep = step.index;
-            }
-            if (i === this.stepChildren.length - 1) {
-                this.lastStep = step.index;
-            }
-        }
+        this.lastStep = this.stepChildren.length - 1;
     }
 }
 StepperComponent.decorators = [
@@ -4693,13 +4863,14 @@ StepperComponent.decorators = [
                 template: `
     <ng-container [ngTemplateOutlet]="buttonTemplate"></ng-container>
     <div class="co-stepper-content">
-      <div class="stepper-step" *ngFor="let step of steps; let index = index"
-           [class.active]="step.index === activeStep"
-           [class.complete]="step.complete"
+      <div class="stepper-step" [class.last]="index === stepChildren.length - 1" *ngFor="let step of stepChildren; let index = index"
+           [class.active]="index === activeStep"
+           [class.complete]="step.completed"
            (click)="goto(index)">
-        <div class="index" [textContent]="step.index"></div>
-        <div class="description" [textContent]="step.description"></div>
+        <div class="description" [textContent]="step.label"></div>
+        <div class="index"></div>
       </div>
+      <icon #deliveryTruck *ngIf="activeStep !== lastStep" class="delivery-truck" [icon]="icons.DeliveryTruck" [style.left.%]="truckPosition"></icon>
     </div>
     <div class="co-stepper-content-wrapper">
       <ng-content></ng-content>
@@ -4718,6 +4889,7 @@ StepperComponent.decorators = [
 ];
 StepperComponent.propDecorators = {
     content: [{ type: ContentChildren, args: [StepperStepComponent,] }],
+    child: [{ type: ViewChild, args: ['deliveryTruck', { read: ElementRef },] }],
     finishButtonLabel: [{ type: Input }],
     finishStep: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-stepper",] }]
@@ -4730,7 +4902,9 @@ StepperModule.decorators = [
                 imports: [
                     CommonModule,
                     ButtonModule,
-                    PipeModule
+                    PipeModule,
+                    IconModule,
+                    CoreModule
                 ],
                 declarations: [
                     StepperComponent,
@@ -4743,215 +4917,67 @@ StepperModule.decorators = [
             },] }
 ];
 
-class CheckoutModule {
+class TransactionTotalsComponent {
+    constructor() {
+        this.showDiscount = false;
+        this.discountClick = new EventEmitter();
+    }
+    showClass() {
+        return true;
+    }
 }
-CheckoutModule.decorators = [
+TransactionTotalsComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-totals",
+                template: `
+    <div class="transaction-totals-wrapper">
+      <span class="totals-gross label" [textContent]="'ORDER_GROSS' | localize"></span>
+      <span class="totals-gross value" [textContent]="totals?.grossAmount | coCurrency: true"></span>
+      <ng-container *ngIf="totals?.discountAmount">
+        <span class="totals-discount-amount label" [textContent]="'DISCOUNT_AMOUNT' | localize"></span>
+        <span class="totals-discount-amount value" [textContent]="totals?.discountAmount | coCurrency: true"></span>
+      </ng-container>
+      <ng-container *ngIf="totals?.transactionDiscountAmount">
+        <span class="totals-discount label" [textContent]="'TRANSACTION_DISCOUNT' | localize"></span>
+        <span class="totals-discount value" [textContent]="totals?.transactionDiscountAmount | coCurrency: true"></span>
+      </ng-container>
+      <ng-container *ngIf="totals?.transactionDiscountPercentage">
+        <span class="totals-discount-percentage label" [textContent]="'TRANSACTION_DISCOUNT_PERC' | localize"></span>
+        <span class="totals-discount-percentage value" [textContent]="totals?.transactionDiscountPercentage.toString() | append:' %'"></span>
+      </ng-container>
+      <span class="totals-net label" [textContent]="'ORDER_NET'| localize"></span>
+      <span class="totals-net value" [textContent]="totals?.netAmount | coCurrency: true"></span>
+      <a *ngIf="showDiscount" class="add-discount label" (click)="discountClick.emit($event)" [textContent]="'ADD_DISCOUNTS' | localize"></a>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionTotalsComponent.propDecorators = {
+    totals: [{ type: Input }],
+    showDiscount: [{ type: Input }],
+    discountClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-totals",] }]
+};
+
+class TransactionTotalsModule {
+}
+TransactionTotalsModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
-                    CoreModule,
                     CommonModule,
-                    IconModule,
-                    InputTextModule,
-                    InputCheckboxModule,
-                    InputRadioButtonModule,
-                    FormModule,
-                    InputComboBoxModule,
-                    InputDatePickerModule,
-                    InputNumberPickerModule,
-                    CoDialogModule,
-                    CoDialogPromptModule,
-                    ButtonModule,
-                    FlexModule,
-                    MultiSelectListModule,
-                    DropDownModule,
-                    PopupModule.forRoot(),
-                    CoSidebarModule,
-                    CoGridModule,
-                    ReactiveFormsModule,
-                    FormsModule,
-                    RelationAddressModule,
-                    RelationAddressSelectModule,
-                    RelationAddressTileModule,
-                    CoRichTextEditorModule,
-                    Carousel3dModule,
-                    InputTextareaModule,
-                    InputListboxModule,
-                    PipeModule,
-                    StepperModule,
+                    CoreModule,
+                    PipeModule
                 ],
                 declarations: [
-                    CheckoutOverviewRelationEditComponent,
-                    CheckoutOverviewDeliveryEditComponent,
-                    CheckoutOverviewDeliveryAddressComponent,
-                    CheckOutRelationSuggestionsListComponent,
-                    CheckOutRelationSuggestionsListItemComponent,
-                    CheckoutLoginComponent,
-                    CheckoutComponent,
-                ],
-                providers: [
-                    DictionaryService,
-                    OptionsService
-                ],
-                entryComponents: [
-                    CheckoutComponent
+                    TransactionTotalsComponent
                 ],
-                exports: [CheckoutComponent],
-                bootstrap: [CheckoutComponent]
+                exports: [
+                    TransactionTotalsComponent
+                ]
             },] }
 ];
 
-class ShoppingCartComponent {
-    constructor(service, _dictionary) {
-        this.service = service;
-        this._dictionary = _dictionary;
-        this.closeCart = new EventEmitter();
-        this.checkout = new EventEmitter();
-        this.transaction = new TransactionInfoResponse();
-        this._subs = [];
-        this._subs.push(this.service.transactionUpdated.subscribe((transaction) => {
-            if (transaction) {
-                this.transaction = transaction;
-            }
-        }));
-    }
-    showClass() {
-        return true;
-    }
-    ngOnDestroy() {
-        this._subs.forEach(s => s.unsubscribe());
-    }
-}
-ShoppingCartComponent.decorators = [
-    { type: Component, args: [{
-                selector: "co-shopping-cart",
-                template: `
-    <div class="cart-header">
-      <span class="cart-header-label" [textContent]="'SHOPPING_CART_OVERVIEW' | localize | append:'(' + service.articleAmount + ')'"></span>
-    </div>
-    <div class="shopping-cart-transaction-wrapper">
-      <co-transaction [showHeader]="false" [transaction]="transaction"></co-transaction>
-    </div>
-    <div class="cart-buttons">
-      <a class="button-resume" [textContent]="'SHOPPING_CART_RESUME' | localize"
-                 (click)="closeCart.emit()"
-      ></a>
-      <co-button class="button-checkout" [label]="'SHOPPING_CART_CHECKOUT' | localize"
-                 [disabled]="service.articleAmount === 0"
-                 (click)="checkout.emit()"></co-button>
-    </div>
-  `,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-ShoppingCartComponent.ctorParameters = () => [
-    { type: TransactionService },
-    { type: DictionaryService }
-];
-ShoppingCartComponent.propDecorators = {
-    closeCart: [{ type: Output }],
-    checkout: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.co-shopping-cart",] }]
-};
-
-// The different view modes for content, e.g. list, grid, ..
-var ContentViewMode;
-(function (ContentViewMode) {
-    ContentViewMode[ContentViewMode["List"] = 0] = "List";
-    ContentViewMode[ContentViewMode["Grid"] = 1] = "Grid";
-    ContentViewMode[ContentViewMode["GridExpanded"] = 2] = "GridExpanded";
-    ContentViewMode[ContentViewMode["MasterDetail"] = 3] = "MasterDetail";
-    ContentViewMode[ContentViewMode["Timeline"] = 4] = "Timeline";
-})(ContentViewMode || (ContentViewMode = {}));
-
-class TransactionComponent {
-    constructor(iconCacheService, _service) {
-        this.iconCacheService = iconCacheService;
-        this._service = _service;
-        this.viewModes = ContentViewMode;
-        this.icons = Icon;
-        this.transaction = new TransactionInfoResponse();
-        this.showHeader = true;
-        this.activeViewMode = ContentViewMode.List;
-        this.showDiscountsSidebar = false;
-        this._subs = [];
-        this._subs.push(this._service.transactionUpdated.subscribe((transaction) => __awaiter(this, void 0, void 0, function* () {
-            this.transaction = transaction;
-        })));
-    }
-    set transactionId(value) {
-        if (value) {
-            this._service.getTransactionById(value);
-        }
-    }
-    showClass() {
-        return true;
-    }
-    ngOnDestroy() {
-        this._subs.forEach(s => s.unsubscribe());
-    }
-    addDiscount() {
-        this.showDiscountsSidebar = true;
-        // TODO
-        // this.transactionDiscountPercentage = this.service.currentTransaction.transactionDiscountPercentage;
-        // this.transactionDiscountAmount = this.service.currentTransaction.transactionDiscountAmount;
-        // this.transactionTotal = undefined;
-    }
-    saveTransactionLine(transactionAddTextLineRequest) {
-        if (transactionAddTextLineRequest.transactionUuid) { //update
-        }
-        else { // new transactionLine (transactionArticleText)
-            this._service.addTextLine(transactionAddTextLineRequest.showOnDocuments, transactionAddTextLineRequest.text, 0, transactionAddTextLineRequest.articleBound, 0, 0, 0);
-        }
-    }
-}
-TransactionComponent.decorators = [
-    { type: Component, args: [{
-                selector: "co-transaction",
-                template: `
-    <co-transaction-header *ngIf="showHeader" [transaction]="transaction"></co-transaction-header>
-    <div class="transaction-view-mode-buttons">
-      <co-button class="view-button white"
-                 [class.selected]="this.activeViewMode === viewModes.List"
-                 [iconData]="iconCacheService.getIcon(icons.ThickLines)"
-                 [title]="'LIST_VIEW' | localize"
-                 (click)="this.activeViewMode = viewModes.List"></co-button>
-      <co-button class="view-button white"
-                 [class.selected]="this.activeViewMode === viewModes.Grid"
-                 [iconData]="iconCacheService.getIcon(icons.ThinLines)"
-                 [title]="'GRID_VIEW' | localize"
-                 (click)="this.activeViewMode = viewModes.Grid"></co-button>
-    </div>
-    <div class="transaction-lines-wrapper" *ngIf="activeViewMode === viewModes.List">
-      <co-transaction-lines
-        [transactionLines]="transaction.transactionLines"
-        (saveTransactionLine)="saveTransactionLine($event)"
-      ></co-transaction-lines>
-    </div>
-    <div class="transaction-lines-grid-wrapper" *ngIf="activeViewMode === viewModes.Grid">
-      <co-transaction-lines-grid
-        [transactionLines]="transaction.transactionLines"
-      ></co-transaction-lines-grid>
-    </div>
-    <div class="transaction-footer-wrapper">
-      <co-transaction-totals [totals]="transaction.transactionTotal" [showDiscount]="true" (discountClick)="addDiscount()"></co-transaction-totals>
-    </div>
-    <co-discount *ngIf="showDiscountsSidebar">
-    </co-discount>
-  `,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-TransactionComponent.ctorParameters = () => [
-    { type: IconCacheService },
-    { type: TransactionService }
-];
-TransactionComponent.propDecorators = {
-    transaction: [{ type: Input }],
-    transactionId: [{ type: Input }],
-    showHeader: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-transaction",] }]
-};
-
 class TransactionArticleTextComponent {
     constructor(service) {
         this.service = service;
@@ -5098,9 +5124,11 @@ class TransactionLineComponent {
         this._dictionaryService = _dictionaryService;
         this.icons = Icon;
         this.preview = false;
+        this.waitingForUserAction = new EventEmitter();
         this.stock = StockStatus.Low;
         this.showTransactionArticleText = false;
         this.showTransactionArticleTextOverview = false;
+        this.showSidePanel = false;
     }
     set line(value) {
         this._line = value;
@@ -5211,15 +5239,27 @@ class TransactionLineComponent {
     // }
     _showArticleTextDialog() {
         this.showTransactionArticleText = true;
+        this.waitingForUserAction.next(true);
     }
     _hideArticleTextDialog() {
         this.showTransactionArticleText = false;
+        this.waitingForUserAction.next(false);
     }
     _showArticleTextOverviewDialog() {
         this.showTransactionArticleTextOverview = true;
+        this.waitingForUserAction.next(true);
     }
     _hideArticleTextOverviewDialog() {
         this.showTransactionArticleTextOverview = false;
+        this.waitingForUserAction.next(false);
+    }
+    handleShowSidePanel(event) {
+        this.showSidePanel = true;
+        this.waitingForUserAction.next(true);
+    }
+    handleCloseSidePanel(event) {
+        this.showSidePanel = false;
+        this.waitingForUserAction.next(false);
     }
 }
 TransactionLineComponent.decorators = [
@@ -5273,6 +5313,7 @@ TransactionLineComponent.decorators = [
           <div *ngIf=!preview class="transaction-line-buttons">
             <co-button class="transaction-line-overview-button circle" [iconData]="iconCacheService.getIcon(icons.Txt)" (click)="handleTransactionArticleTextOverview($event)"></co-button>
             <co-button class="transaction-line-add-text-button circle" [iconData]="iconCacheService.getIcon(icons.Txt)" (click)="handleTransactionArticleText($event)"></co-button>
+            <co-button class="transaction-line-show-sidebar-button circle" [iconData]="iconCacheService.getIcon(icons.MasterDetail)" (click)="handleShowSidePanel($event)"></co-button>
           </div>
         </div>
         <div class="transaction-line-delete" *ngIf="!preview">
@@ -5313,7 +5354,18 @@ TransactionLineComponent.decorators = [
                                  (closeClick)="closeTransactionArticleText($event)"
                                  (cancelClick)="closeTransactionArticleText($event)"
     ></co-transaction-article-text>
+    <co-transaction-line-side-panel *ngIf="showSidePanel" @showHideSidePanel
+                                    [transactionLine]="line"
+                                    (cancelClick)="handleCloseSidePanel($event)"
+    ></co-transaction-line-side-panel>
   `,
+                animations: [
+                    trigger("showHideSidePanel", [
+                        state("void", style({ transform: 'translateX(100%)' })),
+                        state("*", style({ transform: 'translateX(0)' })),
+                        transition("void <=> *", animate("200ms ease-in-out"))
+                    ])
+                ],
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -5326,6 +5378,7 @@ TransactionLineComponent.ctorParameters = () => [
 TransactionLineComponent.propDecorators = {
     preview: [{ type: HostBinding, args: ["class.preview",] }, { type: Input }],
     line: [{ type: Input }],
+    waitingForUserAction: [{ type: Output }],
     isText: [{ type: HostBinding, args: ["class.is-text",] }],
     isArticle: [{ type: HostBinding, args: ["class.is-article",] }],
     isSelected: [{ type: HostBinding, args: ["class.is-selected",] }],
@@ -5481,58 +5534,241 @@ TransactionArticleTextOverviewModule.decorators = [
             },] }
 ];
 
-class TransactionLineModule {
-}
-TransactionLineModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    CoreModule,
-                    ButtonModule,
-                    InputNumberPickerModule,
-                    TransactionArticleTextModule,
-                    TransactionArticleTextOverviewModule,
-                    PipeModule
-                ],
-                declarations: [
-                    TransactionLineComponent
-                ],
-                exports: [
-                    TransactionLineComponent
-                ]
-            },] }
-];
-
-class TransactionLinesComponent {
-    constructor(iconCacheService, service) {
-        this.iconCacheService = iconCacheService;
-        this.service = service;
+class TransactionLineSidePanelComponent {
+    constructor(iconService, _transactionService) {
+        this.iconService = iconService;
+        this._transactionService = _transactionService;
         this.icons = Icon;
-        this.transactionLines = [];
-        this.preview = false;
-        this.saveTransactionLine = new EventEmitter();
-        this.showTransactionArticleText = false;
+        this.cancelClick = new EventEmitter();
+        this.data = [];
+    }
+    set child(content) {
+        this.inputPrice = content;
+        this.inputPrice.commit = this.commitPrice;
     }
     showClass() {
         return true;
     }
-    trackByFn(index, line) {
-        return line.lineNr;
+    handleCancelClick(event) {
+        this.cancelClick.next(event);
     }
-    handleCanDragDrop(drag, drop) {
-        return drag.data instanceof TransactionLineInfo;
+    commitPrice(price) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return true;
+            // return this._transactionService.updatePrice(this.transactionLine, price);
+        });
     }
-    handleDrop(event) {
-        try {
-            const from = event.previousIndex;
-            const to = event.currentIndex;
-            if (from === to) {
-                return;
-            }
-            const beingDropped = this.transactionLines[from];
-            const target = this.transactionLines[to];
-            // set items in correct order
-            moveItemInArray(this.transactionLines, from, to);
+}
+TransactionLineSidePanelComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-line-side-panel",
+                template: `
+    <div class="transaction-side-panel-header">
+      <co-button (click)="handleCancelClick($event)" [iconData]="iconService.getIcon(icons.Cancel)" class="white circle small"></co-button>
+      <span class="side-panel-header-description" [textContent]="transactionLine.goodDescription"></span>
+      <span class="side-panel-header-divider" [textContent]="'|'"></span>
+      <span class="side-panel-header-sku" [textContent]="transactionLine.articleNumber"></span>
+    </div>
+    <div class="transaction-line-side-panel-content">
+      <co-collapsible
+        [iconData]="iconService.getIcon(icons.TriangleUp)"
+        [headerTitle]="'PRICING' | localize"
+        [expandButtonLast]="true"
+        [expanded]="true"
+      >
+        <div class="collapsible-content-wrapper">
+          <div class="side-panel-input-row">
+            <co-input-text class="side-panel-input" [placeholder]="'NET_LINE_TOTAL' | localize" [model]="transactionLine.netLineTotal" [readonly]="true"></co-input-text>
+          </div>
+          <div class="side-panel-input-row">
+            <co-input-number-picker class="side-panel-input" [label]="'AMOUNT' | localize" [(model)]="transactionLine.amount"></co-input-number-picker>
+            <co-input-text #inputPrice class="side-panel-input"
+                           [placeholder]="'PRICE' | localize"
+                           [type]="'number'"
+                           [showSaveCancel]="true"
+                           [(model)]="transactionLine.price"
+            ></co-input-text>
+          </div>
+          <div class="side-panel-input-row">
+            <co-input-combo-box class="side-panel-input" [collection]="data" [(model)]="transactionLine.vatId" [placeholder]="'VAT' | localize"></co-input-combo-box>
+            <co-input-combo-box class="side-panel-input" [collection]="data" [(model)]="transactionLine.priceListCode" [placeholder]="'PRICE_LIST' | localize"></co-input-combo-box>
+          </div>
+        </div>
+      </co-collapsible>
+      <co-collapsible
+        [iconData]="iconService.getIcon(icons.TriangleUp)"
+        [headerTitle]="'DISCOUNTS' | localize"
+        [expandButtonLast]="true"
+        [expanded]="true"
+      >
+        <div class="collapsible-content-wrapper">
+          <div class="side-panel-input-row">
+            <co-input-text class="side-panel-input" [placeholder]="'TOTAL_LINE_DISCOUNT' | localize" [model]="transactionLine.lineTotalDiscountAmount" [readonly]="true"></co-input-text>
+          </div>
+          <div class="side-panel-input-row">
+            <co-input-text class="side-panel-input" [placeholder]="'DISCOUNT_PERCENTAGE' | localize" [type]="'number'" [model]="transactionLine.discountAmount"></co-input-text>
+            <co-input-text class="side-panel-input" [placeholder]="'DISCOUNT_AMOUNT' | localize" [type]="'number'" [(model)]="transactionLine.lineDiscount"></co-input-text>
+          </div>
+          <div class="side-panel-input-row">
+            <co-input-text class="side-panel-input" [placeholder]="'QUANTUM_DISCOUNT' | localize" [type]="'number'" [model]="transactionLine.quantumDiscount"></co-input-text>
+            <co-input-text class="side-panel-input" [placeholder]="'SPECIAL_DISCOUNT' | localize" [type]="'number'" [(model)]="transactionLine.specialDiscount"></co-input-text>
+          </div>
+          <div class="side-panel-input-row">
+            <co-input-text class="side-panel-input" [placeholder]="'SURCHARGE_AMOUNT' | localize" [model]="transactionLine.surchargeAmount" [readonly]="true"></co-input-text>
+            <co-input-text class="side-panel-input" [placeholder]="'BUSINESS_RULE_DISCOUNT' | localize" [model]="'NIET_GEIMPLEMENTEERD'" [readonly]="true"></co-input-text>
+          </div>
+        </div>
+      </co-collapsible>
+      <co-collapsible
+        [iconData]="iconService.getIcon(icons.TriangleUp)"
+        [headerTitle]="'LOGISTICS_AND_PLANNING' | localize"
+        [expandButtonLast]="true"
+        [expanded]="true"
+      >
+        <div class="collapsible-content-wrapper">
+          <div class="side-panel-input-row">
+            <co-input-combo-box class="side-panel-input" [collection]="data" [(model)]="transactionLine.commissionCode" [placeholder]="'COMMISSION_CODE' | localize"></co-input-combo-box>
+            <co-input-text class="side-panel-input" [placeholder]="'WAREHOUSE' | localize" [model]="transactionLine.warehouseNumber"></co-input-text>
+          </div>
+          <div class="side-panel-input-row">
+            <co-input-combo-box class="side-panel-input" [collection]="data" [placeholder]="'DELIVERY_METHOD' | localize"></co-input-combo-box>
+            <co-input-date class="side-panel-input" [placeholder]="'DELIVERY_DATE' | localize" [model]="transactionLine.deliveryDate"></co-input-date>
+          </div>
+          <div class="side-panel-input-row">
+            <co-input-text class="side-panel-input" [placeholder]="'ASSEMBLY_TIME' | localize" [readonly]="true"></co-input-text>
+            <co-input-text class="side-panel-input" [placeholder]="'ASSEMBLY_COSTS' | localize" [type]="'number'" [model]="transactionLine.assemblyCost" [readonly]="true"></co-input-text>
+          </div>
+          <div class="side-panel-input-row">
+            <co-input-text class="side-panel-input" [placeholder]="'MODIFICATION_TIME' | localize" [readonly]="true"></co-input-text>
+          </div>
+          <div class="side-panel-input-row">
+            <co-input-combo-box class="side-panel-input" [collection]="data" [placeholder]="'SUPPLIER' | localize"></co-input-combo-box>
+            <co-input-text class="side-panel-input" [placeholder]="'ARTICLE_NR_SUPPLIER' | localize" [model]="transactionLine.articleNumber" [readonly]="true"></co-input-text>
+          </div>
+          <div class="side-panel-input-row">
+            <co-input-text class="side-panel-input" [placeholder]="'IN_OUT_COLLECTION' | localize" [readonly]="true"></co-input-text>
+          </div>
+        </div>
+      </co-collapsible>
+
+      <co-collapsible
+        [iconData]="iconService.getIcon(icons.TriangleUp)"
+        [headerTitle]="'OTHER' | localize"
+        [expandButtonLast]="true"
+        [expanded]="true"
+      >
+        <div class="collapsible-content-wrapper">
+          <div class="side-panel-input-row">
+            <co-input-text class="side-panel-input" [placeholder]="'REFERENCE' | localize" [model]="transactionLine.refLineNr"></co-input-text>
+          </div>
+          <div class="side-panel-input-row">
+            <co-input-text class="side-panel-input" [placeholder]="'ORDER_RULESET' | localize"></co-input-text>
+          </div>
+          <div class="side-panel-input-row">
+            <co-input-text class="side-panel-input" [placeholder]="'LAST_EDITED_DATE' | localize" [readonly]="true"></co-input-text>
+            <co-input-text class="side-panel-input" [placeholder]="'LAST_EDITED_USER' | localize" [readonly]="true"></co-input-text>
+          </div>
+          <co-input-text [placeholder]="'FABRICATION_COST' | localize" [readonly]="true"></co-input-text>
+          <co-input-text [placeholder]="'TRANSPORT_COST' | localize" [readonly]="true"></co-input-text>
+          <co-input-text [placeholder]="'FABRICATION_COST_LINE_TOTAL' | localize" [readonly]="true"></co-input-text>
+          <co-input-text [placeholder]="'TRANSPORT_COST_LINE_TOTAL' | localize" [readonly]="true"></co-input-text>
+          <co-input-text [placeholder]="'CUSTOMER' | localize" [readonly]="true"></co-input-text>
+        </div>
+        </co-collapsible>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionLineSidePanelComponent.ctorParameters = () => [
+    { type: IconCacheService },
+    { type: TransactionService }
+];
+TransactionLineSidePanelComponent.propDecorators = {
+    child: [{ type: ViewChild, args: ['inputPrice', { read: InputTextComponent },] }],
+    transactionLine: [{ type: Input }],
+    cancelClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-line-side-panel",] }]
+};
+
+class TransactionLineSidePanelModule {
+}
+TransactionLineSidePanelModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule,
+                    PipeModule,
+                    ButtonModule,
+                    CollapsibleModule,
+                    InputTextModule,
+                    InputComboBoxModule,
+                    InputDatePickerModule,
+                    InputNumberPickerModule
+                ],
+                declarations: [
+                    TransactionLineSidePanelComponent
+                ],
+                exports: [
+                    TransactionLineSidePanelComponent
+                ]
+            },] }
+];
+
+class TransactionLineModule {
+}
+TransactionLineModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule,
+                    ButtonModule,
+                    InputNumberPickerModule,
+                    TransactionArticleTextModule,
+                    TransactionArticleTextOverviewModule,
+                    PipeModule,
+                    TransactionLineSidePanelModule
+                ],
+                declarations: [
+                    TransactionLineComponent
+                ],
+                exports: [
+                    TransactionLineComponent
+                ]
+            },] }
+];
+
+class TransactionLinesComponent {
+    constructor(iconCacheService, service) {
+        this.iconCacheService = iconCacheService;
+        this.service = service;
+        this.icons = Icon;
+        this.transactionLines = [];
+        this.preview = false;
+        this.saveTransactionLine = new EventEmitter();
+        this.showTransactionArticleText = false;
+        this.userActionRequired = false;
+    }
+    showClass() {
+        return true;
+    }
+    trackByFn(index, line) {
+        return line.lineNr;
+    }
+    handleCanDragDrop(drag, drop) {
+        return drag.data instanceof TransactionLineInfo;
+    }
+    handleDrop(event) {
+        try {
+            const from = event.previousIndex;
+            const to = event.currentIndex;
+            if (from === to) {
+                return;
+            }
+            const beingDropped = this.transactionLines[from];
+            const target = this.transactionLines[to];
+            // set items in correct order
+            moveItemInArray(this.transactionLines, from, to);
             this.service.changeLineSequence(beingDropped.uuid, from > to ? target.lineNr : null, from < to ? target.lineNr : null).catch(() => {
                 // something went wrong, reset drop
                 moveItemInArray(this.transactionLines, to, from);
@@ -5578,13 +5814,17 @@ TransactionLinesComponent.decorators = [
     <div cdkDropListGroup class="drop-list-group">
       <div #dropList cdkDropList cdkDropListOrientation="vertical"
            class="transaction-lines-drag-drop-list narrow-scrollbar"
-           [cdkDropListDisabled]="preview"
+           [cdkDropListDisabled]="preview || userActionRequired"
            [cdkDropListData]="transactionLines"
            [cdkDropListEnterPredicate]="handleCanDragDrop"
            (cdkDropListDropped)="handleDrop($event)"
       >
         <div class="draggable-transaction-line" *ngFor="let line of transactionLines; trackBy:trackByFn;" cdkDrag>
-          <co-transaction-line [preview]="preview" [line]="line" (dblclick)="handleTransactionLineDblClick(line)"></co-transaction-line>
+          <co-transaction-line
+            [preview]="preview"
+            [line]="line"
+            (dblclick)="handleTransactionLineDblClick(line)"
+            (waitingForUserAction)="userActionRequired = $event"></co-transaction-line>
         </div>
       </div>
     </div>
@@ -5601,101 +5841,603 @@ TransactionLinesComponent.decorators = [
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-TransactionLinesComponent.ctorParameters = () => [
-    { type: IconCacheService },
-    { type: TransactionService }
+TransactionLinesComponent.ctorParameters = () => [
+    { type: IconCacheService },
+    { type: TransactionService }
+];
+TransactionLinesComponent.propDecorators = {
+    transactionArticleText: [{ type: ViewChild, args: [TransactionArticleTextComponent,] }],
+    transactionLines: [{ type: Input }],
+    preview: [{ type: Input }],
+    saveTransactionLine: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-lines",] }]
+};
+
+class TransactionLinesModule {
+}
+TransactionLinesModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule,
+                    TransactionLineModule,
+                    DragDropModule,
+                    ButtonModule,
+                    TransactionArticleTextModule,
+                    PipeModule
+                ],
+                declarations: [
+                    TransactionLinesComponent
+                ],
+                exports: [
+                    TransactionLinesComponent
+                ]
+            },] }
+];
+
+class ShoppingCartPreviewComponent {
+    constructor(service) {
+        this.service = service;
+        this.icons = Icon;
+        this.showCheckoutButton = true;
+        this.withoutBorder = false;
+        this.checkout = new EventEmitter();
+        this.editCartClick = new EventEmitter();
+    }
+    showClass() {
+        return true;
+    }
+}
+ShoppingCartPreviewComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-shopping-cart-preview",
+                template: `
+    <div class="cart-header">
+      <span class="cart-header-label" [textContent]="'CART' | localize"></span>
+    </div>
+    <div class="cart-lines">
+      <co-transaction-lines
+        [transactionLines]="service.currentTransaction.transactionLines"
+        [preview]="true"
+      ></co-transaction-lines>
+    </div>
+    <div class="preview-totals-wrapper">
+      <co-transaction-totals [totals]="service.currentTransaction.transactionTotal"></co-transaction-totals>
+    </div>
+    <div class="cart-buttons">
+      <a class="button-edit-cart" [textContent]="'EDIT_CART' | localize"
+         (click)="editCartClick.emit()"
+      ></a>
+      <co-button *ngIf="showCheckoutButton" class="button-checkout" [label]="'SHOPPING_CART_CHECKOUT' | localize"
+                 [disabled]="!service.articleAmount"
+                 (click)="checkout.emit()"></co-button>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+ShoppingCartPreviewComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+ShoppingCartPreviewComponent.propDecorators = {
+    showCheckoutButton: [{ type: Input }],
+    withoutBorder: [{ type: HostBinding, args: ["class.borderless",] }, { type: Input }],
+    checkout: [{ type: Output }],
+    editCartClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-shopping-cart-preview",] }]
+};
+
+class ShoppingCartPreviewModule {
+}
+ShoppingCartPreviewModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule,
+                    ButtonModule,
+                    TransactionLinesModule,
+                    TransactionTotalsModule,
+                    PipeModule
+                ],
+                declarations: [
+                    ShoppingCartPreviewComponent
+                ],
+                exports: [
+                    ShoppingCartPreviewComponent
+                ]
+            },] }
+];
+
+class SellerInformationComponent {
+    constructor(_service) {
+        this._service = _service;
+    }
+    set relationId(value) {
+        this._relationId = value;
+        this._getRelation();
+    }
+    get relationId() {
+        return this._relationId;
+    }
+    showClass() {
+        return true;
+    }
+    _getRelation() {
+        if (!isNaN(this._relationId)) {
+            const request = new RelationRequest();
+            request.relationId = this._relationId;
+            this._service.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)
+                            .then((content) => {
+                            this.image = content;
+                        })
+                            .catch((e) => {
+                            this.image = "";
+                        });
+                    }
+                }
+            });
+        }
+    }
+}
+SellerInformationComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-seller-information",
+                template: `
+    <co-image-display [model]="image" *ngIf="image; else showInitials"></co-image-display>
+    <ng-template #showInitials>
+      <svg viewBox="0 0 30 30">
+        <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">{{ relation?.displayInitials }}</text>
+      </svg>
+    </ng-template>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+SellerInformationComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+SellerInformationComponent.propDecorators = {
+    relationId: [{ type: Input }],
+    relation: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-seller-information",] }]
+};
+
+class SellerInformationModule {
+}
+SellerInformationModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule
+                ],
+                declarations: [
+                    SellerInformationComponent
+                ],
+                exports: [
+                    SellerInformationComponent
+                ]
+            },] }
+];
+
+class DeliveryType {
+}
+
+class DeliveryTypeTileComponent {
+    constructor() {
+        this.type = new DeliveryType();
+        this.selected = false;
+        this.selectedChange = new EventEmitter();
+        this.deliveryTypeIdx = 0;
+    }
+    showClass() {
+        return true;
+    }
+    setIndexDeliveryType(index) {
+        console.log(index);
+    }
+}
+DeliveryTypeTileComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-delivery-type-tile",
+                template: `
+    <co-tile [selected]="selected" (selectedChange)="selectedChange.emit($event)">
+      <div class="delivery-type-content-wrapper">
+        <div class="delivery-type-title" [textContent]="type.description"></div>
+        <div class="delivery-type-icon">
+          <icon [icon]="type.icon"></icon>
+        </div>
+        <div *ngIf="type.price" class="delivery-type-price" [textContent]="type.price | priceDisplay"></div>
+      </div>
+    </co-tile>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+DeliveryTypeTileComponent.propDecorators = {
+    type: [{ type: Input }],
+    selected: [{ type: Input }],
+    selectedChange: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-delivery-type-tile",] }]
+};
+
+class DeliveryTypeTileModule {
+}
+DeliveryTypeTileModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule,
+                    InputRadioButtonModule,
+                    PriceDisplayPipeModule,
+                    TileModule
+                ],
+                declarations: [
+                    DeliveryTypeTileComponent
+                ],
+                exports: [
+                    DeliveryTypeTileComponent
+                ]
+            },] }
+];
+
+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 = [];
+    }
+    showClass() {
+        return true;
+    }
+    ngOnInit() {
+        this._getCashRegisters();
+    }
+    _getCashRegisters() {
+        this._transactionService.getCashRegisters().then((cashRegisters) => {
+            this.cashRegisters = cashRegisters;
+        });
+    }
+}
+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();
+    }
+    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 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 }],
+    icon: [{ type: Input }],
+    description: [{ type: Input }],
+    selectedChange: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-payment-tile",] }]
+};
+
+class PaymentTileModule {
+}
+PaymentTileModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    TileModule,
+                    CoreModule,
+                    PipeModule
+                ],
+                declarations: [
+                    PaymentTileComponent
+                ],
+                exports: [
+                    PaymentTileComponent
+                ]
+            },] }
+];
+
+class PaymentModule {
+}
+PaymentModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule,
+                    PipeModule,
+                    PaymentTileModule,
+                    PriceDisplayPipeModule
+                ],
+                declarations: [
+                    PaymentComponent
+                ],
+                exports: [
+                    PaymentComponent
+                ]
+            },] }
+];
+
+class CheckoutModule {
+}
+CheckoutModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CoreModule,
+                    CommonModule,
+                    IconModule,
+                    InputTextModule,
+                    InputCheckboxModule,
+                    InputRadioButtonModule,
+                    FormModule,
+                    InputComboBoxModule,
+                    InputDatePickerModule,
+                    InputNumberPickerModule,
+                    CoDialogModule,
+                    CoDialogPromptModule,
+                    ButtonModule,
+                    FlexModule,
+                    MultiSelectListModule,
+                    DropDownModule,
+                    PopupModule.forRoot(),
+                    CoSidebarModule,
+                    CoGridModule,
+                    ReactiveFormsModule,
+                    FormsModule,
+                    RelationAddressModule,
+                    RelationAddressSelectModule,
+                    RelationAddressTileModule,
+                    CoRichTextEditorModule,
+                    Carousel3dModule,
+                    InputTextareaModule,
+                    InputListboxModule,
+                    PipeModule,
+                    StepperModule,
+                    ShoppingCartPreviewModule,
+                    SellerInformationModule,
+                    DeliveryTypeTileModule,
+                    CollapsibleModule,
+                    PaymentModule,
+                ],
+                declarations: [
+                    CheckoutOverviewRelationEditComponent,
+                    CheckoutOverviewDeliveryEditComponent,
+                    CheckoutOverviewDeliveryAddressComponent,
+                    CheckOutRelationSuggestionsListComponent,
+                    CheckOutRelationSuggestionsListItemComponent,
+                    CheckoutLoginComponent,
+                    CheckoutComponent,
+                ],
+                providers: [
+                    DictionaryService,
+                    OptionsService
+                ],
+                entryComponents: [
+                    CheckoutComponent
+                ],
+                exports: [CheckoutComponent],
+                bootstrap: [CheckoutComponent]
+            },] }
+];
+
+class ShoppingCartComponent {
+    constructor(service, _dictionary) {
+        this.service = service;
+        this._dictionary = _dictionary;
+        this.closeCart = new EventEmitter();
+        this.checkout = new EventEmitter();
+        this.transaction = new TransactionInfoResponse();
+        this._subs = [];
+        this._subs.push(this.service.transactionUpdated.subscribe((transaction) => {
+            if (transaction) {
+                this.transaction = transaction;
+            }
+        }));
+    }
+    showClass() {
+        return true;
+    }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+}
+ShoppingCartComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-shopping-cart",
+                template: `
+    <div class="cart-header">
+      <span class="cart-header-label" [textContent]="'SHOPPING_CART_OVERVIEW' | localize | append:'(' + service.articleAmount + ')'"></span>
+    </div>
+    <div class="shopping-cart-transaction-wrapper">
+      <co-transaction [showHeader]="false" [transaction]="transaction"></co-transaction>
+    </div>
+    <div class="cart-buttons">
+      <a class="button-resume" [textContent]="'SHOPPING_CART_RESUME' | localize"
+                 (click)="closeCart.emit()"
+      ></a>
+      <co-button class="button-checkout" [label]="'SHOPPING_CART_CHECKOUT' | localize"
+                 [disabled]="service.articleAmount === 0"
+                 (click)="checkout.emit()"></co-button>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+ShoppingCartComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: DictionaryService }
 ];
-TransactionLinesComponent.propDecorators = {
-    transactionArticleText: [{ type: ViewChild, args: [TransactionArticleTextComponent,] }],
-    transactionLines: [{ type: Input }],
-    preview: [{ type: Input }],
-    saveTransactionLine: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.co-transaction-lines",] }]
+ShoppingCartComponent.propDecorators = {
+    closeCart: [{ type: Output }],
+    checkout: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-shopping-cart",] }]
 };
 
-class TransactionLinesModule {
-}
-TransactionLinesModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    CoreModule,
-                    TransactionLineModule,
-                    DragDropModule,
-                    ButtonModule,
-                    TransactionArticleTextModule,
-                    PipeModule
-                ],
-                declarations: [
-                    TransactionLinesComponent
-                ],
-                exports: [
-                    TransactionLinesComponent
-                ]
-            },] }
-];
+// The different view modes for content, e.g. list, grid, ..
+var ContentViewMode;
+(function (ContentViewMode) {
+    ContentViewMode[ContentViewMode["List"] = 0] = "List";
+    ContentViewMode[ContentViewMode["Grid"] = 1] = "Grid";
+    ContentViewMode[ContentViewMode["GridExpanded"] = 2] = "GridExpanded";
+    ContentViewMode[ContentViewMode["MasterDetail"] = 3] = "MasterDetail";
+    ContentViewMode[ContentViewMode["Timeline"] = 4] = "Timeline";
+})(ContentViewMode || (ContentViewMode = {}));
 
-class TransactionTotalsComponent {
-    constructor() {
-        this.showDiscount = false;
-        this.discountClick = new EventEmitter();
+class TransactionComponent {
+    constructor(iconCacheService, _service) {
+        this.iconCacheService = iconCacheService;
+        this._service = _service;
+        this.viewModes = ContentViewMode;
+        this.icons = Icon;
+        this.transaction = new TransactionInfoResponse();
+        this.showHeader = true;
+        this.activeViewMode = ContentViewMode.List;
+        this.showDiscountsSidebar = false;
+        this._subs = [];
+        this._subs.push(this._service.transactionUpdated.subscribe((transaction) => __awaiter(this, void 0, void 0, function* () {
+            this.transaction = transaction;
+        })));
+    }
+    set transactionId(value) {
+        if (value) {
+            this._service.getTransactionById(value);
+        }
     }
     showClass() {
         return true;
     }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+    addDiscount() {
+        this.showDiscountsSidebar = true;
+        // TODO
+        // this.transactionDiscountPercentage = this.service.currentTransaction.transactionDiscountPercentage;
+        // this.transactionDiscountAmount = this.service.currentTransaction.transactionDiscountAmount;
+        // this.transactionTotal = undefined;
+    }
+    saveTransactionLine(transactionAddTextLineRequest) {
+        if (transactionAddTextLineRequest.transactionUuid) { //update
+        }
+        else { // new transactionLine (transactionArticleText)
+            this._service.addTextLine(transactionAddTextLineRequest.showOnDocuments, transactionAddTextLineRequest.text, 0, transactionAddTextLineRequest.articleBound, 0, 0, 0);
+        }
+    }
 }
-TransactionTotalsComponent.decorators = [
+TransactionComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-transaction-totals",
+                selector: "co-transaction",
                 template: `
-    <div class="transaction-totals-wrapper">
-      <span class="totals-gross label" [textContent]="'ORDER_GROSS' | localize"></span>
-      <span class="totals-gross value" [textContent]="totals?.grossAmount | coCurrency: true"></span>
-      <ng-container *ngIf="totals?.discountAmount">
-        <span class="totals-discount-amount label" [textContent]="'DISCOUNT_AMOUNT' | localize"></span>
-        <span class="totals-discount-amount value" [textContent]="totals?.discountAmount | coCurrency: true"></span>
-      </ng-container>
-      <ng-container *ngIf="totals?.transactionDiscountAmount">
-        <span class="totals-discount label" [textContent]="'TRANSACTION_DISCOUNT' | localize"></span>
-        <span class="totals-discount value" [textContent]="totals?.transactionDiscountAmount | coCurrency: true"></span>
-      </ng-container>
-      <ng-container *ngIf="totals?.transactionDiscountPercentage">
-        <span class="totals-discount-percentage label" [textContent]="'TRANSACTION_DISCOUNT_PERC' | localize"></span>
-        <span class="totals-discount-percentage value" [textContent]="totals?.transactionDiscountPercentage.toString() | append:' %'"></span>
-      </ng-container>
-      <span class="totals-net label" [textContent]="'ORDER_NET'| localize"></span>
-      <span class="totals-net value" [textContent]="totals?.netAmount | coCurrency: true"></span>
-      <a *ngIf="showDiscount" class="add-discount label" (click)="discountClick.emit($event)" [textContent]="'ADD_DISCOUNTS' | localize"></a>
+    <co-transaction-header *ngIf="showHeader" [transaction]="transaction"></co-transaction-header>
+    <div class="transaction-view-mode-buttons">
+      <co-button class="view-button white"
+                 [class.selected]="this.activeViewMode === viewModes.List"
+                 [iconData]="iconCacheService.getIcon(icons.ThickLines)"
+                 [title]="'LIST_VIEW' | localize"
+                 (click)="this.activeViewMode = viewModes.List"></co-button>
+      <co-button class="view-button white"
+                 [class.selected]="this.activeViewMode === viewModes.Grid"
+                 [iconData]="iconCacheService.getIcon(icons.ThinLines)"
+                 [title]="'GRID_VIEW' | localize"
+                 (click)="this.activeViewMode = viewModes.Grid"></co-button>
+    </div>
+    <div class="transaction-lines-wrapper" *ngIf="activeViewMode === viewModes.List">
+      <co-transaction-lines
+        [transactionLines]="transaction.transactionLines"
+        (saveTransactionLine)="saveTransactionLine($event)"
+      ></co-transaction-lines>
+    </div>
+    <div class="transaction-lines-grid-wrapper" *ngIf="activeViewMode === viewModes.Grid">
+      <co-transaction-lines-grid
+        [transactionLines]="transaction.transactionLines"
+      ></co-transaction-lines-grid>
+    </div>
+    <div class="transaction-footer-wrapper">
+      <co-transaction-totals [totals]="transaction.transactionTotal" [showDiscount]="true" (discountClick)="addDiscount()"></co-transaction-totals>
     </div>
+    <co-discount *ngIf="showDiscountsSidebar">
+    </co-discount>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-TransactionTotalsComponent.propDecorators = {
-    totals: [{ type: Input }],
-    showDiscount: [{ type: Input }],
-    discountClick: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.co-transaction-totals",] }]
+TransactionComponent.ctorParameters = () => [
+    { type: IconCacheService },
+    { type: TransactionService }
+];
+TransactionComponent.propDecorators = {
+    transaction: [{ type: Input }],
+    transactionId: [{ type: Input }],
+    showHeader: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-transaction",] }]
 };
 
-class TransactionTotalsModule {
-}
-TransactionTotalsModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    CoreModule,
-                    PipeModule
-                ],
-                declarations: [
-                    TransactionTotalsComponent
-                ],
-                exports: [
-                    TransactionTotalsComponent
-                ]
-            },] }
-];
-
 class TransactionHeaderComponent {
     constructor() {
         this.icons = Icon;
@@ -6259,75 +7001,6 @@ ShoppingCartModule.decorators = [
             },] }
 ];
 
-class ShoppingCartPreviewComponent {
-    constructor(service) {
-        this.service = service;
-        this.icons = Icon;
-        this.checkout = new EventEmitter();
-        this.editCartClick = new EventEmitter();
-    }
-    showClass() {
-        return true;
-    }
-}
-ShoppingCartPreviewComponent.decorators = [
-    { type: Component, args: [{
-                selector: "co-shopping-cart-preview",
-                template: `
-    <div class="cart-header">
-      <span class="cart-header-label" [textContent]="'CART' | localize"></span>
-    </div>
-    <div class="cart-lines">
-      <co-transaction-lines
-        [transactionLines]="service.currentTransaction.transactionLines"
-        [preview]="true"
-      ></co-transaction-lines>
-    </div>
-    <div class="preview-totals-wrapper">
-      <co-transaction-totals [totals]="service.currentTransaction.transactionTotal"></co-transaction-totals>
-    </div>
-    <div class="cart-buttons">
-      <a class="button-edit-cart" [textContent]="'EDIT_CART' | localize"
-         (click)="editCartClick.emit()"
-      ></a>
-      <co-button class="button-checkout" [label]="'SHOPPING_CART_CHECKOUT' | localize"
-                 [disabled]="!service.articleAmount"
-                 (click)="checkout.emit()"></co-button>
-    </div>
-  `,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-ShoppingCartPreviewComponent.ctorParameters = () => [
-    { type: TransactionService }
-];
-ShoppingCartPreviewComponent.propDecorators = {
-    checkout: [{ type: Output }],
-    editCartClick: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.co-shopping-cart-preview",] }]
-};
-
-class ShoppingCartPreviewModule {
-}
-ShoppingCartPreviewModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    CoreModule,
-                    ButtonModule,
-                    TransactionLinesModule,
-                    TransactionTotalsModule,
-                    PipeModule
-                ],
-                declarations: [
-                    ShoppingCartPreviewComponent
-                ],
-                exports: [
-                    ShoppingCartPreviewComponent
-                ]
-            },] }
-];
-
 class TransactionLineGridComponent {
     constructor() {
         this.transactionLines = [];
@@ -6371,5 +7044,5 @@ TransactionLineGridModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { CheckoutComponent, CheckoutModule, ShoppingCartComponent, ShoppingCartModule, ShoppingCartPreviewComponent, ShoppingCartPreviewModule, TransactionComponent, TransactionHeaderComponent, TransactionHeaderContactComponent, TransactionHeaderContactModule, TransactionHeaderDeliveryComponent, TransactionHeaderDeliveryModule, TransactionHeaderModule, TransactionHeaderRelationComponent, TransactionHeaderRelationModule, TransactionLineComponent, TransactionLineGridComponent, TransactionLineGridModule, TransactionLineModule, TransactionLinesComponent, TransactionLinesGridComponent, TransactionLinesGridModule, TransactionLinesModule, TransactionModule, TransactionService, TransactionTotalsComponent, TransactionTotalsModule, PendingReasonService as ɵa, DialogService as ɵb, RelationAddressTileComponent as ɵba, RelationAddressSelectComponent as ɵbb, BusinessObjectFactory as ɵbc, StepperModule as ɵbd, StepperComponent as ɵbe, StepperStepComponent as ɵbf, CheckoutOverviewRelationEditComponent as ɵbg, CheckoutOverviewDeliveryEditComponent as ɵbh, CheckoutOverviewDeliveryAddressComponent as ɵbi, CheckOutRelationSuggestionsListComponent as ɵbj, CheckOutRelationSuggestionsListItemComponent as ɵbk, CheckoutLoginComponent as ɵbl, TransactionBaseComponent as ɵbm, TransactionArticleTextModule as ɵbn, TransactionArticleTextComponent as ɵbo, TransactionArticleTextOverviewModule as ɵbp, TransactionArticleTextOverviewComponent as ɵbq, DiscountModule as ɵbr, DiscountComponent as ɵbs, OptionsService as ɵc, DictionaryService as ɵd, IOneConnectorAdapterService as ɵe, CoreModule as ɵf, ConfirmationDialogModule as ɵg, PipeModule as ɵh, AppendPipe as ɵi, DeliveryTimePipe as ɵj, DateDurationPipe as ɵk, LocalizePipe as ɵl, CoCurrencyPipe as ɵm, SafeStylePipe as ɵn, SafeHtmlPipe as ɵo, ConfirmationDialogComponent as ɵp, DialogBaseComponent as ɵq, ImageDisplayComponent as ɵr, IconComponent as ɵs, IconCacheService as ɵt, CustomerGroupsComponent as ɵu, StockStatusIndicatorComponent as ɵv, RelationAddressModule as ɵw, RelationAddressComponent as ɵx, RelationAddressSelectModule as ɵy, RelationAddressTileModule as ɵz };
+export { CheckoutComponent, CheckoutModule, ShoppingCartComponent, ShoppingCartModule, ShoppingCartPreviewComponent, ShoppingCartPreviewModule, TransactionComponent, TransactionHeaderComponent, TransactionHeaderContactComponent, TransactionHeaderContactModule, TransactionHeaderDeliveryComponent, TransactionHeaderDeliveryModule, TransactionHeaderModule, TransactionHeaderRelationComponent, TransactionHeaderRelationModule, TransactionLineComponent, TransactionLineGridComponent, TransactionLineGridModule, TransactionLineModule, TransactionLinesComponent, TransactionLinesGridComponent, TransactionLinesGridModule, TransactionLinesModule, TransactionModule, TransactionService, TransactionTotalsComponent, TransactionTotalsModule, PendingReasonService as ɵa, DialogService as ɵb, TileModule as ɵba, TileComponent as ɵbb, RelationAddressTileComponent as ɵbc, RelationAddressSelectComponent as ɵbd, BusinessObjectFactory as ɵbe, StepperModule as ɵbf, StepperComponent as ɵbg, StepperStepComponent as ɵbh, TransactionArticleTextModule as ɵbi, TransactionArticleTextComponent as ɵbj, TransactionArticleTextOverviewModule as ɵbk, TransactionArticleTextOverviewComponent as ɵbl, TransactionLineSidePanelModule as ɵbm, TransactionLineSidePanelComponent as ɵbn, SellerInformationModule as ɵbo, SellerInformationComponent 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, TransactionBaseComponent as ɵcc, DiscountModule as ɵcd, DiscountComponent as ɵce, DictionaryService as ɵd, IOneConnectorAdapterService as ɵe, CoreModule as ɵf, ConfirmationDialogModule as ɵg, PipeModule as ɵh, AppendPipe as ɵi, DeliveryTimePipe as ɵj, DateDurationPipe as ɵk, LocalizePipe as ɵl, CoCurrencyPipe as ɵm, SafeStylePipe as ɵn, SafeHtmlPipe as ɵo, ConfirmationDialogComponent as ɵp, DialogBaseComponent as ɵq, ImageDisplayComponent as ɵr, IconComponent as ɵs, IconCacheService as ɵt, CustomerGroupsComponent as ɵu, StockStatusIndicatorComponent as ɵv, RelationAddressModule as ɵw, RelationAddressComponent as ɵx, RelationAddressSelectModule as ɵy, RelationAddressTileModule as ɵz };
 //# sourceMappingURL=colijnit-transaction.js.map