@colijnit/transaction 12.1.12 → 12.1.15

package/lib/component/{seller-information/seller-information.component.d.ts → avatar/avatar.component.d.ts}

@@ -1,6 +1,6 @@
 import { TransactionService } from "../../service/transaction.service";
 import { RelationListObject } from "@colijnit/transactionapi/build/model/relation-list-object.bo";
-export declare class SellerInformationComponent {
+export declare class AvatarComponent {
     private _service;
     set relationId(value: number);
     get relationId(): number;

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

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

package/lib/component/{seller-information → avatar}/style/_layout.scss

@@ -1,13 +1,13 @@
 @import "../../../style/mixin";
 
-@include export-module('co-seller-information-layout') {
-  .co-seller-information {
+@include export-module('co-avatar-layout') {
+  .co-avatar {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-family: $tp-co-seller-information-font-family;
-    height: $tp-co-seller-information-image-size;
-    width: $tp-co-seller-information-image-size;
+    font-family: $tp-co-avatar-font-family;
+    height: $tp-co-avatar-image-size;
+    width: $tp-co-avatar-image-size;
     border-radius: 50%;
     background: #0084de; // todo make dynamic
     svg {

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

@@ -0,0 +1,2 @@
+$tp-co-avatar-font-family: $tp-font-family !default;
+$tp-co-avatar-image-size: 50px !default;

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

@@ -0,0 +1,7 @@
+@import "../../../style/mixin";
+@import "./material-definition";
+
+@include export-module('co-avatar-theme') {
+  .co-avatar {
+  }
+}

package/lib/component/{order-confirmation-grid → avatar}/style/material.scss

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

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

@@ -9,10 +9,8 @@ import { TransactionService } from "../../../service/transaction.service";
 import { TextValueContainer } from "../../../model/text-value-container";
 import { DictionaryService } from "../../../service/dictionary.service";
 import { TransactionInfoResponse } from "@colijnit/transactionapi/build/model/transaction-info-response.bo";
-import { SetTransactionDeliveryOptionsRequest } from "@colijnit/transactionapi/build/model/set-transaction-delivery-options-request.bo";
 import { Icon } from "../../../enum/icon.enum";
 import { BusinessObjectFactory } from "../../../factory/business-object-factory";
-import { DeliveryType } from "../../../model/delivery-type";
 import { IconCacheService } from "../../../service/icon-cache.service";
 export declare class CheckoutOverviewDeliveryEditComponent implements OnInit {
     private _dictionaryService;
@@ -21,12 +19,10 @@ export declare class CheckoutOverviewDeliveryEditComponent implements OnInit {
     service: TransactionService;
     iconService: IconCacheService;
     readonly icons: typeof Icon;
-    deliveryOptionsRequest: SetTransactionDeliveryOptionsRequest;
     transaction: TransactionInfoResponse;
     validSubmit: EventEmitter<void>;
     invalidSubmit: EventEmitter<void>;
     showClass(): boolean;
-    deliveryTypes: DeliveryType[];
     deliveryOptionList: DeliveryOption[];
     deliveryOptions: DeliveryOption[];
     deliveryOptionFields: TextValueContainer;
@@ -34,6 +30,7 @@ export declare class CheckoutOverviewDeliveryEditComponent implements OnInit {
     deliveryMethodFields: TextValueContainer;
     deliveryTypeIdx: number;
     changeLocationPopup: boolean;
+    transactionDefinitive: boolean;
     newAddress: Address;
     preferredDateOptions: TextValueContainer[];
     addressToEdit: Address;
@@ -55,7 +52,7 @@ export declare class CheckoutOverviewDeliveryEditComponent implements OnInit {
     constructor(_dictionaryService: DictionaryService, _formMasterService: FormMasterService, _boFactory: BusinessObjectFactory, service: TransactionService, iconService: IconCacheService);
     ngOnInit(): Promise<void>;
     submit(): boolean;
-    handleDeliveryMethodChange(deliveryMethodId: string): Promise<void>;
+    handleDeliveryMethodChange(deliveryMethod: DeliveryMethod): Promise<void>;
     setIndexDeliveryType(idx: number): void;
     selectDeliveryOptionsByDeliveryMethod(deliveryMethod: DeliveryMethod): DeliveryOption[];
     selectDeliveryMethodById(deliveryMethodId: string): DeliveryMethod;
@@ -63,6 +60,7 @@ export declare class CheckoutOverviewDeliveryEditComponent implements OnInit {
     changePreferredDeliveryDate2(preferredDateOption: string): void;
     onMarketingCodeChange(marketingCode: string): void;
     onChangeLocationCancelClick(): void;
+    handleTransactionDefinitive(definitive: boolean): Promise<void>;
     private calculateDeliveryCosts;
     private calculateAssemblyCosts;
 }

package/lib/component/checkout/checkout-overview-delivery-edit/style/material.scss

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

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

@@ -12,7 +12,6 @@ import { RelationListObject } from "@colijnit/transactionapi/build/model/relatio
 import { Address } from "@colijnit/transactionapi/build/model/address.bo";
 import { FormGroup } from "@angular/forms";
 import { BusinessObjectFactory } from "../../../factory/business-object-factory";
-import { SetTransactionDeliveryOptionsRequest } from "@colijnit/transactionapi/build/model/set-transaction-delivery-options-request.bo";
 import { Icon } from "../../../enum/icon.enum";
 export declare class CheckoutOverviewRelationEditComponent implements OnInit {
     private _service;
@@ -21,7 +20,6 @@ export declare class CheckoutOverviewRelationEditComponent implements OnInit {
     readonly icons: typeof Icon;
     relationForm: FormComponent;
     set relation(value: RelationAnyType);
-    deliveryOptionsRequest: SetTransactionDeliveryOptionsRequest;
     validSubmit: EventEmitter<void>;
     invalidSubmit: EventEmitter<void>;
     relationChange: EventEmitter<RelationAnyType>;

package/lib/component/checkout/checkout-overview-relation-edit/style/material.scss

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

package/lib/component/checkout/checkout-relation-suggestions-list/style/material.scss

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

package/lib/component/checkout/checkout-relation-suggestions-list-item/style/material.scss

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

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

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";
@@ -6,5 +5,5 @@
 @import "../checkout-overview-delivery-edit/style/material";
 @import "../../relation-address/style/material";
 @import "../../stepper/style/material";
-@import "../../seller-information/style/material";
+@import "../../avatar/style/material";
 @import "../../payment/style/material";

package/lib/component/confirmation-dialog/style/material.scss

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

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

@@ -0,0 +1,53 @@
+@import "../../../../../../style/mixin";
+
+@include export-module('cc-transaction-header-block-layout') {
+  .co-transaction-header-block {
+    font-family: $tp-transaction-header-block-font-family;
+    font-size: $tp-transaction-header-block-font-size;
+    display: flex;
+    flex-direction: column;
+    min-width: $tp-transaction-header-block-width;
+    padding: $tp-transaction-header-block-padding;
+    margin: $tp-transaction-header-block-margin;
+    overflow: hidden;
+    border: $tp-transaction-header-block-border;
+    border-width: $tp-transaction-header-block-border-width;
+    line-height: $tp-transaction-header-block-line-height;
+    border-radius: $tp-transaction-header-block-border-radius;
+    .transaction-header-block-header {
+      font-family: $tp-transaction-header-block-label-font-family;
+      font-size: $tp-transaction-header-block-label-font-size;
+      font-weight: $tp-transaction-header-block-label-font-weight;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin: $tp-transaction-header-block-header-margin;
+      justify-content: space-between;
+      min-height: $tp-transaction-header-block-header-min-height;
+    }
+    .transaction-header-content {
+      display: flex;
+      column-gap: 10px;
+    }
+    .transaction-header-block-content {
+      display: flex;
+      justify-content: space-between;
+      flex-basis: 1px;
+      column-gap: $tp-transaction-header-block-content-column-gap;
+      .transaction-header-block-content-first {
+        min-width: 130px;
+      }
+      .transaction-header-block-content-second {
+        min-width: 130px;
+      }
+      .transaction-header-block-content-third {
+        min-width: 130px;
+      }
+    }
+    .transaction-header-block-divider {
+      height: 70%;
+      width: 1px;
+      align-self: center;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+$tp-transaction-header-block-font-family: $tp-font-family !default;
+$tp-transaction-header-block-font-size: $tp-font-size !default;
+$tp-transaction-header-block-label-font-family: $tp-transaction-header-font-family !default;
+$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-min-height: 40px !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-width: 200px !default;
+$tp-transaction-header-block-margin: 0 !default;
+$tp-transaction-header-block-padding: 10px 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;
+$tp-transaction-header-block-border-width: 1px !default;
+$tp-transaction-header-block-line-height: 20px !default;

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { TemplateRef } from "@angular/core";
+export declare class TransactionHeaderBlockComponent {
+    headerBlockTemplate: TemplateRef<any>;
+    firstBlockTemplate: TemplateRef<any>;
+    secondBlockTemplate: TemplateRef<any>;
+    thirdBlockTemplate: TemplateRef<any>;
+    showClass(): boolean;
+}

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

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

package/lib/component/core/base/style/material.scss

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

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

@@ -0,0 +1,23 @@
+import { EventEmitter, QueryList } from "@angular/core";
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { Icon } from "../../../enum/icon.enum";
+import { ColumnAlign, SimpleGridColumnDirective } from "@colijnit/corecomponents_v12";
+import { TransactionImageService } from "../../../service/transaction-image.service";
+export declare abstract class TransactionGridBaseComponent {
+    protected imageService: TransactionImageService;
+    readonly icons: typeof Icon;
+    readonly align: typeof ColumnAlign;
+    set content(columnComponents: QueryList<SimpleGridColumnDirective>);
+    set transactionLines(value: TransactionLineInfo[]);
+    get transactionLines(): TransactionLineInfo[];
+    sidePanelClicked: EventEmitter<TransactionLineInfo>;
+    extraColumns: SimpleGridColumnDirective[];
+    private _transactionLines;
+    constructor(imageService: TransactionImageService);
+    handleDrop(data: {
+        from: number;
+        to: number;
+    }): void;
+    openSidePanel(line: TransactionLineInfo): void;
+    private _getImages;
+}

package/lib/component/core/characteristic-answer/characteristic-answer.component.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 /*
 @import "src/style/styles";
 

package/lib/component/core/icon/icon.component.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 /*
 @import "src/style/styles";
 

package/lib/component/core/image-display/style/material.scss

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

package/lib/component/core/stock-status-indicator/stock-status-indicator.component.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 /*
 @import "src/style/styles";
 

package/lib/component/delivery-type-tile/delivery-type-tile.component.d.ts

@@ -1,10 +1,8 @@
 import { EventEmitter } from "@angular/core";
-import { DeliveryType } from "../../model/delivery-type";
+import { DeliveryMethod } from "@colijnit/transactionapi/build/model/delivery-method.bo";
 export declare class DeliveryTypeTileComponent {
-    type: DeliveryType;
+    method: DeliveryMethod;
     selected: boolean;
-    selectedChange: EventEmitter<boolean>;
+    selectedChange: EventEmitter<DeliveryMethod>;
     showClass(): boolean;
-    deliveryTypeIdx: number;
-    setIndexDeliveryType(index: number): void;
 }

package/lib/component/delivery-type-tile/style/material.scss

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

package/lib/component/order-confirmation-create/style/material.scss

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

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

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

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

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

package/lib/component/relation-address/style/material.scss

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

package/lib/component/relation-address-select/style/material.scss

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

package/lib/component/relation-address-tile/style/material.scss

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

package/lib/component/shared/transaction-article-text/style/material.scss

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

package/lib/component/shared/transaction-article-text-overview/style/material.scss

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

package/lib/component/shopping-cart/style/material.scss

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

package/lib/component/shopping-cart-OLD/shopping-cart-manager/shopping-cart-manager.component.scss

@@ -1,4 +1,3 @@
-//@import "src/style/variables";
 //@import "src/style/styles";
 
 /*

package/lib/component/shopping-cart-preview/style/material.scss

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

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

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

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

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

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

@@ -2,17 +2,8 @@
 
 @include export-module('co-transaction-layout') {
   .co-transaction {
-    .transaction-view-mode-buttons {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-end;
-      align-items: center;
-      .view-button {
-        padding: 0;
-        height: $tp-transaction-view-mode-button-height;
-        border-radius: $tp-transaction-view-mode-button-border-radius;
-      }
-    }
+    display: block;
+    padding: $tp-transaction-padding;
     .transaction-footer-wrapper {
       display: flex;
       flex-direction: row;
@@ -24,8 +15,17 @@
     }
     .transaction-lines-header {
       display: flex;
-      justify-content: space-between;
-      margin: 10px 0 10px 0;
+      justify-content: flex-end;
+      align-items: center;
+      padding: $tp-transaction-transaction-lines-header-padding;
+      .transaction-lines-header-item {
+        flex-basis: 30%;
+      }
+    }
+    &.show-quick-access, &.show-button-bar {
+      .transaction-lines-header {
+        justify-content: space-between;
+      }
     }
   }
 }

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

@@ -1,7 +1,3 @@
-$tp-transaction-view-mode-button-height: 30px !default;
-$tp-transaction-view-mode-button-background-color: $tp-color-dark !default;
-$tp-transaction-view-mode-button-selected-background-color: $tp-color-action !default;
-$tp-transaction-view-mode-button-background-color-hover: $tp-color-light !default;
-$tp-transaction-view-mode-button-border-radius: 3px !default;
-
 $tp-transaction-totals-margin: 15px 0 !default;
+$tp-transaction-padding: 25px !default;
+$tp-transaction-transaction-lines-header-padding: 20px !default;

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

@@ -2,23 +2,5 @@
 
 @include export-module('co-transaction-theme') {
   .co-transaction {
-    .transaction-view-mode-buttons {
-      .view-button {
-        [fill] {
-          fill: $tp-transaction-view-mode-button-background-color;
-        }
-        &:hover {
-          [fill] {
-            fill: $tp-transaction-view-mode-button-background-color-hover;
-          }
-        }
-        &.selected {
-          background-color: $tp-transaction-view-mode-button-selected-background-color;
-          [fill] {
-            fill: $tp-transaction-view-mode-button-background-color-hover;
-          }
-        }
-      }
-    }
   }
 }

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

@@ -7,6 +7,8 @@ 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;
@@ -17,9 +19,11 @@ export declare class TransactionComponent implements OnDestroy {
     get transaction(): TransactionInfoResponse;
     set transactionId(value: number);
     showHeader: boolean;
+    showQuickAccess: boolean;
+    showButtonBar: boolean;
     showClass(): boolean;
     activeViewMode: ContentViewMode;
-    activeTabCategory: TabCategory;
+    activeCategory: TransactionTypeCategory;
     showDiscountsSidebar: boolean;
     showSidePanel: boolean;
     sidePanelTransactionLine: TransactionLineInfo;
@@ -29,11 +33,7 @@ export declare class TransactionComponent implements OnDestroy {
     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,47 @@
+@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;
+      column-gap: 3px;
+    }
+
+    .custom-button-wrapper {
+      padding: 2px;
+    }
+
+    .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 {
+        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,11 @@
+$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: 10px !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;

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;
+      }
+    }
+  }
+}