@colijnit/transaction 12.1.7 → 12.1.10

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { AfterViewInit, ElementRef } from "@angular/core";
+import { StatusType } from "../../enum/status-type.enum";
+export declare class TransactionHistoryGridStatusComponent implements AfterViewInit {
+    statusType: StatusType;
+    statusIndicator: ElementRef;
+    showClass(): boolean;
+    private _getStatusIndicatorColor;
+    ngAfterViewInit(): void;
+}

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

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

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,41 @@
+@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;
+      }
+    }
+    .transaction-line-show-sidebar-button {
+      co-icon [fill] {
+        fill: $tp-transaction-line-buttons-add-text-text-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+@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";
+@import "../../transaction-line-side-panel/style/material";

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

@@ -0,0 +1,52 @@
+import { EventEmitter } from "@angular/core";
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { StockStatus } from "@colijnit/transactionapi/build/enum/refcode/stock-status.enum";
+import { TransactionService } from "../../service/transaction.service";
+import { DictionaryService } from "../../service/dictionary.service";
+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 { DialogService } from "../../service/dialog.service";
+import { ResolveLinePendingReasonRequest } from "@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo";
+export declare class TransactionLineComponent {
+    service: TransactionService;
+    iconCacheService: IconCacheService;
+    private _dialogService;
+    private _dictionaryService;
+    readonly icons: typeof Icon;
+    preview: boolean;
+    set line(value: TransactionLineInfo);
+    get line(): TransactionLineInfo;
+    waitingForUserAction: EventEmitter<boolean>;
+    showSidePanelClicked: EventEmitter<boolean>;
+    isText: boolean;
+    isArticle: boolean;
+    isSelected: boolean;
+    showClass(): boolean;
+    localAmount: number;
+    image: string;
+    stock: StockStatus;
+    currentReason: ResolveLinePendingReasonRequest;
+    showTransactionArticleText: boolean;
+    showTransactionArticleTextOverview: boolean;
+    articleTextHeader: string;
+    textToEdit: string;
+    showSidePanel: boolean;
+    private _line;
+    constructor(service: TransactionService, iconCacheService: IconCacheService, _dialogService: DialogService, _dictionaryService: DictionaryService);
+    changeLineAmount(amount: number): void;
+    deleteTransactionLineClick(): Promise<void>;
+    handleTransactionArticleText(event: MouseEvent): void;
+    handleTransactionArticleTextOverview(event: MouseEvent): void;
+    saveTransactionArticleLineText(transactionAddTextLineRequest: TransactionAddTextLineRequest): void;
+    closeTransactionArticleText(event: MouseEvent): void;
+    closeTransactionArticleTextOverview(event: MouseEvent): void;
+    handleOpenArticleText(text: string): void;
+    private _loadLineImage;
+    private _showArticleTextDialog;
+    private _hideArticleTextDialog;
+    private _showArticleTextOverviewDialog;
+    private _hideArticleTextOverviewDialog;
+    handleShowSidePanel(event: MouseEvent): void;
+    handleCloseSidePanel(event: MouseEvent): void;
+}

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

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

package/lib/component/transaction-line-fields/transaction-line-commission-code.component.d.ts

@@ -0,0 +1,12 @@
+import { OnInit } from "@angular/core";
+import { TransactionLineFieldsBaseComponent } from "./transaction-line-fields-base.component";
+import { TransactionService } from "../../service/transaction.service";
+import { CoDomainValue } from "@colijnit/transactionapi/build/model/co-domain-value.bo";
+export declare class TransactionLineCommissionCodeComponent extends TransactionLineFieldsBaseComponent implements OnInit {
+    private _transactionService;
+    data: CoDomainValue[];
+    fields: Object;
+    constructor(_transactionService: TransactionService);
+    ngOnInit(): void;
+    commitCommissionCode(code: string): Promise<boolean>;
+}

package/lib/component/transaction-line-fields/transaction-line-commission-code.module.d.ts

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

package/lib/component/transaction-line-fields/transaction-line-delivery-date.component.d.ts

@@ -0,0 +1,7 @@
+import { TransactionLineFieldsBaseComponent } from "./transaction-line-fields-base.component";
+import { TransactionService } from "../../service/transaction.service";
+export declare class TransactionLineDeliveryDateComponent extends TransactionLineFieldsBaseComponent {
+    private _transactionService;
+    constructor(_transactionService: TransactionService);
+    commitDeliveryDate(date: Date): Promise<boolean>;
+}

package/lib/component/transaction-line-fields/transaction-line-delivery-date.module.d.ts

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

package/lib/component/transaction-line-fields/transaction-line-delivery-method.component.d.ts

@@ -0,0 +1,12 @@
+import { OnInit } from "@angular/core";
+import { TransactionLineFieldsBaseComponent } from "./transaction-line-fields-base.component";
+import { TransactionService } from "../../service/transaction.service";
+import { DeliveryMethod } from "@colijnit/transactionapi/build/model/delivery-method.bo";
+export declare class TransactionLineDeliveryMethodComponent extends TransactionLineFieldsBaseComponent implements OnInit {
+    private _transactionService;
+    data: DeliveryMethod[];
+    fields: Object;
+    constructor(_transactionService: TransactionService);
+    ngOnInit(): void;
+    commitDeliveryMethod(method: string): Promise<boolean>;
+}

package/lib/component/transaction-line-fields/transaction-line-delivery-method.module.d.ts

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

package/lib/component/transaction-line-fields/transaction-line-discount-amount.component.d.ts

@@ -0,0 +1,10 @@
+import { InputTextComponent } from "@colijnit/corecomponents_v12";
+import { TransactionLineFieldsBaseComponent } from "./transaction-line-fields-base.component";
+import { TransactionService } from "../../service/transaction.service";
+export declare class TransactionLineDiscountAmountComponent extends TransactionLineFieldsBaseComponent {
+    private _transactionService;
+    set child(content: any);
+    input: InputTextComponent;
+    constructor(_transactionService: TransactionService);
+    commitDiscount(discount: number): Promise<boolean>;
+}

package/lib/component/transaction-line-fields/transaction-line-discount-amount.module.d.ts

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

package/lib/component/transaction-line-fields/transaction-line-fields-base.component.d.ts

@@ -0,0 +1,6 @@
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+export declare abstract class TransactionLineFieldsBaseComponent {
+    set transactionLine(value: TransactionLineInfo);
+    get transactionLine(): TransactionLineInfo;
+    private _transactionLine;
+}

package/lib/component/transaction-line-fields/transaction-line-line-discount.component.d.ts

@@ -0,0 +1,10 @@
+import { InputTextComponent } from "@colijnit/corecomponents_v12";
+import { TransactionLineFieldsBaseComponent } from "./transaction-line-fields-base.component";
+import { TransactionService } from "../../service/transaction.service";
+export declare class TransactionLineLineDiscountComponent extends TransactionLineFieldsBaseComponent {
+    private _transactionService;
+    set child(content: any);
+    input: InputTextComponent;
+    constructor(_transactionService: TransactionService);
+    commitDiscount(discount: number): Promise<boolean>;
+}

package/lib/component/transaction-line-fields/transaction-line-line-discount.module.d.ts

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

package/lib/component/transaction-line-fields/transaction-line-price-list.component.d.ts

@@ -0,0 +1,12 @@
+import { OnInit } from "@angular/core";
+import { PriceList } from "@colijnit/transactionapi/build/model/price-list";
+import { TransactionLineFieldsBaseComponent } from "./transaction-line-fields-base.component";
+import { TransactionService } from "../../service/transaction.service";
+export declare class TransactionLinePriceListComponent extends TransactionLineFieldsBaseComponent implements OnInit {
+    private _transactionService;
+    data: PriceList[];
+    fields: Object;
+    constructor(_transactionService: TransactionService);
+    ngOnInit(): void;
+    commitPriceList(priceList: string): Promise<boolean>;
+}

package/lib/component/transaction-line-fields/transaction-line-price-list.module.d.ts

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

package/lib/component/transaction-line-fields/transaction-line-price.component.d.ts

@@ -0,0 +1,10 @@
+import { InputTextComponent } from "@colijnit/corecomponents_v12";
+import { TransactionLineFieldsBaseComponent } from "./transaction-line-fields-base.component";
+import { TransactionService } from "../../service/transaction.service";
+export declare class TransactionLinePriceComponent extends TransactionLineFieldsBaseComponent {
+    private _transactionService;
+    set child(content: any);
+    input: InputTextComponent;
+    constructor(_transactionService: TransactionService);
+    commitPrice(price: number): Promise<boolean>;
+}

package/lib/component/transaction-line-fields/transaction-line-price.module.d.ts

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

package/lib/component/transaction-line-fields/transaction-line-quantity.component.d.ts

@@ -0,0 +1,7 @@
+import { TransactionLineFieldsBaseComponent } from "./transaction-line-fields-base.component";
+import { TransactionService } from "../../service/transaction.service";
+export declare class TransactionLineQuantityComponent extends TransactionLineFieldsBaseComponent {
+    private _transactionService;
+    constructor(_transactionService: TransactionService);
+    commitQuantity(quantity: number): Promise<boolean>;
+}

package/lib/component/transaction-line-fields/transaction-line-quantity.module.d.ts

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

package/lib/component/transaction-line-fields/transaction-line-quantum-discount.component.d.ts

@@ -0,0 +1,10 @@
+import { InputTextComponent } from "@colijnit/corecomponents_v12";
+import { TransactionLineFieldsBaseComponent } from "./transaction-line-fields-base.component";
+import { TransactionService } from "../../service/transaction.service";
+export declare class TransactionLineQuantumDiscountComponent extends TransactionLineFieldsBaseComponent {
+    private _transactionService;
+    set child(content: any);
+    input: InputTextComponent;
+    constructor(_transactionService: TransactionService);
+    commitDiscount(discount: number): Promise<boolean>;
+}

package/lib/component/transaction-line-fields/transaction-line-quantum-discount.module.d.ts

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

package/lib/component/transaction-line-fields/transaction-line-reference.component.d.ts

@@ -0,0 +1,10 @@
+import { InputTextComponent } from "@colijnit/corecomponents_v12";
+import { TransactionLineFieldsBaseComponent } from "./transaction-line-fields-base.component";
+import { TransactionService } from "../../service/transaction.service";
+export declare class TransactionLineReferenceComponent extends TransactionLineFieldsBaseComponent {
+    private _transactionService;
+    set child(content: any);
+    input: InputTextComponent;
+    constructor(_transactionService: TransactionService);
+    commitReference(reference: string): Promise<boolean>;
+}

package/lib/component/transaction-line-fields/transaction-line-reference.module.d.ts

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

package/lib/component/transaction-line-fields/transaction-line-special-discount.component.d.ts

@@ -0,0 +1,10 @@
+import { InputTextComponent } from "@colijnit/corecomponents_v12";
+import { TransactionLineFieldsBaseComponent } from "./transaction-line-fields-base.component";
+import { TransactionService } from "../../service/transaction.service";
+export declare class TransactionLineSpecialDiscountComponent extends TransactionLineFieldsBaseComponent {
+    private _transactionService;
+    set child(content: any);
+    input: InputTextComponent;
+    constructor(_transactionService: TransactionService);
+    commitDiscount(discount: number): Promise<boolean>;
+}

package/lib/component/transaction-line-fields/transaction-line-special-discount.module.d.ts

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

package/lib/component/transaction-line-fields/transaction-line-vat.component.d.ts

@@ -0,0 +1,12 @@
+import { OnInit } from "@angular/core";
+import { Vat } from "@colijnit/transactionapi/build/model/vat";
+import { TransactionLineFieldsBaseComponent } from "./transaction-line-fields-base.component";
+import { TransactionService } from "../../service/transaction.service";
+export declare class TransactionLineVatComponent extends TransactionLineFieldsBaseComponent implements OnInit {
+    private _transactionService;
+    data: Vat[];
+    fields: Object;
+    constructor(_transactionService: TransactionService);
+    ngOnInit(): void;
+    commitVat(id: number): Promise<boolean>;
+}

package/lib/component/transaction-line-fields/transaction-line-vat.module.d.ts

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

package/lib/component/transaction-line-fields/transaction-line-warehouse.component.d.ts

@@ -0,0 +1,12 @@
+import { OnInit } from "@angular/core";
+import { TransactionLineFieldsBaseComponent } from "./transaction-line-fields-base.component";
+import { TransactionService } from "../../service/transaction.service";
+import { CoDomainValue } from "@colijnit/transactionapi/build/model/co-domain-value.bo";
+export declare class TransactionLineWarehouseComponent extends TransactionLineFieldsBaseComponent implements OnInit {
+    private _transactionService;
+    data: CoDomainValue[];
+    fields: Object;
+    constructor(_transactionService: TransactionService);
+    ngOnInit(): void;
+    commitWarehouse(warehouse: number): Promise<boolean>;
+}

package/lib/component/transaction-line-fields/transaction-line-warehouse.module.d.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+export declare class TransactionLineGridComponent {
+    transactionLines: TransactionLineInfo[];
+    showClass(): boolean;
+}

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

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

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

@@ -0,0 +1,64 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-line-side-panel-layout') {
+  .co-transaction-line-side-panel {
+    display: flex;
+    flex-direction: column;
+    font-family: $tp-transaction-line-side-panel-font-family;
+    font-size: $tp-transaction-line-side-panel-font-size;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: $tp-transaction-line-side-panel-width;
+    height: 100%;
+    z-index: 10;
+    box-shadow: $tp-transaction-line-side-panel-box-shadow;
+    padding: $tp-transaction-line-side-panel-padding;
+    background: white;
+
+    .transaction-line-side-panel-header {
+      display: flex;
+      justify-content: space-between;
+      .transaction-line-side-panel-header-item {
+        display: flex;
+        flex-direction: column;
+        row-gap: 5px;
+        .side-panel-header-label {
+          font-family: $tp-transaction-line-side-panel-header-label-font-family;
+          font-size: $tp-transaction-line-side-panel-header-label-font-size;
+        }
+      }
+      .side-panel-header-divider {
+        display: flex;
+        border-style: solid;
+        border-width: 0 1px 0 0;
+        width: 1px;
+        margin: 5px;
+      }
+      .close-button {
+        width: 30px;
+        height: 30px;
+      }
+    }
+    .transaction-line-side-panel-nav-bar {
+      display: flex;
+      justify-content: center;
+      padding: 20px;
+    }
+    .transaction-line-side-panel-content {
+      display: flex;
+      flex-direction: column;
+      flex-basis: 100%;
+      overflow-y: auto;
+    }
+    .save-cancel-wrapper {
+      display: flex;
+      justify-content: center;
+      padding: 30px;
+
+      .button-wrapper {
+        margin: 5px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+$tp-transaction-line-side-panel-font-family: $tp-font-family !default;
+$tp-transaction-line-side-panel-font-size: $tp-font-size !default;
+$tp-transaction-line-side-panel-width: 700px !default;
+$tp-transaction-line-side-panel-box-shadow: -3px 0px 16px 1px rgb(0, 0, 0, 0.2) !default;
+$tp-transaction-line-side-panel-padding: 10px !default;
+$tp-transaction-line-side-panel-header-label-font-family: $tp-font-family !default;
+$tp-transaction-line-side-panel-header-label-font-size: $tp-font-size-small !default;
+$tp-transaction-line-side-panel-header-divider-color: $tp-color-border !default;