@colijnit/transaction 12.1.90 → 12.1.92

package/lib/component/checkout/checkout-overview-relation-edit/checkout-overview-relation-edit.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, OnInit } from "@angular/core";
+import { AfterViewInit, EventEmitter, OnInit } from "@angular/core";
 import { TransactionService } from "../../../service/transaction.service";
 import { FormMasterService } from "@colijnit/corecomponents_v12";
 import { Icon } from "../../../enum/icon.enum";
@@ -8,7 +8,7 @@ import { RelationAnyType } from "../../../model/relation-any-type";
 import { Address } from "@colijnit/relationapi/build/model/address.bo";
 import { RelationNameKind } from "@colijnit/relationapi/build/enum/relation-name-kind.enum";
 import { Relation } from "@colijnit/relationapi/build/model/relation.bo";
-export declare class CheckoutOverviewRelationEditComponent implements OnInit {
+export declare class CheckoutOverviewRelationEditComponent implements OnInit, AfterViewInit {
     private _formMaster;
     service: TransactionService;
     readonly relKind: typeof RelationKind;
@@ -34,11 +34,12 @@ export declare class CheckoutOverviewRelationEditComponent implements OnInit {
     get applicationUser(): boolean;
     constructor(_formMaster: FormMasterService, service: TransactionService);
     ngOnInit(): Promise<void>;
+    ngAfterViewInit(): void;
     handleRelationTypeChange(relation: Relation): void;
     handleCustomerGroupChange(group: string): void;
     updateRelation(rel: RelationAnyType): void;
     submit(): boolean;
-    handleNewAddress(type: AddressType, address: Address): void;
+    handleDeliveryAddressChange(nawNr: number): void;
     checkSameAddress(checked: boolean): void;
     private _setCountryNameToAddress;
 }

package/lib/component/confirmation-dialog/confirmation-dialog.component.d.ts

@@ -10,7 +10,9 @@ export declare class ConfirmationDialogComponent extends DialogBaseComponent {
     text: string;
     details: string;
     type: AppPopupType;
+    showRememberCheckbox: boolean;
     showClass(): boolean;
+    rememberChoice: boolean;
     constructor(iconCacheService: IconCacheService);
     handleYesClick(event: MouseEvent): void;
     handleNoClick(event: MouseEvent): void;

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

@@ -14,8 +14,9 @@ $tp-transaction-header-block-width: 200px !default;
 $tp-transaction-header-block-margin: 0 !default;
 $tp-transaction-header-block-padding: 4px 20px !default;
 $tp-transaction-header-block-border: none !default;
-$tp-transaction-header-block-border-radius: 10px !default;
+$tp-transaction-header-block-border-radius: $tp-default-border-radius !default;
 $tp-transaction-header-block-border-color: $tp-color-border !default;
 $tp-transaction-header-block-border-width: 1px !default;
 $tp-transaction-header-block-background: white !default;
 $tp-transaction-header-block-line-height: 20px !default;
+$tp-transaction-header-block-hover-background: rgba($tp-color-action, 0.05) !default;

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

@@ -11,5 +11,8 @@
       border-color: $tp-transaction-header-block-border-color;
       background: $tp-transaction-header-block-background;
     }
+    &:hover {
+      background: $tp-transaction-header-block-hover-background;
+    }
   }
 }

package/lib/component/core/base/dialog-base.component.d.ts

@@ -1,4 +1,4 @@
 import { AppPopupButtonType } from "../enum/app-popup-button-type.enum";
 export declare abstract class DialogBaseComponent {
-    onClose(eventType: AppPopupButtonType, output?: any): void;
+    onClose(eventType: AppPopupButtonType, output?: any, rememberChoice?: boolean): void;
 }

package/lib/component/core/base/transaction-input-field-base.component.d.ts

@@ -3,6 +3,7 @@ import { TransactionService } from "../../../service/transaction.service";
 export declare abstract class TransactionInputFieldBaseComponent extends TransactionBaseComponent {
     protected transactionService: TransactionService;
     showLabel: boolean;
+    showLabelBefore: boolean;
     defaultEditMode: boolean;
     set editMode(value: boolean);
     get editMode(): boolean;

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

@@ -5,10 +5,10 @@ import { PaymentService } from "../../service/payment.service";
 export declare class DepositPaymentComponent implements OnInit {
     private _paymentService;
     transactionUuid: string;
-    depositPayments: DepositPaymentViewModel[];
-    showLoader: boolean;
     showClass(): boolean;
     paymentMethods: PaymentViewmodel[];
+    depositPayments: DepositPaymentViewModel[];
+    showLoader: boolean;
     constructor(_paymentService: PaymentService);
     ngOnInit(): void;
     private _getDepositPaymentInfo;

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

@@ -1,11 +1,13 @@
 @include export-module('co-deposit-payment-layout') {
   .co-deposit-payment {
-    position: relative;
     font-family: $tp-down-payment-font-family;
     font-size: $tp-down-payment-font-size;
     display: flex;
     flex-direction: column;
     row-gap: $tp-down-payment-row-gap;
+    .co-payment-tile {
+      height: 100%;
+    }
     .co-tile {
       .co-tile-wrapper {
         border: none;
@@ -25,6 +27,10 @@
       transform: translate(-50%, -50%);
     }
     .down-payment-payments-wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       padding: $tp-down-payment-payments-padding;
       background-color: $tp-down-payment-payments-background-color;
       border-style: $tp-down-payment-payments-border-style;
@@ -32,8 +38,12 @@
       border-width: $tp-down-payment-payments-border-width;
       border-radius: $tp-down-payment-payments-border-radius;
     }
+    .deposit-payment-spacer {
+      width: $tp-down-payment-amount-spacer-width;
+    }
     .down-payment-payments {
       display: flex;
+      width: 100%;
       height: $tp-down-payment-payments-height;
       padding: $tp-down-payment-payment-padding;
       border-style: $tp-down-payment-payment-border-style;
@@ -46,9 +56,9 @@
     }
     .down-payment-amount-wrapper {
       display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      row-gap: $tp-down-payment-amount-row-gap;
+      flex-direction: row;
+      width: 100%;
+      justify-content: space-between;
       .down-payment-amount {
         font-size: $tp-down-payment-amount-font-size;
         font-weight: $tp-down-payment-amount-font-weight;

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

@@ -11,7 +11,8 @@ $tp-down-payment-payments-border-radius: 5px !default;
 $tp-down-payment-amount-font-size: $tp-font-size !default;
 $tp-down-payment-amount-font-weight: bold !default;
 $tp-down-payment-amount-row-gap: 10px !default;
-$tp-down-payment-date-font-size: $tp-font-size-small !default;
+$tp-down-payment-amount-spacer-width: $tp-down-payment-amount-row-gap !default;
+$tp-down-payment-date-font-size: $tp-font-size !default;
 $tp-down-payment-date-font-weight: normal !default;
 $tp-down-payment-payment-padding: 0 20px !default;
 $tp-down-payment-payment-border-style: solid !default;

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

@@ -3,7 +3,7 @@ $tp-dialog-transaction-discount-row-gap: 20px !default;
 $tp-dialog-transaction-discount-height: 500px !default;
 $tp-dialog-transaction-discount-overview-border: 1px solid !default;
 $tp-dialog-transaction-discount-overview-border-color: $tp-color-border !default;
-$tp-dialog-transaction-discount-overview-border-radius: 10px !default;
+$tp-dialog-transaction-discount-overview-border-radius: $tp-default-border-radius !default;
 $tp-dialog-transaction-discount-overview-margin: 15px 0 0 0 !default;
 $tp-dialog-transaction-discount-total-font-size: 13px !default;
 $tp-dialog-transaction-discount-total-font-weight: bold !default;

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

@@ -3,7 +3,7 @@ $tp-dialog-transaction-line-discount-row-gap: 20px !default;
 $tp-dialog-transaction-line-discount-height: 500px !default;
 $tp-dialog-transaction-line-discount-overview-border: 1px solid !default;
 $tp-dialog-transaction-line-discount-overview-border-color: $tp-color-border !default;
-$tp-dialog-transaction-line-discount-overview-border-radius: 10px !default;
+$tp-dialog-transaction-line-discount-overview-border-radius: $tp-default-border-radius !default;
 $tp-dialog-transaction-line-discount-overview-margin: 15px 0 0 0 !default;
 $tp-dialog-transaction-line-discount-total-font-size: 13px !default;
 $tp-dialog-transaction-line-discount-total-font-weight: bold !default;

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

@@ -29,7 +29,6 @@ export declare class PaymentComponent implements OnInit, OnDestroy {
     currentPaymentMethod: PaymentMethod;
     qrCodeImage: string;
     showLoader: boolean;
-    showLoaderDepositPayments: boolean;
     amountToPay: number;
     private _amount;
     private _paymentStatusInterval;

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

@@ -2,7 +2,7 @@ $tp-co-quick-send-button-height: 32px !default;
 $tp-co-quick-send-button-column-gap: 5px !default;
 $tp-co-quick-send-button-align-items: flex-start !default;
 $tp-co-quick-send-button-background-color: white !default;
-$tp-co-quick-send-button-border-radius: 10px !default;
+$tp-co-quick-send-button-border-radius: $tp-default-border-radius !default;
 $tp-co-quick-send-button-padding: 5px 10px !default;
 $tp-co-quick-send-button-font-size: $tp-font-size-small !default;
 $tp-co-quick-send-button-disabled-opacity: 0.5 !default;

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

@@ -4,8 +4,10 @@ import { RelationBaseComponent } from "../relation-base.component";
 import { FormMasterService } from "@colijnit/corecomponents_v12";
 import { Address } from "@colijnit/relationapi/build/model/address.bo";
 import { AddressType } from "@colijnit/relationapi/build/enum/address-type.enum";
+import { RelationService } from "../../../service/relation.service";
 export declare class RelationAddressesComponent extends RelationBaseComponent {
     private _formMasterService;
+    private _relationService;
     readonly icons: typeof Icon;
     readonly: boolean;
     addresses: Address[];
@@ -13,14 +15,13 @@ export declare class RelationAddressesComponent extends RelationBaseComponent {
     type: AddressType;
     selectedNawNr: number;
     selectedNawNrChange: EventEmitter<number>;
-    addressSaved: EventEmitter<Address>;
     showClass(): boolean;
     showEditAddressDialog: boolean;
     addressToEdit: Address;
     private _boFactory;
-    constructor(_formMasterService: FormMasterService);
+    constructor(_formMasterService: FormMasterService, _relationService: RelationService);
     submitForm(): void;
-    saveAddress(address: Address): void;
+    saveAddress(address: Address): Promise<void>;
     showNewAddressDialog(): void;
     changeAddress(address: Address): void;
     editAddress(addr: Address): void;

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

@@ -1,7 +1,9 @@
 import { EventEmitter } from "@angular/core";
 import { CustomerFullObject } from "@colijnit/relationapi/build/model/customer-full-object.bo";
 import { RelationAnyType } from "@colijnit/relationapi/build/model/relation-any-type";
+import { RelationKind } from "@colijnit/relationapi/build/enum/relation-kind.enum";
 export declare abstract class RelationBaseComponent {
+    readonly relKind: typeof RelationKind;
     set relation(value: RelationAnyType);
     get relation(): RelationAnyType;
     relationChange: EventEmitter<RelationAnyType>;

package/lib/component/relation/relation-contact-details/relation-contact-details.component.d.ts

@@ -1,7 +1,9 @@
 import { ContactOption } from "@colijnit/relationapi/build/model/contact-option.bo";
 import { RelationBaseComponent } from "../relation-base.component";
+import { RelationKind } from "@colijnit/relationapi/build/enum/relation-kind.enum";
 export declare class RelationContactDetailsComponent extends RelationBaseComponent {
     readonly: boolean;
+    relationKind: RelationKind;
     showClass(): boolean;
     emailAddress: ContactOption;
     phoneNumber: ContactOption;

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

@@ -3,4 +3,4 @@ $tp-co-toast-font-size: $tp-font-size !default;
 $tp-co-toast-font-color: white !default;
 $tp-co-toast-background-color: $tp-color-active-light !default;
 $tp-co-toast-padding: 20px !default;
-$tp-co-toast-border-radius: 10px !default;
+$tp-co-toast-border-radius: $tp-default-border-radius !default;

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

@@ -2,7 +2,7 @@ $tp-co-transaction-button-bar-font-family: $tp-font-family !default;
 $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-border-radius: $tp-default-border-radius !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: none !default;

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

@@ -3,7 +3,7 @@ $tp-transaction-header-delivery-planning-request-button-size: $tp-default-button
 $tp-transaction-header-delivery-planning-request-button-color: $tp-color-active !default;
 $tp-transaction-header-delivery-planning-request-button-border: 1px solid !default;
 $tp-transaction-header-delivery-planning-request-button-border-color: $tp-color-border !default;
-$tp-transaction-header-delivery-planning-request-button-border-radius: 10px !default;
+$tp-transaction-header-delivery-planning-request-button-border-radius: $tp-default-border-radius !default;
 $tp-transaction-header-delivery-planning-request-button-padding: 5px !default;
 $tp-transaction-header-delivery-definitive-button-color: $tp-color-active-light !default;
 $tp-transaction-header-delivery-delivery-method-font-size: $tp-font-size !default;
@@ -11,6 +11,6 @@ $tp-transaction-header-delivery-delivery-method-background-color: $tp-default-ba
 $tp-transaction-header-delivery-delivery-method-height: $tp-default-button-height !default;
 $tp-transaction-header-delivery-delivery-method-border: 1px solid !default;
 $tp-transaction-header-delivery-delivery-method-border-color: $tp-color-border !default;
-$tp-transaction-header-delivery-delivery-method-border-radius: 10px !default;
+$tp-transaction-header-delivery-delivery-method-border-radius: $tp-default-border-radius !default;
 $tp-transaction-header-delivery-delivery-truck-color: $tp-color-font !default;
 $tp-transaction-header-delivery-delivery-method-padding: 5px 10px !default;

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

@@ -20,6 +20,7 @@
         display: flex;
         column-gap: 10px;
         align-items: center;
+        justify-content: space-between;
         font-size: $tp-transaction-header-order-discount-font-size;
         border-style: $tp-transaction-header-order-discount-border-style;
         border-width: $tp-transaction-header-order-discount-border-width;

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

@@ -8,6 +8,6 @@ $tp-transaction-header-order-discount-height: $tp-default-button-height !default
 $tp-transaction-header-order-discount-border-style: solid !default;
 $tp-transaction-header-order-discount-border-width: 1px !default;
 $tp-transaction-header-order-discount-border-color: $tp-color-border !default;
-$tp-transaction-header-order-discount-border-radius: 10px !default;
+$tp-transaction-header-order-discount-border-radius: $tp-default-border-radius !default;
 $tp-transaction-header-order-discount-padding: 5px 10px !default;
 $tp-transaction-header-order-discount-icon-color: $tp-color-font !default;

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

@@ -10,9 +10,6 @@
       .header-block-balance {
         flex-basis: 50%;
       }
-      .payment-dialog-section {
-        height: 100px;
-      }
       .transaction-header-block-content {
         .transaction-header-block-content-first, .transaction-header-block-content-second {
           flex-basis: 50%;

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

@@ -4,7 +4,7 @@ $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;
 $tp-transaction-header-block-payment-balance-border-width: 1px !default;
-$tp-transaction-header-block-payment-balance-border-radius: 10px !default;
+$tp-transaction-header-block-payment-balance-border-radius: $tp-default-border-radius !default;
 $tp-transaction-header-block-payment-balance-paid-color: #FF4141 !default;
 $tp-transaction-header-block-payment-balance-paid-color-success: $tp-color-active-light !default;
 $tp-transaction-header-block-payment-balance-icon-size: 17px !default;

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

@@ -3,18 +3,23 @@ import { Icon } from "../../../enum/icon.enum";
 import { IconCacheService } from "../../../service/icon-cache.service";
 import { TransactionService } from "../../../service/transaction.service";
 import { PaymentService } from "../../../service/payment.service";
+import { DepositPaymentViewModel } from "../../../model/deposit-payment-view-model";
+import { PaymentViewmodel } from "../../../model/payment.viewmodel";
 export declare class TransactionHeaderPaymentComponent extends TransactionBaseComponent {
     iconService: IconCacheService;
     protected readonly transactionService: TransactionService;
     private _paymentService;
     readonly icons: typeof Icon;
     showClass(): boolean;
+    paymentMethods: PaymentViewmodel[];
+    depositPayments: DepositPaymentViewModel[];
     showDialog: boolean;
     showPaymentDialog: boolean;
+    showLoaderDepositPayments: boolean;
     paid: number;
     toPay: number;
     constructor(iconService: IconCacheService, transactionService: TransactionService, _paymentService: PaymentService);
     openPayment(event: MouseEvent): Promise<void>;
-    transactionSet(): void;
+    transactionSet(): Promise<void>;
     private _getDepositPaymentInfo;
 }

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

@@ -6,7 +6,6 @@ import { DialogService } from "../../../service/dialog.service";
 import { AddressType } from "@colijnit/relationapi/build/enum/address-type.enum";
 import { RelationService } from "../../../service/relation.service";
 import { FormMasterService } from "@colijnit/corecomponents_v12";
-import { Address } from "@colijnit/relationapi/build/model/address.bo";
 export declare class TransactionHeaderRelationComponent extends TransactionBaseComponent {
     protected readonly service: TransactionService;
     private _dictionary;
@@ -35,5 +34,4 @@ export declare class TransactionHeaderRelationComponent extends TransactionBaseC
     handleChangeCustomGroup(group: string): void;
     handleShowDialog(): Promise<void>;
     handleOkClick(): void;
-    saveAddress(type: AddressType, address: Address): void;
 }

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

@@ -24,5 +24,10 @@
     .hidden {
       visibility: hidden;
     }
+    .delete-icon {
+      cursor: pointer;
+      height: $tp-transaction-base-line-delete-icon-size;
+      width: $tp-transaction-base-line-delete-icon-size;
+    }
   }
 }

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

@@ -4,3 +4,4 @@ $tp-transaction-delivery-line-delivered-bold-color: #5fdcb3 !default;
 $tp-transaction-delivery-line-partially-delivered-primary-color: #feece3 !default;
 $tp-transaction-delivery-line-partially-delivered-secondary-color: #fde6db !default;
 $tp-transaction-delivery-line-partially-delivered-bold-color: #f8854c !default;
+$tp-transaction-base-line-delete-icon-size: 15px !default;

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

@@ -77,7 +77,7 @@
       align-items: center;
       justify-content: center;
       border: 1px solid $tp-transaction-line-border-color;
-      border-radius: 10px;
+      border-radius: $tp-default-border-radius;
       .co-input-text {
         width: 80%;
         height: 95%;

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

@@ -10,5 +10,15 @@
         margin-right: 15px;
       }
     }
+    .transaction-line-delivery-date {
+      display: flex;
+      align-items: center;
+      column-gap: $tp-default-column-gap;
+      height: $tp-default-button-height;
+      .co-input-date {
+        height: auto;
+        padding: 0;
+      }
+    }
   }
 }

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

@@ -3,7 +3,7 @@ $tp-transaction-line-action-buttons-padding: 0 !default;
 $tp-transaction-line-action-buttons-add-text-background-color: $tp-color-action !default;
 $tp-transaction-line-action-buttons-add-text-text-color: $tp-color-light !default;
 $tp-transaction-line-action-buttons-action-menu-button-size: 26px !default;
-$tp-transaction-line-action-buttons-action-menu-button-border-radius: 10px !default;
+$tp-transaction-line-action-buttons-action-menu-button-border-radius: $tp-default-border-radius !default;
 $tp-transaction-line-action-buttons-action-menu-button-icon-size: 18px !default;
 $tp-transaction-line-action-buttons-action-button-size: 30px !default;
 $tp-transaction-line-action-buttons-action-button-border-radius: 50% !default;

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

@@ -9,4 +9,5 @@ export declare class TransactionLineSupplierButtonComponent extends TransactionB
     constructor(transactionService: TransactionService, _relationService: RelationService);
     handleOpenDialog(event: MouseEvent): void;
     transactionLineSet(): Promise<void>;
+    private _getPurchaseAdviceLines;
 }

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

@@ -13,7 +13,7 @@
       top: $tp-transaction-line-side-panel-top;
       width: $tp-transaction-line-side-panel-width;
       height: $tp-transaction-line-side-panel-height;
-      z-index: 30;
+      z-index: 99999;
       box-shadow: $tp-transaction-line-side-panel-box-shadow;
       padding: $tp-transaction-line-side-panel-padding;
       background: white;

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

@@ -3,6 +3,7 @@
 @import "./theme";
 @import "../../transaction-line-side-panel-default/style/material";
 @import "../../transaction-line-side-panel-sales/style/material";
+@import "../../transaction-line-side-panel-article-details/style/material";
 @import "../../transaction-receiving-goods-history/style/material";
 @import "../../transaction-history-grid-status/style/material";
 @import "../../transaction-confirmation-history/style/material";

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

@@ -0,0 +1,161 @@
+@import "../../../style/mixin";
+
+@include export-module('cc-transaction-line-side-panel-article-details') {
+  .co-transaction-line-side-panel-article-details {
+    position: fixed;
+    width: 550px;
+    background: white;
+    right: 0;
+    top: 51px;
+    z-index: 99;
+    height: calc(100% - 51px);
+    border-left: 1px solid #F5F5FC;
+    padding: 20px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .transaction-line-side-panel-article-details-wrapper {
+
+      .transaction-line-side-panel-article-details-header {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+
+        .close-button {
+          position: absolute;
+          right: 2px;
+          top: 2px;
+          width: 30px;
+          height: 30px;
+          cursor: pointer;
+        }
+      }
+
+      .side-panel-header-label {
+        font-size: 10px;
+        color: #7d81a1;
+      }
+      .side-panel-header-field {
+        font-size: 12px;
+        overflow-x: clip;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .side-panel-header-divider {
+        display: flex;
+        border-style: solid;
+        border-width: 0 1px 0 0;
+        border-color: #dce4ea;
+        width: 1px;
+        margin: 5px;
+      }
+      .transaction-line-side-panel-article-details-header-item {
+        display: flex;
+        flex-direction: column;
+        row-gap: 5px;
+      }
+      .last-item-margin {
+        margin-right: 4%;
+      }
+      .center {
+        align-items: center;
+      }
+      .bold {
+        font-weight: bold;
+      }
+      .max-width-40 {
+        max-width: 40%;
+      }
+
+      .section-wrapper {
+        display: flex;
+        flex-direction: column;
+        margin: 12px 0;
+
+        .section-title {
+          font-size: 14px;
+          margin: 15px 0;
+          color: #7d81a1;
+        }
+      }
+
+      .purchase-advice-detail-header {
+        background: #F5F5FC;
+        padding: 22px;
+        display: flex;
+        border-radius: 11px;
+        width: 100%;
+        justify-content: space-between;
+      }
+
+      .detail-column-container {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: 1fr;
+        margin: 15px 0;
+
+        .detail-column {
+          max-width: 80%;
+        }
+
+        .column-input-item {
+          margin-top: 10px;
+        }
+
+        .detail-column-item {
+          margin: 10px 0;
+          display: flex;
+          flex-direction: column;
+          height: 30px;
+        }
+      }
+
+      .half-width {
+        width: 50%;
+      }
+
+      .dynamic-suppliers-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 10px;
+
+        .dynamic-supplier {
+          background: #F5F5FC;
+          border-radius: 11px;
+          min-height: 100px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          max-width: 175px;
+          margin: 0 10px 10px 0;
+          cursor: pointer;
+
+          .supplier-detail-container {
+            display: flex;
+            padding: 5px;
+            min-width: 180px;
+          }
+
+          .supplier-name {
+            font-size: 13px;
+            color: #3e7eff;
+            font-weight: bold;
+            padding: 0 10px;
+          }
+
+          .supplier-date {
+            padding: 5px 10px;
+          }
+        }
+      }
+
+      .selected {
+        background: #d8e5ff !important;
+      }
+
+      .supplier-list {
+        max-width: 250px;
+      }
+    }
+  }
+}

package/lib/component/transaction-line-side-panel-article-details/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../style/mixin";
+
+@include export-module('cc-transaction-line-side-panel-article-details-theme') {
+  .co-transaction-line-side-panel-article-details {
+  }
+}

package/lib/component/transaction-line-side-panel-article-details/style/material.scss

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