@colijnit/transaction 12.1.33 → 12.1.34

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

@@ -2,6 +2,7 @@ import { OnInit } from "@angular/core";
 import { TransactionService } from "../../service/transaction.service";
 import { BranchLov } from "@colijnit/transactionapi/build/model/branch-lov.bo";
 import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+import { RelationSmallObject } from "@colijnit/transactionapi/build/model/relation-small-object.bo";
 export declare class TransactionHeaderBranchComponent extends TransactionHeaderBaseComponent implements OnInit {
     private _transactionService;
     simple: boolean;
@@ -9,7 +10,7 @@ export declare class TransactionHeaderBranchComponent extends TransactionHeaderB
     fields: Object;
     constructor(_transactionService: TransactionService);
     ngOnInit(): void;
-    commitTransactionBranch(branch: number): Promise<boolean>;
+    commitTransactionBranch(branch: number | RelationSmallObject): Promise<boolean>;
     handleChecked(event: MouseEvent, row: {
         value: number;
         text: string;

package/lib/component/transaction-header-fields/transaction-header-delivery-method.component.d.ts

@@ -4,12 +4,18 @@ import { DeliveryMethod } from "@colijnit/transactionapi/build/model/delivery-me
 import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
 export declare class TransactionHeaderDeliveryMethodComponent extends TransactionHeaderBaseComponent implements OnInit {
     private _transactionService;
+    showAsCarousel: boolean;
     deliveryMethodChange: EventEmitter<DeliveryMethod>;
-    deliveryMethods: DeliveryMethod[];
+    collection: DeliveryMethod[];
     selectedIdx: number;
     constructor(_transactionService: TransactionService);
     ngOnInit(): void;
     commitDeliveryMethod(method: string): Promise<boolean>;
+    handleChecked(event: MouseEvent, row: {
+        value: number;
+        text: string;
+        checked: boolean;
+    }): void;
     setIndexDeliveryType(idx: number): Promise<void>;
     protected transactionInfoSet(): void;
 }

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

@@ -24,34 +24,16 @@
     }
     .transaction-line-extended-wrapper {
       display: grid;
-      grid-template-columns: $tp-transaction-line-button-width $tp-transaction-line-button-width auto $tp-transaction-line-button-delivery-method-width;
+      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;
-      .last-two-columns {
-        grid-column: 3 / 5;
-      }
       .two-column {
         grid-column: 1 / 3;
         column-gap: 5px;
         padding: 0;
       }
     }
-    .transaction-line-extended-row-wrapper {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      column-gap: $tp-transaction-line-column-gap;
-      padding: $tp-transaction-line-button-padding;
-      &:not(.no-border) {
-        border: $tp-transaction-line-button-border;
-        border-radius: $tp-transaction-line-button-radius;
-      }
-    }
-    .transaction-line-extended-button {
-      height: $tp-transaction-line-button-height;
-    }
     &.preview {
       .transaction-line-wrapper {
         align-items: center;
@@ -201,7 +183,9 @@
     }
     &.is-text {
       .transaction-line {
+        flex-direction: row;
         min-height: $tp-transaction-line-article-text-min-height;
+        column-gap: $tp-transaction-line-column-gap;
       }
     }
     .price {

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

@@ -2,7 +2,7 @@ $tp-transaction-line-font-family: $tp-font-family !default;
 $tp-transaction-line-font-size: $tp-font-size !default;
 $tp-transaction-line-background-color: white !default;
 $tp-transaction-line-min-height: 100px !default;
-$tp-transaction-line-article-text-min-height: 50px !default;
+$tp-transaction-line-article-text-min-height: 30px !default;
 $tp-transaction-line-padding: 10px !default;
 $tp-transaction-line-inner-padding: 10px !default;
 $tp-transaction-line-border: 1px solid !default;
@@ -21,16 +21,8 @@ $tp-transaction-line-amount-input-width: 50px !default;
 $tp-transaction-line-amount-input-border-color: $tp-color-border !default;
 $tp-transaction-line-totals-font-weight: bold !default;
 $tp-transaction-line-delete-color: $tp-color-action !default;
-$tp-transaction-line-article-text-background-color: $tp-color-light-accent !default;
+$tp-transaction-line-article-text-background-color: white !default;
 $tp-transaction-line-article-text-color: $tp-color-dark !default;
-$tp-transaction-line-button-width: 78px !default;
-$tp-transaction-line-button-padding: 0 5px !default;
-$tp-transaction-line-button-height: 26px !default;
-$tp-transaction-line-button-radius: 10px !default;
-$tp-transaction-line-button-border: 1px solid !default;
-$tp-transaction-line-button-border-color: $tp-color-border !default;
-$tp-transaction-line-button-delivery-method-width: 250px !default;
-$tp-transaction-line-button-background-color: $tp-color-active-light !default;
 $tp-transaction-line-buttons-overview-background-color: $tp-color-active-light !default;
 $tp-transaction-line-buttons-overview-text-color: $tp-color-light !default;
 $tp-transaction-line-buttons-add-text-background-color: $tp-color-action !default;
@@ -40,3 +32,4 @@ $tp-transaction-line-article-text-font-color: $tp-color-label !default;
 $tp-transaction-line-article-text-padding: 2px !default;
 $tp-transaction-line-price-font-weight: bold !default;
 $tp-transaction-line-discount-background-color: $tp-default-background-accent !default;
+$tp-transaction-line-discount-color: $tp-color-active-light !default;

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

@@ -25,12 +25,12 @@
       color: $tp-transaction-line-article-text-font-color;
       background-color: $tp-transaction-line-background-color;
     }
-    .discount {
+    .transaction-line-discount {
+      color: $tp-transaction-line-discount-color;
       background-color: $tp-transaction-line-discount-background-color;
-    }
-    .transaction-line-extended-row-wrapper:not(.no-border) {
-      background-color: $tp-transaction-line-discount-background-color;
-      border-color: $tp-transaction-line-button-border-color;
+      &.negative {
+        color: $tp-color-negative-value;
+      }
     }
   }
 }

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

@@ -10,3 +10,5 @@
 @import "../../dialog/transaction-line/dialog-transaction-line-warehouse/style/material";
 @import "../../dialog/transaction-line/dialog-transaction-line-delivery-method/style/material";
 @import "../../dialog/transaction-line/dialog-transaction-line-vat/style/material";
+@import "../../dialog/transaction-line/dialog-transaction-line-discount/style/material";
+@import "../../dialog/transaction-line/dialog-transaction-line-price-list/style/material";

package/lib/component/transaction-line/transaction-line.component.d.ts

@@ -42,6 +42,7 @@ export declare class TransactionLineComponent {
     openWarehouseDialog(): void;
     openDeliveryMethodDialog(): void;
     openVatDialog(): void;
+    openDiscountDialog(): void;
     private _loadLineImage;
     private _loadLineCommissionCode;
     private _loadLineWarehouse;

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

@@ -0,0 +1,33 @@
+@include export-module('co-transaction-line-checkbox-list-layout') {
+  .co-transaction-line-checkbox-list {
+    .highlight {
+      font-weight: bold;
+      font-style: italic;
+    }
+    table {
+      width: 100%;
+      border-spacing: 0 3px;
+      overflow: hidden;
+      tr {
+        height: $tp-transaction-line-button-height;
+      }
+      td {
+        border: solid 1px $tp-transaction-line-button-border-color;
+        border-style: solid none;
+        background-color: $tp-transaction-line-button-background-color;
+      }
+      td:first-child {
+        border-left-style: solid;
+        border-top-left-radius: $tp-transaction-line-button-radius;
+        border-bottom-left-radius: $tp-transaction-line-button-radius;
+        padding-left: 10px;
+        width: 40px;
+      }
+      td:last-child {
+        border-right-style: solid;
+        border-bottom-right-radius: $tp-transaction-line-button-radius;
+        border-top-right-radius: $tp-transaction-line-button-radius;
+      }
+    }
+  }
+}

package/lib/component/transaction-line-checkbox-list/style/_theme.scss

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

package/lib/component/transaction-line-checkbox-list/style/material.scss

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

package/lib/component/transaction-line-checkbox-list/transaction-line-checkbox-list.component.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from "@angular/core";
+export declare class TransactionLineCheckboxListComponent {
+    collection: any[];
+    checked: EventEmitter<any>;
+    showClass: boolean;
+    private _observer;
+    handleChecked(event: MouseEvent, row: {
+        value: string;
+        text: string;
+        checked: boolean;
+    }): void;
+    private _initObserver;
+    private _handleVisibility;
+}

package/lib/component/transaction-line-checkbox-list/transaction-line-checkbox-list.module.d.ts

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

package/lib/component/transaction-line-fields/transaction-line-commission-code.component.d.ts

@@ -2,16 +2,13 @@ import { OnInit } from "@angular/core";
 import { TransactionService } from "../../service/transaction.service";
 import { CoDomainValue } from "@colijnit/transactionapi/build/model/co-domain-value.bo";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
-export declare class TransactionLineCommissionCodeComponent extends TransactionLineBaseComponent implements OnInit {
+export declare class TransactionLineCommissionCodeComponent extends TransactionLineBaseComponent<CoDomainValue> implements OnInit {
     private _transactionService;
-    data: CoDomainValue[];
+    protected codeField: string;
+    protected checkField: string;
+    protected propsForLabel: string[];
     constructor(_transactionService: TransactionService);
     ngOnInit(): void;
-    commitCommissionCode(code: string): Promise<boolean>;
-    handleChecked(event: MouseEvent, row: {
-        value: string;
-        text: string;
-        checked: boolean;
-    }): void;
+    commit(code: string): Promise<boolean>;
     protected transactionLineSet(): void;
 }

package/lib/component/transaction-line-fields/transaction-line-delivery-date.component.d.ts

@@ -1,8 +1,8 @@
 import { TransactionService } from "../../service/transaction.service";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
-export declare class TransactionLineDeliveryDateComponent extends TransactionLineBaseComponent {
+export declare class TransactionLineDeliveryDateComponent extends TransactionLineBaseComponent<number> {
     private _transactionService;
     constructor(_transactionService: TransactionService);
-    commitDeliveryDate(date: Date): Promise<boolean>;
+    commit(date: Date): Promise<boolean>;
     protected transactionInfoSet(): void;
 }

package/lib/component/transaction-line-fields/transaction-line-delivery-method.component.d.ts

@@ -2,16 +2,13 @@ import { OnInit } from "@angular/core";
 import { TransactionService } from "../../service/transaction.service";
 import { DeliveryMethod } from "@colijnit/transactionapi/build/model/delivery-method.bo";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
-export declare class TransactionLineDeliveryMethodComponent extends TransactionLineBaseComponent implements OnInit {
+export declare class TransactionLineDeliveryMethodComponent extends TransactionLineBaseComponent<DeliveryMethod> implements OnInit {
     private _transactionService;
-    data: DeliveryMethod[];
+    protected codeField: string;
+    protected checkField: string;
+    protected propsForLabel: string[];
     constructor(_transactionService: TransactionService);
     ngOnInit(): void;
-    commitDeliveryMethod(method: string): Promise<boolean>;
-    handleChecked(event: MouseEvent, row: {
-        value: string;
-        text: string;
-        checked: boolean;
-    }): void;
+    commit(method: string): Promise<boolean>;
     protected transactionLineSet(): void;
 }

package/lib/component/transaction-line-fields/transaction-line-description.component.d.ts

@@ -1,8 +1,12 @@
 import { InputTextComponent } from "@colijnit/corecomponents_v12";
 import { TransactionService } from "../../service/transaction.service";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
-export declare class TransactionLineDescriptionComponent extends TransactionLineBaseComponent {
+import { Icon } from "../../enum/icon.enum";
+import { IconCacheService } from "../../service/icon-cache.service";
+export declare class TransactionLineDescriptionComponent extends TransactionLineBaseComponent<string> {
+    iconCacheService: IconCacheService;
     private _transactionService;
+    readonly icons: typeof Icon;
     set child(content: any);
     showLabel: boolean;
     defaultEditMode: boolean;
@@ -11,7 +15,7 @@ export declare class TransactionLineDescriptionComponent extends TransactionLine
     handleClick(event: MouseEvent): void;
     input: InputTextComponent;
     private _editMode;
-    constructor(_transactionService: TransactionService);
-    commitDescription(description: string): Promise<boolean>;
+    constructor(iconCacheService: IconCacheService, _transactionService: TransactionService);
+    commit(description: string): Promise<boolean>;
     protected transactionLineSet(): void;
 }

package/lib/component/transaction-line-fields/transaction-line-discount-amount.component.d.ts

@@ -1,10 +1,10 @@
 import { InputTextComponent } from "@colijnit/corecomponents_v12";
 import { TransactionService } from "../../service/transaction.service";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
-export declare class TransactionLineDiscountAmountComponent extends TransactionLineBaseComponent {
+export declare class TransactionLineDiscountAmountComponent extends TransactionLineBaseComponent<number> {
     private _transactionService;
     set child(content: any);
     input: InputTextComponent;
     constructor(_transactionService: TransactionService);
-    commitDiscount(discount: number): Promise<boolean>;
+    commit(discount: number): Promise<boolean>;
 }

package/lib/component/transaction-line-fields/transaction-line-line-discount.component.d.ts

@@ -1,10 +1,10 @@
 import { InputTextComponent } from "@colijnit/corecomponents_v12";
 import { TransactionService } from "../../service/transaction.service";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
-export declare class TransactionLineLineDiscountComponent extends TransactionLineBaseComponent {
+export declare class TransactionLineLineDiscountComponent extends TransactionLineBaseComponent<number> {
     private _transactionService;
     set child(content: any);
     input: InputTextComponent;
     constructor(_transactionService: TransactionService);
-    commitDiscount(discount: number): Promise<boolean>;
+    commit(discount: number): Promise<boolean>;
 }

package/lib/component/transaction-line-fields/transaction-line-price-list.component.d.ts

@@ -2,11 +2,13 @@ import { OnInit } from "@angular/core";
 import { PriceList } from "@colijnit/transactionapi/build/model/price-list";
 import { TransactionService } from "../../service/transaction.service";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
-export declare class TransactionLinePriceListComponent extends TransactionLineBaseComponent implements OnInit {
+export declare class TransactionLinePriceListComponent extends TransactionLineBaseComponent<PriceList> implements OnInit {
     private _transactionService;
-    data: PriceList[];
-    fields: Object;
+    protected codeField: string;
+    protected checkField: string;
+    protected propsForLabel: string[];
     constructor(_transactionService: TransactionService);
     ngOnInit(): void;
-    commitPriceList(priceList: string): Promise<boolean>;
+    commit(priceList: string): Promise<boolean>;
+    protected transactionLineSet(): void;
 }

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

@@ -1,7 +1,7 @@
 import { InputTextComponent } from "@colijnit/corecomponents_v12";
 import { TransactionService } from "../../service/transaction.service";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
-export declare class TransactionLinePriceComponent extends TransactionLineBaseComponent {
+export declare class TransactionLinePriceComponent extends TransactionLineBaseComponent<number> {
     private _transactionService;
     set child(content: any);
     showLabel: boolean;
@@ -12,6 +12,6 @@ export declare class TransactionLinePriceComponent extends TransactionLineBaseCo
     input: InputTextComponent;
     private _editMode;
     constructor(_transactionService: TransactionService);
-    commitPrice(price: number): Promise<boolean>;
+    commit(price: number): Promise<boolean>;
     protected transactionLineSet(): void;
 }

package/lib/component/transaction-line-fields/transaction-line-quantity.component.d.ts

@@ -1,7 +1,7 @@
 import { TransactionService } from "../../service/transaction.service";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
-export declare class TransactionLineQuantityComponent extends TransactionLineBaseComponent {
+export declare class TransactionLineQuantityComponent extends TransactionLineBaseComponent<number> {
     private _transactionService;
     constructor(_transactionService: TransactionService);
-    commitQuantity(quantity: number): Promise<boolean>;
+    commit(quantity: number): Promise<boolean>;
 }

package/lib/component/transaction-line-fields/transaction-line-quantum-discount.component.d.ts

@@ -1,10 +1,10 @@
 import { InputTextComponent } from "@colijnit/corecomponents_v12";
 import { TransactionService } from "../../service/transaction.service";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
-export declare class TransactionLineQuantumDiscountComponent extends TransactionLineBaseComponent {
+export declare class TransactionLineQuantumDiscountComponent extends TransactionLineBaseComponent<number> {
     private _transactionService;
     set child(content: any);
     input: InputTextComponent;
     constructor(_transactionService: TransactionService);
-    commitDiscount(discount: number): Promise<boolean>;
+    commit(discount: number): Promise<boolean>;
 }

package/lib/component/transaction-line-fields/transaction-line-reference.component.d.ts

@@ -1,10 +1,10 @@
 import { InputTextComponent } from "@colijnit/corecomponents_v12";
 import { TransactionService } from "../../service/transaction.service";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
-export declare class TransactionLineReferenceComponent extends TransactionLineBaseComponent {
+export declare class TransactionLineReferenceComponent extends TransactionLineBaseComponent<string> {
     private _transactionService;
     set child(content: any);
     input: InputTextComponent;
     constructor(_transactionService: TransactionService);
-    commitReference(reference: string): Promise<boolean>;
+    commit(reference: string): Promise<boolean>;
 }

package/lib/component/transaction-line-fields/transaction-line-special-discount.component.d.ts

@@ -1,10 +1,10 @@
 import { InputTextComponent } from "@colijnit/corecomponents_v12";
 import { TransactionService } from "../../service/transaction.service";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
-export declare class TransactionLineSpecialDiscountComponent extends TransactionLineBaseComponent {
+export declare class TransactionLineSpecialDiscountComponent extends TransactionLineBaseComponent<number> {
     private _transactionService;
     set child(content: any);
     input: InputTextComponent;
     constructor(_transactionService: TransactionService);
-    commitDiscount(discount: number): Promise<boolean>;
+    commit(discount: number): Promise<boolean>;
 }

package/lib/component/transaction-line-fields/transaction-line-supplier.component.d.ts

@@ -2,13 +2,12 @@ import { OnInit } from "@angular/core";
 import { TransactionService } from "../../service/transaction.service";
 import { RelationListObject } from "@colijnit/transactionapi/build/model/relation-list-object.bo";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
-export declare class TransactionLineSupplierComponent extends TransactionLineBaseComponent implements OnInit {
+export declare class TransactionLineSupplierComponent extends TransactionLineBaseComponent<RelationListObject> implements OnInit {
     private _transactionService;
-    data: RelationListObject[];
     fields: Object;
     tempSupplier: string;
     constructor(_transactionService: TransactionService);
     ngOnInit(): void;
-    commitSupplier(code: string): Promise<boolean>;
+    commit(code: string): Promise<boolean>;
     protected transactionLineSet(): void;
 }

package/lib/component/transaction-line-fields/transaction-line-vat.component.d.ts

@@ -2,15 +2,12 @@ import { OnInit } from "@angular/core";
 import { Vat } from "@colijnit/transactionapi/build/model/vat";
 import { TransactionService } from "../../service/transaction.service";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
-export declare class TransactionLineVatComponent extends TransactionLineBaseComponent implements OnInit {
+export declare class TransactionLineVatComponent extends TransactionLineBaseComponent<Vat> implements OnInit {
     private _transactionService;
-    collection: Vat[];
+    protected codeField: string;
+    protected checkField: string;
+    protected propsForLabel: string[];
     constructor(_transactionService: TransactionService);
     ngOnInit(): void;
-    commitVat(id: number): Promise<boolean>;
-    handleChecked(event: MouseEvent, row: {
-        value: number;
-        text: string;
-        checked: boolean;
-    }): void;
+    commit(id: number): Promise<boolean>;
 }

package/lib/component/transaction-line-fields/transaction-line-warehouse.component.d.ts

@@ -2,16 +2,13 @@ import { OnInit } from "@angular/core";
 import { TransactionService } from "../../service/transaction.service";
 import { TransactionLineBaseComponent } from "../core/base/transaction-line-base.component";
 import { Warehouse } from "@colijnit/transactionapi/build/model/warehouse.bo";
-export declare class TransactionLineWarehouseComponent extends TransactionLineBaseComponent implements OnInit {
+export declare class TransactionLineWarehouseComponent extends TransactionLineBaseComponent<Warehouse> implements OnInit {
     private _transactionService;
     branch: string;
-    collection: Warehouse[];
+    protected codeField: string;
+    protected checkField: string;
+    protected propsForLabel: string[];
     constructor(_transactionService: TransactionService);
     ngOnInit(): void;
-    commitWarehouse(warehouse: number): Promise<boolean>;
-    handleChecked(event: MouseEvent, row: {
-        value: number;
-        text: string;
-        checked: boolean;
-    }): void;
+    commit(warehouse: number): Promise<boolean>;
 }

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

@@ -34,8 +34,11 @@
 
       &.sidebar {
         position: absolute;
-        left: -$cc-co-transaction-searchbar-width;
+        left: 0;
         transition: left 0.2s ease-in-out;
+        z-index: 2;
+        background: #FFF;
+        min-width: $tp-co-transaction-filter-wrapper-sidebar-min-width;
       }
 
       &.fullscreen {

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

@@ -3,10 +3,12 @@ $tp-co-transaction-search-font-size: $tp-font-size !default;
 $cc-co-transaction-search-background-color: $cc-color-light !default;
 $cc-co-transaction-search-border-color: $tp-color-border !default;
 $cc-co-transaction-search-border-style: solid 1px !default;
+$cc-co-transaction-search-max-height: 100vh !default;
 
 $cc-co-transaction-searchbar-width: 370px !default;
 
 $tp-co-transaction-filter-wrapper-min-width: 360px !default;
+$tp-co-transaction-filter-wrapper-sidebar-min-width: 370px !default;
 $tp-co-transaction-filter-button-color: $cc-color-light !default;
 $tp-co-transaction-filter-input-border: none !default;
 
@@ -50,12 +52,16 @@ $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-sidebar-button-size: 21px !default;
+$tp-co-transaction-search-result-header-sidebar-button-size: 24px !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-input-text-sidebar-width: 300px !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-input-text-sidebar-label-relative-top: 20px !default;
+$tp-co-transaction-search-input-text-sidebar-input-margin-top: 13px !default;
 $tp-co-transaction-search-view-modes-wrapper-padding: 0 35px !default;
 
 $tp-transaction-tile-background-color: $tp-color-light  !default;
@@ -68,8 +74,8 @@ $tp-transaction-tiles-wrapper-height: 100% !default;
 $tp-transaction-tiles-wrapper-column-gap: 5px !default;
 $tp-transaction-tile-font-family: $tp-font-family !default;
 $tp-transaction-tile-font-size: $tp-font-size !default;
-$tp-transaction-tile-height: 190px !default;
-$tp-transaction-tile-content-height: 175px !default;
+$tp-transaction-tile-height: 150px !default;
+$tp-transaction-tile-content-height: 130px !default;
 $tp-transaction-tile-body-height: 100px !default;
 $tp-transaction-tile-width: 300px !default;
 $tp-transaction-tile-width-mobile: 85 vw !default;

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

@@ -4,9 +4,8 @@
   .co-transaction-search {
     .transaction-search-wrapper {
       background-color: $cc-co-transaction-search-background-color;
-
       .transaction-search-result-wrapper.sidebar.expanded {
-        border-right: 1px solid $cc-co-transaction-search-border-color;
+        max-height: $cc-co-transaction-search-max-height;
       }
     }
   }

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

@@ -4,6 +4,7 @@
       display: flex;
       justify-content: center;
       flex-direction: column;
+      margin-top: 5px;
     }
 
     .upper-header {
@@ -25,9 +26,10 @@
 
     .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;
@@ -39,6 +41,19 @@
         background-color: transparent;
       }
     }
+    .close-search-button-wrapper {
+      &.sidebar {
+        margin-bottom: 5px;
+        .toggle-sidebar-button {
+          justify-content: center;
+          width: $tp-co-transaction-search-result-header-sidebar-button-size;
+          co-icon {
+            height: $tp-co-transaction-search-result-header-sidebar-close-button-size;
+            width: $tp-co-transaction-search-result-header-sidebar-close-button-size;
+          }
+        }
+      }
+    }
 
 
     .header-searchbar-wrapper {
@@ -63,7 +78,15 @@
       &.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;
+          label {
+            top: $tp-co-transaction-search-input-text-sidebar-label-relative-top;
+          }
+          input {
+            margin: $tp-co-transaction-search-input-text-sidebar-input-margin-top;
+          }
         }
       }
     }

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

@@ -56,7 +56,7 @@
       .tile {
         display: grid;
         grid-template-columns: 1fr;
-        grid-template-rows: 1.5fr 1.5fr 1fr;
+        grid-template-rows: 1fr 1.5fr 1fr;
         gap: 10px 10px;
         height: $tp-transaction-tile-content-height;
       }