@colijnit/transaction 12.0.3 → 12.1.1

package/fesm2015/colijnit-transaction.js

@@ -1,12 +1,13 @@
 import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, ChangeDetectorRef, ViewChild, Pipe, HostBinding, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, ChangeDetectorRef, ViewChild, Pipe, HostBinding, NgModule, Directive, ContentChild, ViewContainerRef } from '@angular/core';
 import { BehaviorSubject, Subject, throwError } from 'rxjs';
 import { Options } from '@colijnit/ioneconnector/build/model/options';
 import { CustomerFullObject } from '@colijnit/transactionapi/build/model/customer-full-object.bo';
 import { TransactionInfoResponse } from '@colijnit/transactionapi/build/model/transaction-info-response.bo';
 import { RelationPrivacySetting } from '@colijnit/transactionapi/build/model/relation-privacy-setting.bo';
 import { GetPostalCodeRetrievalOutputParams } from '@colijnit/transactionapi/build/model/get-postal-code-retrieval-output-params';
+import { RelationListObject } from '@colijnit/transactionapi/build/model/relation-list-object.bo';
 import { ArticleFullObject } from '@colijnit/transactionapi/build/model/article-full-object';
 import { LineOperationResponse } from '@colijnit/transactionapi/build/model/line-operation-response.bo';
 import { Transaction } from '@colijnit/transactionapi/build/transaction';
@@ -24,7 +25,7 @@ import { BooleanTextDecorator as BooleanTextDecorator$1 } from '@colijnit/transa
 import { JsonFieldFieldDecorator } from '@colijnit/transactionapi/build/factory/decorators/json.decorator';
 import { ComplexArrayDecorator as ComplexArrayDecorator$1 } from '@colijnit/transactionapi/build/factory/decorators/complex-array.decorator';
 import { ImageUtils } from '@colijnit/transactionapi/build/utils/image-utils';
-import { NULL_RELATION_OBJECT } from '@colijnit/transactionapi/build/model/nul-relation-object';
+import { NULL_RELATION_OBJECT, NULL_CUSTOMER_FULL_OBJECT, NULL_RELATION_LIST_OBJECT } from '@colijnit/transactionapi/build/model/nul-relation-object';
 import { TransactionKind } from '@colijnit/transactionapi/build/enum/transaction-kind.enum';
 import { SequenceName } from '@colijnit/transactionapi/build/enum/sequence-name.enum';
 import { ArrayUtils as ArrayUtils$1 } from '@colijnit/transactionapi/build/utils/array-utils';
@@ -51,8 +52,15 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { ResolvePendingLineReasonRequest } from '@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo';
 import { SortDirection } from '@colijnit/transactionapi/build/enum/sort-direction';
 import { SortType } from '@colijnit/transactionapi/build/enum/sort-type.enum';
-import { SortUtils } from '@colijnit/transactionapi/build/utils/sort-utils';
 import { StockStatus } from '@colijnit/transactionapi/build/enum/refcode/stock-status.enum';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { RelationRequest } from '@colijnit/transactionapi/build/model/relation-request';
+import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
+import { ChipListModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
+import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
+import { Sidebar, Accordion } from '@syncfusion/ej2-navigations';
+import { TabModule } from '@syncfusion/ej2-angular-navigations';
+import { TransactionLineInfo } from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
 
 class OptionsService {
     constructor() {
@@ -805,9 +813,16 @@ class IOneConnectorAdapterService {
     }
     connect(options) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.options = options;
-            this.connector = new Transaction(options);
-            this.options.session = this.connector.session;
+            if (this.options === undefined) {
+                this.options = options;
+                this.connector = new Transaction(options);
+                this.options.session = this.connector.session;
+            }
+        });
+    }
+    disconnect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.options = undefined;
         });
     }
     getArticleFullObject(goodId) {
@@ -953,6 +968,18 @@ class IOneConnectorAdapterService {
             });
         });
     }
+    getTransactionById(transactionId) {
+        return new Promise((resolve, reject) => {
+            return this.connector.getTransactionById(transactionId).then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
+    }
     saveTransaction(uuid) {
         return new Promise((resolve, reject) => {
             return this.connector.saveTransaction(uuid).then((result) => {
@@ -1113,7 +1140,35 @@ class IOneConnectorAdapterService {
             return new Promise((resolve, reject) => {
                 return this.connector.getRelationListObjects(relationRequest).then((result) => {
                     if (result.validationResult && result.validationResult.success) {
-                        resolve(result.resultObjects);
+                        resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(RelationListObject, result.resultObjects));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    addTransactionLine(uuid, articleLine, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.addTransactionLine(uuid, articleLine, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(LineOperationResponse, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    addTextLineToTransaction(uuid, showOnDocuments, text, amount, articleBound, refArticleLineNr, aboveLineNr, belowLineNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.addTextLineToTransaction(uuid, showOnDocuments, text, amount, articleBound, refArticleLineNr, aboveLineNr, belowLineNr).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(this._boFactory.makeWithRawBackendData(LineOperationResponse, result.resultObject));
                     }
                     else {
                         reject(result.validationMessagesAsString);
@@ -1122,10 +1177,10 @@ class IOneConnectorAdapterService {
             });
         });
     }
-    addTransactionLine(uuid, articleLine, articleNo, amount, warehouseNo, commissionCode, isReturn) {
+    changeLineSequence(uuid, lineUuid, aboveLineNr, belowLineNr) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
-                return this.connector.addTransactionLine(uuid, articleLine, articleNo, amount, warehouseNo, commissionCode, isReturn).then((result) => {
+                return this.connector.changeLineSequence(uuid, lineUuid, aboveLineNr, belowLineNr).then((result) => {
                     if (result.validationResult && result.validationResult.success) {
                         resolve(this._boFactory.makeWithRawBackendData(LineOperationResponse, result.resultObject));
                     }
@@ -1249,8 +1304,11 @@ class IOneConnectorAdapterService {
         });
     }
 }
+IOneConnectorAdapterService.ɵprov = i0.ɵɵdefineInjectable({ factory: function IOneConnectorAdapterService_Factory() { return new IOneConnectorAdapterService(); }, token: IOneConnectorAdapterService, providedIn: "root" });
 IOneConnectorAdapterService.decorators = [
-    { type: Injectable }
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
 ];
 IOneConnectorAdapterService.ctorParameters = () => [];
 
@@ -1258,6 +1316,7 @@ class TransactionService {
     constructor(_connector) {
         this._connector = _connector;
         this.transactionUpdated = new EventEmitter();
+        this.transactionLoaded = new EventEmitter();
         this.applicationUser = false;
         this.articleAmount = 0;
         this._currentLines = [];
@@ -1401,8 +1460,25 @@ class TransactionService {
         return new Promise((resolve, reject) => {
             this._connector.getTransactionByNrAndKind(kind, transactionNr)
                 .then((response) => __awaiter(this, void 0, void 0, function* () {
-                this._rememberCurrentTransaction(response);
                 if (response.isSuccess) {
+                    this.transactionLoaded.emit(response);
+                    resolve(true);
+                }
+                else {
+                    reject(false);
+                }
+            }))
+                .catch((reason) => {
+                reject(false);
+            });
+        });
+    }
+    getTransactionById(transactionId) {
+        return new Promise((resolve, reject) => {
+            this._connector.getTransactionById(transactionId)
+                .then((response) => __awaiter(this, void 0, void 0, function* () {
+                if (response.isSuccess) {
+                    this.transactionLoaded.emit(response);
                     resolve(true);
                 }
                 else {
@@ -1501,7 +1577,17 @@ class TransactionService {
     }
     retrieveLineImage(line) {
         return __awaiter(this, void 0, void 0, function* () {
-            const goodId = yield this._connector.getGoodIdFromArticleNr(line.articleNumber);
+            return yield this.getArticleImageByArticleNumber(line.articleNumber);
+        });
+    }
+    getArticleImageByArticleNumber(articleNumber) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const goodId = yield this._connector.getGoodIdFromArticleNr(articleNumber);
+            return this.getArticleImageByGoodId(goodId);
+        });
+    }
+    getArticleImageByGoodId(goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
             if (!isNaN(goodId)) {
                 return this._connector.getSingleImage(goodId, 1, true, true);
             }
@@ -1510,10 +1596,10 @@ class TransactionService {
             }
         });
     }
-    addArticle(articleNo, amount = 1, warehouseNo = 1, commissionCode = "2", isReturn = false) {
+    addArticle(articleNo, amount = 1, warehouseNo = 1, commissionCode = "2", isReturn = false, aboveLineNr = 0, belowLineNr = 0) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
-                this._connector.addTransactionLine(this._currentTransaction.uuid, TransactionLineType.ArticleLine, articleNo, amount, warehouseNo, commissionCode, isReturn)
+                this._connector.addTransactionLine(this._currentTransaction.uuid, TransactionLineType.ArticleLine, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr)
                     .then((response) => __awaiter(this, void 0, void 0, function* () {
                     resolve(true);
                 }), (error) => {
@@ -1525,10 +1611,27 @@ class TransactionService {
             });
         });
     }
-    addTransactionLine(lineType, articleNo, amount, warehouseNo, commissionCode, isReturn) {
+    addTransactionLine(lineType, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                this._connector.addTransactionLine(this.currentTransaction.uuid, lineType, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr)
+                    .then((response) => __awaiter(this, void 0, void 0, function* () {
+                    this._rememberCurrentTransaction(response);
+                    this._rememberCurrentTransactionLineStatus(response);
+                    resolve(response);
+                }), (error) => {
+                    reject(error);
+                })
+                    .catch((reason) => {
+                    resolve(null);
+                });
+            });
+        });
+    }
+    addTextLineToTransaction(showOnDocuments, text, amount, articleBound, refArticleLineNr, aboveLineNr, belowLineNr) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
-                this._connector.addTransactionLine(this.currentTransaction.uuid, lineType, articleNo, amount, warehouseNo, commissionCode, isReturn)
+                this._connector.addTextLineToTransaction(this.currentTransaction.uuid, showOnDocuments, text, amount, articleBound, refArticleLineNr, aboveLineNr, belowLineNr)
                     .then((response) => __awaiter(this, void 0, void 0, function* () {
                     this._rememberCurrentTransaction(response);
                     this._rememberCurrentTransactionLineStatus(response);
@@ -1542,6 +1645,21 @@ class TransactionService {
             });
         });
     }
+    changeLineSequence(lineUuid, aboveLineNr, belowLineNr) {
+        return new Promise((resolve, reject) => {
+            this._connector.changeLineSequence(this.currentTransaction.uuid, lineUuid, aboveLineNr, belowLineNr)
+                .then((response) => __awaiter(this, void 0, void 0, function* () {
+                this._rememberCurrentTransaction(response);
+                this._rememberCurrentTransactionLineStatus(response);
+                resolve(response);
+            }), (error) => {
+                reject(error);
+            })
+                .catch((reason) => {
+                resolve(null);
+            });
+        });
+    }
     cancelAddTransactionLine(lineUuid) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
@@ -1609,6 +1727,15 @@ class TransactionService {
             });
         });
     }
+    getCustomerFulObjectByRelationId(relationId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const relationNr = yield this._connector.getRelationNumber(relationId);
+            if (relationNr) {
+                return yield this._connector.getCustomerFullObject(Number(relationNr));
+            }
+            return NULL_CUSTOMER_FULL_OBJECT;
+        });
+    }
     // public async setRelationByUser(username: string, password: string): Promise<boolean> {
     //   const response: boolean = await this._connector.setRelationByUser(this.currentTransaction.uuid, username, password);
     //   return response;
@@ -1619,13 +1746,15 @@ class TransactionService {
         }
     }
     _rememberCurrentTransaction(value) {
-        this._currentTransaction = value.transactionInfo;
-        this._initializeTransaction();
-        this.currentLines = value.transactionLines;
-        this.currentTotals = value.transactionTotal;
-        this.currentLineOperationStatuses = value.lineOperationStatuses;
-        this._updateRelation();
-        this.transactionUpdated.emit();
+        return __awaiter(this, void 0, void 0, function* () {
+            this._currentTransaction = value.transactionInfo;
+            this._initializeTransaction();
+            this.currentLines = value.transactionLines;
+            this.currentTotals = value.transactionTotal;
+            this.currentLineOperationStatuses = value.lineOperationStatuses;
+            yield this._updateRelation();
+            this.transactionUpdated.emit();
+        });
     }
     _rememberCurrentTransactionLineStatus(value) {
         // this._currentLineOperationStatus.uuid = value.lineUuid;
@@ -1636,10 +1765,7 @@ class TransactionService {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.currentTransaction && this.currentTransaction.relation && this.currentTransaction.relation.relationId) {
                 if (!this._currentRelation || this._currentRelation.relationId !== this.currentTransaction.relation.relationId) {
-                    const relationNr = yield this._connector.getRelationNumber(this.currentTransaction.relation.relationId);
-                    if (relationNr) {
-                        this._currentRelation = yield this._connector.getCustomerFullObject(Number(relationNr));
-                    }
+                    this._currentRelation = yield this.getCustomerFulObjectByRelationId(this.currentTransaction.relation.relationId);
                 }
             }
         });
@@ -1759,6 +1885,7 @@ class Dictionary {
                 "ADDRESS_CHANGE": "Adres wijzigen",
                 "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",
                 "ASSEMBLY_COSTS": "Montagekosten",
@@ -1799,12 +1926,15 @@ class Dictionary {
                 "DELIVERY_OPTARTICLE_NRIONS": "Bezorgopties",
                 "DELIVERY_TIME_PERIOD": "Levertijd",
                 "DESCRIPTION": "Omschrijving",
+                "DETAILS": "Details",
                 "DISCOUNT": "Korting",
                 "DISCOUNT_AMOUNT": "Kortingsbedrag",
                 "DISCOUNT_PERCENTAGE": "Kortings %",
                 "DROPSHIPMENT": "Dropshipment",
                 "EMAIL_ADDRESS": "E-mailadres",
                 "EXISTING_CUSTOMERS": "Bestaande klanten",
+                "EXPECTED_DELIVERY_DATE": "Verwachte bezorgdatum",
+                "EXPECTED_DELIVERY_WEEK": "Verwachte leverweek",
                 "FEMALE": "Vrouw",
                 "FIRST_NAME": "Voornaam",
                 "GOOD_DESCRIPTION": "Artikelomschrijving",
@@ -1831,11 +1961,14 @@ class Dictionary {
                 "NUMBER": "Aantal",
                 "ON_DATE": "Op datum",
                 "OPEN_SHOPPING_CART": "Open winkelwagen",
+                "ORDER_DATE": "Orderdatum",
                 "ORDER_GROSS": "Ordertotaal bruto",
                 "ORDER_NET": "Ordertotaal netto",
+                "ORDER_NUMBER": "Ordernummer",
                 "ORDER_TYPE": "Type bestelling",
                 "OVERVIEW": "Overzicht",
                 "OWN_REFERENCE": "Eigen referentie",
+                "PAID_DOWN2": "Aanbetaald",
                 "PART_DELIVERIES": "Deelleveringen",
                 "PASSWORD": "Wachtwoord",
                 "PAYMENT": "Betaling",
@@ -1848,6 +1981,8 @@ class Dictionary {
                 "PRICE_LIST": "Prijslijst",
                 "PRIVACY_PREFERENCES": "Privacyvoorkeuren",
                 "PRIVATE_PERSON": "Particulier",
+                "PRODUCT": "Product",
+                "PRODUCT_TYPE": "Productsoort",
                 "QUANTITY_CANNOT_BE_ZERO_OR_EMPTY": "Het aantal mag geen 0 zijn.",
                 "QUANTITY_CANNOT_BE_LESS_THAN_DELIVERED": "Het aantal moet gelijk zijn aan het geleverde aantal",
                 "QUANTITY_CANNOT_BE_MORE_THAN_DELIVERED": "Het aantal moet gelijk zijn aan het geleverde aantal",
@@ -1863,6 +1998,9 @@ class Dictionary {
                 "SALUTATION": "Aanhef",
                 "SAVE": "Opslaan",
                 "SELECT": "Selecteren",
+                "SERVICE_NUMBER": "Servicenummer",
+                "SERVICE_REQUEST_DATE": "Datum aanvraag",
+                "SERVICE_STATE": "Service status",
                 "SHOPPING_CART": "Winkelwagen",
                 "SHOPPING_CART_CHECKOUT": "Bestellen",
                 "SHOPPING_CART_OVERVIEW": "Overzicht van uw bestelling",
@@ -1874,16 +2012,20 @@ class Dictionary {
                 "SUBTOTAL": "Subtotaal",
                 "SUGGESTIONS": "Suggesties",
                 "SURCHARGE_AMOUNT": "Toeslag",
+                "STATE": "Status",
                 "STREET": "Straatnaam",
+                "TOTAL_AMOUNT": "Totaalbedrag",
                 "TOTAL_GROSS": "Totaal bruto",
                 "TOTAL_ASSEMBLY_TIME": "Totale montagetijd",
                 "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",
                 "UNKNOWN": "Onbekend",
                 "UNKNOWN_ADDRESS_CHECK_IT": "Onbekend adres",
                 "VAT": "Btw",
+                "VAT_AMOUNT": "BTW-bedrag",
                 "VALUE": "Waarde",
                 "WAREHOUSE": "Magazijn",
                 "YOUR_DATA": "Uw gegevens",
@@ -1904,6 +2046,7 @@ class Dictionary {
                 "ADDRESS_CHANGE": "Change address",
                 "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",
                 "ASSEMBLY_COSTS": "Assembly costs",
@@ -1944,12 +2087,15 @@ class Dictionary {
                 "DELIVERY_OPTARTICLE_NRIONS": "Delivery options",
                 "DELIVERY_TIME_PERIOD": "Delivery time period",
                 "DESCRIPTION": "Description",
+                "DETAILS": "Details",
                 "DISCOUNT": "Discount",
                 "DISCOUNT_AMOUNT": "Discount amount",
                 "DISCOUNT_PERCENTAGE": "Discount %",
                 "DROPSHIPMENT": "Dropshipment",
                 "EMAIL_ADDRESS": "E-mailadres",
                 "EXISTING_CUSTOMERS": "Existing customers",
+                "EXPECTED_DELIVERY_DATE": "Expected delivery date",
+                "EXPECTED_DELIVERY_WEEK": "Expected delivery week",
                 "FEMALE": "Female",
                 "FIRST_NAME": "First name",
                 "GOOD_DESCRIPTION": "Article description",
@@ -1976,11 +2122,14 @@ class Dictionary {
                 "NUMBER": "Amount",
                 "ON_DATE": "On date",
                 "OPEN_SHOPPING_CART": "Open shopping cart",
+                "ORDER_DATE": "Order date",
                 "ORDER_GROSS": "Total gross amount",
                 "ORDER_NET": "Total net amount",
+                "ORDER_NUMBER": "Order number",
                 "ORDER_TYPE": "Order type",
                 "OVERVIEW": "Overview",
                 "OWN_REFERENCE": "Own reference",
+                "PAID_DOWN2": "Prepaid",
                 "PART_DELIVERIES": "Partial deliveries",
                 "PASSWORD": "Password",
                 "PAYMENT": "Payment",
@@ -1993,6 +2142,8 @@ class Dictionary {
                 "PRICE_LIST": "Pricelist",
                 "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_RELATION": "Ref. relation",
@@ -2000,6 +2151,9 @@ class Dictionary {
                 "SALUTATION": "Salutation",
                 "SAVE": "Save",
                 "SELECT": "Select",
+                "SERVICE_NUMBER": "Service number",
+                "SERVICE_REQUEST_DATE": "Service request data",
+                "SERVICE_STATE": "Service state",
                 "SHOPPING_CART": "Shopping cart",
                 "SHOPPING_CART_CHECKOUT": "Checkout",
                 "SHOPPING_CART_OVERVIEW": "Order overview",
@@ -2011,17 +2165,21 @@ class Dictionary {
                 "SUBTOTAL": "Subtotal",
                 "SUGGESTIONS": "Suggestions",
                 "SURCHARGE_AMOUNT": "Surcharge",
+                "STATE": "STATUS",
                 "STREET": "Streetname",
+                "TOTAL_AMOUNT": "Total amount",
                 "TOTAL_GROSS": "Gross total",
                 "TOTAL_ASSEMBLY_TIME": "Total assembly time",
                 "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",
                 "UNKNOWN": "unknown",
                 "UNKNOWN_ADDRESS_CHECK_IT": "Unknown address",
                 "VALUE": "Value",
                 "VAT": "VAT",
+                "VAT_AMOUNT": "VAT amount",
                 "WAREHOUSE": "Warehouse",
                 "YOUR_DATA": "Your data",
             },
@@ -2099,6 +2257,12 @@ class TransactionEventService {
         this.addUserRelationShoppingCartModule = new Subject();
         this.addArticleLine = new Subject();
         this.addTextLine = new Subject();
+        this.addArticleLineAt = new Subject();
+        this.addTextLineAt = new Subject();
+        this.changeLineSequence = new Subject();
+        this.transactionLineClicked = new Subject();
+        this.rightSidebarClose = new Subject();
+        this.scrollContent = new Subject();
     }
 }
 TransactionEventService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionEventService_Factory() { return new TransactionEventService(); }, token: TransactionEventService, providedIn: "root" });
@@ -2151,7 +2315,7 @@ CheckoutOverviewBlockComponent.decorators = [
             </div>
         </div>
     `,
-                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.overview-header .overview-step-nr{border-radius:50%}.flex-center,.step-content-customer,.step-content-delivery{display:flex}.step-content-delivery,.flex-center{flex-direction:row}.step-content-customer{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.step-content-delivery,.step-content-customer{padding-bottom:20px}.step-content-delivery,.step-content-customer{padding-top:20px}.step-content-delivery,.step-content-customer{padding-left:20px}.step-content-delivery,.step-content-customer{padding-right:20px}.overview-body{padding-left:30px}.overview-body{padding-right:30px}.overview-body{padding-top:30px}.overview-body{padding-bottom:30px}ul.cart-buttons>li{padding-left:11px}ul.cart-buttons>li{padding-right:11px}ul.cart-buttons{margin-top:20px}ul.cart-buttons{margin-bottom:20px}.overview-header .overview-step-nr{color:#f7fafa}.overview-header .overview-step-nr{background-color:#2b60a7}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}.checkout-viewport{max-width:60%;margin-left:20%}.mat-label{font-family:Montserrat,Arial,Helvetica,sans-serif}.default-flex-row{flex-direction:row;box-sizing:border-box;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:flex}.default-flex-column{display:flex;flex-direction:column;width:200px}.privacy-row{display:flex;flex-direction:row;margin-bottom:20px}.privacy-column-left{display:flex;flex-direction:column;min-width:150px;max-width:150px;overflow-wrap:break-word}.privacy-column-right{display:flex;flex-direction:row;margin-left:50px}.checkout-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.checkout-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}co-input-radio-button{margin-left:16px}.checkout-overview h2{font-size:18px;font-weight:bold}.checkout-overview h3{font-size:15px}mat-horizontal-stepper{position:sticky;top:0;z-index:30}::ng-deep .mat-horizontal-content-container{display:none}.step-content-customer{background-color:#fff}.step-content-delivery{background-color:#fff}::ng-deep .step-wrapper{width:auto;background:rgba(255,255,255,.25)}::ng-deep .step-wrapper button-colijn{margin-top:20px}::ng-deep .step-wrapper.payment{align-items:center!important;justify-content:left!important}.overview-header{background:rgba(255,255,255,.25);border-top-left-radius:5px;border-top-right-radius:5px}.overview-header .overview-step-nr{width:20px;height:20px;text-align:center;font-weight:bold}.overview-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.overview-body .contact-option-value{align-self:center}.overview-header-label{font-weight:bold}.overview-label{font-weight:bold}ul.cart-buttons{display:flex;justify-content:space-between;flex-wrap:nowrap;list-style-type:none}ul.cart-buttons>li{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:40px;background-color:#f7fafa;cursor:pointer;font-size:15px;color:#2b60a7;border:1px solid #DCE4EA;border-radius:5px;opacity:1}ul.cart-buttons>li a{white-space:nowrap}\n"]
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.overview-header .overview-step-nr{border-radius:50%}.flex-center,.step-content-delivery,.step-content-customer{display:flex}.flex-center,.step-content-delivery{flex-direction:row}.step-content-customer{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.step-content-customer,.step-content-delivery{padding-bottom:20px}.step-content-customer,.step-content-delivery{padding-top:20px}.step-content-customer,.step-content-delivery{padding-left:20px}.step-content-customer,.step-content-delivery{padding-right:20px}.overview-body{padding-left:30px}.overview-body{padding-right:30px}.overview-body{padding-top:30px}.overview-body{padding-bottom:30px}ul.cart-buttons>li{padding-left:11px}ul.cart-buttons>li{padding-right:11px}ul.cart-buttons{margin-top:20px}ul.cart-buttons{margin-bottom:20px}.overview-header .overview-step-nr{color:#f7fafa}.overview-header .overview-step-nr{background-color:#2b60a7}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}.checkout-viewport{max-width:60%;margin-left:20%}.mat-label{font-family:Montserrat,Arial,Helvetica,sans-serif}.default-flex-row{flex-direction:row;box-sizing:border-box;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:flex}.default-flex-column{display:flex;flex-direction:column;width:200px}.privacy-row{display:flex;flex-direction:row;margin-bottom:20px}.privacy-column-left{display:flex;flex-direction:column;min-width:150px;max-width:150px;overflow-wrap:break-word}.privacy-column-right{display:flex;flex-direction:row;margin-left:50px}.checkout-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.checkout-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}co-input-radio-button{margin-left:16px}.checkout-overview h2{font-size:18px;font-weight:bold}.checkout-overview h3{font-size:15px}mat-horizontal-stepper{position:sticky;top:0;z-index:30}::ng-deep .mat-horizontal-content-container{display:none}.step-content-customer{background-color:#fff}.step-content-delivery{background-color:#fff}::ng-deep .step-wrapper{width:auto;background:rgba(255,255,255,.25)}::ng-deep .step-wrapper button-colijn{margin-top:20px}::ng-deep .step-wrapper.payment{align-items:center!important;justify-content:left!important}.overview-header{background:rgba(255,255,255,.25);border-top-left-radius:5px;border-top-right-radius:5px}.overview-header .overview-step-nr{width:20px;height:20px;text-align:center;font-weight:bold}.overview-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.overview-body .contact-option-value{align-self:center}.overview-header-label{font-weight:bold}.overview-label{font-weight:bold}ul.cart-buttons{display:flex;justify-content:space-between;flex-wrap:nowrap;list-style-type:none}ul.cart-buttons>li{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:40px;background-color:#f7fafa;cursor:pointer;font-size:15px;color:#2b60a7;border:1px solid #DCE4EA;border-radius:5px;opacity:1}ul.cart-buttons>li a{white-space:nowrap}\n"]
             },] }
 ];
 CheckoutOverviewBlockComponent.ctorParameters = () => [];
@@ -2526,7 +2690,7 @@ CheckoutOverviewRelationEditComponent.decorators = [
     </co-sidebar>
 
     `,
-                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.overview-header .overview-step-nr{border-radius:50%}.flex-center,.step-content-customer,.step-content-delivery{display:flex}.step-content-delivery,.flex-center{flex-direction:row}.step-content-customer{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.step-content-delivery,.step-content-customer{padding-bottom:20px}.step-content-delivery,.step-content-customer{padding-top:20px}.step-content-delivery,.step-content-customer{padding-left:20px}.step-content-delivery,.step-content-customer{padding-right:20px}.overview-body{padding-left:30px}.overview-body{padding-right:30px}.overview-body{padding-top:30px}.overview-body{padding-bottom:30px}ul.cart-buttons>li{padding-left:11px}ul.cart-buttons>li{padding-right:11px}ul.cart-buttons{margin-top:20px}ul.cart-buttons{margin-bottom:20px}.overview-header .overview-step-nr{color:#f7fafa}.overview-header .overview-step-nr{background-color:#2b60a7}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}.checkout-viewport{max-width:60%;margin-left:20%}.mat-label{font-family:Montserrat,Arial,Helvetica,sans-serif}.default-flex-row{flex-direction:row;box-sizing:border-box;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:flex}.default-flex-column{display:flex;flex-direction:column;width:200px}.privacy-row{display:flex;flex-direction:row;margin-bottom:20px}.privacy-column-left{display:flex;flex-direction:column;min-width:150px;max-width:150px;overflow-wrap:break-word}.privacy-column-right{display:flex;flex-direction:row;margin-left:50px}.checkout-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.checkout-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}co-input-radio-button{margin-left:16px}.checkout-overview h2{font-size:18px;font-weight:bold}.checkout-overview h3{font-size:15px}mat-horizontal-stepper{position:sticky;top:0;z-index:30}::ng-deep .mat-horizontal-content-container{display:none}.step-content-customer{background-color:#fff}.step-content-delivery{background-color:#fff}::ng-deep .step-wrapper{width:auto;background:rgba(255,255,255,.25)}::ng-deep .step-wrapper button-colijn{margin-top:20px}::ng-deep .step-wrapper.payment{align-items:center!important;justify-content:left!important}.overview-header{background:rgba(255,255,255,.25);border-top-left-radius:5px;border-top-right-radius:5px}.overview-header .overview-step-nr{width:20px;height:20px;text-align:center;font-weight:bold}.overview-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.overview-body .contact-option-value{align-self:center}.overview-header-label{font-weight:bold}.overview-label{font-weight:bold}ul.cart-buttons{display:flex;justify-content:space-between;flex-wrap:nowrap;list-style-type:none}ul.cart-buttons>li{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:40px;background-color:#f7fafa;cursor:pointer;font-size:15px;color:#2b60a7;border:1px solid #DCE4EA;border-radius:5px;opacity:1}ul.cart-buttons>li a{white-space:nowrap}\n", ".relation-sidebar-header{margin-left:5px}\n"]
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.overview-header .overview-step-nr{border-radius:50%}.flex-center,.step-content-delivery,.step-content-customer{display:flex}.flex-center,.step-content-delivery{flex-direction:row}.step-content-customer{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.step-content-customer,.step-content-delivery{padding-bottom:20px}.step-content-customer,.step-content-delivery{padding-top:20px}.step-content-customer,.step-content-delivery{padding-left:20px}.step-content-customer,.step-content-delivery{padding-right:20px}.overview-body{padding-left:30px}.overview-body{padding-right:30px}.overview-body{padding-top:30px}.overview-body{padding-bottom:30px}ul.cart-buttons>li{padding-left:11px}ul.cart-buttons>li{padding-right:11px}ul.cart-buttons{margin-top:20px}ul.cart-buttons{margin-bottom:20px}.overview-header .overview-step-nr{color:#f7fafa}.overview-header .overview-step-nr{background-color:#2b60a7}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}.checkout-viewport{max-width:60%;margin-left:20%}.mat-label{font-family:Montserrat,Arial,Helvetica,sans-serif}.default-flex-row{flex-direction:row;box-sizing:border-box;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:flex}.default-flex-column{display:flex;flex-direction:column;width:200px}.privacy-row{display:flex;flex-direction:row;margin-bottom:20px}.privacy-column-left{display:flex;flex-direction:column;min-width:150px;max-width:150px;overflow-wrap:break-word}.privacy-column-right{display:flex;flex-direction:row;margin-left:50px}.checkout-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.checkout-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}co-input-radio-button{margin-left:16px}.checkout-overview h2{font-size:18px;font-weight:bold}.checkout-overview h3{font-size:15px}mat-horizontal-stepper{position:sticky;top:0;z-index:30}::ng-deep .mat-horizontal-content-container{display:none}.step-content-customer{background-color:#fff}.step-content-delivery{background-color:#fff}::ng-deep .step-wrapper{width:auto;background:rgba(255,255,255,.25)}::ng-deep .step-wrapper button-colijn{margin-top:20px}::ng-deep .step-wrapper.payment{align-items:center!important;justify-content:left!important}.overview-header{background:rgba(255,255,255,.25);border-top-left-radius:5px;border-top-right-radius:5px}.overview-header .overview-step-nr{width:20px;height:20px;text-align:center;font-weight:bold}.overview-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.overview-body .contact-option-value{align-self:center}.overview-header-label{font-weight:bold}.overview-label{font-weight:bold}ul.cart-buttons{display:flex;justify-content:space-between;flex-wrap:nowrap;list-style-type:none}ul.cart-buttons>li{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:40px;background-color:#f7fafa;cursor:pointer;font-size:15px;color:#2b60a7;border:1px solid #DCE4EA;border-radius:5px;opacity:1}ul.cart-buttons>li a{white-space:nowrap}\n", ".relation-sidebar-header{margin-left:5px}\n"]
             },] }
 ];
 CheckoutOverviewRelationEditComponent.ctorParameters = () => [
@@ -2923,8 +3087,8 @@ CheckoutOverviewDeliveryEditComponent.decorators = [
             <co-grid #addressGrid
                      [data]="addresses"
                      [columns]="columns"
-                     [pagingEnabled]="'true'"
-                     [maxNumberOfRows]="'20'"
+                     [pagingEnabled]="true"
+                     [maxNumberOfRows]="20"
                      (rowsSelected)="handleAddressSelected($event)"
             ></co-grid>
           </div>
@@ -2936,7 +3100,7 @@ CheckoutOverviewDeliveryEditComponent.decorators = [
       </co-form>
     </co-dialog>
   `,
-                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.overview-header .overview-step-nr{border-radius:50%}.flex-center,.step-content-customer,.step-content-delivery{display:flex}.step-content-delivery,.flex-center{flex-direction:row}.step-content-customer{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.step-content-delivery,.step-content-customer{padding-bottom:20px}.step-content-delivery,.step-content-customer{padding-top:20px}.step-content-delivery,.step-content-customer{padding-left:20px}.step-content-delivery,.step-content-customer{padding-right:20px}.overview-body{padding-left:30px}.overview-body{padding-right:30px}.overview-body{padding-top:30px}.overview-body{padding-bottom:30px}ul.cart-buttons>li{padding-left:11px}ul.cart-buttons>li{padding-right:11px}ul.cart-buttons{margin-top:20px}ul.cart-buttons{margin-bottom:20px}.overview-header .overview-step-nr{color:#f7fafa}.overview-header .overview-step-nr{background-color:#2b60a7}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}.checkout-viewport{max-width:60%;margin-left:20%}.mat-label{font-family:Montserrat,Arial,Helvetica,sans-serif}.default-flex-row{flex-direction:row;box-sizing:border-box;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:flex}.default-flex-column{display:flex;flex-direction:column;width:200px}.privacy-row{display:flex;flex-direction:row;margin-bottom:20px}.privacy-column-left{display:flex;flex-direction:column;min-width:150px;max-width:150px;overflow-wrap:break-word}.privacy-column-right{display:flex;flex-direction:row;margin-left:50px}.checkout-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.checkout-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}co-input-radio-button{margin-left:16px}.checkout-overview h2{font-size:18px;font-weight:bold}.checkout-overview h3{font-size:15px}mat-horizontal-stepper{position:sticky;top:0;z-index:30}::ng-deep .mat-horizontal-content-container{display:none}.step-content-customer{background-color:#fff}.step-content-delivery{background-color:#fff}::ng-deep .step-wrapper{width:auto;background:rgba(255,255,255,.25)}::ng-deep .step-wrapper button-colijn{margin-top:20px}::ng-deep .step-wrapper.payment{align-items:center!important;justify-content:left!important}.overview-header{background:rgba(255,255,255,.25);border-top-left-radius:5px;border-top-right-radius:5px}.overview-header .overview-step-nr{width:20px;height:20px;text-align:center;font-weight:bold}.overview-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.overview-body .contact-option-value{align-self:center}.overview-header-label{font-weight:bold}.overview-label{font-weight:bold}ul.cart-buttons{display:flex;justify-content:space-between;flex-wrap:nowrap;list-style-type:none}ul.cart-buttons>li{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:40px;background-color:#f7fafa;cursor:pointer;font-size:15px;color:#2b60a7;border:1px solid #DCE4EA;border-radius:5px;opacity:1}ul.cart-buttons>li a{white-space:nowrap}\n", ".container-button-change-address{margin-top:5px}\n"]
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.overview-header .overview-step-nr{border-radius:50%}.flex-center,.step-content-delivery,.step-content-customer{display:flex}.flex-center,.step-content-delivery{flex-direction:row}.step-content-customer{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.step-content-customer,.step-content-delivery{padding-bottom:20px}.step-content-customer,.step-content-delivery{padding-top:20px}.step-content-customer,.step-content-delivery{padding-left:20px}.step-content-customer,.step-content-delivery{padding-right:20px}.overview-body{padding-left:30px}.overview-body{padding-right:30px}.overview-body{padding-top:30px}.overview-body{padding-bottom:30px}ul.cart-buttons>li{padding-left:11px}ul.cart-buttons>li{padding-right:11px}ul.cart-buttons{margin-top:20px}ul.cart-buttons{margin-bottom:20px}.overview-header .overview-step-nr{color:#f7fafa}.overview-header .overview-step-nr{background-color:#2b60a7}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}.checkout-viewport{max-width:60%;margin-left:20%}.mat-label{font-family:Montserrat,Arial,Helvetica,sans-serif}.default-flex-row{flex-direction:row;box-sizing:border-box;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:flex}.default-flex-column{display:flex;flex-direction:column;width:200px}.privacy-row{display:flex;flex-direction:row;margin-bottom:20px}.privacy-column-left{display:flex;flex-direction:column;min-width:150px;max-width:150px;overflow-wrap:break-word}.privacy-column-right{display:flex;flex-direction:row;margin-left:50px}.checkout-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.checkout-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}co-input-radio-button{margin-left:16px}.checkout-overview h2{font-size:18px;font-weight:bold}.checkout-overview h3{font-size:15px}mat-horizontal-stepper{position:sticky;top:0;z-index:30}::ng-deep .mat-horizontal-content-container{display:none}.step-content-customer{background-color:#fff}.step-content-delivery{background-color:#fff}::ng-deep .step-wrapper{width:auto;background:rgba(255,255,255,.25)}::ng-deep .step-wrapper button-colijn{margin-top:20px}::ng-deep .step-wrapper.payment{align-items:center!important;justify-content:left!important}.overview-header{background:rgba(255,255,255,.25);border-top-left-radius:5px;border-top-right-radius:5px}.overview-header .overview-step-nr{width:20px;height:20px;text-align:center;font-weight:bold}.overview-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.overview-body .contact-option-value{align-self:center}.overview-header-label{font-weight:bold}.overview-label{font-weight:bold}ul.cart-buttons{display:flex;justify-content:space-between;flex-wrap:nowrap;list-style-type:none}ul.cart-buttons>li{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:40px;background-color:#f7fafa;cursor:pointer;font-size:15px;color:#2b60a7;border:1px solid #DCE4EA;border-radius:5px;opacity:1}ul.cart-buttons>li a{white-space:nowrap}\n", ".container-button-change-address{margin-top:5px}\n"]
             },] }
 ];
 CheckoutOverviewDeliveryEditComponent.ctorParameters = () => [
@@ -3116,7 +3280,7 @@ CheckoutOverviewComponent.decorators = [
           </ng-container>
         </checkout-overview-block>
    `,
-                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.overview-header .overview-step-nr{border-radius:50%}.flex-center,.step-content-customer,.step-content-delivery{display:flex}.step-content-delivery,.flex-center{flex-direction:row}.step-content-customer{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.step-content-delivery,.step-content-customer{padding-bottom:20px}.step-content-delivery,.step-content-customer{padding-top:20px}.step-content-delivery,.step-content-customer{padding-left:20px}.step-content-delivery,.step-content-customer{padding-right:20px}.overview-body{padding-left:30px}.overview-body{padding-right:30px}.overview-body{padding-top:30px}.overview-body{padding-bottom:30px}ul.cart-buttons>li{padding-left:11px}ul.cart-buttons>li{padding-right:11px}ul.cart-buttons{margin-top:20px}ul.cart-buttons{margin-bottom:20px}.overview-header .overview-step-nr{color:#f7fafa}.overview-header .overview-step-nr{background-color:#2b60a7}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}.checkout-viewport{max-width:60%;margin-left:20%}.mat-label{font-family:Montserrat,Arial,Helvetica,sans-serif}.default-flex-row{flex-direction:row;box-sizing:border-box;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:flex}.default-flex-column{display:flex;flex-direction:column;width:200px}.privacy-row{display:flex;flex-direction:row;margin-bottom:20px}.privacy-column-left{display:flex;flex-direction:column;min-width:150px;max-width:150px;overflow-wrap:break-word}.privacy-column-right{display:flex;flex-direction:row;margin-left:50px}.checkout-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.checkout-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}co-input-radio-button{margin-left:16px}.checkout-overview h2{font-size:18px;font-weight:bold}.checkout-overview h3{font-size:15px}mat-horizontal-stepper{position:sticky;top:0;z-index:30}::ng-deep .mat-horizontal-content-container{display:none}.step-content-customer{background-color:#fff}.step-content-delivery{background-color:#fff}::ng-deep .step-wrapper{width:auto;background:rgba(255,255,255,.25)}::ng-deep .step-wrapper button-colijn{margin-top:20px}::ng-deep .step-wrapper.payment{align-items:center!important;justify-content:left!important}.overview-header{background:rgba(255,255,255,.25);border-top-left-radius:5px;border-top-right-radius:5px}.overview-header .overview-step-nr{width:20px;height:20px;text-align:center;font-weight:bold}.overview-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.overview-body .contact-option-value{align-self:center}.overview-header-label{font-weight:bold}.overview-label{font-weight:bold}ul.cart-buttons{display:flex;justify-content:space-between;flex-wrap:nowrap;list-style-type:none}ul.cart-buttons>li{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:40px;background-color:#f7fafa;cursor:pointer;font-size:15px;color:#2b60a7;border:1px solid #DCE4EA;border-radius:5px;opacity:1}ul.cart-buttons>li a{white-space:nowrap}\n"]
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.overview-header .overview-step-nr{border-radius:50%}.flex-center,.step-content-delivery,.step-content-customer{display:flex}.flex-center,.step-content-delivery{flex-direction:row}.step-content-customer{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.step-content-customer,.step-content-delivery{padding-bottom:20px}.step-content-customer,.step-content-delivery{padding-top:20px}.step-content-customer,.step-content-delivery{padding-left:20px}.step-content-customer,.step-content-delivery{padding-right:20px}.overview-body{padding-left:30px}.overview-body{padding-right:30px}.overview-body{padding-top:30px}.overview-body{padding-bottom:30px}ul.cart-buttons>li{padding-left:11px}ul.cart-buttons>li{padding-right:11px}ul.cart-buttons{margin-top:20px}ul.cart-buttons{margin-bottom:20px}.overview-header .overview-step-nr{color:#f7fafa}.overview-header .overview-step-nr{background-color:#2b60a7}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}.checkout-viewport{max-width:60%;margin-left:20%}.mat-label{font-family:Montserrat,Arial,Helvetica,sans-serif}.default-flex-row{flex-direction:row;box-sizing:border-box;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:flex}.default-flex-column{display:flex;flex-direction:column;width:200px}.privacy-row{display:flex;flex-direction:row;margin-bottom:20px}.privacy-column-left{display:flex;flex-direction:column;min-width:150px;max-width:150px;overflow-wrap:break-word}.privacy-column-right{display:flex;flex-direction:row;margin-left:50px}.checkout-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.checkout-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}co-input-radio-button{margin-left:16px}.checkout-overview h2{font-size:18px;font-weight:bold}.checkout-overview h3{font-size:15px}mat-horizontal-stepper{position:sticky;top:0;z-index:30}::ng-deep .mat-horizontal-content-container{display:none}.step-content-customer{background-color:#fff}.step-content-delivery{background-color:#fff}::ng-deep .step-wrapper{width:auto;background:rgba(255,255,255,.25)}::ng-deep .step-wrapper button-colijn{margin-top:20px}::ng-deep .step-wrapper.payment{align-items:center!important;justify-content:left!important}.overview-header{background:rgba(255,255,255,.25);border-top-left-radius:5px;border-top-right-radius:5px}.overview-header .overview-step-nr{width:20px;height:20px;text-align:center;font-weight:bold}.overview-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.overview-body .contact-option-value{align-self:center}.overview-header-label{font-weight:bold}.overview-label{font-weight:bold}ul.cart-buttons{display:flex;justify-content:space-between;flex-wrap:nowrap;list-style-type:none}ul.cart-buttons>li{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:40px;background-color:#f7fafa;cursor:pointer;font-size:15px;color:#2b60a7;border:1px solid #DCE4EA;border-radius:5px;opacity:1}ul.cart-buttons>li a{white-space:nowrap}\n"]
             },] }
 ];
 CheckoutOverviewComponent.ctorParameters = () => [];
@@ -3263,7 +3427,7 @@ CheckoutComponent.decorators = [
             <div class="step-content-customer"></div>
         </div>
   `,
-                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.overview-header .overview-step-nr{border-radius:50%}.flex-center,.step-content-customer,.step-content-delivery{display:flex}.step-content-delivery,.flex-center{flex-direction:row}.step-content-customer{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.step-content-delivery,.step-content-customer{padding-bottom:20px}.step-content-delivery,.step-content-customer{padding-top:20px}.step-content-delivery,.step-content-customer{padding-left:20px}.step-content-delivery,.step-content-customer{padding-right:20px}.overview-body{padding-left:30px}.overview-body{padding-right:30px}.overview-body{padding-top:30px}.overview-body{padding-bottom:30px}ul.cart-buttons>li{padding-left:11px}ul.cart-buttons>li{padding-right:11px}ul.cart-buttons{margin-top:20px}ul.cart-buttons{margin-bottom:20px}.overview-header .overview-step-nr{color:#f7fafa}.overview-header .overview-step-nr{background-color:#2b60a7}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}.checkout-viewport{max-width:60%;margin-left:20%}.mat-label{font-family:Montserrat,Arial,Helvetica,sans-serif}.default-flex-row{flex-direction:row;box-sizing:border-box;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:flex}.default-flex-column{display:flex;flex-direction:column;width:200px}.privacy-row{display:flex;flex-direction:row;margin-bottom:20px}.privacy-column-left{display:flex;flex-direction:column;min-width:150px;max-width:150px;overflow-wrap:break-word}.privacy-column-right{display:flex;flex-direction:row;margin-left:50px}.checkout-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.checkout-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}co-input-radio-button{margin-left:16px}.checkout-overview h2{font-size:18px;font-weight:bold}.checkout-overview h3{font-size:15px}mat-horizontal-stepper{position:sticky;top:0;z-index:30}::ng-deep .mat-horizontal-content-container{display:none}.step-content-customer{background-color:#fff}.step-content-delivery{background-color:#fff}::ng-deep .step-wrapper{width:auto;background:rgba(255,255,255,.25)}::ng-deep .step-wrapper button-colijn{margin-top:20px}::ng-deep .step-wrapper.payment{align-items:center!important;justify-content:left!important}.overview-header{background:rgba(255,255,255,.25);border-top-left-radius:5px;border-top-right-radius:5px}.overview-header .overview-step-nr{width:20px;height:20px;text-align:center;font-weight:bold}.overview-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.overview-body .contact-option-value{align-self:center}.overview-header-label{font-weight:bold}.overview-label{font-weight:bold}ul.cart-buttons{display:flex;justify-content:space-between;flex-wrap:nowrap;list-style-type:none}ul.cart-buttons>li{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:40px;background-color:#f7fafa;cursor:pointer;font-size:15px;color:#2b60a7;border:1px solid #DCE4EA;border-radius:5px;opacity:1}ul.cart-buttons>li a{white-space:nowrap}\n"]
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.overview-header .overview-step-nr{border-radius:50%}.flex-center,.step-content-delivery,.step-content-customer{display:flex}.flex-center,.step-content-delivery{flex-direction:row}.step-content-customer{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.step-content-customer,.step-content-delivery{padding-bottom:20px}.step-content-customer,.step-content-delivery{padding-top:20px}.step-content-customer,.step-content-delivery{padding-left:20px}.step-content-customer,.step-content-delivery{padding-right:20px}.overview-body{padding-left:30px}.overview-body{padding-right:30px}.overview-body{padding-top:30px}.overview-body{padding-bottom:30px}ul.cart-buttons>li{padding-left:11px}ul.cart-buttons>li{padding-right:11px}ul.cart-buttons{margin-top:20px}ul.cart-buttons{margin-bottom:20px}.overview-header .overview-step-nr{color:#f7fafa}.overview-header .overview-step-nr{background-color:#2b60a7}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}.checkout-viewport{max-width:60%;margin-left:20%}.mat-label{font-family:Montserrat,Arial,Helvetica,sans-serif}.default-flex-row{flex-direction:row;box-sizing:border-box;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:flex}.default-flex-column{display:flex;flex-direction:column;width:200px}.privacy-row{display:flex;flex-direction:row;margin-bottom:20px}.privacy-column-left{display:flex;flex-direction:column;min-width:150px;max-width:150px;overflow-wrap:break-word}.privacy-column-right{display:flex;flex-direction:row;margin-left:50px}.checkout-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.checkout-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}co-input-radio-button{margin-left:16px}.checkout-overview h2{font-size:18px;font-weight:bold}.checkout-overview h3{font-size:15px}mat-horizontal-stepper{position:sticky;top:0;z-index:30}::ng-deep .mat-horizontal-content-container{display:none}.step-content-customer{background-color:#fff}.step-content-delivery{background-color:#fff}::ng-deep .step-wrapper{width:auto;background:rgba(255,255,255,.25)}::ng-deep .step-wrapper button-colijn{margin-top:20px}::ng-deep .step-wrapper.payment{align-items:center!important;justify-content:left!important}.overview-header{background:rgba(255,255,255,.25);border-top-left-radius:5px;border-top-right-radius:5px}.overview-header .overview-step-nr{width:20px;height:20px;text-align:center;font-weight:bold}.overview-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.overview-body .contact-option-value{align-self:center}.overview-header-label{font-weight:bold}.overview-label{font-weight:bold}ul.cart-buttons{display:flex;justify-content:space-between;flex-wrap:nowrap;list-style-type:none}ul.cart-buttons>li{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:40px;background-color:#f7fafa;cursor:pointer;font-size:15px;color:#2b60a7;border:1px solid #DCE4EA;border-radius:5px;opacity:1}ul.cart-buttons>li a{white-space:nowrap}\n"]
             },] }
 ];
 CheckoutComponent.ctorParameters = () => [
@@ -3653,7 +3817,7 @@ CheckoutOverviewRelationAddressComponent.decorators = [
             </div>
         </div>
     `,
-                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.overview-header .overview-step-nr{border-radius:50%}.flex-center,.step-content-customer,.step-content-delivery{display:flex}.step-content-delivery,.flex-center{flex-direction:row}.step-content-customer{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.step-content-delivery,.step-content-customer{padding-bottom:20px}.step-content-delivery,.step-content-customer{padding-top:20px}.step-content-delivery,.step-content-customer{padding-left:20px}.step-content-delivery,.step-content-customer{padding-right:20px}.overview-body{padding-left:30px}.overview-body{padding-right:30px}.overview-body{padding-top:30px}.overview-body{padding-bottom:30px}ul.cart-buttons>li{padding-left:11px}ul.cart-buttons>li{padding-right:11px}ul.cart-buttons{margin-top:20px}ul.cart-buttons{margin-bottom:20px}.overview-header .overview-step-nr{color:#f7fafa}.overview-header .overview-step-nr{background-color:#2b60a7}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}.checkout-viewport{max-width:60%;margin-left:20%}.mat-label{font-family:Montserrat,Arial,Helvetica,sans-serif}.default-flex-row{flex-direction:row;box-sizing:border-box;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:flex}.default-flex-column{display:flex;flex-direction:column;width:200px}.privacy-row{display:flex;flex-direction:row;margin-bottom:20px}.privacy-column-left{display:flex;flex-direction:column;min-width:150px;max-width:150px;overflow-wrap:break-word}.privacy-column-right{display:flex;flex-direction:row;margin-left:50px}.checkout-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.checkout-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}co-input-radio-button{margin-left:16px}.checkout-overview h2{font-size:18px;font-weight:bold}.checkout-overview h3{font-size:15px}mat-horizontal-stepper{position:sticky;top:0;z-index:30}::ng-deep .mat-horizontal-content-container{display:none}.step-content-customer{background-color:#fff}.step-content-delivery{background-color:#fff}::ng-deep .step-wrapper{width:auto;background:rgba(255,255,255,.25)}::ng-deep .step-wrapper button-colijn{margin-top:20px}::ng-deep .step-wrapper.payment{align-items:center!important;justify-content:left!important}.overview-header{background:rgba(255,255,255,.25);border-top-left-radius:5px;border-top-right-radius:5px}.overview-header .overview-step-nr{width:20px;height:20px;text-align:center;font-weight:bold}.overview-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.overview-body .contact-option-value{align-self:center}.overview-header-label{font-weight:bold}.overview-label{font-weight:bold}ul.cart-buttons{display:flex;justify-content:space-between;flex-wrap:nowrap;list-style-type:none}ul.cart-buttons>li{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:40px;background-color:#f7fafa;cursor:pointer;font-size:15px;color:#2b60a7;border:1px solid #DCE4EA;border-radius:5px;opacity:1}ul.cart-buttons>li a{white-space:nowrap}\n"]
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.overview-header .overview-step-nr{border-radius:50%}.flex-center,.step-content-delivery,.step-content-customer{display:flex}.flex-center,.step-content-delivery{flex-direction:row}.step-content-customer{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.step-content-customer,.step-content-delivery{padding-bottom:20px}.step-content-customer,.step-content-delivery{padding-top:20px}.step-content-customer,.step-content-delivery{padding-left:20px}.step-content-customer,.step-content-delivery{padding-right:20px}.overview-body{padding-left:30px}.overview-body{padding-right:30px}.overview-body{padding-top:30px}.overview-body{padding-bottom:30px}ul.cart-buttons>li{padding-left:11px}ul.cart-buttons>li{padding-right:11px}ul.cart-buttons{margin-top:20px}ul.cart-buttons{margin-bottom:20px}.overview-header .overview-step-nr{color:#f7fafa}.overview-header .overview-step-nr{background-color:#2b60a7}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}.checkout-viewport{max-width:60%;margin-left:20%}.mat-label{font-family:Montserrat,Arial,Helvetica,sans-serif}.default-flex-row{flex-direction:row;box-sizing:border-box;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:flex}.default-flex-column{display:flex;flex-direction:column;width:200px}.privacy-row{display:flex;flex-direction:row;margin-bottom:20px}.privacy-column-left{display:flex;flex-direction:column;min-width:150px;max-width:150px;overflow-wrap:break-word}.privacy-column-right{display:flex;flex-direction:row;margin-left:50px}.checkout-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.checkout-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}co-input-radio-button{margin-left:16px}.checkout-overview h2{font-size:18px;font-weight:bold}.checkout-overview h3{font-size:15px}mat-horizontal-stepper{position:sticky;top:0;z-index:30}::ng-deep .mat-horizontal-content-container{display:none}.step-content-customer{background-color:#fff}.step-content-delivery{background-color:#fff}::ng-deep .step-wrapper{width:auto;background:rgba(255,255,255,.25)}::ng-deep .step-wrapper button-colijn{margin-top:20px}::ng-deep .step-wrapper.payment{align-items:center!important;justify-content:left!important}.overview-header{background:rgba(255,255,255,.25);border-top-left-radius:5px;border-top-right-radius:5px}.overview-header .overview-step-nr{width:20px;height:20px;text-align:center;font-weight:bold}.overview-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.overview-body .contact-option-value{align-self:center}.overview-header-label{font-weight:bold}.overview-label{font-weight:bold}ul.cart-buttons{display:flex;justify-content:space-between;flex-wrap:nowrap;list-style-type:none}ul.cart-buttons>li{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:40px;background-color:#f7fafa;cursor:pointer;font-size:15px;color:#2b60a7;border:1px solid #DCE4EA;border-radius:5px;opacity:1}ul.cart-buttons>li a{white-space:nowrap}\n"]
             },] }
 ];
 CheckoutOverviewRelationAddressComponent.ctorParameters = () => [
@@ -3698,7 +3862,7 @@ CheckoutOverviewDeliveryAddressComponent.decorators = [
       </div>
     </div>
   `,
-                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.overview-header .overview-step-nr{border-radius:50%}.flex-center,.step-content-customer,.step-content-delivery{display:flex}.step-content-delivery,.flex-center{flex-direction:row}.step-content-customer{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.step-content-delivery,.step-content-customer{padding-bottom:20px}.step-content-delivery,.step-content-customer{padding-top:20px}.step-content-delivery,.step-content-customer{padding-left:20px}.step-content-delivery,.step-content-customer{padding-right:20px}.overview-body{padding-left:30px}.overview-body{padding-right:30px}.overview-body{padding-top:30px}.overview-body{padding-bottom:30px}ul.cart-buttons>li{padding-left:11px}ul.cart-buttons>li{padding-right:11px}ul.cart-buttons{margin-top:20px}ul.cart-buttons{margin-bottom:20px}.overview-header .overview-step-nr{color:#f7fafa}.overview-header .overview-step-nr{background-color:#2b60a7}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}.checkout-viewport{max-width:60%;margin-left:20%}.mat-label{font-family:Montserrat,Arial,Helvetica,sans-serif}.default-flex-row{flex-direction:row;box-sizing:border-box;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:flex}.default-flex-column{display:flex;flex-direction:column;width:200px}.privacy-row{display:flex;flex-direction:row;margin-bottom:20px}.privacy-column-left{display:flex;flex-direction:column;min-width:150px;max-width:150px;overflow-wrap:break-word}.privacy-column-right{display:flex;flex-direction:row;margin-left:50px}.checkout-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.checkout-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}co-input-radio-button{margin-left:16px}.checkout-overview h2{font-size:18px;font-weight:bold}.checkout-overview h3{font-size:15px}mat-horizontal-stepper{position:sticky;top:0;z-index:30}::ng-deep .mat-horizontal-content-container{display:none}.step-content-customer{background-color:#fff}.step-content-delivery{background-color:#fff}::ng-deep .step-wrapper{width:auto;background:rgba(255,255,255,.25)}::ng-deep .step-wrapper button-colijn{margin-top:20px}::ng-deep .step-wrapper.payment{align-items:center!important;justify-content:left!important}.overview-header{background:rgba(255,255,255,.25);border-top-left-radius:5px;border-top-right-radius:5px}.overview-header .overview-step-nr{width:20px;height:20px;text-align:center;font-weight:bold}.overview-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.overview-body .contact-option-value{align-self:center}.overview-header-label{font-weight:bold}.overview-label{font-weight:bold}ul.cart-buttons{display:flex;justify-content:space-between;flex-wrap:nowrap;list-style-type:none}ul.cart-buttons>li{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:40px;background-color:#f7fafa;cursor:pointer;font-size:15px;color:#2b60a7;border:1px solid #DCE4EA;border-radius:5px;opacity:1}ul.cart-buttons>li a{white-space:nowrap}\n", ""]
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.overview-header .overview-step-nr{border-radius:50%}.flex-center,.step-content-delivery,.step-content-customer{display:flex}.flex-center,.step-content-delivery{flex-direction:row}.step-content-customer{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.step-content-customer,.step-content-delivery{padding-bottom:20px}.step-content-customer,.step-content-delivery{padding-top:20px}.step-content-customer,.step-content-delivery{padding-left:20px}.step-content-customer,.step-content-delivery{padding-right:20px}.overview-body{padding-left:30px}.overview-body{padding-right:30px}.overview-body{padding-top:30px}.overview-body{padding-bottom:30px}ul.cart-buttons>li{padding-left:11px}ul.cart-buttons>li{padding-right:11px}ul.cart-buttons{margin-top:20px}ul.cart-buttons{margin-bottom:20px}.overview-header .overview-step-nr{color:#f7fafa}.overview-header .overview-step-nr{background-color:#2b60a7}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}.checkout-viewport{max-width:60%;margin-left:20%}.mat-label{font-family:Montserrat,Arial,Helvetica,sans-serif}.default-flex-row{flex-direction:row;box-sizing:border-box;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:flex}.default-flex-column{display:flex;flex-direction:column;width:200px}.privacy-row{display:flex;flex-direction:row;margin-bottom:20px}.privacy-column-left{display:flex;flex-direction:column;min-width:150px;max-width:150px;overflow-wrap:break-word}.privacy-column-right{display:flex;flex-direction:row;margin-left:50px}.checkout-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.checkout-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}co-input-radio-button{margin-left:16px}.checkout-overview h2{font-size:18px;font-weight:bold}.checkout-overview h3{font-size:15px}mat-horizontal-stepper{position:sticky;top:0;z-index:30}::ng-deep .mat-horizontal-content-container{display:none}.step-content-customer{background-color:#fff}.step-content-delivery{background-color:#fff}::ng-deep .step-wrapper{width:auto;background:rgba(255,255,255,.25)}::ng-deep .step-wrapper button-colijn{margin-top:20px}::ng-deep .step-wrapper.payment{align-items:center!important;justify-content:left!important}.overview-header{background:rgba(255,255,255,.25);border-top-left-radius:5px;border-top-right-radius:5px}.overview-header .overview-step-nr{width:20px;height:20px;text-align:center;font-weight:bold}.overview-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.overview-body .contact-option-value{align-self:center}.overview-header-label{font-weight:bold}.overview-label{font-weight:bold}ul.cart-buttons{display:flex;justify-content:space-between;flex-wrap:nowrap;list-style-type:none}ul.cart-buttons>li{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:40px;background-color:#f7fafa;cursor:pointer;font-size:15px;color:#2b60a7;border:1px solid #DCE4EA;border-radius:5px;opacity:1}ul.cart-buttons>li a{white-space:nowrap}\n", ""]
             },] }
 ];
 CheckoutOverviewDeliveryAddressComponent.ctorParameters = () => [
@@ -3790,7 +3954,7 @@ CheckOutRelationSuggestionsListItemComponent.decorators = [
         </div>
         <co-button [label]="'SELECT' | localize" class="popup rounded" (click)="buttonClick.emit($event)"></co-button>
     `,
-                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}:host,.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}:host{flex-shrink:0}:host{padding-top:11px}:host{padding-bottom:11px}div.email,div.address,div.phone{padding-bottom:5px}:host{padding-top:20px}div.right,:host{padding-left:11px}:host{padding-right:11px}:host{position:relative}:host:hover co-button.popup{visibility:visible}co-button.popup{position:absolute!important}co-button.popup{transform:translate(-50%,-50%)}co-button.popup{top:50%;left:50%;margin-right:-50%}co-button.popup{visibility:hidden}div.name{font-weight:bold}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{background-color:#fff;border:1px solid #DCE4EA;border-radius:5px;margin:5px;max-width:250px}:host:hover{background-color:#e8eceb}div.name{font-size:15px}div.email,div.address,div.phone{color:#747b87;font-size:13px}div.right{display:flex;flex-direction:column;justify-content:center}\n"]
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center,:host{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}:host{flex-shrink:0}:host{padding-top:11px}:host{padding-bottom:11px}div.email,div.address,div.phone{padding-bottom:5px}:host{padding-top:20px}:host,div.right{padding-left:11px}:host{padding-right:11px}:host{position:relative}:host:hover co-button.popup{visibility:visible}co-button.popup{position:absolute!important}co-button.popup{transform:translate(-50%,-50%)}co-button.popup{top:50%;left:50%;margin-right:-50%}co-button.popup{visibility:hidden}div.name{font-weight:bold}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{background-color:#fff;border:1px solid #DCE4EA;border-radius:5px;margin:5px;max-width:250px}:host:hover{background-color:#e8eceb}div.name{font-size:15px}div.email,div.address,div.phone{color:#747b87;font-size:13px}div.right{display:flex;flex-direction:column;justify-content:center}\n"]
             },] }
 ];
 CheckOutRelationSuggestionsListItemComponent.ctorParameters = () => [];
@@ -4022,7 +4186,7 @@ ImageDisplayComponent.decorators = [
       <ng-content></ng-content>
     </div>
   `,
-                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}div.img-wrapper,:host,.flex-center{display:flex}.flex-center{flex-direction:row}div.img-wrapper,:host,.flex-center{align-items:center!important;justify-content:center!important}div.image,div.img-wrapper,:host{width:100%}div.image,div.img-wrapper,:host{height:100%}div.img-wrapper{position:relative}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host.cover-image div.image{background-size:cover}:host.circle .img-wrapper,:host.circle .image{border-radius:50%}div.image{background-repeat:no-repeat;background-size:contain;background-position:center center}\n"]
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center,:host,div.img-wrapper{display:flex}.flex-center{flex-direction:row}.flex-center,:host,div.img-wrapper{align-items:center!important;justify-content:center!important}:host,div.img-wrapper,div.image{width:100%}:host,div.img-wrapper,div.image{height:100%}div.img-wrapper{position:relative}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host.cover-image div.image{background-size:cover}:host.circle .img-wrapper,:host.circle .image{border-radius:50%}div.image{background-repeat:no-repeat;background-size:contain;background-position:center center}\n"]
             },] }
 ];
 ImageDisplayComponent.propDecorators = {
@@ -4075,9 +4239,10 @@ class IconComponent {
 }
 IconComponent.decorators = [
     { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
                 selector: "icon",
                 template: "",
-                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}:host.circle{border-radius:50%}.flex-center{display:flex}:host{display:inline-flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}:host.no-shrink{flex-shrink:0}:host.action ::ng-deep{cursor:pointer}:host ::ng-deep svg{width:100%}:host ::ng-deep svg{height:100%}:host.massive{width:100px;height:100px}:host.humongous{width:70px;height:70px}:host.very-big{width:45px;height:45px}:host.big{width:40px;height:40px}:host{width:30px;height:30px}:host.small{width:25px;height:25px}:host.nano{width:18px;height:18px}:host.pico{width:14px;height:14px}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host.dark ::ng-deep [fill]{fill:#22313c}:host.light ::ng-deep [fill]{fill:#fff}:host.red ::ng-deep [fill]{fill:#c1002a}:host.grey ::ng-deep [fill]{fill:#dad9d9}:host.action-color ::ng-deep [fill]{fill:#2b60a7}:host.inactive{opacity:.25}:host.disabled{opacity:.25!important}:host:hover.action ::ng-deep [fill]{fill:#2b60a7}\n"]
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.circle:host{border-radius:50%}.flex-center{display:flex}:host{display:inline-flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.no-shrink:host{flex-shrink:0}:host.action ::ng-deep{cursor:pointer}:host ::ng-deep svg{width:100%}:host ::ng-deep svg{height:100%}.massive:host{width:100px;height:100px}.humongous:host{width:70px;height:70px}.very-big:host{width:45px;height:45px}.big:host{width:40px;height:40px}:host{width:30px;height:30px}.small:host{width:25px;height:25px}.nano:host{width:18px;height:18px}.pico:host{width:14px;height:14px}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host.dark ::ng-deep [fill]{fill:#22313c}:host.light ::ng-deep [fill]{fill:#fff}:host.red ::ng-deep [fill]{fill:#c1002a}:host.grey ::ng-deep [fill]{fill:#dad9d9}:host.action-color ::ng-deep [fill]{fill:#2b60a7}:host.inactive{opacity:.25}:host.disabled{opacity:.25!important}:host:hover.action ::ng-deep [fill]{fill:#2b60a7}\n"]
             },] }
 ];
 IconComponent.ctorParameters = () => [
@@ -4161,7 +4326,6 @@ IoneCheckoutModule.decorators = [
                     IoneCheckoutComponent,
                 ],
                 providers: [
-                    IOneConnectorAdapterService,
                     DictionaryService,
                     TransactionService,
                     OptionsService
@@ -4174,6 +4338,12 @@ IoneCheckoutModule.decorators = [
             },] }
 ];
 
+var PositionGridRow;
+(function (PositionGridRow) {
+    PositionGridRow["Before"] = "before";
+    PositionGridRow["After"] = "after";
+})(PositionGridRow || (PositionGridRow = {}));
+
 class ShoppingCartManagerComponent {
     constructor(service, transactionEvents, promptService, _dictionaryService) {
         this.service = service;
@@ -4203,6 +4373,12 @@ class ShoppingCartManagerComponent {
         }), this.transactionEvents.addToCartBySku.subscribe((params) => {
             this.waitForLinesChangedToOpenCart = params.popCart;
             this.addToCart(params.sku, params.amount).then();
+        }), this.transactionEvents.addArticleLineAt.subscribe((params) => {
+            this.addArticleLineToCartAt(params.sku, params.amount, params.lineNr, params.beforeOrAfter).then();
+        }), this.transactionEvents.addTextLineAt.subscribe((params) => {
+            this.addTextLineToCartAt(params.text, params.lineNr, params.beforeOrAfter).then();
+        }), this.transactionEvents.changeLineSequence.subscribe((params) => {
+            this.changeLineSequence(params.fromIndex, params.toIndex).then();
         }), this.transactionEvents.addToCartBySelectorResult.subscribe((params) => {
             this.waitForLinesChangedToOpenCart = params.popCart;
             this.addToCartBySelectorResult(params.selectorResult).then();
@@ -4244,6 +4420,41 @@ class ShoppingCartManagerComponent {
             this.articleAdded.emit();
         });
     }
+    addArticleLineToCartAt(sku, amount, lineNr, beforeOrAfter) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const goodId = yield this.service.getGoodIdFromArticleNr(sku);
+            yield this._loadArticle(goodId);
+            yield this._createTransaction();
+            yield this._handleAddArticleLineAt(amount, lineNr, beforeOrAfter);
+            this.articleAdded.emit();
+        });
+    }
+    addTextLineToCartAt(text, lineNr, beforeOrAfter) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.service.addTextLineToTransaction(0, text, 0, false, 0, beforeOrAfter === PositionGridRow.Before ? lineNr : undefined, beforeOrAfter === PositionGridRow.After ? lineNr : undefined)
+                .then((value) => {
+                this._handleLineOperationStatus();
+            }, (error) => this.promptService.showError(error));
+        });
+    }
+    changeLineSequence(fromIndex, toIndex) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let fromLine = this._getTransactionLineInfoByIndex(fromIndex);
+            let toLine = this._getTransactionLineInfoByIndex(toIndex);
+            let aboveLineNr;
+            let belowLineNr;
+            if (fromIndex > toIndex) {
+                aboveLineNr = toLine.lineNr;
+            }
+            else {
+                belowLineNr = toLine.lineNr;
+            }
+            yield this.service.changeLineSequence(fromLine.uuid, aboveLineNr, belowLineNr)
+                .then((value) => {
+                this._handleLineOperationStatus();
+            }, (error) => this.promptService.showError(error));
+        });
+    }
     addToCartBySelectorResult(result) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this._loadArticle(result.goodId);
@@ -4316,7 +4527,7 @@ class ShoppingCartManagerComponent {
             }
             else {
                 if (this.editingLine === undefined) {
-                    yield this.service.addTransactionLine(TransactionLineType.ArticleLine, this.newArticleNr, this.amount, this.selectedWarehouseNr, this.commissionCode, this.isReturn)
+                    yield this.service.addTransactionLine(TransactionLineType.ArticleLine, this.newArticleNr, this.amount, this.selectedWarehouseNr, this.commissionCode, this.isReturn, 0, 0)
                         .then((value) => {
                         this._handleLineOperationStatus();
                     });
@@ -4352,7 +4563,15 @@ class ShoppingCartManagerComponent {
     }
     _handleAddArticle(amount = 1) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.service.addTransactionLine(TransactionLineType.ArticleLine, this.newArticleNr, amount, this.newArticle.standardWareHouse, this.newArticle.commissionCode)
+            yield this.service.addTransactionLine(TransactionLineType.ArticleLine, this.newArticleNr, amount, this.newArticle.standardWareHouse, this.newArticle.commissionCode, false, 0, 0)
+                .then((value) => {
+                this._handleLineOperationStatus();
+            }, (error) => this.promptService.showError(error));
+        });
+    }
+    _handleAddArticleLineAt(amount, lineNr, beforeOrAfter) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.service.addTransactionLine(TransactionLineType.ArticleLine, this.newArticleNr, amount, this.newArticle.standardWareHouse, this.newArticle.commissionCode, false, beforeOrAfter === PositionGridRow.Before ? lineNr : undefined, beforeOrAfter === PositionGridRow.After ? lineNr : undefined)
                 .then((value) => {
                 this._handleLineOperationStatus();
             }, (error) => this.promptService.showError(error));
@@ -4486,9 +4705,19 @@ class ShoppingCartManagerComponent {
             // eslint-disable-next-line no-magic-numbers
         }, 1000);
     }
+    _getLineUuidByLineNr(lineNr) {
+        const transactionLine = this.service.currentLines.filter(transLines => transLines.lineNr === lineNr);
+        return transactionLine[0].uuid;
+    }
+    _getTransactionLineInfoByIndex(index) {
+        if (index >= 0 && index < this.service.currentLines.length) {
+            return this.service.currentLines[index];
+        }
+    }
 }
 ShoppingCartManagerComponent.decorators = [
     { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
                 selector: "shopping-cart-manager",
                 template: `
     <co-dialog #warehouseDialog
@@ -4536,7 +4765,7 @@ ShoppingCartManagerComponent.decorators = [
       (okClick)="handleCharacteristicAnswerOkClick($event)"
     ></characteristic-answer>
   `,
-                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.warehouse-line-container,.flex-center{display:flex}.warehouse-line-container,.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.commission-fields,::ng-deep #warehouseDialog ::ng-deep .form-content .message-field{margin-left:11px}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}::ng-deep #warehouseDialog{align-items:center;max-height:100%}::ng-deep #warehouseDialog ::ng-deep co-form{height:100%;width:500px}::ng-deep #warehouseDialog ::ng-deep .form-content{height:calc(100% - 80px);width:100%}::ng-deep #warehouseDialog ::ng-deep .form-content .message-field{height:20px;word-wrap:break-word;white-space:normal}co-button:not(:last-child){margin-right:10px}.commission-fields{justify-content:space-between;margin:10px 0}.warehouse-description-item{width:15rem}.warehouse-nr-item{width:5rem}co-input-number-picker co-button{max-width:20px}\n"]
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center,.warehouse-line-container{display:flex}.flex-center,.warehouse-line-container{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}::ng-deep #warehouseDialog ::ng-deep .form-content .message-field,.commission-fields{margin-left:11px}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}::ng-deep #warehouseDialog{align-items:center;max-height:100%}::ng-deep #warehouseDialog ::ng-deep co-form{height:100%;width:500px}::ng-deep #warehouseDialog ::ng-deep .form-content{height:calc(100% - 80px);width:100%}::ng-deep #warehouseDialog ::ng-deep .form-content .message-field{height:20px;word-wrap:break-word;white-space:normal}co-button:not(:last-child){margin-right:10px}.commission-fields{justify-content:space-between;margin:10px 0}.warehouse-description-item{width:15rem}.warehouse-nr-item{width:5rem}co-input-number-picker co-button{max-width:20px}\n"]
             },] }
 ];
 ShoppingCartManagerComponent.ctorParameters = () => [
@@ -4571,12 +4800,6 @@ var ContentViewMode;
     ContentViewMode[ContentViewMode["Timeline"] = 4] = "Timeline";
 })(ContentViewMode || (ContentViewMode = {}));
 
-var PositionGridRow;
-(function (PositionGridRow) {
-    PositionGridRow["Before"] = "before";
-    PositionGridRow["After"] = "after";
-})(PositionGridRow || (PositionGridRow = {}));
-
 class ShoppingCartComponent {
     constructor(iconCacheService, _dictionary, service, _transactionEvents, _changeDetector) {
         this.iconCacheService = iconCacheService;
@@ -4603,7 +4826,7 @@ class ShoppingCartComponent {
         });
         this.setFilteredCollection(this.service.currentLines);
         const mediaQuery = "(min-width: 500px)";
-        this.columns.push({ field: "lineNr", headerText: this._dictionary.get("NR"), allowFiltering: false }, { field: "articleNumber", headerText: this._dictionary.get("ARTICLE_NR") }, { field: "goodDescription", headerText: this._dictionary.get("GOOD_DESCRIPTION"), hideAtMedia: mediaQuery }, { field: "amount", headerText: this._dictionary.get("NUMBER"), textAlign: "Right" }, { field: "price", headerText: this._dictionary.get("PRICE"), format: "C2", textAlign: "Right" }, { field: "priceListCode", headerText: this._dictionary.get("PRICE_LIST"), hideAtMedia: mediaQuery }, { field: "lineDiscount", headerText: this._dictionary.get("DISCOUNT_PERCENTAGE"), format: "C2", visible: false, hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "specialDiscount", headerText: this._dictionary.get("SPECIAL_DISCOUNT"), format: "C2", visible: false, hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "discountAmount", headerText: this._dictionary.get("DISCOUNT_AMOUNT"), format: "C2", visible: false, hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "surchargeAmount", headerText: this._dictionary.get("SURCHARGE_AMOUNT"), format: "C2", visible: false, hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "assemblyCost", headerText: this._dictionary.get("ASSEMBLY_COSTS"), format: "C2", visible: false, hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "grossLineTotal", headerText: this._dictionary.get("TOTAL_GROSS"), format: "C2", visible: true, hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "lineTotalDiscountAmount", headerText: this._dictionary.get("DISCOUNT"), format: "C2", visible: false, hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "netLineTotal", headerText: this._dictionary.get("SUBTOTAL"), format: "C2", visible: false, textAlign: "Right" }, { field: "vatId", headerText: this._dictionary.get("VAT"), hideAtMedia: mediaQuery, visible: false, textAlign: "Right" }, { field: "priceDeclaration", headerText: this._dictionary.get("TRANSACTION_PRICE_DECLARATION"), visible: false, hideAtMedia: mediaQuery }, { field: "netto", headerText: this._dictionary.get("NETT"), format: "C2", hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "warehouseNumber", headerText: this._dictionary.get("WAREHOUSE"), hideAtMedia: mediaQuery, textAlign: "Right" });
+        this.columns.push({ field: "lineNr", headerText: this._dictionary.get("NR"), allowFiltering: false, allowSorting: false }, { field: "text", headerText: this._dictionary.get("TEXT") }, { field: "articleNumber", headerText: this._dictionary.get("ARTICLE_NR") }, { field: "goodDescription", headerText: this._dictionary.get("GOOD_DESCRIPTION"), hideAtMedia: mediaQuery }, { field: "amount", headerText: this._dictionary.get("NUMBER"), textAlign: "Right" }, { field: "price", headerText: this._dictionary.get("PRICE"), format: "C2", textAlign: "Right" }, { field: "priceListCode", headerText: this._dictionary.get("PRICE_LIST"), hideAtMedia: mediaQuery }, { field: "lineDiscount", headerText: this._dictionary.get("DISCOUNT_PERCENTAGE"), format: "C2", visible: false, hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "specialDiscount", headerText: this._dictionary.get("SPECIAL_DISCOUNT"), format: "C2", visible: false, hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "discountAmount", headerText: this._dictionary.get("DISCOUNT_AMOUNT"), format: "C2", visible: false, hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "surchargeAmount", headerText: this._dictionary.get("SURCHARGE_AMOUNT"), format: "C2", visible: false, hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "assemblyCost", headerText: this._dictionary.get("ASSEMBLY_COSTS"), format: "C2", visible: false, hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "grossLineTotal", headerText: this._dictionary.get("TOTAL_GROSS"), format: "C2", visible: true, hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "lineTotalDiscountAmount", headerText: this._dictionary.get("DISCOUNT"), format: "C2", visible: false, hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "netLineTotal", headerText: this._dictionary.get("SUBTOTAL"), format: "C2", visible: false, textAlign: "Right" }, { field: "vatId", headerText: this._dictionary.get("VAT"), hideAtMedia: mediaQuery, visible: false, textAlign: "Right" }, { field: "priceDeclaration", headerText: this._dictionary.get("TRANSACTION_PRICE_DECLARATION"), visible: false, hideAtMedia: mediaQuery }, { field: "netto", headerText: this._dictionary.get("NETT"), format: "C2", hideAtMedia: mediaQuery, textAlign: "Right" }, { field: "warehouseNumber", headerText: this._dictionary.get("WAREHOUSE"), hideAtMedia: mediaQuery, textAlign: "Right" });
         this.contextMenuItems.push({ text: this._dictionary.get("ADD_ARTICLE_LINE_UP"), target: ".e-content", id: "articleLineUp" }, { text: this._dictionary.get("ADD_ARTICLE_LINE_DOWN"), target: ".e-content", id: "articleLineDown" }, { text: this._dictionary.get("ADD_ARTICLE_TEXT_LINE_UP"), target: ".e-content", id: "articleTextLineUp" }, { text: this._dictionary.get("ADD_ARTICLE_TEXT_LINE_DOWN"), target: ".e-content", id: "articleTextLineDown" });
     }
     get filteredCollection() {
@@ -4617,7 +4840,7 @@ class ShoppingCartComponent {
             property: "lineNr",
             type: SortType.Number
         };
-        SortUtils.SortObjectArray(this._filteredCollection, [sortByLineNr]);
+        //    SortUtils.SortObjectArray(this._filteredCollection, [sortByLineNr]);
     }
     ngAfterViewInit() {
         this.hideSidebar();
@@ -4698,28 +4921,27 @@ class ShoppingCartComponent {
         const lineNr = this._selectedRow.lineNr;
         switch (args.item.id) {
             case "articleLineUp":
-                this._transactionEvents.addArticleLine.next({ lineNr: lineNr, beforeOrAfter: PositionGridRow.Before });
+                //        this._transactionEvents.addArticleLine.next({lineNr: lineNr, beforeOrAfter: PositionGridRow.Before});
+                this._transactionEvents.addArticleLineAt.next({ sku: "iPod", amount: 1, lineNr: lineNr, beforeOrAfter: PositionGridRow.Before });
                 break;
             case "articleLineDown":
-                this._transactionEvents.addArticleLine.next({ lineNr: lineNr, beforeOrAfter: PositionGridRow.After });
+                //        this._transactionEvents.addArticleLine.next({lineNr: lineNr, beforeOrAfter: PositionGridRow.After});
+                this._transactionEvents.addArticleLineAt.next({ sku: "iPod", amount: 1, lineNr: lineNr, beforeOrAfter: PositionGridRow.After });
                 break;
             case "articleTextLineUp":
-                this._transactionEvents.addTextLine.next({ lineNr: lineNr, beforeOrAfter: PositionGridRow.Before });
+                //        this._transactionEvents.addTextLine.next({lineNr: lineNr, beforeOrAfter: PositionGridRow.Before});
+                this._transactionEvents.addTextLineAt.next({ text: "textregel before", lineNr: lineNr, beforeOrAfter: PositionGridRow.Before });
                 break;
             case "articleTextLineDown":
-                this._transactionEvents.addTextLine.next({ lineNr: lineNr, beforeOrAfter: PositionGridRow.After });
+                //        this._transactionEvents.addTextLine.next({lineNr: lineNr, beforeOrAfter: PositionGridRow.After});
+                this._transactionEvents.addTextLineAt.next({ text: "textregel after", lineNr: lineNr, beforeOrAfter: PositionGridRow.After });
                 break;
         }
     }
-    rowDragStart(args) {
-        // @ts-ignore
-        // tslint:disable-next-line:no-console
-        console.log("Drag start -> Nummer: " + args.data[0].Nummer + ", Index: " + args.fromIndex);
-    }
     rowDrop(args) {
-        // @ts-ignore
-        // tslint:disable-next-line:no-console
-        console.log("Drop -> Nummer: " + args.data[0].Nummer + ", drag Index: " + args.fromIndex + ", drop Index: " + args.dropIndex);
+        this._transactionEvents.changeLineSequence.next({ fromIndex: args.fromIndex, toIndex: args.dropIndex });
+        // Transaction lines will be reloaded by previous action on success, not by failure. So, cancel the drop in all cases.
+        args.cancel = true;
     }
 }
 ShoppingCartComponent.decorators = [
@@ -4754,12 +4976,12 @@ ShoppingCartComponent.decorators = [
           [data]="filteredCollection"
           [rowDragAndDropEnabled]="true"
           [contextMenuItems]="contextMenuItems"
+          [sortingEnabled]="false"
           [columns]="columns"
           [pagingEnabled]="'true'"
           [maxNumberOfRows]="'20'"
           (rowsSelected)="handleRowsSelected($event)"
           (contextMenuItemClick)="menuItemClick($event)"
-          (rowDragStartEvent)="rowDragStart($event)"
           (rowDropEvent)="rowDrop($event)"
         ></co-grid>
       </div>
@@ -4862,6 +5084,19 @@ ShoppingCartComponent.propDecorators = {
     overview: [{ type: Output }]
 };
 
+// <co-sidebar #catalogSidebar isOpen="false" *ngIf="showCatalogSidebar">
+// <div class="relation-sidebar-header">
+// <label [textContent]="'ARTICLE' | localize "
+// class="checkout-label-h3"
+// ></label>
+// </div>
+// <app-ione-catalog
+//   [settings]="options"
+//   [parameters]="{publicationCode: 71}"
+// (onAddToCart)="addToCart($event)"
+// (onAddArticleButtonClick)="addArticleButtonClick($event)"
+//   ></app-ione-catalog>
+//   </co-sidebar>
 class IoneShoppingCartComponent {
     constructor(_changeDetector, _optionsService, _connector, _dictionary, _service, transactionEvents, _promptService) {
         this._changeDetector = _changeDetector;
@@ -4877,6 +5112,11 @@ class IoneShoppingCartComponent {
         this.closeCart = new EventEmitter();
         this.checkout = new EventEmitter();
         this.overview = new EventEmitter();
+        this.addArticleLine = new EventEmitter();
+        this.addTextLine = new EventEmitter();
+        this.showCatalogSidebar = false;
+        this.currentArticleLineNr = 0;
+        this.currentPositionGridRow = PositionGridRow.After;
         this.show = false;
         this.amountOfLines = 0;
         this.upAndLoaded = false;
@@ -4884,24 +5124,26 @@ class IoneShoppingCartComponent {
         this._subscriptions = [];
         this._remoteOptions = true;
         this._publicOptions = true;
-        this._subscriptions.push(this._optionsService.optionsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)));
+        this._subscriptions.push(this._optionsService.optionsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)), this.transactionEvents.addArticleLine.subscribe(args => this._handleAddArticleLine(args)), this.transactionEvents.addTextLine.subscribe(args => this._handleAddTextLine(args)));
     }
     set options(value) {
         if (value) {
-            let options;
             if (typeof value === "string") {
-                options = JSON.parse(value);
+                this._options = JSON.parse(value);
             }
             else {
-                options = value;
+                this._options = value;
             }
             this._publicOptions = true;
-            this._optionsService.initialize(options).then();
+            this._optionsService.initialize(this._options).then();
         }
     }
     get transactionNr() {
         return this._service.currentTransaction.transactionNr;
     }
+    get options() {
+        return this._options;
+    }
     ngOnInit() {
         if (!this._publicOptions) {
             this._optionsService.initializeDevelopmentOptions(this._remoteOptions);
@@ -4925,6 +5167,18 @@ class IoneShoppingCartComponent {
     addArticle(articleNo, amount) {
         this.transactionEvents.addToCartBySku.next({ sku: articleNo, amount: amount, popCart: true });
     }
+    addArticleButtonClick(article) {
+        this.transactionEvents.addArticleLineAt.next({ sku: article.articleNumber, amount: 1, lineNr: this.currentArticleLineNr, beforeOrAfter: this.currentPositionGridRow });
+    }
+    addToCart(article) {
+        this.transactionEvents.addArticleLineAt.next({ sku: article.articleNumber, amount: 1, lineNr: this.currentArticleLineNr, beforeOrAfter: this.currentPositionGridRow });
+    }
+    addArticleLineAt(articleNo, amount, lineNr, beforeOrAfter) {
+        this.transactionEvents.addArticleLineAt.next({ sku: articleNo, amount: amount, lineNr: lineNr, beforeOrAfter: beforeOrAfter });
+    }
+    addTextLineAt(text, lineNr, beforeOrAfter) {
+        this.transactionEvents.addTextLineAt.next({ text: text, lineNr: lineNr, beforeOrAfter: beforeOrAfter });
+    }
     addArticleByBySelectorResult(selectorResult, popCart) {
         this.transactionEvents.addToCartBySelectorResult.next({ selectorResult: selectorResult, popCart: popCart });
     }
@@ -4948,9 +5202,19 @@ class IoneShoppingCartComponent {
             });
         });
     }
+    _handleAddArticleLine(args) {
+        //this.addArticleLine.next(args);
+        this.showCatalogSidebar = true;
+        this.currentArticleLineNr = args.lineNr;
+        this.currentPositionGridRow = args.beforeOrAfter;
+    }
+    _handleAddTextLine(args) {
+        this.addTextLine.next(args);
+    }
 }
 IoneShoppingCartComponent.decorators = [
     { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
                 selector: "ione-shopping-cart",
                 template: `
     <ng-container *ngIf="upAndLoaded">
@@ -4989,7 +5253,9 @@ IoneShoppingCartComponent.propDecorators = {
     hideCloseCartButton: [{ type: Input }],
     closeCart: [{ type: Output }],
     checkout: [{ type: Output }],
-    overview: [{ type: Output }]
+    overview: [{ type: Output }],
+    addArticleLine: [{ type: Output }],
+    addTextLine: [{ type: Output }]
 };
 
 class ShoppingCartLineComponent {
@@ -5138,7 +5404,7 @@ ShoppingCartLineComponent.decorators = [
          [textContent]="line.text">
     </div>
   `,
-                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.cart-line-r .cart-line-description .cart-line-description-artnr{font-size:10px}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}:host{padding-bottom:20px}:host{padding-top:20px}.cart-line-r .cart-line-right .cart-line-totals,.cart-line-r .cart-line-right .cart-line-stock,.cart-line-r .cart-line-image,.cart-line-r .cart-line-right .cart-line-amount,.cart-line-r .cart-line-description{margin-top:20px}.cart-line-r .cart-line-right .cart-line-totals,.cart-line-r .cart-line-right .cart-line-stock,.cart-line-r .cart-line-image,.cart-line-r .cart-line-right .cart-line-amount,.cart-line-r .cart-line-description{margin-bottom:20px}.cart-line-r .cart-line-right .cart-line-totals,.cart-line-t,.cart-line-r .cart-line-right .cart-line-amount,.cart-line-r .cart-line-description{margin-left:20px}.cart-line-t,.cart-line-r .cart-line-right .cart-line-amount,.cart-line-r .cart-line-description{margin-right:20px}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{display:flex;flex-wrap:wrap;border-bottom:1px solid #DBE3E8;width:100%}:host.overlayed.is-text{display:none!important}:host.overlayed.is-selected{background-color:#add8e6}:host.overview.is-text{display:none!important}:host.overview.is-selected{background-color:#add8e6}.cart-line-r{display:flex;justify-content:stretch;flex-direction:row}@media (max-width: 800px){.cart-line-r{flex-direction:column}}.cart-line-r co-button{border:0;padding:0}.cart-line-r .cart-line-image{display:flex;flex:1 0 auto!important;flex-direction:column;align-items:center;justify-content:center}.cart-line-r .cart-line-image image-display{width:6em;height:6em}.cart-line-r .cart-line-description{display:flex;flex-direction:column;width:100%}.cart-line-r .cart-line-description .cart-line-description-main{font-weight:bold}.cart-line-r .cart-line-right{justify-content:flex-end}.cart-line-r .cart-line-right .cart-line-stock{width:10em}.cart-line-r .cart-line-right .cart-line-amount{width:10em}.cart-line-r .cart-line-right .cart-line-totals{display:flex;justify-content:flex-end;min-width:100px;font-weight:bold}.cart-line-r .cart-line-right .cart-line-totals span{text-align:right}.cart-line-t.article-text{padding-left:10em}\n"]
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.cart-line-r .cart-line-description .cart-line-description-artnr{font-size:10px}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}:host{padding-bottom:20px}:host{padding-top:20px}.cart-line-r .cart-line-description,.cart-line-r .cart-line-right .cart-line-amount,.cart-line-r .cart-line-image,.cart-line-r .cart-line-right .cart-line-stock,.cart-line-r .cart-line-right .cart-line-totals{margin-top:20px}.cart-line-r .cart-line-description,.cart-line-r .cart-line-right .cart-line-amount,.cart-line-r .cart-line-image,.cart-line-r .cart-line-right .cart-line-stock,.cart-line-r .cart-line-right .cart-line-totals{margin-bottom:20px}.cart-line-r .cart-line-description,.cart-line-r .cart-line-right .cart-line-amount,.cart-line-t,.cart-line-r .cart-line-right .cart-line-totals{margin-left:20px}.cart-line-r .cart-line-description,.cart-line-r .cart-line-right .cart-line-amount,.cart-line-t{margin-right:20px}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{display:flex;flex-wrap:wrap;border-bottom:1px solid #DBE3E8;width:100%}:host.overlayed.is-text{display:none!important}:host.overlayed.is-selected{background-color:#add8e6}:host.overview.is-text{display:none!important}:host.overview.is-selected{background-color:#add8e6}.horizontal{display:flex;flex-direction:row-reverse}.cart-line-r{display:flex;justify-content:stretch;flex-direction:row}@media (max-width: 800px){.cart-line-r{flex-direction:column}}.cart-line-r co-button{border:0;padding:0}.cart-line-r .cart-line-image{display:flex;flex:1 0 auto!important;flex-direction:column;align-items:center;justify-content:center}.cart-line-r .cart-line-image image-display{width:6em;height:6em}.cart-line-r .cart-line-description{display:flex;flex-direction:column;width:100%}.cart-line-r .cart-line-description .cart-line-description-main{font-weight:bold}.cart-line-r .cart-line-right{justify-content:flex-end}.cart-line-r .cart-line-right .cart-line-stock{width:10em}.cart-line-r .cart-line-right .cart-line-amount{width:10em}.cart-line-r .cart-line-right .cart-line-totals{display:flex;justify-content:flex-end;min-width:100px;font-weight:bold}.cart-line-r .cart-line-right .cart-line-totals span{text-align:right}.cart-line-t.article-text{padding-left:10em}\n"]
             },] }
 ];
 ShoppingCartLineComponent.ctorParameters = () => [
@@ -5172,7 +5438,7 @@ StockStatusIndicatorComponent.decorators = [
             <div class="square-3"></div>
         </div>
     `,
-                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}:host{display:inline-block}:host>div,.flex-center{display:flex}.flex-center{flex-direction:row}:host>div,.flex-center{align-items:center!important;justify-content:center!important}:host>div{width:100%}:host>div{height:100%}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{background-color:#ffffff40;width:30px;height:20px}:host>div>div{width:5px;height:5px;flex-shrink:0;flex-grow:0;margin-right:2px}:host>div.low>div.square-1,:host>div.empty>div.square-1,:host>div.none>div.square-1{background-color:#c1002a}:host>div.low>div.square-2,:host>div.low div.square-3,:host>div.empty>div.square-2,:host>div.empty div.square-3,:host>div.none>div.square-2,:host>div.none div.square-3{background-color:#dad9d9}:host>div.medium>div.square-1,:host>div.medium div.square-2{background-color:#df7c2a}:host>div.medium>div.square-3{background-color:#dad9d9}:host>div.high>div.square-1,:host>div.high div.square-2,:host>div.high div.square-3{background-color:#429777}\n"]
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}:host{display:inline-block}.flex-center,:host>div{display:flex}.flex-center{flex-direction:row}.flex-center,:host>div{align-items:center!important;justify-content:center!important}:host>div{width:100%}:host>div{height:100%}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{background-color:#ffffff40;width:30px;height:20px}:host>div>div{width:5px;height:5px;flex-shrink:0;flex-grow:0;margin-right:2px}:host>div.low>div.square-1,:host>div.empty>div.square-1,:host>div.none>div.square-1{background-color:#c1002a}:host>div.low>div.square-2,:host>div.low div.square-3,:host>div.empty>div.square-2,:host>div.empty div.square-3,:host>div.none>div.square-2,:host>div.none div.square-3{background-color:#dad9d9}:host>div.medium>div.square-1,:host>div.medium div.square-2{background-color:#df7c2a}:host>div.medium>div.square-3{background-color:#dad9d9}:host>div.high>div.square-1,:host>div.high div.square-2,:host>div.high div.square-3{background-color:#429777}\n"]
             },] }
 ];
 StockStatusIndicatorComponent.propDecorators = {
@@ -5308,10 +5574,9 @@ IoneShoppingCartModule.decorators = [
                     PopupModule.forRoot(),
                     CoSidebarModule,
                     CoGridModule,
-                    CoreModule,
+                    CoreModule
                 ],
                 providers: [
-                    IOneConnectorAdapterService,
                     DictionaryService,
                     TransactionService,
                     OptionsService
@@ -5319,16 +5584,1959 @@ IoneShoppingCartModule.decorators = [
                 entryComponents: [
                     IoneShoppingCartComponent
                 ],
-                exports: [IoneShoppingCartComponent],
+                exports: [IoneShoppingCartComponent, StockStatusIndicatorComponent],
                 bootstrap: [IoneShoppingCartComponent]
             },] }
 ];
 
+class IoneServiceOrderComponent {
+    constructor(_changeDetector, _optionsService, _connector, _dictionary, _service) {
+        this._changeDetector = _changeDetector;
+        this._optionsService = _optionsService;
+        this._connector = _connector;
+        this._dictionary = _dictionary;
+        this._service = _service;
+        this.orderNr = 0;
+        this.orderId = 0;
+        this.upAndLoaded = false;
+        this._subscriptions = [];
+        this._remoteOptions = true;
+        this._publicOptions = true;
+        this._subscriptions.push(this._optionsService.optionsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)));
+    }
+    set options(value) {
+        if (value) {
+            let options;
+            if (typeof value === "string") {
+                options = JSON.parse(value);
+            }
+            else {
+                options = value;
+            }
+            this._publicOptions = true;
+            this._optionsService.initialize(options).then();
+        }
+    }
+    ngOnInit() {
+        if (!this._publicOptions) {
+            this._optionsService.initializeDevelopmentOptions(this._remoteOptions);
+        }
+    }
+    ngOnDestroy() {
+        this._subscriptions.forEach(subscription => subscription.unsubscribe());
+    }
+    _handleSettingsLoaded(loaded) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (loaded) {
+                yield this._initConnection().then();
+                this.upAndLoaded = true;
+            }
+        });
+    }
+    _initConnection() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._connector.connect(this._optionsService.options);
+            if (this.orderNr) {
+                yield this._service.getTransaction(this.orderNr);
+            }
+            else if (this.orderId) {
+                yield this._service.getTransactionById(this.orderId);
+            }
+            else {
+                yield this._service.getTransaction(IoneServiceOrderComponent.TEST_ORDER_NR);
+            }
+            if (this._optionsService.options.url) {
+                this._dictionary.rootUrl = this._optionsService.options.url.replace("/ajaxservice", "");
+            }
+            yield this._dictionary.setDictionary(this._optionsService.options.languageCode);
+            setTimeout(() => {
+                this._changeDetector.detectChanges();
+            });
+        });
+    }
+}
+IoneServiceOrderComponent.TEST_ORDER_NR = 18156;
+IoneServiceOrderComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "ione-service-order",
+                template: `
+    <div>
+        <service-order></service-order>
+    </div>
+    <transaction-sidebar-right></transaction-sidebar-right>
+  `
+            },] }
+];
+IoneServiceOrderComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: OptionsService },
+    { type: IOneConnectorAdapterService },
+    { type: DictionaryService },
+    { type: TransactionService }
+];
+IoneServiceOrderComponent.propDecorators = {
+    orderNr: [{ type: Input }],
+    orderId: [{ type: Input }],
+    options: [{ type: Input }]
+};
+
+class TransactionBaseComponent {
+    constructor(service) {
+        this.service = service;
+        this.relation = NULL_RELATION_LIST_OBJECT;
+        this.customer = NULL_CUSTOMER_FULL_OBJECT;
+        this._isService = false;
+        this.basedOnProduct = false;
+    }
+    set transaction(value) {
+        this._transaction = value;
+        if (this._transaction && this._transaction.transactionInfo) {
+            this._isService = this._transaction.transactionInfo.transactionKind === TransactionKind.ServiceOrder;
+        }
+    }
+    get transaction() {
+        return this._transaction;
+    }
+    get transactionInfo() {
+        return this._transaction.transactionInfo;
+    }
+    get transactionLines() {
+        if (this._transaction) {
+            return this._transaction.transactionLines;
+        }
+    }
+    get transactionTotal() {
+        if (this._transaction) {
+            return this._transaction.transactionTotal;
+        }
+    }
+    get isService() {
+        return this._isService;
+    }
+    set relationId(value) {
+        if (value === undefined) {
+            return;
+        }
+        this._relationId = value;
+        this._retrieveRelation();
+    }
+    get relationId() {
+        return this._relationId;
+    }
+    set customerId(value) {
+        if (value === undefined) {
+            return;
+        }
+        this._customerId = value;
+        this._retrieveCustomer();
+    }
+    get customerId() {
+        return this._customerId;
+    }
+    set product(value) {
+        this._product = value;
+        this.productSet();
+        this._setBasedOnProduct();
+    }
+    get product() {
+        return this._product;
+    }
+    get isNew() {
+        return isNill$1(this.transaction) || isNill$1(this.transactionInfo.transactionNr);
+    }
+    transactionSet() {
+        // overridden by descendents
+    }
+    productSet() {
+        // overridden by descendents
+    }
+    _retrieveCustomer() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.customer = yield this.service.getCustomerFulObjectByRelationId(this._customerId);
+        });
+    }
+    _retrieveRelation() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const relationRequest = new RelationRequest();
+            let relations = [];
+            relationRequest.relationId = this.relationId;
+            relations = yield this.service.getRelationListObjects(relationRequest);
+            if (relations && relations.length) {
+                this.relation = relations[0];
+            }
+        });
+    }
+    _setBasedOnProduct() {
+        if (this.product) {
+            this.basedOnProduct = true;
+        }
+        else { //check transaction (service) for product
+            // TODO: assProduct is not a property of transaction right now.
+            // this.basedOnProduct = notNill(this._transaction.assProduct);
+            // if (this.basedOnProduct) {
+            //     this._product = this.transaction.assProduct;
+            // }
+        }
+    }
+}
+TransactionBaseComponent.decorators = [
+    { type: Directive }
+];
+TransactionBaseComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionBaseComponent.propDecorators = {
+    transaction: [{ type: Input }],
+    relationId: [{ type: Input }],
+    customerId: [{ type: Input }],
+    product: [{ type: Input }],
+    relation: [{ type: Input }],
+    customer: [{ type: Input }]
+};
+
+class TransactionArticleTextComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.visible = false;
+        this.floatButtonSelected = false;
+        this.overviewSelected = false;
+        this.editArtikelText = false;
+        this.collection = [
+            { id: 1, name: "Standaardtekst 1" },
+            { id: 2, name: "Standaardtekst 1" },
+            { id: 3, name: "Standaardtekst 1" },
+            { id: 4, name: "Standaardtekst 1" },
+            { id: 5, name: "Standaardtekst 1" }
+        ];
+        this.articleTexts = [
+            { title: "title 1", description: "Omschrijving 1" },
+            { title: "title 2", description: "Omschrijving 2" },
+            { title: "title 3", description: "Omschrijving 3" },
+            { title: "title 4", description: "Omschrijving 4" },
+            { title: "title 5", description: "Omschrijving 5" },
+        ];
+        this.fields = { text: "name", value: "id" };
+    }
+    onOkClick() {
+        this.hide();
+    }
+    onPopupClose() {
+        this.hide();
+        this.hideOverview();
+        this.hideEditArtikelText();
+    }
+    hide() {
+        // TODO: throw hide event
+        this.visible = false;
+    }
+    onOverview() {
+        this.overviewSelected = true;
+    }
+    onOkOverviewClick() {
+        this.hideOverview();
+    }
+    hideOverview() {
+        this.overviewSelected = false;
+    }
+    onDetailLinkClick(bo) {
+        this.editArtikelText = true;
+    }
+    hideEditArtikelText() {
+        this.editArtikelText = false;
+    }
+    onOkEditArtikelTextClick() {
+        this.editArtikelText = false;
+    }
+}
+TransactionArticleTextComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-article-text",
+                template: `
+        <co-dialog [visible]="visible" (close)="onPopupClose()">
+          <ng-container header>{{ subHeader }}</ng-container>
+          <ng-container content>
+                <div class="tags-join-content" fxLayout fxLayoutGap="10px">
+                    <div class="column-separator">
+                        <co-input-text placeholder="Titel"></co-input-text>
+<!--transactiontransaction-->
+<!--                                label="Artikeltekst"-->
+<!--                        ></co-text-editor>-->
+                    </div>
+                    <div style="margin-left:5px;">
+                        <div style="margin-top:16px;">
+                            <ejs-dropdownlist
+                                    [dataSource]="collection"
+                                    [fields]="fields"
+                                    placeholder="Standaardteksten"
+                            ></ejs-dropdownlist>
+                        </div>
+                        <div style="margin-top:20px;">
+                            <co-input-checkbox
+                                    label="Artikelgebonden tekst"
+                                    name="articleBoundText">
+                            </co-input-checkbox>
+                        </div>
+                        <div style="margin-top:20px;">
+                            <label>Bestemd voor documenten</label>
+                            <ejs-chiplist id="chip-default">
+                                <e-chips>
+                                    <e-chip text="Apple" cssClass="e-primary"></e-chip>
+                                    <e-chip text="Microsoft" cssClass="e-info"></e-chip>
+                                    <e-chip text="Google" cssClass="e-success"></e-chip>
+                                    <e-chip text="Tesla" cssClass="e-warning"></e-chip>
+                                    <e-chip text="Intel" cssClass="e-danger"></e-chip>
+                                </e-chips>
+                            </ejs-chiplist>
+                        </div>
+                    </div>
+                </div>
+              </ng-container>
+              <ng-container footer>
+                <div class="footer" fxLayout fxLayoutAlign="center center" fxLayoutGap="10px" style="margin-top:30px;">
+                    <co-button label="OK" (click)="onOkClick()"></co-button>
+                    <co-button label="CANCEL" (click)="hide()"></co-button>
+                    <co-button label="OVERVIEW" (click)="onOverview()"></co-button>
+                </div>
+              </ng-container>
+        </co-dialog>
+
+        <co-dialog [visible]="overviewSelected" (close)="hideOverview()">
+          <ng-container header>Artikelgebonden teksten {{ subHeader }}</ng-container>
+          <ng-container content>
+                <div class="tags-join-content" fxLayout fxLayoutGap="10px">
+                    <div class="column-separator" style="width:75%">
+<!--                        <grid [data]="articleTexts" detailLink (detailLinkClick)="onDetailLinkClick($event)">-->
+<!--                            <grid-column key="title" header="TITLE" width="100px;"></grid-column>-->
+<!--                            <grid-column key="description" header="DESCRIPTION" width="200px"></grid-column>-->
+<!--                        </grid>-->
+                    </div>
+                    <div style="margin-left:5px;">
+                        <div style="margin-top:20px;">
+
+                            <co-input-checkbox
+                                    label="Artikelgebonden tekst"
+                                    name="articleBoundText"
+                                    value="true"
+                            ></co-input-checkbox>
+                        </div>
+                        <div style="margin-top:20px;">
+                            <label>Bestemd voor documenten</label>
+                            <ejs-chiplist id="chip-default">
+                                <e-chips>
+                                    <e-chip text="Apple" cssClass="e-primary"></e-chip>
+                                    <e-chip text="Microsoft" cssClass="e-info"></e-chip>
+                                    <e-chip text="Google" cssClass="e-success"></e-chip>
+                                    <e-chip text="Tesla" cssClass="e-warning"></e-chip>
+                                    <e-chip text="Intel" cssClass="e-danger"></e-chip>
+                                </e-chips>
+                            </ejs-chiplist>
+                        </div>
+                    </div>
+                </div>
+          </ng-container>
+          <ng-container footer>
+                <div class="footer" fxLayout fxPosition="row" fxLayoutAlign="center center" fxLayoutGap="10px" style="margin-top:30px;">
+                    <co-button label="OK" (click)="onOkOverviewClick()"></co-button>
+                    <co-button label="CANCEL" (click)="hideOverview()"></co-button>
+                </div>
+          </ng-container>
+        </co-dialog>
+
+        <co-dialog [visible]="editArtikelText"  (close)="hideEditArtikelText()">
+          <ng-container header>{{ subHeader }}</ng-container>
+          <ng-container content>
+                <div class="tags-join-content" fxLayout fxLayoutGap="10px">
+                    <div class="column-separator">
+                        <co-input-text placeholder="Titel"></co-input-text>
+<!--                        <co-text-editor-->
+<!--                                label="Artikeltekst"-->
+<!--                        ></co-text-editor>-->
+                    </div>
+                </div>
+          </ng-container>
+          <ng-container footer>
+              <div class="footer" fxLayout fxLayoutAlign="center center" fxLayoutGap="10px" style="margin-top:30px;">
+                  <co-button label="OK" (click)="onOkEditArtikelTextClick()"></co-button>
+                  <co-button label="CANCEL" (click)="hideEditArtikelText()"></co-button>
+              </div>
+          </ng-container>
+        </co-dialog>
+    `,
+                styles: [""]
+            },] }
+];
+TransactionArticleTextComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionArticleTextComponent.propDecorators = {
+    subHeader: [{ type: Input }]
+};
+
+class ServiceOrderComponent extends TransactionBaseComponent {
+    constructor(service, transactionEvents, iconCacheService) {
+        super(service);
+        this.service = service;
+        this.transactionEvents = transactionEvents;
+        this.iconCacheService = iconCacheService;
+        this.iconThickLines = CoreComponentsIcon.ThickLines;
+        this.iconThinLines = CoreComponentsIcon.ThinLines;
+        this.iconOrder = CoreComponentsIcon.Order;
+        this.viewModes = ContentViewMode;
+        this.canPlanDelivery = false;
+        this.showTotals = true;
+        this.contextMenuItems = [];
+        this.isRouteOptimizationConfigured = false;
+        this.activeViewMode = ContentViewMode.List;
+        this.floatButtonSelected = false;
+        this._subs = [];
+    }
+    get inListView() {
+        return this.activeViewMode === ContentViewMode.List;
+    }
+    get inGridView() {
+        return this.activeViewMode === ContentViewMode.Grid;
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._subs.push(this.service.transactionLoaded.subscribe((transactionInfoResponse) => {
+                if (transactionInfoResponse.isSuccess) {
+                    this.transaction = transactionInfoResponse;
+                    if (this.transaction && this.transaction.transactionInfo) {
+                        this.customerId = Number(this.transaction.transactionInfo.relation.relationNr);
+                        this.relationId = this.transaction.transactionInfo.relation.relationId;
+                    }
+                }
+            }), this.transactionEvents.rightSidebarClose.subscribe(() => {
+                this.moveFloatingButtonToRight();
+            }), this.transactionEvents.transactionLineClicked.subscribe((transactionLine) => {
+                this._selectedTransLine = transactionLine;
+                this.moveFloatingButtonToLeft();
+            }), this.transactionEvents.scrollContent.subscribe((event) => {
+                this.hideOrderTotals(event);
+            }));
+        });
+    }
+    ngOnDestroy() {
+        this._subs.forEach(sub => sub.unsubscribe());
+    }
+    animationFn() {
+        return trigger("showPopup", [
+            state("void", style({ transform: "translate3d(0, 0, 0)" })),
+            state("*", style({ transform: "translate3d(100%, 0, 0)" })),
+            transition("void <=> *", [
+                animate("200ms ease-in-out")
+            ])
+        ]);
+    }
+    trackByFn(index, line) {
+        return line.lineNr;
+    }
+    handleRowsSelected(rows) {
+        this._selectedTransLine = rows.find(x => x !== undefined);
+    }
+    handlePlanningRequest(event) {
+        // TODO: handlePlanningRequest... from new Planning package
+    }
+    moveFloatingButtonToLeft() {
+        if (this.floatButtonRightPosition === ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITHOUT_SIDEBAR) {
+            this.floatButtonRightPosition = ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITH_SIDEBAR;
+        }
+    }
+    moveFloatingButtonToRight() {
+        if (this.floatButtonRightPosition === ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITH_SIDEBAR) {
+            this.floatButtonRightPosition = ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITHOUT_SIDEBAR;
+        }
+    }
+    onOkClick() {
+        this.hide();
+    }
+    hide() {
+        this.floatButtonSelected = false;
+    }
+    floatButtonClick() {
+        this.floatButtonSelected = true;
+        this._transactionArticleTextComponent.visible = this.floatButtonSelected;
+    }
+    get subHeader() {
+        if (this._selectedTransLine && this._selectedTransLine !== undefined) {
+            return this._selectedTransLine.goodDescription;
+        }
+        return "";
+    }
+    hideOrderTotals(event) {
+        this.showTotals = false;
+    }
+}
+ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITHOUT_SIDEBAR = 50;
+ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITH_SIDEBAR = 350;
+ServiceOrderComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "service-order",
+                template: `
+      <div id="transaction-general-tab" style="height:100%;">
+        <transaction-header-block
+          [relationId]="relationId"
+          [transaction]="transaction"
+          [canPlanDelivery]="canPlanDelivery"
+          (planningRequestButtonClick)="handlePlanningRequest($event)"
+        ></transaction-header-block>
+        <div *ngIf="!isService">
+          <div class="transaction-view" fxLayout="row" fxLayoutGap="1px" fxLayoutAlign="flex-end">
+            <div class="view-mode-buttons">
+              <co-button [iconData]="iconCacheService.getIcon(iconThickLines)"
+                         [title]="'LIST_VIEW' | localize"
+                         (click)="this.activeViewMode = viewModes.List"
+                         class="triangle white"
+                         iconClass="medium light"></co-button>
+              <co-button [iconData]="iconCacheService.getIcon(iconThinLines)"
+                         [title]="'GRID_VIEW' | localize"
+                         (click)="this.activeViewMode = viewModes.Grid"
+                         class="triangle white"
+                         iconClass="medium light"></co-button>
+            </div>
+          </div>
+          <div *ngIf="this.activeViewMode === viewModes.List">
+            <transaction-order-line-view *ngFor="let line of transactionLines; trackBy:trackByFn;"
+                                         [line]="line"
+            ></transaction-order-line-view>
+          </div>
+          <div *ngIf="this.activeViewMode === viewModes.Grid">
+            <transaction-order-lines [transaction]="transaction"></transaction-order-lines>
+          </div>
+          <div class="floating-icon-wrapper" [style.right.px]="floatButtonRightPosition">
+          <icon [icon]="iconOrder"
+                class="light"
+                (click)="floatButtonClick()" id="floatingIcon"
+                [style.right.px]="floatButtonRightPosition"></icon>
+          </div>
+        </div>
+        <transaction-order-totals *ngIf="!isService"
+                                  [transactionTotal]="transactionTotal"
+                                  [ngClass]="showTotals ? 'transaction-totals-show' : 'transaction-totals-hide'"></transaction-order-totals>
+      </div>
+
+      <transaction-article-text></transaction-article-text>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center,:host :host{display:flex}.flex-center{flex-direction:row}:host :host{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.transaction-view .view-mode-buttons{margin-left:11px}:host :host{width:100%}:host :host{overflow:hidden}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host :host{padding-bottom:60px}.page-wrapper :host{padding:20px;margin-bottom:60px}:host transaction-order-totals{display:flex;flex-direction:column;align-items:flex-end}:host .transaction-totals-show{padding:20px}:host .transaction-totals-hide{position:relative;bottom:0;right:0}::ng-deep #transaction_planning_agenda{top:160px!important;width:calc(100vw - 80px)!important}::ng-deep #transaction_planning_agenda .popup-card-title{padding:10px 20px;background:#74B77F;color:#fff}::ng-deep #transaction_planning_agenda .popup-card-title .header-wrapper{align-items:center!important}::ng-deep #transaction_planning_agenda .popup-card-title .separator{border-color:#fff!important}::ng-deep #transaction_planning_agenda .popup-card-title .header{font-size:15px;font-weight:normal}::ng-deep #transaction_planning_agenda .popup-card-title .sub-header{font-size:18px;color:#fff!important;font-weight:bold!important}::ng-deep #transaction_planning_agenda .popup-card-title button-select icon [fill]{fill:#fff}::ng-deep #transaction_planning_agenda .popup-card-content{overflow:hidden}@media only screen and (max-width: 599px){::ng-deep #transaction_planning_agenda{width:100vw!important}::ng-deep #transaction_planning_agenda .popup-card-content{padding:0}}.column-separator{padding-right:25px;border-right:1px solid #0000001c}.floating-icon-wrapper{position:fixed;bottom:50px;right:50px;display:flex;flex-shrink:0;align-items:center;justify-content:center;background:#475060;height:50px;width:50px;opacity:.5;transition:opacity .4s ease-in-out;border-radius:50%;overflow:hidden;box-shadow:0 0 6px #0009;-webkit-box-shadow:0px 0px 6px 0px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 6px 0px rgba(0,0,0,.6);cursor:pointer}.floating-icon-wrapper:hover{opacity:1;transition:opacity .4s ease-in-out}.floating-icon-wrapper ::ng-deep icon{height:44px!important;width:44px!important;color:#fff!important;flex-shrink:0}.transaction-wrapper{padding:0 20px}.view-mode-buttons co-button{padding:0}.transaction-view{display:flex;margin-top:10px;justify-content:stretch}.transaction-view .view-mode-buttons{display:flex;flex-direction:row}.transaction-view .view-mode-buttons button-select ::ng-deep button-colijn{border-radius:0}.transaction-view .view-mode-buttons button-select:first-child{margin-right:5px}.transaction-view .view-mode-buttons button-select:first-child ::ng-deep button-colijn{border-radius:3px}.transaction-view .view-mode-buttons button-select:nth-child(2) ::ng-deep button-colijn{border-top-left-radius:3px;border-bottom-left-radius:3px}.transaction-view .view-mode-buttons button-select:last-child ::ng-deep button-colijn{border-top-right-radius:3px;border-bottom-right-radius:3px}\n"]
+            },] }
+];
+ServiceOrderComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: TransactionEventService },
+    { type: IconCacheService }
+];
+ServiceOrderComponent.propDecorators = {
+    _transactionArticleTextComponent: [{ type: ViewChild, args: [TransactionArticleTextComponent, { static: false },] }]
+};
+
+class TransactionOrderTotalsComponent /*extends TransactionBaseComponent*/ {
+    constructor(service) {
+        this.service = service;
+        //super(service);
+    }
+}
+TransactionOrderTotalsComponent.decorators = [
+    { type: Component, args: [{
+                selector: "transaction-order-totals",
+                template: `
+        <div class="totals-wrapper">
+            <div class="totals-item">
+                <div class="totals-item-description" [textContent]="'SUBTOTAL' | localize"></div>
+                <div class="totals-item-value" [textContent]="transactionTotal.grossAmount | coCurrency | coCurrency"></div>
+            </div>
+            <div class="totals-item">
+                <div class="totals-item-description" [textContent]="'VAT_AMOUNT' | localize"></div>
+                <div class="totals-item-value" [textContent]="transactionTotal.surchargeAmount | coCurrency"></div>
+            </div>
+            <div class="totals-item total">
+                <div class="totals-item-description" [textContent]="'TRANSACTION_SUM_I' | localize"></div>
+                <div class="totals-item-value" [textContent]="transactionTotal.netAmount | coCurrency"></div>
+            </div>
+        </div>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host .totals-wrapper{width:310px;font-size:13px}:host .totals-item{display:flex;flex-direction:row;height:25px;align-items:center}:host .totals-item>div{text-align:end;width:50%}:host .totals-item.total{font-weight:bold;height:30px;border-top:1px solid #DCE4EA}\n"]
+            },] }
+];
+TransactionOrderTotalsComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionOrderTotalsComponent.propDecorators = {
+    transactionTotal: [{ type: Input }]
+};
+
+class TransactionOrderLineViewComponent {
+    constructor(_service, _eventService) {
+        this._service = _service;
+        this._eventService = _eventService;
+        this.stock = StockStatus.Low;
+    }
+    ngOnInit() {
+        this._loadArticleImage();
+    }
+    _loadArticleImage() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.line) {
+                this.image = this.line ? yield this._service.retrieveLineImage(this.line) : undefined;
+            }
+        });
+    }
+    transactionLineClick(line) {
+        this._eventService.transactionLineClicked.next(this.line);
+    }
+}
+TransactionOrderLineViewComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-order-line-view",
+                template: `
+            <div class="transaction-order-line-r" fxFlex (click)="transactionLineClick(line)">
+                <div fxLayout="row" class="full-width">
+                    <div fxLayout="column" class="transaction-order-line-description" fxLayoutGap="20px">
+                        <div fxLayout="row" fxLayoutGap="10px">
+                            <span [textContent]="line.goodDescription" class="cart-line-description-main"></span>
+                            <span *ngIf="line.goodDescription && line.articleNumber">|</span>
+                            <span [textContent]="line.articleNumber" class="cart-line-description-artnr"></span>
+                        </div>
+                        <div>
+                            <span [innerHTML]="line.configurationReadable" class="cart-line-description-detail"></span>
+                        </div>
+                    </div>
+                    <div fxLayout="column" class="transaction-order-line-image">
+                        <image-display [model]="image"></image-display>
+                    </div>
+                </div>
+                <div fxLayout="row" class="transaction-order-line-right">
+                    <div fxLayout="column" class="transaction-order-line-stock">
+                        <span [textContent]="'STOCK' | localize" class="small-font"></span>
+                        <stock-status-indicator [model]="stock"></stock-status-indicator>
+                        <span [textContent]="'DELIVERY_TIME_PERIOD' | localize" class="small-font"></span>
+                        <span [textContent]="line.deliveryDate | deliveryTime"></span>
+                    </div>
+                    <div class="transaction-order-line-amount">
+                      <co-input-number-picker
+                        class="horizontal"
+                        [(model)]="line.amount" [min]="0" [buttonShowMode]="'always'"
+                        [readonly]="true"></co-input-number-picker>
+                    </div>
+                    <div class="transaction-order-line-totals">
+                        <span [textContent]="line.netLineTotal | coCurrency: true"></span>
+                    </div>
+                </div>
+            </div>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.transaction-order-line-r .transaction-order-line-description .cart-line-description-artnr{font-size:10px}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount,.transaction-order-line-r .transaction-order-line-image,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-stock,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{margin-top:20px}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount,.transaction-order-line-r .transaction-order-line-image,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-stock,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{margin-bottom:20px}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{margin-left:20px}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount{margin-right:20px}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{display:block;padding:20px}:host ::ng-deep collapseable{width:100%!important}.horizontal{display:flex;flex-direction:row}.service-request-button-wrapper{display:flex;justify-content:center;margin-top:20px}.transaction-order-line-r{display:flex;justify-content:stretch;flex-direction:row}@media (max-width: 800px){.transaction-order-line-r{flex-direction:column}}.transaction-order-line-r .transaction-order-line-image{display:flex;flex:1 0 auto!important;flex-direction:column;align-items:center;justify-content:center;padding-right:10px}.transaction-order-line-r .transaction-order-line-image image-display{width:6em;height:6em}.transaction-order-line-r .transaction-order-line-image ::ng-deep no-image-display{display:none}.transaction-order-line-r .transaction-order-line-description{display:flex;flex-direction:column;width:auto;max-width:355px;margin-left:10px}.transaction-order-line-r .transaction-order-line-description .cart-line-description-main{font-weight:bold}.transaction-order-line-r .transaction-order-line-right{justify-content:flex-end;align-items:center}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-stock{width:10em}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount{width:10em}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{display:flex;justify-content:flex-end;min-width:100px;font-weight:bold}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals span{text-align:right}\n"]
+            },] }
+];
+TransactionOrderLineViewComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: TransactionEventService }
+];
+TransactionOrderLineViewComponent.propDecorators = {
+    line: [{ type: Input }]
+};
+
+class TransactionOrderLinesComponent extends TransactionBaseComponent {
+    constructor(service, _eventService, _dictionaryService) {
+        super(service);
+        this.service = service;
+        this._eventService = _eventService;
+        this._dictionaryService = _dictionaryService;
+        this.createServiceClick = new EventEmitter();
+        this.nothingSelected = true;
+        this.columns = [];
+        this.columns.push({ field: "articleNumber", headerText: this._dictionaryService.get("ARTICLE_NR"), allowFiltering: false }, { field: "goodDescription", headerText: this._dictionaryService.get("DESCRIPTION") }, { field: "detailsAsString", headerText: this._dictionaryService.get("DETAILS") }, { field: "price", headerText: this._dictionaryService.get("PRICE") }, { field: "amount", headerText: this._dictionaryService.get("NUMBER") }, { field: "lineTotal", headerText: this._dictionaryService.get("SUBTOTAL") }, { field: "logisticState", headerText: this._dictionaryService.get("STATE") }, { field: "expectedDeliveryDate", headerText: this._dictionaryService.get("EXPECTED_DELIVERY_DATE") });
+    }
+    get pagingEnabled() {
+        if (this.transactionLines) {
+            return this.transactionLines.length >= TransactionOrderLinesComponent.MAX_TRANSACTION_LINES;
+        }
+        return false;
+    }
+    set selectedTransLine(value) {
+        this._selectedTransLine = value;
+        this.nothingSelected = this._selectedTransLine === null;
+    }
+    get selectedTransLine() {
+        return this._selectedTransLine;
+    }
+    onRowClick(row) {
+        this.selectedTransLine = row;
+        this._eventService.transactionLineClicked.next(this.selectedTransLine);
+    }
+    onRowDeselect(event) {
+        this.selectedTransLine = null;
+    }
+    // TODO: navragen wat de bedoeling is, zie originele source iOneJS
+    newServiceRequestClick() {
+        if (this.nothingSelected) {
+            return;
+        }
+        this.createServiceClick.emit(this._selectedTransLine);
+    }
+}
+TransactionOrderLinesComponent.MAX_TRANSACTION_LINES = 20;
+TransactionOrderLinesComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-order-lines",
+                template: `
+        <co-grid #transactionGrid
+                 [data]="transactionLines"
+                 [columns]="columns"
+                 [pagingEnabled]="pagingEnabled"
+                 [maxNumberOfRows]="'20'"
+                 (rowsSelected)="onRowClick($event)"
+        ></co-grid>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.transaction-order-line-r .transaction-order-line-description .cart-line-description-artnr{font-size:10px}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount,.transaction-order-line-r .transaction-order-line-image,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-stock,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{margin-top:20px}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount,.transaction-order-line-r .transaction-order-line-image,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-stock,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{margin-bottom:20px}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{margin-left:20px}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount{margin-right:20px}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{display:block;padding:20px}:host ::ng-deep collapseable{width:100%!important}.service-request-button-wrapper{display:flex;justify-content:center;margin-top:20px}.transaction-order-line-r{display:flex;justify-content:stretch;flex-direction:row}@media (max-width: 800px){.transaction-order-line-r{flex-direction:column}}.transaction-order-line-r .transaction-order-line-image{display:flex;flex:1 0 auto!important;flex-direction:column;align-items:center;justify-content:center;padding-right:10px}.transaction-order-line-r .transaction-order-line-image image-display{width:6em;height:6em}.transaction-order-line-r .transaction-order-line-image ::ng-deep no-image-display{display:none}.transaction-order-line-r .transaction-order-line-description{display:flex;flex-direction:column;width:auto;max-width:355px;margin-left:10px}.transaction-order-line-r .transaction-order-line-description .cart-line-description-main{font-weight:bold}.transaction-order-line-r .transaction-order-line-right{justify-content:flex-end;align-items:center}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-stock{width:10em}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount{width:10em}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{display:flex;justify-content:flex-end;min-width:100px;font-weight:bold}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals span{text-align:right}\n"]
+            },] }
+];
+TransactionOrderLinesComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: TransactionEventService },
+    { type: DictionaryService }
+];
+TransactionOrderLinesComponent.propDecorators = {
+    transactionGrid: [{ type: ViewChild, args: ["transactionGrid",] }],
+    createServiceClick: [{ type: Output }]
+};
+
+class TransactionRelationAddressComponent {
+    constructor(_dictionary, _connector) {
+        this._dictionary = _dictionary;
+        this._connector = _connector;
+        this.countries = [];
+        this.fields = { text: "description", value: "code" };
+        this.postalCodeCheckErrorMessage = "";
+        this._prevPostalCodeForCheck = "";
+    }
+    set address(address) {
+        this._address = address;
+    }
+    get address() {
+        if (this._address === undefined) {
+            this._address = new Address();
+        }
+        return this._address;
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.countries = yield this._connector.getCountries();
+        });
+    }
+    checkForPostalCodeCheckError() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.address.postalCode || isNill$1(this.address.houseNo)) {
+                this.postalCodeCheckErrorMessage = "";
+                return;
+            }
+            if (this._prevPostalCodeForCheck !== this.address.postalCode || this._prevHouseNoForCheck !== this.address.houseNo) {
+                this._prevPostalCodeForCheck = this.address.postalCode;
+                this._prevHouseNoForCheck = this.address.houseNo;
+                const postalCodeResponse = yield this._connector.getPostalCodeRetrieval((this.address.postalCode ? this.address.postalCode : ""), StringUtils.ParseString(this.address.houseNo));
+                if (postalCodeResponse && postalCodeResponse.isBadAddress) {
+                    this.postalCodeCheckErrorMessage = this._dictionary.get("UNKNOWN_ADDRESS_CHECK_IT");
+                }
+                else {
+                    this.postalCodeCheckErrorMessage = "";
+                    this.address.streetName = postalCodeResponse.street;
+                    this.address.city = postalCodeResponse.city;
+                }
+            }
+        });
+    }
+    changeHouseNo() {
+        this.address.houseNo = Number(this.address.houseNo);
+    }
+}
+TransactionRelationAddressComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-relation-address",
+                template: `
+        <label [textContent]="label | localize"
+               class="transaction-relation-label-h3"
+        ></label>
+        <div class="default-flex-row">
+            <div class="default-flex-column">
+              <co-input-text [(model)]="address.postalCode"
+                             [placeholder]="'POSTAL_CODE' | localize"
+                             (blur)="checkForPostalCodeCheckError()"
+                             required
+              ></co-input-text>
+            </div>
+            <div class="default-flex-column">
+              <co-input-text [(model)]="address.houseNo"
+                             [placeholder]="'HOUSE_NO' | localize"
+                             (blur)="checkForPostalCodeCheckError()"
+                             (modelChange) = "changeHouseNo()"
+                             required
+              ></co-input-text>
+            </div>
+            <div class="default-flex-column">
+              <co-input-text [(model)]="address.houseNoAddition"
+                             [placeholder]="'HOUSE_NO_ADDITION' | localize"
+              ></co-input-text>
+            </div>
+        </div>
+        <div>
+            <div class="default-flex-row">
+              <div class="default-flex-column">
+                <co-input-text [(model)]="address.streetName" [placeholder]="'STREET' | localize" required></co-input-text>
+              </div>
+              <div class="default-flex-column">
+                <co-input-text [(model)]="address.city" [placeholder]="'CITY' | localize" required></co-input-text>
+              </div>
+              <div class="default-flex-column">
+                <co-input-combo-box [(model)]="address.countryId"
+                                    [source]="countries"
+                                    [fields]="fields"
+                                    [placeholder]="'COUNTRY'| localize"
+                                    [required]="true"
+                ></co-input-combo-box>
+              </div>
+            </div>
+        </div>
+    `,
+                styles: [".button-wrapper{margin-top:10px;justify-content:center}co-input-radio-button{margin-left:16px}.transaction-relation-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.transaction-relation-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}\n"]
+            },] }
+];
+TransactionRelationAddressComponent.ctorParameters = () => [
+    { type: DictionaryService },
+    { type: IOneConnectorAdapterService }
+];
+TransactionRelationAddressComponent.propDecorators = {
+    label: [{ type: Input }],
+    address: [{ type: Input }]
+};
+
+class TransactionSidebarRightComponent extends TransactionBaseComponent {
+    constructor(service, iconCacheService, _eventService, changeDetector) {
+        super(service);
+        this.service = service;
+        this.iconCacheService = iconCacheService;
+        this._eventService = _eventService;
+        this.changeDetector = changeDetector;
+        this.iconDetailView = CoreComponentsIcon.DetailView;
+        this.iconArrowPointRight = CoreComponentsIcon.ArrowPointRight;
+        this.iconStock = CoreComponentsIcon.Stock;
+        this.iconDocuments = CoreComponentsIcon.Documents;
+        this.test = "";
+        this.defaultSidebar = new Sidebar({
+            width: "320px",
+            type: "Auto",
+            isOpen: false,
+            position: "Right",
+            target: "#app-module-sidebar-right"
+        });
+        this._subscriptions = [];
+        this._subscriptions.push(this._eventService.transactionLineClicked.subscribe((transactionLine) => {
+            this.transactionLine = transactionLine;
+            this.defaultSidebar.show();
+        }));
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.defaultSidebar.appendTo("#default-sidebar");
+            this.sidebarCloseClick();
+            this.changeDetector.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this._subscriptions.forEach(sub => sub.unsubscribe());
+    }
+    sidebarCloseClick() {
+        this.defaultSidebar.hide();
+        this._eventService.rightSidebarClose.next();
+    }
+}
+TransactionSidebarRightComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-sidebar-right",
+                template: `
+        <div id="default-sidebar">
+            <div>
+                <icon [icon]="iconArrowPointRight" (click)="sidebarCloseClick()"></icon>
+                <label [textContent]="transactionLine?.goodDescription"></label>
+            </div>
+            <div>
+                <ejs-tab id="element2">
+                    <e-tabitems>
+                        <e-tabitem>
+                            <ng-template #headerText>
+                                <icon [icon]="iconDetailView" title="Regeldetails"></icon>
+                            </ng-template>
+                            <ng-template #content>
+                                <transaction-line-accordion [transactionLine]="transactionLine"></transaction-line-accordion>
+                            </ng-template>
+                        </e-tabitem>
+                        <e-tabitem>
+                            <ng-template #headerText>
+                                <icon [icon]="iconStock" title="Voorraad"></icon>
+                            </ng-template>
+                            <ng-template #content>
+                                <div style="margin: 10px;">
+                                    <div fxLayout="row" fxLayoutGap="10px">
+                                        <co-input-text placeholder="In voorraad"></co-input-text>
+                                        <co-input-text placeholder="In order voorraad"></co-input-text>
+                                    </div>
+
+                                    <div fxLayout="row" fxLayoutGap="10px">
+                                        <co-input-text placeholder="In order commissie"></co-input-text>
+                                        <co-input-text placeholder="Beschikbaar"></co-input-text>
+                                    </div>
+
+                                    <div fxLayout="row" fxLayoutGap="10px">
+                                        <co-input-text placeholder="In bestelling"></co-input-text>
+                                        <co-input-text placeholder="Later beschikbaar"></co-input-text>
+                                    </div>
+
+                                    <div fxLayout="row" fxLayoutGap="10px">
+                                        <co-input-text placeholder="Toegewezen" [model]="transactionLine?.amount"></co-input-text>
+                                        <co-input-text placeholder="Vrije voorraad"></co-input-text>
+                                    </div>
+                                </div>
+                            </ng-template>
+                        </e-tabitem>
+                        <e-tabitem>
+                            <ng-template #headerText>
+                                <icon [icon]="iconDocuments" title="Documenten en notities"></icon>
+                            </ng-template>
+                            <ng-template #content>
+                                <div>
+                                    Documenten en notities
+                                </div>
+                            </ng-template>
+                        </e-tabitem>
+                    </e-tabitems>
+                </ejs-tab>
+            </div>
+        </div>
+    `,
+                styles: [":host{display:block;width:100%}.e-accordion{border:none}.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon .e-icons{color:#add8e6}.e-tab .e-toolbar-items{display:flex;justify-content:center}\n"]
+            },] }
+];
+TransactionSidebarRightComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: IconCacheService },
+    { type: TransactionEventService },
+    { type: ChangeDetectorRef }
+];
+
+class TransactionLineAccordionComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.transactionLine = new TransactionLineInfo;
+        this.accordion = new Accordion({});
+        this._subscriptions = [];
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.accordion.appendTo("#accordion_html_markup");
+            this.changeDetector.detectChanges();
+        });
+    }
+}
+TransactionLineAccordionComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-line-accordion",
+                template: `
+    <div id='container'>
+      <div id='accordion_html_markup'>
+        <div>
+          <div>Prijsdetails</div>
+          <div>
+            <div style="margin-left:10px;">
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Aantal" [model]="transactionLine?.amount"></co-input-text>
+                <co-input-text placeholder="Verkoopprijs" [model]="transactionLine?.price"></co-input-text>
+              </div>
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Adviesprijs"></co-input-text>
+                <co-input-text placeholder="Totaal korting"></co-input-text>
+              </div>
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Koritngspercentage"></co-input-text>
+                <co-input-text placeholder="Kortingsbedrag" [model]="transactionLine?.discountAmount"></co-input-text>
+              </div>
+
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Speciale korting"></co-input-text>
+                <co-input-text placeholder="Transactiekorting"></co-input-text>
+              </div>
+
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Business rule korting"></co-input-text>
+                <co-input-text placeholder="Kwantumkorting"></co-input-text>
+              </div>
+
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Toeslag"></co-input-text>
+                <co-input-text placeholder="BTW"></co-input-text>
+              </div>
+
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Prijslijst"></co-input-text>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div>Logistiek</div>
+          <div>
+            <div style="margin-left:10px;">
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Commissiecode"></co-input-text>
+                <co-input-text placeholder="Levermethode"></co-input-text>
+              </div>
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Montagetijd"></co-input-text>
+                <co-input-text placeholder="Bewerkingstijd"></co-input-text>
+              </div>
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Leverancier"></co-input-text>
+                <co-input-text placeholder="Artikelnummer leverancier"></co-input-text>
+              </div>
+
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="In/uit collectie"></co-input-text>
+                <co-input-text placeholder="Dropshipment"></co-input-text>
+              </div>
+
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Leverdatum"></co-input-text>
+                <co-input-text placeholder="Referentie"></co-input-text>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div>
+          <div id="header">Opmaak</div>
+          <div id="opmaak">
+            <div style="margin-left:10px;">
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Orderregelset"></co-input-text>
+                <co-input-text placeholder="Hoofdstuk"></co-input-text>
+              </div>
+              <div>
+                <co-input-text placeholder="Laatste wijziging Door"></co-input-text>
+              </div>
+              <div>
+                <co-input-text placeholder="Zichtbaar op documenten"></co-input-text>
+              </div>
+            </div>
+          </div>
+      </div>
+      <div>
+        <div>Artikelkenmerken</div>
+        <div>
+          <div style="margin-left:10px;">
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Breedte"></co-input-text>
+              <co-input-text placeholder="Lengte"></co-input-text>
+            </div>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Hoogte"></co-input-text>
+              <co-input-text placeholder="Zitdiepte"></co-input-text>
+            </div>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Zithoogte"></co-input-text>
+              <co-input-text placeholder="Volume"></co-input-text>
+            </div>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Stopmaat"></co-input-text>
+              <co-input-text placeholder="Patroonhoogte"></co-input-text>
+            </div>
+            <br>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Standaard levertijd"></co-input-text>
+              <co-input-text placeholder="Standaard levertijd verkoop"></co-input-text>
+            </div>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Eenheid verkoop"></co-input-text>
+              <co-input-text placeholder="Verkoophoeveelheid"></co-input-text>
+            </div>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Aantal"></co-input-text>
+              <co-input-text placeholder="Colli"></co-input-text>
+            </div>
+            <br>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Omzetgroep"></co-input-text>
+              <co-input-text placeholder="Artikelgroep"></co-input-text>
+            </div>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Hoofdartikel"></co-input-text>
+              <co-input-text placeholder="Sfeer"></co-input-text>
+            </div>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Concept"></co-input-text>
+              <co-input-text placeholder="Afdeling"></co-input-text>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      </div>
+    </div>
+  `,
+                styles: [""]
+            },] }
+];
+TransactionLineAccordionComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+TransactionLineAccordionComponent.propDecorators = {
+    transactionLine: [{ type: Input }]
+};
+
+class TransactionRelationEditComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.showPopup = false;
+        this.relType = RelationNameKind;
+        this.genderType = GenderType;
+        this.validSubmit = new EventEmitter();
+        this.invalidSubmit = new EventEmitter();
+        this.dateOfBirth = new Date();
+        this.phoneNumber = new ContactOption();
+    }
+    get readonly() {
+        return false;
+    }
+    get subHeader() {
+        return "";
+    }
+    get editFirstAddress() {
+        if (this.firstAddress) {
+            return this.firstAddress;
+        }
+        else if (this.customer) {
+            const address = new Address();
+            address.addressType = AddressType.DeliveryAddress;
+            address.startDate = new Date();
+            address.sequence = this.customer.getNextAddressSequence();
+            this.customer.addresses.push(address);
+            return address;
+        }
+    }
+    get firstAddress() {
+        if (!this.relation || !this.customer.addresses.length) {
+            return;
+        }
+        return this.customer.getFirstAvailableAddress([
+            AddressType.DeliveryAddress,
+            AddressType.BillingAddress,
+            AddressType.VisitingAddress,
+            AddressType.MailingAddress,
+            AddressType.NursingAddress
+        ]);
+    }
+    onPopupClose() {
+        this.showPopup = false;
+    }
+    changeRelationType(relationType) {
+        if (this.customer) {
+            this.customer.type = relationType;
+        }
+    }
+    changeGenderType(genderType) {
+        if (this.customer) {
+            this.customer.gender = genderType;
+        }
+    }
+    firstNameChange(firstName) {
+        if (this.customer) {
+            this.customer.firstName = firstName;
+        }
+    }
+    familyNameChange(familyName) {
+        if (this.customer) {
+            this.customer.familyName = familyName;
+        }
+    }
+}
+TransactionRelationEditComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-relation-edit",
+                template: `
+        <co-dialog [visible]="showPopup" header="ACCOUNT_DETAILS"  (close)="onPopupClose()"
+                    noClickOutside contentSize>
+            <ng-container content>
+            <co-form #transactionRelationEditForm (validSubmit)="validSubmit.emit()" (invalidSubmit)="invalidSubmit.emit()">
+                <div style="min-width: 500px;">
+                    <div>
+                        <label [textContent]="'PERSONAL_DATA' | localize"
+                               class="transaction-relation-label-h3"
+                        ></label>
+                    </div>
+                    <div>
+                        <div>
+                            <label [textContent]="'ORDER_TYPE' | localize "
+                                   class="transaction-relation-label-h3"
+                            ></label>
+                        </div>
+                        <div *ngIf="customer?.type">
+                            <co-input-radio-button [name]="'type'"
+                                                   [label]="'PRIVATE_PERSON' | localize"
+                                                   [value]="relType.Private"
+                                                   [checked]="customer.type === relType.Private"
+                                                   (modelChange)="changeRelationType(relType.Private)"
+                            ></co-input-radio-button>
+                            <co-input-radio-button [name]="'type'"
+                                                   [label]="'COMPANY' | localize"
+                                                   [value]="relType.Company"
+                                                   [checked]="customer.type === relType.Company"
+                                                   (modelChange)="changeRelationType(relType.Company)"
+                            ></co-input-radio-button>
+                        </div>
+                    </div>
+                    <div *ngIf="customer?.type === relType.Private">
+                        <label [textContent]="'SALUTATION' | localize"
+                               class="transaction-relation-label-h3"
+                        ></label>
+                        <div *ngIf="customer?.gender">
+                            <co-input-radio-button [name]="'gender'"
+                                                   [label]="'MALE' | localize"
+                                                   [value]="genderType.Male"
+                                                   [checked]="customer.gender === genderType.Male"
+                                                   (modelChange)="changeGenderType(genderType.Male)"
+                            ></co-input-radio-button>
+                            <co-input-radio-button [name]="'gender'"
+                                                   [label]="'FEMALE' | localize "
+                                                   [value]="genderType.Female"
+                                                   [checked]="customer.gender === genderType.Female"
+                                                   (modelChange)="changeGenderType(genderType.Female)"
+                            ></co-input-radio-button>
+                            <co-input-radio-button [name]="'gender'"
+                                                   [label]="'UNKNOWN' | localize"
+                                                   [value]="genderType.Unspecified"
+                                                   [checked]="customer.gender === genderType.Unspecified"
+                                                   (modelChange)="changeGenderType(genderType.Unspecified)"
+                            ></co-input-radio-button>
+                        </div>
+                    </div>
+                    <div *ngIf="customer?.type === relType.Private">
+                        <div>
+                            <label [textContent]="'NAME' | localize "
+                                   class="transaction-relation-label-h3"
+                            ></label>
+                            <div class="default-flex-row">
+                                <div class="default-flex-column">
+                                    <co-input-text
+                                            [(model)]="customer.firstName"
+                                            [placeholder]="'FIRST_NAME' | localize "
+                                            (modelChange)="firstNameChange($event)"
+                                            required
+                                    ></co-input-text>
+                                </div>
+                                <div class="default-flex-column">
+                                    <co-input-text
+                                            [(model)]="customer.prefix"
+                                            [placeholder]="'PREFIX' | localize "
+                                    ></co-input-text>
+                                </div>
+                                <div class="default-flex-column">
+                                    <co-input-text
+                                            [(model)]="customer.familyName"
+                                            [placeholder]="'LAST_NAME' | localize"
+                                            (modelChange)="familyNameChange($event)"
+                                            required
+                                    ></co-input-text>
+                                </div>
+                                <div class="default-flex-column">
+                                    <co-input-date
+                                            [placeholder]="'DATE_OF_BIRTH' | localize "
+                                            [(model)]="dateOfBirth"
+                                            required
+                                    ></co-input-date>
+                                </div>
+                                <div class="default-flex-column">
+                                    <co-input-text
+                                            [(model)]="phoneNumber.value"
+                                            [placeholder]="'PHONE_NO' | localize "
+                                            required
+                                    ></co-input-text>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <div *ngIf="customer?.type === relType.Company" class="default-flex-column">
+                            <label [textContent]="'COMPANY_NAME' | localize "
+                                   class="transaction-relation-label-h3"
+                            ></label>
+                            <co-input-text
+                                    [(model)]="customer.familyName"
+                                    [label]="'COMPANY_NAME'"
+                                    required
+                            ></co-input-text>
+                        </div>
+                    </div>
+
+                    <div>
+                        <transaction-relation-address
+                                label="DELIVERY_ADDRESS" [address]="editFirstAddress"
+                        ></transaction-relation-address>
+                    </div>
+
+                    <div fxLayout="row" fxLayoutGap="10px" class="button-wrapper">
+                        <default-ok-cancel-buttons
+                                [okDisabled]="readonly"
+                                (okClick)="transactionRelationEditForm.submit()"
+                                (cancelClick)="onPopupClose()"
+                        ></default-ok-cancel-buttons>
+                    </div>
+                </div>
+            </co-form>
+            </ng-container>
+        </co-dialog>
+    `,
+                styles: [".button-wrapper{margin-top:10px;justify-content:center}co-input-radio-button{margin-left:16px}.transaction-relation-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.transaction-relation-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}\n"]
+            },] }
+];
+TransactionRelationEditComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionRelationEditComponent.propDecorators = {
+    transactionRelationEditForm: [{ type: ViewChild, args: ["transactionRelationEditForm", { read: FormComponent },] }],
+    showPopup: [{ type: Input }],
+    validSubmit: [{ type: Output }]
+};
+
+class TransactionHeaderBlockComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.planningRequestButtonClick = new EventEmitter();
+    }
+    showPopupTab(index) {
+        this.selectedTab = index;
+    }
+    tabClick() {
+        this.relationPopup.showPopup = true;
+    }
+    transactionEditClose() {
+        this.relationPopup.showPopup = false;
+    }
+}
+TransactionHeaderBlockComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-header-block",
+                template: `
+        <div fxLayout="row wrap" fxLayout.xs="column">
+            <div class="summary-block" (click)="tabClick()">
+                <div class="block-wrapper">
+                    <div class="content-wrapper">
+                            <div class="name"
+                                 [textContent]="relation?.displayName"></div>
+                            <div class="address link pointer"
+                                 [textContent]="relation?.displayAddressFull"></div>
+                            <div class="phone link pointer"
+                                 [textContent]="relation?.tel1"></div>
+                            <div [textContent]="relation?.email"
+                                 class="email link pointer"
+                            ></div>
+                    </div>
+                </div>
+            </div>
+
+            <transaction-service-info class="summary-block"
+                                      [transaction]="transaction"
+            ></transaction-service-info>
+            <transaction-service-status class="summary-block"
+                                        [transaction]="transaction"
+            ></transaction-service-status>
+            <transaction-order-info class="summary-block"
+                                    [transaction]="transaction"
+            ></transaction-order-info>
+            <transaction-payment-info class="summary-block"
+                                      [transaction]="transaction"
+            ></transaction-payment-info>
+            <transaction-delivery-summary class="summary-block"
+                                          [transaction]="transaction"
+                                          [canPlanDelivery]="!isService && canPlanDelivery"
+                                          (planningRequestButtonClick)="planningRequestButtonClick.emit($event)"
+                                          (click)="showPopupTab(1)"
+            ></transaction-delivery-summary>
+            <transaction-article-info class="summary-block"
+                                      [transaction]="transaction"
+            ></transaction-article-info>
+            <transaction-product-summary class="summary-block"
+                                         [transaction]="transaction"
+                                         [product]="product"
+            ></transaction-product-summary>
+        </div>
+
+        <transaction-relation-edit [customerId]="relationId" (validSubmit)="transactionEditClose()"></transaction-relation-edit>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{display:block;padding:15px 0 30px}.name{font-size:13px;font-weight:bold;color:#22313c;margin-bottom:5px}.address,.phone,.email{font-size:13px;line-height:16px;color:#5b6875}.pointer{cursor:pointer}.link{color:#2b60a7}.summary-block{width:calc(25% - 15px);border:2px dashed #DCE4EA;margin:7px;border-radius:15px;position:relative}.summary-block .block-wrapper{position:relative;display:flex;align-items:center;padding:30px 20px}.summary-block:after{content:\"\";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border:1px solid #FFF;pointer-events:none;border-radius:15px}@media only screen and (min-width: 960px) and (max-width: 1279px){.summary-block{width:calc(50% - 15px)}}@media only screen and (max-width: 599px){.summary-block{width:calc(100%);margin:7px 0}}\n"]
+            },] }
+];
+TransactionHeaderBlockComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionHeaderBlockComponent.propDecorators = {
+    relationPopup: [{ type: ViewChild, args: [TransactionRelationEditComponent, { static: true },] }],
+    canPlanDelivery: [{ type: Input }],
+    planningRequestButtonClick: [{ type: Output }]
+};
+
+class TransactionServiceSummaryComponent extends TransactionBaseComponent {
+    constructor(service, iconCacheService) {
+        super(service);
+        this.service = service;
+        this.iconCacheService = iconCacheService;
+        this.iconWrench = CoreComponentsIcon.Wrench;
+    }
+}
+TransactionServiceSummaryComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-service-info",
+                template: `
+        <transaction-summary-block
+                [hideAvatar]="true"
+                [class.disabled]="!isNew"
+                label="SERVICE"
+                [icon]="iconWrench"
+                headerLabel="SERVICE_NUMBER"
+                [headerValue]="transactionInfo.transactionNr"
+                subHeaderLabel="SERVICE_REQUEST_DATE"
+                [subHeaderValue]="transactionInfo.transactionDate | date:'shortDate'"
+        ></transaction-summary-block>
+    `
+            },] }
+];
+TransactionServiceSummaryComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: IconCacheService }
+];
+TransactionServiceSummaryComponent.propDecorators = {
+    hidden: [{ type: HostBinding, args: ["class.hidden",] }]
+};
+
+class TransactionSummaryBlockComponent {
+    constructor() {
+        this.Icon = CoreComponentsIcon;
+        this.hideAvatar = false;
+        this.label = "";
+        this.headerLabel = "";
+        this.subHeaderLabel = "";
+    }
+    ngOnDestroy() {
+        this.subHeaderTemplate = undefined;
+    }
+}
+TransactionSummaryBlockComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-summary-block",
+                template: `
+        <div class="block-wrapper">
+            <div  *ngIf="hideAvatar" class="icon-wrapper">
+                <icon *ngIf="icon" [icon]="icon" class="dark"></icon>
+                <image-display *ngIf="!icon" [model]="image"></image-display>
+            </div>
+            <div class="content-wrapper">
+                <div class="value-block">
+                    <div class="header-label" [textContent]="headerLabel | localize"></div>
+                    <div class="header" [textContent]="headerValue"></div>
+                </div>
+                <div class="value-block">
+                    <div class="subheader-label" [textContent]="subHeaderLabel | localize"></div>
+                    <ng-container *ngIf="subHeaderTemplate" [templateWrapper]="subHeaderTemplate"></ng-container>
+                    <div *ngIf="!subHeaderTemplate" class="subheader" [textContent]="subHeaderValue"></div>
+                </div>
+            </div>
+        </div>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{width:368px;min-height:130px;height:auto;display:flex;flex-direction:column;margin-top:1px;margin-left:1px;padding:30px 20px}:host .content-wrapper .value-block{margin-bottom:10px}:host .content-wrapper .value-block ::ng-deep .planning-wrapper{justify-content:flex-start}:host .content-wrapper .value-block ::ng-deep .planning-wrapper arrow-link{margin-right:10px}:host .disabled-indicator{position:absolute;top:0;left:0;display:none}:host.disabled .disabled-indicator{display:block}:host ::ng-deep image-display{height:60px;width:60px;flex-shrink:0}:host ::ng-deep image-display span{display:none}:host .icon-wrapper{display:flex;flex-shrink:0;align-items:center;justify-content:center;background:#F8FBFA;height:60px;width:60px;border-radius:50%;border:1px solid #DCE4EA;overflow:hidden}:host .icon-wrapper ::ng-deep icon{height:60px!important;width:60px!important;flex-shrink:0}:host .title{font-size:13px;color:#22313c}:host .block-wrapper{position:relative;display:flex;align-items:center}:host .border{border-radius:3px;padding:15px;background:white;border:1px solid #DCE4EA}:host .content-wrapper{display:flex;flex-direction:column;justify-content:center;margin-left:10px;min-height:60px;height:auto;width:100%}:host .header-label,:host .subheader-label{font-size:11px;line-height:13px;color:#5b6875}:host .header,:host .subheader{font-size:13px;font-weight:bold;color:#22313c}\n"]
+            },] }
+];
+TransactionSummaryBlockComponent.ctorParameters = () => [];
+TransactionSummaryBlockComponent.propDecorators = {
+    hideAvatar: [{ type: Input }],
+    label: [{ type: Input }],
+    icon: [{ type: Input }],
+    image: [{ type: Input }],
+    headerLabel: [{ type: Input }],
+    headerValue: [{ type: Input }],
+    subHeaderLabel: [{ type: Input }],
+    subHeaderValue: [{ type: Input }],
+    subHeaderTemplate: [{ type: ContentChild, args: ["subHeaderTemplate", { static: false },] }]
+};
+
+class TransactionServiceStatusComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.iconPin = CoreComponentsIcon.Pin;
+    }
+    get serviceStatus() {
+        // TODO: transaction.serviceStatus
+        return "serviceStatus";
+    }
+}
+TransactionServiceStatusComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-service-status",
+                template: `
+        <transaction-summary-block
+                [class.disabled]="!isNew"
+                label="STATUS"
+                [icon]="iconPin"
+                headerLabel="SERVICE_STATE"
+                [headerValue]="serviceStatus"
+        ></transaction-summary-block>
+    `
+            },] }
+];
+TransactionServiceStatusComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionServiceStatusComponent.propDecorators = {
+    hidden: [{ type: HostBinding, args: ["class.hidden",] }]
+};
+
+class TransactionOrderSummaryComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.iconOrder = CoreComponentsIcon.Order;
+    }
+    get sourceTransactionNr() {
+        // TODO: transaction.sourceTransactionNr
+        return 0;
+    }
+    get sourceTransactionDate() {
+        // TODO: transaction.sourceTransactionDate
+        return new Date();
+    }
+}
+TransactionOrderSummaryComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-order-info",
+                template: `
+        <transaction-summary-block
+                [class.disabled]="!isNew"
+                label="ORDER_INFO"
+                [icon]="iconOrder"
+                headerLabel="ORDER_NUMBER"
+                [headerValue]="isService ? sourceTransactionNr : transactionInfo.transactionNr"
+                subHeaderLabel="ORDER_DATE"
+                [subHeaderValue]="(isService ? sourceTransactionDate : this.transactionInfo.transactionDate) | date:'shortDate'"
+        ></transaction-summary-block>
+    `
+            },] }
+];
+TransactionOrderSummaryComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionOrderSummaryComponent.propDecorators = {
+    hidden: [{ type: HostBinding, args: ["class.hidden",] }]
+};
+
+class TransactionPaymentInfoComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.euro = CoreComponentsIcon.Information;
+    }
+}
+TransactionPaymentInfoComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-payment-info",
+                template: `
+        <transaction-summary-block
+                [class.disabled]="!isNew"
+                label="PAYMENT"
+                [icon]="euro"
+                headerLabel="TOTAL_AMOUNT"
+                [headerValue]="transactionTotal.netAmount | coCurrency"
+                subHeaderLabel="PAID_DOWN2"
+                [subHeaderValue]="transactionTotal.transactionDiscountAmount | coCurrency"
+        ></transaction-summary-block>
+    `
+            },] }
+];
+TransactionPaymentInfoComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionPaymentInfoComponent.propDecorators = {
+    hidden: [{ type: HostBinding, args: ["class.hidden",] }]
+};
+
+class TransactionArticleSummaryComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.imageDataUri = "";
+    }
+    get sourceArticleDescription() {
+        // TODO: transaction.sourceArticleDescription
+        return "sourceArticleDescription";
+    }
+    get sourceArticleNr() {
+        // TODO: transaction.sourceArticleNr
+        return "sourceArticleNr";
+    }
+    _getArticleImage() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // TODO: Add to TransactionAPI?
+            // if (this.transaction.sourceGoodId) {
+            //     this.imageDataUri =
+            //         (await this._articleDalRepo.getThumbnailImageContentTableGoods(
+            //             this.transaction.sourceGoodId + "", DocumentPublication.None, false, true));
+            // }
+        });
+    }
+    transactionSet() {
+        this._getArticleImage();
+    }
+}
+TransactionArticleSummaryComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-article-info",
+                template: `
+        <transaction-summary-block
+                [class.disabled]="!isNew"
+                headerLabel="ARTICLE_DESCRIPTION"
+                [image]="imageDataUri"
+                [headerValue]="sourceArticleDescription"
+                subHeaderLabel="ARTICLE_NR"
+                [subHeaderValue]="sourceArticleNr"
+        ></transaction-summary-block>
+    `
+            },] }
+];
+TransactionArticleSummaryComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionArticleSummaryComponent.propDecorators = {
+    hidden: [{ type: HostBinding, args: ["class.hidden",] }]
+};
+
+class TransactionDeliverySummaryComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.deliveryTruck = CoreComponentsIcon.DeliveryTruck;
+        this.calendarRoundOpen = CoreComponentsIcon.CalendarRoundOpen;
+        this.deliveryMethodDescription = "";
+        this.canPlanDelivery = false;
+        this.planningRequestButtonClick = new EventEmitter();
+    }
+    transactionSet() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // TODO: move call to TransactionAPI?
+            //this.deliveryMethodDescription = await this._lookupService.lookup(DeliveryMethod, this.transaction.deliveryMethod);
+        });
+    }
+}
+TransactionDeliverySummaryComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-delivery-summary",
+                template: `
+        <transaction-summary-block
+                label="DELIVERY"
+                [icon]="deliveryTruck"
+                headerLabel="DELIVERY_METHOD2"
+                [headerValue]="deliveryMethodDescription"
+                [subHeaderLabel]="transactionInfo.preferredDeliveryDate ? 'DELIVERY_DATE' : !canPlanDelivery ? 'EXPECTED_DELIVERY_WEEK' : 'EXPECTED_DELIVERY'"
+                [subHeaderValue]="transactionInfo.preferredDeliveryDate ? (transactionInfo.deliveryDate | date:'shortDate') : 'WEEK' | localize | append:(' ') | append:(transactionInfo.deliveryDate | date:'w')">
+            <ng-template #subHeaderTemplate *ngIf="canPlanDelivery">
+                <div class="planning-wrapper">
+                    <span class="subheader" *ngIf="transactionInfo.preferredDeliveryDate"
+                          [textContent]="(transactionInfo.preferredDeliveryDate | date:'shortDate') + ', ' + transactionInfo.preferredDeliveryDate | date: 'time' "></span>
+<!--                    <arrow-link *ngIf="!transactionInfo.preferredDeliveryDate"-->
+<!--                            label="PLAN_YOUR_DELIVERY"-->
+<!--                            (click)="planningRequestButtonClick.emit($event)"-->
+<!--                    ></arrow-link>-->
+                    <icon [icon]="calendarRoundOpen" (click)="planningRequestButtonClick.emit($event)"></icon>
+                </div>
+            </ng-template>
+        </transaction-summary-block>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host .planning-wrapper{display:flex;justify-content:space-between;align-items:center;flex-direction:row;color:#2b60a7;margin-top:-10px;font-size:13px}:host .planning-wrapper ::ng-deep icon{cursor:pointer}:host .planning-wrapper ::ng-deep icon [fill]{fill:#2b60a7}\n"]
+            },] }
+];
+TransactionDeliverySummaryComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionDeliverySummaryComponent.propDecorators = {
+    hidden: [{ type: HostBinding, args: ["class.hidden",] }],
+    canPlanDelivery: [{ type: Input }],
+    planningRequestButtonClick: [{ type: Output }]
+};
+
+class TransactionProductContractSummaryComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+    }
+    productSet() {
+        // TODO: add to TransactionAPI?
+        if (!this.product.imageAsDataUri) {
+            //     this._generalRepo.getDocument(this.product.image.documentId).then((doc: CoDocument) => {
+            //         this.product.imageAsDataUri = doc.thumbnailBodyAsDataUri;
+            //     });
+        }
+    }
+}
+TransactionProductContractSummaryComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-product-contract-summary",
+                template: `
+        <transaction-summary-block
+                [class.disabled]="!isNew"
+                label="CONTRACT"
+                [image]="product?.imageAsDataUri"
+                headerLabel="PRODUCT"
+                [headerValue]="product?.product"
+                subHeaderLabel="REFERENCE"
+                [subHeaderValue]="product?.productReference"
+        ></transaction-summary-block>
+    `
+            },] }
+];
+TransactionProductContractSummaryComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+
+class TransactionProductSummaryComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+    }
+    productSet() {
+        // TODO: Add to TransactionAPI?
+        if (this.product && !this.product.imageAsDataUri && this.product.image && this.product.image.documentId) {
+            //     this._generalRepo.getDocument(this.product.image.documentId).then((doc: CoDocument) => {
+            //         this.product.imageAsDataUri = doc.thumbnailBodyAsDataUri;
+            //     });
+        }
+    }
+}
+TransactionProductSummaryComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-product-summary",
+                template: `
+        <transaction-summary-block
+                [class.disabled]="!isNew"
+                label="PRODUCT"
+                [image]="product?.imageAsDataUri"
+                headerLabel="PRODUCT_TYPE"
+                [headerValue]="product?.productReference"
+                subHeaderLabel="PRODUCT"
+                [subHeaderValue]="product?.product"
+        ></transaction-summary-block>
+    `
+            },] }
+];
+TransactionProductSummaryComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionProductSummaryComponent.propDecorators = {
+    hidden: [{ type: HostBinding, args: ["class.hidden",] }]
+};
+
+class TemplateWrapperDirective {
+    constructor(viewContainer) {
+        this.viewContainer = viewContainer;
+        this.templateWrapper = null;
+        this.templateWrapperContext = null;
+    }
+    ngOnChanges(changes) {
+        const recreateView = this._shouldRecreateView(changes);
+        if (recreateView) {
+            if (this._viewRef) {
+                this.viewContainer.remove(this.viewContainer.indexOf(this._viewRef));
+            }
+            if (this.templateWrapper) {
+                this._viewRef = this.viewContainer.createEmbeddedView(this.templateWrapper, this.templateWrapperContext);
+            }
+        }
+        else {
+            if (this._viewRef && this.templateWrapperContext) {
+                this._updateExistingContext(this.templateWrapperContext);
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this._viewRef) {
+            this.viewContainer.remove(this.viewContainer.indexOf(this._viewRef));
+            this._viewRef = undefined;
+        }
+        this.templateWrapper = undefined;
+    }
+    _shouldRecreateView(changes) {
+        const ctxChange = changes["templateWrapperContext"];
+        return !!changes["templateWrapper"] || (ctxChange && this._hasContextShapeChanged(ctxChange));
+    }
+    _hasContextShapeChanged(ctxChange) {
+        const prevCtxKeys = Object.keys(ctxChange.previousValue || {});
+        const currCtxKeys = Object.keys(ctxChange.currentValue || {});
+        if (prevCtxKeys.length === currCtxKeys.length) {
+            for (const propName of currCtxKeys) {
+                if (prevCtxKeys.indexOf(propName) === -1) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
+    _updateExistingContext(ctx) {
+        for (const propName of Object.keys(ctx)) {
+            this._viewRef.context[propName] = this.templateWrapperContext[propName];
+        }
+    }
+}
+TemplateWrapperDirective.decorators = [
+    { type: Directive, args: [{
+                // eslint-disable-next-line @angular-eslint/directive-selector
+                selector: "[templateWrapper]"
+            },] }
+];
+TemplateWrapperDirective.ctorParameters = () => [
+    { type: ViewContainerRef }
+];
+TemplateWrapperDirective.propDecorators = {
+    templateWrapper: [{ type: Input }],
+    templateWrapperContext: [{ type: Input }]
+};
+
+class DefaultOkCancelButtonsComponent {
+    constructor() {
+        this.hideCancel = false;
+        this.hideOk = false;
+        this.okLabel = "OK";
+        // only emits when ok button was not disabled when it was clicked
+        this.okClick = new EventEmitter();
+        this.cancelClick = new EventEmitter();
+    }
+    onOkClick(event) {
+        if (this.okButtonComp && !this.okButtonComp.disabled) {
+            this.okClick.emit(event);
+        }
+    }
+}
+DefaultOkCancelButtonsComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "default-ok-cancel-buttons",
+                template: `
+        <co-button *ngIf="!hideOk" [label]="okLabel" [disabled]="okDisabled" class="ok" #okButton (click)="onOkClick($event)"></co-button>
+        <co-button *ngIf="!hideCancel" label="CANCEL" (click)="cancelClick.emit($event)"></co-button>
+        <ng-content></ng-content>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center,:host{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.margin-popup:host{margin-top:20px}.margin-popup:host{margin-bottom:20px}.margin-popup:host{margin-left:20px}.margin-popup:host{margin-right:20px}.margin-top:host{margin-top:11px}:host button-colijn:not(:last-child){margin-right:11px}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host.justify-center{justify-content:center}\n"]
+            },] }
+];
+DefaultOkCancelButtonsComponent.ctorParameters = () => [];
+DefaultOkCancelButtonsComponent.propDecorators = {
+    okDisabled: [{ type: Input }],
+    hideCancel: [{ type: Input }],
+    hideOk: [{ type: Input }],
+    okLabel: [{ type: Input }],
+    okClick: [{ type: Output }],
+    cancelClick: [{ type: Output }],
+    okButtonComp: [{ type: ViewChild, args: ["okButton",] }]
+};
+
+class IoneServiceOrderModule {
+}
+IoneServiceOrderModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    BrowserAnimationsModule,
+                    IconModule,
+                    InputTextModule,
+                    InputCheckboxModule,
+                    InputRadioButtonModule,
+                    FormModule,
+                    InputComboBoxModule,
+                    InputDatePickerModule,
+                    InputNumberPickerModule,
+                    CoDialogModule,
+                    CoDialogPromptModule,
+                    ButtonModule,
+                    FlexModule,
+                    MultiSelectListModule,
+                    DropDownModule,
+                    PopupModule.forRoot(),
+                    CoSidebarModule,
+                    CoGridModule,
+                    CoreModule,
+                    ChipListModule,
+                    DropDownButtonModule,
+                    CheckBoxModule,
+                    DropDownListModule,
+                    IoneShoppingCartModule,
+                    TabModule,
+                ],
+                declarations: [
+                    TemplateWrapperDirective,
+                    DefaultOkCancelButtonsComponent,
+                    IoneServiceOrderComponent,
+                    ServiceOrderComponent,
+                    TransactionOrderTotalsComponent,
+                    TransactionOrderLineViewComponent,
+                    TransactionOrderLinesComponent,
+                    TransactionRelationAddressComponent,
+                    TransactionArticleTextComponent,
+                    TransactionSidebarRightComponent,
+                    TransactionLineAccordionComponent,
+                    TransactionHeaderBlockComponent,
+                    TransactionServiceSummaryComponent,
+                    TransactionSummaryBlockComponent,
+                    TransactionServiceStatusComponent,
+                    TransactionOrderSummaryComponent,
+                    TransactionPaymentInfoComponent,
+                    TransactionRelationEditComponent,
+                    TransactionArticleSummaryComponent,
+                    TransactionDeliverySummaryComponent,
+                    TransactionProductContractSummaryComponent,
+                    TransactionProductSummaryComponent,
+                ],
+                providers: [
+                    DictionaryService,
+                    TransactionService,
+                    OptionsService
+                ],
+                entryComponents: [
+                    IoneServiceOrderComponent
+                ],
+                exports: [IoneServiceOrderComponent],
+                bootstrap: [IoneServiceOrderComponent]
+            },] }
+];
+
 //export * from "./app/component/ione-transaction.module";
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IoneCheckoutComponent, IoneCheckoutModule, IoneShoppingCartComponent, IoneShoppingCartModule, RetailTransactionCheckoutComponent as ɵa, CheckoutComponent as ɵb, ShoppingCartManagerComponent as ɵba, ShoppingCartComponent as ɵbb, ShoppingCartLineComponent as ɵbc, StockStatusIndicatorComponent as ɵbd, CharacteristicAnswerComponent as ɵbe, CheckoutOverviewComponent as ɵc, CheckoutOverviewBlockComponent as ɵd, CheckoutOverviewRelationEditComponent as ɵe, TransactionService as ɵf, IOneConnectorAdapterService as ɵg, CheckoutOverviewDeliveryEditComponent as ɵh, DictionaryService as ɵi, CheckoutLoginComponent as ɵj, OptionsService as ɵk, TransactionEventService as ɵl, CoreModule as ɵm, AppendPipe as ɵn, DeliveryTimePipe as ɵo, DateDurationPipe as ɵp, LocalizePipe as ɵq, CoCurrencyPipe as ɵr, SafeStylePipe as ɵs, ImageDisplayComponent as ɵt, NoImageDisplayComponent as ɵu, IconComponent as ɵv, CheckoutOverviewRelationAddressComponent as ɵw, CheckoutOverviewDeliveryAddressComponent as ɵx, CheckOutRelationSuggestionsListComponent as ɵy, CheckOutRelationSuggestionsListItemComponent as ɵz };
+export { IoneCheckoutComponent, IoneCheckoutModule, IoneServiceOrderComponent, IoneServiceOrderModule, IoneShoppingCartComponent, IoneShoppingCartModule, RetailTransactionCheckoutComponent as ɵa, CheckoutComponent as ɵb, ShoppingCartManagerComponent as ɵba, ShoppingCartComponent as ɵbb, ShoppingCartLineComponent as ɵbc, StockStatusIndicatorComponent as ɵbd, CharacteristicAnswerComponent as ɵbe, TemplateWrapperDirective as ɵbf, DefaultOkCancelButtonsComponent as ɵbg, ServiceOrderComponent as ɵbh, TransactionBaseComponent as ɵbi, TransactionArticleTextComponent as ɵbj, TransactionOrderTotalsComponent as ɵbk, TransactionOrderLineViewComponent as ɵbl, TransactionOrderLinesComponent as ɵbm, TransactionRelationAddressComponent as ɵbn, TransactionSidebarRightComponent as ɵbo, TransactionLineAccordionComponent as ɵbp, TransactionHeaderBlockComponent as ɵbq, TransactionRelationEditComponent as ɵbr, TransactionServiceSummaryComponent as ɵbs, TransactionSummaryBlockComponent as ɵbt, TransactionServiceStatusComponent as ɵbu, TransactionOrderSummaryComponent as ɵbv, TransactionPaymentInfoComponent as ɵbw, TransactionArticleSummaryComponent as ɵbx, TransactionDeliverySummaryComponent as ɵby, TransactionProductContractSummaryComponent as ɵbz, CheckoutOverviewComponent as ɵc, TransactionProductSummaryComponent as ɵca, CheckoutOverviewBlockComponent as ɵd, CheckoutOverviewRelationEditComponent as ɵe, TransactionService as ɵf, IOneConnectorAdapterService as ɵg, CheckoutOverviewDeliveryEditComponent as ɵh, DictionaryService as ɵi, CheckoutLoginComponent as ɵj, OptionsService as ɵk, TransactionEventService as ɵl, CoreModule as ɵm, AppendPipe as ɵn, DeliveryTimePipe as ɵo, DateDurationPipe as ɵp, LocalizePipe as ɵq, CoCurrencyPipe as ɵr, SafeStylePipe as ɵs, ImageDisplayComponent as ɵt, NoImageDisplayComponent as ɵu, IconComponent as ɵv, CheckoutOverviewRelationAddressComponent as ɵw, CheckoutOverviewDeliveryAddressComponent as ɵx, CheckOutRelationSuggestionsListComponent as ɵy, CheckOutRelationSuggestionsListItemComponent as ɵz };
 //# sourceMappingURL=colijnit-transaction.js.map