@colijnit/transaction 12.0.5 → 12.1.3

package/fesm2015/colijnit-transaction.js

@@ -1,12 +1,13 @@
 import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, ChangeDetectorRef, ViewChild, Pipe, HostBinding, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, ChangeDetectorRef, ViewChild, Pipe, HostBinding, NgModule, Directive, ContentChild, ViewContainerRef } from '@angular/core';
 import { BehaviorSubject, Subject, throwError } from 'rxjs';
 import { Options } from '@colijnit/ioneconnector/build/model/options';
 import { CustomerFullObject } from '@colijnit/transactionapi/build/model/customer-full-object.bo';
 import { TransactionInfoResponse } from '@colijnit/transactionapi/build/model/transaction-info-response.bo';
 import { RelationPrivacySetting } from '@colijnit/transactionapi/build/model/relation-privacy-setting.bo';
 import { GetPostalCodeRetrievalOutputParams } from '@colijnit/transactionapi/build/model/get-postal-code-retrieval-output-params';
+import { RelationListObject } from '@colijnit/transactionapi/build/model/relation-list-object.bo';
 import { ArticleFullObject } from '@colijnit/transactionapi/build/model/article-full-object';
 import { LineOperationResponse } from '@colijnit/transactionapi/build/model/line-operation-response.bo';
 import { Transaction } from '@colijnit/transactionapi/build/transaction';
@@ -24,7 +25,7 @@ import { BooleanTextDecorator as BooleanTextDecorator$1 } from '@colijnit/transa
 import { JsonFieldFieldDecorator } from '@colijnit/transactionapi/build/factory/decorators/json.decorator';
 import { ComplexArrayDecorator as ComplexArrayDecorator$1 } from '@colijnit/transactionapi/build/factory/decorators/complex-array.decorator';
 import { ImageUtils } from '@colijnit/transactionapi/build/utils/image-utils';
-import { NULL_RELATION_OBJECT } from '@colijnit/transactionapi/build/model/nul-relation-object';
+import { NULL_RELATION_OBJECT, NULL_CUSTOMER_FULL_OBJECT, NULL_RELATION_LIST_OBJECT } from '@colijnit/transactionapi/build/model/nul-relation-object';
 import { TransactionKind } from '@colijnit/transactionapi/build/enum/transaction-kind.enum';
 import { SequenceName } from '@colijnit/transactionapi/build/enum/sequence-name.enum';
 import { ArrayUtils as ArrayUtils$1 } from '@colijnit/transactionapi/build/utils/array-utils';
@@ -34,16 +35,15 @@ import { TransactionLineType } from '@colijnit/transactionapi/build/enum/transac
 import { LineOperationStatus } from '@colijnit/transactionapi/build/model/line-operation-status.bo';
 import { TransactionInfo } from '@colijnit/transactionapi/build/model/transaction-info.bo';
 import { PendingReasonType } from '@colijnit/transactionapi/build/enum/pending-reason-type.enum';
+import { PromptService, FormComponent, CoSidebarComponent, CoreComponentsIcon, IconCacheService, IconModule, InputTextModule, InputCheckboxModule, InputRadioButtonModule, FormModule, InputComboBoxModule, InputDatePickerModule, InputNumberPickerModule, CoDialogModule, CoDialogPromptModule, ButtonModule, MultiSelectListModule, DropDownModule, PopupModule, CoSidebarModule, CoGridModule } from '@colijnit/corecomponents_v12';
 import { CommunicationType } from '@colijnit/transactionapi/build/enum/communication-type.enum';
 import { ContactOption } from '@colijnit/transactionapi/build/model/contact-option.bo';
 import { RelationNameKind } from '@colijnit/transactionapi/build/enum/relation-name-kind.enum';
 import { AddressType } from '@colijnit/transactionapi/build/enum/address-type.enum';
 import { GenderType } from '@colijnit/transactionapi/build/enum/gender-type.enum';
 import { BusinessObjectUtils } from '@colijnit/transactionapi/build/utils/business-object-utils';
-import { FormComponent, CoSidebarComponent, PromptService, CoreComponentsIcon, IconCacheService, IconModule, InputTextModule, InputCheckboxModule, InputRadioButtonModule, FormModule, InputComboBoxModule, InputDatePickerModule, InputNumberPickerModule, CoDialogModule, CoDialogPromptModule, ButtonModule, MultiSelectListModule, DropDownModule, PopupModule, CoSidebarModule, CoGridModule } from '@colijnit/corecomponents_v12';
 import { FunctionUtils } from '@colijnit/transactionapi/build/utils/function-utils';
 import { Address } from '@colijnit/transactionapi/build/model/address.bo';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FlexModule } from '@angular/flex-layout';
 import { MatStepperModule } from '@angular/material/stepper';
 import { CommonModule } from '@angular/common';
@@ -52,6 +52,14 @@ import { ResolvePendingLineReasonRequest } from '@colijnit/transactionapi/build/
 import { SortDirection } from '@colijnit/transactionapi/build/enum/sort-direction';
 import { SortType } from '@colijnit/transactionapi/build/enum/sort-type.enum';
 import { StockStatus } from '@colijnit/transactionapi/build/enum/refcode/stock-status.enum';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { RelationRequest } from '@colijnit/transactionapi/build/model/relation-request';
+import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
+import { ChipListModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
+import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
+import { Sidebar, Accordion } from '@syncfusion/ej2-navigations';
+import { TabModule } from '@syncfusion/ej2-angular-navigations';
+import { TransactionLineInfo } from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
 
 class OptionsService {
     constructor() {
@@ -848,14 +856,19 @@ class IOneConnectorAdapterService {
         return new Promise((resolve, reject) => {
             return this.connector.getSingleImage(nodeId, publication, includeMimetype, thumb).then((result) => {
                 if (result.validationResult && result.validationResult.success) {
-                    if (result.resultObject.filePath !== null && result.resultObject.filePath !== "") {
+                    if (result.resultObject && result.resultObject.filePath !== null && result.resultObject.filePath !== "") {
                         return resolve(ImageUtils.getFixedImageFilepathUrl(result.resultObject.filePath));
                     }
                     else {
-                        if (includeMimetype) {
-                            return resolve(ImageUtils.getDocBodyWithMimeTypeDefinition(result.resultObject.fileName, thumb ? result.resultObject.thumbnailBody : result.resultObject.documentBody));
+                        if (result.resultObject) {
+                            if (includeMimetype) {
+                                return resolve(ImageUtils.getDocBodyWithMimeTypeDefinition(result.resultObject.fileName, thumb ? result.resultObject.thumbnailBody : result.resultObject.documentBody));
+                            }
+                            return resolve(thumb ? result.resultObject.thumbnailBody : result.resultObject.documentBody);
+                        }
+                        else {
+                            reject(result.validationMessagesAsString);
                         }
-                        return resolve(thumb ? result.resultObject.thumbnailBody : result.resultObject.documentBody);
                     }
                 }
                 else {
@@ -959,6 +972,18 @@ class IOneConnectorAdapterService {
             });
         });
     }
+    getTransactionById(transactionId) {
+        return new Promise((resolve, reject) => {
+            return this.connector.getTransactionById(transactionId).then((result) => {
+                if (result.validationResult && result.validationResult.success) {
+                    resolve(this._boFactory.makeWithRawBackendData(TransactionInfoResponse, result.resultObject));
+                }
+                else {
+                    reject(result.validationMessagesAsString);
+                }
+            });
+        });
+    }
     saveTransaction(uuid) {
         return new Promise((resolve, reject) => {
             return this.connector.saveTransaction(uuid).then((result) => {
@@ -1119,7 +1144,7 @@ class IOneConnectorAdapterService {
             return new Promise((resolve, reject) => {
                 return this.connector.getRelationListObjects(relationRequest).then((result) => {
                     if (result.validationResult && result.validationResult.success) {
-                        resolve(result.resultObjects);
+                        resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(RelationListObject, result.resultObjects));
                     }
                     else {
                         reject(result.validationMessagesAsString);
@@ -1292,9 +1317,11 @@ IOneConnectorAdapterService.decorators = [
 IOneConnectorAdapterService.ctorParameters = () => [];
 
 class TransactionService {
-    constructor(_connector) {
+    constructor(_connector, _prompt) {
         this._connector = _connector;
+        this._prompt = _prompt;
         this.transactionUpdated = new EventEmitter();
+        this.transactionLoaded = new EventEmitter();
         this.applicationUser = false;
         this.articleAmount = 0;
         this._currentLines = [];
@@ -1338,6 +1365,11 @@ class TransactionService {
             && line.pendingReasonType !== PendingReasonType.NON_CRITICAL_DISCONTINUATION);
         return status;
     }
+    pendingLineOperationStatus(lineOperationStatuses) {
+        const status = lineOperationStatuses.find(line => line.pendingReasonType !== PendingReasonType.NONE
+            && line.pendingReasonType !== PendingReasonType.NON_CRITICAL_DISCONTINUATION);
+        return status;
+    }
     getArticleFullObject(goodId) {
         return __awaiter(this, void 0, void 0, function* () {
             return yield this._connector.getArticleFullObject(goodId);
@@ -1418,11 +1450,10 @@ class TransactionService {
             });
         });
     }
-    resolvePendingLineReason(pendingLineValues) {
+    resolvePendingLineReason(pendingLineValues, remember = true) {
         return new Promise((resolve) => {
             this._connector.resolvePendingLineReason(pendingLineValues).then((response) => __awaiter(this, void 0, void 0, function* () {
-                this._rememberCurrentTransaction(response);
-                this._rememberCurrentTransactionLineStatus(response);
+                this._rememberResponse(remember, response);
                 resolve(response);
             })).catch((reason) => {
                 resolve();
@@ -1438,8 +1469,25 @@ class TransactionService {
         return new Promise((resolve, reject) => {
             this._connector.getTransactionByNrAndKind(kind, transactionNr)
                 .then((response) => __awaiter(this, void 0, void 0, function* () {
-                this._rememberCurrentTransaction(response);
                 if (response.isSuccess) {
+                    this.transactionLoaded.emit(response);
+                    resolve(true);
+                }
+                else {
+                    reject(false);
+                }
+            }))
+                .catch((reason) => {
+                reject(false);
+            });
+        });
+    }
+    getTransactionById(transactionId) {
+        return new Promise((resolve, reject) => {
+            this._connector.getTransactionById(transactionId)
+                .then((response) => __awaiter(this, void 0, void 0, function* () {
+                if (response.isSuccess) {
+                    this.transactionLoaded.emit(response);
                     resolve(true);
                 }
                 else {
@@ -1459,6 +1507,28 @@ class TransactionService {
             }
         });
     }
+    saveTransactionByUuid(transactionUuid) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                this._connector.saveTransaction(transactionUuid)
+                    .then((response) => __awaiter(this, void 0, void 0, function* () {
+                    if (response.isSuccess) {
+                        this.transactionLoaded.emit(response);
+                        resolve(true);
+                    }
+                    else {
+                        reject(false);
+                    }
+                }))
+                    .catch((reason) => {
+                    if (reason) {
+                        this._prompt.showError(reason.getFullErrorString());
+                    }
+                    reject(false);
+                });
+            });
+        });
+    }
     addRelationToTransaction(relationId) {
         return __awaiter(this, void 0, void 0, function* () {
             const success = yield this._connector.addRelationToTransaction(this._currentTransaction.uuid, relationId);
@@ -1538,7 +1608,17 @@ class TransactionService {
     }
     retrieveLineImage(line) {
         return __awaiter(this, void 0, void 0, function* () {
-            const goodId = yield this._connector.getGoodIdFromArticleNr(line.articleNumber);
+            return yield this.getArticleImageByArticleNumber(line.articleNumber);
+        });
+    }
+    getArticleImageByArticleNumber(articleNumber) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const goodId = yield this._connector.getGoodIdFromArticleNr(articleNumber);
+            return this.getArticleImageByGoodId(goodId);
+        });
+    }
+    getArticleImageByGoodId(goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
             if (!isNaN(goodId)) {
                 return this._connector.getSingleImage(goodId, 1, true, true);
             }
@@ -1562,13 +1642,29 @@ class TransactionService {
             });
         });
     }
-    addTransactionLine(lineType, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr) {
+    addArticleToTransaction(transactionUuid, articleNo, amount = 1, warehouseNo = 1, commissionCode = "2", isReturn = false, aboveLineNr = 0, belowLineNr = 0) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                this._connector.addTransactionLine(transactionUuid, TransactionLineType.ArticleLine, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr)
+                    .then((response) => __awaiter(this, void 0, void 0, function* () {
+                    resolve(response);
+                }), (error) => {
+                    this._prompt.showError(error);
+                    reject(error);
+                })
+                    .catch((reason) => {
+                    this._prompt.showError(reason.getFullErrorString());
+                    resolve(null);
+                });
+            });
+        });
+    }
+    addTransactionLine(lineType, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr, remember = true) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
                 this._connector.addTransactionLine(this.currentTransaction.uuid, lineType, articleNo, amount, warehouseNo, commissionCode, isReturn, aboveLineNr, belowLineNr)
                     .then((response) => __awaiter(this, void 0, void 0, function* () {
-                    this._rememberCurrentTransaction(response);
-                    this._rememberCurrentTransactionLineStatus(response);
+                    this._rememberResponse(remember, response);
                     resolve(response);
                 }), (error) => {
                     reject(error);
@@ -1579,13 +1675,12 @@ class TransactionService {
             });
         });
     }
-    addTextLineToTransaction(showOnDocuments, text, amount, articleBound, refArticleLineNr, aboveLineNr, belowLineNr) {
+    addTextLineToTransaction(showOnDocuments, text, amount, articleBound, refArticleLineNr, aboveLineNr, belowLineNr, remember = true) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
                 this._connector.addTextLineToTransaction(this.currentTransaction.uuid, showOnDocuments, text, amount, articleBound, refArticleLineNr, aboveLineNr, belowLineNr)
                     .then((response) => __awaiter(this, void 0, void 0, function* () {
-                    this._rememberCurrentTransaction(response);
-                    this._rememberCurrentTransactionLineStatus(response);
+                    this._rememberResponse(remember, response);
                     resolve(response);
                 }), (error) => {
                     reject(error);
@@ -1596,12 +1691,11 @@ class TransactionService {
             });
         });
     }
-    changeLineSequence(lineUuid, aboveLineNr, belowLineNr) {
+    changeLineSequence(lineUuid, aboveLineNr, belowLineNr, remember = true) {
         return new Promise((resolve, reject) => {
             this._connector.changeLineSequence(this.currentTransaction.uuid, lineUuid, aboveLineNr, belowLineNr)
                 .then((response) => __awaiter(this, void 0, void 0, function* () {
-                this._rememberCurrentTransaction(response);
-                this._rememberCurrentTransactionLineStatus(response);
+                this._rememberResponse(remember, response);
                 resolve(response);
             }), (error) => {
                 reject(error);
@@ -1611,12 +1705,14 @@ class TransactionService {
             });
         });
     }
-    cancelAddTransactionLine(lineUuid) {
+    cancelAddTransactionLine(lineUuid, remember = true) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
                 this._connector.cancelAddTransactionLine(lineUuid)
                     .then((response) => __awaiter(this, void 0, void 0, function* () {
-                    this._rememberCurrentTransaction(response);
+                    if (remember) {
+                        this._rememberCurrentTransaction(response);
+                    }
                     if (response.isSuccess) {
                         resolve(response);
                     }
@@ -1630,13 +1726,12 @@ class TransactionService {
             });
         });
     }
-    deleteTransactionLine(transactionUuid, TransactionLineUuid) {
+    deleteTransactionLine(transactionUuid, TransactionLineUuid, remember = true) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
                 this._connector.deleteTransactionLine(transactionUuid, TransactionLineUuid)
                     .then((response) => __awaiter(this, void 0, void 0, function* () {
-                    this._rememberCurrentTransaction(response);
-                    this._rememberCurrentTransactionLineStatus(response);
+                    this._rememberResponse(remember, response);
                     if (response.isSuccess) {
                         resolve(response);
                     }
@@ -1650,14 +1745,13 @@ class TransactionService {
             });
         });
     }
-    changeTransactionLineQuantity(lineUuid, newQuantity) {
+    changeTransactionLineQuantity(lineUuid, newQuantity, remember = true) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve) => {
                 this._connector.changeTransactionLineQuantity(this.currentTransaction.uuid, lineUuid, newQuantity)
                     .then((response) => __awaiter(this, void 0, void 0, function* () {
                     if (response.isSuccess) {
-                        this._rememberCurrentTransaction(response);
-                        this._rememberCurrentTransactionLineStatus(response);
+                        this._rememberResponse(remember, response);
                     }
                     resolve(response);
                 })).catch((reason) => {
@@ -1678,6 +1772,15 @@ class TransactionService {
             });
         });
     }
+    getCustomerFulObjectByRelationId(relationId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const relationNr = yield this._connector.getRelationNumber(relationId);
+            if (relationNr) {
+                return yield this._connector.getCustomerFullObject(Number(relationNr));
+            }
+            return NULL_CUSTOMER_FULL_OBJECT;
+        });
+    }
     // public async setRelationByUser(username: string, password: string): Promise<boolean> {
     //   const response: boolean = await this._connector.setRelationByUser(this.currentTransaction.uuid, username, password);
     //   return response;
@@ -1688,13 +1791,15 @@ class TransactionService {
         }
     }
     _rememberCurrentTransaction(value) {
-        this._currentTransaction = value.transactionInfo;
-        this._initializeTransaction();
-        this.currentLines = value.transactionLines;
-        this.currentTotals = value.transactionTotal;
-        this.currentLineOperationStatuses = value.lineOperationStatuses;
-        this._updateRelation();
-        this.transactionUpdated.emit();
+        return __awaiter(this, void 0, void 0, function* () {
+            this._currentTransaction = value.transactionInfo;
+            this._initializeTransaction();
+            this.currentLines = value.transactionLines;
+            this.currentTotals = value.transactionTotal;
+            this.currentLineOperationStatuses = value.lineOperationStatuses;
+            yield this._updateRelation();
+            this.transactionUpdated.emit();
+        });
     }
     _rememberCurrentTransactionLineStatus(value) {
         // this._currentLineOperationStatus.uuid = value.lineUuid;
@@ -1705,10 +1810,7 @@ class TransactionService {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.currentTransaction && this.currentTransaction.relation && this.currentTransaction.relation.relationId) {
                 if (!this._currentRelation || this._currentRelation.relationId !== this.currentTransaction.relation.relationId) {
-                    const relationNr = yield this._connector.getRelationNumber(this.currentTransaction.relation.relationId);
-                    if (relationNr) {
-                        this._currentRelation = yield this._connector.getCustomerFullObject(Number(relationNr));
-                    }
+                    this._currentRelation = yield this.getCustomerFulObjectByRelationId(this.currentTransaction.relation.relationId);
                 }
             }
         });
@@ -1730,12 +1832,19 @@ class TransactionService {
         transactionDeliveryOptionsRequest.invoiceAddress = this._currentTransaction.invoiceAddress.nawNr;
         return transactionDeliveryOptionsRequest;
     }
+    _rememberResponse(remember, response) {
+        if (remember) {
+            this._rememberCurrentTransaction(response);
+            this._rememberCurrentTransactionLineStatus(response);
+        }
+    }
 }
 TransactionService.decorators = [
     { type: Injectable }
 ];
 TransactionService.ctorParameters = () => [
-    { type: IOneConnectorAdapterService }
+    { type: IOneConnectorAdapterService },
+    { type: PromptService }
 ];
 
 var LanguageCode;
@@ -1828,8 +1937,10 @@ class Dictionary {
                 "ADDRESS_CHANGE": "Adres wijzigen",
                 "ALWAYS_SHOW_LOGISTICS_POPUP": "Controleer magazijn en commissiecode",
                 "ARTICLE": "Artikel",
+                "ARTICLE_DESCRIPTION": "Artikelomschrijving",
                 "ARTICLE_IN_OUT_COLLECTION": "Status van artikel is '|~'. Weet u zeker dat u door wilt gaan?",
                 "ARTICLE_NR": "Artikelnummer",
+                "ARTICLE_UNKNOWN": "Onbekend artikel",
                 "ASSEMBLY_COSTS": "Montagekosten",
                 "ASSEMBLY_DATE": "Montagedatum",
                 "AMOUNT": "Aantal",
@@ -1868,12 +1979,15 @@ class Dictionary {
                 "DELIVERY_OPTARTICLE_NRIONS": "Bezorgopties",
                 "DELIVERY_TIME_PERIOD": "Levertijd",
                 "DESCRIPTION": "Omschrijving",
+                "DETAILS": "Details",
                 "DISCOUNT": "Korting",
                 "DISCOUNT_AMOUNT": "Kortingsbedrag",
                 "DISCOUNT_PERCENTAGE": "Kortings %",
                 "DROPSHIPMENT": "Dropshipment",
                 "EMAIL_ADDRESS": "E-mailadres",
                 "EXISTING_CUSTOMERS": "Bestaande klanten",
+                "EXPECTED_DELIVERY_DATE": "Verwachte bezorgdatum",
+                "EXPECTED_DELIVERY_WEEK": "Verwachte leverweek",
                 "FEMALE": "Vrouw",
                 "FIRST_NAME": "Voornaam",
                 "GOOD_DESCRIPTION": "Artikelomschrijving",
@@ -1900,11 +2014,14 @@ class Dictionary {
                 "NUMBER": "Aantal",
                 "ON_DATE": "Op datum",
                 "OPEN_SHOPPING_CART": "Open winkelwagen",
+                "ORDER_DATE": "Orderdatum",
                 "ORDER_GROSS": "Ordertotaal bruto",
                 "ORDER_NET": "Ordertotaal netto",
+                "ORDER_NUMBER": "Ordernummer",
                 "ORDER_TYPE": "Type bestelling",
                 "OVERVIEW": "Overzicht",
                 "OWN_REFERENCE": "Eigen referentie",
+                "PAID_DOWN2": "Aanbetaald",
                 "PART_DELIVERIES": "Deelleveringen",
                 "PASSWORD": "Wachtwoord",
                 "PAYMENT": "Betaling",
@@ -1917,6 +2034,8 @@ class Dictionary {
                 "PRICE_LIST": "Prijslijst",
                 "PRIVACY_PREFERENCES": "Privacyvoorkeuren",
                 "PRIVATE_PERSON": "Particulier",
+                "PRODUCT": "Product",
+                "PRODUCT_TYPE": "Productsoort",
                 "QUANTITY_CANNOT_BE_ZERO_OR_EMPTY": "Het aantal mag geen 0 zijn.",
                 "QUANTITY_CANNOT_BE_LESS_THAN_DELIVERED": "Het aantal moet gelijk zijn aan het geleverde aantal",
                 "QUANTITY_CANNOT_BE_MORE_THAN_DELIVERED": "Het aantal moet gelijk zijn aan het geleverde aantal",
@@ -1932,6 +2051,9 @@ class Dictionary {
                 "SALUTATION": "Aanhef",
                 "SAVE": "Opslaan",
                 "SELECT": "Selecteren",
+                "SERVICE_NUMBER": "Servicenummer",
+                "SERVICE_REQUEST_DATE": "Datum aanvraag",
+                "SERVICE_STATE": "Service status",
                 "SHOPPING_CART": "Winkelwagen",
                 "SHOPPING_CART_CHECKOUT": "Bestellen",
                 "SHOPPING_CART_OVERVIEW": "Overzicht van uw bestelling",
@@ -1943,17 +2065,22 @@ class Dictionary {
                 "SUBTOTAL": "Subtotaal",
                 "SUGGESTIONS": "Suggesties",
                 "SURCHARGE_AMOUNT": "Toeslag",
+                "STATE": "Status",
                 "STREET": "Straatnaam",
+                "TOTAL_AMOUNT": "Totaalbedrag",
                 "TOTAL_GROSS": "Totaal bruto",
                 "TOTAL_ASSEMBLY_TIME": "Totale montagetijd",
                 "TRANSACTION_DISCOUNT": "Totale transactie korting",
                 "TRANSACTION_DISCOUNT_PERC": "% Trans. korting",
                 "TRANSACTION_PRICE_DECLARATION": "Order prijsverklaring",
+                "TRANSACTION_SUM_I": "Ordertotaal incl. BTW",
                 "TRANSACTION_TOTAL": "Transactie totaal",
                 "UNKNOWN": "Onbekend",
                 "UNKNOWN_ADDRESS_CHECK_IT": "Onbekend adres",
                 "VAT": "Btw",
+                "VAT_AMOUNT": "BTW-bedrag",
                 "VALUE": "Waarde",
+                "WHERE_ARE_YOU_LOOKING_FOR": "Waar ben je naar op zoek?",
                 "WAREHOUSE": "Magazijn",
                 "YOUR_DATA": "Uw gegevens",
             },
@@ -1973,8 +2100,10 @@ class Dictionary {
                 "ADDRESS_CHANGE": "Change address",
                 "ALWAYS_SHOW_LOGISTICS_POPUP": "Check warehouse and commissioncode",
                 "ARTICLE": "Article",
+                "ARTICLE_DESCRIPTION": "Article description",
                 "ARTICLE_IN_OUT_COLLECTION": "Status of article is '|~'. Are you sure to proceed?",
                 "ARTICLE_NR": "Article number",
+                "ARTICLE_UNKNOWN": "Article unknown",
                 "ASSEMBLY_COSTS": "Assembly costs",
                 "ASSEMBLY_DATE": "Assembly date",
                 "AMOUNT": "Amount",
@@ -2013,12 +2142,15 @@ class Dictionary {
                 "DELIVERY_OPTARTICLE_NRIONS": "Delivery options",
                 "DELIVERY_TIME_PERIOD": "Delivery time period",
                 "DESCRIPTION": "Description",
+                "DETAILS": "Details",
                 "DISCOUNT": "Discount",
                 "DISCOUNT_AMOUNT": "Discount amount",
                 "DISCOUNT_PERCENTAGE": "Discount %",
                 "DROPSHIPMENT": "Dropshipment",
                 "EMAIL_ADDRESS": "E-mailadres",
                 "EXISTING_CUSTOMERS": "Existing customers",
+                "EXPECTED_DELIVERY_DATE": "Expected delivery date",
+                "EXPECTED_DELIVERY_WEEK": "Expected delivery week",
                 "FEMALE": "Female",
                 "FIRST_NAME": "First name",
                 "GOOD_DESCRIPTION": "Article description",
@@ -2045,11 +2177,14 @@ class Dictionary {
                 "NUMBER": "Amount",
                 "ON_DATE": "On date",
                 "OPEN_SHOPPING_CART": "Open shopping cart",
+                "ORDER_DATE": "Order date",
                 "ORDER_GROSS": "Total gross amount",
                 "ORDER_NET": "Total net amount",
+                "ORDER_NUMBER": "Order number",
                 "ORDER_TYPE": "Order type",
                 "OVERVIEW": "Overview",
                 "OWN_REFERENCE": "Own reference",
+                "PAID_DOWN2": "Prepaid",
                 "PART_DELIVERIES": "Partial deliveries",
                 "PASSWORD": "Password",
                 "PAYMENT": "Payment",
@@ -2062,6 +2197,8 @@ class Dictionary {
                 "PRICE_LIST": "Pricelist",
                 "PRIVACY_PREFERENCES": "Privacy preferences",
                 "PRIVATE_PERSON": "Private",
+                "PRODUCT": "Product",
+                "PRODUCT_TYPE": "Product type",
                 "QUANTITY_CANNOT_BE_ZERO_OR_EMPTY": "Quantity cannot be zero or empty",
                 "QUANTUM_DISCOUNT": "Quantum discount",
                 "REFERENCE_RELATION": "Ref. relation",
@@ -2069,6 +2206,9 @@ class Dictionary {
                 "SALUTATION": "Salutation",
                 "SAVE": "Save",
                 "SELECT": "Select",
+                "SERVICE_NUMBER": "Service number",
+                "SERVICE_REQUEST_DATE": "Service request data",
+                "SERVICE_STATE": "Service state",
                 "SHOPPING_CART": "Shopping cart",
                 "SHOPPING_CART_CHECKOUT": "Checkout",
                 "SHOPPING_CART_OVERVIEW": "Order overview",
@@ -2080,18 +2220,23 @@ class Dictionary {
                 "SUBTOTAL": "Subtotal",
                 "SUGGESTIONS": "Suggestions",
                 "SURCHARGE_AMOUNT": "Surcharge",
+                "STATE": "STATUS",
                 "STREET": "Streetname",
+                "TOTAL_AMOUNT": "Total amount",
                 "TOTAL_GROSS": "Gross total",
                 "TOTAL_ASSEMBLY_TIME": "Total assembly time",
                 "TRANSACTION_DISCOUNT": "Total transaction discount",
                 "TRANSACTION_DISCOUNT_PERC": "% Trans. discount",
                 "TRANSACTION_PRICE_DECLARATION": "Transaction price declaration",
+                "TRANSACTION_SUM_I": "Ordertotal incl VAT",
                 "TRANSACTION_TOTAL": "Transaction total",
                 "UNKNOWN": "unknown",
                 "UNKNOWN_ADDRESS_CHECK_IT": "Unknown address",
                 "VALUE": "Value",
                 "VAT": "VAT",
+                "VAT_AMOUNT": "VAT amount",
                 "WAREHOUSE": "Warehouse",
+                "WHERE_ARE_YOU_LOOKING_FOR": "Where are you looking for?",
                 "YOUR_DATA": "Your data",
             },
         };
@@ -2171,6 +2316,9 @@ class TransactionEventService {
         this.addArticleLineAt = new Subject();
         this.addTextLineAt = new Subject();
         this.changeLineSequence = new Subject();
+        this.transactionLineClicked = new Subject();
+        this.rightSidebarClose = new Subject();
+        this.scrollContent = new Subject();
     }
 }
 TransactionEventService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionEventService_Factory() { return new TransactionEventService(); }, token: TransactionEventService, providedIn: "root" });
@@ -3166,7 +3314,7 @@ CheckoutOverviewComponent.decorators = [
                                  (editModeChange)="handleEditChangeRelation($event)">
             <ng-container edit-mode-content>
                 <checkout-overview-relation-edit #relationForm
-                                                 *ngIf="currentStep == steps.Relation && editMode"
+                                                 *ngIf="currentStep === steps.Relation && editMode"
                                                  [relation]="relation"
                                                  [transaction]="transaction"
                                                  (validSubmit)="onRelationValid()"
@@ -4147,6 +4295,7 @@ class IconComponent {
 }
 IconComponent.decorators = [
     { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
                 selector: "icon",
                 template: "",
                 styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.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"]
@@ -4197,7 +4346,6 @@ class IoneCheckoutModule {
 IoneCheckoutModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
-                    BrowserAnimationsModule,
                     IconModule,
                     InputTextModule,
                     InputCheckboxModule,
@@ -4217,6 +4365,7 @@ IoneCheckoutModule.decorators = [
                     CoSidebarModule,
                     CoGridModule,
                     CoreModule,
+                    CommonModule,
                 ],
                 declarations: [
                     CheckoutComponent,
@@ -5311,7 +5460,7 @@ ShoppingCartLineComponent.decorators = [
          [textContent]="line.text">
     </div>
   `,
-                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.cart-line-r .cart-line-description .cart-line-description-artnr{font-size:10px}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}:host{padding-bottom:20px}:host{padding-top:20px}.cart-line-r .cart-line-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}.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}.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 = () => [
@@ -5385,6 +5534,7 @@ class CharacteristicAnswerComponent {
 }
 CharacteristicAnswerComponent.decorators = [
     { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
                 selector: "characteristic-answer",
                 template: `
     <co-dialog
@@ -5461,7 +5611,6 @@ IoneShoppingCartModule.decorators = [
                     CharacteristicAnswerComponent,
                 ],
                 imports: [
-                    BrowserAnimationsModule,
                     CommonModule,
                     IconModule,
                     InputTextModule,
@@ -5491,16 +5640,2442 @@ IoneShoppingCartModule.decorators = [
                 entryComponents: [
                     IoneShoppingCartComponent
                 ],
-                exports: [IoneShoppingCartComponent],
+                exports: [IoneShoppingCartComponent, StockStatusIndicatorComponent, CharacteristicAnswerComponent],
                 bootstrap: [IoneShoppingCartComponent]
             },] }
 ];
 
+class IoneServiceOrderComponent {
+    constructor(_changeDetector, _optionsService, _connector, _dictionary, _service) {
+        this._changeDetector = _changeDetector;
+        this._optionsService = _optionsService;
+        this._connector = _connector;
+        this._dictionary = _dictionary;
+        this._service = _service;
+        this.upAndLoaded = false;
+        this._subscriptions = [];
+        this._remoteOptions = true;
+        this._publicOptions = true;
+        this._orderId = 0;
+        this._subscriptions.push(this._optionsService.optionsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)));
+    }
+    set orderId(value) {
+        this._orderId = value;
+        this._getTransactionById(this._orderId);
+    }
+    ;
+    set options(value) {
+        if (value) {
+            let options;
+            if (typeof value === "string") {
+                options = JSON.parse(value);
+            }
+            else {
+                options = value;
+            }
+            this._publicOptions = true;
+            this._optionsService.initialize(options).then();
+        }
+    }
+    ngOnInit() {
+        if (!this._publicOptions) {
+            this._optionsService.initializeDevelopmentOptions(this._remoteOptions);
+        }
+    }
+    ngOnDestroy() {
+        this._subscriptions.forEach(subscription => subscription.unsubscribe());
+    }
+    _handleSettingsLoaded(loaded) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (loaded) {
+                yield this._initConnection().then();
+                this.upAndLoaded = true;
+            }
+        });
+    }
+    _initConnection() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._connector.connect(this._optionsService.options);
+            if (this._optionsService.options.url) {
+                this._dictionary.rootUrl = this._optionsService.options.url.replace("/ajaxservice", "");
+            }
+            yield this._dictionary.setDictionary(this._optionsService.options.languageCode);
+            setTimeout(() => {
+                this._changeDetector.detectChanges();
+            });
+        });
+    }
+    _getTransactionById(orderId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._service.getTransactionById(orderId);
+        });
+    }
+}
+IoneServiceOrderComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "ione-service-order",
+                template: `
+    <div>
+        <service-order></service-order>
+    </div>
+    <transaction-sidebar-right></transaction-sidebar-right>
+  `
+            },] }
+];
+IoneServiceOrderComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: OptionsService },
+    { type: IOneConnectorAdapterService },
+    { type: DictionaryService },
+    { type: TransactionService }
+];
+IoneServiceOrderComponent.propDecorators = {
+    orderId: [{ type: Input }],
+    options: [{ type: Input }]
+};
+
+class TransactionBaseComponent {
+    constructor(service) {
+        this.service = service;
+        this.relation = NULL_RELATION_LIST_OBJECT;
+        this.customer = NULL_CUSTOMER_FULL_OBJECT;
+        this._isService = false;
+        this.basedOnProduct = false;
+        this._lineOperationStatuses = [];
+        this._transactionLines = [];
+    }
+    set transaction(value) {
+        this._transaction = value;
+        if (this._transaction) {
+            if (this._transaction.transactionInfo) {
+                this._transactionInfo = this._transaction.transactionInfo;
+                this._isService = this._transaction.transactionInfo.transactionKind === TransactionKind.ServiceOrder;
+            }
+            if (this._transaction.transactionLines) {
+                this.transactionLines = this._transaction.transactionLines;
+            }
+            if (this._transaction.transactionTotal) {
+                this._transactionTotal = this._transaction.transactionTotal;
+            }
+            if (this._transaction.lineOperationStatuses) {
+                this.lineOperationStatuses = this._transaction.lineOperationStatuses;
+            }
+        }
+    }
+    get transaction() {
+        return this._transaction;
+    }
+    set transactionInfo(value) {
+        this._transactionInfo = value;
+    }
+    get transactionInfo() {
+        return this._transactionInfo;
+    }
+    set transactionLines(value) {
+        this._transactionLines = value;
+    }
+    get transactionLines() {
+        return this._transactionLines;
+    }
+    set transactionTotal(value) {
+        this._transactionTotal = value;
+    }
+    get transactionTotal() {
+        return this._transactionTotal;
+    }
+    get lineOperationStatuses() {
+        return this._lineOperationStatuses;
+    }
+    set lineOperationStatuses(value) {
+        this._lineOperationStatuses = value;
+    }
+    get isService() {
+        return this._isService;
+    }
+    set relationId(value) {
+        if (value === undefined) {
+            return;
+        }
+        this._relationId = value;
+        this._retrieveRelation();
+    }
+    get relationId() {
+        return this._relationId;
+    }
+    set customerId(value) {
+        if (value === undefined) {
+            return;
+        }
+        this._customerId = value;
+        this._retrieveCustomer();
+    }
+    get customerId() {
+        return this._customerId;
+    }
+    set product(value) {
+        this._product = value;
+        this.productSet();
+        this._setBasedOnProduct();
+    }
+    get product() {
+        return this._product;
+    }
+    get isNew() {
+        return isNill$1(this.transaction) || isNill$1(this.transactionInfo.transactionNr);
+    }
+    transactionSet() {
+        // overridden by descendents
+    }
+    productSet() {
+        // overridden by descendents
+    }
+    _retrieveCustomer() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.customer = yield this.service.getCustomerFulObjectByRelationId(this._customerId);
+        });
+    }
+    _retrieveRelation() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const relationRequest = new RelationRequest();
+            let relations = [];
+            relationRequest.relationId = this.relationId;
+            relations = yield this.service.getRelationListObjects(relationRequest);
+            if (relations && relations.length) {
+                this.relation = relations[0];
+            }
+        });
+    }
+    _setBasedOnProduct() {
+        if (this.product) {
+            this.basedOnProduct = true;
+        }
+        else { //check transaction (service) for product
+            // TODO: assProduct is not a property of transaction right now.
+            // this.basedOnProduct = notNill(this._transaction.assProduct);
+            // if (this.basedOnProduct) {
+            //     this._product = this.transaction.assProduct;
+            // }
+        }
+    }
+}
+TransactionBaseComponent.decorators = [
+    { type: Directive }
+];
+TransactionBaseComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionBaseComponent.propDecorators = {
+    transaction: [{ type: Input }],
+    relationId: [{ type: Input }],
+    customerId: [{ type: Input }],
+    product: [{ type: Input }],
+    relation: [{ type: Input }],
+    customer: [{ type: Input }]
+};
+
+// import {
+//   ToolbarService,
+//   LinkService,
+//   ImageService,
+//   HtmlEditorService,
+//   RichTextEditor
+// } from '@syncfusion/ej2-angular-richtexteditor';
+class TransactionArticleTextComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.visible = false;
+        this.floatButtonSelected = false;
+        this.overviewSelected = false;
+        this.editArtikelText = false;
+        this.collection = [
+            { id: 1, name: "Standaardtekst 1" },
+            { id: 2, name: "Standaardtekst 1" },
+            { id: 3, name: "Standaardtekst 1" },
+            { id: 4, name: "Standaardtekst 1" },
+            { id: 5, name: "Standaardtekst 1" }
+        ];
+        this.articleTexts = [
+            { title: "title 1", description: "Omschrijving 1" },
+            { title: "title 2", description: "Omschrijving 2" },
+            { title: "title 3", description: "Omschrijving 3" },
+            { title: "title 4", description: "Omschrijving 4" },
+            { title: "title 5", description: "Omschrijving 5" },
+        ];
+        this.fields = { text: "name", value: "id" };
+    }
+    onOkClick() {
+        this.hide();
+    }
+    onPopupClose() {
+        this.hide();
+        this.hideOverview();
+        this.hideEditArtikelText();
+    }
+    hide() {
+        // TODO: throw hide event
+        this.visible = false;
+    }
+    onOverview() {
+        this.overviewSelected = true;
+    }
+    onOkOverviewClick() {
+        this.hideOverview();
+    }
+    hideOverview() {
+        this.overviewSelected = false;
+    }
+    onDetailLinkClick(bo) {
+        this.editArtikelText = true;
+    }
+    hideEditArtikelText() {
+        this.editArtikelText = false;
+    }
+    onOkEditArtikelTextClick() {
+        this.editArtikelText = false;
+    }
+}
+TransactionArticleTextComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-article-text",
+                template: `
+        <co-dialog [visible]="visible" (close)="onPopupClose()">
+          <ng-container header>{{ subHeader }}</ng-container>
+          <ng-container content>
+                <div class="tags-join-content" fxLayout fxLayoutGap="10px">
+                    <div class="column-separator">
+                      <co-input-text placeholder="Titel"></co-input-text>
+<!--                      <ejs-richtexteditor-->
+<!--                        #rte-->
+<!--                        id="Rte"-->
+<!--                      >-->
+<!--                      </ejs-richtexteditor>-->
+                    </div>
+                    <div style="margin-left:5px;">
+                        <div style="margin-top:16px;">
+                            <ejs-dropdownlist
+                                    [dataSource]="collection"
+                                    [fields]="fields"
+                                    placeholder="Standaardteksten"
+                            ></ejs-dropdownlist>
+
+                        </div>
+                        <div style="margin-top:20px;">
+                            <co-input-checkbox
+                                    label="Artikelgebonden tekst"
+                                    name="articleBoundText">
+                            </co-input-checkbox>
+                        </div>
+                        <div style="margin-top:20px;">
+                            <label>Bestemd voor documenten</label>
+                            <ejs-chiplist id="chip-default">
+                                <e-chips>
+                                    <e-chip text="Apple" cssClass="e-primary"></e-chip>
+                                    <e-chip text="Microsoft" cssClass="e-info"></e-chip>
+                                    <e-chip text="Google" cssClass="e-success"></e-chip>
+                                    <e-chip text="Tesla" cssClass="e-warning"></e-chip>
+                                    <e-chip text="Intel" cssClass="e-danger"></e-chip>
+                                </e-chips>
+                            </ejs-chiplist>
+                        </div>
+                    </div>
+                </div>
+              </ng-container>
+              <ng-container footer>
+                <div class="footer" fxLayout fxLayoutAlign="center center" fxLayoutGap="10px" style="margin-top:30px;">
+                    <co-button label="OK" (click)="onOkClick()"></co-button>
+                    <co-button label="CANCEL" (click)="hide()"></co-button>
+                    <co-button label="OVERVIEW" (click)="onOverview()"></co-button>
+<!--                    <co-button label="TEST" (click)="onTest()"></co-button>-->
+                </div>
+              </ng-container>
+        </co-dialog>
+
+        <co-dialog [visible]="overviewSelected" (close)="hideOverview()">
+          <ng-container header>Artikelgebonden teksten {{ subHeader }}</ng-container>
+          <ng-container content>
+                <div class="tags-join-content" fxLayout fxLayoutGap="10px">
+                    <div class="column-separator" style="width:75%">
+<!--                        <grid [data]="articleTexts" detailLink (detailLinkClick)="onDetailLinkClick($event)">-->
+<!--                            <grid-column key="title" header="TITLE" width="100px;"></grid-column>-->
+<!--                            <grid-column key="description" header="DESCRIPTION" width="200px"></grid-column>-->
+<!--                        </grid>-->
+                    </div>
+                    <div style="margin-left:5px;">
+                        <div style="margin-top:20px;">
+
+                            <co-input-checkbox
+                                    label="Artikelgebonden tekst"
+                                    name="articleBoundText"
+                                    value="true"
+                            ></co-input-checkbox>
+                        </div>
+                        <div style="margin-top:20px;">
+                            <label>Bestemd voor documenten</label>
+                            <ejs-chiplist id="chip-default">
+                                <e-chips>
+                                    <e-chip text="Apple" cssClass="e-primary"></e-chip>
+                                    <e-chip text="Microsoft" cssClass="e-info"></e-chip>
+                                    <e-chip text="Google" cssClass="e-success"></e-chip>
+                                    <e-chip text="Tesla" cssClass="e-warning"></e-chip>
+                                    <e-chip text="Intel" cssClass="e-danger"></e-chip>
+                                </e-chips>
+                            </ejs-chiplist>
+                        </div>
+                    </div>
+                </div>
+          </ng-container>
+          <ng-container footer>
+                <div class="footer" fxLayout fxPosition="row" fxLayoutAlign="center center" fxLayoutGap="10px" style="margin-top:30px;">
+                    <co-button label="OK" (click)="onOkOverviewClick()"></co-button>
+                    <co-button label="CANCEL" (click)="hideOverview()"></co-button>
+                </div>
+          </ng-container>
+        </co-dialog>
+
+        <co-dialog [visible]="editArtikelText"  (close)="hideEditArtikelText()">
+          <ng-container header>{{ subHeader }}</ng-container>
+          <ng-container content>
+                <div class="tags-join-content" fxLayout fxLayoutGap="10px">
+                    <div class="column-separator">
+                        <co-input-text placeholder="Titel"></co-input-text>
+<!--                        <co-text-editor-->
+<!--                                label="Artikeltekst"-->
+<!--                        ></co-text-editor>-->
+                    </div>
+                </div>
+          </ng-container>
+          <ng-container footer>
+              <div class="footer" fxLayout fxLayoutAlign="center center" fxLayoutGap="10px" style="margin-top:30px;">
+                  <co-button label="OK" (click)="onOkEditArtikelTextClick()"></co-button>
+                  <co-button label="CANCEL" (click)="hideEditArtikelText()"></co-button>
+              </div>
+          </ng-container>
+        </co-dialog>
+    `,
+                styles: [""]
+            },] }
+];
+TransactionArticleTextComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionArticleTextComponent.propDecorators = {
+    subHeader: [{ type: Input }]
+};
+
+class TransactionManagerComponent extends TransactionBaseComponent {
+    constructor(service, transactionEvents, promptService, _dictionaryService) {
+        super(service);
+        this.service = service;
+        this.transactionEvents = transactionEvents;
+        this.promptService = promptService;
+        this._dictionaryService = _dictionaryService;
+        this.linesChanged = new EventEmitter();
+        this.articleAdded = new EventEmitter();
+        this.columns = [];
+        this._inOutCollection = [];
+        this._showCharacteristic = false;
+        this._subs = [];
+        this._subs.push(this.service.transactionLoaded.subscribe((transactionInfoResponse) => {
+            if (transactionInfoResponse.isSuccess) {
+                this.transaction = transactionInfoResponse;
+            }
+        }));
+    }
+    get amountOfLines() {
+        return NumberUtils.NrOrDefault(this.service.articleAmount, 0);
+    }
+    get showCharacteristicDialog() {
+        return this._showCharacteristic;
+    }
+    set showCharacteristicDialog(value) {
+        this._showCharacteristic = value;
+    }
+    ngOnDestroy() {
+        this._subs.forEach(sub => sub.unsubscribe());
+    }
+    addArticleLine(transactionUuid, sku, amount, lineNr, beforeOrAfter) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const goodId = yield this.service.getGoodIdFromArticleNr(sku);
+            if (goodId) {
+                yield this._loadArticle(goodId);
+                yield this._handleAddArticleLineAt(amount, lineNr, beforeOrAfter);
+            }
+            else {
+                this.promptService.showError(this._dictionaryService.get("ARTICLE_UNKNOWN"));
+            }
+        });
+    }
+    changeLineSequence(fromIndex, toIndex) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let fromLine = this._getTransactionLineInfoByIndex(fromIndex);
+            let toLine = this._getTransactionLineInfoByIndex(toIndex);
+            let aboveLineNr;
+            let belowLineNr;
+            if (fromIndex > toIndex) {
+                aboveLineNr = toLine.lineNr;
+            }
+            else {
+                belowLineNr = toLine.lineNr;
+            }
+            yield this.service.changeLineSequence(fromLine.uuid, aboveLineNr, belowLineNr, false)
+                .then((value) => {
+                this.handleLineOperationStatus(value);
+            }, (error) => this.promptService.showError(error));
+        });
+    }
+    showStockManager(line) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.warehouse.selectedWarehouseNr = line.warehouseNumber;
+            this.warehouse.amount = line.amount;
+            this.warehouse.commissionCode = line.commissionCode;
+            this.warehouse.message = this.currentOperationStatus.pendingReason;
+            this.warehouse.show(line.articleNumber);
+        });
+    }
+    warehouseOkClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.warehouse.commissionCode !== undefined) {
+                this.currentReason.commissionCode = this.warehouse.commissionCode;
+            }
+            if (this.warehouse.amount !== undefined) {
+                this.currentReason.quantity = this.warehouse.amount;
+            }
+            if (this.warehouse.selectedWarehouseNr !== undefined) {
+                this.currentReason.warehouseNr = this.warehouse.selectedWarehouseNr;
+            }
+            if (this.currentReason) {
+                yield this.service.resolvePendingLineReason(this.currentReason, false)
+                    .then((value) => {
+                    this.handleLineOperationStatus(value);
+                });
+            }
+        });
+    }
+    warehouseCancelClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.currentReason) {
+                yield this._cancelArticle(this.currentReason.lineUuid);
+            }
+        });
+    }
+    handleCharacteristicAnswerOkClick(answer) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.currentReason = new ResolvePendingLineReasonRequest(this.currentOperationStatus.uuid, this.currentOperationStatus.pendingReason, this.currentOperationStatus.pendingReasonType);
+            this.currentReason.textualUserInput = answer;
+            yield this.service.resolvePendingLineReason(this.currentReason, false)
+                .then((value) => {
+                this.handleLineOperationStatus(value);
+            });
+        });
+    }
+    _handleAddArticle(amount = 1) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.service.addTransactionLine(TransactionLineType.ArticleLine, this.newArticleNr, amount, this.newArticle.standardWareHouse, this.newArticle.commissionCode, false, 0, 0, false)
+                .then((value) => {
+                this.handleLineOperationStatus(value);
+            }, (error) => this.promptService.showError(error));
+        });
+    }
+    _handleAddArticleLineAt(amount, lineNr, beforeOrAfter) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.service.addArticleToTransaction(this.transactionInfo.uuid, this.newArticleNr, amount, this.newArticle.standardWareHouse, this.newArticle.commissionCode, false, beforeOrAfter === PositionGridRow.Before ? lineNr : undefined, beforeOrAfter === PositionGridRow.After ? lineNr : undefined)
+                .then((value) => {
+                this.lineOperationStatuses = value.lineOperationStatuses;
+                this.handleLineOperationStatus(value);
+            }, (error) => this.promptService.showError(error));
+        });
+    }
+    _getWareHouseNoFromArticle() {
+        if (this.newArticle !== undefined && this.newArticle.stockLocations !== undefined && this.newArticle.stockLocations.length) {
+            return this.newArticle.stockLocations[0].warehouseNr;
+        }
+        return 0;
+    }
+    isLineOperationStatus(lineOperationStatuses) {
+        this.currentOperationStatus = this.service.pendingLineOperationStatus(lineOperationStatuses);
+        if (this.currentOperationStatus !== undefined) {
+            return true;
+        }
+        return false;
+    }
+    _confirmAction() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.currentReason = new ResolvePendingLineReasonRequest(this.currentOperationStatus.uuid, this.currentOperationStatus.pendingReason, this.currentOperationStatus.pendingReasonType);
+            const pendingReasonText = yield this._getPendingReasonText(this.currentOperationStatus.pendingReason);
+            this.currentReason.confirmation = yield this.promptService.showYesNo(pendingReasonText, " ");
+            yield this.service.resolvePendingLineReason(this.currentReason, false)
+                .then((value) => {
+                this.handleLineOperationStatus(value);
+            });
+        });
+    }
+    _showInformation() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.currentReason = new ResolvePendingLineReasonRequest(this.currentOperationStatus.uuid, this.currentOperationStatus.pendingReason, this.currentOperationStatus.pendingReasonType);
+            const pendingReasonText = yield this._getPendingReasonText(this.currentOperationStatus.pendingReason);
+            yield this.promptService.showOkModal(pendingReasonText, " ");
+            yield this.service.resolvePendingLineReason(this.currentReason, false)
+                .then((value) => {
+                this.handleLineOperationStatus(value);
+            });
+        });
+    }
+    _getPendingReasonText(pendingReason) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (pendingReason === "ARTICLE_IS_DISCONTINUED_DO_YOU_WANT_TO_CONTINUE_PLEASE_CONFIRM") {
+                return this._dictionaryService.get("ARTICLE_IN_OUT_COLLECTION").replace("|~", yield this.getInOutCollectionOfArticle());
+            }
+            return this._dictionaryService.get(pendingReason);
+        });
+    }
+    getInOutCollectionOfArticle() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this._inOutCollection.length) {
+                this._inOutCollection = yield this.service.getInOutCollection("NL");
+            }
+            const domainValue = this._inOutCollection.find(element => element.code === this.newArticle.inOutCollection);
+            if (domainValue) {
+                return domainValue.description;
+            }
+            return "";
+        });
+    }
+    handleLineOperationStatus(lineOperationResponse) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isLineOperationStatus(lineOperationResponse.lineOperationStatuses)) {
+                this.transaction = lineOperationResponse;
+                this.articleAdded.emit(this.transaction);
+                yield this._handlePendingLine(this.currentOperationStatus.uuid).then();
+            }
+            else {
+                yield this._saveTransaction();
+            }
+        });
+    }
+    _handlePendingLine(lineUuid) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.currentReason = new ResolvePendingLineReasonRequest(this.currentOperationStatus.uuid, this.currentOperationStatus.pendingReason, this.currentOperationStatus.pendingReasonType);
+            this.currentPendingLine = this.transactionLines.find(l => l.uuid === lineUuid);
+            switch (this.currentOperationStatus.pendingReasonType) {
+                case PendingReasonType.ABORTED:
+                case PendingReasonType.CANCELLED:
+                    yield this._cancelArticle(this.currentPendingLine.uuid);
+                    break;
+                case PendingReasonType.CONFIRMATION_NEEDED:
+                    yield this._confirmAction();
+                    break;
+                case PendingReasonType.INVALID_LOGISTICS:
+                    yield this.showStockManager(this.currentPendingLine);
+                    break;
+                case PendingReasonType.NON_CRITICAL_DISCONTINUATION:
+                    yield this._showInformation();
+                    break;
+                case PendingReasonType.CHARACTERISTICS_ANSWER_NEEDED:
+                    this.CharacteristicsAnswerNeeded();
+                    break;
+                case PendingReasonType.NONE:
+                default:
+                    this.currentReason = undefined;
+                    this.currentPendingLine = undefined;
+                    break;
+            }
+        });
+    }
+    _saveTransaction() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.transactionInfo) {
+                const success = yield this.service.saveTransactionByUuid(this.transactionInfo.uuid);
+                if (!success) {
+                    this.promptService.showError("Transaction could not be saved!");
+                }
+            }
+        });
+    }
+    _loadArticle(goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.newArticle = yield this.service.getArticleFullObject(goodId);
+            this.newArticleNr = this.newArticle.articleNr;
+        });
+    }
+    addEmailAddressToTransaction(emailAddress) {
+        this.service.emailAddress = emailAddress;
+    }
+    CharacteristicsAnswerNeeded() {
+        this.characteristicAnswer.question = this.currentOperationStatus.characteristic.question;
+        this.characteristicAnswer.title = this.newArticle.description;
+        this.characteristicAnswer.value = this.currentOperationStatus.characteristic.value;
+        this.characteristicAnswer.characteristics = this.currentOperationStatus.characteristic.transactionLineCharacteristicChoices;
+        setTimeout(() => {
+            this.characteristicAnswer.open();
+            // eslint-disable-next-line no-magic-numbers
+        }, 1000);
+    }
+    _getTransactionLineInfoByIndex(index) {
+        if (index >= 0 && index < this.transactionLines.length) {
+            return this.service.currentLines[index];
+        }
+    }
+    _cancelArticle(uuid) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.service.cancelAddTransactionLine(uuid, false)
+                .then((response) => {
+                this.transaction = response;
+                this.articleAdded.emit(response);
+            });
+        });
+    }
+}
+TransactionManagerComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-manager",
+                template: `
+    <warehouse #warehouse
+        (okClick)="warehouseOkClick()"
+        (cancelClick)="warehouseCancelClick()"
+    ></warehouse>
+    <characteristic-answer
+      #characteristicAnswer
+      (okClick)="handleCharacteristicAnswerOkClick($event)"
+    ></characteristic-answer>
+  `,
+                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"]
+            },] }
+];
+TransactionManagerComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: TransactionEventService },
+    { type: PromptService },
+    { type: DictionaryService }
+];
+TransactionManagerComponent.propDecorators = {
+    warehouse: [{ type: ViewChild, args: ["warehouse",] }],
+    characteristicAnswer: [{ type: ViewChild, args: ["characteristicAnswer",] }],
+    linesChanged: [{ type: Output }],
+    articleAdded: [{ type: Output }]
+};
+
+class ServiceOrderComponent extends TransactionBaseComponent {
+    constructor(service, transactionEvents, iconCacheService, _promptService) {
+        super(service);
+        this.service = service;
+        this.transactionEvents = transactionEvents;
+        this.iconCacheService = iconCacheService;
+        this._promptService = _promptService;
+        this.iconThickLines = CoreComponentsIcon.ThickLines;
+        this.iconThinLines = CoreComponentsIcon.ThinLines;
+        this.iconOrder = CoreComponentsIcon.Order;
+        this.viewModes = ContentViewMode;
+        this.canPlanDelivery = false;
+        this.showTotals = true;
+        this.contextMenuItems = [];
+        this.isRouteOptimizationConfigured = false;
+        this.activeViewMode = ContentViewMode.List;
+        this.floatButtonSelected = false;
+        this.newArticleNr = "";
+        this._subs = [];
+    }
+    get inListView() {
+        return this.activeViewMode === ContentViewMode.List;
+    }
+    get inGridView() {
+        return this.activeViewMode === ContentViewMode.Grid;
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._subs.push(this.service.transactionLoaded.subscribe((transactionInfoResponse) => {
+                if (transactionInfoResponse.isSuccess) {
+                    this.transaction = transactionInfoResponse;
+                    if (this.transaction && this.transaction.transactionInfo) {
+                        this.customerId = Number(this.transaction.transactionInfo.relation.relationNr);
+                        this.relationId = this.transaction.transactionInfo.relation.relationId;
+                    }
+                }
+            }), this.transactionEvents.rightSidebarClose.subscribe(() => {
+                this.moveFloatingButtonToRight();
+            }), this.transactionEvents.transactionLineClicked.subscribe((transactionLine) => {
+                this._selectedTransLine = transactionLine;
+                this.moveFloatingButtonToLeft();
+            }), this.transactionEvents.scrollContent.subscribe((event) => {
+                this.hideOrderTotals(event);
+            }));
+        });
+    }
+    ngAfterViewInit() {
+        this._subs.push(this._transactionManager.articleAdded.subscribe((transactionInfoResponse) => {
+            this.transaction = transactionInfoResponse;
+        }));
+    }
+    ngOnDestroy() {
+        this._subs.forEach(sub => sub.unsubscribe());
+    }
+    animationFn() {
+        return trigger("showPopup", [
+            state("void", style({ transform: "translate3d(0, 0, 0)" })),
+            state("*", style({ transform: "translate3d(100%, 0, 0)" })),
+            transition("void <=> *", [
+                animate("200ms ease-in-out")
+            ])
+        ]);
+    }
+    trackByFn(index, line) {
+        return line.lineNr;
+    }
+    handleRowsSelected(rows) {
+        this._selectedTransLine = rows.find(x => x !== undefined);
+    }
+    handlePlanningRequest(event) {
+        // TODO: handlePlanningRequest... from new Planning package
+    }
+    moveFloatingButtonToLeft() {
+        if (this.floatButtonRightPosition === ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITHOUT_SIDEBAR) {
+            this.floatButtonRightPosition = ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITH_SIDEBAR;
+        }
+    }
+    moveFloatingButtonToRight() {
+        if (this.floatButtonRightPosition === ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITH_SIDEBAR) {
+            this.floatButtonRightPosition = ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITHOUT_SIDEBAR;
+        }
+    }
+    onOkClick() {
+        this.hide();
+    }
+    hide() {
+        this.floatButtonSelected = false;
+    }
+    floatButtonClick() {
+        this.floatButtonSelected = true;
+        this._transactionArticleTextComponent.visible = this.floatButtonSelected;
+    }
+    get subHeader() {
+        if (this._selectedTransLine) {
+            return this._selectedTransLine.goodDescription;
+        }
+        return "";
+    }
+    hideOrderTotals(event) {
+        this.showTotals = false;
+    }
+    addArticleLine(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (event.code === "Enter") {
+                if (this.newArticleNr && this.newArticleNr !== "") {
+                    yield this._transactionManager.addArticleLine(this.transactionInfo.uuid, this.newArticleNr, 1, 0, PositionGridRow.After);
+                }
+            }
+        });
+    }
+}
+ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITHOUT_SIDEBAR = 50;
+ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITH_SIDEBAR = 350;
+ServiceOrderComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "service-order",
+                template: `
+      <transaction-manager></transaction-manager>
+      <div id="transaction-general-tab" style="height:100%;">
+        <transaction-header-block
+          [relationId]="relationId"
+          [transaction]="transaction"
+          [canPlanDelivery]="canPlanDelivery"
+          (planningRequestButtonClick)="handlePlanningRequest($event)"
+        ></transaction-header-block>
+        <div *ngIf="!isService">
+          <div style="display: flex; flex-direction: row; place-content: center">
+            <co-input-text style="width: 200px;"
+              [(model)]="newArticleNr"
+              [placeholder]="'WHERE_ARE_YOU_LOOKING_FOR' | localize"
+              [showClearButton]="true"
+              (keypress)="addArticleLine($event)"
+            ></co-input-text>
+          </div>
+          <div class="transaction-view" fxLayout="row" fxLayoutGap="1px" fxLayoutAlign="flex-end">
+            <div class="view-mode-buttons">
+              <co-button [iconData]="iconCacheService.getIcon(iconThickLines)"
+                         [title]="'LIST_VIEW' | localize"
+                         (click)="this.activeViewMode = viewModes.List"
+                         class="triangle white"
+                         iconClass="medium light"></co-button>
+              <co-button [iconData]="iconCacheService.getIcon(iconThinLines)"
+                         [title]="'GRID_VIEW' | localize"
+                         (click)="this.activeViewMode = viewModes.Grid"
+                         class="triangle white"
+                         iconClass="medium light"></co-button>
+            </div>
+          </div>
+          <div *ngIf="this.activeViewMode === viewModes.List">
+            <transaction-order-line-view *ngFor="let line of transactionLines; trackBy:trackByFn;"
+                                         [line]="line"
+            ></transaction-order-line-view>
+          </div>
+          <div *ngIf="this.activeViewMode === viewModes.Grid">
+            <transaction-order-lines [transaction]="transaction"></transaction-order-lines>
+          </div>
+          <div class="floating-icon-wrapper" [style.right.px]="floatButtonRightPosition">
+          <icon [icon]="iconOrder"
+                class="light"
+                (click)="floatButtonClick()" id="floatingIcon"
+                [style.right.px]="floatButtonRightPosition"></icon>
+          </div>
+        </div>
+        <transaction-order-totals *ngIf="!isService"
+                                  [ngClass]="showTotals ? 'transaction-totals-show' : 'transaction-totals-hide'"></transaction-order-totals>
+      </div>
+
+      <transaction-article-text></transaction-article-text>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center,:host :host{display:flex}.flex-center{flex-direction:row}:host :host{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.transaction-view .view-mode-buttons{margin-left:11px}:host :host{width:100%}:host :host{overflow:hidden}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host :host{padding-bottom:60px}.page-wrapper :host{padding:20px;margin-bottom:60px}:host transaction-order-totals{display:flex;flex-direction:column;align-items:flex-end}:host .transaction-totals-show{padding:20px}:host .transaction-totals-hide{position:relative;bottom:0;right:0}::ng-deep #transaction_planning_agenda{top:160px!important;width:calc(100vw - 80px)!important}::ng-deep #transaction_planning_agenda .popup-card-title{padding:10px 20px;background:#74B77F;color:#fff}::ng-deep #transaction_planning_agenda .popup-card-title .header-wrapper{align-items:center!important}::ng-deep #transaction_planning_agenda .popup-card-title .separator{border-color:#fff!important}::ng-deep #transaction_planning_agenda .popup-card-title .header{font-size:15px;font-weight:normal}::ng-deep #transaction_planning_agenda .popup-card-title .sub-header{font-size:18px;color:#fff!important;font-weight:bold!important}::ng-deep #transaction_planning_agenda .popup-card-title button-select icon [fill]{fill:#fff}::ng-deep #transaction_planning_agenda .popup-card-content{overflow:hidden}@media only screen and (max-width: 599px){::ng-deep #transaction_planning_agenda{width:100vw!important}::ng-deep #transaction_planning_agenda .popup-card-content{padding:0}}.column-separator{padding-right:25px;border-right:1px solid #0000001c}.floating-icon-wrapper{position:fixed;bottom:50px;right:50px;display:flex;flex-shrink:0;align-items:center;justify-content:center;background:#475060;height:50px;width:50px;opacity:.5;transition:opacity .4s ease-in-out;border-radius:50%;overflow:hidden;box-shadow:0 0 6px #0009;-webkit-box-shadow:0px 0px 6px 0px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 6px 0px rgba(0,0,0,.6);cursor:pointer}.floating-icon-wrapper:hover{opacity:1;transition:opacity .4s ease-in-out}.floating-icon-wrapper ::ng-deep icon{height:44px!important;width:44px!important;color:#fff!important;flex-shrink:0}.transaction-wrapper{padding:0 20px}.view-mode-buttons co-button{padding:0}.transaction-view{display:flex;margin-top:10px;justify-content:stretch}.transaction-view .view-mode-buttons{display:flex;flex-direction:row}.transaction-view .view-mode-buttons button-select ::ng-deep button-colijn{border-radius:0}.transaction-view .view-mode-buttons button-select:first-child{margin-right:5px}.transaction-view .view-mode-buttons button-select:first-child ::ng-deep button-colijn{border-radius:3px}.transaction-view .view-mode-buttons button-select:nth-child(2) ::ng-deep button-colijn{border-top-left-radius:3px;border-bottom-left-radius:3px}.transaction-view .view-mode-buttons button-select:last-child ::ng-deep button-colijn{border-top-right-radius:3px;border-bottom-right-radius:3px}\n"]
+            },] }
+];
+ServiceOrderComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: TransactionEventService },
+    { type: IconCacheService },
+    { type: PromptService }
+];
+ServiceOrderComponent.propDecorators = {
+    _transactionArticleTextComponent: [{ type: ViewChild, args: [TransactionArticleTextComponent,] }],
+    _transactionManager: [{ type: ViewChild, args: [TransactionManagerComponent,] }]
+};
+
+class TransactionOrderTotalsComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+    }
+}
+TransactionOrderTotalsComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-order-totals",
+                template: `
+        <div class="totals-wrapper">
+            <div class="totals-item">
+                <div class="totals-item-description" [textContent]="'SUBTOTAL' | localize"></div>
+                <div class="totals-item-value" [textContent]="transactionTotal?.grossAmount | coCurrency | coCurrency"></div>
+            </div>
+            <div class="totals-item">
+                <div class="totals-item-description" [textContent]="'VAT_AMOUNT' | localize"></div>
+                <div class="totals-item-value" [textContent]="transactionTotal?.surchargeAmount | coCurrency"></div>
+            </div>
+            <div class="totals-item total">
+                <div class="totals-item-description" [textContent]="'TRANSACTION_SUM_I' | localize"></div>
+                <div class="totals-item-value" [textContent]="transactionTotal?.netAmount | coCurrency"></div>
+            </div>
+        </div>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host .totals-wrapper{width:310px;font-size:13px}:host .totals-item{display:flex;flex-direction:row;height:25px;align-items:center}:host .totals-item>div{text-align:end;width:50%}:host .totals-item.total{font-weight:bold;height:30px;border-top:1px solid #DCE4EA}\n"]
+            },] }
+];
+TransactionOrderTotalsComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+
+class TransactionOrderLineViewComponent {
+    constructor(_service, _eventService) {
+        this._service = _service;
+        this._eventService = _eventService;
+        this.stock = StockStatus.Low;
+    }
+    ngOnInit() {
+        this._loadArticleImage();
+    }
+    _loadArticleImage() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.line) {
+                this.image = this.line ? yield this._service.retrieveLineImage(this.line) : undefined;
+            }
+        });
+    }
+    transactionLineClick(line) {
+        this._eventService.transactionLineClicked.next(this.line);
+    }
+}
+TransactionOrderLineViewComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-order-line-view",
+                template: `
+            <div class="transaction-order-line-r" fxFlex (click)="transactionLineClick(line)">
+                <div fxLayout="row" class="full-width">
+                    <div fxLayout="column" class="transaction-order-line-description" fxLayoutGap="20px">
+                        <div fxLayout="row" fxLayoutGap="10px">
+                            <span [textContent]="line.goodDescription" class="cart-line-description-main"></span>
+                            <span *ngIf="line.goodDescription && line.articleNumber">|</span>
+                            <span [textContent]="line.articleNumber" class="cart-line-description-artnr"></span>
+                        </div>
+                        <div>
+                            <span [innerHTML]="line.configurationReadable" class="cart-line-description-detail"></span>
+                        </div>
+                    </div>
+                    <div fxLayout="column" class="transaction-order-line-image">
+                        <image-display [model]="image"></image-display>
+                    </div>
+                </div>
+                <div fxLayout="row" class="transaction-order-line-right">
+                    <div fxLayout="column" class="transaction-order-line-stock">
+                        <span [textContent]="'STOCK' | localize" class="small-font"></span>
+                        <stock-status-indicator [model]="stock"></stock-status-indicator>
+                        <span [textContent]="'DELIVERY_TIME_PERIOD' | localize" class="small-font"></span>
+                        <span [textContent]="line.deliveryDate | deliveryTime"></span>
+                    </div>
+                    <div class="transaction-order-line-amount">
+                      <co-input-number-picker
+                        class="horizontal"
+                        [(model)]="line.amount" [min]="0" [buttonShowMode]="'always'"
+                        [readonly]="true"></co-input-number-picker>
+                    </div>
+                    <div class="transaction-order-line-totals">
+                        <span [textContent]="line.netLineTotal | coCurrency: true"></span>
+                    </div>
+                </div>
+            </div>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.transaction-order-line-r .transaction-order-line-description .cart-line-description-artnr{font-size:10px}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount,.transaction-order-line-r .transaction-order-line-image,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-stock,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{margin-top:20px}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount,.transaction-order-line-r .transaction-order-line-image,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-stock,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{margin-bottom:20px}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{margin-left:20px}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount{margin-right:20px}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{display:block;padding:20px}:host ::ng-deep collapseable{width:100%!important}.horizontal{display:flex;flex-direction:row}.service-request-button-wrapper{display:flex;justify-content:center;margin-top:20px}.transaction-order-line-r{display:flex;justify-content:stretch;flex-direction:row}@media (max-width: 800px){.transaction-order-line-r{flex-direction:column}}.transaction-order-line-r .transaction-order-line-image{display:flex;flex:1 0 auto!important;flex-direction:column;align-items:center;justify-content:center;padding-right:10px}.transaction-order-line-r .transaction-order-line-image image-display{width:6em;height:6em}.transaction-order-line-r .transaction-order-line-image ::ng-deep no-image-display{display:none}.transaction-order-line-r .transaction-order-line-description{display:flex;flex-direction:column;width:auto;max-width:355px;margin-left:10px}.transaction-order-line-r .transaction-order-line-description .cart-line-description-main{font-weight:bold}.transaction-order-line-r .transaction-order-line-right{justify-content:flex-end;align-items:center}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-stock{width:10em}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount{width:15em}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{display:flex;justify-content:flex-end;min-width:100px;font-weight:bold}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals span{text-align:right}\n"]
+            },] }
+];
+TransactionOrderLineViewComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: TransactionEventService }
+];
+TransactionOrderLineViewComponent.propDecorators = {
+    line: [{ type: Input }]
+};
+
+class TransactionOrderLinesComponent extends TransactionBaseComponent {
+    constructor(service, _eventService, _dictionaryService) {
+        super(service);
+        this.service = service;
+        this._eventService = _eventService;
+        this._dictionaryService = _dictionaryService;
+        this.createServiceClick = new EventEmitter();
+        this.nothingSelected = true;
+        this.columns = [];
+        this.columns.push({ field: "articleNumber", headerText: this._dictionaryService.get("ARTICLE_NR"), allowFiltering: false }, { field: "goodDescription", headerText: this._dictionaryService.get("DESCRIPTION") }, { field: "detailsAsString", headerText: this._dictionaryService.get("DETAILS") }, { field: "price", headerText: this._dictionaryService.get("PRICE") }, { field: "amount", headerText: this._dictionaryService.get("NUMBER") }, { field: "lineTotal", headerText: this._dictionaryService.get("SUBTOTAL") }, { field: "logisticState", headerText: this._dictionaryService.get("STATE") }, { field: "expectedDeliveryDate", headerText: this._dictionaryService.get("EXPECTED_DELIVERY_DATE") });
+    }
+    get pagingEnabled() {
+        if (this.transactionLines) {
+            return this.transactionLines.length >= TransactionOrderLinesComponent.MAX_TRANSACTION_LINES;
+        }
+        return false;
+    }
+    set selectedTransLine(value) {
+        this._selectedTransLine = value;
+        this.nothingSelected = this._selectedTransLine === null;
+    }
+    get selectedTransLine() {
+        return this._selectedTransLine;
+    }
+    onRowClick(row) {
+        this.selectedTransLine = row;
+        this._eventService.transactionLineClicked.next(this.selectedTransLine);
+    }
+    onRowDeselect(event) {
+        this.selectedTransLine = null;
+    }
+    // TODO: navragen wat de bedoeling is, zie originele source iOneJS
+    newServiceRequestClick() {
+        if (this.nothingSelected) {
+            return;
+        }
+        this.createServiceClick.emit(this._selectedTransLine);
+    }
+}
+TransactionOrderLinesComponent.MAX_TRANSACTION_LINES = 20;
+TransactionOrderLinesComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-order-lines",
+                template: `
+        <co-grid #transactionGrid
+                 [data]="transactionLines"
+                 [columns]="columns"
+                 [pagingEnabled]="pagingEnabled"
+                 [maxNumberOfRows]="'20'"
+                 (rowsSelected)="onRowClick($event)"
+        ></co-grid>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.transaction-order-line-r .transaction-order-line-description .cart-line-description-artnr{font-size:10px}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount,.transaction-order-line-r .transaction-order-line-image,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-stock,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{margin-top:20px}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount,.transaction-order-line-r .transaction-order-line-image,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-stock,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{margin-bottom:20px}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{margin-left:20px}.transaction-order-line-r .transaction-order-line-description,.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount{margin-right:20px}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{display:block;padding:20px}:host ::ng-deep collapseable{width:100%!important}.service-request-button-wrapper{display:flex;justify-content:center;margin-top:20px}.transaction-order-line-r{display:flex;justify-content:stretch;flex-direction:row}@media (max-width: 800px){.transaction-order-line-r{flex-direction:column}}.transaction-order-line-r .transaction-order-line-image{display:flex;flex:1 0 auto!important;flex-direction:column;align-items:center;justify-content:center;padding-right:10px}.transaction-order-line-r .transaction-order-line-image image-display{width:6em;height:6em}.transaction-order-line-r .transaction-order-line-image ::ng-deep no-image-display{display:none}.transaction-order-line-r .transaction-order-line-description{display:flex;flex-direction:column;width:auto;max-width:355px;margin-left:10px}.transaction-order-line-r .transaction-order-line-description .cart-line-description-main{font-weight:bold}.transaction-order-line-r .transaction-order-line-right{justify-content:flex-end;align-items:center}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-stock{width:10em}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-amount{width:15em}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals{display:flex;justify-content:flex-end;min-width:100px;font-weight:bold}.transaction-order-line-r .transaction-order-line-right .transaction-order-line-totals span{text-align:right}\n"]
+            },] }
+];
+TransactionOrderLinesComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: TransactionEventService },
+    { type: DictionaryService }
+];
+TransactionOrderLinesComponent.propDecorators = {
+    transactionGrid: [{ type: ViewChild, args: ["transactionGrid",] }],
+    createServiceClick: [{ type: Output }]
+};
+
+class TransactionRelationAddressComponent {
+    constructor(_dictionary, _connector) {
+        this._dictionary = _dictionary;
+        this._connector = _connector;
+        this.countries = [];
+        this.fields = { text: "description", value: "code" };
+        this.postalCodeCheckErrorMessage = "";
+        this._prevPostalCodeForCheck = "";
+    }
+    set address(address) {
+        this._address = address;
+    }
+    get address() {
+        if (this._address === undefined) {
+            this._address = new Address();
+        }
+        return this._address;
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.countries = yield this._connector.getCountries();
+        });
+    }
+    checkForPostalCodeCheckError() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.address.postalCode || isNill$1(this.address.houseNo)) {
+                this.postalCodeCheckErrorMessage = "";
+                return;
+            }
+            if (this._prevPostalCodeForCheck !== this.address.postalCode || this._prevHouseNoForCheck !== this.address.houseNo) {
+                this._prevPostalCodeForCheck = this.address.postalCode;
+                this._prevHouseNoForCheck = this.address.houseNo;
+                const postalCodeResponse = yield this._connector.getPostalCodeRetrieval((this.address.postalCode ? this.address.postalCode : ""), StringUtils.ParseString(this.address.houseNo));
+                if (postalCodeResponse && postalCodeResponse.isBadAddress) {
+                    this.postalCodeCheckErrorMessage = this._dictionary.get("UNKNOWN_ADDRESS_CHECK_IT");
+                }
+                else {
+                    this.postalCodeCheckErrorMessage = "";
+                    this.address.streetName = postalCodeResponse.street;
+                    this.address.city = postalCodeResponse.city;
+                }
+            }
+        });
+    }
+    changeHouseNo() {
+        this.address.houseNo = Number(this.address.houseNo);
+    }
+}
+TransactionRelationAddressComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-relation-address",
+                template: `
+        <label [textContent]="label | localize"
+               class="transaction-relation-label-h3"
+        ></label>
+        <div class="default-flex-row">
+            <div class="default-flex-column">
+              <co-input-text [(model)]="address.postalCode"
+                             [placeholder]="'POSTAL_CODE' | localize"
+                             (blur)="checkForPostalCodeCheckError()"
+                             required
+              ></co-input-text>
+            </div>
+            <div class="default-flex-column">
+              <co-input-text [(model)]="address.houseNo"
+                             [placeholder]="'HOUSE_NO' | localize"
+                             (blur)="checkForPostalCodeCheckError()"
+                             (modelChange) = "changeHouseNo()"
+                             required
+              ></co-input-text>
+            </div>
+            <div class="default-flex-column">
+              <co-input-text [(model)]="address.houseNoAddition"
+                             [placeholder]="'HOUSE_NO_ADDITION' | localize"
+              ></co-input-text>
+            </div>
+        </div>
+        <div>
+            <div class="default-flex-row">
+              <div class="default-flex-column">
+                <co-input-text [(model)]="address.streetName" [placeholder]="'STREET' | localize" required></co-input-text>
+              </div>
+              <div class="default-flex-column">
+                <co-input-text [(model)]="address.city" [placeholder]="'CITY' | localize" required></co-input-text>
+              </div>
+              <div class="default-flex-column">
+                <co-input-combo-box [(model)]="address.countryId"
+                                    [source]="countries"
+                                    [fields]="fields"
+                                    [placeholder]="'COUNTRY'| localize"
+                                    [required]="true"
+                ></co-input-combo-box>
+              </div>
+            </div>
+        </div>
+    `,
+                styles: [".button-wrapper{margin-top:10px;justify-content:center}co-input-radio-button{margin-left:16px}.transaction-relation-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.transaction-relation-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}\n"]
+            },] }
+];
+TransactionRelationAddressComponent.ctorParameters = () => [
+    { type: DictionaryService },
+    { type: IOneConnectorAdapterService }
+];
+TransactionRelationAddressComponent.propDecorators = {
+    label: [{ type: Input }],
+    address: [{ type: Input }]
+};
+
+class TransactionSidebarRightComponent extends TransactionBaseComponent {
+    constructor(service, iconCacheService, _eventService, changeDetector) {
+        super(service);
+        this.service = service;
+        this.iconCacheService = iconCacheService;
+        this._eventService = _eventService;
+        this.changeDetector = changeDetector;
+        this.iconDetailView = CoreComponentsIcon.DetailView;
+        this.iconArrowPointRight = CoreComponentsIcon.ArrowPointRight;
+        this.iconStock = CoreComponentsIcon.Stock;
+        this.iconDocuments = CoreComponentsIcon.Documents;
+        this.test = "";
+        this.defaultSidebar = new Sidebar({
+            width: "320px",
+            type: "Auto",
+            isOpen: false,
+            position: "Right",
+            target: "#app-module-sidebar-right"
+        });
+        this._subscriptions = [];
+        this._subscriptions.push(this._eventService.transactionLineClicked.subscribe((transactionLine) => {
+            this.transactionLine = transactionLine;
+            this.defaultSidebar.show();
+        }));
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.defaultSidebar.appendTo("#default-sidebar");
+            this.sidebarCloseClick();
+            this.changeDetector.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this._subscriptions.forEach(sub => sub.unsubscribe());
+    }
+    sidebarCloseClick() {
+        this.defaultSidebar.hide();
+        this._eventService.rightSidebarClose.next();
+    }
+}
+TransactionSidebarRightComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-sidebar-right",
+                template: `
+        <div id="default-sidebar">
+            <div>
+                <icon [icon]="iconArrowPointRight" (click)="sidebarCloseClick()"></icon>
+                <label [textContent]="transactionLine?.goodDescription"></label>
+            </div>
+            <div>
+                <ejs-tab id="element2">
+                    <e-tabitems>
+                        <e-tabitem>
+                            <ng-template #headerText>
+                                <icon [icon]="iconDetailView" title="Regeldetails"></icon>
+                            </ng-template>
+                            <ng-template #content>
+                                <transaction-line-accordion [transactionLine]="transactionLine"></transaction-line-accordion>
+                            </ng-template>
+                        </e-tabitem>
+                        <e-tabitem>
+                            <ng-template #headerText>
+                                <icon [icon]="iconStock" title="Voorraad"></icon>
+                            </ng-template>
+                            <ng-template #content>
+                                <div style="margin: 10px;">
+                                    <div fxLayout="row" fxLayoutGap="10px">
+                                        <co-input-text placeholder="In voorraad"></co-input-text>
+                                        <co-input-text placeholder="In order voorraad"></co-input-text>
+                                    </div>
+
+                                    <div fxLayout="row" fxLayoutGap="10px">
+                                        <co-input-text placeholder="In order commissie"></co-input-text>
+                                        <co-input-text placeholder="Beschikbaar"></co-input-text>
+                                    </div>
+
+                                    <div fxLayout="row" fxLayoutGap="10px">
+                                        <co-input-text placeholder="In bestelling"></co-input-text>
+                                        <co-input-text placeholder="Later beschikbaar"></co-input-text>
+                                    </div>
+
+                                    <div fxLayout="row" fxLayoutGap="10px">
+                                        <co-input-text placeholder="Toegewezen" [model]="transactionLine?.amount"></co-input-text>
+                                        <co-input-text placeholder="Vrije voorraad"></co-input-text>
+                                    </div>
+                                </div>
+                            </ng-template>
+                        </e-tabitem>
+                        <e-tabitem>
+                            <ng-template #headerText>
+                                <icon [icon]="iconDocuments" title="Documenten en notities"></icon>
+                            </ng-template>
+                            <ng-template #content>
+                                <div>
+                                    Documenten en notities
+                                </div>
+                            </ng-template>
+                        </e-tabitem>
+                    </e-tabitems>
+                </ejs-tab>
+            </div>
+        </div>
+    `,
+                styles: [":host{display:block;width:100%}.e-accordion{border:none}.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon .e-icons{color:#add8e6}.e-tab .e-toolbar-items{display:flex;justify-content:center}\n"]
+            },] }
+];
+TransactionSidebarRightComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: IconCacheService },
+    { type: TransactionEventService },
+    { type: ChangeDetectorRef }
+];
+
+class TransactionLineAccordionComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.transactionLine = new TransactionLineInfo;
+        this.accordion = new Accordion({});
+        this._subscriptions = [];
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.accordion.appendTo("#accordion_html_markup");
+            this.changeDetector.detectChanges();
+        });
+    }
+}
+TransactionLineAccordionComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-line-accordion",
+                template: `
+    <div id='container'>
+      <div id='accordion_html_markup'>
+        <div>
+          <div>Prijsdetails</div>
+          <div>
+            <div style="margin-left:10px;">
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Aantal" [model]="transactionLine?.amount"></co-input-text>
+                <co-input-text placeholder="Verkoopprijs" [model]="transactionLine?.price"></co-input-text>
+              </div>
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Adviesprijs"></co-input-text>
+                <co-input-text placeholder="Totaal korting"></co-input-text>
+              </div>
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Koritngspercentage"></co-input-text>
+                <co-input-text placeholder="Kortingsbedrag" [model]="transactionLine?.discountAmount"></co-input-text>
+              </div>
+
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Speciale korting"></co-input-text>
+                <co-input-text placeholder="Transactiekorting"></co-input-text>
+              </div>
+
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Business rule korting"></co-input-text>
+                <co-input-text placeholder="Kwantumkorting"></co-input-text>
+              </div>
+
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Toeslag"></co-input-text>
+                <co-input-text placeholder="BTW"></co-input-text>
+              </div>
+
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Prijslijst"></co-input-text>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div>Logistiek</div>
+          <div>
+            <div style="margin-left:10px;">
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Commissiecode"></co-input-text>
+                <co-input-text placeholder="Levermethode"></co-input-text>
+              </div>
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Montagetijd"></co-input-text>
+                <co-input-text placeholder="Bewerkingstijd"></co-input-text>
+              </div>
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Leverancier"></co-input-text>
+                <co-input-text placeholder="Artikelnummer leverancier"></co-input-text>
+              </div>
+
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="In/uit collectie"></co-input-text>
+                <co-input-text placeholder="Dropshipment"></co-input-text>
+              </div>
+
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Leverdatum"></co-input-text>
+                <co-input-text placeholder="Referentie"></co-input-text>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div>
+          <div id="header">Opmaak</div>
+          <div id="opmaak">
+            <div style="margin-left:10px;">
+              <div fxLayout="row" fxLayoutGap="10px">
+                <co-input-text placeholder="Orderregelset"></co-input-text>
+                <co-input-text placeholder="Hoofdstuk"></co-input-text>
+              </div>
+              <div>
+                <co-input-text placeholder="Laatste wijziging Door"></co-input-text>
+              </div>
+              <div>
+                <co-input-text placeholder="Zichtbaar op documenten"></co-input-text>
+              </div>
+            </div>
+          </div>
+      </div>
+      <div>
+        <div>Artikelkenmerken</div>
+        <div>
+          <div style="margin-left:10px;">
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Breedte"></co-input-text>
+              <co-input-text placeholder="Lengte"></co-input-text>
+            </div>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Hoogte"></co-input-text>
+              <co-input-text placeholder="Zitdiepte"></co-input-text>
+            </div>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Zithoogte"></co-input-text>
+              <co-input-text placeholder="Volume"></co-input-text>
+            </div>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Stopmaat"></co-input-text>
+              <co-input-text placeholder="Patroonhoogte"></co-input-text>
+            </div>
+            <br>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Standaard levertijd"></co-input-text>
+              <co-input-text placeholder="Standaard levertijd verkoop"></co-input-text>
+            </div>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Eenheid verkoop"></co-input-text>
+              <co-input-text placeholder="Verkoophoeveelheid"></co-input-text>
+            </div>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Aantal"></co-input-text>
+              <co-input-text placeholder="Colli"></co-input-text>
+            </div>
+            <br>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Omzetgroep"></co-input-text>
+              <co-input-text placeholder="Artikelgroep"></co-input-text>
+            </div>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Hoofdartikel"></co-input-text>
+              <co-input-text placeholder="Sfeer"></co-input-text>
+            </div>
+            <div fxLayout="row" fxLayoutGap="10px">
+              <co-input-text placeholder="Concept"></co-input-text>
+              <co-input-text placeholder="Afdeling"></co-input-text>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      </div>
+    </div>
+  `,
+                styles: [""]
+            },] }
+];
+TransactionLineAccordionComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+TransactionLineAccordionComponent.propDecorators = {
+    transactionLine: [{ type: Input }]
+};
+
+class TransactionRelationEditComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.showPopup = false;
+        this.relType = RelationNameKind;
+        this.genderType = GenderType;
+        this.validSubmit = new EventEmitter();
+        this.invalidSubmit = new EventEmitter();
+        this.dateOfBirth = new Date();
+        this.phoneNumber = new ContactOption();
+    }
+    get readonly() {
+        return false;
+    }
+    get subHeader() {
+        return "";
+    }
+    get editFirstAddress() {
+        if (this.firstAddress) {
+            return this.firstAddress;
+        }
+        else if (this.customer) {
+            const address = new Address();
+            address.addressType = AddressType.DeliveryAddress;
+            address.startDate = new Date();
+            address.sequence = this.customer.getNextAddressSequence();
+            this.customer.addresses.push(address);
+            return address;
+        }
+    }
+    get firstAddress() {
+        if (!this.relation || !this.customer.addresses.length) {
+            return;
+        }
+        return this.customer.getFirstAvailableAddress([
+            AddressType.DeliveryAddress,
+            AddressType.BillingAddress,
+            AddressType.VisitingAddress,
+            AddressType.MailingAddress,
+            AddressType.NursingAddress
+        ]);
+    }
+    onPopupClose() {
+        this.showPopup = false;
+    }
+    changeRelationType(relationType) {
+        if (this.customer) {
+            this.customer.type = relationType;
+        }
+    }
+    changeGenderType(genderType) {
+        if (this.customer) {
+            this.customer.gender = genderType;
+        }
+    }
+    firstNameChange(firstName) {
+        if (this.customer) {
+            this.customer.firstName = firstName;
+        }
+    }
+    familyNameChange(familyName) {
+        if (this.customer) {
+            this.customer.familyName = familyName;
+        }
+    }
+}
+TransactionRelationEditComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-relation-edit",
+                template: `
+        <co-dialog [visible]="showPopup" header="ACCOUNT_DETAILS"  (close)="onPopupClose()"
+                    noClickOutside contentSize>
+            <ng-container content>
+            <co-form #transactionRelationEditForm (validSubmit)="validSubmit.emit()" (invalidSubmit)="invalidSubmit.emit()">
+                <div style="min-width: 500px;">
+                    <div>
+                        <label [textContent]="'PERSONAL_DATA' | localize"
+                               class="transaction-relation-label-h3"
+                        ></label>
+                    </div>
+                    <div>
+                        <div>
+                            <label [textContent]="'ORDER_TYPE' | localize "
+                                   class="transaction-relation-label-h3"
+                            ></label>
+                        </div>
+                        <div *ngIf="customer?.type">
+                            <co-input-radio-button [name]="'type'"
+                                                   [label]="'PRIVATE_PERSON' | localize"
+                                                   [value]="relType.Private"
+                                                   [checked]="customer.type === relType.Private"
+                                                   (modelChange)="changeRelationType(relType.Private)"
+                            ></co-input-radio-button>
+                            <co-input-radio-button [name]="'type'"
+                                                   [label]="'COMPANY' | localize"
+                                                   [value]="relType.Company"
+                                                   [checked]="customer.type === relType.Company"
+                                                   (modelChange)="changeRelationType(relType.Company)"
+                            ></co-input-radio-button>
+                        </div>
+                    </div>
+                    <div *ngIf="customer?.type === relType.Private">
+                        <label [textContent]="'SALUTATION' | localize"
+                               class="transaction-relation-label-h3"
+                        ></label>
+                        <div *ngIf="customer?.gender">
+                            <co-input-radio-button [name]="'gender'"
+                                                   [label]="'MALE' | localize"
+                                                   [value]="genderType.Male"
+                                                   [checked]="customer.gender === genderType.Male"
+                                                   (modelChange)="changeGenderType(genderType.Male)"
+                            ></co-input-radio-button>
+                            <co-input-radio-button [name]="'gender'"
+                                                   [label]="'FEMALE' | localize "
+                                                   [value]="genderType.Female"
+                                                   [checked]="customer.gender === genderType.Female"
+                                                   (modelChange)="changeGenderType(genderType.Female)"
+                            ></co-input-radio-button>
+                            <co-input-radio-button [name]="'gender'"
+                                                   [label]="'UNKNOWN' | localize"
+                                                   [value]="genderType.Unspecified"
+                                                   [checked]="customer.gender === genderType.Unspecified"
+                                                   (modelChange)="changeGenderType(genderType.Unspecified)"
+                            ></co-input-radio-button>
+                        </div>
+                    </div>
+                    <div *ngIf="customer?.type === relType.Private">
+                        <div>
+                            <label [textContent]="'NAME' | localize "
+                                   class="transaction-relation-label-h3"
+                            ></label>
+                            <div class="default-flex-row">
+                                <div class="default-flex-column">
+                                    <co-input-text
+                                            [(model)]="customer.firstName"
+                                            [placeholder]="'FIRST_NAME' | localize "
+                                            (modelChange)="firstNameChange($event)"
+                                            required
+                                    ></co-input-text>
+                                </div>
+                                <div class="default-flex-column">
+                                    <co-input-text
+                                            [(model)]="customer.prefix"
+                                            [placeholder]="'PREFIX' | localize "
+                                    ></co-input-text>
+                                </div>
+                                <div class="default-flex-column">
+                                    <co-input-text
+                                            [(model)]="customer.familyName"
+                                            [placeholder]="'LAST_NAME' | localize"
+                                            (modelChange)="familyNameChange($event)"
+                                            required
+                                    ></co-input-text>
+                                </div>
+                                <div class="default-flex-column">
+                                    <co-input-date
+                                            [placeholder]="'DATE_OF_BIRTH' | localize "
+                                            [(model)]="dateOfBirth"
+                                            required
+                                    ></co-input-date>
+                                </div>
+                                <div class="default-flex-column">
+                                    <co-input-text
+                                            [(model)]="phoneNumber.value"
+                                            [placeholder]="'PHONE_NO' | localize "
+                                            required
+                                    ></co-input-text>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <div *ngIf="customer?.type === relType.Company" class="default-flex-column">
+                            <label [textContent]="'COMPANY_NAME' | localize "
+                                   class="transaction-relation-label-h3"
+                            ></label>
+                            <co-input-text
+                                    [(model)]="customer.familyName"
+                                    [label]="'COMPANY_NAME'"
+                                    required
+                            ></co-input-text>
+                        </div>
+                    </div>
+
+                    <div>
+                        <transaction-relation-address
+                                label="DELIVERY_ADDRESS" [address]="editFirstAddress"
+                        ></transaction-relation-address>
+                    </div>
+
+                    <div fxLayout="row" fxLayoutGap="10px" class="button-wrapper">
+                        <default-ok-cancel-buttons
+                                [okDisabled]="readonly"
+                                (okClick)="transactionRelationEditForm.submit()"
+                                (cancelClick)="onPopupClose()"
+                        ></default-ok-cancel-buttons>
+                    </div>
+                </div>
+            </co-form>
+            </ng-container>
+        </co-dialog>
+    `,
+                styles: [".button-wrapper{margin-top:10px;justify-content:center}co-input-radio-button{margin-left:16px}.transaction-relation-label-h2{display:block;margin-top:1em;margin-bottom:1em;font-size:18px;font-weight:bold}.transaction-relation-label-h3{display:block;margin-top:1em;margin-bottom:1em;font-size:14px;font-weight:bold}\n"]
+            },] }
+];
+TransactionRelationEditComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionRelationEditComponent.propDecorators = {
+    transactionRelationEditForm: [{ type: ViewChild, args: ["transactionRelationEditForm", { read: FormComponent },] }],
+    showPopup: [{ type: Input }],
+    validSubmit: [{ type: Output }]
+};
+
+class TransactionHeaderBlockComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.planningRequestButtonClick = new EventEmitter();
+    }
+    showPopupTab(index) {
+        this.selectedTab = index;
+    }
+    tabClick() {
+        this.relationPopup.showPopup = true;
+    }
+    transactionEditClose() {
+        this.relationPopup.showPopup = false;
+    }
+}
+TransactionHeaderBlockComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-header-block",
+                template: `
+        <div fxLayout="row wrap" fxLayout.xs="column">
+            <div class="summary-block" (click)="tabClick()">
+                <div class="block-wrapper">
+                    <div class="content-wrapper">
+                            <div class="name"
+                                 [textContent]="relation?.displayName"></div>
+                            <div class="address link pointer"
+                                 [textContent]="relation?.displayAddressFull"></div>
+                            <div class="phone link pointer"
+                                 [textContent]="relation?.tel1"></div>
+                            <div [textContent]="relation?.email"
+                                 class="email link pointer"
+                            ></div>
+                    </div>
+                </div>
+            </div>
+
+            <transaction-service-info class="summary-block"
+                                      [transaction]="transaction"
+            ></transaction-service-info>
+            <transaction-service-status class="summary-block"
+                                        [transaction]="transaction"
+            ></transaction-service-status>
+            <transaction-order-info class="summary-block"
+                                    [transaction]="transaction"
+            ></transaction-order-info>
+            <transaction-payment-info class="summary-block"
+                                      [transaction]="transaction"
+            ></transaction-payment-info>
+            <transaction-delivery-summary class="summary-block"
+                                          [transaction]="transaction"
+                                          [canPlanDelivery]="!isService && canPlanDelivery"
+                                          (planningRequestButtonClick)="planningRequestButtonClick.emit($event)"
+                                          (click)="showPopupTab(1)"
+            ></transaction-delivery-summary>
+            <transaction-article-info class="summary-block"
+                                      [transaction]="transaction"
+            ></transaction-article-info>
+            <transaction-product-summary class="summary-block"
+                                         [transaction]="transaction"
+                                         [product]="product"
+            ></transaction-product-summary>
+        </div>
+
+        <transaction-relation-edit [customerId]="relationId" (validSubmit)="transactionEditClose()"></transaction-relation-edit>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{display:block;padding:15px 0 30px}.name{font-size:13px;font-weight:bold;color:#22313c;margin-bottom:5px}.address,.phone,.email{font-size:13px;line-height:16px;color:#5b6875}.pointer{cursor:pointer}.link{color:#2b60a7}.summary-block{width:calc(25% - 15px);border:2px dashed #DCE4EA;margin:7px;border-radius:15px;position:relative}.summary-block .block-wrapper{position:relative;display:flex;align-items:center;padding:30px 20px}.summary-block:after{content:\"\";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border:1px solid #FFF;pointer-events:none;border-radius:15px}@media only screen and (min-width: 960px) and (max-width: 1279px){.summary-block{width:calc(50% - 15px)}}@media only screen and (max-width: 599px){.summary-block{width:calc(100%);margin:7px 0}}\n"]
+            },] }
+];
+TransactionHeaderBlockComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionHeaderBlockComponent.propDecorators = {
+    relationPopup: [{ type: ViewChild, args: [TransactionRelationEditComponent, { static: true },] }],
+    canPlanDelivery: [{ type: Input }],
+    planningRequestButtonClick: [{ type: Output }]
+};
+
+class TransactionServiceSummaryComponent extends TransactionBaseComponent {
+    constructor(service, iconCacheService) {
+        super(service);
+        this.service = service;
+        this.iconCacheService = iconCacheService;
+        this.iconWrench = CoreComponentsIcon.Wrench;
+    }
+}
+TransactionServiceSummaryComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-service-info",
+                template: `
+        <transaction-summary-block
+                [hideAvatar]="true"
+                [class.disabled]="!isNew"
+                label="SERVICE"
+                [icon]="iconWrench"
+                headerLabel="SERVICE_NUMBER"
+                [headerValue]="transactionInfo?.transactionNr"
+                subHeaderLabel="SERVICE_REQUEST_DATE"
+                [subHeaderValue]="transactionInfo?.transactionDate | date:'shortDate'"
+        ></transaction-summary-block>
+    `
+            },] }
+];
+TransactionServiceSummaryComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: IconCacheService }
+];
+TransactionServiceSummaryComponent.propDecorators = {
+    hidden: [{ type: HostBinding, args: ["class.hidden",] }]
+};
+
+class TransactionSummaryBlockComponent {
+    constructor() {
+        this.Icon = CoreComponentsIcon;
+        this.hideAvatar = false;
+        this.label = "";
+        this.headerLabel = "";
+        this.subHeaderLabel = "";
+    }
+    ngOnDestroy() {
+        this.subHeaderTemplate = undefined;
+    }
+}
+TransactionSummaryBlockComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-summary-block",
+                template: `
+        <div class="block-wrapper">
+            <div  *ngIf="hideAvatar" class="icon-wrapper">
+                <icon *ngIf="icon" [icon]="icon" class="dark"></icon>
+                <image-display *ngIf="!icon" [model]="image"></image-display>
+            </div>
+            <div class="content-wrapper">
+                <div class="value-block">
+                    <div class="header-label" [textContent]="headerLabel | localize"></div>
+                    <div class="header" [textContent]="headerValue"></div>
+                </div>
+                <div class="value-block">
+                    <div class="subheader-label" [textContent]="subHeaderLabel | localize"></div>
+                    <ng-container *ngIf="subHeaderTemplate" [templateWrapper]="subHeaderTemplate"></ng-container>
+                    <div *ngIf="!subHeaderTemplate" class="subheader" [textContent]="subHeaderValue"></div>
+                </div>
+            </div>
+        </div>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host{width:368px;min-height:130px;height:auto;display:flex;flex-direction:column;margin-top:1px;margin-left:1px;padding:30px 20px}:host .content-wrapper .value-block{margin-bottom:10px}:host .content-wrapper .value-block ::ng-deep .planning-wrapper{justify-content:flex-start}:host .content-wrapper .value-block ::ng-deep .planning-wrapper arrow-link{margin-right:10px}:host .disabled-indicator{position:absolute;top:0;left:0;display:none}:host.disabled .disabled-indicator{display:block}:host ::ng-deep image-display{height:60px;width:60px;flex-shrink:0}:host ::ng-deep image-display span{display:none}:host .icon-wrapper{display:flex;flex-shrink:0;align-items:center;justify-content:center;background:#F8FBFA;height:60px;width:60px;border-radius:50%;border:1px solid #DCE4EA;overflow:hidden}:host .icon-wrapper ::ng-deep icon{height:60px!important;width:60px!important;flex-shrink:0}:host .title{font-size:13px;color:#22313c}:host .block-wrapper{position:relative;display:flex;align-items:center}:host .border{border-radius:3px;padding:15px;background:white;border:1px solid #DCE4EA}:host .content-wrapper{display:flex;flex-direction:column;justify-content:center;margin-left:10px;min-height:60px;height:auto;width:100%}:host .header-label,:host .subheader-label{font-size:11px;line-height:13px;color:#5b6875}:host .header,:host .subheader{font-size:13px;font-weight:bold;color:#22313c}\n"]
+            },] }
+];
+TransactionSummaryBlockComponent.ctorParameters = () => [];
+TransactionSummaryBlockComponent.propDecorators = {
+    hideAvatar: [{ type: Input }],
+    label: [{ type: Input }],
+    icon: [{ type: Input }],
+    image: [{ type: Input }],
+    headerLabel: [{ type: Input }],
+    headerValue: [{ type: Input }],
+    subHeaderLabel: [{ type: Input }],
+    subHeaderValue: [{ type: Input }],
+    subHeaderTemplate: [{ type: ContentChild, args: ["subHeaderTemplate", { static: false },] }]
+};
+
+class TransactionServiceStatusComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.iconPin = CoreComponentsIcon.Pin;
+    }
+    get serviceStatus() {
+        // TODO: transaction.serviceStatus
+        return "serviceStatus";
+    }
+}
+TransactionServiceStatusComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-service-status",
+                template: `
+        <transaction-summary-block
+                [class.disabled]="!isNew"
+                label="STATUS"
+                [icon]="iconPin"
+                headerLabel="SERVICE_STATE"
+                [headerValue]="serviceStatus"
+        ></transaction-summary-block>
+    `
+            },] }
+];
+TransactionServiceStatusComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionServiceStatusComponent.propDecorators = {
+    hidden: [{ type: HostBinding, args: ["class.hidden",] }]
+};
+
+class TransactionOrderSummaryComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.iconOrder = CoreComponentsIcon.Order;
+    }
+    get sourceTransactionNr() {
+        // TODO: transaction.sourceTransactionNr
+        return 0;
+    }
+    get sourceTransactionDate() {
+        // TODO: transaction.sourceTransactionDate
+        return new Date();
+    }
+}
+TransactionOrderSummaryComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-order-info",
+                template: `
+        <transaction-summary-block
+                [class.disabled]="!isNew"
+                label="ORDER_INFO"
+                [icon]="iconOrder"
+                headerLabel="ORDER_NUMBER"
+                [headerValue]="isService ? sourceTransactionNr : transactionInfo?.transactionNr"
+                subHeaderLabel="ORDER_DATE"
+                [subHeaderValue]="(isService ? sourceTransactionDate : this.transactionInfo?.transactionDate) | date:'shortDate'"
+        ></transaction-summary-block>
+    `
+            },] }
+];
+TransactionOrderSummaryComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionOrderSummaryComponent.propDecorators = {
+    hidden: [{ type: HostBinding, args: ["class.hidden",] }]
+};
+
+class TransactionPaymentInfoComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.euro = CoreComponentsIcon.Information;
+    }
+}
+TransactionPaymentInfoComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-payment-info",
+                template: `
+        <transaction-summary-block
+                [class.disabled]="!isNew"
+                label="PAYMENT"
+                [icon]="euro"
+                headerLabel="TOTAL_AMOUNT"
+                [headerValue]="transactionTotal?.netAmount | coCurrency"
+                subHeaderLabel="PAID_DOWN2"
+                [subHeaderValue]="transactionTotal?.transactionDiscountAmount | coCurrency"
+        ></transaction-summary-block>
+    `
+            },] }
+];
+TransactionPaymentInfoComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionPaymentInfoComponent.propDecorators = {
+    hidden: [{ type: HostBinding, args: ["class.hidden",] }]
+};
+
+class TransactionArticleSummaryComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.imageDataUri = "";
+    }
+    get sourceArticleDescription() {
+        // TODO: transaction.sourceArticleDescription
+        return "sourceArticleDescription";
+    }
+    get sourceArticleNr() {
+        // TODO: transaction.sourceArticleNr
+        return "sourceArticleNr";
+    }
+    _getArticleImage() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // TODO: Add to TransactionAPI?
+            // if (this.transaction.sourceGoodId) {
+            //     this.imageDataUri =
+            //         (await this._articleDalRepo.getThumbnailImageContentTableGoods(
+            //             this.transaction.sourceGoodId + "", DocumentPublication.None, false, true));
+            // }
+        });
+    }
+    transactionSet() {
+        this._getArticleImage();
+    }
+}
+TransactionArticleSummaryComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-article-info",
+                template: `
+        <transaction-summary-block
+                [class.disabled]="!isNew"
+                headerLabel="ARTICLE_DESCRIPTION"
+                [image]="imageDataUri"
+                [headerValue]="sourceArticleDescription"
+                subHeaderLabel="ARTICLE_NR"
+                [subHeaderValue]="sourceArticleNr"
+        ></transaction-summary-block>
+    `
+            },] }
+];
+TransactionArticleSummaryComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionArticleSummaryComponent.propDecorators = {
+    hidden: [{ type: HostBinding, args: ["class.hidden",] }]
+};
+
+class TransactionDeliverySummaryComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.deliveryTruck = CoreComponentsIcon.DeliveryTruck;
+        this.calendarRoundOpen = CoreComponentsIcon.CalendarRoundOpen;
+        this.deliveryMethodDescription = "";
+        this.canPlanDelivery = false;
+        this.planningRequestButtonClick = new EventEmitter();
+    }
+    transactionSet() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // TODO: move call to TransactionAPI?
+            //this.deliveryMethodDescription = await this._lookupService.lookup(DeliveryMethod, this.transaction.deliveryMethod);
+        });
+    }
+}
+TransactionDeliverySummaryComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-delivery-summary",
+                template: `
+        <transaction-summary-block
+                label="DELIVERY"
+                [icon]="deliveryTruck"
+                headerLabel="DELIVERY_METHOD2"
+                [headerValue]="deliveryMethodDescription"
+                [subHeaderLabel]="transactionInfo?.preferredDeliveryDate ? 'DELIVERY_DATE' : !canPlanDelivery ? 'EXPECTED_DELIVERY_WEEK' : 'EXPECTED_DELIVERY'"
+                [subHeaderValue]="transactionInfo?.preferredDeliveryDate ? (transactionInfo?.deliveryDate | date:'shortDate') : 'WEEK' | localize | append:(' ') | append:(transactionInfo?.deliveryDate | date:'w')">
+            <ng-template #subHeaderTemplate *ngIf="canPlanDelivery">
+                <div class="planning-wrapper">
+                    <span class="subheader" *ngIf="transactionInfo?.preferredDeliveryDate"
+                          [textContent]="(transactionInfo?.preferredDeliveryDate | date:'shortDate') + ', ' + transactionInfo?.preferredDeliveryDate | date: 'time' "></span>
+<!--                    <arrow-link *ngIf="!transactionInfo.preferredDeliveryDate"-->
+<!--                            label="PLAN_YOUR_DELIVERY"-->
+<!--                            (click)="planningRequestButtonClick.emit($event)"-->
+<!--                    ></arrow-link>-->
+                    <icon [icon]="calendarRoundOpen" (click)="planningRequestButtonClick.emit($event)"></icon>
+                </div>
+            </ng-template>
+        </transaction-summary-block>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host .planning-wrapper{display:flex;justify-content:space-between;align-items:center;flex-direction:row;color:#2b60a7;margin-top:-10px;font-size:13px}:host .planning-wrapper ::ng-deep icon{cursor:pointer}:host .planning-wrapper ::ng-deep icon [fill]{fill:#2b60a7}\n"]
+            },] }
+];
+TransactionDeliverySummaryComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionDeliverySummaryComponent.propDecorators = {
+    hidden: [{ type: HostBinding, args: ["class.hidden",] }],
+    canPlanDelivery: [{ type: Input }],
+    planningRequestButtonClick: [{ type: Output }]
+};
+
+class TransactionProductContractSummaryComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+    }
+    productSet() {
+        // TODO: add to TransactionAPI?
+        if (!this.product.imageAsDataUri) {
+            //     this._generalRepo.getDocument(this.product.image.documentId).then((doc: CoDocument) => {
+            //         this.product.imageAsDataUri = doc.thumbnailBodyAsDataUri;
+            //     });
+        }
+    }
+}
+TransactionProductContractSummaryComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-product-contract-summary",
+                template: `
+        <transaction-summary-block
+                [class.disabled]="!isNew"
+                label="CONTRACT"
+                [image]="product?.imageAsDataUri"
+                headerLabel="PRODUCT"
+                [headerValue]="product?.product"
+                subHeaderLabel="REFERENCE"
+                [subHeaderValue]="product?.productReference"
+        ></transaction-summary-block>
+    `
+            },] }
+];
+TransactionProductContractSummaryComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+
+class TransactionProductSummaryComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+    }
+    productSet() {
+        // TODO: Add to TransactionAPI?
+        if (this.product && !this.product.imageAsDataUri && this.product.image && this.product.image.documentId) {
+            //     this._generalRepo.getDocument(this.product.image.documentId).then((doc: CoDocument) => {
+            //         this.product.imageAsDataUri = doc.thumbnailBodyAsDataUri;
+            //     });
+        }
+    }
+}
+TransactionProductSummaryComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-product-summary",
+                template: `
+        <transaction-summary-block
+                [class.disabled]="!isNew"
+                label="PRODUCT"
+                [image]="product?.imageAsDataUri"
+                headerLabel="PRODUCT_TYPE"
+                [headerValue]="product?.productReference"
+                subHeaderLabel="PRODUCT"
+                [subHeaderValue]="product?.product"
+        ></transaction-summary-block>
+    `
+            },] }
+];
+TransactionProductSummaryComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionProductSummaryComponent.propDecorators = {
+    hidden: [{ type: HostBinding, args: ["class.hidden",] }]
+};
+
+class TemplateWrapperDirective {
+    constructor(viewContainer) {
+        this.viewContainer = viewContainer;
+        this.templateWrapper = null;
+        this.templateWrapperContext = null;
+    }
+    ngOnChanges(changes) {
+        const recreateView = this._shouldRecreateView(changes);
+        if (recreateView) {
+            if (this._viewRef) {
+                this.viewContainer.remove(this.viewContainer.indexOf(this._viewRef));
+            }
+            if (this.templateWrapper) {
+                this._viewRef = this.viewContainer.createEmbeddedView(this.templateWrapper, this.templateWrapperContext);
+            }
+        }
+        else {
+            if (this._viewRef && this.templateWrapperContext) {
+                this._updateExistingContext(this.templateWrapperContext);
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this._viewRef) {
+            this.viewContainer.remove(this.viewContainer.indexOf(this._viewRef));
+            this._viewRef = undefined;
+        }
+        this.templateWrapper = undefined;
+    }
+    _shouldRecreateView(changes) {
+        const ctxChange = changes["templateWrapperContext"];
+        return !!changes["templateWrapper"] || (ctxChange && this._hasContextShapeChanged(ctxChange));
+    }
+    _hasContextShapeChanged(ctxChange) {
+        const prevCtxKeys = Object.keys(ctxChange.previousValue || {});
+        const currCtxKeys = Object.keys(ctxChange.currentValue || {});
+        if (prevCtxKeys.length === currCtxKeys.length) {
+            for (const propName of currCtxKeys) {
+                if (prevCtxKeys.indexOf(propName) === -1) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
+    _updateExistingContext(ctx) {
+        for (const propName of Object.keys(ctx)) {
+            this._viewRef.context[propName] = this.templateWrapperContext[propName];
+        }
+    }
+}
+TemplateWrapperDirective.decorators = [
+    { type: Directive, args: [{
+                // eslint-disable-next-line @angular-eslint/directive-selector
+                selector: "[templateWrapper]"
+            },] }
+];
+TemplateWrapperDirective.ctorParameters = () => [
+    { type: ViewContainerRef }
+];
+TemplateWrapperDirective.propDecorators = {
+    templateWrapper: [{ type: Input }],
+    templateWrapperContext: [{ type: Input }]
+};
+
+class DefaultOkCancelButtonsComponent {
+    constructor() {
+        this.hideCancel = false;
+        this.hideOk = false;
+        this.okLabel = "OK";
+        // only emits when ok button was not disabled when it was clicked
+        this.okClick = new EventEmitter();
+        this.cancelClick = new EventEmitter();
+    }
+    onOkClick(event) {
+        if (this.okButtonComp && !this.okButtonComp.disabled) {
+            this.okClick.emit(event);
+        }
+    }
+}
+DefaultOkCancelButtonsComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "default-ok-cancel-buttons",
+                template: `
+        <co-button *ngIf="!hideOk" [label]="okLabel" [disabled]="okDisabled" class="ok" #okButton (click)="onOkClick($event)"></co-button>
+        <co-button *ngIf="!hideCancel" label="CANCEL" (click)="cancelClick.emit($event)"></co-button>
+        <ng-content></ng-content>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center,:host{display:flex}.flex-center{flex-direction:row}.flex-center{align-items:center!important;justify-content:center!important}.margin-popup:host{margin-top:20px}.margin-popup:host{margin-bottom:20px}.margin-popup:host{margin-left:20px}.margin-popup:host{margin-right:20px}.margin-top:host{margin-top:11px}:host button-colijn:not(:last-child){margin-right:11px}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host.justify-center{justify-content:center}\n"]
+            },] }
+];
+DefaultOkCancelButtonsComponent.ctorParameters = () => [];
+DefaultOkCancelButtonsComponent.propDecorators = {
+    okDisabled: [{ type: Input }],
+    hideCancel: [{ type: Input }],
+    hideOk: [{ type: Input }],
+    okLabel: [{ type: Input }],
+    okClick: [{ type: Output }],
+    cancelClick: [{ type: Output }],
+    okButtonComp: [{ type: ViewChild, args: ["okButton",] }]
+};
+
+class WarehouseComponent {
+    constructor(service, _dictionaryService) {
+        this.service = service;
+        this._dictionaryService = _dictionaryService;
+        this.message = "";
+        this.okClick = new EventEmitter();
+        this.cancelClick = new EventEmitter();
+        this.commissionCodes = [];
+        this.commissionFields = { text: "description", value: "code" };
+        this.transactionArticleWarehouses = [];
+        this.columns = [];
+        this._okOrCancelClick = false;
+        this.columns.push({ field: "warehouseNr", headerText: this._dictionaryService.get("WAREHOUSE"), allowFiltering: false }, { field: "warehouseDesc", headerText: this._dictionaryService.get("DESCRIPTION") }, { field: "stockAmount", headerText: this._dictionaryService.get("STOCK") });
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.commissionCodes = yield this.service.getCommissionCodes("NL");
+        });
+    }
+    ngOnDestroy() {
+        this.warehouseDialog.close();
+    }
+    showStockManager(line) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.selectedWarehouseNr = line.warehouseNumber;
+            this.amount = line.amount;
+            this.commissionCode = line.commissionCode;
+            this.show(line.articleNumber);
+        });
+    }
+    hide() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._okOrCancelClick) {
+                this._okOrCancelClick = false;
+                return;
+            }
+            yield this.onStockManagerCancelClick();
+        });
+    }
+    show(articleNr) {
+        this._reloadDataCollections(articleNr).then();
+        this.warehouseGrid.selectRow(this.selectedWarehouseNr);
+        this.warehouseDialog.targetElement = null;
+        this.warehouseDialog.open();
+    }
+    handleRowsSelected(rows) {
+        this.selectedWarehouseNr = (rows.find(x => x !== undefined)).warehouseNr;
+    }
+    onStockManagerCancelClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._okOrCancelClick = true;
+            this.warehouseDialog.close();
+            this.cancelClick.emit();
+        });
+    }
+    onStockManagerOkClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._okOrCancelClick = true;
+            this.warehouseDialog.close();
+            this.okClick.emit();
+        });
+    }
+    _reloadDataCollections(articleNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const goodId = yield this.service.getGoodIdFromArticleNr(articleNr);
+            this.transactionArticleWarehouses = yield this.service.getTransactionArticleWarehouses(goodId);
+        });
+    }
+}
+WarehouseComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "warehouse",
+                template: `
+    <co-dialog #warehouseDialog
+               (closeClick)="hide()"
+               (overlayClick)="onStockManagerCancelClick()"
+      >
+      <ng-container header>{{ 'STOCK_NOTIFICATION' | localize }}</ng-container>
+
+      <ng-container content>
+        <co-form>
+          <div class="form-content">
+            <span *ngIf="message" class="message-field" [textContent]="message | localize"></span>
+              <div class="commission-fields" fxLayout="row">
+                <co-input-number-picker class="horizontal" [(model)]="amount" [min]="0" decimals="3"></co-input-number-picker>
+                <co-input-combo-box [(model)]="commissionCode"
+                                      [source]="commissionCodes"
+                                      [fields]="commissionFields"
+                                      [placeholder]="'COMMISSION_CODE' | localize"
+                                      [required]="true"
+                ></co-input-combo-box>
+              </div>
+              <div>
+                <co-grid #warehouseGrid
+                  [data]="transactionArticleWarehouses"
+                  [columns]="columns"
+                  [pagingEnabled]="'true'"
+                  [maxNumberOfRows]="'10'"
+                  (rowsSelected)="handleRowsSelected($event)"
+                ></co-grid>
+              </div>
+          </div>
+        </co-form>
+      </ng-container>
+
+      <ng-container footer>
+          <div class="flex-center">
+            <co-button [label]="'OK' | localize" (click)="onStockManagerOkClick()"></co-button>
+            <co-button [label]="'CANCEL' | localize" (click)="onStockManagerCancelClick()"></co-button>
+          </div>
+      </ng-container>
+    </co-dialog>
+  `,
+                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"]
+            },] }
+];
+WarehouseComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: DictionaryService }
+];
+WarehouseComponent.propDecorators = {
+    warehouseDialog: [{ type: ViewChild, args: ["warehouseDialog",] }],
+    warehouseGrid: [{ type: ViewChild, args: ["warehouseGrid",] }],
+    message: [{ type: Input }],
+    okClick: [{ type: Output }],
+    cancelClick: [{ type: Output }]
+};
+
+class IoneServiceOrderModule {
+}
+IoneServiceOrderModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    IconModule,
+                    InputTextModule,
+                    InputCheckboxModule,
+                    InputRadioButtonModule,
+                    FormModule,
+                    InputComboBoxModule,
+                    InputDatePickerModule,
+                    InputNumberPickerModule,
+                    CoDialogModule,
+                    CoDialogPromptModule,
+                    ButtonModule,
+                    FlexModule,
+                    MultiSelectListModule,
+                    DropDownModule,
+                    PopupModule.forRoot(),
+                    CoSidebarModule,
+                    CoGridModule,
+                    CoreModule,
+                    ChipListModule,
+                    DropDownButtonModule,
+                    CheckBoxModule,
+                    DropDownListModule,
+                    IoneShoppingCartModule,
+                    TabModule,
+                    CommonModule,
+                    //    RichTextEditorModule
+                ],
+                declarations: [
+                    TemplateWrapperDirective,
+                    DefaultOkCancelButtonsComponent,
+                    IoneServiceOrderComponent,
+                    ServiceOrderComponent,
+                    TransactionOrderTotalsComponent,
+                    TransactionOrderLineViewComponent,
+                    TransactionOrderLinesComponent,
+                    TransactionRelationAddressComponent,
+                    TransactionArticleTextComponent,
+                    TransactionSidebarRightComponent,
+                    TransactionLineAccordionComponent,
+                    TransactionHeaderBlockComponent,
+                    TransactionServiceSummaryComponent,
+                    TransactionSummaryBlockComponent,
+                    TransactionServiceStatusComponent,
+                    TransactionOrderSummaryComponent,
+                    TransactionPaymentInfoComponent,
+                    TransactionRelationEditComponent,
+                    TransactionArticleSummaryComponent,
+                    TransactionDeliverySummaryComponent,
+                    TransactionProductContractSummaryComponent,
+                    TransactionProductSummaryComponent,
+                    TransactionManagerComponent,
+                    WarehouseComponent,
+                ],
+                providers: [
+                    DictionaryService,
+                    TransactionService,
+                    OptionsService,
+                ],
+                entryComponents: [
+                    IoneServiceOrderComponent
+                ],
+                exports: [IoneServiceOrderComponent],
+                bootstrap: [IoneServiceOrderComponent]
+            },] }
+];
+
 //export * from "./app/component/ione-transaction.module";
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IoneCheckoutComponent, IoneCheckoutModule, IoneShoppingCartComponent, IoneShoppingCartModule, RetailTransactionCheckoutComponent as ɵa, CheckoutComponent as ɵb, ShoppingCartManagerComponent as ɵba, ShoppingCartComponent as ɵbb, ShoppingCartLineComponent as ɵbc, StockStatusIndicatorComponent as ɵbd, CharacteristicAnswerComponent as ɵbe, CheckoutOverviewComponent as ɵc, CheckoutOverviewBlockComponent as ɵd, CheckoutOverviewRelationEditComponent as ɵe, TransactionService as ɵf, IOneConnectorAdapterService as ɵg, CheckoutOverviewDeliveryEditComponent as ɵh, DictionaryService as ɵi, CheckoutLoginComponent as ɵj, OptionsService as ɵk, TransactionEventService as ɵl, CoreModule as ɵm, AppendPipe as ɵn, DeliveryTimePipe as ɵo, DateDurationPipe as ɵp, LocalizePipe as ɵq, CoCurrencyPipe as ɵr, SafeStylePipe as ɵs, ImageDisplayComponent as ɵt, NoImageDisplayComponent as ɵu, IconComponent as ɵv, CheckoutOverviewRelationAddressComponent as ɵw, CheckoutOverviewDeliveryAddressComponent as ɵx, CheckOutRelationSuggestionsListComponent as ɵy, CheckOutRelationSuggestionsListItemComponent as ɵz };
+export { IoneCheckoutComponent, IoneCheckoutModule, IoneServiceOrderComponent, IoneServiceOrderModule, IoneShoppingCartComponent, IoneShoppingCartModule, RetailTransactionCheckoutComponent as ɵa, CheckoutComponent as ɵb, ShoppingCartManagerComponent as ɵba, ShoppingCartComponent as ɵbb, ShoppingCartLineComponent as ɵbc, StockStatusIndicatorComponent as ɵbd, CharacteristicAnswerComponent as ɵbe, TemplateWrapperDirective as ɵbf, DefaultOkCancelButtonsComponent as ɵbg, ServiceOrderComponent as ɵbh, TransactionBaseComponent as ɵbi, TransactionArticleTextComponent as ɵbj, TransactionManagerComponent as ɵbk, TransactionOrderTotalsComponent as ɵbl, TransactionOrderLineViewComponent as ɵbm, TransactionOrderLinesComponent as ɵbn, TransactionRelationAddressComponent as ɵbo, TransactionSidebarRightComponent as ɵbp, TransactionLineAccordionComponent as ɵbq, TransactionHeaderBlockComponent as ɵbr, TransactionRelationEditComponent as ɵbs, TransactionServiceSummaryComponent as ɵbt, TransactionSummaryBlockComponent as ɵbu, TransactionServiceStatusComponent as ɵbv, TransactionOrderSummaryComponent as ɵbw, TransactionPaymentInfoComponent as ɵbx, TransactionArticleSummaryComponent as ɵby, TransactionDeliverySummaryComponent as ɵbz, CheckoutOverviewComponent as ɵc, TransactionProductContractSummaryComponent as ɵca, TransactionProductSummaryComponent as ɵcb, WarehouseComponent as ɵcc, CheckoutOverviewBlockComponent as ɵd, CheckoutOverviewRelationEditComponent as ɵe, TransactionService as ɵf, IOneConnectorAdapterService as ɵg, CheckoutOverviewDeliveryEditComponent as ɵh, DictionaryService as ɵi, CheckoutLoginComponent as ɵj, OptionsService as ɵk, TransactionEventService as ɵl, CoreModule as ɵm, AppendPipe as ɵn, DeliveryTimePipe as ɵo, DateDurationPipe as ɵp, LocalizePipe as ɵq, CoCurrencyPipe as ɵr, SafeStylePipe as ɵs, ImageDisplayComponent as ɵt, NoImageDisplayComponent as ɵu, IconComponent as ɵv, CheckoutOverviewRelationAddressComponent as ɵw, CheckoutOverviewDeliveryAddressComponent as ɵx, CheckOutRelationSuggestionsListComponent as ɵy, CheckOutRelationSuggestionsListItemComponent as ɵz };
 //# sourceMappingURL=colijnit-transaction.js.map