@colijnit/transaction 12.1.7 → 12.1.8

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

@@ -0,0 +1,25 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-layout') {
+  .co-transaction {
+    .transaction-view-mode-buttons {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      .view-button {
+        padding: 0;
+        height: $tp-transaction-view-mode-button-height;
+        border-radius: $tp-transaction-view-mode-button-border-radius;
+      }
+    }
+    .transaction-footer-wrapper {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      margin: $tp-transaction-totals-margin;
+      .transaction-totals-wrapper {
+        width: 300px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+$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;

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

@@ -0,0 +1,24 @@
+@import "../../../style/mixin";
+
+@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

@@ -0,0 +1,8 @@
+@import "../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../transaction-header/style/material";
+@import "../../transaction-lines/style/material";
+@import "../../transaction-lines-grid/style/material";
+@import "../../transaction-totals/style/material";

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

@@ -0,0 +1,24 @@
+import { OnDestroy } from "@angular/core";
+import { TransactionInfoResponse } from "@colijnit/transactionapi/build/model/transaction-info-response.bo";
+import { TransactionService } from "../../service/transaction.service";
+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";
+export declare class TransactionComponent implements OnDestroy {
+    iconCacheService: IconCacheService;
+    private _service;
+    readonly viewModes: typeof ContentViewMode;
+    readonly icons: typeof Icon;
+    transaction: TransactionInfoResponse;
+    set transactionId(value: number);
+    showHeader: boolean;
+    showClass(): boolean;
+    activeViewMode: ContentViewMode;
+    showDiscountsSidebar: boolean;
+    private _subs;
+    constructor(iconCacheService: IconCacheService, _service: TransactionService);
+    ngOnDestroy(): void;
+    addDiscount(): void;
+    saveTransactionLine(transactionAddTextLineRequest: TransactionAddTextLineRequest): void;
+}

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

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

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

@@ -0,0 +1,38 @@
+@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;
+
+      .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/style/_material-definition.scss

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+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;
+    transaction: TransactionInfoResponse;
+    showClass(): boolean;
+    expanded: boolean;
+    handleExpandClick(event: MouseEvent): void;
+}

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

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

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

@@ -0,0 +1,25 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-header-contact-layout') {
+  .co-transaction-header-contact {
+    font-family: $tp-transaction-header-contact-font-family;
+    font-size: $tp-transaction-header-contact-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;
+    .transaction-header-first-section {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-family: $tp-transaction-header-contact-first-section-font-family;
+      font-size: $tp-transaction-header-contact-first-section-font-size;
+      font-weight: $tp-transaction-header-contact-first-section-font-weight;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+$tp-transaction-header-contact-font-family: $tp-transaction-header-font-family !default;
+$tp-transaction-header-contact-font-size: $tp-transaction-header-font-size !default;
+$tp-transaction-header-contact-font-color: $tp-transaction-header-font-color !default;
+$tp-transaction-header-contact-first-section-font-family: $tp-transaction-header-first-section-font-family !default;
+$tp-transaction-header-contact-first-section-font-size: $tp-transaction-header-first-section-font-size !default;
+$tp-transaction-header-contact-first-section-font-weight: $tp-transaction-header-first-section-font-weight !default;
+$tp-transaction-header-contact-first-section-font-color: $tp-transaction-header-first-section-font-color !default;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-header-delivery-layout') {
+  .co-transaction-header-delivery {
+    font-family: $tp-transaction-header-delivery-font-family;
+    font-size: $tp-transaction-header-delivery-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;
+    .transaction-header-first-section {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-family: $tp-transaction-header-delivery-first-section-font-family;
+      font-size: $tp-transaction-header-delivery-first-section-font-size;
+      font-weight: $tp-transaction-header-delivery-first-section-font-weight;
+      .transaction-header-delivery-icon {
+        position: absolute;
+        height: 40px;
+        width: 40px;
+        top: -12px;
+        left: -12px;
+      }
+      .transaction-header-delivery-date {
+        margin-left: 50px;
+      }
+    }
+    .transaction-header-content {
+      display: flex;
+      flex-direction: row;
+      position: relative;
+    }
+    .transaction-header-planning-request-icon-wrapper {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: $tp-transaction-header-delivery-planning-request-button-width;
+      height: $tp-transaction-header-delivery-planning-request-button-width;
+      border: $tp-transaction-header-delivery-planning-request-button-border;
+      border-radius: $tp-transaction-header-delivery-planning-request-button-border-radius;
+      .transaction-header-planning-request-icon {
+        width: $tp-transaction-header-delivery-planning-request-button-width;
+        height: $tp-transaction-header-delivery-planning-request-button-width;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+$tp-transaction-header-delivery-font-family: $tp-transaction-header-font-family !default;
+$tp-transaction-header-delivery-font-size: $tp-transaction-header-font-size !default;
+$tp-transaction-header-delivery-font-color: $tp-transaction-header-font-color !default;
+$tp-transaction-header-delivery-first-section-font-family: $tp-transaction-header-first-section-font-family !default;
+$tp-transaction-header-delivery-first-section-font-size: $tp-transaction-header-first-section-font-size !default;
+$tp-transaction-header-delivery-first-section-font-weight: $tp-transaction-header-first-section-font-weight !default;
+$tp-transaction-header-delivery-first-section-font-color: $tp-transaction-header-first-section-font-color !default;
+$tp-transaction-header-delivery-planning-request-button-width: 40px !default;
+$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: 5px !default;

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

@@ -0,0 +1,24 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-header-delivery-theme') {
+  .co-transaction-header-delivery {
+    color: $tp-transaction-header-delivery-font-color;
+    border-color: $tp-transaction-header-block-border-color;
+    .transaction-header-first-section {
+      color: $tp-transaction-header-delivery-first-section-font-color;
+      .transaction-header-delivery-icon {
+        [fill] {
+          fill: $tp-transaction-header-delivery-first-section-font-color;
+        }
+      }
+    }
+    .transaction-header-planning-request-icon-wrapper {
+      border-color: $tp-transaction-header-delivery-planning-request-button-border-color;
+    }
+    .transaction-header-planning-request-icon {
+      [fill] {
+        fill: $tp-transaction-header-delivery-planning-request-button-color;
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,13 @@
+import { TransactionBaseComponent } from "../core/base/transaction-base.component";
+import { Icon } from "../../enum/icon.enum";
+import { TransactionService } from "../../service/transaction.service";
+import { DeliveryMethod } from "@colijnit/transactionapi/build/model/delivery-method.bo";
+export declare class TransactionHeaderDeliveryComponent extends TransactionBaseComponent {
+    protected service: TransactionService;
+    readonly icons: typeof Icon;
+    showClass(): boolean;
+    deliveryMethod: DeliveryMethod;
+    deliveryMethods: DeliveryMethod[];
+    constructor(service: TransactionService);
+    transactionSet(): void;
+}

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

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

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

@@ -0,0 +1,25 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-header-relation-layout') {
+  .co-transaction-header-relation {
+    font-family: $tp-transaction-header-relation-font-family;
+    font-size: $tp-transaction-header-relation-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;
+    .transaction-header-first-section {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-family: $tp-transaction-header-relation-first-section-font-family;
+      font-size: $tp-transaction-header-relation-first-section-font-size;
+      font-weight: $tp-transaction-header-relation-first-section-font-weight;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+$tp-transaction-header-relation-font-family: $tp-transaction-header-font-family !default;
+$tp-transaction-header-relation-font-size: $tp-transaction-header-font-size !default;
+$tp-transaction-header-relation-font-color: $tp-transaction-header-font-color !default;
+$tp-transaction-header-relation-first-section-font-family: $tp-transaction-header-first-section-font-family !default;
+$tp-transaction-header-relation-first-section-font-size: $tp-transaction-header-first-section-font-size !default;
+$tp-transaction-header-relation-first-section-font-weight: $tp-transaction-header-first-section-font-weight !default;
+$tp-transaction-header-relation-first-section-font-color: $tp-transaction-header-first-section-font-color !default;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,143 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-line-layout') {
+  .co-transaction-line {
+    font-family: $tp-transaction-line-font-family;
+    font-size: $tp-transaction-line-font-size;
+    background-color: $tp-transaction-line-background-color;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    border: $tp-transaction-line-border;
+    justify-content: space-between;
+    padding: $tp-transaction-line-padding;
+    row-gap: $tp-transaction-line-row-gap;
+    border-width: $tp-transaction-line-border-width;
+    .transaction-line {
+      display: flex;
+      flex-direction: column;
+    }
+    .transaction-line-wrapper {
+      display: flex;
+      flex-direction: row;
+      column-gap: $tp-transaction-line-column-gap;
+    }
+    &.preview {
+      .transaction-line-wrapper {
+        align-items: center;
+      }
+    }
+    &:not(.preview) {
+      .transaction-line-wrapper {
+        min-height: $tp-transaction-line-min-height;
+      }
+    }
+    .transaction-line-image {
+      display: flex;
+      flex-basis: $tp-transaction-line-image-width;
+      height: $tp-transaction-line-image-height;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      &.preview {
+        flex-basis: $tp-transaction-line-preview-image-width;
+        height: $tp-transaction-line-preview-image-height;
+      }
+    }
+    .transaction-line-delete {
+      display: flex;
+      flex-basis: 50px;
+      .delete-wrapper {
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+      .delete-icon {
+        height: 20px;
+        width: 20px;
+      }
+    }
+    .transaction-line-description {
+      display: flex;
+      flex-direction: column;
+      row-gap: 10px;
+      flex-basis: 100%;
+      padding: $tp-transaction-line-inner-padding;
+    }
+    .transaction-line-stock {
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+      padding: $tp-transaction-line-inner-padding;
+    }
+    .transaction-line-amount {
+      display: flex;
+      height: $tp-transaction-line-amount-height;
+      flex-shrink: 0;
+      padding: $tp-transaction-line-inner-padding;
+      .amount-number-picker {
+        border-color: $tp-transaction-line-amount-input-border-color;
+        input {
+          width: $tp-transaction-line-amount-input-width;
+        }
+      }
+    }
+    &:not(.preview) {
+      .transaction-line-amount {
+        height: $tp-transaction-line-amount-height;
+      }
+    }
+    .transaction-line-totals {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      height: $tp-transaction-line-amount-height;
+      padding: $tp-transaction-line-inner-padding;
+    }
+    .transaction-line-buttons {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex-shrink: 0;
+      row-gap: 5px;
+      height: $tp-transaction-line-amount-height;
+      padding: $tp-transaction-line-inner-padding;
+      .circle {
+        height: 25px;
+        width: 25px;
+        co-icon {
+          height: 25px;
+          width: 25px;
+        }
+      }
+    }
+    .transaction-line-description-description {
+      font-weight: bold;
+    }
+    .transaction-line-description-divider {
+      margin: 0 10px;
+    }
+    .transaction-line-description-sku {
+    }
+    .article-text-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+    &.is-text {
+      .transaction-line {
+        min-height: $tp-transaction-line-article-text-min-height;
+      }
+    }
+  }
+  .article-text {
+    font-family: $tp-transaction-line-font-family;
+    font-size: $tp-transaction-line-article-text-font-size;
+    padding: $tp-transaction-line-article-text-padding;
+    background-color: $tp-transaction-line-background-color;
+  }
+  //.cdk-drop-list-dragging .drag-drop-list:not(.cdk-drag-placeholder) {
+  //  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  //}
+
+}

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

@@ -0,0 +1,29 @@
+$tp-transaction-line-font-family: $tp-font-family !default;
+$tp-transaction-line-font-size: $tp-font-size !default;
+$tp-transaction-line-background-color: white !default;
+$tp-transaction-line-min-height: 100px !default;
+$tp-transaction-line-article-text-min-height: 50px !default;
+$tp-transaction-line-padding: 10px !default;
+$tp-transaction-line-inner-padding: 10px !default;
+$tp-transaction-line-border: 1px solid !default;
+$tp-transaction-line-border-width: 0 0 1px 0 !default;
+$tp-transaction-line-border-color: $tp-color-action !default;
+$tp-transaction-line-image-border: 1px solid $tp-color-border !default;
+$tp-transaction-line-column-gap: 15px !default;
+$tp-transaction-line-row-gap: 15px !default;
+$tp-transaction-line-image-width: 125px !default;
+$tp-transaction-line-preview-image-width: 75px !default;
+$tp-transaction-line-image-height: 100px !default;
+$tp-transaction-line-preview-image-height: 50px !default;
+$tp-transaction-line-amount-height: 50px !default;
+$tp-transaction-line-amount-input-width: 50px !default;
+$tp-transaction-line-amount-input-border-color: $tp-color-border !default;
+$tp-transaction-line-delete-color: $tp-color-action !default;
+$tp-transaction-line-article-text-background-color: $tp-color-light-accent !default;
+$tp-transaction-line-article-text-color: $tp-color-dark !default;
+$tp-transaction-line-buttons-overview-background-color: $tp-color-active-light !default;
+$tp-transaction-line-buttons-overview-text-color: $tp-color-light !default;
+$tp-transaction-line-buttons-add-text-background-color: $tp-color-action !default;
+$tp-transaction-line-buttons-add-text-text-color: $tp-color-light !default;
+$tp-transaction-line-article-text-font-size: $tp-font-size-small !default;
+$tp-transaction-line-article-text-padding: 2px !default;

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

@@ -0,0 +1,36 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-line-theme') {
+  .co-transaction-line {
+    background-color: $tp-transaction-line-background-color;
+    border-color: $tp-transaction-line-border-color;
+    .transaction-line-image {
+      border: $tp-transaction-line-image-border;
+    }
+    .delete-icon {
+      [fill] {
+        fill: $tp-transaction-line-delete-color;
+      }
+    }
+    .delete-link {
+      font-weight: bold;
+      color: $tp-transaction-line-delete-color;
+    }
+    &.is-text {
+      background-color: $tp-transaction-line-article-text-background-color;
+      color: $tp-transaction-line-article-text-color;
+    }
+    .transaction-line-overview-button {
+      background-color: $tp-transaction-line-buttons-overview-background-color;
+      co-icon [fill] {
+        fill: $tp-transaction-line-buttons-overview-text-color;
+      }
+    }
+    .transaction-line-add-text-button {
+      background-color: $tp-transaction-line-buttons-add-text-background-color;
+      co-icon [fill] {
+        fill: $tp-transaction-line-buttons-add-text-text-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+@import "../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "lib/components/input-number-picker/style/material";
+@import "../../core/image-display/style/material";
+@import "../../shared/transaction-article-text/style/material";
+@import "../../shared/transaction-article-text-overview/style/material";