@colijnit/transaction 12.1.19 → 12.1.20

package/bundles/colijnit-transaction.umd.js

@@ -550,8 +550,10 @@
                     "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",
@@ -656,8 +658,10 @@
                     "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",
@@ -836,8 +840,10 @@
                     "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",
@@ -922,9 +928,11 @@
                     "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",
@@ -4748,8 +4756,10 @@
         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";
@@ -5187,8 +5197,10 @@
         "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>",
@@ -6812,6 +6824,124 @@
         { 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 = {}));
+
+    var TransactionLineActionButtonsComponent = /** @class */ (function () {
+        function TransactionLineActionButtonsComponent(iconCacheService, _transactionService, _dictionaryService) {
+            this.iconCacheService = iconCacheService;
+            this._transactionService = _transactionService;
+            this._dictionaryService = _dictionaryService;
+            this.icons = Icon;
+            this.alignDirection = Direction.Down;
+            this.waitingForUserAction = new i0.EventEmitter();
+            this.sidePanelButtonClicked = new i0.EventEmitter();
+            this.showActionButtons = false;
+            this.showActionButtonsDelayed = false;
+            this.showTransactionArticleText = false;
+            this.showTransactionArticleTextOverview = false;
+        }
+        TransactionLineActionButtonsComponent.prototype.showClass = function () {
+            return true;
+        };
+        TransactionLineActionButtonsComponent.prototype.ngOnInit = function () {
+            this.transactionKind = this._transactionService.currentTransaction.transactionInfo.transactionKind;
+        };
+        TransactionLineActionButtonsComponent.prototype.handleShowHideClick = function () {
+            var _this = this;
+            this.showActionButtons = !this.showActionButtons;
+            setTimeout(function () {
+                _this.showActionButtonsDelayed = !_this.showActionButtonsDelayed;
+            }, 1);
+        };
+        TransactionLineActionButtonsComponent.prototype.handleTransactionArticleTextOverview = function () {
+            this.articleTextHeader = this._dictionaryService.get("TEXT_ARTICLE_BOUND", true, this.transactionLine.articleNumber);
+            this.textToEdit = undefined;
+            this._showArticleTextOverviewDialog();
+            this.showActionButtons = false;
+            this.showActionButtonsDelayed = false;
+        };
+        TransactionLineActionButtonsComponent.prototype.handleTransactionArticleText = function () {
+            this.articleTextHeader = this._dictionaryService.get("TEXT_ARTICLE_BOUND", true, this.transactionLine.articleNumber);
+            this.textToEdit = undefined;
+            this.showArticleTextDialog();
+            this.showActionButtons = false;
+            this.showActionButtonsDelayed = false;
+        };
+        TransactionLineActionButtonsComponent.prototype.handleShowSidePanel = function () {
+            this.sidePanelButtonClicked.next(this.transactionLine);
+            this.waitingForUserAction.next(true);
+            this.showActionButtons = false;
+            this.showActionButtonsDelayed = false;
+        };
+        TransactionLineActionButtonsComponent.prototype.showOverviewButton = function () {
+            return this.transactionKind === transactionKind_enum.TransactionKind.PurchaseOrder ||
+                this.transactionKind === transactionKind_enum.TransactionKind.SalesOrder;
+        };
+        TransactionLineActionButtonsComponent.prototype.showAddTextButton = function () {
+            return this.transactionKind === transactionKind_enum.TransactionKind.PurchaseOrder ||
+                this.transactionKind === transactionKind_enum.TransactionKind.SalesOrder;
+        };
+        TransactionLineActionButtonsComponent.prototype.showSidebarButton = function () {
+            return this.transactionKind === transactionKind_enum.TransactionKind.PurchaseOrder ||
+                this.transactionKind === transactionKind_enum.TransactionKind.SalesOrder;
+        };
+        TransactionLineActionButtonsComponent.prototype.saveTransactionArticleLineText = function (transactionAddTextLineRequest) {
+            var _this = this;
+            this._transactionService.addTextLine(transactionAddTextLineRequest.showOnDocuments, transactionAddTextLineRequest.text, 0, true, transactionAddTextLineRequest.refArticleLineNr).then(function () {
+                _this._hideArticleTextDialog();
+            });
+        };
+        TransactionLineActionButtonsComponent.prototype.closeTransactionArticleText = function (event) {
+            this._hideArticleTextDialog();
+        };
+        TransactionLineActionButtonsComponent.prototype.closeTransactionArticleTextOverview = function (event) {
+            this._hideArticleTextOverviewDialog();
+        };
+        TransactionLineActionButtonsComponent.prototype.showArticleTextDialog = function () {
+            this.showTransactionArticleText = true;
+            this.waitingForUserAction.next(true);
+        };
+        TransactionLineActionButtonsComponent.prototype._hideArticleTextDialog = function () {
+            this.showTransactionArticleText = false;
+            this.waitingForUserAction.next(false);
+        };
+        TransactionLineActionButtonsComponent.prototype._showArticleTextOverviewDialog = function () {
+            this.showTransactionArticleTextOverview = true;
+            this.waitingForUserAction.next(true);
+        };
+        TransactionLineActionButtonsComponent.prototype._hideArticleTextOverviewDialog = function () {
+            this.showTransactionArticleTextOverview = false;
+            this.waitingForUserAction.next(false);
+        };
+        return TransactionLineActionButtonsComponent;
+    }());
+    TransactionLineActionButtonsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-transaction-line-action-buttons",
+                    template: "\n    <div class=\"transaction-line-action-buttons-wrapper\">\n      <div class=\"show-hide-button\">\n        <icon [icon]=\"icons.ThickLines\" (click)=\"handleShowHideClick()\"></icon>\n      </div>\n\n      <div class=\"action-buttons-container\" clickOutside\n           *ngIf=\"showActionButtons\"\n           [ngClass]=\"alignDirection\"\n           (clickOutside)=\"handleShowHideClick()\">\n\n        <co-button *ngIf=\"showOverviewButton()\"\n            class=\"transaction-line-overview-button circle\"\n                   [class.show]=\"showActionButtonsDelayed\"\n                   [iconData]=\"iconCacheService.getIcon(icons.Txt)\"\n                   (click)=\"handleTransactionArticleTextOverview()\"></co-button>\n\n        <co-button *ngIf=\"showAddTextButton()\"\n                   class=\"transaction-line-add-text-button circle\"\n                   [class.show]=\"showActionButtonsDelayed\"\n                   [iconData]=\"iconCacheService.getIcon(icons.Txt)\"\n                   (click)=\"handleTransactionArticleText()\"></co-button>\n\n        <co-button *ngIf=\"showSidebarButton()\"\n                   class=\"transaction-line-show-sidebar-button circle\"\n                   [class.show]=\"showActionButtonsDelayed\"\n                   [iconData]=\"iconCacheService.getIcon(icons.MasterDetail)\"\n                   (click)=\"handleShowSidePanel()\"></co-button>\n      </div>\n    </div>\n\n    <co-transaction-article-text-overview *ngIf=\"showTransactionArticleTextOverview\"\n                                          [header]=\"articleTextHeader | localize\"\n                                          [transactionLine]=\"transactionLine\"\n                                          (saveClick)=\"saveTransactionArticleLineText($event)\"\n                                          (closeClick)=\"closeTransactionArticleTextOverview($event)\"\n                                          (cancelClick)=\"closeTransactionArticleTextOverview($event)\"\n    ></co-transaction-article-text-overview>\n\n    <co-transaction-article-text *ngIf=\"showTransactionArticleText\"\n                                 [header]=\"articleTextHeader | localize\"\n                                 [articleLineNr]=\"transactionLine.lineNr\"\n                                 [articleRef]=\"transactionLine.articleNumber\"\n                                 [transactionLine]=\"transactionLine\"\n                                 [editText]=\"textToEdit\"\n                                 (saveClick)=\"saveTransactionArticleLineText($event)\"\n                                 (closeClick)=\"closeTransactionArticleText($event)\"\n                                 (cancelClick)=\"closeTransactionArticleText($event)\"\n    ></co-transaction-article-text>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    TransactionLineActionButtonsComponent.ctorParameters = function () { return [
+        { type: IconCacheService },
+        { type: TransactionService },
+        { type: DictionaryService }
+    ]; };
+    TransactionLineActionButtonsComponent.propDecorators = {
+        transactionLine: [{ type: i0.Input }],
+        alignDirection: [{ type: i0.Input }],
+        waitingForUserAction: [{ type: i0.Output }],
+        sidePanelButtonClicked: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-line-action-buttons",] }]
+    };
+
     var TransactionLineComponent = /** @class */ (function () {
         function TransactionLineComponent(service, iconCacheService, _dialogService, _dictionaryService, _imageService) {
             this.service = service;
@@ -6824,8 +6954,6 @@
             this.waitingForUserAction = new i0.EventEmitter();
             this.sidePanelButtonClicked = new i0.EventEmitter();
             this.stock = stockStatus_enum.StockStatus.Low;
-            this.showTransactionArticleText = false;
-            this.showTransactionArticleTextOverview = false;
             this.mouseOver = false;
         }
         Object.defineProperty(TransactionLineComponent.prototype, "line", {
@@ -6880,31 +7008,13 @@
                 });
             });
         };
-        TransactionLineComponent.prototype.handleTransactionArticleText = function (event) {
-            this.articleTextHeader = this._dictionaryService.get("TEXT_ARTICLE_BOUND", true, this.line.articleNumber);
-            this.textToEdit = undefined;
-            this._showArticleTextDialog();
-        };
-        TransactionLineComponent.prototype.handleTransactionArticleTextOverview = function (event) {
-            this.articleTextHeader = this._dictionaryService.get("TEXT_ARTICLE_BOUND", true, this.line.articleNumber);
-            this.textToEdit = undefined;
-            this._showArticleTextOverviewDialog();
-        };
-        TransactionLineComponent.prototype.saveTransactionArticleLineText = function (transactionAddTextLineRequest) {
-            var _this = this;
-            this.service.addTextLine(transactionAddTextLineRequest.showOnDocuments, transactionAddTextLineRequest.text, 0, true, transactionAddTextLineRequest.refArticleLineNr).then(function () {
-                _this._hideArticleTextDialog();
-            });
-        };
-        TransactionLineComponent.prototype.closeTransactionArticleText = function (event) {
-            this._hideArticleTextDialog();
-        };
-        TransactionLineComponent.prototype.closeTransactionArticleTextOverview = function (event) {
-            this._hideArticleTextOverviewDialog();
-        };
         TransactionLineComponent.prototype.handleOpenArticleText = function (text) {
-            this.textToEdit = text;
-            this._showArticleTextDialog();
+            this.transactionLineActionButtons.textToEdit = text;
+            this.transactionLineActionButtons.showArticleTextDialog();
+        };
+        TransactionLineComponent.prototype.handleShowSidePanel = function () {
+            this.sidePanelButtonClicked.next();
+            this.waitingForUserAction.next(true);
         };
         TransactionLineComponent.prototype._loadLineImage = function () {
             return __awaiter(this, void 0, void 0, function () {
@@ -6919,76 +7029,12 @@
                 });
             });
         };
-        // 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;
-        //   }
-        // }
-        TransactionLineComponent.prototype._showArticleTextDialog = function () {
-            this.showTransactionArticleText = true;
-            this.waitingForUserAction.next(true);
-        };
-        TransactionLineComponent.prototype._hideArticleTextDialog = function () {
-            this.showTransactionArticleText = false;
-            this.waitingForUserAction.next(false);
-        };
-        TransactionLineComponent.prototype._showArticleTextOverviewDialog = function () {
-            this.showTransactionArticleTextOverview = true;
-            this.waitingForUserAction.next(true);
-        };
-        TransactionLineComponent.prototype._hideArticleTextOverviewDialog = function () {
-            this.showTransactionArticleTextOverview = false;
-            this.waitingForUserAction.next(false);
-        };
-        TransactionLineComponent.prototype.handleShowSidePanel = function (event) {
-            this.sidePanelButtonClicked.next();
-            this.waitingForUserAction.next(true);
-        };
         return TransactionLineComponent;
     }());
     TransactionLineComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-line",
-                    template: "\n    <div class=\"transaction-line\">\n      <ng-container *ngIf=\"line.isArticle\">\n        <div class=\"transaction-line-wrapper\">\n          <div class=\"transaction-line-image\" [class.preview]=\"preview\">\n            <co-image-display [model]=\"image\"></co-image-display>\n          </div>\n          <div class=\"transaction-line-description\">\n            <div class=\"description-wrapper\">\n              <span [textContent]=\"line.goodDescription\" class=\"transaction-line-description-description\"></span>\n              <span *ngIf=\"line.goodDescription && line.articleNumber\" class=\"transaction-line-description-divider\">|</span>\n              <span [textContent]=\"line.articleNumber\" class=\"transaction-line-description-sku\"></span>\n            </div>\n            <div *ngIf=!preview class=\"article-text-wrapper\">\n              <div class=\"article-text\" *ngFor=\"let text of line.articleTestAsArray\">\n                <span [innerHTML]=\"text | safeHtml\" (dblclick)=\"handleOpenArticleText(text)\"></span>\n              </div>\n            </div>\n            <div *ngIf=!preview class=\"configuration-text-wrapper\">\n              <span [innerHTML]=\"line.configurationReadable\"></span>\n            </div>\n          </div>\n          <div *ngIf=!preview class=\"transaction-line-stock\">\n            <span [textContent]=\"'STOCK' | localize\" class=\"small-font\"></span>\n            <stock-status-indicator [model]=\"stock\"></stock-status-indicator>\n            <span [textContent]=\"'DELIVERY_TIME_PERIOD' | localize\" class=\"small-font\"></span>\n<!--            <span [textContent]=\"line.deliveryDate | deliveryTime\"></span>-->\n          </div>\n          <div *ngIf=!preview class=\"transaction-line-amount\">\n            <co-input-number-picker class=\"amount-number-picker\"\n                                    [(model)]=\"localAmount\" [min]=\"0\"\n                                    [readonly]=\"true\"\n                                    (modelChange)=\"changeLineAmount($event)\"></co-input-number-picker>\n          </div>\n          <div class=\"transaction-line-delete\" *ngIf=\"preview\">\n            <div class=\"delete-wrapper\" (click)=\"deleteTransactionLineClick()\">\n              <icon class=\"delete-icon\" [icon]=\"icons.Cancel\"></icon>\n              <div class=\"delete-link\"\n                   [textContent]=\"'DELETE_TRANSACTION_LINE' | localize:false\">\n              </div>\n            </div>\n          </div>\n          <div class=\"transaction-line-totals\">\n            <span [textContent]=\"line.displayNetLineTotal | coCurrency: true\"></span>\n          </div>\n          <div *ngIf=\"!preview\" class=\"transaction-line-buttons\">\n            <co-button class=\"transaction-line-overview-button circle\" [class.show]=\"mouseOver || isSelected\" [iconData]=\"iconCacheService.getIcon(icons.Txt)\" (click)=\"handleTransactionArticleTextOverview($event)\"></co-button>\n            <co-button class=\"transaction-line-add-text-button circle\" [class.show]=\"mouseOver || isSelected\" [iconData]=\"iconCacheService.getIcon(icons.Txt)\" (click)=\"handleTransactionArticleText($event)\"></co-button>\n            <co-button class=\"transaction-line-show-sidebar-button circle\" [class.show]=\"mouseOver || isSelected\" [iconData]=\"iconCacheService.getIcon(icons.MasterDetail)\" (click)=\"handleShowSidePanel($event)\"></co-button>\n          </div>\n        </div>\n        <div class=\"transaction-line-delete\" *ngIf=\"!preview\">\n          <div class=\"delete-wrapper\" (click)=\"deleteTransactionLineClick()\">\n            <icon class=\"delete-icon\" [icon]=\"icons.Cancel\"></icon>\n            <div class=\"delete-link\"\n                 [textContent]=\"'DELETE_TRANSACTION_LINE' | localize:false\">\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"line.isText\">\n        <div [textContent]=\"line.text\"></div>\n        <div class=\"transaction-line-delete\" *ngIf=\"!preview\">\n          <div class=\"delete-wrapper\" (click)=\"deleteTransactionLineClick()\">\n            <icon class=\"delete-icon\" [icon]=\"icons.Cancel\"></icon>\n            <div class=\"delete-link\"\n                 [textContent]=\"'DELETE_TRANSACTION_LINE' | localize:false\">\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <co-transaction-article-text-overview *ngIf=\"showTransactionArticleTextOverview\"\n                                          [header]=\"articleTextHeader | localize\"\n                                          [transactionLine]=\"line\"\n                                          (saveClick)=\"saveTransactionArticleLineText($event)\"\n                                          (closeClick)=\"closeTransactionArticleTextOverview($event)\"\n                                          (cancelClick)=\"closeTransactionArticleTextOverview($event)\"\n    ></co-transaction-article-text-overview>\n    <co-transaction-article-text *ngIf=\"showTransactionArticleText\"\n                                 [header]=\"articleTextHeader | localize\"\n                                 [articleLineNr]=\"line.lineNr\"\n                                 [articleRef]=\"line.articleNumber\"\n                                 [transactionLine]=\"line\"\n                                 [editText]=\"textToEdit\"\n                                 (saveClick)=\"saveTransactionArticleLineText($event)\"\n                                 (closeClick)=\"closeTransactionArticleText($event)\"\n                                 (cancelClick)=\"closeTransactionArticleText($event)\"\n    ></co-transaction-article-text>\n  ",
+                    template: "\n    <div class=\"transaction-line\">\n      <ng-container *ngIf=\"line.isArticle\">\n        <div class=\"transaction-line-wrapper\">\n          <div class=\"transaction-line-image\" [class.preview]=\"preview\">\n            <co-image-display [model]=\"image\"></co-image-display>\n          </div>\n          <div class=\"transaction-line-description\">\n            <div class=\"description-wrapper\">\n              <span [textContent]=\"line.goodDescription\" class=\"transaction-line-description-description\"></span>\n              <span *ngIf=\"line.goodDescription && line.articleNumber\" class=\"transaction-line-description-divider\">|</span>\n              <span [textContent]=\"line.articleNumber\" class=\"transaction-line-description-sku\"></span>\n            </div>\n            <div *ngIf=!preview class=\"article-text-wrapper\">\n              <div class=\"article-text\" *ngFor=\"let text of line.articleTestAsArray\">\n                <span [innerHTML]=\"text | safeHtml\" (dblclick)=\"handleOpenArticleText(text)\"></span>\n              </div>\n            </div>\n            <div *ngIf=!preview class=\"configuration-text-wrapper\">\n              <span [innerHTML]=\"line.configurationReadable\"></span>\n            </div>\n          </div>\n          <div *ngIf=!preview class=\"transaction-line-stock\">\n            <span [textContent]=\"'STOCK' | localize\" class=\"small-font\"></span>\n            <stock-status-indicator [model]=\"stock\"></stock-status-indicator>\n            <span [textContent]=\"'DELIVERY_TIME_PERIOD' | localize\" class=\"small-font\"></span>\n            <!--            <span [textContent]=\"line.deliveryDate | deliveryTime\"></span>-->\n          </div>\n          <div *ngIf=!preview class=\"transaction-line-amount\">\n            <co-input-number-picker class=\"amount-number-picker\"\n                                    [(model)]=\"localAmount\" [min]=\"0\"\n                                    [readonly]=\"true\"\n                                    (modelChange)=\"changeLineAmount($event)\"></co-input-number-picker>\n          </div>\n          <div class=\"transaction-line-delete\" *ngIf=\"preview\">\n            <div class=\"delete-wrapper\" (click)=\"deleteTransactionLineClick()\">\n              <icon class=\"delete-icon\" [icon]=\"icons.Cancel\"></icon>\n              <div class=\"delete-link\"\n                   [textContent]=\"'DELETE_TRANSACTION_LINE' | localize:false\">\n              </div>\n            </div>\n          </div>\n          <div class=\"transaction-line-totals\">\n            <span [textContent]=\"line.displayNetLineTotal | coCurrency: true\"></span>\n          </div>\n          <div *ngIf=\"!preview\" class=\"transaction-line-buttons\">\n            <co-transaction-line-action-buttons\n              [transactionLine]=\"line\"\n              (waitingForUserAction)=\"waitingForUserAction.next($event)\"\n              (sidePanelButtonClicked)=\"handleShowSidePanel()\"\n            ></co-transaction-line-action-buttons>\n          </div>\n        </div>\n        <div class=\"transaction-line-delete\" *ngIf=\"!preview\">\n          <div class=\"delete-wrapper\" (click)=\"deleteTransactionLineClick()\">\n            <icon class=\"delete-icon\" [icon]=\"icons.Cancel\"></icon>\n            <div class=\"delete-link\"\n                 [textContent]=\"'DELETE_TRANSACTION_LINE' | localize:false\">\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"line.isText\">\n        <div [textContent]=\"line.text\"></div>\n        <div class=\"transaction-line-delete\" *ngIf=\"!preview\">\n          <div class=\"delete-wrapper\" (click)=\"deleteTransactionLineClick()\">\n            <icon class=\"delete-icon\" [icon]=\"icons.Cancel\"></icon>\n            <div class=\"delete-link\"\n                 [textContent]=\"'DELETE_TRANSACTION_LINE' | localize:false\">\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -7004,6 +7050,7 @@
         line: [{ type: i0.Input }],
         waitingForUserAction: [{ type: i0.Output }],
         sidePanelButtonClicked: [{ type: i0.Output }],
+        transactionLineActionButtons: [{ type: i0.ViewChild, args: [TransactionLineActionButtonsComponent,] }],
         isText: [{ type: i0.HostBinding, args: ["class.is-text",] }],
         isArticle: [{ type: i0.HostBinding, args: ["class.is-article",] }],
         isSelected: [{ type: i0.HostBinding, args: ["class.is-selected",] }, { type: i0.Input, args: ['selected',] }],
@@ -7136,6 +7183,31 @@
                 },] }
     ];
 
+    var TransactionLineActionButtonsModule = /** @class */ (function () {
+        function TransactionLineActionButtonsModule() {
+        }
+        return TransactionLineActionButtonsModule;
+    }());
+    TransactionLineActionButtonsModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        CoreModule,
+                        corecomponents_v12.ButtonModule,
+                        corecomponents_v12.ClickoutsideModule,
+                        TransactionArticleTextOverviewModule,
+                        TransactionArticleTextModule,
+                        PipeModule
+                    ],
+                    declarations: [
+                        TransactionLineActionButtonsComponent
+                    ],
+                    exports: [
+                        TransactionLineActionButtonsComponent
+                    ]
+                },] }
+    ];
+
     var TransactionLineModule = /** @class */ (function () {
         function TransactionLineModule() {
         }
@@ -7150,7 +7222,8 @@
                         corecomponents_v12.InputNumberPickerModule,
                         TransactionArticleTextModule,
                         TransactionArticleTextOverviewModule,
-                        PipeModule
+                        PipeModule,
+                        TransactionLineActionButtonsModule
                     ],
                     declarations: [
                         TransactionLineComponent
@@ -8564,7 +8637,7 @@
     TransactionBaseGridComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-base-grid",
-                    template: "\n    <co-simple-grid [data]=\"transactionLines\"\n                    [extraColumns]=\"extraColumns\"\n                    [dragDropEnabled]=\"true\"\n                    [emitDragDrop]=\"true\"\n                    (onDrop)=\"handleDrop($event)\"\n                    (rowVisible)=\"rowVisible.next($event)\">\n      <co-simple-grid-column [headerText]=\"'DESCRIPTION' | localize\" [width]=\"300\" [order]=\"10\">\n        <ng-template #template let-row = \"row\">\n          <div class=\"transaction-grid-article-description\" [textContent]=\"row.goodDescription\"></div>\n          <div class=\"transaction-grid-article-text\" [textContent]=\"row.articleBoundConcatenatedText\"></div>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [width]=\"150\" [order]=\"20\">\n        <ng-template #template let-row = \"row\">\n          <co-image-display class=\"transaction-grid-article-image\" [model]=\"row.articleImageData\"></co-image-display>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [field]=\"'articleNumber'\" [width]=\"70\" [order]=\"30\" [textAlign]=\"align.Center\">\n        <ng-template #headerTemplate>\n          <icon class=\"transaction-grid-header-icon\" [icon]=\"icon.BarcodeSolid\"></icon>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"''\" [width]=\"40\" [field]=\"'sideMenuButton'\" [order]=\"400\">\n        <ng-template #template let-row = \"row\">\n          <icon class=\"sidepanel-icon\" [icon]=\"icons.Menu\" (click)=\"openSidePanel(row)\"></icon>\n        </ng-template>\n      </co-simple-grid-column>\n    </co-simple-grid>\n  ",
+                    template: "\n    <co-simple-grid [data]=\"transactionLines\"\n                    [extraColumns]=\"extraColumns\"\n                    [dragDropEnabled]=\"true\"\n                    [emitDragDrop]=\"true\"\n                    (onDrop)=\"handleDrop($event)\"\n                    (rowVisible)=\"rowVisible.next($event)\">\n      <co-simple-grid-column [headerText]=\"'DESCRIPTION' | localize\" [width]=\"300\" [order]=\"10\">\n        <ng-template #template let-row = \"row\">\n          <div class=\"transaction-grid-article-description\" [textContent]=\"row.goodDescription\"></div>\n          <div class=\"transaction-grid-article-text\" [textContent]=\"row.articleBoundConcatenatedText\"></div>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [width]=\"150\" [order]=\"20\">\n        <ng-template #template let-row = \"row\">\n          <co-image-display class=\"transaction-grid-article-image\" [model]=\"row.articleImageData\"></co-image-display>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [field]=\"'articleNumber'\" [width]=\"70\" [order]=\"30\" [textAlign]=\"align.Center\">\n        <ng-template #headerTemplate>\n          <icon class=\"transaction-grid-header-icon\" [icon]=\"icon.BarcodeSolid\"></icon>\n        </ng-template>\n      </co-simple-grid-column>\n      <co-simple-grid-column [headerText]=\"''\" [width]=\"40\" [field]=\"'sideMenuButton'\" [order]=\"400\">\n        <ng-template #template let-row = \"row\">\n          <co-transaction-line-action-buttons class=\"transaction-line-action-buttons\"\n            [transactionLine]=\"row\"\n            (sidePanelButtonClicked)=\"openSidePanel(row)\"\n          ></co-transaction-line-action-buttons>\n        </ng-template>\n      </co-simple-grid-column>\n    </co-simple-grid>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -10675,6 +10748,7 @@
                         corecomponents_v12.SimpleGridModule,
                         corecomponents_v12.ButtonModule,
                         TransactionLineSidePanelModule,
+                        TransactionLineActionButtonsModule,
                     ],
                     declarations: [
                         TransactionBaseGridComponent
@@ -11269,11 +11343,24 @@
                 },] }
     ];
 
+    // The different view modes for search
+    var SearchViewMode;
+    (function (SearchViewMode) {
+        SearchViewMode[SearchViewMode["FullScreen"] = 0] = "FullScreen";
+        SearchViewMode[SearchViewMode["SideBar"] = 1] = "SideBar";
+    })(SearchViewMode || (SearchViewMode = {}));
+
     var TransactionSearchService = /** @class */ (function () {
         function TransactionSearchService(_transactionService) {
             this._transactionService = _transactionService;
             this.searchRequest = new transactionSearchViewRequest.TransactionSearchViewRequest();
             this.transactions = [];
+            this.labelBasedOnTransactionType = new Map([
+                [transactionKind_enum.TransactionKind.SalesOrder, "SALESORDERS"],
+                [transactionKind_enum.TransactionKind.PurchaseOrder, "PURCHASEORDERS"],
+                [transactionKind_enum.TransactionKind.ServiceOrder, "SERVICEORDERS"]
+            ]);
+            this._transactionType = transactionKind_enum.TransactionKind.SalesOrder;
         }
         Object.defineProperty(TransactionSearchService.prototype, "transactionType", {
             get: function () {
@@ -11294,6 +11381,9 @@
                 _this.transactions = transactions;
             });
         };
+        TransactionSearchService.prototype.getLabelBasedOnTransactionType = function () {
+            return this.labelBasedOnTransactionType.get(this._transactionType);
+        };
         TransactionSearchService.prototype.resetFilters = function () {
             var oldSearchRequest = Object.assign({}, this.searchRequest);
             this._resetRequest();
@@ -11318,7 +11408,11 @@
     var TransactionSearchComponent = /** @class */ (function () {
         function TransactionSearchComponent(_transactionSearchService) {
             this._transactionSearchService = _transactionSearchService;
+            this.searchViewModes = SearchViewMode;
+            this.activeSearchViewMode = SearchViewMode.FullScreen;
+            this.closeClick = new i0.EventEmitter();
             this.transactionClick = new i0.EventEmitter();
+            this.searchViewModeChange = new i0.EventEmitter();
             this.showFilterSidebar = false;
         }
         Object.defineProperty(TransactionSearchComponent.prototype, "transactionType", {
@@ -11335,8 +11429,15 @@
         TransactionSearchComponent.prototype.showClass = function () {
             return true;
         };
-        TransactionSearchComponent.prototype.handleShowFilter = function () {
-            this.showFilterSidebar = true;
+        Object.defineProperty(TransactionSearchComponent.prototype, "fullscreen", {
+            get: function () {
+                return this.activeSearchViewMode === SearchViewMode.FullScreen;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TransactionSearchComponent.prototype.toggleFilter = function () {
+            this.showFilterSidebar = !this.showFilterSidebar;
         };
         TransactionSearchComponent.prototype.handleHideFilter = function () {
             this.showFilterSidebar = false;
@@ -11349,12 +11450,21 @@
         TransactionSearchComponent.prototype.onTransactionClick = function (transaction) {
             this.transactionClick.emit(transaction);
         };
+        TransactionSearchComponent.prototype.onResizeClick = function () {
+            if (this.activeSearchViewMode === this.searchViewModes.SideBar) {
+                this.activeSearchViewMode = this.searchViewModes.FullScreen;
+            }
+            else {
+                this.activeSearchViewMode = this.searchViewModes.SideBar;
+            }
+            this.searchViewModeChange.emit(this.activeSearchViewMode);
+        };
         return TransactionSearchComponent;
     }());
     TransactionSearchComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-transaction-search',
-                    template: "\n    <div class=\"transaction-search-wrapper\">\n      <div class=\"transaction-filter-wrapper narrow-scrollbar\" *ngIf=\"showFilterSidebar\" @showHideFilterSidebar>\n        <co-transaction-filter (closeButtonClick)=\"handleHideFilter()\"\n                               (resetFilterClick)=\"handleResetFilter()\"></co-transaction-filter>\n      </div>\n      <div class=\"transaction-search-result-wrapper\">\n        <co-transaction-search-result (filterButtonClick)=\"handleShowFilter()\"\n                                      (transactionClick)=\"onTransactionClick($event)\"></co-transaction-search-result>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"transaction-search-wrapper\" [ngClass]=\"fullscreen ? 'fullscreen' : 'sidebar'\">\n      <div class=\"transaction-filter-wrapper narrow-scrollbar\" [ngClass]=\"fullscreen ? 'fullscreen' : 'sidebar'\"\n           *ngIf=\"showFilterSidebar\" @showHideFilterSidebar>\n        <co-transaction-filter\n          [activeSearchViewMode]=\"activeSearchViewMode\"\n          (closeButtonClick)=\"handleHideFilter()\"\n          (resetFilterClick)=\"handleResetFilter()\"></co-transaction-filter>\n      </div>\n      <div class=\"transaction-search-result-wrapper\">\n        <co-transaction-search-result\n          [transactionType]=\"transactionType\"\n          [activeSearchViewMode]=\"activeSearchViewMode\"\n          (filterClick)=\"toggleFilter()\"\n          (transactionClick)=\"onTransactionClick($event)\"\n          (resizeClick)=\"onResizeClick()\"\n          (closeClick)=\"closeClick.emit()\"\n        ></co-transaction-search-result>\n      </div>\n    </div>\n  ",
                     animations: [
                         animations.trigger("showHideFilterSidebar", [
                             animations.state("void", animations.style({ transform: 'translateX(-100%)' })),
@@ -11369,54 +11479,56 @@
         { type: TransactionSearchService }
     ]; };
     TransactionSearchComponent.propDecorators = {
+        closeClick: [{ type: i0.Output }],
         transactionType: [{ type: i0.Input }],
         transactionClick: [{ type: i0.Output }],
+        searchViewModeChange: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-search",] }]
     };
 
-    var TransactionSearchGridComponent = /** @class */ (function () {
-        function TransactionSearchGridComponent() {
+    var TransactionSearchSalesOrderGridComponent = /** @class */ (function () {
+        function TransactionSearchSalesOrderGridComponent() {
             this.align = corecomponents_v12.ColumnAlign;
             this.transactions = [];
             this.transactionClick = new i0.EventEmitter();
             this.extraColumns = [];
         }
-        Object.defineProperty(TransactionSearchGridComponent.prototype, "content", {
+        Object.defineProperty(TransactionSearchSalesOrderGridComponent.prototype, "content", {
             set: function (columnComponents) {
                 this.extraColumns = columnComponents.toArray();
             },
             enumerable: false,
             configurable: true
         });
-        TransactionSearchGridComponent.prototype.showClass = function () {
+        TransactionSearchSalesOrderGridComponent.prototype.showClass = function () {
             return true;
         };
-        TransactionSearchGridComponent.prototype.onTransactionClick = function (transaction) {
+        TransactionSearchSalesOrderGridComponent.prototype.onTransactionClick = function (transaction) {
             this.transactionClick.emit(transaction);
         };
-        return TransactionSearchGridComponent;
+        return TransactionSearchSalesOrderGridComponent;
     }());
-    TransactionSearchGridComponent.decorators = [
+    TransactionSearchSalesOrderGridComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-transaction-search-grid",
+                    selector: "co-transaction-search-sales-order-grid",
                     template: "\n    <div>\n      <co-simple-grid [data]=\"transactions\" [extraColumns]=\"extraColumns\" [dragDropEnabled]=\"true\" [emitDragDrop]=\"false\"\n                      (selectRow)=\"onTransactionClick($event)\">\n        <co-simple-grid-column [headerText]=\"'ACTIVE' | localize\"\n                               [order]=\"10\" [textAlign]=\"align.Center\">\n          <ng-template #template let-row= \"row\">\n            <co-input-checkbox [model]=\"row.active\" readonly></co-input-checkbox>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'NR' | localize\" [field]=\"'transNr'\" [order]=\"20\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'NAME' | localize\" [field]=\"'relationName'\"\n                               [order]=\"30\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'RELATION_NUMBER' | localize\" [field]=\"'relationNr'\"\n                               [order]=\"40\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'BRANCH' | localize\" [field]=\"'brancheName'\"\n                               [order]=\"50\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'ADDRESS' | localize\" [field]=\"'adres'\"\n                               [order]=\"70\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'REFERENCE_RELATION' | localize\" [field]=\"'relationReference'\" [order]=\"80\"></co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'PREFERRED_DATE' | localize\"\n                               [order]=\"90\" [textAlign]=\"align.Right\" [resizable]=\"false\">\n          <ng-template #template let-row = \"row\">\n            <div [textContent]=\"\"></div> <!--todo: wachten op aanpassing api-->\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'TRANSACTION_DATE' | localize\"\n                               [order]=\"100\" [textAlign]=\"align.Right\" [resizable]=\"false\">\n          <ng-template #template let-row = \"row\">\n            <div [textContent]=\"row.transDate | date:'dd MMM yyyy'\"></div>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'ORDER_DEFINITIVE' | localize\"\n                               [order]=\"105\" [textAlign]=\"align.Center\">\n          <ng-template #template let-row= \"row\">\n            <co-input-checkbox [model]=\"row.transactionDefinitive\" readonly></co-input-checkbox>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DELIVERY_DATE' | localize\"\n                               [order]=\"110\" [textAlign]=\"align.Right\" [resizable]=\"false\" >\n          <ng-template #template let-row = \"row\">\n            <div [textContent]=\"row.deliveryDate | date:'dd MMM yyyy'\"></div>\n          </ng-template>\n        </co-simple-grid-column>\n        <co-simple-grid-column [headerText]=\"'DELIVERY_DATE_DEFINITIVE' | localize\"\n                               [order]=\"115\" [textAlign]=\"align.Center\">\n          <ng-template #template let-row= \"row\">\n            <co-input-checkbox [model]=\"row.deliveryDateDefinitive\" readonly></co-input-checkbox>\n          </ng-template>\n        </co-simple-grid-column>\n      </co-simple-grid>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
-    TransactionSearchGridComponent.ctorParameters = function () { return []; };
-    TransactionSearchGridComponent.propDecorators = {
+    TransactionSearchSalesOrderGridComponent.ctorParameters = function () { return []; };
+    TransactionSearchSalesOrderGridComponent.propDecorators = {
         content: [{ type: i0.ContentChildren, args: [corecomponents_v12.SimpleGridColumnDirective,] }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-search-grid",] }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-search-sales-order-grid",] }],
         transactions: [{ type: i0.Input }],
         transactionClick: [{ type: i0.Output }]
     };
 
-    var TransactionSearchGridModule = /** @class */ (function () {
-        function TransactionSearchGridModule() {
+    var TransactionSearchSalesOrderGridModule = /** @class */ (function () {
+        function TransactionSearchSalesOrderGridModule() {
         }
-        return TransactionSearchGridModule;
+        return TransactionSearchSalesOrderGridModule;
     }());
-    TransactionSearchGridModule.decorators = [
+    TransactionSearchSalesOrderGridModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
@@ -11426,50 +11538,142 @@
                         corecomponents_v12.InputCheckboxModule
                     ],
                     declarations: [
-                        TransactionSearchGridComponent
+                        TransactionSearchSalesOrderGridComponent
                     ],
                     exports: [
-                        TransactionSearchGridComponent
+                        TransactionSearchSalesOrderGridComponent
                     ]
                 },] }
     ];
 
-    var TransactionTileComponent = /** @class */ (function () {
-        function TransactionTileComponent(iconCacheService) {
+    var TransactionSearchHeaderComponent = /** @class */ (function () {
+        function TransactionSearchHeaderComponent(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 i0.EventEmitter();
+            this.filterButtonClick = new i0.EventEmitter();
+            this.resizeClick = new i0.EventEmitter();
+            this.closeClick = new i0.EventEmitter();
+        }
+        Object.defineProperty(TransactionSearchHeaderComponent.prototype, "transactionType", {
+            set: function (value) {
+                this.label = this._dictionary.get(this.searchService.getLabelBasedOnTransactionType());
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TransactionSearchHeaderComponent.prototype.showClass = function () {
+            return true;
+        };
+        Object.defineProperty(TransactionSearchHeaderComponent.prototype, "fullscreen", {
+            get: function () {
+                return this.activeSearchViewMode === SearchViewMode.FullScreen;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TransactionSearchHeaderComponent.prototype.onResizeClick = function () {
+            this.resizeClick.emit();
+        };
+        TransactionSearchHeaderComponent.prototype.onCloseClick = function () {
+            this.closeClick.emit();
+        };
+        TransactionSearchHeaderComponent.prototype.onViewModeChange = function (viewMode) {
+            this.viewModeChange.emit(viewMode);
+        };
+        return TransactionSearchHeaderComponent;
+    }());
+    TransactionSearchHeaderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-transaction-search-header",
+                    template: "\n    <div class=\"transaction-search-header-wrapper\">\n      <div class=\"upper-header\">\n        <div class=\"header-title-wrapper\" [ngClass]=\"fullscreen ? 'fullscreen' : 'sidebar'\">\n          <div class=\"title\" *ngIf=\"fullscreen; else sidebar\">\n            <h1 [textContent]=\"label\"></h1>\n          </div>\n          <ng-template #sidebar>\n            <h2 [textContent]=\"'SEARCH' | localize\"></h2>\n            <span class=\"whitespace\" [textContent]=\"'IN' | localize | append: ' ' + label.toLowerCase()\"></span>\n          </ng-template>\n        </div>\n\n        <div class=\"header-buttons-wrapper\">\n          <div class=\"toggle-sidebar-button-wrapper button-wrapper\" [ngClass]=\"fullscreen ? 'fullscreen' : 'sidebar'\">\n            <co-button [iconData]=\"fullscreen ? iconSlideIn : iconResize\"\n                       [ngClass]=\"!fullscreen ? 'small' : ''\"\n                       class=\"toggle-sidebar-button circle transparent\"\n                       (click)=\"onResizeClick()\"></co-button>\n          </div>\n          <div class=\"close-search-button-wrapper button-wrapper\" *ngIf=\"!fullscreen\">\n            <co-button [iconData]=\"iconCancel\"\n                       class=\"toggle-sidebar-button circle small transparent\"\n                       (click)=\"onCloseClick()\">\n            </co-button>\n          </div>\n        </div>\n\n      </div>\n      <div class=\"header-searchbar-wrapper\">\n        <div>\n          <co-input-search class=\"transaction-search-general\"\n                           [ngClass]=\"fullscreen ? 'fullscreen' : 'sidebar'\"\n                           [(model)]=\"searchService.searchRequest.general\"\n                           [placeholder]=\"'Waar ben je naar op zoek?'\"\n                           (search)=\"searchService.searchTransactions()\"></co-input-search>\n        </div>\n        <div>\n          <co-button class=\"transaction-search-filter-button\"\n                     *ngIf=\"fullscreen\"\n                     [iconData]=\"iconCacheService.getIcon(icon.BarsFilter)\"\n                     (click)=\"filterButtonClick.emit()\">\n          </co-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"view-mode-buttons-wrapper\">\n      <co-view-mode-buttons\n        *ngIf=\"fullscreen\"\n        [showViewModes]=\"[contentViewModes.Tiles, contentViewModes.Grid]\"\n        (viewModeChange)=\"onViewModeChange($event)\">\n      </co-view-mode-buttons>\n    </div>\n    ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    TransactionSearchHeaderComponent.ctorParameters = function () { return [
+        { type: TransactionSearchService },
+        { type: IconCacheService },
+        { type: DictionaryService }
+    ]; };
+    TransactionSearchHeaderComponent.propDecorators = {
+        transactionType: [{ type: i0.Input }],
+        activeSearchViewMode: [{ type: i0.Input }],
+        activeContentViewMode: [{ type: i0.Input }],
+        viewModeChange: [{ type: i0.Output }],
+        filterButtonClick: [{ type: i0.Output }],
+        resizeClick: [{ type: i0.Output }],
+        closeClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-search-header",] }]
+    };
+
+    var TransactionSearchHeaderModule = /** @class */ (function () {
+        function TransactionSearchHeaderModule() {
+        }
+        return TransactionSearchHeaderModule;
+    }());
+    TransactionSearchHeaderModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        PipeModule,
+                        corecomponents_v12.ButtonModule,
+                        corecomponents_v12.InputSearchModule,
+                        ViewModeButtonsModule
+                    ],
+                    declarations: [
+                        TransactionSearchHeaderComponent
+                    ],
+                    exports: [
+                        TransactionSearchHeaderComponent
+                    ]
+                },] }
+    ];
+
+    var TransactionSearchSalesOrderTileComponent = /** @class */ (function () {
+        function TransactionSearchSalesOrderTileComponent(iconCacheService) {
             this.iconCacheService = iconCacheService;
             this.icons = Icon;
             this.tileClick = new i0.EventEmitter();
         }
-        TransactionTileComponent.prototype.showClass = function () {
+        TransactionSearchSalesOrderTileComponent.prototype.showClass = function () {
             return true;
         };
-        TransactionTileComponent.prototype.onTileClick = function (event) {
+        TransactionSearchSalesOrderTileComponent.prototype.onTileClick = function (event) {
             this.tileClick.emit(event);
         };
-        return TransactionTileComponent;
+        return TransactionSearchSalesOrderTileComponent;
     }());
-    TransactionTileComponent.decorators = [
+    TransactionSearchSalesOrderTileComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-transaction-tile",
-                    template: "\n    <div class=\"transaction-tile-wrapper\" (click)=\"onTileClick($event)\">\n      <div class=\"transaction-tile-body\">\n        <div class=\"transaction-tile-avatar\">\n          <co-avatar [relationId]=\"transaction.handledBy\"></co-avatar>\n        </div>\n        <div class=\"transaction-tile-seller-info\">\n          <div>\n            <div class=\"header\"><span [textContent]=\"transaction.transNr\"></span></div>\n            <div class=\"text\"><span [textContent]=\"transaction.brancheName\"></span></div>\n          </div>\n          <div>\n            <div class=\"text\"><span [textContent]=\"transaction.getAdres()\"></span></div>\n          </div>\n        </div>\n        <div class=\"transaction-tile-order-summary\">\n          <div class=\"header\"><span [textContent]=\"'\u20AC12.345'\"></span></div>  <!--todo: vullen als api aanpassing gedaan is-->\n        </div>\n      </div>\n      <div class=\"transaction-tile-footer\">\n        <div class=\"order-info-section\">\n          <div class=\"label\"><span [textContent]=\"'ORDER_DATE' | localize\"></span></div>\n          <div class=\"value\">\n            <span [textContent]=\"transaction.getTransDate() | date:'dd MMM yyyy'\"></span></div>\n        </div>\n        <div class=\"order-info-section\">\n          <div class=\"label\"><span [textContent]=\"'DELIVERY_DATE' | localize\"></span></div>\n          <div class=\"value\">\n            <span [textContent]=\"transaction.getDeliveryDate() | date:'dd MMM yyyy'\"></span>\n            <div *ngIf=\"transaction.getDeliveryDate()\">\n              <co-icon *ngIf=\"transaction.deliveryDateDefinitive; else indefinite\"\n                       [iconData]=\"this.iconCacheService.getIcon(this.icons.Lock)\" class=\"lock-icon\"></co-icon>\n              <ng-template #indefinite>\n                <co-icon [iconData]=\"this.iconCacheService.getIcon(this.icons.Unlock)\" class=\"unlock-icon\"></co-icon>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n        <div class=\"order-info-section\">\n          <div class=\"label\"><span [textContent]=\"'ORDER_RULE' | localize\"></span></div>\n          <div class=\"value\">\n            <span [textContent]=\"'68/00'\"></span></div>\n        </div>\n      </div>\n\n    </div>",
+                    selector: "co-transaction-search-sales-order-tile",
+                    template: "\n    <div class=\"transaction-tile-wrapper\" (click)=\"onTileClick($event)\">\n      <div class=\"transaction-tile-body\">\n        <div class=\"transaction-tile-avatar\">\n          <co-avatar [relationId]=\"transaction.handledBy\"></co-avatar>\n        </div>\n        <div class=\"transaction-tile-seller-info\">\n          <div>\n            <div class=\"header\"><span [textContent]=\"transaction.transNr\"></span></div>\n            <div class=\"text\"><span [textContent]=\"transaction.brancheName\"></span></div>\n          </div>\n          <div>\n            <div class=\"text\"><span [textContent]=\"transaction.getAdres()\"></span></div>\n          </div>\n        </div>\n        <div class=\"transaction-tile-order-summary\">\n          <div class=\"header\"><span [textContent]=\"transaction.totalPriceVat | currency:'EUR'\"></span></div>  <!--todo: vullen als api aanpassing gedaan is-->\n        </div>\n      </div>\n      <div class=\"transaction-tile-footer\">\n        <div class=\"order-info-section\">\n          <div class=\"label\"><span [textContent]=\"'ORDER_DATE' | localize\"></span></div>\n          <div class=\"value\">\n            <span [textContent]=\"transaction.getTransDate() | date:'dd MMM yyyy'\"></span></div>\n        </div>\n        <div class=\"order-info-section\">\n          <div class=\"label\"><span [textContent]=\"'DELIVERY_DATE' | localize\"></span></div>\n          <div class=\"value\">\n            <span [textContent]=\"transaction.getDeliveryDate() | date:'dd MMM yyyy'\"></span>\n            <div *ngIf=\"transaction.getDeliveryDate()\">\n              <co-icon *ngIf=\"transaction.deliveryDateDefinitive; else indefinite\"\n                       [iconData]=\"this.iconCacheService.getIcon(this.icons.Lock)\" class=\"lock-icon\"></co-icon>\n              <ng-template #indefinite>\n                <co-icon [iconData]=\"this.iconCacheService.getIcon(this.icons.Unlock)\" class=\"unlock-icon\"></co-icon>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n        <div class=\"order-info-section\">\n          <div class=\"label\"><span [textContent]=\"'ORDER_RULE' | localize\"></span></div>\n          <div class=\"value\">\n            <span [textContent]=\"'68/00'\"></span></div>\n        </div>\n      </div>\n\n    </div>",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
-    TransactionTileComponent.ctorParameters = function () { return [
+    TransactionSearchSalesOrderTileComponent.ctorParameters = function () { return [
         { type: IconCacheService }
     ]; };
-    TransactionTileComponent.propDecorators = {
+    TransactionSearchSalesOrderTileComponent.propDecorators = {
         transaction: [{ type: i0.Input }],
         tileClick: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-tile",] }]
+        showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-search-sales-order-tile",] }]
     };
 
-    var TransactionTileModule = /** @class */ (function () {
-        function TransactionTileModule() {
+    var TransactionSearchSalesOrderTileModule = /** @class */ (function () {
+        function TransactionSearchSalesOrderTileModule() {
         }
-        return TransactionTileModule;
+        return TransactionSearchSalesOrderTileModule;
     }());
-    TransactionTileModule.decorators = [
+    TransactionSearchSalesOrderTileModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
@@ -11480,48 +11684,71 @@
                         corecomponents_v12.IconModule,
                     ],
                     declarations: [
-                        TransactionTileComponent
+                        TransactionSearchSalesOrderTileComponent
                     ],
                     exports: [
-                        TransactionTileComponent
+                        TransactionSearchSalesOrderTileComponent
                     ]
                 },] }
     ];
 
     var TransactionSearchResultComponent = /** @class */ (function () {
-        function TransactionSearchResultComponent(searchService, iconCacheService) {
+        function TransactionSearchResultComponent(searchService) {
             this.searchService = searchService;
-            this.iconCacheService = iconCacheService;
             this.icon = Icon;
-            this.viewModes = ContentViewMode;
-            this.filterButtonClick = new i0.EventEmitter();
+            this.contentViewModes = ContentViewMode;
+            this.searchViewModes = SearchViewMode;
+            this.activeSearchViewMode = this.searchViewModes.FullScreen;
+            this.filterClick = new i0.EventEmitter();
             this.transactionClick = new i0.EventEmitter();
-            this.activeViewMode = ContentViewMode.Tiles;
+            this.resizeClick = new i0.EventEmitter();
+            this.closeClick = new i0.EventEmitter();
+            this.activeContentViewMode = ContentViewMode.Tiles;
         }
         TransactionSearchResultComponent.prototype.showClass = function () {
             return true;
         };
         TransactionSearchResultComponent.prototype.ngOnInit = function () {
         };
+        Object.defineProperty(TransactionSearchResultComponent.prototype, "fullscreen", {
+            get: function () {
+                return this.activeSearchViewMode === SearchViewMode.FullScreen;
+            },
+            enumerable: false,
+            configurable: true
+        });
         TransactionSearchResultComponent.prototype.onTransactionClick = function (transaction) {
             this.transactionClick.emit(transaction);
         };
+        TransactionSearchResultComponent.prototype.onResizeClick = function () {
+            this.activeContentViewMode = this.contentViewModes.Tiles;
+            this.resizeClick.emit();
+        };
+        TransactionSearchResultComponent.prototype.onCloseClick = function () {
+            this.closeClick.emit();
+        };
+        TransactionSearchResultComponent.prototype.onFilterClick = function () {
+            this.filterClick.emit();
+        };
         return TransactionSearchResultComponent;
     }());
     TransactionSearchResultComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-transaction-search-result',
-                    template: "\n    <div class=\"transaction-search-header-wrapper\">\n      <co-input-search class=\"transaction-search-general\"\n                       [(model)]=\"searchService.searchRequest.general\"\n                       [placeholder]=\"'Waar ben je naar op zoek?'\"\n                       (search)=\"searchService.searchTransactions()\"></co-input-search>\n      <co-button class=\"transaction-search-filter-button\" [iconData]=\"iconCacheService.getIcon(icon.BarsFilter)\"\n                 (click)=\"filterButtonClick.emit()\"></co-button>\n    </div>\n    <co-view-mode-buttons [showViewModes]=\"[viewModes.Tiles, viewModes.Grid]\"\n                          (viewModeChange)=\"activeViewMode = $event\"></co-view-mode-buttons>\n    <div class=\"transaction-search-result-content-tiles-wrapper\" *ngIf=\"activeViewMode === viewModes.Tiles\">\n      <div class=\"transaction-tile\" *ngFor=\"let transaction of searchService.transactions\">\n        <co-transaction-tile [transaction]=\"transaction\"\n                             (tileClick)=\"onTransactionClick(transaction)\"></co-transaction-tile>\n      </div>\n    </div>\n    <div class=\"transaction-search-result-content-grid-wrapper\" *ngIf=\"activeViewMode === viewModes.Grid\">\n      <co-transaction-search-grid [transactions]=\"searchService.transactions\"\n                                  (transactionClick)=\"onTransactionClick($event)\"></co-transaction-search-grid>\n    </div>\n  ",
+                    template: "\n    <div class=\"transaction-search-header-wrapper\">\n      <co-transaction-search-header\n        [transactionType]=\"transactionType\"\n        [activeSearchViewMode]=\"activeSearchViewMode\"\n        [activeContentViewMode]=\"activeContentViewMode\"\n        (viewModeChange)=\"activeContentViewMode = $event\"\n        (resizeClick)=\"onResizeClick()\"\n        (filterButtonClick)=\"onFilterClick()\"\n        (closeClick)=\"onCloseClick()\">\n      </co-transaction-search-header>\n    </div>\n\n    <div class=\"transaction-search-result-content-tiles-wrapper\" [ngClass]=\"fullscreen ? 'fullscreen' : 'sidebar'\"\n         *ngIf=\"activeContentViewMode === contentViewModes.Tiles\">\n      <div class=\"transaction-tile\" *ngFor=\"let transaction of searchService.transactions\">\n        <co-transaction-search-sales-order-tile\n          [transaction]=\"transaction\"\n          (tileClick)=\"onTransactionClick(transaction)\"></co-transaction-search-sales-order-tile>\n      </div>\n    </div>\n    <div class=\"transaction-search-result-content-grid-wrapper\" *ngIf=\"activeContentViewMode === contentViewModes.Grid\">\n      <co-transaction-search-sales-order-grid\n        [transactions]=\"searchService.transactions\"\n        (transactionClick)=\"onTransactionClick($event)\"></co-transaction-search-sales-order-grid>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     TransactionSearchResultComponent.ctorParameters = function () { return [
-        { type: TransactionSearchService },
-        { type: IconCacheService }
+        { type: TransactionSearchService }
     ]; };
     TransactionSearchResultComponent.propDecorators = {
-        filterButtonClick: [{ type: i0.Output }],
+        transactionType: [{ type: i0.Input }],
+        activeSearchViewMode: [{ type: i0.Input }],
+        filterClick: [{ type: i0.Output }],
         transactionClick: [{ type: i0.Output }],
+        resizeClick: [{ type: i0.Output }],
+        closeClick: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-search-result",] }]
     };
 
@@ -11538,8 +11765,10 @@
                         corecomponents_v12.ButtonModule,
                         ViewModeButtonsModule,
                         AvatarModule,
-                        TransactionTileModule,
-                        TransactionSearchGridModule
+                        TransactionSearchSalesOrderTileModule,
+                        TransactionSearchSalesOrderGridModule,
+                        PipeModule,
+                        TransactionSearchHeaderModule
                     ],
                     declarations: [
                         TransactionSearchResultComponent
@@ -12082,6 +12311,8 @@
             this.iconCacheService = iconCacheService;
             this.searchService = searchService;
             this.icon = Icon;
+            this.searchViewModes = SearchViewMode;
+            this.activeSearchViewMode = this.searchViewModes.FullScreen;
             this.closeButtonClick = new i0.EventEmitter();
             this.resetFilterClick = new i0.EventEmitter();
             this.filterCategories = [
@@ -12129,6 +12360,7 @@
         orderFilter: [{ type: i0.ViewChild, args: ['orderFilter', { read: i0.ElementRef },] }],
         logisticsFilter: [{ type: i0.ViewChild, args: ['logisticsFilter', { read: i0.ElementRef },] }],
         articleFilter: [{ type: i0.ViewChild, args: ['articleFilter', { read: i0.ElementRef },] }],
+        activeSearchViewMode: [{ type: i0.Input }],
         closeButtonClick: [{ type: i0.Output }],
         resetFilterClick: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-transaction-filter",] }]
@@ -12395,121 +12627,125 @@
     exports["ɵbl"] = TransactionArticleTextComponent;
     exports["ɵbm"] = TransactionArticleTextOverviewModule;
     exports["ɵbn"] = TransactionArticleTextOverviewComponent;
-    exports["ɵbo"] = TransactionImageService;
-    exports["ɵbp"] = AvatarModule;
-    exports["ɵbq"] = AvatarComponent;
-    exports["ɵbr"] = SharedService;
-    exports["ɵbs"] = SharedConnectorService;
-    exports["ɵbt"] = DeliveryTypeTileModule;
-    exports["ɵbu"] = DeliveryTypeTileComponent;
-    exports["ɵbv"] = PaymentModule;
-    exports["ɵbw"] = PaymentTileModule;
-    exports["ɵbx"] = PaymentTileComponent;
-    exports["ɵby"] = PaymentComponent;
-    exports["ɵbz"] = PaymentService;
+    exports["ɵbo"] = TransactionLineActionButtonsModule;
+    exports["ɵbp"] = TransactionLineActionButtonsComponent;
+    exports["ɵbq"] = TransactionImageService;
+    exports["ɵbr"] = AvatarModule;
+    exports["ɵbs"] = AvatarComponent;
+    exports["ɵbt"] = SharedService;
+    exports["ɵbu"] = SharedConnectorService;
+    exports["ɵbv"] = DeliveryTypeTileModule;
+    exports["ɵbw"] = DeliveryTypeTileComponent;
+    exports["ɵbx"] = PaymentModule;
+    exports["ɵby"] = PaymentTileModule;
+    exports["ɵbz"] = PaymentTileComponent;
     exports["ɵc"] = OptionsService;
-    exports["ɵca"] = CheckoutOverviewRelationEditComponent;
-    exports["ɵcb"] = CheckoutOverviewDeliveryEditComponent;
-    exports["ɵcc"] = CheckoutOverviewDeliveryAddressComponent;
-    exports["ɵcd"] = CheckOutRelationSuggestionsListComponent;
-    exports["ɵce"] = CheckOutRelationSuggestionsListItemComponent;
-    exports["ɵcf"] = CheckoutLoginComponent;
-    exports["ɵcg"] = TransactionHeaderModule$1;
-    exports["ɵch"] = TransactionHeaderBlockModule;
-    exports["ɵci"] = TransactionHeaderBlockComponent;
-    exports["ɵcj"] = TransactionBaseComponent;
-    exports["ɵck"] = TransactionHeaderPaymentModule;
-    exports["ɵcl"] = TransactionHeaderPaymentComponent;
-    exports["ɵcm"] = TransactionHeaderComponent$1;
-    exports["ɵcn"] = TransactionLinesGridModule;
-    exports["ɵco"] = TransactionBaseGridModule;
-    exports["ɵcp"] = TransactionLineSidePanelModule;
-    exports["ɵcq"] = TransactionLineSidePanelDefaultModule;
-    exports["ɵcr"] = TransactionLinePriceModule;
-    exports["ɵcs"] = TransactionLinePriceComponent;
-    exports["ɵct"] = TransactionLineFieldsBaseComponent;
-    exports["ɵcu"] = TransactionLinePriceListModule;
-    exports["ɵcv"] = TransactionLinePriceListComponent;
-    exports["ɵcw"] = TransactionLineVatModule;
-    exports["ɵcx"] = TransactionLineVatComponent;
-    exports["ɵcy"] = TransactionLineQuantityModule;
-    exports["ɵcz"] = TransactionLineQuantityComponent;
+    exports["ɵca"] = PaymentComponent;
+    exports["ɵcb"] = PaymentService;
+    exports["ɵcc"] = CheckoutOverviewRelationEditComponent;
+    exports["ɵcd"] = CheckoutOverviewDeliveryEditComponent;
+    exports["ɵce"] = CheckoutOverviewDeliveryAddressComponent;
+    exports["ɵcf"] = CheckOutRelationSuggestionsListComponent;
+    exports["ɵcg"] = CheckOutRelationSuggestionsListItemComponent;
+    exports["ɵch"] = CheckoutLoginComponent;
+    exports["ɵci"] = TransactionHeaderModule$1;
+    exports["ɵcj"] = TransactionHeaderBlockModule;
+    exports["ɵck"] = TransactionHeaderBlockComponent;
+    exports["ɵcl"] = TransactionBaseComponent;
+    exports["ɵcm"] = TransactionHeaderPaymentModule;
+    exports["ɵcn"] = TransactionHeaderPaymentComponent;
+    exports["ɵco"] = TransactionHeaderComponent$1;
+    exports["ɵcp"] = TransactionLinesGridModule;
+    exports["ɵcq"] = TransactionBaseGridModule;
+    exports["ɵcr"] = TransactionLineSidePanelModule;
+    exports["ɵcs"] = TransactionLineSidePanelDefaultModule;
+    exports["ɵct"] = TransactionLinePriceModule;
+    exports["ɵcu"] = TransactionLinePriceComponent;
+    exports["ɵcv"] = TransactionLineFieldsBaseComponent;
+    exports["ɵcw"] = TransactionLinePriceListModule;
+    exports["ɵcx"] = TransactionLinePriceListComponent;
+    exports["ɵcy"] = TransactionLineVatModule;
+    exports["ɵcz"] = TransactionLineVatComponent;
     exports["ɵd"] = DictionaryService;
-    exports["ɵda"] = TransactionLineLineDiscountModule;
-    exports["ɵdb"] = TransactionLineLineDiscountComponent;
-    exports["ɵdc"] = TransactionLineDeliveryMethodModule;
-    exports["ɵdd"] = TransactionLineDeliveryMethodComponent;
-    exports["ɵde"] = TransactionLineDeliveryDateModule;
-    exports["ɵdf"] = TransactionLineDeliveryDateComponent;
-    exports["ɵdg"] = TransactionLineReferenceModule;
-    exports["ɵdh"] = TransactionLineReferenceComponent;
-    exports["ɵdi"] = TransactionLineCommissionCodeModule;
-    exports["ɵdj"] = TransactionLineCommissionCodeComponent;
-    exports["ɵdk"] = TransactionLineWarehouseModule;
-    exports["ɵdl"] = TransactionLineWarehouseComponent;
-    exports["ɵdm"] = TransactionLineDiscountAmountModule;
-    exports["ɵdn"] = TransactionLineDiscountAmountComponent;
-    exports["ɵdo"] = TransactionLineQuantumDiscountModule;
-    exports["ɵdp"] = TransactionLineQuantumDiscountComponent;
-    exports["ɵdq"] = TransactionLineSpecialDiscountModule;
-    exports["ɵdr"] = TransactionLineSpecialDiscountComponent;
-    exports["ɵds"] = TransactionLineSidePanelDefaultComponent;
-    exports["ɵdt"] = TransactionReceivingGoodsHistoryModule;
-    exports["ɵdu"] = TransactionHistoryGridModule;
-    exports["ɵdv"] = TransactionHistoryGridStatusModule;
-    exports["ɵdw"] = TransactionHistoryGridStatusComponent;
-    exports["ɵdx"] = TransactionHistoryGridComponent;
-    exports["ɵdy"] = TransactionReceivingGoodsHistoryComponent;
-    exports["ɵdz"] = TransactionReceivingGoodsDetailsModule;
+    exports["ɵda"] = TransactionLineQuantityModule;
+    exports["ɵdb"] = TransactionLineQuantityComponent;
+    exports["ɵdc"] = TransactionLineLineDiscountModule;
+    exports["ɵdd"] = TransactionLineLineDiscountComponent;
+    exports["ɵde"] = TransactionLineDeliveryMethodModule;
+    exports["ɵdf"] = TransactionLineDeliveryMethodComponent;
+    exports["ɵdg"] = TransactionLineDeliveryDateModule;
+    exports["ɵdh"] = TransactionLineDeliveryDateComponent;
+    exports["ɵdi"] = TransactionLineReferenceModule;
+    exports["ɵdj"] = TransactionLineReferenceComponent;
+    exports["ɵdk"] = TransactionLineCommissionCodeModule;
+    exports["ɵdl"] = TransactionLineCommissionCodeComponent;
+    exports["ɵdm"] = TransactionLineWarehouseModule;
+    exports["ɵdn"] = TransactionLineWarehouseComponent;
+    exports["ɵdo"] = TransactionLineDiscountAmountModule;
+    exports["ɵdp"] = TransactionLineDiscountAmountComponent;
+    exports["ɵdq"] = TransactionLineQuantumDiscountModule;
+    exports["ɵdr"] = TransactionLineQuantumDiscountComponent;
+    exports["ɵds"] = TransactionLineSpecialDiscountModule;
+    exports["ɵdt"] = TransactionLineSpecialDiscountComponent;
+    exports["ɵdu"] = TransactionLineSidePanelDefaultComponent;
+    exports["ɵdv"] = TransactionReceivingGoodsHistoryModule;
+    exports["ɵdw"] = TransactionHistoryGridModule;
+    exports["ɵdx"] = TransactionHistoryGridStatusModule;
+    exports["ɵdy"] = TransactionHistoryGridStatusComponent;
+    exports["ɵdz"] = TransactionHistoryGridComponent;
     exports["ɵe"] = TransactionConnectorService;
-    exports["ɵea"] = TransactionReceivingGoodsDetailsComponent;
-    exports["ɵeb"] = ArticleService;
-    exports["ɵec"] = TransactionButtonBarModule;
-    exports["ɵed"] = TransactionButtonBarComponent;
-    exports["ɵee"] = TransactionMappingService;
-    exports["ɵef"] = TransactionButtonBarButtonComponent;
-    exports["ɵeg"] = TransactionConfirmationHistoryModule;
-    exports["ɵeh"] = TransactionConfirmationHistoryComponent;
-    exports["ɵei"] = TransactionLineSidePanelPurchaseModule;
-    exports["ɵej"] = TransactionLineSidePanelPurchaseComponent;
-    exports["ɵek"] = TransactionEventService;
-    exports["ɵel"] = TransactionLineSidePanelComponent;
-    exports["ɵem"] = TransactionBaseGridComponent;
-    exports["ɵen"] = TransactionGridBaseComponent;
-    exports["ɵeo"] = TransactionLinesGridComponent;
-    exports["ɵep"] = DiscountModule;
-    exports["ɵeq"] = DiscountComponent;
-    exports["ɵer"] = TransactionQuickAccessOverviewModule;
-    exports["ɵes"] = TransactionQuickAccessOverviewComponent;
-    exports["ɵet"] = TransactionOrderConfirmationGridModule;
-    exports["ɵeu"] = TransactionOrderConfirmationGridComponent;
-    exports["ɵev"] = TransactionReceivedGoodsGridModule;
-    exports["ɵew"] = TransactionReceivedGoodsGridComponent;
-    exports["ɵex"] = ViewModeButtonsModule;
-    exports["ɵey"] = ViewModeButtonsComponent;
-    exports["ɵez"] = TransactionGridModule;
+    exports["ɵea"] = TransactionReceivingGoodsHistoryComponent;
+    exports["ɵeb"] = TransactionReceivingGoodsDetailsModule;
+    exports["ɵec"] = TransactionReceivingGoodsDetailsComponent;
+    exports["ɵed"] = ArticleService;
+    exports["ɵee"] = TransactionButtonBarModule;
+    exports["ɵef"] = TransactionButtonBarComponent;
+    exports["ɵeg"] = TransactionMappingService;
+    exports["ɵeh"] = TransactionButtonBarButtonComponent;
+    exports["ɵei"] = TransactionConfirmationHistoryModule;
+    exports["ɵej"] = TransactionConfirmationHistoryComponent;
+    exports["ɵek"] = TransactionLineSidePanelPurchaseModule;
+    exports["ɵel"] = TransactionLineSidePanelPurchaseComponent;
+    exports["ɵem"] = TransactionEventService;
+    exports["ɵen"] = TransactionLineSidePanelComponent;
+    exports["ɵeo"] = TransactionBaseGridComponent;
+    exports["ɵep"] = TransactionGridBaseComponent;
+    exports["ɵeq"] = TransactionLinesGridComponent;
+    exports["ɵer"] = DiscountModule;
+    exports["ɵes"] = DiscountComponent;
+    exports["ɵet"] = TransactionQuickAccessOverviewModule;
+    exports["ɵeu"] = TransactionQuickAccessOverviewComponent;
+    exports["ɵev"] = TransactionOrderConfirmationGridModule;
+    exports["ɵew"] = TransactionOrderConfirmationGridComponent;
+    exports["ɵex"] = TransactionReceivedGoodsGridModule;
+    exports["ɵey"] = TransactionReceivedGoodsGridComponent;
+    exports["ɵez"] = ViewModeButtonsModule;
     exports["ɵf"] = CollectionCacheService;
-    exports["ɵfa"] = TransactionGridComponent;
-    exports["ɵfb"] = TransactionSearchService;
-    exports["ɵfc"] = TransactionSearchResultModule;
-    exports["ɵfd"] = TransactionTileModule;
-    exports["ɵfe"] = TransactionTileComponent;
-    exports["ɵff"] = TransactionSearchGridModule;
-    exports["ɵfg"] = TransactionSearchGridComponent;
-    exports["ɵfh"] = TransactionSearchResultComponent;
-    exports["ɵfi"] = TransactionFilterModule;
-    exports["ɵfj"] = TransactionFilterCategoriesModule;
-    exports["ɵfk"] = TransactionFilterCategoriesComponent;
-    exports["ɵfl"] = TransactionFilterContentOrderModule;
-    exports["ɵfm"] = TransactionFilterContentOrderComponent;
-    exports["ɵfn"] = FilterRequestService;
-    exports["ɵfo"] = TransactionFilterContentLogisticsModule;
-    exports["ɵfp"] = TransactionFilterHistoricStateModule;
-    exports["ɵfq"] = TransactionFilterHistoricStateComponent;
-    exports["ɵfr"] = TransactionFilterContentLogisticsComponent;
-    exports["ɵfs"] = TransactionFilterContentArticleModule;
-    exports["ɵft"] = TransactionFilterContentArticleComponent;
-    exports["ɵfu"] = TransactionFilterComponent;
+    exports["ɵfa"] = ViewModeButtonsComponent;
+    exports["ɵfb"] = TransactionGridModule;
+    exports["ɵfc"] = TransactionGridComponent;
+    exports["ɵfd"] = TransactionSearchService;
+    exports["ɵfe"] = TransactionSearchResultModule;
+    exports["ɵff"] = TransactionSearchSalesOrderTileModule;
+    exports["ɵfg"] = TransactionSearchSalesOrderTileComponent;
+    exports["ɵfh"] = TransactionSearchSalesOrderGridModule;
+    exports["ɵfi"] = TransactionSearchSalesOrderGridComponent;
+    exports["ɵfj"] = TransactionSearchHeaderModule;
+    exports["ɵfk"] = TransactionSearchHeaderComponent;
+    exports["ɵfl"] = TransactionSearchResultComponent;
+    exports["ɵfm"] = TransactionFilterModule;
+    exports["ɵfn"] = TransactionFilterCategoriesModule;
+    exports["ɵfo"] = TransactionFilterCategoriesComponent;
+    exports["ɵfp"] = TransactionFilterContentOrderModule;
+    exports["ɵfq"] = TransactionFilterContentOrderComponent;
+    exports["ɵfr"] = FilterRequestService;
+    exports["ɵfs"] = TransactionFilterContentLogisticsModule;
+    exports["ɵft"] = TransactionFilterHistoricStateModule;
+    exports["ɵfu"] = TransactionFilterHistoricStateComponent;
+    exports["ɵfv"] = TransactionFilterContentLogisticsComponent;
+    exports["ɵfw"] = TransactionFilterContentArticleModule;
+    exports["ɵfx"] = TransactionFilterContentArticleComponent;
+    exports["ɵfy"] = TransactionFilterComponent;
     exports["ɵg"] = ArticleConnectorService;
     exports["ɵh"] = CoreModule;
     exports["ɵi"] = ConfirmationDialogModule;