@colijnit/transaction 12.1.13 → 12.1.16

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

@@ -1,11 +1,11 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";
-@import "../../transaction-header/style/material";
+@import "../../transaction-header/transaction-header/style/material";
 @import "../../transaction-lines/style/material";
-@import "../../transaction-lines-grid/style/material";
+@import "../../transaction-grid/transaction-lines-grid/style/material";
 @import "../../transaction-totals/style/material";
-@import "../../transaction-commit-bar/style/material";
-@import "../../transaction-nav-bar/style/material";
+@import "../../transaction-quick-access/transaction-quick-access/style/material";
+@import "../../transaction-button-bar/style/material";
 @import "../../transaction-line-side-panel/style/material";
+@import "../../view-mode-buttons/style/material";

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

@@ -5,35 +5,35 @@ 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";
 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;
     showClass(): boolean;
     activeViewMode: ContentViewMode;
-    activeTabCategory: TabCategory;
+    activeCategory: TransactionTypeCategory;
     showDiscountsSidebar: boolean;
     showSidePanel: boolean;
     sidePanelTransactionLine: TransactionLineInfo;
     private _subs;
     private _transaction;
+    private _transactionId;
     constructor(iconCacheService: IconCacheService, _service: TransactionService);
     ngOnDestroy(): void;
     addDiscount(): void;
     saveTransactionLine(transactionAddTextLineRequest: TransactionAddTextLineRequest): void;
-    handleNavigationTabClicked(tab: TabCategory): void;
-    handleShowSidePanel(event: {
-        show: boolean;
-        line: TransactionLineInfo;
-    }): void;
+    handleButtonBarButtonClicked(button: TransactionBarButton): void;
+    handleShowSidePanel(line: TransactionLineInfo): void;
     handleCloseSidePanel(event: MouseEvent): void;
-    openSidePanel(): void;
 }

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

@@ -0,0 +1,50 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-button-bar-layout') {
+  .co-transaction-button-bar {
+    font-family: $tp-co-transaction-button-bar-font-family;
+    font-size: $tp-co-transaction-button-bar-font-size;
+    .button-bar-wrapper {
+      display: flex;
+      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;
+      background: $tp-co-transaction-button-bar-button-background-color;
+      border-radius: $tp-co-transaction-button-bar-button-border-radius;
+      padding: $tp-co-transaction-button-bar-button-padding;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      .button-title {
+        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;
+        width: $tp-co-transaction-button-bar-icon-size;
+        margin: $tp-co-transaction-button-bar-icon-margin;
+        svg {
+          height: 100%;
+          width: 100%;
+        }
+      }
+    }
+    .selected {
+      .button-wrapper {
+        //box-shadow: $tp-co-transaction-button-bar-button-selected-box-shadow;
+        border: $tp-co-transaction-button-bar-button-selected-box-border;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+$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-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: 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-button-bar/style/_theme.scss

@@ -0,0 +1,14 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-button-bar-theme') {
+  .co-transaction-button-bar {
+    .co-transaction-button-bar-icon {
+      svg { // for fontawesome icons
+        fill: $tp-co-transaction-button-bar-icon-color;
+      }
+      & [fill] { // for own icons
+        fill: $tp-co-transaction-button-bar-icon-color;
+      }
+    }
+  }
+}

package/lib/component/{order-grid → transaction-button-bar}/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

package/lib/component/transaction-button-bar/transaction-button-bar-button/transaction-button-bar-button.component.d.ts

@@ -0,0 +1,9 @@
+import { Icon } from "../../../enum/icon.enum";
+import { IconCacheService } from "../../../service/icon-cache.service";
+export declare class TransactionButtonBarButtonComponent {
+    iconCacheService: IconCacheService;
+    title: string;
+    iconName: Icon;
+    showClass: boolean;
+    constructor(iconCacheService: IconCacheService);
+}

package/lib/component/transaction-button-bar/transaction-button-bar.component.d.ts

@@ -0,0 +1,17 @@
+import { EventEmitter } from "@angular/core";
+import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
+import { TransactionBarButton } from "../../model/transaction-bar-button";
+import { TransactionMappingService } from "../../service/transaction-mapping.service";
+import { TransactionTypeCategory } from "../../enum/transaction-type-category.enum";
+export declare class TransactionButtonBarComponent {
+    private _mappingService;
+    set transactionType(value: TransactionKind);
+    get transactionType(): TransactionKind;
+    selectedCategory: TransactionTypeCategory;
+    buttonClicked: EventEmitter<TransactionBarButton>;
+    showClass(): boolean;
+    buttons: TransactionBarButton[];
+    private _transactionType;
+    constructor(_mappingService: TransactionMappingService);
+    selectCategory(idx: number): void;
+}

package/lib/component/transaction-button-bar/transaction-button-bar.module.d.ts

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

package/lib/component/transaction-confirmation-history/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

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

@@ -0,0 +1,33 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-base-grid-layout') {
+  .co-transaction-base-grid {
+    font-family: $tp-co-transaction-grid-font-family;
+    font-size: $tp-co-transaction-grid-font-size;
+  }
+  .co-transaction-grid-location-icon-wrapper {
+    display: flex;
+    align-items: center;
+  }
+  .co-transaction-grid-menu-icon {
+    //text-align: center;
+    width: 30px;
+    height: 30px;
+  }
+  .co-transaction-grid-sidepanel-icon {
+    width: 40px;
+    height: 40px;
+  }
+  .transaction-grid-article-image {
+    width: $tp-co-transaction-grid-article-image-width;
+  }
+  .transaction-grid-article-description {
+    font-size: $tp-co-transaction-grid-article-description-font-size;
+    font-weight: $tp-co-transaction-grid-article-description-font-weight;
+    margin-bottom: $tp-co-transaction-grid-article-description-margin-bottom;
+  }
+  .transaction-grid-header-icon {
+    height: $tp-co-transaction-grid-header-icon-size;
+    width: $tp-co-transaction-grid-header-icon-size;
+  }
+}

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

@@ -0,0 +1,8 @@
+$tp-co-transaction-grid-font-family: $tp-font-family !default;
+$tp-co-transaction-grid-font-size: $tp-font-size !default;
+$tp-co-transaction-grid-article-image-width: 80px !default;
+$tp-co-transaction-grid-header-icon-size: 20px !default;
+
+$tp-co-transaction-grid-article-description-font-size: $tp-transaction-header-font-size !default;
+$tp-co-transaction-grid-article-description-font-weight: bold !default;
+$tp-co-transaction-grid-article-description-margin-bottom: 10px !default;

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

@@ -0,0 +1,12 @@
+@import "../../../../style/mixin";
+
+@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/{seller-information → transaction-grid/transaction-base-grid}/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

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

@@ -0,0 +1,8 @@
+import { TransactionGridBaseComponent } from "../../core/base/transaction-grid-base.component";
+import { ColumnAlign } from "@colijnit/corecomponents_v12";
+import { Icon } from "../../../enum/icon.enum";
+export declare class TransactionBaseGridComponent extends TransactionGridBaseComponent {
+    readonly align: typeof ColumnAlign;
+    readonly icon: typeof Icon;
+    showClass: boolean;
+}

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

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

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

@@ -0,0 +1,6 @@
+@import "../../../../style/mixin";
+
+@include export-module('cc-transaction-grid-layout') {
+  .co-transaction-grid {
+  }
+}

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

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

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

@@ -0,0 +1,5 @@
+@import "../../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";
+@import "../../transaction-base-grid/style/material";

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

@@ -0,0 +1,26 @@
+import { ApplicationRef, ComponentFactoryResolver, EventEmitter, Injector } from "@angular/core";
+import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
+import { TransactionTypeCategory } from "../../../enum/transaction-type-category.enum";
+import { TransactionMappingService } from "../../../service/transaction-mapping.service";
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+export declare class TransactionGridComponent {
+    private _mappingService;
+    private _compFactoryResolver;
+    private appRef;
+    private injector;
+    set container(content: any);
+    set transactionType(value: TransactionKind);
+    get transactionType(): TransactionKind;
+    set activeCategory(value: TransactionTypeCategory);
+    get activeCategory(): TransactionTypeCategory;
+    transactionId: number;
+    transactionLines: TransactionLineInfo[];
+    sidePanelClicked: EventEmitter<TransactionLineInfo>;
+    showClass(): boolean;
+    private _transactionGridContainer;
+    private _transactionType;
+    private _activeCategory;
+    private _componentRef;
+    constructor(_mappingService: TransactionMappingService, _compFactoryResolver: ComponentFactoryResolver, appRef: ApplicationRef, injector: Injector);
+    private _prepareContent;
+}

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

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

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

@@ -0,0 +1,15 @@
+@import "../../../../style/mixin";
+
+@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-history-grid → transaction-grid/transaction-history-grid}/style/_theme.scss

@@ -1,4 +1,4 @@
-@import "../../../style/mixin";
+@import "../../../../style/mixin";
 
 @include export-module('co-transaction-history-grid-theme') {
   .co-transaction-history-grid {

package/lib/component/{transaction-commit-bar → transaction-grid/transaction-history-grid}/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

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

@@ -0,0 +1,19 @@
+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 {
+    iconsService: IconCacheService;
+    readonly statusType: typeof StatusType;
+    readonly icons: typeof Icon;
+    set content(columnComponents: QueryList<SimpleGridColumnDirective>);
+    collection: any;
+    deleteSelectedRow: EventEmitter<any>;
+    showClass(): boolean;
+    extraColumns: SimpleGridColumnDirective[];
+    selectedRow: any;
+    constructor(iconsService: IconCacheService);
+    handleSelectRow(row: any): void;
+    handleDeleteClick(): void;
+}

package/lib/component/{transaction-lines-grid → transaction-grid/transaction-lines-grid}/style/_layout.scss

@@ -1,4 +1,4 @@
-@import "../../../style/mixin";
+@import "../../../../style/mixin";
 
 @include export-module('co-transaction-lines-grid-layout') {
   .co-transaction-lines-grid {
@@ -33,5 +33,9 @@
       border: $tp-transaction-lines-grid-data-border;
       border-width: $tp-transaction-lines-grid-data-border-width;
     }
+    .transaction-lines-grid-line-label {
+      font-size: $tp-transaction-lines-grid-line-label-font-size;
+      font-weight: $tp-transaction-lines-grid-line-label-font-weight;
+    }
   }
 }

package/lib/component/{transaction-lines-grid → transaction-grid/transaction-lines-grid}/style/_material-definition.scss

@@ -17,3 +17,6 @@ $tp-transaction-lines-grid-data-height: 40px !default;
 $tp-transaction-lines-grid-data-border: solid !default;
 $tp-transaction-lines-grid-data-border-width: 0 0 1px 0 !default;
 $tp-transaction-lines-grid-data-border-color: $tp-color-border !default;
+
+$tp-transaction-lines-grid-line-label-font-size: $tp-font-size !default;
+$tp-transaction-lines-grid-line-label-font-weight: bold !default;

package/lib/component/{transaction-lines-grid → transaction-grid/transaction-lines-grid}/style/_theme.scss

@@ -1,4 +1,4 @@
-@import "../../../style/mixin";
+@import "../../../../style/mixin";
 
 @include export-module('co-transaction-lines-grid-theme') {
   .co-transaction-lines-grid {

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

@@ -0,0 +1,4 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../../../component/transaction-line-grid/style/material";

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

@@ -0,0 +1,11 @@
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { TransactionService } from "../../../service/transaction.service";
+import { TransactionGridBaseComponent } from "../../core/base/transaction-grid-base.component";
+import { TransactionImageService } from "../../../service/transaction-image.service";
+export declare class TransactionLinesGridComponent extends TransactionGridBaseComponent {
+    protected imageService: TransactionImageService;
+    private _service;
+    showClass(): boolean;
+    constructor(imageService: TransactionImageService, _service: TransactionService);
+    changeLineAmount(row: TransactionLineInfo, amount: number): void;
+}

package/lib/component/transaction-grid/transaction-order-confirmation-grid/style/_layout.scss

@@ -0,0 +1,7 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-order-confirmation-grid-layout') {
+  .co-transaction-order-confirmation-grid {
+
+  }
+}

package/lib/component/transaction-grid/transaction-order-confirmation-grid/style/_theme.scss

@@ -0,0 +1,7 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-order-confirmation-grid-theme') {
+  .co-transaction-order-confirmation-grid {
+
+  }
+}

package/lib/component/transaction-grid/transaction-order-confirmation-grid/style/material.scss

@@ -0,0 +1,3 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

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

@@ -0,0 +1,4 @@
+import { TransactionGridBaseComponent } from "../../core/base/transaction-grid-base.component";
+export declare class TransactionOrderConfirmationGridComponent extends TransactionGridBaseComponent {
+    showClass(): boolean;
+}

package/lib/component/transaction-grid/transaction-order-confirmation-grid/transaction-order-confirmation-grid.module.d.ts

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

package/lib/component/transaction-grid/transaction-received-goods-grid/style/_layout.scss

@@ -0,0 +1,6 @@
+@import "../../../../style/mixin";
+
+@include export-module('cc-transaction-received-goods-grid-layout') {
+  .co-transaction-received-goods-grid {
+  }
+}

package/lib/component/transaction-grid/transaction-received-goods-grid/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../../style/mixin";
+
+@include export-module('cc-transaction-received-goods-grid-theme') {
+  .co-transaction-received-goods-grid {
+  }
+}

package/lib/component/transaction-grid/transaction-received-goods-grid/style/material.scss

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

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

@@ -0,0 +1,37 @@
+import { OnDestroy, OnInit } from "@angular/core";
+import { TransactionGridBaseComponent } from "../../core/base/transaction-grid-base.component";
+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-grid/transaction-received-goods-grid/transaction-received-goods-grid.module.d.ts

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

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

@@ -0,0 +1,40 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-header-layout') {
+  .co-transaction-header {
+    display: block;
+    font-family: $tp-co-transaction-header-font-family;
+    font-size: $tp-co-transaction-header-font-size;
+    .transaction-header-wrapper {
+      display: flex;
+      flex-direction: row;
+      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;
+
+      .collapse-handle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid;
+        border-radius: 25px;
+        width: 45px;
+        height: 30px;
+        opacity: 0.3;
+        margin-right: 25px;
+        .collapse-icon {
+          width: 40px;
+          height: 40px;
+          transition: all 0.2s;
+        }
+        &.expanded {
+          .collapse-icon {
+            transform: rotate(180deg);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+$tp-co-transaction-header-font-family: $tp-font-family !default;
+$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-border-color: $tp-color-border !default;
+$tp-co-transaction-header-gap: 20px !default;

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

@@ -0,0 +1,11 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-header-theme') {
+  .co-transaction-header {
+    color: $tp-co-transaction-header-font-color;
+    background-color: $tp-co-transaction-header-background-color;
+    .transaction-header-wrapper {
+      border-color: $tp-co-transaction-header-border-color;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../transaction-header-relation/style/material";
+@import "../../transaction-header-order/style/material";
+@import "../../transaction-header-delivery/style/material";
+@import "../../transaction-header-payment/style/material";

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

@@ -0,0 +1,10 @@
+import { Icon } from "../../../enum/icon.enum";
+import { TransactionInfoResponse } from "@colijnit/transactionapi/build/model/transaction-info-response.bo";
+export declare class TransactionHeaderComponent {
+    readonly icons: typeof Icon;
+    set transaction(value: TransactionInfoResponse);
+    get transaction(): TransactionInfoResponse;
+    showClass(): boolean;
+    relationId: number;
+    private _transaction;
+}

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

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