@colijnit/transaction 12.1.15 → 12.1.18

package/lib/component/avatar/avatar.component.d.ts

@@ -1,13 +1,15 @@
 import { TransactionService } from "../../service/transaction.service";
 import { RelationListObject } from "@colijnit/transactionapi/build/model/relation-list-object.bo";
+import { SharedService } from "../../service/shared.service";
 export declare class AvatarComponent {
-    private _service;
+    private _transactionService;
+    private _sharedService;
     set relationId(value: number);
     get relationId(): number;
     relation: RelationListObject;
     showClass(): boolean;
     image: string;
     private _relationId;
-    constructor(_service: TransactionService);
+    constructor(_transactionService: TransactionService, _sharedService: SharedService);
     private _getRelation;
 }

package/lib/component/core/base/components/transaction-header-block/style/_layout.scss

@@ -35,13 +35,13 @@
       flex-basis: 1px;
       column-gap: $tp-transaction-header-block-content-column-gap;
       .transaction-header-block-content-first {
-        min-width: 130px;
+        //min-width: 130px;
       }
       .transaction-header-block-content-second {
-        min-width: 130px;
+        //min-width: 130px;
       }
       .transaction-header-block-content-third {
-        min-width: 130px;
+        //min-width: 130px;
       }
     }
     .transaction-header-block-divider {

package/lib/component/core/base/components/transaction-header-block/style/_material-definition.scss

@@ -4,7 +4,7 @@ $tp-transaction-header-block-label-font-family: $tp-transaction-header-font-fami
 $tp-transaction-header-block-label-font-size: $tp-transaction-header-font-size !default;
 $tp-transaction-header-block-label-font-color: $tp-transaction-header-font-color !default;
 $tp-transaction-header-block-label-font-weight: bold !default;
-$tp-transaction-header-block-header-margin: 0 0 5px 0 !default;
+$tp-transaction-header-block-header-margin: 0 !default;
 $tp-transaction-header-block-header-min-height: 40px !default;
 
 $tp-transaction-header-block-content-divider-background: $tp-color-border !default;
@@ -12,7 +12,7 @@ $tp-transaction-header-block-content-column-gap: 20px !default;
 
 $tp-transaction-header-block-width: 200px !default;
 $tp-transaction-header-block-margin: 0 !default;
-$tp-transaction-header-block-padding: 10px 20px !default;
+$tp-transaction-header-block-padding: 4px 20px !default;
 $tp-transaction-header-block-border: 1px solid !default;
 $tp-transaction-header-block-border-radius: 10px !default;
 $tp-transaction-header-block-border-color: $tp-color-border !default;

package/lib/component/core/base/transaction-grid-base.component.d.ts

@@ -8,9 +8,11 @@ export declare abstract class TransactionGridBaseComponent {
     readonly icons: typeof Icon;
     readonly align: typeof ColumnAlign;
     set content(columnComponents: QueryList<SimpleGridColumnDirective>);
+    transactionId: number;
     set transactionLines(value: TransactionLineInfo[]);
     get transactionLines(): TransactionLineInfo[];
     sidePanelClicked: EventEmitter<TransactionLineInfo>;
+    rowVisible: EventEmitter<any>;
     extraColumns: SimpleGridColumnDirective[];
     private _transactionLines;
     constructor(imageService: TransactionImageService);

package/lib/component/core/relation/customer-groups.component.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter, OnInit } from "@angular/core";
-import { IOneConnectorAdapterService } from "../../../service/ione-connector-adapter.service";
+import { TransactionConnectorService } from "../../../service/transaction-connector.service";
 import { CustomerGroup } from "@colijnit/transactionapi/build/model/customer-group.bo";
 export declare class CustomerGroupsComponent implements OnInit {
     private _connector;
@@ -8,6 +8,6 @@ export declare class CustomerGroupsComponent implements OnInit {
     modelChange: EventEmitter<CustomerGroup>;
     customerGroups: CustomerGroup[];
     fields: Object;
-    constructor(_connector: IOneConnectorAdapterService);
+    constructor(_connector: TransactionConnectorService);
     ngOnInit(): Promise<void>;
 }

package/lib/component/payment/payment.component.d.ts

@@ -1,18 +1,35 @@
 import { OnInit } from "@angular/core";
 import { Icon } from "../../enum/icon.enum";
 import { TransactionService } from "../../service/transaction.service";
+import { PaymentService } from "../../service/payment.service";
+import { SharedService } from "../../service/shared.service";
+import { PaymentMethod } from "@colijnit/transactionapi/build/model/payment-method.bo";
+import { PaymentViewmodel } from "../../model/payment.viewmodel";
 export declare class PaymentComponent implements OnInit {
     private _transactionService;
+    private _sharedService;
+    private _paymentService;
     readonly icons: typeof Icon;
+    transactionUuid: string;
     amount: number;
+    currencyCode: number;
     showClass(): boolean;
     paymentMethodIdx: number;
-    paymentMethods: {
-        icon: Icon;
-        description: string;
-    }[];
+    cashRegisterIdx: number;
+    paymentMethods: PaymentViewmodel[];
     cashRegisters: any[];
-    constructor(_transactionService: TransactionService);
+    showCashRegisters: boolean;
+    showKeyPad: boolean;
+    constructor(_transactionService: TransactionService, _sharedService: SharedService, _paymentService: PaymentService);
     ngOnInit(): void;
+    paymentMethodSelected(method: PaymentMethod, index: number): void;
+    handlePayment(): void;
+    handleKeyPadModelChange(model: number): void;
+    /**
+     *
+     * @private
+     */
+    private _prepareCashRegisters;
     private _getCashRegisters;
+    private _getPaymentMethods;
 }

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

@@ -33,11 +33,20 @@
       column-gap: 5px;
       flex-wrap: wrap;
     }
+    .payment-to-pay-wrapper {
+      display: grid;
+      grid-template-columns: 50% 50%;
+      grid-template-rows: auto auto;
+      row-gap: 10px;
+      column-gap: 10px;
+    }
     .payment-to-pay {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       row-gap: $tp-payment-row-gap;
+      grid-column: 1 / 1;
+      grid-row: 1 / 1;
     }
     .payment-amount {
       display: flex;
@@ -47,8 +56,21 @@
       font-family: $tp-payment-amount-font-family;
       font-size: $tp-payment-amount-font-size;
       font-weight: $tp-payment-amount-font-weight;
-      padding: $tp-payment-amount-padding;
       border-radius: 5px;
+      height: 100%;
+      width: 100%;
+    }
+    .payment-to-pay-button {
+      grid-column: 1 / 1;
+      grid-row: 2 / 2;
+      .co-button {
+        justify-content: center;
+        border-radius: 5px;
+      }
+    }
+    .payment-to-pay-keypad {
+      grid-column: 2 / 2;
+      grid-row: 1 / 3;
     }
   }
 }

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

@@ -10,7 +10,6 @@ $tp-payment-row-gap: 20px !default;
 $tp-payment-amount-font-family: $tp-font-family !default;
 $tp-payment-amount-font-size: 32px !default;
 $tp-payment-amount-font-weight: bold !default;
-$tp-payment-amount-padding: 25px 90px !default;
 $tp-payment-amount-color: rgba(0, 0, 0, 0.5) !default;
 $tp-payment-amount-border: 1px solid !default;
 $tp-payment-amount-border-color: $tp-color-border !default;

package/lib/component/payment/style/_theme.scss

@@ -12,5 +12,29 @@
       border-color: $tp-payment-amount-border-color;
       background-color: $tp-payment-amount-background-color;
     }
+    .payment-to-pay-button {
+      .co-button {
+        background-color: $tp-color-colijn-orange;
+      }
+    }
+    .payment-to-pay-keypad {
+      .key-pad-wrapper {
+        background: transparent;
+        border-color: $tp-payment-amount-border-color;
+      }
+      .key-pad-button {
+        background-color: $tp-payment-amount-background-color;
+        color: $tp-payment-amount-color;
+        font-weight: bold;
+        .co-icon {
+          svg { // for fontawesome icons
+            fill: $tp-payment-amount-color;
+          }
+          & [fill] { // for own icons
+            fill: $tp-payment-amount-color;
+          }
+        }
+      }
+    }
   }
 }

package/lib/component/payment-tile/payment-tile.component.d.ts

@@ -3,6 +3,7 @@ import { Icon } from "../../enum/icon.enum";
 export declare class PaymentTileComponent {
     selected: boolean;
     icon: Icon;
+    image: string;
     description: string;
     selectedChange: EventEmitter<boolean>;
     showClass(): boolean;

package/lib/component/payment-tile/style/_layout.scss

@@ -13,10 +13,11 @@
     }
     .payment-tile-description {
     }
-    .payment-tile-icon {
+    .payment-tile-icon, .payment-tile-image {
       display: block;
       height: 80%;
       width: 50%;
+      object-fit: contain;
     }
   }
 }

package/lib/component/relation-address/relation-address.component.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter, OnInit } from "@angular/core";
 import { Address } from "@colijnit/transactionapi/build/model/address.bo";
 import { Country } from "@colijnit/transactionapi/build/model/country.bo";
-import { IOneConnectorAdapterService } from "../../service/ione-connector-adapter.service";
+import { TransactionConnectorService } from "../../service/transaction-connector.service";
 import { DictionaryService } from "../../service/dictionary.service";
 import { FormMasterService } from "@colijnit/corecomponents_v12";
 export declare class RelationAddressComponent implements OnInit {
@@ -16,7 +16,7 @@ export declare class RelationAddressComponent implements OnInit {
     showClass(): boolean;
     countries: Country[];
     fields: Object;
-    constructor(_dictionary: DictionaryService, _connector: IOneConnectorAdapterService, _formMasterService: FormMasterService);
+    constructor(_dictionary: DictionaryService, _connector: TransactionConnectorService, _formMasterService: FormMasterService);
     postalCodeCheckErrorMessage: string;
     private _prevPostalCodeForCheck;
     private _prevHouseNoForCheck;

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

@@ -1,3 +1,3 @@
 $tp-transaction-totals-margin: 15px 0 !default;
 $tp-transaction-padding: 25px !default;
-$tp-transaction-transaction-lines-header-padding: 20px !default;
+$tp-transaction-transaction-lines-header-padding: 20px 0 !default;

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

@@ -5,7 +5,6 @@ import { ContentViewMode } from "../../enum/content-view-mode.enum";
 import { Icon } from "../../enum/icon.enum";
 import { IconCacheService } from "../../service/icon-cache.service";
 import { TransactionAddTextLineRequest } from "@colijnit/transactionapi/build/model/transaction-add-text-line-request.bo";
-import { TabCategory } from "../../enum/tab-category.enum";
 import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
 import { TransactionBarButton } from "../../model/transaction-bar-button";
 import { TransactionTypeCategory } from "../../enum/transaction-type-category.enum";
@@ -13,11 +12,11 @@ export declare class TransactionComponent implements OnDestroy {
     iconCacheService: IconCacheService;
     private _service;
     readonly viewModes: typeof ContentViewMode;
-    readonly tabCategory: typeof TabCategory;
     readonly icons: typeof Icon;
     set transaction(value: TransactionInfoResponse);
     get transaction(): TransactionInfoResponse;
     set transactionId(value: number);
+    get transactionId(): number;
     showHeader: boolean;
     showQuickAccess: boolean;
     showButtonBar: boolean;
@@ -29,6 +28,7 @@ export declare class TransactionComponent implements OnDestroy {
     sidePanelTransactionLine: TransactionLineInfo;
     private _subs;
     private _transaction;
+    private _transactionId;
     constructor(iconCacheService: IconCacheService, _service: TransactionService);
     ngOnDestroy(): void;
     addDiscount(): void;

package/lib/component/transaction-button-bar/style/_layout.scss

@@ -6,13 +6,15 @@
     font-size: $tp-co-transaction-button-bar-font-size;
     .button-bar-wrapper {
       display: flex;
-      column-gap: 3px;
+      justify-content: center;
     }
 
     .custom-button-wrapper {
       padding: 2px;
     }
-
+    .co-transaction-button-bar-button {
+      flex: 1;
+    }
     .button-wrapper {
       //height: $tp-co-transaction-button-bar-button-size;
       //min-width: $tp-co-transaction-button-bar-button-size;
@@ -25,7 +27,8 @@
       justify-content: center;
       cursor: pointer;
       .button-title {
-        padding: 0 7px 4px 7px;
+        font-size: $tp-co-transaction-button-bar-label-font-size;
+        //padding: 0 7px 4px 7px;
       }
       .co-transaction-button-bar-icon {
         height: $tp-co-transaction-button-bar-icon-size;

package/lib/component/transaction-button-bar/style/_material-definition.scss

@@ -3,9 +3,10 @@ $tp-co-transaction-button-bar-font-size: $tp-font-size !default;
 $tp-co-transaction-button-bar-button-size: 65px !default;
 $tp-co-transaction-button-bar-button-background-color: white !default;
 $tp-co-transaction-button-bar-button-border-radius: 10px !default;
-$tp-co-transaction-button-bar-button-padding: 10px !default;
+$tp-co-transaction-button-bar-button-padding: 5px !default;
 $tp-co-transaction-button-bar-button-selected-box-shadow: 0 0 0 1px $tp-color-action inset !default;
 $tp-co-transaction-button-bar-button-selected-box-border: 2px solid $tp-color-action !default;
 $tp-co-transaction-button-bar-icon-color: $tp-color-font !default;
-$tp-co-transaction-button-bar-icon-size: 30px !default;
-$tp-co-transaction-button-bar-icon-margin: 0 0 10px 0 !default;
+$tp-co-transaction-button-bar-icon-size: 20px !default;
+$tp-co-transaction-button-bar-icon-margin: 0 0 5px 0 !default;
+$tp-co-transaction-button-bar-label-font-size: $tp-font-size-small !default;

package/lib/component/transaction-grid/transaction-base-grid/style/_theme.scss

@@ -2,5 +2,11 @@
 
 @include export-module('co-transaction-base-grid-theme') {
   .co-transaction-base-grid {
+    .transaction-grid-article-description {
+      color: $tp-color-font;
+    }
+    .transaction-grid-article-text {
+      color: $tp-color-label;
+    }
   }
 }

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

@@ -13,6 +13,7 @@ export declare class TransactionGridComponent {
     get transactionType(): TransactionKind;
     set activeCategory(value: TransactionTypeCategory);
     get activeCategory(): TransactionTypeCategory;
+    transactionId: number;
     transactionLines: TransactionLineInfo[];
     sidePanelClicked: EventEmitter<TransactionLineInfo>;
     showClass(): boolean;

package/lib/component/transaction-grid/transaction-history-grid/style/_layout.scss

@@ -3,5 +3,13 @@
 @include export-module('co-transaction-history-grid-layout') {
   .co-transaction-history-grid {
 
+    .history-grid-wrapper {
+      padding: $tp-co-transaction-history-grid-padding;
+    }
+
+    .delete-button-wrapper {
+      display: flex;
+      justify-content: flex-end;
+    }
   }
 }

package/lib/component/transaction-grid/transaction-history-grid/style/_material-definition.scss

@@ -0,0 +1 @@
+$tp-co-transaction-history-grid-padding: 0 !default;

package/lib/component/transaction-grid/transaction-history-grid/transaction-history-grid.component.d.ts

@@ -1,14 +1,19 @@
-import { QueryList } from "@angular/core";
-import { TabCategory } from "../../../enum/tab-category.enum";
-import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { EventEmitter, QueryList } from "@angular/core";
 import { SimpleGridColumnDirective } from "@colijnit/corecomponents_v12";
 import { StatusType } from "../../../enum/status-type.enum";
+import { Icon } from "../../../enum/icon.enum";
+import { IconCacheService } from "../../../service/icon-cache.service";
 export declare class TransactionHistoryGridComponent {
-    readonly tabCategory: typeof TabCategory;
+    iconsService: IconCacheService;
     readonly statusType: typeof StatusType;
+    readonly icons: typeof Icon;
     set content(columnComponents: QueryList<SimpleGridColumnDirective>);
-    transactionLines: TransactionLineInfo[];
+    collection: any;
+    deleteSelectedRow: EventEmitter<any>;
     showClass(): boolean;
     extraColumns: SimpleGridColumnDirective[];
+    selectedRow: any;
+    constructor(iconsService: IconCacheService);
     handleSelectRow(row: any): void;
+    handleDeleteClick(): void;
 }

package/lib/component/transaction-grid/transaction-received-goods-grid/transaction-received-goods-grid.component.d.ts

@@ -1,4 +1,37 @@
+import { OnDestroy, OnInit } from "@angular/core";
 import { TransactionGridBaseComponent } from "../../core/base/transaction-grid-base.component";
-export declare class TransactionReceivedGoodsGridComponent extends TransactionGridBaseComponent {
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { ReceiveGoodsViewModel } from "../../../model/received-goods-view-model";
+import { TransactionImageService } from "../../../service/transaction-image.service";
+import { TransactionService } from "../../../service/transaction.service";
+import { ArticleService } from "../../../service/article.service";
+import { GoodsReceiptStatusWithHistory } from "@colijnit/transactionapi/build/model/goods-receipt-status-with-history.bo";
+import { TransactionEventService } from "../../../service/transaction-event.service";
+export declare class TransactionReceivedGoodsGridComponent extends TransactionGridBaseComponent implements OnInit, OnDestroy {
+    private _imageService;
+    private _transactionService;
+    private _transactionEventService;
+    private _articleService;
     showClass(): boolean;
+    locations: string[];
+    locationDropdownFields: {};
+    rowViewModels: Map<TransactionLineInfo, ReceiveGoodsViewModel>;
+    private _subscriptions;
+    constructor(_imageService: TransactionImageService, _transactionService: TransactionService, _transactionEventService: TransactionEventService, _articleService: ArticleService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    handleRowVisible(row: any): Promise<void>;
+    locationRequired(row: TransactionLineInfo): boolean;
+    handleDropDownSelected(warehouseNr: number): Promise<void>;
+    getRowViewModel(row: TransactionLineInfo): ReceiveGoodsViewModel;
+    handleReceiveSelectedPurchaseOrders(value: {
+        checkboxValue: boolean;
+        date: Date;
+        id: string;
+    }): Promise<void>;
+    private _handleAfterCommitReceivedOrders;
+    handleTransactionLineChanged(change: {
+        transactionLine: TransactionLineInfo;
+        goodsReceiptStatus: GoodsReceiptStatusWithHistory;
+    }): void;
 }

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

@@ -29,5 +29,10 @@
         height: 15px;
       }
     }
+    .transaction-header-block-content-third {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
   }
 }

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

@@ -4,3 +4,4 @@ $tp-transaction-header-delivery-planning-request-button-border: 1px solid !defau
 $tp-transaction-header-delivery-planning-request-button-border-color: $tp-color-border !default;
 $tp-transaction-header-delivery-planning-request-button-border-radius: 5px !default;
 $tp-transaction-header-delivery-definitive-button-color: $tp-color-active-light !default;
+$tp-transaction-header-delivery-delivery-truck-color: $tp-color-font !default;

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

@@ -13,5 +13,13 @@
         fill: $tp-transaction-header-delivery-definitive-button-color;
       }
     }
+    .header-delivery-truck-icon {
+      svg { // for fontawesome icons
+        fill: $tp-transaction-header-delivery-delivery-truck-color;
+      }
+      & [fill] { // for own icons
+        fill: $tp-transaction-header-delivery-delivery-truck-color;
+      }
+    }
   }
 }

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

@@ -3,5 +3,10 @@
 @include export-module('co-transaction-header-order-layout') {
   .co-transaction-header-order {
     display: flex;
+    .transaction-header-block-content-third {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
   }
 }

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

@@ -5,6 +5,7 @@
     display: flex;
     .header-block-balance {
       display: flex;
+      cursor: pointer;
       column-gap: 10px;
       border-radius: $tp-transaction-header-block-payment-balance-border-radius;
       padding: $tp-transaction-header-block-payment-balance-padding;

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

@@ -1,4 +1,6 @@
 import { TransactionBaseComponent } from "../../core/base/transaction-base.component";
 export declare class TransactionHeaderPaymentComponent extends TransactionBaseComponent {
     showClass(): boolean;
+    showPaymentDialog: boolean;
+    openPayment(): void;
 }

package/lib/component/transaction-history-grid-status/style/_layout.scss

@@ -4,25 +4,25 @@
   .co-transaction-history-grid-status {
     .transaction-status-indication {
       display: flex;
-      width: 130px;
+      width: $tp-co-transaction-history-grid-status-button-width;
       border-radius: 22px;
-      height: 44px;
-      background: white;
-      border: 1px solid #dce4ea;
+      height: $tp-co-transaction-history-grid-status-button-height;
+      background: $tp-co-transaction-history-grid-status-button-background;
+      border: $tp-co-transaction-history-grid-status-button-border;
       align-items: center;
       justify-content: center;
     }
 
     .status-color-circle {
-      height: 12px;
-      width: 12px;
+      height: $tp-co-transaction-history-grid-status-circle-height;
+      width: $tp-co-transaction-history-grid-status-circle-width;
       border-radius: 6px;
       background: #dce4ea;
       margin-right: 10px;
     }
 
     .status-text {
-      //font-family:
+      font-family: $tp-co-transaction-history-grid-status-button-font-family;
     }
   }
 }

package/lib/component/transaction-history-grid-status/style/_material-definition.scss

@@ -0,0 +1,8 @@
+$tp-co-transaction-history-grid-status-button-font-family: $tp-font-family !default;
+$tp-co-transaction-history-grid-status-button-width: 130px !default;
+$tp-co-transaction-history-grid-status-button-height: 44px !default;
+$tp-co-transaction-history-grid-status-button-background: white !default;
+$tp-co-transaction-history-grid-status-button-border: 1px solid #dce4ea !default;
+
+$tp-co-transaction-history-grid-status-circle-width: 12px !default;
+$tp-co-transaction-history-grid-status-circle-height: 12px !default;

package/lib/component/transaction-history-grid-status/transaction-history-grid-status.component.d.ts

@@ -1,7 +1,9 @@
 import { AfterViewInit, ElementRef } from "@angular/core";
 import { StatusType } from "../../enum/status-type.enum";
 export declare class TransactionHistoryGridStatusComponent implements AfterViewInit {
+    readonly type: typeof StatusType;
     statusType: StatusType;
+    subType: string;
     statusIndicator: ElementRef;
     showClass(): boolean;
     private _getStatusIndicatorColor;

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

@@ -94,6 +94,8 @@
       flex-shrink: 0;
       height: $tp-transaction-line-amount-height;
       padding: $tp-transaction-line-inner-padding;
+      width: 100px;
+      justify-content: flex-end;
     }
     .transaction-line-buttons {
       display: flex;
@@ -170,7 +172,6 @@
     font-family: $tp-transaction-line-font-family;
     font-size: $tp-transaction-line-article-text-font-size;
     padding: $tp-transaction-line-article-text-padding;
-    background-color: $tp-transaction-line-background-color;
   }
   //.cdk-drop-list-dragging .drag-drop-list:not(.cdk-drag-placeholder) {
   //  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);

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

@@ -11,9 +11,9 @@ $tp-transaction-line-border-color: $tp-color-action !default;
 $tp-transaction-line-image-border: 1px solid $tp-color-border !default;
 $tp-transaction-line-column-gap: 15px !default;
 $tp-transaction-line-row-gap: 15px !default;
-$tp-transaction-line-image-width: 125px !default;
+$tp-transaction-line-image-width: 67px !default;
 $tp-transaction-line-preview-image-width: 75px !default;
-$tp-transaction-line-image-height: 100px !default;
+$tp-transaction-line-image-height: 50px !default;
 $tp-transaction-line-preview-image-height: 50px !default;
 $tp-transaction-line-amount-height: 50px !default;
 $tp-transaction-line-amount-input-width: 50px !default;
@@ -25,5 +25,6 @@ $tp-transaction-line-buttons-overview-background-color: $tp-color-active-light !
 $tp-transaction-line-buttons-overview-text-color: $tp-color-light !default;
 $tp-transaction-line-buttons-add-text-background-color: $tp-color-action !default;
 $tp-transaction-line-buttons-add-text-text-color: $tp-color-light !default;
-$tp-transaction-line-article-text-font-size: $tp-font-size-small !default;
+$tp-transaction-line-article-text-font-size: $tp-font-size !default;
+$tp-transaction-line-article-text-font-color: $tp-color-label !default;
 $tp-transaction-line-article-text-padding: 2px !default;

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

@@ -4,6 +4,7 @@
   .co-transaction-line {
     background-color: $tp-transaction-line-background-color;
     border-color: $tp-transaction-line-border-color;
+    color: $tp-color-font;
     .transaction-line-image {
       border: $tp-transaction-line-image-border;
     }
@@ -37,5 +38,9 @@
         fill: $tp-transaction-line-buttons-add-text-text-color;
       }
     }
+    .article-text {
+      color: $tp-transaction-line-article-text-font-color;
+      background-color: $tp-transaction-line-background-color;
+    }
   }
 }

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

@@ -35,10 +35,12 @@
         width: 1px;
         margin: 5px;
       }
-      .close-button {
-        width: 30px;
-        height: 30px;
-      }
+    }
+    .close-button {
+      display: flex;
+      align-self: flex-end;
+      width: 25px;
+      height: 25px;
     }
     .transaction-line-side-panel-nav-bar {
       display: flex;
@@ -50,6 +52,7 @@
       flex-direction: column;
       flex-basis: 100%;
       overflow-y: auto;
+      overflow-x: hidden;
     }
     .save-cancel-wrapper {
       display: flex;

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

@@ -2,7 +2,7 @@ $tp-transaction-line-side-panel-font-family: $tp-font-family !default;
 $tp-transaction-line-side-panel-font-size: $tp-font-size !default;
 $tp-transaction-line-side-panel-top: 0 !default;
 $tp-transaction-line-side-panel-height: 100% !default;
-$tp-transaction-line-side-panel-width: 700px !default;
+$tp-transaction-line-side-panel-width: 450px !default;
 $tp-transaction-line-side-panel-box-shadow: -3px 0px 16px 1px rgb(0, 0, 0, 0.2) !default;
 $tp-transaction-line-side-panel-padding: 10px !default;
 $tp-transaction-line-side-panel-header-label-font-family: $tp-font-family !default;