@colijnit/transaction 12.1.8 → 12.1.9

package/bundles/colijnit-transaction.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@colijnit/transactionapi/build/model/nul-relation-object'), require('@colijnit/transactionapi/build/enum/transaction-kind.enum'), require('@colijnit/transactionapi/build/enum/sequence-name.enum'), require('@colijnit/transactionapi/build/enum/transaction-line-type.enum'), require('@colijnit/transactionapi/build/enum/pending-reason-type.enum'), require('rxjs'), require('@colijnit/transactionapi/build/enum/address-type.enum'), require('@colijnit/transactionapi/build/model/transaction-info-response.bo'), require('@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo'), require('@colijnit/transactionapi/build/model/customer-full-object.bo'), require('@colijnit/transactionapi/build/model/relation-privacy-setting.bo'), require('@colijnit/transactionapi/build/model/get-postal-code-retrieval-output-params'), require('@colijnit/transactionapi/build/model/relation-list-object.bo'), require('@colijnit/transactionapi/build/model/co-domain-value.bo'), require('@colijnit/transactionapi/build/model/article-full-object'), require('@colijnit/transactionapi/build/model/line-operation-response.bo'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/transactionapi/build/utils/function/not-nill.function'), require('@colijnit/transactionapi/build/utils/object-utils'), require('@colijnit/transactionapi/build/enum/yes-no-db-type.enum'), require('@colijnit/transactionapi/build/enum/true-false-db-type.enum'), require('@colijnit/transactionapi/build/enum/one-zero-bool-db-type.enum'), require('@colijnit/transactionapi/build/enum/db-boolean-value-type.enum'), require('@colijnit/transactionapi/build/utils/date-utils'), require('@colijnit/transactionapi/build/utils/number-utils'), require('@colijnit/transactionapi/build/utils/function/is-nill.function'), require('@colijnit/transactionapi/build/factory/decorators/map-property.decorator'), require('@colijnit/transactionapi/build/factory/decorators/boolean.decorator'), require('@colijnit/transactionapi/build/factory/decorators/json.decorator'), require('@colijnit/transactionapi/build/factory/decorators/complex-array.decorator'), require('@colijnit/transactionapi/build/utils/image-utils'), require('@colijnit/transactionapi/build/model/transaction-line-info.bo'), require('@colijnit/transactionapi/build/model/set-transaction-delivery-options-request.bo'), require('@colijnit/transactionapi/build/enum/relation-status.enum'), require('@colijnit/corecomponents_v12'), require('@angular/flex-layout'), require('@colijnit/transactionapi/build/enum/communication-type.enum'), require('@colijnit/transactionapi/build/model/contact-option.bo'), require('@colijnit/transactionapi/build/enum/relation-name-kind.enum'), require('@colijnit/transactionapi/build/enum/gender-type.enum'), require('@colijnit/transactionapi/build/utils/business-object-utils'), require('@colijnit/transactionapi/build/utils/function-utils'), require('@colijnit/transactionapi/build/model/address.bo'), require('@angular/animations'), require('@angular/common'), require('@angular/platform-browser'), require('@angular/forms'), require('@angular/cdk/drag-drop'), require('@colijnit/transactionapi/build/model/transaction-add-text-line-request.bo'), require('@colijnit/transactionapi/build/enum/refcode/stock-status.enum'), require('@colijnit/transactionapi/build/model/relation-request'), require('@colijnit/transactionapi/build/model/delivery-method.bo')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/transaction', ['exports', '@angular/core', '@colijnit/transactionapi/build/model/nul-relation-object', '@colijnit/transactionapi/build/enum/transaction-kind.enum', '@colijnit/transactionapi/build/enum/sequence-name.enum', '@colijnit/transactionapi/build/enum/transaction-line-type.enum', '@colijnit/transactionapi/build/enum/pending-reason-type.enum', 'rxjs', '@colijnit/transactionapi/build/enum/address-type.enum', '@colijnit/transactionapi/build/model/transaction-info-response.bo', '@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo', '@colijnit/transactionapi/build/model/customer-full-object.bo', '@colijnit/transactionapi/build/model/relation-privacy-setting.bo', '@colijnit/transactionapi/build/model/get-postal-code-retrieval-output-params', '@colijnit/transactionapi/build/model/relation-list-object.bo', '@colijnit/transactionapi/build/model/co-domain-value.bo', '@colijnit/transactionapi/build/model/article-full-object', '@colijnit/transactionapi/build/model/line-operation-response.bo', '@colijnit/transactionapi/build/transaction', '@colijnit/transactionapi/build/utils/function/not-nill.function', '@colijnit/transactionapi/build/utils/object-utils', '@colijnit/transactionapi/build/enum/yes-no-db-type.enum', '@colijnit/transactionapi/build/enum/true-false-db-type.enum', '@colijnit/transactionapi/build/enum/one-zero-bool-db-type.enum', '@colijnit/transactionapi/build/enum/db-boolean-value-type.enum', '@colijnit/transactionapi/build/utils/date-utils', '@colijnit/transactionapi/build/utils/number-utils', '@colijnit/transactionapi/build/utils/function/is-nill.function', '@colijnit/transactionapi/build/factory/decorators/map-property.decorator', '@colijnit/transactionapi/build/factory/decorators/boolean.decorator', '@colijnit/transactionapi/build/factory/decorators/json.decorator', '@colijnit/transactionapi/build/factory/decorators/complex-array.decorator', '@colijnit/transactionapi/build/utils/image-utils', '@colijnit/transactionapi/build/model/transaction-line-info.bo', '@colijnit/transactionapi/build/model/set-transaction-delivery-options-request.bo', '@colijnit/transactionapi/build/enum/relation-status.enum', '@colijnit/corecomponents_v12', '@angular/flex-layout', '@colijnit/transactionapi/build/enum/communication-type.enum', '@colijnit/transactionapi/build/model/contact-option.bo', '@colijnit/transactionapi/build/enum/relation-name-kind.enum', '@colijnit/transactionapi/build/enum/gender-type.enum', '@colijnit/transactionapi/build/utils/business-object-utils', '@colijnit/transactionapi/build/utils/function-utils', '@colijnit/transactionapi/build/model/address.bo', '@angular/animations', '@angular/common', '@angular/platform-browser', '@angular/forms', '@angular/cdk/drag-drop', '@colijnit/transactionapi/build/model/transaction-add-text-line-request.bo', '@colijnit/transactionapi/build/enum/refcode/stock-status.enum', '@colijnit/transactionapi/build/model/relation-request', '@colijnit/transactionapi/build/model/delivery-method.bo'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.transaction = {}), global.ng.core, global.nulRelationObject, global.transactionKind_enum, global.sequenceName_enum, global.transactionLineType_enum, global.pendingReasonType_enum, global.rxjs, global.addressType_enum, global.transactionInfoResponse_bo, global.resolvePendingReasonRequest_bo, global.customerFullObject_bo, global.relationPrivacySetting_bo, global.getPostalCodeRetrievalOutputParams, global.relationListObject_bo, global.coDomainValue_bo, global.articleFullObject, global.lineOperationResponse_bo, global.transaction, global.notNill_function, global.objectUtils, global.yesNoDbType_enum, global.trueFalseDbType_enum, global.oneZeroBoolDbType_enum, global.dbBooleanValueType_enum, global.dateUtils, global.numberUtils, global.isNill_function, global.mapProperty_decorator, global.boolean_decorator, global.json_decorator, global.complexArray_decorator, global.imageUtils, global.transactionLineInfo_bo, global.setTransactionDeliveryOptionsRequest_bo, global.relationStatus_enum, global.corecomponents_v12, global.ng.flexLayout, global.communicationType_enum, global.contactOption_bo, global.relationNameKind_enum, global.genderType_enum, global.businessObjectUtils, global.functionUtils, global.address_bo, global.ng.animations, global.ng.common, global.ng.platformBrowser, global.ng.forms, global.ng.cdk.dragDrop, global.transactionAddTextLineRequest_bo, global.stockStatus_enum, global.relationRequest, global.deliveryMethod_bo));
-})(this, (function (exports, i0, nulRelationObject, transactionKind_enum, sequenceName_enum, transactionLineType_enum, pendingReasonType_enum, rxjs, addressType_enum, transactionInfoResponse_bo, resolvePendingReasonRequest_bo, customerFullObject_bo, relationPrivacySetting_bo, getPostalCodeRetrievalOutputParams, relationListObject_bo, coDomainValue_bo, articleFullObject, lineOperationResponse_bo, transaction, notNill_function, objectUtils, yesNoDbType_enum, trueFalseDbType_enum, oneZeroBoolDbType_enum, dbBooleanValueType_enum, dateUtils, numberUtils, isNill_function, mapProperty_decorator, boolean_decorator, json_decorator, complexArray_decorator, imageUtils, transactionLineInfo_bo, setTransactionDeliveryOptionsRequest_bo, relationStatus_enum, corecomponents_v12, flexLayout, communicationType_enum, contactOption_bo, relationNameKind_enum, genderType_enum, businessObjectUtils, functionUtils, address_bo, animations, common, i1, forms, dragDrop, transactionAddTextLineRequest_bo, stockStatus_enum, relationRequest, deliveryMethod_bo) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@colijnit/transactionapi/build/model/nul-relation-object'), require('@colijnit/transactionapi/build/enum/transaction-kind.enum'), require('@colijnit/transactionapi/build/enum/sequence-name.enum'), require('@colijnit/transactionapi/build/enum/transaction-line-type.enum'), require('@colijnit/transactionapi/build/enum/pending-reason-type.enum'), require('rxjs'), require('@colijnit/transactionapi/build/enum/address-type.enum'), require('@colijnit/transactionapi/build/model/transaction-info-response.bo'), require('@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo'), require('@colijnit/transactionapi/build/model/customer-full-object.bo'), require('@colijnit/transactionapi/build/model/relation-privacy-setting.bo'), require('@colijnit/transactionapi/build/model/delivery-method.bo'), require('@colijnit/transactionapi/build/model/get-postal-code-retrieval-output-params'), require('@colijnit/transactionapi/build/model/relation-list-object.bo'), require('@colijnit/transactionapi/build/model/co-domain-value.bo'), require('@colijnit/transactionapi/build/model/article-full-object'), require('@colijnit/transactionapi/build/model/line-operation-response.bo'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/transactionapi/build/utils/function/not-nill.function'), require('@colijnit/transactionapi/build/utils/object-utils'), require('@colijnit/transactionapi/build/enum/yes-no-db-type.enum'), require('@colijnit/transactionapi/build/enum/true-false-db-type.enum'), require('@colijnit/transactionapi/build/enum/one-zero-bool-db-type.enum'), require('@colijnit/transactionapi/build/enum/db-boolean-value-type.enum'), require('@colijnit/transactionapi/build/utils/date-utils'), require('@colijnit/transactionapi/build/utils/number-utils'), require('@colijnit/transactionapi/build/utils/function/is-nill.function'), require('@colijnit/transactionapi/build/factory/decorators/map-property.decorator'), require('@colijnit/transactionapi/build/factory/decorators/boolean.decorator'), require('@colijnit/transactionapi/build/factory/decorators/json.decorator'), require('@colijnit/transactionapi/build/factory/decorators/complex-array.decorator'), require('@colijnit/transactionapi/build/utils/image-utils'), require('@colijnit/transactionapi/build/model/transaction-line-info.bo'), require('@colijnit/transactionapi/build/model/cash-register'), require('@colijnit/transactionapi/build/model/set-transaction-delivery-options-request.bo'), require('@colijnit/transactionapi/build/enum/relation-status.enum'), require('@colijnit/corecomponents_v12'), require('@angular/flex-layout'), require('@colijnit/transactionapi/build/enum/communication-type.enum'), require('@colijnit/transactionapi/build/model/contact-option.bo'), require('@colijnit/transactionapi/build/enum/relation-name-kind.enum'), require('@colijnit/transactionapi/build/enum/gender-type.enum'), require('@colijnit/transactionapi/build/utils/business-object-utils'), require('@colijnit/transactionapi/build/utils/function-utils'), require('@colijnit/transactionapi/build/model/address.bo'), require('@angular/animations'), require('@angular/platform-browser'), require('@angular/common'), require('@angular/forms'), require('@angular/cdk/drag-drop'), require('@colijnit/transactionapi/build/model/transaction-add-text-line-request.bo'), require('@colijnit/transactionapi/build/enum/refcode/stock-status.enum'), require('@colijnit/transactionapi/build/model/relation-request')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/transaction', ['exports', '@angular/core', '@colijnit/transactionapi/build/model/nul-relation-object', '@colijnit/transactionapi/build/enum/transaction-kind.enum', '@colijnit/transactionapi/build/enum/sequence-name.enum', '@colijnit/transactionapi/build/enum/transaction-line-type.enum', '@colijnit/transactionapi/build/enum/pending-reason-type.enum', 'rxjs', '@colijnit/transactionapi/build/enum/address-type.enum', '@colijnit/transactionapi/build/model/transaction-info-response.bo', '@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo', '@colijnit/transactionapi/build/model/customer-full-object.bo', '@colijnit/transactionapi/build/model/relation-privacy-setting.bo', '@colijnit/transactionapi/build/model/delivery-method.bo', '@colijnit/transactionapi/build/model/get-postal-code-retrieval-output-params', '@colijnit/transactionapi/build/model/relation-list-object.bo', '@colijnit/transactionapi/build/model/co-domain-value.bo', '@colijnit/transactionapi/build/model/article-full-object', '@colijnit/transactionapi/build/model/line-operation-response.bo', '@colijnit/transactionapi/build/transaction', '@colijnit/transactionapi/build/utils/function/not-nill.function', '@colijnit/transactionapi/build/utils/object-utils', '@colijnit/transactionapi/build/enum/yes-no-db-type.enum', '@colijnit/transactionapi/build/enum/true-false-db-type.enum', '@colijnit/transactionapi/build/enum/one-zero-bool-db-type.enum', '@colijnit/transactionapi/build/enum/db-boolean-value-type.enum', '@colijnit/transactionapi/build/utils/date-utils', '@colijnit/transactionapi/build/utils/number-utils', '@colijnit/transactionapi/build/utils/function/is-nill.function', '@colijnit/transactionapi/build/factory/decorators/map-property.decorator', '@colijnit/transactionapi/build/factory/decorators/boolean.decorator', '@colijnit/transactionapi/build/factory/decorators/json.decorator', '@colijnit/transactionapi/build/factory/decorators/complex-array.decorator', '@colijnit/transactionapi/build/utils/image-utils', '@colijnit/transactionapi/build/model/transaction-line-info.bo', '@colijnit/transactionapi/build/model/cash-register', '@colijnit/transactionapi/build/model/set-transaction-delivery-options-request.bo', '@colijnit/transactionapi/build/enum/relation-status.enum', '@colijnit/corecomponents_v12', '@angular/flex-layout', '@colijnit/transactionapi/build/enum/communication-type.enum', '@colijnit/transactionapi/build/model/contact-option.bo', '@colijnit/transactionapi/build/enum/relation-name-kind.enum', '@colijnit/transactionapi/build/enum/gender-type.enum', '@colijnit/transactionapi/build/utils/business-object-utils', '@colijnit/transactionapi/build/utils/function-utils', '@colijnit/transactionapi/build/model/address.bo', '@angular/animations', '@angular/platform-browser', '@angular/common', '@angular/forms', '@angular/cdk/drag-drop', '@colijnit/transactionapi/build/model/transaction-add-text-line-request.bo', '@colijnit/transactionapi/build/enum/refcode/stock-status.enum', '@colijnit/transactionapi/build/model/relation-request'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.transaction = {}), global.ng.core, global.nulRelationObject, global.transactionKind_enum, global.sequenceName_enum, global.transactionLineType_enum, global.pendingReasonType_enum, global.rxjs, global.addressType_enum, global.transactionInfoResponse_bo, global.resolvePendingReasonRequest_bo, global.customerFullObject_bo, global.relationPrivacySetting_bo, global.deliveryMethod_bo, global.getPostalCodeRetrievalOutputParams, global.relationListObject_bo, global.coDomainValue_bo, global.articleFullObject, global.lineOperationResponse_bo, global.transaction, global.notNill_function, global.objectUtils, global.yesNoDbType_enum, global.trueFalseDbType_enum, global.oneZeroBoolDbType_enum, global.dbBooleanValueType_enum, global.dateUtils, global.numberUtils, global.isNill_function, global.mapProperty_decorator, global.boolean_decorator, global.json_decorator, global.complexArray_decorator, global.imageUtils, global.transactionLineInfo_bo, global.cashRegister, global.setTransactionDeliveryOptionsRequest_bo, global.relationStatus_enum, global.corecomponents_v12, global.ng.flexLayout, global.communicationType_enum, global.contactOption_bo, global.relationNameKind_enum, global.genderType_enum, global.businessObjectUtils, global.functionUtils, global.address_bo, global.ng.animations, global.ng.platformBrowser, global.ng.common, global.ng.forms, global.ng.cdk.dragDrop, global.transactionAddTextLineRequest_bo, global.stockStatus_enum, global.relationRequest));
+})(this, (function (exports, i0, nulRelationObject, transactionKind_enum, sequenceName_enum, transactionLineType_enum, pendingReasonType_enum, rxjs, addressType_enum, transactionInfoResponse_bo, resolvePendingReasonRequest_bo, customerFullObject_bo, relationPrivacySetting_bo, deliveryMethod_bo, getPostalCodeRetrievalOutputParams, relationListObject_bo, coDomainValue_bo, articleFullObject, lineOperationResponse_bo, transaction, notNill_function, objectUtils, yesNoDbType_enum, trueFalseDbType_enum, oneZeroBoolDbType_enum, dbBooleanValueType_enum, dateUtils, numberUtils, isNill_function, mapProperty_decorator, boolean_decorator, json_decorator, complexArray_decorator, imageUtils, transactionLineInfo_bo, cashRegister, setTransactionDeliveryOptionsRequest_bo, relationStatus_enum, corecomponents_v12, flexLayout, communicationType_enum, contactOption_bo, relationNameKind_enum, genderType_enum, businessObjectUtils, functionUtils, address_bo, animations, i1, common, forms, dragDrop, transactionAddTextLineRequest_bo, stockStatus_enum, relationRequest) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -434,23 +434,31 @@
                     "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",
@@ -461,6 +469,7 @@
                     "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",
@@ -468,6 +477,8 @@
                     "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",
@@ -478,20 +489,27 @@
                     "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",
@@ -499,22 +517,30 @@
                     "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",
@@ -526,17 +552,21 @@
                     "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",
@@ -544,6 +574,7 @@
                     "PREFIX": "Tussenvoegsel",
                     "PRICE": "Prijs",
                     "PRICE_LIST": "Prijslijst",
+                    "PRICING": "Prijzen",
                     "PRIVACY_PREFERENCES": "Privacyvoorkeuren",
                     "PRIVATE_PERSON": "Particulier",
                     "PRODUCT": "Product",
@@ -558,10 +589,11 @@
                     "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",
@@ -577,18 +609,22 @@
                     "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",
@@ -596,7 +632,7 @@
                     "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",
@@ -611,21 +647,29 @@
                     "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",
@@ -636,6 +680,7 @@
                     "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",
@@ -643,6 +688,8 @@
                     "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",
@@ -652,42 +699,57 @@
                     "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",
@@ -699,15 +761,19 @@
                     "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",
@@ -716,12 +782,14 @@
                     "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",
@@ -741,17 +809,21 @@
                     "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",
@@ -1697,6 +1769,7 @@
         };
         IOneConnectorAdapterService.prototype.getDocumentContent = function (id, thumbnail) {
             var _this = this;
+            if (thumbnail === void 0) { thumbnail = true; }
             return new Promise(function (resolve, reject) {
                 return _this.connector.getDocumentContent(id, thumbnail).then(function (result) {
                     if (result.validationResult && result.validationResult.success) {
@@ -1884,6 +1957,25 @@
                 });
             });
         };
+        IOneConnectorAdapterService.prototype.getCashRegisters = function (branch, group) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.connector.getCashRegister(branch, group)];
+                        case 1:
+                            response = _a.sent();
+                            if (response.validationResult && response.validationResult.success) {
+                                return [2 /*return*/, this._boFactory.makeBOArrayFromRawBackendDataArray(cashRegister.CashRegister, response.resultObjects)];
+                            }
+                            else {
+                                return [2 /*return*/, []];
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         IOneConnectorAdapterService.prototype.getRelationNumber = function (relationId) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
@@ -1959,7 +2051,7 @@
                     return [2 /*return*/, new Promise(function (resolve, reject) {
                             return _this.connector.getDeliveryMethods().then(function (result) {
                                 if (result.validationResult && result.validationResult.success) {
-                                    resolve(result.resultObjects);
+                                    resolve(_this._boFactory.makeBOArrayFromRawBackendDataArray(deliveryMethod_bo.DeliveryMethod, result.resultObjects));
                                 }
                                 else {
                                     reject(result.validationMessagesAsString);
@@ -1976,7 +2068,7 @@
                     return [2 /*return*/, new Promise(function (resolve, reject) {
                             return _this.connector.getDeliveryOptions().then(function (result) {
                                 if (result.validationResult && result.validationResult.success) {
-                                    resolve(result.resultObjects);
+                                    resolve(_this._boFactory.makeBOArrayFromRawBackendDataArray(deliveryMethod_bo.DeliveryMethod, result.resultObjects));
                                 }
                                 else {
                                     reject(result.validationMessagesAsString);
@@ -1993,7 +2085,7 @@
                     return [2 /*return*/, new Promise(function (resolve, reject) {
                             return _this.connector.addRelationToTransaction(uuid, relationId).then(function (result) {
                                 if (result.validationResult && result.validationResult.success) {
-                                    resolve(result.resultObject);
+                                    resolve(_this._boFactory.makeWithRawBackendData(transactionInfoResponse_bo.TransactionInfoResponse, result.resultObject));
                                 }
                                 else {
                                     reject(result.validationMessagesAsString);
@@ -2010,7 +2102,7 @@
                     return [2 /*return*/, new Promise(function (resolve, reject) {
                             return _this.connector.setTransactionDeliveryOptions(transactionDeliveryOptionsRequest).then(function (result) {
                                 if (result.validationResult && result.validationResult.success) {
-                                    resolve(result.resultObject);
+                                    resolve(_this._boFactory.makeWithRawBackendData(transactionInfoResponse_bo.TransactionInfoResponse, result.resultObject));
                                 }
                                 else {
                                     reject(result.validationMessagesAsString);
@@ -2422,6 +2514,7 @@
             this.applicationUser = false;
             this.currentTransaction = new transactionInfoResponse_bo.TransactionInfoResponse();
             this.relation = new customerFullObject_bo.CustomerFullObject();
+            this.deliveryOptions = new setTransactionDeliveryOptionsRequest_bo.SetTransactionDeliveryOptionsRequest();
             this.articleAmount = 0;
         }
         PendingReasonService.prototype.init = function (options) {
@@ -2713,6 +2806,9 @@
                 });
             });
         };
+        TransactionService.prototype.getDocumentContent = function (id) {
+            return this.connector.getDocumentContent(id);
+        };
         TransactionService.prototype.getGoodIdFromArticleNr = function (sku) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
@@ -2733,6 +2829,13 @@
                 });
             });
         };
+        TransactionService.prototype.getCashRegisters = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, this.connector.getCashRegisters(undefined, 1)];
+                });
+            });
+        };
         TransactionService.prototype.getRelationNumber = function (relationId) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
@@ -3414,67 +3517,82 @@
         // }
         CheckoutComponent.prototype.handleRelationValidation = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var valid;
-                return __generator(this, function (_a) {
-                    if (this.checkoutRelation && this.stepRelation) {
-                        valid = this.checkoutRelation.submit();
-                        this.stepRelation.completed = valid;
-                        if (valid) {
-                            this.saveRelation();
-                        }
+                var valid, _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!(this.checkoutRelation && this.stepRelation)) return [3 /*break*/, 2];
+                            valid = this.checkoutRelation.submit();
+                            _a = this.stepRelation;
+                            return [4 /*yield*/, this.saveRelation()];
+                        case 1:
+                            _a.completed = _b.sent();
+                            _b.label = 2;
+                        case 2: return [2 /*return*/];
                     }
-                    return [2 /*return*/];
                 });
             });
         };
         CheckoutComponent.prototype.handleDeliveryValidation = function () {
-            if (this.checkoutDelivery && this.stepDelivery) {
-                var valid = this.checkoutDelivery.submit();
-                this.stepDelivery.completed = valid;
-                if (valid) {
-                    this.handleSaveDelivery();
-                }
+            return __awaiter(this, void 0, void 0, function () {
+                var valid, _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!(this.checkoutDelivery && this.stepDelivery)) return [3 /*break*/, 2];
+                            valid = this.checkoutDelivery.submit();
+                            _a = this.stepDelivery;
+                            return [4 /*yield*/, this.handleSaveDelivery()];
+                        case 1:
+                            _a.completed = _b.sent();
+                            _b.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        CheckoutComponent.prototype.handlePaymentValidation = function () {
+            if ( /*this.checkoutDelivery && */this.stepPayment) {
+                this.stepPayment.completed = true;
             }
         };
+        CheckoutComponent.prototype.handleOverviewValidation = function () {
+            if ( /*this.checkoutDelivery && */this.stepOverview) {
+                this.stepOverview.completed = true;
+            }
+        };
+        CheckoutComponent.prototype.handleFinishStep = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this.stepPay) return [3 /*break*/, 4];
+                            this.stepPay.completed = true;
+                            return [4 /*yield*/, this.service.saveTransaction()];
+                        case 1:
+                            response = _a.sent();
+                            if (!(response && response.isSuccess)) return [3 /*break*/, 2];
+                            // const commitResponse: DataServiceResponseData = await this.service.commit();
+                            // if (commitResponse && commitResponse.validationResult && commitResponse.validationResult.success) {
+                            this.transactionFinished.next(this.service.currentTransaction.transactionInfo);
+                            return [3 /*break*/, 4];
+                        case 2: return [4 /*yield*/, this._dialogService.showError("Opslag bezorging mislukt")];
+                        case 3:
+                            _a.sent();
+                            _a.label = 4;
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
         CheckoutComponent.prototype.saveRelation = function () {
             return this.service.saveRelation();
         };
         CheckoutComponent.prototype.handleSaveDelivery = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
                 return __generator(this, function (_a) {
-                    return [2 /*return*/, new Promise(function (resolve, reject) {
-                            _this.service.setTransactionDeliveryOptions().then(function (response) { return __awaiter(_this, void 0, void 0, function () {
-                                var response_1, commitResponse;
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
-                                        case 0:
-                                            if (!response) return [3 /*break*/, 4];
-                                            return [4 /*yield*/, this.service.saveTransaction()];
-                                        case 1:
-                                            response_1 = _a.sent();
-                                            if (!(response_1 && response_1.isSuccess)) return [3 /*break*/, 3];
-                                            return [4 /*yield*/, this.service.commit()];
-                                        case 2:
-                                            commitResponse = _a.sent();
-                                            if (commitResponse && commitResponse.validationResult && commitResponse.validationResult.success) {
-                                                this.transactionFinished.next(this.service.currentTransaction.transactionInfo);
-                                            }
-                                            _a.label = 3;
-                                        case 3: return [3 /*break*/, 6];
-                                        case 4: return [4 /*yield*/, this._dialogService.showError("Opslag bezorging mislukt")];
-                                        case 5:
-                                            _a.sent();
-                                            _a.label = 6;
-                                        case 6:
-                                            resolve(true);
-                                            return [2 /*return*/];
-                                    }
-                                });
-                            }); }).catch(function (reason) {
-                                _this._dialogService.showError("Opslag transactie mislukt");
-                            });
-                        })];
+                    return [2 /*return*/, this.service.setTransactionDeliveryOptions()];
                 });
             });
         };
@@ -3483,7 +3601,7 @@
     CheckoutComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-checkout",
-                    template: "\n    <co-stepper [finishButtonLabel]=\"'CHECKOUT_FINISH' | localize\" (finishStep)=\"handleDeliveryValidation()\">\n      <co-stepper-step #stepRelation [index]=\"1\" [label]=\"'YOUR_DATA' | localize\" (validateStep)=\"handleRelationValidation()\">\n        <co-checkout-overview-relation-edit #checkoutRelation [(relation)]=\"service.relation\" (relationChange)=\"service.relation = $event\"\n        ></co-checkout-overview-relation-edit>\n      </co-stepper-step>\n      <co-stepper-step #stepDelivery [index]=\"2\" [label]=\"'DELIVERY' | localize\">\n        <co-checkout-overview-delivery-edit #checkoutDelivery *ngIf=\"service.deliveryOptions\" [(relation)]=\"service.relation\" [deliveryOptionsRequest]=\"service.deliveryOptions\"\n                                            [transaction]=\"service.currentTransaction\"\n        ></co-checkout-overview-delivery-edit>\n      </co-stepper-step>\n    </co-stepper>\n  ",
+                    template: "\n    <co-stepper [finishButtonLabel]=\"'CHECKOUT_FINISH' | localize\" (finishStep)=\"handleFinishStep()\">\n      <co-stepper-step #stepRelation [index]=\"1\" [label]=\"'YOUR_DATA' | localize\" (validateStep)=\"handleRelationValidation()\">\n        <co-checkout-overview-relation-edit #checkoutRelation *ngIf=\"stepRelation.show\" [(relation)]=\"service.relation\" [deliveryOptionsRequest]=\"service.deliveryOptions\"\n                                            (relationChange)=\"service.relation = $event\"\n        ></co-checkout-overview-relation-edit>\n      </co-stepper-step>\n      <co-stepper-step #stepDelivery [index]=\"2\" [label]=\"'DELIVERY' | localize\" (validateStep)=\"handleDeliveryValidation()\">\n        <co-checkout-overview-delivery-edit #checkoutDelivery *ngIf=\"stepDelivery.show\" [deliveryOptionsRequest]=\"service.deliveryOptions\"\n                                            [transaction]=\"service.currentTransaction\"\n        ></co-checkout-overview-delivery-edit>\n      </co-stepper-step>\n      <co-stepper-step #stepPayment [index]=\"3\" [label]=\"'PAYMENT' | localize\" (validateStep)=\"handlePaymentValidation()\">\n        <co-payment #checkoutPayment *ngIf=\"stepPayment.show\" [amount]=\"service.currentTransaction.transactionTotal.netAmount\"></co-payment>\n      </co-stepper-step>\n      <co-stepper-step #stepOverview [index]=\"4\" [label]=\"'OVERVIEW' | localize\" (validateStep)=\"handleOverviewValidation()\">\n      </co-stepper-step>\n      <co-stepper-step #stepPay [index]=\"5\" [label]=\"'PAY' | localize\">\n      </co-stepper-step>\n      <div class=\"co-checkout-right-panel\">\n        <div class=\"co-checkout-right-panel-relation\">\n            <co-seller-information [relationId]=\"sellerId\"></co-seller-information>\n        </div>\n        <co-shopping-cart-preview [showCheckoutButton]=\"false\" [withoutBorder]=\"true\"></co-shopping-cart-preview>\n      </div>\n    </co-stepper>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3495,17 +3613,48 @@
     CheckoutComponent.propDecorators = {
         stepRelation: [{ type: i0.ViewChild, args: ["stepRelation",] }],
         stepDelivery: [{ type: i0.ViewChild, args: ["stepDelivery",] }],
+        stepPayment: [{ type: i0.ViewChild, args: ["stepPayment",] }],
+        stepOverview: [{ type: i0.ViewChild, args: ["stepOverview",] }],
+        stepPay: [{ type: i0.ViewChild, args: ["stepPay",] }],
         checkoutRelation: [{ type: i0.ViewChild, args: ["checkoutRelation",] }],
         checkoutDelivery: [{ type: i0.ViewChild, args: ["checkoutDelivery",] }],
+        checkoutPayment: [{ type: i0.ViewChild, args: ["checkoutPayment",] }],
+        sellerId: [{ type: i0.Input }],
         transactionFinished: [{ type: i0.Output }],
         showClass: [{ type: i0.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 = {}));
+
     var CheckoutOverviewRelationEditComponent = /** @class */ (function () {
-        function CheckoutOverviewRelationEditComponent(_service, _formMaster) {
+        function CheckoutOverviewRelationEditComponent(_service, _formMaster, _boFactory) {
             var _this = this;
             this._service = _service;
             this._formMaster = _formMaster;
+            this._boFactory = _boFactory;
+            this.icons = Icon;
             this.validSubmit = new i0.EventEmitter();
             this.invalidSubmit = new i0.EventEmitter();
             this.relationChange = new i0.EventEmitter();
@@ -3517,6 +3666,13 @@
             this.relationSuggestions = [];
             this.showRelationSidebar = false;
             this.inviteToAccount = false;
+            this.addresses = [];
+            this.deliveryAddressIdx = 0;
+            this.invoiceAddressIdx = 0;
+            this.invoiceAddressSameAsDeliveryAddress = true;
+            this.editAddressType = addressType_enum.AddressType.DeliveryAddress;
+            this.showSelectAddressDialog = false;
+            this.showCreateAddressDialog = false;
             this.relType = relationNameKind_enum.RelationNameKind;
             this.genderType = genderType_enum.GenderType;
             this._relation = nulRelationObject.NULL_RELATION_OBJECT;
@@ -3593,6 +3749,73 @@
             // return this.relationForm.submit();
             return this._formMaster.submitSlaves();
         };
+        CheckoutOverviewRelationEditComponent.prototype.showNewAddressDialog = function (deliveryAddress) {
+            if (deliveryAddress === void 0) { deliveryAddress = true; }
+            this.editAddressType = deliveryAddress ? addressType_enum.AddressType.DeliveryAddress : addressType_enum.AddressType.BillingAddress;
+            this.showCreateAddressDialog = true;
+        };
+        CheckoutOverviewRelationEditComponent.prototype.showEditAddressDialog = function (deliveryAddress) {
+            if (deliveryAddress === void 0) { deliveryAddress = true; }
+            this.editAddressType = deliveryAddress ? addressType_enum.AddressType.DeliveryAddress : addressType_enum.AddressType.BillingAddress;
+            this.showSelectAddressDialog = true;
+        };
+        CheckoutOverviewRelationEditComponent.prototype.setIndexDeliveryAddress = function (idx) {
+            this.deliveryAddressIdx = idx;
+            this.editAddressType = addressType_enum.AddressType.DeliveryAddress;
+            this.selectAddress(this.relation.addresses[idx]);
+        };
+        CheckoutOverviewRelationEditComponent.prototype.setIndexInvoiceAddress = function (idx) {
+            this.invoiceAddressIdx = idx;
+            this.editAddressType = addressType_enum.AddressType.BillingAddress;
+            this.selectAddress(this.relation.addresses[idx]);
+        };
+        CheckoutOverviewRelationEditComponent.prototype.editAddress = function (addr) {
+            this.addressToEdit = this._boFactory.makeWithRawBackendData(address_bo.Address, addr);
+            this.showEditAddressDialog();
+        };
+        CheckoutOverviewRelationEditComponent.prototype.checkSameAddress = function (checked) {
+            if (checked) {
+                this.editAddressType = addressType_enum.AddressType.DeliveryAddress;
+                this.selectAddress(this.deliveryAddress);
+            }
+        };
+        CheckoutOverviewRelationEditComponent.prototype.saveNewAddress = function (address) {
+            address.addressType = this.editAddressType;
+            this.relation.addresses.push(address);
+            this.selectAddress(address);
+            this.showCreateAddressDialog = false;
+        };
+        CheckoutOverviewRelationEditComponent.prototype.saveAddress = function (address) {
+            var idx = this.relation.addresses.findIndex(function (a) { return a.nawNr === address.nawNr; });
+            if (idx > -1) {
+                this.relation.addresses[idx] = this._boFactory.makeWithRawBackendData(address_bo.Address, address);
+            }
+            this.showSelectAddressDialog = false;
+        };
+        CheckoutOverviewRelationEditComponent.prototype.selectAddress = function (address) {
+            var _this = this;
+            if (!this.deliveryOptionsRequest) {
+                return;
+            }
+            if (!address) {
+                address = this._service.getFirstAddress(this.relation);
+            }
+            if (!address) {
+                return;
+            }
+            this._setCountryNameToAddress(address);
+            if (this.editAddressType === addressType_enum.AddressType.DeliveryAddress) {
+                this.deliveryOptionsRequest.transactionAddress = address.nawNr;
+                this.deliveryAddress = address;
+                this.deliveryAddressIdx = this.relation.addresses.findIndex(function (a) { return a.nawNr === _this.deliveryAddress.nawNr; });
+            }
+            if (this.invoiceAddressSameAsDeliveryAddress || this.editAddressType !== addressType_enum.AddressType.DeliveryAddress) {
+                this.deliveryOptionsRequest.invoiceAddress = address.nawNr;
+                this.invoiceAddress = address;
+                this.invoiceAddressIdx = this.relation.addresses.findIndex(function (a) { return a.nawNr === _this.invoiceAddress.nawNr; });
+            }
+            this.showSelectAddressDialog = false;
+        };
         CheckoutOverviewRelationEditComponent.prototype.preparePrimaryEmail = function () {
             if (this._relation) {
                 this.emailAddress = this._relation.getLowestSequenceOfContactOptionsWithType(communicationType_enum.CommunicationType.Email);
@@ -3670,6 +3893,11 @@
             }
             this._relationNameChangeHandler.call(this);
         };
+        CheckoutOverviewRelationEditComponent.prototype.checkVisibilitySuggestions = function () {
+            if (this._relation.firstName && this._relation.familyName) {
+                this.hideSidebar();
+            }
+        };
         CheckoutOverviewRelationEditComponent.prototype.onRelationSuggestionClick = function (relationSuggested) {
             return __awaiter(this, void 0, void 0, function () {
                 var _a;
@@ -3703,8 +3931,12 @@
         CheckoutOverviewRelationEditComponent.prototype.showSidebar = function () {
             this.showRelationSidebar = true;
         };
+        // Hide sidebar with a little timeout to prevent missing the click
         CheckoutOverviewRelationEditComponent.prototype.hideSidebar = function () {
-            this.showRelationSidebar = false;
+            var _this = this;
+            setTimeout(function () {
+                _this.showRelationSidebar = false;
+            }, 200);
         };
         CheckoutOverviewRelationEditComponent.prototype._initForm = function () {
             if (this.relationForm) {
@@ -3743,12 +3975,29 @@
                 });
             });
         };
+        CheckoutOverviewRelationEditComponent.prototype._setCountryNameToAddress = function (address) {
+            return __awaiter(this, void 0, void 0, function () {
+                var country;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(address.countryId && !address.countryName)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._service.getCountry(address.countryId)];
+                        case 1:
+                            country = _a.sent();
+                            address.countryName = country.description;
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
         return CheckoutOverviewRelationEditComponent;
     }());
     CheckoutOverviewRelationEditComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-checkout-overview-relation-edit",
-                    template: "\n    <co-form>\n      <div class=\"checkout-form-wrapper\">\n        <div class=\"checkout-label-column\">\n          <span>01</span>\n          <span class=\"label\" [textContent]=\"'PERSONAL_DATA' | localize\"></span>\n        </div>\n        <div class=\"checkout-data-column\">\n          <div class=\"checkout-data-row\">\n            <co-input-radio-button class=\"default-width\"\n                                   [name]=\"'type'\"\n                                   [label]=\"'PRIVATE_PERSON' | localize\"\n                                   [value]=\"relType.Private\"\n                                   [checked]=\"relation.type === relType.Private\"\n                                   (modelChange)=\"changeRelationType(relType.Private)\"\n            ></co-input-radio-button>\n            <co-input-radio-button class=\"default-width\"\n                                   [name]=\"'type'\"\n                                   [label]=\"'COMPANY' | localize\"\n                                   [value]=\"relType.Company\"\n                                   [(model)]=\"relation.type\"\n                                   [checked]=\"relation.type === relType.Company\"\n                                   (modelChange)=\"changeRelationType(relType.Company)\"\n            ></co-input-radio-button>\n          </div>\n          <div class=\"checkout-data-row\">\n            <relation-customer-groups [(model)]=\"relation.customerGroup\" required></relation-customer-groups>\n          </div>\n          <div *ngIf=\"relation.type === relType.Private\" class=\"collapseable\" @showHidePrivateRelationFields>\n            <div class=\"checkout-data-row\">\n              <co-input-text\n                class=\"checkout-first-name\"\n                [(model)]=\"relation.firstName\"\n                [placeholder]=\"'FIRST_NAME' | localize\"\n                (modelChange)=\"firstNameChange($event)\"\n                [required]=\"true\"\n              ></co-input-text>\n              <co-input-text\n                class=\"checkout-prefix-name default-width\"\n                [(model)]=\"relation.prefix\"\n                [placeholder]=\"'PREFIX' | localize\"\n              ></co-input-text>\n              <co-input-text\n                class=\"checkout-last-name\"\n                [(model)]=\"relation.familyName\"\n                [placeholder]=\"'LAST_NAME' | localize\"\n                (modelChange)=\"familyNameChange($event)\"\n                [required]=\"true\"></co-input-text>\n            </div>\n            <div class=\"checkout-data-row\">\n              <co-input-radio-button class=\"default-width\"\n                                     [name]=\"'gender'\"\n                                     [label]=\"'MALE' | localize\"\n                                     [value]=\"genderType.Male\"\n                                     [checked]=\"relation.gender === genderType.Male\"\n                                     (modelChange)=\"changeGenderType(genderType.Male)\"\n              ></co-input-radio-button>\n              <co-input-radio-button class=\"default-width\"\n                                     [name]=\"'gender'\"\n                                     [label]=\"'FEMALE' | localize \"\n                                     [value]=\"genderType.Female\"\n                                     [checked]=\"relation.gender === genderType.Female\"\n                                     (modelChange)=\"changeGenderType(genderType.Female)\"\n              ></co-input-radio-button>\n              <co-input-radio-button class=\"default-width\"\n                                     [name]=\"'gender'\"\n                                     [label]=\"'UNKNOWN' | localize\"\n                                     [value]=\"genderType.Unspecified\"\n                                     [checked]=\"relation.gender === genderType.Unspecified\"\n                                     (modelChange)=\"changeGenderType(genderType.Unspecified)\"\n              ></co-input-radio-button>\n            </div>\n            <div class=\"checkout-data-row\">\n              <co-input-date [placeholder]=\"'DATE_OF_BIRTH' | localize \" [(model)]=\"dateOfBirth\" [required]=\"true\"></co-input-date>\n              <co-input-text [(model)]=\"phoneNumber.value\" [placeholder]=\"'PHONE_NO' | localize \" [required]=\"true\"></co-input-text>\n            </div>\n          </div>\n          <div *ngIf=\"relation?.type === relType.Company\" class=\"checkout-data-row collapseable\" @showHideCompanyRelationFields>\n            <co-input-text [(model)]=\"relation.familyName\" [placeholder]=\"'COMPANY_NAME' | localize\" [required]=\"true\"></co-input-text>\n          </div>\n        </div>\n        <div class=\"checkout-label-column\">\n          <span>02</span>\n          <span class=\"label\" [textContent]=\"'DELIVERY_ADDRESS' | localize\"></span>\n        </div>\n        <div class=\"checkout-data-column\">\n          <co-relation-address [address]=\"editFirstAddress\" [showButtons]=\"false\"></co-relation-address>\n        </div>\n        <div class=\"checkout-label-column\">\n          <span>03</span>\n          <span class=\"label\" [textContent]=\"'LOGIN_DETAILS' | localize\"></span>\n          <span class=\"label-description\" [textContent]=\"'ACCOUNT_EXPLANATION' | localize\"></span>\n        </div>\n        <div class=\"checkout-data-column\">\n          <div class=\"checkout-data-row\">\n            <co-input-text [(model)]=\"emailAddress.value\" [placeholder]=\"'EMAIL_ADDRESS' | localize \" [type]=\"'email'\" [required]=\"true\"></co-input-text>\n          </div>\n          <div *ngIf=\"!applicationUser\" class=\"checkout-data-row\">\n            <co-input-text [(model)]=\"accountPassword\" [placeholder]=\"'PASSWORD' | localize \" [type]=\"'password'\" [required]=\"true\"></co-input-text>\n          </div>\n          <div *ngIf=\"applicationUser\" class=\"checkout-data-row\">\n            <co-input-checkbox [label]=\"'INVITE_TO_ACCOUNT' | localize\" [(model)]=\"inviteToAccount\"></co-input-checkbox>\n          </div>\n        </div>\n        <div class=\"checkout-label-column\">\n          <span>04</span>\n          <span class=\"label\" [textContent]=\"'PRIVACY_PREFERENCES' | localize\"></span>\n        </div>\n        <div class=\"checkout-data-column\">\n          <div class=\"two-column-grid\">\n            <ng-container *ngFor=\"let privacySetting of privacySettings\">\n              <co-input-checkbox class=\"first-column\"\n                                 [label]=\"privacySetting.description\"\n                                 [model]=\"isShared(privacySetting)\"\n                                 (modelChange)=\"changePrivacySetting(privacySetting, $event)\"\n              ></co-input-checkbox>\n              <span class=\"second-column\" [textContent]=\"privacySetting.explanation\"></span>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </co-form>\n\n    <div class=\"suggestions-sidebar\" *ngIf=\"showRelationSidebar\" @showHideSidebar>\n      <div class=\"relation-sidebar-header\">\n        <label class=\"checkout-label-h3\" [textContent]=\"'SUGGESTIONS' | localize\"></label>\n      </div>\n      <co-checkout-relation-suggestions-list\n        [suggestions]=\"relationSuggestions\"\n        (suggestionSelected)=\"onRelationSuggestionClick($event)\"\n      ></co-checkout-relation-suggestions-list>\n    </div>\n  ",
+                    template: "\n    <div class=\"relation-edit-content\">\n      <co-form>\n        <div class=\"checkout-form-wrapper\">\n          <div class=\"checkout-label-column\">\n            <span>01</span>\n            <span class=\"label\" [textContent]=\"'PERSONAL_DATA' | localize\"></span>\n          </div>\n          <div class=\"checkout-data-column\">\n            <div class=\"checkout-data-row\">\n              <co-input-radio-button class=\"default-width\"\n                                     [name]=\"'type'\"\n                                     [label]=\"'PRIVATE_PERSON' | localize\"\n                                     [value]=\"relType.Private\"\n                                     [checked]=\"relation.type === relType.Private\"\n                                     (modelChange)=\"changeRelationType(relType.Private)\"\n              ></co-input-radio-button>\n              <co-input-radio-button class=\"default-width\"\n                                     [name]=\"'type'\"\n                                     [label]=\"'COMPANY' | localize\"\n                                     [value]=\"relType.Company\"\n                                     [(model)]=\"relation.type\"\n                                     [checked]=\"relation.type === relType.Company\"\n                                     (modelChange)=\"changeRelationType(relType.Company)\"\n              ></co-input-radio-button>\n            </div>\n            <div class=\"checkout-data-row\">\n              <relation-customer-groups [(model)]=\"relation.customerGroup\" required></relation-customer-groups>\n            </div>\n            <div *ngIf=\"relation.type === relType.Private\" class=\"collapseable\" @showHidePrivateRelationFields>\n              <div class=\"checkout-data-row\">\n                <co-input-text\n                  class=\"checkout-first-name\"\n                  [(model)]=\"relation.firstName\"\n                  [placeholder]=\"'FIRST_NAME' | localize\"\n                  (modelChange)=\"firstNameChange($event)\"\n                  (blur)=\"checkVisibilitySuggestions()\"\n                  [required]=\"true\"\n                ></co-input-text>\n                <co-input-text\n                  class=\"checkout-prefix-name default-width\"\n                  [(model)]=\"relation.prefix\"\n                  [placeholder]=\"'PREFIX' | localize\"\n                ></co-input-text>\n                <co-input-text\n                  class=\"checkout-last-name\"\n                  [(model)]=\"relation.familyName\"\n                  [placeholder]=\"'LAST_NAME' | localize\"\n                  (modelChange)=\"familyNameChange($event)\"\n                  (blur)=\"checkVisibilitySuggestions()\"\n                  [required]=\"true\"></co-input-text>\n              </div>\n              <div class=\"checkout-data-row\">\n                <co-input-radio-button class=\"default-width\"\n                                       [name]=\"'gender'\"\n                                       [label]=\"'MALE' | localize\"\n                                       [value]=\"genderType.Male\"\n                                       [checked]=\"relation.gender === genderType.Male\"\n                                       (modelChange)=\"changeGenderType(genderType.Male)\"\n                ></co-input-radio-button>\n                <co-input-radio-button class=\"default-width\"\n                                       [name]=\"'gender'\"\n                                       [label]=\"'FEMALE' | localize \"\n                                       [value]=\"genderType.Female\"\n                                       [checked]=\"relation.gender === genderType.Female\"\n                                       (modelChange)=\"changeGenderType(genderType.Female)\"\n                ></co-input-radio-button>\n                <co-input-radio-button class=\"default-width\"\n                                       [name]=\"'gender'\"\n                                       [label]=\"'UNKNOWN' | localize\"\n                                       [value]=\"genderType.Unspecified\"\n                                       [checked]=\"relation.gender === genderType.Unspecified\"\n                                       (modelChange)=\"changeGenderType(genderType.Unspecified)\"\n                ></co-input-radio-button>\n              </div>\n              <div class=\"checkout-data-row\">\n                <co-input-date [placeholder]=\"'DATE_OF_BIRTH' | localize \" [(model)]=\"dateOfBirth\" [required]=\"true\"></co-input-date>\n              </div>\n            </div>\n            <div *ngIf=\"relation?.type === relType.Company\" class=\"checkout-data-row collapseable\" @showHideCompanyRelationFields>\n              <co-input-text [(model)]=\"relation.familyName\" [placeholder]=\"'COMPANY_NAME' | localize\" [required]=\"true\"></co-input-text>\n            </div>\n            <co-relation-address [address]=\"editFirstAddress\" [showButtons]=\"false\"></co-relation-address>\n          </div>\n          <div class=\"checkout-data-column\">\n            <div class=\"checkout-data-row\">\n              <co-carousel-3d *ngIf=\"relation.addresses && relation.addresses.length > 1\"\n                              [tileWidth]=\"200\"\n                              [tileHeight]=\"100\"\n                              [selectedIndex]=\"deliveryAddressIdx\"\n                              (indexSelected)=\"setIndexDeliveryAddress($event)\">\n                <co-relation-address-tile #carouselItem *ngFor=\"let address of relation.addresses; let index = index\"\n                                          [address]=\"address\"\n                                          [selected]=\"deliveryAddressIdx === index\"\n                                          (editAddressClicked)=\"editAddress($event)\"\n                ></co-relation-address-tile>\n              </co-carousel-3d>\n            </div>\n            <div class=\"checkout-data-row\">\n              <div class=\"relation-address-new\">\n                <icon class=\"relation-address-icon\" [icon]=\"icons.ArrowPointRight\"></icon>\n                <div [textContent]=\"'ADDRESS_ADD' | localize\" (click)=\"showNewAddressDialog()\"></div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"checkout-label-column\">\n            <span>02</span>\n            <span class=\"label\" [textContent]=\"'INVOICE_ADDRESS' | localize\"></span>\n          </div>\n          <div class=\"checkout-data-column\">\n            <div class=\"checkout-data-row\">\n              <co-input-checkbox [(model)]=\"invoiceAddressSameAsDeliveryAddress\" (modelChange)=\"checkSameAddress($event)\" [label]=\"'SAME_AS_DELIVERY' | localize\"></co-input-checkbox>\n            </div>\n            <div class=\"overview-delivery-invoice-address\" *ngIf=\"!invoiceAddressSameAsDeliveryAddress\" @showHideInvoiceAddress>\n              <div class=\"checkout-data-row\">\n                <co-carousel-3d *ngIf=\"relation.addresses && relation.addresses.length > 1\"\n                                [tileWidth]=\"200\"\n                                [tileHeight]=\"100\"\n                                [selectedIndex]=\"invoiceAddressIdx\"\n                                (indexSelected)=\"setIndexInvoiceAddress($event)\">\n                  <co-relation-address-tile #carouselItem *ngFor=\"let address of relation.addresses; let index = index\"\n                                            [address]=\"address\"\n                                            [selected]=\"invoiceAddressIdx === index\"\n                                            (editAddressClicked)=\"editAddress($event)\"\n                  ></co-relation-address-tile>\n                </co-carousel-3d>\n              </div>\n              <div class=\"checkout-data-row\">\n                <div class=\"relation-address-new\">\n                  <icon class=\"relation-address-icon\" [icon]=\"icons.ArrowPointRight\"></icon>\n                  <div [textContent]=\"'ADDRESS_ADD' | localize\" (click)=\"showNewAddressDialog()\"></div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"checkout-label-column\">\n            <span>03</span>\n            <span class=\"label\" [textContent]=\"'CONTACT_DETAILS' | localize\"></span>\n          </div>\n          <div class=\"checkout-data-column\">\n            <div class=\"checkout-data-row\">\n              <co-input-text [(model)]=\"phoneNumber.value\" [placeholder]=\"'PHONE_NO' | localize \" [required]=\"true\"></co-input-text>\n            </div>\n            <div class=\"checkout-data-row\">\n              <co-input-text [(model)]=\"emailAddress.value\" [placeholder]=\"'EMAIL_ADDRESS' | localize \" [type]=\"'email'\" [required]=\"true\"></co-input-text>\n            </div>\n<!--\n          </div>\n          <div class=\"checkout-label-column\">\n            <span>04</span>\n            <span class=\"label\" [textContent]=\"'PASSWORD' | localize\"></span>\n            <span class=\"label-description\" [textContent]=\"'ACCOUNT_EXPLANATION' | localize\"></span>\n          </div>\n          <div class=\"checkout-data-column\">\n-->\n            <div class=\"checkout-data-row\">\n              <co-input-checkbox [label]=\"'INVITE_TO_ACCOUNT' | localize\" [(model)]=\"inviteToAccount\"></co-input-checkbox>\n            </div>\n          </div>\n          <div class=\"checkout-label-column\">\n            <span>04</span>\n            <span class=\"label\" [textContent]=\"'PRIVACY_PREFERENCES' | localize\"></span>\n          </div>\n          <div class=\"checkout-data-column\">\n            <div class=\"two-column-grid\">\n              <ng-container *ngFor=\"let privacySetting of privacySettings\">\n                <co-input-checkbox class=\"first-column\"\n                                   [label]=\"privacySetting.description\"\n                                   [model]=\"isShared(privacySetting)\"\n                                   (modelChange)=\"changePrivacySetting(privacySetting, $event)\"\n                ></co-input-checkbox>\n                <span class=\"second-column\" [textContent]=\"privacySetting.explanation\"></span>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n      </co-form>\n    </div>\n    <div class=\"suggestions-sidebar\" *ngIf=\"showRelationSidebar\" @showHideSidebar>\n      <div class=\"relation-sidebar-header\">\n        <label class=\"checkout-label-h3\" [textContent]=\"'SUGGESTIONS' | localize\"></label>\n      </div>\n      <co-checkout-relation-suggestions-list\n        [suggestions]=\"relationSuggestions\"\n        (suggestionSelected)=\"onRelationSuggestionClick($event)\"\n      ></co-checkout-relation-suggestions-list>\n    </div>\n    <co-dialog *ngIf=\"showCreateAddressDialog\">\n      <co-relation-address\n        (saveClick)=\"saveNewAddress($event)\"\n        (cancelClick)=\"showCreateAddressDialog = false\"\n      ></co-relation-address>\n    </co-dialog>\n    <co-dialog *ngIf=\"showSelectAddressDialog && addressToEdit\">\n      <co-relation-address\n        [address]=\"addressToEdit\"\n        (saveClick)=\"saveAddress($event)\"\n        (cancelClick)=\"showSelectAddressDialog = false\"\n      ></co-relation-address>\n    </co-dialog>\n  ",
                     providers: [
                         corecomponents_v12.FormMasterService
                     ],
@@ -3769,6 +4018,12 @@
                             animations.state("void", animations.style({ transform: "translateX(100%)" })),
                             animations.state("*", animations.style({ transform: "translateX(0)" })),
                             animations.transition("void <=> *", animations.animate("200ms ease-in-out"))
+                        ]),
+                        animations.trigger("showHideInvoiceAddress", [
+                            animations.state("void", animations.style({ height: 0, opacity: 0 })),
+                            animations.state("*", animations.style({ height: "*", opacity: 1 })),
+                            animations.transition("void => *", animations.animate("200ms ease-in-out")),
+                            animations.transition("* => void", animations.animate("200ms ease-out"))
                         ])
                     ],
                     encapsulation: i0.ViewEncapsulation.None
@@ -3776,11 +4031,13 @@
     ];
     CheckoutOverviewRelationEditComponent.ctorParameters = function () { return [
         { type: TransactionService },
-        { type: corecomponents_v12.FormMasterService }
+        { type: corecomponents_v12.FormMasterService },
+        { type: BusinessObjectFactory }
     ]; };
     CheckoutOverviewRelationEditComponent.propDecorators = {
         relationForm: [{ type: i0.ViewChild, args: [corecomponents_v12.FormComponent, { static: true },] }],
         relation: [{ type: i0.Input }],
+        deliveryOptionsRequest: [{ type: i0.Input }],
         validSubmit: [{ type: i0.Output }],
         invalidSubmit: [{ type: i0.Output }],
         relationChange: [{ type: i0.Output }],
@@ -3788,91 +4045,118 @@
     };
 
     /** 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 = {}));
+    var 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>"
+    };
 
-    var CheckoutOverviewDeliveryEditComponent = /** @class */ (function () {
-        function CheckoutOverviewDeliveryEditComponent(_dictionaryService, _formMasterService, _boFactory, service) {
-            this._dictionaryService = _dictionaryService;
-            this._formMasterService = _formMasterService;
-            this._boFactory = _boFactory;
-            this.service = service;
-            this.icons = Icon;
-            this.relationChange = new i0.EventEmitter();
-            this.validSubmit = new i0.EventEmitter();
-            this.invalidSubmit = new i0.EventEmitter();
-            this.deliveryOptionList = [];
-            this.deliveryOptions = [];
-            this.deliveryOptionFields = { text: "description", value: "code" };
-            this.deliveryMethods = [];
-            this.deliveryMethodFields = { text: "description", value: "code" };
-            this.addLocationPopup = false;
-            this.changeLocationPopup = false;
-            this.preferredDateOptions = [
-                { text: "NOT_AFTER", value: ">" },
-                { text: "NOT_BEFORE", value: "<" },
-                { text: "ON_DATE", value: "=" },
-            ];
-            this.preferredDate = new Date();
-            this.marketing = [];
-            this.marketingFields = { text: "description", value: "code" };
-            this.showSelectAddressDialog = false;
-            this.showCreateAddressDialog = false;
-            this.editAddressType = addressType_enum.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") });
-        }
-        Object.defineProperty(CheckoutOverviewDeliveryEditComponent.prototype, "relation", {
-            get: function () {
-                return this._relation;
-            },
-            set: function (value) {
-                this._relation = value;
-                this.selectAddress();
+    var IconCacheService = /** @class */ (function () {
+        function IconCacheService(_sanitizer) {
+            this._sanitizer = _sanitizer;
+            this._iconCache = {};
+            this.setIconCache();
+        }
+        Object.defineProperty(IconCacheService.prototype, "iconCache", {
+            /**
+             * 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: function () {
+                return this._iconCache;
             },
             enumerable: false,
             configurable: true
         });
+        IconCacheService.prototype.getIcon = function (iconName) {
+            if (iconName) {
+                return this._iconCache[iconName.toLowerCase()];
+            }
+        };
+        IconCacheService.prototype.getIconAsBase64 = function (iconName) {
+            var icon = IconSvg[iconName];
+            var base64Data = window.btoa(icon);
+            return this._sanitizer.bypassSecurityTrustUrl("data:image/svg+xml;base64," + base64Data);
+        };
+        IconCacheService.prototype.getRawIcon = function (iconName) {
+            if (iconName) {
+                return IconSvg[iconName.toLowerCase()];
+            }
+        };
+        IconCacheService.prototype.setIconCache = function () {
+            for (var key in IconSvg) {
+                if (IconSvg.hasOwnProperty(key) && typeof IconSvg[key] !== "function") {
+                    this._iconCache[key.toLowerCase()] = this._sanitizer.bypassSecurityTrustHtml(IconSvg[key]);
+                }
+            }
+        };
+        return IconCacheService;
+    }());
+    IconCacheService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function IconCacheService_Factory() { return new IconCacheService(i0__namespace.ɵɵinject(i1__namespace.DomSanitizer)); }, token: IconCacheService, providedIn: "root" });
+    IconCacheService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: "root"
+                },] }
+    ];
+    IconCacheService.ctorParameters = function () { return [
+        { type: i1.DomSanitizer }
+    ]; };
+
+    var CheckoutOverviewDeliveryEditComponent = /** @class */ (function () {
+        function CheckoutOverviewDeliveryEditComponent(_dictionaryService, _formMasterService, _boFactory, service, iconService) {
+            this._dictionaryService = _dictionaryService;
+            this._formMasterService = _formMasterService;
+            this._boFactory = _boFactory;
+            this.service = service;
+            this.iconService = iconService;
+            this.icons = Icon;
+            this.validSubmit = new i0.EventEmitter();
+            this.invalidSubmit = new i0.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.deliveryTypeIdx = 0;
+            this.changeLocationPopup = false;
+            this.preferredDateOptions = [
+                { text: "NOT_AFTER", value: ">" },
+                { text: "NOT_BEFORE", value: "<" },
+                { text: "ON_DATE", value: "=" },
+            ];
+            this.preferredDate = new Date();
+            this.marketing = [];
+            this.marketingFields = { text: "description", value: "code" };
+            // TODO: Deze velden nog opnemen in Transaction!!
+            this.deliveryDateFinal = false;
+            this.assemblyDate = new Date();
+            this.totalAssemblyTime = "";
+            this.dropshipment = false;
+        }
         CheckoutOverviewDeliveryEditComponent.prototype.showClass = function () {
             return true;
         };
-        Object.defineProperty(CheckoutOverviewDeliveryEditComponent.prototype, "billingAddress", {
-            get: function () {
-                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;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(CheckoutOverviewDeliveryEditComponent.prototype, "deliveryDate", {
             get: function () {
                 if (this.transaction.transactionInfo.deliveryDate === undefined) {
@@ -3899,16 +4183,6 @@
             enumerable: false,
             configurable: true
         });
-        CheckoutOverviewDeliveryEditComponent.prototype.newRelationAddress = function () {
-            if (this.relation) {
-                var address = new address_bo.Address();
-                address.addressType = addressType_enum.AddressType.DeliveryAddress;
-                address.startDate = new Date();
-                address.sequence = this.relation.getNextAddressSequence();
-                this.relation.addresses.push(address);
-                return address;
-            }
-        };
         CheckoutOverviewDeliveryEditComponent.prototype.ngOnInit = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
@@ -3928,73 +4202,9 @@
                 });
             });
         };
-        CheckoutOverviewDeliveryEditComponent.prototype.showNewAddressDialog = function (deliveryAddress) {
-            if (deliveryAddress === void 0) { deliveryAddress = true; }
-            this.editAddressType = deliveryAddress ? addressType_enum.AddressType.DeliveryAddress : addressType_enum.AddressType.BillingAddress;
-            this.showCreateAddressDialog = true;
-        };
-        CheckoutOverviewDeliveryEditComponent.prototype.showEditAddressDialog = function (deliveryAddress) {
-            if (deliveryAddress === void 0) { deliveryAddress = true; }
-            this.editAddressType = deliveryAddress ? addressType_enum.AddressType.DeliveryAddress : addressType_enum.AddressType.BillingAddress;
-            this.showSelectAddressDialog = true;
-        };
-        CheckoutOverviewDeliveryEditComponent.prototype.setIndexDeliveryAddress = function (idx) {
-            this.deliveryAddressIdx = idx;
-            this.editAddressType = addressType_enum.AddressType.DeliveryAddress;
-            this.selectAddress(this.relation.addresses[idx]);
-        };
-        CheckoutOverviewDeliveryEditComponent.prototype.setIndexInvoiceAddress = function (idx) {
-            this.invoiceAddressIdx = idx;
-            this.editAddressType = addressType_enum.AddressType.BillingAddress;
-            this.selectAddress(this.relation.addresses[idx]);
-        };
-        CheckoutOverviewDeliveryEditComponent.prototype.editAddress = function (addr) {
-            this.addressToEdit = this._boFactory.makeWithRawBackendData(address_bo.Address, addr);
-            this.showEditAddressDialog();
-        };
-        CheckoutOverviewDeliveryEditComponent.prototype.checkSameAddress = function (checked) {
-            if (checked) {
-                this.editAddressType = addressType_enum.AddressType.DeliveryAddress;
-                this.selectAddress(this.deliveryAddress);
-            }
-        };
         CheckoutOverviewDeliveryEditComponent.prototype.submit = function () {
             return this._formMasterService.submitSlaves();
         };
-        CheckoutOverviewDeliveryEditComponent.prototype.saveNewAddress = function (address) {
-            address.addressType = this.editAddressType;
-            this.relation.addresses.push(address);
-            this.selectAddress(address);
-            this.showCreateAddressDialog = false;
-        };
-        CheckoutOverviewDeliveryEditComponent.prototype.saveAddress = function (address) {
-            var idx = this.relation.addresses.findIndex(function (a) { return a.nawNr === address.nawNr; });
-            if (idx > -1) {
-                this.relation.addresses[idx] = this._boFactory.makeWithRawBackendData(address_bo.Address, address);
-            }
-            this.showSelectAddressDialog = false;
-        };
-        CheckoutOverviewDeliveryEditComponent.prototype.selectAddress = function (address) {
-            var _this = this;
-            if (!address) {
-                address = this.service.getFirstAddress(this.relation);
-            }
-            if (!address) {
-                return;
-            }
-            this._setCountryNameToAddress(address);
-            if (this.editAddressType === addressType_enum.AddressType.DeliveryAddress) {
-                this.deliveryOptionsRequest.transactionAddress = address.nawNr;
-                this.deliveryAddress = address;
-                this.deliveryAddressIdx = this.relation.addresses.findIndex(function (a) { return a.nawNr === _this.deliveryAddress.nawNr; });
-            }
-            if (this.invoiceAddressSameAsDeliveryAddress || this.editAddressType !== addressType_enum.AddressType.DeliveryAddress) {
-                this.deliveryOptionsRequest.invoiceAddress = address.nawNr;
-                this.invoiceAddress = address;
-                this.invoiceAddressIdx = this.relation.addresses.findIndex(function (a) { return a.nawNr === _this.invoiceAddress.nawNr; });
-            }
-            this.showSelectAddressDialog = false;
-        };
         CheckoutOverviewDeliveryEditComponent.prototype.handleDeliveryMethodChange = function (deliveryMethodId) {
             return __awaiter(this, void 0, void 0, function () {
                 var deliveryMethod;
@@ -4009,49 +4219,16 @@
                 });
             });
         };
+        CheckoutOverviewDeliveryEditComponent.prototype.setIndexDeliveryType = function (idx) {
+            this.deliveryTypeIdx = idx;
+            // this.selectAddress(this.relation.addresses[idx]);
+        };
         CheckoutOverviewDeliveryEditComponent.prototype.selectDeliveryOptionsByDeliveryMethod = function (deliveryMethod) {
             return this.deliveryOptionList.filter(function (deliveryOption) { return deliveryMethod.deliveryOptions.indexOf(deliveryOption.code) !== -1; });
         };
         CheckoutOverviewDeliveryEditComponent.prototype.selectDeliveryMethodById = function (deliveryMethodId) {
             return this.deliveryMethods.find(function (delivery) { return delivery.code === deliveryMethodId; });
         };
-        CheckoutOverviewDeliveryEditComponent.prototype.changeAddress = function (addressType) {
-            this._addressType = addressType;
-            this.addresses = this.relation.addresses;
-            this.changeLocationPopup = true;
-        };
-        CheckoutOverviewDeliveryEditComponent.prototype.saveNewLocation = function () {
-            this.locationForm.submit();
-        };
-        CheckoutOverviewDeliveryEditComponent.prototype.saveLocation = function () {
-            this.addLocation();
-            this.changeLocationPopup = false;
-        };
-        CheckoutOverviewDeliveryEditComponent.prototype.addLocation = function () {
-            this.updateAddress(this.newAddress).then();
-            this.relation.addresses.push(this.newAddress);
-            // this.service.saveRelation().then();
-            this.addLocationPopup = false;
-        };
-        CheckoutOverviewDeliveryEditComponent.prototype.updateAddress = function (address) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (this._addressType === addressType_enum.AddressType.DeliveryAddress) {
-                                this.transaction.transactionInfo.transactionAddress = address;
-                            }
-                            else {
-                                this.transaction.transactionInfo.invoiceAddress = address;
-                            }
-                            return [4 /*yield*/, this._setCountryNameToAddress(address)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
         CheckoutOverviewDeliveryEditComponent.prototype.isDeliveryOptionChecked = function (deliveryOptionItem) {
             return (this.transaction.transactionInfo.deliveryOptions.indexOf(deliveryOptionItem.code, 0) === 0);
         };
@@ -4064,50 +4241,18 @@
         CheckoutOverviewDeliveryEditComponent.prototype.onChangeLocationCancelClick = function () {
             this.changeLocationPopup = false;
         };
-        CheckoutOverviewDeliveryEditComponent.prototype.onAddLocationOkClick = function () {
-            this._addAddress(this._addressType);
-            this.addLocationPopup = true;
-        };
-        CheckoutOverviewDeliveryEditComponent.prototype.handleAddressSelected = function (rows) {
-            this.selectedAddress = (rows.find(function (x) { return x !== undefined; }));
-            this.updateAddress(this.selectedAddress);
-            this.changeLocationPopup = false;
-        };
         CheckoutOverviewDeliveryEditComponent.prototype.calculateDeliveryCosts = function () {
             return 0;
         };
         CheckoutOverviewDeliveryEditComponent.prototype.calculateAssemblyCosts = function () {
             return 0;
         };
-        CheckoutOverviewDeliveryEditComponent.prototype._addAddress = function (addressType) {
-            this.newAddress = new address_bo.Address();
-            this.newAddress.addressType = addressType;
-            this.newAddress.startDate = new Date();
-            this.newAddress.sequence = this.relation.getNextAddressSequence();
-        };
-        CheckoutOverviewDeliveryEditComponent.prototype._setCountryNameToAddress = function (address) {
-            return __awaiter(this, void 0, void 0, function () {
-                var country;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!(address.countryId && !address.countryName)) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.service.getCountry(address.countryId)];
-                        case 1:
-                            country = _a.sent();
-                            address.countryName = country.description;
-                            _a.label = 2;
-                        case 2: return [2 /*return*/];
-                    }
-                });
-            });
-        };
         return CheckoutOverviewDeliveryEditComponent;
     }());
     CheckoutOverviewDeliveryEditComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-checkout-overview-delivery-edit",
-                    template: "\n    <co-form>\n      <div class=\"checkout-form-wrapper\">\n        <div class=\"checkout-section-wrapper\">\n          <div class=\"checkout-label-column\">\n            <span>01</span>\n            <span class=\"label\" [textContent]=\"'DELIVERY' | localize\"></span>\n          </div>\n          <div class=\"checkout-data-column\">\n            <div class=\"checkout-data-row\">\n              <co-carousel-3d class=\"default-width\" *ngIf=\"relation.addresses\"\n                              [tileWidth]=\"200\"\n                              [tileHeight]=\"100\"\n                              [selectedIndex]=\"deliveryAddressIdx\"\n                              (indexSelected)=\"setIndexDeliveryAddress($event)\">\n                <co-relation-address-tile #carouselItem *ngFor=\"let address of relation.addresses; let index = index\"\n                                          [address]=\"address\"\n                                          [selected]=\"deliveryAddressIdx === index\"\n                                          (editAddressClicked)=\"editAddress($event)\"\n                ></co-relation-address-tile>\n              </co-carousel-3d>\n            </div>\n            <div class=\"checkout-data-row\">\n              <div class=\"relation-address-new\">\n                <icon class=\"relation-address-icon\" [icon]=\"icons.ArrowPointRight\"></icon>\n                <div [textContent]=\"'ADDRESS_ADD' | localize\" (click)=\"showNewAddressDialog()\"></div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"checkout-section-wrapper\">\n          <div class=\"checkout-label-column\">\n            <span>02</span>\n            <span class=\"label\" [textContent]=\"'INVOICE_ADDRESS' | localize\"></span>\n          </div>\n          <div class=\"checkout-data-column\">\n            <div class=\"checkout-data-row\">\n              <co-input-checkbox [(model)]=\"invoiceAddressSameAsDeliveryAddress\" (modelChange)=\"checkSameAddress($event)\" [label]=\"'SAME_AS_DELIVERY'\"></co-input-checkbox>\n            </div>\n            <div class=\"overview-delivery-invoice-address\" *ngIf=\"!invoiceAddressSameAsDeliveryAddress\" @showHideInvoiceAddress>\n              <div class=\"checkout-data-row\">\n                <co-carousel-3d class=\"default-width\" *ngIf=\"relation.addresses\"\n                                [tileWidth]=\"200\"\n                                [tileHeight]=\"100\"\n                                [selectedIndex]=\"invoiceAddressIdx\"\n                                (indexSelected)=\"setIndexInvoiceAddress($event)\">\n                  <co-relation-address-tile #carouselItem *ngFor=\"let address of relation.addresses; let index = index\"\n                                            [address]=\"address\"\n                                            [selected]=\"invoiceAddressIdx === index\"\n                                            (editAddressClicked)=\"editAddress($event)\"\n                  ></co-relation-address-tile>\n                </co-carousel-3d>\n              </div>\n              <div class=\"checkout-data-row\">\n                <div class=\"relation-address-new\">\n                  <icon class=\"relation-address-icon\" [icon]=\"icons.ArrowPointRight\"></icon>\n                  <div [textContent]=\"'ADDRESS_ADD' | localize\" (click)=\"showNewAddressDialog()\"></div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"checkout-section-wrapper\">\n          <div class=\"checkout-label-column\">\n            <span>03</span>\n            <span class=\"label\" [textContent]=\"'DELIVERY_MOMENT' | localize\"></span>\n          </div>\n          <div class=\"checkout-data-column\">\n            <div class=\"checkout-data-row\">\n              <co-input-date [(model)]=\"deliveryOptionsRequest.deliveryDate\" [placeholder]=\"'DELIVERY_DATE' | localize\" [required]=\"true\"></co-input-date>\n              <co-input-checkbox [(model)]=\"deliveryOptionsRequest.allowPartialDelivery\" [label]=\"'PART_DELIVERIES' | localize\"></co-input-checkbox>\n            </div>\n            <div class=\"checkout-data-row\">\n              <co-input-date [(model)]=\"deliveryOptionsRequest.preferredDeliveryDate\" [placeholder]=\"'PREFERRED_DATE' | localize\"></co-input-date>\n              <co-input-date [model]=\"'NOG_NIET_GEIMPLEMENTEERD'\" [placeholder]=\"'ASSEMBLY_DATE' | localize\"></co-input-date>\n            </div>\n            <div class=\"checkout-data-row\">\n            </div>\n          </div>\n        </div>\n        <div class=\"checkout-section-wrapper\">\n          <div class=\"checkout-label-column\">\n            <span>04</span>\n            <span class=\"label\" [textContent]=\"'DELIVERY_OPTIONS' | localize\"></span>\n          </div>\n          <div class=\"checkout-data-column\">\n            <div class=\"checkout-data-row\">\n              <co-drop-down-list\n                [collection]=\"deliveryMethods\"\n                [fields]=\"deliveryMethodFields\"\n                [required]=\"true\"\n                [model]=\"deliveryOptionsRequest.deliveryMethod\"\n                (modelChange)=\"handleDeliveryMethodChange($event)\"\n                [placeholder]=\"'DELIVERY_METHOD2' | localize\"></co-drop-down-list>\n              <co-input-text [placeholder]=\"'TOTAL_ASSEMBLY_TIME' | localize\"></co-input-text>\n            </div>\n            <div class=\"checkout-data-row\">\n              <co-input-listbox\n                [placeholder]=\"'DELIVERY_OPTIONS' | localize\"\n                [(model)]=\"deliveryOptionsRequest.deliveryOptions\"\n                [collection]=\"deliveryOptions\"\n                [fields]=\"deliveryOptionFields\"\n                [showCheckbox]=\"true\"\n              ></co-input-listbox>\n            </div>\n            <div class=\"checkout-data-row\">\n              <co-input-textarea [(model)]=\"deliveryOptionsRequest.remark\" [placeholder]=\"'REMARKS' | localize\"></co-input-textarea>\n            </div>\n          </div>\n        </div>\n        <div class=\"checkout-section-wrapper\">\n          <div class=\"checkout-label-column\">\n            <span>05</span>\n            <span class=\"label\" [textContent]=\"'MARKETING' | localize\"></span>\n          </div>\n          <div class=\"checkout-data-column\">\n            <div class=\"checkout-data-row\">\n              <co-drop-down-list\n                [collection]=\"marketing\"\n                [fields]=\"marketingFields\"\n                [(model)]=\"deliveryOptionsRequest.marketingCode\"\n                [placeholder]=\"'MARKETING' | localize\"></co-drop-down-list>\n            </div>\n          </div>\n        </div>\n      </div>\n    </co-form>\n    <co-dialog *ngIf=\"showCreateAddressDialog\">\n      <co-relation-address\n        (saveClick)=\"saveNewAddress($event)\"\n        (cancelClick)=\"showCreateAddressDialog = false\"\n      ></co-relation-address>\n    </co-dialog>\n    <co-dialog *ngIf=\"showSelectAddressDialog && addressToEdit\">\n      <co-relation-address\n        [address]=\"addressToEdit\"\n        (saveClick)=\"saveAddress($event)\"\n        (cancelClick)=\"showSelectAddressDialog = false\"\n      ></co-relation-address>\n    </co-dialog>\n  ",
+                    template: "\n    <div class=\"delivery-edit-content\">\n      <co-form>\n        <div class=\"checkout-form-wrapper\">\n          <div class=\"checkout-section-wrapper\">\n            <div class=\"checkout-label-column\">\n              <span>01</span>\n              <span class=\"label\" [textContent]=\"'DELIVERY_DATA' | localize\"></span>\n            </div>\n            <div class=\"checkout-data-column\">\n              <div class=\"checkout-data-row\">\n                <co-carousel-3d [tileWidth]=\"200\"\n                                [tileHeight]=\"100\"\n                                [selectedIndex]=\"deliveryTypeIdx\"\n                                (indexSelected)=\"setIndexDeliveryType($event)\">\n                  <co-delivery-type-tile #carouselItem *ngFor=\"let type of deliveryTypes; let index = index\"\n                                            [type]=\"type\"\n                                            [selected]=\"deliveryTypeIdx === index\"\n                  ></co-delivery-type-tile>\n                </co-carousel-3d>\n              </div>\n              <div class=\"checkout-data-row\">\n                <co-input-date [(model)]=\"deliveryOptionsRequest.deliveryDate\" [placeholder]=\"'DELIVERY_DATE' | localize\" [required]=\"true\"></co-input-date>\n              </div>\n              <div class=\"checkout-data-row\">\n                <co-input-date [(model)]=\"deliveryOptionsRequest.preferredDeliveryDate\" [placeholder]=\"'PREFERRED_DATE' | localize\"></co-input-date>\n              </div>\n              <div class=\"checkout-data-row\">\n                <co-input-checkbox [(model)]=\"deliveryOptionsRequest.allowPartialDelivery\" [label]=\"'PART_DELIVERIES' | localize\"></co-input-checkbox>\n              </div>\n              <div class=\"checkout-data-row\">\n                <co-collapsible [headerTitle]=\"'ADD_DELIVERY_OPTION' | localize\" [iconData]=\"iconService.getIcon(icons.TriangleDown)\">\n                  <div class=\"checkout-data-row\">\n                    <co-drop-down-list\n                      [collection]=\"deliveryMethods\"\n                      [fields]=\"deliveryMethodFields\"\n                      [required]=\"true\"\n                      [model]=\"deliveryOptionsRequest.deliveryMethod\"\n                      (modelChange)=\"handleDeliveryMethodChange($event)\"\n                      [placeholder]=\"'DELIVERY_METHOD' | localize\"></co-drop-down-list>\n                    <co-input-text [placeholder]=\"'TOTAL_ASSEMBLY_TIME' | localize\"></co-input-text>\n                  </div>\n                  <div class=\"checkout-data-row\">\n                    <co-input-listbox\n                      [placeholder]=\"'DELIVERY_OPTIONS' | localize\"\n                      [(model)]=\"deliveryOptionsRequest.deliveryOptions\"\n                      [collection]=\"deliveryOptions\"\n                      [fields]=\"deliveryOptionFields\"\n                      [showCheckbox]=\"true\"\n                    ></co-input-listbox>\n                  </div>\n                </co-collapsible>\n              </div>\n              <div class=\"checkout-data-row\">\n                <co-collapsible [headerTitle]=\"'ADD_REMARK' | localize\" [iconData]=\"iconService.getIcon(icons.TriangleDown)\">\n                  <div class=\"checkout-data-row\">\n                    <co-input-textarea [(model)]=\"deliveryOptionsRequest.remark\" [placeholder]=\"'REMARKS' | localize\"></co-input-textarea>\n                  </div>\n                </co-collapsible>\n              </div>\n              <div class=\"checkout-data-row\">\n                <co-collapsible [headerTitle]=\"'ADD_REFERENCE' | localize\" [iconData]=\"iconService.getIcon(icons.TriangleDown)\">\n                  <div class=\"checkout-data-row\">\n                    <co-input-text [(model)]=\"deliveryOptionsRequest.ownReference\" [placeholder]=\"'REFERENCE' | localize\"></co-input-text>\n                  </div>\n                  <div class=\"checkout-data-row\">\n                    <co-input-text [(model)]=\"deliveryOptionsRequest.relationReference\" [placeholder]=\"'REFERENCE_RELATION' | localize\"></co-input-text>\n                  </div>\n                </co-collapsible>\n              </div>\n              <div class=\"checkout-data-row\">\n                <co-input-date [model]=\"'NOG_NIET_GEIMPLEMENTEERD'\" [placeholder]=\"'ASSEMBLY_DATE' | localize\"></co-input-date>\n              </div>\n            </div>\n          </div>\n          <div class=\"checkout-section-wrapper\">\n            <div class=\"checkout-label-column\">\n              <span>02</span>\n              <span class=\"label\" [textContent]=\"'DOWNPAYMENT' | localize\"></span>\n            </div>\n            <div class=\"checkout-data-column\">\n              <div class=\"checkout-data-row\">\n                <co-input-text [model]=\"'NOG_NIET_GEIMPLEMENTEERD'\" [placeholder]=\"'DOWNPAYMENT_PERCENTAGE' | localize\"></co-input-text>\n                <co-input-text [model]=\"'NOG_NIET_GEIMPLEMENTEERD'\" [placeholder]=\"'DOWNPAYMENT_AMOUNT' | localize\"></co-input-text>\n              </div>\n              <div class=\"checkout-data-row\">\n                <co-input-text [model]=\"'NOG_NIET_GEIMPLEMENTEERD'\" [placeholder]=\"'DOWNPAYMENT_BY_BR' | localize\"></co-input-text>\n              </div>\n              <div class=\"checkout-data-row\">\n                <co-input-text [model]=\"'NOG_NIET_GEIMPLEMENTEERD'\" [placeholder]=\"'DOWNPAYMENT_ON_DELIVERY' | localize\"></co-input-text>\n              </div>\n            </div>\n          </div>\n          <div class=\"checkout-section-wrapper\">\n            <div class=\"checkout-label-column\">\n              <span>03</span>\n              <span class=\"label\" [textContent]=\"'ORDER_DATA' | localize\"></span>\n            </div>\n            <div class=\"checkout-data-column\">\n              <div class=\"checkout-data-row\">\n                <co-input-text [model]=\"'NOG_NIET_GEIMPLEMENTEERD'\" [placeholder]=\"'BRANCH' | localize\"></co-input-text>\n                <co-input-text [model]=\"'NOG_NIET_GEIMPLEMENTEERD'\" [placeholder]=\"'ADMINISTRATIVE_MANAGER' | localize\"></co-input-text>\n              </div>\n              <div class=\"checkout-data-row\">\n                <co-drop-down-list\n                  [collection]=\"marketing\"\n                  [fields]=\"marketingFields\"\n                  [(model)]=\"deliveryOptionsRequest.marketingCode\"\n                  [placeholder]=\"'MARKETING' | localize\"></co-drop-down-list>\n              </div>\n              <div class=\"checkout-data-row\">\n              </div>\n              <div class=\"checkout-data-row\">\n              </div>\n            </div>\n          </div>\n        </div>\n      </co-form>\n    </div>\n  ",
                     providers: [
                         corecomponents_v12.FormMasterService
                     ],
@@ -4126,17 +4271,12 @@
         { type: DictionaryService },
         { type: corecomponents_v12.FormMasterService },
         { type: BusinessObjectFactory },
-        { type: TransactionService }
+        { type: TransactionService },
+        { type: IconCacheService }
     ]; };
     CheckoutOverviewDeliveryEditComponent.propDecorators = {
-        deliveryForm: [{ type: i0.ViewChild, args: ["deliveryForm", { read: corecomponents_v12.FormComponent },] }],
-        locationForm: [{ type: i0.ViewChild, args: ["locationForm", { read: corecomponents_v12.FormComponent },] }],
-        changeLocationDialog: [{ type: i0.ViewChild, args: ["changeLocationDialog",] }],
-        addressGrid: [{ type: i0.ViewChild, args: ["addressGrid",] }],
-        relation: [{ type: i0.Input }],
         deliveryOptionsRequest: [{ type: i0.Input }],
         transaction: [{ type: i0.Input }],
-        relationChange: [{ type: i0.Output }],
         validSubmit: [{ type: i0.Output }],
         invalidSubmit: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-checkout-overview-delivery-edit",] }]
@@ -4182,7 +4322,7 @@
     CheckOutRelationSuggestionsListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-checkout-relation-suggestions-list",
-                    template: "\n    <div class=\"flex-column items-wrapper\">\n      <co-checkout-relation-suggestions-list-item *ngFor=\"let suggestion of suggestions\" [suggestion]=\"suggestion\"\n                                                  (selectionSelected)=\"suggestionSelected.emit(suggestion)\"></co-checkout-relation-suggestions-list-item>\n      <span *ngIf=\"suggestions?.length === 0\" class=\"no-results\" localize=\"NO_RESULTS_FOUND\"></span>\n    </div>\n  ",
+                    template: "\n    <div class=\"flex-column items-wrapper\">\n      <co-checkout-relation-suggestions-list-item *ngFor=\"let suggestion of suggestions\" [suggestion]=\"suggestion\"\n                                                  (selectionSelected)=\"suggestionSelected.emit($event)\"></co-checkout-relation-suggestions-list-item>\n      <span *ngIf=\"suggestions?.length === 0\" class=\"no-results\" localize=\"NO_RESULTS_FOUND\"></span>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -4293,73 +4433,6 @@
         showClass: [{ type: i0.HostBinding, args: ['class.co-image-display',] }]
     };
 
-    /** AUTO GENERATED FILE. DO NOT CHANGE.. OR YOU WILL SUFFER THE CONSEQUENCES OF YOUR ACTIONS **/
-    var 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>"
-    };
-
-    var IconCacheService = /** @class */ (function () {
-        function IconCacheService(_sanitizer) {
-            this._sanitizer = _sanitizer;
-            this._iconCache = {};
-            this.setIconCache();
-        }
-        Object.defineProperty(IconCacheService.prototype, "iconCache", {
-            /**
-             * 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: function () {
-                return this._iconCache;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        IconCacheService.prototype.getIcon = function (iconName) {
-            if (iconName) {
-                return this._iconCache[iconName.toLowerCase()];
-            }
-        };
-        IconCacheService.prototype.getIconAsBase64 = function (iconName) {
-            var icon = IconSvg[iconName];
-            var base64Data = window.btoa(icon);
-            return this._sanitizer.bypassSecurityTrustUrl("data:image/svg+xml;base64," + base64Data);
-        };
-        IconCacheService.prototype.getRawIcon = function (iconName) {
-            if (iconName) {
-                return IconSvg[iconName.toLowerCase()];
-            }
-        };
-        IconCacheService.prototype.setIconCache = function () {
-            for (var key in IconSvg) {
-                if (IconSvg.hasOwnProperty(key) && typeof IconSvg[key] !== "function") {
-                    this._iconCache[key.toLowerCase()] = this._sanitizer.bypassSecurityTrustHtml(IconSvg[key]);
-                }
-            }
-        };
-        return IconCacheService;
-    }());
-    IconCacheService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function IconCacheService_Factory() { return new IconCacheService(i0__namespace.ɵɵinject(i1__namespace.DomSanitizer)); }, token: IconCacheService, providedIn: "root" });
-    IconCacheService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: "root"
-                },] }
-    ];
-    IconCacheService.ctorParameters = function () { return [
-        { type: i1.DomSanitizer }
-    ]; };
-
     var IconComponent = /** @class */ (function () {
         function IconComponent(_iconCacheService) {
             this._iconCacheService = _iconCacheService;
@@ -4422,7 +4495,8 @@
     CustomerGroupsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "relation-customer-groups",
-                    template: "\n    <co-input-combo-box [model]=\"model\"\n                        (modelChange)=\"modelChange.emit($event)\"\n                        [collection]=\"customerGroups\"\n                        [fields]=\"fields\"\n                        [placeholder]=\"'CUSTOMER_GROUP'| localize\"\n                        [required]=\"required\"\n    ></co-input-combo-box>\n  "
+                    template: "\n    <co-input-combo-box [model]=\"model\"\n                        (modelChange)=\"modelChange.emit($event)\"\n                        [collection]=\"customerGroups\"\n                        [fields]=\"fields\"\n                        [placeholder]=\"'CUSTOMER_GROUP' | localize\"\n                        [required]=\"required\"\n    ></co-input-combo-box>\n  ",
+                    styles: [":host{display:flex}:host .co-input-combo-box{width:100%}\n"]
                 },] }
     ];
     CustomerGroupsComponent.ctorParameters = function () { return [
@@ -5012,6 +5086,7 @@
             this.icons = Icon;
             this.actAsAddTile = false;
             this.selected = false;
+            this.selectedChange = new i0.EventEmitter();
             this.addAddressClicked = new i0.EventEmitter();
             this.editAddressClicked = new i0.EventEmitter();
         }
@@ -5029,18 +5104,7 @@
     RelationAddressTileComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-relation-address-tile",
-                    template: "\n    <ng-container *ngIf=\"!actAsAddTile\">\n      <div class=\"relation-address\">\n        <div class=\"relation-select-wrapper\">\n          <co-input-radio-button [checked]=\"selected\"></co-input-radio-button>\n        </div>\n        <div class=\"relation-content-wrapper\">\n          <span class=\"relation-address-type\" [textContent]=\"address.displayType | localize\"></span>\n          <span class=\"relation-address-name\" [textContent]=\"address.addressName\"></span>\n          <span class=\"relation-address-address\" [textContent]=\"address.displayAddress\"></span>\n          <span class=\"relation-address-postal\" [textContent]=\"address.displayPostal\"></span>\n          <span class=\"relation-address-country\" [textContent]=\"address.displayCountry\"></span>\n        </div>\n        <div class=\"relation-address-edit\" (click)=\"handleEditAddressClick($event)\">\n          <icon class=\"relation-address-edit-icon\" [icon]=\"icons.EditPencil\"></icon>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"actAsAddTile\">\n      <div class=\"relation-address-create\" (click)=\"addAddressClicked.emit()\">\n        <icon class=\"relation-address-icon\" [icon]=\"icons.PlusRound\"></icon>\n        <span [textContent]=\"'ADDRESS_ADD' | localize\"></span>\n      </div>\n    </ng-container>\n  ",
-                    providers: [
-                        corecomponents_v12.FormMasterService
-                    ],
-                    animations: [
-                        animations.trigger("showHideNavigationButton", [
-                            animations.state("void", animations.style({ opacity: 0 })),
-                            animations.state("*", animations.style({ opacity: 1 })),
-                            animations.transition("void => *", animations.animate("200ms ease-in-out")),
-                            animations.transition("* => void", animations.animate("200ms ease-out"))
-                        ])
-                    ],
+                    template: "\n    <ng-container *ngIf=\"!actAsAddTile\">\n      <co-tile [selected]=\"selected\" (selectedChange)=\"selectedChange.emit($event)\">\n        <div class=\"relation-content-wrapper\">\n          <span class=\"relation-address-type\" [textContent]=\"address.displayType | localize\"></span>\n          <span class=\"relation-address-name\" [textContent]=\"address.addressName\"></span>\n          <span class=\"relation-address-address\" [textContent]=\"address.displayAddress\"></span>\n          <span class=\"relation-address-postal\" [textContent]=\"address.displayPostal\"></span>\n          <span class=\"relation-address-country\" [textContent]=\"address.displayCountry\"></span>\n        </div>\n        <div class=\"relation-address-edit\" (click)=\"handleEditAddressClick($event)\">\n          <icon class=\"relation-address-edit-icon\" [icon]=\"icons.EditPencil\"></icon>\n        </div>\n      </co-tile>\n    </ng-container>\n    <ng-container *ngIf=\"actAsAddTile\">\n      <co-tile (click)=\"addAddressClicked.emit()\">\n        <div class=\"relation-content-wrapper\">\n          <icon class=\"relation-address-icon\" [icon]=\"icons.PlusRound\"></icon>\n          <span [textContent]=\"'ADDRESS_ADD' | localize\"></span>\n        </div>\n      </co-tile>\n    </ng-container>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -5048,11 +5112,54 @@
         showClass: [{ type: i0.HostBinding, args: ["class.co-relation-address-tile",] }],
         address: [{ type: i0.Input }],
         actAsAddTile: [{ type: i0.Input }],
-        selected: [{ type: i0.HostBinding, args: ['class.selected',] }, { type: i0.Input }],
+        selected: [{ type: i0.Input }],
+        selectedChange: [{ type: i0.Output }],
         addAddressClicked: [{ type: i0.Output }],
         editAddressClicked: [{ type: i0.Output }]
     };
 
+    var TileComponent = /** @class */ (function () {
+        function TileComponent() {
+            this.selected = false;
+            this.selectedChange = new i0.EventEmitter();
+        }
+        TileComponent.prototype.showClass = function () {
+            return true;
+        };
+        return TileComponent;
+    }());
+    TileComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-tile",
+                    template: "\n    <div class=\"co-tile-wrapper\" (click)=\"selectedChange.emit(selected)\">\n      <div class=\"co-tile-select-wrapper\">\n        <co-input-radio-button [checked]=\"selected\" (modelChange)=\"selectedChange.emit($event)\"></co-input-radio-button>\n      </div>\n      <div class=\"co-tile-content-wrapper\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    TileComponent.propDecorators = {
+        selected: [{ type: i0.HostBinding, args: ['class.selected',] }, { type: i0.Input }],
+        selectedChange: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-tile",] }]
+    };
+
+    var TileModule = /** @class */ (function () {
+        function TileModule() {
+        }
+        return TileModule;
+    }());
+    TileModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        corecomponents_v12.InputRadioButtonModule
+                    ],
+                    declarations: [
+                        TileComponent
+                    ],
+                    exports: [
+                        TileComponent
+                    ]
+                },] }
+    ];
+
     var RelationAddressTileModule = /** @class */ (function () {
         function RelationAddressTileModule() {
         }
@@ -5068,7 +5175,8 @@
                         RelationAddressModule,
                         corecomponents_v12.ButtonModule,
                         corecomponents_v12.FormModule,
-                        PipeModule
+                        PipeModule,
+                        TileModule
                     ],
                     declarations: [
                         RelationAddressTileComponent
@@ -5110,8 +5218,8 @@
     var StepperStepComponent = /** @class */ (function () {
         function StepperStepComponent() {
             this.index = 0;
-            this.validateStep = new i0.EventEmitter();
             this.show = false;
+            this.validateStep = new i0.EventEmitter();
             this._completed = false;
             this.onComplete = function (complete) { };
         }
@@ -5142,19 +5250,37 @@
         index: [{ type: i0.Input }],
         label: [{ type: i0.Input }],
         completed: [{ type: i0.Input }],
+        show: [{ type: i0.HostBinding, args: ['class.show',] }, { type: i0.Input }],
         validateStep: [{ type: i0.Output }],
-        show: [{ type: i0.Input }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-stepper-step",] }]
     };
 
     var StepperComponent = /** @class */ (function () {
         function StepperComponent() {
+            this.icons = Icon;
             this.finishStep = new i0.EventEmitter();
-            this.steps = [];
+            this.firstStep = 0;
+            this.truckPosition = 0;
+            this._activeStep = 0;
         }
         Object.defineProperty(StepperComponent.prototype, "content", {
             set: function (children) {
+                var _this = this;
                 this.stepChildren = children.toArray();
+                if (this.stepChildren) {
+                    setTimeout(function () {
+                        _this._setActive(0);
+                    });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(StepperComponent.prototype, "child", {
+            set: function (child) {
+                if (child && child.nativeElement) {
+                    this._deliveryTruckClientRect = child.nativeElement.getBoundingClientRect();
+                }
             },
             enumerable: false,
             configurable: true
@@ -5175,14 +5301,14 @@
         });
         Object.defineProperty(StepperComponent.prototype, "canPrevious", {
             get: function () {
-                return this.activeStep !== this.firstStep;
+                return this.activeStep > this.firstStep;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(StepperComponent.prototype, "canNext", {
             get: function () {
-                return this.activeStep !== this.lastStep;
+                return this.activeStep < this.lastStep;
             },
             enumerable: false,
             configurable: true
@@ -5194,16 +5320,19 @@
             enumerable: false,
             configurable: true
         });
-        StepperComponent.prototype.ngAfterContentInit = function () {
-            if (this.stepChildren) {
-                this.stepChildren[0].show = true;
-                this.activeStep = this.stepChildren[0].index;
-            }
-        };
+        Object.defineProperty(StepperComponent.prototype, "activeStep", {
+            get: function () {
+                return this._activeStep;
+            },
+            set: function (value) {
+                this._activeStep = value;
+                this.truckPosition = (100 / this.stepChildren.length) * (this._activeStep + 1);
+            },
+            enumerable: false,
+            configurable: true
+        });
         StepperComponent.prototype.goto = function (idx) {
-            var _this = this;
-            var currentIndex = this.stepChildren.findIndex(function (s) { return s.index === _this.activeStep; });
-            if (idx > currentIndex) {
+            if (idx > this.activeStep) {
                 this._validateCurrentStep(idx);
             }
             else {
@@ -5211,24 +5340,19 @@
             }
         };
         StepperComponent.prototype.gotoPrevious = function () {
-            var _this = this;
-            var currentIndex = this.stepChildren.findIndex(function (s) { return s.index === _this.activeStep; });
-            this._setActive(currentIndex - 1);
+            this._setActive(this.activeStep - 1);
         };
         StepperComponent.prototype.gotoNext = function () {
             this._validateCurrentStep();
         };
         StepperComponent.prototype._validateCurrentStep = function (nextStep) {
             var _this = this;
-            var currentStep = this.stepChildren.find(function (s) { return s.index === _this.activeStep; });
-            var currentStepIdx = this.stepChildren.findIndex(function (s) { return s.index === _this.activeStep; });
-            currentStep.onComplete = function (complete) {
-                _this.steps[currentStepIdx].complete = complete;
+            this.stepChildren[this.activeStep].onComplete = function (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();
         };
         StepperComponent.prototype._setActive = function (idx) {
             var prevStep = this.stepChildren[idx - 1];
@@ -5236,38 +5360,25 @@
                 if (this.stepChildren) {
                     this.stepChildren.map(function (s) { return s.show = false; });
                     this.stepChildren[idx].show = true;
-                    this.activeStep = this.stepChildren[idx].index;
+                    this.activeStep = idx;
                 }
             }
         };
         StepperComponent.prototype._prepareSteps = function () {
-            this.steps.length = 0;
-            for (var i = 0; i < this.stepChildren.length; i++) {
-                var 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;
         };
         return StepperComponent;
     }());
     StepperComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-stepper",
-                    template: "\n    <ng-container [ngTemplateOutlet]=\"buttonTemplate\"></ng-container>\n    <div class=\"co-stepper-content\">\n      <div class=\"stepper-step\" *ngFor=\"let step of steps; let index = index\"\n           [class.active]=\"step.index === activeStep\"\n           [class.complete]=\"step.complete\"\n           (click)=\"goto(index)\">\n        <div class=\"index\" [textContent]=\"step.index\"></div>\n        <div class=\"description\" [textContent]=\"step.description\"></div>\n      </div>\n    </div>\n    <div class=\"co-stepper-content-wrapper\">\n      <ng-content></ng-content>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"buttonTemplate\"></ng-container>\n    <ng-template #buttonTemplate>\n      <div class=\"stepper-button-wrapper\">\n        <co-button [label]=\"'BACK' | localize\" *ngIf=\"canPrevious\" (click)=\"gotoPrevious()\"></co-button>\n        <co-button [label]=\"'CONTINUE' | localize\" *ngIf=\"canNext\" (click)=\"gotoNext()\"></co-button>\n        <co-button [label]=\"finishButtonLabel\" *ngIf=\"finished\" (click)=\"finishStep.emit()\"></co-button>\n      </div>\n    </ng-template>\n  ",
+                    template: "\n    <ng-container [ngTemplateOutlet]=\"buttonTemplate\"></ng-container>\n    <div class=\"co-stepper-content\">\n      <div class=\"stepper-step\" [class.last]=\"index === stepChildren.length - 1\" *ngFor=\"let step of stepChildren; let index = index\"\n           [class.active]=\"index === activeStep\"\n           [class.complete]=\"step.completed\"\n           (click)=\"goto(index)\">\n        <div class=\"description\" [textContent]=\"step.label\"></div>\n        <div class=\"index\"></div>\n      </div>\n      <icon #deliveryTruck *ngIf=\"activeStep !== lastStep\" class=\"delivery-truck\" [icon]=\"icons.DeliveryTruck\" [style.left.%]=\"truckPosition\"></icon>\n    </div>\n    <div class=\"co-stepper-content-wrapper\">\n      <ng-content></ng-content>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"buttonTemplate\"></ng-container>\n    <ng-template #buttonTemplate>\n      <div class=\"stepper-button-wrapper\">\n        <co-button [label]=\"'BACK' | localize\" *ngIf=\"canPrevious\" (click)=\"gotoPrevious()\"></co-button>\n        <co-button [label]=\"'CONTINUE' | localize\" *ngIf=\"canNext\" (click)=\"gotoNext()\"></co-button>\n        <co-button [label]=\"finishButtonLabel\" *ngIf=\"finished\" (click)=\"finishStep.emit()\"></co-button>\n      </div>\n    </ng-template>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     StepperComponent.propDecorators = {
         content: [{ type: i0.ContentChildren, args: [StepperStepComponent,] }],
+        child: [{ type: i0.ViewChild, args: ['deliveryTruck', { read: i0.ElementRef },] }],
         finishButtonLabel: [{ type: i0.Input }],
         finishStep: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-stepper",] }]
@@ -5283,7 +5394,9 @@
                     imports: [
                         common.CommonModule,
                         corecomponents_v12.ButtonModule,
-                        PipeModule
+                        PipeModule,
+                        corecomponents_v12.IconModule,
+                        CoreModule
                     ],
                     declarations: [
                         StepperComponent,
@@ -5296,183 +5409,50 @@
                 },] }
     ];
 
-    var CheckoutModule = /** @class */ (function () {
-        function CheckoutModule() {
-        }
-        return CheckoutModule;
-    }());
-    CheckoutModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        CoreModule,
-                        common.CommonModule,
-                        corecomponents_v12.IconModule,
-                        corecomponents_v12.InputTextModule,
-                        corecomponents_v12.InputCheckboxModule,
-                        corecomponents_v12.InputRadioButtonModule,
-                        corecomponents_v12.FormModule,
-                        corecomponents_v12.InputComboBoxModule,
-                        corecomponents_v12.InputDatePickerModule,
-                        corecomponents_v12.InputNumberPickerModule,
-                        corecomponents_v12.CoDialogModule,
-                        corecomponents_v12.CoDialogPromptModule,
-                        corecomponents_v12.ButtonModule,
-                        flexLayout.FlexModule,
-                        corecomponents_v12.MultiSelectListModule,
-                        corecomponents_v12.DropDownModule,
-                        corecomponents_v12.PopupModule.forRoot(),
-                        corecomponents_v12.CoSidebarModule,
-                        corecomponents_v12.CoGridModule,
-                        forms.ReactiveFormsModule,
-                        forms.FormsModule,
-                        RelationAddressModule,
-                        RelationAddressSelectModule,
-                        RelationAddressTileModule,
-                        corecomponents_v12.CoRichTextEditorModule,
-                        corecomponents_v12.Carousel3dModule,
-                        corecomponents_v12.InputTextareaModule,
-                        corecomponents_v12.InputListboxModule,
-                        PipeModule,
-                        StepperModule,
-                    ],
-                    declarations: [
-                        CheckoutOverviewRelationEditComponent,
-                        CheckoutOverviewDeliveryEditComponent,
-                        CheckoutOverviewDeliveryAddressComponent,
-                        CheckOutRelationSuggestionsListComponent,
-                        CheckOutRelationSuggestionsListItemComponent,
-                        CheckoutLoginComponent,
-                        CheckoutComponent,
-                    ],
-                    providers: [
-                        DictionaryService,
-                        OptionsService
-                    ],
-                    entryComponents: [
-                        CheckoutComponent
-                    ],
-                    exports: [CheckoutComponent],
-                    bootstrap: [CheckoutComponent]
-                },] }
-    ];
-
-    var ShoppingCartComponent = /** @class */ (function () {
-        function ShoppingCartComponent(service, _dictionary) {
-            var _this = this;
-            this.service = service;
-            this._dictionary = _dictionary;
-            this.closeCart = new i0.EventEmitter();
-            this.checkout = new i0.EventEmitter();
-            this.transaction = new transactionInfoResponse_bo.TransactionInfoResponse();
-            this._subs = [];
-            this._subs.push(this.service.transactionUpdated.subscribe(function (transaction) {
-                if (transaction) {
-                    _this.transaction = transaction;
-                }
-            }));
+    var TransactionTotalsComponent = /** @class */ (function () {
+        function TransactionTotalsComponent() {
+            this.showDiscount = false;
+            this.discountClick = new i0.EventEmitter();
         }
-        ShoppingCartComponent.prototype.showClass = function () {
+        TransactionTotalsComponent.prototype.showClass = function () {
             return true;
         };
-        ShoppingCartComponent.prototype.ngOnDestroy = function () {
-            this._subs.forEach(function (s) { return s.unsubscribe(); });
-        };
-        return ShoppingCartComponent;
+        return TransactionTotalsComponent;
     }());
-    ShoppingCartComponent.decorators = [
+    TransactionTotalsComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-shopping-cart",
-                    template: "\n    <div class=\"cart-header\">\n      <span class=\"cart-header-label\" [textContent]=\"'SHOPPING_CART_OVERVIEW' | localize | append:'(' + service.articleAmount + ')'\"></span>\n    </div>\n    <div class=\"shopping-cart-transaction-wrapper\">\n      <co-transaction [showHeader]=\"false\" [transaction]=\"transaction\"></co-transaction>\n    </div>\n    <div class=\"cart-buttons\">\n      <a class=\"button-resume\" [textContent]=\"'SHOPPING_CART_RESUME' | localize\"\n                 (click)=\"closeCart.emit()\"\n      ></a>\n      <co-button class=\"button-checkout\" [label]=\"'SHOPPING_CART_CHECKOUT' | localize\"\n                 [disabled]=\"service.articleAmount === 0\"\n                 (click)=\"checkout.emit()\"></co-button>\n    </div>\n  ",
+                    selector: "co-transaction-totals",
+                    template: "\n    <div class=\"transaction-totals-wrapper\">\n      <span class=\"totals-gross label\" [textContent]=\"'ORDER_GROSS' | localize\"></span>\n      <span class=\"totals-gross value\" [textContent]=\"totals?.grossAmount | coCurrency: true\"></span>\n      <ng-container *ngIf=\"totals?.discountAmount\">\n        <span class=\"totals-discount-amount label\" [textContent]=\"'DISCOUNT_AMOUNT' | localize\"></span>\n        <span class=\"totals-discount-amount value\" [textContent]=\"totals?.discountAmount | coCurrency: true\"></span>\n      </ng-container>\n      <ng-container *ngIf=\"totals?.transactionDiscountAmount\">\n        <span class=\"totals-discount label\" [textContent]=\"'TRANSACTION_DISCOUNT' | localize\"></span>\n        <span class=\"totals-discount value\" [textContent]=\"totals?.transactionDiscountAmount | coCurrency: true\"></span>\n      </ng-container>\n      <ng-container *ngIf=\"totals?.transactionDiscountPercentage\">\n        <span class=\"totals-discount-percentage label\" [textContent]=\"'TRANSACTION_DISCOUNT_PERC' | localize\"></span>\n        <span class=\"totals-discount-percentage value\" [textContent]=\"totals?.transactionDiscountPercentage.toString() | append:' %'\"></span>\n      </ng-container>\n      <span class=\"totals-net label\" [textContent]=\"'ORDER_NET'| localize\"></span>\n      <span class=\"totals-net value\" [textContent]=\"totals?.netAmount | coCurrency: true\"></span>\n      <a *ngIf=\"showDiscount\" class=\"add-discount label\" (click)=\"discountClick.emit($event)\" [textContent]=\"'ADD_DISCOUNTS' | localize\"></a>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
-    ShoppingCartComponent.ctorParameters = function () { return [
-        { type: TransactionService },
-        { type: DictionaryService }
-    ]; };
-    ShoppingCartComponent.propDecorators = {
-        closeCart: [{ type: i0.Output }],
-        checkout: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-shopping-cart",] }]
+    TransactionTotalsComponent.propDecorators = {
+        totals: [{ type: i0.Input }],
+        showDiscount: [{ type: i0.Input }],
+        discountClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-totals",] }]
     };
 
-    // 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 = {}));
-
-    var TransactionComponent = /** @class */ (function () {
-        function TransactionComponent(iconCacheService, _service) {
-            var _this = this;
-            this.iconCacheService = iconCacheService;
-            this._service = _service;
-            this.viewModes = ContentViewMode;
-            this.icons = Icon;
-            this.transaction = new transactionInfoResponse_bo.TransactionInfoResponse();
-            this.showHeader = true;
-            this.activeViewMode = ContentViewMode.List;
-            this.showDiscountsSidebar = false;
-            this._subs = [];
-            this._subs.push(this._service.transactionUpdated.subscribe(function (transaction) { return __awaiter(_this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    this.transaction = transaction;
-                    return [2 /*return*/];
-                });
-            }); }));
+    var TransactionTotalsModule = /** @class */ (function () {
+        function TransactionTotalsModule() {
         }
-        Object.defineProperty(TransactionComponent.prototype, "transactionId", {
-            set: function (value) {
-                if (value) {
-                    this._service.getTransactionById(value);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TransactionComponent.prototype.showClass = function () {
-            return true;
-        };
-        TransactionComponent.prototype.ngOnDestroy = function () {
-            this._subs.forEach(function (s) { return s.unsubscribe(); });
-        };
-        TransactionComponent.prototype.addDiscount = function () {
-            this.showDiscountsSidebar = true;
-            // TODO
-            // this.transactionDiscountPercentage = this.service.currentTransaction.transactionDiscountPercentage;
-            // this.transactionDiscountAmount = this.service.currentTransaction.transactionDiscountAmount;
-            // this.transactionTotal = undefined;
-        };
-        TransactionComponent.prototype.saveTransactionLine = function (transactionAddTextLineRequest) {
-            if (transactionAddTextLineRequest.transactionUuid) { //update
-            }
-            else { // new transactionLine (transactionArticleText)
-                this._service.addTextLine(transactionAddTextLineRequest.showOnDocuments, transactionAddTextLineRequest.text, 0, transactionAddTextLineRequest.articleBound, 0, 0, 0);
-            }
-        };
-        return TransactionComponent;
+        return TransactionTotalsModule;
     }());
-    TransactionComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: "co-transaction",
-                    template: "\n    <co-transaction-header *ngIf=\"showHeader\" [transaction]=\"transaction\"></co-transaction-header>\n    <div class=\"transaction-view-mode-buttons\">\n      <co-button class=\"view-button white\"\n                 [class.selected]=\"this.activeViewMode === viewModes.List\"\n                 [iconData]=\"iconCacheService.getIcon(icons.ThickLines)\"\n                 [title]=\"'LIST_VIEW' | localize\"\n                 (click)=\"this.activeViewMode = viewModes.List\"></co-button>\n      <co-button class=\"view-button white\"\n                 [class.selected]=\"this.activeViewMode === viewModes.Grid\"\n                 [iconData]=\"iconCacheService.getIcon(icons.ThinLines)\"\n                 [title]=\"'GRID_VIEW' | localize\"\n                 (click)=\"this.activeViewMode = viewModes.Grid\"></co-button>\n    </div>\n    <div class=\"transaction-lines-wrapper\" *ngIf=\"activeViewMode === viewModes.List\">\n      <co-transaction-lines\n        [transactionLines]=\"transaction.transactionLines\"\n        (saveTransactionLine)=\"saveTransactionLine($event)\"\n      ></co-transaction-lines>\n    </div>\n    <div class=\"transaction-lines-grid-wrapper\" *ngIf=\"activeViewMode === viewModes.Grid\">\n      <co-transaction-lines-grid\n        [transactionLines]=\"transaction.transactionLines\"\n      ></co-transaction-lines-grid>\n    </div>\n    <div class=\"transaction-footer-wrapper\">\n      <co-transaction-totals [totals]=\"transaction.transactionTotal\" [showDiscount]=\"true\" (discountClick)=\"addDiscount()\"></co-transaction-totals>\n    </div>\n    <co-discount *ngIf=\"showDiscountsSidebar\">\n    </co-discount>\n  ",
-                    encapsulation: i0.ViewEncapsulation.None
+    TransactionTotalsModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        CoreModule,
+                        PipeModule
+                    ],
+                    declarations: [
+                        TransactionTotalsComponent
+                    ],
+                    exports: [
+                        TransactionTotalsComponent
+                    ]
                 },] }
-    ];
-    TransactionComponent.ctorParameters = function () { return [
-        { type: IconCacheService },
-        { type: TransactionService }
-    ]; };
-    TransactionComponent.propDecorators = {
-        transaction: [{ type: i0.Input }],
-        transactionId: [{ type: i0.Input }],
-        showHeader: [{ type: i0.Input }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction",] }]
-    };
+    ];
 
     var TransactionArticleTextComponent = /** @class */ (function () {
         function TransactionArticleTextComponent(service) {
@@ -5618,9 +5598,11 @@
             this._dictionaryService = _dictionaryService;
             this.icons = Icon;
             this.preview = false;
+            this.waitingForUserAction = new i0.EventEmitter();
             this.stock = stockStatus_enum.StockStatus.Low;
             this.showTransactionArticleText = false;
             this.showTransactionArticleTextOverview = false;
+            this.showSidePanel = false;
         }
         Object.defineProperty(TransactionLineComponent.prototype, "line", {
             get: function () {
@@ -5762,22 +5744,41 @@
         // }
         TransactionLineComponent.prototype._showArticleTextDialog = function () {
             this.showTransactionArticleText = true;
+            this.waitingForUserAction.next(true);
         };
         TransactionLineComponent.prototype._hideArticleTextDialog = function () {
             this.showTransactionArticleText = false;
+            this.waitingForUserAction.next(false);
         };
         TransactionLineComponent.prototype._showArticleTextOverviewDialog = function () {
             this.showTransactionArticleTextOverview = true;
+            this.waitingForUserAction.next(true);
         };
         TransactionLineComponent.prototype._hideArticleTextOverviewDialog = function () {
             this.showTransactionArticleTextOverview = false;
+            this.waitingForUserAction.next(false);
+        };
+        TransactionLineComponent.prototype.handleShowSidePanel = function (event) {
+            this.showSidePanel = true;
+            this.waitingForUserAction.next(true);
+        };
+        TransactionLineComponent.prototype.handleCloseSidePanel = function (event) {
+            this.showSidePanel = false;
+            this.waitingForUserAction.next(false);
         };
         return TransactionLineComponent;
     }());
     TransactionLineComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-line",
-                    template: "\n    <div class=\"transaction-line\">\n      <ng-container *ngIf=\"line.isArticle\">\n        <div class=\"transaction-line-wrapper\">\n          <div class=\"transaction-line-image\" [class.preview]=\"preview\">\n            <co-image-display [model]=\"image\"></co-image-display>\n          </div>\n          <div class=\"transaction-line-description\">\n            <div class=\"description-wrapper\">\n              <span [textContent]=\"line.goodDescription\" class=\"transaction-line-description-description\"></span>\n              <span *ngIf=\"line.goodDescription && line.articleNumber\" class=\"transaction-line-description-divider\">|</span>\n              <span [textContent]=\"line.articleNumber\" class=\"transaction-line-description-sku\"></span>\n            </div>\n            <div *ngIf=!preview class=\"article-text-wrapper\">\n              <div class=\"article-text\" *ngFor=\"let text of line.articleTestAsArray\">\n                <span [innerHTML]=\"text | safeHtml\" (dblclick)=\"handleOpenArticleText(text)\"></span>\n              </div>\n            </div>\n            <div *ngIf=!preview class=\"configuration-text-wrapper\">\n              <span [innerHTML]=\"line.configurationReadable\"></span>\n            </div>\n          </div>\n          <div *ngIf=!preview class=\"transaction-line-stock\">\n            <span [textContent]=\"'STOCK' | localize\" class=\"small-font\"></span>\n            <stock-status-indicator [model]=\"stock\"></stock-status-indicator>\n            <span [textContent]=\"'DELIVERY_TIME_PERIOD' | localize\" class=\"small-font\"></span>\n            <span [textContent]=\"line.deliveryDate | deliveryTime\"></span>\n          </div>\n          <div *ngIf=!preview class=\"transaction-line-amount\">\n            <co-input-number-picker class=\"amount-number-picker\"\n                                    [(model)]=\"localAmount\" [min]=\"0\"\n                                    [readonly]=\"true\"\n                                    (modelChange)=\"changeLineAmount($event)\"></co-input-number-picker>\n          </div>\n          <div class=\"transaction-line-delete\" *ngIf=\"preview\">\n            <div class=\"delete-wrapper\" (click)=\"deleteTransactionLineClick()\">\n              <icon class=\"delete-icon\" [icon]=\"icons.Cancel\"></icon>\n              <div class=\"delete-link\"\n                   [textContent]=\"'DELETE_TRANSACTION_LINE' | localize:false\">\n              </div>\n            </div>\n          </div>\n          <div class=\"transaction-line-totals\">\n            <span [textContent]=\"line.displayNetLineTotal | coCurrency: true\"></span>\n          </div>\n          <div *ngIf=!preview class=\"transaction-line-buttons\">\n            <co-button class=\"transaction-line-overview-button circle\" [iconData]=\"iconCacheService.getIcon(icons.Txt)\" (click)=\"handleTransactionArticleTextOverview($event)\"></co-button>\n            <co-button class=\"transaction-line-add-text-button circle\" [iconData]=\"iconCacheService.getIcon(icons.Txt)\" (click)=\"handleTransactionArticleText($event)\"></co-button>\n          </div>\n        </div>\n        <div class=\"transaction-line-delete\" *ngIf=\"!preview\">\n          <div class=\"delete-wrapper\" (click)=\"deleteTransactionLineClick()\">\n            <icon class=\"delete-icon\" [icon]=\"icons.Cancel\"></icon>\n            <div class=\"delete-link\"\n                 [textContent]=\"'DELETE_TRANSACTION_LINE' | localize:false\">\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"line.isText\">\n        <div [textContent]=\"line.text\"></div>\n        <div class=\"transaction-line-delete\" *ngIf=\"!preview\">\n          <div class=\"delete-wrapper\" (click)=\"deleteTransactionLineClick()\">\n            <icon class=\"delete-icon\" [icon]=\"icons.Cancel\"></icon>\n            <div class=\"delete-link\"\n                 [textContent]=\"'DELETE_TRANSACTION_LINE' | localize:false\">\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <co-transaction-article-text-overview *ngIf=\"showTransactionArticleTextOverview\"\n                                          [header]=\"articleTextHeader | localize\"\n                                          [transactionLine]=\"line\"\n                                          (saveClick)=\"saveTransactionArticleLineText($event)\"\n                                          (closeClick)=\"closeTransactionArticleTextOverview($event)\"\n                                          (cancelClick)=\"closeTransactionArticleTextOverview($event)\"\n    ></co-transaction-article-text-overview>\n    <co-transaction-article-text *ngIf=\"showTransactionArticleText\"\n                                 [header]=\"articleTextHeader | localize\"\n                                 [articleLineNr]=\"line.lineNr\"\n                                 [articleRef]=\"line.articleNumber\"\n                                 [transactionLine]=\"line\"\n                                 [editText]=\"textToEdit\"\n                                 (saveClick)=\"saveTransactionArticleLineText($event)\"\n                                 (closeClick)=\"closeTransactionArticleText($event)\"\n                                 (cancelClick)=\"closeTransactionArticleText($event)\"\n    ></co-transaction-article-text>\n  ",
+                    template: "\n    <div class=\"transaction-line\">\n      <ng-container *ngIf=\"line.isArticle\">\n        <div class=\"transaction-line-wrapper\">\n          <div class=\"transaction-line-image\" [class.preview]=\"preview\">\n            <co-image-display [model]=\"image\"></co-image-display>\n          </div>\n          <div class=\"transaction-line-description\">\n            <div class=\"description-wrapper\">\n              <span [textContent]=\"line.goodDescription\" class=\"transaction-line-description-description\"></span>\n              <span *ngIf=\"line.goodDescription && line.articleNumber\" class=\"transaction-line-description-divider\">|</span>\n              <span [textContent]=\"line.articleNumber\" class=\"transaction-line-description-sku\"></span>\n            </div>\n            <div *ngIf=!preview class=\"article-text-wrapper\">\n              <div class=\"article-text\" *ngFor=\"let text of line.articleTestAsArray\">\n                <span [innerHTML]=\"text | safeHtml\" (dblclick)=\"handleOpenArticleText(text)\"></span>\n              </div>\n            </div>\n            <div *ngIf=!preview class=\"configuration-text-wrapper\">\n              <span [innerHTML]=\"line.configurationReadable\"></span>\n            </div>\n          </div>\n          <div *ngIf=!preview class=\"transaction-line-stock\">\n            <span [textContent]=\"'STOCK' | localize\" class=\"small-font\"></span>\n            <stock-status-indicator [model]=\"stock\"></stock-status-indicator>\n            <span [textContent]=\"'DELIVERY_TIME_PERIOD' | localize\" class=\"small-font\"></span>\n            <span [textContent]=\"line.deliveryDate | deliveryTime\"></span>\n          </div>\n          <div *ngIf=!preview class=\"transaction-line-amount\">\n            <co-input-number-picker class=\"amount-number-picker\"\n                                    [(model)]=\"localAmount\" [min]=\"0\"\n                                    [readonly]=\"true\"\n                                    (modelChange)=\"changeLineAmount($event)\"></co-input-number-picker>\n          </div>\n          <div class=\"transaction-line-delete\" *ngIf=\"preview\">\n            <div class=\"delete-wrapper\" (click)=\"deleteTransactionLineClick()\">\n              <icon class=\"delete-icon\" [icon]=\"icons.Cancel\"></icon>\n              <div class=\"delete-link\"\n                   [textContent]=\"'DELETE_TRANSACTION_LINE' | localize:false\">\n              </div>\n            </div>\n          </div>\n          <div class=\"transaction-line-totals\">\n            <span [textContent]=\"line.displayNetLineTotal | coCurrency: true\"></span>\n          </div>\n          <div *ngIf=!preview class=\"transaction-line-buttons\">\n            <co-button class=\"transaction-line-overview-button circle\" [iconData]=\"iconCacheService.getIcon(icons.Txt)\" (click)=\"handleTransactionArticleTextOverview($event)\"></co-button>\n            <co-button class=\"transaction-line-add-text-button circle\" [iconData]=\"iconCacheService.getIcon(icons.Txt)\" (click)=\"handleTransactionArticleText($event)\"></co-button>\n            <co-button class=\"transaction-line-show-sidebar-button circle\" [iconData]=\"iconCacheService.getIcon(icons.MasterDetail)\" (click)=\"handleShowSidePanel($event)\"></co-button>\n          </div>\n        </div>\n        <div class=\"transaction-line-delete\" *ngIf=\"!preview\">\n          <div class=\"delete-wrapper\" (click)=\"deleteTransactionLineClick()\">\n            <icon class=\"delete-icon\" [icon]=\"icons.Cancel\"></icon>\n            <div class=\"delete-link\"\n                 [textContent]=\"'DELETE_TRANSACTION_LINE' | localize:false\">\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"line.isText\">\n        <div [textContent]=\"line.text\"></div>\n        <div class=\"transaction-line-delete\" *ngIf=\"!preview\">\n          <div class=\"delete-wrapper\" (click)=\"deleteTransactionLineClick()\">\n            <icon class=\"delete-icon\" [icon]=\"icons.Cancel\"></icon>\n            <div class=\"delete-link\"\n                 [textContent]=\"'DELETE_TRANSACTION_LINE' | localize:false\">\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <co-transaction-article-text-overview *ngIf=\"showTransactionArticleTextOverview\"\n                                          [header]=\"articleTextHeader | localize\"\n                                          [transactionLine]=\"line\"\n                                          (saveClick)=\"saveTransactionArticleLineText($event)\"\n                                          (closeClick)=\"closeTransactionArticleTextOverview($event)\"\n                                          (cancelClick)=\"closeTransactionArticleTextOverview($event)\"\n    ></co-transaction-article-text-overview>\n    <co-transaction-article-text *ngIf=\"showTransactionArticleText\"\n                                 [header]=\"articleTextHeader | localize\"\n                                 [articleLineNr]=\"line.lineNr\"\n                                 [articleRef]=\"line.articleNumber\"\n                                 [transactionLine]=\"line\"\n                                 [editText]=\"textToEdit\"\n                                 (saveClick)=\"saveTransactionArticleLineText($event)\"\n                                 (closeClick)=\"closeTransactionArticleText($event)\"\n                                 (cancelClick)=\"closeTransactionArticleText($event)\"\n    ></co-transaction-article-text>\n    <co-transaction-line-side-panel *ngIf=\"showSidePanel\" @showHideSidePanel\n                                    [transactionLine]=\"line\"\n                                    (cancelClick)=\"handleCloseSidePanel($event)\"\n    ></co-transaction-line-side-panel>\n  ",
+                    animations: [
+                        animations.trigger("showHideSidePanel", [
+                            animations.state("void", animations.style({ transform: 'translateX(100%)' })),
+                            animations.state("*", animations.style({ transform: 'translateX(0)' })),
+                            animations.transition("void <=> *", animations.animate("200ms ease-in-out"))
+                        ])
+                    ],
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -5790,6 +5791,7 @@
     TransactionLineComponent.propDecorators = {
         preview: [{ type: i0.HostBinding, args: ["class.preview",] }, { type: i0.Input }],
         line: [{ type: i0.Input }],
+        waitingForUserAction: [{ type: i0.Output }],
         isText: [{ type: i0.HostBinding, args: ["class.is-text",] }],
         isArticle: [{ type: i0.HostBinding, args: ["class.is-article",] }],
         isSelected: [{ type: i0.HostBinding, args: ["class.is-selected",] }],
@@ -5920,6 +5922,82 @@
                 },] }
     ];
 
+    var TransactionLineSidePanelComponent = /** @class */ (function () {
+        function TransactionLineSidePanelComponent(iconService, _transactionService) {
+            this.iconService = iconService;
+            this._transactionService = _transactionService;
+            this.icons = Icon;
+            this.cancelClick = new i0.EventEmitter();
+            this.data = [];
+        }
+        Object.defineProperty(TransactionLineSidePanelComponent.prototype, "child", {
+            set: function (content) {
+                this.inputPrice = content;
+                this.inputPrice.commit = this.commitPrice;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TransactionLineSidePanelComponent.prototype.showClass = function () {
+            return true;
+        };
+        TransactionLineSidePanelComponent.prototype.handleCancelClick = function (event) {
+            this.cancelClick.next(event);
+        };
+        TransactionLineSidePanelComponent.prototype.commitPrice = function (price) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, true];
+                });
+            });
+        };
+        return TransactionLineSidePanelComponent;
+    }());
+    TransactionLineSidePanelComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-transaction-line-side-panel",
+                    template: "\n    <div class=\"transaction-side-panel-header\">\n      <co-button (click)=\"handleCancelClick($event)\" [iconData]=\"iconService.getIcon(icons.Cancel)\" class=\"white circle small\"></co-button>\n      <span class=\"side-panel-header-description\" [textContent]=\"transactionLine.goodDescription\"></span>\n      <span class=\"side-panel-header-divider\" [textContent]=\"'|'\"></span>\n      <span class=\"side-panel-header-sku\" [textContent]=\"transactionLine.articleNumber\"></span>\n    </div>\n    <div class=\"transaction-line-side-panel-content\">\n      <co-collapsible\n        [iconData]=\"iconService.getIcon(icons.TriangleUp)\"\n        [headerTitle]=\"'PRICING' | localize\"\n        [expandButtonLast]=\"true\"\n        [expanded]=\"true\"\n      >\n        <div class=\"collapsible-content-wrapper\">\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'NET_LINE_TOTAL' | localize\" [model]=\"transactionLine.netLineTotal\" [readonly]=\"true\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-number-picker class=\"side-panel-input\" [label]=\"'AMOUNT' | localize\" [(model)]=\"transactionLine.amount\"></co-input-number-picker>\n            <co-input-text #inputPrice class=\"side-panel-input\"\n                           [placeholder]=\"'PRICE' | localize\"\n                           [type]=\"'number'\"\n                           [showSaveCancel]=\"true\"\n                           [(model)]=\"transactionLine.price\"\n            ></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-combo-box class=\"side-panel-input\" [collection]=\"data\" [(model)]=\"transactionLine.vatId\" [placeholder]=\"'VAT' | localize\"></co-input-combo-box>\n            <co-input-combo-box class=\"side-panel-input\" [collection]=\"data\" [(model)]=\"transactionLine.priceListCode\" [placeholder]=\"'PRICE_LIST' | localize\"></co-input-combo-box>\n          </div>\n        </div>\n      </co-collapsible>\n      <co-collapsible\n        [iconData]=\"iconService.getIcon(icons.TriangleUp)\"\n        [headerTitle]=\"'DISCOUNTS' | localize\"\n        [expandButtonLast]=\"true\"\n        [expanded]=\"true\"\n      >\n        <div class=\"collapsible-content-wrapper\">\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'TOTAL_LINE_DISCOUNT' | localize\" [model]=\"transactionLine.lineTotalDiscountAmount\" [readonly]=\"true\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'DISCOUNT_PERCENTAGE' | localize\" [type]=\"'number'\" [model]=\"transactionLine.discountAmount\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'DISCOUNT_AMOUNT' | localize\" [type]=\"'number'\" [(model)]=\"transactionLine.lineDiscount\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'QUANTUM_DISCOUNT' | localize\" [type]=\"'number'\" [model]=\"transactionLine.quantumDiscount\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'SPECIAL_DISCOUNT' | localize\" [type]=\"'number'\" [(model)]=\"transactionLine.specialDiscount\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'SURCHARGE_AMOUNT' | localize\" [model]=\"transactionLine.surchargeAmount\" [readonly]=\"true\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'BUSINESS_RULE_DISCOUNT' | localize\" [model]=\"'NIET_GEIMPLEMENTEERD'\" [readonly]=\"true\"></co-input-text>\n          </div>\n        </div>\n      </co-collapsible>\n      <co-collapsible\n        [iconData]=\"iconService.getIcon(icons.TriangleUp)\"\n        [headerTitle]=\"'LOGISTICS_AND_PLANNING' | localize\"\n        [expandButtonLast]=\"true\"\n        [expanded]=\"true\"\n      >\n        <div class=\"collapsible-content-wrapper\">\n          <div class=\"side-panel-input-row\">\n            <co-input-combo-box class=\"side-panel-input\" [collection]=\"data\" [(model)]=\"transactionLine.commissionCode\" [placeholder]=\"'COMMISSION_CODE' | localize\"></co-input-combo-box>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'WAREHOUSE' | localize\" [model]=\"transactionLine.warehouseNumber\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-combo-box class=\"side-panel-input\" [collection]=\"data\" [placeholder]=\"'DELIVERY_METHOD' | localize\"></co-input-combo-box>\n            <co-input-date class=\"side-panel-input\" [placeholder]=\"'DELIVERY_DATE' | localize\" [model]=\"transactionLine.deliveryDate\"></co-input-date>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'ASSEMBLY_TIME' | localize\" [readonly]=\"true\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'ASSEMBLY_COSTS' | localize\" [type]=\"'number'\" [model]=\"transactionLine.assemblyCost\" [readonly]=\"true\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'MODIFICATION_TIME' | localize\" [readonly]=\"true\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-combo-box class=\"side-panel-input\" [collection]=\"data\" [placeholder]=\"'SUPPLIER' | localize\"></co-input-combo-box>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'ARTICLE_NR_SUPPLIER' | localize\" [model]=\"transactionLine.articleNumber\" [readonly]=\"true\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'IN_OUT_COLLECTION' | localize\" [readonly]=\"true\"></co-input-text>\n          </div>\n        </div>\n      </co-collapsible>\n\n      <co-collapsible\n        [iconData]=\"iconService.getIcon(icons.TriangleUp)\"\n        [headerTitle]=\"'OTHER' | localize\"\n        [expandButtonLast]=\"true\"\n        [expanded]=\"true\"\n      >\n        <div class=\"collapsible-content-wrapper\">\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'REFERENCE' | localize\" [model]=\"transactionLine.refLineNr\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'ORDER_RULESET' | localize\"></co-input-text>\n          </div>\n          <div class=\"side-panel-input-row\">\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'LAST_EDITED_DATE' | localize\" [readonly]=\"true\"></co-input-text>\n            <co-input-text class=\"side-panel-input\" [placeholder]=\"'LAST_EDITED_USER' | localize\" [readonly]=\"true\"></co-input-text>\n          </div>\n          <co-input-text [placeholder]=\"'FABRICATION_COST' | localize\" [readonly]=\"true\"></co-input-text>\n          <co-input-text [placeholder]=\"'TRANSPORT_COST' | localize\" [readonly]=\"true\"></co-input-text>\n          <co-input-text [placeholder]=\"'FABRICATION_COST_LINE_TOTAL' | localize\" [readonly]=\"true\"></co-input-text>\n          <co-input-text [placeholder]=\"'TRANSPORT_COST_LINE_TOTAL' | localize\" [readonly]=\"true\"></co-input-text>\n          <co-input-text [placeholder]=\"'CUSTOMER' | localize\" [readonly]=\"true\"></co-input-text>\n        </div>\n        </co-collapsible>\n    </div>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    TransactionLineSidePanelComponent.ctorParameters = function () { return [
+        { type: IconCacheService },
+        { type: TransactionService }
+    ]; };
+    TransactionLineSidePanelComponent.propDecorators = {
+        child: [{ type: i0.ViewChild, args: ['inputPrice', { read: corecomponents_v12.InputTextComponent },] }],
+        transactionLine: [{ type: i0.Input }],
+        cancelClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-line-side-panel",] }]
+    };
+
+    var TransactionLineSidePanelModule = /** @class */ (function () {
+        function TransactionLineSidePanelModule() {
+        }
+        return TransactionLineSidePanelModule;
+    }());
+    TransactionLineSidePanelModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        CoreModule,
+                        PipeModule,
+                        corecomponents_v12.ButtonModule,
+                        corecomponents_v12.CollapsibleModule,
+                        corecomponents_v12.InputTextModule,
+                        corecomponents_v12.InputComboBoxModule,
+                        corecomponents_v12.InputDatePickerModule,
+                        corecomponents_v12.InputNumberPickerModule
+                    ],
+                    declarations: [
+                        TransactionLineSidePanelComponent
+                    ],
+                    exports: [
+                        TransactionLineSidePanelComponent
+                    ]
+                },] }
+    ];
+
     var TransactionLineModule = /** @class */ (function () {
         function TransactionLineModule() {
         }
@@ -5934,7 +6012,8 @@
                         corecomponents_v12.InputNumberPickerModule,
                         TransactionArticleTextModule,
                         TransactionArticleTextOverviewModule,
-                        PipeModule
+                        PipeModule,
+                        TransactionLineSidePanelModule
                     ],
                     declarations: [
                         TransactionLineComponent
@@ -5954,6 +6033,7 @@
             this.preview = false;
             this.saveTransactionLine = new i0.EventEmitter();
             this.showTransactionArticleText = false;
+            this.userActionRequired = false;
         }
         TransactionLinesComponent.prototype.showClass = function () {
             return true;
@@ -6018,7 +6098,7 @@
     TransactionLinesComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-lines",
-                    template: "\n    <div cdkDropListGroup class=\"drop-list-group\">\n      <div #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n           class=\"transaction-lines-drag-drop-list narrow-scrollbar\"\n           [cdkDropListDisabled]=\"preview\"\n           [cdkDropListData]=\"transactionLines\"\n           [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n           (cdkDropListDropped)=\"handleDrop($event)\"\n      >\n        <div class=\"draggable-transaction-line\" *ngFor=\"let line of transactionLines; trackBy:trackByFn;\" cdkDrag>\n          <co-transaction-line [preview]=\"preview\" [line]=\"line\" (dblclick)=\"handleTransactionLineDblClick(line)\"></co-transaction-line>\n        </div>\n      </div>\n    </div>\n    <co-button *ngIf=!preview class=\"add-text-button circle\" [iconData]=\"iconCacheService.getIcon(icons.Txt)\" (click)=\"handleTransactionArticleText($event)\"></co-button>\n    <co-transaction-article-text *ngIf=\"showTransactionArticleText\"\n                                 [header]=\"'TEXT' | localize\"\n                                 [transactionLine]=\"selectedArticleText\"\n                                 [editText]=\"textToEdit\"\n                                 (saveClick)=\"saveTransactionArticleLineText($event)\"\n                                 (closeClick)=\"closeTransactionArticleText($event)\"\n                                 (cancelClick)=\"closeTransactionArticleText($event)\"\n    ></co-transaction-article-text>\n  ",
+                    template: "\n    <div cdkDropListGroup class=\"drop-list-group\">\n      <div #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n           class=\"transaction-lines-drag-drop-list narrow-scrollbar\"\n           [cdkDropListDisabled]=\"preview || userActionRequired\"\n           [cdkDropListData]=\"transactionLines\"\n           [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n           (cdkDropListDropped)=\"handleDrop($event)\"\n      >\n        <div class=\"draggable-transaction-line\" *ngFor=\"let line of transactionLines; trackBy:trackByFn;\" cdkDrag>\n          <co-transaction-line\n            [preview]=\"preview\"\n            [line]=\"line\"\n            (dblclick)=\"handleTransactionLineDblClick(line)\"\n            (waitingForUserAction)=\"userActionRequired = $event\"></co-transaction-line>\n        </div>\n      </div>\n    </div>\n    <co-button *ngIf=!preview class=\"add-text-button circle\" [iconData]=\"iconCacheService.getIcon(icons.Txt)\" (click)=\"handleTransactionArticleText($event)\"></co-button>\n    <co-transaction-article-text *ngIf=\"showTransactionArticleText\"\n                                 [header]=\"'TEXT' | localize\"\n                                 [transactionLine]=\"selectedArticleText\"\n                                 [editText]=\"textToEdit\"\n                                 (saveClick)=\"saveTransactionArticleLineText($event)\"\n                                 (closeClick)=\"closeTransactionArticleText($event)\"\n                                 (cancelClick)=\"closeTransactionArticleText($event)\"\n    ></co-transaction-article-text>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -6037,72 +6117,514 @@
     var TransactionLinesModule = /** @class */ (function () {
         function TransactionLinesModule() {
         }
-        return TransactionLinesModule;
+        return TransactionLinesModule;
+    }());
+    TransactionLinesModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        CoreModule,
+                        TransactionLineModule,
+                        dragDrop.DragDropModule,
+                        corecomponents_v12.ButtonModule,
+                        TransactionArticleTextModule,
+                        PipeModule
+                    ],
+                    declarations: [
+                        TransactionLinesComponent
+                    ],
+                    exports: [
+                        TransactionLinesComponent
+                    ]
+                },] }
+    ];
+
+    var ShoppingCartPreviewComponent = /** @class */ (function () {
+        function ShoppingCartPreviewComponent(service) {
+            this.service = service;
+            this.icons = Icon;
+            this.showCheckoutButton = true;
+            this.withoutBorder = false;
+            this.checkout = new i0.EventEmitter();
+            this.editCartClick = new i0.EventEmitter();
+        }
+        ShoppingCartPreviewComponent.prototype.showClass = function () {
+            return true;
+        };
+        return ShoppingCartPreviewComponent;
+    }());
+    ShoppingCartPreviewComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-shopping-cart-preview",
+                    template: "\n    <div class=\"cart-header\">\n      <span class=\"cart-header-label\" [textContent]=\"'CART' | localize\"></span>\n    </div>\n    <div class=\"cart-lines\">\n      <co-transaction-lines\n        [transactionLines]=\"service.currentTransaction.transactionLines\"\n        [preview]=\"true\"\n      ></co-transaction-lines>\n    </div>\n    <div class=\"preview-totals-wrapper\">\n      <co-transaction-totals [totals]=\"service.currentTransaction.transactionTotal\"></co-transaction-totals>\n    </div>\n    <div class=\"cart-buttons\">\n      <a class=\"button-edit-cart\" [textContent]=\"'EDIT_CART' | localize\"\n         (click)=\"editCartClick.emit()\"\n      ></a>\n      <co-button *ngIf=\"showCheckoutButton\" class=\"button-checkout\" [label]=\"'SHOPPING_CART_CHECKOUT' | localize\"\n                 [disabled]=\"!service.articleAmount\"\n                 (click)=\"checkout.emit()\"></co-button>\n    </div>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    ShoppingCartPreviewComponent.ctorParameters = function () { return [
+        { type: TransactionService }
+    ]; };
+    ShoppingCartPreviewComponent.propDecorators = {
+        showCheckoutButton: [{ type: i0.Input }],
+        withoutBorder: [{ type: i0.HostBinding, args: ["class.borderless",] }, { type: i0.Input }],
+        checkout: [{ type: i0.Output }],
+        editCartClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-shopping-cart-preview",] }]
+    };
+
+    var ShoppingCartPreviewModule = /** @class */ (function () {
+        function ShoppingCartPreviewModule() {
+        }
+        return ShoppingCartPreviewModule;
+    }());
+    ShoppingCartPreviewModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        CoreModule,
+                        corecomponents_v12.ButtonModule,
+                        TransactionLinesModule,
+                        TransactionTotalsModule,
+                        PipeModule
+                    ],
+                    declarations: [
+                        ShoppingCartPreviewComponent
+                    ],
+                    exports: [
+                        ShoppingCartPreviewComponent
+                    ]
+                },] }
+    ];
+
+    var SellerInformationComponent = /** @class */ (function () {
+        function SellerInformationComponent(_service) {
+            this._service = _service;
+        }
+        Object.defineProperty(SellerInformationComponent.prototype, "relationId", {
+            get: function () {
+                return this._relationId;
+            },
+            set: function (value) {
+                this._relationId = value;
+                this._getRelation();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SellerInformationComponent.prototype.showClass = function () {
+            return true;
+        };
+        SellerInformationComponent.prototype._getRelation = function () {
+            var _this = this;
+            if (!isNaN(this._relationId)) {
+                var request = new relationRequest.RelationRequest();
+                request.relationId = this._relationId;
+                this._service.getRelationListObjects(request).then(function (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(function (content) {
+                                _this.image = content;
+                            })
+                                .catch(function (e) {
+                                _this.image = "";
+                            });
+                        }
+                    }
+                });
+            }
+        };
+        return SellerInformationComponent;
+    }());
+    SellerInformationComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-seller-information",
+                    template: "\n    <co-image-display [model]=\"image\" *ngIf=\"image; else showInitials\"></co-image-display>\n    <ng-template #showInitials>\n      <svg viewBox=\"0 0 30 30\">\n        <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\">{{ relation?.displayInitials }}</text>\n      </svg>\n    </ng-template>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    SellerInformationComponent.ctorParameters = function () { return [
+        { type: TransactionService }
+    ]; };
+    SellerInformationComponent.propDecorators = {
+        relationId: [{ type: i0.Input }],
+        relation: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-seller-information",] }]
+    };
+
+    var SellerInformationModule = /** @class */ (function () {
+        function SellerInformationModule() {
+        }
+        return SellerInformationModule;
+    }());
+    SellerInformationModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        CoreModule
+                    ],
+                    declarations: [
+                        SellerInformationComponent
+                    ],
+                    exports: [
+                        SellerInformationComponent
+                    ]
+                },] }
+    ];
+
+    var DeliveryType = /** @class */ (function () {
+        function DeliveryType() {
+        }
+        return DeliveryType;
+    }());
+
+    var DeliveryTypeTileComponent = /** @class */ (function () {
+        function DeliveryTypeTileComponent() {
+            this.type = new DeliveryType();
+            this.selected = false;
+            this.selectedChange = new i0.EventEmitter();
+            this.deliveryTypeIdx = 0;
+        }
+        DeliveryTypeTileComponent.prototype.showClass = function () {
+            return true;
+        };
+        DeliveryTypeTileComponent.prototype.setIndexDeliveryType = function (index) {
+            console.log(index);
+        };
+        return DeliveryTypeTileComponent;
+    }());
+    DeliveryTypeTileComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-delivery-type-tile",
+                    template: "\n    <co-tile [selected]=\"selected\" (selectedChange)=\"selectedChange.emit($event)\">\n      <div class=\"delivery-type-content-wrapper\">\n        <div class=\"delivery-type-title\" [textContent]=\"type.description\"></div>\n        <div class=\"delivery-type-icon\">\n          <icon [icon]=\"type.icon\"></icon>\n        </div>\n        <div *ngIf=\"type.price\" class=\"delivery-type-price\" [textContent]=\"type.price | priceDisplay\"></div>\n      </div>\n    </co-tile>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    DeliveryTypeTileComponent.propDecorators = {
+        type: [{ type: i0.Input }],
+        selected: [{ type: i0.Input }],
+        selectedChange: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-delivery-type-tile",] }]
+    };
+
+    var DeliveryTypeTileModule = /** @class */ (function () {
+        function DeliveryTypeTileModule() {
+        }
+        return DeliveryTypeTileModule;
+    }());
+    DeliveryTypeTileModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        CoreModule,
+                        corecomponents_v12.InputRadioButtonModule,
+                        corecomponents_v12.PriceDisplayPipeModule,
+                        TileModule
+                    ],
+                    declarations: [
+                        DeliveryTypeTileComponent
+                    ],
+                    exports: [
+                        DeliveryTypeTileComponent
+                    ]
+                },] }
+    ];
+
+    var PaymentComponent = /** @class */ (function () {
+        function PaymentComponent(_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 = [];
+        }
+        PaymentComponent.prototype.showClass = function () {
+            return true;
+        };
+        PaymentComponent.prototype.ngOnInit = function () {
+            this._getCashRegisters();
+        };
+        PaymentComponent.prototype._getCashRegisters = function () {
+            var _this = this;
+            this._transactionService.getCashRegisters().then(function (cashRegisters) {
+                _this.cashRegisters = cashRegisters;
+            });
+        };
+        return PaymentComponent;
+    }());
+    PaymentComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-payment",
+                    template: "\n    <div class=\"payment-wrapper\">\n      <div class=\"payment-methods-header\">\n        <span class=\"payment-header-title\" [textContent]=\"'Selecteer een' | localize\"></span>\n        <span class=\"payment-header-title extra\" [textContent]=\"'gratis' | localize:false\"></span>\n        <span class=\"payment-header-title\" [textContent]=\"'betaalmethode' | localize:false\"></span>\n      </div>\n      <div class=\"payment-methods\">\n        <co-payment-tile *ngFor=\"let paymentMethod of paymentMethods; let index = index\"\n                         [icon]=\"paymentMethod.icon\"\n                         [description]=\"paymentMethod.description\"\n                         [selected]=\"paymentMethodIdx === index\"\n                         (selectedChange)=\"paymentMethodIdx = index\"\n        ></co-payment-tile>\n      </div>\n      <div class=\"payment-cash-register-header\">\n        <span class=\"payment-header-title\" [textContent]=\"'Selecteer kassa' | localize\"></span>\n      </div>\n      <div class=\"payment-methods\">\n        <co-payment-tile *ngFor=\"let cashRegister of cashRegisters\"\n                         [icon]=\"cashRegister.icon\"\n                         [description]=\"cashRegister.description\"\n        ></co-payment-tile>\n      </div>\n      <div class=\"payment-to-pay\">\n        <div [textContent]=\"'Te betalen' | localize\"></div>\n        <div class=\"payment-amount\" [textContent]=\"amount | priceDisplay\"></div>\n      </div>\n    </div>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    PaymentComponent.ctorParameters = function () { return [
+        { type: TransactionService }
+    ]; };
+    PaymentComponent.propDecorators = {
+        amount: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-payment",] }]
+    };
+
+    var PaymentTileComponent = /** @class */ (function () {
+        function PaymentTileComponent() {
+            this.selected = false;
+            this.selectedChange = new i0.EventEmitter();
+        }
+        PaymentTileComponent.prototype.showClass = function () {
+            return true;
+        };
+        return PaymentTileComponent;
+    }());
+    PaymentTileComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-payment-tile",
+                    template: "\n    <co-tile [selected]=\"selected\" (selectedChange)=\"selectedChange.emit($event)\">\n      <div class=\"payment-tile-wrapper\">\n        <icon class=\"payment-tile-icon\" [icon]=\"icon\"></icon>\n        <span class=\"payment-tile-description\" [textContent]=\"description | localize\"></span>\n      </div>\n    </co-tile>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    PaymentTileComponent.propDecorators = {
+        selected: [{ type: i0.Input }],
+        icon: [{ type: i0.Input }],
+        description: [{ type: i0.Input }],
+        selectedChange: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-payment-tile",] }]
+    };
+
+    var PaymentTileModule = /** @class */ (function () {
+        function PaymentTileModule() {
+        }
+        return PaymentTileModule;
+    }());
+    PaymentTileModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        TileModule,
+                        CoreModule,
+                        PipeModule
+                    ],
+                    declarations: [
+                        PaymentTileComponent
+                    ],
+                    exports: [
+                        PaymentTileComponent
+                    ]
+                },] }
+    ];
+
+    var PaymentModule = /** @class */ (function () {
+        function PaymentModule() {
+        }
+        return PaymentModule;
     }());
-    TransactionLinesModule.decorators = [
+    PaymentModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         CoreModule,
-                        TransactionLineModule,
-                        dragDrop.DragDropModule,
-                        corecomponents_v12.ButtonModule,
-                        TransactionArticleTextModule,
-                        PipeModule
+                        PipeModule,
+                        PaymentTileModule,
+                        corecomponents_v12.PriceDisplayPipeModule
                     ],
                     declarations: [
-                        TransactionLinesComponent
+                        PaymentComponent
                     ],
                     exports: [
-                        TransactionLinesComponent
+                        PaymentComponent
                     ]
                 },] }
     ];
 
-    var TransactionTotalsComponent = /** @class */ (function () {
-        function TransactionTotalsComponent() {
-            this.showDiscount = false;
-            this.discountClick = new i0.EventEmitter();
+    var CheckoutModule = /** @class */ (function () {
+        function CheckoutModule() {
         }
-        TransactionTotalsComponent.prototype.showClass = function () {
+        return CheckoutModule;
+    }());
+    CheckoutModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        CoreModule,
+                        common.CommonModule,
+                        corecomponents_v12.IconModule,
+                        corecomponents_v12.InputTextModule,
+                        corecomponents_v12.InputCheckboxModule,
+                        corecomponents_v12.InputRadioButtonModule,
+                        corecomponents_v12.FormModule,
+                        corecomponents_v12.InputComboBoxModule,
+                        corecomponents_v12.InputDatePickerModule,
+                        corecomponents_v12.InputNumberPickerModule,
+                        corecomponents_v12.CoDialogModule,
+                        corecomponents_v12.CoDialogPromptModule,
+                        corecomponents_v12.ButtonModule,
+                        flexLayout.FlexModule,
+                        corecomponents_v12.MultiSelectListModule,
+                        corecomponents_v12.DropDownModule,
+                        corecomponents_v12.PopupModule.forRoot(),
+                        corecomponents_v12.CoSidebarModule,
+                        corecomponents_v12.CoGridModule,
+                        forms.ReactiveFormsModule,
+                        forms.FormsModule,
+                        RelationAddressModule,
+                        RelationAddressSelectModule,
+                        RelationAddressTileModule,
+                        corecomponents_v12.CoRichTextEditorModule,
+                        corecomponents_v12.Carousel3dModule,
+                        corecomponents_v12.InputTextareaModule,
+                        corecomponents_v12.InputListboxModule,
+                        PipeModule,
+                        StepperModule,
+                        ShoppingCartPreviewModule,
+                        SellerInformationModule,
+                        DeliveryTypeTileModule,
+                        corecomponents_v12.CollapsibleModule,
+                        PaymentModule,
+                    ],
+                    declarations: [
+                        CheckoutOverviewRelationEditComponent,
+                        CheckoutOverviewDeliveryEditComponent,
+                        CheckoutOverviewDeliveryAddressComponent,
+                        CheckOutRelationSuggestionsListComponent,
+                        CheckOutRelationSuggestionsListItemComponent,
+                        CheckoutLoginComponent,
+                        CheckoutComponent,
+                    ],
+                    providers: [
+                        DictionaryService,
+                        OptionsService
+                    ],
+                    entryComponents: [
+                        CheckoutComponent
+                    ],
+                    exports: [CheckoutComponent],
+                    bootstrap: [CheckoutComponent]
+                },] }
+    ];
+
+    var ShoppingCartComponent = /** @class */ (function () {
+        function ShoppingCartComponent(service, _dictionary) {
+            var _this = this;
+            this.service = service;
+            this._dictionary = _dictionary;
+            this.closeCart = new i0.EventEmitter();
+            this.checkout = new i0.EventEmitter();
+            this.transaction = new transactionInfoResponse_bo.TransactionInfoResponse();
+            this._subs = [];
+            this._subs.push(this.service.transactionUpdated.subscribe(function (transaction) {
+                if (transaction) {
+                    _this.transaction = transaction;
+                }
+            }));
+        }
+        ShoppingCartComponent.prototype.showClass = function () {
             return true;
         };
-        return TransactionTotalsComponent;
+        ShoppingCartComponent.prototype.ngOnDestroy = function () {
+            this._subs.forEach(function (s) { return s.unsubscribe(); });
+        };
+        return ShoppingCartComponent;
     }());
-    TransactionTotalsComponent.decorators = [
+    ShoppingCartComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-transaction-totals",
-                    template: "\n    <div class=\"transaction-totals-wrapper\">\n      <span class=\"totals-gross label\" [textContent]=\"'ORDER_GROSS' | localize\"></span>\n      <span class=\"totals-gross value\" [textContent]=\"totals?.grossAmount | coCurrency: true\"></span>\n      <ng-container *ngIf=\"totals?.discountAmount\">\n        <span class=\"totals-discount-amount label\" [textContent]=\"'DISCOUNT_AMOUNT' | localize\"></span>\n        <span class=\"totals-discount-amount value\" [textContent]=\"totals?.discountAmount | coCurrency: true\"></span>\n      </ng-container>\n      <ng-container *ngIf=\"totals?.transactionDiscountAmount\">\n        <span class=\"totals-discount label\" [textContent]=\"'TRANSACTION_DISCOUNT' | localize\"></span>\n        <span class=\"totals-discount value\" [textContent]=\"totals?.transactionDiscountAmount | coCurrency: true\"></span>\n      </ng-container>\n      <ng-container *ngIf=\"totals?.transactionDiscountPercentage\">\n        <span class=\"totals-discount-percentage label\" [textContent]=\"'TRANSACTION_DISCOUNT_PERC' | localize\"></span>\n        <span class=\"totals-discount-percentage value\" [textContent]=\"totals?.transactionDiscountPercentage.toString() | append:' %'\"></span>\n      </ng-container>\n      <span class=\"totals-net label\" [textContent]=\"'ORDER_NET'| localize\"></span>\n      <span class=\"totals-net value\" [textContent]=\"totals?.netAmount | coCurrency: true\"></span>\n      <a *ngIf=\"showDiscount\" class=\"add-discount label\" (click)=\"discountClick.emit($event)\" [textContent]=\"'ADD_DISCOUNTS' | localize\"></a>\n    </div>\n  ",
+                    selector: "co-shopping-cart",
+                    template: "\n    <div class=\"cart-header\">\n      <span class=\"cart-header-label\" [textContent]=\"'SHOPPING_CART_OVERVIEW' | localize | append:'(' + service.articleAmount + ')'\"></span>\n    </div>\n    <div class=\"shopping-cart-transaction-wrapper\">\n      <co-transaction [showHeader]=\"false\" [transaction]=\"transaction\"></co-transaction>\n    </div>\n    <div class=\"cart-buttons\">\n      <a class=\"button-resume\" [textContent]=\"'SHOPPING_CART_RESUME' | localize\"\n                 (click)=\"closeCart.emit()\"\n      ></a>\n      <co-button class=\"button-checkout\" [label]=\"'SHOPPING_CART_CHECKOUT' | localize\"\n                 [disabled]=\"service.articleAmount === 0\"\n                 (click)=\"checkout.emit()\"></co-button>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
-    TransactionTotalsComponent.propDecorators = {
-        totals: [{ type: i0.Input }],
-        showDiscount: [{ type: i0.Input }],
-        discountClick: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-totals",] }]
+    ShoppingCartComponent.ctorParameters = function () { return [
+        { type: TransactionService },
+        { type: DictionaryService }
+    ]; };
+    ShoppingCartComponent.propDecorators = {
+        closeCart: [{ type: i0.Output }],
+        checkout: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-shopping-cart",] }]
     };
 
-    var TransactionTotalsModule = /** @class */ (function () {
-        function TransactionTotalsModule() {
+    // 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 = {}));
+
+    var TransactionComponent = /** @class */ (function () {
+        function TransactionComponent(iconCacheService, _service) {
+            var _this = this;
+            this.iconCacheService = iconCacheService;
+            this._service = _service;
+            this.viewModes = ContentViewMode;
+            this.icons = Icon;
+            this.transaction = new transactionInfoResponse_bo.TransactionInfoResponse();
+            this.showHeader = true;
+            this.activeViewMode = ContentViewMode.List;
+            this.showDiscountsSidebar = false;
+            this._subs = [];
+            this._subs.push(this._service.transactionUpdated.subscribe(function (transaction) { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this.transaction = transaction;
+                    return [2 /*return*/];
+                });
+            }); }));
         }
-        return TransactionTotalsModule;
+        Object.defineProperty(TransactionComponent.prototype, "transactionId", {
+            set: function (value) {
+                if (value) {
+                    this._service.getTransactionById(value);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TransactionComponent.prototype.showClass = function () {
+            return true;
+        };
+        TransactionComponent.prototype.ngOnDestroy = function () {
+            this._subs.forEach(function (s) { return s.unsubscribe(); });
+        };
+        TransactionComponent.prototype.addDiscount = function () {
+            this.showDiscountsSidebar = true;
+            // TODO
+            // this.transactionDiscountPercentage = this.service.currentTransaction.transactionDiscountPercentage;
+            // this.transactionDiscountAmount = this.service.currentTransaction.transactionDiscountAmount;
+            // this.transactionTotal = undefined;
+        };
+        TransactionComponent.prototype.saveTransactionLine = function (transactionAddTextLineRequest) {
+            if (transactionAddTextLineRequest.transactionUuid) { //update
+            }
+            else { // new transactionLine (transactionArticleText)
+                this._service.addTextLine(transactionAddTextLineRequest.showOnDocuments, transactionAddTextLineRequest.text, 0, transactionAddTextLineRequest.articleBound, 0, 0, 0);
+            }
+        };
+        return TransactionComponent;
     }());
-    TransactionTotalsModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        CoreModule,
-                        PipeModule
-                    ],
-                    declarations: [
-                        TransactionTotalsComponent
-                    ],
-                    exports: [
-                        TransactionTotalsComponent
-                    ]
+    TransactionComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-transaction",
+                    template: "\n    <co-transaction-header *ngIf=\"showHeader\" [transaction]=\"transaction\"></co-transaction-header>\n    <div class=\"transaction-view-mode-buttons\">\n      <co-button class=\"view-button white\"\n                 [class.selected]=\"this.activeViewMode === viewModes.List\"\n                 [iconData]=\"iconCacheService.getIcon(icons.ThickLines)\"\n                 [title]=\"'LIST_VIEW' | localize\"\n                 (click)=\"this.activeViewMode = viewModes.List\"></co-button>\n      <co-button class=\"view-button white\"\n                 [class.selected]=\"this.activeViewMode === viewModes.Grid\"\n                 [iconData]=\"iconCacheService.getIcon(icons.ThinLines)\"\n                 [title]=\"'GRID_VIEW' | localize\"\n                 (click)=\"this.activeViewMode = viewModes.Grid\"></co-button>\n    </div>\n    <div class=\"transaction-lines-wrapper\" *ngIf=\"activeViewMode === viewModes.List\">\n      <co-transaction-lines\n        [transactionLines]=\"transaction.transactionLines\"\n        (saveTransactionLine)=\"saveTransactionLine($event)\"\n      ></co-transaction-lines>\n    </div>\n    <div class=\"transaction-lines-grid-wrapper\" *ngIf=\"activeViewMode === viewModes.Grid\">\n      <co-transaction-lines-grid\n        [transactionLines]=\"transaction.transactionLines\"\n      ></co-transaction-lines-grid>\n    </div>\n    <div class=\"transaction-footer-wrapper\">\n      <co-transaction-totals [totals]=\"transaction.transactionTotal\" [showDiscount]=\"true\" (discountClick)=\"addDiscount()\"></co-transaction-totals>\n    </div>\n    <co-discount *ngIf=\"showDiscountsSidebar\">\n    </co-discount>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
-    ];
+    ];
+    TransactionComponent.ctorParameters = function () { return [
+        { type: IconCacheService },
+        { type: TransactionService }
+    ]; };
+    TransactionComponent.propDecorators = {
+        transaction: [{ type: i0.Input }],
+        transactionId: [{ type: i0.Input }],
+        showHeader: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction",] }]
+    };
 
     var TransactionHeaderComponent = /** @class */ (function () {
         function TransactionHeaderComponent() {
@@ -6640,58 +7162,6 @@
                 },] }
     ];
 
-    var ShoppingCartPreviewComponent = /** @class */ (function () {
-        function ShoppingCartPreviewComponent(service) {
-            this.service = service;
-            this.icons = Icon;
-            this.checkout = new i0.EventEmitter();
-            this.editCartClick = new i0.EventEmitter();
-        }
-        ShoppingCartPreviewComponent.prototype.showClass = function () {
-            return true;
-        };
-        return ShoppingCartPreviewComponent;
-    }());
-    ShoppingCartPreviewComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: "co-shopping-cart-preview",
-                    template: "\n    <div class=\"cart-header\">\n      <span class=\"cart-header-label\" [textContent]=\"'CART' | localize\"></span>\n    </div>\n    <div class=\"cart-lines\">\n      <co-transaction-lines\n        [transactionLines]=\"service.currentTransaction.transactionLines\"\n        [preview]=\"true\"\n      ></co-transaction-lines>\n    </div>\n    <div class=\"preview-totals-wrapper\">\n      <co-transaction-totals [totals]=\"service.currentTransaction.transactionTotal\"></co-transaction-totals>\n    </div>\n    <div class=\"cart-buttons\">\n      <a class=\"button-edit-cart\" [textContent]=\"'EDIT_CART' | localize\"\n         (click)=\"editCartClick.emit()\"\n      ></a>\n      <co-button class=\"button-checkout\" [label]=\"'SHOPPING_CART_CHECKOUT' | localize\"\n                 [disabled]=\"!service.articleAmount\"\n                 (click)=\"checkout.emit()\"></co-button>\n    </div>\n  ",
-                    encapsulation: i0.ViewEncapsulation.None
-                },] }
-    ];
-    ShoppingCartPreviewComponent.ctorParameters = function () { return [
-        { type: TransactionService }
-    ]; };
-    ShoppingCartPreviewComponent.propDecorators = {
-        checkout: [{ type: i0.Output }],
-        editCartClick: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-shopping-cart-preview",] }]
-    };
-
-    var ShoppingCartPreviewModule = /** @class */ (function () {
-        function ShoppingCartPreviewModule() {
-        }
-        return ShoppingCartPreviewModule;
-    }());
-    ShoppingCartPreviewModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        CoreModule,
-                        corecomponents_v12.ButtonModule,
-                        TransactionLinesModule,
-                        TransactionTotalsModule,
-                        PipeModule
-                    ],
-                    declarations: [
-                        ShoppingCartPreviewComponent
-                    ],
-                    exports: [
-                        ShoppingCartPreviewComponent
-                    ]
-                },] }
-    ];
-
     var TransactionLineGridComponent = /** @class */ (function () {
         function TransactionLineGridComponent() {
             this.transactionLines = [];
@@ -6766,26 +7236,38 @@
     exports.TransactionTotalsModule = TransactionTotalsModule;
     exports["ɵa"] = PendingReasonService;
     exports["ɵb"] = DialogService;
-    exports["ɵba"] = RelationAddressTileComponent;
-    exports["ɵbb"] = RelationAddressSelectComponent;
-    exports["ɵbc"] = BusinessObjectFactory;
-    exports["ɵbd"] = StepperModule;
-    exports["ɵbe"] = StepperComponent;
-    exports["ɵbf"] = StepperStepComponent;
-    exports["ɵbg"] = CheckoutOverviewRelationEditComponent;
-    exports["ɵbh"] = CheckoutOverviewDeliveryEditComponent;
-    exports["ɵbi"] = CheckoutOverviewDeliveryAddressComponent;
-    exports["ɵbj"] = CheckOutRelationSuggestionsListComponent;
-    exports["ɵbk"] = CheckOutRelationSuggestionsListItemComponent;
-    exports["ɵbl"] = CheckoutLoginComponent;
-    exports["ɵbm"] = TransactionBaseComponent;
-    exports["ɵbn"] = TransactionArticleTextModule;
-    exports["ɵbo"] = TransactionArticleTextComponent;
-    exports["ɵbp"] = TransactionArticleTextOverviewModule;
-    exports["ɵbq"] = TransactionArticleTextOverviewComponent;
-    exports["ɵbr"] = DiscountModule;
-    exports["ɵbs"] = DiscountComponent;
+    exports["ɵba"] = TileModule;
+    exports["ɵbb"] = TileComponent;
+    exports["ɵbc"] = RelationAddressTileComponent;
+    exports["ɵbd"] = RelationAddressSelectComponent;
+    exports["ɵbe"] = BusinessObjectFactory;
+    exports["ɵbf"] = StepperModule;
+    exports["ɵbg"] = StepperComponent;
+    exports["ɵbh"] = StepperStepComponent;
+    exports["ɵbi"] = TransactionArticleTextModule;
+    exports["ɵbj"] = TransactionArticleTextComponent;
+    exports["ɵbk"] = TransactionArticleTextOverviewModule;
+    exports["ɵbl"] = TransactionArticleTextOverviewComponent;
+    exports["ɵbm"] = TransactionLineSidePanelModule;
+    exports["ɵbn"] = TransactionLineSidePanelComponent;
+    exports["ɵbo"] = SellerInformationModule;
+    exports["ɵbp"] = SellerInformationComponent;
+    exports["ɵbq"] = DeliveryTypeTileModule;
+    exports["ɵbr"] = DeliveryTypeTileComponent;
+    exports["ɵbs"] = PaymentModule;
+    exports["ɵbt"] = PaymentTileModule;
+    exports["ɵbu"] = PaymentTileComponent;
+    exports["ɵbv"] = PaymentComponent;
+    exports["ɵbw"] = CheckoutOverviewRelationEditComponent;
+    exports["ɵbx"] = CheckoutOverviewDeliveryEditComponent;
+    exports["ɵby"] = CheckoutOverviewDeliveryAddressComponent;
+    exports["ɵbz"] = CheckOutRelationSuggestionsListComponent;
     exports["ɵc"] = OptionsService;
+    exports["ɵca"] = CheckOutRelationSuggestionsListItemComponent;
+    exports["ɵcb"] = CheckoutLoginComponent;
+    exports["ɵcc"] = TransactionBaseComponent;
+    exports["ɵcd"] = DiscountModule;
+    exports["ɵce"] = DiscountComponent;
     exports["ɵd"] = DictionaryService;
     exports["ɵe"] = IOneConnectorAdapterService;
     exports["ɵf"] = CoreModule;