@colijnit/transaction 12.1.62 → 12.1.64

package/lib/component/checkout/style/_layout.scss

@@ -59,11 +59,8 @@
       align-self: baseline;
       width: 170px;
       .label-description {
-        margin-top: 10px;
         font-size: $tp-checkout-label-description-fontsize;
-      }
-      .label {
-        font-weight: $tp-checkout-label-fontweight;
+        font-weight: $tp-checkout-label-description-fontweight;
       }
     }
     .checkout-data-column {

package/lib/component/checkout/style/_material-definition.scss

@@ -7,6 +7,6 @@ $tp-checkout-right-panel-row-gap: 10px !default;
 $tp-checkout-right-panel-width: 400px !default;
 $tp-checkout-right-panel-width: 50% !default;
 $tp-checkout-label-column-font-family: $tp-font-family;
-$tp-checkout-label-fontsize: $tp-font-size !default;
-$tp-checkout-label-description-fontsize: $tp-font-size-small !default;
-$tp-checkout-label-fontweight: bold !default;
+$tp-checkout-label-fontsize: 12px !default;
+$tp-checkout-label-description-fontsize: 16px !default;
+$tp-checkout-label-description-fontweight: bold !default;

package/lib/component/quick-send-button/style/_layout.scss

@@ -13,10 +13,10 @@
     }
 
     .icon-wrapper-flat-left {
-      background: $tp-co-transaction-icon-button-background-color;
-      border-bottom-left-radius: $tp-co-transaction-icon-button-border-radius;
-      border-top-left-radius: $tp-co-transaction-icon-button-border-radius;
-      padding: $tp-co-transaction-icon-button-padding;
+      background: $tp-co-quick-send-button-background-color;
+      border-bottom-left-radius: $tp-co-quick-send-button-border-radius;
+      border-top-left-radius: $tp-co-quick-send-button-border-radius;
+      padding: $tp-co-quick-send-button-padding;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -24,7 +24,7 @@
       cursor: pointer;
       width: 75%;
       .icon-text {
-        font-size: $tp-co-transaction-icon-text-font-size;
+        font-size: $tp-co-quick-send-button-font-size;
         user-select: none;
       }
       .icon-method {
@@ -43,16 +43,20 @@
     }
 
     .icon-wrapper-flat-right {
-      background: $tp-co-transaction-icon-button-background-color;
-      border-bottom-right-radius: $tp-co-transaction-icon-button-border-radius;
-      border-top-right-radius: $tp-co-transaction-icon-button-border-radius;
-      padding: $tp-co-transaction-icon-button-padding;
+      background: $tp-co-quick-send-button-background-color;
+      border-bottom-right-radius: $tp-co-quick-send-button-border-radius;
+      border-top-right-radius: $tp-co-quick-send-button-border-radius;
+      padding: $tp-co-quick-send-button-padding;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       width: 15%;
+      .co-icon {
+        width: $tp-co-quick-send-button-icon-size;
+        height: $tp-co-quick-send-button-icon-size;
+      }
     }
   }
 }

package/lib/component/quick-send-button/style/_material-definition.scss

@@ -1,4 +1,5 @@
-$tp-co-transaction-icon-button-background-color: white !default;
-$tp-co-transaction-icon-button-border-radius: 10px !default;
-$tp-co-transaction-icon-button-padding: 10px !default;
-$tp-co-transaction-icon-text-font-size: $tp-font-size-small !default;
+$tp-co-quick-send-button-background-color: white !default;
+$tp-co-quick-send-button-border-radius: 10px !default;
+$tp-co-quick-send-button-padding: 10px !default;
+$tp-co-quick-send-button-font-size: $tp-font-size-small !default;
+$tp-co-quick-send-button-icon-size: 20px !default;

package/lib/component/transaction-confirmation-details/style/_layout.scss

@@ -60,16 +60,15 @@
       }
 
     }
-  }
-
-  .co-icon {
-    width: 20px;
-    height: 20px;
-  }
+    .co-icon {
+      width: 20px;
+      height: 20px;
+    }
 
-  .co-default-ok-cancel-buttons {
-    .ok {
-      float: left;
+    .co-default-ok-cancel-buttons {
+      .ok {
+        float: left;
+      }
     }
   }
 }

package/lib/component/transaction-grid/transaction-available-stock-grid/style/_layout.scss

@@ -0,0 +1,4 @@
+@include export-module('cc-transaction-available-stock-grid-layout') {
+  .co-transaction-available-stock-grid {
+  }
+}

package/lib/component/transaction-grid/transaction-available-stock-grid/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('cc-transaction-available-stock-grid-theme') {
+  .co-transaction-available-stock-grid {
+  }
+}

package/lib/component/transaction-grid/transaction-available-stock-grid/style/material.scss

@@ -0,0 +1,4 @@
+@import "src/lib/style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/component/transaction-grid/transaction-available-stock-grid/transaction-available-stock-grid.component.d.ts

@@ -0,0 +1,25 @@
+import { OnDestroy, OnInit } from "@angular/core";
+import { Icon } from "../../../enum/icon.enum";
+import { IconCacheService } from "../../../service/icon-cache.service";
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { TransactionReceiveGoodsService } from "../../transaction-line/transaction-receive-goods-line/service/transaction-receive-goods.service";
+import { TransactionService } from "../../../service/transaction.service";
+import { AvailableStock } from "@colijnit/transactionapi/build/model/available-stock.bo";
+export declare class TransactionAvailableStockGridComponent implements OnInit, OnDestroy {
+    iconsService: IconCacheService;
+    private _transactionService;
+    private _transactionReceiveGoodsService;
+    readonly icons: typeof Icon;
+    transactionLine: TransactionLineInfo;
+    transactionId: number;
+    showClass(): boolean;
+    selectedStock: AvailableStock;
+    collection: AvailableStock[];
+    private _subscriptions;
+    constructor(iconsService: IconCacheService, _transactionService: TransactionService, _transactionReceiveGoodsService: TransactionReceiveGoodsService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    handleSelectRow(availableStock: AvailableStock): void;
+    handleDeleteClick(): void;
+    private _getAvailableStock;
+}

package/lib/component/transaction-grid/transaction-available-stock-grid/transaction-available-stock-grid.module.d.ts

@@ -0,0 +1,2 @@
+export declare class TransactionAvailableStockGridModule {
+}

package/lib/component/transaction-header/transaction-header-order/style/_layout.scss

@@ -17,7 +17,7 @@
       display: flex;
       column-gap: 10px;
       align-items: center;
-      width: 100%;
+      width: $tp-transaction-header-order-discount-width;
       height: $tp-transaction-header-order-discount-height;
       font-size: $tp-transaction-header-order-discount-font-size;
       border: $tp-transaction-header-order-discount-border;

package/lib/component/transaction-header/transaction-header-order/style/_material-definition.scss

@@ -3,6 +3,7 @@ $tp-transaction-header-order-discount-button-width: 17px !default;
 $tp-transaction-header-order-discount-font-size: $tp-font-size !default;
 $tp-transaction-header-order-discount-font-color: $tp-color-active-light !default;
 $tp-transaction-header-order-discount-background-color: $tp-default-background-accent !default;
+$tp-transaction-header-order-discount-width: 40% !default;
 $tp-transaction-header-order-discount-height: $tp-default-button-height !default;
 $tp-transaction-header-order-discount-border: 1px solid !default;
 $tp-transaction-header-order-discount-border-color: $tp-color-border !default;

package/lib/component/transaction-header/transaction-header-payment/style/_layout.scss

@@ -31,6 +31,11 @@
       border-width: $tp-transaction-header-block-payment-balance-border-width;
       border-radius: $tp-transaction-header-block-payment-balance-border-radius;
       padding: $tp-transaction-header-block-payment-balance-padding;
+      co-icon {
+        position: relative;
+        height: $tp-transaction-header-block-payment-balance-icon-width;
+        width: $tp-transaction-header-block-payment-balance-icon-width;
+      }
       .payment-payed-wrapper {
         display: flex;
         column-gap: 10px;

package/lib/component/transaction-header/transaction-header-payment/style/_material-definition.scss

@@ -1,4 +1,5 @@
 $tp-transaction-header-block-payment-balance-background: $tp-default-background-accent !default;
+$tp-transaction-header-block-payment-balance-icon-width: 17px !default;
 $tp-transaction-header-block-payment-balance-padding: 5px 10px !default;
 $tp-transaction-header-block-payment-balance-border-style: solid !default;
 $tp-transaction-header-block-payment-balance-border-color: $tp-color-border !default;

package/lib/component/transaction-header-fields/transaction-header-branch.component.d.ts

@@ -9,6 +9,7 @@ export declare class TransactionHeaderBranchComponent extends TransactionHeaderB
     private _relationService;
     simple: boolean;
     fields: Object;
+    branchModel: number;
     constructor(_transactionService: TransactionService, _relationService: RelationService);
     ngOnInit(): void;
     commit(branch: number | RelationSmallObject): Promise<boolean>;

package/lib/component/transaction-line/transaction-line/style/_layout.scss

@@ -16,6 +16,12 @@
     .transaction-base-line-section {
       column-gap: $tp-transaction-line-column-gap;
     }
+    .line-start {
+      max-width: 33%;
+    }
+    .preview-margin {
+      margin-left: $tp-transaction-line-column-gap;
+    }
     .transaction-line {
       display: flex;
       flex-direction: column;
@@ -23,7 +29,6 @@
     .transaction-line-wrapper {
       display: flex;
       flex-direction: row;
-      column-gap: $tp-transaction-line-column-gap;
     }
     .transaction-line-buttons {
       display: flex;
@@ -32,15 +37,31 @@
       height: $tp-transaction-line-amount-height;
     }
     .transaction-line-extended-wrapper {
-      display: grid;
-      grid-template-columns: $tp-transaction-line-button-width $tp-transaction-line-button-width $tp-transaction-line-button-big-width;
-      grid-template-rows: $tp-transaction-line-button-height $tp-transaction-line-button-height;
-      grid-column-gap: $tp-transaction-line-column-gap;
-      grid-row-gap: $tp-transaction-line-row-gap;
-      .two-column {
-        grid-column: 1 / 3;
-        column-gap: 5px;
-        padding: 0;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      .column1 {
+        max-width: calc((#{$tp-transaction-line-button-width} * 2) + #{$tp-transaction-line-column-gap});
+        margin-right: $tp-transaction-line-column-gap;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        co-transaction-line-commission-button {
+          margin-right: $tp-transaction-line-column-gap;
+          margin-bottom: $tp-transaction-line-row-gap;
+        }
+        co-transaction-line-delivery-date-button {
+          max-width: calc((#{$tp-transaction-line-button-width} * 2) + #{$tp-transaction-line-column-gap});
+        }
+      }
+      .column2 {
+        display: flex;
+        flex-direction: column;
+        margin-right: $tp-transaction-line-column-gap;
+        max-width: $tp-transaction-line-button-big-width;
+      }
+      .column3 {
+        margin-right: $tp-transaction-line-column-gap;
       }
     }
     .transaction-line-totals-price, .transaction-line-totals-discount, .transaction-line-totals-amount, .transaction-line-totals-total {
@@ -53,7 +74,7 @@
         width: 80%;
         height: 95%;
         input {
-          margin: 6px 0 0;
+          margin: 4px 0 0;
         }
       }
     }

package/lib/component/transaction-line/transaction-overview-line/style/_layout.scss

@@ -2,5 +2,13 @@
 
 @include export-module('co-transaction-overview-line-layout') {
   .co-transaction-overview-line {
+
+    .transaction-line-section {
+      display: flex;
+
+      .vat-button {
+        margin-right: 15px;
+      }
+    }
   }
 }

package/lib/component/transaction-line/transaction-receive-goods-line/service/transaction-receive-goods.service.d.ts

@@ -1,10 +1,14 @@
 import { TransactionService } from "../../../../service/transaction.service";
+import { Subject } from "rxjs";
 import { TransactionEventService } from "../../../../service/transaction-event.service";
 import { ReceiveGoodViewModel } from "../../../../model/receive-good-view-model";
+import { AvailableStock } from "@colijnit/transactionapi/build/model/available-stock.bo";
 export declare class TransactionReceiveGoodsService {
     private _transactionService;
     private _transactionEventService;
     lines: ReceiveGoodViewModel[];
+    returnArticleSelected: Subject<AvailableStock>;
+    reloadAvailableStockData: Subject<void>;
     private _subscriptions;
     constructor(_transactionService: TransactionService, _transactionEventService: TransactionEventService);
     handleReceiveSelectedPurchaseOrders(value: {

package/lib/component/transaction-line-fields/transaction-line-price/style/_layout.scss

@@ -0,0 +1,14 @@
+@include export-module('co-transaction-line-price-layout') {
+  .co-transaction-line-price {
+    span {
+      width: 100%;
+      text-align: center;
+    }
+    .co-input-text {
+      input {
+        width: 100%;
+        text-align: center;
+      }
+    }
+  }
+}

package/lib/component/transaction-line-fields/transaction-line-price/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('co-transaction-line-price-theme') {
+  .co-transaction-line-price {
+  }
+}

package/lib/component/transaction-line-fields/transaction-line-price/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/component/transaction-line-fields/{transaction-line-price.component.d.ts → transaction-line-price/transaction-line-price.component.d.ts}

@@ -1,6 +1,6 @@
 import { InputTextComponent } from "@colijnit/corecomponents_v12";
-import { TransactionService } from "../../service/transaction.service";
-import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
+import { TransactionLineBaseComponent } from "../../core/base/transaction-line-base.component";
+import { TransactionService } from "../../../service/transaction.service";
 export declare class TransactionLinePriceComponent extends TransactionLineBaseComponent<number> {
     private _transactionService;
     set child(content: any);
@@ -8,6 +8,7 @@ export declare class TransactionLinePriceComponent extends TransactionLineBaseCo
     defaultEditMode: boolean;
     set editMode(value: boolean);
     get editMode(): boolean;
+    showClass: boolean;
     handleClick(event: MouseEvent): void;
     input: InputTextComponent;
     private _editMode;

package/lib/component/transaction-lines/style/material.scss

@@ -9,5 +9,6 @@
 @import "../../../component/transaction-line/transaction-order-delivery-line/style/material";
 @import "../../../component/transaction-line/transaction-receive-goods-line/style/material";
 @import "../../../component/transaction-line/transaction-purchase-line/style/material";
+@import "../../../component/transaction-line-fields/transaction-line-price/style/material";
 @import "../../shared/transaction-article-text/style/material";
 @import "../../shared/transaction-article-text-overview/style/material";

package/lib/component/transaction-quick-access/transaction-quick-access-overview/style/_layout.scss

@@ -10,9 +10,9 @@
       height: $tp-transaction-quick-access-search-height;
       .co-input-text {
         height: $tp-transaction-quick-access-search-height;
-        label {
-          top: math.div($tp-transaction-quick-access-search-height, 2);
-        }
+        //label {
+        //  top: math.div($tp-transaction-quick-access-search-height, 2);
+        //}
       }
     }
   }

package/lib/component/transaction-quick-access/transaction-quick-access-overview/style/_material-definition.scss

@@ -1,2 +1,2 @@
 $tp-transaction-quick-access-search-width: 300px !default;
-$tp-transaction-quick-access-search-height: 32px !default;
+$tp-transaction-quick-access-search-height: 26px !default;

package/lib/component/transaction-receiving-goods-details/style/_layout.scss

@@ -40,7 +40,6 @@
 
     .location-wrapper {
       position: relative;
-      cursor: pointer;
       display: flex;
       align-items: center;
       //border: 1px solid $tp-transaction-line-border-color;

package/lib/component/transaction-receiving-goods-details/transaction-receiving-goods-details.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from "@angular/core";
+import { EventEmitter, OnDestroy, OnInit } from "@angular/core";
 import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
 import { PurchaseOrderLineReceiptDetails } from "@colijnit/transactionapi/build/model/purchase-order-line-receipt-details.bo";
 import { FormMasterService } from "@colijnit/corecomponents_v12";
@@ -8,12 +8,14 @@ import { ArticleService } from "../../service/article.service";
 import { DialogService } from "../../service/dialog.service";
 import { Icon } from "../../enum/icon.enum";
 import { IconCacheService } from "../../service/icon-cache.service";
-export declare class TransactionReceivingGoodsDetailsComponent {
+import { TransactionReceiveGoodsService } from "../transaction-line/transaction-receive-goods-line/service/transaction-receive-goods.service";
+export declare class TransactionReceivingGoodsDetailsComponent implements OnInit, OnDestroy {
     iconCacheService: IconCacheService;
     private _formMaster;
     private _service;
     private _articleService;
     private _dialogService;
+    private _receiveGoodsService;
     readonly icons: typeof Icon;
     set amountLeftToReceive(value: number);
     transactionId: number;
@@ -28,13 +30,19 @@ export declare class TransactionReceivingGoodsDetailsComponent {
     locations: string[];
     locationDropdownFields: {};
     readonly: boolean;
+    returnMaxToReceive: number;
     private _transactionLine;
     private _amountLeftToReceive;
-    constructor(iconCacheService: IconCacheService, _formMaster: FormMasterService, _service: TransactionService, _articleService: ArticleService, _dialogService: DialogService);
+    private _subscriptions;
+    constructor(iconCacheService: IconCacheService, _formMaster: FormMasterService, _service: TransactionService, _articleService: ArticleService, _dialogService: DialogService, _receiveGoodsService: TransactionReceiveGoodsService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
     submit(): boolean;
     locationRequired(): boolean;
     handleSaveDetailsEdit(): void;
     handleCancelDetailsEdit(): void;
     handleDropDownSelected(warehouseNr: number): Promise<void>;
     openWarehouseLocationDialog(): void;
+    returnStockMode(): boolean;
+    private _handleReturnStock;
 }

package/lib/component/transaction-search/service/transaction-search.service.d.ts

@@ -14,6 +14,7 @@ export declare class TransactionSearchService {
     set transactionType(value: string);
     get transactionType(): string;
     labelBasedOnTransactionType: Map<string, string>;
+    placeholderBasedOnTransactionType: Map<string, string>;
     transactionsPerPage: number;
     resultCount: number;
     get currentPage(): number;
@@ -23,6 +24,7 @@ export declare class TransactionSearchService {
     constructor(_transactionService: TransactionService);
     searchTransactions(): void;
     getLabelBasedOnTransactionType(): string;
+    getSearchPlaceholderBasedOnTransactionType(): string;
     resetFilters(): void;
     private _resetRequest;
     setPreviousSearchRequest(): void;

package/lib/component/transaction-search/style/_material-definition.scss

@@ -27,7 +27,7 @@ $cc-co-transaction-filter-icon-width: 13px !default;
 $cc-co-transaction-filter-header-wrapper-padding: 0 10px !default;
 $cc-co-transaction-filter-header-font-weight: bold !default;
 $cc-co-transaction-filter-header-font-size: 14px !default;
-$cc-co-transaction-filter-header-color: #172121 !default;
+$cc-co-transaction-filter-header-color: $tp-color-font !default;
 
 $cc-co-transaction-category-filter-wrapper-padding-top: 10px !default;
 $cc-co-transaction-category-filter-content-width: 350px !default;
@@ -47,7 +47,7 @@ $tp-co-transaction-filter-categories-active-border-style: solid !default;
 $tp-co-transaction-search-filter-width: 100% !default;
 $tp-co-transaction-search-filter-button-padding: 20px 0 !default;
 $tp-co-transaction-search-filter-button-width: 90% !default;
-$tp-co-transaction-search-filter-button-size: 50px !default;
+$tp-co-transaction-search-filter-button-size: 32px !default;
 $tp-co-transaction-search-filter-button-border-radius: 5px !default;
 $tp-co-transaction-search-filter-content-wrapper-row-gap: 30px !default;
 
@@ -55,14 +55,21 @@ $tp-co-transaction-search-result-width: 100% !default;
 $tp-co-transaction-search-result-wrapper-padding: 0 10px !default;
 $tp-co-transaction-search-result-upper-header-padding-left: 27px !default;
 $tp-co-transaction-search-result-upper-header-height: 20px !default;
-$tp-co-transaction-search-result-header-buttons-wrapper-padding: 0 27px !default;
+$tp-co-transaction-search-result-header-buttons-wrapper-padding: 0 !default;
 $tp-co-transaction-search-result-header-sidebar-button-size: 24px !default;
+$tp-co-transaction-search-result-header-sidebar-icon-size: 20px !default;
+
 $tp-co-transaction-search-result-header-sidebar-close-button-size: 46px !default;
 
-$tp-co-transaction-search-input-text-fullscreen-width: 650px !default;
+$tp-co-transaction-search-header-label-color: $tp-color-font !default;
+$tp-co-transaction-search-header-label-font-size: 18px !default;
+$tp-co-transaction-search-header-label-font-weight: bold !default;
+$tp-co-transaction-search-header-column-gap: 10px !default;
+$tp-co-transaction-search-header-button-wrapper-column-gap: 5px !default;
+
+$tp-co-transaction-search-input-text-fullscreen-width: 440px !default;
 $tp-co-transaction-search-input-text-sidebar-width: 250px !default;
 $tp-co-transaction-search-input-text-sidebar-height: 40px !default;
-$tp-co-transaction-search-input-text-sidebar-margin-top: 5px !default;
 $tp-co-transaction-search-input-text-label-margin-left: 5% !default;
 $tp-co-transaction-search-view-modes-wrapper-padding: 0 35px !default;
 

package/lib/component/transaction-search/transaction-filter-content/style/_layout.scss

@@ -1,4 +1,4 @@
-@include export-module('cc-transaction-search-filter-content-layout') {
+@include export-module('co-transaction-search-filter-content-layout') {
   .co-transaction-search-filter-content {
     width: $tp-co-transaction-search-filter-width;
 
@@ -7,10 +7,5 @@
       flex-direction: column;
       row-gap: $tp-co-transaction-search-filter-content-wrapper-row-gap;
     }
-
-    .filter-button-container {
-      padding: $tp-co-transaction-search-filter-button-padding;
-      width: $tp-co-transaction-search-filter-button-width;
-    }
   }
 }

package/lib/component/transaction-search/transaction-search-header/style/_layout.scss

@@ -1,10 +1,9 @@
-@include export-module('cc-transaction-search-header-layout') {
+@include export-module('co-transaction-search-header-layout') {
   .co-transaction-search-header {
     .transaction-search-header-wrapper {
       display: flex;
       justify-content: center;
       flex-direction: column;
-      margin-top: 5px;
     }
 
     .upper-header {
@@ -24,16 +23,34 @@
       }
     }
 
+    .transaction-search-filter-button, .toggle-sidebar-button {
+      height: $tp-co-transaction-search-result-header-sidebar-button-size;
+      width: $tp-co-transaction-search-result-header-sidebar-button-size;
+      padding: 0;
+      &:not(.circle).has-icon {
+        padding-left: 0;
+      }
+      .co-icon {
+        width: $tp-co-transaction-search-result-header-sidebar-icon-size;
+        height: $tp-co-transaction-search-result-header-sidebar-icon-size;
+      }
+    }
+    .transaction-search-filter-button {
+      height: $tp-co-transaction-search-filter-button-size;
+      width: $tp-co-transaction-search-filter-button-size;
+      border-radius: $tp-co-transaction-search-filter-button-border-radius;
+      //padding: $tp-co-transaction-search-filter-button-padding;
+      justify-content: center;
+    }
     .toggle-sidebar-button-wrapper {
       &.sidebar {
-        margin-bottom: 5px;
         .toggle-sidebar-button {
-          justify-content: center;
-          width: $tp-co-transaction-search-result-header-sidebar-button-size;
-          co-icon {
-            width: $tp-co-transaction-search-result-header-sidebar-button-size;
-            height: $tp-co-transaction-search-result-header-sidebar-button-size;
-          }
+          //justify-content: center;
+          //width: $tp-co-transaction-search-result-header-sidebar-button-size;
+          //co-icon {
+          //  width: $tp-co-transaction-search-result-header-sidebar-button-size;
+          //  height: $tp-co-transaction-search-result-header-sidebar-button-size;
+          //}
         }
       }
 
@@ -60,13 +77,19 @@
       display: flex;
       justify-content: center;
       flex-direction: row;
+      align-items: center;
+      column-gap: $tp-co-transaction-search-header-column-gap;
+      .header-searchbar-title {
+        font-size: $tp-co-transaction-search-header-label-font-size;
+        font-weight: $tp-co-transaction-search-header-label-font-weight;
+      }
+    }
+    .header-search-bar-button-wrapper {
+      display: flex;
+      align-items: center;
+      column-gap: $tp-co-transaction-search-header-button-wrapper-column-gap;
     }
-
     .transaction-search-general {
-      co-input-text label {
-        left: 0;
-      }
-
       &.fullscreen {
         co-input-text {
           width: $tp-co-transaction-search-input-text-fullscreen-width;
@@ -77,22 +100,10 @@
       &.sidebar {
         co-input-text {
           width: $tp-co-transaction-search-input-text-sidebar-width;
-          height: $tp-co-transaction-search-input-text-sidebar-height;
           transition: width 0.2s ease-in-out;
-          margin-top: $tp-co-transaction-search-input-text-sidebar-margin-top;
         }
       }
     }
-
-    .transaction-search-filter-button {
-      height: $tp-co-transaction-search-filter-button-size;
-      width: $tp-co-transaction-search-filter-button-size;
-      border-radius: $tp-co-transaction-search-filter-button-border-radius;
-      padding: $tp-co-transaction-search-filter-button-padding;
-      justify-content: center;
-    }
-
-
     .view-mode-buttons-wrapper {
       padding: $tp-co-transaction-search-view-modes-wrapper-padding;
     }

package/lib/component/transaction-search/transaction-search-header/style/_theme.scss

@@ -1,4 +1,7 @@
-@include export-module('cc-transaction-search-header-theme') {
+@include export-module('co-transaction-search-header-theme') {
   .co-transaction-search-header {
+    .header-searchbar-title {
+      color: $tp-co-transaction-search-header-label-color;
+    }
   }
 }

package/lib/component/transaction-search/transaction-search-header/transaction-search-header.component.d.ts

@@ -24,6 +24,7 @@ export declare class TransactionSearchHeaderComponent {
     closeClick: EventEmitter<void>;
     showClass(): boolean;
     label: string;
+    searchPlaceholder: string;
     constructor(searchService: TransactionSearchService, iconCacheService: IconCacheService, _dictionary: DictionaryService);
     get fullscreen(): boolean;
     onResizeClick(): void;