@colijnit/transaction 12.1.134 → 12.1.136

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

@@ -40,6 +40,7 @@
       justify-content: space-between;
       flex-basis: 1px;
       column-gap: $tp-transaction-header-block-content-column-gap;
+      align-items: center;
       .transaction-header-block-content-first {
         //min-width: 130px;
       }
@@ -49,6 +50,32 @@
       .transaction-header-block-content-third {
         //min-width: 130px;
       }
+      .transaction-header-block-content-hidden {
+        padding: $tp-transaction-header-block-icon-padding;
+      }
+      .transaction-header-block-row {
+        display: flex;
+        justify-content: space-between;
+        flex-basis: 1px;
+        column-gap: $tp-transaction-header-block-content-row-gap;
+        line-height: $tp-transaction-header-order-section-line-height;
+        align-items: center;
+
+      }
+      .transaction-header-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: $tp-transaction-header-block-icon-background-width;
+        height: $tp-transaction-header-block-icon-background-height;
+        background: $tp-default-background-accent;
+        border-radius: $tp-transaction-header-block-icon-background-radius;
+        cursor: pointer;
+        .co-icon {
+          width: $tp-transaction-header-block-icon-width;
+          height: $tp-transaction-header-block-icon-height;
+        }
+      }
     }
     .transaction-header-block-divider {
       height: 70%;

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

@@ -5,14 +5,15 @@ $tp-transaction-header-block-label-font-size: $tp-transaction-header-font-size !
 $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 !default;
-$tp-transaction-header-block-header-min-height: 45px !default;
+$tp-transaction-header-block-header-min-height: 0px !default;
 
 $tp-transaction-header-block-content-divider-background: $tp-color-border !default;
-$tp-transaction-header-block-content-column-gap: 20px !default;
+$tp-transaction-header-block-content-column-gap: 10px !default;
+$tp-transaction-header-block-content-row-gap: 10px !default;
 
 $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-padding: 4px 15px !default;
 $tp-transaction-header-block-border: none !default;
 $tp-transaction-header-block-border-radius: $tp-default-border-radius !default;
 $tp-transaction-header-block-border-color: $tp-color-border !default;
@@ -20,3 +21,11 @@ $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;
+
+$tp-transaction-header-block-icon-width: 20px !default;
+$tp-transaction-header-block-icon-height: 20px !default;
+$tp-transaction-header-block-icon-background-radius: 100% !default;
+$tp-transaction-header-block-icon-background-width: 38px !default;
+$tp-transaction-header-block-icon-background-height: 38px !default;
+$tp-transaction-header-block-icon-padding: 5px 0 0 38px !default;
+$tp-transaction-header-order-section-line-height: 16px !default;

package/lib/component/core/base/components/transaction-header-block/transaction-header-block.component.d.ts

@@ -4,6 +4,7 @@ export declare class TransactionHeaderBlockComponent {
     firstBlockTemplate: TemplateRef<any>;
     secondBlockTemplate: TemplateRef<any>;
     thirdBlockTemplate: TemplateRef<any>;
+    hiddenBlockTemplate: TemplateRef<any>;
     headerClick: EventEmitter<MouseEvent>;
     showClass(): boolean;
     handleHostClick(event: MouseEvent): void;

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

@@ -13,8 +13,8 @@ import { TransactionLineSidePanelComponent } from '../transaction-line-side-pane
 import { RelationAnyType } from '../../model/relation-any-type';
 import { TransactionEventService } from '../../service/transaction-event.service';
 import { TransactionKind } from '@colijnit/transactionapi/build/enum/transaction-kind.enum';
-import { TransactionScreenConfigurationService } from "../../service/transaction-screen-configuration.service";
-import { DialogService } from "../../service/dialog.service";
+import { TransactionScreenConfigurationService } from '../../service/transaction-screen-configuration.service';
+import { DialogService } from '../../service/dialog.service';
 export declare class TransactionComponent implements OnDestroy {
     iconCacheService: IconCacheService;
     service: TransactionService;
@@ -46,6 +46,7 @@ export declare class TransactionComponent implements OnDestroy {
     showArticleTextOverview: boolean;
     showTransactionText: boolean;
     showArticleText: boolean;
+    loaded: boolean;
     textToEdit: string;
     historicTransactionLines: TransactionLineInfo[] | null;
     private _subs;

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

@@ -1,6 +1,6 @@
 $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-max-width: 80px !default;
+$tp-co-transaction-button-bar-button-max-width: 70px !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: $tp-default-border-radius !default;

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

@@ -0,0 +1,59 @@
+@include export-module('co-transaction-document-button-bar-layout') {
+  .co-transaction-document-button-bar {
+    font-family: $tp-co-transaction-document-button-bar-font-family;
+    font-size: $tp-co-transaction-document-button-bar-font-size;
+    .button-bar-wrapper {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+    }
+
+    .co-transaction-document-button {
+      .co-transaction-document-button-icon {
+        height: $tp-co-transaction-button-bar-icon-size;
+        width: $tp-co-transaction-button-bar-icon-size;
+        margin: $tp-co-transaction-button-bar-icon-margin;
+        svg {
+          height: 100%;
+          width: 100%;
+        }
+      }
+    }
+    .button-wrapper {
+      //height: $tp-co-transaction-button-bar-button-size;
+      //min-width: $tp-co-transaction-button-bar-button-size;
+      background: $tp-co-transaction-document-button-background-color;
+      border-radius: $tp-co-transaction-document-button-border-radius;
+      padding: $tp-co-transaction-document-button-padding;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      .button-title {
+        font-size: $tp-co-transaction-document-button-label-font-size;
+        //padding: 0 7px 4px 7px;
+      }
+      .co-transaction-document-button-icon {
+        height: $tp-co-transaction-document-button-icon-size;
+        width: $tp-co-transaction-document-button-icon-size;
+        margin: $tp-co-transaction-document-button-icon-margin;
+        svg {
+          height: 100%;
+          width: 100%;
+        }
+      }
+    }
+    /*.co-transaction-sales-purchase-button-bar-button,
+    .co-transaction-purchase-receive-goods-button-bar-button,
+    .co-transaction-sales-allocation-button-bar-button,
+    .co-transaction-purchase-confirmation-button-bar-button,
+    .co-transaction-purchase-invoice-button-bar-button,
+    .co-transaction-sales-invoice-button-bar-button,
+    .co-transaction-sales-delivery-button-bar-button {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }*/
+  }
+}

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

@@ -0,0 +1,9 @@
+$tp-co-transaction-document-button-bar-font-family: $tp-font-family !default;
+$tp-co-transaction-document-button-bar-font-size: $tp-font-size !default;
+//$tp-co-transaction-button-bar-button-size: 65px !default;
+$tp-co-transaction-document-button-background-color: white !default;
+$tp-co-transaction-document-button-border-radius: $tp-default-border-radius !default;
+$tp-co-transaction-document-button-padding: 5px !default;
+$tp-co-transaction-document-button-icon-size: 60px !default;
+$tp-co-transaction-document-button-icon-margin: 0 0 5px 0 !default;
+$tp-co-transaction-document-button-label-font-size: $tp-font-size-small !default;

package/lib/component/transaction-document-button/style/_theme.scss

@@ -0,0 +1,5 @@
+@include export-module('co-transaction-document-button-bar-theme') {
+  .co-transaction-document-button-bar {
+
+  }
+}

package/lib/component/transaction-document-button/style/material.scss

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

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

@@ -11,7 +11,7 @@
       padding: $tp-co-transaction-header-padding;
       border: $tp-co-transaction-header-border;
       border-width: $tp-co-transaction-header-border-width;
-
+      margin: $tp-co-transaction-header-margin;
       .collapse-handle {
         display: flex;
         align-items: center;

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

@@ -4,5 +4,5 @@ $tp-co-transaction-header-background-color: white !default;
 $tp-co-transaction-header-color: $tp-color-dark !default;
 $tp-co-transaction-header-padding: 25px !default;
 $tp-co-transaction-header-border: 1px solid !default;
-$tp-co-transaction-header-border-width: 0 0 1px 0 !default;
+$tp-co-transaction-header-border-width: 0 0 2px 0 !default;
 $tp-co-transaction-header-border-color: $tp-color-border !default;

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

@@ -9,11 +9,13 @@
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
+      position: relative;
       padding: $tp-co-transaction-header-padding;
       border: $tp-co-transaction-header-border;
       border-width: $tp-co-transaction-header-border-width;
       column-gap: $tp-co-transaction-header-gap;
       row-gap: $tp-co-transaction-header-gap;
+      margin: $tp-co-transaction-header-margin;
       .co-carousel {
         width: 100%;
         .carousel-wrapper {
@@ -25,13 +27,45 @@
               }
             }
           }
+          > * {
+            height: $tp-co-transaction-header-not-expanded-height;
+          }
+        }
+      }
+      &.expanded {
+        .co-carousel {
+          .carousel-wrapper {
+            > * {
+              height: $tp-co-transaction-header-expanded-height;
+            }
+          }
+        }
+        .expand-transaction-header {
+          .expand-header-icon {
+            transform: rotate(180deg);
+          }
         }
       }
       .transaction-header-divider {
         height: auto;
-        width: 1px;
+        width: $tp-co-transaction-header-divider-width;
         margin: $tp-co-transaction-header-divider-margin;
       }
     }
+    .expand-transaction-header {
+      width: $tp-co-transaction-header-expand-button-size;
+      height: $tp-co-transaction-header-expand-button-size;
+      background: $tp-co-transaction-header-expand-button-background;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: $tp-co-transaction-header-expand-button-bottom;
+      border-radius: $tp-co-transaction-header-expand-button-border-radius;
+      cursor: pointer;
+      .expand-header-icon {
+        width: $tp-co-transaction-header-expand-button-icon-size;
+        height: $tp-co-transaction-header-expand-button-icon-size;
+      }
+    }
   }
 }

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

@@ -3,9 +3,18 @@ $tp-co-transaction-header-font-size: $tp-font-size !default;
 $tp-co-transaction-header-font-color: $tp-color-font !default;
 $tp-co-transaction-header-background-color: white !default;
 $tp-co-transaction-header-padding: 0 !default;
-$tp-co-transaction-header-border: none !default;
-$tp-co-transaction-header-border-width: 0 0 1px 0 !default;
+$tp-co-transaction-header-margin: 0 0 30px 0 !default;
+$tp-co-transaction-header-border: solid !default;
+$tp-co-transaction-header-border-width: 0 0 2px 0 !default;
 $tp-co-transaction-header-border-color: $tp-color-border !default;
 $tp-co-transaction-header-gap: 20px !default;
 $tp-co-transaction-header-divider-margin: 25px 0px !default;
+$tp-co-transaction-header-divider-width: 0 !default;
+$tp-co-transaction-header-not-expanded-height: 45px !default;
+$tp-co-transaction-header-expanded-height: 100% !default;
+$tp-co-transaction-header-expand-button-size: 20px !default;
+$tp-co-transaction-header-expand-button-background: $tp-color-light-accent !default;
+$tp-co-transaction-header-expand-button-bottom: -10px !default;
+$tp-co-transaction-header-expand-button-border-radius: 100% !default;
+$tp-co-transaction-header-expand-button-icon-size: 20px !default;
 

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

@@ -1,12 +1,17 @@
 import { Icon } from '../../../enum/icon.enum';
 import { TransactionInfoResponse } from '@colijnit/transactionapi/build/model/transaction-info-response.bo';
 import { RelationAnyType } from '../../../model/relation-any-type';
+import { IconCacheService } from "../../../service/icon-cache.service";
 export declare class TransactionHeaderComponent {
+    iconCacheService: IconCacheService;
     readonly icons: typeof Icon;
+    toggleHeader: boolean;
     relation: RelationAnyType;
     set transaction(value: TransactionInfoResponse);
     get transaction(): TransactionInfoResponse;
     showClass(): boolean;
     isPurchaseOrder: boolean;
     private _transaction;
+    constructor(iconCacheService: IconCacheService);
+    expandHeader(): void;
 }

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

@@ -10,14 +10,35 @@
     .co-transaction-header-block.in-dialog {
       padding: 4px 0;
     }
-    .transaction-header-block-header {
-      co-icon {
-        position: relative;
-        height: $tp-transaction-header-delivery-button-width;
-        width: $tp-transaction-header-delivery-button-width;
-        &.planning-request-button {
-          height: $tp-transaction-header-delivery-planning-request-button-size;
-          width: $tp-transaction-header-delivery-planning-request-button-size;
+    .planning-request-button-wrapper {
+      position: relative;
+      height: $tp-transaction-header-delivery-planning-request-button-size;
+      width: $tp-transaction-header-delivery-planning-request-button-size;
+      padding: 0;
+      background: $tp-transaction-header-delivery-planning-request-button-background;
+      border-style: $tp-transaction-header-delivery-planning-request-button-border-style;
+      border-width: $tp-transaction-header-delivery-planning-request-button-border-width;
+      border-color: $tp-transaction-header-delivery-planning-request-button-border-color;
+      border-radius: $tp-transaction-header-delivery-planning-request-button-border-radius;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      .planning-request-button {
+        height: $tp-transaction-header-delivery-planning-request-button-icon-size;
+        width: $tp-transaction-header-delivery-planning-request-button-icon-size;
+        &:after {
+          content: "";
+          transform: scaleX(-1) rotate(135deg);
+          height: $tp-transaction-header-delivery-planning-request-button-check-height;
+          width: $tp-transaction-header-delivery-planning-request-button-check-width;
+          border-style: solid;
+          border-width: $tp-transaction-header-delivery-planning-request-button-check-border-size;
+          border-color: $tp-transaction-header-delivery-planning-request-button-check-border-color;
+          right: $tp-transaction-header-delivery-planning-request-button-check-border-right;
+          top: $tp-transaction-header-delivery-planning-request-button-check-border-top;
+          position: absolute;
+          opacity: 1;
         }
       }
     }
@@ -31,8 +52,33 @@
     }
     .header-delivery-deliverydate {
       .co-input-date {
-        height: auto;
+        height: $tp-transaction-header-delivery-date-input-field-height;
         padding: 0;
+        .co-input-text {
+          max-height: $tp-transaction-header-delivery-date-input-field-height;
+          background: transparent;
+          &:after, &:before, .left-icon, .input-text-left-icon, .input-text-clear-button, .right-icon {
+            display: none;
+          }
+          .input-wrapper {
+            pointer-events: none;
+          }
+          input {
+            padding: $tp-transaction-header-delivery-date-input-field-padding;
+            max-width: $tp-transaction-header-delivery-date-input-field-width;
+            line-height: $tp-transaction-header-delivery-date-input-field-line-height;
+          }
+          .input-text-right-icon {
+            padding: $tp-transaction-header-delivery-date-input-right-icon-padding;
+            margin: $tp-transaction-header-delivery-date-input-right-icon-margin;
+            position: relative;
+            bottom: $tp-transaction-header-delivery-date-input-right-icon-bottom;
+            svg {
+              width: $tp-transaction-header-delivery-date-input-right-icon-width;
+              height: $tp-transaction-header-delivery-date-input-right-icon-width;
+            }
+          }
+        }
       }
     }
     .transaction-header-block-content-third {
@@ -42,8 +88,8 @@
     }
     .transaction-header-partial-delivery {
       .co-input-checkbox {
-        font-size: $tp-font-size-small;
-        flex-direction: column-reverse;
+        font-size: $tp-font-size;
+        margin: $tp-transaction-header-partial-delivery-margin;
       }
     }
     .co-transaction-header-delivery-wrapper {

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

@@ -1,16 +1,36 @@
 $tp-transaction-header-delivery-button-width: 17px !default;
 $tp-transaction-header-delivery-planning-request-button-size: $tp-default-button-height !default;
+$tp-transaction-header-delivery-planning-request-button-icon-size: 16px;
 $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-width: 1px !default;
+$tp-transaction-header-delivery-planning-request-button-border-style: solid !default;
 $tp-transaction-header-delivery-planning-request-button-border-color: $tp-color-border !default;
 $tp-transaction-header-delivery-planning-request-button-border-radius: $tp-default-border-radius !default;
+$tp-transaction-header-delivery-planning-request-button-background: #fff !default;
 $tp-transaction-header-delivery-planning-request-button-padding: 5px !default;
+$tp-transaction-header-delivery-planning-request-button-check-height: 8px !default;
+$tp-transaction-header-delivery-planning-request-button-check-width: 4px !default;
+$tp-transaction-header-delivery-planning-request-button-check-border-size: 3px 3px 0 0 !default;
+$tp-transaction-header-delivery-planning-request-button-check-border-color: $tp-color-active-light !default;
+$tp-transaction-header-delivery-planning-request-button-check-border-right: 4px !default;
+$tp-transaction-header-delivery-planning-request-button-check-border-top: 1px !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;
-$tp-transaction-header-delivery-delivery-method-background-color: $tp-default-background-accent !default;
-$tp-transaction-header-delivery-delivery-method-height: $tp-default-button-height !default;
+$tp-transaction-header-delivery-delivery-method-background-color: $tp-default-background !default;
+$tp-transaction-header-delivery-delivery-method-height: 30px !default;
+$tp-transaction-header-delivery-delivery-method-min-width: 130px !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: $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;
+$tp-transaction-header-partial-delivery-margin: 0 0 0 10px !default;
+$tp-transaction-header-delivery-date-input-field-height: 16px !default;
+$tp-transaction-header-delivery-date-input-field-padding: 0px !default;
+$tp-transaction-header-delivery-date-input-field-line-height: 12px !default;
+$tp-transaction-header-delivery-date-input-field-width: 75px !default;
+$tp-transaction-header-delivery-date-input-right-icon-width: 16px !default;
+$tp-transaction-header-delivery-date-input-right-icon-padding: 0 !default;
+$tp-transaction-header-delivery-date-input-right-icon-bottom: 2px !default;
+$tp-transaction-header-delivery-date-input-right-icon-margin: 0 0 0 5px !default;

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

@@ -16,8 +16,12 @@
       }
     }
     .header-delivery-method {
-      background-color: $tp-transaction-header-delivery-delivery-method-background-color;
-      border-color: $tp-transaction-header-delivery-delivery-method-border-color;
+      .co-transaction-button {
+        background-color: $tp-transaction-header-delivery-delivery-method-background-color;
+        border-color: $tp-transaction-header-delivery-delivery-method-border-color;
+        height: $tp-transaction-header-delivery-delivery-method-height;
+        min-width: $tp-transaction-header-delivery-delivery-method-min-width;
+      }
     }
     .header-delivery-truck-icon {
       svg { // for fontawesome icons

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

@@ -21,7 +21,11 @@
         width: $tp-transaction-header-order-icon-size;
       }
     }
-
+    .header-order-total-wrapper {
+      .header-order-total {
+        font-weight: $tp-transaction-header-order-section-total-font-weight;
+      }
+    }
     .transaction-header-discount-button {
       cursor: pointer;
       width: $tp-transaction-header-order-discount-width;
@@ -37,9 +41,12 @@
         border-radius: $tp-transaction-header-order-discount-border-radius;
         padding: $tp-transaction-header-order-discount-padding;
         height: 100%;
+        .header-discount-icon {
+          width: $tp-transaction-header-order-discount-icon-size;
+          height: $tp-transaction-header-order-discount-icon-size;
+        }
       }
     }
-
     .transaction-header-block-content-third {
       display: flex;
       flex-direction: column;
@@ -48,11 +55,10 @@
 
     .transaction-header-order-definitive {
       .co-input-checkbox {
-        font-size: $tp-font-size-small;
-        flex-direction: column-reverse;
+        font-size: $tp-font-size;
+        margin: $tp-transaction-header-order-definitive-margin;
       }
     }
-
     .transaction-line-button {
       flex-direction: column;
       height: 100%;

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

@@ -1,9 +1,11 @@
 $tp-transaction-header-block-order-discount-padding: 0 30px !default;
+$tp-transaction-header-order-definitive-margin: 0 0 0 10px !default;
 $tp-transaction-header-order-icon-size: 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-font-weight: 600 !default;
+$tp-transaction-header-order-discount-font-color: $tp-color-discount-value !default;
+$tp-transaction-header-order-discount-background-color: $tp-default-background !default;
+$tp-transaction-header-order-discount-width: 100% !default;
 $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;
@@ -11,10 +13,12 @@ $tp-transaction-header-order-discount-border-color: $tp-color-border !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;
+$tp-transaction-header-order-discount-icon-size: 16px !default;
 $tp-transaction-header-order-default-row-gap: $tp-default-row-gap !default;
 $tp-transaction-header-order-default-column-gap: $tp-default-column-gap !default;
 $tp-transaction-header-order-section-label-font-family: $tp-font-family !default;
 $tp-transaction-header-order-section-label-font-size: $tp-font-size !default;
 $tp-transaction-header-order-section-label-font-weight: bold !default;
 $tp-transaction-header-order-section-label-margin: 0 0 10px 0 !default;
-
+$tp-transaction-header-order-section-total-font-weight: bold !default;
+$tp-transaction-header-order-section-total-font-line-height: 12px !default;

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

@@ -6,6 +6,7 @@
       color: $tp-transaction-header-order-discount-font-color;
       background-color: $tp-transaction-header-order-discount-background-color;
       border-color: $tp-transaction-header-order-discount-border-color;
+      font-weight: $tp-transaction-header-order-discount-font-weight;
       .header-order-discount-icon {
         svg { // for fontawesome icons
           fill: $tp-transaction-header-order-discount-icon-color;

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

@@ -31,5 +31,51 @@
         min-width: 500px;
       }
     }
+    .header-downpayment-percentage-wrapper {
+      border-style: solid;
+      border-width: $tp-co-transaction-header-downpayment-border-width;
+      border-radius: $tp-co-transaction-header-downpayment-border-radius;
+      padding: $tp-co-transaction-header-downpayment-percentage-padding;
+      height: 100%;
+      background-color: $tp-co-transaction-header-downpayment-percentage-wrapper-background;
+      border-color: $tp-co-transaction-header-downpayment-border-color;
+      min-width: $tp-co-transaction-header-downpayment-percentage-wrapper-width;
+      .transaction-header-deposit {
+        span {
+          font-weight: $tp-co-transaction-header-downpayment-amount-weight;
+        }
+      }
+    }
+    .header-downpayment-amount-wrapper {
+      .transaction-header-deposit {
+        span {
+          font-weight: $tp-co-transaction-header-downpayment-amount-weight;
+        }
+      }
+    }
+    .header-payment-button-wrapper {
+      display: flex;
+      align-items: center;
+      gap: $tp-co-transaction-header-payment-button-wrapper-gap;
+      justify-content: space-between;
+      border-style: solid;
+      border-width: $tp-co-transaction-header-payment-button-wrapper-border-width;
+      border-radius: $tp-co-transaction-header-payment-button-wrapper-border-radius;
+      padding: $tp-co-transaction-header-payment-button-wrapper-padding;
+      border-color: $tp-co-transaction-header-payment-button-wrapper-border-color;
+      background: $tp-co-transaction-header-payment-button-wrapper-background;
+      cursor: pointer;
+      height: $tp-co-transaction-header-payment-button-wrapper-height;
+      .header-order-icon {
+        width: $tp-co-transaction-header-payment-button-wrapper-icon-size;
+        height: $tp-co-transaction-header-payment-button-wrapper-icon-size;
+      }
+      .payment-paid {
+        &.success {
+          color: $tp-color-payed-value;
+          font-weight: 600;
+        }
+      }
+    }
   }
 }

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

@@ -0,0 +1,17 @@
+$tp-co-transaction-header-downpayment-border-width: 1px !default;
+$tp-co-transaction-header-downpayment-border-radius: 5px !default;
+$tp-co-transaction-header-downpayment-border-color: $tp-color-light-accent !default;
+$tp-co-transaction-header-downpayment-percentage-padding: 2px 10px !default;
+$tp-co-transaction-header-downpayment-percentage-wrapper-background: $tp-color-light !default;
+$tp-co-transaction-header-downpayment-percentage-wrapper-width: 100px !default;
+$tp-co-transaction-header-downpayment-amount-weight: bold !default;
+
+$tp-co-transaction-header-payment-button-wrapper-gap: 10px !default;
+$tp-co-transaction-header-payment-button-wrapper-padding: 5px 10px !default;
+$tp-co-transaction-header-payment-button-wrapper-height: 30px !default;
+$tp-co-transaction-header-payment-button-wrapper-border-width: 1px !default;
+$tp-co-transaction-header-payment-button-wrapper-border-color: $tp-color-light-accent !default;
+$tp-co-transaction-header-payment-button-wrapper-border-radius: 5px !default;
+$tp-co-transaction-header-payment-button-wrapper-background: $tp-color-light !default;
+$tp-co-transaction-header-payment-button-wrapper-icon-size: 16px !default;
+

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

@@ -50,3 +50,18 @@ $tp-transaction-header-popup-business-rule-applied-icon-size: 20px !default;
 $tp-transaction-header-popup-business-rule-applied-icon-color: red !default;
 $tp-transaction-header-popup-business-rule-applied-font-size: $tp-font-size !default;
 $tp-transaction-header-popup-business-rule-applied-font-weight: normal !default;
+
+$tp-co-transaction-header-relation-content-gap: 10px !default;
+$tp-co-transaction-header-relation-content-padding: 0 0 0 48px !default;
+$tp-co-transaction-header-relation-content-icon-left: 0 !default;
+$tp-co-transaction-header-relation-content-icon-top: 0 !default;
+$tp-co-transaction-header-relation-content-icon-avatar-size: 38px !default;
+$tp-co-transaction-header-relation-content-icon-avatar-background: $tp-default-background-accent !default;
+$tp-co-transaction-header-relation-content-icon-avatar-text-color: $tp-color-font !default;
+$tp-co-transaction-header-relation-content-line-height: 16px !default;
+$tp-co-transaction-header-relation-content-margin: 4px 0 0 0 !default;
+$tp-co-transaction-header-relation-label-margin: 4px 0 0 0 !default;
+$tp-co-transaction-header-relation-content-max-width: 120px !default;
+$tp-co-transaction-header-relation-content-name-margin: 0 0 10px 0 !default;
+$tp-co-transaction-header-relation-content-email-margin: 0 0 10px 0 !default;
+