@colijnit/transaction 12.1.17 → 12.1.20

package/fesm2015/colijnit-transaction.js

@@ -46,7 +46,12 @@ import { GoodsReceiptStatusWithHistory } from '@colijnit/transactionapi/build/mo
 import { PaymentMethod } from '@colijnit/transactionapi/build/model/payment-method.bo';
 import { RelationStatus } from '@colijnit/transactionapi/build/enum/relation-status.enum';
 import { ResolveLinePendingReasonRequest } from '@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo';
-import { FormMasterService, FormComponent, CoDialogModule, ButtonModule, InputComboBoxModule, InputTextModule, FormModule, InputRadioButtonModule, IconModule, InputCheckboxModule, InputListboxModule, DropDownModule, InputNumberPickerModule, PriceDisplayPipeModule, InputDatePickerModule, CoDialogPromptModule, MultiSelectListModule, PopupModule, CoSidebarModule, CoGridModule, CoRichTextEditorModule, Carousel3dModule, InputTextareaModule, CollapsibleModule, ColumnAlign, SimpleGridColumnDirective, InputTextComponent, SimpleGridModule, GridToolbarButtonModule, InputSearchModule, FilterItemModule, InputDateRangePickerModule } from '@colijnit/corecomponents_v12';
+import { Articles } from '@colijnit/articleapi/build/articles';
+import { StockLocation } from '@colijnit/articleapi/build/model/stock-location.bo';
+import { ArticleLight } from '@colijnit/articleapi/build/model/article-light.bo';
+import { TurnoverGroupImage } from '@colijnit/articleapi/build/model/turnover-group-image.bo';
+import { MainArticle } from '@colijnit/articleapi/build/model/main-article.bo';
+import { FormMasterService, FormComponent, CoDialogModule, ButtonModule, InputComboBoxModule, InputTextModule, FormModule, InputRadioButtonModule, IconModule, InputCheckboxModule, InputListboxModule, DropDownModule, ClickoutsideModule, InputNumberPickerModule, PriceDisplayPipeModule, InputDatePickerModule, CoDialogPromptModule, MultiSelectListModule, PopupModule, CoSidebarModule, CoGridModule, CoRichTextEditorModule, Carousel3dModule, InputTextareaModule, CollapsibleModule, ColumnAlign, SimpleGridColumnDirective, InputTextComponent, SimpleGridModule, GridToolbarButtonModule, InputSearchModule, FilterItemModule, InputDateRangePickerModule } from '@colijnit/corecomponents_v12';
 import { FlexModule } from '@angular/flex-layout';
 import { CommunicationType } from '@colijnit/transactionapi/build/enum/communication-type.enum';
 import { ContactOption } from '@colijnit/transactionapi/build/model/contact-option.bo';
@@ -72,11 +77,11 @@ import { ReceiveGoodsForPurchaseOrderCorrectionRequest } from '@colijnit/transac
 import { PurchaseOrderLineReceiptCorrectionDetails } from '@colijnit/transactionapi/build/model/purchase-order-line-receipt-correction-details.bo';
 import { PurchaseOrderLineReceiptDetails } from '@colijnit/transactionapi/build/model/purchase-order-line-receipt-details.bo';
 import { ReceiveGoodsForPurchaseOrderRequest } from '@colijnit/transactionapi/build/model/receive-goods-for-purchase-order-request.bo';
-import { Articles } from '@colijnit/articleapi/build/articles';
-import { StockLocation } from '@colijnit/articleapi/build/model/stock-location.bo';
 import { GoodsReceiptStatus } from '@colijnit/transactionapi/build/model/goods-receipt-status.bo';
 import { TransactionSearchViewRequest } from '@colijnit/transactionapi/build/model/transaction-search-view-request';
 import { RelationKind } from '@colijnit/transactionapi/build/enum/relation-kind.enum';
+import { ArticleExtendedRequest } from '@colijnit/articleapi/build/model/article-extended-request';
+import { QuantityInHistoricState } from '@colijnit/transactionapi/build/enum/quantity-in-historic-state.enum';
 
 var LanguageCode;
 (function (LanguageCode) {
@@ -267,13 +272,20 @@ class Dictionary {
                 "FEMALE": "Vrouw",
                 "FIRST_NAME": "Voornaam",
                 "FREE": "Gratis",
+                "FULLY_ALLOCATED": "Volledig toegewezen",
+                "FULLY_DELIVERED": "Volledig geleverd",
+                "FULLY_INVOICED": "Volledig gefactureerd",
+                "FULLY_TO_BE_PICKED": "Volledig te picken",
+                "FULLY_PICKED": "Volledig gepickt",
                 "GROSS_PRICE": "Bruto prijs",
                 "GOOD_DESCRIPTION": "Artikelomschrijving",
                 "HANDLED_BY": "Verkoper",
                 "HOUSE_NO": "Huisnummer",
                 "HOUSE_NO_ADDITION": "Huisnummer toevoeging",
+                "IN": "In",
                 "INACTIVE_TRANSACTIONS": "Inactieve transacties",
                 "INCLUDING_RETURNS": "Inclusief retouren",
+                "IN_SEARCHORDERS": "In verkooporders",
                 "IN_ORDER": "In bestelling",
                 "IN_OUT_COLLECTION": "In-uit-collectie",
                 "INVITE_TO_ACCOUNT": "Uitnodigen voor account",
@@ -306,6 +318,11 @@ class Dictionary {
                 "NO_IMAGE": "Geen afbeelding",
                 "NOT_AFTER": "Niet later dan",
                 "NOT_BEFORE": "Niet eerder dan",
+                "NOTHING_ALLOCATED": "Niets toegewezen",
+                "NOTHING_DELIVERED": "Niets geleverd",
+                "NOTHING_INVOICED": "Niets gefactureerd",
+                "NOTHING_TO_BE_PICKED": "Niets te picken",
+                "NOTHING_PICKED": "Niets gepickt",
                 "NR": "Nummer",
                 "NUMBER": "Aantal",
                 "ON_DATE": "Op datum",
@@ -330,6 +347,11 @@ class Dictionary {
                 "PAID_DOWN2": "Aanbetaald",
                 "PART_DELIVERY": "Deellevering",
                 "PART_DELIVERIES": "Deelleveringen",
+                "PARTLY_ALLOCATED": "Gedeeltelijk toegewezen",
+                "PARTLY_DELIVERED": "Gedeeltelijk geleverd",
+                "PARTLY_INVOICED": "Gedeeltelijk gefactureerd",
+                "PARTLY_TO_BE_PICKED": "Gedeeltelijk te picken",
+                "PARTLY_PICKED": "Gedeeltelijk gepickt",
                 "PASSWORD": "Wachtwoord",
                 "PAY": "Betalen",
                 "PAYMENT": "Betaling",
@@ -368,8 +390,10 @@ class Dictionary {
                 "RELATION_NUMBER": "Relatienummer",
                 "REMARKS": "Opmerkingen",
                 "SALUTATION": "Aanhef",
+                "SALESORDERS": "Verkooporders",
                 "SAME_AS_DELIVERY": "Hetzelfde als bezorgadres",
                 "SAVE": "Opslaan",
+                "SEARCH": "Zoeken",
                 "SEARCH_IN_COLLECTION": "Zoek binnen collectie...",
                 "SEARCH_ADD_ARTICLE": "Zoeken en toevoegen artikel",
                 "SELECT": "Selecteren",
@@ -548,8 +572,10 @@ class Dictionary {
                 "HANDLED_BY": "Handled by",
                 "HOUSE_NO": "Housenumber",
                 "HOUSE_NO_ADDITION": "Housenumber addition",
+                "IN": "In",
                 "INACTIVE_TRANSACTIONS": "Inactieve transacties",
                 "INCLUDING_RETURNS": "Including returns",
+                "IN_SEARCHORDERS": "In sales orders",
                 "IN_ORDER": "In order",
                 "IN_OUT_COLLECTION": "In-out-collection",
                 "INVITE_TO_ACCOUNT": "Invite account",
@@ -634,9 +660,11 @@ class Dictionary {
                 "REFERENCE_RELATION": "Ref. relation",
                 "RELATION_NUMBER": "Relation number",
                 "REMARKS": "Remarks",
+                "SALESORDERS": "Sales orders",
                 "SALUTATION": "Salutation",
                 "SAME_AS_DELIVERY": "Same as delivery address",
                 "SAVE": "Save",
+                "SEARCH": "Search",
                 "SEARCH_ADD_ARTICLE": "Search and add article",
                 "SEARCH_IN_COLLECTION": "Search in collection...",
                 "SELECT": "Select",
@@ -1542,6 +1570,7 @@ class TransactionConnectorService {
     connect() {
         return __awaiter(this, void 0, void 0, function* () {
             this.connector = new Transaction(this._optionsService.options);
+            this._optionsService.options.session = this.connector.session;
         });
     }
     getArticleFullObject(goodId) {
@@ -2693,11 +2722,112 @@ DialogService.ctorParameters = () => [
     { type: Injector }
 ];
 
+class ArticleConnectorService {
+    constructor(_optionsService, _collectionService) {
+        this._optionsService = _optionsService;
+        this._collectionService = _collectionService;
+        this._boFactory = new BusinessObjectFactory();
+        this._optionsService.optionsInitialized.subscribe((initialized) => {
+            if (initialized) {
+                this.connect();
+            }
+        });
+    }
+    connect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.connector = new Articles(this._optionsService.options);
+        });
+    }
+    getWarehouseLocations(warehouseNr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                const collection = this._collectionService.getCollection(StockLocation.name, [warehouseNr]);
+                if (collection) {
+                    resolve(collection);
+                }
+                else {
+                    return this.connector.getStockManagementLocations(warehouseNr).then((response) => {
+                        if (response && response.validationResult && response.validationResult.success) {
+                            const collection = this._boFactory.makeBOArrayFromRawBackendDataArray(StockLocation, response.resultObjects);
+                            this._collectionService.cacheCollection(StockLocation.name, collection, [warehouseNr]);
+                            resolve(collection);
+                        }
+                        else {
+                            reject(response.validationMessagesAsString);
+                        }
+                    });
+                }
+            });
+        });
+    }
+    searchArticles(request) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.searchArticlesLight(request).then((response) => {
+                    if (response && response.validationResult && response.validationResult.success) {
+                        const collection = this._boFactory.makeBOArrayFromRawBackendDataArray(ArticleLight, response.resultObjects);
+                        resolve(collection);
+                    }
+                    else {
+                        reject(response.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getMainArticles() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getMainArticles().then((response) => {
+                    if (response && response.validationResult && response.validationResult.success) {
+                        const collection = this._boFactory.makeBOArrayFromRawBackendDataArray(MainArticle, response.resultObjects);
+                        resolve(collection);
+                    }
+                    else {
+                        reject(response.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getTurnoverGroups(category) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                const collection = this._collectionService.getCollection(TurnoverGroupImage.name);
+                if (collection) {
+                    return resolve(collection);
+                }
+                return this.connector.getTurnoverGroups(category).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        const collection = this._boFactory.makeBOArrayFromRawBackendDataArray(TurnoverGroupImage, result.resultObjects);
+                        this._collectionService.cacheCollection(TurnoverGroupImage.name, collection);
+                        resolve(collection);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+}
+ArticleConnectorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ArticleConnectorService_Factory() { return new ArticleConnectorService(i0.ɵɵinject(OptionsService), i0.ɵɵinject(CollectionCacheService)); }, token: ArticleConnectorService, providedIn: "root" });
+ArticleConnectorService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+ArticleConnectorService.ctorParameters = () => [
+    { type: OptionsService },
+    { type: CollectionCacheService }
+];
+
 class PendingReasonService {
-    constructor(dialogService, options, connector) {
+    constructor(dialogService, options, connector, articleConnector) {
         this.dialogService = dialogService;
         this.options = options;
         this.connector = connector;
+        this.articleConnector = articleConnector;
         this.transactionUpdated = new BehaviorSubject(undefined);
         this.applicationUser = false;
         this.currentTransaction = new TransactionInfoResponse();
@@ -2828,7 +2958,7 @@ class PendingReasonService {
         });
     }
 }
-PendingReasonService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PendingReasonService_Factory() { return new PendingReasonService(i0.ɵɵinject(DialogService), i0.ɵɵinject(OptionsService), i0.ɵɵinject(TransactionConnectorService)); }, token: PendingReasonService, providedIn: "root" });
+PendingReasonService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PendingReasonService_Factory() { return new PendingReasonService(i0.ɵɵinject(DialogService), i0.ɵɵinject(OptionsService), i0.ɵɵinject(TransactionConnectorService), i0.ɵɵinject(ArticleConnectorService)); }, token: PendingReasonService, providedIn: "root" });
 PendingReasonService.decorators = [
     { type: Injectable, args: [{
                 providedIn: "root"
@@ -2837,7 +2967,8 @@ PendingReasonService.decorators = [
 PendingReasonService.ctorParameters = () => [
     { type: DialogService },
     { type: OptionsService },
-    { type: TransactionConnectorService }
+    { type: TransactionConnectorService },
+    { type: ArticleConnectorService }
 ];
 
 class TransactionService extends PendingReasonService {
@@ -3140,12 +3271,21 @@ class TransactionService extends PendingReasonService {
     getInOutCollection(languageCode) {
         return this.connector.getInOutCollection(languageCode);
     }
+    getTurnoverGroups() {
+        return this.articleConnector.getTurnoverGroups();
+    }
     getTransactionArticleWarehouses(goodId) {
         return this.connector.getTransactionArticleWarehouses(goodId);
     }
     getMarketingCodes() {
         return this.connector.getMarketingCodes();
     }
+    getArticles(request) {
+        return this.articleConnector.searchArticles(request);
+    }
+    getMainArticles() {
+        return this.articleConnector.getMainArticles();
+    }
     insertCustomer(relation) {
         return this.connector.insertCustomer(relation);
     }
@@ -3168,6 +3308,7 @@ class TransactionService extends PendingReasonService {
     getDeliveryOptions() {
         return this.connector.getDeliveryOptions();
     }
+    // todo: move to relation api?
     getRelationListObjects(relationRequest) {
         return this.connector.getRelationListObjects(relationRequest);
     }
@@ -3415,7 +3556,7 @@ class TransactionService extends PendingReasonService {
         });
     }
 }
-TransactionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionService_Factory() { return new TransactionService(i0.ɵɵinject(DialogService), i0.ɵɵinject(OptionsService), i0.ɵɵinject(TransactionConnectorService)); }, token: TransactionService, providedIn: "root" });
+TransactionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionService_Factory() { return new TransactionService(i0.ɵɵinject(DialogService), i0.ɵɵinject(OptionsService), i0.ɵɵinject(TransactionConnectorService), i0.ɵɵinject(ArticleConnectorService)); }, token: TransactionService, providedIn: "root" });
 TransactionService.decorators = [
     { type: Injectable, args: [{
                 providedIn: "root"
@@ -3562,6 +3703,7 @@ var Icon;
     Icon["BarsFilter"] = "bars_filter";
     Icon["CalendarDay"] = "calendar_day";
     Icon["Cancel"] = "cancel";
+    Icon["CartCheck"] = "cart_check";
     Icon["CartFlatbedBoxesSolid"] = "cart_flatbed_boxes_solid";
     Icon["CartShoppingSolid"] = "cart_shopping_solid";
     Icon["CashRegister"] = "cash_register";
@@ -3578,8 +3720,10 @@ var Icon;
     Icon["PalletBoxesSolid"] = "pallet_boxes_solid";
     Icon["PlusRound"] = "plus_round";
     Icon["Purchase"] = "purchase";
+    Icon["Resize"] = "resize";
     Icon["ShelvesSolid"] = "shelves_solid";
     Icon["SidePanel"] = "side_panel";
+    Icon["SlideIn"] = "slide_in";
     Icon["SyncAlt"] = "sync_alt";
     Icon["Tag"] = "tag";
     Icon["ThickLines"] = "thick_lines";
@@ -4125,6 +4269,7 @@ const IconSvg = {
     "bars_filter": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M264 392H183.1C170.8 392 160 402.8 160 415.1C160 429.2 170.8 440 183.1 440h80C277.2 440 288 429.2 288 416C288 402.8 277.2 392 264 392zM424 72H23.1C10.8 72 0 82.8 0 95.1S10.8 120 23.1 120H424c13.2 0 24-10.8 24-23.1S437.2 72 424 72zM360 232H87.1C74.8 232 64 242.8 64 255.1C64 269.2 74.8 280 87.1 280h272C373.2 280 384 269.2 384 256C384 242.8 373.2 232 360 232z\"/></svg>",
     "calendar_day": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 50 50\" enable-background=\"new 0 0 50 50\" ><g><path fill=\"#022D42\" d=\"M35.4,13.7H14.6c-0.6,0-1,0.5-1,1V20h22.9v-5.2C36.4,14.2,36,13.7,35.4,13.7z M19,18.8c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8c1,0,1.8,0.8,1.8,1.8C20.8,18,20,18.8,19,18.8z M31,18.8c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8C32.7,18,32,18.8,31,18.8z\"/><path fill=\"#022D42\" d=\"M35.4,22.3v12.6L31.3,39H14.6c0,0,0,0,0,0V22.3H35.4 M36.4,21.3H13.6V39c0,0.6,0.5,1,1,1h17.2l4.7-4.7V21.3L36.4,21.3z\"/><rect x=\"18.2\" y=\"10\" fill=\"#022D42\" width=\"1.6\" height=\"5.2\"/><rect x=\"30.2\" y=\"10\" fill=\"#022D42\" width=\"1.6\" height=\"5.2\"/><rect x=\"18.6\" y=\"30.5\" fill=\"#022D42\" width=\"3.4\" height=\"3.4\"/><rect x=\"19.1\" y=\"24.8\" opacity=\"0.1\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"19.1\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"19.1\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"22.2\" y=\"24.8\" opacity=\"0.1\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"22.2\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"22.2\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"22.2\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"25.4\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"25.4\" y=\"24.8\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"25.4\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"25.4\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"31.6\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"31.6\" y=\"24.8\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"31.6\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"28.5\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"28.5\" y=\"24.8\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"28.5\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"28.5\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"16\" y=\"24.8\" opacity=\"0.1\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"16\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"16\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"16\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/></g></svg>",
     "cancel": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"36 35.16 30.45 35.16 14 14.84 19.55 14.84 36 35.16\" fill=\"#484f60\"/><polygon points=\"14 35.16 19.55 35.16 36 14.84 30.45 14.84 14 35.16\" fill=\"#484f60\"/></svg>",
+    "cart_check": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><g ><g ><g><g opacity=\".75\"><path d=\"M16.58,29.12c-.99,0-1.8,.81-1.8,1.8s.81,1.8,1.8,1.8,1.8-.81,1.8-1.8-.81-1.8-1.8-1.8Z\" fill=\"#484f60\"/><path d=\"M16.51,24.98c-.67,0-1.38-.52-1.57-1.16l-2.31-5.61c-.19-.64,.19-1.22,.86-1.28l19.71-2.51c.67-.06,1.12,.42,1,1.08l-.89,3.99c.66,.15,1.3,.36,1.91,.63l1.38-6.84c.12-.66-.34-1.15-1-1.08l-24.68,2.93c-.67,.06-1.06,.64-.87,1.28l3.34,9.44c.19,.64,.89,1.17,1.56,1.17h5.92c.19-.71,.45-1.38,.77-2.02h-5.13Z\" fill=\"#484f60\"/><path d=\"M39.01,11.31c-.66,.14-1.27,.79-1.37,1.46l-.42,2.9c-.1,.66,.31,.98,.9,.7,.59-.28,1.19-1.04,1.33-1.7l.51-2.42c.14-.66-.28-1.08-.94-.94h-.02Z\" fill=\"#484f60\"/></g><g><path d=\"M31,21.72c4.41,0,8,3.59,8,8s-3.59,8-8,8-8-3.59-8-8,3.59-8,8-8m0-1c-4.97,0-9,4.03-9,9s4.03,9,9,9,9-4.03,9-9-4.03-9-9-9h0Z\" fill=\"#484f60\"/><polygon points=\"30.63 34.72 26.79 29.33 28.31 28.25 30.34 31.11 33.54 24.72 35.21 25.55 30.63 34.72\" fill=\"#484f60\"/></g></g></g></g><g /></svg>",
     "cart_flatbed_boxes_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\"><path d=\"M448 160h64c17.6 0 32-14.4 32-32V64c0-17.6-14.4-32-32-32h-64c-17.6 0-32 14.4-32 32v64C416 145.6 430.4 160 448 160zM448 320h128c17.6 0 32-14.4 32-32V224c0-17.6-14.4-32-32-32h-128c-17.6 0-32 14.4-32 32v64C416 305.6 430.4 320 448 320zM224 320h128c17.6 0 32-14.4 32-32V64c0-17.6-14.4-32-32-32H224C206.4 32 192 46.4 192 64v224C192 305.6 206.4 320 224 320zM640 415.1c0 17.6-14.4 32-32 31.1l-66.88-.0011c1.787 5.027 2.907 10.36 2.907 16c0 26.51-21.5 48-48.01 48c-26.51 0-47.99-21.49-47.99-48c0-5.641 1.141-10.97 2.928-16H253.1C254.9 453 256 458.4 256 464C256 490.5 234.5 512 208 512S160 490.5 160 464c0-5.641 1.13-10.97 2.917-16l-66.92 .0011C78.4 448 64 433.6 64 415.1V80C64 71.16 56.84 64 48 64H31.1C14.4 64 0 49.6 0 32S14.4 0 31.1 0H64c35.2 0 64 28.8 64 64v320h480C625.6 384 640 398.4 640 415.1z\"/></svg>",
     "cart_shopping_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M96 0C107.5 0 117.4 8.19 119.6 19.51L121.1 32H541.8C562.1 32 578.3 52.25 572.6 72.66L518.6 264.7C514.7 278.5 502.1 288 487.8 288H170.7L179.9 336H488C501.3 336 512 346.7 512 360C512 373.3 501.3 384 488 384H159.1C148.5 384 138.6 375.8 136.4 364.5L76.14 48H24C10.75 48 0 37.25 0 24C0 10.75 10.75 0 24 0H96zM128 464C128 437.5 149.5 416 176 416C202.5 416 224 437.5 224 464C224 490.5 202.5 512 176 512C149.5 512 128 490.5 128 464zM512 464C512 490.5 490.5 512 464 512C437.5 512 416 490.5 416 464C416 437.5 437.5 416 464 416C490.5 416 512 437.5 512 464z\"/></svg>",
     "cash_register": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M35.39,18.12H14.62L10,29.66H40ZM23,19.29H27l.1,1.6H22.87Zm-.13,2h4.32l.12,1.81H22.72Zm-.15,2.3h4.62l.14,2.08h-4.9ZM17.9,19.29H22l-.16,1.6H17.54Zm-.46,2h4.32l-.18,1.81H17Zm-.53,2.3h4.62l-.2,2.08h-4.9Zm-1.16,5.06.55-2.42H27.49l.16,2.42ZM28,19.29H32.1l.36,1.6H28.2Zm.2,2h4.32L33,23.12H28.42Zm.23,2.3h4.62l.48,2.08h-4.9Zm.5,5.06-.24-2.42h5l.55,2.42Z\" fill=\"#484f60\"/><path d=\"M10,29.66v9.23H40V29.66Zm27.69,6.92H12.31V32H37.69Z\" fill=\"#484f60\"/><path d=\"M15.63,11.11v7.58H34.37V11.11Zm17.31,6.15H17.06V12.54H32.94Z\" fill=\"#484f60\"/></svg>",
@@ -4141,8 +4286,10 @@ const IconSvg = {
     "pallet_boxes_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\"><path d=\"M96 255.1L288 256c17.6 0 32-14.4 32-32V31.1c0-17.6-14.4-31.1-32-31.1L96 0c-17.6 0-32 14.4-32 32V224C64 241.6 78.4 255.1 96 255.1zM416 255.1h128c17.6 0 32-14.4 32-31.1v-128c0-17.6-14.4-32-32-32h-128c-17.6 0-32 14.4-32 32v128C384 241.6 398.4 255.1 416 255.1zM624 384c8.75 0 16-7.25 16-16v-32c0-8.75-7.25-16-16-16h-608C7.25 320 0 327.3 0 336v32C0 376.8 7.25 384 16 384H64v64H16C7.25 448 0 455.3 0 464v32C0 504.8 7.25 512 16 512h608c8.75 0 16-7.25 16-16v-32c0-8.75-7.25-16-16-16H576v-64H624zM288 448H128v-64h160V448zM512 448h-160v-64h160V448z\"/></svg>",
     "plus_round": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"-288 379 35 35\" enable-background=\"new -288 379 35 35\" ><path fill=\"#29363E\" d=\"M-270.5,381.5c-8.3,0-15,6.7-15,15c0,8.3,6.7,15,15,15s15-6.7,15-15C-255.5,388.2-262.2,381.5-270.5,381.5z M-261.1,397.3c0,0.9-0.7,1.6-1.6,1.6h-5.5v5.5c0,0.9-0.7,1.6-1.6,1.6h-1.6c-0.9,0-1.6-0.7-1.6-1.6v-5.5h-5.5c-0.9,0-1.6-0.7-1.6-1.6v-1.6c0-0.9,0.7-1.6,1.6-1.6h5.5v-5.5c0-0.9,0.7-1.6,1.6-1.6h1.6c0.9,0,1.6,0.7,1.6,1.6v5.5h5.5c0.9,0,1.6,0.7,1.6,1.6V397.3z\"/></svg>",
     "purchase": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><g opacity=\"0.75\"><polygon points=\"33.34 25.04 27.34 28.52 33.35 31.97 39.34 28.49 33.34 25.04\" fill=\"#484f60\"/><polygon points=\"33.99 33.08 39.99 29.6 40 36.53 34.01 40.01 33.99 33.08\" fill=\"#484f60\" opacity=\"0.5\"/><polygon points=\"26.72 36.55 26.71 29.63 32.71 33.08 32.72 40.01 26.72 36.55\" fill=\"#484f60\" opacity=\"0.25\"/><polygon points=\"12.78 28.54 18.79 32 24.78 28.52 18.77 25.07 12.78 28.54\" fill=\"#484f60\"/><polygon points=\"19.43 33.1 25.42 29.63 25.44 36.56 19.44 40.03 19.43 33.1\" fill=\"#484f60\" opacity=\"0.5\"/><polygon points=\"12.15 36.58 12.14 29.65 18.15 33.11 18.16 40.04 12.15 36.58\" fill=\"#484f60\" opacity=\"0.25\"/><polygon points=\"32.04 15.89 26.03 12.44 22.09 14.73 27.52 14.73 24.03 18.21 26.05 19.37 32.04 15.89\" fill=\"#484f60\"/><polygon points=\"32.68 17 26.69 20.48 26.7 27.41 32.7 23.93 32.68 17\" fill=\"#484f60\" opacity=\"0.5\"/><polygon points=\"23.1 19.15 19.41 22.83 19.41 23.95 25.42 27.41 25.41 20.48 23.1 19.15\" fill=\"#484f60\" opacity=\"0.25\"/></g><polygon points=\"19.03 16.34 19.03 10.3 14.61 10.3 14.61 16.34 14.61 16.34 10 16.34 16.82 23.16 23.64 16.34 19.03 16.34\" fill=\"#484f60\"/></svg>",
+    "resize": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 51 51\"><polygon points=\"1.1 49.9 1.1 30.6 7.8 37.3 37.3 8 30.6 1.3 49.9 1.3 49.9 20.6 43.2 13.9 13.7 43.2 20.5 49.9 1.1 49.9\" fill=\"#4d5050\"/></svg>",
     "shelves_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\"><path d=\"M608 0c-17.6 0-32 14.4-32 31.1V160H64V31.1C64 14.4 49.6 0 32 0S0 14.4 0 31.1v480h64v-32h512v32h64v-480C640 14.4 625.6 0 608 0zM576 416H64V224h512V416zM368 128h96C472.8 128 480 120.8 480 112v-96C480 7.25 472.8 0 464 0h-96C359.2 0 352 7.25 352 16v96C352 120.8 359.2 128 368 128zM112 384h96C216.8 384 224 376.8 224 368v-96C224 263.2 216.8 256 208 256h-96C103.2 256 96 263.2 96 272v96C96 376.8 103.2 384 112 384zM272 384h96c8.75 0 16-7.25 16-16v-96C384 263.2 376.8 256 368 256h-96C263.2 256 256 263.2 256 272v96C256 376.8 263.2 384 272 384z\"/></svg>",
     "side_panel": "<svg width=\"47px\" height=\"43px\" viewBox=\"0 0 47 43\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><defs><image width=\"47\" height=\"43\" xlink:href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAArCAYAAADottG6AAAABHNCSVQICAgIfAhkiAAAAHtJREFUWIXt18EJwCAQAEENKSNv60gVgVQYSBWpw3f6OHvQx3Kw8xcX0QNrRERJaqMDVhhPMZ5iPMV4ivEU4ynGU/bZhb3/5Xm/pc3v6yytHdPrq58RiPEUHywl9bUxnuKDpaS+NsZTUsennjapT95RSTGeYjzFeErq+AEBrixGEVJ5mAAAAABJRU5ErkJggg==\" /></defs><use xlink:href=\"#img_1\" fill=\"#FFFFFF\" stroke=\"none\" /></svg>",
+    "slide_in": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M12,12.17H38v26H12ZM36.76,13.4H13.24V36.93H36.76Z\" fill=\"#484f60\"/><polygon points=\"33.71 23.42 28.41 23.42 28.41 20.43 24.13 24.72 28.41 29.01 28.41 26.02 33.71 26.02 33.71 23.42\" fill=\"#484f60\"/><rect x=\"12\" y=\"12.17\" width=\"9\" height=\"26\" fill=\"#484f60\"/></svg>",
     "sync_alt": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z\"/></svg>",
     "tag": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M40,29.15v-.68a5.28,5.28,0,0,0-1.34-3.25L24.78,11.34A5.34,5.34,0,0,0,21.53,10H11.9A1.91,1.91,0,0,0,10,11.9v9.63a5.28,5.28,0,0,0,1.34,3.25L25.22,38.66A5.28,5.28,0,0,0,28.47,40h.68a5.28,5.28,0,0,0,3.24-1.34l6.27-6.27A5.28,5.28,0,0,0,40,29.15ZM13.13,16.72a2.54,2.54,0,1,1,3.59,0A2.55,2.55,0,0,1,13.13,16.72Zm15.9,19L17.84,24.55l1.34-1.34L30.37,34.4Zm2.69-2.69L20.52,21.87l1.35-1.35,11.19,11.2Zm2.68-2.69L23.21,19.18l1.34-1.34L35.75,29Z\" fill=\"#484f60\"/></svg>",
     "thick_lines": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"10\" y=\"12.67\" width=\"30\" height=\"7\" fill=\"#484f60\"/><rect x=\"10\" y=\"21.67\" width=\"30\" height=\"7\" fill=\"#484f60\"/><rect x=\"10\" y=\"30.67\" width=\"30\" height=\"7\" fill=\"#484f60\"/></svg>",
@@ -5946,6 +6093,170 @@ TransactionImageService.ctorParameters = () => [
     { type: TransactionConnectorService }
 ];
 
+// Direction type for regular straight directions.
+var Direction;
+(function (Direction) {
+    Direction["Right"] = "right";
+    Direction["Left"] = "left";
+    Direction["Up"] = "top";
+    Direction["Down"] = "bottom";
+})(Direction || (Direction = {}));
+
+class TransactionLineActionButtonsComponent {
+    constructor(iconCacheService, _transactionService, _dictionaryService) {
+        this.iconCacheService = iconCacheService;
+        this._transactionService = _transactionService;
+        this._dictionaryService = _dictionaryService;
+        this.icons = Icon;
+        this.alignDirection = Direction.Down;
+        this.waitingForUserAction = new EventEmitter();
+        this.sidePanelButtonClicked = new EventEmitter();
+        this.showActionButtons = false;
+        this.showActionButtonsDelayed = false;
+        this.showTransactionArticleText = false;
+        this.showTransactionArticleTextOverview = false;
+    }
+    showClass() {
+        return true;
+    }
+    ngOnInit() {
+        this.transactionKind = this._transactionService.currentTransaction.transactionInfo.transactionKind;
+    }
+    handleShowHideClick() {
+        this.showActionButtons = !this.showActionButtons;
+        setTimeout(() => {
+            this.showActionButtonsDelayed = !this.showActionButtonsDelayed;
+        }, 1);
+    }
+    handleTransactionArticleTextOverview() {
+        this.articleTextHeader = this._dictionaryService.get("TEXT_ARTICLE_BOUND", true, this.transactionLine.articleNumber);
+        this.textToEdit = undefined;
+        this._showArticleTextOverviewDialog();
+        this.showActionButtons = false;
+        this.showActionButtonsDelayed = false;
+    }
+    handleTransactionArticleText() {
+        this.articleTextHeader = this._dictionaryService.get("TEXT_ARTICLE_BOUND", true, this.transactionLine.articleNumber);
+        this.textToEdit = undefined;
+        this.showArticleTextDialog();
+        this.showActionButtons = false;
+        this.showActionButtonsDelayed = false;
+    }
+    handleShowSidePanel() {
+        this.sidePanelButtonClicked.next(this.transactionLine);
+        this.waitingForUserAction.next(true);
+        this.showActionButtons = false;
+        this.showActionButtonsDelayed = false;
+    }
+    showOverviewButton() {
+        return this.transactionKind === TransactionKind.PurchaseOrder ||
+            this.transactionKind === TransactionKind.SalesOrder;
+    }
+    showAddTextButton() {
+        return this.transactionKind === TransactionKind.PurchaseOrder ||
+            this.transactionKind === TransactionKind.SalesOrder;
+    }
+    showSidebarButton() {
+        return this.transactionKind === TransactionKind.PurchaseOrder ||
+            this.transactionKind === TransactionKind.SalesOrder;
+    }
+    saveTransactionArticleLineText(transactionAddTextLineRequest) {
+        this._transactionService.addTextLine(transactionAddTextLineRequest.showOnDocuments, transactionAddTextLineRequest.text, 0, true, transactionAddTextLineRequest.refArticleLineNr).then(() => {
+            this._hideArticleTextDialog();
+        });
+    }
+    closeTransactionArticleText(event) {
+        this._hideArticleTextDialog();
+    }
+    closeTransactionArticleTextOverview(event) {
+        this._hideArticleTextOverviewDialog();
+    }
+    showArticleTextDialog() {
+        this.showTransactionArticleText = true;
+        this.waitingForUserAction.next(true);
+    }
+    _hideArticleTextDialog() {
+        this.showTransactionArticleText = false;
+        this.waitingForUserAction.next(false);
+    }
+    _showArticleTextOverviewDialog() {
+        this.showTransactionArticleTextOverview = true;
+        this.waitingForUserAction.next(true);
+    }
+    _hideArticleTextOverviewDialog() {
+        this.showTransactionArticleTextOverview = false;
+        this.waitingForUserAction.next(false);
+    }
+}
+TransactionLineActionButtonsComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-line-action-buttons",
+                template: `
+    <div class="transaction-line-action-buttons-wrapper">
+      <div class="show-hide-button">
+        <icon [icon]="icons.ThickLines" (click)="handleShowHideClick()"></icon>
+      </div>
+
+      <div class="action-buttons-container" clickOutside
+           *ngIf="showActionButtons"
+           [ngClass]="alignDirection"
+           (clickOutside)="handleShowHideClick()">
+
+        <co-button *ngIf="showOverviewButton()"
+            class="transaction-line-overview-button circle"
+                   [class.show]="showActionButtonsDelayed"
+                   [iconData]="iconCacheService.getIcon(icons.Txt)"
+                   (click)="handleTransactionArticleTextOverview()"></co-button>
+
+        <co-button *ngIf="showAddTextButton()"
+                   class="transaction-line-add-text-button circle"
+                   [class.show]="showActionButtonsDelayed"
+                   [iconData]="iconCacheService.getIcon(icons.Txt)"
+                   (click)="handleTransactionArticleText()"></co-button>
+
+        <co-button *ngIf="showSidebarButton()"
+                   class="transaction-line-show-sidebar-button circle"
+                   [class.show]="showActionButtonsDelayed"
+                   [iconData]="iconCacheService.getIcon(icons.MasterDetail)"
+                   (click)="handleShowSidePanel()"></co-button>
+      </div>
+    </div>
+
+    <co-transaction-article-text-overview *ngIf="showTransactionArticleTextOverview"
+                                          [header]="articleTextHeader | localize"
+                                          [transactionLine]="transactionLine"
+                                          (saveClick)="saveTransactionArticleLineText($event)"
+                                          (closeClick)="closeTransactionArticleTextOverview($event)"
+                                          (cancelClick)="closeTransactionArticleTextOverview($event)"
+    ></co-transaction-article-text-overview>
+
+    <co-transaction-article-text *ngIf="showTransactionArticleText"
+                                 [header]="articleTextHeader | localize"
+                                 [articleLineNr]="transactionLine.lineNr"
+                                 [articleRef]="transactionLine.articleNumber"
+                                 [transactionLine]="transactionLine"
+                                 [editText]="textToEdit"
+                                 (saveClick)="saveTransactionArticleLineText($event)"
+                                 (closeClick)="closeTransactionArticleText($event)"
+                                 (cancelClick)="closeTransactionArticleText($event)"
+    ></co-transaction-article-text>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionLineActionButtonsComponent.ctorParameters = () => [
+    { type: IconCacheService },
+    { type: TransactionService },
+    { type: DictionaryService }
+];
+TransactionLineActionButtonsComponent.propDecorators = {
+    transactionLine: [{ type: Input }],
+    alignDirection: [{ type: Input }],
+    waitingForUserAction: [{ type: Output }],
+    sidePanelButtonClicked: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-line-action-buttons",] }]
+};
+
 class TransactionLineComponent {
     constructor(service, iconCacheService, _dialogService, _dictionaryService, _imageService) {
         this.service = service;
@@ -5958,8 +6269,6 @@ class TransactionLineComponent {
         this.waitingForUserAction = new EventEmitter();
         this.sidePanelButtonClicked = new EventEmitter();
         this.stock = StockStatus.Low;
-        this.showTransactionArticleText = false;
-        this.showTransactionArticleTextOverview = false;
         this.mouseOver = false;
     }
     set line(value) {
@@ -6001,30 +6310,13 @@ class TransactionLineComponent {
             }
         });
     }
-    handleTransactionArticleText(event) {
-        this.articleTextHeader = this._dictionaryService.get("TEXT_ARTICLE_BOUND", true, this.line.articleNumber);
-        this.textToEdit = undefined;
-        this._showArticleTextDialog();
-    }
-    handleTransactionArticleTextOverview(event) {
-        this.articleTextHeader = this._dictionaryService.get("TEXT_ARTICLE_BOUND", true, this.line.articleNumber);
-        this.textToEdit = undefined;
-        this._showArticleTextOverviewDialog();
-    }
-    saveTransactionArticleLineText(transactionAddTextLineRequest) {
-        this.service.addTextLine(transactionAddTextLineRequest.showOnDocuments, transactionAddTextLineRequest.text, 0, true, transactionAddTextLineRequest.refArticleLineNr).then(() => {
-            this._hideArticleTextDialog();
-        });
-    }
-    closeTransactionArticleText(event) {
-        this._hideArticleTextDialog();
-    }
-    closeTransactionArticleTextOverview(event) {
-        this._hideArticleTextOverviewDialog();
-    }
     handleOpenArticleText(text) {
-        this.textToEdit = text;
-        this._showArticleTextDialog();
+        this.transactionLineActionButtons.textToEdit = text;
+        this.transactionLineActionButtons.showArticleTextDialog();
+    }
+    handleShowSidePanel() {
+        this.sidePanelButtonClicked.next();
+        this.waitingForUserAction.next(true);
     }
     _loadLineImage() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -6035,70 +6327,6 @@ class TransactionLineComponent {
             }
         });
     }
-    // private async _confirmAction(lineOperationResponse: LineOperationResponse): Promise<void> {
-    //   this.currentReason.confirmation = await this._promptService.showYesNo(lineOperationResponse.pendingReason, " ");
-    //   this.service.resolvePendingLineReason(this.currentReason)
-    //     .then((value: LineOperationResponse) => {
-    //       this._handleLine(value);
-    //     });
-    // }
-    // private async _showInformation(lineOperationResponse: LineOperationResponse): Promise<void> {
-    //   await this._promptService.showOkModal(lineOperationResponse.pendingReason, " ");
-    //   this.service.resolvePendingLineReason(this.currentReason)
-    //     .then((value: LineOperationResponse) => {
-    //       this._handleLine(value);
-    //     });
-    // }
-    // private async _handleLine(lineOperationResponse: LineOperationResponse): Promise<void> {
-    //   if (lineOperationResponse === undefined) {
-    //     return;
-    //   }
-    //   this.currentReason = new ResolvePendingLineReasonRequest(lineOperationResponse.lineUuid,
-    //     lineOperationResponse.pendingReason, lineOperationResponse.pendingReasonType);
-    //
-    //   switch (lineOperationResponse.pendingReasonType) {
-    //     case PendingReasonType.ABORTED:
-    //     case PendingReasonType.CANCELLED:
-    //       this.localAmount = this._line.amount;
-    //       if (lineOperationResponse.pendingReason !== "USER_DECISION") {
-    //         await this._promptService.showNotification(this._dictionaryService.get(lineOperationResponse.pendingReason), " ");
-    //       }
-    //       break;
-    //     case PendingReasonType.CONFIRMATION_NEEDED:
-    //       await this._confirmAction(lineOperationResponse);
-    //       break;
-    //     case PendingReasonType.NON_CRITICAL_DISCONTINUATION:
-    //       await this._showInformation(lineOperationResponse);
-    //       break;
-    //     case PendingReasonType.INVALID_LOGISTICS:
-    //       this.localAmount = this._line.amount;
-    //       await this._promptService.showError(this._dictionaryService.get(lineOperationResponse.pendingReason), " ");
-    //       break;
-    //     case PendingReasonType.NONE:
-    //     default:
-    //       break;
-    //   }
-    // }
-    _showArticleTextDialog() {
-        this.showTransactionArticleText = true;
-        this.waitingForUserAction.next(true);
-    }
-    _hideArticleTextDialog() {
-        this.showTransactionArticleText = false;
-        this.waitingForUserAction.next(false);
-    }
-    _showArticleTextOverviewDialog() {
-        this.showTransactionArticleTextOverview = true;
-        this.waitingForUserAction.next(true);
-    }
-    _hideArticleTextOverviewDialog() {
-        this.showTransactionArticleTextOverview = false;
-        this.waitingForUserAction.next(false);
-    }
-    handleShowSidePanel(event) {
-        this.sidePanelButtonClicked.next();
-        this.waitingForUserAction.next(true);
-    }
 }
 TransactionLineComponent.decorators = [
     { type: Component, args: [{
@@ -6129,7 +6357,7 @@ TransactionLineComponent.decorators = [
             <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>-->
+            <!--            <span [textContent]="line.deliveryDate | deliveryTime"></span>-->
           </div>
           <div *ngIf=!preview class="transaction-line-amount">
             <co-input-number-picker class="amount-number-picker"
@@ -6149,9 +6377,11 @@ TransactionLineComponent.decorators = [
             <span [textContent]="line.displayNetLineTotal | coCurrency: true"></span>
           </div>
           <div *ngIf="!preview" class="transaction-line-buttons">
-            <co-button class="transaction-line-overview-button circle" [class.show]="mouseOver || isSelected" [iconData]="iconCacheService.getIcon(icons.Txt)" (click)="handleTransactionArticleTextOverview($event)"></co-button>
-            <co-button class="transaction-line-add-text-button circle" [class.show]="mouseOver || isSelected" [iconData]="iconCacheService.getIcon(icons.Txt)" (click)="handleTransactionArticleText($event)"></co-button>
-            <co-button class="transaction-line-show-sidebar-button circle" [class.show]="mouseOver || isSelected" [iconData]="iconCacheService.getIcon(icons.MasterDetail)" (click)="handleShowSidePanel($event)"></co-button>
+            <co-transaction-line-action-buttons
+              [transactionLine]="line"
+              (waitingForUserAction)="waitingForUserAction.next($event)"
+              (sidePanelButtonClicked)="handleShowSidePanel()"
+            ></co-transaction-line-action-buttons>
           </div>
         </div>
         <div class="transaction-line-delete" *ngIf="!preview">
@@ -6175,23 +6405,6 @@ TransactionLineComponent.decorators = [
         </div>
       </ng-container>
     </div>
-    <co-transaction-article-text-overview *ngIf="showTransactionArticleTextOverview"
-                                          [header]="articleTextHeader | localize"
-                                          [transactionLine]="line"
-                                          (saveClick)="saveTransactionArticleLineText($event)"
-                                          (closeClick)="closeTransactionArticleTextOverview($event)"
-                                          (cancelClick)="closeTransactionArticleTextOverview($event)"
-    ></co-transaction-article-text-overview>
-    <co-transaction-article-text *ngIf="showTransactionArticleText"
-                                 [header]="articleTextHeader | localize"
-                                 [articleLineNr]="line.lineNr"
-                                 [articleRef]="line.articleNumber"
-                                 [transactionLine]="line"
-                                 [editText]="textToEdit"
-                                 (saveClick)="saveTransactionArticleLineText($event)"
-                                 (closeClick)="closeTransactionArticleText($event)"
-                                 (cancelClick)="closeTransactionArticleText($event)"
-    ></co-transaction-article-text>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -6208,6 +6421,7 @@ TransactionLineComponent.propDecorators = {
     line: [{ type: Input }],
     waitingForUserAction: [{ type: Output }],
     sidePanelButtonClicked: [{ type: Output }],
+    transactionLineActionButtons: [{ type: ViewChild, args: [TransactionLineActionButtonsComponent,] }],
     isText: [{ type: HostBinding, args: ["class.is-text",] }],
     isArticle: [{ type: HostBinding, args: ["class.is-article",] }],
     isSelected: [{ type: HostBinding, args: ["class.is-selected",] }, { type: Input, args: ['selected',] }],
@@ -6365,34 +6579,57 @@ TransactionArticleTextOverviewModule.decorators = [
             },] }
 ];
 
-class TransactionLineModule {
+class TransactionLineActionButtonsModule {
 }
-TransactionLineModule.decorators = [
+TransactionLineActionButtonsModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
                     CoreModule,
                     ButtonModule,
-                    InputNumberPickerModule,
-                    TransactionArticleTextModule,
+                    ClickoutsideModule,
                     TransactionArticleTextOverviewModule,
+                    TransactionArticleTextModule,
                     PipeModule
                 ],
                 declarations: [
-                    TransactionLineComponent
+                    TransactionLineActionButtonsComponent
                 ],
                 exports: [
-                    TransactionLineComponent
+                    TransactionLineActionButtonsComponent
                 ]
             },] }
 ];
 
-class TransactionLinesComponent {
-    constructor(iconCacheService, service) {
-        this.iconCacheService = iconCacheService;
-        this.service = service;
-        this.icons = Icon;
-        this.transactionLines = [];
+class TransactionLineModule {
+}
+TransactionLineModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule,
+                    ButtonModule,
+                    InputNumberPickerModule,
+                    TransactionArticleTextModule,
+                    TransactionArticleTextOverviewModule,
+                    PipeModule,
+                    TransactionLineActionButtonsModule
+                ],
+                declarations: [
+                    TransactionLineComponent
+                ],
+                exports: [
+                    TransactionLineComponent
+                ]
+            },] }
+];
+
+class TransactionLinesComponent {
+    constructor(iconCacheService, service) {
+        this.iconCacheService = iconCacheService;
+        this.service = service;
+        this.icons = Icon;
+        this.transactionLines = [];
         this.preview = false;
         this.saveTransactionLine = new EventEmitter();
         this.showSidePanelClicked = new EventEmitter();
@@ -8003,7 +8240,10 @@ TransactionBaseGridComponent.decorators = [
       </co-simple-grid-column>
       <co-simple-grid-column [headerText]="''" [width]="40" [field]="'sideMenuButton'" [order]="400">
         <ng-template #template let-row = "row">
-          <icon class="sidepanel-icon" [icon]="icons.Menu" (click)="openSidePanel(row)"></icon>
+          <co-transaction-line-action-buttons class="transaction-line-action-buttons"
+            [transactionLine]="row"
+            (sidePanelButtonClicked)="openSidePanel(row)"
+          ></co-transaction-line-action-buttons>
         </ng-template>
       </co-simple-grid-column>
     </co-simple-grid>
@@ -8079,6 +8319,7 @@ TransactionLineSidePanelComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-transaction-line-side-panel",
                 template: `
+    <icon (click)="handleCancelClick($event)" [icon]="icons.Cancel" class="close-button"></icon>
     <div class="transaction-line-side-panel-header">
       <div class="transaction-line-side-panel-header-item">
         <span class="side-panel-header-label" [textContent]="'ARTICLE_NR'| localize"></span>
@@ -8101,7 +8342,6 @@ TransactionLineSidePanelComponent.decorators = [
         <span class="side-panel-header-field"
               [textContent]="activeCategory === categories.PurchaseOrderReceivedGoods ? quantityToReceive : (transactionLine.price | priceDisplay)"></span>
       </div>
-      <icon (click)="handleCancelClick($event)" [icon]="icons.Cancel" class="close-button"></icon>
     </div>
     <div class="transaction-line-side-panel-nav-bar">
       <co-transaction-button-bar
@@ -9364,56 +9604,6 @@ TransactionReceivingGoodsHistoryModule.decorators = [
             },] }
 ];
 
-class ArticleConnectorService {
-    constructor(_optionsService, _collectionService) {
-        this._optionsService = _optionsService;
-        this._collectionService = _collectionService;
-        this._boFactory = new BusinessObjectFactory();
-        this._optionsService.optionsInitialized.subscribe((initialized) => {
-            if (initialized) {
-                this.connect();
-            }
-        });
-    }
-    connect() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.connector = new Articles(this._optionsService.options);
-        });
-    }
-    getWarehouseLocations(warehouseNr) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve, reject) => {
-                const collection = this._collectionService.getCollection(StockLocation.name, [warehouseNr]);
-                if (collection) {
-                    resolve(collection);
-                }
-                else {
-                    return this.connector.getStockManagementLocations(warehouseNr).then((response) => {
-                        if (response && response.validationResult && response.validationResult.success) {
-                            const collection = this._boFactory.makeBOArrayFromRawBackendDataArray(StockLocation, response.resultObjects);
-                            this._collectionService.cacheCollection(StockLocation.name, collection, [warehouseNr]);
-                            resolve(collection);
-                        }
-                        else {
-                            reject(response.validationMessagesAsString);
-                        }
-                    });
-                }
-            });
-        });
-    }
-}
-ArticleConnectorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ArticleConnectorService_Factory() { return new ArticleConnectorService(i0.ɵɵinject(OptionsService), i0.ɵɵinject(CollectionCacheService)); }, token: ArticleConnectorService, providedIn: "root" });
-ArticleConnectorService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: "root"
-            },] }
-];
-ArticleConnectorService.ctorParameters = () => [
-    { type: OptionsService },
-    { type: CollectionCacheService }
-];
-
 class ArticleService {
     constructor(_articleConnectorService) {
         this._articleConnectorService = _articleConnectorService;
@@ -9939,7 +10129,7 @@ class TransactionMappingService {
                     { title: 'LOGISTICS', icon: Icon.ShelvesSolid, category: TransactionTypeCategory.SalesOrderLogistics },
                     { title: 'PLANNING', icon: Icon.TruckArrowRightSolid, category: TransactionTypeCategory.SalesOrderPlanning },
                     { title: 'DELIVERY_NOTE', icon: Icon.MemoCircleCheckSolid, category: TransactionTypeCategory.SalesOrderDeliveryNote },
-                    { title: 'INVOICE', icon: Icon.CartShoppingSolid, category: TransactionTypeCategory.SalesOrderInvoice }
+                    { title: 'INVOICE', icon: Icon.CartCheck, category: TransactionTypeCategory.SalesOrderInvoice }
                 ]],
         ]);
         this._quickAccessComponent = new Map([
@@ -10281,6 +10471,7 @@ TransactionBaseGridModule.decorators = [
                     SimpleGridModule,
                     ButtonModule,
                     TransactionLineSidePanelModule,
+                    TransactionLineActionButtonsModule,
                 ],
                 declarations: [
                     TransactionBaseGridComponent
@@ -10874,16 +11065,87 @@ ShoppingCartModule.decorators = [
             },] }
 ];
 
+// The different view modes for search
+var SearchViewMode;
+(function (SearchViewMode) {
+    SearchViewMode[SearchViewMode["FullScreen"] = 0] = "FullScreen";
+    SearchViewMode[SearchViewMode["SideBar"] = 1] = "SideBar";
+})(SearchViewMode || (SearchViewMode = {}));
+
+class TransactionSearchService {
+    constructor(_transactionService) {
+        this._transactionService = _transactionService;
+        this.searchRequest = new TransactionSearchViewRequest();
+        this.transactions = [];
+        this.labelBasedOnTransactionType = new Map([
+            [TransactionKind.SalesOrder, "SALESORDERS"],
+            [TransactionKind.PurchaseOrder, "PURCHASEORDERS"],
+            [TransactionKind.ServiceOrder, "SERVICEORDERS"]
+        ]);
+        this._transactionType = TransactionKind.SalesOrder;
+    }
+    set transactionType(value) {
+        this._resetRequest();
+        this.transactions.length = 0;
+        this._transactionType = value;
+    }
+    get transactionType() {
+        return this._transactionType;
+    }
+    searchTransactions() {
+        this.searchRequest.transactionKind = this.transactionType;
+        this._transactionService.searchTransactions(this.searchRequest).then((transactions) => {
+            this.transactions = transactions;
+        });
+    }
+    getLabelBasedOnTransactionType() {
+        return this.labelBasedOnTransactionType.get(this._transactionType);
+    }
+    resetFilters() {
+        const oldSearchRequest = Object.assign({}, this.searchRequest);
+        this._resetRequest();
+        this.searchRequest.general = oldSearchRequest.general;
+        this.searchTransactions();
+    }
+    _resetRequest() {
+        this.searchRequest = new TransactionSearchViewRequest();
+    }
+}
+TransactionSearchService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionSearchService_Factory() { return new TransactionSearchService(i0.ɵɵinject(TransactionService)); }, token: TransactionSearchService, providedIn: "root" });
+TransactionSearchService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+TransactionSearchService.ctorParameters = () => [
+    { type: TransactionService }
+];
+
 class TransactionSearchComponent {
-    constructor() {
+    constructor(_transactionSearchService) {
+        this._transactionSearchService = _transactionSearchService;
+        this.searchViewModes = SearchViewMode;
+        this.activeSearchViewMode = SearchViewMode.FullScreen;
+        this.closeClick = new EventEmitter();
         this.transactionClick = new EventEmitter();
+        this.searchViewModeChange = new EventEmitter();
         this.showFilterSidebar = false;
     }
+    set transactionType(value) {
+        this._transactionType = value;
+        this._transactionSearchService.transactionType = this._transactionType;
+    }
+    get transactionType() {
+        return this._transactionType;
+    }
     showClass() {
         return true;
     }
-    handleShowFilter() {
-        this.showFilterSidebar = true;
+    get fullscreen() {
+        return this.activeSearchViewMode === SearchViewMode.FullScreen;
+    }
+    toggleFilter() {
+        this.showFilterSidebar = !this.showFilterSidebar;
     }
     handleHideFilter() {
         this.showFilterSidebar = false;
@@ -10895,19 +11157,37 @@ class TransactionSearchComponent {
     onTransactionClick(transaction) {
         this.transactionClick.emit(transaction);
     }
+    onResizeClick() {
+        if (this.activeSearchViewMode === this.searchViewModes.SideBar) {
+            this.activeSearchViewMode = this.searchViewModes.FullScreen;
+        }
+        else {
+            this.activeSearchViewMode = this.searchViewModes.SideBar;
+        }
+        this.searchViewModeChange.emit(this.activeSearchViewMode);
+    }
 }
 TransactionSearchComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-transaction-search',
                 template: `
-    <div class="transaction-search-wrapper">
-      <div class="transaction-filter-wrapper narrow-scrollbar" *ngIf="showFilterSidebar" @showHideFilterSidebar>
-        <co-transaction-filter (closeButtonClick)="handleHideFilter()"
-                               (resetFilterClick)="handleResetFilter()"></co-transaction-filter>
+    <div class="transaction-search-wrapper" [ngClass]="fullscreen ? 'fullscreen' : 'sidebar'">
+      <div class="transaction-filter-wrapper narrow-scrollbar" [ngClass]="fullscreen ? 'fullscreen' : 'sidebar'"
+           *ngIf="showFilterSidebar" @showHideFilterSidebar>
+        <co-transaction-filter
+          [activeSearchViewMode]="activeSearchViewMode"
+          (closeButtonClick)="handleHideFilter()"
+          (resetFilterClick)="handleResetFilter()"></co-transaction-filter>
       </div>
       <div class="transaction-search-result-wrapper">
-        <co-transaction-search-result (filterButtonClick)="handleShowFilter()"
-                                      (transactionClick)="onTransactionClick($event)"></co-transaction-search-result>
+        <co-transaction-search-result
+          [transactionType]="transactionType"
+          [activeSearchViewMode]="activeSearchViewMode"
+          (filterClick)="toggleFilter()"
+          (transactionClick)="onTransactionClick($event)"
+          (resizeClick)="onResizeClick()"
+          (closeClick)="closeClick.emit()"
+        ></co-transaction-search-result>
       </div>
     </div>
   `,
@@ -10921,13 +11201,18 @@ TransactionSearchComponent.decorators = [
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-TransactionSearchComponent.ctorParameters = () => [];
+TransactionSearchComponent.ctorParameters = () => [
+    { type: TransactionSearchService }
+];
 TransactionSearchComponent.propDecorators = {
+    closeClick: [{ type: Output }],
+    transactionType: [{ type: Input }],
     transactionClick: [{ type: Output }],
+    searchViewModeChange: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-search",] }]
 };
 
-class TransactionSearchGridComponent {
+class TransactionSearchSalesOrderGridComponent {
     constructor() {
         this.align = ColumnAlign;
         this.transactions = [];
@@ -10944,9 +11229,9 @@ class TransactionSearchGridComponent {
         this.transactionClick.emit(transaction);
     }
 }
-TransactionSearchGridComponent.decorators = [
+TransactionSearchSalesOrderGridComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-transaction-search-grid",
+                selector: "co-transaction-search-sales-order-grid",
                 template: `
     <div>
       <co-simple-grid [data]="transactions" [extraColumns]="extraColumns" [dragDropEnabled]="true" [emitDragDrop]="false"
@@ -11003,17 +11288,17 @@ TransactionSearchGridComponent.decorators = [
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-TransactionSearchGridComponent.ctorParameters = () => [];
-TransactionSearchGridComponent.propDecorators = {
+TransactionSearchSalesOrderGridComponent.ctorParameters = () => [];
+TransactionSearchSalesOrderGridComponent.propDecorators = {
     content: [{ type: ContentChildren, args: [SimpleGridColumnDirective,] }],
-    showClass: [{ type: HostBinding, args: ["class.co-transaction-search-grid",] }],
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-search-sales-order-grid",] }],
     transactions: [{ type: Input }],
     transactionClick: [{ type: Output }]
 };
 
-class TransactionSearchGridModule {
+class TransactionSearchSalesOrderGridModule {
 }
-TransactionSearchGridModule.decorators = [
+TransactionSearchSalesOrderGridModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
@@ -11023,15 +11308,148 @@ TransactionSearchGridModule.decorators = [
                     InputCheckboxModule
                 ],
                 declarations: [
-                    TransactionSearchGridComponent
+                    TransactionSearchSalesOrderGridComponent
                 ],
                 exports: [
-                    TransactionSearchGridComponent
+                    TransactionSearchSalesOrderGridComponent
                 ]
             },] }
 ];
 
-class TransactionTileComponent {
+class TransactionSearchHeaderComponent {
+    constructor(searchService, iconCacheService, _dictionary) {
+        this.searchService = searchService;
+        this.iconCacheService = iconCacheService;
+        this._dictionary = _dictionary;
+        this.icon = Icon;
+        this.contentViewModes = ContentViewMode;
+        this.searchViewModes = SearchViewMode;
+        this.iconSlideIn = this.iconCacheService.getIcon(this.icon.SlideIn);
+        this.iconResize = this.iconCacheService.getIcon(this.icon.Resize);
+        this.iconCancel = this.iconCacheService.getIcon(this.icon.Cancel);
+        this.activeSearchViewMode = this.searchViewModes.FullScreen;
+        this.activeContentViewMode = this.contentViewModes.Tiles;
+        this.viewModeChange = new EventEmitter();
+        this.filterButtonClick = new EventEmitter();
+        this.resizeClick = new EventEmitter();
+        this.closeClick = new EventEmitter();
+    }
+    set transactionType(value) {
+        this.label = this._dictionary.get(this.searchService.getLabelBasedOnTransactionType());
+    }
+    showClass() {
+        return true;
+    }
+    get fullscreen() {
+        return this.activeSearchViewMode === SearchViewMode.FullScreen;
+    }
+    onResizeClick() {
+        this.resizeClick.emit();
+    }
+    onCloseClick() {
+        this.closeClick.emit();
+    }
+    onViewModeChange(viewMode) {
+        this.viewModeChange.emit(viewMode);
+    }
+}
+TransactionSearchHeaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-search-header",
+                template: `
+    <div class="transaction-search-header-wrapper">
+      <div class="upper-header">
+        <div class="header-title-wrapper" [ngClass]="fullscreen ? 'fullscreen' : 'sidebar'">
+          <div class="title" *ngIf="fullscreen; else sidebar">
+            <h1 [textContent]="label"></h1>
+          </div>
+          <ng-template #sidebar>
+            <h2 [textContent]="'SEARCH' | localize"></h2>
+            <span class="whitespace" [textContent]="'IN' | localize | append: ' ' + label.toLowerCase()"></span>
+          </ng-template>
+        </div>
+
+        <div class="header-buttons-wrapper">
+          <div class="toggle-sidebar-button-wrapper button-wrapper" [ngClass]="fullscreen ? 'fullscreen' : 'sidebar'">
+            <co-button [iconData]="fullscreen ? iconSlideIn : iconResize"
+                       [ngClass]="!fullscreen ? 'small' : ''"
+                       class="toggle-sidebar-button circle transparent"
+                       (click)="onResizeClick()"></co-button>
+          </div>
+          <div class="close-search-button-wrapper button-wrapper" *ngIf="!fullscreen">
+            <co-button [iconData]="iconCancel"
+                       class="toggle-sidebar-button circle small transparent"
+                       (click)="onCloseClick()">
+            </co-button>
+          </div>
+        </div>
+
+      </div>
+      <div class="header-searchbar-wrapper">
+        <div>
+          <co-input-search class="transaction-search-general"
+                           [ngClass]="fullscreen ? 'fullscreen' : 'sidebar'"
+                           [(model)]="searchService.searchRequest.general"
+                           [placeholder]="'Waar ben je naar op zoek?'"
+                           (search)="searchService.searchTransactions()"></co-input-search>
+        </div>
+        <div>
+          <co-button class="transaction-search-filter-button"
+                     *ngIf="fullscreen"
+                     [iconData]="iconCacheService.getIcon(icon.BarsFilter)"
+                     (click)="filterButtonClick.emit()">
+          </co-button>
+        </div>
+      </div>
+    </div>
+    <div class="view-mode-buttons-wrapper">
+      <co-view-mode-buttons
+        *ngIf="fullscreen"
+        [showViewModes]="[contentViewModes.Tiles, contentViewModes.Grid]"
+        (viewModeChange)="onViewModeChange($event)">
+      </co-view-mode-buttons>
+    </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionSearchHeaderComponent.ctorParameters = () => [
+    { type: TransactionSearchService },
+    { type: IconCacheService },
+    { type: DictionaryService }
+];
+TransactionSearchHeaderComponent.propDecorators = {
+    transactionType: [{ type: Input }],
+    activeSearchViewMode: [{ type: Input }],
+    activeContentViewMode: [{ type: Input }],
+    viewModeChange: [{ type: Output }],
+    filterButtonClick: [{ type: Output }],
+    resizeClick: [{ type: Output }],
+    closeClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-search-header",] }]
+};
+
+class TransactionSearchHeaderModule {
+}
+TransactionSearchHeaderModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    PipeModule,
+                    ButtonModule,
+                    InputSearchModule,
+                    ViewModeButtonsModule
+                ],
+                declarations: [
+                    TransactionSearchHeaderComponent
+                ],
+                exports: [
+                    TransactionSearchHeaderComponent
+                ]
+            },] }
+];
+
+class TransactionSearchSalesOrderTileComponent {
     constructor(iconCacheService) {
         this.iconCacheService = iconCacheService;
         this.icons = Icon;
@@ -11044,9 +11462,9 @@ class TransactionTileComponent {
         this.tileClick.emit(event);
     }
 }
-TransactionTileComponent.decorators = [
+TransactionSearchSalesOrderTileComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-transaction-tile",
+                selector: "co-transaction-search-sales-order-tile",
                 template: `
     <div class="transaction-tile-wrapper" (click)="onTileClick($event)">
       <div class="transaction-tile-body">
@@ -11063,7 +11481,7 @@ TransactionTileComponent.decorators = [
           </div>
         </div>
         <div class="transaction-tile-order-summary">
-          <div class="header"><span [textContent]="'€12.345'"></span></div>  <!--todo: vullen als api aanpassing gedaan is-->
+          <div class="header"><span [textContent]="transaction.totalPriceVat | currency:'EUR'"></span></div>  <!--todo: vullen als api aanpassing gedaan is-->
         </div>
       </div>
       <div class="transaction-tile-footer">
@@ -11096,18 +11514,18 @@ TransactionTileComponent.decorators = [
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
-TransactionTileComponent.ctorParameters = () => [
+TransactionSearchSalesOrderTileComponent.ctorParameters = () => [
     { type: IconCacheService }
 ];
-TransactionTileComponent.propDecorators = {
+TransactionSearchSalesOrderTileComponent.propDecorators = {
     transaction: [{ type: Input }],
     tileClick: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.co-transaction-tile",] }]
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-search-sales-order-tile",] }]
 };
 
-class TransactionTileModule {
+class TransactionSearchSalesOrderTileModule {
 }
-TransactionTileModule.decorators = [
+TransactionSearchSalesOrderTileModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
@@ -11118,96 +11536,92 @@ TransactionTileModule.decorators = [
                     IconModule,
                 ],
                 declarations: [
-                    TransactionTileComponent
+                    TransactionSearchSalesOrderTileComponent
                 ],
                 exports: [
-                    TransactionTileComponent
+                    TransactionSearchSalesOrderTileComponent
                 ]
             },] }
 ];
 
-class TransactionSearchService {
-    constructor(_transactionService) {
-        this._transactionService = _transactionService;
-        this.searchRequest = new TransactionSearchViewRequest();
-        this.transactions = [];
-    }
-    searchTransactions() {
-        this._transactionService.searchTransactions(this.searchRequest).then((transactions) => {
-            this.transactions = transactions;
-        });
-    }
-    resetFilters() {
-        const oldSearchRequest = Object.assign({}, this.searchRequest);
-        this.searchRequest = new TransactionSearchViewRequest();
-        this.searchRequest.general = oldSearchRequest.general;
-        this.searchTransactions();
-    }
-}
-TransactionSearchService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TransactionSearchService_Factory() { return new TransactionSearchService(i0.ɵɵinject(TransactionService)); }, token: TransactionSearchService, providedIn: "root" });
-TransactionSearchService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: "root"
-            },] }
-];
-TransactionSearchService.ctorParameters = () => [
-    { type: TransactionService }
-];
-
 class TransactionSearchResultComponent {
-    constructor(searchService, iconCacheService) {
+    constructor(searchService) {
         this.searchService = searchService;
-        this.iconCacheService = iconCacheService;
         this.icon = Icon;
-        this.viewModes = ContentViewMode;
-        this.filterButtonClick = new EventEmitter();
+        this.contentViewModes = ContentViewMode;
+        this.searchViewModes = SearchViewMode;
+        this.activeSearchViewMode = this.searchViewModes.FullScreen;
+        this.filterClick = new EventEmitter();
         this.transactionClick = new EventEmitter();
-        this.activeViewMode = ContentViewMode.Tiles;
+        this.resizeClick = new EventEmitter();
+        this.closeClick = new EventEmitter();
+        this.activeContentViewMode = ContentViewMode.Tiles;
     }
     showClass() {
         return true;
     }
     ngOnInit() {
     }
+    get fullscreen() {
+        return this.activeSearchViewMode === SearchViewMode.FullScreen;
+    }
     onTransactionClick(transaction) {
         this.transactionClick.emit(transaction);
     }
+    onResizeClick() {
+        this.activeContentViewMode = this.contentViewModes.Tiles;
+        this.resizeClick.emit();
+    }
+    onCloseClick() {
+        this.closeClick.emit();
+    }
+    onFilterClick() {
+        this.filterClick.emit();
+    }
 }
 TransactionSearchResultComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-transaction-search-result',
                 template: `
     <div class="transaction-search-header-wrapper">
-      <co-input-search class="transaction-search-general"
-                       [(model)]="searchService.searchRequest.general"
-                       [placeholder]="'Waar ben je naar op zoek?'"
-                       (search)="searchService.searchTransactions()"></co-input-search>
-      <co-button class="transaction-search-filter-button" [iconData]="iconCacheService.getIcon(icon.BarsFilter)"
-                 (click)="filterButtonClick.emit()"></co-button>
+      <co-transaction-search-header
+        [transactionType]="transactionType"
+        [activeSearchViewMode]="activeSearchViewMode"
+        [activeContentViewMode]="activeContentViewMode"
+        (viewModeChange)="activeContentViewMode = $event"
+        (resizeClick)="onResizeClick()"
+        (filterButtonClick)="onFilterClick()"
+        (closeClick)="onCloseClick()">
+      </co-transaction-search-header>
     </div>
-    <co-view-mode-buttons [showViewModes]="[viewModes.Tiles, viewModes.Grid]"
-                          (viewModeChange)="activeViewMode = $event"></co-view-mode-buttons>
-    <div class="transaction-search-result-content-tiles-wrapper" *ngIf="activeViewMode === viewModes.Tiles">
+
+    <div class="transaction-search-result-content-tiles-wrapper" [ngClass]="fullscreen ? 'fullscreen' : 'sidebar'"
+         *ngIf="activeContentViewMode === contentViewModes.Tiles">
       <div class="transaction-tile" *ngFor="let transaction of searchService.transactions">
-        <co-transaction-tile [transaction]="transaction"
-                             (tileClick)="onTransactionClick(transaction)"></co-transaction-tile>
+        <co-transaction-search-sales-order-tile
+          [transaction]="transaction"
+          (tileClick)="onTransactionClick(transaction)"></co-transaction-search-sales-order-tile>
       </div>
     </div>
-    <div class="transaction-search-result-content-grid-wrapper" *ngIf="activeViewMode === viewModes.Grid">
-      <co-transaction-search-grid [transactions]="searchService.transactions"
-                                  (transactionClick)="onTransactionClick($event)"></co-transaction-search-grid>
+    <div class="transaction-search-result-content-grid-wrapper" *ngIf="activeContentViewMode === contentViewModes.Grid">
+      <co-transaction-search-sales-order-grid
+        [transactions]="searchService.transactions"
+        (transactionClick)="onTransactionClick($event)"></co-transaction-search-sales-order-grid>
     </div>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 TransactionSearchResultComponent.ctorParameters = () => [
-    { type: TransactionSearchService },
-    { type: IconCacheService }
+    { type: TransactionSearchService }
 ];
 TransactionSearchResultComponent.propDecorators = {
-    filterButtonClick: [{ type: Output }],
+    transactionType: [{ type: Input }],
+    activeSearchViewMode: [{ type: Input }],
+    filterClick: [{ type: Output }],
     transactionClick: [{ type: Output }],
+    resizeClick: [{ type: Output }],
+    closeClick: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-search-result",] }]
 };
 
@@ -11221,8 +11635,10 @@ TransactionSearchResultModule.decorators = [
                     ButtonModule,
                     ViewModeButtonsModule,
                     AvatarModule,
-                    TransactionTileModule,
-                    TransactionSearchGridModule
+                    TransactionSearchSalesOrderTileModule,
+                    TransactionSearchSalesOrderGridModule,
+                    PipeModule,
+                    TransactionSearchHeaderModule
                 ],
                 declarations: [
                     TransactionSearchResultComponent
@@ -11264,12 +11680,12 @@ class FilterRequestService {
         this.searchService.searchRequest[modelName] = this._getFilterRequestForCollectionArray(collection);
     }
     //todo: tijdelijk totdat filter-item single select ondersteunt
-    handleCollectionChangeForSingleValue(collection, modelName) {
-        this.searchService.searchRequest[modelName] = this._getFilterRequestForSingleCollectionValue(collection);
+    handleCollectionChangeForSingleValue(value, modelName) {
+        this.searchService.searchRequest[modelName] = value;
     }
     //todo: tijdelijk totdat filter-item single select ondersteunt
-    handleCollectionChangeForSingleNumber(collection, modelName) {
-        this.searchService.searchRequest[modelName] = collection ? this._getFilterRequestForSingleCollectionNumber(collection) : -1;
+    handleCollectionChangeForSingleNumber(value, modelName) {
+        this.searchService.searchRequest[modelName] = value;
     }
     handleCheckboxValueChangeForString(value, modelName) {
         this.searchService.searchRequest[modelName] = this._getFilterRequestForBooleanToString(value);
@@ -11325,21 +11741,6 @@ class FilterRequestService {
         });
         return filterRequest;
     }
-    //todo: tijdelijk totdat filter-item single select ondersteunt
-    _getFilterRequestForSingleCollectionValue(collection) {
-        let filterRequest = '';
-        const firstValue = collection.find(item => item.checked).code.toString();
-        if (firstValue) {
-            filterRequest = `?=\'${firstValue}\'`;
-        }
-        return filterRequest;
-    }
-    //todo: tijdelijk totdat filter-item single select ondersteunt
-    _getFilterRequestForSingleCollectionNumber(collection) {
-        var _a;
-        const firstValue = Number((_a = collection.find(item => item.checked)) === null || _a === void 0 ? void 0 : _a.code);
-        return firstValue !== null && firstValue !== void 0 ? firstValue : -1;
-    }
     _getFilterRequestForDateRange(startDate, endDate) {
         const startDateRequest = startDate ? this._formatDateToString(startDate) : '';
         const endDateRequest = endDate ? this._formatDateToString(endDate) : '';
@@ -11374,27 +11775,48 @@ class TransactionFilterContentArticleComponent {
         this.showLessLabel = "SHOW_LESS";
         this.articleNumberFields = { text: "description", value: "code" };
         this.exceedanceCodeFields = { text: "description", value: "code" };
+        this.turnoverGroupFields = { text: "description", value: "turnovergroupNr" };
+        this.mainArticleFields = { text: "description", value: "articlenumber" };
         this.supplierFields = { text: "displayName", value: "relationId" };
+        this.getArticles = (text) => {
+            const request = new ArticleExtendedRequest();
+            request.articleNumber = text;
+            return this._transactionService.getArticles(request).then((articles) => {
+                return new FilterViewmodel(articles, { text: 'articleNumber', value: 'articleNumber' }).filterItems;
+            });
+        };
     }
     showClass() {
         return true;
     }
     ngOnInit() {
-        this._setArticleNumbers();
         this._setExceedanceCodes();
         this._setSuppliers();
+        this._setTurnoverGroups();
+        this._setMainArticles();
     }
     onFilterButtonClick() {
         this.searchService.searchTransactions();
     }
-    //Artikelnummer
-    _setArticleNumbers() {
+    handleCollectionChangeArticleNumber(collection) {
+        const checkedItem = collection.find(c => c.checked);
+        this.filterRequestService.handleCollectionChangeForSingleValue(checkedItem ? checkedItem.code + "" : "", 'articleNr');
     }
     _setExceedanceCodes() {
         this._transactionService.getInOutCollection("NL").then((exceedanceCodes) => {
             this.exceedanceCodes = new FilterViewmodel(exceedanceCodes, this.exceedanceCodeFields).filterItems;
         });
     }
+    _setTurnoverGroups() {
+        this._transactionService.getTurnoverGroups().then((turnoverGroups) => {
+            this.turnoverGroups = new FilterViewmodel(turnoverGroups, this.turnoverGroupFields).filterItems;
+        });
+    }
+    _setMainArticles() {
+        this._transactionService.getMainArticles().then((articles) => {
+            this.mainArticles = new FilterViewmodel(articles, this.mainArticleFields).filterItems;
+        });
+    }
     _setSuppliers() {
         const request = new RelationRequest();
         request.relationType = RelationKind.Supplier;
@@ -11409,32 +11831,33 @@ TransactionFilterContentArticleComponent.decorators = [
                 template: `
     <div class="transaction-filter-content-article-wrapper">
 
-      <!--Artikelnummer: todo: wachten op API call -->
+      <!--Artikelnummer-->
       <co-filter-item
         [placeholder]="'ARTICLE_NR' | localize"
         [expanded]="true"
-        [customContent]="true"
+        [singleSelect]="true"
+        [minSearchCharsToLoadCollection]="3"
+        [collectionLoadFn]="getArticles"
+        (collectionChange)="handleCollectionChangeArticleNumber($event)"
       >
-        <co-input-text [(model)]="searchRequest.mainArticleNrRange"
-                       [placeholder]="'ARTICLE_NR' | localize"></co-input-text>
       </co-filter-item>
 
-      <!--Omzetgroep: todo: wachten op API call -->
+      <!--Omzetgroep-->
       <co-filter-item
         [placeholder]="'TURNOVER_GROUP' | localize"
-        [customContent]="true"
-        [expanded]="true">
-        <co-input-text [(model)]="searchRequest.rangeTurnoverGroup"
-                       [placeholder]="'TURNOVER_GROUP' | localize"></co-input-text>
+        [expanded]="true"
+        [collection]="turnoverGroups"
+        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeTurnoverGroup')"
+      >
       </co-filter-item>
 
-      <!--Hoofdartikel: todo: wachten op API call -->
+      <!--Hoofdartikel-->
       <co-filter-item
         [placeholder]="'MAIN_ARTICLE' | localize"
-        [customContent]="true"
-        [expanded]="true">
-        <co-input-text [(model)]="searchRequest.mainArticleNrRange"
-                       [placeholder]="'MAIN_ARTICLE' | localize"></co-input-text>
+        [expanded]="true"
+        [collection]="mainArticles"
+        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'mainArticleNrRange')"
+      >
       </co-filter-item>
 
       <!--Uitloopcode -->
@@ -11445,7 +11868,7 @@ TransactionFilterContentArticleComponent.decorators = [
         [searchPlaceholder]="searchPlaceholder | localize"
         [showMoreLabel]="showMoreLabel | localize"
         [showLessLabel]="showLessLabel | localize"
-        (collectionChange)="this.filterRequestService.handleCollectionChangeForArray($event, 'exceedanceCodes')"
+        (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'exceedanceCodes')"
       >
       </co-filter-item>
 
@@ -11457,7 +11880,7 @@ TransactionFilterContentArticleComponent.decorators = [
         [searchPlaceholder]="searchPlaceholder | localize"
         [showMoreLabel]="showMoreLabel | localize"
         [showLessLabel]="showLessLabel | localize"
-        (collectionChange)="this.filterRequestService.handleCollectionChangeForRange($event, 'rangeSupplier')"
+        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeSupplier')"
       >
       </co-filter-item>
       <div class="filter-button-container">
@@ -11520,6 +11943,9 @@ class TransactionFilterContentLogisticsComponent {
     onFilterButtonClick() {
         this.searchService.searchTransactions();
     }
+    handleAllocatedChange(value) {
+        console.log(value);
+    }
     _setRangeDates() {
         this.confirmedDeliveryStartDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.confirmedDeliveryDateRange, 0);
         this.confirmedDeliveryEndDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.confirmedDeliveryDateRange, 1);
@@ -11553,7 +11979,7 @@ TransactionFilterContentLogisticsComponent.decorators = [
         [searchPlaceholder]="searchPlaceholder | localize"
         [showMoreLabel]="showMoreLabel | localize"
         [showLessLabel]="showLessLabel | localize"
-        (collectionChange)="this.filterRequestService.handleCollectionChangeForRange($event, 'rangeDeliveryMethod')">
+        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeDeliveryMethod')">
       </co-filter-item>
 
 
@@ -11564,56 +11990,39 @@ TransactionFilterContentLogisticsComponent.decorators = [
         [expanded]="true">
         <co-input-checkbox
           [model]="searchRequest.deliveryDateDefinitive === 'J'"
-          (modelChange)="this.filterRequestService.handleCheckboxValueChangeForString($event, 'deliveryDateDefinitive')"
+          (modelChange)="filterRequestService.handleCheckboxValueChangeForString($event, 'deliveryDateDefinitive')"
           [label]="'DELIVERY_DATE_FINAL' | localize"></co-input-checkbox>
       </co-filter-item>
 
-      <!--Toegewezen: todo: enum uizoeken en verwerken-->
-      <co-filter-item
-        [placeholder]="'ALLOCATED' | localize"
-        [customContent]="true"
-        [expanded]="true">
-        <co-input-text [(model)]="searchRequest.quantityAllocated"
-                       [placeholder]="'ALLOCATED' | localize"></co-input-text>
-      </co-filter-item>
+      <!--Toegewezen-->
+      <co-transaction-filter-historic-state
+        [label]="'ALLOCATED'"
+        (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityAllocated')"
+      ></co-transaction-filter-historic-state>
 
-      <!--Geleverd: todo: enum uizoeken en verwerken-->
-      <co-filter-item
-        [placeholder]="'DELIVERED' | localize"
-        [customContent]="true"
-        [expanded]="true">
-        <co-input-text [(model)]="searchRequest.quantityDelivered"
-                       [placeholder]="'DELIVERED' | localize"></co-input-text>
-      </co-filter-item>
+      <!--Geleverd-->
+      <co-transaction-filter-historic-state
+        [label]="'DELIVERED'"
+        (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityDelivered')"
+      ></co-transaction-filter-historic-state>
 
-      <!--Gefactureerd: todo: enum uizoeken en verwerken-->
-      <co-filter-item
-        [placeholder]="'INVOICED' | localize"
-        [customContent]="true"
-        [expanded]="true">
-        <co-input-text
-          [(model)]="searchRequest.quantityInvoiced"
-          [placeholder]="'INVOICED' | localize"></co-input-text>
-      </co-filter-item>
+      <!--Gefactureerd-->
+      <co-transaction-filter-historic-state
+        [label]="'INVOICED'"
+        (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityInvoiced')"
+      ></co-transaction-filter-historic-state>
 
-      <!--Te picken: todo: enum uizoeken en verwerken-->
-      <co-filter-item
-        [placeholder]="'TO_BE_PICKED' | localize"
-        [customContent]="true"
-        [expanded]="true">
-        <co-input-text [(model)]="searchRequest.quantityToBePicked"
-                       [placeholder]="'TO_BE_PICKED' | localize"></co-input-text>
-      </co-filter-item>
+      <!--Te picken-->
+      <co-transaction-filter-historic-state
+        [label]="'TO_BE_PICKED'"
+        (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityToBePicked')"
+      ></co-transaction-filter-historic-state>
 
-      <!--Gepicked: todo: enum uizoeken en verwerken-->
-      <co-filter-item
-        [placeholder]="'PICKED' | localize"
-        [customContent]="true"
-        [expanded]="true">
-        <co-input-text
-          [(model)]="searchRequest.quantityPicked"
-          [placeholder]="'PICKED' | localize"></co-input-text>
-      </co-filter-item>
+      <!--Gepicked-->
+      <co-transaction-filter-historic-state
+        [label]="'PICKED'"
+        (filterClicked)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'quantityPicked')"
+      ></co-transaction-filter-historic-state>
 
       <!--Bevestigde leverdatum-->
       <co-filter-item
@@ -11623,7 +12032,7 @@ TransactionFilterContentLogisticsComponent.decorators = [
         <co-input-date-range
           [startDate]="confirmedDeliveryStartDate"
           [endDate]="confirmedDeliveryEndDate"
-          (dateRangeChange)="this.filterRequestService.handleDateRangeChange($event, 'confirmedDeliveryDateRange')"
+          (dateRangeChange)="filterRequestService.handleDateRangeChange($event, 'confirmedDeliveryDateRange')"
           [placeholder]="'SELECT_DATE' | localize">
         </co-input-date-range>
       </co-filter-item>
@@ -11636,7 +12045,7 @@ TransactionFilterContentLogisticsComponent.decorators = [
         <co-input-date-range
           [startDate]="arrivalStartDate"
           [endDate]="arrivalEndDate"
-          (dateRangeChange)="this.filterRequestService.handleDateRangeChange($event, 'arrivalDateRange')"
+          (dateRangeChange)="filterRequestService.handleDateRangeChange($event, 'arrivalDateRange')"
           [placeholder]="'SELECT_DATE' | localize">
         </co-input-date-range>
       </co-filter-item>
@@ -11648,7 +12057,7 @@ TransactionFilterContentLogisticsComponent.decorators = [
         [expanded]="true">
         <co-input-checkbox
           [model]="searchRequest.partialDelivery === 'J'"
-          (modelChange)="this.filterRequestService.handleCheckboxValueChangeForString($event, 'partialDelivery')"
+          (modelChange)="filterRequestService.handleCheckboxValueChangeForString($event, 'partialDelivery')"
           [label]="'PART_DELIVERY' | localize">
         </co-input-checkbox>
       </co-filter-item>
@@ -11661,7 +12070,7 @@ TransactionFilterContentLogisticsComponent.decorators = [
         [searchPlaceholder]="searchPlaceholder | localize"
         [showMoreLabel]="showMoreLabel | localize"
         [showLessLabel]="showLessLabel | localize"
-        (collectionChange)="this.filterRequestService.handleCollectionChangeForSingleNumber($event, 'warehouse')">
+        (collectionChange)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'warehouse')">
       </co-filter-item>
 
 
@@ -11673,7 +12082,7 @@ TransactionFilterContentLogisticsComponent.decorators = [
         [searchPlaceholder]="searchPlaceholder | localize"
         [showMoreLabel]="showMoreLabel | localize"
         [showLessLabel]="showLessLabel | localize"
-        (collectionChange)="this.filterRequestService.handleCollectionChangeForSingleNumber($event, 'sourceWarehouse')">
+        (collectionChange)="filterRequestService.handleCollectionChangeForSingleNumber($event, 'sourceWarehouse')">
       </co-filter-item>
 
 
@@ -11702,7 +12111,7 @@ TransactionFilterContentLogisticsComponent.decorators = [
         <co-input-checkbox
           [label]="'INCLUDING_RETURNS' | localize"
           [model]="searchRequest.includingReturns === 1"
-          (modelChange)="this.filterRequestService.handleCheckboxValueChangeForNumber($event, 'includingReturns')"
+          (modelChange)="filterRequestService.handleCheckboxValueChangeForNumber($event, 'includingReturns')"
         >
         </co-input-checkbox>
       </co-filter-item>
@@ -11733,6 +12142,83 @@ TransactionFilterContentLogisticsComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ["class.co-transaction-filter-content-logistics",] }]
 };
 
+class TransactionFilterHistoricStateComponent {
+    constructor() {
+        this.expanded = true;
+        this.filterClicked = new EventEmitter();
+        this.states = [];
+    }
+    set label(value) {
+        this._label = value;
+        this.groupName = this._label.toLowerCase() + "_group";
+        this.labelNothing = "NOTHING_" + this._label.toUpperCase();
+        this.labelPartly = "PARTLY_" + this._label.toUpperCase();
+        this.labelFully = "FULLY_" + this._label.toUpperCase();
+        this._setStates();
+    }
+    get label() {
+        return this._label;
+    }
+    showClass() {
+        return true;
+    }
+    handleStateChange(value) {
+        this.filterClicked.emit(value);
+    }
+    _setStates() {
+        this.states = [
+            { label: this.labelNothing, value: QuantityInHistoricState.Nothing, checked: false },
+            { label: this.labelPartly, value: QuantityInHistoricState.Partly, checked: false },
+            { label: this.labelFully, value: QuantityInHistoricState.Fully, checked: false }
+        ];
+    }
+}
+TransactionFilterHistoricStateComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-transaction-filter-historic-state",
+                template: `
+    <co-filter-item
+      [placeholder]="label | localize"
+      [customContent]="true"
+      [expanded]="expanded">
+      <co-input-radio-button *ngFor="let state of states"
+                             [name]="groupName"
+                             [value]="state.value"
+                             [model]="state.checked"
+                             [label]="state.label | localize"
+                             (modelChange)="handleStateChange($event)"
+      ></co-input-radio-button>
+    </co-filter-item>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+TransactionFilterHistoricStateComponent.propDecorators = {
+    label: [{ type: Input }],
+    expanded: [{ type: Input }],
+    filterClicked: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-transaction-filter-historic-state",] }]
+};
+
+class TransactionFilterHistoricStateModule {
+}
+TransactionFilterHistoricStateModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    FilterItemModule,
+                    PipeModule,
+                    InputRadioButtonModule
+                ],
+                declarations: [
+                    TransactionFilterHistoricStateComponent
+                ],
+                exports: [
+                    TransactionFilterHistoricStateComponent
+                ]
+            },] }
+];
+
 class TransactionFilterContentLogisticsModule {
 }
 TransactionFilterContentLogisticsModule.decorators = [
@@ -11745,7 +12231,9 @@ TransactionFilterContentLogisticsModule.decorators = [
                     PipeModule,
                     InputDatePickerModule,
                     ButtonModule,
-                    InputCheckboxModule
+                    InputCheckboxModule,
+                    InputRadioButtonModule,
+                    TransactionFilterHistoricStateModule
                 ],
                 declarations: [
                     TransactionFilterContentLogisticsComponent
@@ -11771,6 +12259,13 @@ class TransactionFilterContentOrderComponent {
         this.onHoldCodeFields = { text: "description", value: "onHoldCode" };
         this.commissionCodeFields = { text: "description", value: "code" };
         this.customerGroupFields = { text: "naam", value: "groepsnummer" };
+        this.loadCustomers = (nameFilter) => __awaiter(this, void 0, void 0, function* () {
+            const request = new RelationRequest();
+            request.familyName = nameFilter;
+            return this._transactionService.getRelationListObjects(request).then((relations) => {
+                return new FilterViewmodel(relations, { text: 'familyName', value: 'familyName' }).filterItems;
+            });
+        });
     }
     showClass() {
         return true;
@@ -11787,6 +12282,10 @@ class TransactionFilterContentOrderComponent {
     onFilterButtonClick() {
         this.searchService.searchTransactions();
     }
+    handleCollectionChangeCustomerName(collection) {
+        const checkedItem = collection.find(c => c.checked);
+        this.filterRequestService.handleCollectionChangeForSingleValue(checkedItem ? checkedItem.code + "" : "", 'relationName');
+    }
     _setRangeDates() {
         this.transStartDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.rangeTransDate, 0);
         this.transEndDate = this.filterRequestService.getDateFromFilterRequestRange(this.searchRequest.rangeTransDate, 1);
@@ -11844,7 +12343,7 @@ TransactionFilterContentOrderComponent.decorators = [
         <co-input-date-range
           [startDate]="transStartDate"
           [endDate]="transEndDate"
-          (dateRangeChange)="this.filterRequestService.handleDateRangeChange($event, 'rangeTransDate')"
+          (dateRangeChange)="filterRequestService.handleDateRangeChange($event, 'rangeTransDate')"
           [placeholder]="'SELECT_DATE' | localize">
         </co-input-date-range>
       </co-filter-item>
@@ -11857,7 +12356,7 @@ TransactionFilterContentOrderComponent.decorators = [
         <co-input-date-range
           [startDate]="deliveryStartDate"
           [endDate]="deliveryEndDate"
-          (dateRangeChange)="this.filterRequestService.handleDateRangeChange($event, 'deliveryDateRange')"
+          (dateRangeChange)="filterRequestService.handleDateRangeChange($event, 'deliveryDateRange')"
           [placeholder]="'SELECT_DATE' | localize">
         </co-input-date-range>
       </co-filter-item>
@@ -11870,7 +12369,7 @@ TransactionFilterContentOrderComponent.decorators = [
         [searchPlaceholder]="searchPlaceholder | localize"
         [showMoreLabel]="showMoreLabel | localize"
         [showLessLabel]="showLessLabel | localize"
-        (collectionChange)="this.filterRequestService.handleCollectionChangeForRange($event, 'rangeBranchId')"
+        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeBranchId')"
       >
       </co-filter-item>
 
@@ -11882,7 +12381,7 @@ TransactionFilterContentOrderComponent.decorators = [
         [searchPlaceholder]="searchPlaceholder | localize"
         [showMoreLabel]="showMoreLabel | localize"
         [showLessLabel]="showLessLabel | localize"
-        (collectionChange)="this.filterRequestService.handleCollectionChangeForRange($event, 'rangeSalesPerson')"
+        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'rangeSalesPerson')"
       >
       </co-filter-item>
 
@@ -11903,7 +12402,7 @@ TransactionFilterContentOrderComponent.decorators = [
         [searchPlaceholder]="searchPlaceholder | localize"
         [showMoreLabel]="showMoreLabel | localize"
         [showLessLabel]="showLessLabel | localize"
-        (collectionChange)="this.filterRequestService.handleCollectionChangeForRange($event, 'tagRange')"
+        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event, 'tagRange')"
       >
         <co-input-text [(model)]="searchRequest.tagRange" [placeholder]="'TAGS' | localize"></co-input-text>
       </co-filter-item>
@@ -11916,7 +12415,7 @@ TransactionFilterContentOrderComponent.decorators = [
         [searchPlaceholder]="searchPlaceholder | localize"
         [showMoreLabel]="showMoreLabel | localize"
         [showLessLabel]="showLessLabel | localize"
-        (collectionChange)="this.filterRequestService.handleCollectionChangeForRange($event,'rangeOnHoldCodes')"
+        (collectionChange)="filterRequestService.handleCollectionChangeForRange($event,'rangeOnHoldCodes')"
       >
         <co-input-text [(model)]="searchRequest.tagRange" [placeholder]="'TAGS' | localize"></co-input-text>
       </co-filter-item>
@@ -11928,7 +12427,7 @@ TransactionFilterContentOrderComponent.decorators = [
         [expanded]="true">
         <co-input-checkbox
           [model]="searchRequest.transactionDefinitive === 'J'"
-          (modelChange)="this.filterRequestService.handleCheckboxValueChangeForString($event, 'transactionDefinitive')"
+          (modelChange)="filterRequestService.handleCheckboxValueChangeForString($event, 'transactionDefinitive')"
           [label]="'ORDER_DEFINITIVE' | localize"></co-input-checkbox>
       </co-filter-item>
 
@@ -11940,7 +12439,7 @@ TransactionFilterContentOrderComponent.decorators = [
         [searchPlaceholder]="searchPlaceholder | localize"
         [showMoreLabel]="showMoreLabel | localize"
         [showLessLabel]="showLessLabel | localize"
-        (collectionChange)="this.filterRequestService.handleCollectionChangeForArray($event, 'commissionCodes')"
+        (collectionChange)="filterRequestService.handleCollectionChangeForArray($event, 'commissionCodes')"
       >
       </co-filter-item>
 
@@ -11956,13 +12455,15 @@ TransactionFilterContentOrderComponent.decorators = [
         ></co-input-checkbox>
       </co-filter-item>
 
-      <!--Klantnaam: voorlopig met input-text. todo: aanpassen als er een collection API is-->
+      <!--Klantnaam-->
       <co-filter-item
         [placeholder]="'CUSTOMER_NAME' | localize"
-        [customContent]="true"
-        [expanded]="true">
-        <co-input-text [(model)]="searchRequest.relationName"
-                       [placeholder]="'CUSTOMER_NAME' | localize"></co-input-text>
+        [expanded]="true"
+        [singleSelect]="true"
+        [minSearchCharsToLoadCollection]="3"
+        [collectionLoadFn]="loadCustomers"
+        (collectionChange)="handleCollectionChangeCustomerName($event)"
+      >
       </co-filter-item>
 
       <!--Klantgroep-->
@@ -11973,7 +12474,7 @@ TransactionFilterContentOrderComponent.decorators = [
         [searchPlaceholder]="searchPlaceholder | localize"
         [showMoreLabel]="showMoreLabel | localize"
         [showLessLabel]="showLessLabel | localize"
-        (collectionChange)="this.filterRequestService.handleCollectionChangeForSingleValue($event, 'customerGroupId')">
+        (collectionChange)="filterRequestService.handleCollectionChangeForSingleValue($event, 'customerGroupId')">
       </co-filter-item>
       <div class="filter-button-container">
         <co-button class="clickable" [label]="'Filter'" (click)="onFilterButtonClick()"></co-button>
@@ -12021,6 +12522,8 @@ class TransactionFilterComponent {
         this.iconCacheService = iconCacheService;
         this.searchService = searchService;
         this.icon = Icon;
+        this.searchViewModes = SearchViewMode;
+        this.activeSearchViewMode = this.searchViewModes.FullScreen;
         this.closeButtonClick = new EventEmitter();
         this.resetFilterClick = new EventEmitter();
         this.filterCategories = [
@@ -12094,6 +12597,7 @@ TransactionFilterComponent.propDecorators = {
     orderFilter: [{ type: ViewChild, args: ['orderFilter', { read: ElementRef },] }],
     logisticsFilter: [{ type: ViewChild, args: ['logisticsFilter', { read: ElementRef },] }],
     articleFilter: [{ type: ViewChild, args: ['articleFilter', { read: ElementRef },] }],
+    activeSearchViewMode: [{ type: Input }],
     closeButtonClick: [{ type: Output }],
     resetFilterClick: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-transaction-filter",] }]
@@ -12302,5 +12806,5 @@ TransactionLineGridModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { CheckoutComponent, CheckoutModule, ShoppingCartComponent, ShoppingCartModule, ShoppingCartPreviewComponent, ShoppingCartPreviewModule, TransactionComponent, TransactionHeaderComponent, TransactionHeaderDeliveryComponent, TransactionHeaderDeliveryModule, TransactionHeaderModule, TransactionHeaderOrderComponent, TransactionHeaderOrderModule, TransactionHeaderRelationComponent, TransactionHeaderRelationModule, TransactionLineComponent, TransactionLineGridComponent, TransactionLineGridModule, TransactionLineModule, TransactionLinesComponent, TransactionLinesModule, TransactionModule, TransactionQuickAccessComponent, TransactionQuickAccessModule, TransactionQuickAccessOrderConfirmationComponent, TransactionQuickAccessOrderConfirmationModule, TransactionQuickAccessReceivedGoodsComponent, TransactionQuickAccessReceivedGoodsModule, TransactionSearchComponent, TransactionSearchModule, TransactionService, TransactionTotalsComponent, TransactionTotalsModule, PendingReasonService as ɵa, DialogService as ɵb, RelationAddressTileModule as ɵba, TileModule as ɵbb, TileComponent as ɵbc, RelationAddressTileComponent as ɵbd, RelationAddressSelectComponent as ɵbe, BusinessObjectFactory as ɵbf, StepperModule as ɵbg, StepperComponent as ɵbh, StepperStepComponent as ɵbi, TransactionArticleTextModule as ɵbj, TransactionArticleTextComponent as ɵbk, TransactionArticleTextOverviewModule as ɵbl, TransactionArticleTextOverviewComponent as ɵbm, TransactionImageService as ɵbn, AvatarModule as ɵbo, AvatarComponent as ɵbp, SharedService as ɵbq, SharedConnectorService as ɵbr, DeliveryTypeTileModule as ɵbs, DeliveryTypeTileComponent as ɵbt, PaymentModule as ɵbu, PaymentTileModule as ɵbv, PaymentTileComponent as ɵbw, PaymentComponent as ɵbx, PaymentService as ɵby, CheckoutOverviewRelationEditComponent as ɵbz, OptionsService as ɵc, CheckoutOverviewDeliveryEditComponent as ɵca, CheckoutOverviewDeliveryAddressComponent as ɵcb, CheckOutRelationSuggestionsListComponent as ɵcc, CheckOutRelationSuggestionsListItemComponent as ɵcd, CheckoutLoginComponent as ɵce, TransactionHeaderModule$1 as ɵcf, TransactionHeaderBlockModule as ɵcg, TransactionHeaderBlockComponent as ɵch, TransactionBaseComponent as ɵci, TransactionHeaderPaymentModule as ɵcj, TransactionHeaderPaymentComponent as ɵck, TransactionHeaderComponent$1 as ɵcl, TransactionLinesGridModule as ɵcm, TransactionBaseGridModule as ɵcn, TransactionLineSidePanelModule as ɵco, TransactionLineSidePanelDefaultModule as ɵcp, TransactionLinePriceModule as ɵcq, TransactionLinePriceComponent as ɵcr, TransactionLineFieldsBaseComponent as ɵcs, TransactionLinePriceListModule as ɵct, TransactionLinePriceListComponent as ɵcu, TransactionLineVatModule as ɵcv, TransactionLineVatComponent as ɵcw, TransactionLineQuantityModule as ɵcx, TransactionLineQuantityComponent as ɵcy, TransactionLineLineDiscountModule as ɵcz, DictionaryService as ɵd, TransactionLineLineDiscountComponent as ɵda, TransactionLineDeliveryMethodModule as ɵdb, TransactionLineDeliveryMethodComponent as ɵdc, TransactionLineDeliveryDateModule as ɵdd, TransactionLineDeliveryDateComponent as ɵde, TransactionLineReferenceModule as ɵdf, TransactionLineReferenceComponent as ɵdg, TransactionLineCommissionCodeModule as ɵdh, TransactionLineCommissionCodeComponent as ɵdi, TransactionLineWarehouseModule as ɵdj, TransactionLineWarehouseComponent as ɵdk, TransactionLineDiscountAmountModule as ɵdl, TransactionLineDiscountAmountComponent as ɵdm, TransactionLineQuantumDiscountModule as ɵdn, TransactionLineQuantumDiscountComponent as ɵdo, TransactionLineSpecialDiscountModule as ɵdp, TransactionLineSpecialDiscountComponent as ɵdq, TransactionLineSidePanelDefaultComponent as ɵdr, TransactionReceivingGoodsHistoryModule as ɵds, TransactionHistoryGridModule as ɵdt, TransactionHistoryGridStatusModule as ɵdu, TransactionHistoryGridStatusComponent as ɵdv, TransactionHistoryGridComponent as ɵdw, TransactionReceivingGoodsHistoryComponent as ɵdx, TransactionReceivingGoodsDetailsModule as ɵdy, TransactionReceivingGoodsDetailsComponent as ɵdz, TransactionConnectorService as ɵe, ArticleService as ɵea, ArticleConnectorService as ɵeb, TransactionButtonBarModule as ɵec, TransactionButtonBarComponent as ɵed, TransactionMappingService as ɵee, TransactionButtonBarButtonComponent as ɵef, TransactionConfirmationHistoryModule as ɵeg, TransactionConfirmationHistoryComponent as ɵeh, TransactionLineSidePanelPurchaseModule as ɵei, TransactionLineSidePanelPurchaseComponent as ɵej, TransactionEventService as ɵek, TransactionLineSidePanelComponent as ɵel, TransactionBaseGridComponent as ɵem, TransactionGridBaseComponent as ɵen, TransactionLinesGridComponent as ɵeo, DiscountModule as ɵep, DiscountComponent as ɵeq, TransactionQuickAccessOverviewModule as ɵer, TransactionQuickAccessOverviewComponent as ɵes, TransactionOrderConfirmationGridModule as ɵet, TransactionOrderConfirmationGridComponent as ɵeu, TransactionReceivedGoodsGridModule as ɵev, TransactionReceivedGoodsGridComponent as ɵew, ViewModeButtonsModule as ɵex, ViewModeButtonsComponent as ɵey, TransactionGridModule as ɵez, CollectionCacheService as ɵf, TransactionGridComponent as ɵfa, TransactionSearchResultModule as ɵfb, TransactionTileModule as ɵfc, TransactionTileComponent as ɵfd, TransactionSearchGridModule as ɵfe, TransactionSearchGridComponent as ɵff, TransactionSearchResultComponent as ɵfg, TransactionSearchService as ɵfh, TransactionFilterModule as ɵfi, TransactionFilterCategoriesModule as ɵfj, TransactionFilterCategoriesComponent as ɵfk, TransactionFilterContentOrderModule as ɵfl, TransactionFilterContentOrderComponent as ɵfm, FilterRequestService as ɵfn, TransactionFilterContentLogisticsModule as ɵfo, TransactionFilterContentLogisticsComponent as ɵfp, TransactionFilterContentArticleModule as ɵfq, TransactionFilterContentArticleComponent as ɵfr, TransactionFilterComponent as ɵfs, CoreModule as ɵg, ConfirmationDialogModule as ɵh, PipeModule as ɵi, AppendPipe as ɵj, DeliveryTimePipe as ɵk, DateDurationPipe as ɵl, LocalizePipe as ɵm, CoCurrencyPipe as ɵn, SafeStylePipe as ɵo, SafeHtmlPipe as ɵp, ConfirmationDialogComponent as ɵq, DialogBaseComponent as ɵr, ImageDisplayComponent as ɵs, IconComponent as ɵt, IconCacheService as ɵu, CustomerGroupsComponent as ɵv, StockStatusIndicatorComponent as ɵw, RelationAddressModule as ɵx, RelationAddressComponent as ɵy, RelationAddressSelectModule as ɵz };
+export { CheckoutComponent, CheckoutModule, ShoppingCartComponent, ShoppingCartModule, ShoppingCartPreviewComponent, ShoppingCartPreviewModule, TransactionComponent, TransactionHeaderComponent, TransactionHeaderDeliveryComponent, TransactionHeaderDeliveryModule, TransactionHeaderModule, TransactionHeaderOrderComponent, TransactionHeaderOrderModule, TransactionHeaderRelationComponent, TransactionHeaderRelationModule, TransactionLineComponent, TransactionLineGridComponent, TransactionLineGridModule, TransactionLineModule, TransactionLinesComponent, TransactionLinesModule, TransactionModule, TransactionQuickAccessComponent, TransactionQuickAccessModule, TransactionQuickAccessOrderConfirmationComponent, TransactionQuickAccessOrderConfirmationModule, TransactionQuickAccessReceivedGoodsComponent, TransactionQuickAccessReceivedGoodsModule, TransactionSearchComponent, TransactionSearchModule, TransactionService, TransactionTotalsComponent, TransactionTotalsModule, PendingReasonService as ɵa, DialogService as ɵb, RelationAddressSelectModule as ɵba, RelationAddressTileModule as ɵbb, TileModule as ɵbc, TileComponent as ɵbd, RelationAddressTileComponent as ɵbe, RelationAddressSelectComponent as ɵbf, BusinessObjectFactory as ɵbg, StepperModule as ɵbh, StepperComponent as ɵbi, StepperStepComponent as ɵbj, TransactionArticleTextModule as ɵbk, TransactionArticleTextComponent as ɵbl, TransactionArticleTextOverviewModule as ɵbm, TransactionArticleTextOverviewComponent as ɵbn, TransactionLineActionButtonsModule as ɵbo, TransactionLineActionButtonsComponent as ɵbp, TransactionImageService as ɵbq, AvatarModule as ɵbr, AvatarComponent as ɵbs, SharedService as ɵbt, SharedConnectorService as ɵbu, DeliveryTypeTileModule as ɵbv, DeliveryTypeTileComponent as ɵbw, PaymentModule as ɵbx, PaymentTileModule as ɵby, PaymentTileComponent as ɵbz, OptionsService as ɵc, PaymentComponent as ɵca, PaymentService as ɵcb, CheckoutOverviewRelationEditComponent as ɵcc, CheckoutOverviewDeliveryEditComponent as ɵcd, CheckoutOverviewDeliveryAddressComponent as ɵce, CheckOutRelationSuggestionsListComponent as ɵcf, CheckOutRelationSuggestionsListItemComponent as ɵcg, CheckoutLoginComponent as ɵch, TransactionHeaderModule$1 as ɵci, TransactionHeaderBlockModule as ɵcj, TransactionHeaderBlockComponent as ɵck, TransactionBaseComponent as ɵcl, TransactionHeaderPaymentModule as ɵcm, TransactionHeaderPaymentComponent as ɵcn, TransactionHeaderComponent$1 as ɵco, TransactionLinesGridModule as ɵcp, TransactionBaseGridModule as ɵcq, TransactionLineSidePanelModule as ɵcr, TransactionLineSidePanelDefaultModule as ɵcs, TransactionLinePriceModule as ɵct, TransactionLinePriceComponent as ɵcu, TransactionLineFieldsBaseComponent as ɵcv, TransactionLinePriceListModule as ɵcw, TransactionLinePriceListComponent as ɵcx, TransactionLineVatModule as ɵcy, TransactionLineVatComponent as ɵcz, DictionaryService as ɵd, TransactionLineQuantityModule as ɵda, TransactionLineQuantityComponent as ɵdb, TransactionLineLineDiscountModule as ɵdc, TransactionLineLineDiscountComponent as ɵdd, TransactionLineDeliveryMethodModule as ɵde, TransactionLineDeliveryMethodComponent as ɵdf, TransactionLineDeliveryDateModule as ɵdg, TransactionLineDeliveryDateComponent as ɵdh, TransactionLineReferenceModule as ɵdi, TransactionLineReferenceComponent as ɵdj, TransactionLineCommissionCodeModule as ɵdk, TransactionLineCommissionCodeComponent as ɵdl, TransactionLineWarehouseModule as ɵdm, TransactionLineWarehouseComponent as ɵdn, TransactionLineDiscountAmountModule as ɵdo, TransactionLineDiscountAmountComponent as ɵdp, TransactionLineQuantumDiscountModule as ɵdq, TransactionLineQuantumDiscountComponent as ɵdr, TransactionLineSpecialDiscountModule as ɵds, TransactionLineSpecialDiscountComponent as ɵdt, TransactionLineSidePanelDefaultComponent as ɵdu, TransactionReceivingGoodsHistoryModule as ɵdv, TransactionHistoryGridModule as ɵdw, TransactionHistoryGridStatusModule as ɵdx, TransactionHistoryGridStatusComponent as ɵdy, TransactionHistoryGridComponent as ɵdz, TransactionConnectorService as ɵe, TransactionReceivingGoodsHistoryComponent as ɵea, TransactionReceivingGoodsDetailsModule as ɵeb, TransactionReceivingGoodsDetailsComponent as ɵec, ArticleService as ɵed, TransactionButtonBarModule as ɵee, TransactionButtonBarComponent as ɵef, TransactionMappingService as ɵeg, TransactionButtonBarButtonComponent as ɵeh, TransactionConfirmationHistoryModule as ɵei, TransactionConfirmationHistoryComponent as ɵej, TransactionLineSidePanelPurchaseModule as ɵek, TransactionLineSidePanelPurchaseComponent as ɵel, TransactionEventService as ɵem, TransactionLineSidePanelComponent as ɵen, TransactionBaseGridComponent as ɵeo, TransactionGridBaseComponent as ɵep, TransactionLinesGridComponent as ɵeq, DiscountModule as ɵer, DiscountComponent as ɵes, TransactionQuickAccessOverviewModule as ɵet, TransactionQuickAccessOverviewComponent as ɵeu, TransactionOrderConfirmationGridModule as ɵev, TransactionOrderConfirmationGridComponent as ɵew, TransactionReceivedGoodsGridModule as ɵex, TransactionReceivedGoodsGridComponent as ɵey, ViewModeButtonsModule as ɵez, CollectionCacheService as ɵf, ViewModeButtonsComponent as ɵfa, TransactionGridModule as ɵfb, TransactionGridComponent as ɵfc, TransactionSearchService as ɵfd, TransactionSearchResultModule as ɵfe, TransactionSearchSalesOrderTileModule as ɵff, TransactionSearchSalesOrderTileComponent as ɵfg, TransactionSearchSalesOrderGridModule as ɵfh, TransactionSearchSalesOrderGridComponent as ɵfi, TransactionSearchHeaderModule as ɵfj, TransactionSearchHeaderComponent as ɵfk, TransactionSearchResultComponent as ɵfl, TransactionFilterModule as ɵfm, TransactionFilterCategoriesModule as ɵfn, TransactionFilterCategoriesComponent as ɵfo, TransactionFilterContentOrderModule as ɵfp, TransactionFilterContentOrderComponent as ɵfq, FilterRequestService as ɵfr, TransactionFilterContentLogisticsModule as ɵfs, TransactionFilterHistoricStateModule as ɵft, TransactionFilterHistoricStateComponent as ɵfu, TransactionFilterContentLogisticsComponent as ɵfv, TransactionFilterContentArticleModule as ɵfw, TransactionFilterContentArticleComponent as ɵfx, TransactionFilterComponent as ɵfy, ArticleConnectorService as ɵg, CoreModule as ɵh, ConfirmationDialogModule as ɵi, PipeModule as ɵj, AppendPipe as ɵk, DeliveryTimePipe as ɵl, DateDurationPipe as ɵm, LocalizePipe as ɵn, CoCurrencyPipe as ɵo, SafeStylePipe as ɵp, SafeHtmlPipe as ɵq, ConfirmationDialogComponent as ɵr, DialogBaseComponent as ɵs, ImageDisplayComponent as ɵt, IconComponent as ɵu, IconCacheService as ɵv, CustomerGroupsComponent as ɵw, StockStatusIndicatorComponent as ɵx, RelationAddressModule as ɵy, RelationAddressComponent as ɵz };
 //# sourceMappingURL=colijnit-transaction.js.map