@colijnit/transaction 12.1.60 → 12.1.62

package/bundles/colijnit-transaction.umd.js

@@ -1700,6 +1700,7 @@
         Icon["Menu"] = "menu";
         Icon["ObjectIntersectSolid"] = "object_intersect_solid";
         Icon["PalletBoxesSolid"] = "pallet_boxes_solid";
+        Icon["PercentSolid"] = "percent_solid";
         Icon["PlusRound"] = "plus_round";
         Icon["PrintSolid"] = "print_solid";
         Icon["Purchase"] = "purchase";
@@ -1772,6 +1773,7 @@
         "menu": "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z\" /></svg>",
         "object_intersect_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M288 64v96H224c-35.3 0-64 28.7-64 64v64H64V64H288zM64 352h96v96c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V224c0-35.3-28.7-64-64-64H352V64c0-35.3-28.7-64-64-64H64C28.7 0 0 28.7 0 64V288c0 35.3 28.7 64 64 64zM448 224V448H224V352h64c35.3 0 64-28.7 64-64V224h96z\"/></svg>",
         "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>",
+        "percent_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M374.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-320 320c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l320-320zM128 128c0-35.3-28.7-64-64-64S0 92.7 0 128s28.7 64 64 64s64-28.7 64-64zM384 384c0-35.3-28.7-64-64-64s-64 28.7-64 64s28.7 64 64 64s64-28.7 64-64z\"/></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>",
         "print_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M448 192H64C28.65 192 0 220.7 0 256v96c0 17.67 14.33 32 32 32h32v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h32c17.67 0 32-14.33 32-32V256C512 220.7 483.3 192 448 192zM384 448H128v-96h256V448zM432 296c-13.25 0-24-10.75-24-24c0-13.27 10.75-24 24-24s24 10.73 24 24C456 285.3 445.3 296 432 296zM128 64h229.5L384 90.51V160h64V77.25c0-8.484-3.375-16.62-9.375-22.62l-45.25-45.25C387.4 3.375 379.2 0 370.8 0H96C78.34 0 64 14.33 64 32v128h64V64z\"/></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>",
@@ -10769,7 +10771,7 @@
     TransactionQuickAccessOverviewComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-quick-access-overview",
-                    template: "\n        <co-input-search\n          [placeholder]=\"'SEARCH_ADD_ARTICLE' | localize\"\n          [noIcon]=\"true\"\n        ></co-input-search>\n    ",
+                    template: "\n        <co-input-search\n          [placeholder]=\"'SEARCH_ADD_ARTICLE' | localize\"\n          [centerLabel]=\"true\"\n        ></co-input-search>\n    ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -14546,7 +14548,7 @@
     DialogHeaderSearchComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-dialog-header-search",
-                    template: "\n        <div class=\"dialog-header-search-wrapper\">\n          <div class=\"co-transaction-dialog-header-title\" [textContent]=\"title | localize\"></div>\n          <co-input-search [placeholder]=\"searchPlaceholder | localize\" [noIcon]=\"true\" (modelChange)=\"handleSearch($event)\"></co-input-search>\n        </div>\n    ",
+                    template: "\n        <div class=\"dialog-header-search-wrapper\">\n          <div class=\"co-transaction-dialog-header-title\" [textContent]=\"title | localize\"></div>\n          <co-input-search [placeholder]=\"searchPlaceholder | localize\" [centerLabel]=\"true\" (modelChange)=\"handleSearch($event)\"></co-input-search>\n        </div>\n    ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -15940,8 +15942,11 @@
 
     var TransactionHeaderOrderComponent = /** @class */ (function (_super) {
         __extends(TransactionHeaderOrderComponent, _super);
-        function TransactionHeaderOrderComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+        function TransactionHeaderOrderComponent(iconService, service) {
+            var _this = _super.call(this, service) || this;
+            _this.iconService = iconService;
+            _this.service = service;
+            _this.icons = Icon;
             _this.showDiscountDialog = false;
             return _this;
         }
@@ -15958,10 +15963,14 @@
     TransactionHeaderOrderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-header-order",
-                    template: "\n    <co-transaction-header-block\n      [headerBlockTemplate]=\"headerBlock\"\n      [firstBlockTemplate]=\"firstBlock\"\n      [secondBlockTemplate]=\"secondBlock\"\n      [thirdBlockTemplate]=\"thirdBlock\"\n    >\n    </co-transaction-header-block>\n    <ng-template #headerBlock>\n      <div class=\"header-block-label\" [textContent]=\"transactionInfo.branch?.familyName\"></div>\n      <div class=\"header-order-definitive\">\n        <co-transaction-header-definitive [transactionInfo]=\"transactionInfo\"></co-transaction-header-definitive>\n      </div>\n    </ng-template>\n    <ng-template #firstBlock>\n      <span class=\"header-order-total-label co-transaction-label\" [textContent]=\"'ORDER_TOTAL' | localize\"></span>\n      <div class=\"header-order-total\" [textContent]=\"transactionTotal.netAmount | priceDisplay\"></div>\n    </ng-template>\n    <ng-template #secondBlock>\n      <div class=\"transaction-line-button custom-width\" (click)=\"handleShowDiscountDialog($event)\">\n        <span class=\"co-transaction-label\" [textContent]=\"'DISCOUNT' | localize\"></span>\n        <span class=\"co-transaction-overflow-ellipsis transaction-discount\" [class.transaction-negative-value]=\"transactionTotal.totalDiscountAmount < 0\"\n              [textContent]=\"transactionTotal.totalDiscountAmount | coCurrency\"></span>\n      </div>\n    </ng-template>\n    <ng-template #thirdBlock>\n      <span class=\"header-order-line-amount-label co-transaction-label\" [textContent]=\"'ORDER_LINES' | localize\"></span>\n      <div class=\"header-order-line-amount\" [textContent]=\"transactionLines.length\"></div>\n    </ng-template>\n    <co-dialog-transaction-header-discount class=\"discount-dialog\" *ngIf=\"showDiscountDialog\"\n                                           [transactionInfo]=\"transactionInfo\"\n                                           [transactionTotal]=\"transactionTotal\"\n                                           (close)=\"showDiscountDialog = false\">\n    </co-dialog-transaction-header-discount>\n  ",
+                    template: "\n    <co-transaction-header-block\n      [headerBlockTemplate]=\"headerBlock\"\n      [firstBlockTemplate]=\"firstBlock\"\n      [secondBlockTemplate]=\"secondBlock\"\n      [thirdBlockTemplate]=\"thirdBlock\"\n    >\n    </co-transaction-header-block>\n    <ng-template #headerBlock>\n      <div class=\"header-block-label\" [textContent]=\"transactionInfo.branch?.familyName\"></div>\n      <div class=\"header-discount\" (click)=\"handleShowDiscountDialog($event)\">\n        <co-icon class=\"header-discount-icon\" [iconData]=\"iconService.getIcon(icons.PercentSolid)\"></co-icon>\n        <span class=\"co-transaction-overflow-ellipsis transaction-discount\" [class.transaction-negative-value]=\"transactionTotal.totalDiscountAmount < 0\"\n              [textContent]=\"(transactionTotal.totalDiscountAmount | coCurrency) || ('DISCOUNT' | localize)\"></span>\n      </div>\n    </ng-template>\n    <ng-template #firstBlock>\n      <span class=\"header-order-total-label co-transaction-label\" [textContent]=\"'ORDER_TOTAL' | localize\"></span>\n      <div class=\"header-order-total\" [textContent]=\"transactionTotal.netAmount | priceDisplay\"></div>\n    </ng-template>\n    <ng-template #secondBlock>\n      <div class=\"header-order-definitive\">\n        <co-transaction-header-definitive [transactionInfo]=\"transactionInfo\"></co-transaction-header-definitive>\n      </div>\n    </ng-template>\n    <ng-template #thirdBlock>\n      <span class=\"header-order-line-amount-label co-transaction-label\" [textContent]=\"'ORDER_LINES' | localize\"></span>\n      <div class=\"header-order-line-amount\" [textContent]=\"transactionLines.length\"></div>\n    </ng-template>\n    <co-dialog-transaction-header-discount class=\"discount-dialog\" *ngIf=\"showDiscountDialog\"\n                                           [transactionInfo]=\"transactionInfo\"\n                                           [transactionTotal]=\"transactionTotal\"\n                                           (close)=\"showDiscountDialog = false\">\n    </co-dialog-transaction-header-discount>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
+    TransactionHeaderOrderComponent.ctorParameters = function () { return [
+        { type: IconCacheService },
+        { type: TransactionService }
+    ]; };
     TransactionHeaderOrderComponent.propDecorators = {
         showClass: [{ type: i0.HostBinding, args: ['class.co-transaction-header-order',] }]
     };
@@ -15980,7 +15989,8 @@
                         PipeModule,
                         corecomponents_v12.PriceDisplayPipeModule,
                         DialogTransactionHeaderDiscountModule,
-                        TransactionHeaderDefinitiveModule
+                        TransactionHeaderDefinitiveModule,
+                        corecomponents_v12.IconModule
                     ],
                     declarations: [
                         TransactionHeaderOrderComponent
@@ -16031,7 +16041,7 @@
     TransactionHeaderPaymentComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-header-payment",
-                    template: "\n    <co-transaction-header-block\n      [headerBlockTemplate]=\"headerBlock\"\n      [firstBlockTemplate]=\"firstBlock\"\n      [secondBlockTemplate]=\"secondBlock\"\n      [hasDetails]=\"true\"\n      (headerClick)=\"showDialog = true\"\n    >\n    </co-transaction-header-block>\n    <ng-template #headerBlock>\n      <div class=\"header-block-label\" [textContent]=\"'BALANCE' | localize\"></div>\n      <div class=\"header-block-balance\" *ngIf=\"transactionInfo.transactionKind !== transactionKind.PurchaseOrder\" (click)=\"openPayment($event)\">\n        <co-icon class=\"payment-icon\" [iconData]=\"iconService.getIcon(icons.CreditCardSolid)\"></co-icon>\n        <div class=\"payment-payed-wrapper\">\n          <span class=\"payment-to-pay\" [textContent]=\"toPay | priceDisplay\"></span>\n          <span class=\"payment-divider\" [textContent]=\"'/'\"></span>\n          <span class=\"payment-paid\" [class.success]=\"paid >= toPay\" [textContent]=\"paid | priceDisplay\"></span>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #firstBlock>\n      <div class=\"header-downpayment-label co-transaction-label\" [textContent]=\"'DOWNPAYMENT_PERCENTAGE' | localize\"></div>\n      <co-transaction-header-downpayment-percentage class=\"transaction-header-downpayment\"\n                                                    [transactionInfo]=\"transactionInfo\"\n                                                    [defaultEditMode]=\"false\"\n                                                    [showLabel]=\"false\"\n      ></co-transaction-header-downpayment-percentage>\n    </ng-template>\n    <ng-template #secondBlock>\n      <div class=\"header-downpayment-label co-transaction-label\" [textContent]=\"'DOWNPAYMENT_AMOUNT' | localize\"></div>\n      <co-transaction-header-downpayment-amount class=\"transaction-header-downpayment\"\n                                                [transactionInfo]=\"transactionInfo\"\n                                                [defaultEditMode]=\"false\"\n                                                [showLabel]=\"false\"\n      ></co-transaction-header-downpayment-amount>\n    </ng-template>\n    <co-dialog class=\"transaction-header-payment-dialog\" [headerTemplate]=\"headerTemplate\" *ngIf=\"showDialog\" (closeClick)=\"showDialog = false\">\n      <ng-template #headerTemplate>\n        <div class=\"co-transaction-dialog-header-title\" [textContent]=\"'PAYMENT_INFORMATION' | localize\"></div>\n        <co-transaction-header-block\n          [headerBlockTemplate]=\"headerBlock\"\n          [firstBlockTemplate]=\"firstBlock\"\n          [secondBlockTemplate]=\"secondBlock\"\n        >\n        </co-transaction-header-block>\n      </ng-template>\n      <div class=\"payment-dialog-section\">\n        <span [textContent]=\"'NOG_NIET_GEIMPLEMENTEERD'\"></span>\n      </div>\n      <div class=\"payment-dialog-section\">\n        <span [textContent]=\"'NOG_NIET_GEIMPLEMENTEERD'\"></span>\n      </div>\n    </co-dialog>\n    <co-dialog class=\"payment-dialog\" *ngIf=\"showPaymentDialog\"\n               [modal]=\"true\"\n               (closeClick)=\"showPaymentDialog = false\"\n    >\n      <co-payment\n        [transactionUuid]=\"transactionInfo.uuid\"\n        [amount]=\"transactionTotal.netAmount\"\n        [currencyId]=\"transactionInfo.currencyId\"\n      ></co-payment>\n    </co-dialog>\n  ",
+                    template: "\n    <co-transaction-header-block\n      [headerBlockTemplate]=\"headerBlock\"\n      [firstBlockTemplate]=\"firstBlock\"\n      [secondBlockTemplate]=\"secondBlock\"\n      [hasDetails]=\"true\"\n      (headerClick)=\"showDialog = true\"\n    >\n    </co-transaction-header-block>\n    <ng-template #headerBlock>\n      <div class=\"header-block-label\" [textContent]=\"'BALANCE' | localize\"></div>\n      <div class=\"header-block-balance\" *ngIf=\"transactionInfo.transactionKind !== transactionKind.PurchaseOrder\" (click)=\"openPayment($event)\">\n        <co-icon class=\"payment-icon\" [iconData]=\"iconService.getIcon(icons.CreditCardSolid)\"></co-icon>\n        <div class=\"payment-payed-wrapper\">\n          <span class=\"payment-to-pay\" [textContent]=\"toPay | priceDisplay\"></span>\n          <span class=\"payment-divider\" [textContent]=\"'/'\"></span>\n          <span class=\"payment-paid\" [class.success]=\"paid >= toPay\" [textContent]=\"paid | priceDisplay\"></span>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #firstBlock>\n      <div class=\"header-downpayment-label co-transaction-label\" [textContent]=\"'DOWNPAYMENT_PERCENTAGE' | localize\"></div>\n      <co-transaction-header-downpayment-percentage class=\"transaction-header-downpayment\"\n                                                    [transactionInfo]=\"transactionInfo\"\n                                                    [defaultEditMode]=\"false\"\n                                                    [showLabel]=\"false\"\n      ></co-transaction-header-downpayment-percentage>\n    </ng-template>\n    <ng-template #secondBlock>\n      <div class=\"header-downpayment-label co-transaction-label\" [textContent]=\"'DOWNPAYMENT_AMOUNT' | localize\"></div>\n      <co-transaction-header-downpayment-amount class=\"transaction-header-downpayment\"\n                                                [transactionInfo]=\"transactionInfo\"\n                                                [defaultEditMode]=\"false\"\n                                                [showLabel]=\"false\"\n      ></co-transaction-header-downpayment-amount>\n    </ng-template>\n    <co-dialog class=\"transaction-header-payment-dialog\" [headerTemplate]=\"headerTemplate\" *ngIf=\"showDialog\" (closeClick)=\"showDialog = false\">\n      <ng-template #headerTemplate>\n        <div class=\"co-transaction-dialog-header-title\" [textContent]=\"'PAYMENT_INFORMATION' | localize\"></div>\n        <co-transaction-header-block\n          [headerBlockTemplate]=\"headerBlock\"\n          [firstBlockTemplate]=\"firstBlock\"\n          [secondBlockTemplate]=\"secondBlock\"\n        >\n        </co-transaction-header-block>\n      </ng-template>\n      <div class=\"payment-dialog-section\">\n        <span [textContent]=\"'NOG_NIET_GEIMPLEMENTEERD'\"></span>\n      </div>\n      <div class=\"payment-dialog-section\">\n        <span [textContent]=\"'NOG_NIET_GEIMPLEMENTEERD'\"></span>\n      </div>\n    </co-dialog>\n    <co-dialog class=\"payment-dialog\" [customCssClass]=\"'co-transaction-small-toolbar'\" *ngIf=\"showPaymentDialog\"\n               [modal]=\"true\"\n               (closeClick)=\"showPaymentDialog = false\"\n    >\n      <co-payment\n        [transactionUuid]=\"transactionInfo.uuid\"\n        [amount]=\"transactionTotal.netAmount\"\n        [currencyId]=\"transactionInfo.currencyId\"\n      ></co-payment>\n    </co-dialog>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -20396,7 +20406,7 @@
     TransactionLineDeliveryDateButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-transaction-line-delivery-date-button",
-                    template: "\n    <div class=\"transaction-line-button custom-width no-border\">\n      <span [textContent]=\"'DELIVERY_DATE' | localize | append:':'\" class=\"small-font\"></span>\n      <span class=\"co-transaction-overflow-ellipsis\" [textContent]=\"transactionLine.deliveryDate | date:'dd MMM YYYY'\"></span>\n      <co-icon class=\"header-delivery-date-icon\" [iconData]=\"iconCacheService.getIcon(icons.CalendarDayRegular)\"></co-icon>\n    </div>\n  ",
+                    template: "\n    <div class=\"transaction-line-button custom-width no-border\">\n      <span [textContent]=\"'DELIVERY_DATE' | localize | append:':'\"></span>\n      <span class=\"co-transaction-overflow-ellipsis\" [textContent]=\"transactionLine.deliveryDate | date:'dd MMM YYYY'\"></span>\n      <co-icon class=\"header-delivery-date-icon\" [iconData]=\"iconCacheService.getIcon(icons.CalendarDayRegular)\"></co-icon>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -20984,7 +20994,7 @@
     TransactionSearchComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-transaction-search',
-                    template: "\n    <div class=\"transaction-search-main-wrapper\">\n      <div class=\"transaction-search-wrapper\"\n           [ngClass]=\"calculateClasses()\">\n        <div class=\"transaction-filter-wrapper narrow-scrollbar\"\n             [ngClass]=\"calculateClasses()\"\n             *ngIf=\"transactionSearchService.showFilterSidebar\" @showHideFilterSidebar>\n          <co-transaction-filter\n            [transactionType]=\"transactionType\"\n            [activeSearchViewMode]=\"transactionSearchService.activeSearchViewMode\"\n            (closeButtonClick)=\"transactionSearchService.handleHideFilter()\"\n            (resetFilterClick)=\"transactionSearchService.handleResetFilter()\"></co-transaction-filter>\n        </div>\n        <div class=\"transaction-search-result-wrapper\"\n             [class.fullscreen]=\"transactionSearchService.fullscreen\"\n             [class.sidebar]=\"!transactionSearchService.fullscreen\"\n             [class.collapsed]=\"transactionSearchService.collapsed\"\n             [class.expanded]=\"!transactionSearchService.collapsed\"\n        >\n          <co-transaction-search-result\n            [transactionType]=\"transactionType\"\n            [activeSearchViewMode]=\"transactionSearchService.activeSearchViewMode\"\n            (filterClick)=\"transactionSearchService.toggleFilter()\"\n            (transactionClick)=\"onTransactionClick($event)\"\n            (resizeClick)=\"onSearchViewResizeClick()\"\n            (closeClick)=\"collapseSearchBar()\"\n          ></co-transaction-search-result>\n        </div>\n      </div>\n      <div class=\"transaction-search-content-wrapper\"\n           [class.fullscreen]=\"transactionSearchService.fullscreen\"\n           [class.sidebar]=\"!transactionSearchService.fullscreen\"\n           [class.collapsed]=\"transactionSearchService.collapsed\"\n           [class.expanded]=\"!transactionSearchService.collapsed\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"transaction-search-main-wrapper\">\n      <div class=\"transaction-search-wrapper\"\n           [ngClass]=\"calculateClasses()\">\n        <div class=\"transaction-filter-wrapper narrow-scrollbar\"\n             [ngClass]=\"calculateClasses()\"\n             *ngIf=\"transactionSearchService.showFilterSidebar\" @showHideFilterSidebar>\n          <co-transaction-filter\n            [transactionType]=\"transactionType\"\n            [activeSearchViewMode]=\"transactionSearchService.activeSearchViewMode\"\n            (closeButtonClick)=\"transactionSearchService.handleHideFilter()\"\n            (resetFilterClick)=\"transactionSearchService.handleResetFilter()\"></co-transaction-filter>\n        </div>\n        <div class=\"transaction-search-result-wrapper co-transaction-small-toolbar\"\n             [class.fullscreen]=\"transactionSearchService.fullscreen\"\n             [class.sidebar]=\"!transactionSearchService.fullscreen\"\n             [class.collapsed]=\"transactionSearchService.collapsed\"\n             [class.expanded]=\"!transactionSearchService.collapsed\"\n        >\n          <co-transaction-search-result\n            [transactionType]=\"transactionType\"\n            [activeSearchViewMode]=\"transactionSearchService.activeSearchViewMode\"\n            (filterClick)=\"transactionSearchService.toggleFilter()\"\n            (transactionClick)=\"onTransactionClick($event)\"\n            (resizeClick)=\"onSearchViewResizeClick()\"\n            (closeClick)=\"collapseSearchBar()\"\n          ></co-transaction-search-result>\n        </div>\n      </div>\n      <div class=\"transaction-search-content-wrapper\"\n           [class.fullscreen]=\"transactionSearchService.fullscreen\"\n           [class.sidebar]=\"!transactionSearchService.fullscreen\"\n           [class.collapsed]=\"transactionSearchService.collapsed\"\n           [class.expanded]=\"!transactionSearchService.collapsed\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
                     animations: [
                         animations.trigger("showHideFilterSidebar", [
                             animations.state("void", animations.style({ transform: 'translateX(-100%)' })),
@@ -22029,7 +22039,7 @@
     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\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\" [ngClass]=\"fullscreen ? 'fullscreen' : 'sidebar'\" >\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                           [noIcon]=\"true\"\n                           [(model)]=\"searchService.searchRequest.general\"\n                           [placeholder]=\"'SEARCH_NUMBER_CUSTOMER_OR_DATE' | localize\"\n                           [initFocus]=\"true\"\n                           (search)=\"searchService.searchTransactions()\"></co-input-search>\n        </div>\n        <div>\n          <co-button class=\"transaction-search-filter-button\"\n\n                     [iconData]=\"iconCacheService.getIcon(icon.BarsFilter)\"\n                     (click)=\"filterButtonClick.emit()\">\n          </co-button>\n        </div>\n      </div>\n\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    </div>\n  ",
+                    template: "\n    <div class=\"transaction-search-header-wrapper\">\n      <div class=\"upper-header\">\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\" [ngClass]=\"fullscreen ? 'fullscreen' : 'sidebar'\" >\n            <co-button [iconData]=\"iconCancel\"\n                       class=\"toggle-sidebar-button circle small transparent\"\n                       (click)=\"onCloseClick()\">\n            </co-button>\n          </div>\n        </div>\n      </div>\n      <div class=\"header-searchbar-wrapper\">\n        <div>\n          <co-input-search class=\"transaction-search-general\"\n                           [ngClass]=\"fullscreen ? 'fullscreen' : 'sidebar'\"\n                           [centerLabel]=\"true\"\n                           [(model)]=\"searchService.searchRequest.general\"\n                           [placeholder]=\"'SEARCH_NUMBER_CUSTOMER_OR_DATE' | localize\"\n                           [initFocus]=\"true\"\n                           (search)=\"searchService.searchTransactions()\"></co-input-search>\n        </div>\n        <div>\n          <co-button class=\"transaction-search-filter-button\"\n                     [iconData]=\"iconCacheService.getIcon(icon.BarsFilter)\"\n                     (click)=\"filterButtonClick.emit()\">\n          </co-button>\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    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];