@colijnit/transaction 12.0.4 → 12.1.2

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';
@@ -43,7 +44,6 @@ import { BusinessObjectUtils } from '@colijnit/transactionapi/build/utils/busine
 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() {
@@ -804,9 +812,16 @@ class IOneConnectorAdapterService {
     }
     connect(options) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.options = options;
-            this.connector = new Transaction(options);
-            this.options.session = this.connector.session;
+            if (this.options === undefined) {
+                this.options = options;
+                this.connector = new Transaction(options);
+                this.options.session = this.connector.session;
+            }
+        });
+    }
+    disconnect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.options = undefined;
         });
     }
     getArticleFullObject(goodId) {
@@ -841,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 {
@@ -952,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) => {
@@ -1112,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);
@@ -1276,8 +1308,11 @@ class IOneConnectorAdapterService {
         });
     }
 }
+IOneConnectorAdapterService.ɵprov = i0.ɵɵdefineInjectable({ factory: function IOneConnectorAdapterService_Factory() { return new IOneConnectorAdapterService(); }, token: IOneConnectorAdapterService, providedIn: "root" });
 IOneConnectorAdapterService.decorators = [
-    { type: Injectable }
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
 ];
 IOneConnectorAdapterService.ctorParameters = () => [];
 
@@ -1285,6 +1320,7 @@ class TransactionService {
     constructor(_connector) {
         this._connector = _connector;
         this.transactionUpdated = new EventEmitter();
+        this.transactionLoaded = new EventEmitter();
         this.applicationUser = false;
         this.articleAmount = 0;
         this._currentLines = [];
@@ -1428,8 +1464,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 {
@@ -1528,7 +1581,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);
             }
@@ -1668,6 +1731,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;
@@ -1678,13 +1750,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;
@@ -1695,10 +1769,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);
                 }
             }
         });
@@ -1818,6 +1889,7 @@ class Dictionary {
                 "ADDRESS_CHANGE": "Adres wijzigen",
                 "ALWAYS_SHOW_LOGISTICS_POPUP": "Controleer magazijn en commissiecode",
                 "ARTICLE": "Artikel",
+                "ARTICLE_DESCRIPTION": "Artikelomschrijving",
                 "ARTICLE_IN_OUT_COLLECTION": "Status van artikel is '|~'. Weet u zeker dat u door wilt gaan?",
                 "ARTICLE_NR": "Artikelnummer",
                 "ASSEMBLY_COSTS": "Montagekosten",
@@ -1858,12 +1930,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",
@@ -1890,11 +1965,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",
@@ -1907,6 +1985,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",
@@ -1922,6 +2002,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",
@@ -1933,16 +2016,20 @@ class Dictionary {
                 "SUBTOTAL": "Subtotaal",
                 "SUGGESTIONS": "Suggesties",
                 "SURCHARGE_AMOUNT": "Toeslag",
+                "STATE": "Status",
                 "STREET": "Straatnaam",
+                "TOTAL_AMOUNT": "Totaalbedrag",
                 "TOTAL_GROSS": "Totaal bruto",
                 "TOTAL_ASSEMBLY_TIME": "Totale montagetijd",
                 "TRANSACTION_DISCOUNT": "Totale transactie korting",
                 "TRANSACTION_DISCOUNT_PERC": "% Trans. korting",
                 "TRANSACTION_PRICE_DECLARATION": "Order prijsverklaring",
+                "TRANSACTION_SUM_I": "Ordertotaal incl. BTW",
                 "TRANSACTION_TOTAL": "Transactie totaal",
                 "UNKNOWN": "Onbekend",
                 "UNKNOWN_ADDRESS_CHECK_IT": "Onbekend adres",
                 "VAT": "Btw",
+                "VAT_AMOUNT": "BTW-bedrag",
                 "VALUE": "Waarde",
                 "WAREHOUSE": "Magazijn",
                 "YOUR_DATA": "Uw gegevens",
@@ -1963,6 +2050,7 @@ class Dictionary {
                 "ADDRESS_CHANGE": "Change address",
                 "ALWAYS_SHOW_LOGISTICS_POPUP": "Check warehouse and commissioncode",
                 "ARTICLE": "Article",
+                "ARTICLE_DESCRIPTION": "Article description",
                 "ARTICLE_IN_OUT_COLLECTION": "Status of article is '|~'. Are you sure to proceed?",
                 "ARTICLE_NR": "Article number",
                 "ASSEMBLY_COSTS": "Assembly costs",
@@ -2003,12 +2091,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",
@@ -2035,11 +2126,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",
@@ -2052,6 +2146,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",
@@ -2059,6 +2155,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",
@@ -2070,17 +2169,21 @@ class Dictionary {
                 "SUBTOTAL": "Subtotal",
                 "SUGGESTIONS": "Suggestions",
                 "SURCHARGE_AMOUNT": "Surcharge",
+                "STATE": "STATUS",
                 "STREET": "Streetname",
+                "TOTAL_AMOUNT": "Total amount",
                 "TOTAL_GROSS": "Gross total",
                 "TOTAL_ASSEMBLY_TIME": "Total assembly time",
                 "TRANSACTION_DISCOUNT": "Total transaction discount",
                 "TRANSACTION_DISCOUNT_PERC": "% Trans. discount",
                 "TRANSACTION_PRICE_DECLARATION": "Transaction price declaration",
+                "TRANSACTION_SUM_I": "Ordertotal incl VAT",
                 "TRANSACTION_TOTAL": "Transaction total",
                 "UNKNOWN": "unknown",
                 "UNKNOWN_ADDRESS_CHECK_IT": "Unknown address",
                 "VALUE": "Value",
                 "VAT": "VAT",
+                "VAT_AMOUNT": "VAT amount",
                 "WAREHOUSE": "Warehouse",
                 "YOUR_DATA": "Your data",
             },
@@ -2161,6 +2264,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" });
@@ -3156,7 +3262,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()"
@@ -4137,6 +4243,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"]
@@ -4187,7 +4294,6 @@ class IoneCheckoutModule {
 IoneCheckoutModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
-                    BrowserAnimationsModule,
                     IconModule,
                     InputTextModule,
                     InputCheckboxModule,
@@ -4207,6 +4313,7 @@ IoneCheckoutModule.decorators = [
                     CoSidebarModule,
                     CoGridModule,
                     CoreModule,
+                    CommonModule,
                 ],
                 declarations: [
                     CheckoutComponent,
@@ -4223,7 +4330,6 @@ IoneCheckoutModule.decorators = [
                     IoneCheckoutComponent,
                 ],
                 providers: [
-                    IOneConnectorAdapterService,
                     DictionaryService,
                     TransactionService,
                     OptionsService
@@ -5302,7 +5408,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 = () => [
@@ -5452,7 +5558,6 @@ IoneShoppingCartModule.decorators = [
                     CharacteristicAnswerComponent,
                 ],
                 imports: [
-                    BrowserAnimationsModule,
                     CommonModule,
                     IconModule,
                     InputTextModule,
@@ -5475,7 +5580,6 @@ IoneShoppingCartModule.decorators = [
                     CoreModule
                 ],
                 providers: [
-                    IOneConnectorAdapterService,
                     DictionaryService,
                     TransactionService,
                     OptionsService
@@ -5483,16 +5587,1956 @@ IoneShoppingCartModule.decorators = [
                 entryComponents: [
                     IoneShoppingCartComponent
                 ],
-                exports: [IoneShoppingCartComponent],
+                exports: [IoneShoppingCartComponent, StockStatusIndicatorComponent],
                 bootstrap: [IoneShoppingCartComponent]
             },] }
 ];
 
+class IoneServiceOrderComponent {
+    constructor(_changeDetector, _optionsService, _connector, _dictionary, _service) {
+        this._changeDetector = _changeDetector;
+        this._optionsService = _optionsService;
+        this._connector = _connector;
+        this._dictionary = _dictionary;
+        this._service = _service;
+        this.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;
+    }
+    set transaction(value) {
+        this._transaction = value;
+        if (this._transaction && this._transaction.transactionInfo) {
+            this._isService = this._transaction.transactionInfo.transactionKind === TransactionKind.ServiceOrder;
+        }
+    }
+    get transaction() {
+        return this._transaction;
+    }
+    get transactionInfo() {
+        if (this._transaction) {
+            return this._transaction.transactionInfo;
+        }
+    }
+    get transactionLines() {
+        if (this._transaction) {
+            return this._transaction.transactionLines;
+        }
+    }
+    get transactionTotal() {
+        if (this._transaction) {
+            return this._transaction.transactionTotal;
+        }
+    }
+    get isService() {
+        return this._isService;
+    }
+    set relationId(value) {
+        if (value === undefined) {
+            return;
+        }
+        this._relationId = value;
+        this._retrieveRelation();
+    }
+    get relationId() {
+        return this._relationId;
+    }
+    set customerId(value) {
+        if (value === undefined) {
+            return;
+        }
+        this._customerId = value;
+        this._retrieveCustomer();
+    }
+    get customerId() {
+        return this._customerId;
+    }
+    set product(value) {
+        this._product = value;
+        this.productSet();
+        this._setBasedOnProduct();
+    }
+    get product() {
+        return this._product;
+    }
+    get isNew() {
+        return isNill$1(this.transaction) || isNill$1(this.transactionInfo.transactionNr);
+    }
+    transactionSet() {
+        // overridden by descendents
+    }
+    productSet() {
+        // overridden by descendents
+    }
+    _retrieveCustomer() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.customer = yield this.service.getCustomerFulObjectByRelationId(this._customerId);
+        });
+    }
+    _retrieveRelation() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const relationRequest = new RelationRequest();
+            let relations = [];
+            relationRequest.relationId = this.relationId;
+            relations = yield this.service.getRelationListObjects(relationRequest);
+            if (relations && relations.length) {
+                this.relation = relations[0];
+            }
+        });
+    }
+    _setBasedOnProduct() {
+        if (this.product) {
+            this.basedOnProduct = true;
+        }
+        else { //check transaction (service) for product
+            // TODO: assProduct is not a property of transaction right now.
+            // this.basedOnProduct = notNill(this._transaction.assProduct);
+            // if (this.basedOnProduct) {
+            //     this._product = this.transaction.assProduct;
+            // }
+        }
+    }
+}
+TransactionBaseComponent.decorators = [
+    { type: Directive }
+];
+TransactionBaseComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionBaseComponent.propDecorators = {
+    transaction: [{ type: Input }],
+    relationId: [{ type: Input }],
+    customerId: [{ type: Input }],
+    product: [{ type: Input }],
+    relation: [{ type: Input }],
+    customer: [{ type: Input }]
+};
+
+class TransactionArticleTextComponent extends TransactionBaseComponent {
+    constructor(service) {
+        super(service);
+        this.service = service;
+        this.visible = false;
+        this.floatButtonSelected = false;
+        this.overviewSelected = false;
+        this.editArtikelText = false;
+        this.collection = [
+            { id: 1, name: "Standaardtekst 1" },
+            { id: 2, name: "Standaardtekst 1" },
+            { id: 3, name: "Standaardtekst 1" },
+            { id: 4, name: "Standaardtekst 1" },
+            { id: 5, name: "Standaardtekst 1" }
+        ];
+        this.articleTexts = [
+            { title: "title 1", description: "Omschrijving 1" },
+            { title: "title 2", description: "Omschrijving 2" },
+            { title: "title 3", description: "Omschrijving 3" },
+            { title: "title 4", description: "Omschrijving 4" },
+            { title: "title 5", description: "Omschrijving 5" },
+        ];
+        this.fields = { text: "name", value: "id" };
+    }
+    onOkClick() {
+        this.hide();
+    }
+    onPopupClose() {
+        this.hide();
+        this.hideOverview();
+        this.hideEditArtikelText();
+    }
+    hide() {
+        // TODO: throw hide event
+        this.visible = false;
+    }
+    onOverview() {
+        this.overviewSelected = true;
+    }
+    onOkOverviewClick() {
+        this.hideOverview();
+    }
+    hideOverview() {
+        this.overviewSelected = false;
+    }
+    onDetailLinkClick(bo) {
+        this.editArtikelText = true;
+    }
+    hideEditArtikelText() {
+        this.editArtikelText = false;
+    }
+    onOkEditArtikelTextClick() {
+        this.editArtikelText = false;
+    }
+}
+TransactionArticleTextComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "transaction-article-text",
+                template: `
+        <co-dialog [visible]="visible" (close)="onPopupClose()">
+          <ng-container header>{{ subHeader }}</ng-container>
+          <ng-container content>
+                <div class="tags-join-content" fxLayout fxLayoutGap="10px">
+                    <div class="column-separator">
+                        <co-input-text placeholder="Titel"></co-input-text>
+<!--transactiontransaction-->
+<!--                                label="Artikeltekst"-->
+<!--                        ></co-text-editor>-->
+                    </div>
+                    <div style="margin-left:5px;">
+                        <div style="margin-top:16px;">
+                            <ejs-dropdownlist
+                                    [dataSource]="collection"
+                                    [fields]="fields"
+                                    placeholder="Standaardteksten"
+                            ></ejs-dropdownlist>
+                        </div>
+                        <div style="margin-top:20px;">
+                            <co-input-checkbox
+                                    label="Artikelgebonden tekst"
+                                    name="articleBoundText">
+                            </co-input-checkbox>
+                        </div>
+                        <div style="margin-top:20px;">
+                            <label>Bestemd voor documenten</label>
+                            <ejs-chiplist id="chip-default">
+                                <e-chips>
+                                    <e-chip text="Apple" cssClass="e-primary"></e-chip>
+                                    <e-chip text="Microsoft" cssClass="e-info"></e-chip>
+                                    <e-chip text="Google" cssClass="e-success"></e-chip>
+                                    <e-chip text="Tesla" cssClass="e-warning"></e-chip>
+                                    <e-chip text="Intel" cssClass="e-danger"></e-chip>
+                                </e-chips>
+                            </ejs-chiplist>
+                        </div>
+                    </div>
+                </div>
+              </ng-container>
+              <ng-container footer>
+                <div class="footer" fxLayout fxLayoutAlign="center center" fxLayoutGap="10px" style="margin-top:30px;">
+                    <co-button label="OK" (click)="onOkClick()"></co-button>
+                    <co-button label="CANCEL" (click)="hide()"></co-button>
+                    <co-button label="OVERVIEW" (click)="onOverview()"></co-button>
+                </div>
+              </ng-container>
+        </co-dialog>
+
+        <co-dialog [visible]="overviewSelected" (close)="hideOverview()">
+          <ng-container header>Artikelgebonden teksten {{ subHeader }}</ng-container>
+          <ng-container content>
+                <div class="tags-join-content" fxLayout fxLayoutGap="10px">
+                    <div class="column-separator" style="width:75%">
+<!--                        <grid [data]="articleTexts" detailLink (detailLinkClick)="onDetailLinkClick($event)">-->
+<!--                            <grid-column key="title" header="TITLE" width="100px;"></grid-column>-->
+<!--                            <grid-column key="description" header="DESCRIPTION" width="200px"></grid-column>-->
+<!--                        </grid>-->
+                    </div>
+                    <div style="margin-left:5px;">
+                        <div style="margin-top:20px;">
+
+                            <co-input-checkbox
+                                    label="Artikelgebonden tekst"
+                                    name="articleBoundText"
+                                    value="true"
+                            ></co-input-checkbox>
+                        </div>
+                        <div style="margin-top:20px;">
+                            <label>Bestemd voor documenten</label>
+                            <ejs-chiplist id="chip-default">
+                                <e-chips>
+                                    <e-chip text="Apple" cssClass="e-primary"></e-chip>
+                                    <e-chip text="Microsoft" cssClass="e-info"></e-chip>
+                                    <e-chip text="Google" cssClass="e-success"></e-chip>
+                                    <e-chip text="Tesla" cssClass="e-warning"></e-chip>
+                                    <e-chip text="Intel" cssClass="e-danger"></e-chip>
+                                </e-chips>
+                            </ejs-chiplist>
+                        </div>
+                    </div>
+                </div>
+          </ng-container>
+          <ng-container footer>
+                <div class="footer" fxLayout fxPosition="row" fxLayoutAlign="center center" fxLayoutGap="10px" style="margin-top:30px;">
+                    <co-button label="OK" (click)="onOkOverviewClick()"></co-button>
+                    <co-button label="CANCEL" (click)="hideOverview()"></co-button>
+                </div>
+          </ng-container>
+        </co-dialog>
+
+        <co-dialog [visible]="editArtikelText"  (close)="hideEditArtikelText()">
+          <ng-container header>{{ subHeader }}</ng-container>
+          <ng-container content>
+                <div class="tags-join-content" fxLayout fxLayoutGap="10px">
+                    <div class="column-separator">
+                        <co-input-text placeholder="Titel"></co-input-text>
+<!--                        <co-text-editor-->
+<!--                                label="Artikeltekst"-->
+<!--                        ></co-text-editor>-->
+                    </div>
+                </div>
+          </ng-container>
+          <ng-container footer>
+              <div class="footer" fxLayout fxLayoutAlign="center center" fxLayoutGap="10px" style="margin-top:30px;">
+                  <co-button label="OK" (click)="onOkEditArtikelTextClick()"></co-button>
+                  <co-button label="CANCEL" (click)="hideEditArtikelText()"></co-button>
+              </div>
+          </ng-container>
+        </co-dialog>
+    `,
+                styles: [""]
+            },] }
+];
+TransactionArticleTextComponent.ctorParameters = () => [
+    { type: TransactionService }
+];
+TransactionArticleTextComponent.propDecorators = {
+    subHeader: [{ type: Input }]
+};
+
+class ServiceOrderComponent extends TransactionBaseComponent {
+    constructor(service, transactionEvents, iconCacheService) {
+        super(service);
+        this.service = service;
+        this.transactionEvents = transactionEvents;
+        this.iconCacheService = iconCacheService;
+        this.iconThickLines = CoreComponentsIcon.ThickLines;
+        this.iconThinLines = CoreComponentsIcon.ThinLines;
+        this.iconOrder = CoreComponentsIcon.Order;
+        this.viewModes = ContentViewMode;
+        this.canPlanDelivery = false;
+        this.showTotals = true;
+        this.contextMenuItems = [];
+        this.isRouteOptimizationConfigured = false;
+        this.activeViewMode = ContentViewMode.List;
+        this.floatButtonSelected = false;
+        this._subs = [];
+    }
+    get inListView() {
+        return this.activeViewMode === ContentViewMode.List;
+    }
+    get inGridView() {
+        return this.activeViewMode === ContentViewMode.Grid;
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._subs.push(this.service.transactionLoaded.subscribe((transactionInfoResponse) => {
+                if (transactionInfoResponse.isSuccess) {
+                    this.transaction = transactionInfoResponse;
+                    if (this.transaction && this.transaction.transactionInfo) {
+                        this.customerId = Number(this.transaction.transactionInfo.relation.relationNr);
+                        this.relationId = this.transaction.transactionInfo.relation.relationId;
+                    }
+                }
+            }), this.transactionEvents.rightSidebarClose.subscribe(() => {
+                this.moveFloatingButtonToRight();
+            }), this.transactionEvents.transactionLineClicked.subscribe((transactionLine) => {
+                this._selectedTransLine = transactionLine;
+                this.moveFloatingButtonToLeft();
+            }), this.transactionEvents.scrollContent.subscribe((event) => {
+                this.hideOrderTotals(event);
+            }));
+        });
+    }
+    ngOnDestroy() {
+        this._subs.forEach(sub => sub.unsubscribe());
+    }
+    animationFn() {
+        return trigger("showPopup", [
+            state("void", style({ transform: "translate3d(0, 0, 0)" })),
+            state("*", style({ transform: "translate3d(100%, 0, 0)" })),
+            transition("void <=> *", [
+                animate("200ms ease-in-out")
+            ])
+        ]);
+    }
+    trackByFn(index, line) {
+        return line.lineNr;
+    }
+    handleRowsSelected(rows) {
+        this._selectedTransLine = rows.find(x => x !== undefined);
+    }
+    handlePlanningRequest(event) {
+        // TODO: handlePlanningRequest... from new Planning package
+    }
+    moveFloatingButtonToLeft() {
+        if (this.floatButtonRightPosition === ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITHOUT_SIDEBAR) {
+            this.floatButtonRightPosition = ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITH_SIDEBAR;
+        }
+    }
+    moveFloatingButtonToRight() {
+        if (this.floatButtonRightPosition === ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITH_SIDEBAR) {
+            this.floatButtonRightPosition = ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITHOUT_SIDEBAR;
+        }
+    }
+    onOkClick() {
+        this.hide();
+    }
+    hide() {
+        this.floatButtonSelected = false;
+    }
+    floatButtonClick() {
+        this.floatButtonSelected = true;
+        this._transactionArticleTextComponent.visible = this.floatButtonSelected;
+    }
+    get subHeader() {
+        if (this._selectedTransLine && this._selectedTransLine !== undefined) {
+            return this._selectedTransLine.goodDescription;
+        }
+        return "";
+    }
+    hideOrderTotals(event) {
+        this.showTotals = false;
+    }
+}
+ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITHOUT_SIDEBAR = 50;
+ServiceOrderComponent.FLOAT_BUTTON_RIGHT_POSITION_WITH_SIDEBAR = 350;
+ServiceOrderComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: "service-order",
+                template: `
+      <div id="transaction-general-tab" style="height:100%;">
+        <transaction-header-block
+          [relationId]="relationId"
+          [transaction]="transaction"
+          [canPlanDelivery]="canPlanDelivery"
+          (planningRequestButtonClick)="handlePlanningRequest($event)"
+        ></transaction-header-block>
+        <div *ngIf="!isService">
+          <div class="transaction-view" fxLayout="row" fxLayoutGap="1px" fxLayoutAlign="flex-end">
+            <div class="view-mode-buttons">
+              <co-button [iconData]="iconCacheService.getIcon(iconThickLines)"
+                         [title]="'LIST_VIEW' | localize"
+                         (click)="this.activeViewMode = viewModes.List"
+                         class="triangle white"
+                         iconClass="medium light"></co-button>
+              <co-button [iconData]="iconCacheService.getIcon(iconThinLines)"
+                         [title]="'GRID_VIEW' | localize"
+                         (click)="this.activeViewMode = viewModes.Grid"
+                         class="triangle white"
+                         iconClass="medium light"></co-button>
+            </div>
+          </div>
+          <div *ngIf="this.activeViewMode === viewModes.List">
+            <transaction-order-line-view *ngFor="let line of transactionLines; trackBy:trackByFn;"
+                                         [line]="line"
+            ></transaction-order-line-view>
+          </div>
+          <div *ngIf="this.activeViewMode === viewModes.Grid">
+            <transaction-order-lines [transaction]="transaction"></transaction-order-lines>
+          </div>
+          <div class="floating-icon-wrapper" [style.right.px]="floatButtonRightPosition">
+          <icon [icon]="iconOrder"
+                class="light"
+                (click)="floatButtonClick()" id="floatingIcon"
+                [style.right.px]="floatButtonRightPosition"></icon>
+          </div>
+        </div>
+        <transaction-order-totals *ngIf="!isService"
+                                  [ngClass]="showTotals ? 'transaction-totals-show' : 'transaction-totals-hide'"></transaction-order-totals>
+      </div>
+
+      <transaction-article-text></transaction-article-text>
+    `,
+                styles: ["html,body{height:100%}body{margin:0;font-family:Roboto,\"Helvetica Neue\",sans-serif}.flex-center,:host :host{display:flex}.flex-center{flex-direction:row}:host :host{flex-direction:column}.flex-center{align-items:center!important;justify-content:center!important}.transaction-view .view-mode-buttons{margin-left:11px}:host :host{width:100%}:host :host{overflow:hidden}.triangle{border-radius:3px}.full-width{width:100%}.flex-center{margin:10px 0}:host :host{padding-bottom:60px}.page-wrapper :host{padding:20px;margin-bottom:60px}:host transaction-order-totals{display:flex;flex-direction:column;align-items:flex-end}:host .transaction-totals-show{padding:20px}:host .transaction-totals-hide{position:relative;bottom:0;right:0}::ng-deep #transaction_planning_agenda{top:160px!important;width:calc(100vw - 80px)!important}::ng-deep #transaction_planning_agenda .popup-card-title{padding:10px 20px;background:#74B77F;color:#fff}::ng-deep #transaction_planning_agenda .popup-card-title .header-wrapper{align-items:center!important}::ng-deep #transaction_planning_agenda .popup-card-title .separator{border-color:#fff!important}::ng-deep #transaction_planning_agenda .popup-card-title .header{font-size:15px;font-weight:normal}::ng-deep #transaction_planning_agenda .popup-card-title .sub-header{font-size:18px;color:#fff!important;font-weight:bold!important}::ng-deep #transaction_planning_agenda .popup-card-title button-select icon [fill]{fill:#fff}::ng-deep #transaction_planning_agenda .popup-card-content{overflow:hidden}@media only screen and (max-width: 599px){::ng-deep #transaction_planning_agenda{width:100vw!important}::ng-deep #transaction_planning_agenda .popup-card-content{padding:0}}.column-separator{padding-right:25px;border-right:1px solid #0000001c}.floating-icon-wrapper{position:fixed;bottom:50px;right:50px;display:flex;flex-shrink:0;align-items:center;justify-content:center;background:#475060;height:50px;width:50px;opacity:.5;transition:opacity .4s ease-in-out;border-radius:50%;overflow:hidden;box-shadow:0 0 6px #0009;-webkit-box-shadow:0px 0px 6px 0px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 6px 0px rgba(0,0,0,.6);cursor:pointer}.floating-icon-wrapper:hover{opacity:1;transition:opacity .4s ease-in-out}.floating-icon-wrapper ::ng-deep icon{height:44px!important;width:44px!important;color:#fff!important;flex-shrink:0}.transaction-wrapper{padding:0 20px}.view-mode-buttons co-button{padding:0}.transaction-view{display:flex;margin-top:10px;justify-content:stretch}.transaction-view .view-mode-buttons{display:flex;flex-direction:row}.transaction-view .view-mode-buttons button-select ::ng-deep button-colijn{border-radius:0}.transaction-view .view-mode-buttons button-select:first-child{margin-right:5px}.transaction-view .view-mode-buttons button-select:first-child ::ng-deep button-colijn{border-radius:3px}.transaction-view .view-mode-buttons button-select:nth-child(2) ::ng-deep button-colijn{border-top-left-radius:3px;border-bottom-left-radius:3px}.transaction-view .view-mode-buttons button-select:last-child ::ng-deep button-colijn{border-top-right-radius:3px;border-bottom-right-radius:3px}\n"]
+            },] }
+];
+ServiceOrderComponent.ctorParameters = () => [
+    { type: TransactionService },
+    { type: TransactionEventService },
+    { type: IconCacheService }
+];
+ServiceOrderComponent.propDecorators = {
+    _transactionArticleTextComponent: [{ type: ViewChild, args: [TransactionArticleTextComponent, { static: false },] }]
+};
+
+class TransactionOrderTotalsComponent extends TransactionBaseComponent {
+    constructor(service) {
+        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 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,
+                ],
+                declarations: [
+                    TemplateWrapperDirective,
+                    DefaultOkCancelButtonsComponent,
+                    IoneServiceOrderComponent,
+                    ServiceOrderComponent,
+                    TransactionOrderTotalsComponent,
+                    TransactionOrderLineViewComponent,
+                    TransactionOrderLinesComponent,
+                    TransactionRelationAddressComponent,
+                    TransactionArticleTextComponent,
+                    TransactionSidebarRightComponent,
+                    TransactionLineAccordionComponent,
+                    TransactionHeaderBlockComponent,
+                    TransactionServiceSummaryComponent,
+                    TransactionSummaryBlockComponent,
+                    TransactionServiceStatusComponent,
+                    TransactionOrderSummaryComponent,
+                    TransactionPaymentInfoComponent,
+                    TransactionRelationEditComponent,
+                    TransactionArticleSummaryComponent,
+                    TransactionDeliverySummaryComponent,
+                    TransactionProductContractSummaryComponent,
+                    TransactionProductSummaryComponent,
+                ],
+                providers: [
+                    DictionaryService,
+                    TransactionService,
+                    OptionsService
+                ],
+                entryComponents: [
+                    IoneServiceOrderComponent
+                ],
+                exports: [IoneServiceOrderComponent],
+                bootstrap: [IoneServiceOrderComponent]
+            },] }
+];
+
 //export * from "./app/component/ione-transaction.module";
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IoneCheckoutComponent, IoneCheckoutModule, IoneShoppingCartComponent, IoneShoppingCartModule, RetailTransactionCheckoutComponent as ɵa, CheckoutComponent as ɵb, ShoppingCartManagerComponent as ɵba, ShoppingCartComponent as ɵbb, ShoppingCartLineComponent as ɵbc, StockStatusIndicatorComponent as ɵbd, CharacteristicAnswerComponent as ɵbe, CheckoutOverviewComponent as ɵc, CheckoutOverviewBlockComponent as ɵd, CheckoutOverviewRelationEditComponent as ɵe, TransactionService as ɵf, IOneConnectorAdapterService as ɵg, CheckoutOverviewDeliveryEditComponent as ɵh, DictionaryService as ɵi, CheckoutLoginComponent as ɵj, OptionsService as ɵk, TransactionEventService as ɵl, CoreModule as ɵm, AppendPipe as ɵn, DeliveryTimePipe as ɵo, DateDurationPipe as ɵp, LocalizePipe as ɵq, CoCurrencyPipe as ɵr, SafeStylePipe as ɵs, ImageDisplayComponent as ɵt, NoImageDisplayComponent as ɵu, IconComponent as ɵv, CheckoutOverviewRelationAddressComponent as ɵw, CheckoutOverviewDeliveryAddressComponent as ɵx, CheckOutRelationSuggestionsListComponent as ɵy, CheckOutRelationSuggestionsListItemComponent as ɵz };
+export { IoneCheckoutComponent, IoneCheckoutModule, IoneServiceOrderComponent, IoneServiceOrderModule, IoneShoppingCartComponent, IoneShoppingCartModule, RetailTransactionCheckoutComponent as ɵa, CheckoutComponent as ɵb, ShoppingCartManagerComponent as ɵba, ShoppingCartComponent as ɵbb, ShoppingCartLineComponent as ɵbc, StockStatusIndicatorComponent as ɵbd, CharacteristicAnswerComponent as ɵbe, TemplateWrapperDirective as ɵbf, DefaultOkCancelButtonsComponent as ɵbg, ServiceOrderComponent as ɵbh, TransactionBaseComponent as ɵbi, TransactionArticleTextComponent as ɵbj, TransactionOrderTotalsComponent as ɵbk, TransactionOrderLineViewComponent as ɵbl, TransactionOrderLinesComponent as ɵbm, TransactionRelationAddressComponent as ɵbn, TransactionSidebarRightComponent as ɵbo, TransactionLineAccordionComponent as ɵbp, TransactionHeaderBlockComponent as ɵbq, TransactionRelationEditComponent as ɵbr, TransactionServiceSummaryComponent as ɵbs, TransactionSummaryBlockComponent as ɵbt, TransactionServiceStatusComponent as ɵbu, TransactionOrderSummaryComponent as ɵbv, TransactionPaymentInfoComponent as ɵbw, TransactionArticleSummaryComponent as ɵbx, TransactionDeliverySummaryComponent as ɵby, TransactionProductContractSummaryComponent as ɵbz, CheckoutOverviewComponent as ɵc, TransactionProductSummaryComponent as ɵca, CheckoutOverviewBlockComponent as ɵd, CheckoutOverviewRelationEditComponent as ɵe, TransactionService as ɵf, IOneConnectorAdapterService as ɵg, CheckoutOverviewDeliveryEditComponent as ɵh, DictionaryService as ɵi, CheckoutLoginComponent as ɵj, OptionsService as ɵk, TransactionEventService as ɵl, CoreModule as ɵm, AppendPipe as ɵn, DeliveryTimePipe as ɵo, DateDurationPipe as ɵp, LocalizePipe as ɵq, CoCurrencyPipe as ɵr, SafeStylePipe as ɵs, ImageDisplayComponent as ɵt, NoImageDisplayComponent as ɵu, IconComponent as ɵv, CheckoutOverviewRelationAddressComponent as ɵw, CheckoutOverviewDeliveryAddressComponent as ɵx, CheckOutRelationSuggestionsListComponent as ɵy, CheckOutRelationSuggestionsListItemComponent as ɵz };
 //# sourceMappingURL=colijnit-transaction.js.map