@colijnit/transaction 12.1.7 → 12.1.10

package/lib/component/tile/tile.component.d.ts

@@ -0,0 +1,6 @@
+import { EventEmitter } from "@angular/core";
+export declare class TileComponent {
+    selected: boolean;
+    selectedChange: EventEmitter<boolean>;
+    showClass(): boolean;
+}

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

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

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

@@ -0,0 +1,31 @@
+@import "../../../style/mixin";
+
+@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;
+      }
+    }
+    .transaction-footer-wrapper {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      margin: $tp-transaction-totals-margin;
+      .transaction-totals-wrapper {
+        width: 300px;
+      }
+    }
+    .transaction-lines-header {
+      display: flex;
+      justify-content: space-between;
+      margin: 10px 0 10px 0;
+    }
+  }
+}

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,11 @@
+@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";
+@import "../../transaction-commit-bar/style/material";
+@import "../../transaction-nav-bar/style/material";
+@import "../../transaction-line-side-panel/style/material";

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

@@ -0,0 +1,39 @@
+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";
+import { TabCategory } from "../../enum/tab-category.enum";
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+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);
+    showHeader: boolean;
+    showClass(): boolean;
+    activeViewMode: ContentViewMode;
+    activeTabCategory: TabCategory;
+    showDiscountsSidebar: boolean;
+    showSidePanel: boolean;
+    sidePanelTransactionLine: TransactionLineInfo;
+    private _subs;
+    private _transaction;
+    constructor(iconCacheService: IconCacheService, _service: TransactionService);
+    ngOnDestroy(): void;
+    addDiscount(): void;
+    saveTransactionLine(transactionAddTextLineRequest: TransactionAddTextLineRequest): void;
+    handleNavigationTabClicked(tab: TabCategory): void;
+    handleShowSidePanel(event: {
+        show: boolean;
+        line: TransactionLineInfo;
+    }): void;
+    handleCloseSidePanel(event: MouseEvent): void;
+    openSidePanel(): void;
+}

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

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

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

@@ -0,0 +1,16 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-commit-bar') {
+  .co-transaction-commit-bar {
+    width: 36%;
+
+    .commit-bar-wrapper {
+      display: flex;
+      align-items: center;
+    }
+
+    .commit-bar-item {
+      margin-right: 12px;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+$tp-transaction: $tp-font-family !default;

package/lib/component/transaction-commit-bar/style/_theme.scss

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

package/lib/component/transaction-commit-bar/style/material.scss

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

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

@@ -0,0 +1,11 @@
+import { EventEmitter } from "@angular/core";
+import { TabCategory } from "../../enum/tab-category.enum";
+export declare class TransactionCommitBarComponent {
+    readonly tabCategory: typeof TabCategory;
+    activeCategory: TabCategory;
+    commitDate: Date;
+    commitReferenceId: number;
+    packingSlipId: number;
+    checkboxValueChanged: EventEmitter<boolean>;
+    showClass(): boolean;
+}

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

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

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

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

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

@@ -0,0 +1 @@
+$tp-transaction: $tp-font-family !default;

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

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

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

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

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

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

package/lib/component/transaction-confirmation-history/transaction-confirmation-history.module.d.ts

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

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,12 @@
+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;
+    expanded: boolean;
+    relationId: number;
+    private _transaction;
+    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-history-grid/style/_layout.scss

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { QueryList } from "@angular/core";
+import { TabCategory } from "../../enum/tab-category.enum";
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { SimpleGridColumnDirective } from "@colijnit/corecomponents_v12";
+import { StatusType } from "../../enum/status-type.enum";
+export declare class TransactionHistoryGridComponent {
+    readonly tabCategory: typeof TabCategory;
+    readonly statusType: typeof StatusType;
+    set content(columnComponents: QueryList<SimpleGridColumnDirective>);
+    transactionLines: TransactionLineInfo[];
+    showClass(): boolean;
+    extraColumns: SimpleGridColumnDirective[];
+    handleSelectRow(row: any): void;
+}

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

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

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

@@ -0,0 +1,28 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-history-grid-status-layout') {
+  .co-transaction-history-grid-status {
+    .transaction-status-indication {
+      display: flex;
+      width: 130px;
+      border-radius: 22px;
+      height: 44px;
+      background: white;
+      border: 1px solid #dce4ea;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .status-color-circle {
+      height: 12px;
+      width: 12px;
+      border-radius: 6px;
+      background: #dce4ea;
+      margin-right: 10px;
+    }
+
+    .status-text {
+      //font-family:
+    }
+  }
+}