@colijnit/transaction 12.0.3 → 12.1.1

package/bundles/colijnit-transaction.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/transactionapi/build/model/customer-full-object.bo'), require('@colijnit/transactionapi/build/model/transaction-info-response.bo'), require('@colijnit/transactionapi/build/model/relation-privacy-setting.bo'), require('@colijnit/transactionapi/build/model/get-postal-code-retrieval-output-params'), require('@colijnit/transactionapi/build/model/article-full-object'), require('@colijnit/transactionapi/build/model/line-operation-response.bo'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/transactionapi/build/utils/function/not-nill.function'), require('@colijnit/transactionapi/build/utils/object-utils'), require('@colijnit/transactionapi/build/enum/yes-no-db-type.enum'), require('@colijnit/transactionapi/build/enum/true-false-db-type.enum'), require('@colijnit/transactionapi/build/enum/one-zero-bool-db-type.enum'), require('@colijnit/transactionapi/build/enum/db-boolean-value-type.enum'), require('@colijnit/transactionapi/build/utils/date-utils'), require('@colijnit/transactionapi/build/utils/number-utils'), require('@colijnit/transactionapi/build/utils/function/is-nill.function'), require('@colijnit/transactionapi/build/factory/decorators/map-property.decorator'), require('@colijnit/transactionapi/build/factory/decorators/boolean.decorator'), require('@colijnit/transactionapi/build/factory/decorators/json.decorator'), require('@colijnit/transactionapi/build/factory/decorators/complex-array.decorator'), require('@colijnit/transactionapi/build/utils/image-utils'), require('@colijnit/transactionapi/build/model/nul-relation-object'), require('@colijnit/transactionapi/build/enum/transaction-kind.enum'), require('@colijnit/transactionapi/build/enum/sequence-name.enum'), require('@colijnit/transactionapi/build/utils/array-utils'), require('@colijnit/transactionapi/build/model/set-transaction-delivery-options-request.bo'), require('@colijnit/transactionapi/build/model/transaction-total.bo'), require('@colijnit/transactionapi/build/enum/transaction-line-type.enum'), require('@colijnit/transactionapi/build/model/line-operation-status.bo'), require('@colijnit/transactionapi/build/model/transaction-info.bo'), require('@colijnit/transactionapi/build/enum/pending-reason-type.enum'), require('@colijnit/transactionapi/build/enum/communication-type.enum'), require('@colijnit/transactionapi/build/model/contact-option.bo'), require('@colijnit/transactionapi/build/enum/relation-name-kind.enum'), require('@colijnit/transactionapi/build/enum/address-type.enum'), require('@colijnit/transactionapi/build/enum/gender-type.enum'), require('@colijnit/transactionapi/build/utils/business-object-utils'), require('@colijnit/corecomponents_v12'), require('@colijnit/transactionapi/build/utils/function-utils'), require('@colijnit/transactionapi/build/model/address.bo'), require('@angular/platform-browser/animations'), require('@angular/flex-layout'), require('@angular/material/stepper'), require('@angular/common'), require('@angular/platform-browser'), require('@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo'), require('@colijnit/transactionapi/build/enum/sort-direction'), require('@colijnit/transactionapi/build/enum/sort-type.enum'), require('@colijnit/transactionapi/build/utils/sort-utils'), require('@colijnit/transactionapi/build/enum/refcode/stock-status.enum')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/transaction', ['exports', '@angular/core', 'rxjs', '@colijnit/ioneconnector/build/model/options', '@colijnit/transactionapi/build/model/customer-full-object.bo', '@colijnit/transactionapi/build/model/transaction-info-response.bo', '@colijnit/transactionapi/build/model/relation-privacy-setting.bo', '@colijnit/transactionapi/build/model/get-postal-code-retrieval-output-params', '@colijnit/transactionapi/build/model/article-full-object', '@colijnit/transactionapi/build/model/line-operation-response.bo', '@colijnit/transactionapi/build/transaction', '@colijnit/transactionapi/build/utils/function/not-nill.function', '@colijnit/transactionapi/build/utils/object-utils', '@colijnit/transactionapi/build/enum/yes-no-db-type.enum', '@colijnit/transactionapi/build/enum/true-false-db-type.enum', '@colijnit/transactionapi/build/enum/one-zero-bool-db-type.enum', '@colijnit/transactionapi/build/enum/db-boolean-value-type.enum', '@colijnit/transactionapi/build/utils/date-utils', '@colijnit/transactionapi/build/utils/number-utils', '@colijnit/transactionapi/build/utils/function/is-nill.function', '@colijnit/transactionapi/build/factory/decorators/map-property.decorator', '@colijnit/transactionapi/build/factory/decorators/boolean.decorator', '@colijnit/transactionapi/build/factory/decorators/json.decorator', '@colijnit/transactionapi/build/factory/decorators/complex-array.decorator', '@colijnit/transactionapi/build/utils/image-utils', '@colijnit/transactionapi/build/model/nul-relation-object', '@colijnit/transactionapi/build/enum/transaction-kind.enum', '@colijnit/transactionapi/build/enum/sequence-name.enum', '@colijnit/transactionapi/build/utils/array-utils', '@colijnit/transactionapi/build/model/set-transaction-delivery-options-request.bo', '@colijnit/transactionapi/build/model/transaction-total.bo', '@colijnit/transactionapi/build/enum/transaction-line-type.enum', '@colijnit/transactionapi/build/model/line-operation-status.bo', '@colijnit/transactionapi/build/model/transaction-info.bo', '@colijnit/transactionapi/build/enum/pending-reason-type.enum', '@colijnit/transactionapi/build/enum/communication-type.enum', '@colijnit/transactionapi/build/model/contact-option.bo', '@colijnit/transactionapi/build/enum/relation-name-kind.enum', '@colijnit/transactionapi/build/enum/address-type.enum', '@colijnit/transactionapi/build/enum/gender-type.enum', '@colijnit/transactionapi/build/utils/business-object-utils', '@colijnit/corecomponents_v12', '@colijnit/transactionapi/build/utils/function-utils', '@colijnit/transactionapi/build/model/address.bo', '@angular/platform-browser/animations', '@angular/flex-layout', '@angular/material/stepper', '@angular/common', '@angular/platform-browser', '@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo', '@colijnit/transactionapi/build/enum/sort-direction', '@colijnit/transactionapi/build/enum/sort-type.enum', '@colijnit/transactionapi/build/utils/sort-utils', '@colijnit/transactionapi/build/enum/refcode/stock-status.enum'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.transaction = {}), global.ng.core, global.rxjs, global.options, global.customerFullObject_bo, global.transactionInfoResponse_bo, global.relationPrivacySetting_bo, global.getPostalCodeRetrievalOutputParams, global.articleFullObject, global.lineOperationResponse_bo, global.transaction, global.notNill_function, global.objectUtils, global.yesNoDbType_enum, global.trueFalseDbType_enum, global.oneZeroBoolDbType_enum, global.dbBooleanValueType_enum, global.dateUtils, global.numberUtils, global.isNill_function, global.mapProperty_decorator, global.boolean_decorator, global.json_decorator, global.complexArray_decorator, global.imageUtils, global.nulRelationObject, global.transactionKind_enum, global.sequenceName_enum, global.arrayUtils, global.setTransactionDeliveryOptionsRequest_bo, global.transactionTotal_bo, global.transactionLineType_enum, global.lineOperationStatus_bo, global.transactionInfo_bo, global.pendingReasonType_enum, global.communicationType_enum, global.contactOption_bo, global.relationNameKind_enum, global.addressType_enum, global.genderType_enum, global.businessObjectUtils, global.corecomponents_v12, global.functionUtils, global.address_bo, global.ng.platformBrowser.animations, global.ng.flexLayout, global.ng.material.stepper, global.ng.common, global.ng.platformBrowser, global.resolvePendingReasonRequest_bo, global.sortDirection, global.sortType_enum, global.sortUtils, global.stockStatus_enum));
-})(this, (function (exports, i0, rxjs, options, customerFullObject_bo, transactionInfoResponse_bo, relationPrivacySetting_bo, getPostalCodeRetrievalOutputParams, articleFullObject, lineOperationResponse_bo, transaction, notNill_function, objectUtils, yesNoDbType_enum, trueFalseDbType_enum, oneZeroBoolDbType_enum, dbBooleanValueType_enum, dateUtils, numberUtils, isNill_function, mapProperty_decorator, boolean_decorator, json_decorator, complexArray_decorator, imageUtils, nulRelationObject, transactionKind_enum, sequenceName_enum, arrayUtils, setTransactionDeliveryOptionsRequest_bo, transactionTotal_bo, transactionLineType_enum, lineOperationStatus_bo, transactionInfo_bo, pendingReasonType_enum, communicationType_enum, contactOption_bo, relationNameKind_enum, addressType_enum, genderType_enum, businessObjectUtils, corecomponents_v12, functionUtils, address_bo, animations, flexLayout, stepper, common, platformBrowser, resolvePendingReasonRequest_bo, sortDirection, sortType_enum, sortUtils, stockStatus_enum) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/transactionapi/build/model/customer-full-object.bo'), require('@colijnit/transactionapi/build/model/transaction-info-response.bo'), require('@colijnit/transactionapi/build/model/relation-privacy-setting.bo'), require('@colijnit/transactionapi/build/model/get-postal-code-retrieval-output-params'), require('@colijnit/transactionapi/build/model/relation-list-object.bo'), require('@colijnit/transactionapi/build/model/article-full-object'), require('@colijnit/transactionapi/build/model/line-operation-response.bo'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/transactionapi/build/utils/function/not-nill.function'), require('@colijnit/transactionapi/build/utils/object-utils'), require('@colijnit/transactionapi/build/enum/yes-no-db-type.enum'), require('@colijnit/transactionapi/build/enum/true-false-db-type.enum'), require('@colijnit/transactionapi/build/enum/one-zero-bool-db-type.enum'), require('@colijnit/transactionapi/build/enum/db-boolean-value-type.enum'), require('@colijnit/transactionapi/build/utils/date-utils'), require('@colijnit/transactionapi/build/utils/number-utils'), require('@colijnit/transactionapi/build/utils/function/is-nill.function'), require('@colijnit/transactionapi/build/factory/decorators/map-property.decorator'), require('@colijnit/transactionapi/build/factory/decorators/boolean.decorator'), require('@colijnit/transactionapi/build/factory/decorators/json.decorator'), require('@colijnit/transactionapi/build/factory/decorators/complex-array.decorator'), require('@colijnit/transactionapi/build/utils/image-utils'), require('@colijnit/transactionapi/build/model/nul-relation-object'), require('@colijnit/transactionapi/build/enum/transaction-kind.enum'), require('@colijnit/transactionapi/build/enum/sequence-name.enum'), require('@colijnit/transactionapi/build/utils/array-utils'), require('@colijnit/transactionapi/build/model/set-transaction-delivery-options-request.bo'), require('@colijnit/transactionapi/build/model/transaction-total.bo'), require('@colijnit/transactionapi/build/enum/transaction-line-type.enum'), require('@colijnit/transactionapi/build/model/line-operation-status.bo'), require('@colijnit/transactionapi/build/model/transaction-info.bo'), require('@colijnit/transactionapi/build/enum/pending-reason-type.enum'), require('@colijnit/transactionapi/build/enum/communication-type.enum'), require('@colijnit/transactionapi/build/model/contact-option.bo'), require('@colijnit/transactionapi/build/enum/relation-name-kind.enum'), require('@colijnit/transactionapi/build/enum/address-type.enum'), require('@colijnit/transactionapi/build/enum/gender-type.enum'), require('@colijnit/transactionapi/build/utils/business-object-utils'), require('@colijnit/corecomponents_v12'), require('@colijnit/transactionapi/build/utils/function-utils'), require('@colijnit/transactionapi/build/model/address.bo'), require('@angular/platform-browser/animations'), require('@angular/flex-layout'), require('@angular/material/stepper'), require('@angular/common'), require('@angular/platform-browser'), require('@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo'), require('@colijnit/transactionapi/build/enum/sort-direction'), require('@colijnit/transactionapi/build/enum/sort-type.enum'), require('@colijnit/transactionapi/build/enum/refcode/stock-status.enum'), require('@angular/animations'), require('@colijnit/transactionapi/build/model/relation-request'), require('@syncfusion/ej2-angular-splitbuttons'), require('@syncfusion/ej2-angular-buttons'), require('@syncfusion/ej2-angular-dropdowns'), require('@syncfusion/ej2-navigations'), require('@syncfusion/ej2-angular-navigations'), require('@colijnit/transactionapi/build/model/transaction-line-info.bo')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/transaction', ['exports', '@angular/core', 'rxjs', '@colijnit/ioneconnector/build/model/options', '@colijnit/transactionapi/build/model/customer-full-object.bo', '@colijnit/transactionapi/build/model/transaction-info-response.bo', '@colijnit/transactionapi/build/model/relation-privacy-setting.bo', '@colijnit/transactionapi/build/model/get-postal-code-retrieval-output-params', '@colijnit/transactionapi/build/model/relation-list-object.bo', '@colijnit/transactionapi/build/model/article-full-object', '@colijnit/transactionapi/build/model/line-operation-response.bo', '@colijnit/transactionapi/build/transaction', '@colijnit/transactionapi/build/utils/function/not-nill.function', '@colijnit/transactionapi/build/utils/object-utils', '@colijnit/transactionapi/build/enum/yes-no-db-type.enum', '@colijnit/transactionapi/build/enum/true-false-db-type.enum', '@colijnit/transactionapi/build/enum/one-zero-bool-db-type.enum', '@colijnit/transactionapi/build/enum/db-boolean-value-type.enum', '@colijnit/transactionapi/build/utils/date-utils', '@colijnit/transactionapi/build/utils/number-utils', '@colijnit/transactionapi/build/utils/function/is-nill.function', '@colijnit/transactionapi/build/factory/decorators/map-property.decorator', '@colijnit/transactionapi/build/factory/decorators/boolean.decorator', '@colijnit/transactionapi/build/factory/decorators/json.decorator', '@colijnit/transactionapi/build/factory/decorators/complex-array.decorator', '@colijnit/transactionapi/build/utils/image-utils', '@colijnit/transactionapi/build/model/nul-relation-object', '@colijnit/transactionapi/build/enum/transaction-kind.enum', '@colijnit/transactionapi/build/enum/sequence-name.enum', '@colijnit/transactionapi/build/utils/array-utils', '@colijnit/transactionapi/build/model/set-transaction-delivery-options-request.bo', '@colijnit/transactionapi/build/model/transaction-total.bo', '@colijnit/transactionapi/build/enum/transaction-line-type.enum', '@colijnit/transactionapi/build/model/line-operation-status.bo', '@colijnit/transactionapi/build/model/transaction-info.bo', '@colijnit/transactionapi/build/enum/pending-reason-type.enum', '@colijnit/transactionapi/build/enum/communication-type.enum', '@colijnit/transactionapi/build/model/contact-option.bo', '@colijnit/transactionapi/build/enum/relation-name-kind.enum', '@colijnit/transactionapi/build/enum/address-type.enum', '@colijnit/transactionapi/build/enum/gender-type.enum', '@colijnit/transactionapi/build/utils/business-object-utils', '@colijnit/corecomponents_v12', '@colijnit/transactionapi/build/utils/function-utils', '@colijnit/transactionapi/build/model/address.bo', '@angular/platform-browser/animations', '@angular/flex-layout', '@angular/material/stepper', '@angular/common', '@angular/platform-browser', '@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo', '@colijnit/transactionapi/build/enum/sort-direction', '@colijnit/transactionapi/build/enum/sort-type.enum', '@colijnit/transactionapi/build/enum/refcode/stock-status.enum', '@angular/animations', '@colijnit/transactionapi/build/model/relation-request', '@syncfusion/ej2-angular-splitbuttons', '@syncfusion/ej2-angular-buttons', '@syncfusion/ej2-angular-dropdowns', '@syncfusion/ej2-navigations', '@syncfusion/ej2-angular-navigations', '@colijnit/transactionapi/build/model/transaction-line-info.bo'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.transaction = {}), global.ng.core, global.rxjs, global.options, global.customerFullObject_bo, global.transactionInfoResponse_bo, global.relationPrivacySetting_bo, global.getPostalCodeRetrievalOutputParams, global.relationListObject_bo, global.articleFullObject, global.lineOperationResponse_bo, global.transaction, global.notNill_function, global.objectUtils, global.yesNoDbType_enum, global.trueFalseDbType_enum, global.oneZeroBoolDbType_enum, global.dbBooleanValueType_enum, global.dateUtils, global.numberUtils, global.isNill_function, global.mapProperty_decorator, global.boolean_decorator, global.json_decorator, global.complexArray_decorator, global.imageUtils, global.nulRelationObject, global.transactionKind_enum, global.sequenceName_enum, global.arrayUtils, global.setTransactionDeliveryOptionsRequest_bo, global.transactionTotal_bo, global.transactionLineType_enum, global.lineOperationStatus_bo, global.transactionInfo_bo, global.pendingReasonType_enum, global.communicationType_enum, global.contactOption_bo, global.relationNameKind_enum, global.addressType_enum, global.genderType_enum, global.businessObjectUtils, global.corecomponents_v12, global.functionUtils, global.address_bo, global.ng.platformBrowser.animations, global.ng.flexLayout, global.ng.material.stepper, global.ng.common, global.ng.platformBrowser, global.resolvePendingReasonRequest_bo, global.sortDirection, global.sortType_enum, global.stockStatus_enum, global.ng.animations, global.relationRequest, global.ej2AngularSplitbuttons, global.ej2AngularButtons, global.ej2AngularDropdowns, global.ej2Navigations, global.ej2AngularNavigations, global.transactionLineInfo_bo));
+})(this, (function (exports, i0, rxjs, options, customerFullObject_bo, transactionInfoResponse_bo, relationPrivacySetting_bo, getPostalCodeRetrievalOutputParams, relationListObject_bo, articleFullObject, lineOperationResponse_bo, transaction, notNill_function, objectUtils, yesNoDbType_enum, trueFalseDbType_enum, oneZeroBoolDbType_enum, dbBooleanValueType_enum, dateUtils, numberUtils, isNill_function, mapProperty_decorator, boolean_decorator, json_decorator, complexArray_decorator, imageUtils, nulRelationObject, transactionKind_enum, sequenceName_enum, arrayUtils, setTransactionDeliveryOptionsRequest_bo, transactionTotal_bo, transactionLineType_enum, lineOperationStatus_bo, transactionInfo_bo, pendingReasonType_enum, communicationType_enum, contactOption_bo, relationNameKind_enum, addressType_enum, genderType_enum, businessObjectUtils, corecomponents_v12, functionUtils, address_bo, animations, flexLayout, stepper, common, platformBrowser, resolvePendingReasonRequest_bo, sortDirection, sortType_enum, stockStatus_enum, animations$1, relationRequest, ej2AngularSplitbuttons, ej2AngularButtons, ej2AngularDropdowns, ej2Navigations, ej2AngularNavigations, transactionLineInfo_bo) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -1133,9 +1133,19 @@
         IOneConnectorAdapterService.prototype.connect = function (options) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
-                    this.options = options;
-                    this.connector = new transaction.Transaction(options);
-                    this.options.session = this.connector.session;
+                    if (this.options === undefined) {
+                        this.options = options;
+                        this.connector = new transaction.Transaction(options);
+                        this.options.session = this.connector.session;
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
+        IOneConnectorAdapterService.prototype.disconnect = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this.options = undefined;
                     return [2 /*return*/];
                 });
             });
@@ -1302,6 +1312,19 @@
                 });
             });
         };
+        IOneConnectorAdapterService.prototype.getTransactionById = function (transactionId) {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                return _this.connector.getTransactionById(transactionId).then(function (result) {
+                    if (result.validationResult && result.validationResult.success) {
+                        resolve(_this._boFactory.makeWithRawBackendData(transactionInfoResponse_bo.TransactionInfoResponse, result.resultObject));
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        };
         IOneConnectorAdapterService.prototype.saveTransaction = function (uuid) {
             var _this = this;
             return new Promise(function (resolve, reject) {
@@ -1493,7 +1516,41 @@
                     return [2 /*return*/, new Promise(function (resolve, reject) {
                             return _this.connector.getRelationListObjects(relationRequest).then(function (result) {
                                 if (result.validationResult && result.validationResult.success) {
-                                    resolve(result.resultObjects);
+                                    resolve(_this._boFactory.makeBOArrayFromRawBackendDataArray(relationListObject_bo.RelationListObject, result.resultObjects));
+                                }
+                                else {
+                                    reject(result.validationMessagesAsString);
+                                }
+                            });
+                        })];
+                });
+            });
+        };
+        IOneConnectorAdapterService.prototype.addTransactionLine = function (uuid, articleLine, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, new Promise(function (resolve, reject) {
+                            return _this.connector.addTransactionLine(uuid, articleLine, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr).then(function (result) {
+                                if (result.validationResult && result.validationResult.success) {
+                                    resolve(_this._boFactory.makeWithRawBackendData(lineOperationResponse_bo.LineOperationResponse, result.resultObject));
+                                }
+                                else {
+                                    reject(result.validationMessagesAsString);
+                                }
+                            });
+                        })];
+                });
+            });
+        };
+        IOneConnectorAdapterService.prototype.addTextLineToTransaction = function (uuid, showOnDocuments, text, amount, articleBound, refArticleLineNr, aboveLineNr, belowLineNr) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, new Promise(function (resolve, reject) {
+                            return _this.connector.addTextLineToTransaction(uuid, showOnDocuments, text, amount, articleBound, refArticleLineNr, aboveLineNr, belowLineNr).then(function (result) {
+                                if (result.validationResult && result.validationResult.success) {
+                                    resolve(_this._boFactory.makeWithRawBackendData(lineOperationResponse_bo.LineOperationResponse, result.resultObject));
                                 }
                                 else {
                                     reject(result.validationMessagesAsString);
@@ -1503,12 +1560,12 @@
                 });
             });
         };
-        IOneConnectorAdapterService.prototype.addTransactionLine = function (uuid, articleLine, articleNo, amount, warehouseNo, commissionCode, isReturn) {
+        IOneConnectorAdapterService.prototype.changeLineSequence = function (uuid, lineUuid, aboveLineNr, belowLineNr) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
                 return __generator(this, function (_a) {
                     return [2 /*return*/, new Promise(function (resolve, reject) {
-                            return _this.connector.addTransactionLine(uuid, articleLine, articleNo, amount, warehouseNo, commissionCode, isReturn).then(function (result) {
+                            return _this.connector.changeLineSequence(uuid, lineUuid, aboveLineNr, belowLineNr).then(function (result) {
                                 if (result.validationResult && result.validationResult.success) {
                                     resolve(_this._boFactory.makeWithRawBackendData(lineOperationResponse_bo.LineOperationResponse, result.resultObject));
                                 }
@@ -1658,8 +1715,11 @@
         };
         return IOneConnectorAdapterService;
     }());
+    IOneConnectorAdapterService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function IOneConnectorAdapterService_Factory() { return new IOneConnectorAdapterService(); }, token: IOneConnectorAdapterService, providedIn: "root" });
     IOneConnectorAdapterService.decorators = [
-        { type: i0.Injectable }
+        { type: i0.Injectable, args: [{
+                    providedIn: "root"
+                },] }
     ];
     IOneConnectorAdapterService.ctorParameters = function () { return []; };
 
@@ -1667,6 +1727,7 @@
         function TransactionService(_connector) {
             this._connector = _connector;
             this.transactionUpdated = new i0.EventEmitter();
+            this.transactionLoaded = new i0.EventEmitter();
             this.applicationUser = false;
             this.articleAmount = 0;
             this._currentLines = [];
@@ -1938,8 +1999,29 @@
                 _this._connector.getTransactionByNrAndKind(kind, transactionNr)
                     .then(function (response) { return __awaiter(_this, void 0, void 0, function () {
                     return __generator(this, function (_a) {
-                        this._rememberCurrentTransaction(response);
                         if (response.isSuccess) {
+                            this.transactionLoaded.emit(response);
+                            resolve(true);
+                        }
+                        else {
+                            reject(false);
+                        }
+                        return [2 /*return*/];
+                    });
+                }); })
+                    .catch(function (reason) {
+                    reject(false);
+                });
+            });
+        };
+        TransactionService.prototype.getTransactionById = function (transactionId) {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                _this._connector.getTransactionById(transactionId)
+                    .then(function (response) { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        if (response.isSuccess) {
+                            this.transactionLoaded.emit(response);
                             resolve(true);
                         }
                         else {
@@ -2110,34 +2192,53 @@
             });
         };
         TransactionService.prototype.retrieveLineImage = function (line) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.getArticleImageByArticleNumber(line.articleNumber)];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
+        TransactionService.prototype.getArticleImageByArticleNumber = function (articleNumber) {
             return __awaiter(this, void 0, void 0, function () {
                 var goodId;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._connector.getGoodIdFromArticleNr(line.articleNumber)];
+                        case 0: return [4 /*yield*/, this._connector.getGoodIdFromArticleNr(articleNumber)];
                         case 1:
                             goodId = _a.sent();
-                            if (!isNaN(goodId)) {
-                                return [2 /*return*/, this._connector.getSingleImage(goodId, 1, true, true)];
-                            }
-                            else {
-                                return [2 /*return*/, ""];
-                            }
-                            return [2 /*return*/];
+                            return [2 /*return*/, this.getArticleImageByGoodId(goodId)];
+                    }
+                });
+            });
+        };
+        TransactionService.prototype.getArticleImageByGoodId = function (goodId) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    if (!isNaN(goodId)) {
+                        return [2 /*return*/, this._connector.getSingleImage(goodId, 1, true, true)];
                     }
+                    else {
+                        return [2 /*return*/, ""];
+                    }
+                    return [2 /*return*/];
                 });
             });
         };
-        TransactionService.prototype.addArticle = function (articleNo, amount, warehouseNo, commissionCode, isReturn) {
+        TransactionService.prototype.addArticle = function (articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr) {
             if (amount === void 0) { amount = 1; }
             if (warehouseNo === void 0) { warehouseNo = 1; }
             if (commissionCode === void 0) { commissionCode = "2"; }
             if (isReturn === void 0) { isReturn = false; }
+            if (aboveLineNr === void 0) { aboveLineNr = 0; }
+            if (belowLineNr === void 0) { belowLineNr = 0; }
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
                 return __generator(this, function (_a) {
                     return [2 /*return*/, new Promise(function (resolve, reject) {
-                            _this._connector.addTransactionLine(_this._currentTransaction.uuid, transactionLineType_enum.TransactionLineType.ArticleLine, articleNo, amount, warehouseNo, commissionCode, isReturn)
+                            _this._connector.addTransactionLine(_this._currentTransaction.uuid, transactionLineType_enum.TransactionLineType.ArticleLine, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr)
                                 .then(function (response) { return __awaiter(_this, void 0, void 0, function () {
                                 return __generator(this, function (_a) {
                                     resolve(true);
@@ -2153,12 +2254,35 @@
                 });
             });
         };
-        TransactionService.prototype.addTransactionLine = function (lineType, articleNo, amount, warehouseNo, commissionCode, isReturn) {
+        TransactionService.prototype.addTransactionLine = function (lineType, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, new Promise(function (resolve, reject) {
+                            _this._connector.addTransactionLine(_this.currentTransaction.uuid, lineType, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr)
+                                .then(function (response) { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    this._rememberCurrentTransaction(response);
+                                    this._rememberCurrentTransactionLineStatus(response);
+                                    resolve(response);
+                                    return [2 /*return*/];
+                                });
+                            }); }, function (error) {
+                                reject(error);
+                            })
+                                .catch(function (reason) {
+                                resolve(null);
+                            });
+                        })];
+                });
+            });
+        };
+        TransactionService.prototype.addTextLineToTransaction = function (showOnDocuments, text, amount, articleBound, refArticleLineNr, aboveLineNr, belowLineNr) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
                 return __generator(this, function (_a) {
                     return [2 /*return*/, new Promise(function (resolve, reject) {
-                            _this._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(function (response) { return __awaiter(_this, void 0, void 0, function () {
                                 return __generator(this, function (_a) {
                                     this._rememberCurrentTransaction(response);
@@ -2176,6 +2300,25 @@
                 });
             });
         };
+        TransactionService.prototype.changeLineSequence = function (lineUuid, aboveLineNr, belowLineNr) {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                _this._connector.changeLineSequence(_this.currentTransaction.uuid, lineUuid, aboveLineNr, belowLineNr)
+                    .then(function (response) { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        this._rememberCurrentTransaction(response);
+                        this._rememberCurrentTransactionLineStatus(response);
+                        resolve(response);
+                        return [2 /*return*/];
+                    });
+                }); }, function (error) {
+                    reject(error);
+                })
+                    .catch(function (reason) {
+                    resolve(null);
+                });
+            });
+        };
         TransactionService.prototype.cancelAddTransactionLine = function (lineUuid) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
@@ -2267,6 +2410,22 @@
                 });
             });
         };
+        TransactionService.prototype.getCustomerFulObjectByRelationId = function (relationId) {
+            return __awaiter(this, void 0, void 0, function () {
+                var relationNr;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._connector.getRelationNumber(relationId)];
+                        case 1:
+                            relationNr = _a.sent();
+                            if (!relationNr) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this._connector.getCustomerFullObject(Number(relationNr))];
+                        case 2: return [2 /*return*/, _a.sent()];
+                        case 3: return [2 /*return*/, nulRelationObject.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;
@@ -2277,13 +2436,23 @@
             }
         };
         TransactionService.prototype._rememberCurrentTransaction = function (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 () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this._currentTransaction = value.transactionInfo;
+                            this._initializeTransaction();
+                            this.currentLines = value.transactionLines;
+                            this.currentTotals = value.transactionTotal;
+                            this.currentLineOperationStatuses = value.lineOperationStatuses;
+                            return [4 /*yield*/, this._updateRelation()];
+                        case 1:
+                            _a.sent();
+                            this.transactionUpdated.emit();
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         TransactionService.prototype._rememberCurrentTransactionLineStatus = function (value) {
             // this._currentLineOperationStatus.uuid = value.lineUuid;
@@ -2292,22 +2461,18 @@
         };
         TransactionService.prototype._updateRelation = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var relationNr, _a;
+                var _a;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            if (!(this.currentTransaction && this.currentTransaction.relation && this.currentTransaction.relation.relationId)) return [3 /*break*/, 3];
-                            if (!(!this._currentRelation || this._currentRelation.relationId !== this.currentTransaction.relation.relationId)) return [3 /*break*/, 3];
-                            return [4 /*yield*/, this._connector.getRelationNumber(this.currentTransaction.relation.relationId)];
-                        case 1:
-                            relationNr = _b.sent();
-                            if (!relationNr) return [3 /*break*/, 3];
+                            if (!(this.currentTransaction && this.currentTransaction.relation && this.currentTransaction.relation.relationId)) return [3 /*break*/, 2];
+                            if (!(!this._currentRelation || this._currentRelation.relationId !== this.currentTransaction.relation.relationId)) return [3 /*break*/, 2];
                             _a = this;
-                            return [4 /*yield*/, this._connector.getCustomerFullObject(Number(relationNr))];
-                        case 2:
+                            return [4 /*yield*/, this.getCustomerFulObjectByRelationId(this.currentTransaction.relation.relationId)];
+                        case 1:
                             _a._currentRelation = _b.sent();
-                            _b.label = 3;
-                        case 3: return [2 /*return*/];
+                            _b.label = 2;
+                        case 2: return [2 /*return*/];
                     }
                 });
             });
@@ -2436,6 +2601,7 @@
                     "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",
@@ -2476,12 +2642,15 @@
                     "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",
@@ -2508,11 +2677,14 @@
                     "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",
@@ -2525,6 +2697,8 @@
                     "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",
@@ -2540,6 +2714,9 @@
                     "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",
@@ -2551,16 +2728,20 @@
                     "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",
@@ -2581,6 +2762,7 @@
                     "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",
@@ -2621,12 +2803,15 @@
                     "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",
@@ -2653,11 +2838,14 @@
                     "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",
@@ -2670,6 +2858,8 @@
                     "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",
@@ -2677,6 +2867,9 @@
                     "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",
@@ -2688,17 +2881,21 @@
                     "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",
                 },
@@ -2795,6 +2992,12 @@
             this.addUserRelationShoppingCartModule = new rxjs.Subject();
             this.addArticleLine = new rxjs.Subject();
             this.addTextLine = new rxjs.Subject();
+            this.addArticleLineAt = new rxjs.Subject();
+            this.addTextLineAt = new rxjs.Subject();
+            this.changeLineSequence = new rxjs.Subject();
+            this.transactionLineClicked = new rxjs.Subject();
+            this.rightSidebarClose = new rxjs.Subject();
+            this.scrollContent = new rxjs.Subject();
         }
         return TransactionEventService;
     }());
@@ -2842,7 +3045,7 @@
         { type: i0.Component, args: [{
                     selector: "checkout-overview-block",
                     template: "\n        <div class=\"overview-wrapper\" fxLayout=\"column\" fxLayoutGap=\"0px\">\n            <div class=\"overview-header\" fxLayout=\"row\">\n            </div>\n                <div class=\"overview-body\" fxLayout=\"row\" fxLayoutGap=\"20px\">\n                <ng-content select=\"[edit-mode-content]\"></ng-content>\n            </div>\n        </div>\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-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 = function () { return []; };
@@ -3113,7 +3316,7 @@
         { type: i0.Component, args: [{
                     selector: "checkout-overview-relation-edit",
                     template: "\n      <co-form (validSubmit)=\"validSubmit.emit()\" (invalidSubmit)=\"invalidSubmit.emit()\">\n        <div>\n            <label [textContent]=\"'ACCOUNT_DETAILS' | localize\"\n                   class=\"checkout-label-h2\"\n            ></label>\n        </div>\n        <div>\n            <label [textContent]=\"'PERSONAL_DATA' | localize\"\n                   class=\"checkout-label-h3\"\n            ></label>7\n        </div>\n        <div>\n            <div>\n                <label [textContent]=\"'ORDER_TYPE' | localize \"\n                       class=\"checkout-label-h3\"\n                ></label>\n            </div>\n            <div>\n                <co-input-radio-button [name]=\"'type'\"\n                   [label]=\"'PRIVATE_PERSON' | localize\"\n                   [value]=\"relType.Private\"\n                   [checked]=\"relation.type === relType.Private\"\n                   (modelChange)=\"changeRelationType(relType.Private)\"\n                    ></co-input-radio-button>\n                <co-input-radio-button [name]=\"'type'\"\n                   [label]=\"'COMPANY' | localize\"\n                   [value]=\"relType.Company\"\n                   [(model)]=\"relation.type\"\n                   [checked]=\"relation.type === relType.Company\"\n                   (modelChange)=\"changeRelationType(relType.Company)\"\n                ></co-input-radio-button>\n            </div>\n        </div>\n        <div *ngIf=\"relation.type === relType.Private\">\n            <label [textContent]=\"'SALUTATION' | localize\"\n                   class=\"checkout-label-h3\"\n            ></label>\n            <div>\n                <co-input-radio-button [name]=\"'gender'\"\n                   [label]=\"'MALE' | localize\"\n                   [value]=\"genderType.Male\"\n                   [checked]=\"relation.gender === genderType.Male\"\n                   (modelChange)=\"changeGenderType(genderType.Male)\"\n                ></co-input-radio-button>\n                <co-input-radio-button [name]=\"'gender'\"\n                   [label]=\"'FEMALE' | localize \"\n                   [value]=\"genderType.Female\"\n                   [checked]=\"relation.gender === genderType.Female\"\n                   (modelChange)=\"changeGenderType(genderType.Female)\"\n                ></co-input-radio-button>\n                <co-input-radio-button [name]=\"'gender'\"\n                   [label]=\"'UNKNOWN' | localize\"\n                   [value]=\"genderType.Unspecified\"\n                   [checked]=\"relation.gender === genderType.Unspecified\"\n                   (modelChange)=\"changeGenderType(genderType.Unspecified)\"\n                ></co-input-radio-button>\n            </div>\n        </div>\n        <div *ngIf=\"relation.type === relType.Private\">\n            <div>\n                <label [textContent]=\"'NAME' | localize \"\n                       class=\"checkout-label-h3\"\n                ></label>\n                <div class=\"default-flex-row\">\n                  <div class=\"default-flex-column\">\n                    <co-input-text\n                      [(model)]=\"relation.firstName\"\n                      [placeholder]=\"'FIRST_NAME' | localize \"\n                      (modelChange)=\"firstNameChange($event)\"\n                      required\n                    ></co-input-text>\n                  </div>\n                  <div class=\"default-flex-column\">\n                    <co-input-text\n                      [(model)]=\"relation.prefix\"\n                      [placeholder]=\"'PREFIX' | localize \"\n                    ></co-input-text>\n                  </div>\n                  <div class=\"default-flex-column\">\n                    <co-input-text\n                      [(model)]=\"relation.familyName\"\n                      [placeholder]=\"'LAST_NAME' | localize\"\n                      (modelChange)=\"familyNameChange($event)\"\n                      required></co-input-text>\n                  </div>\n                </div>\n            </div>\n        </div>\n        <div >\n            <div *ngIf=\"relation?.type === relType.Company\" class=\"default-flex-column\">\n                <label [textContent]=\"'COMPANY_NAME' | localize \"\n                       class=\"checkout-label-h3\"\n                ></label>\n                <co-input-text [(model)]=\"relation.familyName\" [label]=\"'COMPANY_NAME'\" required></co-input-text>\n            </div>\n        </div>\n\n        <div>\n          <checkout-overview-relation-address\n                  label=\"DELIVERY_ADDRESS\" [address]=\"editFirstAddress\"\n          ></checkout-overview-relation-address>\n        </div>\n\n        <div class=\"default-flex-row\">\n          <div class=\"default-flex-column\">\n            <co-input-date [placeholder]=\"'DATE_OF_BIRTH' | localize \" [(model)]=\"dateOfBirth\" required></co-input-date>\n          </div>\n          <div class=\"default-flex-column\">\n            <co-input-text [(model)]=\"phoneNumber.value\" [placeholder]=\"'PHONE_NO' | localize \" required></co-input-text>\n          </div>\n        </div>\n\n        <div>\n            <label [textContent]=\"'LOGIN_DETAILS' | localize \"\n                   class=\"checkout-label-h3\"\n            ></label>\n        </div>\n        <div>\n          <p>{{ 'ACCOUNT_EXPLANATION' | localize }}</p>\n        </div>\n        <div class=\"default-flex-row\">\n          <div class=\"default-flex-column\">\n              <co-input-text [(model)]=\"emailAddress.value\" [placeholder]=\"'EMAIL_ADDRESS' | localize \" [type]=\"'email'\" required></co-input-text>\n          </div>\n        </div>\n\n        <div class=\"default-flex-row\">\n          <div *ngIf=\"!applicationUser\" class=\"default-flex-column\">\n              <co-input-text [(model)]=\"accountPassword\" [placeholder]=\"'PASSWORD' | localize \" [type]=\"'password'\" required></co-input-text>\n          </div>\n          <div *ngIf=\"applicationUser\" class=\"default-flex-column\">\n            <co-input-checkbox [label]=\"'INVITE_TO_ACCOUNT' | localize\" [(model)]=\"inviteToAccount\"></co-input-checkbox>\n          </div>\n        </div>\n\n        <div>\n            <label [textContent]=\"'PRIVACY_PREFERENCES' | localize \"\n                   class=\"checkout-label-h3\"\n            ></label>\n        </div>\n\n        <div *ngFor=\"let privacySetting of privacySettings\">\n            <div class=\"privacy-row\">\n                <div class=\"privacy-column-left\">\n                    <co-input-checkbox [label]=\"privacySetting.description\"\n                                       [model]=\"isShared(privacySetting)\"\n                                       (modelChange)=\"changePrivacySetting(privacySetting, $event)\"\n                    ></co-input-checkbox>\n                </div>\n                <div class=\"privacy-column-right\">\n                    {{ privacySetting.explanation }}\n                </div>\n            </div>\n        </div>\n    </co-form>\n\n    <co-sidebar #relationSidebar isOpen=\"false\" *ngIf=\"showRelationSidebar\">\n      <div class=\"relation-sidebar-header\">\n          <label [textContent]=\"'SUGGESTIONS' | localize \"\n                 class=\"checkout-label-h3\"\n          ></label>\n        </div>\n      <checkout-relation-suggestions-list\n        [suggestions]=\"relationSuggestions\"\n        (suggestionButtonClick)=\"onRelationSuggestionClick($event)\"\n      ></checkout-relation-suggestions-list>\n    </co-sidebar>\n\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-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 = function () { return [
@@ -3385,8 +3588,8 @@
     CheckoutOverviewDeliveryEditComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "checkout-overview-delivery-edit",
-                    template: "\n    <co-form #deliveryForm (validSubmit)=\"validSubmit.emit()\" (invalidSubmit)=\"invalidSubmit.emit()\">\n      <div>\n        <div>\n          <label [textContent]=\"'DELIVERY' | localize\"\n                 class=\"checkout-label-h2\"\n          ></label>\n        </div>\n      </div>\n\n      <div class=\"default-flex-row\">\n        <div class=\"default-flex-column\">\n            <label [textContent]=\"'DELIVERY_ADDRESS' | localize\"\n                   class=\"checkout-label-h3\"\n            ></label>\n            <checkout-overview-delivery-address [address]=\"deliveryAddress\"></checkout-overview-delivery-address>\n            <div class=\"container-button-change-address\">\n              <co-button [label]=\"'DELIVERY_ADDRESS_CHANGE' | localize\" (click)=\"changeAddress(deliveryAddressType)\"></co-button>\n            </div>\n        </div>\n\n        <div class=\"default-flex-column\">\n            <label [textContent]=\"'INVOICE_ADDRESS' | localize\"\n                   class=\"checkout-label-h3\"\n            ></label>\n            <checkout-overview-delivery-address [address]=\"billingAddress\"></checkout-overview-delivery-address>\n            <div class=\"container-button-change-address\">\n              <co-button [label]=\"'INVOICE_ADDRESS_CHANGE' | localize\" (click)=\"changeAddress(billingAddressType)\"></co-button>\n            </div>\n        </div>\n      </div>\n\n      <div>\n        <label [textContent]=\"'DELIVERY_MOMENT' | localize\"\n               class=\"checkout-label-h3\"\n        ></label>\n      </div>\n\n      <div class=\"default-flex-row\">\n        <div class=\"default-flex-column\">\n          <co-input-date [placeholder]=\"'DELIVERY_DATE' | localize \" [(model)]=\"deliveryDate\"></co-input-date>\n          <co-input-checkbox [label]=\"'PART_DELIVERIES' | localize\" [(model)]=\"transaction.allowPartialDelivery\"></co-input-checkbox>\n        </div>\n        <div class=\"default-flex-column\">\n          <co-input-date [placeholder]=\"'PREFERRED_DATE' | localize \" [(model)]=\"preferredDate\"></co-input-date>\n          <ng-container *ngFor=\"let preferredDateOption of preferredDateOptions\">\n            <co-input-radio-button [name]=\"'preferedDeliveryDate2'\"\n                                   [label]=\"preferredDateOption.text | localize\"\n                                   [value]=\"preferredDateOption.value\"\n                                   [checked]=\"transaction.preferredDeliveryDate2 === preferredDateOption.value\"\n                                   (modelChange)=\"changePreferredDeliveryDate2(preferredDateOption.value)\"\n            ></co-input-radio-button>\n          </ng-container>\n        </div>\n      </div>\n\n      <div class=\"default-flex-row\">\n        <div class=\"default-flex-column\">\n          <co-input-combo-box [(model)]=\"transaction.deliveryMethod\"\n                            [source]=\"deliveryMethods\"\n                            [fields]=\"deliveryMethodFields\"\n                            [placeholder]=\"'DELIVERY_METHOD2' | localize\"\n                            [required]=\"true\"\n                            (modelChange)=\"onDeliveryMethodChange($event)\"\n            ></co-input-combo-box>\n        </div>\n      </div>\n\n      <div>\n          <label [textContent]=\"'DELIVERY_OPTIONS' | localize\"\n                 class=\"checkout-label-h3\"\n          ></label>\n      </div>\n\n      <div class=\"default-flex-row\">\n        <div class=\"default-flex-column\">\n          <co-multi-select-list\n            [placeHolder]=\"'DELIVERY_OPTIONS' | localize\"\n            [collection]=\"deliveryOptions\"\n            [fields]=\"deliveryOptionFields\"\n            [(model)]=\"transaction.deliveryOptions\"\n            [showCheckbox]=\"true\"\n            [required]=\"true\"\n          ></co-multi-select-list>\n          </div>\n      </div>\n\n      <div class=\"\">\n        <label [textContent]=\"'REMARKS' | localize\"\n               class=\"checkout-label-h3\"\n        ></label>\n        </div>\n\n      <div class=\"default-flex-row\">\n        <div class=\"default-flex-column\">\n            <co-input-text [(model)]=\"transaction.remark\" [placeholder]=\"'REMARKS' | localize\"></co-input-text>\n          </div>\n      </div>\n\n      <div class=\"default-flex-column\">\n        <co-input-checkbox [label]=\"'DELIVERY_DATE_FINAL' | localize\" [(model)]=\"deliveryDateFinal\"></co-input-checkbox>\n      </div>\n      <div class=\"default-flex-column\">\n        <co-input-date [placeholder]=\"'ASSEMBLY_DATE' | localize \" [(model)]=\"assemblyDate\"></co-input-date>\n      </div>\n      <div class=\"default-flex-column\">\n        <co-input-text [placeholder]=\"'TOTAL_ASSEMBLY_TIME' | localize \" [(model)]=\"totalAssemblyTime\"></co-input-text>\n      </div>\n      <div class=\"default-flex-column\">\n        <co-input-checkbox [label]=\"'DROPSHIPMENT' | localize\" [(model)]=\"dropshipment\"></co-input-checkbox>\n      </div>\n\n      <div class=\"default-flex-row\">\n        <div>\n          <label [textContent]=\"'DELIVERY_COSTS' | localize\"\n                 class=\"checkout-label-h3\"\n          ></label>\n          <div>{{ deliveryCosts }}</div>\n        </div>\n        <div>\n          <label [textContent]=\"'ASSEMBLY_COSTS' | localize\"\n                 class=\"checkout-label-h3\"\n          ></label>\n          <div>{{ assemblyCosts }}</div>\n        </div>\n      </div>\n\n      <div>\n        <label [textContent]=\"'MARKETING' | localize\"\n               class=\"checkout-label-h3\"\n        ></label>\n      </div>\n\n      <div class=\"default-flex-row\">\n        <div class=\"default-flex-column\">\n          <co-input-combo-box [(model)]=\"transaction.marketingCode\"\n                              [source]=\"marketing\"\n                              [fields]=\"marketingFields\"\n                              [placeholder]=\"'MARKETING' | localize\"\n                              [required]=\"true\"\n                              (modelChange)=\"onMarketingCodeChange($event)\"\n          ></co-input-combo-box>\n        </div>\n      </div>\n\n      <div class=\"default-flex-row\">\n        <div class=\"default-flex-column\">\n            <co-input-text [(model)]=\"transaction.relationReference\" [placeholder]=\"'REFERENCE_RELATION' | localize\"></co-input-text>\n        </div>\n        <div class=\"default-flex-column\">\n            <co-input-text [(model)]=\"transaction.ownReference\" [placeholder]=\"'OWN_REFERENCE' | localize\"></co-input-text>\n        </div>\n      </div>\n\n    </co-form>\n\n    <co-dialog [visible]=\"addLocationPopup\">\n      <ng-container header>{{ 'NEW_LOCATION' | localize }}</ng-container>\n        <co-form #locationForm (validSubmit)=\"saveLocation()\">\n          <checkout-overview-relation-address\n            label=\"ADDRESS\" [address]=\"newAddress\"\n          ></checkout-overview-relation-address>\n          <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"end\">\n            <co-button [label]=\"'CANCEL' | localize\" (click)=\"addLocationPopup = false;\"></co-button>\n            <co-button [label]=\"'SAVE' | localize\" (click)=\"saveNewLocation()\"></co-button>\n          </div>\n        </co-form>\n    </co-dialog>\n\n    <co-dialog #changeLocationDialog\n               [visible]=\"changeLocationPopup\"\n               (closeClick)=\"onChangeLocationCancelClick()\"\n               (overlayClick)=\"onChangeLocationCancelClick()\"\n    >\n      <ng-container header>{{ 'ADDRESS' | localize }}</ng-container>\n      <co-form>\n        <div class=\"form-content\">\n          <div>\n            <co-grid #addressGrid\n                     [data]=\"addresses\"\n                     [columns]=\"columns\"\n                     [pagingEnabled]=\"'true'\"\n                     [maxNumberOfRows]=\"'20'\"\n                     (rowsSelected)=\"handleAddressSelected($event)\"\n            ></co-grid>\n          </div>\n        </div>\n        <div class=\"flex-center\" fxLayoutGap=\"10px\">\n          <co-button [label]=\"'ADDRESS_ADD' | localize\" (click)=\"onAddLocationOkClick()\"></co-button>\n          <co-button [label]=\"'CANCEL' | localize\" (click)=\"onChangeLocationCancelClick()\"></co-button>\n        </div>\n      </co-form>\n    </co-dialog>\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-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"]
+                    template: "\n    <co-form #deliveryForm (validSubmit)=\"validSubmit.emit()\" (invalidSubmit)=\"invalidSubmit.emit()\">\n      <div>\n        <div>\n          <label [textContent]=\"'DELIVERY' | localize\"\n                 class=\"checkout-label-h2\"\n          ></label>\n        </div>\n      </div>\n\n      <div class=\"default-flex-row\">\n        <div class=\"default-flex-column\">\n            <label [textContent]=\"'DELIVERY_ADDRESS' | localize\"\n                   class=\"checkout-label-h3\"\n            ></label>\n            <checkout-overview-delivery-address [address]=\"deliveryAddress\"></checkout-overview-delivery-address>\n            <div class=\"container-button-change-address\">\n              <co-button [label]=\"'DELIVERY_ADDRESS_CHANGE' | localize\" (click)=\"changeAddress(deliveryAddressType)\"></co-button>\n            </div>\n        </div>\n\n        <div class=\"default-flex-column\">\n            <label [textContent]=\"'INVOICE_ADDRESS' | localize\"\n                   class=\"checkout-label-h3\"\n            ></label>\n            <checkout-overview-delivery-address [address]=\"billingAddress\"></checkout-overview-delivery-address>\n            <div class=\"container-button-change-address\">\n              <co-button [label]=\"'INVOICE_ADDRESS_CHANGE' | localize\" (click)=\"changeAddress(billingAddressType)\"></co-button>\n            </div>\n        </div>\n      </div>\n\n      <div>\n        <label [textContent]=\"'DELIVERY_MOMENT' | localize\"\n               class=\"checkout-label-h3\"\n        ></label>\n      </div>\n\n      <div class=\"default-flex-row\">\n        <div class=\"default-flex-column\">\n          <co-input-date [placeholder]=\"'DELIVERY_DATE' | localize \" [(model)]=\"deliveryDate\"></co-input-date>\n          <co-input-checkbox [label]=\"'PART_DELIVERIES' | localize\" [(model)]=\"transaction.allowPartialDelivery\"></co-input-checkbox>\n        </div>\n        <div class=\"default-flex-column\">\n          <co-input-date [placeholder]=\"'PREFERRED_DATE' | localize \" [(model)]=\"preferredDate\"></co-input-date>\n          <ng-container *ngFor=\"let preferredDateOption of preferredDateOptions\">\n            <co-input-radio-button [name]=\"'preferedDeliveryDate2'\"\n                                   [label]=\"preferredDateOption.text | localize\"\n                                   [value]=\"preferredDateOption.value\"\n                                   [checked]=\"transaction.preferredDeliveryDate2 === preferredDateOption.value\"\n                                   (modelChange)=\"changePreferredDeliveryDate2(preferredDateOption.value)\"\n            ></co-input-radio-button>\n          </ng-container>\n        </div>\n      </div>\n\n      <div class=\"default-flex-row\">\n        <div class=\"default-flex-column\">\n          <co-input-combo-box [(model)]=\"transaction.deliveryMethod\"\n                            [source]=\"deliveryMethods\"\n                            [fields]=\"deliveryMethodFields\"\n                            [placeholder]=\"'DELIVERY_METHOD2' | localize\"\n                            [required]=\"true\"\n                            (modelChange)=\"onDeliveryMethodChange($event)\"\n            ></co-input-combo-box>\n        </div>\n      </div>\n\n      <div>\n          <label [textContent]=\"'DELIVERY_OPTIONS' | localize\"\n                 class=\"checkout-label-h3\"\n          ></label>\n      </div>\n\n      <div class=\"default-flex-row\">\n        <div class=\"default-flex-column\">\n          <co-multi-select-list\n            [placeHolder]=\"'DELIVERY_OPTIONS' | localize\"\n            [collection]=\"deliveryOptions\"\n            [fields]=\"deliveryOptionFields\"\n            [(model)]=\"transaction.deliveryOptions\"\n            [showCheckbox]=\"true\"\n            [required]=\"true\"\n          ></co-multi-select-list>\n          </div>\n      </div>\n\n      <div class=\"\">\n        <label [textContent]=\"'REMARKS' | localize\"\n               class=\"checkout-label-h3\"\n        ></label>\n        </div>\n\n      <div class=\"default-flex-row\">\n        <div class=\"default-flex-column\">\n            <co-input-text [(model)]=\"transaction.remark\" [placeholder]=\"'REMARKS' | localize\"></co-input-text>\n          </div>\n      </div>\n\n      <div class=\"default-flex-column\">\n        <co-input-checkbox [label]=\"'DELIVERY_DATE_FINAL' | localize\" [(model)]=\"deliveryDateFinal\"></co-input-checkbox>\n      </div>\n      <div class=\"default-flex-column\">\n        <co-input-date [placeholder]=\"'ASSEMBLY_DATE' | localize \" [(model)]=\"assemblyDate\"></co-input-date>\n      </div>\n      <div class=\"default-flex-column\">\n        <co-input-text [placeholder]=\"'TOTAL_ASSEMBLY_TIME' | localize \" [(model)]=\"totalAssemblyTime\"></co-input-text>\n      </div>\n      <div class=\"default-flex-column\">\n        <co-input-checkbox [label]=\"'DROPSHIPMENT' | localize\" [(model)]=\"dropshipment\"></co-input-checkbox>\n      </div>\n\n      <div class=\"default-flex-row\">\n        <div>\n          <label [textContent]=\"'DELIVERY_COSTS' | localize\"\n                 class=\"checkout-label-h3\"\n          ></label>\n          <div>{{ deliveryCosts }}</div>\n        </div>\n        <div>\n          <label [textContent]=\"'ASSEMBLY_COSTS' | localize\"\n                 class=\"checkout-label-h3\"\n          ></label>\n          <div>{{ assemblyCosts }}</div>\n        </div>\n      </div>\n\n      <div>\n        <label [textContent]=\"'MARKETING' | localize\"\n               class=\"checkout-label-h3\"\n        ></label>\n      </div>\n\n      <div class=\"default-flex-row\">\n        <div class=\"default-flex-column\">\n          <co-input-combo-box [(model)]=\"transaction.marketingCode\"\n                              [source]=\"marketing\"\n                              [fields]=\"marketingFields\"\n                              [placeholder]=\"'MARKETING' | localize\"\n                              [required]=\"true\"\n                              (modelChange)=\"onMarketingCodeChange($event)\"\n          ></co-input-combo-box>\n        </div>\n      </div>\n\n      <div class=\"default-flex-row\">\n        <div class=\"default-flex-column\">\n            <co-input-text [(model)]=\"transaction.relationReference\" [placeholder]=\"'REFERENCE_RELATION' | localize\"></co-input-text>\n        </div>\n        <div class=\"default-flex-column\">\n            <co-input-text [(model)]=\"transaction.ownReference\" [placeholder]=\"'OWN_REFERENCE' | localize\"></co-input-text>\n        </div>\n      </div>\n\n    </co-form>\n\n    <co-dialog [visible]=\"addLocationPopup\">\n      <ng-container header>{{ 'NEW_LOCATION' | localize }}</ng-container>\n        <co-form #locationForm (validSubmit)=\"saveLocation()\">\n          <checkout-overview-relation-address\n            label=\"ADDRESS\" [address]=\"newAddress\"\n          ></checkout-overview-relation-address>\n          <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"end\">\n            <co-button [label]=\"'CANCEL' | localize\" (click)=\"addLocationPopup = false;\"></co-button>\n            <co-button [label]=\"'SAVE' | localize\" (click)=\"saveNewLocation()\"></co-button>\n          </div>\n        </co-form>\n    </co-dialog>\n\n    <co-dialog #changeLocationDialog\n               [visible]=\"changeLocationPopup\"\n               (closeClick)=\"onChangeLocationCancelClick()\"\n               (overlayClick)=\"onChangeLocationCancelClick()\"\n    >\n      <ng-container header>{{ 'ADDRESS' | localize }}</ng-container>\n      <co-form>\n        <div class=\"form-content\">\n          <div>\n            <co-grid #addressGrid\n                     [data]=\"addresses\"\n                     [columns]=\"columns\"\n                     [pagingEnabled]=\"true\"\n                     [maxNumberOfRows]=\"20\"\n                     (rowsSelected)=\"handleAddressSelected($event)\"\n            ></co-grid>\n          </div>\n        </div>\n        <div class=\"flex-center\" fxLayoutGap=\"10px\">\n          <co-button [label]=\"'ADDRESS_ADD' | localize\" (click)=\"onAddLocationOkClick()\"></co-button>\n          <co-button [label]=\"'CANCEL' | localize\" (click)=\"onChangeLocationCancelClick()\"></co-button>\n        </div>\n      </co-form>\n    </co-dialog>\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 = function () { return [
@@ -3541,7 +3744,7 @@
         { type: i0.Component, args: [{
                     selector: "checkout-overview",
                     template: "\n        <checkout-overview-block  #relationBlock sequenceNr=\"2\" label=\"YOUR_DATA\"\n                                 *ngIf=\"currentStep === steps.Relation\"\n                                 (editModeChange)=\"handleEditChangeRelation($event)\">\n            <ng-container edit-mode-content>\n                <checkout-overview-relation-edit #relationForm\n                                                 *ngIf=\"currentStep == steps.Relation && editMode\"\n                                                 [relation]=\"relation\"\n                                                 [transaction]=\"transaction\"\n                                                 (validSubmit)=\"onRelationValid()\"\n                                                 (invalidSubmit)=\"onRelationInvalid()\"\n                ></checkout-overview-relation-edit>\n            </ng-container>\n        </checkout-overview-block>\n\n        <checkout-overview-block #deliveryBlock sequenceNr=\"3\" label=\"DELIVERY\"\n                                 [hidden]=\"currentStep !== steps.Delivery\"\n                                 (editModeChange)=\"handleEditChangeDelivery($event)\">\n          <ng-container edit-mode-content>\n            <checkout-overview-delivery-edit #deliveryForm\n                                             [hidden]=\"currentStep !== steps.Delivery\"\n                                             [relation]=\"relation\"\n                                             [transaction]=\"transaction\"\n                                             (validSubmit)=\"onDeliveryValid()\"\n            ></checkout-overview-delivery-edit>\n          </ng-container>\n        </checkout-overview-block>\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-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 = function () { return []; };
@@ -3730,7 +3933,7 @@
         { type: i0.Component, args: [{
                     selector: "app-checkout",
                     template: "\n        <div class=\"checkout-viewport\">\n            <mat-horizontal-stepper #stepper\n                [linear]=\"true\" labelPosition=\"bottom\"\n                (selectionChange)=\"stepChanged($event)\">\n                    <mat-step [label]=\"'YOUR_DATA' | localize\" [completed]=\"completedRelation\"></mat-step>\n                    <mat-step [label]=\"'DELIVERY'  | localize\" [completed]=\"completedDelivery\"></mat-step>\n                    <mat-step [label]=\"'PAYMENT' | localize\"></mat-step>\n                    <mat-step [label]=\"'OVERVIEW' | localize\"></mat-step>\n            </mat-horizontal-stepper>\n            <checkout-overview [relation]=\"relation\"\n               [transaction]=\"transaction\"\n               [userIsApplicationUser]=\"userIsApplicationUser\"\n               (saveRelation)=\"handleSaveRelation()\"\n               (saveDelivery)=\"handleSaveDelivery()\"\n               (stepFinished)=\"stepFinished()\"></checkout-overview>\n            <div class=\"step-content-customer\"></div>\n        </div>\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-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 = function () { return [
@@ -4073,7 +4276,7 @@
         { type: i0.Component, args: [{
                     selector: "checkout-overview-relation-address",
                     template: "\n        <label [textContent]=\"label | localize\"\n               class=\"checkout-label-h3\"\n        ></label>\n        <div class=\"default-flex-row\">\n            <div class=\"default-flex-column\">\n              <co-input-text [(model)]=\"address.postalCode\"\n                             [placeholder]=\"'POSTAL_CODE' | localize\"\n                             (blur)=\"checkForPostalCodeCheckError()\"\n                             required\n              ></co-input-text>\n            </div>\n            <div class=\"default-flex-column\">\n              <co-input-text [(model)]=\"address.houseNo\"\n                             [placeholder]=\"'HOUSE_NO' | localize\"\n                             (blur)=\"checkForPostalCodeCheckError()\"\n                             (modelChange) = \"changeHouseNo()\"\n                             required\n              ></co-input-text>\n            </div>\n            <div class=\"default-flex-column\">\n              <co-input-text [(model)]=\"address.houseNoAddition\"\n                             [placeholder]=\"'HOUSE_NO_ADDITION' | localize\"\n              ></co-input-text>\n            </div>\n        </div>\n        <div>\n            <div class=\"default-flex-row\">\n              <div class=\"default-flex-column\">\n                <co-input-text [(model)]=\"address.streetName\" [placeholder]=\"'STREET' | localize\" required></co-input-text>\n              </div>\n              <div class=\"default-flex-column\">\n                <co-input-text [(model)]=\"address.city\" [placeholder]=\"'CITY' | localize\" required></co-input-text>\n              </div>\n              <div class=\"default-flex-column\">\n                <co-input-combo-box [(model)]=\"address.countryId\"\n                                    [source]=\"countries\"\n                                    [fields]=\"fields\"\n                                    [placeholder]=\"'COUNTRY'| localize\"\n                                    [required]=\"true\"\n                ></co-input-combo-box>\n              </div>\n            </div>\n        </div>\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-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 = function () { return [
@@ -4099,7 +4302,7 @@
         { type: i0.Component, args: [{
                     selector: "checkout-overview-delivery-address",
                     template: "\n    <div>\n      <div>\n        <label [textContent]=\"label | localize\"\n               class=\"checkout-label-h3\"\n        ></label>\n      </div>\n\n      <div (click)=\"onClick()\">\n        <div>\n          {{ address?.streetName }} {{ address?.houseNo}} {{ address?.houseNoAddition}}\n        </div>\n        <div>\n          {{ address?.postalCode }} {{ address?.city}}\n        </div>\n        <div>\n          {{ address?.countryName }}\n        </div>\n      </div>\n    </div>\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-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 = function () { return [
@@ -4175,7 +4378,7 @@
         { type: i0.Component, args: [{
                     selector: "checkout-relation-suggestions-list-item",
                     template: "\n<!--        <div class=\"left\" fxLayout fxLayoutAlign=\"start center\">-->\n<!--            <avatar [relation]=\"suggestion\" class=\"smaller\"></avatar>-->\n<!--        </div>-->\n        <div class=\"right\">\n            <div class=\"name medium-big-font\" *ngIf=\"suggestion.displayName as displayName\" [textContent]=\"displayName\"></div>\n            <div class=\"email\" *ngIf=\"suggestion.email\">\n              {{ suggestion.email }}\n            </div>\n            <div class=\"address\" *ngIf=\"suggestion.displayAddress as address\" [textContent]=\"address\"></div>\n            <div class=\"phone\" *ngIf=\"suggestion.tel1\">\n              {{ suggestion?.tel1 }}\n            </div>\n        </div>\n        <co-button [label]=\"'SELECT' | localize\" class=\"popup rounded\" (click)=\"buttonClick.emit($event)\"></co-button>\n    ",
-                    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 = function () { return []; };
@@ -4423,7 +4626,7 @@
         { type: i0.Component, args: [{
                     selector: "image-display",
                     template: "\n    <div class=\"img-wrapper\">\n      <div *ngIf=\"!!model\" class=\"image\" [style.background-image]=\"'url(' + model + ')' | safeStyle\"></div>\n      <no-image-display *ngIf=\"!model\" [label]=\"label\"></no-image-display>\n      <ng-content></ng-content>\n    </div>\n  ",
-                    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 = {
@@ -4479,9 +4682,10 @@
     }());
     IconComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -4571,7 +4775,6 @@
                         IoneCheckoutComponent,
                     ],
                     providers: [
-                        IOneConnectorAdapterService,
                         DictionaryService,
                         TransactionService,
                         OptionsService
@@ -4584,6 +4787,12 @@
                 },] }
     ];
 
+    var PositionGridRow;
+    (function (PositionGridRow) {
+        PositionGridRow["Before"] = "before";
+        PositionGridRow["After"] = "after";
+    })(PositionGridRow || (PositionGridRow = {}));
+
     var ShoppingCartManagerComponent = /** @class */ (function () {
         function ShoppingCartManagerComponent(service, transactionEvents, promptService, _dictionaryService) {
             var _this = this;
@@ -4614,6 +4823,12 @@
             }), this.transactionEvents.addToCartBySku.subscribe(function (params) {
                 _this.waitForLinesChangedToOpenCart = params.popCart;
                 _this.addToCart(params.sku, params.amount).then();
+            }), this.transactionEvents.addArticleLineAt.subscribe(function (params) {
+                _this.addArticleLineToCartAt(params.sku, params.amount, params.lineNr, params.beforeOrAfter).then();
+            }), this.transactionEvents.addTextLineAt.subscribe(function (params) {
+                _this.addTextLineToCartAt(params.text, params.lineNr, params.beforeOrAfter).then();
+            }), this.transactionEvents.changeLineSequence.subscribe(function (params) {
+                _this.changeLineSequence(params.fromIndex, params.toIndex).then();
             }), this.transactionEvents.addToCartBySelectorResult.subscribe(function (params) {
                 _this.waitForLinesChangedToOpenCart = params.popCart;
                 _this.addToCartBySelectorResult(params.selectorResult).then();
@@ -4687,6 +4902,71 @@
                 });
             });
         };
+        ShoppingCartManagerComponent.prototype.addArticleLineToCartAt = function (sku, amount, lineNr, beforeOrAfter) {
+            return __awaiter(this, void 0, void 0, function () {
+                var goodId;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.service.getGoodIdFromArticleNr(sku)];
+                        case 1:
+                            goodId = _a.sent();
+                            return [4 /*yield*/, this._loadArticle(goodId)];
+                        case 2:
+                            _a.sent();
+                            return [4 /*yield*/, this._createTransaction()];
+                        case 3:
+                            _a.sent();
+                            return [4 /*yield*/, this._handleAddArticleLineAt(amount, lineNr, beforeOrAfter)];
+                        case 4:
+                            _a.sent();
+                            this.articleAdded.emit();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ShoppingCartManagerComponent.prototype.addTextLineToCartAt = function (text, lineNr, beforeOrAfter) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.service.addTextLineToTransaction(0, text, 0, false, 0, beforeOrAfter === PositionGridRow.Before ? lineNr : undefined, beforeOrAfter === PositionGridRow.After ? lineNr : undefined)
+                                .then(function (value) {
+                                _this._handleLineOperationStatus();
+                            }, function (error) { return _this.promptService.showError(error); })];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ShoppingCartManagerComponent.prototype.changeLineSequence = function (fromIndex, toIndex) {
+            return __awaiter(this, void 0, void 0, function () {
+                var fromLine, toLine, aboveLineNr, belowLineNr;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            fromLine = this._getTransactionLineInfoByIndex(fromIndex);
+                            toLine = this._getTransactionLineInfoByIndex(toIndex);
+                            if (fromIndex > toIndex) {
+                                aboveLineNr = toLine.lineNr;
+                            }
+                            else {
+                                belowLineNr = toLine.lineNr;
+                            }
+                            return [4 /*yield*/, this.service.changeLineSequence(fromLine.uuid, aboveLineNr, belowLineNr)
+                                    .then(function (value) {
+                                    _this._handleLineOperationStatus();
+                                }, function (error) { return _this.promptService.showError(error); })];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         ShoppingCartManagerComponent.prototype.addToCartBySelectorResult = function (result) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
@@ -4804,7 +5084,7 @@
                             return [3 /*break*/, 6];
                         case 2:
                             if (!(this.editingLine === undefined)) return [3 /*break*/, 4];
-                            return [4 /*yield*/, this.service.addTransactionLine(transactionLineType_enum.TransactionLineType.ArticleLine, this.newArticleNr, this.amount, this.selectedWarehouseNr, this.commissionCode, this.isReturn)
+                            return [4 /*yield*/, this.service.addTransactionLine(transactionLineType_enum.TransactionLineType.ArticleLine, this.newArticleNr, this.amount, this.selectedWarehouseNr, this.commissionCode, this.isReturn, 0, 0)
                                     .then(function (value) {
                                     _this._handleLineOperationStatus();
                                 })];
@@ -4870,7 +5150,23 @@
                 var _this = this;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.service.addTransactionLine(transactionLineType_enum.TransactionLineType.ArticleLine, this.newArticleNr, amount, this.newArticle.standardWareHouse, this.newArticle.commissionCode)
+                        case 0: return [4 /*yield*/, this.service.addTransactionLine(transactionLineType_enum.TransactionLineType.ArticleLine, this.newArticleNr, amount, this.newArticle.standardWareHouse, this.newArticle.commissionCode, false, 0, 0)
+                                .then(function (value) {
+                                _this._handleLineOperationStatus();
+                            }, function (error) { return _this.promptService.showError(error); })];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ShoppingCartManagerComponent.prototype._handleAddArticleLineAt = function (amount, lineNr, beforeOrAfter) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.service.addTransactionLine(transactionLineType_enum.TransactionLineType.ArticleLine, this.newArticleNr, amount, this.newArticle.standardWareHouse, this.newArticle.commissionCode, false, beforeOrAfter === PositionGridRow.Before ? lineNr : undefined, beforeOrAfter === PositionGridRow.After ? lineNr : undefined)
                                 .then(function (value) {
                                 _this._handleLineOperationStatus();
                             }, function (error) { return _this.promptService.showError(error); })];
@@ -5101,13 +5397,23 @@
                 // eslint-disable-next-line no-magic-numbers
             }, 1000);
         };
+        ShoppingCartManagerComponent.prototype._getLineUuidByLineNr = function (lineNr) {
+            var transactionLine = this.service.currentLines.filter(function (transLines) { return transLines.lineNr === lineNr; });
+            return transactionLine[0].uuid;
+        };
+        ShoppingCartManagerComponent.prototype._getTransactionLineInfoByIndex = function (index) {
+            if (index >= 0 && index < this.service.currentLines.length) {
+                return this.service.currentLines[index];
+            }
+        };
         return ShoppingCartManagerComponent;
     }());
     ShoppingCartManagerComponent.decorators = [
         { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
                     selector: "shopping-cart-manager",
                     template: "\n    <co-dialog #warehouseDialog\n               (closeClick)=\"hide()\"\n               (overlayClick)=\"onStockManagerCancelClick()\"\n      >\n      <ng-container header>{{ 'STOCK_NOTIFICATION' | localize }}</ng-container>\n\n      <ng-container content>\n        <co-form>\n          <div class=\"form-content\">\n            <span *ngIf=\"message\" class=\"message-field\" [textContent]=\"message | localize\"></span>\n              <div class=\"commission-fields\" fxLayout=\"row\">\n                <co-input-number-picker class=\"horizontal\" [(model)]=\"amount\" [min]=\"0\" decimals=\"3\"></co-input-number-picker>\n                <co-input-combo-box [(model)]=\"commissionCode\"\n                                      [source]=\"commissionCodes\"\n                                      [fields]=\"commissionFields\"\n                                      [placeholder]=\"'COMMISSION_CODE' | localize\"\n                                      [required]=\"true\"\n                ></co-input-combo-box>\n              </div>\n              <div>\n                <co-grid #warehouseGrid\n                  [data]=\"transactionArticleWarehouses\"\n                  [columns]=\"columns\"\n                  [pagingEnabled]=\"'true'\"\n                  [maxNumberOfRows]=\"'20'\"\n                  (rowsSelected)=\"handleRowsSelected($event)\"\n                ></co-grid>\n              </div>\n          </div>\n        </co-form>\n      </ng-container>\n\n      <ng-container footer>\n          <div class=\"flex-center\">\n            <co-button [label]=\"'OK' | localize\" (click)=\"onStockManagerOkClick()\"></co-button>\n            <co-button [label]=\"'CANCEL' | localize\" (click)=\"onStockManagerCancelClick()\"></co-button>\n          </div>\n      </ng-container>\n    </co-dialog>\n\n    <characteristic-answer\n      #characteristicAnswer\n      (okClick)=\"handleCharacteristicAnswerOkClick($event)\"\n    ></characteristic-answer>\n  ",
-                    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 = function () { return [
@@ -5142,12 +5448,6 @@
         ContentViewMode[ContentViewMode["Timeline"] = 4] = "Timeline";
     })(ContentViewMode || (ContentViewMode = {}));
 
-    var PositionGridRow;
-    (function (PositionGridRow) {
-        PositionGridRow["Before"] = "before";
-        PositionGridRow["After"] = "after";
-    })(PositionGridRow || (PositionGridRow = {}));
-
     var ShoppingCartComponent = /** @class */ (function () {
         function ShoppingCartComponent(iconCacheService, _dictionary, service, _transactionEvents, _changeDetector) {
             var _this = this;
@@ -5175,7 +5475,7 @@
             });
             this.setFilteredCollection(this.service.currentLines);
             var 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" });
         }
         Object.defineProperty(ShoppingCartComponent.prototype, "filteredCollection", {
@@ -5193,7 +5493,7 @@
                 property: "lineNr",
                 type: sortType_enum.SortType.Number
             };
-            sortUtils.SortUtils.SortObjectArray(this._filteredCollection, [sortByLineNr]);
+            //    SortUtils.SortObjectArray(this._filteredCollection, [sortByLineNr]);
         };
         ShoppingCartComponent.prototype.ngAfterViewInit = function () {
             this.hideSidebar();
@@ -5274,28 +5574,27 @@
             var 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;
             }
         };
-        ShoppingCartComponent.prototype.rowDragStart = function (args) {
-            // @ts-ignore
-            // tslint:disable-next-line:no-console
-            console.log("Drag start -> Nummer: " + args.data[0].Nummer + ", Index: " + args.fromIndex);
-        };
         ShoppingCartComponent.prototype.rowDrop = function (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;
         };
         return ShoppingCartComponent;
     }());
@@ -5303,7 +5602,7 @@
         { type: i0.Component, args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: "shopping-cart",
-                    template: "\n    <div class=\"cart-header\">\n      <span class=\"cart-header-label\" [textContent]=\"getCartLabel()\"></span>\n      <div class=\"view-mode-buttons\">\n        <co-button [iconData]=\"iconCacheService.getIcon(iconThickLines)\"\n                   [title]=\"'LIST_VIEW' | localize\"\n                   (click)=\"this.activeViewMode = viewModes.List\"\n                   class=\"triangle white\"\n                   iconClass=\"medium light\"></co-button>\n        <co-button [iconData]=\"iconCacheService.getIcon(iconThinLines)\"\n                   [title]=\"'GRID_VIEW' | localize\"\n                   (click)=\"this.activeViewMode = viewModes.Grid\"\n                   class=\"triangle white\"\n                   iconClass=\"medium light\"></co-button>\n      </div>\n    </div>\n    <div class=\"cart-lines\">\n      <div class=\"cart-list-wrapper\" *ngIf=\"activeViewMode === viewModes.List\" fxFlex=\"column\">\n        <shopping-cart-line [overlayMode]=\"overlayMode\" [overviewMode]=\"overviewMode\"\n                            *ngFor=\"let line of filteredCollection; trackBy:trackByFn;\"\n                            [line]=\"line\"\n        ></shopping-cart-line>\n      </div>\n      <div class=\"cart-list-wrapper\" *ngIf=\"activeViewMode === viewModes.Grid\" fxFlex=\"column\">\n        <co-grid\n          [data]=\"filteredCollection\"\n          [rowDragAndDropEnabled]=\"true\"\n          [contextMenuItems]=\"contextMenuItems\"\n          [columns]=\"columns\"\n          [pagingEnabled]=\"'true'\"\n          [maxNumberOfRows]=\"'20'\"\n          (rowsSelected)=\"handleRowsSelected($event)\"\n          (contextMenuItemClick)=\"menuItemClick($event)\"\n          (rowDragStartEvent)=\"rowDragStart($event)\"\n          (rowDropEvent)=\"rowDrop($event)\"\n        ></co-grid>\n      </div>\n    </div>\n    <div class=\"shopping-cart-totals\" fxLayout=\"column\" fxLayoutGap=\"10px\">\n      <div fxLayout=\"row\">\n        <span [textContent]=\"'ORDER_GROSS' | localize\"></span>\n        <span [textContent]=\"service.currentTotals?.grossAmount | coCurrency: true\"></span>\n      </div>\n      <div fxLayout=\"row\" *ngIf=\"service.currentTotals?.discountAmount\">\n        <span [textContent]=\"'DISCOUNT_AMOUNT' | localize\"></span>\n        <span [textContent]=\"service.currentTotals?.discountAmount | coCurrency: true\"></span>\n      </div>\n      <div fxLayout=\"row\" *ngIf=\"service.currentTotals?.transactionDiscountAmount\">\n        <span [textContent]=\"'TRANSACTION_DISCOUNT' | localize\"></span>\n        <span [textContent]=\"service.currentTotals?.transactionDiscountAmount | coCurrency: true\"></span>\n      </div>\n      <div fxLayout=\"row\" *ngIf=\"service.currentTotals?.transactionDiscountPercentage\">\n        <span [textContent]=\"'TRANSACTION_DISCOUNT_PERC' | localize\"></span>\n        <span [textContent]=\"service.currentTotals?.transactionDiscountPercentage.toString() | append:' %'\"></span>\n      </div>\n      <div fxLayout=\"row\">\n        <span [textContent]=\"'ORDER_NET'| localize\"></span>\n        <span [textContent]=\"service.currentTotals?.netAmount | coCurrency: true\"></span>\n      </div>\n      <a (click)=\"addDiscount()\" [textContent]=\"'ADD_DISCOUNTS' | localize\"></a>\n    </div>\n    <div class=\"shopping-cart-row-end\">\n      <co-button *ngIf=\"!hideOverviewButton\" [label]=\"'OVERVIEW' | localize\"\n                 (click)=\"overview.emit()\"\n      ></co-button>\n      <co-button *ngIf=\"!hideCloseCartButton\"[label]=\"'SHOPPING_CART_RESUME' | localize\"\n                 (click)=\"closeCart.emit()\"\n      ></co-button>\n      <co-button *ngIf=\"!hideCheckoutButton\" [label]=\"'SHOPPING_CART_CHECKOUT' | localize\"\n                 [disabled]=\"!service.articleAmount\"\n                 (click)=\"checkout.emit()\"></co-button>\n    </div>\n\n    <co-sidebar #discountsSidebar isOpen=\"false\" *ngIf=\"showDiscountsSidebar\">\n        <div fxLayout=\"column\" fxLayoutGap=\"10px\">\n          <co-button  class=\"rectangular\" [label]=\"'TRANSACTION_DISCOUNT_PERC' | localize\"\n                         (click)=\"onStartDiscountInput(orderDiscountType.DiscountPercentage, 'TRANSACTION_DISCOUNT_PERC')\"></co-button>\n          <co-button class=\"rectangular\" [label]=\"'TRANSACTION_DISCOUNT'| localize\"\n                         (click)=\"onStartDiscountInput(orderDiscountType.DiscountAmount, 'TRANSACTION_DISCOUNT')\"></co-button>\n          <co-button class=\"rectangular\" [label]=\"'TRANSACTION_TOTAL'| localize\"\n                         (click)=\"onStartDiscountInput(orderDiscountType.OrderTotal, 'TRANSACTION_TOTAL')\"></co-button>\n\n        </div>\n    </co-sidebar>\n\n    <co-dialog [visible]=\"inputDiscounts\">\n      <ng-container header>{{ discountHeader | localize }}</ng-container>\n        <co-form>\n          <co-input-text\n            *ngIf=\"discountType === orderDiscountType.DiscountPercentage\"\n            [type]=\"'number'\"\n            [(model)]=\"transactionDiscountPercentage\"\n            [placeholder]=\"'TRANSACTION_DISCOUNT_PERC' | localize\"\n          ></co-input-text>\n          <co-input-text\n            *ngIf=\"discountType === orderDiscountType.DiscountAmount\"\n            [type]=\"'number'\"\n            [(model)]=\"transactionDiscountAmount\"\n            [placeholder]=\"'TRANSACTION_DISCOUNT' | localize\"\n          ></co-input-text>\n          <co-input-text\n            *ngIf=\"discountType === orderDiscountType.OrderTotal\"\n            [type]=\"'number'\"\n            [(model)]=\"transactionTotal\"\n            [placeholder]=\"'TRANSACTION_TOTAL' | localize\"\n          ></co-input-text>\n\n          <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"end\">\n            <co-button [label]=\"'CANCEL' | localize\" (click)=\"inputDiscounts = false\"></co-button>\n            <co-button [label]=\"'OK' | localize\" (click)=\"onInputDiscountsOkClick()\"></co-button>\n          </div>\n        </co-form>\n    </co-dialog>\n  ",
+                    template: "\n    <div class=\"cart-header\">\n      <span class=\"cart-header-label\" [textContent]=\"getCartLabel()\"></span>\n      <div class=\"view-mode-buttons\">\n        <co-button [iconData]=\"iconCacheService.getIcon(iconThickLines)\"\n                   [title]=\"'LIST_VIEW' | localize\"\n                   (click)=\"this.activeViewMode = viewModes.List\"\n                   class=\"triangle white\"\n                   iconClass=\"medium light\"></co-button>\n        <co-button [iconData]=\"iconCacheService.getIcon(iconThinLines)\"\n                   [title]=\"'GRID_VIEW' | localize\"\n                   (click)=\"this.activeViewMode = viewModes.Grid\"\n                   class=\"triangle white\"\n                   iconClass=\"medium light\"></co-button>\n      </div>\n    </div>\n    <div class=\"cart-lines\">\n      <div class=\"cart-list-wrapper\" *ngIf=\"activeViewMode === viewModes.List\" fxFlex=\"column\">\n        <shopping-cart-line [overlayMode]=\"overlayMode\" [overviewMode]=\"overviewMode\"\n                            *ngFor=\"let line of filteredCollection; trackBy:trackByFn;\"\n                            [line]=\"line\"\n        ></shopping-cart-line>\n      </div>\n      <div class=\"cart-list-wrapper\" *ngIf=\"activeViewMode === viewModes.Grid\" fxFlex=\"column\">\n        <co-grid\n          [data]=\"filteredCollection\"\n          [rowDragAndDropEnabled]=\"true\"\n          [contextMenuItems]=\"contextMenuItems\"\n          [sortingEnabled]=\"false\"\n          [columns]=\"columns\"\n          [pagingEnabled]=\"'true'\"\n          [maxNumberOfRows]=\"'20'\"\n          (rowsSelected)=\"handleRowsSelected($event)\"\n          (contextMenuItemClick)=\"menuItemClick($event)\"\n          (rowDropEvent)=\"rowDrop($event)\"\n        ></co-grid>\n      </div>\n    </div>\n    <div class=\"shopping-cart-totals\" fxLayout=\"column\" fxLayoutGap=\"10px\">\n      <div fxLayout=\"row\">\n        <span [textContent]=\"'ORDER_GROSS' | localize\"></span>\n        <span [textContent]=\"service.currentTotals?.grossAmount | coCurrency: true\"></span>\n      </div>\n      <div fxLayout=\"row\" *ngIf=\"service.currentTotals?.discountAmount\">\n        <span [textContent]=\"'DISCOUNT_AMOUNT' | localize\"></span>\n        <span [textContent]=\"service.currentTotals?.discountAmount | coCurrency: true\"></span>\n      </div>\n      <div fxLayout=\"row\" *ngIf=\"service.currentTotals?.transactionDiscountAmount\">\n        <span [textContent]=\"'TRANSACTION_DISCOUNT' | localize\"></span>\n        <span [textContent]=\"service.currentTotals?.transactionDiscountAmount | coCurrency: true\"></span>\n      </div>\n      <div fxLayout=\"row\" *ngIf=\"service.currentTotals?.transactionDiscountPercentage\">\n        <span [textContent]=\"'TRANSACTION_DISCOUNT_PERC' | localize\"></span>\n        <span [textContent]=\"service.currentTotals?.transactionDiscountPercentage.toString() | append:' %'\"></span>\n      </div>\n      <div fxLayout=\"row\">\n        <span [textContent]=\"'ORDER_NET'| localize\"></span>\n        <span [textContent]=\"service.currentTotals?.netAmount | coCurrency: true\"></span>\n      </div>\n      <a (click)=\"addDiscount()\" [textContent]=\"'ADD_DISCOUNTS' | localize\"></a>\n    </div>\n    <div class=\"shopping-cart-row-end\">\n      <co-button *ngIf=\"!hideOverviewButton\" [label]=\"'OVERVIEW' | localize\"\n                 (click)=\"overview.emit()\"\n      ></co-button>\n      <co-button *ngIf=\"!hideCloseCartButton\"[label]=\"'SHOPPING_CART_RESUME' | localize\"\n                 (click)=\"closeCart.emit()\"\n      ></co-button>\n      <co-button *ngIf=\"!hideCheckoutButton\" [label]=\"'SHOPPING_CART_CHECKOUT' | localize\"\n                 [disabled]=\"!service.articleAmount\"\n                 (click)=\"checkout.emit()\"></co-button>\n    </div>\n\n    <co-sidebar #discountsSidebar isOpen=\"false\" *ngIf=\"showDiscountsSidebar\">\n        <div fxLayout=\"column\" fxLayoutGap=\"10px\">\n          <co-button  class=\"rectangular\" [label]=\"'TRANSACTION_DISCOUNT_PERC' | localize\"\n                         (click)=\"onStartDiscountInput(orderDiscountType.DiscountPercentage, 'TRANSACTION_DISCOUNT_PERC')\"></co-button>\n          <co-button class=\"rectangular\" [label]=\"'TRANSACTION_DISCOUNT'| localize\"\n                         (click)=\"onStartDiscountInput(orderDiscountType.DiscountAmount, 'TRANSACTION_DISCOUNT')\"></co-button>\n          <co-button class=\"rectangular\" [label]=\"'TRANSACTION_TOTAL'| localize\"\n                         (click)=\"onStartDiscountInput(orderDiscountType.OrderTotal, 'TRANSACTION_TOTAL')\"></co-button>\n\n        </div>\n    </co-sidebar>\n\n    <co-dialog [visible]=\"inputDiscounts\">\n      <ng-container header>{{ discountHeader | localize }}</ng-container>\n        <co-form>\n          <co-input-text\n            *ngIf=\"discountType === orderDiscountType.DiscountPercentage\"\n            [type]=\"'number'\"\n            [(model)]=\"transactionDiscountPercentage\"\n            [placeholder]=\"'TRANSACTION_DISCOUNT_PERC' | localize\"\n          ></co-input-text>\n          <co-input-text\n            *ngIf=\"discountType === orderDiscountType.DiscountAmount\"\n            [type]=\"'number'\"\n            [(model)]=\"transactionDiscountAmount\"\n            [placeholder]=\"'TRANSACTION_DISCOUNT' | localize\"\n          ></co-input-text>\n          <co-input-text\n            *ngIf=\"discountType === orderDiscountType.OrderTotal\"\n            [type]=\"'number'\"\n            [(model)]=\"transactionTotal\"\n            [placeholder]=\"'TRANSACTION_TOTAL' | localize\"\n          ></co-input-text>\n\n          <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"end\">\n            <co-button [label]=\"'CANCEL' | localize\" (click)=\"inputDiscounts = false\"></co-button>\n            <co-button [label]=\"'OK' | localize\" (click)=\"onInputDiscountsOkClick()\"></co-button>\n          </div>\n        </co-form>\n    </co-dialog>\n  ",
                     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}.shopping-cart-totals{padding-bottom:20px}.shopping-cart-totals{padding-top:20px}.cart-header{margin-top:20px}.cart-header{margin-bottom:20px}.cart-header .view-mode-buttons{margin-left:11px}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{background-color:#fff;opacity:1;display:flex;flex-direction:column;height:100%;color:#22313c}.cart-header{display:flex;justify-content:space-between}.cart-header .cart-header-label{font-weight:bold}.cart-header .view-mode-buttons{display:flex;flex-direction:row}.cart-header .view-mode-buttons co-button{padding:0}.cart-header .view-mode-buttons co-button ::ng-deep co-button{border-radius:0}.cart-header .view-mode-buttons co-button:first-child ::ng-deep co-button{border-radius:3px}.cart-header .view-mode-buttons co-button:nth-child(2) ::ng-deep co-button{border-top-left-radius:3px;border-bottom-left-radius:3px}.cart-header .view-mode-buttons co-button:last-child ::ng-deep co-button{border-top-right-radius:3px;border-bottom-right-radius:3px}.cart-lines{display:flex;height:100%;overflow:auto}.shopping-cart-totals{align-items:flex-end}.shopping-cart-totals>div{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.shopping-cart-totals>div span:last-of-type{min-width:6em;text-align:right}.shopping-cart-totals div:last-of-type{font-weight:bold}\n", ":host .shopping-cart-viewport{max-width:60%;margin-left:20%}:host .shopping-cart-row-end{display:flex;flex-direction:row;grid-column-gap:10px;-moz-column-gap:10px;column-gap:10px;justify-content:flex-end}\n"]
                 },] }
     ];
@@ -5326,6 +5625,19 @@
         overview: [{ type: i0.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>
     var IoneShoppingCartComponent = /** @class */ (function () {
         function IoneShoppingCartComponent(_changeDetector, _optionsService, _connector, _dictionary, _service, transactionEvents, _promptService) {
             var _this = this;
@@ -5342,6 +5654,11 @@
             this.closeCart = new i0.EventEmitter();
             this.checkout = new i0.EventEmitter();
             this.overview = new i0.EventEmitter();
+            this.addArticleLine = new i0.EventEmitter();
+            this.addTextLine = new i0.EventEmitter();
+            this.showCatalogSidebar = false;
+            this.currentArticleLineNr = 0;
+            this.currentPositionGridRow = PositionGridRow.After;
             this.show = false;
             this.amountOfLines = 0;
             this.upAndLoaded = false;
@@ -5349,20 +5666,22 @@
             this._subscriptions = [];
             this._remoteOptions = true;
             this._publicOptions = true;
-            this._subscriptions.push(this._optionsService.optionsLoaded.subscribe(function (loaded) { return _this._handleSettingsLoaded(loaded); }));
+            this._subscriptions.push(this._optionsService.optionsLoaded.subscribe(function (loaded) { return _this._handleSettingsLoaded(loaded); }), this.transactionEvents.addArticleLine.subscribe(function (args) { return _this._handleAddArticleLine(args); }), this.transactionEvents.addTextLine.subscribe(function (args) { return _this._handleAddTextLine(args); }));
         }
         Object.defineProperty(IoneShoppingCartComponent.prototype, "options", {
+            get: function () {
+                return this._options;
+            },
             set: function (value) {
                 if (value) {
-                    var options = void 0;
                     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();
                 }
             },
             enumerable: false,
@@ -5398,6 +5717,18 @@
         IoneShoppingCartComponent.prototype.addArticle = function (articleNo, amount) {
             this.transactionEvents.addToCartBySku.next({ sku: articleNo, amount: amount, popCart: true });
         };
+        IoneShoppingCartComponent.prototype.addArticleButtonClick = function (article) {
+            this.transactionEvents.addArticleLineAt.next({ sku: article.articleNumber, amount: 1, lineNr: this.currentArticleLineNr, beforeOrAfter: this.currentPositionGridRow });
+        };
+        IoneShoppingCartComponent.prototype.addToCart = function (article) {
+            this.transactionEvents.addArticleLineAt.next({ sku: article.articleNumber, amount: 1, lineNr: this.currentArticleLineNr, beforeOrAfter: this.currentPositionGridRow });
+        };
+        IoneShoppingCartComponent.prototype.addArticleLineAt = function (articleNo, amount, lineNr, beforeOrAfter) {
+            this.transactionEvents.addArticleLineAt.next({ sku: articleNo, amount: amount, lineNr: lineNr, beforeOrAfter: beforeOrAfter });
+        };
+        IoneShoppingCartComponent.prototype.addTextLineAt = function (text, lineNr, beforeOrAfter) {
+            this.transactionEvents.addTextLineAt.next({ text: text, lineNr: lineNr, beforeOrAfter: beforeOrAfter });
+        };
         IoneShoppingCartComponent.prototype.addArticleByBySelectorResult = function (selectorResult, popCart) {
             this.transactionEvents.addToCartBySelectorResult.next({ selectorResult: selectorResult, popCart: popCart });
         };
@@ -5439,10 +5770,20 @@
                 });
             });
         };
+        IoneShoppingCartComponent.prototype._handleAddArticleLine = function (args) {
+            //this.addArticleLine.next(args);
+            this.showCatalogSidebar = true;
+            this.currentArticleLineNr = args.lineNr;
+            this.currentPositionGridRow = args.beforeOrAfter;
+        };
+        IoneShoppingCartComponent.prototype._handleAddTextLine = function (args) {
+            this.addTextLine.next(args);
+        };
         return IoneShoppingCartComponent;
     }());
     IoneShoppingCartComponent.decorators = [
         { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
                     selector: "ione-shopping-cart",
                     template: "\n    <ng-container *ngIf=\"upAndLoaded\">\n      <shopping-cart-manager\n        (linesChanged)=\"linesChanged($event)\"\n      ></shopping-cart-manager>\n    </ng-container>\n    <ng-container *ngIf=\"show\">\n      <shopping-cart\n        [hideOverviewButton]=\"hideOverviewButton\"\n        [hideCloseCartButton]=\"hideCloseCartButton\"\n        [hideCheckoutButton]=\"hideCheckoutButton\"\n        (overview)=\"onOverviewButtonClicked()\"\n        (closeCart)=\"onCloseCartButtonClicked()\"\n        (checkout)=\"onCheckoutButtonClicked()\"\n      ></shopping-cart>\n    </ng-container>\n  "
                 },] }
@@ -5465,7 +5806,9 @@
         hideCloseCartButton: [{ type: i0.Input }],
         closeCart: [{ type: i0.Output }],
         checkout: [{ type: i0.Output }],
-        overview: [{ type: i0.Output }]
+        overview: [{ type: i0.Output }],
+        addArticleLine: [{ type: i0.Output }],
+        addTextLine: [{ type: i0.Output }]
     };
 
     var ShoppingCartLineComponent = /** @class */ (function () {
@@ -5637,7 +5980,7 @@
         { type: i0.Component, args: [{
                     selector: "shopping-cart-line",
                     template: "\n    <div *ngIf=\"line.isArticle\" class=\"cart-line-r\" fxFlex>\n      <div fxLayout=\"row\" class=\"full-width\">\n        <div fxLayout=\"column\" class=\"cart-line-image\" *ngIf=\"!overviewMode\">\n        <co-button [iconData]=\"iconCacheService.getIcon(iconTrashBin)\"\n                   [title]=\"'DELETE_TRANSACTION_LINE_HINT' | localize\"\n                   (click)=\"deleteTransactionLineClick()\"\n                   class=\"triangle white\"\n                   iconClass=\"medium light\"></co-button>\n        </div>\n        <div fxLayout=\"column\" class=\"cart-line-image\" *ngIf=\"!overviewMode\">\n          <image-display [model]=\"image\" hideOnEmptyModel></image-display>\n        </div>\n        <div fxLayout=\"column\" class=\"cart-line-description\" fxLayoutGap=\"20px\">\n          <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n            <span [textContent]=\"line.goodDescription\" class=\"cart-line-description-main\"></span>\n            <span *ngIf=\"line.goodDescription && line.articleNumber\">|</span>\n            <span [textContent]=\"line.articleNumber\" class=\"cart-line-description-artnr\"></span>\n          </div>\n          <span [innerHTML]=\"line.configurationReadable\"></span>\n        </div>\n      </div>\n      <div fxLayout=\"row\" class=\"cart-line-right\">\n        <div fxLayout=\"column\" class=\"cart-line-stock\" *ngIf=\"!overlayMode && !overviewMode\">\n          <span [textContent]=\"'STOCK' | localize\" class=\"small-font\"></span>\n          <stock-status-indicator [model]=\"stock\"></stock-status-indicator>\n          <span [textContent]=\"'DELIVERY_TIME_PERIOD' | localize\" class=\"small-font\"></span>\n          <span [textContent]=\"line.deliveryDate | deliveryTime\"></span>\n        </div>\n        <div class=\"cart-line-amount\">\n          <co-input-number-picker\n            class=\"horizontal\"\n            [(model)]=\"localAmount\" [min]=\"0\" [buttonShowMode]=\"'always'\"\n            [readonly]=\"true\"\n            (modelChange)=\"changeLineAmount($event)\"></co-input-number-picker>\n        </div>\n\n        <div class=\"cart-line-totals\">\n          <span [textContent]=\"line.displayNetLineTotal | coCurrency: true\"></span>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"line.isText\" class=\"cart-line-t\" fxFlex\n         [class.article-text]=\"line.articleBound\"\n         [textContent]=\"line.text\">\n    </div>\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-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 = function () { return [
@@ -5672,7 +6015,7 @@
         { type: i0.Component, args: [{
                     selector: "stock-status-indicator",
                     template: "\n        <div [class]=\"stockClass\">\n            <div class=\"square-1\"></div>\n            <div class=\"square-2\"></div>\n            <div class=\"square-3\"></div>\n        </div>\n    ",
-                    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 = {
@@ -5771,10 +6114,9 @@
                         corecomponents_v12.PopupModule.forRoot(),
                         corecomponents_v12.CoSidebarModule,
                         corecomponents_v12.CoGridModule,
-                        CoreModule,
+                        CoreModule
                     ],
                     providers: [
-                        IOneConnectorAdapterService,
                         DictionaryService,
                         TransactionService,
                         OptionsService
@@ -5782,11 +6124,1467 @@
                     entryComponents: [
                         IoneShoppingCartComponent
                     ],
-                    exports: [IoneShoppingCartComponent],
+                    exports: [IoneShoppingCartComponent, StockStatusIndicatorComponent],
                     bootstrap: [IoneShoppingCartComponent]
                 },] }
     ];
 
+    var IoneServiceOrderComponent = /** @class */ (function () {
+        function IoneServiceOrderComponent(_changeDetector, _optionsService, _connector, _dictionary, _service) {
+            var _this = this;
+            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(function (loaded) { return _this._handleSettingsLoaded(loaded); }));
+        }
+        Object.defineProperty(IoneServiceOrderComponent.prototype, "options", {
+            set: function (value) {
+                if (value) {
+                    var options = void 0;
+                    if (typeof value === "string") {
+                        options = JSON.parse(value);
+                    }
+                    else {
+                        options = value;
+                    }
+                    this._publicOptions = true;
+                    this._optionsService.initialize(options).then();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        IoneServiceOrderComponent.prototype.ngOnInit = function () {
+            if (!this._publicOptions) {
+                this._optionsService.initializeDevelopmentOptions(this._remoteOptions);
+            }
+        };
+        IoneServiceOrderComponent.prototype.ngOnDestroy = function () {
+            this._subscriptions.forEach(function (subscription) { return subscription.unsubscribe(); });
+        };
+        IoneServiceOrderComponent.prototype._handleSettingsLoaded = function (loaded) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!loaded) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._initConnection().then()];
+                        case 1:
+                            _a.sent();
+                            this.upAndLoaded = true;
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        IoneServiceOrderComponent.prototype._initConnection = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._connector.connect(this._optionsService.options)];
+                        case 1:
+                            _a.sent();
+                            if (!this.orderNr) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this._service.getTransaction(this.orderNr)];
+                        case 2:
+                            _a.sent();
+                            return [3 /*break*/, 7];
+                        case 3:
+                            if (!this.orderId) return [3 /*break*/, 5];
+                            return [4 /*yield*/, this._service.getTransactionById(this.orderId)];
+                        case 4:
+                            _a.sent();
+                            return [3 /*break*/, 7];
+                        case 5: return [4 /*yield*/, this._service.getTransaction(IoneServiceOrderComponent.TEST_ORDER_NR)];
+                        case 6:
+                            _a.sent();
+                            _a.label = 7;
+                        case 7:
+                            if (this._optionsService.options.url) {
+                                this._dictionary.rootUrl = this._optionsService.options.url.replace("/ajaxservice", "");
+                            }
+                            return [4 /*yield*/, this._dictionary.setDictionary(this._optionsService.options.languageCode)];
+                        case 8:
+                            _a.sent();
+                            setTimeout(function () {
+                                _this._changeDetector.detectChanges();
+                            });
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return IoneServiceOrderComponent;
+    }());
+    IoneServiceOrderComponent.TEST_ORDER_NR = 18156;
+    IoneServiceOrderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "ione-service-order",
+                    template: "\n    <div>\n        <service-order></service-order>\n    </div>\n    <transaction-sidebar-right></transaction-sidebar-right>\n  "
+                },] }
+    ];
+    IoneServiceOrderComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: OptionsService },
+        { type: IOneConnectorAdapterService },
+        { type: DictionaryService },
+        { type: TransactionService }
+    ]; };
+    IoneServiceOrderComponent.propDecorators = {
+        orderNr: [{ type: i0.Input }],
+        orderId: [{ type: i0.Input }],
+        options: [{ type: i0.Input }]
+    };
+
+    var TransactionBaseComponent = /** @class */ (function () {
+        function TransactionBaseComponent(service) {
+            this.service = service;
+            this.relation = nulRelationObject.NULL_RELATION_LIST_OBJECT;
+            this.customer = nulRelationObject.NULL_CUSTOMER_FULL_OBJECT;
+            this._isService = false;
+            this.basedOnProduct = false;
+        }
+        Object.defineProperty(TransactionBaseComponent.prototype, "transaction", {
+            get: function () {
+                return this._transaction;
+            },
+            set: function (value) {
+                this._transaction = value;
+                if (this._transaction && this._transaction.transactionInfo) {
+                    this._isService = this._transaction.transactionInfo.transactionKind === transactionKind_enum.TransactionKind.ServiceOrder;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionBaseComponent.prototype, "transactionInfo", {
+            get: function () {
+                return this._transaction.transactionInfo;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionBaseComponent.prototype, "transactionLines", {
+            get: function () {
+                if (this._transaction) {
+                    return this._transaction.transactionLines;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionBaseComponent.prototype, "transactionTotal", {
+            get: function () {
+                if (this._transaction) {
+                    return this._transaction.transactionTotal;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionBaseComponent.prototype, "isService", {
+            get: function () {
+                return this._isService;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionBaseComponent.prototype, "relationId", {
+            get: function () {
+                return this._relationId;
+            },
+            set: function (value) {
+                if (value === undefined) {
+                    return;
+                }
+                this._relationId = value;
+                this._retrieveRelation();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionBaseComponent.prototype, "customerId", {
+            get: function () {
+                return this._customerId;
+            },
+            set: function (value) {
+                if (value === undefined) {
+                    return;
+                }
+                this._customerId = value;
+                this._retrieveCustomer();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionBaseComponent.prototype, "product", {
+            get: function () {
+                return this._product;
+            },
+            set: function (value) {
+                this._product = value;
+                this.productSet();
+                this._setBasedOnProduct();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionBaseComponent.prototype, "isNew", {
+            get: function () {
+                return isNill_function.isNill(this.transaction) || isNill_function.isNill(this.transactionInfo.transactionNr);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TransactionBaseComponent.prototype.transactionSet = function () {
+            // overridden by descendents
+        };
+        TransactionBaseComponent.prototype.productSet = function () {
+            // overridden by descendents
+        };
+        TransactionBaseComponent.prototype._retrieveCustomer = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = this;
+                            return [4 /*yield*/, this.service.getCustomerFulObjectByRelationId(this._customerId)];
+                        case 1:
+                            _a.customer = _b.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        TransactionBaseComponent.prototype._retrieveRelation = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var relationRequest$1, relations;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            relationRequest$1 = new relationRequest.RelationRequest();
+                            relations = [];
+                            relationRequest$1.relationId = this.relationId;
+                            return [4 /*yield*/, this.service.getRelationListObjects(relationRequest$1)];
+                        case 1:
+                            relations = _a.sent();
+                            if (relations && relations.length) {
+                                this.relation = relations[0];
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        TransactionBaseComponent.prototype._setBasedOnProduct = function () {
+            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;
+                // }
+            }
+        };
+        return TransactionBaseComponent;
+    }());
+    TransactionBaseComponent.decorators = [
+        { type: i0.Directive }
+    ];
+    TransactionBaseComponent.ctorParameters = function () { return [
+        { type: TransactionService }
+    ]; };
+    TransactionBaseComponent.propDecorators = {
+        transaction: [{ type: i0.Input }],
+        relationId: [{ type: i0.Input }],
+        customerId: [{ type: i0.Input }],
+        product: [{ type: i0.Input }],
+        relation: [{ type: i0.Input }],
+        customer: [{ type: i0.Input }]
+    };
+
+    var TransactionArticleTextComponent = /** @class */ (function (_super) {
+        __extends(TransactionArticleTextComponent, _super);
+        function TransactionArticleTextComponent(service) {
+            var _this = _super.call(this, service) || this;
+            _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" };
+            return _this;
+        }
+        TransactionArticleTextComponent.prototype.onOkClick = function () {
+            this.hide();
+        };
+        TransactionArticleTextComponent.prototype.onPopupClose = function () {
+            this.hide();
+            this.hideOverview();
+            this.hideEditArtikelText();
+        };
+        TransactionArticleTextComponent.prototype.hide = function () {
+            // TODO: throw hide event
+            this.visible = false;
+        };
+        TransactionArticleTextComponent.prototype.onOverview = function () {
+            this.overviewSelected = true;
+        };
+        TransactionArticleTextComponent.prototype.onOkOverviewClick = function () {
+            this.hideOverview();
+        };
+        TransactionArticleTextComponent.prototype.hideOverview = function () {
+            this.overviewSelected = false;
+        };
+        TransactionArticleTextComponent.prototype.onDetailLinkClick = function (bo) {
+            this.editArtikelText = true;
+        };
+        TransactionArticleTextComponent.prototype.hideEditArtikelText = function () {
+            this.editArtikelText = false;
+        };
+        TransactionArticleTextComponent.prototype.onOkEditArtikelTextClick = function () {
+            this.editArtikelText = false;
+        };
+        return TransactionArticleTextComponent;
+    }(TransactionBaseComponent));
+    TransactionArticleTextComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-article-text",
+                    template: "\n        <co-dialog [visible]=\"visible\" (close)=\"onPopupClose()\">\n          <ng-container header>{{ subHeader }}</ng-container>\n          <ng-container content>\n                <div class=\"tags-join-content\" fxLayout fxLayoutGap=\"10px\">\n                    <div class=\"column-separator\">\n                        <co-input-text placeholder=\"Titel\"></co-input-text>\n<!--transactiontransaction-->\n<!--                                label=\"Artikeltekst\"-->\n<!--                        ></co-text-editor>-->\n                    </div>\n                    <div style=\"margin-left:5px;\">\n                        <div style=\"margin-top:16px;\">\n                            <ejs-dropdownlist\n                                    [dataSource]=\"collection\"\n                                    [fields]=\"fields\"\n                                    placeholder=\"Standaardteksten\"\n                            ></ejs-dropdownlist>\n                        </div>\n                        <div style=\"margin-top:20px;\">\n                            <co-input-checkbox\n                                    label=\"Artikelgebonden tekst\"\n                                    name=\"articleBoundText\">\n                            </co-input-checkbox>\n                        </div>\n                        <div style=\"margin-top:20px;\">\n                            <label>Bestemd voor documenten</label>\n                            <ejs-chiplist id=\"chip-default\">\n                                <e-chips>\n                                    <e-chip text=\"Apple\" cssClass=\"e-primary\"></e-chip>\n                                    <e-chip text=\"Microsoft\" cssClass=\"e-info\"></e-chip>\n                                    <e-chip text=\"Google\" cssClass=\"e-success\"></e-chip>\n                                    <e-chip text=\"Tesla\" cssClass=\"e-warning\"></e-chip>\n                                    <e-chip text=\"Intel\" cssClass=\"e-danger\"></e-chip>\n                                </e-chips>\n                            </ejs-chiplist>\n                        </div>\n                    </div>\n                </div>\n              </ng-container>\n              <ng-container footer>\n                <div class=\"footer\" fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"10px\" style=\"margin-top:30px;\">\n                    <co-button label=\"OK\" (click)=\"onOkClick()\"></co-button>\n                    <co-button label=\"CANCEL\" (click)=\"hide()\"></co-button>\n                    <co-button label=\"OVERVIEW\" (click)=\"onOverview()\"></co-button>\n                </div>\n              </ng-container>\n        </co-dialog>\n\n        <co-dialog [visible]=\"overviewSelected\" (close)=\"hideOverview()\">\n          <ng-container header>Artikelgebonden teksten {{ subHeader }}</ng-container>\n          <ng-container content>\n                <div class=\"tags-join-content\" fxLayout fxLayoutGap=\"10px\">\n                    <div class=\"column-separator\" style=\"width:75%\">\n<!--                        <grid [data]=\"articleTexts\" detailLink (detailLinkClick)=\"onDetailLinkClick($event)\">-->\n<!--                            <grid-column key=\"title\" header=\"TITLE\" width=\"100px;\"></grid-column>-->\n<!--                            <grid-column key=\"description\" header=\"DESCRIPTION\" width=\"200px\"></grid-column>-->\n<!--                        </grid>-->\n                    </div>\n                    <div style=\"margin-left:5px;\">\n                        <div style=\"margin-top:20px;\">\n\n                            <co-input-checkbox\n                                    label=\"Artikelgebonden tekst\"\n                                    name=\"articleBoundText\"\n                                    value=\"true\"\n                            ></co-input-checkbox>\n                        </div>\n                        <div style=\"margin-top:20px;\">\n                            <label>Bestemd voor documenten</label>\n                            <ejs-chiplist id=\"chip-default\">\n                                <e-chips>\n                                    <e-chip text=\"Apple\" cssClass=\"e-primary\"></e-chip>\n                                    <e-chip text=\"Microsoft\" cssClass=\"e-info\"></e-chip>\n                                    <e-chip text=\"Google\" cssClass=\"e-success\"></e-chip>\n                                    <e-chip text=\"Tesla\" cssClass=\"e-warning\"></e-chip>\n                                    <e-chip text=\"Intel\" cssClass=\"e-danger\"></e-chip>\n                                </e-chips>\n                            </ejs-chiplist>\n                        </div>\n                    </div>\n                </div>\n          </ng-container>\n          <ng-container footer>\n                <div class=\"footer\" fxLayout fxPosition=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"10px\" style=\"margin-top:30px;\">\n                    <co-button label=\"OK\" (click)=\"onOkOverviewClick()\"></co-button>\n                    <co-button label=\"CANCEL\" (click)=\"hideOverview()\"></co-button>\n                </div>\n          </ng-container>\n        </co-dialog>\n\n        <co-dialog [visible]=\"editArtikelText\"  (close)=\"hideEditArtikelText()\">\n          <ng-container header>{{ subHeader }}</ng-container>\n          <ng-container content>\n                <div class=\"tags-join-content\" fxLayout fxLayoutGap=\"10px\">\n                    <div class=\"column-separator\">\n                        <co-input-text placeholder=\"Titel\"></co-input-text>\n<!--                        <co-text-editor-->\n<!--                                label=\"Artikeltekst\"-->\n<!--                        ></co-text-editor>-->\n                    </div>\n                </div>\n          </ng-container>\n          <ng-container footer>\n              <div class=\"footer\" fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"10px\" style=\"margin-top:30px;\">\n                  <co-button label=\"OK\" (click)=\"onOkEditArtikelTextClick()\"></co-button>\n                  <co-button label=\"CANCEL\" (click)=\"hideEditArtikelText()\"></co-button>\n              </div>\n          </ng-container>\n        </co-dialog>\n    ",
+                    styles: [""]
+                },] }
+    ];
+    TransactionArticleTextComponent.ctorParameters = function () { return [
+        { type: TransactionService }
+    ]; };
+    TransactionArticleTextComponent.propDecorators = {
+        subHeader: [{ type: i0.Input }]
+    };
+
+    var ServiceOrderComponent = /** @class */ (function (_super) {
+        __extends(ServiceOrderComponent, _super);
+        function ServiceOrderComponent(service, transactionEvents, iconCacheService) {
+            var _this = _super.call(this, service) || this;
+            _this.service = service;
+            _this.transactionEvents = transactionEvents;
+            _this.iconCacheService = iconCacheService;
+            _this.iconThickLines = corecomponents_v12.CoreComponentsIcon.ThickLines;
+            _this.iconThinLines = corecomponents_v12.CoreComponentsIcon.ThinLines;
+            _this.iconOrder = corecomponents_v12.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 = [];
+            return _this;
+        }
+        Object.defineProperty(ServiceOrderComponent.prototype, "inListView", {
+            get: function () {
+                return this.activeViewMode === ContentViewMode.List;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ServiceOrderComponent.prototype, "inGridView", {
+            get: function () {
+                return this.activeViewMode === ContentViewMode.Grid;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ServiceOrderComponent.prototype.ngOnInit = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    this._subs.push(this.service.transactionLoaded.subscribe(function (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(function () {
+                        _this.moveFloatingButtonToRight();
+                    }), this.transactionEvents.transactionLineClicked.subscribe(function (transactionLine) {
+                        _this._selectedTransLine = transactionLine;
+                        _this.moveFloatingButtonToLeft();
+                    }), this.transactionEvents.scrollContent.subscribe(function (event) {
+                        _this.hideOrderTotals(event);
+                    }));
+                    return [2 /*return*/];
+                });
+            });
+        };
+        ServiceOrderComponent.prototype.ngOnDestroy = function () {
+            this._subs.forEach(function (sub) { return sub.unsubscribe(); });
+        };
+        ServiceOrderComponent.prototype.animationFn = function () {
+            return animations$1.trigger("showPopup", [
+                animations$1.state("void", animations$1.style({ transform: "translate3d(0, 0, 0)" })),
+                animations$1.state("*", animations$1.style({ transform: "translate3d(100%, 0, 0)" })),
+                animations$1.transition("void <=> *", [
+                    animations$1.animate("200ms ease-in-out")
+                ])
+            ]);
+        };
+        ServiceOrderComponent.prototype.trackByFn = function (index, line) {
+            return line.lineNr;
+        };
+        ServiceOrderComponent.prototype.handleRowsSelected = function (rows) {
+            this._selectedTransLine = rows.find(function (x) { return x !== undefined; });
+        };
+        ServiceOrderComponent.prototype.handlePlanningRequest = function (event) {
+            // TODO: handlePlanningRequest... from new Planning package
+        };
+        ServiceOrderComponent.prototype.moveFloatingButtonToLeft = function () {
+            if (this.floatButtonRightPosition === ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITHOUT_SIDEBAR) {
+                this.floatButtonRightPosition = ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITH_SIDEBAR;
+            }
+        };
+        ServiceOrderComponent.prototype.moveFloatingButtonToRight = function () {
+            if (this.floatButtonRightPosition === ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITH_SIDEBAR) {
+                this.floatButtonRightPosition = ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITHOUT_SIDEBAR;
+            }
+        };
+        ServiceOrderComponent.prototype.onOkClick = function () {
+            this.hide();
+        };
+        ServiceOrderComponent.prototype.hide = function () {
+            this.floatButtonSelected = false;
+        };
+        ServiceOrderComponent.prototype.floatButtonClick = function () {
+            this.floatButtonSelected = true;
+            this._transactionArticleTextComponent.visible = this.floatButtonSelected;
+        };
+        Object.defineProperty(ServiceOrderComponent.prototype, "subHeader", {
+            get: function () {
+                if (this._selectedTransLine && this._selectedTransLine !== undefined) {
+                    return this._selectedTransLine.goodDescription;
+                }
+                return "";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ServiceOrderComponent.prototype.hideOrderTotals = function (event) {
+            this.showTotals = false;
+        };
+        return ServiceOrderComponent;
+    }(TransactionBaseComponent));
+    ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITHOUT_SIDEBAR = 50;
+    ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITH_SIDEBAR = 350;
+    ServiceOrderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "service-order",
+                    template: "\n      <div id=\"transaction-general-tab\" style=\"height:100%;\">\n        <transaction-header-block\n          [relationId]=\"relationId\"\n          [transaction]=\"transaction\"\n          [canPlanDelivery]=\"canPlanDelivery\"\n          (planningRequestButtonClick)=\"handlePlanningRequest($event)\"\n        ></transaction-header-block>\n        <div *ngIf=\"!isService\">\n          <div class=\"transaction-view\" fxLayout=\"row\" fxLayoutGap=\"1px\" fxLayoutAlign=\"flex-end\">\n            <div class=\"view-mode-buttons\">\n              <co-button [iconData]=\"iconCacheService.getIcon(iconThickLines)\"\n                         [title]=\"'LIST_VIEW' | localize\"\n                         (click)=\"this.activeViewMode = viewModes.List\"\n                         class=\"triangle white\"\n                         iconClass=\"medium light\"></co-button>\n              <co-button [iconData]=\"iconCacheService.getIcon(iconThinLines)\"\n                         [title]=\"'GRID_VIEW' | localize\"\n                         (click)=\"this.activeViewMode = viewModes.Grid\"\n                         class=\"triangle white\"\n                         iconClass=\"medium light\"></co-button>\n            </div>\n          </div>\n          <div *ngIf=\"this.activeViewMode === viewModes.List\">\n            <transaction-order-line-view *ngFor=\"let line of transactionLines; trackBy:trackByFn;\"\n                                         [line]=\"line\"\n            ></transaction-order-line-view>\n          </div>\n          <div *ngIf=\"this.activeViewMode === viewModes.Grid\">\n            <transaction-order-lines [transaction]=\"transaction\"></transaction-order-lines>\n          </div>\n          <div class=\"floating-icon-wrapper\" [style.right.px]=\"floatButtonRightPosition\">\n          <icon [icon]=\"iconOrder\"\n                class=\"light\"\n                (click)=\"floatButtonClick()\" id=\"floatingIcon\"\n                [style.right.px]=\"floatButtonRightPosition\"></icon>\n          </div>\n        </div>\n        <transaction-order-totals *ngIf=\"!isService\"\n                                  [transactionTotal]=\"transactionTotal\"\n                                  [ngClass]=\"showTotals ? 'transaction-totals-show' : 'transaction-totals-hide'\"></transaction-order-totals>\n      </div>\n\n      <transaction-article-text></transaction-article-text>\n    ",
+                    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 = function () { return [
+        { type: TransactionService },
+        { type: TransactionEventService },
+        { type: corecomponents_v12.IconCacheService }
+    ]; };
+    ServiceOrderComponent.propDecorators = {
+        _transactionArticleTextComponent: [{ type: i0.ViewChild, args: [TransactionArticleTextComponent, { static: false },] }]
+    };
+
+    var TransactionOrderTotalsComponent /*extends TransactionBaseComponent*/ = /** @class */ (function () {
+        function TransactionOrderTotalsComponent(service) {
+            this.service = service;
+            //super(service);
+        }
+        return TransactionOrderTotalsComponent;
+    }());
+    TransactionOrderTotalsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "transaction-order-totals",
+                    template: "\n        <div class=\"totals-wrapper\">\n            <div class=\"totals-item\">\n                <div class=\"totals-item-description\" [textContent]=\"'SUBTOTAL' | localize\"></div>\n                <div class=\"totals-item-value\" [textContent]=\"transactionTotal.grossAmount | coCurrency | coCurrency\"></div>\n            </div>\n            <div class=\"totals-item\">\n                <div class=\"totals-item-description\" [textContent]=\"'VAT_AMOUNT' | localize\"></div>\n                <div class=\"totals-item-value\" [textContent]=\"transactionTotal.surchargeAmount | coCurrency\"></div>\n            </div>\n            <div class=\"totals-item total\">\n                <div class=\"totals-item-description\" [textContent]=\"'TRANSACTION_SUM_I' | localize\"></div>\n                <div class=\"totals-item-value\" [textContent]=\"transactionTotal.netAmount | coCurrency\"></div>\n            </div>\n        </div>\n    ",
+                    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 = function () { return [
+        { type: TransactionService }
+    ]; };
+    TransactionOrderTotalsComponent.propDecorators = {
+        transactionTotal: [{ type: i0.Input }]
+    };
+
+    var TransactionOrderLineViewComponent = /** @class */ (function () {
+        function TransactionOrderLineViewComponent(_service, _eventService) {
+            this._service = _service;
+            this._eventService = _eventService;
+            this.stock = stockStatus_enum.StockStatus.Low;
+        }
+        TransactionOrderLineViewComponent.prototype.ngOnInit = function () {
+            this._loadArticleImage();
+        };
+        TransactionOrderLineViewComponent.prototype._loadArticleImage = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a, _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            if (!this.line) return [3 /*break*/, 4];
+                            _a = this;
+                            if (!this.line) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._service.retrieveLineImage(this.line)];
+                        case 1:
+                            _b = _c.sent();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            _b = undefined;
+                            _c.label = 3;
+                        case 3:
+                            _a.image = _b;
+                            _c.label = 4;
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        TransactionOrderLineViewComponent.prototype.transactionLineClick = function (line) {
+            this._eventService.transactionLineClicked.next(this.line);
+        };
+        return TransactionOrderLineViewComponent;
+    }());
+    TransactionOrderLineViewComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-order-line-view",
+                    template: "\n            <div class=\"transaction-order-line-r\" fxFlex (click)=\"transactionLineClick(line)\">\n                <div fxLayout=\"row\" class=\"full-width\">\n                    <div fxLayout=\"column\" class=\"transaction-order-line-description\" fxLayoutGap=\"20px\">\n                        <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                            <span [textContent]=\"line.goodDescription\" class=\"cart-line-description-main\"></span>\n                            <span *ngIf=\"line.goodDescription && line.articleNumber\">|</span>\n                            <span [textContent]=\"line.articleNumber\" class=\"cart-line-description-artnr\"></span>\n                        </div>\n                        <div>\n                            <span [innerHTML]=\"line.configurationReadable\" class=\"cart-line-description-detail\"></span>\n                        </div>\n                    </div>\n                    <div fxLayout=\"column\" class=\"transaction-order-line-image\">\n                        <image-display [model]=\"image\"></image-display>\n                    </div>\n                </div>\n                <div fxLayout=\"row\" class=\"transaction-order-line-right\">\n                    <div fxLayout=\"column\" class=\"transaction-order-line-stock\">\n                        <span [textContent]=\"'STOCK' | localize\" class=\"small-font\"></span>\n                        <stock-status-indicator [model]=\"stock\"></stock-status-indicator>\n                        <span [textContent]=\"'DELIVERY_TIME_PERIOD' | localize\" class=\"small-font\"></span>\n                        <span [textContent]=\"line.deliveryDate | deliveryTime\"></span>\n                    </div>\n                    <div class=\"transaction-order-line-amount\">\n                      <co-input-number-picker\n                        class=\"horizontal\"\n                        [(model)]=\"line.amount\" [min]=\"0\" [buttonShowMode]=\"'always'\"\n                        [readonly]=\"true\"></co-input-number-picker>\n                    </div>\n                    <div class=\"transaction-order-line-totals\">\n                        <span [textContent]=\"line.netLineTotal | coCurrency: true\"></span>\n                    </div>\n                </div>\n            </div>\n    ",
+                    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 = function () { return [
+        { type: TransactionService },
+        { type: TransactionEventService }
+    ]; };
+    TransactionOrderLineViewComponent.propDecorators = {
+        line: [{ type: i0.Input }]
+    };
+
+    var TransactionOrderLinesComponent = /** @class */ (function (_super) {
+        __extends(TransactionOrderLinesComponent, _super);
+        function TransactionOrderLinesComponent(service, _eventService, _dictionaryService) {
+            var _this = _super.call(this, service) || this;
+            _this.service = service;
+            _this._eventService = _eventService;
+            _this._dictionaryService = _dictionaryService;
+            _this.createServiceClick = new i0.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") });
+            return _this;
+        }
+        Object.defineProperty(TransactionOrderLinesComponent.prototype, "pagingEnabled", {
+            get: function () {
+                if (this.transactionLines) {
+                    return this.transactionLines.length >= TransactionOrderLinesComponent.MAX_TRANSACTION_LINES;
+                }
+                return false;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionOrderLinesComponent.prototype, "selectedTransLine", {
+            get: function () {
+                return this._selectedTransLine;
+            },
+            set: function (value) {
+                this._selectedTransLine = value;
+                this.nothingSelected = this._selectedTransLine === null;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TransactionOrderLinesComponent.prototype.onRowClick = function (row) {
+            this.selectedTransLine = row;
+            this._eventService.transactionLineClicked.next(this.selectedTransLine);
+        };
+        TransactionOrderLinesComponent.prototype.onRowDeselect = function (event) {
+            this.selectedTransLine = null;
+        };
+        // TODO: navragen wat de bedoeling is, zie originele source iOneJS
+        TransactionOrderLinesComponent.prototype.newServiceRequestClick = function () {
+            if (this.nothingSelected) {
+                return;
+            }
+            this.createServiceClick.emit(this._selectedTransLine);
+        };
+        return TransactionOrderLinesComponent;
+    }(TransactionBaseComponent));
+    TransactionOrderLinesComponent.MAX_TRANSACTION_LINES = 20;
+    TransactionOrderLinesComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-order-lines",
+                    template: "\n        <co-grid #transactionGrid\n                 [data]=\"transactionLines\"\n                 [columns]=\"columns\"\n                 [pagingEnabled]=\"pagingEnabled\"\n                 [maxNumberOfRows]=\"'20'\"\n                 (rowsSelected)=\"onRowClick($event)\"\n        ></co-grid>\n    ",
+                    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 = function () { return [
+        { type: TransactionService },
+        { type: TransactionEventService },
+        { type: DictionaryService }
+    ]; };
+    TransactionOrderLinesComponent.propDecorators = {
+        transactionGrid: [{ type: i0.ViewChild, args: ["transactionGrid",] }],
+        createServiceClick: [{ type: i0.Output }]
+    };
+
+    var TransactionRelationAddressComponent = /** @class */ (function () {
+        function TransactionRelationAddressComponent(_dictionary, _connector) {
+            this._dictionary = _dictionary;
+            this._connector = _connector;
+            this.countries = [];
+            this.fields = { text: "description", value: "code" };
+            this.postalCodeCheckErrorMessage = "";
+            this._prevPostalCodeForCheck = "";
+        }
+        Object.defineProperty(TransactionRelationAddressComponent.prototype, "address", {
+            get: function () {
+                if (this._address === undefined) {
+                    this._address = new address_bo.Address();
+                }
+                return this._address;
+            },
+            set: function (address) {
+                this._address = address;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TransactionRelationAddressComponent.prototype.ngOnInit = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = this;
+                            return [4 /*yield*/, this._connector.getCountries()];
+                        case 1:
+                            _a.countries = _b.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        TransactionRelationAddressComponent.prototype.checkForPostalCodeCheckError = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var postalCodeResponse;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this.address.postalCode || isNill_function.isNill(this.address.houseNo)) {
+                                this.postalCodeCheckErrorMessage = "";
+                                return [2 /*return*/];
+                            }
+                            if (!(this._prevPostalCodeForCheck !== this.address.postalCode || this._prevHouseNoForCheck !== this.address.houseNo)) return [3 /*break*/, 2];
+                            this._prevPostalCodeForCheck = this.address.postalCode;
+                            this._prevHouseNoForCheck = this.address.houseNo;
+                            return [4 /*yield*/, this._connector.getPostalCodeRetrieval((this.address.postalCode ? this.address.postalCode : ""), StringUtils.ParseString(this.address.houseNo))];
+                        case 1:
+                            postalCodeResponse = _a.sent();
+                            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;
+                            }
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        TransactionRelationAddressComponent.prototype.changeHouseNo = function () {
+            this.address.houseNo = Number(this.address.houseNo);
+        };
+        return TransactionRelationAddressComponent;
+    }());
+    TransactionRelationAddressComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-relation-address",
+                    template: "\n        <label [textContent]=\"label | localize\"\n               class=\"transaction-relation-label-h3\"\n        ></label>\n        <div class=\"default-flex-row\">\n            <div class=\"default-flex-column\">\n              <co-input-text [(model)]=\"address.postalCode\"\n                             [placeholder]=\"'POSTAL_CODE' | localize\"\n                             (blur)=\"checkForPostalCodeCheckError()\"\n                             required\n              ></co-input-text>\n            </div>\n            <div class=\"default-flex-column\">\n              <co-input-text [(model)]=\"address.houseNo\"\n                             [placeholder]=\"'HOUSE_NO' | localize\"\n                             (blur)=\"checkForPostalCodeCheckError()\"\n                             (modelChange) = \"changeHouseNo()\"\n                             required\n              ></co-input-text>\n            </div>\n            <div class=\"default-flex-column\">\n              <co-input-text [(model)]=\"address.houseNoAddition\"\n                             [placeholder]=\"'HOUSE_NO_ADDITION' | localize\"\n              ></co-input-text>\n            </div>\n        </div>\n        <div>\n            <div class=\"default-flex-row\">\n              <div class=\"default-flex-column\">\n                <co-input-text [(model)]=\"address.streetName\" [placeholder]=\"'STREET' | localize\" required></co-input-text>\n              </div>\n              <div class=\"default-flex-column\">\n                <co-input-text [(model)]=\"address.city\" [placeholder]=\"'CITY' | localize\" required></co-input-text>\n              </div>\n              <div class=\"default-flex-column\">\n                <co-input-combo-box [(model)]=\"address.countryId\"\n                                    [source]=\"countries\"\n                                    [fields]=\"fields\"\n                                    [placeholder]=\"'COUNTRY'| localize\"\n                                    [required]=\"true\"\n                ></co-input-combo-box>\n              </div>\n            </div>\n        </div>\n    ",
+                    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 = function () { return [
+        { type: DictionaryService },
+        { type: IOneConnectorAdapterService }
+    ]; };
+    TransactionRelationAddressComponent.propDecorators = {
+        label: [{ type: i0.Input }],
+        address: [{ type: i0.Input }]
+    };
+
+    var TransactionSidebarRightComponent = /** @class */ (function (_super) {
+        __extends(TransactionSidebarRightComponent, _super);
+        function TransactionSidebarRightComponent(service, iconCacheService, _eventService, changeDetector) {
+            var _this = _super.call(this, service) || this;
+            _this.service = service;
+            _this.iconCacheService = iconCacheService;
+            _this._eventService = _eventService;
+            _this.changeDetector = changeDetector;
+            _this.iconDetailView = corecomponents_v12.CoreComponentsIcon.DetailView;
+            _this.iconArrowPointRight = corecomponents_v12.CoreComponentsIcon.ArrowPointRight;
+            _this.iconStock = corecomponents_v12.CoreComponentsIcon.Stock;
+            _this.iconDocuments = corecomponents_v12.CoreComponentsIcon.Documents;
+            _this.test = "";
+            _this.defaultSidebar = new ej2Navigations.Sidebar({
+                width: "320px",
+                type: "Auto",
+                isOpen: false,
+                position: "Right",
+                target: "#app-module-sidebar-right"
+            });
+            _this._subscriptions = [];
+            _this._subscriptions.push(_this._eventService.transactionLineClicked.subscribe(function (transactionLine) {
+                _this.transactionLine = transactionLine;
+                _this.defaultSidebar.show();
+            }));
+            return _this;
+        }
+        TransactionSidebarRightComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this.defaultSidebar.appendTo("#default-sidebar");
+                _this.sidebarCloseClick();
+                _this.changeDetector.detectChanges();
+            });
+        };
+        TransactionSidebarRightComponent.prototype.ngOnDestroy = function () {
+            this._subscriptions.forEach(function (sub) { return sub.unsubscribe(); });
+        };
+        TransactionSidebarRightComponent.prototype.sidebarCloseClick = function () {
+            this.defaultSidebar.hide();
+            this._eventService.rightSidebarClose.next();
+        };
+        return TransactionSidebarRightComponent;
+    }(TransactionBaseComponent));
+    TransactionSidebarRightComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-sidebar-right",
+                    template: "\n        <div id=\"default-sidebar\">\n            <div>\n                <icon [icon]=\"iconArrowPointRight\" (click)=\"sidebarCloseClick()\"></icon>\n                <label [textContent]=\"transactionLine?.goodDescription\"></label>\n            </div>\n            <div>\n                <ejs-tab id=\"element2\">\n                    <e-tabitems>\n                        <e-tabitem>\n                            <ng-template #headerText>\n                                <icon [icon]=\"iconDetailView\" title=\"Regeldetails\"></icon>\n                            </ng-template>\n                            <ng-template #content>\n                                <transaction-line-accordion [transactionLine]=\"transactionLine\"></transaction-line-accordion>\n                            </ng-template>\n                        </e-tabitem>\n                        <e-tabitem>\n                            <ng-template #headerText>\n                                <icon [icon]=\"iconStock\" title=\"Voorraad\"></icon>\n                            </ng-template>\n                            <ng-template #content>\n                                <div style=\"margin: 10px;\">\n                                    <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                                        <co-input-text placeholder=\"In voorraad\"></co-input-text>\n                                        <co-input-text placeholder=\"In order voorraad\"></co-input-text>\n                                    </div>\n\n                                    <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                                        <co-input-text placeholder=\"In order commissie\"></co-input-text>\n                                        <co-input-text placeholder=\"Beschikbaar\"></co-input-text>\n                                    </div>\n\n                                    <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                                        <co-input-text placeholder=\"In bestelling\"></co-input-text>\n                                        <co-input-text placeholder=\"Later beschikbaar\"></co-input-text>\n                                    </div>\n\n                                    <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                                        <co-input-text placeholder=\"Toegewezen\" [model]=\"transactionLine?.amount\"></co-input-text>\n                                        <co-input-text placeholder=\"Vrije voorraad\"></co-input-text>\n                                    </div>\n                                </div>\n                            </ng-template>\n                        </e-tabitem>\n                        <e-tabitem>\n                            <ng-template #headerText>\n                                <icon [icon]=\"iconDocuments\" title=\"Documenten en notities\"></icon>\n                            </ng-template>\n                            <ng-template #content>\n                                <div>\n                                    Documenten en notities\n                                </div>\n                            </ng-template>\n                        </e-tabitem>\n                    </e-tabitems>\n                </ejs-tab>\n            </div>\n        </div>\n    ",
+                    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 = function () { return [
+        { type: TransactionService },
+        { type: corecomponents_v12.IconCacheService },
+        { type: TransactionEventService },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+
+    var TransactionLineAccordionComponent = /** @class */ (function () {
+        function TransactionLineAccordionComponent(changeDetector) {
+            this.changeDetector = changeDetector;
+            this.transactionLine = new transactionLineInfo_bo.TransactionLineInfo;
+            this.accordion = new ej2Navigations.Accordion({});
+            this._subscriptions = [];
+        }
+        TransactionLineAccordionComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this.accordion.appendTo("#accordion_html_markup");
+                _this.changeDetector.detectChanges();
+            });
+        };
+        return TransactionLineAccordionComponent;
+    }());
+    TransactionLineAccordionComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-line-accordion",
+                    template: "\n    <div id='container'>\n      <div id='accordion_html_markup'>\n        <div>\n          <div>Prijsdetails</div>\n          <div>\n            <div style=\"margin-left:10px;\">\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                <co-input-text placeholder=\"Aantal\" [model]=\"transactionLine?.amount\"></co-input-text>\n                <co-input-text placeholder=\"Verkoopprijs\" [model]=\"transactionLine?.price\"></co-input-text>\n              </div>\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                <co-input-text placeholder=\"Adviesprijs\"></co-input-text>\n                <co-input-text placeholder=\"Totaal korting\"></co-input-text>\n              </div>\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                <co-input-text placeholder=\"Koritngspercentage\"></co-input-text>\n                <co-input-text placeholder=\"Kortingsbedrag\" [model]=\"transactionLine?.discountAmount\"></co-input-text>\n              </div>\n\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                <co-input-text placeholder=\"Speciale korting\"></co-input-text>\n                <co-input-text placeholder=\"Transactiekorting\"></co-input-text>\n              </div>\n\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                <co-input-text placeholder=\"Business rule korting\"></co-input-text>\n                <co-input-text placeholder=\"Kwantumkorting\"></co-input-text>\n              </div>\n\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                <co-input-text placeholder=\"Toeslag\"></co-input-text>\n                <co-input-text placeholder=\"BTW\"></co-input-text>\n              </div>\n\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                <co-input-text placeholder=\"Prijslijst\"></co-input-text>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div>\n          <div>Logistiek</div>\n          <div>\n            <div style=\"margin-left:10px;\">\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                <co-input-text placeholder=\"Commissiecode\"></co-input-text>\n                <co-input-text placeholder=\"Levermethode\"></co-input-text>\n              </div>\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                <co-input-text placeholder=\"Montagetijd\"></co-input-text>\n                <co-input-text placeholder=\"Bewerkingstijd\"></co-input-text>\n              </div>\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                <co-input-text placeholder=\"Leverancier\"></co-input-text>\n                <co-input-text placeholder=\"Artikelnummer leverancier\"></co-input-text>\n              </div>\n\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                <co-input-text placeholder=\"In/uit collectie\"></co-input-text>\n                <co-input-text placeholder=\"Dropshipment\"></co-input-text>\n              </div>\n\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                <co-input-text placeholder=\"Leverdatum\"></co-input-text>\n                <co-input-text placeholder=\"Referentie\"></co-input-text>\n              </div>\n            </div>\n          </div>\n\n        </div>\n        <div>\n          <div id=\"header\">Opmaak</div>\n          <div id=\"opmaak\">\n            <div style=\"margin-left:10px;\">\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n                <co-input-text placeholder=\"Orderregelset\"></co-input-text>\n                <co-input-text placeholder=\"Hoofdstuk\"></co-input-text>\n              </div>\n              <div>\n                <co-input-text placeholder=\"Laatste wijziging Door\"></co-input-text>\n              </div>\n              <div>\n                <co-input-text placeholder=\"Zichtbaar op documenten\"></co-input-text>\n              </div>\n            </div>\n          </div>\n      </div>\n      <div>\n        <div>Artikelkenmerken</div>\n        <div>\n          <div style=\"margin-left:10px;\">\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n              <co-input-text placeholder=\"Breedte\"></co-input-text>\n              <co-input-text placeholder=\"Lengte\"></co-input-text>\n            </div>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n              <co-input-text placeholder=\"Hoogte\"></co-input-text>\n              <co-input-text placeholder=\"Zitdiepte\"></co-input-text>\n            </div>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n              <co-input-text placeholder=\"Zithoogte\"></co-input-text>\n              <co-input-text placeholder=\"Volume\"></co-input-text>\n            </div>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n              <co-input-text placeholder=\"Stopmaat\"></co-input-text>\n              <co-input-text placeholder=\"Patroonhoogte\"></co-input-text>\n            </div>\n            <br>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n              <co-input-text placeholder=\"Standaard levertijd\"></co-input-text>\n              <co-input-text placeholder=\"Standaard levertijd verkoop\"></co-input-text>\n            </div>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n              <co-input-text placeholder=\"Eenheid verkoop\"></co-input-text>\n              <co-input-text placeholder=\"Verkoophoeveelheid\"></co-input-text>\n            </div>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n              <co-input-text placeholder=\"Aantal\"></co-input-text>\n              <co-input-text placeholder=\"Colli\"></co-input-text>\n            </div>\n            <br>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n              <co-input-text placeholder=\"Omzetgroep\"></co-input-text>\n              <co-input-text placeholder=\"Artikelgroep\"></co-input-text>\n            </div>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n              <co-input-text placeholder=\"Hoofdartikel\"></co-input-text>\n              <co-input-text placeholder=\"Sfeer\"></co-input-text>\n            </div>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n              <co-input-text placeholder=\"Concept\"></co-input-text>\n              <co-input-text placeholder=\"Afdeling\"></co-input-text>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      </div>\n    </div>\n  ",
+                    styles: [""]
+                },] }
+    ];
+    TransactionLineAccordionComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    TransactionLineAccordionComponent.propDecorators = {
+        transactionLine: [{ type: i0.Input }]
+    };
+
+    var TransactionRelationEditComponent = /** @class */ (function (_super) {
+        __extends(TransactionRelationEditComponent, _super);
+        function TransactionRelationEditComponent(service) {
+            var _this = _super.call(this, service) || this;
+            _this.service = service;
+            _this.showPopup = false;
+            _this.relType = relationNameKind_enum.RelationNameKind;
+            _this.genderType = genderType_enum.GenderType;
+            _this.validSubmit = new i0.EventEmitter();
+            _this.invalidSubmit = new i0.EventEmitter();
+            _this.dateOfBirth = new Date();
+            _this.phoneNumber = new contactOption_bo.ContactOption();
+            return _this;
+        }
+        Object.defineProperty(TransactionRelationEditComponent.prototype, "readonly", {
+            get: function () {
+                return false;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionRelationEditComponent.prototype, "subHeader", {
+            get: function () {
+                return "";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionRelationEditComponent.prototype, "editFirstAddress", {
+            get: function () {
+                if (this.firstAddress) {
+                    return this.firstAddress;
+                }
+                else if (this.customer) {
+                    var address = new address_bo.Address();
+                    address.addressType = addressType_enum.AddressType.DeliveryAddress;
+                    address.startDate = new Date();
+                    address.sequence = this.customer.getNextAddressSequence();
+                    this.customer.addresses.push(address);
+                    return address;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionRelationEditComponent.prototype, "firstAddress", {
+            get: function () {
+                if (!this.relation || !this.customer.addresses.length) {
+                    return;
+                }
+                return this.customer.getFirstAvailableAddress([
+                    addressType_enum.AddressType.DeliveryAddress,
+                    addressType_enum.AddressType.BillingAddress,
+                    addressType_enum.AddressType.VisitingAddress,
+                    addressType_enum.AddressType.MailingAddress,
+                    addressType_enum.AddressType.NursingAddress
+                ]);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TransactionRelationEditComponent.prototype.onPopupClose = function () {
+            this.showPopup = false;
+        };
+        TransactionRelationEditComponent.prototype.changeRelationType = function (relationType) {
+            if (this.customer) {
+                this.customer.type = relationType;
+            }
+        };
+        TransactionRelationEditComponent.prototype.changeGenderType = function (genderType) {
+            if (this.customer) {
+                this.customer.gender = genderType;
+            }
+        };
+        TransactionRelationEditComponent.prototype.firstNameChange = function (firstName) {
+            if (this.customer) {
+                this.customer.firstName = firstName;
+            }
+        };
+        TransactionRelationEditComponent.prototype.familyNameChange = function (familyName) {
+            if (this.customer) {
+                this.customer.familyName = familyName;
+            }
+        };
+        return TransactionRelationEditComponent;
+    }(TransactionBaseComponent));
+    TransactionRelationEditComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-relation-edit",
+                    template: "\n        <co-dialog [visible]=\"showPopup\" header=\"ACCOUNT_DETAILS\"  (close)=\"onPopupClose()\"\n                    noClickOutside contentSize>\n            <ng-container content>\n            <co-form #transactionRelationEditForm (validSubmit)=\"validSubmit.emit()\" (invalidSubmit)=\"invalidSubmit.emit()\">\n                <div style=\"min-width: 500px;\">\n                    <div>\n                        <label [textContent]=\"'PERSONAL_DATA' | localize\"\n                               class=\"transaction-relation-label-h3\"\n                        ></label>\n                    </div>\n                    <div>\n                        <div>\n                            <label [textContent]=\"'ORDER_TYPE' | localize \"\n                                   class=\"transaction-relation-label-h3\"\n                            ></label>\n                        </div>\n                        <div *ngIf=\"customer?.type\">\n                            <co-input-radio-button [name]=\"'type'\"\n                                                   [label]=\"'PRIVATE_PERSON' | localize\"\n                                                   [value]=\"relType.Private\"\n                                                   [checked]=\"customer.type === relType.Private\"\n                                                   (modelChange)=\"changeRelationType(relType.Private)\"\n                            ></co-input-radio-button>\n                            <co-input-radio-button [name]=\"'type'\"\n                                                   [label]=\"'COMPANY' | localize\"\n                                                   [value]=\"relType.Company\"\n                                                   [checked]=\"customer.type === relType.Company\"\n                                                   (modelChange)=\"changeRelationType(relType.Company)\"\n                            ></co-input-radio-button>\n                        </div>\n                    </div>\n                    <div *ngIf=\"customer?.type === relType.Private\">\n                        <label [textContent]=\"'SALUTATION' | localize\"\n                               class=\"transaction-relation-label-h3\"\n                        ></label>\n                        <div *ngIf=\"customer?.gender\">\n                            <co-input-radio-button [name]=\"'gender'\"\n                                                   [label]=\"'MALE' | localize\"\n                                                   [value]=\"genderType.Male\"\n                                                   [checked]=\"customer.gender === genderType.Male\"\n                                                   (modelChange)=\"changeGenderType(genderType.Male)\"\n                            ></co-input-radio-button>\n                            <co-input-radio-button [name]=\"'gender'\"\n                                                   [label]=\"'FEMALE' | localize \"\n                                                   [value]=\"genderType.Female\"\n                                                   [checked]=\"customer.gender === genderType.Female\"\n                                                   (modelChange)=\"changeGenderType(genderType.Female)\"\n                            ></co-input-radio-button>\n                            <co-input-radio-button [name]=\"'gender'\"\n                                                   [label]=\"'UNKNOWN' | localize\"\n                                                   [value]=\"genderType.Unspecified\"\n                                                   [checked]=\"customer.gender === genderType.Unspecified\"\n                                                   (modelChange)=\"changeGenderType(genderType.Unspecified)\"\n                            ></co-input-radio-button>\n                        </div>\n                    </div>\n                    <div *ngIf=\"customer?.type === relType.Private\">\n                        <div>\n                            <label [textContent]=\"'NAME' | localize \"\n                                   class=\"transaction-relation-label-h3\"\n                            ></label>\n                            <div class=\"default-flex-row\">\n                                <div class=\"default-flex-column\">\n                                    <co-input-text\n                                            [(model)]=\"customer.firstName\"\n                                            [placeholder]=\"'FIRST_NAME' | localize \"\n                                            (modelChange)=\"firstNameChange($event)\"\n                                            required\n                                    ></co-input-text>\n                                </div>\n                                <div class=\"default-flex-column\">\n                                    <co-input-text\n                                            [(model)]=\"customer.prefix\"\n                                            [placeholder]=\"'PREFIX' | localize \"\n                                    ></co-input-text>\n                                </div>\n                                <div class=\"default-flex-column\">\n                                    <co-input-text\n                                            [(model)]=\"customer.familyName\"\n                                            [placeholder]=\"'LAST_NAME' | localize\"\n                                            (modelChange)=\"familyNameChange($event)\"\n                                            required\n                                    ></co-input-text>\n                                </div>\n                                <div class=\"default-flex-column\">\n                                    <co-input-date\n                                            [placeholder]=\"'DATE_OF_BIRTH' | localize \"\n                                            [(model)]=\"dateOfBirth\"\n                                            required\n                                    ></co-input-date>\n                                </div>\n                                <div class=\"default-flex-column\">\n                                    <co-input-text\n                                            [(model)]=\"phoneNumber.value\"\n                                            [placeholder]=\"'PHONE_NO' | localize \"\n                                            required\n                                    ></co-input-text>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div>\n                        <div *ngIf=\"customer?.type === relType.Company\" class=\"default-flex-column\">\n                            <label [textContent]=\"'COMPANY_NAME' | localize \"\n                                   class=\"transaction-relation-label-h3\"\n                            ></label>\n                            <co-input-text\n                                    [(model)]=\"customer.familyName\"\n                                    [label]=\"'COMPANY_NAME'\"\n                                    required\n                            ></co-input-text>\n                        </div>\n                    </div>\n\n                    <div>\n                        <transaction-relation-address\n                                label=\"DELIVERY_ADDRESS\" [address]=\"editFirstAddress\"\n                        ></transaction-relation-address>\n                    </div>\n\n                    <div fxLayout=\"row\" fxLayoutGap=\"10px\" class=\"button-wrapper\">\n                        <default-ok-cancel-buttons\n                                [okDisabled]=\"readonly\"\n                                (okClick)=\"transactionRelationEditForm.submit()\"\n                                (cancelClick)=\"onPopupClose()\"\n                        ></default-ok-cancel-buttons>\n                    </div>\n                </div>\n            </co-form>\n            </ng-container>\n        </co-dialog>\n    ",
+                    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 = function () { return [
+        { type: TransactionService }
+    ]; };
+    TransactionRelationEditComponent.propDecorators = {
+        transactionRelationEditForm: [{ type: i0.ViewChild, args: ["transactionRelationEditForm", { read: corecomponents_v12.FormComponent },] }],
+        showPopup: [{ type: i0.Input }],
+        validSubmit: [{ type: i0.Output }]
+    };
+
+    var TransactionHeaderBlockComponent = /** @class */ (function (_super) {
+        __extends(TransactionHeaderBlockComponent, _super);
+        function TransactionHeaderBlockComponent(service) {
+            var _this = _super.call(this, service) || this;
+            _this.service = service;
+            _this.planningRequestButtonClick = new i0.EventEmitter();
+            return _this;
+        }
+        TransactionHeaderBlockComponent.prototype.showPopupTab = function (index) {
+            this.selectedTab = index;
+        };
+        TransactionHeaderBlockComponent.prototype.tabClick = function () {
+            this.relationPopup.showPopup = true;
+        };
+        TransactionHeaderBlockComponent.prototype.transactionEditClose = function () {
+            this.relationPopup.showPopup = false;
+        };
+        return TransactionHeaderBlockComponent;
+    }(TransactionBaseComponent));
+    TransactionHeaderBlockComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-header-block",
+                    template: "\n        <div fxLayout=\"row wrap\" fxLayout.xs=\"column\">\n            <div class=\"summary-block\" (click)=\"tabClick()\">\n                <div class=\"block-wrapper\">\n                    <div class=\"content-wrapper\">\n                            <div class=\"name\"\n                                 [textContent]=\"relation?.displayName\"></div>\n                            <div class=\"address link pointer\"\n                                 [textContent]=\"relation?.displayAddressFull\"></div>\n                            <div class=\"phone link pointer\"\n                                 [textContent]=\"relation?.tel1\"></div>\n                            <div [textContent]=\"relation?.email\"\n                                 class=\"email link pointer\"\n                            ></div>\n                    </div>\n                </div>\n            </div>\n\n            <transaction-service-info class=\"summary-block\"\n                                      [transaction]=\"transaction\"\n            ></transaction-service-info>\n            <transaction-service-status class=\"summary-block\"\n                                        [transaction]=\"transaction\"\n            ></transaction-service-status>\n            <transaction-order-info class=\"summary-block\"\n                                    [transaction]=\"transaction\"\n            ></transaction-order-info>\n            <transaction-payment-info class=\"summary-block\"\n                                      [transaction]=\"transaction\"\n            ></transaction-payment-info>\n            <transaction-delivery-summary class=\"summary-block\"\n                                          [transaction]=\"transaction\"\n                                          [canPlanDelivery]=\"!isService && canPlanDelivery\"\n                                          (planningRequestButtonClick)=\"planningRequestButtonClick.emit($event)\"\n                                          (click)=\"showPopupTab(1)\"\n            ></transaction-delivery-summary>\n            <transaction-article-info class=\"summary-block\"\n                                      [transaction]=\"transaction\"\n            ></transaction-article-info>\n            <transaction-product-summary class=\"summary-block\"\n                                         [transaction]=\"transaction\"\n                                         [product]=\"product\"\n            ></transaction-product-summary>\n        </div>\n\n        <transaction-relation-edit [customerId]=\"relationId\" (validSubmit)=\"transactionEditClose()\"></transaction-relation-edit>\n    ",
+                    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 = function () { return [
+        { type: TransactionService }
+    ]; };
+    TransactionHeaderBlockComponent.propDecorators = {
+        relationPopup: [{ type: i0.ViewChild, args: [TransactionRelationEditComponent, { static: true },] }],
+        canPlanDelivery: [{ type: i0.Input }],
+        planningRequestButtonClick: [{ type: i0.Output }]
+    };
+
+    var TransactionServiceSummaryComponent = /** @class */ (function (_super) {
+        __extends(TransactionServiceSummaryComponent, _super);
+        function TransactionServiceSummaryComponent(service, iconCacheService) {
+            var _this = _super.call(this, service) || this;
+            _this.service = service;
+            _this.iconCacheService = iconCacheService;
+            _this.iconWrench = corecomponents_v12.CoreComponentsIcon.Wrench;
+            return _this;
+        }
+        return TransactionServiceSummaryComponent;
+    }(TransactionBaseComponent));
+    TransactionServiceSummaryComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-service-info",
+                    template: "\n        <transaction-summary-block\n                [hideAvatar]=\"true\"\n                [class.disabled]=\"!isNew\"\n                label=\"SERVICE\"\n                [icon]=\"iconWrench\"\n                headerLabel=\"SERVICE_NUMBER\"\n                [headerValue]=\"transactionInfo.transactionNr\"\n                subHeaderLabel=\"SERVICE_REQUEST_DATE\"\n                [subHeaderValue]=\"transactionInfo.transactionDate | date:'shortDate'\"\n        ></transaction-summary-block>\n    "
+                },] }
+    ];
+    TransactionServiceSummaryComponent.ctorParameters = function () { return [
+        { type: TransactionService },
+        { type: corecomponents_v12.IconCacheService }
+    ]; };
+    TransactionServiceSummaryComponent.propDecorators = {
+        hidden: [{ type: i0.HostBinding, args: ["class.hidden",] }]
+    };
+
+    var TransactionSummaryBlockComponent = /** @class */ (function () {
+        function TransactionSummaryBlockComponent() {
+            this.Icon = corecomponents_v12.CoreComponentsIcon;
+            this.hideAvatar = false;
+            this.label = "";
+            this.headerLabel = "";
+            this.subHeaderLabel = "";
+        }
+        TransactionSummaryBlockComponent.prototype.ngOnDestroy = function () {
+            this.subHeaderTemplate = undefined;
+        };
+        return TransactionSummaryBlockComponent;
+    }());
+    TransactionSummaryBlockComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-summary-block",
+                    template: "\n        <div class=\"block-wrapper\">\n            <div  *ngIf=\"hideAvatar\" class=\"icon-wrapper\">\n                <icon *ngIf=\"icon\" [icon]=\"icon\" class=\"dark\"></icon>\n                <image-display *ngIf=\"!icon\" [model]=\"image\"></image-display>\n            </div>\n            <div class=\"content-wrapper\">\n                <div class=\"value-block\">\n                    <div class=\"header-label\" [textContent]=\"headerLabel | localize\"></div>\n                    <div class=\"header\" [textContent]=\"headerValue\"></div>\n                </div>\n                <div class=\"value-block\">\n                    <div class=\"subheader-label\" [textContent]=\"subHeaderLabel | localize\"></div>\n                    <ng-container *ngIf=\"subHeaderTemplate\" [templateWrapper]=\"subHeaderTemplate\"></ng-container>\n                    <div *ngIf=\"!subHeaderTemplate\" class=\"subheader\" [textContent]=\"subHeaderValue\"></div>\n                </div>\n            </div>\n        </div>\n    ",
+                    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 = function () { return []; };
+    TransactionSummaryBlockComponent.propDecorators = {
+        hideAvatar: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        icon: [{ type: i0.Input }],
+        image: [{ type: i0.Input }],
+        headerLabel: [{ type: i0.Input }],
+        headerValue: [{ type: i0.Input }],
+        subHeaderLabel: [{ type: i0.Input }],
+        subHeaderValue: [{ type: i0.Input }],
+        subHeaderTemplate: [{ type: i0.ContentChild, args: ["subHeaderTemplate", { static: false },] }]
+    };
+
+    var TransactionServiceStatusComponent = /** @class */ (function (_super) {
+        __extends(TransactionServiceStatusComponent, _super);
+        function TransactionServiceStatusComponent(service) {
+            var _this = _super.call(this, service) || this;
+            _this.service = service;
+            _this.iconPin = corecomponents_v12.CoreComponentsIcon.Pin;
+            return _this;
+        }
+        Object.defineProperty(TransactionServiceStatusComponent.prototype, "serviceStatus", {
+            get: function () {
+                // TODO: transaction.serviceStatus
+                return "serviceStatus";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return TransactionServiceStatusComponent;
+    }(TransactionBaseComponent));
+    TransactionServiceStatusComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-service-status",
+                    template: "\n        <transaction-summary-block\n                [class.disabled]=\"!isNew\"\n                label=\"STATUS\"\n                [icon]=\"iconPin\"\n                headerLabel=\"SERVICE_STATE\"\n                [headerValue]=\"serviceStatus\"\n        ></transaction-summary-block>\n    "
+                },] }
+    ];
+    TransactionServiceStatusComponent.ctorParameters = function () { return [
+        { type: TransactionService }
+    ]; };
+    TransactionServiceStatusComponent.propDecorators = {
+        hidden: [{ type: i0.HostBinding, args: ["class.hidden",] }]
+    };
+
+    var TransactionOrderSummaryComponent = /** @class */ (function (_super) {
+        __extends(TransactionOrderSummaryComponent, _super);
+        function TransactionOrderSummaryComponent(service) {
+            var _this = _super.call(this, service) || this;
+            _this.service = service;
+            _this.iconOrder = corecomponents_v12.CoreComponentsIcon.Order;
+            return _this;
+        }
+        Object.defineProperty(TransactionOrderSummaryComponent.prototype, "sourceTransactionNr", {
+            get: function () {
+                // TODO: transaction.sourceTransactionNr
+                return 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionOrderSummaryComponent.prototype, "sourceTransactionDate", {
+            get: function () {
+                // TODO: transaction.sourceTransactionDate
+                return new Date();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return TransactionOrderSummaryComponent;
+    }(TransactionBaseComponent));
+    TransactionOrderSummaryComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-order-info",
+                    template: "\n        <transaction-summary-block\n                [class.disabled]=\"!isNew\"\n                label=\"ORDER_INFO\"\n                [icon]=\"iconOrder\"\n                headerLabel=\"ORDER_NUMBER\"\n                [headerValue]=\"isService ? sourceTransactionNr : transactionInfo.transactionNr\"\n                subHeaderLabel=\"ORDER_DATE\"\n                [subHeaderValue]=\"(isService ? sourceTransactionDate : this.transactionInfo.transactionDate) | date:'shortDate'\"\n        ></transaction-summary-block>\n    "
+                },] }
+    ];
+    TransactionOrderSummaryComponent.ctorParameters = function () { return [
+        { type: TransactionService }
+    ]; };
+    TransactionOrderSummaryComponent.propDecorators = {
+        hidden: [{ type: i0.HostBinding, args: ["class.hidden",] }]
+    };
+
+    var TransactionPaymentInfoComponent = /** @class */ (function (_super) {
+        __extends(TransactionPaymentInfoComponent, _super);
+        function TransactionPaymentInfoComponent(service) {
+            var _this = _super.call(this, service) || this;
+            _this.service = service;
+            _this.euro = corecomponents_v12.CoreComponentsIcon.Information;
+            return _this;
+        }
+        return TransactionPaymentInfoComponent;
+    }(TransactionBaseComponent));
+    TransactionPaymentInfoComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-payment-info",
+                    template: "\n        <transaction-summary-block\n                [class.disabled]=\"!isNew\"\n                label=\"PAYMENT\"\n                [icon]=\"euro\"\n                headerLabel=\"TOTAL_AMOUNT\"\n                [headerValue]=\"transactionTotal.netAmount | coCurrency\"\n                subHeaderLabel=\"PAID_DOWN2\"\n                [subHeaderValue]=\"transactionTotal.transactionDiscountAmount | coCurrency\"\n        ></transaction-summary-block>\n    "
+                },] }
+    ];
+    TransactionPaymentInfoComponent.ctorParameters = function () { return [
+        { type: TransactionService }
+    ]; };
+    TransactionPaymentInfoComponent.propDecorators = {
+        hidden: [{ type: i0.HostBinding, args: ["class.hidden",] }]
+    };
+
+    var TransactionArticleSummaryComponent = /** @class */ (function (_super) {
+        __extends(TransactionArticleSummaryComponent, _super);
+        function TransactionArticleSummaryComponent(service) {
+            var _this = _super.call(this, service) || this;
+            _this.service = service;
+            _this.imageDataUri = "";
+            return _this;
+        }
+        Object.defineProperty(TransactionArticleSummaryComponent.prototype, "sourceArticleDescription", {
+            get: function () {
+                // TODO: transaction.sourceArticleDescription
+                return "sourceArticleDescription";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TransactionArticleSummaryComponent.prototype, "sourceArticleNr", {
+            get: function () {
+                // TODO: transaction.sourceArticleNr
+                return "sourceArticleNr";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TransactionArticleSummaryComponent.prototype._getArticleImage = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/];
+                });
+            });
+        };
+        TransactionArticleSummaryComponent.prototype.transactionSet = function () {
+            this._getArticleImage();
+        };
+        return TransactionArticleSummaryComponent;
+    }(TransactionBaseComponent));
+    TransactionArticleSummaryComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-article-info",
+                    template: "\n        <transaction-summary-block\n                [class.disabled]=\"!isNew\"\n                headerLabel=\"ARTICLE_DESCRIPTION\"\n                [image]=\"imageDataUri\"\n                [headerValue]=\"sourceArticleDescription\"\n                subHeaderLabel=\"ARTICLE_NR\"\n                [subHeaderValue]=\"sourceArticleNr\"\n        ></transaction-summary-block>\n    "
+                },] }
+    ];
+    TransactionArticleSummaryComponent.ctorParameters = function () { return [
+        { type: TransactionService }
+    ]; };
+    TransactionArticleSummaryComponent.propDecorators = {
+        hidden: [{ type: i0.HostBinding, args: ["class.hidden",] }]
+    };
+
+    var TransactionDeliverySummaryComponent = /** @class */ (function (_super) {
+        __extends(TransactionDeliverySummaryComponent, _super);
+        function TransactionDeliverySummaryComponent(service) {
+            var _this = _super.call(this, service) || this;
+            _this.service = service;
+            _this.deliveryTruck = corecomponents_v12.CoreComponentsIcon.DeliveryTruck;
+            _this.calendarRoundOpen = corecomponents_v12.CoreComponentsIcon.CalendarRoundOpen;
+            _this.deliveryMethodDescription = "";
+            _this.canPlanDelivery = false;
+            _this.planningRequestButtonClick = new i0.EventEmitter();
+            return _this;
+        }
+        TransactionDeliverySummaryComponent.prototype.transactionSet = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/];
+                });
+            });
+        };
+        return TransactionDeliverySummaryComponent;
+    }(TransactionBaseComponent));
+    TransactionDeliverySummaryComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-delivery-summary",
+                    template: "\n        <transaction-summary-block\n                label=\"DELIVERY\"\n                [icon]=\"deliveryTruck\"\n                headerLabel=\"DELIVERY_METHOD2\"\n                [headerValue]=\"deliveryMethodDescription\"\n                [subHeaderLabel]=\"transactionInfo.preferredDeliveryDate ? 'DELIVERY_DATE' : !canPlanDelivery ? 'EXPECTED_DELIVERY_WEEK' : 'EXPECTED_DELIVERY'\"\n                [subHeaderValue]=\"transactionInfo.preferredDeliveryDate ? (transactionInfo.deliveryDate | date:'shortDate') : 'WEEK' | localize | append:(' ') | append:(transactionInfo.deliveryDate | date:'w')\">\n            <ng-template #subHeaderTemplate *ngIf=\"canPlanDelivery\">\n                <div class=\"planning-wrapper\">\n                    <span class=\"subheader\" *ngIf=\"transactionInfo.preferredDeliveryDate\"\n                          [textContent]=\"(transactionInfo.preferredDeliveryDate | date:'shortDate') + ', ' + transactionInfo.preferredDeliveryDate | date: 'time' \"></span>\n<!--                    <arrow-link *ngIf=\"!transactionInfo.preferredDeliveryDate\"-->\n<!--                            label=\"PLAN_YOUR_DELIVERY\"-->\n<!--                            (click)=\"planningRequestButtonClick.emit($event)\"-->\n<!--                    ></arrow-link>-->\n                    <icon [icon]=\"calendarRoundOpen\" (click)=\"planningRequestButtonClick.emit($event)\"></icon>\n                </div>\n            </ng-template>\n        </transaction-summary-block>\n    ",
+                    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 = function () { return [
+        { type: TransactionService }
+    ]; };
+    TransactionDeliverySummaryComponent.propDecorators = {
+        hidden: [{ type: i0.HostBinding, args: ["class.hidden",] }],
+        canPlanDelivery: [{ type: i0.Input }],
+        planningRequestButtonClick: [{ type: i0.Output }]
+    };
+
+    var TransactionProductContractSummaryComponent = /** @class */ (function (_super) {
+        __extends(TransactionProductContractSummaryComponent, _super);
+        function TransactionProductContractSummaryComponent(service) {
+            var _this = _super.call(this, service) || this;
+            _this.service = service;
+            return _this;
+        }
+        TransactionProductContractSummaryComponent.prototype.productSet = function () {
+            // TODO: add to TransactionAPI?
+            if (!this.product.imageAsDataUri) {
+                //     this._generalRepo.getDocument(this.product.image.documentId).then((doc: CoDocument) => {
+                //         this.product.imageAsDataUri = doc.thumbnailBodyAsDataUri;
+                //     });
+            }
+        };
+        return TransactionProductContractSummaryComponent;
+    }(TransactionBaseComponent));
+    TransactionProductContractSummaryComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-product-contract-summary",
+                    template: "\n        <transaction-summary-block\n                [class.disabled]=\"!isNew\"\n                label=\"CONTRACT\"\n                [image]=\"product?.imageAsDataUri\"\n                headerLabel=\"PRODUCT\"\n                [headerValue]=\"product?.product\"\n                subHeaderLabel=\"REFERENCE\"\n                [subHeaderValue]=\"product?.productReference\"\n        ></transaction-summary-block>\n    "
+                },] }
+    ];
+    TransactionProductContractSummaryComponent.ctorParameters = function () { return [
+        { type: TransactionService }
+    ]; };
+
+    var TransactionProductSummaryComponent = /** @class */ (function (_super) {
+        __extends(TransactionProductSummaryComponent, _super);
+        function TransactionProductSummaryComponent(service) {
+            var _this = _super.call(this, service) || this;
+            _this.service = service;
+            return _this;
+        }
+        TransactionProductSummaryComponent.prototype.productSet = function () {
+            // 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;
+                //     });
+            }
+        };
+        return TransactionProductSummaryComponent;
+    }(TransactionBaseComponent));
+    TransactionProductSummaryComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "transaction-product-summary",
+                    template: "\n        <transaction-summary-block\n                [class.disabled]=\"!isNew\"\n                label=\"PRODUCT\"\n                [image]=\"product?.imageAsDataUri\"\n                headerLabel=\"PRODUCT_TYPE\"\n                [headerValue]=\"product?.productReference\"\n                subHeaderLabel=\"PRODUCT\"\n                [subHeaderValue]=\"product?.product\"\n        ></transaction-summary-block>\n    "
+                },] }
+    ];
+    TransactionProductSummaryComponent.ctorParameters = function () { return [
+        { type: TransactionService }
+    ]; };
+    TransactionProductSummaryComponent.propDecorators = {
+        hidden: [{ type: i0.HostBinding, args: ["class.hidden",] }]
+    };
+
+    var TemplateWrapperDirective = /** @class */ (function () {
+        function TemplateWrapperDirective(viewContainer) {
+            this.viewContainer = viewContainer;
+            this.templateWrapper = null;
+            this.templateWrapperContext = null;
+        }
+        TemplateWrapperDirective.prototype.ngOnChanges = function (changes) {
+            var 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);
+                }
+            }
+        };
+        TemplateWrapperDirective.prototype.ngOnDestroy = function () {
+            if (this._viewRef) {
+                this.viewContainer.remove(this.viewContainer.indexOf(this._viewRef));
+                this._viewRef = undefined;
+            }
+            this.templateWrapper = undefined;
+        };
+        TemplateWrapperDirective.prototype._shouldRecreateView = function (changes) {
+            var ctxChange = changes["templateWrapperContext"];
+            return !!changes["templateWrapper"] || (ctxChange && this._hasContextShapeChanged(ctxChange));
+        };
+        TemplateWrapperDirective.prototype._hasContextShapeChanged = function (ctxChange) {
+            var e_1, _a;
+            var prevCtxKeys = Object.keys(ctxChange.previousValue || {});
+            var currCtxKeys = Object.keys(ctxChange.currentValue || {});
+            if (prevCtxKeys.length === currCtxKeys.length) {
+                try {
+                    for (var currCtxKeys_1 = __values(currCtxKeys), currCtxKeys_1_1 = currCtxKeys_1.next(); !currCtxKeys_1_1.done; currCtxKeys_1_1 = currCtxKeys_1.next()) {
+                        var propName = currCtxKeys_1_1.value;
+                        if (prevCtxKeys.indexOf(propName) === -1) {
+                            return true;
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (currCtxKeys_1_1 && !currCtxKeys_1_1.done && (_a = currCtxKeys_1.return)) _a.call(currCtxKeys_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                return false;
+            }
+            else {
+                return true;
+            }
+        };
+        TemplateWrapperDirective.prototype._updateExistingContext = function (ctx) {
+            var e_2, _a;
+            try {
+                for (var _b = __values(Object.keys(ctx)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var propName = _c.value;
+                    this._viewRef.context[propName] = this.templateWrapperContext[propName];
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        };
+        return TemplateWrapperDirective;
+    }());
+    TemplateWrapperDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: "[templateWrapper]"
+                },] }
+    ];
+    TemplateWrapperDirective.ctorParameters = function () { return [
+        { type: i0.ViewContainerRef }
+    ]; };
+    TemplateWrapperDirective.propDecorators = {
+        templateWrapper: [{ type: i0.Input }],
+        templateWrapperContext: [{ type: i0.Input }]
+    };
+
+    var DefaultOkCancelButtonsComponent = /** @class */ (function () {
+        function DefaultOkCancelButtonsComponent() {
+            this.hideCancel = false;
+            this.hideOk = false;
+            this.okLabel = "OK";
+            // only emits when ok button was not disabled when it was clicked
+            this.okClick = new i0.EventEmitter();
+            this.cancelClick = new i0.EventEmitter();
+        }
+        DefaultOkCancelButtonsComponent.prototype.onOkClick = function (event) {
+            if (this.okButtonComp && !this.okButtonComp.disabled) {
+                this.okClick.emit(event);
+            }
+        };
+        return DefaultOkCancelButtonsComponent;
+    }());
+    DefaultOkCancelButtonsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: "default-ok-cancel-buttons",
+                    template: "\n        <co-button *ngIf=\"!hideOk\" [label]=\"okLabel\" [disabled]=\"okDisabled\" class=\"ok\" #okButton (click)=\"onOkClick($event)\"></co-button>\n        <co-button *ngIf=\"!hideCancel\" label=\"CANCEL\" (click)=\"cancelClick.emit($event)\"></co-button>\n        <ng-content></ng-content>\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}.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 = function () { return []; };
+    DefaultOkCancelButtonsComponent.propDecorators = {
+        okDisabled: [{ type: i0.Input }],
+        hideCancel: [{ type: i0.Input }],
+        hideOk: [{ type: i0.Input }],
+        okLabel: [{ type: i0.Input }],
+        okClick: [{ type: i0.Output }],
+        cancelClick: [{ type: i0.Output }],
+        okButtonComp: [{ type: i0.ViewChild, args: ["okButton",] }]
+    };
+
+    var IoneServiceOrderModule = /** @class */ (function () {
+        function IoneServiceOrderModule() {
+        }
+        return IoneServiceOrderModule;
+    }());
+    IoneServiceOrderModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        animations.BrowserAnimationsModule,
+                        corecomponents_v12.IconModule,
+                        corecomponents_v12.InputTextModule,
+                        corecomponents_v12.InputCheckboxModule,
+                        corecomponents_v12.InputRadioButtonModule,
+                        corecomponents_v12.FormModule,
+                        corecomponents_v12.InputComboBoxModule,
+                        corecomponents_v12.InputDatePickerModule,
+                        corecomponents_v12.InputNumberPickerModule,
+                        corecomponents_v12.CoDialogModule,
+                        corecomponents_v12.CoDialogPromptModule,
+                        corecomponents_v12.ButtonModule,
+                        flexLayout.FlexModule,
+                        corecomponents_v12.MultiSelectListModule,
+                        corecomponents_v12.DropDownModule,
+                        corecomponents_v12.PopupModule.forRoot(),
+                        corecomponents_v12.CoSidebarModule,
+                        corecomponents_v12.CoGridModule,
+                        CoreModule,
+                        ej2AngularButtons.ChipListModule,
+                        ej2AngularSplitbuttons.DropDownButtonModule,
+                        ej2AngularButtons.CheckBoxModule,
+                        ej2AngularDropdowns.DropDownListModule,
+                        IoneShoppingCartModule,
+                        ej2AngularNavigations.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";
 
     /**
@@ -5795,6 +7593,8 @@
 
     exports.IoneCheckoutComponent = IoneCheckoutComponent;
     exports.IoneCheckoutModule = IoneCheckoutModule;
+    exports.IoneServiceOrderComponent = IoneServiceOrderComponent;
+    exports.IoneServiceOrderModule = IoneServiceOrderModule;
     exports.IoneShoppingCartComponent = IoneShoppingCartComponent;
     exports.IoneShoppingCartModule = IoneShoppingCartModule;
     exports["ɵa"] = RetailTransactionCheckoutComponent;
@@ -5804,7 +7604,29 @@
     exports["ɵbc"] = ShoppingCartLineComponent;
     exports["ɵbd"] = StockStatusIndicatorComponent;
     exports["ɵbe"] = CharacteristicAnswerComponent;
+    exports["ɵbf"] = TemplateWrapperDirective;
+    exports["ɵbg"] = DefaultOkCancelButtonsComponent;
+    exports["ɵbh"] = ServiceOrderComponent;
+    exports["ɵbi"] = TransactionBaseComponent;
+    exports["ɵbj"] = TransactionArticleTextComponent;
+    exports["ɵbk"] = TransactionOrderTotalsComponent;
+    exports["ɵbl"] = TransactionOrderLineViewComponent;
+    exports["ɵbm"] = TransactionOrderLinesComponent;
+    exports["ɵbn"] = TransactionRelationAddressComponent;
+    exports["ɵbo"] = TransactionSidebarRightComponent;
+    exports["ɵbp"] = TransactionLineAccordionComponent;
+    exports["ɵbq"] = TransactionHeaderBlockComponent;
+    exports["ɵbr"] = TransactionRelationEditComponent;
+    exports["ɵbs"] = TransactionServiceSummaryComponent;
+    exports["ɵbt"] = TransactionSummaryBlockComponent;
+    exports["ɵbu"] = TransactionServiceStatusComponent;
+    exports["ɵbv"] = TransactionOrderSummaryComponent;
+    exports["ɵbw"] = TransactionPaymentInfoComponent;
+    exports["ɵbx"] = TransactionArticleSummaryComponent;
+    exports["ɵby"] = TransactionDeliverySummaryComponent;
+    exports["ɵbz"] = TransactionProductContractSummaryComponent;
     exports["ɵc"] = CheckoutOverviewComponent;
+    exports["ɵca"] = TransactionProductSummaryComponent;
     exports["ɵd"] = CheckoutOverviewBlockComponent;
     exports["ɵe"] = CheckoutOverviewRelationEditComponent;
     exports["ɵf"] = TransactionService;